/* ============================================================
   토지 포코의 발굴 현장 노트 - 공통 스타일
   토큰 · 폰트 · 뼈대 · 상단 탭 · 공통 클래스 (SITE.SPEC §4, §6)
   ============================================================ */

/* ----- 폰트 (자체 호스팅, 전부 OFL) ----- */
@font-face{font-family:'Gaegu';font-weight:400;font-display:swap;src:url(/assets/fonts/gaegu-400.woff2) format('woff2')}
@font-face{font-family:'Gaegu';font-weight:700;font-display:swap;src:url(/assets/fonts/gaegu-700.woff2) format('woff2')}
@font-face{font-family:'Gowun Dodum';font-weight:400;font-display:swap;src:url(/assets/fonts/gowun-dodum-400.woff2) format('woff2')}
@font-face{font-family:'DotGothic16';font-weight:400;font-display:swap;src:url(/assets/fonts/dotgothic16-400.woff2) format('woff2')}
@font-face{font-family:'Poko Stamp';font-weight:900;font-display:swap;src:url(/assets/fonts/noto-serif-kr-900-stamp.woff2) format('woff2')}
@font-face{font-family:'Poko Kana';font-weight:400;font-display:swap;src:url(/assets/fonts/yomogi-400-kana.woff2) format('woff2')}

