:root{
  --ground:#EBEEE9; --surface:#F6F8F4; --surface-2:#E1E6DE;
  --ink:#15212A; --ink-2:#4A5A5A; --ink-3:#77857D;
  --line:#C9D1C8; --line-soft:#D9DFD6;
  --verde:#1E6F6A; --verde-soft:#D6E6E2;
  --oro:#9C6B18; --oro-soft:#EFE3CC;
  --porfido:#7A3040; --porfido-soft:#F0DEE1;
  --pergamena:#E6DCC3;
  --shadow:0 1px 2px rgba(21,33,42,.06), 0 8px 24px -12px rgba(21,33,42,.18);
  /* 서체 — Jua 한 벌만 받아 쓰고 나머지는 기기 기본 서체 */
  --f-body:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Hiragino Sans",
           "Segoe UI","Malgun Gothic","Yu Gothic UI",system-ui,sans-serif;
  --f-hand:"Jua","Hiragino Maru Gothic ProN",-apple-system,"Apple SD Gothic Neo",
           "Malgun Gothic",sans-serif;
  --f-serif:"Bodoni 72",Didot,Georgia,"Times New Roman",serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  --f-ja:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",-apple-system,sans-serif;
  --rail:74px; --bar:58px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0E171D; --surface:#14202A; --surface-2:#1C2B34;
    --ink:#E7EDE8; --ink-2:#AEBDB6; --ink-3:#7E8F87;
    --line:#2A3B44; --line-soft:#213039;
    --verde:#5FBDB2; --verde-soft:#173733;
    --oro:#D9A441; --oro-soft:#33280F;
    --porfido:#C97A88; --porfido-soft:#33191E;
    --pergamena:#241F16;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#0E171D; --surface:#14202A; --surface-2:#1C2B34;
  --ink:#E7EDE8; --ink-2:#AEBDB6; --ink-3:#7E8F87;
  --line:#2A3B44; --line-soft:#213039;
  --verde:#5FBDB2; --verde-soft:#173733;
  --oro:#D9A441; --oro-soft:#33280F;
  --porfido:#C97A88; --porfido-soft:#33191E;
  --pergamena:#241F16;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body);
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}
.hand{font-family:var(--f-hand)}
.serif{font-family:var(--f-serif)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--verde);outline-offset:2px;border-radius:4px}

/* ---------- layout ---------- */
#app{display:flex;min-height:100dvh}
#nav{
  width:var(--rail); flex:none; background:var(--surface);
  border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:14px 0; position:sticky; top:0; height:100dvh;
}
#nav .nv{
  width:60px; padding:8px 0; border-radius:8px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:.63rem; color:var(--ink-3); font-family:var(--f-mono);
}
#nav .nv i{font-size:1.3rem;font-style:normal;line-height:1}
#nav .nv[aria-selected="true"]{background:var(--verde-soft);color:var(--verde)}
#nav .spacer{margin-top:auto}
#main{flex:1;min-width:0;padding:22px 26px 40px}
.wrap{max-width:900px;margin:0 auto}

@media(max-width:760px){
  #app{flex-direction:column}
  #nav{
    width:100%; height:var(--bar); flex-direction:row; position:fixed;
    bottom:0; top:auto; border-right:none; border-top:1px solid var(--line);
    padding:0; z-index:50; justify-content:space-around; gap:0;
  }
  #nav .nv{flex:1;width:auto;border-radius:0;padding:6px 0;font-size:.6rem}
  #nav .nv i{font-size:1.2rem}
  #nav .spacer{display:none}
  #main{padding:16px 16px calc(var(--bar) + 26px)}
}

