/* 공통 헤더와 푸터 (10-16). 원본 마크업은 partials/header.html, partials/footer.html 이고
scripts/build-blog.mjs 가 랜딩, /app, 블로그, 404 에 끼워 넣는다. 색과 글꼴은 각 페이지의 :root 토큰을 쓴다 */
/* 헤더 */
header.hd{position:sticky;top:0;z-index:5;background:rgba(252,252,250,.9);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
margin:0 -20px;padding:0 20px;border-bottom:1px solid var(--line)}
.hd .in{position:relative;max-width:1040px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;height:80px}
.hd .logo{display:flex;align-items:center;flex:none}
.hd .logomark{height:72px;width:auto;display:block}
nav.menu{display:flex;gap:4px;align-items:center}
nav.menu a{padding:8px 14px;border-radius:999px;font-size:15px;font-weight:600;line-height:1.4;color:var(--muted);text-decoration:none;white-space:nowrap}
nav.menu a:hover{background:var(--hl-soft);color:var(--ink)}
nav.menu a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.menu-btn{display:none}
/* 좁은 화면: 메뉴를 햄버거로 접는다. 헤더는 64px 한 줄.
여닫기는 app/site.js 가 html 에 menu-js 를 붙인 뒤에만 접는다. 스크립트가 막히면 메뉴가 그대로 펼쳐져 보인다 */
@media(max-width:560px){
.hd .in{height:64px}
.hd .logomark{height:52px}
.menu-js .menu-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;
border:0;border-radius:12px;background:transparent;color:var(--ink);cursor:pointer}
.menu-js .menu-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;position:relative;transition:transform .15s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-6px}
.menu-btn span::after{top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.menu-js nav.menu{display:none;position:absolute;top:100%;left:-20px;right:-20px;flex-direction:column;align-items:stretch;gap:0;
padding:8px 12px 12px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(25,22,17,.08)}
.menu-js nav.menu[data-open]{display:flex}
.menu-js nav.menu a{display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:12px;font-size:16px}
html:not(.menu-js) nav.menu a{padding:6px 8px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.menu-btn span,.menu-btn span::before,.menu-btn span::after{transition:none}}
/* 푸터 */
footer.ft{max-width:1040px;margin:56px auto 0;border-top:1px solid var(--line);padding:36px 0 40px;
display:grid;grid-template-columns:repeat(3,1fr);gap:28px 48px;font-size:13px;color:var(--muted);line-height:1.7}
footer.ft .ft-block{display:grid;gap:2px;align-content:start}
footer.ft h4{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--ink)}
footer.ft p{margin:0}
footer.ft a{text-decoration:none}
footer.ft .ft-block a{margin:0;color:var(--muted)}
footer.ft .ft-block a:hover{color:var(--ink)}
footer.ft .ft-note{font-size:12px;opacity:.8;margin-top:4px}
footer.ft .ft-bottom{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;
gap:12px 24px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px}
footer.ft .links{display:flex;gap:6px 18px;flex-wrap:wrap}
footer.ft .copy{font-size:12px}
footer.ft .links a{margin:0;font-weight:600;color:var(--muted)}
footer.ft .links a:hover{color:var(--ink)}
footer.ft .links a.strong{color:var(--ink)}
@media (max-width:640px){
footer.ft{grid-template-columns:1fr;gap:24px;padding:32px 16px 36px}
footer.ft .ft-bottom{flex-direction:column;align-items:flex-start}
}
/* 앱 안 법적 문서 (10-23 App Store 3.1.1). app/site.js 가 /terms?app=1 같은 주소에서 html 에 legal-app 을 붙인다.
문서 본문 말고는 아무것도 그리지 않는다. 머리글 로고, 메뉴, 바닥글 서비스 링크, 다른 화면(첫 화면, 테스트, 결제) 모두 */
.legal-app .hd,
.legal-app footer.ft,
.legal-app .dock,
.legal-app .screen:not([data-screen="legal"]){display:none !important}
.legal-app .screen[data-screen="legal"]{display:block}
/* 11-03 언어 선택은 푸터에. 헤더는 판마다 같은 모양을 유지한다. 주소 짝은 app/site.js */
footer.ft .ft-lang select{margin-top:2px;min-width:160px;padding:10px 36px 10px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;
font:inherit;font-size:15px;color:var(--ink);appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 14px center}
@media (min-width:641px){footer.ft:has(.ft-lang){grid-template-columns:repeat(4,1fr);gap:28px 36px}}