/* 헤더의 색만 중립 유리 표면으로 정리한다. 기능과 메뉴 구조는 기존 소유자에 둔다. */
.header,.is-home .header{background:rgba(255,255,255,.97);color:var(--ui-accent);border-bottom:1px solid rgba(32,43,53,.10);box-shadow:0 3px 18px rgba(21,32,43,.035)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .header,.is-home .header{background:rgba(255,255,255,.83);backdrop-filter:blur(20px) saturate(1);-webkit-backdrop-filter:blur(20px) saturate(1)}
}
.header .brand,.is-home .header .brand{color:var(--ui-ink)}
.header nav,.header nav>a,.header .nav-group>summary,.is-home .header nav a{color:#48535d}
.header nav>a,.header .nav-group>summary{transition:color .15s ease,border-color .15s ease}
.header nav>a:hover,.header nav>a.active,.header .nav-group>summary:hover,.header .nav-group.active>summary,.header .nav-group[open]>summary,.is-home .header nav a:hover{color:var(--ink)}
.header nav>a.active,.header .nav-group.active>summary{border-bottom-color:var(--ui-ink-3)}
.header .nav-group>summary::after{color:#73818a}
.header .nav-actions{gap:14px}
.header .nav-actions>.text-button,.is-home .header .nav-actions>.text-button{color:#3e4c56;min-height:44px;padding:10px 12px;border-radius:9px;line-height:1.5}
.header .nav-actions>.text-button:hover{background:rgba(34,48,61,.05);color:var(--ink)}
.header .nav-actions>.button.dark,.is-home .header .nav-actions>.button.dark{min-height:44px;padding:11px 16px;border-radius:10px;background:var(--ui-accent);color:#fff;border:1px solid rgba(18,28,38,.13);box-shadow:0 2px 5px rgba(24,35,46,.09);gap:18px}
.header .nav-actions>.button.dark:hover,.is-home .header .nav-actions>.button.dark:hover{background:#182731;filter:none}
.header .menu-button{color:var(--ui-accent);width:44px;height:44px;line-height:1;padding:8px;border:1px solid rgba(36,49,61,.13);border-radius:10px;background:rgba(255,255,255,.55)}
.header .menu-button:hover{background:var(--ui-surface-2)}
.header a:focus-visible,.header button:focus-visible,.header summary:focus-visible{outline:3px solid #3c6b86;outline-offset:4px}
@media(max-width:1180px) and (min-width:761px){.header .nav-actions{gap:8px}}
@media(max-width:760px){
 .header .nav-wrap{padding:0 20px;}
 .header .nav-actions{gap:6px}
 .header .nav-actions>.text-button{padding:10px 8px}
 .header nav,.is-home .header nav{background:rgba(255,255,255,.98);padding:12px 20px 20px;border-bottom:1px solid var(--ui-line);box-shadow:0 14px 24px rgba(25,37,48,.07);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);max-height:calc(100dvh - 68px);overscroll-behavior:contain}
 .header nav>a,.header .nav-group>summary{min-height:48px;line-height:1.5;padding:13px 8px;border-bottom:0;border-radius:7px}
 .header nav>a{display:flex;align-items:center}
 .header nav>a.active,.header .nav-group.active>summary{background:var(--ui-surface-2);color:#172936}
 .header a:focus-visible,.header button:focus-visible,.header summary:focus-visible{outline-offset:1px}
}
@media(prefers-reduced-transparency:reduce){
 .header,.is-home .header,.header nav,.header .nav-dropdown{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){.header nav>a,.header .nav-group>summary{transition:none}}
@media(forced-colors:active){
 .header,.is-home .header,.header nav,.header .nav-dropdown{background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
 .header a:focus-visible,.header button:focus-visible,.header summary:focus-visible{outline-color:Highlight}
}

.header nav>.nav-download-mobile,.header nav>.nav-download-tablet{display:none}
@media(min-width:761px) and (max-width:1050px){.header nav>.nav-download-tablet{display:flex}}
@media(max-width:760px){.header nav>.nav-download-mobile,.is-home .header nav>.nav-download-mobile{display:flex;justify-content:space-between;margin-top:8px;padding:13px 15px;background:var(--ui-accent);color:#fff;border-radius:8px}.header nav>.nav-download-mobile:hover,.header nav>.nav-download-mobile.active,.is-home .header nav>.nav-download-mobile:hover{background:#182731;color:#fff}}

/* 글자 확대 시 헤더 항목을 다음 줄로 보내고 실제 높이를 메뉴·초점 여백에 사용한다. */
.header .nav-wrap{height:auto;min-height:84px;flex-wrap:wrap;row-gap:8px}
.header .brand,.header .nav-actions{flex-shrink:0;white-space:nowrap}
.header .menu-button{width:1.7em;height:1.7em;min-width:44px;min-height:44px;flex-shrink:0}
html{scroll-padding-top:calc(var(--review-height,0px) + var(--header-height,84px) + 12px)}
@media(min-width:761px){.header nav>a,.header .nav-group>summary{white-space:nowrap}}
@media(max-width:760px){
 .header .nav-wrap{min-height:68px;padding-top:8px;padding-bottom:8px}
 .header nav{top:100%;max-height:calc(100dvh - var(--review-height,0px) - var(--header-height,68px))}
}

/* 언어 전환 — 머리말 오른쪽 끝. 두 가지뿐이라 펼치는 메뉴 대신 눌러 고르는 한 벌로 둔다. */
.lang-switch{display:flex;align-items:center;gap:2px;padding:3px 3px 3px 9px;border:1px solid var(--ui-line);border-radius:var(--ui-pill);background:var(--ui-surface-2);color:var(--ui-ink-3)}
.lang-switch>svg{width:15px;height:15px;margin-right:4px;flex-shrink:0}
.lang-switch>button{min-height:28px;padding:5px 9px;border-radius:var(--ui-pill);font-size:12px;font-weight:650;letter-spacing:.03em;color:var(--ui-ink-3);line-height:1.4}
.lang-switch>button:hover{color:var(--ui-ink)}
.lang-switch>button[aria-pressed="true"]{background:#fff;color:var(--ui-ink);box-shadow:var(--ui-shadow-1)}
.lang-switch>button:focus-visible{outline-offset:1px}
@media(max-width:1180px){.lang-switch{padding-left:6px}.lang-switch>svg{display:none}}
@media(max-width:760px){.lang-switch{padding:2px;gap:0}.lang-switch>button{min-height:26px;padding:4px 6px;font-size:11px;letter-spacing:0}}
@media(forced-colors:active){.lang-switch{border-color:CanvasText;background:Canvas}.lang-switch>button[aria-pressed="true"]{background:Highlight;color:HighlightText;box-shadow:none}}

/* 상점·가이드 펼침 메뉴. 네이티브 details가 클릭·키보드·터치를 받고, 항목은 아이콘 칸과 제목·설명 두 줄로 둔다. */
.header .nav-group>summary::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;flex-shrink:0;transition:transform .16s ease}
.header .nav-group[open]>summary::after{transform:rotate(225deg)}
.header .nav-group:not([open]) .nav-dropdown{display:none}
.header .nav-group .nav-dropdown{top:calc(100% + 4px);left:-16px;width:360px;max-height:calc(100dvh - var(--header-height,84px) - 24px);overflow-y:auto;overscroll-behavior:contain;padding:6px;background:var(--paper);border:1px solid rgba(32,45,56,.09);border-radius:16px;box-shadow:0 1px 2px rgba(20,32,42,.04),0 14px 34px -10px rgba(20,32,42,.2);color:var(--ui-ink)}
.header .nav-group .nav-dropdown a{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:13px;row-gap:1px;align-items:center;min-height:0;padding:9px 10px;border:0;border-radius:11px;background:transparent;color:var(--ui-ink);line-height:1.45;white-space:normal;transition:background .12s ease}
.header .nav-dropdown-icon{grid-row:1/span 2;width:36px;height:36px;padding:8px;border-radius:10px;background:var(--ui-surface);color:var(--ui-ink-2);box-shadow:inset 0 0 0 1px rgba(32,45,56,.07);transition:background .12s ease,color .12s ease,box-shadow .12s ease}
.header .nav-group .nav-dropdown a strong{align-self:end;font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.header .nav-group .nav-dropdown a span{align-self:start;font-size:12px;line-height:1.5;color:var(--ui-ink-3)}
.header .nav-group .nav-dropdown a:hover,.header .nav-group .nav-dropdown a:focus-visible{background:var(--ui-surface-2)}
.header .nav-group .nav-dropdown a:hover .nav-dropdown-icon{background:var(--paper);color:var(--ui-ink);box-shadow:inset 0 0 0 1px var(--ui-line-strong),0 1px 2px rgba(20,32,42,.06)}
.header .nav-group .nav-dropdown a.active .nav-dropdown-icon{background:var(--ui-accent);color:#fff;box-shadow:none}
.header .nav-group .nav-dropdown a:focus-visible{outline-offset:-2px}
.nav-dropdown-label{margin:6px 10px 0;padding:12px 0 4px;border-top:1px solid var(--ui-line);font-size:11px;font-weight:600;line-height:1.5;letter-spacing:.02em;color:var(--ui-ink-3)}
@keyframes nav-dropdown-in{from{opacity:0;transform:translateY(-6px)}}
@media(min-width:761px){.header .nav-group[open] .nav-dropdown{animation:nav-dropdown-in .16s cubic-bezier(.2,.7,.3,1)}}
@media(max-width:760px){
 .header .nav-group .nav-dropdown{position:static;width:auto;max-height:none;overflow:visible;margin:2px 0 8px;padding:2px 0 4px 6px;background:transparent;border:0;border-radius:0;box-shadow:none}
 .header .nav-group .nav-dropdown a{grid-template-columns:34px minmax(0,1fr);column-gap:12px;min-height:56px;padding:8px 10px}
 .header .nav-dropdown-icon{width:34px;height:34px;padding:7px}
 .nav-dropdown-label{margin:4px 10px 0;padding-top:10px}
}
@media(prefers-reduced-motion:reduce){.header .nav-group>summary::after,.header .nav-group .nav-dropdown a,.header .nav-dropdown-icon{transition:none}.header .nav-group[open] .nav-dropdown{animation:none}}
@media(forced-colors:active){.header .nav-dropdown-icon{border:1px solid CanvasText}.nav-dropdown-label{border-color:CanvasText}}

/* Shared client download label, with a decorative download glyph. */
.client-download-icon{width:18px;height:18px;flex-shrink:0;vertical-align:middle}
.client-download-link{display:inline-flex;align-items:center;gap:12px}
.footer-nav a:has(.client-download-icon){gap:10px}

/* 스크롤을 내리면 머리말이 위로 빠지고, 올리면 내려온다(header-scroll.js). 머리말 아래에 붙던 끈끈이 칸(안내 목차·크레딧 날개·커뮤니티 옆칸·설계안 탭)은 --header-offset을 따라 같이 올라간다. */
:root{--header-offset:var(--header-height,72px)}
html.header-hidden{--header-offset:0px}
.header{transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease}
html.header-hidden .header{transform:translateY(calc(-100% - var(--review-height,0px)));box-shadow:none}
/* 머리말은 화면에 고정한다(유튜브와 같은 방식). sticky는 본문과 함께 움직여서, 맨 위에서 더 당기면(고무줄 스크롤) 머리말까지 끌려 내려가고 그 위가 비었다. 고정하면 머리말은 꼭대기에 남고 본문만 당겨진다. 흐름에서 빠진 자리는 body 위 여백이 대신하고, 실제 높이는 app.js가 --header-height로 잰다. */
.header{position:fixed;top:0;left:0;right:0}
body{padding-top:calc(var(--review-height,0px) + var(--header-height,73px))}
@media(max-width:760px){body{padding-top:calc(var(--review-height,0px) + var(--header-height,69px))}}
.browse-sidebar,.credit-aside,.lounge-sidebar,.design-tabs{transition:top .28s cubic-bezier(.2,.7,.3,1)}
@media(prefers-reduced-motion:reduce){.header,.browse-sidebar,.credit-aside,.lounge-sidebar,.design-tabs{transition:none}}

/* 맨 위에서 더 당기거나 맨 아래에서 더 밀면(고무줄 스크롤) 문서 바깥 바탕이 드러난다. 그 바탕을 머리말·바닥글과 같은 흰색으로 두어 머리말이 위로, 바닥글이 아래로 이어져 보이게 하고, 본문 회색은 body가 칠한다. */
:root{background:#fff}
body{background:var(--paper)}