/* ---------- common ---------- */
h1{font-family:var(--f-serif);font-weight:600;font-size:1.9rem;margin:0 0 2px;letter-spacing:-.01em}
h2{font-size:1.15rem;margin:0;font-weight:700;text-wrap:balance}
p{margin:0}
.head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.head .sub{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3)}
.muted{color:var(--ink-2);font-size:.9rem}
.tiny{font-size:.75rem;color:var(--ink-3);font-family:var(--f-mono)}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:10px;padding:18px;box-shadow:var(--shadow)}
.card.parch{background:var(--pergamena)}
.pill{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.03em;
  border:1px solid var(--line);border-radius:99px;padding:3px 10px;color:var(--ink-2);background:var(--surface);
}
.pill.on{background:var(--verde);border-color:var(--verde);color:var(--surface)}
.pill.oro{border-color:var(--oro);color:var(--oro)}
.pill.red{border-color:var(--porfido);color:var(--porfido)}

/* ---------- countdown grid ---------- */
.cdgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px}
.cd{
  aspect-ratio:.82;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-family:var(--f-mono);font-size:.62rem;color:var(--ink-3);
  transition:transform .12s ease;
}
.cd:active{transform:scale(.94)}
.cd .em{font-size:1.25rem;line-height:1.1}
.cd .no{font-family:var(--f-serif);font-size:.95rem}
.cd.open{background:linear-gradient(150deg,var(--oro-soft),var(--surface));border-color:var(--oro);color:var(--oro)}
.cd.today{background:var(--verde);border-color:var(--verde);color:#fff;box-shadow:0 0 0 4px var(--verde-soft)}
.cd.late{background:var(--porfido-soft);border-color:var(--porfido);color:var(--porfido)}
.cd.locked{opacity:.55}

/* ---------- detail sheet ---------- */
.sheet{position:fixed;inset:0;background:rgba(10,18,24,.45);display:flex;align-items:flex-end;justify-content:center;z-index:100;padding:0}
.sheet[hidden]{display:none}
.sheetbox{
  background:var(--surface);width:100%;max-width:620px;max-height:92dvh;overflow:auto;
  border-radius:16px 16px 0 0;padding:20px 20px 30px;box-shadow:0 -8px 40px rgba(0,0,0,.3);
  animation:up .22s ease;
}
@keyframes up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media(min-width:700px){
  .sheet{align-items:center}
  .sheetbox{border-radius:14px;max-height:86dvh}
}
@media (prefers-reduced-motion:reduce){.sheetbox{animation:none}}
.sheetbox .close{position:sticky;top:0;float:right;font-size:1.4rem;color:var(--ink-3);line-height:1;padding:2px 6px}

.namestack{display:flex;flex-direction:column;gap:1px;margin-bottom:12px}
.namestack .ko{font-weight:700;font-size:1.2rem;line-height:1.35}
.namestack .ja{font-size:.85rem;color:var(--ink-2);font-family:var(--f-ja)}
.namestack .orig{font-family:var(--f-serif);font-style:italic;font-size:.9rem;color:var(--oro)}
/* 본문은 읽기 쉬운 고딕으로. 손글씨체는 제목·짧은 문구에만 씁니다. */
.body-kid{
  font-family:var(--f-body);
  font-size:1.1rem; font-weight:500; line-height:1.95; letter-spacing:-.005em;
  color:var(--ink); white-space:pre-line;
}
.body-kid strong{font-weight:700;color:var(--verde)}
.body-adult{font-size:.93rem;line-height:1.78;color:var(--ink-2);white-space:pre-line}
.tabs{display:flex;gap:6px;margin:14px 0 10px}
.tabs button{font-size:.78rem;padding:5px 12px;border-radius:99px;border:1px solid var(--line-soft);color:var(--ink-3)}
.tabs button[aria-selected="true"]{background:var(--verde);border-color:var(--verde);color:#fff}
.linkbox{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:.85rem;color:var(--ink-2)}

/* ---------- missions ---------- */
.miss{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:13px 14px;box-shadow:var(--shadow);width:100%;text-align:left}
.miss .box{width:24px;height:24px;flex:none;margin-top:2px;border:2px solid var(--verde);border-radius:6px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.85rem}
.miss.done .box{background:var(--verde)}
.miss .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.miss .t b{font-family:var(--f-hand);font-size:1.16rem;font-weight:400;line-height:1.45;letter-spacing:.01em}
.miss .t span{font-size:.8rem;color:var(--ink-3);line-height:1.5}
.miss.done .t b{color:var(--ink-3)}
.miss.food{border-left:3px solid var(--oro)}
.miss.myth{border-left:3px solid var(--porfido)}
.miss.part{border-left:3px solid var(--verde)}

/* ---------- stamps ---------- */
.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:10px}
.st{
  aspect-ratio:1;border-radius:50%;border:2px dashed var(--line);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--ink-3);
}
.st.got{
  border-style:solid;border-color:var(--porfido);color:var(--porfido);
  background:radial-gradient(circle,var(--oro-soft) 0%,transparent 72%);
  transform:rotate(-7deg);
}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{font-size:.78rem;padding:6px 14px;color:var(--ink-3)}
.seg button[aria-selected="true"]{background:var(--verde);color:#fff}

/* ---------- food ---------- */
.dishgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.dish{border:1px solid var(--line-soft);border-radius:10px;background:var(--surface);overflow:hidden;text-align:left;box-shadow:var(--shadow)}
.dish .ph{height:56px;background:linear-gradient(120deg,var(--oro-soft),var(--surface-2))}
.dish .tx{padding:9px 11px;display:flex;flex-direction:column;gap:2px}
.dish .tx b{font-size:.9rem;line-height:1.3}
.dish .tx i{font-family:var(--f-serif);font-style:italic;font-size:.76rem;color:var(--oro)}
.kidmark{font-family:var(--f-mono);font-size:.63rem;padding:1px 6px;border-radius:99px;align-self:flex-start;margin-top:3px}
.k-ok{background:var(--verde-soft);color:var(--verde)}
.k-try{background:var(--oro-soft);color:var(--oro)}

.wordlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px}
.word{display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line-soft);align-items:baseline}
.word .l{display:flex;flex-direction:column}
.word .l b{font-family:var(--f-serif);font-style:italic;font-size:.95rem;color:var(--oro)}
.word .l span{font-size:.72rem;color:var(--ink-3);font-family:var(--f-mono)}
.word .r{font-size:.85rem;text-align:right;color:var(--ink-2)}

