/* WE LOVE PROCESS — 머리·발 (모든 화면 공통)
 * 마크업은 /assets/shell-parts.js 한 곳에서 나온다.
 *
 * 2026-09 판 화면(/studio /teams /notes /story /play)은 저마다 header{} footer{} nav a{} .wrap{} 같은
 * 규칙을 갖고 있다. 그 규칙이 여기로 번지지 않게 머리·발 안쪽을 먼저 비운 뒤(all:revert) 다시 칠한다.
 * 그래서 이 파일은 각 화면의 <style> 보다 뒤에(</head> 바로 앞) 실린다.
 * 여기 있는 규칙은 모두 .site-hd / .site-ft 안쪽만 가리킨다 — 화면 본문은 건드리지 않는다. */

.site-hd, .site-hd *, .site-hd *::before, .site-hd *::after,
.site-ft, .site-ft *, .site-ft *::before, .site-ft *::after { all: revert; box-sizing: border-box }

.site-hd, .site-ft {
  --sh-bg:#F5F5F0; --sh-glass:rgba(245,245,240,.88); --sh-pop:#F5F5F0;
  --sh-ink:#111210; --sh-soft:#3B3D38; --sh-dim:#5E605A; --sh-faint:#8A8C85;
  --sh-line:rgba(17,18,16,.10); --sh-hair:rgba(17,18,16,.07); --sh-hover:#E4EEE8; --sh-focus:#0F3D2E;
  --sh-go-bg:#111210; --sh-go-ink:#fff;
  font-family:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif;
  font-size:16px; line-height:1.7; letter-spacing:-.012em; color:var(--sh-ink);
  word-break:keep-all; overflow-wrap:anywhere; -webkit-font-smoothing:antialiased; text-align:left;
}
/* 검정 바탕 화면(스튜디오·팀 도입) */
.site-hd.sh-dark, .site-ft.sh-dark {
  --sh-bg:#000; --sh-glass:rgba(0,0,0,.88); --sh-pop:#111214;
  --sh-ink:#F4F4F2; --sh-soft:#C9CBD0; --sh-dim:#9A9DA4; --sh-faint:#6B6E75;
  --sh-line:rgba(255,255,255,.16); --sh-hair:rgba(255,255,255,.10); --sh-hover:rgba(255,255,255,.08); --sh-focus:#7FB8C2;
  --sh-go-bg:#F4F4F2; --sh-go-ink:#000;
}
/* 기기 설정을 따르는 화면(하프타임 /play/) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-hd.sh-auto, :root:not([data-theme="light"]) .site-ft.sh-auto {
    --sh-bg:#151614; --sh-glass:rgba(21,22,20,.88); --sh-pop:#1C1E1B;
    --sh-ink:#ECEAE3; --sh-soft:#C9C6BC; --sh-dim:#9A978D; --sh-faint:#6F6D65;
    --sh-line:rgba(255,255,255,.12); --sh-hair:rgba(255,255,255,.07); --sh-hover:#1E2A2C; --sh-focus:#7FB8C2;
    --sh-go-bg:#ECEAE3; --sh-go-ink:#151614;
  }
}
/* 홈 머리 — 이번 호 표지색(--ic, 홈이 <html> 에 건다) 위에 얹힌다. 내려가도 같은 색 띠로 남는다 */
.site-hd.sh-cover {
  --sh-glass:var(--ic,#0F3D2E); --sh-pop:var(--ic,#0F3D2E);
  --sh-ink:#F5F5F0; --sh-soft:#DDE6DF; --sh-dim:rgba(245,245,240,.8); --sh-faint:rgba(245,245,240,.6);
  --sh-line:rgba(255,255,255,.26); --sh-hair:transparent; --sh-hover:rgba(255,255,255,.1); --sh-focus:#D4F75A;
  --sh-go-bg:#D4F75A; --sh-go-ink:#111210;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

.site-hd a, .site-ft a { color:inherit; text-decoration:none; cursor:pointer }
.site-hd :focus-visible, .site-ft :focus-visible { outline:2px solid var(--sh-focus); outline-offset:3px; border-radius:4px }
.site-hd .wrap, .site-ft .wrap { display:block; width:min(1160px, calc(100% - 56px)); max-width:none; margin:0 auto; padding:0 }
.site-hd .wm b, .site-ft .wm b { font-weight:800; font-style:normal; color:inherit }
.site-hd .wm i, .site-ft .wm i { font-weight:200; font-style:normal; color:inherit }

/* ── 머리 ───────────────────────────── */
.site-hd { display:block; position:sticky; top:0; z-index:100; margin:0; padding:0; background:var(--sh-glass);
  -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px); border:0; border-bottom:1px solid var(--sh-hair) }
.site-hd .nav { display:flex; align-items:center; justify-content:space-between; height:60px; gap:16px; position:relative }
.site-hd .brand { display:inline-block; font-size:20px; line-height:1; flex:0 0 auto; letter-spacing:-.02em }
.site-hd .nav-links { display:flex; align-items:center; gap:24px; margin:0; padding:0; font-size:14px; font-weight:500; color:var(--sh-dim) }
.site-hd .nav-links a { display:inline-block; padding:0; background:none; font-weight:500; color:var(--sh-dim); transition:color .15s }
.site-hd .nav-links a:hover, .site-hd .nav-links a[aria-current=page] { color:var(--sh-ink) }
.site-hd .nav-links a[aria-current=page] { font-weight:700 }
.site-hd .nav-links a.go { color:var(--sh-go-ink); background:var(--sh-go-bg); border-radius:999px; padding:8px 15px; font-weight:600 }
.site-hd .nav-links a.go:hover { opacity:.86; color:var(--sh-go-ink) }
.site-hd .menu { display:none; width:40px; height:40px; margin:0; padding:0; border:1px solid var(--sh-line); border-radius:10px;
  background:transparent; position:relative; flex:0 0 auto; cursor:pointer; color:inherit }
.site-hd .menu span, .site-hd .menu::before, .site-hd .menu::after { content:""; display:block; position:absolute; left:50%; top:50%;
  width:16px; height:1.4px; background:var(--sh-ink); transform:translate(-50%,-50%); transition:.2s }
.site-hd .menu::before { transform:translate(-50%, calc(-50% - 5px)) }
.site-hd .menu::after { transform:translate(-50%, calc(-50% + 5px)) }
.site-hd .menu[aria-expanded=true] span { opacity:0 }
.site-hd .menu[aria-expanded=true]::before { transform:translate(-50%,-50%) rotate(45deg) }
.site-hd .menu[aria-expanded=true]::after { transform:translate(-50%,-50%) rotate(-45deg) }
/* 소식 받기 버튼 — 메뉴 밖에 늘 보인다(폰에서는 메뉴 단추 왼쪽) */
.site-hd .hd-news { display:inline-flex; align-items:center; flex:none; margin:0 0 0 -4px; padding:0 15px; min-height:36px; border:1px solid var(--sh-line); border-radius:999px;
  background:transparent; color:var(--sh-ink); font:inherit; font-size:13.5px; font-weight:600; line-height:1; cursor:pointer; white-space:nowrap }
.site-hd .hd-news:hover { border-color:var(--sh-ink) }
.site-hd .hd-news { border-color:var(--sh-faint) }
@media (max-width:900px) {
  .site-hd .hd-news { margin-left:auto; margin-right:8px }
  .site-hd .menu { display:block }
  .site-hd .nav-links { display:none; position:absolute; left:0; right:0; top:62px; flex-direction:column; align-items:stretch; gap:0; padding:8px;
    background:var(--sh-pop); border:1px solid var(--sh-line); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.14);
    max-height:calc(100vh - 74px); max-height:calc(100dvh - 74px); overflow-y:auto; overscroll-behavior:contain }  /* 눕힌 폰처럼 낮은 화면에서는 메뉴 안에서 굴린다 */
  .site-hd .nav-links.open { display:flex }
  .site-hd .nav-links a { display:block; padding:13px 14px; border-radius:9px; font-size:15.5px }
  .site-hd .nav-links a:hover { background:var(--sh-hover) }
  .site-hd .nav-links a.go { text-align:center; margin-top:6px; padding:13px 14px }
}
@media (max-width:560px) { .site-hd .wrap, .site-ft .wrap { width:calc(100% - 36px) } }  /* 본문 .wrap(site.css)과 같은 여백 */

