@font-face{font-family:"Galmuri11";font-weight:400;font-style:normal;font-display:swap;src:url("fonts/Galmuri11.woff2") format("woff2")}
@font-face{font-family:"Galmuri11";font-weight:700;font-style:normal;font-display:swap;src:url("fonts/Galmuri11-Bold.woff2") format("woff2")}
/* 0번째 미궁 공용 스타일. 흑백 단색, 텍스트 우선.
   layout: 왼쪽은 1인칭 석벽 시야와 서술, 오른쪽은 벽·소지품·수첩. 흑백 단색, 텍스트 우선 */
:root{
  color-scheme:dark;
  --void:#050505;
  --stone:#0f0f0e;
  --rule:#2b2a27;
  --ash:#87857f;
  --bone:#e8e5dd;
  --glow:#ffffff;
  --f-carve:"Galmuri11","Galmuri",ui-monospace,monospace;
  --f-prose:"Galmuri11","Galmuri",ui-monospace,monospace;
  --f-ui:"Galmuri11","Galmuri",ui-monospace,monospace;
  --f-hand:"Galmuri11","Galmuri",ui-monospace,monospace;
}
html,body{height:100%}
body{background:var(--void);color:var(--bone);font-family:var(--f-ui);font-size:16px;line-height:1.7;-webkit-font-smoothing:none;font-smooth:never;word-break:keep-all;overflow-wrap:break-word}
h1,h2,h3,h4,.brand,.count,.carve,.tele,.btn.solid{font-weight:700!important}
*{box-sizing:border-box}
button,input,textarea{font:inherit;color:inherit}
#app{max-width:1180px;margin:0 auto;padding-block:12px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.bar{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--rule);padding-bottom:10px;margin-bottom:16px}
.brand{font-family:var(--f-carve);font-size:22px;letter-spacing:.12em}
.stats{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:16px;color:var(--ash);font-variant-numeric:tabular-nums}
.stats b{color:var(--bone);font-weight:400}
.hp{letter-spacing:1px;color:var(--bone)}
.lbl{font-size:14px;letter-spacing:.18em;color:var(--ash);text-transform:uppercase}
.btn{background:transparent;border:1px solid var(--rule);padding:7px 12px;cursor:pointer;border-radius:0;transition:background .12s,color .12s}
.btn:hover{border-color:var(--ash)}
.btn:focus-visible,textarea:focus-visible,input:focus-visible{outline:1px solid var(--glow);outline-offset:2px}
.btn.solid{background:var(--bone);color:var(--void);border-color:var(--bone)}
.btn.solid:hover{background:var(--glow)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.sm{padding:3px 8px;font-size:15px}
input[type=text],textarea{background:var(--stone);border:1px solid var(--rule);padding:8px 10px;width:100%;border-radius:0}
textarea{resize:vertical}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* title */
.title{display:grid;gap:28px;padding-block:24px}
.title h1{font-family:var(--f-carve);font-weight:700;font-size:clamp(44px,10vw,88px);line-height:1.1;margin:0;letter-spacing:.02em;text-wrap:balance}
.title h1 small{display:block;font-family:var(--f-ui);font-size:16px;letter-spacing:.3em;color:var(--ash);margin-top:14px}
.lede{font-family:var(--f-prose);font-size:19px;max-width:60ch;color:var(--bone);margin:0}
.rules{display:grid;gap:22px;max-width:64ch;margin:0;padding:0 0 0 2.2em;counter-reset:rule;list-style:none}
.rules li{position:relative;font-size:16px;line-height:1.85;color:var(--ash);counter-increment:rule}
.rules li::before{content:counter(rule)".";position:absolute;left:-2.2em;top:0;color:var(--bone);font-weight:700}
.rules li b{display:block;color:var(--bone);font-weight:700;margin-bottom:2px}
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.ledger h3{font-family:var(--f-carve);font-weight:400;font-size:18px;margin:0 0 8px;border-bottom:1px solid var(--rule);padding-bottom:6px}
.grave{padding:8px 0;border-bottom:1px dashed var(--rule);font-size:16px}
.grave .nm{color:var(--bone)}
.grave .cs{color:var(--ash)}
.grave .lw{font-family:var(--f-hand);font-size:18px;line-height:1.5;color:var(--bone);display:block;margin-top:2px}
.count{font-family:var(--f-carve);font-size:40px;line-height:1}
.counts{display:flex;flex-wrap:wrap;gap:28px}
.counts div{display:grid;gap:4px}
.empty{color:var(--ash);font-size:16px;font-style:normal}

/* explore */
.explore{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:20px}
@media (max-width:860px){.explore{grid-template-columns:minmax(0,1fr)}}
.view{display:grid;gap:12px;min-width:0}
.cvwrap{position:relative;border:1px solid var(--rule);background:#000}
canvas#cv{display:block;width:100%;height:auto;aspect-ratio:16/10;max-width:100%}
.compass{position:absolute;top:8px;left:10px;font-size:15px;letter-spacing:.2em;color:var(--ash)}
.ring{position:absolute;bottom:8px;left:10px;right:10px;font-family:var(--f-prose);font-size:16px;color:var(--ash);text-align:center}
.desc{font-family:var(--f-prose);font-size:19px;line-height:1.75;margin:0;min-height:3.5em}
.here{display:grid;gap:10px}
.box{border:1px solid var(--rule);padding:12px 14px;display:grid;gap:8px;min-width:0}
.box.alert{border-color:var(--bone)}
.box h4{margin:0;font-family:var(--f-carve);font-weight:400;font-size:17px}
.box p{margin:0;font-family:var(--f-prose);font-size:18px}
.log{display:grid;gap:2px;font-size:16px;color:var(--ash);border-top:1px solid var(--rule);padding-top:8px}
.log div:first-child{color:var(--bone)}
.side{display:grid;gap:16px;align-content:start;min-width:0}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:330px}
.pad .btn{padding:12px 4px;font-size:16px}
.pad .fw{grid-column:2}
.pad .bk{grid-column:2}
.hint{font-size:14px;color:var(--ash)}
.wall{display:grid;gap:8px}
.carve{font-family:var(--f-carve);font-size:18px;line-height:1.5;border-left:2px solid var(--bone);padding-left:10px}
.carve.false{border-left-style:dashed}
.carve small{display:block;font-family:var(--f-ui);font-size:14px;color:var(--ash);letter-spacing:.1em}
.scratch{font-family:var(--f-hand);font-size:19px;line-height:1.5;letter-spacing:.02em;border-left:1px dashed var(--ash);padding-left:10px;color:var(--bone);word-break:keep-all;overflow-wrap:anywhere}
.scratch small{font-family:var(--f-ui);font-size:14px;color:var(--ash);margin-left:6px}
.slip{background:var(--bone);color:var(--void);padding:10px 12px;font-family:var(--f-hand);font-size:18px;line-height:1.6;overflow-wrap:anywhere;transform:rotate(-.6deg)}
.slip small{display:block;font-family:var(--f-ui);font-size:14px;opacity:.65}
.inv{display:grid;gap:4px}
.item{display:flex;gap:8px;align-items:center;justify-content:space-between;border-bottom:1px dashed var(--rule);padding:4px 0;font-size:16px}
.item span{min-width:0}
.journal textarea{font-family:var(--f-hand);font-size:17px;line-height:1.6;min-height:160px;background:var(--stone)}

/* combat */
.foe{display:grid;gap:10px}
.foe h2{margin:0;font-family:var(--f-carve);font-weight:400;font-size:28px;letter-spacing:.06em}
.tele{background:var(--bone);color:var(--void);padding:10px 12px;font-family:var(--f-prose);font-size:19px;font-weight:700}
.parts{display:grid;gap:6px}
.part{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;border:1px solid var(--rule);padding:6px 10px}
.part .st{font-size:15px;color:var(--ash)}
.acts{display:flex;flex-wrap:wrap;gap:8px}

/* death */
.dead{display:grid;gap:18px;padding-block:20px;max-width:640px}
.dead h2{font-family:var(--f-carve);font-weight:700;font-size:clamp(33px,8vw,66px);margin:0;line-height:1}
.dead p{font-family:var(--f-prose);font-size:19px;margin:0}
.lastw{font-family:var(--f-hand);font-size:19px;min-height:90px}
.end p{font-family:var(--f-prose);font-size:20px;line-height:1.9}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.flash{animation:fl .35s}
@keyframes fl{0%{background:var(--bone)}100%{background:#000}}

:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
a{color:var(--bone)}
.pre{white-space:pre-wrap}
.brand a{text-decoration:none}
.nav{display:flex;gap:16px;font-size:16px}
.nav a{color:var(--ash);text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--bone)}
/* home */
.hero{display:grid;gap:22px;padding-block:48px 32px}
.hero h1{font-size:clamp(44px,11vw,110px);line-height:1.05;margin:0;letter-spacing:.02em;text-wrap:balance}
.hero h1 small{display:block;font-size:16px;letter-spacing:.3em;color:var(--ash);margin-top:16px;font-weight:400}
.hero .lede{font-size:19px;line-height:1.9}
a.btn{display:inline-block;text-decoration:none}
.sect{display:grid;gap:14px;padding-block:28px;border-top:1px solid var(--rule)}
.sect h2{margin:0;font-size:22px}
.carves{display:grid;gap:14px;max-width:60ch}
.foot{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;border-top:1px solid var(--rule);margin-top:32px;padding-top:14px;font-size:15px;color:var(--ash)}
.foot code{font-family:inherit;color:var(--bone)}
.item>.row{flex-wrap:nowrap;flex-shrink:0}
.lede{white-space:pre-line;max-width:none}