/* ---------- misc ---------- */
.notice{background:var(--porfido-soft);border:1px solid var(--porfido);color:var(--porfido);border-radius:8px;padding:11px 14px;font-size:.86rem;line-height:1.6}
.stub{border:1px dashed var(--line);border-radius:10px;padding:26px;text-align:center;color:var(--ink-3);font-size:.9rem;line-height:1.7}
.toast{
  position:fixed;left:50%;bottom:calc(var(--bar) + 20px);transform:translateX(-50%);
  background:var(--porfido);color:#fff;padding:11px 20px;border-radius:99px;font-size:.92rem;
  box-shadow:var(--shadow);z-index:200;animation:up .2s ease;
}
@media(min-width:761px){.toast{bottom:26px}}

/* ---------- 퀴즈 ---------- */
.quiz{margin-top:20px;padding-top:16px;border-top:2px solid var(--line-soft)}
.quiz-head{
  font-family:var(--f-hand);
  font-size:1.15rem;color:var(--verde);margin-bottom:8px;
}
.quiz-head.ok{color:var(--porfido)}
.quiz-head.wait{color:var(--oro)}
.quiz-q{
  font-family:var(--f-body);
  font-size:1.06rem;font-weight:700;line-height:1.6;color:var(--ink);margin-bottom:12px;
}
.choices{display:flex;flex-direction:column;gap:9px}
.choice{
  width:100%;text-align:left;padding:14px 16px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--surface);
  font-size:1.02rem;font-weight:500;line-height:1.4;color:var(--ink);
  transition:transform .1s ease,border-color .15s ease;
}
.choice:hover{border-color:var(--verde)}
.choice:active{transform:scale(.985)}
.choice.wrong{
  border-color:var(--porfido);background:var(--porfido-soft);color:var(--porfido);
  animation:shake .3s ease;
}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.choice.wrong{animation:none}}
.cooldown{
  font-family:var(--f-mono);font-size:1.1rem;color:var(--oro);
  background:var(--oro-soft);border-radius:10px;padding:14px;text-align:center;
}

