/* 미카즈키야 표류담 — 흑백 만화 판면 */

:root{
  --ink:#12100e;
  --paper:#f4f1e8;
  --paper-2:#e8e3d6;
  --line:3px;
  --maxw:1180px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:#0b0a09;
  color:var(--ink);
  font-family:"Nanum Myeongjo","Apple SD Gothic Neo","Noto Serif KR",serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  cursor:default;
}

/* 종이 바탕 */
#screen{
  position:relative;
  width:100%;height:100%;
  max-width:var(--maxw);
  margin:0 auto;
  background:var(--paper);
  background-image:
    repeating-linear-gradient(0deg,rgba(18,16,14,.017) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(18,16,14,.013) 0 1px,transparent 1px 4px);
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:0 0 60px rgba(0,0,0,.8);
}
/* 화이트아웃은 무대에만 — 대사와 HUD는 계속 읽혀야 한다 */
#screen.paleout #stage{animation:paleout 1.2s ease-out}
@keyframes paleout{0%{filter:brightness(3.4) contrast(.18)}100%{filter:none}}
#screen.quiet #stage{filter:saturate(0) contrast(1.06)}
#screen.quiet #textbox{background:var(--paper);}

/* ── HUD ───────────────────────────────────────────── */
#hud{
  display:none;align-items:center;gap:14px;
  padding:9px 16px;border-bottom:var(--line) solid var(--ink);
  font-size:13px;letter-spacing:.02em;flex:0 0 auto;
  background:var(--paper);
}
#hud.on{display:flex}
#hud .left{display:flex;align-items:center;gap:12px;white-space:nowrap}
#hud-cycle{font-weight:700;border:2px solid var(--ink);padding:1px 8px}
#hud-tide{display:flex;align-items:center;gap:6px}
#hud .lab{font-size:11px;opacity:.7}
#hud .bar{display:inline-block;width:78px;height:9px;border:2px solid var(--ink);position:relative}
#hud .bar i{position:absolute;inset:0 auto 0 0;background:var(--ink);display:block}
#hud-vis{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
#hud-vis .v{display:flex;align-items:center;gap:5px;font-size:12px}
#hud-vis .v b{font-weight:700}
#hud-vis .v .bar{width:52px;height:7px}
#hud-vis .v.danger{opacity:.45}
#hud-vis .v.danger .bar i{background:repeating-linear-gradient(45deg,var(--ink) 0 2px,transparent 2px 4px)}
#hud-vis .v.good b{text-decoration:underline;text-underline-offset:3px}
#ledger-btn{
  font:inherit;font-size:12px;border:2px solid var(--ink);background:var(--paper);
  padding:3px 10px;cursor:pointer;color:var(--ink)
}
#ledger-btn:hover{background:var(--ink);color:var(--paper)}

/* ── 무대 ──────────────────────────────────────────── */
#stage{
  position:relative;flex:1 1 auto;min-height:32vh;isolation:isolate;
  border-bottom:var(--line) solid var(--ink);
  overflow:hidden;background:var(--paper);cursor:pointer;
}
.layer{position:absolute;inset:0;pointer-events:none}
/* 그리는 순서를 못박는다 — 배경 < 인물 패널 < 조수 < 효과 < 오노마토페 */
#bg-layer{z-index:1}
/* 생성 배경이 세로로 나오는 경우가 있어 중심(문간·수평선)이 잡히도록 아래로 내린다 */
#bg-layer img{object-position:center 40%}
#char-layer{z-index:2}
#tide-layer{z-index:3}
#fx-layer{z-index:4}
#ono-layer{z-index:5}
#vignette{z-index:6}
.layer svg,.layer img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 22%}

#bg-layer{filter:grayscale(1) contrast(1.12)}

/* 인물은 배경 위의 만화 인서트 컷. 패널 종이는 불투명, 그림만 흐려진다. */
#char-layer{
  position:absolute;z-index:2;
  inset:3% 2.5% -1px auto;
  width:42%;
  background:var(--paper);
  border:4px solid var(--ink);
  box-shadow:8px 9px 0 rgba(18,16,14,.5);
  isolation:isolate;
  overflow:hidden;
  display:none;
}
#char-layer.on{display:block}
#char-layer .art{
  position:absolute;inset:0;
  opacity:var(--vis,1);
  filter:grayscale(1) contrast(1.14);
  transition:opacity .55s ease, filter .55s ease;
}
#char-layer .art img,#char-layer .art svg{
  width:100%;height:100%;object-fit:cover;object-position:center 16%;display:block
}
#char-layer.faint .art{filter:grayscale(1) contrast(.95) brightness(1.03)}
#char-layer.ghost .art{
  filter:grayscale(1) contrast(.86) brightness(1.12);
  -webkit-mask-image:repeating-linear-gradient(9deg,#000 0 13px,rgba(0,0,0,.42) 17px,#000 22px);
  mask-image:repeating-linear-gradient(9deg,#000 0 13px,rgba(0,0,0,.42) 17px,#000 22px);
}
.fade{animation:fadein .5s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}

#tide-layer{opacity:.9;transition:transform 2s ease}
#tide-layer.rise{transform:translateY(-6%)}
#fx-layer{opacity:0}
#fx-layer.go{animation:zap .9s ease-out}
@keyframes zap{0%{opacity:.95}70%{opacity:.5}100%{opacity:0}}

#vignette{
  position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(18,16,14,.34), inset 0 0 22px rgba(18,16,14,.2);
}

