/* 내의원 비망록 — 모바일 우선. 375×812 기준. 먹빛 바탕에 한지 문서. */

:root{
  --ink:#14110d; --ink2:#1c1813; --panel:#221d17; --panel2:#2b241c;
  --line:rgba(226,204,160,.12); --line2:rgba(226,204,160,.24);
  --txt:#ece3d2; --dim:#a2937c; --dim2:#6f6454;
  --han:#e8ddc4; --han-ink:#2a2318;       /* 한지 */
  --ju:#c0452f;   --geum:#c9a24a; --cheong:#5c8a93; --nok:#6f9163;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; height:100%}
body{
  background:var(--ink); color:var(--txt);
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Nanum Myeongjo","Malgun Gothic",system-ui,serif;
  overscroll-behavior:none; -webkit-user-select:none; user-select:none;
}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer; text-align:left}
[hidden]{display:none !important}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.02em}

#app{max-width:520px; margin:0 auto; min-height:100%; display:flex; flex-direction:column;
  background:
    radial-gradient(120% 60% at 50% 0%, #241e17 0%, transparent 60%),
    linear-gradient(180deg,#14110d,#191511 60%,#14110d);
}

/* 상단 */
#top{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 11px) 16px 11px;
  background:rgba(20,17,13,.93); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
#top .logo{font-weight:800; font-size:15px; margin-right:auto; letter-spacing:-.02em}
#top .logo small{display:block; font-weight:400; font-size:9.5px; color:var(--dim2); letter-spacing:.24em}
.res{display:flex; align-items:center; gap:4px; background:var(--panel); border:1px solid var(--line);
  padding:4px 10px; border-radius:2px; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--geum)}
.res i{font-style:normal; font-size:11px; opacity:.8}

main{flex:1; padding:16px 16px 104px}
.screen{animation:fade .24s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

h2.t{font-size:18px; margin:0 0 3px}
p.sub{margin:0 0 16px; color:var(--dim); font-size:12.5px; line-height:1.6}
h3.sec{font-size:12px; color:var(--geum); letter-spacing:.14em; margin:26px 0 10px;
  padding-bottom:7px; border-bottom:1px solid var(--line)}
h3.sec em{font-style:normal; color:var(--dim2); float:right; letter-spacing:0}

/* 하단 탭 */
#nav{position:fixed; left:0; right:0; bottom:0; z-index:40; max-width:520px; margin:0 auto;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:rgba(22,19,15,.97); backdrop-filter:blur(14px); border-top:1px solid var(--line);
  padding-bottom:var(--safe-b)}
#nav button{padding:10px 0 11px; display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--dim2); font-size:10.5px; font-weight:600; transition:color .15s}
#nav button i{font-style:normal; font-size:17px; opacity:.5; transition:opacity .15s}
#nav button.on{color:var(--geum)} #nav button.on i{opacity:1}