/* ---------- 쿠폰 ---------- */
.coupon{
  display:flex;gap:13px;align-items:center;flex-wrap:wrap;
  border:2px dashed var(--oro);border-radius:12px;padding:14px 16px;
  background:linear-gradient(135deg,var(--oro-soft),var(--surface));
}
.coupon.new{animation:pop .35s cubic-bezier(.2,1.4,.5,1)}
@keyframes pop{from{transform:scale(.82);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.coupon.new{animation:none}}
.coupon .cem{font-size:2.1rem;line-height:1;flex:none}
.coupon .ctx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.coupon .ctx b{
  font-family:var(--f-hand);
  font-size:1.2rem;font-weight:400;color:var(--ink);letter-spacing:.01em;
}
.coupon .ctx span{font-size:.86rem;color:var(--ink-2);line-height:1.55}
.coupon.none{border-color:var(--line);border-style:solid;background:var(--surface-2)}
.coupon.none .ctx b{color:var(--ink-3)}
.coupon.used{opacity:.5;border-style:solid;border-color:var(--line);background:var(--surface-2)}
.coupon .use{flex:none;padding:8px 16px;font-size:.85rem;font-family:inherit}
.coupon .cdate{
  font-family:var(--f-mono);font-size:.68rem;color:var(--ink-3);
  width:100%;text-align:right;
}

/* ---------- 쿠폰 사용 표시 · 기기 설정 ---------- */
.badge-used{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;
  background:var(--porfido);color:#fff;border-radius:99px;padding:3px 11px;flex:none;
}
.choice.picked{border-color:var(--verde);background:var(--verde-soft)}
.devrow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  margin-top:28px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);text-align:left;
}
.devrow .l{display:flex;flex-direction:column;gap:1px}
.devrow .l b{font-size:1rem;font-weight:700}

/* ---------- 누구예요? 선택 ---------- */
.choice.who{display:flex;align-items:center;gap:14px;padding:15px 16px}
.choice.who .wem{font-size:2rem;line-height:1;flex:none}
.choice.who .wtx{display:flex;flex-direction:column;gap:1px;text-align:left}
.choice.who .wtx b{
  font-family:var(--f-hand);
  font-size:1.25rem;font-weight:400;letter-spacing:.01em;
}
.choice.who .wtx span{font-size:.82rem;color:var(--ink-3);line-height:1.4}
.choice.who.picked .wtx span{color:var(--verde)}

/* ---------- 테스트 모드 띠 ---------- */
.testbar{
  border:2px dashed var(--porfido);background:var(--porfido-soft);color:var(--porfido);
  border-radius:10px;padding:12px 14px;margin-bottom:18px;
  display:flex;flex-direction:column;gap:9px;
}
.testbar>b{font-size:.95rem}
.testbar>span{font-size:.8rem;line-height:1.6;color:var(--ink-2)}
.testbar code{
  font-family:var(--f-mono);font-size:.76rem;
  background:var(--surface);padding:1px 5px;border-radius:3px;color:var(--porfido);
}
.jump{display:flex;flex-wrap:wrap;gap:6px}
.jbtn{
  font-family:var(--f-mono);font-size:.72rem;
  border:1px solid var(--porfido);border-radius:99px;padding:4px 11px;
  color:var(--porfido);background:var(--surface);
}
.jbtn.on{background:var(--porfido);color:#fff}
.jbtn.back{border-style:dashed}
.jbtn.wipe{align-self:flex-start;border-color:var(--ink-3);color:var(--ink-3)}

/* ---------- 정답 가리기 · 힌트 접기 ---------- */
.masked{
  font-family:var(--f-mono);letter-spacing:.1em;
  background:var(--ink-3);color:transparent;border-radius:4px;
  padding:0 6px;user-select:none;
}
.hintwrap{margin:14px 0 4px}
.hintbtn{
  font-size:.85rem;border:1px solid var(--oro);color:var(--oro);
  background:var(--surface);border-radius:99px;padding:7px 15px;
}
.hintbox{
  margin-top:10px;padding:12px 14px;border-radius:10px;
  background:var(--oro-soft);border:1px solid var(--oro);
}
.hintbox[hidden]{display:none}

/* ---------- 정답 표시 · 답 알려줘 ---------- */
.ansline{
  margin:2px 0 12px;padding:11px 14px;border-radius:10px;
  background:var(--verde-soft);color:var(--ink);
  font-size:1rem;line-height:1.5;
}
.ansline b{
  font-family:var(--f-hand);
  font-weight:400;font-size:1.15rem;color:var(--verde);letter-spacing:.01em;
}
.revealbtn{
  margin-top:12px;align-self:flex-start;
  font-size:.85rem;border:1px dashed var(--ink-3);color:var(--ink-3);
  background:var(--surface);border-radius:99px;padding:8px 16px;
}
.quiz .muted{margin-top:8px}

/* ---------- 지도 ---------- */
.mapbox{
  height:min(62vh,520px);margin-top:14px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);background:var(--surface-2);box-shadow:var(--shadow);
}
.mapbox.failed{display:flex;align-items:center;justify-content:center;height:auto;padding:8px}
.maplibregl-ctrl-attrib{font-size:9px}
.maplibregl-ctrl-group{border-radius:8px!important}


