/* 레이아웃: 한 화면 장면(16:9) 위에 클릭 지점을 얹고, 퍼즐은 한지 느낌의 창으로 연다. */
:root{
  --ink:#0b1626;
  --night:#14263a;
  --paper:#efe6d2;
  --paper-2:#e0d3b4;
  --text:#2b2118;
  --seal:#b3302a;
  --gold:#d9b25f;
  --jade:#4f9c82;
  --mist:#a9c1cf;
  --serif:"Noto Serif KR","Batang","Nanum Myeongjo",serif;
  --sans:"Gowun Dodum","Malgun Gothic","Apple SD Gothic Neo",sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ink);color:#e9e2cf;font-family:var(--sans);font-size:16px;line-height:1.6}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.screen{display:none;min-height:100%}
.screen.active{display:block}

/* 타이틀 */
#title{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 70% 10%,#27465e 0%,#10202f 55%,#070e17 100%)}
#title .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.title-inner{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:12vh 20px 8vh;display:flex;flex-direction:column;gap:14px}
.eyebrow{margin:0;letter-spacing:.18em;font-size:13px;color:var(--mist)}
h1{margin:0;font-family:var(--serif);font-weight:900;font-size:clamp(48px,11vw,88px);line-height:1.05;letter-spacing:.04em;color:#f3ead2;text-wrap:balance}
.act{margin:0;font-family:var(--serif);font-size:20px;color:var(--gold)}
.act .hanja{margin-left:8px;opacity:.8}
.lead{margin:6px 0 10px;max-width:46ch;color:#d5d0c0}
.small{margin:0;font-size:13px;color:var(--mist)}
.seal{position:absolute;right:6vw;bottom:8vh;z-index:1;width:92px;height:92px;display:grid;place-items:center;
  font-family:var(--serif);font-weight:900;font-size:30px;line-height:1;color:#f3d9d2;background:var(--seal);border-radius:8px;transform:rotate(6deg);opacity:.9;letter-spacing:.05em}

.btn{border:1px solid transparent;border-radius:8px;padding:10px 18px;font-weight:700;transition:transform .08s,background .15s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--seal);color:#fff2ea}
.btn.primary:hover{background:#c43a33}
.btn.big{padding:14px 24px;font-size:18px;align-self:flex-start;font-family:var(--serif)}
.btn.ghost{background:transparent;border-color:#8c7b58;color:var(--text)}
.btn.ghost:hover{background:rgba(0,0,0,.06)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* HUD */
.hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:10px max(16px,2vw);background:#0a1320;border-bottom:1px solid #22384d}
.hud-right{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.act-tag{font-family:var(--serif);color:var(--gold);font-weight:700}
.hud-mid{display:flex;align-items:center;gap:16px}
.timer{font-variant-numeric:tabular-nums;font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:.04em}
.timer.warn{color:#ff7b6b;animation:pulse 1s infinite}
.hearts{color:var(--seal);font-size:20px;letter-spacing:3px}
.hearts .off{color:#3b4755}
.chars{display:flex;gap:6px}
.chars span{width:34px;height:34px;display:grid;place-items:center;border:1px dashed #4c6176;border-radius:6px;font-family:var(--serif);font-size:20px;color:#4c6176}
.chars span.on{border:1px solid var(--gold);color:var(--gold);background:rgba(217,178,95,.12)}
.icon-btn{background:transparent;border:1px solid #3a5066;color:var(--mist);border-radius:6px;padding:4px 10px;font-size:13px}

/* 장면 */
.stage{position:relative;width:100%;max-width:1280px;margin:0 auto;aspect-ratio:16/9;overflow:hidden;background:#0b1626}
.scene,.stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#hots{position:absolute;inset:0}
.hot{position:absolute;background:transparent;border:0;border-radius:12px;color:#fff;padding:0}
.hot::before{content:"";position:absolute;inset:0;border:2px solid rgba(243,217,150,.0);border-radius:12px;transition:.2s}
.hot:hover::before,.hot:focus-visible::before{border-color:rgba(243,217,150,.9);background:rgba(243,217,150,.1)}
.hot .tag{position:absolute;left:50%;top:-4px;transform:translate(-50%,-100%);white-space:nowrap;background:rgba(10,19,32,.9);color:#f3ead2;border:1px solid #3a5066;border-radius:6px;padding:2px 10px;font-size:13px;opacity:0;transition:.15s;pointer-events:none}
.hot:hover .tag,.hot:focus-visible .tag{opacity:1}
.hot .dot{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(217,178,95,.7);animation:ping 2s infinite}
.hot.locked .dot{background:#7d8a96;animation:none;box-shadow:none}
.hot.done .dot{background:var(--jade);animation:none;box-shadow:none}
.hot.done::after{content:"✓";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;color:#06241a;font-weight:900}
.hot.shake{animation:shake .35s}
.flash{position:absolute;inset:0;pointer-events:none;background:#b3302a;opacity:0}
.flash.on{animation:flash .5s}

.below{max-width:1280px;margin:0 auto;padding:12px max(16px,2vw) 24px;display:flex;flex-direction:column;gap:10px}
.narr{margin:0;min-height:3.2em;padding:10px 14px;background:#0f2133;border-left:4px solid var(--gold);border-radius:4px;color:#e7e0cc}
.inv{display:flex;flex-wrap:wrap;gap:8px;min-height:36px}
.inv .chip{border:1px solid var(--gold);color:var(--gold);background:rgba(217,178,95,.1);padding:4px 12px;border-radius:999px;font-size:14px}
.inv .empty{color:#6f8396;font-size:14px}

/* 퍼즐 창 */
.modal{position:fixed;inset:0;z-index:10;background:rgba(5,9,15,.72);display:grid;place-items:center;padding:16px;overflow:auto}
.modal[hidden]{display:none}
.modal-box{position:relative;width:min(680px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--paper);color:var(--text);border-radius:6px;padding:26px max(18px,3vw) 22px;border-top:8px solid var(--seal);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-box.shake{animation:shake .35s}
.modal-box h2{margin:0 0 4px;font-family:var(--serif);font-weight:900;font-size:24px;text-wrap:balance}
.msub{margin:0 0 16px;color:#5d4d38}
.close{position:absolute;top:8px;right:12px;border:0;background:transparent;font-size:30px;line-height:1;color:#6a5a43}
.mfoot{margin-top:18px;padding-top:14px;border-top:1px dashed #a89674;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.mfoot[hidden]{display:none}
.hints{display:flex;flex-direction:column;gap:6px;font-size:15px}
.hints p{margin:0;padding:6px 10px;background:rgba(179,48,42,.08);border-left:3px solid var(--seal)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row.end{justify-content:flex-end}

/* 퍼즐 공통 */
.tiles{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 14px}
.tile{min-width:78px;padding:10px 8px;background:#fbf6e8;border:2px solid #8c7b58;border-radius:8px;color:var(--text);text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.tile .h{font-family:var(--serif);font-weight:900;font-size:34px;line-height:1.1}
.tile .k{font-size:12px;color:#6a5a43}
.tile:hover:not([disabled]){background:#fff;border-color:var(--seal)}
.tile[disabled]{opacity:.3}
.slots .tile{background:transparent;border-style:dashed;min-height:88px;justify-content:center}
.slots .tile.filled{background:#fbf6e8;border-style:solid}
.quote{margin:0 0 12px;padding:12px 14px;background:#fbf6e8;border:1px solid #cdbf9c;border-radius:6px}
.quote .who{font-weight:700;color:var(--seal);display:block;margin-bottom:2px}
.quote select,.blank select{margin-top:8px;font:inherit;padding:6px 8px;border:1px solid #8c7b58;border-radius:6px;background:#fff;color:var(--text);min-width:160px}
.blank{margin:0 0 12px;padding:10px 14px;background:#fbf6e8;border:1px solid #cdbf9c;border-radius:6px}
.card{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;margin-bottom:8px;padding:10px;background:#fbf6e8;border:1px solid #cdbf9c;border-radius:6px}
.card .no{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--text);color:var(--paper);font-family:var(--serif);font-weight:900}
.card .mv{display:flex;flex-direction:column;gap:4px}
.card .mv button{border:1px solid #8c7b58;background:#fff;border-radius:4px;padding:0 8px;line-height:1.4}
.lock{display:flex;gap:10px;align-items:center;margin:14px 0 4px}
.lock input{width:130px;font:inherit;font-size:24px;letter-spacing:.4em;text-align:center;padding:6px;border:2px solid var(--text);border-radius:6px;background:#fff;color:var(--text);font-family:var(--serif)}
.note{padding:10px 12px;background:rgba(0,0,0,.05);border-radius:6px;font-size:15px;margin:0 0 12px}

/* 조사 사진 */
.media{margin:0 0 16px;border:1px solid #a89674;border-radius:6px;background:#1a2433;overflow:hidden}
.zoomwrap{position:relative;line-height:0;transition:transform .35s;cursor:zoom-in}
.zoomwrap.zoomed{transform:scale(1.9);cursor:zoom-out}
.zoomwrap img{width:100%;height:auto;max-height:300px;object-fit:cover;display:block}
.mark{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid #fff;background:rgba(217,178,95,.85);animation:ping 2s infinite;padding:0}
.mark.seen{background:rgba(79,156,130,.9);animation:none}
.zoomwrap.zoomed .mark{transform:scale(.55)}
.mcap{margin:0;padding:10px 14px;background:#0f2133;color:#cfd8de;font-size:15px;line-height:1.5}
.mcap.lit{color:#f3ead2;border-top:2px solid var(--gold)}
.media.nofile{background:#efe6d2;border-style:dashed}
.media.nofile .row{padding:10px 14px;gap:8px}
.media.nofile .btn.seen{border-color:var(--jade);color:#1d5c47}
.ph{padding:26px 14px;text-align:center;line-height:1.5;color:#6a5a43;cursor:default}
.ph small{color:#8c7b58}

.reward{text-align:center;padding:10px 0 4px}
.reward .big{font-family:var(--serif);font-size:96px;font-weight:900;line-height:1;color:var(--seal);animation:pop .5s}
.reward p{margin:8px 0}

/* 결과 */
#end{background:radial-gradient(120% 90% at 50% 0%,#27465e 0%,#0f1d2c 60%,#070e17 100%)}
.end-inner{max-width:820px;margin:0 auto;padding:7vh max(16px,3vw) 8vh;display:flex;flex-direction:column;gap:16px}
.end-inner h2{margin:0;font-family:var(--serif);font-weight:900;font-size:clamp(34px,7vw,56px);text-wrap:balance}
.stars{font-size:30px;color:var(--gold);letter-spacing:6px}
.stats{display:flex;flex-wrap:wrap;gap:10px}
.stats div{padding:8px 14px;border:1px solid #3a5066;border-radius:8px;background:#0f2133}
.stats b{font-variant-numeric:tabular-nums}
.review{overflow-x:auto}
.review table{border-collapse:collapse;width:100%;min-width:520px}
.review th,.review td{padding:8px 10px;border-bottom:1px solid #263c52;text-align:left;vertical-align:top}
.review th{color:var(--mist);font-weight:400;font-size:13px}
.review .hj{font-family:var(--serif);font-weight:700;white-space:nowrap}
.teaser{padding:12px 14px;border:1px dashed var(--gold);border-radius:8px;color:#e6d9ae}

@keyframes ping{70%{box-shadow:0 0 0 16px rgba(217,178,95,0)}100%{box-shadow:0 0 0 0 rgba(217,178,95,0)}}
@keyframes pulse{50%{opacity:.55}}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes flash{0%{opacity:.45}100%{opacity:0}}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}

@media (max-width:640px){
  .hud{grid-template-columns:1fr 1fr;row-gap:6px}
  .hud-left{display:none}
  .hud-mid{justify-content:flex-start}
  .tile{min-width:64px}
  .tile .h{font-size:28px}
  .card{grid-template-columns:36px 1fr auto}
  .hot .tag{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}