/* 사이트 공통 스타일: 색·글꼴 토큰, 맨 위 사이트 메뉴, 카테고리 메뉴, D-day, 아래 안내, 단순 페이지(허브·소개·방침·404).
   토큰은 :where()로 감싸 우선순위를 0으로 둔다. 페이지가 자기 :root에서 같은 이름을 정하면 그쪽이 이긴다. */

/* Layout: 모눈종이 바탕 위 흰 카드, 빨간 펜 강조. 페이지마다 같은 토큰을 쓴다. */
:where(:root){
  --paper:#f2f5f8; --sheet:#ffffff; --ink:#17202b; --muted:#5a6675; --rule:#d8e0e8;
  --grid:rgba(38,88,140,.07); --pen:#c4302a; --pen-wash:rgba(196,48,42,.08); --chip:#e7edf3;
  --f-display:"Black Han Sans","IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,"IBM Plex Sans KR",monospace;
  --f-pen:"Nanum Pen Script","IBM Plex Sans KR",cursive;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :where(:root:not([data-theme="light"])){
    --paper:#0e1319; --sheet:#151c25; --ink:#e3e9ef; --muted:#97a3b1; --rule:#283341;
    --grid:rgba(140,180,220,.05); --pen:#ff6d61; --pen-wash:rgba(255,109,97,.11); --chip:#212b37; color-scheme:dark;
  }
}
:where(:root[data-theme="dark"]){
  --paper:#0e1319; --sheet:#151c25; --ink:#e3e9ef; --muted:#97a3b1; --rule:#283341;
  --grid:rgba(140,180,220,.05); --pen:#ff6d61; --pen-wash:rgba(255,109,97,.11); --chip:#212b37; color-scheme:dark;
}

/* 맨 위 사이트 메뉴: 사이트 이름 · 카테고리 · 소개 */
.topbar{background:var(--paper); border-bottom:1px solid var(--rule); min-height:39px}
.topbar .wrap{display:flex; align-items:center; gap:4px 14px; padding-block:6px}
.topbar .logo{font-family:var(--f-display); font-size:17px; line-height:1.4; letter-spacing:.01em; color:var(--ink); text-decoration:none; margin-right:auto}
.topbar nav{display:flex; gap:2px}
.topbar nav a{font-size:13px; font-weight:500; color:var(--muted); text-decoration:none; padding:4px 9px; border-radius:6px; white-space:nowrap}
.topbar nav a:hover{background:var(--chip); color:var(--ink)}
.topbar nav a[aria-current]{color:var(--ink)}
/* 카테고리 메뉴는 site.js가 채운다. 채워지기 전에도 높이를 잡아 화면이 밀리지 않게 한다. */
.sitenav .wrap{min-height:52px}

/* 휴대폰에서는 카테고리 메뉴를 두 줄로 접지 않고 한 줄로 밀어서 본다 */
/* header.sitenav로 한 단계 더 구체적으로 써서, 페이지 자체 스타일보다 우선한다 */
@media (max-width:720px){
  header.sitenav .wrap{row-gap:4px}
  header.sitenav nav{flex-wrap:nowrap; overflow-x:auto; width:100%; min-width:0; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  header.sitenav nav::-webkit-scrollbar{display:none}
  header.sitenav nav a{white-space:nowrap; flex:none}
}

/* D-day: 오른쪽 아래에 항상 떠 있는 작은 캡슐. 누르면 날짜가 펼쳐진다. */
.dday{position:fixed; z-index:40; right:calc(14px + env(safe-area-inset-right,0px)); bottom:calc(14px + env(safe-area-inset-bottom,0px));
  display:flex; align-items:center; gap:8px; max-width:calc(100vw - 28px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));
  font:500 13px/1 var(--f-body); color:var(--ink);
  background:color-mix(in srgb,var(--sheet) 92%,transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--rule); border-radius:999px; padding:7px 12px 7px 10px; cursor:pointer;
  box-shadow:0 4px 14px rgba(15,25,40,.10); transition:opacity .2s, transform .2s}
.dday b{font-family:var(--f-mono); font-weight:500; font-size:13.5px; color:var(--pen); font-variant-numeric:tabular-nums}
.dday .dot{width:7px; height:7px; border-radius:50%; background:var(--pen); flex:none}
.dday.past .dot{background:var(--muted)}
.dday .more{display:none; color:var(--muted); font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dday .more a{color:var(--ink); text-underline-offset:3px; margin-left:6px}
.dday[aria-expanded="true"] .more{display:inline}
.dday.away{opacity:0; pointer-events:none; transform:translateY(8px)}

/* 아래 안내: 카테고리 안내 문구 + 사이트 링크 */
.legal{display:grid; gap:6px; margin-top:10px; max-width:78ch; font-size:12px; line-height:1.7; color:var(--muted)}
.legal p{margin:0}
.legal .links{display:flex; flex-wrap:wrap; gap:4px 14px}
.legal .links a{color:inherit; text-underline-offset:3px}
.legal .mail,[data-contact] .mail{font-family:var(--f-mono); user-select:all; color:var(--ink)}

/* 단순 페이지: 허브 · 소개 · 개인정보처리방침 · 404 */
body.simple{margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.7; -webkit-font-smoothing:antialiased}
body.simple .wrap{max-width:980px; margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px))}
body.simple a{color:inherit}
body.simple :focus-visible{outline:2px solid var(--pen); outline-offset:2px}
body.simple main .wrap{display:grid; gap:36px; padding-block:44px 72px}
body.simple h1,body.simple h2,body.simple h3{margin:0; text-wrap:balance}
body.simple h1{font-family:var(--f-display); font-weight:400; font-size:clamp(32px,6.5vw,52px); line-height:1.1; letter-spacing:-.01em}
body.simple h1 .pen{font-family:var(--f-pen); color:var(--pen); font-size:.6em; margin-left:.25em; display:inline-block; transform:rotate(-4deg)}
body.simple h2{font-size:19px; font-weight:700}
body.simple p{margin:0; max-width:66ch}
body.simple .eyebrow{font-size:12.5px; font-weight:500; letter-spacing:.08em; color:var(--muted)}
body.simple .lede{color:var(--muted); font-size:16px}
body.simple .hero{display:grid; gap:12px}
body.simple footer{border-top:1px solid var(--rule)}
body.simple footer .wrap{padding-block:18px 30px; font-size:12.5px; color:var(--muted)}
.band .hero{padding-block:44px 36px}
.band{background-color:var(--sheet); background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:22px 22px; border-bottom:1px solid var(--rule)}

