/* OSINT 방탈출 공통 프레임워크: 테마 + 문제 셸 + 툴 창 */
:root {
  --bg:#0d1117; --card:#151c26; --line:#2a3442; --ink:#dfe7f1; --dim:#8b98a9;
  --amber:#ffb454; --ok:#7ee2a8; --bad:#ff6b6b;
  --sans:"Apple SD Gothic Neo","Pretendard","Noto Sans KR",system-ui,sans-serif;
  --mono:"SF Mono","D2Coding",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.65;min-height:100vh;display:flex;flex-direction:column}
.noscript{padding:2rem;text-align:center;color:var(--bad)}

/* 상단 바 */
#topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:.8rem;padding:.55rem 1rem;background:rgba(13,17,23,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(6px);flex-wrap:wrap}
#topbar[hidden]{display:none}
#btn-home{text-decoration:none;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:.32rem .7rem;font-family:var(--sans);font-size:.86rem;white-space:nowrap}
#btn-home:hover{border-color:var(--amber);color:var(--amber)}
.home-link{margin:0 0 1rem}
.home-link a{color:var(--dim);text-decoration:none;font-size:.9rem}
.home-link a:hover{color:var(--amber)}
#problem-title{font-weight:700;color:var(--amber)}
#timer{font-family:var(--mono);color:var(--dim)}
#toolbar{display:flex;gap:.4rem;flex-wrap:wrap;margin-left:.4rem}
.tool-btn{background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:.32rem .7rem;cursor:pointer;font-family:var(--sans);font-size:.86rem}
.tool-btn span{margin-left:.15rem}
.tool-btn:hover{border-color:var(--amber);color:var(--amber)}
.tool-btn.active{border-color:var(--amber);color:var(--amber);background:rgba(255,180,84,.1)}
#btn-notebook{margin-left:auto;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:.32rem .7rem;cursor:pointer;font-family:var(--sans)}
#btn-notebook:hover{border-color:var(--amber);color:var(--amber)}