/* ── 발 ─────────────────────────────── */
.site-ft { display:block; margin:0; padding:52px 0 46px; background:var(--sh-bg); border:0; border-top:1px solid var(--sh-hair); max-width:none; width:auto }
.site-ft .fgrid4 { display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr)); gap:36px }
.site-ft .fgrid4.n3 { grid-template-columns:minmax(0,1.5fr) repeat(2, minmax(0,1fr)) }
.site-ft .fbrand .wm { display:block; font-size:20px; line-height:1.2 }
.site-ft .fbrand p { display:block; margin:14px 0 0; max-width:28ch; font-size:13px; color:var(--sh-dim); line-height:1.66 }
.site-ft .fcol h3 { display:block; margin:0 0 14px; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--sh-faint); line-height:1.4 }
.site-ft .fcol a { display:block; width:max-content; max-width:100%; margin-top:9px; font-size:13.5px; color:var(--sh-soft); line-height:1.5 }
.site-ft .fcol a:hover { color:var(--sh-ink) }
.site-ft .fbot { margin-top:44px; padding-top:20px; border-top:1px solid var(--sh-hair); display:flex; justify-content:space-between; gap:8px 16px; flex-wrap:wrap;
  font-size:11.5px; color:var(--sh-faint); line-height:1.6 }