/* 허브의 카테고리 카드 */
.cat{display:grid; gap:12px}
.cat > h2{display:flex; align-items:baseline; gap:10px}
.cat > h2 small{font-size:13px; font-weight:400; color:var(--muted)}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:14px}
.card{display:grid; gap:8px; align-content:start; background:var(--sheet); border:1px solid var(--rule); border-radius:10px; padding:18px 20px; text-decoration:none; color:var(--ink); min-width:0; transition:border-color .15s, transform .15s}
.card:hover{border-color:var(--ink); transform:translateY(-2px)}
.card .kicker{font-family:var(--f-mono); font-size:12px; color:var(--pen); letter-spacing:.03em}
.card b{font-size:18px}
.card .desc{font-size:14px; color:var(--muted)}
.card .meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.card .meta span{font-size:12px; background:var(--chip); border-radius:4px; padding:1px 7px; color:var(--muted)}
.card .go{font-size:13.5px; font-weight:500; margin-top:4px}

/* 문서 페이지(소개 · 방침) */
.doc{display:grid; gap:26px; max-width:72ch}
.doc section{display:grid; gap:8px}
.doc ul,.doc ol{margin:0; padding-left:1.3em; display:grid; gap:4px}
.doc .note{font-size:13px; color:var(--muted)}

/* 로그인 버튼과 로그인 창(hg.js) */
.topbar .hg-me{font:500 13px/1.4 var(--f-body); color:var(--ink); background:var(--sheet); border:1px solid var(--rule); border-radius:999px; padding:3px 11px; margin-left:4px; cursor:pointer; white-space:nowrap; max-width:9.5em; overflow:hidden; text-overflow:ellipsis}
.topbar .hg-me:hover{border-color:var(--ink)}
body.hg-lock{overflow:hidden}
.hg-modal{position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:16px; padding-top:calc(16px + env(safe-area-inset-top,0px)); padding-bottom:calc(16px + env(safe-area-inset-bottom,0px)); background:rgba(10,16,24,.45); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
.hg-card{position:relative; width:min(100%,380px); max-height:100%; overflow:auto; background:var(--sheet); color:var(--ink); border:1px solid var(--rule); border-radius:14px; padding:22px 22px 18px; display:grid; gap:14px; box-shadow:0 18px 50px rgba(10,16,24,.25); font-family:var(--f-body); font-size:14.5px; line-height:1.6}
.hg-card h2{margin:0; font-size:19px; font-weight:700}
.hg-x{position:absolute; top:10px; right:12px; border:0; background:none; font-size:22px; line-height:1; color:var(--muted); cursor:pointer; padding:4px 6px}
.hg-tabs{display:flex; background:var(--chip); border-radius:8px; padding:2px; gap:2px}
.hg-tabs button{flex:1; border:0; background:none; padding:6px 0; border-radius:6px; font:500 13.5px var(--f-body); color:var(--muted); cursor:pointer}
.hg-tabs button[aria-selected="true"]{background:var(--sheet); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08)}
.hg-body{display:grid; gap:14px}
.hg-form{display:grid; gap:10px}
.hg-field{display:grid; gap:4px}
.hg-field span{font-size:12.5px; color:var(--muted)}
.hg-field input{font:15px var(--f-body); color:var(--ink); background:var(--paper); border:1px solid var(--rule); border-radius:8px; padding:9px 11px; width:100%; box-sizing:border-box}
.hg-field input:focus{outline:none; border-color:var(--ink)}
.hg-check{display:flex; align-items:center; gap:8px; font-size:13.5px}
.hg-btn{font:500 14.5px var(--f-body); border:1px solid var(--ink); background:var(--ink); color:var(--paper); border-radius:8px; padding:9px 14px; cursor:pointer}
.hg-btn.sub{background:var(--sheet); color:var(--ink); border-color:var(--rule)}
.hg-btn.warn{background:var(--pen); border-color:var(--pen); color:#fff}
.hg-btn:disabled{opacity:.55; cursor:default}
.hg-note{margin:0; font-size:12.5px; color:var(--muted)}
.hg-note a{color:inherit}
.hg-who{margin:0; font-size:13.5px; color:var(--muted)}
.hg-who b{color:var(--ink); font-family:var(--f-mono); font-weight:500}
.hg-leave summary{font-size:13px; color:var(--muted); cursor:pointer}
.hg-leave .hg-form{margin-top:10px}
.hg-msg{margin:0; min-height:1.2em; font-size:13px; color:var(--pen)}
.hg-msg.ok{color:var(--ok,#1f7a4d)}
.hg-msg:empty{display:none}

@media (prefers-reduced-motion:reduce){ .dday,.card{transition:none} .card:hover{transform:none} }
@media print{ .dday{display:none} }