/* 화면 / 카드 */
#screen{flex:1;width:100%;max-width:820px;margin:0 auto;padding:1.5rem 1rem 3rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.6rem 1.7rem;animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.badge{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.05em;color:#0d1117;background:var(--amber);border-radius:999px;padding:.15rem .7rem;margin-bottom:.6rem}
.card h1{margin:.2rem 0 1rem;font-size:1.5rem}
.story,.dim{color:var(--dim)}
blockquote{margin:1rem 0;padding:.8rem 1.1rem;border-left:3px solid var(--amber);background:rgba(255,180,84,.07);border-radius:0 8px 8px 0;font-style:italic}
.fine{font-size:.8rem;color:var(--dim)}
code{font-family:var(--mono);background:#0b0f16;padding:.1em .4em;border-radius:4px;word-break:break-all}

/* 목표 시트 */
.obj-progress{color:var(--amber);font-weight:700;margin-bottom:1rem}
.obj-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.obj-item{border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem}
.obj-item .q{font-weight:700;margin:0 0 .2rem}
.obj-solved{border-color:rgba(126,226,168,.4);background:rgba(126,226,168,.06)}
.obj-solved .q{color:var(--ok)}
.obj-solved .ans{color:var(--ok);font-family:var(--mono);font-size:.9rem}
.obj-solved .succ{color:var(--dim);margin:.4rem 0 0}
.obj-current{border-color:var(--amber)}
.obj-locked{opacity:.55}
.obj-locked .lock{color:var(--dim)}
.answer-form{margin-top:.9rem;display:flex;gap:.6rem}
.answer-form input{flex:1;padding:.7rem .9rem;border-radius:10px;border:1px solid var(--line);background:#0b0f16;color:var(--ink);font-size:1rem;font-family:var(--sans)}
.answer-form input:focus{outline:none;border-color:var(--amber)}
.answer-form button{padding:.7rem 1.3rem;border-radius:10px;border:0;cursor:pointer;background:var(--amber);color:#0d1117;font-weight:700;font-size:1rem}
.answer-form button:hover{filter:brightness(1.1)}
.feedback{min-height:1.4rem;margin:.5rem 0 0;font-size:.92rem}
.feedback.bad{color:var(--bad)}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.hintbox{margin-top:1rem;border-top:1px dashed var(--line);padding-top:.8rem}
.hintbox button{background:transparent;border:1px solid var(--line);color:var(--dim);border-radius:8px;padding:.4rem .9rem;cursor:pointer;font-family:var(--sans)}
.hintbox button:disabled{opacity:.4;cursor:default}
.hintbox ol{margin:.6rem 0 0;padding-left:1.3rem;color:var(--dim)}

/* 버튼/완료 */
.start-btn,.next-btn,.retry-btn{display:inline-block;margin-top:1.1rem;padding:.75rem 1.6rem;border-radius:10px;border:0;cursor:pointer;background:var(--amber);color:#0d1117;font-weight:700;font-size:1.05rem;font-family:var(--sans)}
.stats{display:flex;gap:2rem;margin:1.2rem 0}
.stats .num{font-size:1.7rem;font-family:var(--mono);color:var(--amber)}
.stats .label{font-size:.8rem;color:var(--dim)}

/* 단서 노트 */
#notebook{position:fixed;top:0;right:0;height:100vh;width:min(340px,90vw);z-index:40;background:#131a24;border-left:1px solid var(--line);transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;box-shadow:-12px 0 30px rgba(0,0,0,.45)}
#notebook.notebook-open{transform:translateX(0)}
.notebook-head{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.notebook-head h2{margin:0;font-size:1.05rem;color:var(--amber)}
#btn-notebook-close{background:none;border:0;color:var(--dim);font-size:1.1rem;cursor:pointer}
#notebook-list{list-style:none;margin:0;padding:1rem;overflow-y:auto}
#notebook-list li{padding:.7rem .8rem;margin-bottom:.6rem;border:1px dashed var(--line);border-radius:8px;font-size:.9rem;background:rgba(255,180,84,.04)}
#notebook-list li.empty{color:var(--dim);border-style:solid;font-style:italic}

/* 공통 뷰어 (증거함/브라우저 페이지) */
.viewer{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:.6rem 0;background:#10161f}
.viewer-title{padding:.5rem .9rem;font-size:.85rem;color:var(--dim);background:#0b0f16;border-bottom:1px solid var(--line);font-family:var(--mono)}
.viewer img{max-width:100%;display:block}
.filetext{margin:0;padding:1rem;font-family:var(--mono);font-size:.82rem;white-space:pre-wrap;word-break:break-word;color:#c7d2e0}
table.meta{width:100%;border-collapse:collapse;font-size:.88rem}
table.meta caption{text-align:left;padding:.5rem .9rem;color:var(--dim);font-size:.8rem}
table.meta th,table.meta td{padding:.4rem .9rem;border-top:1px solid var(--line);text-align:left}
table.meta th{color:var(--dim);width:36%;font-weight:600}
table.meta td{font-family:var(--mono)}

/* 툴 창 */
.tool-window{position:fixed;width:min(460px,94vw);max-height:74vh;display:none;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.55);overflow:hidden}
.tool-window.open{display:flex}
.tw-bar{display:flex;align-items:center;justify-content:space-between;padding:.5rem .8rem;background:#0f1620;border-bottom:1px solid var(--line);cursor:move;user-select:none}
.tw-title{font-weight:700;font-size:.92rem}
.tw-close{background:none;border:0;color:var(--dim);font-size:1rem;cursor:pointer}
.tw-close:hover{color:var(--bad)}
.tw-body{padding:.9rem;overflow:auto}

/* 툴: 증거함 */
.tool-files{display:grid;grid-template-columns:160px 1fr;gap:.8rem}
.files-list{display:flex;flex-direction:column;gap:.35rem}
.file-item{text-align:left;background:#0f1620;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:.5rem .6rem;cursor:pointer;font-family:var(--sans);font-size:.85rem}
.file-item:hover{border-color:var(--amber)}
.files-view{min-height:120px}

/* 툴: 브라우저 */
.bx-chrome{display:flex;gap:.4rem;margin-bottom:.7rem}
.bx-back,.bx-go{background:#0f1620;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:.4rem .7rem;cursor:pointer}
.bx-addr{flex:1;padding:.45rem .7rem;border-radius:8px;border:1px solid var(--line);background:#0b0f16;color:var(--ink);font-family:var(--mono);font-size:.85rem}
.bx-result{border:1px solid var(--line);border-radius:8px;padding:.6rem .8rem;margin-bottom:.5rem;cursor:pointer}
.bx-result:hover{border-color:var(--amber)}
.bx-r-title{color:var(--amber);font-weight:700}
.bx-r-url{color:var(--ok);font-family:var(--mono);font-size:.78rem;margin:.1rem 0}
.bx-r-snip{color:var(--dim);font-size:.85rem}
.bx-page h2{margin:0 0 .6rem;font-size:1.15rem}
.bx-page a[data-url]{color:var(--amber);cursor:pointer;text-decoration:underline}
.bx-empty{color:var(--dim);padding:1rem;text-align:center}

/* 툴: FindUser */
.fu-bar,.geo-form{display:flex;gap:.4rem;margin-bottom:.7rem;flex-wrap:wrap;align-items:center}
.fu-q,.geo-form input{padding:.45rem .7rem;border-radius:8px;border:1px solid var(--line);background:#0b0f16;color:var(--ink);font-family:var(--sans)}
.fu-q{flex:1}
.fu-go,.geo-go{background:var(--amber);color:#0d1117;border:0;border-radius:8px;padding:.45rem .9rem;cursor:pointer;font-weight:700}
.fu-head{color:var(--amber);font-weight:700;margin-bottom:.6rem}
.fu-card{border:1px solid var(--line);border-radius:8px;padding:.6rem .8rem;margin-bottom:.5rem}
.fu-card h3{margin:0 0 .2rem;font-size:1rem;color:var(--amber)}
.fu-card p{margin:.15rem 0;font-size:.88rem}
.fu-empty,.geo-empty{color:var(--dim);padding:1rem;text-align:center}

/* 툴: WHOIS */
.wh-out{max-height:46vh;overflow:auto;background:#05080d;border:1px solid var(--line);border-radius:8px;margin-bottom:.6rem}
.wh-line{margin:0;padding:.7rem .9rem;font-family:var(--mono);font-size:.8rem;color:#9fe8a8;white-space:pre-wrap;border-bottom:1px solid #10161f}
.wh-line.dim{color:var(--dim)}
.wh-form{display:flex;gap:.4rem;align-items:center}
.wh-prompt{font-family:var(--mono);color:var(--dim)}
.wh-in{flex:1;padding:.45rem .7rem;border-radius:8px;border:1px solid var(--line);background:#0b0f16;color:var(--ink);font-family:var(--mono)}

/* 툴: 좌표 */
.geo-form label{color:var(--dim);font-size:.85rem;display:flex;gap:.3rem;align-items:center}
.geo-hit{border:1px solid rgba(126,226,168,.4);background:rgba(126,226,168,.06);border-radius:8px;padding:.8rem 1rem}
.geo-name{color:var(--ok);font-weight:700;font-size:1.05rem}

/* 툴: 디코더 */
.dc-modes{display:flex;gap:1rem;margin-bottom:.6rem;color:var(--dim);font-size:.88rem}
.dc-in{width:100%;min-height:80px;padding:.6rem;border-radius:8px;border:1px solid var(--line);background:#0b0f16;color:var(--ink);font-family:var(--mono);font-size:.85rem;resize:vertical}
.dc-go{margin:.6rem 0;background:var(--amber);color:#0d1117;border:0;border-radius:8px;padding:.5rem 1rem;cursor:pointer;font-weight:700}
.dc-ok pre{margin:.3rem 0 0;padding:.7rem;background:#05080d;border-radius:8px;font-family:var(--mono);font-size:.85rem;color:var(--ok);white-space:pre-wrap;word-break:break-all}
.dc-bad{color:var(--bad);padding:.6rem 0}

#site-foot{text-align:center;color:var(--dim);font-size:.75rem;padding:1rem;border-top:1px solid var(--line)}

/* 툴 본문 컨테이너 (계약 클래스) */
.tool-browser,.tool-finduser,.tool-whois,.tool-geo,.tool-decoder{display:block}
.bx-view{min-height:120px}
.geo-view{min-height:80px}
.dc-out{margin-top:.4rem}

/* 툴: 체인 탐색기 */
.tool-chain{display:block}
.ch-bar{display:flex;gap:.4rem;margin-bottom:.7rem}
.ch-q{flex:1;padding:.45rem .7rem;border-radius:8px;border:1px solid var(--line);background:#0b0f16;color:var(--ink);font-family:var(--mono);font-size:.82rem}
.ch-go{background:var(--amber);color:#0d1117;border:0;border-radius:8px;padding:.45rem .9rem;cursor:pointer;font-weight:700}
.ch-view{min-height:80px}
.ch-head{font-family:var(--mono);font-size:.82rem;color:var(--ink);margin-bottom:.5rem;word-break:break-all}
.ch-label{color:var(--amber);font-weight:700}
.ch-empty{color:var(--dim);padding:1rem;text-align:center}
.tx-table{width:100%;border-collapse:collapse;font-size:.8rem}
.tx-table th,.tx-table td{padding:.35rem .5rem;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.tx-table th{color:var(--dim);font-weight:600}
.tx-out{color:var(--bad)}
.tx-in{color:var(--ok)}
.tx-amt{font-family:var(--mono);white-space:nowrap}
.tx-cp{font-family:var(--mono);word-break:break-all;color:var(--dim)}
.tx-time{white-space:nowrap;color:var(--dim)}

/* 툴: 문서 분석기 */
.tool-doc{display:grid;grid-template-columns:180px 1fr;gap:.8rem}
.doc-list{display:flex;flex-direction:column;gap:.35rem}
.doc-item{text-align:left;background:#0f1620;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:.5rem .6rem;cursor:pointer;font-family:var(--sans);font-size:.83rem}
.doc-item:hover{border-color:var(--amber)}
.doc-view{min-height:120px}
.doc-reveal{margin-top:.6rem;background:#2a1a1a;border:1px solid var(--bad);color:var(--bad);border-radius:8px;padding:.5rem .9rem;cursor:pointer;font-family:var(--sans)}
.doc-reveal:disabled{opacity:.6;cursor:default}
.doc-hidden{margin:.6rem 0 0;padding:.7rem;background:#05080d;border-radius:8px;font-family:var(--mono);font-size:.82rem;color:var(--bad);white-space:pre-wrap;word-break:break-word}

@media (max-width:720px){
  .tool-window{left:0!important;top:auto!important;bottom:0;width:100vw;max-height:80vh;border-radius:12px 12px 0 0}
  .tool-files,.tool-doc{grid-template-columns:1fr}
  .answer-form{flex-direction:column}
}