/* ================================================================
DESIGN TOKENS — 값 정의는 resource/css/variables.css, 여기선 var()로 참조
색상/라운드는 아래 토큰에서만 선택 (하드코딩 금지)
자세한 정의: .claude/DESIGN.md · 스타일가이드: /styleguide.html
----------------------------------------------------------------
[브랜드 블루] 기본 var(--color-primary) · hover var(--color-primary-hover) · pressed var(--color-primary-pressed)
[뉴트럴 텍스트] ink var(--color-ink) · var(--color-gray-800) · var(--color-gray-700) · var(--color-gray-600) · var(--color-gray-500) · var(--color-gray-400)
[보더] 강 var(--color-border-strong) (입력/컨트롤) · 약 var(--color-border) (구분선/기본)
[서페이스] 기본 var(--color-surface) · 최연 var(--color-surface-light) · 쿨패널 var(--color-surface-cool) · 캔버스 var(--color-canvas)
[블루 틴트] 연 var(--color-tint-50) · 진 var(--color-tint-100) · 라인 var(--color-line)
[다크 서피스] bg var(--color-dark-bg) · 카드 var(--color-dark-surface) · 선 var(--color-dark-line) · 본문 var(--color-dark-text) · 보조 var(--color-dark-text-sub) · 앰버 강조 배경 var(--color-amber-dark-bg) (다크 섹션 전용 — 무료인강 히어로·영상 모달·데일리 학습 배너) · 그림자 var(--shadow-dark)
[시맨틱 배지] coral var(--color-coral)(bg var(--color-coral-bg)) · rec var(--color-amber)(bg var(--color-amber-bg))
new var(--color-badge-new) · mp3 var(--color-green)(bg var(--color-green-bg)) · free var(--color-violet)(bg var(--color-violet-bg))
[고정 브랜드] 유튜브 var(--color-youtube) · 인스타 var(--color-instagram) · MP3버튼 var(--color-mp3)(hover var(--color-mp3-hover))
[오버레이] 토스트 bg var(--color-toast-bg) (반투명 다크 네이비) · 딤 var(--color-overlay) (모달·시트·메가메뉴 뒤 — 알파 분기 금지)
[라운드] 0 · 4 · 6 · 8 · 12 · 14 · 16 · 999(pill) · 50%(circle)
[그림자] 표지 var(--shadow-cover) · soft var(--shadow-soft) · floating var(--shadow-floating) · 다크 var(--shadow-dark)
포커스 링 var(--shadow-focus-ring) · 파란빛 리프트 var(--shadow-lift-blue) / 강 var(--shadow-lift-blue-strong)
[상태] 비활성 opacity var(--opacity-disabled) (0.35 — 색 교체 없이 연하게 · 슬라이더 화살표)
[모션] transition var(--duration-base) var(--ease-default) · transform/opacity 만 사용
================================================================ */
/* ========== 스크롤 진입 리빌 — 메인의 스트립 배너부터 아래 섹션만 적용
(2026-07-24 전면 제거 사유였던 "첫 화면이 비어 보이는 문제"를 피하려고, 첫 화면에 걸리는 메인배너·퀵메뉴·베스트셀러는 제외한다.
마크업 훅 data-reveal/data-reveal-stagger 는 그대로 두고, main.js 옵저버가 화면에 들어온 요소에 .is-revealed 를 붙인다) ========== */
body[data-page="home"] .strip-banner[data-reveal]:not(.is-revealed), body[data-page="home"] .strip-banner ~ * [data-reveal]:not(.is-revealed), body[data-page="home"] .strip-banner ~ * [data-reveal-stagger]:not(.is-revealed) > * { opacity: 0; transform: translateY(16px); }
body[data-page="home"] .strip-banner[data-reveal], body[data-page="home"] .strip-banner ~ * [data-reveal], body[data-page="home"] .strip-banner ~ * [data-reveal-stagger] > * { transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { body[data-page="home"] .strip-banner[data-reveal], body[data-page="home"] .strip-banner ~ * [data-reveal], body[data-page="home"] .strip-banner ~ * [data-reveal-stagger] > * { transition: none; } }
/* ========== Layout ========== */
/* 스크롤바 자리를 항상 비워둔다 — 전체 메뉴·모달이 열릴 때 main.js가 body overflow 를 hidden 으로 잠그는데,
그 순간 스크롤바(15px)가 사라지면서 가운데 정렬된 .container 가 7px 밀려 화면이 좌우로 튀는 문제를 막는다.
(모바일·태블릿의 오버레이 스크롤바는 자리를 차지하지 않으므로 이 선언의 영향을 받지 않는다) */
html { scrollbar-gutter: stable; }
.container { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
/* ========== Family Bar ========== */
.family-bar { background: transparent; padding: 8px 0 2px 0; }
.family-bar_inner { display: flex; align-items: center; justify-content: space-between; }
.family-bar_utils { display: flex; align-items: center; gap: var(--space-base); }
.family-bar_util-link { font-size: var(--text-2xs); font-weight: var(--font-regular); color: var(--color-gray-700); letter-spacing: -0.2px; transition: color var(--duration-base) var(--ease-default); }
/* 학습지원·고객센터 롤오버 메뉴 — 상단 유틸의 하위 항목을 한 개로 묶음 (hover·키보드 focus 모두 펼침)
z-index 는 --z-submenu(120) — 전체 메뉴(--z-mega 110)가 열린 상태에서도 드롭다운이 위에 와야 한다.
(--z-dropdown 50 이면 메가 패널에 가려 아래쪽 항목이 보이지도 클릭되지도 않음) */
.family-cs { position: relative; }
.family-cs_trigger { display: inline-flex; align-items: center; gap: 2px; cursor: pointer; }
.family-cs_arrow { width: 12px; height: 12px; transition: transform var(--duration-base) var(--ease-default); }
.family-cs_menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-submenu); min-width: 150px; padding: var(--space-sm) 0; background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-floating); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--duration-base) var(--ease-default), transform var(--duration-base) var(--ease-default), visibility var(--duration-base) var(--ease-default); }
.family-cs:hover .family-cs_menu, .family-cs:focus-within .family-cs_menu { opacity: 1; visibility: visible; transform: translateY(0); }
.header:has(.family-cs:hover, .family-cs:focus-within) { z-index: 220; } /* 드롭다운이 우측 하단 마스코트(z 200·210) 아래로 잘리지 않게 롤오버 중에만 헤더를 위로 */
.family-cs:hover .family-cs_arrow, .family-cs:focus-within .family-cs_arrow { transform: scaleY(-1); } /* 화살표는 회전이 아닌 반전 (프로젝트 공통 관례) */
.family-cs_link { display: block; padding: 7px var(--space-base); font-size: var(--text-2xs); color: var(--color-gray-700); letter-spacing: -0.2px; white-space: nowrap; transition: color var(--duration-base) var(--ease-default), background var(--duration-base) var(--ease-default); }
.family-bar_group { display: inline-flex; align-items: center; gap: var(--space-xs); background: var(--color-surface-light); border-radius: var(--radius-md); padding: var(--space-xs); }
.family-bar_item { display: inline-flex; align-items: center; gap: 3px; padding: 0 13px; height: 26px; font-size: var(--text-xs); font-weight: var(--font-regular); color: var(--color-gray-600); border-radius: var(--radius-sm); transition: color var(--duration-base) var(--ease-default), background var(--duration-base) var(--ease-default); }
.family-bar_item-link { padding: 0 9px; }
.family-bar_item-active { font-weight: var(--font-semibold); color: var(--color-primary); background: var(--color-canvas); }
.family-bar_item-link svg, .family-bar_item-link img { width: 9px; height: 9px; opacity: 0.5; }
/* 기본 노출 상태에서는 첫 항목(어학시험)을 롤오버된 모습으로 보여 준다 — 패밀리 사이트가 있다는 걸 먼저 알린다.
그룹에 마우스가 들어오면(:not(:hover)가 풀리면서) 이 고정 강조가 사라지고 실제 올린 항목만 반응하며, 떠나면 다시 어학시험으로 돌아온다 */
.family-bar_group:not(:hover) .family-bar_item-link:first-child { color: var(--color-gray-700); background: var(--color-canvas); }
/* 계열사 세그먼트 탭(출판/어학원/인강/어학시험/북샘) — 좌측 노출, 유틸 링크는 우측 (로고 옆 드롭다운 header-family와 병행) */
/* ========== Header ========== */
.header { position: sticky; top: 0; z-index: var(--z-header); background: var(--color-canvas); border-bottom: 1px solid var(--color-border); }
.header-main { display: flex; align-items: center; height: 80px; gap: 24px; }
.header-logo { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }
.header-logo_img { height: 40px; width: auto; }
.header-logo_family { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; }
.header-logo_family img, .header-logo_family svg { width: 14px; height: 14px; opacity: 0.5; }
.header-logo_name { display: none; }
.mega-family { display: none; } /* 전체 메뉴 안 패밀리 사이트 구획 — 모바일 전용(웹은 상단 family-bar), 스타일은 mobile.css */
/* 헤더 MP3 롤링 텍스트 — 웹: 레드 버튼 안에서 텍스트만 롤링 (아이콘은 버튼 자체 아이콘 고정) · 모바일 pill 스타일은 mobile.css */
.mp3-roll { display: block; height: 20px; overflow: hidden; }
.mp3-roll > svg { display: none; } /* 웹은 버튼 자체 아이콘 사용 — 롤 내부 아이콘 숨김 */
.mp3-roll_track { display: flex; flex-direction: column; animation: mp3Roll 5s var(--ease-in-out) infinite; }
.mp3-roll_track > span { display: flex; align-items: center; height: 20px; white-space: nowrap; }
@keyframes mp3Roll { 0%, 42% { transform: translateY(0); } 50%, 92% { transform: translateY(-33.333%); } 100% { transform: translateY(-66.666%); } }
.top-notice { display: none; } /* 최상단 공지 배너 — 모바일 전용, 스타일은 mobile.css */
.mega-m-logout { display: none; } /* 전체 메뉴 하단 로그아웃 — 모바일 전용, 스타일은 mobile.css */
/* ── (구) 패밀리 사이트 텍스트 링크 — 로고 옆 "| 참고서 ↗". .site-toggle로 대체됐고 index-backup.html 전용으로만 보존 ── */
.header-sitenav { display: flex; align-items: center; gap: var(--space-md); flex-shrink: 0; align-self: flex-end; margin: 0 0 15px -8px; } /* 로고 하단(어학수험서 라인) 기준 정렬 — 모바일 최종 위치와 같은 시각 오프셋(이미지 하단 +5px) */
.header-sitenav_divider { width: 1px; height: 14px; background: var(--color-border-strong); }
.header-sitenav_link { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-md); font-weight: var(--font-medium); color: var(--color-gray-500); letter-spacing: -0.3px; transition: color var(--duration-base) var(--ease-default); }
.header-sitenav_link svg { width: 14px; height: 14px; }
/* ── 사이트 전환 토글 — 구 로고(logo_new.png) 안에 그려져 있던 "어학수험서" 캡슐을 떼어내 두 칸으로 만든 컴포넌트.
별개 UI가 아니라 로고 워드마크의 일부로 읽혀야 하므로, 원본 이미지에서 캡슐 좌표를 실측해 기준으로 삼았다.
실측(logo_new.png 595x126): 캡슐 y 76~124 → 하단이 로고 하단과 일치, 높이는 로고의 38.9%.
다만 원본은 글자까지 그려 넣은 그림이라 그 비율(40px 로고 기준 15.6px)을 그대로 쓰면 읽을 수 없고 답답하다.
그래서 ① "하단을 로고 하단에 맞춘다"는 실측 규칙을 지키고 ② 높이는 기획대로 로고 "북스" 글자 높이(현 로고 logo_new_v2.png 431x126 에서 글자 y 61~126 → 40px 로고 기준 20.6px)에 맞춘다.
이 둘을 동시에 만족하면 캡슐 중심이 "북스" 중심과 저절로 겹쳐 세로 가운데 정렬이 된다.
글자 여백(좌우 12px)과 로고와의 간격 8px은 붙어 보이는 선에서 최소한의 숨통. ── */
.site-toggle { position: relative; display: inline-flex; align-items: center; gap: 0; flex-shrink: 0; align-self: flex-end; margin: 0 0 20px 0; padding: 2px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); } /* 총 높이 21px(2+15+2+테두리2) — 로고 "북스" 글자 높이 실측 20.6px에 맞춤, 캡슐 중심 y=49.5px가 "북스" 중심 y≈49.7px와 일치 · 하단 20px — 헤더 80px 기준으로 캡슐 하단을 로고 하단(y=60px)에 맞춘 실측값 · 좌측 여백은 .header-main 의 gap 을 그대로 쓴다(태블릿 24px, 좁은 태블릿 16px로 자동 축소). 웹은 아래 min-width:1280px 블록에서 이 gap 을 음수 margin 으로 상쇄해 로고에 붙인다 */
.site-toggle_item { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; height: 15px; padding: 0 8px; border-radius: var(--radius-pill); font-size: var(--text-2xs); font-weight: var(--font-medium); color: var(--color-gray-600); letter-spacing: 0.6px; white-space: nowrap; transition: color var(--duration-base) var(--ease-default); } /* background 은 transition 대상에서 뺀다 — 알약이 자리를 넘겨받고 돌려주는 순간이 부드러우면 오히려 파란색이 겹쳐 깜빡인다 */
.site-toggle_item-active { background: var(--color-primary); color: var(--color-canvas); cursor: default; } /* 트랙 안쪽 여백 2px 덕에 파란 알약이 테두리에 닿지 않고 떠 있다 */
@media (min-width: 1280px) { .site-toggle { margin-bottom: 18px; margin-left: calc(var(--space-md) / 2 - var(--space-xl)); } } /* 웹 전용 ① 로고와 살짝 띄운다 — .header-main 의 gap(24px)을 음수 마진으로 걷어내고 6px 만 남긴다(간격 스케일에 6px 토큰이 없어 12px 의 절반으로 적는다). 로고 이미지 우측에 딸려 오는 여백 9.8px 이 더해져 눈으로는 "북스" 글자에서 약 16px 떨어져 보인다 ② 하단 18px — 아래 .site-toggle_item 18px 와 합쳐 캡슐 총 높이 24px, 중심 y=50px 로 "북스" 중심 y≈49.7px 를 그대로 유지. 태블릿·모바일은 기본값(높이 21px · gap 24px) 유지 */
@media (min-width: 1280px) { .site-toggle_item { height: 18px; } } /* 웹만 캡슐을 21 → 24px 로 키운 만큼 칸 높이도 15 → 18px */
/* 슬라이드 알약 — 위치·크기는 JS가 실측해서 넣는다(두 칸의 글자 수가 달라 폭이 다르다).
position:absolute 라 폭이 바뀌어도 문서 레이아웃은 다시 계산되지 않는다 */
.site-toggle_thumb { position: absolute; top: 0; left: 0; z-index: 0; width: 0; height: 0; background: var(--color-primary); border-radius: var(--radius-pill); opacity: 0; pointer-events: none; transition: transform var(--duration-slow) var(--ease-in-out), width var(--duration-slow) var(--ease-in-out); }
.site-toggle.is-sliding .site-toggle_thumb { opacity: 1; }
.site-toggle.is-sliding .site-toggle_item-active { background: none; } /* 이동 중엔 알약이 파란 배경을 맡는다 */
.site-toggle.is-sliding .site-toggle_item { transition: color var(--duration-slow) var(--ease-in-out); } /* 글자색 전환 속도를 알약 이동 속도에 맞춤 */
/* ── (구) 패밀리 드롭다운 — 헤더 인라인 백업본(index-backup.html)용 보존 ── */
.header-family { position: relative; display: flex; align-items: center; align-self: flex-end; margin: 0 0 8px -6px; flex-shrink: 0; } /* 화살표를 로고의 '어학수험서' 박스 라인(하단) 옆에 배치 */
.header-family_btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--color-gray-700); border: 1px solid var(--color-border-strong); border-radius: 50%; transition: color var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default); }
.header-family_btn svg { width: 15px; height: 15px; color: var(--color-gray-500); stroke-width: 2.5px; transition: transform var(--duration-base) var(--ease-default), color var(--duration-base) var(--ease-default); }
.header-family_btn[aria-expanded="true"] svg { color: var(--color-primary); }
.header-family_btn[aria-expanded="true"] svg { transform: scaleY(-1); }
.header-family_panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--z-drawer); min-width: 140px; padding: 6px; background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.header-family_link { display: block; padding: 9px 12px; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-regular); color: var(--color-gray-700); letter-spacing: -0.2px; white-space: nowrap; transition: background var(--duration-base) var(--ease-default), color var(--duration-base) var(--ease-default); }
.header-family_link-active { font-weight: var(--font-semibold); color: var(--color-primary); background: var(--color-tint-50); }
.header-search { flex: 1; max-width: 860px; display: flex; align-items: center; gap: var(--space-2xl); margin-left: 24px; }
.header-search_bar { position: relative; flex: 1; max-width: 620px; }
.header-search_input { width: 100%; height: 48px; padding: 0 52px 0 20px; background: var(--color-canvas); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--font-regular); color: var(--color-ink); letter-spacing: -0.2px; outline: none; transition: border-color var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default); }
.header-search_input::placeholder { color: var(--color-gray-600); } /* 모바일과 동일 톤으로 진하게 (2026-07-24, 기존 gray-400) */
.header-search_input:focus { border-color: var(--color-primary); box-shadow: var(--shadow-focus-ring); }
.header-search_btn { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--color-gray-700); transition: color var(--duration-base) var(--ease-default); }
.header-search_btn img, .header-search_btn svg { width: 20px; height: 20px; }
.header-search_ad { width: 180px; height: 48px; border-radius: var(--radius-xs); flex-shrink: 0; overflow: hidden; position: relative; background: var(--color-border); } /* 이미지를 못 불러오면 img 를 숨기고(onerror) 회색 자리만 보인다 — 카테고리 메인배너와 같은 방식 */
.mini-banner_item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s ease; display: block; }
.mini-banner_item-active { opacity: 1; }
.mini-banner_item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.header-hamburger { display: none; }
.header-search-icon { display: none; }
.header-utils { display: flex; align-items: center; gap: var(--space-base); margin-left: auto; flex-shrink: 0; }
.header-util_link { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-gray-700); white-space: nowrap; transition: color var(--duration-base) var(--ease-default); }
.header-util_link[hidden] { display: none; } /* 로그인/로그아웃 스왑 — hidden이 display:flex에 지지 않게 명시 */
.header-util_link img, .header-util_link svg { width: 16px; height: 16px; }
.header-util_chevron { width: 12px; height: 12px; }
.header-util_sep { width: 1px; height: 16px; background: var(--color-border); }
.header-util_mp3 { display: flex; align-items: center; gap: var(--space-sm); height: 40px; padding: 0 16px; background: var(--color-mp3); border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-canvas); white-space: nowrap; transition: background var(--duration-base) var(--ease-default); }
.header-util_mp3 svg { width: 16px; height: 16px; color: var(--color-canvas); opacity: 1; }
.header-util_mp3 > span:not(.mp3-roll) { display: none; } /* 정적 라벨 대신 롤링 텍스트 사용 */
.header-util_mp3-icon { display: none; }
/* ================================================================
MP3 음원 버튼 — 헤더에서 가장 먼저 눈에 들어오게 (전 페이지 공통 · 웹·태블릿)
----------------------------------------------------------------
눈에 띄게 만드는 장치를 네 겹으로 나눠 얹었습니다.
하나를 세게 주면 촌스러워지므로, 약한 것 여럿을 겹치는 쪽을 택했습니다.
1) 흐르는 색 띠(::before) — 색이 살아 움직인다
버튼보다 훨씬 넓은(220%) 그라데이션 띠를 깔고 좌우로 미끄러뜨립니다.
창문(버튼)은 가만히 있는데 그 뒤로 긴 그림이 지나가는 셈입니다.
9초 왕복 · 좌우 22% — 흐름은 분명히 보이되 번쩍이지는 않는 선.
2) 지나가는 광택(::after) — 시선을 한 번씩 끌어온다
얇은 흰 빛줄기가 6초에 한 번, 1초 남짓 동안 버튼을 훑고 지나갑니다.
나머지 5초는 버튼 밖에서 숨어 기다립니다. 계속 번쩍이면 싸구려로 보이고,
가끔 한 번 스치면 고급스러워 보이는 차이가 여기서 납니다.
3) 레드 글로우(box-shadow) — 버튼이 헤더 위로 떠오른다
버튼과 같은 색의 빛을 아래로 은은히 깔아 평면이 아닌 '떠 있는 것'으로 보이게 합니다.
4) 윗면 하이라이트(inset) — 유리알 같은 입체감
위쪽 1px에만 흰 선을 넣어 빛이 위에서 떨어지는 느낌을 만듭니다.
[왜 배경이 아니라 transform 으로 움직이나]
background-position 을 움직이면 브라우저가 매 프레임 색을 다시 칠해야 합니다.
transform 은 이미 그려 둔 그림을 옮기기만 해서 훨씬 가볍고 부드럽습니다.
[z-index: -1 과 isolation 한 쌍]
띠와 광택을 글자 뒤로 보내려고 z-index:-1 을 주는데, 그대로 두면 이들이 버튼을 뚫고
페이지 배경까지 내려가 안 보일 수 있습니다. isolation:isolate 가 버튼 안에
'층 구분 상자'를 만들어 밖으로 못 빠져나가게 잡아 줍니다.
================================================================ */
@media (min-width: 768px) { /* 웹 + 태블릿 — 태블릿도 웹과 같은 빨간 글자 버튼이라 같은 효과를 준다(모바일은 mobile.css 의 .mp3-roll 이 따로 그린다) */
.header-util_mp3 { position: relative; overflow: hidden; isolation: isolate; box-shadow: var(--mp3-lift), var(--mp3-inner); }
.header-util_mp3::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; z-index: -1; width: 220%; background: linear-gradient(100deg, var(--mp3-deep) 0%, var(--mp3-base) 30%, var(--mp3-bright) 50%, var(--mp3-base) 70%, var(--mp3-deep) 100%); animation: mp3Flow 9s var(--ease-in-out) infinite; }
/* 광택 — 버튼 왼쪽 밖(-45%)에서 출발해 오른쪽 밖까지 훑고 지나간다. 사선(105deg)이라 유리에 빛이 스치는 모양이 된다 */
.header-util_mp3::after { content: ""; position: absolute; top: 0; bottom: 0; left: -45%; z-index: -1; width: 26%; background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.42) 50%, rgba(255,255,255,0) 100%); animation: mp3Shine 6s linear infinite; }
/* 마우스를 올리면 빛이 더 번지고 색도 살짝 밝아진다 — 크기는 움직이지 않는다(헤더에서 들썩이면 산만하다) */
.header-util_mp3:hover { box-shadow: var(--mp3-glow), var(--mp3-inner); }
.header-util_mp3:hover::before { filter: brightness(1.08); }
}
@keyframes mp3Flow {
0%, 100% { transform: translateX(-22%); }
50% { transform: translateX(22%); }
}
/* 6초 주기 — 0~9%(약 0.54초)에 일정한 속도(linear)로 훑고 끝까지 빠져나간다. ease-out이면 끝에서 느려져 버튼 가장자리에 걸려 멈춘 것처럼 보임 */
@keyframes mp3Shine {
0% { transform: translateX(0); opacity: 1; }
9% { transform: translateX(600%); opacity: 1; }
9.5%, 100% { transform: translateX(600%); opacity: 0; } /* 대기 중엔 투명 — 모바일에서 둥근 모서리 잘라내기가 가끔 실패해 끝에 멈춘 광택이 보이는 문제 방지 */
}
/* 움직임 최소화 설정 존중 — 흐르는 그라데이션은 멈추고 색만 남긴다 */
@media (prefers-reduced-motion: reduce) {
.header-util_mp3::before { animation: none; }
.header-util_mp3::after { animation: none; opacity: 0; }
}
/* ========== GNB ========== */
.gnb { border-top: 1px solid var(--color-border); }
.gnb-inner { display: flex; align-items: center; height: 68px; gap: 0; }
.gnb-hamburger { order: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 40px; height: 40px; flex-shrink: 0; margin-left: auto; border-radius: var(--radius-sm); } /* 막대를 박스 중앙에 — flex-end 면 40px 박스 안에서 18px 아이콘이 11px 치우쳐 키보드 포커스링이 어긋나 보인다 */
.gnb-hamburger_bar { display: block; width: 18px; height: 2px; background: var(--color-ink); border-radius: 1px; transition: transform 0.25s ease, opacity var(--duration-fast) var(--ease-default); }
.gnb-hamburger.is-open .gnb-hamburger_bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gnb-hamburger.is-open .gnb-hamburger_bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.gnb-hamburger.is-open .gnb-hamburger_bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.gnb-nav { display: flex; align-items: center; flex: 1; gap: 0; }
.gnb-nav > li:first-child .gnb-link { padding-left: 0; }
.gnb-nav > li:first-child .gnb-link::after { left: 0; }
.gnb-link { padding: 0 18px; height: 68px; display: flex; align-items: center; font-size: var(--text-lg); font-weight: var(--font-medium); color: var(--color-ink); letter-spacing: -0.2px; white-space: nowrap; transition: color var(--duration-base) var(--ease-default), transform var(--duration-base) var(--ease-default); position: relative; }
.gnb-link::after { content: ""; position: absolute; bottom: 0; left: 14px; right: 14px; height: 2px; background: var(--color-primary); opacity: 0; transition: opacity var(--duration-base) var(--ease-default); }
.gnb-link_icon { flex-shrink: 0; margin-right: 5px; }
.gnb-sep { width: 1px; height: 16px; background: var(--color-border); margin: 0 8px; flex-shrink: 0; }
/* 좌측 강조 그룹(베스트셀러·신간도서·토익 라운지) — 카테고리와 같은 크기, 블루 */
.gnb-link-blue { font-size: var(--text-base); color: var(--color-primary); }
/* 토익 레드 포인트 — 대표 카테고리(레드 강조 + 우상단 점) · 활성 상태에서도 레드 유지 */
.gnb-link-point, .gnb-link-point.gnb-link-active { color: var(--color-mp3); }
.gnb-link-point::after, .gnb-link-point.gnb-link-active::after { background: var(--color-mp3); }
.gnb-point-dot { position: relative; top: -12px; display: inline-block; width: 5px; height: 5px; margin-left: 1px; vertical-align: top; border-radius: 50%; background: var(--color-mp3); }
/* 영역 경계 여백 — 토익(카테고리)·무료인강(유틸) 앞 li 에 붙여 auto 여백 2개가 남는 공간을 균등 분배 → 3영역 사이 간격 동일 */
.gnb-nav-gap { margin-left: 26px; }
/* 공식스토어 — 새 창으로 열리는 외부 링크. 상단 패밀리바와 동일한 새창 아이콘을 글자 뒤에 붙인다 */
.gnb-link-store img { margin-left: 3px; vertical-align: 1px; }
/* 와옹's PICK! GNB 롤링 — [텍스트] ↔ [와옹 얼굴 + PICK!] 이 위로 올라가며 교차 (mp3-roll과 동일 패턴) */
.waong-roll { display: block; height: 28px; overflow: hidden; }
.waong-roll_track { display: flex; flex-direction: column; animation: waongRoll 5s var(--ease-in-out) 1.25s infinite; } /* MP3 버튼 롤링과 반 박자 어긋나게 — 버튼 먼저, 와옹이 그 다음 (핑퐁 교차) */
.waong-roll_item { display: flex; align-items: center; justify-content: center; gap: 4px; height: 28px; white-space: nowrap; }
.waong-roll_item img { width: 28px; height: 28px; }
@keyframes waongRoll { 0%, 42% { transform: translateY(0); } 50%, 92% { transform: translateY(-33.333%); } 100% { transform: translateY(-66.666%); } }
@media (prefers-reduced-motion: reduce) { .waong-roll_track { animation: none; } }
/* 우측 유틸 그룹(무료인강·레벨테스트·학습로드맵) — 기존 작은 크기, 뮤트 그레이 */
.gnb-util-link { padding: 0 14px; height: 68px; display: flex; align-items: center; font-size: var(--text-md); font-weight: var(--font-medium); color: var(--color-gray-500); letter-spacing: -0.2px; white-space: nowrap; transition: color var(--duration-base) var(--ease-default), transform var(--duration-base) var(--ease-default); }
/* ================================================================
스크롤 슬림 헤더 — 3줄 헤더가 한 줄 '슬림 바'로 재편성 (body[data-header="slim"] 페이지 공통)
----------------------------------------------------------------
[무엇을 하나]
맨 위에서는 지금 그대로 3줄(패밀리바 · 로고줄 · GNB)입니다.
스크롤을 조금 내리면 위·아래 줄이 접혀 사라지고 가운데 줄만 남으면서,
배경이 반투명해지고 그 뒤로 지나가는 본문이 뿌옇게(블러) 비칩니다.
[슬림 바 구성] 로고 · 검색창 · 로그인 · 마이페이지 · MP3 버튼 · 햄버거
[슬림에서 빠지는 것] 패밀리바 · GNB · 참고서 링크 · 미니배너
[왜 fixed 로 바꾸나 — 중요]
원래 헤더는 position:sticky 라 문서 안에서 제 높이(약 186px)만큼 자리를 차지합니다.
그 상태로 높이를 줄이면 줄어든 만큼 본문이 위로 '툭' 튀어 오릅니다.
그래서 헤더를 화면 붙박이(fixed)로 두고, 본문 맨 위에 헤더 높이만큼
빈 자리(padding-top)를 만들어 둡니다.
본문이 헤더 '뒤로' 지나가게 되므로 블러도 이때 비로소 살아납니다.
[높이 값]
--header-h / --header-familybar-h / --header-gnb-h 는 main.js 가 실제 헤더를 재어
넣어 줍니다. 아래 값은 글꼴이 늦게 뜨는 아주 짧은 순간에만 쓰이는 예비값입니다.
[적용 범위] 웹·태블릿·모바일 전부. 폭이 좁아지면 로그인·마이페이지를 빼고,
검색창을 줄이거나(태블릿) 돋보기 버튼으로 접어(모바일) 한 줄에 들여보낸다.
브레이크포인트별 조정은 이 블록 바로 아래 두 개의 @media 에 모아 두었다.
================================================================ */
/* 슬림 헤더 값 — 반투명 흰색·블러 세기는 전역 토큰에 없어 여기 한 곳에 모아 둔다. 높이 3종은 main.js 가 실측해 덮어쓴다 */
body[data-header="slim"] { --header-h: 186px; --header-now: var(--header-h); --header-familybar-h: 36px; --header-gnb-h: 69px; --header-slim-h: 68px; --header-slim-gnb-h: 44px; --header-slim-bg: rgba(255,255,255,0.72); --header-slim-blur: blur(16px) saturate(1.6); }
/* ── 헤더 고정 + 본문 자리 확보 ── */
body[data-header="slim"] .header { position: fixed; left: 0; right: 0; transition: background var(--duration-slow) var(--ease-in-out), border-color var(--duration-slow) var(--ease-in-out), box-shadow var(--duration-slow) var(--ease-in-out); }
body[data-header="slim"] { padding-top: var(--header-h); } /* 헤더가 붙박이라 문서에서 자리를 비우므로 본문 맨 위에 그 높이만큼 빈 자리를 만든다. main 앞에 히어로·리본이 오는 페이지(와옹's PICK 등)도 함께 밀리도록 body 에 준다 */
/* ── 헤더 아래에 붙어 서는 사이드 필터(검색·학습자료실) ──
--header-now 는 main.js 가 매 순간 적어 두는 '지금 헤더 키'다. 3줄이든 슬림이든 늘 헤더 바로 밑에 서고,
화면보다 길어지면 남은 높이 안에서 스스로 스크롤한다(원래 값 top:80px 는 3줄 헤더 194px 에 가려져 있었다). */
body[data-header="slim"] .search-filter { top: calc(var(--header-now) + var(--space-base)); max-height: calc(100vh - var(--header-now) - var(--space-xl)); }
/* ── 접히는 두 줄 ──
transform 이 아니라 height 를 줄이는 이유: 두 줄이 실제로 자리를 비켜 줘야
가운데 줄이 화면 맨 위로 올라붙습니다. 헤더는 fixed 라 본문 레이아웃은 흔들리지 않습니다.
패밀리바의 overflow 는 슬림일 때만 hidden — 평소엔 학습지원·고객센터 드롭다운이 잘리면 안 됩니다. */
body[data-header="slim"] .family-bar { height: var(--header-familybar-h); transition: height var(--duration-slow) var(--ease-in-out), padding var(--duration-slow) var(--ease-in-out), opacity var(--duration-slow) var(--ease-in-out); }
body[data-header="slim"] .gnb { height: var(--header-gnb-h); overflow: hidden; transition: height var(--duration-slow) var(--ease-in-out), padding var(--duration-slow) var(--ease-in-out), opacity var(--duration-slow) var(--ease-in-out), border-color var(--duration-slow) var(--ease-in-out); }
body[data-header="slim"].is-slim .family-bar { height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden; }
/* ── 3줄로 되돌아올 때도 같은 0.3초 동안 부드럽게 ──
예전에는 되돌아올 때만 전환을 꺼서 '툭' 하고 제자리에 놓았다. 계열사 탭줄이 아직 낮은 상태에서
내용부터 삐져나와 바로 아래 로고와 겹쳐 보였기 때문인데, 진짜 원인은 높이가 아니라 overflow 였다 —
슬림이 풀리는 순간 잘라 두던 게 곧바로 풀려서, 아직 다 자라지 않은 줄 밖으로 탭이 비어져 나왔다.
그래서 이제는 전환을 끄는 대신 '되돌아오는 0.3초 동안만' 계속 잘라 둔다. 줄이 다 자란 뒤 잘림이 풀리므로
겹침 없이 늘어나는 모습이 그대로 보인다(클래스는 main.js 가 붙였다가 0.3초 뒤 뗀다).
평소에는 잘라 두면 안 된다 — 학습지원·고객센터 드롭다운이 줄 밖으로 펼쳐지기 때문이다. */
body[data-header="slim"].is-unslim .family-bar { overflow: hidden; }
/* ── 높이를 재는 찰나에만 전환을 끈다 ──
main.js 가 '다 펼쳤을 때의 참 높이'를 재려고 잠깐 붙였다 바로 떼는 클래스다(같은 프레임 안에서 끝나므로 눈에 보이지 않는다).
전환이 살아 있는 채로 재면 자라는 도중의 높이가 그대로 CSS 변수에 굳어, 헤더가 낮아진 채 멈춘다. */
body[data-header="slim"].is-measuring .family-bar, body[data-header="slim"].is-measuring .gnb, body[data-header="slim"].is-measuring .gnb-inner, body[data-header="slim"].is-measuring .gnb-link, body[data-header="slim"].is-measuring .header-main, body[data-header="slim"].is-measuring .header-logo_img, body[data-header="slim"].is-measuring .site-toggle { transition: none; }
/* ── GNB 는 접지 않고 '얇게' 남긴다 ──
슬림에서도 전체 메뉴를 열지 않고 과목으로 바로 갈 수 있어야 하므로 한 줄을 유지한다.
항목(12개)과 마크업은 그대로 두고 줄 높이(68px→44px)와 글자만 한 단계씩 낮춰 슬림한 인상을 만든다.
높이는 CSS 변수라 브레이크포인트마다 아래 @media 에서 다시 잡아 준다(태블릿 40px · 모바일 36px). */
/* GNB 줄(바깥 상자)만 0.3초에 걸쳐 자라고 그 안의 메뉴는 곧바로 원래 높이로 돌아가면,
아직 다 자라지 않은 줄에 큰 메뉴가 갇혀 아래가 잘린 것처럼(=여백이 좁아 보이게) 지나간다.
그래서 안쪽 줄과 메뉴 링크도 같은 시간 동안 함께 자라고 줄어들게 한다 — 늘 세로 가운데를 지킨다.
.gnb-link 는 pc.css 에 이미 색·움직임 전환이 있어, 그 두 줄을 그대로 옮겨 적고 높이·여백만 덧붙인다(빠뜨리면 hover 효과가 사라진다). */
body[data-header="slim"] .gnb-inner { transition: height var(--duration-slow) var(--ease-in-out); }
body[data-header="slim"] .gnb-link { transition: color var(--duration-base) var(--ease-default), transform var(--duration-base) var(--ease-default), height var(--duration-slow) var(--ease-in-out), padding var(--duration-slow) var(--ease-in-out); }
body[data-header="slim"].is-slim .gnb { height: var(--header-slim-gnb-h); }
/* GNB 줄은 슬림에서도 접지 않는다 — 스크롤을 내리든 올리든 늘 같은 자리에 보인다
(예전에는 내리면 접고 올리면 폈지만, 읽는 중에 메뉴가 사라졌다 나타나는 편이 더 산만했다) */
body[data-header="slim"].is-slim .gnb-inner { height: var(--header-slim-gnb-h); }
body[data-header="slim"].is-slim .gnb-link { height: var(--header-slim-gnb-h); padding: 0 14px; font-size: var(--text-base); }
body[data-header="slim"].is-slim .gnb-nav > li:first-child .gnb-link { padding-left: 0; } /* 좌우 패딩을 줄이면 첫 항목의 '왼쪽 0' 규칙(pc.css)과 특정도가 같아져 밀린다 — 여기서 다시 붙여 준다 */
body[data-header="slim"].is-slim .gnb-link-blue { font-size: var(--text-md); }
/* 글자가 작아진 만큼 오른쪽에 빈자리가 남아 메뉴가 왼쪽으로 몰려 보인다.
space-between 은 남는 폭을 항목 '사이사이'에 똑같이 나눠 준다 — 첫 항목은 로고 선에,
마지막 항목은 햄버거 앞에 딱 붙고 그 사이 간격이 모두 같아진다.
폭이 좁아 항목이 넘치는 태블릿·모바일에서는 나눠 줄 여백이 없으므로 저절로 무시된다(가로 스크롤 유지). */
body[data-header="slim"].is-slim .gnb-nav { justify-content: space-between; }
body[data-header="slim"].is-slim .gnb-nav-gap { margin-left: 0; } /* 과목 ↔ 큐레이션 구분 간격(26px)은 뺀다 — 간격을 고르게 두는 게 목적이고, 구분은 파란 글자색이 이미 해 준다 */
/* ── 가운데 줄 = 슬림 바 본체 — 높이·로고·검색창·MP3 버튼이 함께 작아진다 ── */
body[data-header="slim"] .header-main { transition: height var(--duration-slow) var(--ease-in-out), gap var(--duration-slow) var(--ease-in-out); }
body[data-header="slim"] .header-logo_img { transition: height var(--duration-slow) var(--ease-in-out); }
body[data-header="slim"] .header-search_input { transition: height var(--duration-slow) var(--ease-in-out), border-color var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default), background var(--duration-base) var(--ease-default); }
body[data-header="slim"] .header-util_mp3 { transition: height var(--duration-slow) var(--ease-in-out), padding var(--duration-slow) var(--ease-in-out), background var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default); }
body[data-header="slim"].is-slim .header-main { height: var(--header-slim-h); gap: var(--space-base); }
body[data-header="slim"].is-slim .header-logo_img { height: 28px; }
/* 사이트 전환 토글은 평소(헤더 80px)엔 로고 "북스" 글자와 높이·중심을 맞춰 서 있다(pc.css 참조).
슬림 바는 높이(웹 68px · 태블릿 62px)와 로고(28px)가 함께 줄어 그 값이 더는 맞지 않으므로, 슬림 전용으로 다시 맞춘다.
실측: 로고 28px 기준 "북스" 글자는 높이 14.44px, 아래끝이 로고 아래끝과 일치 → 웹 슬림에서 중심 y=40.78px.
캡슐 크기는 그대로 두고 아래 여백만 15px 로 줘서 중심 y=41px 로 겹친다(태블릿은 아래 1279px 블록에서 14px) */
body[data-header="slim"].is-slim .site-toggle { align-self: flex-end; margin-bottom: 15px; }
/* 슬림 바는 .header-main 의 gap 이 24px → 16px 로 좁아진다. 3줄일 때와 같은 6px 로 맞추려고 그 16px 을 걷어내고 6px 만 남긴다
(태블릿은 pc.css 의 태블릿 보정 -16px 이 이미 얹혀 실질 간격 0 — 건드리지 않는다) */
@media (min-width: 1280px) { body[data-header="slim"].is-slim .site-toggle { margin-left: calc(var(--space-md) / 2 - var(--space-base)); } }
/* 로고와 검색창 사이를 띄운다 — 실제 간격은 .header-main 의 gap(16px) + 이 margin(32px) = 48px */
body[data-header="slim"].is-slim .header-search { margin-left: var(--space-2xl); gap: 0; }
body[data-header="slim"].is-slim .header-search_bar { max-width: 440px; }
/* 검색창은 흰 바탕 + 테두리 한 줄로 — 반투명 헤더(흰색 72%)와 회색 면(#f7f7f7)은 밝기가 거의 같아
면으로만 구분하면 입력칸이 헤더에 묻혀 버린다. 순백 바탕이 반투명 헤더보다 밝아 저절로 떠오르고,
테두리가 "여기에 쓰는 칸"이라는 경계를 그어 준다.
포커스하면 테두리만 파랗게 바뀐다(바탕은 이미 흰색이라 그대로). */
body[data-header="slim"].is-slim .header-search_input { height: 46px; background: var(--color-canvas); border-color: var(--color-border-strong); }
body[data-header="slim"].is-slim .header-search_input:focus { border-color: var(--color-primary); }
body[data-header="slim"].is-slim .header-util_mp3 { height: 40px; padding: 0 var(--space-md); }
/* 슬림에서 빠지는 요소들 */
body[data-header="slim"].is-slim .header-search_ad { display: none; }
/* ── 슬림에서는 전체 메뉴 입구를 가운데 줄로 옮긴다 ──
슬림 GNB 줄은 스크롤을 내리면 접히므로, 그 줄에 세워 둔 햄버거도 함께 사라진다.
전체 메뉴로 가는 길이 끊기면 안 되니 항상 보이는 가운데 줄(검색줄) 오른쪽 끝으로 옮기고,
GNB 줄의 햄버거는 숨긴다 — 같은 입구가 둘이면 헷갈리고, 메뉴만 남은 GNB 줄은 폭을 다 쓸 수 있다.
버튼 자체는 공통 헤더에 이미 있고 웹에서 숨겨져 있던 것이라 마크업은 그대로 쓴다.
order:1 → 다른 형제(기본 order:0)보다 뒤, 즉 맨 오른쪽에 선다. */
body[data-header="slim"].is-slim .header-hamburger { order: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-sm); }
body[data-header="slim"].is-slim .header-hamburger_bar { display: block; width: 18px; height: 2px; background: var(--color-ink); border-radius: 1px; transition: transform var(--duration-base) var(--ease-default), opacity var(--duration-fast) var(--ease-default); }
body[data-header="slim"].is-slim .header-hamburger.is-open .header-hamburger_bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body[data-header="slim"].is-slim .header-hamburger.is-open .header-hamburger_bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
body[data-header="slim"].is-slim .header-hamburger.is-open .header-hamburger_bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body[data-header="slim"].is-slim .gnb-hamburger { display: none; }
/* ── 반투명 + 뒤 배경 블러 (레퍼런스: retellai.com) ──
backdrop-filter 는 '내 뒤에 있는 그림'에 거는 필터입니다. 그래서 배경이
완전히 불투명하면 아무 효과가 없고, 위처럼 반투명일 때만 보입니다. */
/* 아래 테두리는 색만 지우지 않고 두께까지 0 으로 둔다 — 투명한 1px 이 남아 있으면 활성 메뉴의 파란 밑줄이
헤더 바닥(그림자가 시작되는 선)에서 한 칸 떠 보인다. 두께를 없애면 밑줄이 바닥에 딱 붙어 그림자로 이어진다. */
body[data-header="slim"].is-slim .header { background: var(--header-slim-bg); border-bottom-width: 0; box-shadow: var(--shadow-soft); -webkit-backdrop-filter: var(--header-slim-blur); backdrop-filter: var(--header-slim-blur); }
/* 전체 메뉴가 열리면 뒤가 비쳐 어수선하므로 흰 배경으로 되돌립니다 */
body[data-header="slim"].is-slim.mega-open .header { background: var(--color-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* 무료인강은 본문 바탕이 어두워(--color-dark-bg) 그 어둠이 유리 헤더에 그대로 비쳐 메뉴 글자가 묻힌다 — 이 페이지만 흰 바탕으로 세운다 */
body[data-page="free-lecture"][data-header="slim"].is-slim .header { background: var(--color-canvas); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* ── 슬림 헤더 + 그 아래 붙은 카테고리 2뎁스 탭은 '한 덩어리'로 보이게 ──
둘은 서로 다른 요소라 각자 그림자·블러를 가지면 두 영역으로 갈라져 보인다.
① 그림자는 맨 아래(탭)에만 — 헤더 아래 한 줄, 탭 아래 또 한 줄로 겹치던 것을 한 줄로.
② 블러는 아예 쓰지 않고 둘 다 불투명 흰 바탕으로 — 블러는 '내 뒤에 있는 그림'에 거는 필터라
헤더 뒤와 탭 뒤의 내용이 다르면 같은 값을 줘도 서로 다른 색으로 비쳐 경계가 드러난다.
③ 둘 사이는 로고 밑(.gnb 위)과 똑같은 1px 라인으로만 나눈다 — 면이 아니라 선으로 구분.
이 라인은 탭이 아니라 GNB 줄이 '안쪽 그림자'로 그린다. 활성 메뉴의 파란 밑줄(2px)이
GNB 박스 맨 아래에 붙어 있어서, 라인이 박스 밖(탭 위쪽 테두리)에 있으면 파란 줄이 회색 줄 위에
한 칸 떠 보였다. 같은 박스 안에 그려 두면 파란 밑줄이 그 자리를 덮어, 회색 라인 중
지금 보고 있는 메뉴 구간만 파랗게 바뀐 것처럼 이어진다.
(GNB 는 overflow:hidden 이라 밑줄을 밖으로 내리는 방법은 쓸 수 없다 — 잘려 나간다) */
body[data-header="slim"].is-slim:has(.cat-tabs.is-stuck) .header { background: var(--color-canvas); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body[data-header="slim"].is-slim:has(.cat-tabs.is-stuck) .gnb { box-shadow: inset 0 -1px 0 var(--color-border); }
body[data-header="slim"].is-slim .cat-tabs.is-stuck { background: var(--color-canvas); }
/* ── 도서 상세의 책 탭도 같은 원칙으로 ──
책 탭은 회색 바탕(--color-surface-light)이라 흰 헤더와 색으로 이미 나뉜다. 그래서 라인은 더하지 않고
그림자만 정리한다 — 흰 헤더의 그림자가 회색 탭 위에 드리워 띠처럼 탁하게 얹혀 보이던 것을 걷어내고,
맨 아래(책 탭)에만 한 겹 남겨 헤더와 탭이 같이 떠 있는 한 덩어리로 보이게 한다. */
body[data-page="book-detail"][data-header="slim"].is-slim:has(.book-tabs-stuck) .header { box-shadow: none; }
body[data-page="book-detail"][data-header="slim"].is-slim .book-tabs-stuck { box-shadow: var(--shadow-soft); }
/* ── 태블릿(1279px 이하) 슬림 바 ──
폭이 줄어드는 만큼 오른쪽부터 덜어 낸다. 로그인·마이페이지는 햄버거(전체 메뉴) 안에도
있으므로 슬림에서는 빼고, 그렇게 생긴 자리를 검색창이 가져간다. */
@media (max-width: 1279px) {
body[data-header="slim"] { --header-slim-h: 62px; --header-slim-gnb-h: 40px; }
/* 태블릿 GNB는 평소에도 글자가 한 단계 작고(15px) 좌우 여백이 좁다 — 슬림에서도 그 값을 그대로 쓴다 */
body[data-header="slim"].is-slim .gnb-link { padding: 0 12px; font-size: var(--text-md); }
body[data-header="slim"].is-slim .site-toggle { margin-bottom: 14px; } /* 슬림 62px · 로고 28px 기준 "북스" 중심 y=37.78px 에 캡슐(21px) 중심을 맞춘 값 */
body[data-header="slim"].is-slim .header-util_link { display: none; }
body[data-header="slim"].is-slim .header-search { margin-left: var(--space-base); }
body[data-header="slim"].is-slim .header-search_bar { max-width: none; } /* 남는 폭을 그대로 쓴다 — 좁아지면 알아서 줄어든다 */
body[data-header="slim"].is-slim .header-search_input { height: 42px; } /* 모바일(767px 이하)까지 함께 적용 — 기본 48px 보다 낮춰 펼쳤을 때 헤더가 덜 두꺼워진다 */
}
/* 태블릿(768~1279px) 슬림 바 — 웹처럼 로그인·마이페이지(글자)와 빨간 MP3 버튼을 모두 남긴다.
위 1279px 이하 공통 규칙이 유틸 링크를 숨기는 것을 태블릿에서만 되살린다(모바일은 그대로 숨김). [hidden] 인 로그인/로그아웃 짝은 계속 숨김 */
@media (min-width: 768px) and (max-width: 1279px) { body[data-header="slim"].is-slim .header-util_link:not([hidden]) { display: flex; } }
/* 움직임 최소화 설정 존중 — 슬림 바로 바뀌는 과정을 애니메이션 없이 즉시 전환한다 */
@media (prefers-reduced-motion: reduce) {
body[data-header="slim"] .header, body[data-header="slim"] .family-bar, body[data-header="slim"] .gnb, body[data-header="slim"] .header-main, body[data-header="slim"] .header-logo_img, body[data-header="slim"] .header-search_input, body[data-header="slim"] .header-util_mp3 { transition: none; }
}
/* ========== Mega Menu (전체 메뉴) ========== */
.mega-menu { position: absolute; top: 100%; left: 0; width: 100%; z-index: var(--z-mega); }
.mega-menu[hidden] { display: none; }
.mega-m-login, .mega-m-promo, .mega-m-quick, .mega-m-links, .mega-m-banner { display: none; } /* 로그인·프로모 카드·퀵아이콘·상단 링크는 모바일 햄버거 전용 */
.mega-menu_backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; border: none; background: var(--color-overlay); cursor: default; z-index: -1; animation: megaFade 200ms ease; }
.mega-menu_panel { position: relative; background: var(--color-canvas); border-top: 1px solid var(--color-border); animation: megaDrop 260ms var(--ease-in-out); }
.mega-mobile-bar { display: none; }
.mega-menu_grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-4xl); padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); align-items: stretch; }
.mega-main { display: flex; flex-direction: column; gap: 18px; align-self: stretch; }
.mega-cols { flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4xl); align-items: start; } /* 남는 높이를 전부 흡수 — 하단 배너(고정 132px)가 사이드 카드 하단선에 붙도록 */
.mega-col { display: flex; flex-direction: column; gap: var(--space-base); }
.mega-group_title { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-ink); letter-spacing: -0.3px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--color-border); transition: color var(--duration-base) var(--ease-default); }
.mega-group_toggle { display: none; }
.mega-col .mega-group_title { display: flex; }
.mega-badge { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-left: auto; background: var(--color-coral-tint); border: 1px solid var(--color-coral-tint-border); border-radius: var(--radius-pill); font-size: var(--text-3xs); font-weight: var(--font-bold); color: var(--color-coral); letter-spacing: 0.3px; }
.mega-list { display: flex; flex-direction: column; gap: 6px; }
.mega-link { display: flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: var(--font-regular); color: var(--color-gray-600); letter-spacing: -0.2px; transition: color var(--duration-base) var(--ease-default), padding-left var(--duration-base) var(--ease-default); }
.mega-link em { font-style: normal; font-size: var(--text-2xs); font-weight: var(--font-semibold); color: var(--color-gray-400); }
.mega-link em::before { content: "["; }
.mega-link em::after { content: "]"; }
/* 사이드 카드 */
.mega-side { align-self: start; display: flex; flex-direction: column; gap: var(--space-xl); padding: 28px 26px; background: var(--color-surface-cool); border-radius: var(--radius-xl); }
.mega-side_group { display: flex; flex-direction: column; gap: 14px; }
.mega-side_title { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-primary); letter-spacing: -0.2px; }
.mega-side_title svg { width: 18px; height: 18px; }
.mega-side_links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm) 16px; }
.mega-side_link { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--color-gray-700); letter-spacing: -0.2px; transition: color var(--duration-base) var(--ease-default); }
.mega-side_social { display: flex; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.mega-social { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.mega-social_icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: 50%; transition: border-color var(--duration-base) var(--ease-default), transform var(--duration-base) var(--ease-default); } /* 소셜 5종(카페 2개)이 한 줄에 들어가도록 컴팩트 */
.mega-social_icon img { width: 19px; height: 19px; }
.mega-social_icon-cafe svg { width: 17px; height: 17px; color: var(--color-gray-800); }
.mega-social_label { font-size: var(--text-3xs); font-weight: var(--font-medium); color: var(--color-gray-500); letter-spacing: -0.3px; white-space: nowrap; }
.mega-side_cta { display: flex; align-items: center; gap: var(--space-sm); height: 52px; padding: 0 18px; background: var(--color-canvas); border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-ink); letter-spacing: -0.2px; transition: border-color var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default); }
.mega-side_cta > svg:first-child { width: 18px; height: 18px; color: var(--color-primary); }
.mega-side_cta span { flex: 1; }
.mega-side_cta-arrow { width: 18px; height: 18px; color: var(--color-gray-500); transition: transform var(--duration-base) var(--ease-default); }
.mega-side_cta { display: none; } /* 데일리 학습 CTA — 삭제 검토 중이라 임시 숨김(마크업은 유지) · 되살리려면 이 줄만 지울 것 */
@media (min-width: 768px) and (max-width: 1279px) { .mega-menu_panel { max-height: calc(100vh - var(--mega-top, 0px)); max-height: calc(100dvh - var(--mega-top, 0px)); overflow-y: auto; overscroll-behavior: contain; } .container.mega-menu_grid { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); } .mega-side_group + .mega-side_group { padding-left: var(--space-3xl); border-left: 1px solid var(--color-border); } .mega-side_links { gap: var(--space-md) var(--space-base); } .mega-side_link { font-size: var(--text-sm); } .mega-social { flex: 0 0 auto; } } /* 태블릿 전용 — 열리면 페이지 스크롤이 잠기므로 패널을 헤더 아래 화면 높이로 제한해 안에서 스크롤. 태블릿 .container { padding: 0 24px } 가 위아래 여백까지 0으로 덮어써, 두 클래스로 우선순위를 올려 되살린다(768px 이상 한정이라 모바일 무관). 하단 카드: 고객센터 앞 세로 구분선 · 터치용으로 링크 글자·간격 한 단계 키움 · SNS 는 칸을 늘리지 않고 왼쪽부터 붙인다 */
/* 하단 가로형 이미지 배너 (임시 회색 영역 — 이미지로 교체 예정) */
.mega-banner { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 140px; background: var(--color-surface); border-radius: var(--radius-tab); overflow: hidden; } /* 높이 140px 고정 — 우측 학습지원 카드 하단선(≈138px)에 맞춘 정수 규격, 배너 이미지 872×140 기준 */
.mega-banner picture { display: block; width: 100%; height: 100%; } /* PC·모바일 이미지를 나눠 쓰는 배너의 감싸개 — 없으면 이미지 높이가 0이 된다 */
.mega-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mega-banner_placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.mega-banner_placeholder span { font-size: var(--text-xs); color: var(--color-gray-400); }
@media (min-width: 768px) and (max-width: 1279px) { .mega-banner { height: auto; aspect-ratio: 872 / 140; } } /* 태블릿 전용 — 배너 폭이 872px 보다 넓어져도 높이 140px 고정이면 위아래가 잘리므로, 웹 배너 원본 비율 그대로 늘린다 */
@keyframes megaFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes megaDrop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
/* ========== Main Banner ========== */
.main-banner { padding: 24px 0 0; } /* 하단 패딩 제거 (2026-07-24) */
.main-banner .container { position: relative; }
.main-banner_layout { display: flex; gap: var(--space-base); align-items: stretch; transform-origin: top left; }
.main-banner_main { flex: 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-border); position: relative; }
.mbs-viewport { overflow: hidden; }
.mbs-track { display: flex; transition: transform 0.5s var(--ease-in-out); touch-action: pan-y; } /* 가로 스와이프는 JS가 처리 — 브라우저 좌우 제스처(내비게이션 화살표) 차단 */
.mbs-slide { flex-shrink: 0; width: 100%; }
.mbs-slide a { display: block; }
.mbs-slide img { width: 100%; height: 360px; object-fit: cover; display: block; }
.mbs-controls { position: absolute; bottom: 14px; right: 14px; display: flex; align-items: center; gap: 6px; transform-origin: 100% 100%; }
.mbs-pause-btn { width: 34px; height: 34px; background: rgba(0,0,0,0.5); border: none; border-radius: var(--radius-pill); color: var(--color-canvas); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 150ms ease; }
.mbs-controls_pill { display: flex; align-items: center; gap: 6px; background: rgba(0,0,0,0.5); border-radius: var(--radius-pill); padding: 0 14px; height: 34px; }
.mbs-nav { display: flex; align-items: center; gap: 2px; }
.mbs-prev-btn, .mbs-next-btn { background: none; border: none; color: var(--color-canvas); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 2px; border-radius: var(--radius-xs); transition: opacity 150ms ease; }
.mbs-pause-btn svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.mbs-prev-btn svg, .mbs-next-btn svg { width: 16px; height: 16px; stroke-width: 1.5; }
.mbs-icon-play { display: none; }
.mbs-pause-btn.is-paused .mbs-icon-pause { display: none; }
.mbs-pause-btn.is-paused .mbs-icon-play { display: block; }
.mbs-counter { font-size: var(--text-2xs); font-weight: var(--font-medium); color: var(--color-canvas); white-space: nowrap; padding: 0 2px; letter-spacing: 0.2px; }
.mbs-all-link { font-family: inherit; font-size: var(--text-2xs); color: rgba(255,255,255,0.92); background: none; border: none; border-left: 1px solid rgba(255,255,255,0.3); text-decoration: none; padding-left: 9px; margin-left: 3px; white-space: nowrap; cursor: pointer; transition: color 150ms ease; }
/* 전체 배너 모달 */
.banner-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; }
.banner-modal[hidden] { display: none; }
.banner-modal_overlay { position: absolute; inset: 0; background: var(--color-overlay); animation: bannerModalFade 200ms ease; }
.banner-modal_panel { position: relative; display: flex; flex-direction: column; width: min(800px, calc(100vw - 48px)); max-height: calc(100vh - 80px); background: var(--color-canvas); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.18); animation: bannerModalPop 200ms var(--ease-in-out); }
.banner-modal_head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--color-border); }
.banner-modal_title { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--color-ink); }
.banner-modal_close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: var(--radius-pill); color: var(--color-gray-700); cursor: pointer; transition: background 150ms ease; }
.banner-modal_close svg { width: 20px; height: 20px; }
.banner-modal_grid { display: block; padding: var(--space-xl); overflow-y: auto; } /* 컬리처럼 1열 세로 나열 (2026-07-24, 기존 2열 그리드) — grid는 스크롤 패널에서 행 높이를 균등 분배해 배너가 잘리므로 block */
.banner-modal_item { display: block; margin-bottom: var(--space-base); border-radius: var(--radius-md); overflow: hidden; transition: transform 200ms ease-out; }
.banner-modal_item picture { display: block; } /* picture 기본 inline이면 카드 높이가 붕괴(이미지 잘림) — .mbs-slide picture와 동일 처리 */
.banner-modal_item-mo { display: none; } /* 과목 카테고리 — 모바일 롤링 배너(hero)와 짝인 모바일용 항목. 웹·태블릿은 기존 배너(-pc)만 (모바일 전환은 mobile.css) */
.banner-modal_item img { display: block; width: 100%; max-width: 924px; height: auto; margin: 0 auto; } /* 원본(924px)보다 확대되지 않게 */
@keyframes bannerModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bannerModalPop { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } }
/* ── 로그인 안내 모달 — 비로그인 상태에서 회원 기능(찜 등) 클릭 시. 판별은 main.js isLoggedIn() ── */
.login-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; }
.login-modal[hidden] { display: none; }
.login-modal_dim { position: absolute; inset: 0; background: var(--color-overlay); animation: bannerModalFade 200ms ease-out; } /* 딤은 단일 토큰 사용 원칙 */
.login-modal_panel { position: relative; width: min(480px, calc(100% - 48px)); padding: 52px 32px 32px; background: var(--color-canvas); border-radius: var(--radius-xl); text-align: center; animation: bannerModalPop 200ms ease-out; }
.login-modal_text { margin-bottom: 32px; font-size: var(--text-lg); font-weight: var(--font-medium); color: var(--color-ink); letter-spacing: -0.3px; } /* 웹 500 — 모바일은 mobile.css에서 600 */
.login-modal_actions { display: flex; gap: 10px; justify-content: center; }
.login-modal_btn { display: inline-flex; align-items: center; justify-content: center; min-width: 170px; height: 50px; padding: 0 20px; border-radius: var(--radius-md); background: var(--color-gray-600); font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--color-canvas); transition: background var(--duration-base) var(--ease-default); }
.login-modal_btn-primary { background: var(--color-primary); }
body.login-modal-lock { overflow: hidden; }
/* ── 사이트 진입 팝업 — 메인 진입 시 main.js가 주입. 여러 장이면 카드가 나란히 배치 (모바일은 mobile.css에서 하단 시트로 전환) ── */
.entry-popup { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; }
.entry-popup_dim { position: absolute; inset: 0; background: var(--color-overlay); animation: bannerModalFade 200ms ease-out; }
.entry-popup_panel { position: relative; max-width: calc(100vw - 48px); max-height: calc(100vh - 80px); overflow-y: auto; }
.entry-popup_track { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: var(--space-lg); }
.entry-popup_card { display: flex; flex-direction: column; width: min(440px, calc(100vw - 48px)); background: var(--color-canvas); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-floating); animation: bannerModalPop 200ms var(--ease-in-out); }
.entry-popup_media { display: block; }
.entry-popup_media img { display: block; width: 100%; height: auto; }
.entry-popup_foot { display: flex; flex-shrink: 0; border-top: 1px solid var(--color-border); }
.entry-popup_today, .entry-popup_close { flex: 1; height: 46px; border: none; background: var(--color-canvas); font-size: var(--text-sm); font-weight: var(--font-regular); color: var(--color-gray-600); cursor: pointer; transition: background var(--duration-base) var(--ease-default); }
/* 팝업이 열릴 때 패널로 포커스를 옮겨 둔다(모달 진입 알림·포커스 트랩용).
키보드·마우스로 직접 닿지 않는 껍데기라 포커스 테두리는 그리지 않는다 */
.entry-popup_panel:focus { outline: none; }
.entry-popup_today { flex: 0 0 auto; padding: 0 var(--space-lg); border-right: 1px solid var(--color-border); } /* 글자폭만큼만 — 주 동작인 닫기에 자리를 내준다 */
.entry-popup_close { flex: 1; font-weight: var(--font-semibold); color: var(--color-ink); }
.entry-popup_dots { display: none; } /* 도트는 모바일 시트 전용 */
.entry-popup_foot-sheet { display: none; } /* 시트 공용 푸터도 모바일 전용 — 웹·태블릿은 카드별 푸터 사용 */
body.entry-popup-lock { overflow: hidden; }
/* 토익 라운지 — 등록된 글이 없을 때 */
.community-empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; font-size: var(--text-sm); color: var(--color-gray-500); }
/* 토익 라운지 상세 — 원본 게시물을 불러와 보여주는 틀.
인스타·쇼츠는 세로가 길고 유튜브는 가로가 넓어 종류에 따라 비율을 달리한다 */
.lounge-embed { position: relative; margin: 0 auto 28px; background: var(--color-surface); border-radius: var(--radius-md); overflow: hidden; }
.lounge-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
/* 인스타는 게시물마다 높이가 달라(캡션·캐러셀·댓글) 비율을 고정하면 아래가 잘린다.
임베드가 보내오는 실제 높이를 js/front/lounge-view.js 가 받아 --lounge-embed-h 로 넣는다.
그 값이 오기 전까지만 아래 기본 높이를 쓴다. */
.lounge-embed-tall { width: min(400px, 100%); height: var(--lounge-embed-h, 620px); }
.lounge-embed-wide { width: 100%; aspect-ratio: 16/9; }
.lounge-embed_fallback { margin-bottom: 24px; padding: 24px; background: var(--color-surface); border-radius: var(--radius-md); text-align: center; font-size: var(--text-sm); color: var(--color-gray-600); }
.lounge-content { font-size: var(--text-base); color: var(--color-ink); line-height: 1.8; }
.lounge-content img { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }
.lounge-content .se-section-align-left { text-align: left; }
.lounge-content .se-section-align-center { text-align: center; }
.lounge-content .se-section-align-right { text-align: right; }
:is(.notice-view_body, .faq-item_a-body) img { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }
:is(.notice-view_body, .faq-item_a-body, .daily-detail_content) .se-section-align-left { text-align: left; }
:is(.notice-view_body, .faq-item_a-body, .daily-detail_content) .se-section-align-center { text-align: center; }
:is(.notice-view_body, .faq-item_a-body, .daily-detail_content) .se-section-align-right { text-align: right; }
.daily-detail_content :is([style*="text-align"], [align], .se-section-align-left, .se-section-align-center, .se-section-align-right) img { display: inline-block; margin-left: 0; margin-right: 0; vertical-align: middle; }
/* 하단 버튼 두 개 — 원문 버튼이 폼 제출용(52px·최소폭 220px)이라 옆의 목록 버튼보다 커 보였다.
라운지 상세에서만 목록 버튼(46px)에 맞춰 나란히 같은 크기로 둔다 */
.lounge-view_foot { display: flex; gap: 10px; justify-content: center; }
.lounge-view_foot .notice-view_list-btn,
.lounge-view_foot .inquiry-submit_btn { height: 46px; min-width: 160px; padding: 0 28px; justify-content: center; font-size: var(--text-sm); font-weight: var(--font-semibold); }
/* 교재인증 모달 (사은품 모의고사 기출문제 다운로드) — 로그인 모달 컴포넌트를 쓰되 내용이 많아 위 여백을 줄인다.
보여주는 것은 레거시 인증창(etstoeic/unAuth)과 같다: 표지·교재명·빈칸 문제·쪽 안내·저작권 문구 */
.book-auth-modal .login-modal_panel { padding: 32px; }
.book-auth_title { margin-bottom: 20px; font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--color-ink); }
.book-auth_book { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; text-align: left; }
.book-auth_cover { width: 90px; height: 126px; object-fit: cover; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.book-auth_cover[hidden] { display: none; }
.book-auth_name { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-ink); line-height: 1.5; }
.book-auth_label { margin-bottom: 8px; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-primary); }
.book-auth_question { padding: 16px; margin-bottom: 12px; background: var(--color-surface); border-radius: var(--radius-md); font-size: var(--text-base); color: var(--color-ink); line-height: 1.6; }
/* 정답 자리 — 레거시도 같은 자리를 빈 네모로 보여준다 */
.book-auth_blank { display: inline-block; min-width: 72px; height: 1.2em; margin: 0 4px; border-bottom: 2px solid var(--color-primary); vertical-align: middle; }
.book-auth_guide { margin-bottom: 16px; font-size: var(--text-xs); color: var(--color-gray-600); line-height: 1.6; }
.book-auth_guide b { color: var(--color-coral); }
.book-auth_field { margin-bottom: 16px; text-align: left; }
.book-auth_message { min-height: 18px; margin-top: 6px; font-size: var(--text-xs); color: var(--color-coral); }
.book-auth_copy { margin-bottom: 20px; font-size: var(--text-2xs); color: var(--color-gray-500); line-height: 1.6; }
.book-auth_sms-row { display: flex; align-items: center; gap: 8px; }
.book-auth_sms-row .inquiry-input { min-width: 0; }
.book-auth_sms-row .login-modal_btn { flex: 0 0 auto; }
.book-auth_timer { flex: 0 0 44px; color: var(--color-coral); font-size: var(--text-xs); text-align: right; }
.main-banner_side { width: 300px; flex-shrink: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-border); position: relative; }
.rbs-viewport { overflow: hidden; }
.rbs-track { display: flex; transition: transform 0.5s var(--ease-in-out); touch-action: pan-y; } /* 가로 스와이프는 JS가 처리 — 브라우저 좌우 제스처(내비게이션 화살표) 차단 */
.rbs-slide { flex-shrink: 0; width: 100%; }
.rbs-slide a { display: block; }
.rbs-slide picture { display: block; }
.rbs-slide img { width: 100%; height: 360px; object-fit: cover; display: block; }
.main-banner_btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.92); border-radius: 50%; transition: background var(--duration-fast) var(--ease-default); z-index: 2; border: 1px solid var(--color-border-strong); }
.main-banner_btn svg { width: 20px; height: 20px; color: var(--color-ink); }
.main-banner_btn-prev { left: -22px; }
.main-banner_btn-next { right: -22px; }
/* v1 캐러셀 호환용 (index_v1.html) */
.main-banner_viewport { overflow: hidden; }
.main-banner_track { display: flex; gap: 0; will-change: transform; }
.mb-card { width: 295px; flex-shrink: 0; margin-right: var(--space-lg); border-radius: var(--radius-xl); overflow: hidden; position: relative; cursor: pointer; }
.mb-card img { width: 295px; height: 410px; object-fit: cover; display: block; transition: transform var(--duration-base) var(--ease-out); }
.mb-card-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 65%; pointer-events: none; }
.mb-card-info { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--space-3xl); }
.mb-card-tag { font-size: var(--text-md); font-weight: var(--font-medium); color: rgba(255,255,255,1); letter-spacing: -0.1px; word-break: keep-all; }
.mb-card-title { font-size: var(--text-4xl); font-weight: var(--font-bold); color: var(--color-canvas); line-height: 1.15; letter-spacing: -0.4px; margin-bottom: 6px; word-break: keep-all; }
.mb-card-venue { font-size: var(--text-sm); font-weight: var(--font-regular); color: rgba(255,255,255,1); margin-top: 6px; word-break: keep-all; }
.mb-card-date { font-size: var(--text-2xs); font-weight: var(--font-regular); color: rgba(255,255,255,0.55); word-break: keep-all; }
/* ========== Quick Menu ========== */
.quick-menu { padding: 8px 0 16px; }
.quick-menu_list { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.quick-menu_item { flex: 1; min-width: 0; }
.quick-menu_link { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.quick-menu_icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var(--color-surface); border-radius: var(--radius-xl); transition: background var(--duration-base) var(--ease-default); }
.quick-menu_icon img, .quick-menu_icon svg { width: 24px; height: 24px; color: var(--color-gray-800); stroke-width: 1.5; }
.quick-menu_label { display: flex; flex-direction: column-reverse; align-items: center; gap: 0; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-gray-700); letter-spacing: -0.3px; white-space: nowrap; transition: color var(--duration-base) var(--ease-default); }
.quick-menu_eyebrow { font-style: normal; font-size: var(--text-3xs); font-weight: var(--font-semibold); color: var(--color-gray-400); letter-spacing: 0.2px; line-height: 0.8; transition: color var(--duration-base) var(--ease-default); }
/* ========== Study Links (학습자료 바로가기) ========== */
.study-links { display: flex; gap: var(--space-base); }
.study-links_item { flex: 1; min-width: 0; }
.study-links_btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 72px; background: var(--color-surface); border-radius: var(--radius-xl); font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-gray-800); letter-spacing: -0.3px; transition: background var(--duration-base) var(--ease-default), color var(--duration-base) var(--ease-default); }
.study-links_icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.study-links_icon img, .study-links_icon svg { width: 22px; height: 22px; color: var(--color-primary); stroke-width: 1.6; }
.study-links_label { white-space: nowrap; }
/* ========== Section Common ========== */
.section { padding: 64px 0; } /* 2026-07-24 80→64 — 모바일(48→40)과 같은 결의 여백 축소 */
.section-surface { background: var(--color-surface-light); }
.section_head { display: flex; align-items: center; margin-bottom: var(--space-md); } /* 2026-07-24 24→12 — 타이틀↔탭 밀착 (모바일 8px과 같은 결) */
.section_title { font-size: var(--text-2xl); font-weight: var(--font-semibold); color: var(--color-ink); line-height: 1.36; letter-spacing: -0.4px; }
.section_more { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-primary); letter-spacing: -0.2px; transition: color var(--duration-base) var(--ease-default); } /* 웹은 14px·500 (모바일은 mobile.css에서 12px·500 유지) */
.section_more[hidden] { display: none; } /* display:flex가 브라우저 기본 [hidden] 규칙을 이겨 버리므로 명시적으로 숨김 처리 */
.section_more img, .section_more svg { width: 16px; height: 16px; opacity: 1; }
/* ========== Category Tabs ========== */
.cat-tabs { display: flex; align-items: center; gap: 0; margin-bottom: var(--space-xl); border-bottom: 1px solid var(--color-border); }
.cat-tab { height: 38px; padding: 0 4px; font-size: var(--text-sm); font-weight: var(--font-regular); color: var(--color-gray-600); letter-spacing: -0.2px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default); }
.cat-tab + .cat-tab { margin-left: var(--space-xl); }
.cat-tab-active { font-weight: var(--font-semibold); color: var(--color-primary); border-bottom-color: var(--color-primary); }
a.cat-tab { display: inline-flex; align-items: center; } /* 이벤트 탭은 주소로 다시 조회해 링크다 — inline 요소에는 height가 먹지 않는다 */
/* ========== Book Grid ========== */
.book-carousel { position: relative; }
.book-carousel-swipe { overflow: hidden; } /* 스와이프 슬라이더 뷰포트 (PC는 6열 그리드가 딱 맞아 무해) */
.book-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4xl) var(--space-2xl); } /* 행 간격 48px — 열 간격(32px)과 분리 */
/* 1fr 의 하한은 min-content 라, 줄바꿈 없는 저자명(white-space: nowrap)이 긴 카드가 자기 열을 밀어 넓혔다.
그 바람에 같은 줄의 표지 크기가 제각각이 됐다. minmax(0, 1fr) 로 6열을 항상 같은 폭으로 고정한다 */
.book-grid[hidden] { display: none; }
/* 카테고리 페이지(토익·토스토플·영어·아시아·한국어·eBook)는 웹에서 한 줄에 5권 — 공통 6열보다 카드를 크게.
태블릿·모바일은 아래 반응형 규칙(auto-fit·2열)을 그대로 써야 하므로 웹 전용 미디어쿼리 안에 둔다 */
@media (min-width: 1280px) {
body[data-page="toeic"] .book-grid, body[data-page="toss-toefl"] .book-grid, body[data-page="english"] .book-grid, body[data-page="asian"] .book-grid, body[data-page="korean"] .book-grid, body[data-page="ebook"] .book-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* 5열이라 카드가 커진 만큼 교재명도 키운다 — 리스트형(.is-list, 16px)과 같은 크기 */
body[data-page="toeic"] .book-carousel:not(.is-list) .book-card_title, body[data-page="toss-toefl"] .book-carousel:not(.is-list) .book-card_title, body[data-page="english"] .book-carousel:not(.is-list) .book-card_title, body[data-page="asian"] .book-carousel:not(.is-list) .book-card_title, body[data-page="korean"] .book-carousel:not(.is-list) .book-card_title, body[data-page="ebook"] .book-carousel:not(.is-list) .book-card_title { font-size: var(--text-base); }
}
/* 카테고리·베스트셀러 상품 그리드(메인 스와이프·리스트뷰 제외): 카드 고정 ~160px · 화면이 넓어지면 카드 사이 여백이 늘다가, 한 칸이 더 들어갈 공간이 생기면 열이 자동 추가(auto-fill) */
/* (제거됨 2026-07-24) auto-fill 160px 규칙 — 넓은 화면에서 7열이 되어 메인(6열·gap 32)과 어긋나 삭제, 카테고리도 기본 .book-grid(6열) 사용 */
/* ========== 카테고리 전체보기 탭 배너 (좌: 메인 배너 · 우: 이달의 신간 책 쇼케이스 코너 · 전체보기 활성 시에만 노출, JS 토글) ========== */
.cat-banner { margin-bottom: var(--space-2xl); }
.cat-banner[hidden] { display: none; }
.cat-banner .home-hero { display: none; } /* 메인 배너와 같은 모바일 전용 배너 — 웹·태블릿은 기존 .cat-banner_main 을 쓰므로 숨김 (모바일 노출은 mobile.css) */
.cat-banner_layout { display: flex; gap: var(--space-base); align-items: stretch; }
.cat-banner_main { position: relative; flex: 1; min-width: 0; max-width: 924px; align-self: start; display: block; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-border); aspect-ratio: 924 / 260; }
.cat-banner_main img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 롤링 배너(rbs)로 쓸 때 — 슬라이드가 배너 박스 높이를 꽉 채우게 */
.cat-banner_main .rbs-viewport, .cat-banner_main .rbs-track, .cat-banner_main .rbs-slide, .cat-banner_main .rbs-slide a, .cat-banner_main .rbs-slide picture { height: 100%; }
/* 신간 코너 = 이달의 신간 책 표지 쇼케이스 (파스텔 그라데이션 배경 위 표지 + 제목·태그라인·설명) */
.cat-banner_side { flex: 0 0 300px; display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-canvas); border: 1px solid var(--color-border); text-decoration: none; transition: transform var(--duration-base) var(--ease-default); }
@media (min-width: 1280px) { .cat-banner_main, .cat-banner_side { border-radius: var(--radius-xl); } } /* 웹 전용 — 기본 12px(--radius-lg)보다 한 단계 둥글게 · 태블릿·모바일은 기존값 유지 */
.cat-banner_side-visual { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 22px; overflow: hidden; background: linear-gradient(155deg, var(--color-tint-50) 0%, var(--color-tint-100) 100%); }
/* 배경 = 표지 이미지를 확대·블러(30px) 처리한 앰비언트 배경 */
.cat-banner_side-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(30px) saturate(1.6); transform: scale(1.3); opacity: 0.6; pointer-events: none; }
.cat-banner_side-badge { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.92); font-size: var(--text-2xs); font-weight: var(--font-bold); color: var(--color-primary); letter-spacing: -0.2px; box-shadow: var(--shadow-cover); }
.cat-banner_side-cover { position: relative; z-index: 1; width: 148px; aspect-ratio: 198/277; border: 1px solid var(--color-canvas); border-radius: var(--radius-xs); overflow: hidden; box-shadow: var(--shadow-floating); }
.cat-banner_side-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cat-banner_side-cover-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--color-surface); }
.cat-banner_side-cover-ph span { font-size: var(--text-2xs); color: var(--color-gray-400); }
.cat-banner_side-info { padding: 16px 18px 20px; text-align: center; }
.cat-banner_side-booktitle { display: block; font-size: var(--text-md); font-weight: var(--font-bold); color: var(--color-ink); letter-spacing: -0.3px; line-height: 1.35; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 교재명은 한 줄 고정 — 길면 말줄임(모바일은 아래 미디어쿼리에서 이미 동일 처리) */
.cat-banner_side-tagline { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-primary); margin-bottom: 4px; }
.cat-banner_side-tagline svg { width: 14px; height: 14px; flex: 0 0 auto; } /* 아이콘은 줄어들지 않게 — 남는 폭을 글자가 쓰고 넘치면 말줄임 */
.cat-banner_side-tagline-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* 안내 문구는 한 줄 고정 — 길면 말줄임 */
.cat-banner_side-sub { font-size: var(--text-2xs); color: var(--color-gray-500); line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 설명문도 한 줄 고정 — 길면 말줄임 */
/* 웹 전용 — 배너가 924x260(세로 260)으로 낮아져 신간 카드 기본 높이(359px)가 배너보다 튀어나옴.
카드 내부를 줄여 자연 높이를 배너보다 낮게 만들면 flex stretch가 배너 높이에 정확히 맞춰준다.
1280px 미만은 세로 스택이라 높이를 맞출 필요가 없어 기본값 유지 */
@media (min-width: 1280px) {
.cat-banner_side-visual { padding: 12px; }
.cat-banner_side-cover { width: 96px; }
.cat-banner_side-info { padding: 12px 16px 14px; }
.cat-banner_side-booktitle { margin-bottom: 6px; }
}
.book-card { cursor: pointer; }
.book-card_cover-wrap { position: relative; border: 1px solid var(--color-border); background: var(--color-surface); overflow: hidden; margin-bottom: var(--space-md); aspect-ratio: 198/277; }
.book-card_cover-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 표지를 아직 올리지 않은 교재 — 칸은 그대로 두고 안내만 넣어 같은 줄의 다른 카드가 밀리지 않게 한다 */
.book-card_cover-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--text-2xs); color: var(--color-gray-400); }
.book-card_cover { width: 100%; aspect-ratio: 198/277; object-fit: cover; display: block; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.book-card_cover-placeholder { width: 100%; aspect-ratio: 198/277; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.book-card_cover-placeholder span { font-size: var(--text-2xs); color: var(--color-gray-400); }
.book-card_badge { display: none; }
.book-card_badge-new { background: var(--color-primary); }
/* 순위 뱃지 : 베스트셀러 1~10위. 제목 위 아이콘+BEST n (1~3위 금은동 · 4위부터 통일) */
.book-card_rank { display: inline-flex; align-items: center; gap: 4px; height: 22px; margin-bottom: 8px; padding: 0 9px 0 7px; border-radius: var(--radius-xs); background: var(--color-tint-100); font-size: var(--text-3xs); font-weight: var(--font-bold); color: var(--color-primary); letter-spacing: 0.2px; }
.book-card_rank-1, .book-card_rank-2, .book-card_rank-3 { background: var(--color-coral-bg); color: var(--color-coral); } /* 1~3위는 연한 레드 · 4위부터는 연한 블루 */
.book-card_rank svg { width: 12px; height: 12px; }
.book-card_title { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-ink); line-height: 1.5; letter-spacing: -0.2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--space-xs); }
.book-card_author { font-size: var(--text-xs); font-weight: var(--font-regular); color: var(--color-gray-500); letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: var(--space-sm); }
.book-card_price { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-ink); letter-spacing: 0.5px; } /* 리스트형(.book-list-item_price)과 같은 볼륨 — 카드/리스트 쌍둥이 일치 */
/* 메인 카드 롤오버 준비 — 실제 hover 규칙은 하단 호버 섹션에 */
body[data-page="home"] .book-carousel-swipe { padding-top: 8px; margin-top: -8px; } /* 스와이프 뷰포트의 overflow:hidden 에 카드가 떠오를 여유를 주되, 음수 마진으로 원래 위치 유지 */
body[data-page="home"] .book-card { transition: transform var(--duration-base) var(--ease-default); }
body[data-page="home"] .book-card_title, body[data-page="home"] .lecture-card_title, body[data-page="home"] .community-card_sns-title { transition: color var(--duration-base) var(--ease-default); } /* 카드별 볼드 제목 — 롤오버 시 블루로 */
/* 보기 방식 토글 — 현재 보기의 반대 아이콘 하나만 노출 */
.view-toggle_btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: var(--space-sm); width: 38px; height: 38px; background: var(--color-canvas); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); color: var(--color-gray-700); cursor: pointer; transition: border-color var(--duration-base) var(--ease-default), color var(--duration-base) var(--ease-default); }
.view-toggle_btn svg { width: 18px; height: 18px; }
/* 리스트뷰 전용 요소(배지·설명·버튼)는 그리드뷰에서 숨김 */
.book-card_lbadges, .book-card_actions, .book-card_desc { display: none; }
/* 리스트형 보기 — 검색 결과 리스트와 동일 (표지 128px 좌 · 배지/제목/메타/가격/버튼 우) */
.book-carousel.is-list .book-grid { display: flex; flex-direction: column; gap: 0; }
.book-carousel.is-list .book-grid[hidden] { display: none; } /* 위 규칙이 .book-grid[hidden] 보다 특이도가 높아 숨긴 탭 패널이 그대로 보이던 문제 (리스트뷰·모바일에서 전 패널 노출) */
.book-carousel.is-list .book-card { display: grid; grid-template-columns: 128px 1fr; grid-template-rows: auto auto auto auto auto 1fr; column-gap: var(--space-xl); width: 100%; padding: 28px 0; border-bottom: 1px solid var(--color-border); cursor: default; }
.book-carousel.is-list .book-card:first-child { padding-top: var(--space-xs); }
.book-carousel.is-list .book-card > a { display: contents; }
.book-carousel.is-list .book-card_cover-wrap { grid-area: 1 / 1 / 7 / 2; width: 128px; margin-bottom: 0; align-self: start; }
.book-carousel.is-list .book-card_badge { display: none; }
.book-carousel.is-list .book-card_rank { grid-area: 1 / 2 / 2 / 3; justify-self: start; }
.book-carousel.is-list .book-card_lbadges { grid-area: 2 / 2 / 3 / 3; display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.book-carousel.is-list .book-card_title { grid-area: 3 / 2 / 4 / 3; font-size: var(--text-base); font-weight: var(--font-medium); line-height: 1.4; -webkit-line-clamp: 2; } /* 교보 참고 — 제목 볼륨 축소 (가격만 도드라지는 위계) */
.book-carousel.is-list .book-card_author { grid-area: 4 / 2 / 5 / 3; font-size: var(--text-xs); margin-bottom: var(--space-md); }
.book-carousel.is-list .book-card_desc { grid-area: 5 / 2 / 6 / 3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--text-xs); font-weight: var(--font-regular); color: var(--color-gray-600); line-height: 1.6; letter-spacing: -0.2px; }
.book-carousel.is-list .book-card_price { grid-area: 6 / 2 / 7 / 3; align-self: end; justify-self: start; font-size: var(--text-base); font-weight: var(--font-semibold); letter-spacing: 0.5px; }
.book-carousel.is-list .book-card_actions { grid-area: 6 / 2 / 7 / 3; align-self: end; justify-self: end; display: flex; gap: var(--space-sm); }
/* 리스트뷰 배지 — 회색 아웃라인 · 아이콘 없음이 표준(아래 공통 규칙에서 회색·아이콘 숨김 지정). 도서 상세(.book-detail_tags)만 예외로 아이콘 노출 */
.book-card_lbadge { display: inline-flex; align-items: center; gap: var(--space-xs); height: 22px; padding: 0 7px; border: 1px solid currentColor; border-radius: var(--radius-xs); background: transparent; font-size: var(--text-2xs); font-weight: var(--font-medium); letter-spacing: -0.2px; opacity: 0.9; }
.book-card_lbadge svg { width: 12px; height: 12px; stroke-width: 1.5; color: var(--color-gray-500); }
/* 리스트뷰 액션 버튼 (검색 결과 버튼과 동일) */
.book-card_btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-canvas); font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--color-gray-700); letter-spacing: -0.2px; cursor: pointer; transition: border-color var(--duration-base) var(--ease-default), color var(--duration-base) var(--ease-default), background var(--duration-base) var(--ease-default); }
.book-card_btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-canvas); }
/* 찜하기 — 카드형은 가격과 하트를 한 줄에 (제목 줄 수와 무관하게 간격 동일) · 리스트형은 우측 버튼 묶음 유지 */
.book-carousel:not(.is-list) .book-card_bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.book-carousel:not(.is-list) .book-card_actions { display: flex; }
.book-carousel:not(.is-list) .book-card_btn:not(.book-card_fav) { display: none; }
.book-carousel:not(.is-list) .book-card_fav { flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border-radius: 50%; }
.book-carousel:not(.is-list) .book-card_fav svg { width: 16px; height: 16px; }
.book-carousel.is-list .book-card_bottom { display: contents; } /* 래퍼를 풀어 가격·버튼이 리스트형 그리드에 그대로 배치되게 */
.book-carousel.is-list .book-card_fav { flex: 0 0 48px; width: 48px; } /* 다른 버튼(48px)과 정사각으로 맞춤 — 공통 .book-card_fav(44px)는 검색 결과와 공유하므로 여기서만 오버라이드 */
.book-carousel.is-list .book-card_fav svg { width: 22px; height: 22px; }
.carousel-btn { display: none; }
/* ========== Book Finder ========== */
.book-finder { background: var(--color-surface-light); padding: 80px 0; }
.finder-wrap { max-width: 700px; margin: 0 auto; }
.finder-title { font-size: var(--text-4xl); font-weight: var(--font-bold); color: var(--color-ink); letter-spacing: -0.4px; text-align: center; margin-bottom: var(--space-md); }
.finder-subtitle { font-size: var(--text-base); font-weight: var(--font-regular); color: var(--color-gray-600); text-align: center; letter-spacing: -0.2px; margin-bottom: var(--space-4xl); }
.finder-progress { height: 3px; background: var(--color-border); border-radius: var(--radius-pill); margin-bottom: var(--space-2xl); }
.finder-progress_bar { height: 3px; background: var(--color-primary); border-radius: var(--radius-pill); width: 50%; transition: width var(--duration-slow) var(--ease-default); }
.finder-step { padding: var(--space-3xl); background: var(--color-canvas); border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.finder-step_label { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--color-gray-500); letter-spacing: -0.2px; margin-bottom: var(--space-md); }
.finder-step_question { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--color-ink); letter-spacing: -0.3px; margin-bottom: 28px; }
.exam-grid { display: flex; gap: var(--space-base); }
.exam-card { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 20px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--duration-base) var(--ease-default), background var(--duration-base) var(--ease-default); }
.exam-card-active { border-color: var(--color-primary); background: var(--color-tint-50); }
.exam-card_icon { width: 40px; height: 40px; background: var(--color-surface); border-radius: 50%; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; }
.exam-card_icon img, .exam-card_icon svg { width: 20px; height: 20px; color: var(--color-gray-600); }
.exam-card_label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-ink); letter-spacing: -0.2px; margin-bottom: var(--space-xs); }
.exam-card_desc { font-size: var(--text-2xs); font-weight: var(--font-regular); color: var(--color-gray-500); letter-spacing: 0; }
.finder-hint { text-align: center; font-size: var(--text-xs); font-weight: var(--font-regular); color: var(--color-gray-500); margin-top: var(--space-lg); }
/* ========== Strip Banner ========== */
.strip-banner { padding: 24px 0; }
.strip-banner_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-base); }
.strip-banner_link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); height: 150px; padding: 0 var(--space-3xl); background: var(--color-surface); border-radius: var(--radius-xl); overflow: hidden; }
.strip-banner_text { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.strip-banner_title { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--color-ink); }
.strip-banner_sub { font-size: var(--text-sm); color: var(--color-gray-600); }
.strip-banner_cover { flex-shrink: 0; width: auto; height: 118px; border: 1px solid var(--color-border); border-radius: var(--radius-xs); }
.strip-banner_dots { display: none; } /* 도트는 모바일 캐러셀 전용 */
/* ========== Lecture Section ========== */
.lecture-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-lg); }
.lecture-card { cursor: pointer; }
.lecture-card_thumb-wrap { position: relative; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--space-md); background: var(--color-surface); aspect-ratio: 16/9; }
.lecture-card_thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.lecture-card_thumb-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--color-border), var(--color-border-strong)); display: flex; align-items: center; justify-content: center; }
.lecture-card_play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: rgba(0,0,0,0.55); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.lecture-card_play img, .lecture-card_play svg { width: 16px; height: 16px; color: var(--color-canvas); fill: var(--color-canvas); margin-left: 2px; }
.lecture-card_duration { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.7); color: var(--color-canvas); font-size: var(--text-3xs); font-weight: var(--font-regular); border-radius: var(--radius-xs); padding: 2px 5px; }
.lecture-card_title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-ink); line-height: 1.5; letter-spacing: -0.2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
.lecture-card_instructor { font-size: var(--text-xs); font-weight: var(--font-regular); color: var(--color-gray-500); letter-spacing: -0.2px; }
/* ========== Community & SNS ========== */
.community-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.community-card { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-border); background: var(--color-canvas); }
.community-card a { display: block; text-decoration: none; color: inherit; }
.community-card_img-wrap { position: relative; }
.community-card_img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--color-border); }
body[data-page="home"] .community-card_img { object-position: top; } /* 메인 「같이 공부하는 사람들」 썸네일만 상단 기준 크롭 — 라운지는 유튜브 썸네일 특성상 중앙 크롭 유지 */
.community-card_badge { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: var(--space-xs); }
.community-card_badge-ig { background: var(--color-instagram); color: var(--color-canvas); border-radius: var(--radius-xs); padding: 4px 8px; font-size: var(--text-2xs); font-weight: var(--font-bold); }
.community-card_badge-ig svg, .community-card_badge-ig img { width: 14px; height: 14px; }
.community-card_badge-yt { background: var(--color-youtube); color: var(--color-canvas); border-radius: var(--radius-xs); padding: 4px 8px; font-size: var(--text-2xs); font-weight: var(--font-bold); }
.community-card_badge-yt svg, .community-card_badge-yt img { width: 14px; height: 14px; }
.community-card_badge-blog { background: var(--color-blog); color: var(--color-canvas); border-radius: var(--radius-xs); padding: 4px 8px; font-size: var(--text-2xs); font-weight: var(--font-bold); }
.community-card_badge-blog svg, .community-card_badge-blog img { width: 14px; height: 14px; }
.community-card_body { padding: 16px 20px 20px; }
.community-card_sns-title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-ink); letter-spacing: -0.2px; line-height: 1.5; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.community-card_sns-account { font-size: var(--text-xs); font-weight: var(--font-regular); color: var(--color-gray-600); letter-spacing: -0.2px; }
/* ========== Footer ========== */
.footer { background: var(--color-canvas); border-top: 1px solid var(--color-border); padding: 56px 0 32px; }
/* 3단 컬럼: 브랜드(좌) + 사이트맵 그룹(우) */
.footer-inner { display: flex; align-items: flex-start; gap: var(--space-3xl); }
/* 컬럼 1 — 로고 + 사업자 정보 (모바일은 아코디언, PC는 라벨·화살표 숨기고 항상 펼침) */
.footer-brand { flex: 0 0 auto; max-width: 460px; }
.footer-brand_bar { display: block; width: auto; padding: 0; background: none; border: 0; text-align: left; cursor: default; }
.footer-brand_label, .footer-brand_arrow { display: none; }
.footer-logo { display: inline-block; margin-bottom: var(--space-lg); }
.footer-logo_img { height: 30px; width: auto; vertical-align: middle; }
.footer-info_list { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--space-md); }
.footer-info_item { font-size: var(--text-xs); font-weight: var(--font-regular); color: var(--color-gray-500); letter-spacing: -0.2px; line-height: 1.7; }
.footer-info_item strong { font-weight: var(--font-medium); color: var(--color-gray-600); }
/* 수상 배지 띠 — 사업자 정보·사이트맵 줄과 저작권 줄 사이의 독립 가로 띠. 위아래 선으로 구획하고, 배지는 [그림 | 설명] 가로형을 세로선으로 나눈다 */
.footer-awards { display: flex; align-items: center; margin-top: var(--space-2xl); padding: var(--space-lg) 0; border-top: 1px solid var(--color-border); }
.footer-awards + .footer-bottom { margin-top: 0; } /* 띠 아래 선이 곧 저작권 줄의 윗선 — 두 줄 사이 빈 여백을 없앤다 */
.footer-award { display: flex; align-items: center; gap: var(--space-md); padding: 0 var(--space-4xl); }
.footer-award:first-child { padding-left: 0; }
.footer-award + .footer-award { border-left: 1px solid var(--color-border); }
.footer-award_img { display: block; flex-shrink: 0; width: auto; height: 64px; object-fit: contain; } /* 원본 비율이 제각각이라 폭이 아닌 높이로 맞춘다 */
@media (min-width: 1280px) { .footer-award_img-mid { height: 71px; margin: calc(var(--space-xs) * -1) 0 calc(var(--space-md) / -4); } } /* 웹 전용 — 교육대상 배지만 64 → 71px(원본 GIF 높이 그대로라 가장 선명). 늘어난 7px 는 위 -4px·아래 -3px 음수 마진으로 걷어내 띠 높이 유지 — 반 픽셀(-3.5px)로 나누면 그림이 흐려져 정수로 나눈다(3px 토큰이 없어 12px 의 1/4) */
@media (min-width: 1280px) { .footer-award_img-large { height: 84px; margin: calc(var(--space-lg) / -2) 0; } } /* 웹 전용 — 토익 배지만 64 → 84px. 늘어난 20px 는 위아래 음수 마진(-10px씩, 20px 의 절반)으로 걷어내 띠 높이는 그대로 두고 그림 위아래 여백만 줄인다 */
@media (min-width: 1280px) { .footer-award_img-small { height: 60px; } } /* 웹 전용 — 팝업스토어 로고는 가로로 길어 64px 이면 무거워 보여 60px 로 줄인다. 띠 높이는 다른 배지(64px)가 정하므로 여백 보정은 필요 없다 */
.footer-award_text { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--color-gray-700); letter-spacing: -0.2px; line-height: 1.45; white-space: nowrap; }
.footer-award_note { display: block; font-size: 10px; font-weight: var(--font-regular); color: var(--color-gray-500); letter-spacing: -0.2px; } /* 집계 기준 — 수상 내용을 거드는 보조 글자라 SNS 라벨과 같은 10px */
.footer-award_em { font-weight: var(--font-semibold); color: var(--color-primary); } /* 수상 핵심(부문·순위)만 파랑으로 강조 */
.footer-trademark { font-size: 11px; font-weight: var(--font-regular); color: var(--color-gray-400); letter-spacing: -0.2px; line-height: 1.7; }
/* 컬럼 2·3 그룹 — 오른쪽에 나란히 */
.footer-cols { display: flex; gap: 72px; margin-left: auto; }
/* 컬럼 2 — 이용 안내 링크 */
.footer-col_list { display: flex; flex-direction: column; gap: var(--space-md); }
.footer-col_link { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-gray-700); letter-spacing: -0.2px; transition: color var(--duration-base) var(--ease-default); }
.footer-col_link-strong { color: var(--color-ink); }
/* 컬럼 3 — Family Site 드롭다운 (sort-select 공통 스타일 재사용 · 푸터는 위로 펼침) + 소셜 */
.footer-family { position: relative; margin-bottom: var(--space-lg); }
.footer-family .sort-select_trigger { width: 100%; justify-content: space-between; font-size: var(--text-xs); } /* 폭 고정(200px)을 풀어 아래 SNS 줄과 같은 너비로 — 부모 .footer-col 의 너비는 SNS 줄이 정한다 */
.footer-family .sort-select_menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; width: 100%; }
.footer-family_link { display: block; }
.footer-social { display: flex; gap: var(--space-base); } /* 원 아래 이름이 원보다 넓어 글자끼리 붙어 보이므로 간격은 16px 유지 */
/* 아이콘 아래에 이름을 함께 둔다 — 네이버 카페가 두 곳이라 아이콘만으로는 어디인지 알 수 없다.
모양은 전체 메뉴의 소셜 버튼(.mega-social)과 같은 결 — 흰 원 + 옅은 테두리, 올리면 테두리가 파래지며 살짝 떠오른다 */
.footer-social_link { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.footer-social_icon { position: relative; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: 50%; transition: border-color var(--duration-base) var(--ease-default), transform var(--duration-base) var(--ease-default); }
.footer-social_icon img, .footer-social_icon svg { width: 18px; height: 18px; opacity: 0.45; transition: opacity var(--duration-base) var(--ease-default); }
/* 올렸을 때 아이콘까지 파랗게 — SVG 를 ![]()
로 넣어 색을 CSS 로 못 바꾸므로, 같은 그림의 파란 버전을 위에 겹쳐 두고 바꿔 보여 준다 */
.footer-social_icon::after { content: ""; position: absolute; width: 18px; height: 18px; background: var(--footer-social-glyph) center / contain no-repeat; opacity: 0; transition: opacity var(--duration-base) var(--ease-default); }
.footer-social_icon-youtube { --footer-social-glyph: url("/images/icons/ico-youtube-blue.svg"); }
.footer-social_icon-instagram { --footer-social-glyph: url("/images/icons/ico-instagram-blue.svg"); }
.footer-social_icon-blog { --footer-social-glyph: url("/images/icons/ico-blog-blue.svg"); }
.footer-social_icon-cafe { --footer-social-glyph: url("/images/icons/ico-cafe-blue.svg"); }
.footer-social_label { font-size: 10px; font-weight: var(--font-medium); color: var(--color-gray-500); letter-spacing: -0.3px; white-space: nowrap; transition: color var(--duration-base) var(--ease-default); } /* 10px — 아이콘을 거드는 보조 글자라 최소 토큰(11px)보다 한 단계 작게 */
/* 하단: 구분선 + 상표 문구(전체 폭 한 줄) + copyright */
.footer-bottom { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.footer-copy_text { font-size: 11px; font-weight: var(--font-regular); color: var(--color-gray-400); letter-spacing: -0.2px; }
/* ========== Scroll to Top ========== */
.bottom-nav { display: none; } /* 모바일 전용 하단 탭바 (컬리 벤치마킹) — 스타일은 mobile.css, 데스크탑·태블릿은 숨김 */
.scroll-top { position: fixed; left: calc(100vw - 170px); top: calc(100vh - 68px); transform: translateX(-50%); width: 44px; height: 44px; background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-tab); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default); z-index: var(--z-sticky); }
.scroll-top-visible { opacity: 1; pointer-events: auto; transition-delay: 0.35s; }
.scroll-top img, .scroll-top svg { width: 24px; height: 24px; opacity: 0.6; }
/* ========================================================
TOEIC Category Page
======================================================== */
/* ── Breadcrumb ── */
.breadcrumb { padding: 22px 0 0; }
.breadcrumb_list { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.breadcrumb_item { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--font-regular); color: var(--color-gray-500); letter-spacing: -0.2px; }
.breadcrumb_link { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-gray-500); transition: color var(--duration-base) var(--ease-default); }
.breadcrumb_home { width: 14px; height: 14px; }
.breadcrumb_sep { width: 14px; height: 14px; color: var(--color-border-strong); }
.breadcrumb_current { color: var(--color-gray-700); font-weight: var(--font-semibold); }
/* ── GNB 2-depth 드롭다운 ── */
.gnb-item { position: relative; display: flex; align-items: center; }
.gnb-link-active { color: var(--color-primary); font-weight: var(--font-semibold); }
.gnb-link-active::after { opacity: 1; }
.gnb-submenu { position: absolute; top: 100%; left: 6px; z-index: var(--z-submenu); display: flex; flex-direction: column; min-width: 232px; padding: var(--space-sm); background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: 0 12px 32px rgba(0,0,0,0.1); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--duration-base) var(--ease-default), transform var(--duration-base) var(--ease-default), visibility var(--duration-base) var(--ease-default); }
.gnb-item:focus-within .gnb-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.gnb-submenu_link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-base); height: 44px; padding: 0 14px; border-radius: var(--radius-md); font-size: var(--text-md); font-weight: var(--font-medium); color: var(--color-ink); letter-spacing: -0.2px; transition: background var(--duration-base) var(--ease-default), color var(--duration-base) var(--ease-default); }
.gnb-submenu_link em { font-style: normal; font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--color-primary); }
/* ── 페이지 히어로 (신규) ── */
.page-hero { padding: 0 0 28px; }
.page-hero_eyebrow { margin-bottom: 6px; font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-primary); letter-spacing: -0.2px; } /* 상위 분류 표기 (예: 시리즈 목록의 매체명) */
.page-hero_title { font-size: var(--text-6xl); font-weight: var(--font-bold); color: var(--color-ink); letter-spacing: -0.8px; line-height: 1.2; margin-bottom: 10px; }
.page-hero_desc { font-size: var(--text-md); font-weight: var(--font-regular); color: var(--color-gray-600); letter-spacing: -0.2px; }
/* ── 도서 목록 섹션 ── */
.books-section { padding-top: 0; }
/* ── 그리드 6열 (토익 페이지 테스트 적용 — 기본 auto-fill 160px 7열 대비 여백 완화) ── */
/* (제거됨 2026-07-24) 토익 페이지 전용 그리드 오버라이드 — 메인과 여백이 달라져 삭제, 공통 규칙(160px 고정폭·균등 분배)을 따름 */
/* ── 무한 스크롤 로더 — 스크롤 도달 시 자동 로딩 ('더 보기' 버튼 대체) ── */
.infinite-loader { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px 0 4px; }
.infinite-loader[hidden] { display: none; }
.infinite-loader_spinner { width: 18px; height: 18px; border: 2px solid var(--color-border-strong); border-top-color: var(--color-primary); border-radius: 50%; opacity: 0; animation: infiniteSpin 0.8s linear infinite; transition: opacity var(--duration-base) var(--ease-default); }
.infinite-loader.is-loading .infinite-loader_spinner { opacity: 1; }
.infinite-loader_text { font-size: var(--text-sm); color: var(--color-gray-500); letter-spacing: -0.2px; }
.infinite-loader.is-done .infinite-loader_spinner { display: none; } /* 완료 시 스피너 제거 */
.infinite-loader.is-done .infinite-loader_text { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--color-ink); } /* 완료 문구는 또렷하게 */
@keyframes infiniteSpin { to { transform: rotate(360deg); } }
/* ── 탭 – 토익 페이지 필 스타일 오버라이드 (라운지·무료인강 페이지도 동일 스타일 공유) ── */
.books-section .cat-tabs, body[data-page="lounge"] .cat-tabs, body[data-page="free-lecture"] .cat-tabs { border-bottom: none; gap: 10px; margin-bottom: 0; padding-bottom: var(--space-2xl); } /* 탭 아래 여백 — 콘텐츠와 넉넉히 분리 */
.books-section .cat-tab, body[data-page="lounge"] .cat-tab, body[data-page="free-lecture"] .cat-tab { height: 44px; padding: 0 20px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); font-size: var(--text-md); font-weight: var(--font-medium); color: var(--color-gray-700); background: var(--color-canvas); margin: 0; transition: background var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default), color var(--duration-base) var(--ease-default); }
.books-section .cat-tab + .cat-tab, body[data-page="lounge"] .cat-tab + .cat-tab, body[data-page="free-lecture"] .cat-tab + .cat-tab { margin-left: 0; }
.books-section .cat-tab-active, body[data-page="lounge"] .cat-tab-active, body[data-page="free-lecture"] .cat-tab-active { background: var(--color-tint-50); border-color: var(--color-primary); color: var(--color-primary); font-weight: var(--font-semibold); }
/* 칩 안의 점수 표기(550+ 등) — 아래 웹 전용 블록이 이 값을 덮어야 하므로 반드시 그 앞에 둔다(특이도가 같아 순서로 결정) */
.books-section .cat-tab em { font-style: normal; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-gray-700); margin-left: 6px; }
.books-section .cat-tab-active em { color: var(--color-primary); }
/* ── 카테고리 2뎁스 탭: 웹 전용 강조 + 헤더 아래 고정 (min-width:1280px = 태블릿 분기 밖) ──
고객사가 "탭이 눈에 띄지 않는다"고 해서 ① 선택 칩을 연한 틴트 → 브랜드 블루 채움으로 대비를 올리고
② 스크롤을 내려도 헤더 바로 아래에 따라붙게 한다.
position:sticky 를 쓰지 않는 이유: 토익만 탭과 상품 목록이 서로 다른 이라
sticky 범위(부모 컨테이닝 블록)가 목록 전에 끝나버린다. 그래서 JS 가 fixed 로 전환한다(is-stuck).
fixed 전환 시 폭·패딩을 .container(max 1320 · 좌우 40)와 동일하게 맞춰 칩이 아래 목록과 정렬된다. */
@media (min-width: 1280px) {
.books-section .cat-tab-active, body[data-page="lounge"] .cat-tab-active, body[data-page="free-lecture"] .cat-tab-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-canvas); }
.books-section .cat-tab-active em, body[data-page="lounge"] .cat-tab-active em, body[data-page="free-lecture"] .cat-tab-active em { color: var(--color-canvas); }
/* :not(.search-result-section) — 검색·학습자료실은 자체 필터 UI(사이드바·FAB)와 활성칩 규칙이 따로 있어 제외.
배경·그림자는 화면 가로 전체(left:0/right:0)를 채우고, 칩은 .container 기준선에 맞춰야 하므로
좌우 padding 은 JS 가 실측값으로 넣는다 (100vw 는 스크롤바를 포함해 7px 어긋난다). */
.books-section:not(.search-result-section) .cat-tabs.is-stuck { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky); padding: var(--space-md) 0; background: var(--color-canvas); box-shadow: var(--shadow-soft); }
/* 토익만 탭이 9개라 기본 좌우 여백(20px)으로는 마지막 칩(비매품 모의고사)이 콘텐츠 폭 밖으로 밀린다.
여백을 줄여 한 줄에 넣고 남는 공간은 칩들이 나눠 가져 탭 줄 끝이 콘텐츠 오른쪽 끝과 정확히 맞는다 */
body[data-page="toeic"] .cat-tab { flex: 1 1 auto; padding: 0 12px; }
}
/* fixed 로 빠진 탭 높이를 대신 채우는 스페이서 — 높이는 JS 가 넣는다.
display 를 선언하면 [hidden] 을 특이도로 눌러 고정 해제 후에도 높이가 남으므로 선언하지 않는다(div 기본값 block). */
/* ── 상품 수 · 정렬 바 ── */
.product-bar { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; background: var(--color-surface-cool); border-radius: var(--radius-lg); margin: 20px 0 40px 0; }
.product-bar_left { display: flex; align-items: center; gap: var(--space-base); }
.product-bar_count { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--color-ink); letter-spacing: -0.2px; }
.product-bar_count em { font-style: normal; } /* 학습자료실은 숫자를 (스크립트 갱신용)으로 감싸 브라우저 기본 기울임이 들어간다 — 검색 페이지처럼 바로 세운다 */
.filter-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 18px; background: var(--color-canvas); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-ink); letter-spacing: -0.2px; cursor: pointer; transition: border-color var(--duration-base) var(--ease-default), color var(--duration-base) var(--ease-default); }
.books-section .filter-btn[hidden] { display: none; }
.filter-btn svg { width: 16px; height: 16px; color: var(--color-primary); }
.product-bar_sort { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; }
.sort-btn { height: 30px; padding: 0 12px; font-size: var(--text-sm); font-weight: var(--font-regular); color: var(--color-gray-500); letter-spacing: -0.2px; background: none; border: none; border-radius: var(--radius-pill); cursor: pointer; transition: color var(--duration-base) var(--ease-default), background var(--duration-base) var(--ease-default); }
.sort-btn-active { font-weight: var(--font-semibold); color: var(--color-ink); background: var(--color-canvas); }
/* ── 셀렉트 드롭다운 (공통) — 셀렉트가 필요한 모든 곳의 기본 컴포넌트. 네이티브