#stage.shake{animation:shake .42s}
body.noshake #stage.shake{animation:none}
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  15%{transform:translate(-8px,4px) rotate(-.4deg)}
  35%{transform:translate(7px,-5px) rotate(.3deg)}
  55%{transform:translate(-5px,-3px)}
  75%{transform:translate(4px,4px)}
}

/* 오노마토페 */
#ono-layer{overflow:hidden}
.ono{
  position:absolute;font-size:clamp(38px,7.4vw,92px);font-weight:900;
  color:var(--paper);
  -webkit-text-stroke:8px var(--ink);
  paint-order:stroke fill;
  letter-spacing:.02em;
  text-shadow:7px 8px 0 rgba(18,16,14,.55),0 0 18px rgba(244,241,232,.9);
  animation:onopop .32s cubic-bezier(.2,1.7,.4,1) both, onofade .4s 1.1s forwards;
  font-family:"Apple SD Gothic Neo","Nanum Gothic",sans-serif;
}
@keyframes onopop{from{transform:scale(.3) rotate(-14deg);opacity:0}to{opacity:1}}
@keyframes onofade{to{opacity:0;transform:scale(1.16)}}

#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#flash.go{animation:fl .5s ease-out}
@keyframes fl{0%{opacity:.95}100%{opacity:0}}

/* ── 대사창 ────────────────────────────────────────── */
#textbox{
  position:relative;flex:0 0 auto;
  min-height:112px;
  padding:18px 24px 16px;
  background:var(--paper);
  display:none;
  cursor:pointer;
}
#textbox.on{display:block}
#speaker{
  display:none;position:absolute;top:-16px;left:22px;
  background:var(--paper);border:var(--line) solid var(--ink);
  padding:2px 14px;font-weight:700;font-size:15px;letter-spacing:.04em;
}
#speaker.on{display:block}
#text{
  font-size:clamp(15px,2.05vw,19px);
  line-height:1.86;
  letter-spacing:.005em;
  white-space:pre-wrap;
  min-height:2.3em;
}
#textbox.narration #text{opacity:.92}
#hint{
  position:absolute;right:18px;bottom:10px;font-size:12px;
  animation:blink 1.1s steps(2,end) infinite;opacity:.55
}
#textbox.asking #hint{display:none}
#textbox.asking{min-height:0;padding:16px 24px 14px}
#textbox.asking #text{min-height:0}
#textbox.asking:has(#text:empty){display:none}
@keyframes blink{50%{opacity:0}}

/* ── 선택지 ────────────────────────────────────────── */
#choices{
  flex:0 1 auto;display:flex;flex-direction:column;gap:0;
  background:var(--paper);
  max-height:42vh;overflow-y:auto;
  scrollbar-width:thin;
}
#choices::-webkit-scrollbar{width:7px}
#choices::-webkit-scrollbar-thumb{background:var(--ink)}
#choices:empty{display:none}
.choice{
  display:flex;align-items:baseline;gap:11px;
  width:100%;text-align:left;
  font:inherit;font-size:clamp(14px,1.85vw,17px);
  padding:13px 22px;
  background:var(--paper);color:var(--ink);
  border:0;border-top:var(--line) solid var(--ink);
  cursor:pointer;line-height:1.5;
  transition:background .12s,color .12s;
}
.choice:hover,.choice:focus-visible{background:var(--ink);color:var(--paper);outline:0}
.choice .num{
  flex:0 0 auto;font-size:11px;border:2px solid currentColor;
  width:20px;height:20px;display:grid;place-items:center;transform:translateY(-1px)
}
.choice .lb{flex:0 0 auto;font-weight:600}
.choice .sub{font-size:12.5px;opacity:.62;margin-left:auto;text-align:right;max-width:52%}
.choice:hover .sub{opacity:.8}
.choice.dim .lb{opacity:.5;text-decoration:line-through 1px}