/* ----- 색 ----- */
:root{
  --ink:#3B2A1E; --ink-2:#6B4E36; --ink-3:#5A4636;
  --paper:#FFFDF7; --note:#F6EEDC; --memo:#F3E3C3;
  --kraft:#CDB287; --tab:#C9AD80;
  --accent:#E8A33D; --stamp:#A94C2E; --stamp-dark:#6E2F18;
  --note-red:#A2472A; --dash:#B39673; --muted:#9C7A52;
  --desk:#E9DCC3;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--desk); color:var(--ink);
  font-family:'Gowun Dodum','Poko Kana',sans-serif;
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-tap-highlight-color:transparent;
  position:relative; min-height:100vh;
}
a{color:#8A3E22} a:hover{color:#6E2F18}
button{font-family:inherit; color:inherit}
img{max-width:100%}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.egg:focus-visible{outline:2px dashed var(--ink) !important; outline-offset:-2px}

/* ----- 질감 · 글꼴 클래스 ----- */
.kraft{background-color:#CDB287;background-image:radial-gradient(rgba(90,60,30,.12) 1px,transparent 1.5px),radial-gradient(rgba(255,250,235,.16) 1px,transparent 1.5px);background-size:7px 7px,11px 11px;background-position:0 0,3px 5px}
.grid{background-color:#F6EEDC;background-image:linear-gradient(rgba(140,105,60,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(140,105,60,.14) 1px,transparent 1px);background-size:16px 16px}
.ruled{background-color:#FFFDF7;background-image:repeating-linear-gradient(180deg,transparent 0,transparent 24px,rgba(140,105,60,.2) 24px,rgba(140,105,60,.2) 25px)}
.lined{background-color:#FFFDF7;background-image:linear-gradient(90deg,transparent 22px,rgba(184,96,62,.5) 22px,rgba(184,96,62,.5) 23px,transparent 23px)}
.tape{position:absolute;height:22px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 4px,transparent 4px 8px),rgba(226,204,158,.82);box-shadow:0 1px 2px rgba(60,40,20,.15);pointer-events:none}
.hand{font-family:'Gaegu','Poko Kana',cursive}
.pixel{font-family:'DotGothic16',monospace}
.stamp{font-family:'Poko Stamp','Noto Serif KR',serif;font-weight:900}
.chips{scrollbar-width:none;cursor:grab}.chips::-webkit-scrollbar{display:none}
.chips.dragging{cursor:grabbing;user-select:none}.chips.dragging *{pointer-events:none}
.pre{white-space:pre-line; word-break:break-all}

/* ----- 뼈대 ----- */
.desk{min-height:100vh}
.note{
  width:100%; max-width:480px; margin:0 auto; min-height:100vh; position:relative;
  background-color:#F6EEDC;
  background-image:linear-gradient(rgba(140,105,60,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(140,105,60,.14) 1px,transparent 1px);
  background-size:16px 16px;
  box-shadow:0 0 0 1px rgba(60,40,20,.12),0 0 24px rgba(60,40,20,.18);
}
.desk{background-color:#CDB287;background-image:radial-gradient(rgba(90,60,30,.12) 1px,transparent 1.5px),radial-gradient(rgba(255,250,235,.16) 1px,transparent 1.5px);background-size:7px 7px,11px 11px;background-position:0 0,3px 5px}
body[data-page=index] .topnav, body[data-page=notfound] .topnav{display:none}
body[data-page=index] .note{max-width:none;background:none;box-shadow:none}
/* 발굴 중 · 층 사이 화면은 상단 탭을 숨기고 자기 머리 바를 쓴다 */
body[data-nav=off] .topnav{display:none}

/* ----- 상단 탭 ----- */
.topnav{display:flex;align-items:flex-end;gap:4px;padding:10px 10px 0;height:62px}
.topnav .back{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0}
.topnav .snd-gap{width:44px;height:44px;flex-shrink:0}
.tab{flex:1;min-width:0;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px 10px 0 0;background:var(--tab);color:var(--ink);text-decoration:none;font-family:'Gaegu','Poko Kana',cursive;font-size:19px;font-weight:700}
.tab:hover{color:var(--ink)}
.tab-on{height:52px;background:var(--note)}

/* ----- 배경음악 버튼 · 토스트 ----- */
.snd{
  position:absolute; z-index:40; width:44px; height:44px; padding:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper); color:var(--ink); border:2px solid var(--ink); border-radius:50%; cursor:pointer;
}
.snd[hidden]{display:none}
.snd[aria-pressed=true]{background:var(--accent)}
.snd svg{display:block}
.snd .off{display:block}.snd .on{display:none}
.snd[aria-pressed=true] .off{display:none}.snd[aria-pressed=true] .on{display:block}
.toast{
  position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:90;
  transform:translate(-50%,16px); opacity:0; pointer-events:none; max-width:calc(100% - 32px);
  padding:8px 16px; background:var(--paper); border:2px solid var(--ink); border-radius:8px;
  box-shadow:2px 3px 0 var(--ink); font-family:'Gaegu','Poko Kana',cursive; font-size:18px; text-align:center;
  transition:opacity .2s, transform .2s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ----- 페이지 공통 ----- */
.page{padding:20px 16px 0;padding-bottom:calc(48px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:var(--g,16px)}
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.pagehead h2{margin:0;font-size:32px;font-weight:700;line-height:1}
.pagehead .sub{margin-top:6px;font-size:14px;color:var(--ink-2)}
.pno{font-size:17px;color:var(--note-red);transform:rotate(-4deg);flex-shrink:0}
.num{width:24px;height:24px;flex-shrink:0;border-radius:50%;background:var(--ink);color:var(--note);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.sec-h{display:flex;align-items:center;gap:8px}
.sec-h h3{margin:0;font-size:17px;font-weight:700}

/* 주황 버튼 */
.btn,.btn-ghost{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 14px;text-decoration:none;
  border:2px solid var(--ink);border-radius:6px;color:var(--ink);
  font-size:17px;font-weight:700;cursor:pointer;
}
.btn{background:var(--accent);box-shadow:3px 4px 0 var(--ink)}
.btn:hover{color:var(--ink)}
.btn-ghost{background:var(--paper);box-shadow:2px 3px 0 var(--ink)}
.btn-ghost:hover{color:var(--ink)}
.btn:disabled,.btn[aria-disabled=true]{background:transparent;color:var(--ink-3);border:2px dashed var(--ink-3);box-shadow:none;cursor:not-allowed}
.pill{
  min-height:44px;padding:0 12px 0 16px;display:flex;align-items:center;gap:6px;
  background:var(--accent);color:var(--ink);border:2px solid var(--ink);border-radius:22px;box-shadow:2px 3px 0 var(--ink);
  font-size:15px;font-weight:700;cursor:pointer;text-decoration:none;
}
.pill.light{background:var(--paper);box-shadow:none;padding:0 14px 0 8px;gap:4px}

/* 칩 */
.tag{display:inline-block;padding:2px 8px;font-size:12px;line-height:18px;border:1px solid var(--ink);border-radius:12px;background:var(--memo)}
.say{display:inline-block;padding:4px 10px;font-size:14px;background:var(--memo);border:1.5px solid var(--ink);border-radius:12px 12px 12px 2px}

/* 포코 도트 상자 - 80px 그림을 상자 안에 잘라 보여준다 */
.pk{position:relative;flex-shrink:0;border:2px solid var(--ink);border-radius:4px;background:var(--memo);overflow:hidden}
.pk img{position:absolute;width:80px;height:80px;image-rendering:pixelated;max-width:none}

/* 포코 말풍선 */
.bubble{
  flex:1;min-width:0;font-family:'Gaegu','Poko Kana',cursive;font-size:18px;line-height:1.3;
  padding:10px 12px;background:var(--paper);border:2px solid var(--ink);border-radius:14px 14px 14px 2px;
  white-space:pre-line;word-break:break-all;
}

/* 도장 */
.stamp-r{border-radius:50%}

@media (prefers-reduced-motion:reduce){
  .toast{transition:none}
}

/* 표지 */
.cover-wrap{width:100%;height:844px;position:relative}
.cover-stage{width:390px;height:844px;position:absolute;left:50%;top:0;margin-left:-195px;overflow:hidden;transform-origin:top center}
.cover-stage a.open:hover{color:var(--ink)}
/* 넓은 화면에서 표지가 바깥 책상과 구분되게: 책상을 한 톤 어둡게 + 표지 가장자리에 갈색 테두리와 그림자 */
.cover-stage{box-shadow:0 0 0 1px rgba(70,45,25,.55),0 6px 26px rgba(50,30,15,.42)}
body[data-page=index] .desk{background-color:#B69865}
@media (min-width:600px){body[data-page=index] .note{padding:28px 0 40px}}