/* 공통 크롬 — 상단바 · 검색/로그인 모달 · 햄버거 · 맨위로 · 푸터 학교 랜딩(/index.html)과 공통 페이지가 함께 사용합니다. 색은 css/tokens.css 의 토큰만 참조하고, 학교별 값은 /theme.css 가 준다. */ .sw-rightgroup { display: flex; align-items: center; gap: 12px; } .sw-lang { display: flex; gap: 2px; padding: 4px; background: color-mix(in srgb, #fff 55%, transparent); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--sw-accent) 16%, transparent); border-radius: 999px; } .sw-langbtn { appearance: none; border: 0; cursor: pointer; background: transparent; font: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--sw-ink-soft); padding: 6px 12px; border-radius: 999px; transition: background .2s, color .2s; } .sw-langbtn:hover { color: var(--sw-ink); } .sw-langbtn.is-on { background: var(--sw-ink); color: #fff; } .sw-langbtn:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 2px; } /* 하단 여백: 마지막 섹션(Note Board)이 상단바 바로 아래까지 스크롤될 수 있어야 한다 */ .sb-foot { background: var(--sw-ink); color: color-mix(in srgb, #fff 82%, transparent); padding: clamp(48px, 7vh, 80px) clamp(20px, 6vw, 80px) clamp(150px, 18vh, 220px); } .sb-foot__top { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 72px); justify-content: space-between; } .sb-foot__brand { max-width: 34ch; } .sb-foot__cols { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); } .sb-foot__cols h4 { margin: 0 0 12px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, #fff 52%, transparent); } .sb-foot__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .sb-foot__cols a { text-decoration: none; font-size: .92rem; color: color-mix(in srgb, #fff 80%, transparent); } .sb-foot__cols a:hover { color: #fff; } /* Ebooks 섹션 이후 구간에서는 상단바를 불투명하게 (그 위 월드에서는 투명) */ #world .sw-topbar { background-color: transparent; transition: background-color .25s ease; } body.sb-solidbar #world .sw-topbar { background-color: #f4f4f4; } /* 상단 메뉴 항목 (엔진 .sw-nav__item 과 같은 생김새, 다른 클래스) */ .sb-menu__item { font: inherit; font-size: .82rem; color: var(--sw-ink-soft); border: 0; background: transparent; cursor: pointer; padding: 7px 14px; text-decoration: none; display: inline-flex; align-items: center; border-radius: 999px; white-space: nowrap; transition: color .25s, background .25s; } .sb-menu__item { display: inline-flex; align-items: center; gap: 6px; } /* 앞에 아이콘이 올 수 있다 */ .sb-menu__ic { flex: none; } .sb-menu__item.is-on .sb-menu__ic, .sb-menu__item:hover .sb-menu__ic { color: var(--sw-accent); } .sb-menu__item:hover { color: var(--sw-ink); } .sb-menu__item:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 2px; } /* 로그인 / 회원가입 */ .sb-auth { display: flex; align-items: center; gap: 8px; } .sb-auth__login, .sb-auth__signup { text-decoration: none; white-space: nowrap; font-size: .9rem; font-weight: 600; border-radius: 999px; transition: background .2s, color .2s; } .sb-auth__login { color: #fff; background: var(--sw-accent); padding: 10px 18px; } .sb-auth__login:hover { background: color-mix(in srgb, var(--sw-accent) 85%, #000); } .sb-auth__signup { color: #fff; background: var(--sw-ink); padding: 10px 20px; } .sb-auth__signup:hover { background: color-mix(in srgb, var(--sw-ink) 84%, #fff); } .sb-auth__login:focus-visible, .sb-auth__signup:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 2px; } /* 로그인 상태 전환 — 실제 인증은 없고 표시만 바꾸는 연출이다. 하나로 상단바와 햄버거 메뉴가 함께 바뀐다. */ .sb-auth__guest { display: flex; align-items: center; gap: 8px; } .sb-auth__user { display: none; align-items: center; gap: 8px; } html.is-signed-in .sb-auth__guest { display: none; } html.is-signed-in .sb-auth__user { display: flex; } .sb-auth__mypage, .sb-auth__cart, .sb-auth__logout { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; white-space: nowrap; font-size: .9rem; font-weight: 600; border-radius: 999px; transition: background .2s, color .2s, border-color .2s; } .sb-auth__ic { flex: none; } .sb-auth__mypage { color: #fff; background: var(--sw-ink); padding: 10px 18px; } .sb-auth__mypage:hover { background: color-mix(in srgb, var(--sw-ink) 84%, #fff); } /* 장바구니 — 투명 배경이면 밝은 영상/사진 위에서 테두리만 남아 잘 안 보인다. 흰 알약으로 채워 무대 위에서도 또렷하게 (마이페이지=먹색, 로그아웃=파랑과 함께 3단 대비). 테두리를 18% 로 남겨 둔 이유: 스크롤 시 상단바가 #f4f4f4 로 바뀌면 흰 알약과 배경의 명도 대비가 1.1:1 밖에 안 되므로, 그때는 이 테두리가 버튼의 윤곽을 잡아 준다. */ .sb-auth__cart { color: var(--sw-ink); background: #fff; padding: 9px 16px; border: 1px solid color-mix(in srgb, var(--sw-ink) 18%, transparent); } .sb-auth__cart:hover { background: color-mix(in srgb, var(--sw-ink) 7%, #fff); } /* 로그아웃 — 비로그인 상태의 로그인 버튼과 같은 파란 채움 */ .sb-auth__logout { color: #fff; background: var(--sw-accent); padding: 10px 18px; } .sb-auth__logout:hover { background: color-mix(in srgb, var(--sw-accent) 85%, #000); } .sb-auth__mypage:focus-visible, .sb-auth__cart:focus-visible, .sb-auth__logout:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 2px; } /* 햄버거 메뉴도 같은 상태를 따른다 */ .mm-list li[data-auth="user"] { display: none; } html.is-signed-in .mm-list li[data-auth="user"] { display: block; } html.is-signed-in .mm-list li[data-auth="guest"] { display: none; } /* ── 검색 ───────────────────────────────────────────────── */ .sb-search__toggle { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: .84rem; font-weight: 600; color: var(--sw-ink); background: color-mix(in srgb, #fff 55%, transparent); border: 1px solid color-mix(in srgb, var(--sw-accent) 16%, transparent); backdrop-filter: blur(10px); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: background .2s, color .2s; } .sb-search__toggle:hover { background: #fff; } .sb-search__toggle:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 2px; } .sb-search__toggle svg { flex: none; } .sb-search { position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center; padding: 112px clamp(12px, 3vw, 40px) clamp(24px, 5vh, 56px); background: color-mix(in srgb, #14141a 55%, transparent); opacity: 0; pointer-events: none; transition: opacity .22s ease; } .sb-search.is-open { opacity: 1; pointer-events: auto; } .sb-search__card { width: 100%; max-width: 1180px; min-width: 0; max-height: 100%; overflow: auto; background: #DCDCDC; border-radius: 28px; padding: clamp(26px, 3.4vw, 46px) clamp(22px, 3.6vw, 54px) clamp(32px, 4vw, 56px); transform: translateY(-14px) scale(.985); transition: transform .24s ease; } .sb-search.is-open .sb-search__card { transform: none; } .sb-search__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .sb-search__brand { display: inline-flex; align-items: center; gap: 11px; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 700; color: #1d1d1d; } .sb-search__mark { width: 30px; height: 31px; flex: none; background: var(--sw-brand-mark) center / contain no-repeat; } .sb-search__x { background: transparent; border: 0; cursor: pointer; color: #1d1d1d; padding: 6px; border-radius: 50%; display: grid; place-items: center; transition: background .2s; } .sb-search__x:hover { background: color-mix(in srgb, #1d1d1d 10%, transparent); } .sb-search__x:focus-visible { outline: 2px solid #1d1d1d; outline-offset: 2px; } .sb-search__form { display: flex; align-items: center; gap: 10px; margin-top: clamp(26px, 4vh, 48px); background: #fff; border-radius: 999px; padding: 8px 8px 8px clamp(18px, 2.4vw, 32px); } .sb-search__srlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .sb-search__input { flex: 1; min-width: 0; font: inherit; font-size: clamp(1.05rem, 1.9vw, 1.45rem); color: #1d1d1d; background: transparent; border: 0; padding: 12px 0; } .sb-search__input::placeholder { color: #8a8a8a; } .sb-search__input:focus { outline: none; } .sb-search__form:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, #1d1d1d 22%, transparent); } .sb-search__go { display: inline-flex; align-items: center; gap: 10px; flex: none; font: inherit; font-size: clamp(.9rem, 1.2vw, 1rem); font-weight: 600; color: #fff; background: #1d1d1d; border: 0; border-radius: 999px; padding: clamp(12px, 1.6vw, 17px) clamp(18px, 2.2vw, 28px); cursor: pointer; transition: background .2s; } .sb-search__go:hover { background: #000; } .sb-search__go:focus-visible { outline: 2px solid #1d1d1d; outline-offset: 3px; } .sb-search__status { margin: 14px 2px 0; font-size: .88rem; font-weight: 500; color: #585959; min-height: 1.2em; } .sb-search__popular { margin: clamp(20px, 3vh, 34px) 2px 14px; font-size: .98rem; font-weight: 600; color: #1d1d1d; } .sb-search__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; } .sb-search__chip { font: inherit; font-size: clamp(.86rem, 1.1vw, .98rem); font-weight: 500; color: #1d1d1d; background: #fff; border: 0; border-radius: 999px; padding: 12px 22px; cursor: pointer; transition: background .2s, color .2s; } .sb-search__chip:hover { background: #1d1d1d; color: #fff; } .sb-search__chip:focus-visible { outline: 2px solid #1d1d1d; outline-offset: 2px; } .sb-hit--off { display: none !important; } /* ── 맨 위로 ─────────────────────────────────────────────── */ .sb-totop { position: fixed; right: clamp(14px, 2.4vw, 30px); bottom: clamp(20px, 4vh, 34px); z-index: 46; display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: .82rem; font-weight: 600; color: #fff; background: var(--sw-ink); border: 0; border-radius: 999px; padding: 11px 16px; cursor: pointer; box-shadow: 0 6px 20px color-mix(in srgb, var(--sw-ink) 30%, transparent); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, background .2s; } .sb-totop.is-on { opacity: 1; transform: none; pointer-events: auto; } .sb-totop:hover { background: color-mix(in srgb, var(--sw-ink) 84%, #fff); } .sb-totop:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 3px; } /* 브랜드 마크를 서울대 엠블럼으로 교체 (원본은 규격 시안이 함께 들어 있어 좌측 엠블럼만 잘라 사용) */ .sw-brand__mark { width: 27px; height: 28px; border-radius: 0; box-shadow: none; background: var(--sw-brand-mark) center / contain no-repeat; } /* 검색 필터가 걸린 동안만 나타나는 해제 버튼 */ .sb-clearfilter { position: fixed; left: 50%; transform: translateX(-50%) translateY(12px); bottom: clamp(20px, 4vh, 34px); z-index: 47; font: inherit; font-size: .84rem; font-weight: 600; color: #fff; background: var(--sw-ink); border: 0; border-radius: 999px; padding: 11px 20px; cursor: pointer; box-shadow: 0 6px 20px color-mix(in srgb, var(--sw-ink) 30%, transparent); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .sb-clearfilter.is-on { opacity: 1; transform: translateX(-50%); pointer-events: auto; } .sb-clearfilter:hover { background: color-mix(in srgb, var(--sw-ink) 84%, #fff); } /* ── 로그인/회원가입 (AuthSwitch 이식) ───────────────────── 원본의 전역 `*`, `body` 규칙은 페이지를 파괴하므로 제거하고 모든 선택자를 .as-modal 아래로 스코프했다. */ .as-modal { position: fixed; inset: 0; z-index: 61; display: grid; place-items: center; padding: clamp(12px, 3vh, 40px) clamp(12px, 3vw, 40px); background: color-mix(in srgb, #14141a 58%, transparent); opacity: 0; pointer-events: none; transition: opacity .22s ease; } .as-modal.is-open { opacity: 1; pointer-events: auto; } .as-modal *, .as-modal *::before, .as-modal *::after { box-sizing: border-box; } .as-container { position: relative; width: min(960px, 100%); height: 640px; max-height: 100%; background: #fff; border-radius: 20px; box-shadow: 0 25px 50px rgba(0,0,0,.2); overflow: hidden; } .as-container::before { content: ""; position: absolute; height: 2000px; width: 2000px; top: -10%; right: 48%; transform: translateY(-50%); background: linear-gradient(-45deg, var(--sw-accent) 0%, #282945 100%); transition: 1.8s ease-in-out; border-radius: 50%; z-index: 6; } .as-container.sign-up-mode::before { transform: translate(100%, -50%); right: 52%; } .as-forms { position: absolute; inset: 0; } .as-swap { position: absolute; top: 50%; left: 75%; transform: translate(-50%, -50%); width: 50%; transition: 1s .7s ease-in-out; display: grid; grid-template-columns: 1fr; z-index: 5; } .as-container.sign-up-mode .as-swap { left: 25%; } .as-form { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 3.2rem; transition: all .2s .7s; overflow: hidden; grid-column: 1/2; grid-row: 1/2; } .as-form--up { opacity: 0; z-index: 1; } .as-form--in { z-index: 2; } .as-container.sign-up-mode .as-form--up { opacity: 1; z-index: 2; } .as-container.sign-up-mode .as-form--in { opacity: 0; z-index: 1; } .as-title { font-size: 2rem; color: #444; margin: 0 0 10px; font-weight: 700; } /* 필드 애니메이션 (AnimatedLoginForm 이식): 라벨이 떠오르고 하단 바가 자라 필드를 채운다. 원본은 :valid 를 썼지만 type=email 이 부분 입력 중 무효가 되어 라벨이 되돌아온다. :not(:placeholder-shown) 로 바꿔 그 문제를 없앴다(입력에 placeholder=" " 필요). */ .as-input { position: relative; width: 100%; max-width: 330px; margin-top: 26px; } .as-input input { position: relative; width: 100%; padding: 20px 10px 10px; background: transparent; outline: none; border: none; box-shadow: none; font-family: inherit; font-size: 1em; letter-spacing: .03em; color: #1F2340; transition: .5s; z-index: 10; } .as-input span { position: absolute; left: 10px; top: 0; padding: 20px 0 10px; pointer-events: none; font-size: 1em; color: #8f8f8f; letter-spacing: .03em; transition: .5s; } .as-input input:focus ~ span, .as-input input:not(:placeholder-shown) ~ span { color: var(--sw-accent); transform: translateX(-10px) translateY(-30px); font-size: .74em; font-weight: 600; } .as-input i { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--sw-accent); border-radius: 4px; overflow: hidden; transition: .5s; pointer-events: none; z-index: 9; } .as-input input:focus ~ i, .as-input input:not(:placeholder-shown) ~ i { height: 44px; } .as-input input:focus, .as-input input:not(:placeholder-shown) { color: #fff; } .as-btn { width: 150px; background: var(--sw-accent); border: 0; outline: none; height: 49px; border-radius: 49px; color: #fff; text-transform: uppercase; font-weight: 600; margin: 10px 0; cursor: pointer; transition: .5s; font-size: .9rem; font-family: inherit; } .as-btn:hover { background: #32508F; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(59,92,169,.4); } .as-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .as-social-text { padding: .7rem 0; font-size: .95rem; color: #666; margin: 0; text-align: center; } .as-social { display: flex; justify-content: center; gap: 15px; } .as-icon { height: 46px; width: 46px; display: flex; justify-content: center; align-items: center; border: 1px solid #ddd; border-radius: 50%; transition: .3s; cursor: pointer; } .as-icon:hover { border-color: #282945; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,.1); } .as-panels { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(2, 1fr); } .as-panel { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-around; text-align: center; z-index: 6; } .as-panel--left { pointer-events: all; padding: 3rem 17% 2rem 12%; } .as-panel--right { pointer-events: none; padding: 3rem 12% 2rem 17%; } .as-container.sign-up-mode .as-panel--left { pointer-events: none; } .as-container.sign-up-mode .as-panel--right { pointer-events: all; } .as-content { color: #fff; transition: transform .9s ease-in-out; transition-delay: .6s; } .as-panel--right .as-content { transform: translateX(800px); } .as-container.sign-up-mode .as-panel--left .as-content { transform: translateX(-800px); } .as-container.sign-up-mode .as-panel--right .as-content { transform: translateX(0); } .as-content h3 { font-weight: 600; line-height: 1.1; font-size: 1.5rem; margin: 0 0 10px; } .as-content p { font-size: .93rem; padding: .7rem 0; margin: 0; } .as-btn--ghost { margin: 0; background: none; border: 2px solid #fff; width: 130px; height: 41px; font-weight: 600; font-size: .8rem; } .as-btn--ghost:hover { background: rgba(255,255,255,.1); transform: translateY(-2px); box-shadow: none; } .as-x { position: absolute; top: 14px; right: 16px; z-index: 8; background: rgba(255,255,255,.9); border: 0; cursor: pointer; color: #444; padding: 8px; border-radius: 50%; line-height: 0; transition: background .2s; } .as-x:hover { background: #fff; } .as-x:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 2px; } .as-demo { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 7; margin: 0; text-align: center; font-size: 11px; color: #9aa; pointer-events: none; } /* 약관 동의 */ .as-agree { width: 100%; max-width: 330px; margin-top: 22px; } .as-agree__row { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; } .as-agree__box { flex: none; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--sw-accent); cursor: pointer; } .as-agree__label { font-size: .82rem; color: #555; line-height: 1.45; } .as-agree__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0 27px; } .as-doclink { font: inherit; font-size: .76rem; font-weight: 600; color: var(--sw-accent); background: transparent; border: 0; padding: 3px 0; cursor: pointer; border-bottom: 1px solid currentColor; } .as-doclink:hover { color: #282945; } .as-doclink:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 3px; } .as-agree__err { margin: 8px 0 0; font-size: .76rem; color: #C0392B; min-height: 1em; } /* 문서 뷰어 (약관 / 개인정보처리방침) */ .as-doc { position: absolute; inset: 0; z-index: 9; background: #fff; border-radius: 20px; display: flex; flex-direction: column; padding: 26px clamp(20px, 4vw, 46px) 22px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease; } .as-doc.is-on { opacity: 1; pointer-events: auto; transform: none; } .as-doc__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid #ececf2; } .as-doc__title { margin: 0; font-size: 1.25rem; font-weight: 700; color: #1F2340; } .as-doc__back { font: inherit; font-size: .84rem; font-weight: 600; color: var(--sw-accent); background: transparent; border: 0; cursor: pointer; padding: 6px 2px; } .as-doc__back:hover { color: #282945; } .as-doc__note { margin: 12px 0 0; font-size: .74rem; font-weight: 600; color: #C0392B; } .as-doc__body { flex: 1; overflow-y: auto; margin-top: 10px; padding-right: 6px; font-size: .84rem; line-height: 1.75; color: #55566b; } .as-doc__body h4 { margin: 16px 0 6px; font-size: .88rem; color: #1F2340; } .as-doc__body p { margin: 0; } /* ── 햄버거 메뉴 (세로형 좁은 화면 전용) ───────────────────── 세로형 폰·태블릿, 또는 아주 좁은 창에서만 동작한다. 가로형(폰 가로 포함, 640px 초과)은 기존 메뉴 구성을 그대로 쓴다. */ .mm-btn { display: none; width: 40px; height: 40px; padding: 0; cursor: pointer; align-items: center; justify-content: center; border-radius: 999px; background: color-mix(in srgb, #fff 55%, transparent); border: 1px solid color-mix(in srgb, var(--sw-accent) 16%, transparent); backdrop-filter: blur(10px); color: var(--sw-ink); transition: background .2s; } .mm-btn:hover { background: #fff; } .mm-btn:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 2px; } .mm-btn i { position: relative; display: block; width: 17px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease, background .25s ease; } .mm-btn i::before, .mm-btn i::after { content: ""; position: absolute; left: 0; width: 17px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease; } .mm-btn i::before { top: -6px; } .mm-btn i::after { top: 6px; } .mm-btn[aria-expanded="true"] i { background: transparent; } .mm-btn[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); } .mm-btn[aria-expanded="true"] i::after { transform: translateY(-6px) rotate(-45deg); } /* 다크 패널 · 아이콘 열 + 라벨 · 행마다 구분선 (구분선은 라벨 아래에만 그어 아이콘 열만큼 들여쓰기된다) */ .mm-panel { position: fixed; left: 0; right: 0; z-index: 48; display: none; background: var(--sw-ink); box-shadow: 0 14px 34px rgba(20,20,26,.28); padding: 6px clamp(16px, 5vw, 26px) 18px; transform: translateY(-10px); opacity: 0; pointer-events: none; transition: transform .24s ease, opacity .24s ease; } .mm-panel.is-open { transform: none; opacity: 1; pointer-events: auto; } .mm-list { list-style: none; margin: 0; padding: 0; } .mm-item { display: flex; align-items: center; gap: 16px; width: 100%; box-sizing: border-box; text-align: left; font: inherit; font-size: 1rem; font-weight: 500; color: #fff; background: transparent; border: 0; cursor: pointer; padding: 16px 4px; transition: color .18s; } .mm-item__ic { flex: none; width: 26px; display: grid; place-items: center; color: color-mix(in srgb, #fff 88%, transparent); transition: color .18s; } .mm-item:hover .mm-item__ic { color: var(--orange, #E8622C); } .mm-item__label { position: relative; flex: 1; padding-bottom: 16px; } .mm-item__label::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: color-mix(in srgb, #fff 22%, transparent); } .mm-item:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 8px; } .mm-item--accent .mm-item__ic { color: var(--orange, #E8622C); } .mm-item--accent .mm-item__label { font-weight: 700; } .mm-foot { margin: 18px 4px 0; text-align: right; font-size: .72rem; line-height: 1.7; color: color-mix(in srgb, #fff 42%, transparent); } .mm-foot b { display: block; font-weight: 700; color: color-mix(in srgb, #fff 62%, transparent); } .mm-scrim { position: fixed; inset: 0; z-index: 47; display: none; background: color-mix(in srgb, #14141a 32%, transparent); opacity: 0; pointer-events: none; transition: opacity .24s ease; } .mm-scrim.is-open { opacity: 1; pointer-events: auto; } /* 버튼 내부의 장식 요소는 클릭 대상에서 제외한다. (SVG 자식이 e.target 이 되면 target 비교 기반 로직이 어긋날 수 있다) */ .sb-search__x svg, .sb-search__x svg *, .as-x svg, .as-x svg *, .mm-btn i, .mm-btn i::before, .mm-btn i::after, .eb-arrow svg, .eb-arrow svg *, .sb-totop svg, .sb-search__toggle svg, .sb-search__go svg, .bd-ico svg, .mm-item__ic, .mm-item__ic svg, .mm-item__ic svg * { pointer-events: none; } /* [중요] 닫힌 오버레이가 클릭을 가로채지 못하게 한다. 1) .as-modal/.sb-search 는 display:grid 라서 hidden 속성의 display:none 을 덮어쓴다. 2) 부모에 pointer-events:none 을 줘도 자식(.as-panel--left 등)이 all 로 되살린다. 두 경우 모두 닫힌 모달이 화면 위를 덮어 히어로 구간의 버튼이 눌리지 않는 원인이 된다. */ .as-modal[hidden], .sb-search[hidden], .mm-panel[hidden] { display: none !important; } .as-modal:not(.is-open), .as-modal:not(.is-open) *, .sb-search:not(.is-open), .sb-search:not(.is-open) *, .mm-panel:not(.is-open), .mm-panel:not(.is-open) *, .mm-scrim:not(.is-open) { pointer-events: none !important; } /* 푸터 회사 정보 */ /* 흰 배경 라운드 패널 안에 컬러 심볼 + 워드마크를 얹은 로고 락업 */ .sb-foot__id { display: inline-flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 12px 16px 12px 12px; } .sb-foot__logo { width: 46px; height: auto; flex: none; } .sb-foot__name { font-size: 1.42rem; font-weight: 800; color: #1B1D2E; letter-spacing: -.02em; line-height: 1; } .sb-foot__name-alt { color: #E8622C; } .sb-foot__line { margin: 0; font-size: .84rem; line-height: 1.85; color: color-mix(in srgb, #fff 68%, transparent); } /* 로고 패널과 첫 줄(CEO) 사이 간격을 줄과 줄 사이 간격(15.5px)과 맞춘다. 첫 줄은 자기 위쪽에 이미 4.5px 의 반쪽 리딩을 갖고 있으므로 나머지 11px 만 채운다. (:first-of-type 은 형제 중 첫

인 eyebrow 를 가리켜 매치되지 않았다) */ .sb-foot__id + .sb-foot__line { margin-top: 11px; } .sb-foot__sep { display: inline-block; padding: 0 9px; color: color-mix(in srgb, #fff 30%, transparent); } .sb-foot__line a { color: inherit; text-decoration: none; } .sb-foot__line a:hover { color: #fff; } .sb-foot__copy { margin: 18px 0 0; font-size: .78rem; letter-spacing: .02em; color: color-mix(in srgb, #fff 46%, transparent); } /* ── 푸터 ─────────────────────────────────────────────── */ .sb-foot { background: var(--sw-ink); color: color-mix(in srgb, #fff 82%, transparent); padding: clamp(48px, 7vh, 80px) clamp(20px, 6vw, 80px) clamp(120px, 15vh, 180px); } .sb-foot__top { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 72px); justify-content: space-between; } .sb-foot__company { max-width: 46ch; } .sb-foot__eyebrow--op { position: relative; margin: 0 0 16px; padding-top: 14px; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #E8622C; } .sb-foot__eyebrow--op::before { content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 3px; border-radius: 2px; background: #E8622C; } .sb-foot__line { margin: 0; font-size: .84rem; line-height: 1.9; color: color-mix(in srgb, #fff 68%, transparent); } .sb-foot__line + .sb-foot__line { margin-top: 6px; } .sb-foot__line:first-of-type { margin-top: 18px; } /* ── 반응형 (index3에서 이관) ── */ @media (max-width: 860px) { .sw-langbtn { padding: 6px 9px; font-size: .72rem; } } @media (max-width: 860px) { .sb-search__toggleLabel { display: none; } .sb-search__toggle { padding: 8px 10px; } .sb-totop__label { display: none; } .sb-totop { padding: 12px; bottom: calc(clamp(16px, 3vh, 28px) + env(safe-area-inset-bottom)); } .sb-search__go { padding: 12px 16px; } } @media (max-width: 870px) { .as-container { height: min(760px, 100%); } .as-swap { width: 100%; top: 95%; transform: translate(-50%, -100%); transition: 1s .8s ease-in-out; left: 50%; } .as-container.sign-up-mode .as-swap { left: 50%; top: 5%; transform: translate(-50%, 0); } .as-panels { grid-template-columns: 1fr; grid-template-rows: 1fr 2fr 1fr; } .as-panel { flex-direction: row; justify-content: space-around; align-items: center; padding: 2rem 8%; grid-column: 1/2; } .as-panel--left { grid-row: 1/2; } .as-panel--right { grid-row: 3/4; } .as-content { padding-right: 15%; transition-delay: .8s; } .as-content h3 { font-size: 1.15rem; } .as-content p { font-size: .72rem; padding: .5rem 0; } .as-btn--ghost { width: 110px; height: 35px; font-size: .7rem; } .as-container::before { width: 1500px; height: 1500px; transform: translateX(-50%); left: 30%; bottom: 68%; right: initial; top: initial; transition: 2s ease-in-out; } .as-container.sign-up-mode::before { transform: translate(-50%, 100%); bottom: 32%; right: initial; } .as-container.sign-up-mode .as-panel--left .as-content { transform: translateY(-300px); } .as-panel--right .as-content { transform: translateY(300px); } .as-container.sign-up-mode .as-panel--right .as-content { transform: translateY(0); } } @media (max-width: 570px) { .as-form { padding: 0 1.2rem; } .as-content { padding: .5rem 1rem; } .as-title { font-size: 1.6rem; } } @media (prefers-reduced-motion: reduce) { .as-container::before, .as-swap, .as-content, .as-form { transition-duration: .01ms !important; } } @media (max-width: 860px) and (orientation: portrait), (max-width: 640px) { .mm-btn { display: flex; } .mm-panel, .mm-scrim { display: block; } /* 고정 노출: 로고 · 검색 · 언어. 나머지는 햄버거 안으로 */ .sw-nav { display: none; } .sb-auth { display: none; } .sw-brand__name { display: inline; font-size: .96rem; } .sw-topbar { padding-left: 14px; padding-right: 14px; gap: 8px; } .sb-search__toggle { padding: 8px 10px; } } @media (max-width: 640px) { .sb-foot__sep { display: block; height: 0; overflow: hidden; padding: 0; } } /* ── 브랜드 라벨 — 폭에 따라 전체 명칭 ↔ 짧은 이름 ────────────── 모바일 상단바에서는 전체 명칭이 들어갈 자리가 없어 그동안 숨겨 왔다. 짧은 이름(SNU Korean / 서울대 한국어)으로 바꿔 끼워 항상 보이게 한다. */ .sw-brand__short { display: none; font-weight: 700; white-space: nowrap; } @media (max-width: 860px) { .sw-brand__name { display: none; } .sw-brand__short { display: inline; font-size: .96rem; } .sw-brand { gap: 8px; } } /* 그래도 자리가 모자라는 폭에서는 이름을 남기고 로고 마크를 접는다. 360·375·400px 에서는 마크를 두어도 넘치지 않고, 320px 에서만 12px 넘쳤다(한국어 기준). */ @media (max-width: 340px) { .sw-brand__mark { display: none; } .sw-brand__short { font-size: .92rem; } }