/* 나루터 마을 — 나무🌳 */
:root{
  /* 그림 둘레의 화면 옷 = 둥지 창과 같은 포근나루 화면판 + 하루콩 결 (2026-10-26 다현씨 「오른쪽 창 하루 콩 버전으로」)
     순백 종이 + 잉크 글자. 면을 깔지 않고 괘선으로 가른다. 노랑은 숫자 칩·점·고른 자리에만, 진테라코타는 합계·링크에만 */
  --paper:#FFFFFF; --panel:#FFFFFF; --card:#FFFFFF;
  --ink:#3C2415;
  --soft:#5C4433;                          /* 흰 위 9.01 */
  --line:rgba(60,36,21,.16); --line-soft:rgba(60,36,21,.09);
  --accent:#A9532A;                        /* 링크·합계 숫자만 — 흰 위 5.31 */
  --bean-1:#FFF0A0; --bean-2:#FFDD66; --bean-3:#FFC61E; --bean-4:#F2A100;   /* 하루콩 네 단 — 안 글자는 잉크(12.52·10.85·9.17·6.78) */
  --amber:var(--bean-3);                   /* 선·점·아이콘 — 글자 금지 */
  --hl:#FFF7B1;                            /* 형광 — 고른 자리 밑칠 */
  --tint:rgba(255,247,177,.7);             /* 누르는 자리 호버 면 */
  --focus:#3C2415;
  --panel-w:380px;
  --ease:cubic-bezier(.22,.7,.18,1);
  --dur:720ms;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font-family:'Gowun Dodum','Malgun Gothic',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
.app{display:grid;grid-template-columns:minmax(0,1fr) var(--panel-w);height:100vh;height:100dvh}

/* ── 무대 ── */
.stage{position:relative;overflow:hidden;min-width:0;background:linear-gradient(#F6EFDD,#EFE9D3)}
.mapwrap{position:absolute;transform-origin:0 0;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease),filter var(--dur) var(--ease);will-change:transform}
.mapwrap img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(transparent,#000 3%,#000 97%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(transparent,#000 3%,#000 97%,transparent);mask-composite:intersect}
.hot{position:absolute;inset:0;width:100%;height:100%}
.hot .area{fill:var(--amber);fill-opacity:0;stroke:#fff;stroke-opacity:0;stroke-width:3;stroke-dasharray:10 7;transition:fill-opacity .25s,stroke-opacity .25s;cursor:pointer;pointer-events:all}
.hot .area.lit{fill-opacity:.10;stroke-opacity:.9}   /* 평소엔 아무것도 없고, 가리킬 때만 옅게 */
.pills{position:absolute;inset:0;pointer-events:none}
.pill{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;display:flex;align-items:center;gap:7px;padding:6px 13px 6px 7px;border:0;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 2px 0 rgba(60,36,21,.08),0 6px 18px rgba(60,36,21,.16);white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s}
.pill .no{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--amber);color:var(--ink);font-size:13px}
.pill .nm{font-size:14px}
.pill .em{font-size:13px;letter-spacing:1px;opacity:.9}
.pill:hover,.pill:focus-visible,.pill.lit{transform:translate(-50%,-50%) translateY(-2px) scale(1.04);box-shadow:0 2px 0 rgba(60,36,21,.08),0 10px 24px rgba(60,36,21,.22)}
.pill:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.app[data-view="cut"] .mapwrap{opacity:.22;filter:blur(2px) saturate(.8)}
.app[data-view="cut"] .pills{opacity:0;transition:opacity .2s}

.morph{position:absolute;display:none;object-fit:cover;border-radius:14px;box-shadow:0 18px 50px rgba(60,36,21,.28);z-index:3;opacity:0;
  transition:left var(--dur) var(--ease),top var(--dur) var(--ease),width var(--dur) var(--ease),height var(--dur) var(--ease),opacity 380ms ease,border-radius var(--dur) var(--ease)}
.cutview{position:absolute;inset:0;z-index:4;opacity:0;transition:opacity .22s ease}
.cutview.show{opacity:1}
.cutscroll{position:absolute;inset:0}
.cutbox{position:absolute;border-radius:10px;overflow:visible;box-shadow:0 18px 50px rgba(60,36,21,.24)}
.cutbox img{display:block;width:100%;height:100%;border-radius:10px}
.tags{position:absolute;inset:0}
.tag{position:absolute;transform:translate(-50%,calc(-100% - 12px));display:flex;align-items:center;gap:5px;padding:4px 6px 4px 9px;border:0;border-radius:999px;background:#fff;box-shadow:0 2px 0 rgba(60,36,21,.08),0 5px 14px rgba(60,36,21,.2);white-space:nowrap;font-size:13.5px;opacity:0;transition:opacity .3s ease,transform .25s var(--ease)}
.tag::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:0 0 2px 0}
.tag .cnt{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--bean-1);color:var(--ink);font-size:12px;font-variant-numeric:tabular-nums}
.tag .cnt.has{background:var(--bean-3);color:var(--ink)}
.cutview.show .tag{opacity:1}
.tag:hover,.tag.on{transform:translate(-50%,calc(-100% - 15px)) scale(1.06)}
.tag.on{background:var(--hl);box-shadow:0 0 0 2px var(--ink),0 8px 20px rgba(60,36,21,.26)}
.tag.on::after{background:var(--hl)}
.tag:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* 옆 동네 단추 — 흰 동그라미에 잉크 화살표, 넓은 화면에서는 가리키면 옆 동네 이름이 펼쳐진다 */
.hop{position:absolute;z-index:5;display:flex;align-items:center;gap:6px;height:46px;min-width:46px;padding:0 15px;border:0;border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 2px 0 rgba(60,36,21,.08),0 8px 22px rgba(60,36,21,.22);font-size:14px;white-space:nowrap;transition:box-shadow .2s,background .2s}
.hop-prev{transform:translate(-50%,-50%)}
.hop-next{transform:translate(-50%,-50%);flex-direction:row-reverse}
.hop .ar{font-size:24px;line-height:1;margin-top:-3px}
.hop .lb{max-width:0;overflow:hidden;opacity:0;transition:max-width .3s var(--ease),opacity .2s}
.hop:hover .lb,.hop:focus-visible .lb{max-width:9em;opacity:1}
.hop:hover{background:var(--hl)}
.hop:focus-visible{outline:2px solid var(--bean-3);outline-offset:2px}
.cutbox{transition:transform .46s var(--ease),opacity .46s var(--ease)}
.cutbox.hop-in{transform:translateX(var(--hop-x,70px));opacity:0;transition:none}
.panhint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);margin:0;padding:4px 12px;border-radius:999px;background:rgba(60,36,21,.72);color:#fff;font-size:12.5px;pointer-events:none}

/* ── 곁판 ── */
.panel{display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line-soft);overflow-y:auto;padding:34px 28px 20px}
.eyebrow{margin:0;font-size:11.5px;letter-spacing:.16em;color:var(--soft)}
h1{font-family:'Gowun Batang',serif;font-weight:700;font-size:38px;letter-spacing:-.04em;line-height:1.15;margin:.18em 0 .1em}
h2{font-family:'Gowun Batang',serif;font-weight:700;font-size:28px;letter-spacing:-.035em;line-height:1.2;margin:.2em 0 .2em}
.today{margin:0 0 16px;color:var(--soft);font-size:14px}
.clock{display:inline-flex;padding:3px;border-radius:999px;background:#fff;border:1px solid var(--line);gap:2px}
.clock button{border:0;background:none;padding:4px 13px;border-radius:999px;font-size:13px;color:var(--soft)}
.clock button.on{background:var(--ink);color:#fff}
.clock button:disabled{cursor:default;opacity:.55}
.hint{margin:18px 0 10px;font-size:14px;color:var(--soft)}
.hoods{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.hoods li{border-bottom:1px solid var(--line)}
.hood{display:grid;grid-template-columns:30px 1fr auto;gap:2px 10px;align-items:center;width:100%;padding:12px 4px;border:0;background:none;text-align:left;border-radius:8px;transition:background .2s}
.hood:hover,.hood.lit{background:var(--tint)}
.hood:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.hood .no{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--bean-3);color:var(--ink);font-size:13px;grid-row:span 2}
.hood .nm{font-size:15.5px}
.hood .who{grid-column:2;font-size:12.5px;color:var(--soft)}
.hood .go{grid-row:span 2;color:var(--accent);font-size:13px}

.back{align-self:flex-start;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font-size:13.5px;margin-bottom:22px}
.back:hover{border-color:var(--ink)}
.back:focus-visible,.person:focus-visible{outline:2px solid var(--bean-3);outline-offset:2px}
.place{margin:0 0 16px;color:var(--soft);font-size:14px}
.people{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.person{display:grid;grid-template-columns:40px 1fr;gap:2px 12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.person:hover{border-color:rgba(60,36,21,.36)}
.person.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.person.on .nm{background:linear-gradient(transparent 58%,var(--hl) 58%)}
.person .em{grid-row:span 3;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--bean-1);font-size:20px}
.person .nm{font-size:16px}
.person .nm small{font-size:12.5px;color:var(--soft);margin-left:6px}
.person .day{font-size:13.5px;color:var(--ink);opacity:.86;line-height:1.55}
.person .cnt{font-size:12.5px;color:var(--soft);margin-top:4px;padding-top:6px;border-top:1px dashed var(--line)}
.person .cnt b{font-weight:400;color:var(--ink);background:var(--bean-2);border-radius:999px;padding:0 7px;margin:0 2px;font-variant-numeric:tabular-nums}
.person .cnt .wait{opacity:.7}
.note{font-size:12.5px;color:var(--soft);margin:16px 0 0}
.credit{margin-top:auto;padding-top:22px;font-size:12px;color:var(--soft);line-height:1.7}

/* ── 폰 ── */
@media (max-width:899px){
  .app{display:block;height:auto}
  .stage{height:var(--stage-h,120vw)}
  .panel{border-left:0;border-top:1px solid var(--line);padding:24px 16px 18px;overflow:visible}
  .app[data-view="cut"] .panel{padding-top:18px}
  h1{font-size:32px}
  .pill{padding:4px 10px 4px 5px;gap:5px}
  .pill .no{width:20px;height:20px;font-size:11.5px}
  .pill .nm{font-size:12.5px}
  .pill .em{display:none}
  .cutscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cutscroll::-webkit-scrollbar{display:none}
  .cutbox{border-radius:0;box-shadow:none}
  .cutbox img{border-radius:0}
  .tag{font-size:12.5px;padding:3px 5px 3px 8px}
  .tag .cnt{min-width:19px;height:19px;font-size:11px}
  .hop{height:38px;min-width:38px;padding:0;justify-content:center;background:rgba(255,255,255,.92)}
  .hop-prev{transform:translate(0,-50%)}
  .hop-next{transform:translate(-100%,-50%)}
  .hop .lb{display:none}
  .hop .ar{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  :root{--dur:1ms}
  .morph,.cutview,.tag{transition:none}
}