/* ── 집무 ── */
.hero{position:relative; border:1px solid var(--line2); border-radius:3px; overflow:hidden; margin-bottom:14px;
  background:linear-gradient(135deg,#2a2219,#1a1712)}
.hero-img{height:210px; background:#1a1712 center/cover no-repeat; background-image:url('img/dan_idle.jpg');
  background-position:center 14%;
  -webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 100%); mask-image:linear-gradient(180deg,#000 52%,transparent 100%)}
.hero-txt{padding:0 16px 16px; margin-top:-46px; position:relative}
.hero-txt .rank{display:inline-block; font-size:10.5px; letter-spacing:.14em; color:var(--geum);
  border:1px solid var(--line2); padding:2px 8px; border-radius:2px; margin-bottom:7px; background:rgba(20,17,13,.7)}
.hero-txt h1{font-size:26px; letter-spacing:-.03em}
.hero-txt h1 span{font-size:12px; color:var(--dim2); margin-left:8px; letter-spacing:.1em; font-weight:400}
.hero-txt p{margin:4px 0 0; color:var(--dim); font-size:12.5px}

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); margin-bottom:24px}
.stats div{background:var(--ink2); padding:12px 8px; text-align:center}
.stats b{display:block; font-size:19px; color:var(--geum); font-variant-numeric:tabular-nums}
.stats span{font-size:10.5px; color:var(--dim2); letter-spacing:.1em}

.case-card{display:flex; align-items:center; gap:12px; width:100%; padding:14px 14px;
  background:var(--panel); border:1px solid var(--line); border-radius:3px; margin-bottom:8px; transition:.15s}
.case-card:active{transform:scale(.99)}
.case-card .num{width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center; border:1px solid var(--line2);
  font-size:12px; color:var(--geum); font-variant-numeric:tabular-nums}
.case-card b{display:block; font-size:15px}
.case-card small{display:block; color:var(--dim2); font-size:11.5px; margin-top:2px}
.case-card .mark{font-size:11px; color:var(--nok); letter-spacing:.06em}
.case-card.done{opacity:.62} .case-card.done .mark{color:var(--dim2)}
.case-card.lock{opacity:.35} .case-card.lock .mark{color:var(--dim2)}
.grow{flex:1; min-width:0}
.row{display:flex; align-items:center; gap:10px}

.card{background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:14px}
.card.fin{border-color:var(--geum); color:var(--geum); text-align:center; margin-top:16px; font-size:13.5px}
.reset{display:block; width:100%; margin:28px 0 0; padding:12px; text-align:center;
  color:var(--dim2); font-size:12px; border:1px solid var(--line)}

/* ── 사건 ── */
.case-head{margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.case-head small{color:var(--geum); font-size:10.5px; letter-spacing:.14em}
.case-head h2{font-size:22px; margin-top:3px}

.patient{background:
  linear-gradient(0deg,rgba(0,0,0,.03),rgba(0,0,0,.03)),
  repeating-linear-gradient(90deg,transparent 0 3px,rgba(0,0,0,.012) 3px 4px), var(--han);
  color:var(--han-ink); border:1px solid #a9987a; box-shadow:0 3px 14px rgba(0,0,0,.4)}
.p-top{display:flex; align-items:baseline; gap:8px; padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid rgba(0,0,0,.14)}
.p-top b{font-size:16px} .p-top span{font-size:11.5px; color:#6d6047}
ul.sym{margin:0; padding-left:16px; font-size:13.5px; line-height:1.85}
ul.sym li::marker{color:var(--ju)}

.turns{display:flex; align-items:center; gap:8px; margin:16px 0 0; font-size:11.5px; color:var(--dim)}
.turns b{color:var(--geum); font-size:15px; font-variant-numeric:tabular-nums}
.turns .bar{flex:1; height:3px; background:var(--panel2); overflow:hidden}
.turns .bar i{display:block; height:100%; background:var(--geum); transition:width .3s}

.acts{display:flex; flex-direction:column; gap:7px}
.act{display:flex; align-items:center; gap:10px; padding:12px 13px; background:var(--panel);
  border:1px solid var(--line); border-radius:3px; font-size:14px; transition:.15s}
.act:active:not(:disabled){transform:scale(.99); border-color:var(--line2)}
.act:disabled{opacity:.42}
.act.used{opacity:.5; border-style:dashed}
.act .ty{font-style:normal; width:22px; height:22px; flex:0 0 22px; display:grid; place-items:center;
  border-radius:2px; font-size:11px; font-weight:700; color:#15120e}
.t맥{background:var(--ju)} .t관{background:var(--cheong)} .t문{background:var(--geum)} .t장{background:var(--nok)}
.act em{font-style:normal; font-size:11px; color:var(--dim2)}
.note{margin:-2px 0 4px; padding:11px 13px 12px 15px; background:rgba(201,162,74,.05);
  border-left:2px solid var(--geum); font-size:13px; color:#dcd0b8; line-height:1.75}

.chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.chip{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; padding:5px 10px;
  border:1px solid var(--line2); color:var(--geum); border-radius:2px; background:rgba(201,162,74,.06)}
.chip i{font-style:normal; opacity:.7}
.memo{font-size:12.5px; color:var(--dim); padding:8px 12px; border-left:2px solid var(--line2); margin-bottom:6px}

.cand{margin-top:14px}
.cand .big-n{font-size:22px; color:var(--ju); font-weight:800; font-variant-numeric:tabular-nums}
.cand-list{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.cand-list span{font-size:12px; padding:4px 9px; border:1px solid var(--line); color:var(--txt); border-radius:2px}
.cand-list i{font-size:12px; color:var(--ju); font-style:normal}

.ask{margin-top:16px}
.ask b{color:var(--geum)} .ask p{margin:4px 0 12px; font-size:13px; color:var(--dim)}
.opt{display:block; width:100%; padding:12px 13px; background:var(--panel2); border:1px solid var(--line);
  border-radius:3px; margin-bottom:7px; transition:.15s}
.opt:active:not(:disabled){border-color:var(--geum)}
.opt b{display:block; font-size:14.5px}
.opt b small{font-size:10.5px; color:var(--dim2); margin-left:6px; letter-spacing:.08em}
.opt>small{display:block; font-size:12px; color:var(--dim); margin-top:3px}
.opt em{display:block; font-style:normal; font-size:11.5px; color:var(--dim2); margin-top:5px; line-height:1.6}
.opt.dim{opacity:.35} .opt.rm{text-align:center; color:var(--dim2); font-size:12.5px}

button.big{display:block; width:100%; margin-top:18px; padding:15px; text-align:center;
  background:var(--ju); color:#fff; font-weight:700; font-size:15px; border-radius:3px; letter-spacing:.02em}
button.big:disabled{background:var(--panel2); color:var(--dim2)}
button.big:active:not(:disabled){filter:brightness(.9)}
.empty{text-align:center; color:var(--dim); padding:60px 0; font-size:13.5px}

/* ── 도감 ── */
.axkey{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.axkey span{font-size:10.5px; color:var(--dim2)} .axkey i{font-style:normal; margin-right:3px; color:var(--geum)}
.pz{display:block; width:100%; padding:13px; background:var(--panel); border:1px solid var(--line);
  border-radius:3px; margin-bottom:7px}
.pz.met{border-color:rgba(201,162,74,.4)}
.pz b{font-size:15px} .pz b small{font-size:10.5px; color:var(--dim2); margin-left:6px; letter-spacing:.1em}
.pz em{font-style:normal; font-size:10.5px; color:var(--geum); border:1px solid var(--line2); padding:2px 7px}
.pz .ax{display:flex; flex-wrap:wrap; gap:5px; margin-top:9px}
.pz .ax span{font-size:11px; color:var(--dim); background:var(--ink2); border:1px solid var(--line); padding:3px 8px; border-radius:2px}

/* ── 약장 ── */
.shelf{display:grid; grid-template-columns:repeat(2,1fr); gap:7px}
.hb{padding:12px; background:var(--panel); border:1px solid var(--line); border-radius:3px}
.hb b{font-size:14.5px} .hb b small{font-size:10px; color:var(--dim2); margin-left:5px; letter-spacing:.08em}
.hb .tags{display:flex; flex-wrap:wrap; gap:4px; margin:7px 0 5px}
.hb .tags i{font-style:normal; font-size:10.5px; color:var(--cheong); border:1px solid rgba(92,138,147,.35); padding:2px 6px}
.hb .sng{font-size:10.5px; color:var(--dim2)}
.hb.lk{opacity:.3; text-align:center; color:var(--dim2)}
.shelf.lockd{opacity:.8}

/* ── 조제대 ── */
#craft{position:fixed; inset:0; z-index:60; background:rgba(12,10,8,.97); overflow:auto;
  animation:fade .2s ease; backdrop-filter:blur(3px)}
.cr-wrap{max-width:520px; margin:0 auto; padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(var(--safe-b) + 32px)}
.cr-head{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.cr-head .x{width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border:1px solid var(--line); color:var(--dim)}
.cr-head small{display:block; font-size:10.5px; color:var(--dim2); letter-spacing:.14em}
.cr-head b{font-size:20px} .cr-head b span{font-size:12px; color:var(--dim2); letter-spacing:.1em; font-weight:400}
.cr-hint{font-size:12.5px; color:var(--dim); margin:0 0 20px; line-height:1.7}
.slots{display:flex; flex-direction:column; gap:8px}
.slot{display:block; width:100%; padding:14px; background:var(--panel); border:1px solid var(--line); border-radius:3px}
.slot.on{border-color:var(--geum); background:rgba(201,162,74,.07)}
.slot i{font-style:normal; display:inline-block; font-size:11px; letter-spacing:.1em; color:var(--geum);
  border:1px solid var(--line2); padding:1px 7px; margin-bottom:8px}
.slot b{display:block; font-size:16px} .slot b.e{color:var(--dim2); font-weight:400; font-size:14px}
.slot small{display:block; font-size:11.5px; color:var(--dim); margin-top:3px}
.cr-foot{font-size:11.5px; color:var(--dim2); text-align:center; margin-top:18px; line-height:1.8}

/* ── 서사 두루마리 ── */
#story{position:fixed; inset:0; z-index:70; background:rgba(10,8,6,.9); overflow:auto; display:flex;
  animation:fade .25s ease; backdrop-filter:blur(4px)}
.scroll{max-width:460px; width:100%; margin:auto; padding:32px 26px calc(var(--safe-b) + 32px);
  background:
   repeating-linear-gradient(90deg,transparent 0 3px,rgba(0,0,0,.012) 3px 4px),
   linear-gradient(180deg,#efe5cd,#e3d7ba);
  color:var(--han-ink); border-top:3px solid #8c7a55; border-bottom:3px solid #8c7a55;
  box-shadow:0 0 50px rgba(0,0,0,.6)}
.scroll p{margin:0 0 14px; font-size:15px; line-height:2; letter-spacing:-.01em}
.scroll p:empty{height:6px; margin:0}
.scroll button.big{background:#3a2f21; margin-top:22px}

/* ── 시트 ── */
#sheet{position:fixed; inset:0; z-index:80; background:rgba(8,7,5,.7); display:flex; align-items:flex-end;
  animation:fade .18s ease}
#sheet .box{width:100%; max-width:520px; margin:0 auto; max-height:86vh; overflow:auto;
  background:var(--ink2); border-top:2px solid var(--geum); border-radius:6px 6px 0 0;
  padding:20px 16px calc(var(--safe-b) + 20px); animation:up .24s cubic-bezier(.2,.8,.3,1)}
@keyframes up{from{transform:translateY(24px)} to{transform:none}}
#sheet h3{font-size:17px; margin-bottom:4px}
#sheet h3 small{font-size:11px; color:var(--dim2); letter-spacing:.1em; margin-left:6px}
#sheet h4{font-size:11.5px; color:var(--geum); letter-spacing:.12em; margin:16px 0 6px}
#sheet p.d{font-size:13px; color:var(--dim); line-height:1.8; margin:0 0 14px}
#sheet ul.sym{color:var(--txt)}
#sheet .warn{color:var(--ju)}
#sheet .bt{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px}
#sheet button.g,#sheet button.r{padding:13px; text-align:center; border:1px solid var(--line); border-radius:3px; font-size:14px}
#sheet button.g{color:var(--dim); width:100%; margin-top:10px}
#sheet .bt button.g{margin-top:0}
#sheet button.r{background:var(--ju); color:#fff; border-color:var(--ju); font-weight:700}
.plist,.hlist{max-height:none}

/* ── 토스트 ── */
#toast{position:fixed; left:50%; bottom:calc(var(--safe-b) + 78px); transform:translate(-50%,10px);
  z-index:90; background:rgba(40,33,25,.97); border:1px solid var(--line2); color:var(--txt);
  padding:10px 18px; border-radius:3px; font-size:13px; opacity:0; pointer-events:none; transition:.22s}
#toast.on{opacity:1; transform:translate(-50%,0)}

/* ── 그림 ── */
.case-head{position:relative; overflow:hidden; border:1px solid var(--line); border-bottom:1px solid var(--line);
  border-radius:3px; padding:70px 14px 14px; margin-bottom:16px}
.case-head::before{content:''; position:absolute; inset:0; background:var(--bg) center/cover no-repeat; opacity:.55}
.case-head::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,17,13,.15) 0%,rgba(20,17,13,.72) 55%,rgba(20,17,13,.96) 100%)}
.case-head small,.case-head h2{position:relative; z-index:1}

.s-bg{height:150px; margin:-32px -26px 22px; background:#2a2418 center/cover no-repeat;
  border-bottom:2px solid #8c7a55;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%); mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
.s-por{text-align:center; margin:-8px 0 16px}
.s-por img{width:150px; height:150px; object-fit:cover; object-position:center 12%;
  border-radius:50%; border:2px solid #8c7a55; background:#efe5cd; box-shadow:0 4px 18px rgba(0,0,0,.25)}

.cast{display:grid; grid-template-columns:repeat(4,1fr); gap:7px}
.cast button{text-align:center}
.cast img{width:100%; aspect-ratio:1; object-fit:cover; object-position:center 10%;
  border:1px solid var(--line2); border-radius:3px; background:var(--panel2); display:block}
.cast b{display:block; font-size:11px; margin-top:5px; color:var(--dim); font-weight:600}
.cast-big{margin:-20px -16px 14px}
.cast-big img{width:100%; height:200px; object-fit:cover; object-position:center 8%;
  -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 100%); mask-image:linear-gradient(180deg,#000 68%,transparent 100%)}

/* 도감 — 사건 중 후보 압축 */
.pz.out{opacity:.3}
.pz.out b{text-decoration:line-through; text-decoration-color:var(--ju)}
.pz .ax span.hit{color:var(--geum); border-color:rgba(201,162,74,.5); background:rgba(201,162,74,.09)}
.pz .ax span.miss{color:var(--dim2); text-decoration:line-through; text-decoration-color:rgba(192,69,47,.6)}
.cand.card{margin-bottom:14px}

/* 덮개가 떠 있는 동안엔 아래 탭을 감춘다 */
body.modal #nav{display:none}
#sheet .box{max-height:88vh}