/* ── 타이틀 ────────────────────────────────────────── */
#screen.titling #textbox{display:none}
#screen.titling #hud{display:none}
#title-screen{display:none;position:absolute;inset:0;z-index:20;background:var(--paper)}
#title-screen.on{display:block}
#title-art{position:absolute;inset:0}
/* 제목이 얹히는 위쪽에만 먹 스크림 — 밝은 문간 위에서도 글자가 읽히게 */
#title-screen::before{
  content:"";position:absolute;left:0;right:0;top:0;height:52%;z-index:1;
  background:linear-gradient(180deg,
    rgba(11,10,9,.92) 0%,
    rgba(11,10,9,.86) 34%,
    rgba(11,10,9,.62) 62%,
    rgba(11,10,9,0) 100%);
  pointer-events:none;
}
#title-art svg,#title-art img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
#title-copy{
  position:absolute;left:0;right:0;top:2.6%;z-index:2;
  text-align:center;padding:0 24px;
  color:var(--paper);
  text-shadow:0 2px 10px rgba(11,10,9,.95),0 0 26px rgba(11,10,9,.75);
}
#title-copy .jp{font-size:13px;letter-spacing:1.1em;opacity:.66;margin-left:1.1em}
#title-copy h1{
  font-size:clamp(30px,5.6vw,54px);letter-spacing:.12em;margin:.12em 0 .12em;
  font-weight:900;
}
#title-copy .sub{font-size:clamp(12px,1.7vw,15px);letter-spacing:.44em;opacity:.78;margin-left:.44em}
#title-copy .tag{
  margin-top:1.1em;font-size:12.5px;line-height:1.85;opacity:.86;
}
#title-stats{
  margin-top:1.1em;font-size:12.5px;letter-spacing:.06em;opacity:.72;
}
#title-stats:empty{display:none}
#title-screen ~ #choices,#title-screen.on ~ #choices{position:relative;z-index:21}

/* ── 장부 ──────────────────────────────────────────── */
#ledger{
  display:none;position:fixed;inset:0;z-index:60;
  background:rgba(11,10,9,.9);
  overflow:auto;padding:24px;
}
#ledger.on{display:block}
#ledger-body{
  max-width:940px;margin:0 auto;background:var(--paper);
  border:5px solid var(--ink);padding:28px 30px 40px;
}
#ledger-body h2{font-size:26px;letter-spacing:.1em;border-bottom:var(--line) solid var(--ink);padding-bottom:8px;margin-bottom:16px}
#ledger-body h2 small{font-size:13px;opacity:.6;letter-spacing:.3em;margin-left:8px}
#ledger-body h3{
  font-size:16px;margin:26px 0 10px;letter-spacing:.14em;
  border-left:7px solid var(--ink);padding-left:10px
}
#ledger-body h3 small{font-weight:400;opacity:.6;font-size:12px;margin-left:8px}
.lrow{font-size:14px;line-height:2;border-bottom:1px dashed rgba(18,16,14,.3)}
.lrow b{display:inline-block;min-width:118px;letter-spacing:.08em}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:8px}
.cell{border:2px solid var(--ink);padding:8px 10px;font-size:12.5px;line-height:1.6;min-height:62px}
.cell b{display:block;font-size:13.5px;margin-bottom:3px}
.cell i{font-style:normal;opacity:.72}
.cell.lock{opacity:.32;background:repeating-linear-gradient(45deg,rgba(18,16,14,.06) 0 5px,transparent 5px 10px)}
.jl{border-top:2px solid var(--ink)}
.jrow{font-size:13.5px;padding:6px 2px;border-bottom:1px solid rgba(18,16,14,.22)}
.jrow b{margin-right:10px}
#ledger-body .close{
  display:block;margin:26px auto 0;font:inherit;font-size:14px;
  border:var(--line) solid var(--ink);background:var(--paper);color:var(--ink);
  padding:8px 26px;cursor:pointer;letter-spacing:.1em
}
#ledger-body .close:hover{background:var(--ink);color:var(--paper)}

/* ── 좁은 화면 ─────────────────────────────────────── */
@media (max-width:640px){
  #hud{font-size:11px;gap:8px;padding:7px 10px}
  #hud-vis .v .bar{width:36px}
  #textbox{padding:18px 16px 20px;min-height:118px}
  .choice{padding:12px 14px}
  .choice .sub{display:none}
}
@media (max-height:560px){
  #text{line-height:1.62;min-height:2.9em}
  #textbox{min-height:104px}
}