/* 함축 발굴단: 발굴 현장 노트 디자인 (Paperlogy 500 이상만 사용) */
@font-face{font-family:'Paperlogy';src:url(../fonts/Paperlogy-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Paperlogy';src:url(../fonts/Paperlogy-700.woff2) format('woff2');font-weight:600 700;font-display:swap}
@font-face{font-family:'Paperlogy';src:url(../fonts/Paperlogy-800.woff2) format('woff2');font-weight:800 900;font-display:swap}

:root{
  --z:1;
  --paper:#f2ece0; --paper2:#e8dfcd; --card:#fbf8f1; --card2:#f6f0e3;
  --ink:#1b1a17; --ink2:#48433a; --muted:#7a7263; --line:#d8ccb5; --line2:#c6b99f;
  --acc:#d6452a; --acc-d:#b53720; --acc-l:#f7ded6; --hi:#ffd54a; --hi-l:#fff0b3;
  --ok:#2f7d5b; --ok-l:#dcefe5; --no:#b3362a; --no-l:#f6dcd7;
  --night:#12141b; --night2:#1b1e28;
  --sc:#1f7a78;
  --base:clamp(1rem,.74rem + .5vw,1.2rem);
  --read:clamp(1.06rem,.72rem + .55vw,1.3rem);
  --lbl:clamp(.88rem,.8rem + .22vw,1.02rem);
  --h1:clamp(2rem,1rem + 3vw,3.6rem);
  --h2:clamp(1.5rem,1rem + 1.4vw,2.2rem);
  --h3:clamp(1.15rem,.95rem + .6vw,1.5rem);
  --r:18px; --top:58px;
  --shadow:0 1px 0 rgba(60,45,15,.05),0 18px 36px -22px rgba(50,35,10,.42);
}
html{font-size:calc(100% * var(--z));scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Paperlogy','Pretendard','Malgun Gothic',sans-serif;font-weight:500;font-size:var(--base);line-height:1.62;
  word-break:keep-all;overflow-wrap:break-word;line-break:strict;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background-image:radial-gradient(rgba(90,70,30,.09) 1px,transparent 1.3px);background-size:22px 22px}
p,li,span,label,button,textarea,input,h1,h2,h3,h4,small,em,b{word-break:keep-all;overflow-wrap:break-word}
h1,h2,h3,h4{margin:0;line-height:1.28;text-wrap:balance;font-weight:800}
p{margin:0;text-wrap:pretty}
button,input,textarea{font:inherit;color:inherit}
img{display:block;max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ───── 상단 바 ───── */
.top{position:sticky;top:0;z-index:30;height:var(--top);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 max(16px,2.2vw);
  background:rgba(242,236,224,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:1.1rem;font-weight:800}
.mark{width:22px;height:22px;background:var(--acc);transform:rotate(45deg) scale(.78);border-radius:4px;position:relative;display:inline-block}
.mark:after{content:"";position:absolute;inset:6px;background:var(--paper);border-radius:2px}
.top-r{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.chip{font-size:var(--lbl);font-weight:700;padding:5px 12px;border:1px solid var(--line2);border-radius:99px;background:var(--card);white-space:nowrap}
.tbtn{background:none;border:0;padding:6px 10px;border-radius:8px;font-weight:700;font-size:var(--lbl);cursor:pointer;color:var(--ink2)}
.tbtn:hover{background:var(--paper2)}
.zoom{display:flex;border:1px solid var(--line2);border-radius:99px;overflow:hidden;background:var(--card)}
.zoom button{border:0;background:none;padding:4px 10px;cursor:pointer;font-weight:700;line-height:1.2}
.zoom button:nth-child(1){font-size:.85rem}.zoom button:nth-child(2){font-size:1.02rem}.zoom button:nth-child(3){font-size:1.2rem}
.zoom button.on{background:var(--ink);color:var(--paper)}

/* ───── 공통 부품 ───── */
main{min-height:calc(100vh - var(--top));display:block;outline:none}
main.bare{min-height:100vh}
.wrap{width:min(1180px,100% - 2*max(16px,3vw));margin:0 auto}
.lbl{font-weight:700;font-size:var(--lbl);letter-spacing:.06em;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;background:var(--acc);color:#fff;font-weight:800;padding:.78em 1.5em;border-radius:99px;
  font-size:var(--base);box-shadow:0 6px 0 var(--acc-d),0 12px 22px -10px rgba(140,40,20,.55);transition:transform .12s,box-shadow .12s,filter .2s;text-decoration:none}
.btn:after{content:"→";font-weight:700}
.btn.noarrow:after{content:none}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--acc-d),0 6px 12px -8px rgba(140,40,20,.5)}
.btn[disabled]{background:#cfc5b1;color:#fff;box-shadow:0 6px 0 #b8ad96;cursor:not-allowed;filter:none}
.btn.line{background:transparent;color:var(--ink);box-shadow:none;border:2px solid var(--ink)}
.btn.line:after{content:none}
.btn.line:active{transform:none;background:var(--paper2)}
.btn.sm{font-size:var(--lbl);padding:.55em 1.1em;box-shadow:0 4px 0 var(--acc-d)}
.btn.ghost{background:none;color:var(--ink2);box-shadow:none;text-decoration:underline;font-weight:700;padding:.4em .6em}
.btn.ghost:after{content:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.stamp{display:inline-block;border:3px solid var(--acc);color:var(--acc);font-weight:800;padding:.1em .6em;border-radius:8px;letter-spacing:.06em;background:rgba(214,69,42,.05)}
.field{width:100%;border:2px solid var(--line2);background:#fffdf8;border-radius:14px;padding:.7em .9em;line-height:1.55;resize:vertical;min-height:4.6em}
.field:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 4px rgba(255,213,74,.45)}
.count{font-size:var(--lbl);color:var(--muted);font-weight:700}
.count.ok{color:var(--ok)}
.pill{display:inline-flex;align-items:center;gap:.4em;font-size:var(--lbl);font-weight:800;padding:.18em .75em;border-radius:99px;background:var(--ink);color:var(--paper);white-space:nowrap}
.pill.hit{background:var(--acc)}.pill.clue{background:#2b7a78}.pill.echo{background:#4b5f96}.pill.plain{background:#8a8272}.pill.ok{background:var(--ok)}
.reveal{animation:up .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*70ms)}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ph{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;min-height:160px;background:linear-gradient(135deg,var(--paper2),#d9cdb3);color:var(--muted);font-weight:700;padding:1rem;font-size:var(--lbl)}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,30px);background:var(--ink);color:var(--paper);padding:.7em 1.3em;border-radius:99px;opacity:0;pointer-events:none;transition:.28s;z-index:90;font-weight:700;max-width:92vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ───── 표지 ───── */
.cover{position:relative;min-height:100vh;background:var(--night);color:#f7efe0;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.cover>.art{position:absolute;inset:0;z-index:-2}
.cover>.art img,.cover>.art .ph{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.cover:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,15,22,.92) 0%,rgba(14,15,22,.68) 38%,rgba(14,15,22,.05) 72%),linear-gradient(0deg,rgba(14,15,22,.85),transparent 45%)}
.cover-in{padding:0 max(16px,4vw) clamp(28px,7vh,80px) max(28px,6vw);width:100%;max-width:1240px}
.cover .eyebrow{font-weight:700;letter-spacing:.14em;color:var(--hi);font-size:var(--lbl);margin-bottom:.9em;display:flex;align-items:center;gap:.7em}
.cover .eyebrow:before{content:"";width:34px;height:2px;background:var(--hi)}
.cover h1{font-size:clamp(3rem,1.2rem + 6.8vw,7.4rem);line-height:1.02;letter-spacing:-.02em;font-weight:800;margin-bottom:.28em}
.cover h1 em{font-style:normal;color:var(--acc);text-shadow:0 0 30px rgba(214,69,42,.35)}
.cover .lede{font-size:clamp(1.05rem,.8rem + .9vw,1.6rem);max-width:30em;color:#ded4c1;margin-bottom:1.6em}
.cover .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.namebox{display:flex;align-items:center;gap:0;background:rgba(247,239,224,.1);border:1.5px solid rgba(247,239,224,.45);border-radius:99px;padding:4px 4px 4px 20px;backdrop-filter:blur(6px)}
.namebox label{font-weight:700;font-size:var(--lbl);color:#d8ccb5;margin-right:10px;white-space:nowrap}
.namebox input{background:none;border:0;color:#fff;min-width:0;width:11em;padding:.55em 0;font-weight:700;font-size:var(--base)}
.namebox input::placeholder{color:#a99f8b}
.namebox input:focus{outline:none}
.cover .err{color:#ffb4a5;font-weight:700;min-height:1.4em;margin-top:.7em;font-size:var(--lbl)}
.cover .meta{margin-top:1.4em;color:#b6ab96;font-size:var(--lbl)}

/* ───── 입단 훈련 ───── */
.train{padding:clamp(20px,4vh,44px) 0 60px}
.steps{display:flex;gap:8px;margin-bottom:22px}
.steps i{flex:1;height:8px;border-radius:99px;background:var(--line);position:relative;overflow:hidden}
.steps i.on{background:var(--acc)}
.tgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(18px,3vw,44px);align-items:start}
.tgrid>*{min-width:0}
.tfig{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:3/2;background:var(--paper2)}
.tfig img,.tfig .ph{width:100%;height:100%;object-fit:cover}
.qbox{border-left:5px solid var(--acc);padding:.4em 0 .4em 1em;margin:1em 0 1.2em;font-size:var(--h3);font-weight:800}
.opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:.8em 1em;margin-bottom:10px;cursor:pointer;transition:.15s;font-weight:700}
.opt:hover{border-color:var(--ink)}
.opt .no{flex:none;width:1.7em;height:1.7em;border-radius:50%;background:var(--paper2);display:grid;place-items:center;font-weight:800;font-size:.9em}
.opt.sel{border-color:var(--ink);background:var(--hi-l)}
.opt.ok{border-color:var(--ok);background:var(--ok-l)}
.opt.bad{border-color:var(--no);background:var(--no-l)}
.opt small{display:block;font-weight:500;color:var(--ink2);margin-top:.25em;font-size:var(--lbl)}
.dual{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.dual>div{border-radius:14px;padding:1em 1.1em;border:1px solid var(--line);min-width:0}
.dual .a{background:var(--card2)}
.dual .b{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dual b{display:block;font-size:var(--lbl);letter-spacing:.06em;margin-bottom:.3em;opacity:.8}
.def{background:var(--hi-l);border:2px solid var(--hi);border-radius:14px;padding:1em 1.2em;font-weight:700;margin:14px 0}
.gear{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.gear li{display:flex;gap:14px;align-items:flex-start;padding:.85em 1em;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.gear .n{font-weight:800;color:var(--acc);font-size:1.25em;line-height:1.2;min-width:2em}
.gear b{display:block}

/* ───── 발굴 현장 ───── */
.lib{padding:clamp(20px,4vh,46px) 0 70px}
.banner{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;background:var(--night);color:#f7efe0;border-radius:var(--r);padding:1.1em 1.5em;margin-bottom:clamp(20px,3vh,34px)}
.banner .lbl{color:var(--hi)}
.banner p{font-size:var(--h3);font-weight:800;line-height:1.35}
.lib h2{font-size:var(--h2);margin-bottom:.15em}
.lib .sub{color:var(--ink2);margin-bottom:22px}
.books{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.book{--sc:#1f7a78;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;text-align:left;cursor:pointer;padding:0;position:relative}
.book:hover{transform:translateY(-6px);box-shadow:0 2px 0 rgba(60,45,15,.06),0 26px 44px -24px rgba(50,35,10,.55)}
.book .cv{aspect-ratio:3/2;position:relative;background:var(--paper2);overflow:hidden}
.book .cv img,.book .cv .ph{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.book:hover .cv img{transform:scale(1.05)}
.book .cv:after{content:"";position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(0deg,rgba(10,12,18,.78),transparent)}
.book .key{position:absolute;left:14px;top:12px;z-index:2;background:var(--sc);color:#fff;font-weight:800;border-radius:8px;padding:.05em .55em;font-size:1.05em;letter-spacing:.05em}
.book .st{position:absolute;right:12px;top:12px;z-index:2}
.book .cap{position:absolute;left:16px;right:16px;bottom:12px;z-index:2;color:#fff;font-weight:800;font-size:var(--h3);line-height:1.2}
.book .bd{padding:1em 1.2em 1.3em;display:flex;flex-direction:column;gap:.55em;flex:1}
.book .era{font-weight:700;color:var(--sc);font-size:var(--lbl)}
.book .bl{color:var(--ink2)}
.book .prog{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:var(--lbl);font-weight:700;color:var(--muted)}
.book .prog i{flex:1;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.book .prog i span{display:block;height:100%;background:var(--sc);border-radius:99px;transition:width .5s}
.rep-card{margin-top:clamp(18px,3vw,30px);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:1.1em 1.5em}
.rep-card b{font-size:var(--h3)}

/* ───── 이야기(발굴) 화면 ───── */
.strata{padding:10px max(16px,2.2vw) 0;display:flex;gap:4px}
.strata div{flex:1;min-width:0}
.strata i{display:block;height:9px;border-radius:3px;background:rgba(120,95,55,.16);position:relative;overflow:hidden}
.strata i:after{content:"";position:absolute;inset:0;background:var(--c,#b08c5c);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.strata .d i:after{transform:scaleX(1)}
.strata .c i:after{transform:scaleX(.5)}
.strata small{display:block;font-size:.78rem;font-size:max(13px,.78rem);text-align:center;margin-top:3px;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strata .c small{color:var(--ink)}
.rd{--sc:#1f7a78;display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:clamp(14px,2vw,28px);padding:clamp(12px,2vh,22px) max(16px,2.2vw) 30px;align-items:start}
.rd>*{min-width:0}
.fig{position:sticky;top:calc(var(--top) + 12px);border-radius:var(--r);overflow:hidden;background:var(--night);box-shadow:var(--shadow);border:1px solid var(--line2)}
.fig img,.fig .ph{width:100%;aspect-ratio:3/2;object-fit:cover}
.fig .fc{position:absolute;left:0;bottom:0;right:0;padding:2.4em 1.1em .9em;color:#fff;background:linear-gradient(0deg,rgba(10,12,18,.85),transparent);display:flex;align-items:center;gap:.7em;font-weight:800;font-size:var(--h3)}
.fig .fc em{font-style:normal;background:var(--sc);border-radius:8px;padding:.02em .5em;font-size:.85em}
.pane{padding:clamp(16px,2.2vw,30px)}
.pane .hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:.9em;flex-wrap:wrap}
.pane h2{font-size:var(--h2)}
.tip{background:var(--hi-l);border:1px solid var(--hi);border-radius:12px;padding:.55em .9em;font-weight:700;font-size:var(--lbl);margin-bottom:1em}
.text{font-size:var(--read);line-height:1.95}
.text .para{margin:0 0 .75em}
.text .para.dlg{padding-left:.9em;border-left:3px solid var(--line2)}
.s{cursor:pointer;border-radius:5px;padding:.05em .05em;transition:background .15s;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.locked .s{cursor:default}
.s:hover{background:var(--hi-l)}
.locked .s:hover{background:none}
.s.mk{background:linear-gradient(transparent 38%,var(--hi) 38%);}
.s.mk:hover{background:linear-gradient(transparent 38%,var(--hi) 38%)}
.locked .s.hit{background:var(--acc-l);text-decoration:underline wavy var(--acc);text-decoration-thickness:2px;text-underline-offset:.28em;font-weight:700}
.locked .s.clue{text-decoration:underline dotted #2b7a78;text-decoration-thickness:3px;text-underline-offset:.26em}
.locked .s.echo{text-decoration:underline dashed #4b5f96;text-decoration-thickness:2px;text-underline-offset:.26em}
.locked .s.miss{background:repeating-linear-gradient(135deg,rgba(214,69,42,.16) 0 6px,transparent 6px 12px);outline:2px dashed var(--acc);outline-offset:1px}
.locked .s.hit.pop{animation:pop .7s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:calc(var(--i,0)*120ms)}
@keyframes pop{0%{background:var(--hi);transform:scale(1.03)}100%{transform:none}}
.words{display:flex;flex-wrap:wrap;gap:8px;margin:1em 0 0;padding-top:.9em;border-top:1px dashed var(--line2)}
.words span{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:.2em .7em;font-size:var(--lbl)}
.words b{color:var(--sc);margin-right:.4em}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:1.2em;flex-wrap:wrap}
.legend{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:var(--lbl);color:var(--ink2);margin:.6em 0 0}
.res{display:grid;gap:8px;margin:1em 0}
.res .it{display:flex;gap:10px;align-items:flex-start;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:.6em .9em}
.res .it>div{min-width:0;font-size:var(--lbl)}
.res .it b{display:block;font-size:var(--base)}
.sumline{font-weight:800;font-size:var(--h3);margin:.4em 0}
.sumline em{font-style:normal;color:var(--acc)}

/* 발굴 카드(표본 태그) */
.tagcard{position:relative;background:#fffdf7;border:1px solid var(--line2);border-radius:6px 20px 20px 20px;padding:clamp(16px,2vw,26px) clamp(16px,2vw,26px) 22px;box-shadow:var(--shadow)}
.tagcard:before{content:"";position:absolute;left:18px;top:14px;width:16px;height:16px;border-radius:50%;background:var(--paper);border:1.5px solid var(--line2);box-shadow:inset 0 2px 3px rgba(0,0,0,.15)}
.tagcard .no{position:absolute;right:20px;top:12px;font-weight:800;color:var(--acc);letter-spacing:.06em}
.tagcard .kv{margin:2em 0 .3em;font-size:var(--lbl);font-weight:700;color:var(--muted);letter-spacing:.06em}
.quote{font-size:clamp(1.25rem,1rem + 1.1vw,1.85rem);font-weight:800;line-height:1.4;border-left:6px solid var(--acc);padding:.15em 0 .15em .7em;margin:.2em 0 .6em;background:linear-gradient(90deg,var(--acc-l),transparent 70%)}
.lit{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:var(--lbl);color:var(--ink2);margin-bottom:.8em}
.lit b{background:var(--ink);color:var(--paper);border-radius:6px;padding:.05em .6em}
.drawer{border-top:2px dashed var(--line2);padding-top:1em;margin-top:1em}
.drawer h4{display:flex;align-items:center;gap:10px;font-size:var(--h3);margin-bottom:.5em}
.drawer h4 i{font-style:normal;background:var(--ink);color:var(--paper);width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;font-size:.8em}
.drawer.done h4 i{background:var(--ok)}
.drawer p.h{color:var(--ink2);font-size:var(--lbl);margin-bottom:.6em}
.clues{display:grid;gap:8px}
.clue-i{display:flex;gap:10px;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:12px;padding:.6em .9em;cursor:pointer;font-size:var(--lbl);font-weight:500;line-height:1.6;width:100%}
.clue-i:before{content:"";flex:none;width:1.15em;height:1.15em;border:2px solid var(--line2);border-radius:5px;margin-top:.25em;transition:.15s}
.clue-i.sel{border-color:var(--ink);background:var(--hi-l)}
.clue-i.sel:before{background:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 3px var(--hi-l)}
.clue-i.locked{cursor:default}
.clue-i.right{border-color:var(--ok);background:var(--ok-l)}
.clue-i.right:before{background:var(--ok);border-color:var(--ok);box-shadow:inset 0 0 0 3px var(--ok-l)}
.clue-i.wrong{border-color:var(--no);background:var(--no-l)}
.clue-i.wrong:before{background:var(--no);border-color:var(--no);box-shadow:inset 0 0 0 3px var(--no-l)}
.clue-i.mis{border-style:dashed;border-color:var(--ok)}
.clue-i div{min-width:0}
.clue-i small{display:block;font-weight:700;margin-top:.15em}
.kinds{display:flex;gap:8px;margin-bottom:.6em;flex-wrap:wrap}
.kinds button{border:2px solid var(--line2);background:var(--card);border-radius:99px;padding:.3em 1em;font-weight:700;cursor:pointer;font-size:var(--lbl)}
.kinds button.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.frame{background:var(--card2);border-radius:10px;padding:.5em .8em;font-weight:700;margin-bottom:.6em;font-size:var(--lbl)}
.comp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:.6em}
.comp>div{border-radius:14px;padding:.9em 1em;min-width:0;font-size:var(--lbl);line-height:1.65}
.comp .me{background:var(--card2);border:1px solid var(--line)}
.comp .hq{background:var(--ink);color:var(--paper)}
.comp b{display:block;margin-bottom:.3em;font-size:var(--lbl);letter-spacing:.06em;opacity:.85}
.selfs{display:flex;gap:8px;flex-wrap:wrap;margin:.8em 0}
.selfs button{border:2px solid var(--line2);background:var(--card);border-radius:12px;padding:.45em .9em;cursor:pointer;font-weight:700;font-size:var(--lbl);text-align:left}
.selfs button.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.kept{position:absolute;right:16px;bottom:14px;pointer-events:none;animation:stampin .5s cubic-bezier(.2,.9,.3,1.3) both;font-size:1.05rem}
@keyframes stampin{from{opacity:0;transform:scale(1.6)}to{opacity:1;transform:none}}
.dots{display:flex;gap:6px;margin:0 0 .6em}
.dots i{width:28px;height:8px;border-radius:99px;background:var(--line)}
.dots i.on{background:var(--acc)}.dots i.cur{background:var(--ink)}

/* 되풀이·의도 저울 */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:.6em 0 1em}
.chips button{border:2px solid var(--line2);background:var(--card);border-radius:99px;padding:.45em 1.1em;font-weight:700;cursor:pointer}
.chips button.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chips button.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.occ{display:grid;gap:8px;margin:.8em 0}
.occ div{display:flex;gap:10px;align-items:flex-start;background:var(--card2);border-radius:12px;padding:.55em .9em;border:1px solid var(--line);font-size:var(--lbl)}
.occ i{font-style:normal;flex:none;background:var(--sc);color:#fff;font-weight:800;border-radius:8px;padding:0 .55em}
.note{background:var(--night);color:#f2e9d6;border-radius:14px;padding:.9em 1.1em;margin:.8em 0;font-size:var(--lbl);line-height:1.7}
.note b{color:var(--hi)}
.cands{display:grid;gap:10px;margin:.6em 0 1em}
.cand{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;background:var(--card);border:2px solid var(--line);border-radius:14px;padding:.8em 1em;cursor:pointer;font-weight:700;line-height:1.55}
.cand .k{flex:none;width:2em;height:2em;border-radius:50%;background:var(--paper2);display:grid;place-items:center;font-weight:800}
.cand.sel{border-color:var(--ink);background:var(--hi-l)}
.cand.sel .k{background:var(--ink);color:var(--paper)}
.ev{display:flex;flex-wrap:wrap;gap:8px;margin:.5em 0 1em}
.ev button{border:2px dashed var(--line2);background:var(--card);border-radius:12px;padding:.35em .8em;cursor:pointer;font-size:var(--lbl);font-weight:700;text-align:left;max-width:100%}
.ev button.sel{border-style:solid;border-color:var(--acc);background:var(--acc-l);color:var(--acc-d)}
.scale{display:grid;gap:10px;margin:.8em 0}
.scale .row{display:grid;grid-template-columns:2em minmax(0,1fr) 2.6em;gap:10px;align-items:center;font-size:var(--lbl);font-weight:700}
.scale .track{height:22px;border-radius:99px;background:var(--line);overflow:hidden}
.scale .track span{display:block;height:100%;width:0;background:#9a917d;border-radius:99px;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.scale .row.me .track span{background:var(--acc)}
.scale .row.best .track span{box-shadow:inset 0 0 0 3px rgba(255,255,255,.35)}
.msg{border-radius:12px;padding:.7em 1em;font-weight:700;margin:.6em 0;font-size:var(--lbl);line-height:1.65}
.msg.ok{background:var(--ok-l);color:#1d5a40}.msg.no{background:var(--no-l);color:#7c2519}.msg.part{background:var(--hi-l);color:#6a5200}

/* 실제 사건 */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:.8em 0 1.2em}
.fact{background:var(--night);color:#f2e9d6;border-radius:14px;padding:.9em 1em;font-size:var(--lbl);line-height:1.65}
.fact b{display:inline-block;background:var(--hi);color:var(--ink);border-radius:6px;padding:0 .55em;margin-bottom:.4em}
.match{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 18px;margin:.8em 0}
.match>div{display:grid;gap:10px;align-content:start}
.mi{width:100%;text-align:left;border:2px solid var(--line);background:var(--card);border-radius:12px;padding:.6em .9em;font-size:var(--lbl);cursor:pointer;font-weight:700;line-height:1.55}
.mi.sel{border-color:var(--ink);background:var(--hi-l)}
.mi.done{border-color:var(--ok);background:var(--ok-l);cursor:default}
.mi.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.made{font-size:var(--lbl);color:var(--ink2);border-left:4px solid var(--line2);padding-left:.9em;margin:.9em 0}

/* 끝·보고서 */
.end{padding:clamp(24px,5vh,56px) 0 70px;text-align:center}
.end .stamp{font-size:clamp(1.6rem,1rem + 2vw,2.6rem);margin-bottom:.5em}
.end p.big{font-size:var(--h3);font-weight:800;max-width:30em;margin:.4em auto 1.4em}
.stats{display:flex;justify-content:center;gap:clamp(12px,3vw,40px);flex-wrap:wrap;margin:1.2em 0 1.8em}
.stats div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:.8em 1.6em;box-shadow:var(--shadow)}
.stats b{display:block;font-size:clamp(1.8rem,1.2rem + 2vw,3rem);color:var(--acc);line-height:1.1}
.rp{padding:clamp(20px,4vh,44px) 0 70px}
.rp .doc{background:#fffdf8;border:1px solid var(--line2);border-radius:8px;box-shadow:var(--shadow);padding:clamp(18px,3vw,42px);max-width:940px;margin:0 auto}
.rp .doc h2{font-size:var(--h2);border-bottom:3px solid var(--ink);padding-bottom:.3em;margin-bottom:.6em}
.rp .who{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:var(--ink2);margin-bottom:1em;font-weight:700;font-size:var(--lbl)}
.rp .sec{margin:1.6em 0 0}
.rp .sec h3{display:flex;align-items:center;gap:10px;font-size:var(--h3);margin-bottom:.5em}
.rp .sec h3 i{font-style:normal;background:var(--sc,var(--ink));color:#fff;border-radius:8px;padding:0 .55em}
.rp table{width:100%;border-collapse:collapse;font-size:var(--lbl);line-height:1.6}
.rp th,.rp td{border:1px solid var(--line2);padding:.5em .7em;vertical-align:top;text-align:left}
.rp th{background:var(--paper2);font-weight:800}
.rp .one{background:var(--card2);border-left:5px solid var(--acc);padding:.6em .9em;border-radius:6px;margin:.5em 0;font-size:var(--lbl)}
.rp .empty{padding:2em;text-align:center;color:var(--muted)}
.rp .acts{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.ptitle{font-weight:800}
.cert{display:inline-block;margin-top:1em}

#modal{position:fixed;inset:0;background:rgba(14,15,22,.6);z-index:80;display:grid;place-items:center;padding:16px}
#modal .box{background:var(--card);border-radius:var(--r);padding:1.4em 1.6em;max-width:460px;width:100%;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
#modal h3{margin-bottom:.4em}
#modal .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:1.2em;flex-wrap:wrap}

/* 인쇄 전용 */
#print{display:none}
@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff!important;font-size:11.5pt}
  body>*:not(#print){display:none!important}
  #print{display:block!important;color:#000}
  #print h1{font-size:20pt;margin:0 0 4pt;border-bottom:2px solid #000;padding-bottom:4pt}
  #print h2{font-size:14pt;margin:14pt 0 4pt}
  #print table{width:100%;border-collapse:collapse;font-size:10.5pt;margin-bottom:6pt}
  #print th,#print td{border:1px solid #444;padding:4pt 6pt;vertical-align:top;text-align:left}
  #print th{background:#eee}
  #print .one{border-left:4px solid #000;padding:3pt 8pt;margin:4pt 0;background:#f5f5f5}
  #print .who{display:flex;gap:18pt;margin-bottom:6pt;font-weight:700}
  #print .sec h3{font-size:13pt;margin:12pt 0 4pt}
  #print i{font-style:normal;background:#000;color:#fff;padding:0 5pt;margin-right:6pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #print small{font-size:9.5pt}
  #print tr,#print .one{break-inside:avoid}
  #print .lined{background:repeating-linear-gradient(transparent 0 22pt,#999 22pt 23pt);min-height:66pt}
}

/* ───── 반응형 ───── */
@media(max-width:1000px){
  .rd{grid-template-columns:1fr}
  .fig{position:relative;top:0}
  .fig img,.fig .ph{aspect-ratio:16/9}
  .tgrid{grid-template-columns:1fr}
  .books{grid-template-columns:1fr}
  .book{flex-direction:row}
  .book .cv{aspect-ratio:auto;width:42%;flex:none}
  .banner{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
}
@media(max-width:640px){
  .chip{display:none}
  .strata small{display:none}
  .book{flex-direction:column}
  .book .cv{width:100%;aspect-ratio:3/2}
  .dual,.comp,.match{grid-template-columns:1fr}
  .cover h1{font-size:clamp(2.6rem,14vw,4rem)}
  .cover-in{padding-left:max(16px,4vw)}
  .namebox{width:100%}.namebox input{flex:1;width:auto}
  .top-r .tbtn{padding:6px 6px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ───── 보정(2차) ───── */
.gear.cols{grid-template-columns:repeat(3,minmax(0,1fr))}
.gear.cols li{flex-direction:column;gap:6px}
.bar.stk{position:sticky;bottom:0;z-index:5;margin:1.2em calc(-1*clamp(16px,2.2vw,30px)) calc(-1*clamp(16px,2.2vw,30px));padding:.8em clamp(16px,2.2vw,30px);background:linear-gradient(0deg,var(--card) 70%,rgba(251,248,241,0));border-radius:0 0 var(--r) var(--r)}
.text{line-height:1.86}
.text .para{margin:0 0 .6em}
.pane .hd{margin-bottom:.6em}
.pane h2{font-size:clamp(1.4rem,1rem + 1.1vw,1.95rem)}
.quote{font-size:clamp(1.15rem,.95rem + .85vw,1.6rem)}
.tagcard .kv{margin-top:1.6em}
.cand{padding:.65em .9em}
@media(max-width:1000px){.gear.cols{grid-template-columns:1fr}.gear.cols li{flex-direction:row}}
small{font-size:1em}
.book .cv{aspect-ratio:16/9}
.lib{padding-top:clamp(14px,2.6vh,30px)}
.lib .sub{margin-bottom:14px}
.banner{margin-bottom:clamp(14px,2.4vh,26px);padding:.8em 1.4em}
.rep-card{margin-top:clamp(12px,2vh,22px);padding:.8em 1.4em}
.book .bd{padding:.8em 1.1em 1em;gap:.4em}
@media(max-width:1000px){.book .cv{aspect-ratio:auto}}

/* 그림 칸과 글 칸 높이 맞춤 */
.rd{align-items:stretch}
.figcol{min-width:0}
.figcol .fig{position:sticky;top:calc(var(--top) + 12px);margin:0;height:min(100%,calc(100vh - var(--top) - 36px));min-height:min(320px,60vw)}
.figcol .fig img,.figcol .fig .ph{width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
@media(max-width:1000px){.figcol .fig{position:relative;top:0;height:auto;min-height:0}.figcol .fig img,.figcol .fig .ph{aspect-ratio:16/9;height:auto}}
.rd{padding-left:max(16px,3vw);padding-right:max(16px,3vw)}

/* 발굴 결과 표시(정돈판) */
.locked .s{padding:.08em .22em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.locked .s.hit{background:linear-gradient(0deg,var(--acc) 0 3px,transparent 3px),linear-gradient(rgba(214,69,42,.13),rgba(214,69,42,.13));text-decoration:none;font-weight:700;color:#7a1f0e}
.locked .s.miss{background:linear-gradient(90deg,rgba(214,69,42,.75) 0 55%,transparent 55%) left bottom/9px 3px repeat-x,linear-gradient(rgba(214,69,42,.06),rgba(214,69,42,.06));outline:0;font-weight:700;color:#7a1f0e}
.locked .s.clue{background:linear-gradient(0deg,#2b7a78 0 2px,transparent 2px),linear-gradient(rgba(43,122,120,.10),rgba(43,122,120,.10));text-decoration:none}
.locked .s.echo{background:linear-gradient(0deg,#4b5f96 0 2px,transparent 2px),linear-gradient(rgba(75,95,150,.10),rgba(75,95,150,.10));text-decoration:none}
.locked .s.plain{background:linear-gradient(rgba(120,110,90,.10),rgba(120,110,90,.10))}
@keyframes pop{0%{background-color:var(--hi);transform:scale(1.02)}100%{transform:none}}

/* 장면 발굴 완료 화면 */
.slots{margin:.4em 0 1em}
.slots>div{display:flex;gap:6px;margin-top:.4em}
.slots i{flex:1;min-width:0;height:2.1em;border-radius:8px;background:var(--paper2);border:1.5px dashed var(--line2);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:var(--lbl);color:#fff}
.slots i.on{background:var(--sc);border:1.5px solid var(--sc)}
.cardsum{display:grid;gap:12px;margin:.2em 0 1em}
.cs{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:.8em 1em}
.cs header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:.4em}
.cs .cnt{margin-left:auto;font-size:var(--lbl);color:var(--muted);font-weight:700}
.cs .q{font-weight:800;line-height:1.5;margin-bottom:.5em}
.cs .flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.3fr);gap:10px;align-items:stretch;font-size:var(--lbl);line-height:1.6}
.cs .flow>div{background:#fffdf8;border:1px solid var(--line);border-radius:10px;padding:.5em .7em}
.cs .flow .me{background:var(--hi-l);border-color:var(--hi)}
.cs .flow b{display:block;font-size:var(--lbl);color:var(--muted);letter-spacing:.06em}
.cs .flow>span{align-self:center;font-weight:800;color:var(--acc)}
.nextcard{background:var(--night);color:#f2e9d6;border-radius:14px;padding:.9em 1.2em;display:flex;align-items:center}
.nextcard>div{display:grid;gap:.15em}
.nextcard .lbl{color:var(--hi)}
.nextcard b{font-size:var(--h3)}
.nextcard span:last-child{font-size:var(--lbl);color:#d9cdb5}
@media(max-width:640px){.cs .flow{grid-template-columns:1fr}.cs .flow>span{display:none}}

/* 근거 카드: 마우스를 올리면 전체 문장 */
.ev button{position:relative}
.ev button[data-full]:hover:after,.ev button[data-full]:focus-visible:after{content:attr(data-full);position:absolute;left:0;bottom:calc(100% + 8px);z-index:20;width:max-content;max-width:min(440px,78vw);background:var(--night);color:#f7efe0;padding:.6em .9em;border-radius:12px;font-weight:700;font-size:var(--lbl);line-height:1.6;box-shadow:0 14px 30px -12px rgba(0,0,0,.55);white-space:normal;pointer-events:none}
.ev button[data-full]:hover:before,.ev button[data-full]:focus-visible:before{content:"";position:absolute;left:22px;bottom:calc(100% + 2px);z-index:21;border:6px solid transparent;border-top-color:var(--night);border-bottom:0}

/* 이야기 완료 화면 */
.intentq{margin:.4em 0 1em;padding:1em 1.2em;border-left:6px solid var(--acc);background:linear-gradient(90deg,var(--acc-l),transparent 85%);border-radius:0 14px 14px 0}
.intentq p{font-size:clamp(1.15rem,.95rem + .8vw,1.55rem);font-weight:800;line-height:1.5;margin-top:.3em}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:.4em 0 .8em}
.tiles>div{background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:.6em .8em;font-size:var(--lbl);font-weight:700;color:var(--ink2);text-align:center}
.tiles b{display:block;font-size:clamp(1.7rem,1.2rem + 1.6vw,2.6rem);line-height:1.1;color:var(--acc);font-weight:800}
.tiles b small{font-size:.45em;margin-left:.15em;color:var(--muted)}
.mine{list-style:none;margin:.4em 0 0;padding:0;display:grid;gap:8px}
.mine li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:.6em .8em;border:1px solid var(--line);border-radius:12px;background:#fffdf8}
.mine li div{min-width:0;display:grid;gap:.1em}
.mine b{font-size:var(--lbl)}
.mine span:not(.pill){font-size:var(--lbl);color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lifeq{margin-top:.9em;padding:.8em 1em;background:var(--hi-l);border-radius:14px}
.lifeq p{font-weight:700;margin-top:.2em}
.end{display:none}
@media(max-width:640px){.tiles{grid-template-columns:1fr}}

/* 상단 바(정리): 소리 · 기록 지우기 · 브랜드 로고 */
.zoom{display:none}
.tbtn{border:1.5px solid var(--line2);background:var(--card);border-radius:10px;height:38px;padding:0 12px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.tbtn:hover{border-color:var(--ink);background:var(--card)}
.tbtn.ic[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.brandlogo{height:38px;width:auto;flex:none;margin-left:6px}
.top-r{gap:8px}
.cover-top{position:absolute;top:0;right:0;left:0;z-index:3;display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:14px max(16px,2.2vw)}
.cover-top .tbtn{background:rgba(18,20,27,.55);color:#f7efe0;border-color:rgba(247,239,224,.5);backdrop-filter:blur(6px)}
.cover-top .brandlogo{background:#fffdf8;border-radius:10px;padding:3px 8px}
@media(max-width:640px){.tbtn span{display:none}.tbtn{padding:0 10px}.tbtn:not(.ic){font-size:.9rem}.brandlogo{height:28px}.top{gap:8px}.brand b{font-size:1rem}}

/* ───── 세련된 상단 바 ───── */
.top{height:64px;background:rgba(242,236,224,.78);border-bottom:1px solid rgba(120,100,60,.18)}
.brand{gap:12px}
.mark{width:26px;height:26px;background:linear-gradient(135deg,#e8593a,#b53720);border-radius:5px;box-shadow:0 6px 14px -6px rgba(181,55,32,.7);animation:markpulse 3.6s ease-in-out infinite}
@keyframes markpulse{0%,100%{transform:rotate(45deg) scale(.78)}50%{transform:rotate(225deg) scale(.86)}}
.wordmark{font-size:1.28rem;font-weight:800;letter-spacing:-.01em;display:inline-flex;gap:.28em}
.wordmark span{background:linear-gradient(100deg,var(--ink) 30%,var(--acc) 50%,var(--ink) 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s ease-in-out infinite,wm .8s cubic-bezier(.2,.8,.2,1) both}
.wordmark span:nth-child(2){animation-delay:.2s,.15s}
@keyframes shimmer{0%,55%{background-position:120% 0}100%{background-position:-120% 0}}
@keyframes wm{from{opacity:0;transform:translateY(8px);letter-spacing:.12em}to{opacity:1;transform:none}}
.top-r{gap:6px}
.tbtn{height:40px;border-radius:99px;border:1px solid rgba(120,100,60,.28);background:rgba(255,253,248,.7);font-weight:700;transition:transform .15s,background .2s,border-color .2s,box-shadow .2s}
.tbtn:hover{transform:translateY(-2px);box-shadow:0 8px 16px -10px rgba(50,35,10,.5);border-color:var(--ink)}
.chip{border:0;background:var(--ink);color:var(--paper);height:40px;display:inline-flex;align-items:center;padding:0 16px;letter-spacing:.02em}
.brandlogo{height:40px;margin-left:10px;padding-left:14px;border-left:1px solid rgba(120,100,60,.3)}

/* ───── 공식 칩 ───── */
.formula{display:inline-flex;align-items:center;gap:8px;font-weight:800;flex-wrap:wrap}
.formula b{background:var(--card);border:1px solid var(--line2);border-radius:99px;padding:.22em .95em;font-size:var(--lbl);color:var(--ink);animation:chip .55s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(var(--d,0)*1ms)}
.formula b:nth-of-type(1){--d:100}.formula b:nth-of-type(2){--d:350}.formula b:nth-of-type(3){--d:600}
.formula i{font-style:normal;color:var(--muted);font-size:1.15em;animation:chip .4s both}
.formula i:nth-of-type(1){animation-delay:.22s}.formula i:nth-of-type(2){animation-delay:.48s}
.formula b.res{background:var(--acc);color:#fff;border-color:var(--acc);box-shadow:0 6px 14px -8px rgba(181,55,32,.8)}
.formula.two{margin-left:12px}
@keyframes chip{from{opacity:0;transform:translateY(8px) scale(.85)}to{opacity:1;transform:none}}

/* ───── 글자 애니메이션 ───── */
.w{display:inline-block;animation:wordup .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k,0)*55ms + 80ms)}
@keyframes wordup{from{opacity:0;transform:translateY(.55em);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes glow{0%,100%{text-shadow:0 0 30px rgba(214,69,42,.3)}50%{text-shadow:0 0 44px rgba(255,120,80,.7)}}
.quote .w{animation-duration:.6s;animation-delay:calc(var(--k,0)*70ms + 150ms)}
.btn{position:relative;overflow:hidden}
.btn:not([disabled]):before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s}
.btn:not([disabled]):hover:before{left:130%}
.tip,.count,.lbl{animation:fadein .6s both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
#app.still .reveal,#app.still .w,#app.still .tip,#app.still .lbl,#app.still .count,#app.still .formula b,#app.still .formula i{animation:none!important}

/* ───── 공식 칩(정돈판) ───── */
.formula{gap:10px}
.formula b{position:relative;display:inline-flex;align-items:center;gap:.5em;border:0;background:linear-gradient(180deg,#fffdf8,#f1e9d8);box-shadow:0 0 0 1px var(--line2),0 8px 14px -10px rgba(50,35,10,.5),inset 0 1px 0 #fff;padding:.42em 1.05em .42em .85em;border-radius:99px;font-weight:800;font-size:var(--lbl)}
.formula b:before{content:"";width:1.15em;height:1.15em;background:var(--ink);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;opacity:.85}
.formula .f1{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4'/%3E%3C/svg%3E")}.formula .f2{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E")}.formula .f3{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M6 4h12l4 6-10 11L2 10zM2 10h20M9 4l3 6 3-6M12 10v11'/%3E%3C/svg%3E")}.formula .f4{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4 12a8 8 0 0 1 14-5.3L20 9M20 4v5h-5M20 12a8 8 0 0 1-14 5.3L4 15M4 20v-5h5'/%3E%3C/svg%3E")}.formula .res{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M6 4h12l4 6-10 11L2 10zM2 10h20M9 4l3 6 3-6M12 10v11'/%3E%3C/svg%3E")}
.formula i{display:inline-grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--ink);color:var(--paper);font-size:.9rem;font-weight:800;line-height:1}
.formula b.res{background:linear-gradient(135deg,#ef5a3a,#c23a20);color:#fff;box-shadow:0 10px 22px -8px rgba(194,58,32,.85),inset 0 1px 0 rgba(255,255,255,.35);overflow:hidden;animation:chip .55s cubic-bezier(.2,.9,.3,1.3) both .6s,resglow 3s ease-in-out 1.6s infinite}
.formula b.res:before{background:#fff}
.formula b.res:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:sweep 3.2s ease-in-out 1.6s infinite}
@keyframes resglow{0%,100%{box-shadow:0 10px 22px -8px rgba(194,58,32,.85),inset 0 1px 0 rgba(255,255,255,.35)}50%{box-shadow:0 10px 30px -4px rgba(239,90,58,1),inset 0 1px 0 rgba(255,255,255,.35)}}
@keyframes sweep{0%,60%{left:-60%}100%{left:140%}}
#app.still .formula b.res,#app.still .formula b.res:after{animation:none!important}

/* ───── 발굴 완료 도장(인장) ───── */
.stamp{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:.05em;border:0;border-radius:6px;padding:.5em 1.2em .55em;color:var(--acc);background:rgba(214,69,42,.05);letter-spacing:.14em;transform:none;
  box-shadow:0 0 0 2.5px var(--acc),inset 0 0 0 2px var(--paper),inset 0 0 0 3.5px rgba(214,69,42,.75);
  animation:slam .7s cubic-bezier(.2,.9,.25,1.25) both}
.stamp small{font-size:max(13px,.62em);font-weight:800;letter-spacing:.22em;opacity:.85;display:flex;align-items:center;gap:.6em;white-space:nowrap}
.stamp small:before,.stamp small:after{content:"";width:.42em;height:.42em;background:currentColor;transform:rotate(45deg)}
.stamp b{font-weight:800;font-size:1em;line-height:1.15;letter-spacing:.16em;text-indent:.16em;background:linear-gradient(100deg,var(--acc) 40%,#ff8a63 50%,var(--acc) 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:inkshine 4s ease-in-out 1s infinite}
.stamp:before{content:"";position:absolute;inset:-2px;border-radius:8px;border:2px solid var(--acc);opacity:0;animation:ripple 1s ease-out .35s 1 both;pointer-events:none}
.stamp:after{content:"";position:absolute;inset:0;border-radius:6px;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.55) 0 1px,transparent 2px),radial-gradient(circle at 70% 60%,rgba(255,255,255,.5) 0 1px,transparent 2px),radial-gradient(circle at 45% 80%,rgba(255,255,255,.45) 0 1.5px,transparent 2.5px);background-size:14px 14px;mix-blend-mode:screen;opacity:.7;pointer-events:none}
@keyframes slam{0%{opacity:0;transform:scale(1.9);filter:blur(3px)}55%{opacity:1;transform:scale(.94);filter:blur(0)}100%{transform:none}}
@keyframes ripple{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
@keyframes inkshine{0%,55%{background-position:120% 0}100%{background-position:-120% 0}}
.end .stamp{font-size:clamp(1.6rem,1rem + 2vw,2.6rem)}
.pane .hd .stamp{font-size:1.15rem}
#app.still .stamp,#app.still .stamp:before,#app.still .stamp b{animation:none!important}
.btn:after{content:none!important}

/* 준비 2: 추론 문제 두 개 */
.qb2{margin-top:1.6em;max-width:60ch}
.qb .lbl{display:block;margin-bottom:.3em}
.train>h2{margin-bottom:.7em}

/* 준비 1: 예시 그림 두 장 */
.ex2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:1em}
.ex{margin:0;background:var(--card);border:2px solid var(--line);border-radius:16px;overflow:hidden;display:grid;grid-template-columns:42% 1fr}
.ex .tfig{height:100%;min-height:150px;border-radius:0;box-shadow:none}
.ex .tfig img{width:100%;height:100%;object-fit:cover}
.ex figcaption{padding:.8em 1em;display:grid;gap:.35em;align-content:center;font-weight:700;line-height:1.5}
.ex figcaption b{font-size:var(--base);font-weight:800}
.ex .lit,.ex .hid{font-size:var(--lbl);display:flex;gap:.6em;align-items:baseline}
.ex .lit i,.ex .hid i{flex:none;font-style:normal;font-weight:800;font-size:.85em;padding:.05em .55em;border-radius:99px;background:var(--paper2)}
.ex .hid i{background:var(--ink);color:var(--paper)}
@media(max-width:900px){.ex2{grid-template-columns:1fr}}
@media(max-width:520px){.ex{grid-template-columns:1fr}.ex .tfig{aspect-ratio:3/2;min-height:0}}

/* 준비 2·3: 문제 세 개를 나란히 */
.qgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;margin-bottom:1em}
.qgrid .qb{background:var(--card);border:2px solid var(--line);border-radius:16px;overflow:hidden}
.qgrid .qb .tfig{aspect-ratio:3/2;border-radius:0;box-shadow:none}
.qgrid .qb .tfig img{width:100%;height:100%;object-fit:cover}
.qgrid .qin{padding:.8em .9em 1em}
.qgrid .qin>.lbl{display:block;margin-bottom:.3em}
.qgrid .qbox{font-size:var(--base)}
@media(max-width:1000px){.qgrid{grid-template-columns:1fr}}

/* 표지 제목: 크게, 글자마다 파내어 올라오는 움직임 */
.cover h1.ctitle{font-size:clamp(4.2rem,1rem + 10.2vw,11.5rem);line-height:.98;letter-spacing:-.03em;font-weight:800;margin:0 0 .22em;text-shadow:0 6px 40px rgba(0,0,0,.45)}
.ctitle span{display:flex}
.ctitle i{font-style:normal;display:inline-block;transform-origin:50% 100%;will-change:transform,opacity;
  animation:ctIn .95s cubic-bezier(.2,.9,.25,1.15) both;animation-delay:calc(var(--k,0)*140ms + 150ms)}
.ctitle .row1 i{color:#fbf3e4}
.ctitle .row2 i{color:var(--acc)}
.ctitle .row1{position:relative;overflow:hidden;width:max-content;padding-right:.04em}
.ctitle .row1:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);transform:translateX(-120%);mix-blend-mode:overlay;animation:ctShine 4.5s ease-in-out 1.8s infinite;pointer-events:none}
@keyframes ctIn{0%{opacity:0;transform:translateY(.55em) scale(.6) rotate(-3deg);filter:blur(10px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes ctShine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media(max-width:700px){.cover h1.ctitle{font-size:clamp(3.6rem,22vw,6rem)}}
@media(prefers-reduced-motion:reduce){.ctitle i,.ctitle .row1:after{animation:none!important}}

/* 준비 1 예시 카드: 그림은 위, 글은 아래로 나눠 겹치지 않게 */
.ex{display:flex;flex-direction:column}
.ex .tfig{position:relative;width:100%;height:auto;min-height:0;aspect-ratio:16/9;flex:none;border:0;border-radius:0}
.ex figcaption{padding:.9em 1.1em 1.1em;gap:.5em}
.ex .lit,.ex .hid{align-items:flex-start}
@media(max-width:520px){.ex .tfig{aspect-ratio:3/2}}
.ex .tfig{aspect-ratio:2/1}
@media(max-width:640px){.chip{display:none}}

/* 속뜻 칸은 검은색 대신 연한 주홍색 */
.dual .b{background:var(--acc-l);color:var(--ink);border:2px solid var(--acc)}
.dual .b b{color:var(--acc-d);opacity:1}
.ex .hid i{background:var(--acc);color:#fff}
@media(max-width:640px){.train .bar{flex-wrap:wrap;gap:10px}.train .formula{flex-wrap:wrap;justify-content:center}.train{overflow-x:hidden}}

/* 문제 카드 높이를 같게 */
.qgrid{align-items:stretch}
.qgrid .qb{display:flex;flex-direction:column}
.qgrid .qb .tfig{flex:none}
.qgrid .qin{flex:1;display:flex;flex-direction:column}
.qgrid .qin .opt:last-child{margin-bottom:0}

/* 준비 활동을 마치기 전에는 발굴 현장 버튼을 흐리게 */
.tbtn.locked{opacity:.5}

/* 준비 문제로 돌아가는 버튼 강조 + 좁은 화면 상단 바 정리 */
.tbtn.prep{background:var(--hi);border-color:var(--hi);color:var(--ink);font-weight:800}
@media(max-width:640px){
  .top{gap:6px;padding-left:10px;padding-right:10px}
  .top-r{gap:6px;min-width:0}
  .brand b{display:none}
  .brandlogo{height:20px;width:auto}
  .tbtn.prep{font-size:.85rem;padding:0 10px}
}

/* 표지의 보조 버튼: 그림 위에서도 또렷하게 */
.cover .btn.line{background:rgba(14,15,22,.72);color:#f7efe0;border:2px solid rgba(247,239,224,.8);backdrop-filter:blur(4px)}
.cover .btn.line:hover{background:rgba(247,239,224,.16)}

/* 놓친 단서: 노란 칸이 튀어나오고, 느낌표가 깜빡이며, 테두리가 반짝 */
.missbar{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;padding:.55em .9em;border-radius:12px;background:#ffe9a8;border:2px solid #e8a400;font-weight:800;animation:missBarIn .55s cubic-bezier(.2,.9,.3,1.25) both}
.missbar b{display:inline-grid;place-items:center;min-width:1.7em;height:1.7em;border-radius:99px;background:#e8590c;color:#fff;animation:misBlink 1s ease-in-out 3}
.missbar span{font-weight:700;color:var(--ink2)}
.clue-i.mis{position:relative;border:2px dashed #e8a400;background:linear-gradient(90deg,#fff1bd,#fffaf0 70%);box-shadow:0 0 0 0 rgba(232,164,0,.55);
  animation:misIn .7s cubic-bezier(.2,.9,.3,1.2) both,misRing 1.5s ease-out 3;animation-delay:calc(var(--m,0)*260ms + 250ms),calc(var(--m,0)*260ms + 950ms)}
.clue-i.mis:before{content:"!";display:grid;place-items:center;border-color:#e8590c;background:#e8590c;color:#fff;font-weight:800;font-size:.78em;line-height:1;animation:misBlink 1s ease-in-out 3;animation-delay:calc(var(--m,0)*260ms + 950ms)}
.clue-i .mb{display:inline-block;padding:.05em .6em;margin-right:.25em;border-radius:99px;background:#e8590c;color:#fff;font-weight:800;letter-spacing:.02em;transform-origin:50% 60%;animation:misWiggle 1.2s ease-in-out 2;animation-delay:calc(var(--m,0)*260ms + 1s)}
@keyframes misIn{0%{opacity:0;transform:translateX(-26px) scale(.96)}60%{opacity:1;transform:translateX(5px) scale(1.01)}100%{opacity:1;transform:none}}
@keyframes misRing{0%{box-shadow:0 0 0 0 rgba(232,164,0,.6)}100%{box-shadow:0 0 0 14px rgba(232,164,0,0)}}
@keyframes misBlink{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
@keyframes misWiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
@keyframes missBarIn{0%{opacity:0;transform:translateY(-10px)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.clue-i.mis,.clue-i.mis:before,.clue-i .mb,.missbar,.missbar b{animation:none!important}}
.missbar{gap:.3em}

/* 아주 좁은 화면: 상단 바가 넘치지 않게 더 촘촘하게 */
@media(max-width:480px){
  .top{gap:4px;padding-left:8px;padding-right:8px}
  .top-r{gap:4px}
  .top .tbtn{font-size:.78rem;padding:0 8px;height:34px;min-width:0}
  .top .tbtn.ic{padding:0 8px}
  .top .brandlogo{height:17px;margin-left:0;padding-left:0;border-left:0}
  .top .mark{transform:rotate(45deg) scale(.7)}
}
html,body{overflow-x:clip}

/* ───── 교사용 정답 안내 ───── */
#app.teacher{display:block}
.tg{padding:20px 0 60px;max-width:1100px}
.tg .tbar{position:sticky;top:0;z-index:5;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:.7em 1em;margin-bottom:1em;border-radius:14px;background:var(--ink);color:var(--paper)}
.tg .tbar span{flex:1;opacity:.8;font-size:var(--lbl)}
.tg .tbar .btn.line{background:transparent;color:var(--paper);border-color:var(--paper)}
.tg h1{font-size:var(--h2);margin:.2em 0 .3em}
.tg h2{font-size:var(--h3);margin:1.6em 0 .5em;padding-bottom:.25em;border-bottom:3px solid var(--ink)}
.tg h3{font-size:var(--base);margin:1.1em 0 .4em}
.tg .who{display:flex;gap:12px;font-weight:700;color:var(--ink2);margin-bottom:.6em}
.tg .one{border-left:5px solid var(--acc);background:var(--card);padding:.6em .9em;margin:.6em 0;border-radius:0 10px 10px 0;line-height:1.6}
.tg table{width:100%;border-collapse:collapse;background:var(--card);font-size:var(--lbl);line-height:1.55}
.tg th,.tg td{border:1px solid var(--line2);padding:.5em .7em;vertical-align:top;text-align:left}
.tg th{background:var(--paper2)}
.tg small{font-size:.92em;color:var(--ink2)}
@media(max-width:700px){.tg table{display:block;overflow-x:auto}}
@media print{#app.teacher{display:none!important}}
.tg small{font-size:.98em}