.site-ft .fbot a { color:var(--sh-dim) }
.site-ft .fbot a:hover { color:var(--sh-ink) }
@media (max-width:760px) {
  .site-ft .fgrid4, .site-ft .fgrid4.n3 { grid-template-columns:1fr 1fr; gap:34px 22px }
  .site-ft .fbrand { grid-column:1/-1 }
}
.site-hd .muted { color:var(--sh-dim) }  /* 찾기 운영 화면의 머리 꼬리말 */
@media print { .site-hd, .site-ft { display:none } }

/* ── 소식 받기 창(2026-10-17) — shell.js 가 처음 누를 때 만든다. 폰은 아래에서 올라오는 판, 넓은 화면은 가운데 카드 ── */
dialog.news-sh { all:revert; box-sizing:border-box; position:fixed; inset:auto 0 0 0; margin:0 auto; width:100%; max-width:440px; max-height:90vh; padding:0; border:0;
  border-radius:14px 14px 0 0; background:#F5F5F0; color:#111210; box-shadow:0 -18px 60px rgba(0,0,0,.28); overflow:auto;
  font-family:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',sans-serif; line-height:1.6; letter-spacing:-.012em; word-break:keep-all }
dialog.news-sh::backdrop { background:rgba(17,18,16,.55) }
dialog.news-sh *, dialog.news-sh *::before, dialog.news-sh *::after { box-sizing:border-box }
.news-in { display:flex; flex-direction:column; gap:14px; padding:12px 18px 26px }
.news-grip { align-self:center; width:40px; height:4px; border-radius:999px; background:#CFCFC6 }
.news-hd { display:flex; justify-content:space-between; align-items:flex-start; gap:12px }
.news-hd h2 { margin:0; font-size:21px; font-weight:800; line-height:1.35; letter-spacing:-.025em }
.news-hd p { margin:6px 0 0; font-size:14px; color:#3B3D38 }
.news-x { flex:0 0 44px; width:44px; height:44px; border:0; border-radius:999px; background:#E6E6DF; color:#111210; display:inline-flex; align-items:center; justify-content:center; cursor:pointer }
.news-row { display:flex; align-items:center; gap:14px; min-height:68px; padding:14px; border:1px solid #E2E2DA; border-radius:10px; background:#fff; color:#111210; text-decoration:none }
.news-row:hover { border-color:#111210 }
.news-row[aria-disabled=true] { opacity:.6; pointer-events:none }
.news-ic { flex:0 0 40px; width:40px; height:40px; border-radius:999px; background:#E6E6DF; display:inline-flex; align-items:center; justify-content:center }
.news-row.k .news-ic { background:#D4F75A }
.news-t { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px }
.news-t b { font-size:16px; font-weight:700; line-height:1.35 }
.news-t span { font-size:13px; color:#5E605A; line-height:1.45 }
.news-row > svg { flex:none }
.news-sh :focus-visible { outline:2px solid #0F3D2E; outline-offset:3px }
@media (min-width:700px) { dialog.news-sh { inset:0; margin:auto; height:fit-content; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.3) } .news-grip { display:none } .news-in { padding:22px 22px 24px } }