.yearrail{margin-top:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.yrow{display:flex;gap:8px;min-width:min-content;padding-bottom:4px}
.ystop{
  flex:1 0 auto;min-width:104px;text-align:left;padding:10px 12px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--surface);color:var(--ink-3);
}
.ystop b{display:block;font-family:var(--f-mono);font-size:.8rem;font-weight:500;color:var(--ink-2)}
.ystop span{display:block;font-size:.72rem;line-height:1.4;margin-top:2px}
.ystop.on{border-color:var(--verde);background:var(--verde-soft)}
.ystop.on b{color:var(--verde)}
.ystop.on span{color:var(--ink-2)}


/* ---------- 지도 마커 (그림책 느낌) ---------- */
.mk{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.mk .bub{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;
  background:var(--surface);border:2px solid var(--verde);
  box-shadow:0 2px 5px rgba(0,0,0,.28);
  transition:transform .12s ease;
}
.mk.myth .bub{border-color:var(--porfido)}
.mk .bub.big{width:42px;height:42px;font-size:23px;border-color:var(--porfido);border-width:3px}
.mk:active .bub{transform:scale(.9)}
.mk:hover .bub{transform:scale(1.08)}
.mk .lbl{
  font-family:var(--f-body);font-size:.66rem;font-weight:700;color:var(--ink);
  background:var(--surface);padding:1px 7px;border-radius:99px;
  border:1px solid var(--line);white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.mk .lbl b{display:block;font-family:var(--f-hand);font-size:.95rem;font-weight:400}
.mk .lbl em{display:block;font-style:normal;font-family:var(--f-mono);font-size:.56rem;color:var(--ink-3)}

.placehead{display:flex;justify-content:center;margin-bottom:10px}
.placehead .bub{
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:30px;background:var(--verde-soft);border:2px solid var(--verde);
}

/* 캔버스가 컨테이너보다 작게 잡히는 경우 대비 (회색 여백 방지) */
.mapbox .maplibregl-map,
.mapbox .maplibregl-canvas-container,
.mapbox .maplibregl-canvas{width:100%!important;height:100%!important}

/* 오프라인 준비 버튼 */
.prepbtn{
  margin-top:12px;width:100%;padding:12px 16px;border-radius:10px;
  border:1.5px dashed var(--oro);background:var(--surface);color:var(--oro);
  font-size:.92rem;font-weight:500;
}
.prepbtn.busy{border-style:solid;background:var(--oro-soft);cursor:progress}
.prepbtn.done{border-style:solid;border-color:var(--verde);background:var(--verde-soft);color:var(--verde)}
.prepbtn:disabled{opacity:.85}