/* 따로 떨어진 페이지 공용(회원 5쪽·법적 고지 4쪽) — 첫 화면과 같은 머리글(PC 가로 메뉴 · 태블릿/휴대폰 ☰ 서랍)·바닥글·구간·4K 확대.
   원본 토큰만 쓴다(RESPONSIVE.md 1절). 머리글·서랍·바닥글은 첫 화면처럼 px 단위. 구간: 휴대폰 ≤640 · 태블릿 641~1199 · PC ≥1200 · 4K ≥2400(zoom) */
@font-face{font-family:"NostalgicMongtori";src:url("/fonts/Griun_Mongtori-Rg.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{--ink:#29223e;--purple:#7046bd;--soft:#f2edfc;--line:#e7e0f0;--bg:#faf9fd;--muted:#736985;--focus:var(--purple);--site-font:"NostalgicMongtori","Malgun Gothic",sans-serif;--read-font:"Malgun Gothic","맑은 고딕",sans-serif;--head-h:56px;--z:1}
*{box-sizing:border-box}
html{font-size:clamp(16px,.3vw + 11.5px,22px);-webkit-text-size-adjust:100%}
/* zoom을 걸면 vh·vw도 함께 커지므로 화면 높이 계산은 100vh / var(--z) */
body{margin:0;min-height:calc(100vh / var(--z));min-height:calc(100dvh / var(--z));display:flex;flex-direction:column;background:var(--bg);color:var(--ink)}
body > main{flex:1 0 auto;width:100%}
[hidden]{display:none!important}
[tabindex="-1"]:focus:not(:focus-visible){outline:none}

/* ───── 머리글 ───── */
.site-head{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;height:var(--head-h);padding:0 16px;border-bottom:1px solid var(--line);background:#ffffffef;backdrop-filter:blur(12px);font:16px/1.6 var(--site-font);color:var(--ink)}
.site-head a,.site-drawer a,.site-foot a{-webkit-tap-highlight-color:transparent}
.site-head a:focus-visible,.site-head button:focus-visible,.site-drawer a:focus-visible,.site-drawer button:focus-visible,.site-foot a:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.site-head .brand{flex-shrink:0;font-size:18px;font-weight:800;letter-spacing:0;color:var(--ink);text-decoration:none;white-space:nowrap}
.site-head .brand span{color:var(--purple)}
.site-menu-btn{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:20px/1 var(--site-font);cursor:pointer}

/* 가로 메뉴(PC에서만 보임) */
.site-nav{display:none}
.site-nav ul{display:flex;justify-content:center;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.site-nav a{display:block;padding:8px 11px;border-radius:10px;color:var(--ink);font-size:15px;text-decoration:none;white-space:nowrap}
.site-nav a:hover{background:var(--soft);color:var(--purple)}
.site-nav a[aria-current=page]{color:var(--purple);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:9px}

/* 로그인·내 정보 — 로그인 상태를 받기 전엔 자리만 차지 */
.site-auth{display:flex;align-items:center;gap:12px;min-width:0;margin-left:auto;visibility:hidden}
.site-auth.ready{visibility:visible}
.site-auth a{display:inline-flex;align-items:center;gap:6px;min-width:0;min-height:44px;color:var(--purple);font-size:14px;text-decoration:none;white-space:nowrap}
.site-auth a:hover{text-decoration:underline}
.site-auth a[aria-current=page] > span:last-child{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.site-auth svg{flex-shrink:0;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.site-auth .nick{display:inline-block;max-width:9em;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
/* 휴대폰: 아이콘 + 짧은 글(로그인 / 내 정보 · 로그아웃), 닉네임은 숨김 */
.site-auth .nick,.site-auth .sep{display:none}

/* ───── ☰ 서랍(첫 화면 dialog#menu와 같은 모양) ───── */
.site-drawer{position:fixed;inset:0 auto 0 0;width:min(310px,85vw);max-width:none;height:auto;max-height:none;margin:0;padding:28px 22px;overflow-y:auto;border:0;border-right:1px solid var(--line);background:#fff;color:var(--ink);font:16px/1.6 var(--site-font)}
.site-drawer::backdrop{background:#21133166;backdrop-filter:blur(3px)}
.site-drawer .menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:40px}
.site-drawer .menu-top .brand{font-size:20px;font-weight:800;letter-spacing:2px}
.site-drawer .menu-close{width:44px;height:44px;border:0;border-radius:10px;background:var(--soft);color:var(--ink);font:23px/1 var(--site-font);cursor:pointer}
.site-drawer ul{margin:0;padding:0;list-style:none}
.site-drawer nav a{display:block;margin:7px 0;padding:14px 18px;border-radius:12px;color:var(--ink);font-size:16px;text-decoration:none}
.site-drawer nav a:hover,.site-drawer nav a[aria-current=page]{background:var(--soft);color:var(--purple)}

/* ───── 바닥글 ───── */
.site-foot{padding:8px 16px 32px;text-align:center;color:var(--muted);font-family:var(--site-font)}
.site-foot .home-link{display:inline-flex;align-items:center;gap:.3em;min-height:44px;padding:0 6px;color:var(--purple);font-size:14px;text-decoration:none}
.site-foot .home-link:hover{text-decoration:underline}
.site-foot .mark{margin:4px 0 0;font-size:13px;letter-spacing:2px}
.legal-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 6px;margin:6px 0 0;padding:0;list-style:none;font-size:14px;line-height:1.5}
.legal-links li + li::before{content:"·";margin-right:6px;color:#c9c1d4}
.legal-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:var(--muted);text-decoration:none;white-space:nowrap}
.legal-links a:hover{color:var(--purple);text-decoration:underline}
.legal-links .key{font-weight:700}
.legal-links a[aria-current=page]{color:var(--purple);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.site-meta{margin:6px 0 0;font-size:13px;line-height:1.7;color:var(--muted)}
.site-meta a{color:var(--muted);text-decoration:none}
.site-meta a:hover{color:var(--purple);text-decoration:underline}

@media(max-width:640px){
  .legal-links{gap:0 12px}
  .legal-links li + li::before{display:none}
}

/* ───── 태블릿 641~1199 ───── */
@media(min-width:641px){
  :root{--head-h:68px}
  .site-head{gap:14px;padding:0 24px}
  .site-head .brand{font-size:20px;letter-spacing:2px}
  .site-auth svg{display:none}
  .site-auth .nick{display:inline-block}
  .site-auth .sep{display:inline}
}

/* ───── PC ≥1200: 브랜드 · 가로 메뉴 8개 · 로그인/내 정보 ───── */
@media(min-width:1200px){
  :root{--head-h:76px}
  .site-head{gap:16px;padding:0 6%}
  .site-menu-btn{display:none}
  .site-nav{display:block;flex:1;min-width:0}
  .legal-links a,.site-foot .home-link{min-height:36px}
}
@media(min-width:1200px) and (max-width:1399px){.site-auth .nick{max-width:6em}}

/* ───── 4K: 원본이 px 단위라 통째로 키움 ───── */
@media(min-width:2400px){html{zoom:1.5;font-size:16px}:root{--z:1.5}}
@media(min-width:3200px){html{zoom:2}:root{--z:2}}

@media(prefers-reduced-motion:reduce){.site-head *,.site-drawer *,.site-foot *{transition:none!important;animation:none!important}}