/* 묵야행 화면 스타일 — 한지(질감) 위에 먹선과 붉은 낙관.
   설계 원칙: 상자 속 상자를 쓰지 않는다. 정보는 종이 한 장 위에 놓고, 구분은 붓으로 그은 줄로 하며, 붉은색은 낙관(도장)에만 쓴다.
   떨리는 선은 index.html 맨 위 SVG 필터(#rough, #rough-s, #ink)를 ::before에 걸어 만든다. 글자는 필터를 받지 않아 또렷하다. */
:root {
  --paper: #e9e1cf; --paper2: #f3edde; --paper3: #f8f3e4; --ink: #1a1a1a; --ink2: #4a443a; --seal: #b3261e; --seal2: #7e1a14; --line: rgba(26, 26, 26, .16); --gold: #b58b2a; --jade: #3e5e4c; --tex: none;
  --serif: "Noto Serif KR", "Noto Serif CJK KR", "Source Han Serif K", "Batang", "Songti SC", "SimSun", serif;
  /* 붓으로 그은 줄: 양 끝이 가늘고 가운데가 굵다. mask로 쓰면 색은 background가 정한다 */
  --brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M0 5.2C22 2.2 62 5.4 112 3C150 1.2 180 3.2 200 4.4L197 5.2C170 6.2 140 7.4 100 6.6C60 5.8 26 7.6 0 5.2Z'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--paper); color: var(--ink); font-family: var(--serif); touch-action: none; user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
small { font-size: .8em; }
kbd { font: 700 11px/1 var(--serif); padding: 2px 5px; border: 1px solid currentColor; border-radius: 3px; opacity: .72; }
.rule { display: block; height: 6px; background: var(--ink); opacity: .8; -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
.rule.seal { background: var(--seal); opacity: .9; }

/* ---------- 재질: 종이 한 장 ---------- */
.panel, .tile, .bar, .clock, .icon, .slot, .chip { background-color: var(--paper2); background-image: linear-gradient(rgba(255, 252, 242, .5), rgba(255, 252, 242, .5)), var(--tex); background-size: auto, 256px; } /* 질감 위에 옅게 덮어 종이 조각이 배경보다 밝아 보이게 한다 */
.panel, .tile, .bar, .clock, .icon, .slot, .btn { position: relative; isolation: isolate; }
.panel::before, .tile::before, .clock::before, .icon::before, .slot::before { content: ""; position: absolute; inset: 0; border: 2px solid rgba(26, 26, 26, .88); filter: url(#rough-s); z-index: -1; pointer-events: none; }
.panel::before { inset: -2px; border-width: 2.5px; filter: url(#rough); }
.bar::after { content: ""; position: absolute; inset: -1px; border: 1.5px solid rgba(26, 26, 26, .88); filter: url(#rough-s); z-index: 2; pointer-events: none; }

/* ---------- 버튼: 글자 밑에 붓줄. 주된 버튼만 붉은 낙관 ---------- */
.btn { font: inherit; font-size: 16px; letter-spacing: .2em; padding: 10px 22px 15px; color: var(--ink); background: none; border: 0; cursor: pointer; text-decoration: none; display: inline-block; text-align: center; transition: transform .12s; }
.btn::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 7px; height: 5px; background: var(--ink); opacity: .75; -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; transform-origin: left center; transition: transform .16s, opacity .16s; }
.btn small { display: block; font-size: 10px; letter-spacing: .42em; color: var(--ink2); margin-bottom: 1px; }
.btn:hover::after, .btn:focus-visible::after { opacity: 1; transform: scaleY(1.7) rotate(-.7deg); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; }
.btn.primary { color: var(--paper2); padding: 11px 32px 12px; }
.btn.primary::before { content: ""; position: absolute; inset: 0; background: var(--seal); filter: url(#rough-s); z-index: -1; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16); transition: background .12s; }
.btn.primary::after { display: none; }
.btn.primary small { color: rgba(243, 237, 222, .78); }
.btn.primary:hover::before, .btn.primary:focus-visible::before { background: #c8332a; }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.btn:disabled:hover::after { transform: none; opacity: .75; }

/* ---------- 아이콘: 무공은 붉은 낙관, 패시브는 먹 원, 진화는 금빛 ---------- */
.ico { display: inline-grid; place-items: center; width: 42px; height: 42px; font: 900 24px/1 var(--serif); font-style: normal; color: var(--paper2); flex: none; position: relative; }
.ico.w { background: var(--seal); transform: rotate(-3deg); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16), 0 2px 0 rgba(0, 0, 0, .15); border-radius: 2px; }
.ico.p, .ico.h { background: #222; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.ico.evo { background: #2a2218; color: #ecc972; border: 2px solid var(--gold); border-radius: 3px; box-shadow: 0 0 10px rgba(181, 139, 42, .5); }
.ico.lg { width: 58px; height: 58px; font-size: 34px; }
.ico.sm { width: 30px; height: 30px; font-size: 18px; }

/* ---------- 입력 부품: 슬라이더·체크·고르기를 먹과 낙관으로 ---------- */
input[type=range] { -webkit-appearance: none; appearance: none; width: 168px; height: 24px; background: transparent; cursor: pointer; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; background: var(--ink); -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
input[type=range]::-moz-range-track { height: 6px; background: var(--ink); -moz-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 18px; margin-top: -6px; background: var(--seal); border: 0; border-radius: 2px; transform: rotate(-5deg); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .3); }
input[type=range]::-moz-range-thumb { width: 16px; height: 18px; background: var(--seal); border: 0; border-radius: 2px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .3); }
input[type=range]:focus-visible { outline: 2px dashed rgba(179, 38, 30, .6); outline-offset: 2px; }
input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 0; border: 2px solid var(--ink); background: rgba(255, 252, 242, .6); cursor: pointer; position: relative; flex: none; border-radius: 2px; }
input[type=checkbox]:checked { background: var(--seal); border-color: var(--seal2); }
input[type=checkbox]:checked::after { content: ""; position: absolute; left: 6px; top: 1px; width: 6px; height: 12px; border: solid var(--paper2); border-width: 0 3px 3px 0; transform: rotate(40deg); }
input[type=checkbox]:focus-visible { outline: 2px dashed rgba(179, 38, 30, .6); outline-offset: 2px; }
.segs { display: inline-flex; }
.seg { font: inherit; font-size: 13px; padding: 6px 14px; border: 1.5px solid rgba(26, 26, 26, .7); background: transparent; color: var(--ink); cursor: pointer; margin-left: -1.5px; line-height: 1.2; }
.seg:first-child { margin-left: 0; }
.seg small { display: block; font-size: 9px; opacity: .65; }
.seg.on { background: var(--ink); color: var(--paper2); }
.seg:focus-visible { outline: 2px dashed rgba(179, 38, 30, .6); outline-offset: 2px; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.bars { position: absolute; left: max(12px, env(safe-area-inset-left)); top: 10px; width: min(30vw, 270px); }
.hpline { display: flex; align-items: center; gap: 8px; }
.lab { flex: none; width: 24px; height: 24px; display: grid; place-items: center; background: var(--seal); color: var(--paper2); font: 900 15px/1 var(--serif); font-style: normal; transform: rotate(-4deg); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); filter: url(#rough-s); }
.hpline .bar { flex: 1; }
.bar { height: 15px; margin-bottom: 6px; background-color: rgba(243, 237, 222, .8); overflow: visible; }
.bars > .bar { margin-left: 32px; }
.bar i { display: block; height: 100%; width: 100%; background: linear-gradient(180deg, #2c2c2c, #111); transition: width .12s; }
.bar.hp i { background: repeating-linear-gradient(100deg, #1c1c1c 0 6px, #262626 6px 9px); }
.bar.hp.low i { background: repeating-linear-gradient(100deg, var(--seal) 0 6px, #c53a30 6px 9px); }
.bar.xp { height: 7px; margin-bottom: 4px; }
.bar.xp i { background: linear-gradient(90deg, #6a8a76, var(--jade)); width: 0; }
.bar span { position: absolute; left: 7px; top: 0; font-size: 10px; line-height: 15px; color: var(--paper2); mix-blend-mode: difference; z-index: 3; }
.stat { margin-left: 32px; font-size: 12px; line-height: 1.45; letter-spacing: .04em; text-shadow: 0 0 6px var(--paper), 0 0 3px var(--paper); }
.stat span { display: inline; }
.stat span + span::before { content: "·"; margin: 0 6px; color: var(--seal); }
.clock { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; padding: 5px 20px 8px 10px; background-color: rgba(243, 237, 222, .92); }
.cseal { grid-row: 1; width: 30px; height: 30px; display: grid; place-items: center; background: var(--seal); color: var(--paper2); font: 900 19px/1 var(--serif); font-style: normal; transform: rotate(-4deg); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .18); filter: url(#rough-s); }
.ctext { grid-row: 1; text-align: left; line-height: 1.2; }
.clock b { display: block; font-size: 15px; letter-spacing: .12em; white-space: nowrap; }
.clock span { font-size: 12px; color: var(--ink2); letter-spacing: .04em; }
#bossbar { position: absolute; left: 50%; top: 66px; transform: translateX(-50%); width: min(46vw, 360px); text-align: center; }
#bossbar b { display: block; font-size: 14px; letter-spacing: .3em; margin-bottom: 4px; text-shadow: 0 0 6px var(--paper), 0 0 3px var(--paper); }
#bossbar b small { font-size: 11px; letter-spacing: .1em; color: var(--ink2); margin-left: 8px; }
.bar.boss { height: 10px; margin: 0; }
.bar.boss i { background: repeating-linear-gradient(100deg, var(--seal) 0 6px, #c53a30 6px 9px); }
#bossbar.final .bar.boss { height: 14px; }
#bossbar.final b { color: var(--seal); font-size: 16px; }
.icon { pointer-events: auto; position: absolute; right: max(12px, env(safe-area-inset-right)); top: 8px; width: 38px; height: 38px; border: 0; padding: 0; color: var(--ink); cursor: pointer; background-color: rgba(243, 237, 222, .92); font: 900 18px/1 var(--serif); }
.icon i { font-style: normal; display: block; }
.icon:hover::before { border-color: var(--seal); }
#btn-mute { right: calc(max(12px, env(safe-area-inset-right)) + 46px); }
#btn-mute.off i { color: var(--ink2); opacity: .55; }
#btn-mute.off::after { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 3px; background: var(--seal); transform: rotate(-38deg); }
.slots { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: 10px; display: flex; flex-direction: column; gap: 7px; }
.slots > div { display: flex; gap: 7px; flex-wrap: wrap; max-width: 92vw; }
.slot { width: 40px; height: 40px; display: grid; place-items: center; background-color: rgba(243, 237, 222, .86); }
.slot .ico { transform: none; box-shadow: none; }
.slot u { position: absolute; right: -4px; bottom: -5px; z-index: 2; text-decoration: none; font-size: 10px; font-weight: 700; line-height: 1; color: var(--paper2); background: var(--ink); padding: 2px 4px 1px; border-radius: 2px; }
.slot.p::before { border-style: dashed; }
.slot.evo::before { border-color: var(--gold); }

/* 시계 아래 진행 막대: 시진 12칸의 경계(옅게)와 우두머리·묵귀·최종 보스가 나오는 때(붉게) */
.clock .tl { grid-column: 1 / -1; position: relative; height: 4px; margin: 6px 0 0 -2px; background: rgba(26, 26, 26, .16); }
.clock .tl i { display: block; height: 100%; background: var(--ink); width: 0; }
.clock .tl .tk { display: block; font-style: normal; position: absolute; top: -2px; width: 1px; height: 8px; background: rgba(26, 26, 26, .35); transform: translateX(-.5px); }
.clock .tk.boss { top: -4px; width: 2px; height: 12px; background: var(--seal); }
.clock .tk.mukgwi { top: -4px; width: 2px; height: 12px; background: #3a3a3a; }
.clock .tk.final { top: -5px; width: 3px; height: 14px; background: var(--seal); }

/* ---------- 조이스틱·배너 ---------- */
#joy { position: fixed; width: 96px; height: 96px; margin: -48px 0 0 -48px; border: 2px solid rgba(26, 26, 26, .35); border-radius: 50%; pointer-events: none; }
#joy i { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(26, 26, 26, .55); }
#banner { position: fixed; left: 50%; top: 20%; transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0; transition: opacity .5s; text-shadow: 0 0 12px var(--paper), 0 0 5px var(--paper), 0 0 2px var(--paper); max-width: 94vw; }
#banner.on { opacity: 1; }
#banner::before { content: ""; display: block; height: 6px; width: 190px; margin: 0 auto 8px; background: var(--ink); -webkit-mask: var(--brush) center / 100% 100% no-repeat; mask: var(--brush) center / 100% 100% no-repeat; }
#banner b { display: block; font-size: 32px; letter-spacing: .16em; }
#banner span { font-size: 13px; color: var(--ink2); }
#banner.realm b { font-size: 46px; color: var(--seal); }
#banner.realm::before { background: var(--seal); }

/* ---------- 화면(공통) ---------- */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(233, 225, 207, .82); padding: 16px; overflow: auto; overflow-x: hidden; }
.panel { width: min(92vw, 440px); padding: 26px 28px 24px; text-align: center; box-shadow: 0 18px 40px rgba(26, 26, 26, .24); }
.panel.wide { width: min(96vw, 800px); }
h2 { margin: 0 0 8px; font-size: 26px; letter-spacing: .12em; }
h2 small { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 400; color: var(--seal); letter-spacing: .6em; text-indent: .6em; }
.lead { margin: 12px 0 14px; font-size: 16px; line-height: 1.7; }
.sub { margin: 0 0 14px; font-size: 14px; color: var(--ink2); }
.row { display: flex; gap: 10px; justify-content: center; align-items: center; margin: 14px 0 0; font-size: 14px; flex-wrap: wrap; }
.hint { margin: 12px 0 0; font-size: 12px; color: var(--ink2); }
.hint kbd { margin: 0 2px; }
.errmsg { margin: 4px 0 10px; font-size: 12px; line-height: 1.6; color: var(--seal); word-break: break-all; }
.errmsg:empty { display: none; }
.kv, .stats, .pstats { margin: 0; }
.kv div, .stats div, .pstats div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line); }
.kv dt, .stats dt, .pstats dt { color: var(--ink2); }
.kv dd, .stats dd, .pstats dd { margin: 0; font-weight: 700; }
/* 긴 창은 위가 잘리지 않고 화면 전체가 스크롤되게 */
#pause, #levelup, #result, #help, #records, #reward, #skills { align-items: flex-start; }
#pause .panel, #levelup .lu, #result .panel, #help .panel, #records .panel, #reward .panel { margin: auto; }
#skills { z-index: 30; }
#help, #records { z-index: 25; }

/* ---------- 제목 ---------- */
.scene { background: var(--paper); padding: 0; overflow: hidden; }
#title-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand { position: absolute; right: clamp(14px, 6vw, 96px); top: clamp(14px, 6vh, 70px); display: grid; grid-template-columns: auto auto; gap: 10px 16px; justify-items: center; pointer-events: none; }
.vtitle { grid-column: 2; grid-row: 1 / span 2; margin: 0; writing-mode: vertical-rl; text-orientation: upright; font-weight: 900; font-size: clamp(60px, 15vmin, 150px); line-height: 1.03; letter-spacing: .05em; color: #141414; -webkit-text-stroke: 2px #141414; text-shadow: 0 0 12px rgba(26, 26, 26, .3); filter: url(#ink); }
.vsub { grid-column: 1; grid-row: 1; margin: 10px 0 0; writing-mode: vertical-rl; font-size: clamp(12px, 2.4vmin, 19px); letter-spacing: .5em; color: var(--ink2); }
.seal { grid-column: 1; grid-row: 2; align-self: end; width: 46px; height: 46px; display: grid; place-items: center; background: var(--seal); color: var(--paper2); font: 900 28px/1 var(--serif); transform: rotate(-5deg); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16); filter: url(#rough-s); }
/* 메뉴: 상자 없이 글자만. 입산이 가장 크고, 나머지는 붓줄 아래 글자 */
.menu { position: absolute; right: clamp(14px, 6vw, 96px); bottom: clamp(14px, 5vh, 46px); display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: clamp(150px, 19vw, 210px); text-shadow: 0 0 10px rgba(243, 237, 222, .9), 0 0 4px rgba(243, 237, 222, .8); }
.menu { isolation: isolate; }
.menu::before { content: ""; position: absolute; inset: -70px -110px -60px -120px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse closest-side at 56% 56%, rgba(243, 237, 222, .95) 0 38%, rgba(243, 237, 222, .6) 62%, rgba(243, 237, 222, 0) 100%); } /* 먹산 위에서도 글자가 읽히도록 옅은 안개를 깐다 */
.menu .btn { display: block; text-align: right; padding: 7px 8px 13px 12px; font-size: 17px; letter-spacing: .3em; }
.menu .btn::after { left: 8px; right: 8px; bottom: 6px; opacity: .55; }
.menu .btn small { display: inline; margin: 0 10px 0 0; letter-spacing: .3em; vertical-align: 1px; }
.menu .btn.primary { text-align: center; font-size: 24px; letter-spacing: .5em; padding: 14px 8px 14px 20px; margin-bottom: 8px; text-shadow: none; transform: rotate(-1.2deg); }
.menu .btn.primary small { display: block; margin: 0 0 2px; }
.menu .btn.primary:hover { transform: rotate(-1.2deg) translateY(-2px); }
.menu .more { display: flex; justify-content: flex-end; gap: 14px; margin-top: 8px; padding-right: 10px; }
.menu .more a { font-size: 12px; letter-spacing: .18em; color: var(--ink2); text-decoration: none; border-bottom: 1px solid rgba(74, 68, 58, .5); padding-bottom: 1px; }
.menu .more a:hover { color: var(--seal); border-color: var(--seal); }
.best { position: absolute; left: 16px; bottom: 12px; margin: 0; font-size: 12px; color: rgba(243, 237, 222, .9); letter-spacing: .08em; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); pointer-events: none; }

/* ---------- 인물 고르기: 왼쪽 문파 목록 · 가운데 인물 · 오른쪽 설명 ---------- */
#select { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 10px; padding: clamp(10px, 2.2vw, 26px); background-color: var(--paper); background-image: radial-gradient(circle at 8% -6%, rgba(179, 38, 30, .13), transparent 42%), var(--tex); }
.sel-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.sel-head h2 { margin: 0; font-size: clamp(22px, 3.6vw, 30px); letter-spacing: .14em; }
.sel-head h2 small { display: inline-block; margin: 0 14px 0 0; font-size: .5em; letter-spacing: .5em; text-indent: 0; vertical-align: 3px; }
.sel-head p { margin: 0; font-size: 13px; color: var(--ink2); }
.sel-head .rule { flex: 1 0 100%; margin-top: 2px; }
.sel-body { display: grid; grid-template-columns: minmax(250px, 300px) 1fr; gap: 22px; flex: 1 0 auto; align-items: start; } /* 내용보다 작게 줄지 않는다: 화면이 낮으면 화면 전체가 스크롤된다 */
.sel-grid { display: grid; grid-template-columns: 1fr; gap: 10px; align-content: start; }
.tile { font: inherit; color: var(--ink); border: 0; padding: 8px 14px 8px 8px; cursor: pointer; display: grid; grid-template-columns: 62px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; transition: transform .12s; }
.tile canvas { grid-row: 1 / span 2; width: 62px; height: 76px; display: block; }
.tile b { align-self: end; font-size: 17px; letter-spacing: .08em; }
.tile small { align-self: start; font-size: 12px; color: var(--ink2); letter-spacing: .06em; }
.tile .emb { position: absolute; right: 10px; top: 6px; font: 900 22px/1 var(--serif); font-style: normal; color: rgba(179, 38, 30, .85); }
.tile:hover { transform: translateX(4px); }
.tile::after { content: ""; position: absolute; left: -9px; top: 50%; width: 5px; height: 0; background: var(--seal); transition: height .14s; transform: translateY(-50%); }
.tile.sel::before { border-color: var(--seal); border-width: 3px; }
.tile.sel::after { height: 56%; }
.tile.sel { box-shadow: 0 8px 18px rgba(26, 26, 26, .2); transform: translateX(6px); }
.tile.locked { color: var(--ink2); background-color: #e0d8c4; }
.tile.locked .emb { color: rgba(26, 26, 26, .3); }
.tile .feng { position: absolute; right: 8px; bottom: 8px; z-index: 2; text-decoration: none; width: 26px; height: 26px; display: grid; place-items: center; background: rgba(179, 38, 30, .88); color: var(--paper2); font: 900 17px/1 var(--serif); transform: rotate(9deg); filter: url(#rough-s); }
.tile .meter.sm { position: absolute; left: 82px; right: 44px; bottom: 9px; height: 4px; }
.tile.locked { padding-bottom: 16px; }
/* 묶음 제목(구파일방·사대세가)과 아직 안 만든 문파의 작은 칸 */
.sel-grid .grp { grid-column: 1 / -1; margin: 10px 0 0; padding-bottom: 6px; font-size: 13px; letter-spacing: .34em; color: var(--seal); position: relative; }
.sel-grid .grp:first-child { margin-top: 0; }
.sel-grid .grp::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--seal); opacity: .55; -webkit-mask: var(--brush) left center / 100% 100% no-repeat; mask: var(--brush) left center / 100% 100% no-repeat; }
.tile.sil { padding: 5px 12px 5px 6px; grid-template-columns: 40px 1fr; column-gap: 10px; }
.tile.sil canvas { width: 40px; height: 48px; }
.tile.sil b { font-size: 15px; } .tile.sil small { font-size: 11px; } .tile.sil .emb { font-size: 17px; top: 5px; }
.tile.sil .feng { display: none; }
.tile.sil.locked { padding-bottom: 5px; }
@media (min-width: 861px) { .sel-grid { max-height: calc(100vh - 215px); overflow-y: auto; padding: 4px 10px 6px 14px; margin: -4px 0 -6px -14px; } }
.sel-detail { width: auto; text-align: left; display: grid; grid-template-columns: minmax(170px, 36%) 1fr; gap: 22px; padding: 22px 26px 22px 18px; }
.hero-view { position: relative; min-height: 340px; }
#sel-hero { position: absolute; inset: 0; width: 100%; height: 100%; }
.info h3 { margin: 0; font-size: 28px; letter-spacing: .08em; }
.info h3 span { font-size: 13px; color: var(--ink2); margin-left: 10px; letter-spacing: .15em; font-weight: 400; }
.tags { margin: 8px 0 10px; }
.tags em { font-style: normal; font-size: 12px; color: var(--paper2); background: var(--ink); padding: 2px 9px; margin-right: 6px; letter-spacing: .08em; }
.tags em.lk { background: var(--seal); }
.blurb { margin: 6px 0 12px; font-size: 14px; line-height: 1.8; }
.blurb.dim { color: var(--ink2); }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin: 8px 0; font-size: 13px; }
.kv dd { display: flex; align-items: center; gap: 5px; }
.info h4 { margin: 14px 0 6px; font-size: 13px; letter-spacing: .1em; }
.info h4 small { color: var(--ink2); font-weight: 400; margin-left: 8px; letter-spacing: 0; }
.learn { display: flex; flex-wrap: wrap; gap: 6px; }
.lockbox { padding: 10px 0 2px; display: grid; gap: 6px; font-size: 13px; border-top: 1px solid rgba(179, 38, 30, .45); }
.lockbox b { color: var(--seal); letter-spacing: .14em; }
.lockbox em { font-style: normal; color: var(--ink2); font-size: 12px; }
.meter { display: block; height: 8px; background: rgba(26, 26, 26, .12); border: 1px solid rgba(26, 26, 26, .55); }
.meter i { display: block; height: 100%; background: var(--seal); }
.heart { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; font-size: 12px; line-height: 1.65; color: var(--ink2); }
.heart b { display: block; color: var(--ink); font-size: 13px; }
.unlock { margin: 0 0 10px; font-size: 14px; line-height: 1.7; color: var(--seal); }
.unlock:empty { display: none; }
.unlock b { letter-spacing: .1em; }
.sel-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; position: sticky; bottom: -2px; z-index: 5; padding: 14px 0 4px; background: linear-gradient(rgba(233, 225, 207, 0), var(--paper) 26%); }
.sel-opts { display: flex; align-items: center; gap: 12px 28px; flex-wrap: wrap; }
.curse, .lenbox { display: flex; align-items: center; gap: 0; }
.curse > span:first-child, .lenbox > span:first-child { font-size: 13px; letter-spacing: .15em; margin-right: 12px; }
.foot-btns { display: flex; gap: 12px; align-items: center; }
.link { font: inherit; font-size: 13px; letter-spacing: .12em; color: var(--ink2); background: none; border: 0; border-bottom: 1px solid rgba(74, 68, 58, .5); padding: 2px 1px; cursor: pointer; }
.link:hover { color: var(--seal); border-color: var(--seal); }

/* 문파마다 익히는 무공 칩(인물 고르기·멈춤 화면) */
.lc { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; font: inherit; font-size: 12px; color: var(--ink); border: 1px solid rgba(26, 26, 26, .35); border-radius: 3px; background: rgba(255, 252, 242, .55); }
button.lc { cursor: pointer; } button.lc:hover { border-color: var(--seal); }
.lc.evo { border-color: var(--gold); }
.lc b { font-weight: 700; letter-spacing: .02em; }
.lc u { text-decoration: none; color: var(--seal); font-size: 11px; }
.sk-open { margin-top: 12px; padding: 6px 16px 13px; font-size: 14px; }
.sk-open small { display: inline; margin-right: 8px; font-size: 10px; }
.sk-open kbd, #sk-close kbd { margin-left: 6px; }

/* ---------- 레벨업: 족자 세 폭 ---------- */
#levelup { background: radial-gradient(ellipse at center, rgba(233, 225, 207, .72), rgba(233, 225, 207, .9)); }
.lu { width: min(96vw, 860px); text-align: center; }
.lu-head h2 { margin: 0; font-size: 34px; letter-spacing: .22em; text-indent: .22em; }
.lu-head .rule { width: 220px; margin: 8px auto 6px; }
.lu-head .sub { margin: 0 0 22px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 4px; padding: 0 8px; }
.card { position: relative; isolation: isolate; font: inherit; text-align: left; color: var(--ink); border: 0; padding: 34px 18px 26px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-height: 290px; background-color: var(--paper3); background-image: linear-gradient(rgba(255, 252, 242, .45), rgba(255, 252, 242, .45)), var(--tex); background-size: auto, 256px; box-shadow: inset 0 0 0 7px #eee5cf, inset 0 0 0 8px rgba(26, 26, 26, .4), 0 12px 24px rgba(26, 26, 26, .22); transition: transform .16s, box-shadow .16s; overflow: visible; }
.card::before, .card::after { content: ""; position: absolute; left: -9px; right: -9px; height: 12px; background: linear-gradient(#4a3a2a, #1c1510 55%, #2d2217); border-radius: 6px; box-shadow: 0 2px 3px rgba(0, 0, 0, .35); z-index: 3; }
.card::before { top: -7px; }
.card::after { bottom: -7px; }
.card:hover, .card:focus-visible { transform: translateY(-8px); outline: none; box-shadow: inset 0 0 0 7px #f1e8d2, inset 0 0 0 8px var(--seal), 0 18px 28px rgba(26, 26, 26, .28); }
.card > * { position: relative; z-index: 1; }
.card .wm { position: absolute; z-index: 0; right: 4px; bottom: 30px; font: 900 128px/1 var(--serif); font-style: normal; color: rgba(26, 26, 26, .055); pointer-events: none; }
.card .ico { margin-bottom: 4px; }
.card kbd { position: absolute; top: 16px; left: 16px; z-index: 2; text-align: center; width: 20px; height: 20px; line-height: 18px; padding: 0; color: var(--paper2); background: var(--ink); border: 0; border-radius: 3px; opacity: 1; }
.card .new { position: absolute; top: 14px; right: 14px; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; background: var(--seal); color: var(--paper2); font: 900 17px/1 var(--serif); font-style: normal; transform: rotate(6deg); filter: url(#rough-s); }
.card .new.gold { background: var(--gold); color: var(--ink); }
.card small { font-size: 12px; color: var(--seal); letter-spacing: .08em; }
.card.evo-card small { color: #7a5a14; }
.card.fresh small { font-weight: 700; }
.card h3 { margin: 0; font-size: 20px; letter-spacing: .06em; }
.card h3 span { display: block; font-size: 11px; color: var(--ink2); font-weight: 400; margin-top: 1px; letter-spacing: .12em; }
.card p { margin: 4px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink2); }
.card ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 12px; }
.card li { display: flex; justify-content: space-between; gap: 6px; border-bottom: 1px solid var(--line); padding: 2px 0; }
.card li em { font-style: normal; color: var(--seal); font-weight: 700; }
.card.evo-card { box-shadow: inset 0 0 0 7px #f0e4bf, inset 0 0 0 8px var(--gold), 0 12px 24px rgba(26, 26, 26, .22); }
.lu-actions { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin: 30px 0 0; }
.lu-actions .btn { padding: 6px 4px 14px; font-size: 14px; letter-spacing: .12em; }
.lu-actions .btn::after { left: 0; right: 0; }
.lu-actions .btn b { margin: 0 4px; color: var(--seal); font-size: 15px; }
.lu-actions .btn kbd { margin-left: 4px; }
.lu-actions .btn:disabled { opacity: .4; cursor: default; }
.lu-actions .btn.on { color: var(--seal); }
.lu-actions .btn.on::after { background: var(--seal); opacity: 1; }
.cards.banning .card { outline: 2px dashed rgba(179, 38, 30, .7); outline-offset: 5px; cursor: crosshair; }
.cards.banning .card:hover { background-color: #f3dcd4; }
.evo-note { margin: 8px 0 0; padding: 4px 8px; font-size: 12px; line-height: 1.5; color: var(--ink2); border-left: 3px solid rgba(26, 26, 26, .35); background: rgba(26, 26, 26, .05); text-align: left; }
.evo-note.done { color: #5b4311; border-left-color: var(--gold); background: rgba(212, 168, 72, .22); font-weight: 700; }

/* ---------- 멈춤·환경설정 ---------- */
.pause-panel { width: min(96vw, 820px); text-align: left; }
.pause-panel h2 { text-align: center; margin-bottom: 4px; }
.pause-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px 34px; margin-top: 14px; }
.pause-skills { text-align: left; }
.pause-skills h4 { margin: 0 0 6px; font-size: 13px; letter-spacing: .14em; }
.pause-skills h4 + .learn { margin-bottom: 12px; }
.pause-skills h4 small { font-weight: 400; color: var(--ink2); letter-spacing: 0; margin-left: 6px; }
.pause-desc { min-height: 0; margin: 0 0 12px; padding: 6px 10px; font-size: 12px; line-height: 1.6; border-left: 3px solid var(--seal); background: rgba(26, 26, 26, .05); }
.pause-desc:empty { display: none; }
.pause-desc small { color: var(--ink2); }
.pstats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; font-size: 12px; }
.opts { display: flex; flex-direction: column; justify-content: flex-start; }
.opts h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: .14em; }
.opts .row { justify-content: space-between; margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.opts .row.chk { justify-content: flex-start; gap: 10px; border-bottom: 0; }
.pause-extra { margin: 18px 0 0; gap: 22px; }
.pause-btns { margin-top: 10px; gap: 22px; }
#pause.from-title .pause-skills { display: none; }
#pause.from-title .pause-panel { width: min(92vw, 460px); }
#pause.from-title .pause-grid { grid-template-columns: 1fr; }
#pause.from-title #btn-quit { display: none; }
#btn-p-title { display: none; }
#pause.select-menu #btn-p-title { display: inline-block; }
#pause.from-title:not(.select-menu) #btn-p-skills, #pause.from-title:not(.select-menu) .pause-extra { display: none; }

/* ---------- 결과: 왼쪽 기록 · 오른쪽 결과 카드 ---------- */
.panel.result { width: min(96vw, 820px); text-align: left; padding: 28px 30px 24px; }
.rs-grid { display: grid; grid-template-columns: 1fr 220px; gap: 26px; align-items: start; }
.result h2 { font-size: 36px; letter-spacing: .16em; margin: 2px 0 0; }
.result .lead { margin: 6px 0 12px; font-size: 15px; color: var(--ink2); }
.stamp { position: absolute; right: 22px; top: 18px; width: 78px; height: 78px; display: grid; place-items: center; color: var(--paper2); font: 900 28px/1 var(--serif); letter-spacing: -.02em; transform: rotate(-8deg); filter: url(#rough-s); animation: stampIn .55s .2s cubic-bezier(.2, .9, .3, 1.2) both; z-index: 2; }
.stamp.clear { background: var(--seal); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .16); }
.stamp.half { background: #8a5a2a; }
.stamp.dead { background: #161616; border-radius: 47% 53% 45% 55% / 52% 46% 54% 48%; font-size: 36px; }
@keyframes stampIn { from { transform: scale(2.4) rotate(-26deg); opacity: 0; } to { transform: scale(1) rotate(-8deg); opacity: .96; } }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin: 10px 0 4px; font-size: 13px; }
.newrec { margin-left: 6px; padding: 1px 6px; font-style: normal; font-size: 11px; font-weight: 700; color: var(--paper2); background: var(--seal); letter-spacing: .08em; vertical-align: 1px; }
.rs-weapons { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border: 1px solid rgba(26, 26, 26, .5); border-radius: 3px; font-size: 12px; }
.chip u { text-decoration: none; color: var(--seal); font-size: 11px; }
.rs-dmg { margin: 14px 0 2px; }
.rs-dmg:empty { display: none; }
.rs-dmg h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .12em; color: var(--ink2); font-weight: 400; }
.rs-dmg h4 small { margin-left: 6px; letter-spacing: 0; }
.dm { display: grid; grid-template-columns: minmax(96px, 30%) 1fr auto; align-items: center; gap: 8px; padding: 2px 0; font-size: 12px; }
.dm > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; }
.dm > i { display: block; height: 7px; background: rgba(26, 26, 26, .1); }
.dm > i u { display: block; height: 100%; background: var(--ink); -webkit-mask: var(--brush) left center / 100% 100% no-repeat; mask: var(--brush) left center / 100% 100% no-repeat; }
.dm > em { font-style: normal; font-weight: 700; text-align: right; white-space: nowrap; }
.dm > em small { font-weight: 400; color: var(--ink2); margin-left: 4px; }
.rs-side { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 70px; }
.rs-card canvas { width: 200px; height: 250px; border: 1px solid rgba(26, 26, 26, .55); box-shadow: 0 8px 18px rgba(26, 26, 26, .28); transform: rotate(-1.2deg); display: block; }
.rs-side .btn { width: 100%; }
.rs-actions { margin-top: 18px; justify-content: space-between; }
.unlock { margin: 0 0 10px; }

/* ---------- 무공 정보(인물 고르기에서 Esc) ---------- */
#skills { align-items: flex-start; }
.skills-panel { width: min(780px, 100%); text-align: left; max-height: none; margin: 0 auto; }
.skills-panel h2 { text-align: left; margin: 0 0 6px; letter-spacing: .12em; }
.skills-panel h2 span { margin-left: 12px; font-size: .6em; color: var(--ink2); letter-spacing: .1em; }
.sk-h { margin: 18px 0 4px; font-size: 15px; letter-spacing: .14em; color: var(--seal); padding-bottom: 6px; position: relative; }
.sk-h::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--seal); opacity: .7; -webkit-mask: var(--brush) left center / 100% 100% no-repeat; mask: var(--brush) left center / 100% 100% no-repeat; }
.sk-h small { margin-left: 10px; font-size: 11px; letter-spacing: 0; color: var(--ink2); font-weight: 400; }
.sk-row { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sk-row > .ico { flex: none; }
.sk-row h4 { margin: 0 0 2px; font-size: 16px; }
.sk-row h4 span { margin-left: 8px; font-size: 12px; color: var(--ink2); font-weight: 400; }
.sk-row h4 u { margin-left: 8px; padding: 1px 6px; font-size: 10px; text-decoration: none; color: var(--paper2); background: var(--seal); letter-spacing: .1em; vertical-align: 2px; }
.sk-row h4 u.ev { background: var(--gold); color: var(--ink); }
.sk-row h4 em { margin-left: 8px; font-size: 11px; font-style: normal; color: var(--ink2); font-weight: 400; }
.sk-row p { margin: 2px 0; font-size: 13px; line-height: 1.6; }
.sk-row .sk-from { color: var(--seal); font-size: 12px; }
.sk-row .sk-lv { color: var(--ink2); font-size: 12px; }
.skills-panel .row { justify-content: center; margin-top: 16px; }
.sk-x { position: absolute; right: 10px; top: 8px; width: 34px; height: 34px; border: 0; background: transparent; font-size: 20px; color: var(--ink2); cursor: pointer; z-index: 3; } .sk-x:hover { color: var(--seal); }

/* ---------- 도움말·기록 ---------- */
.help-panel, .rec-panel { width: min(96vw, 760px); text-align: left; }
.help-panel h2, .rec-panel h2 { text-align: center; margin-bottom: 2px; }
.help-panel > .rule, .rec-panel > .rule { width: 200px; margin: 6px auto 18px; }
.help-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 36px; }
.help-cols h3 { margin: 12px 0 6px; font-size: 14px; letter-spacing: .16em; color: var(--seal); }
.help-cols dl { margin: 0; font-size: 13px; line-height: 1.65; display: grid; grid-template-columns: 4.2em 1fr; gap: 7px 12px; align-items: baseline; }
.help-cols dt { font-weight: 700; }
.help-cols dd { margin: 0; color: var(--ink2); }
.help-cols kbd { display: inline-block; min-width: 20px; text-align: center; padding: 2px 5px; margin: 0 1px; opacity: .85; color: var(--ink); }
.help-foot { margin: 14px 0 0; font-size: 12px; color: var(--ink2); text-align: center; }
.rec-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.rec-top.two { grid-template-columns: repeat(2, 1fr); }
.rec-big { text-align: center; padding: 8px 6px 8px; border-bottom: 1px solid var(--line); }
.rec-big b { display: block; font-size: 28px; letter-spacing: .04em; line-height: 1.2; }
.rec-big span { font-size: 12px; color: var(--ink2); letter-spacing: .12em; }
.rec-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.rec-list li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; }
.rec-list li > i { width: 52px; height: 52px; display: grid; place-items: center; font: 900 28px/1 var(--serif); font-style: normal; color: var(--paper2); background: var(--ink); }
.rec-list li.on > i { background: var(--seal); transform: rotate(-3deg); }
.rec-list h4 { margin: 0 0 2px; font-size: 15px; }
.rec-list h4 small { margin-left: 8px; color: var(--ink2); font-weight: 400; }
.rec-list p { margin: 0 0 4px; font-size: 12px; color: var(--ink2); }
.rec-list .meter { height: 7px; }
.rec-h { margin: 16px 0 0; font-size: 14px; letter-spacing: .16em; color: var(--seal); }
/* 기록 보관 */
.backup { margin-top: 18px; padding-top: 2px; border-top: 1px solid var(--line); }
.bk-note { margin: 6px 0 0; font-size: 12px; line-height: 1.7; color: var(--ink2); }
.bk-note #bk-last { display: inline-block; color: var(--ink); }
.bk-btns { margin-top: 6px; }
.bk-area { margin-top: 8px; }
.bk-area textarea { display: block; width: 100%; box-sizing: border-box; min-height: 76px; resize: vertical; padding: 8px 10px; font: 12px/1.5 ui-monospace, Consolas, monospace; color: var(--ink); background: rgba(255, 252, 242, .6); border: 1.5px solid var(--ink); border-radius: 2px; word-break: break-all; }
.bk-area textarea:focus { outline: 2px solid var(--seal); outline-offset: 1px; }
.bk-msg { margin: 8px 0 0; min-height: 1.4em; font-size: 12px; line-height: 1.6; color: var(--ink2); }
.bk-msg.bad { color: var(--seal); }
.bk-cmp { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 0 8px; margin-top: 4px; font-size: 12px; }
.bk-cmp > * { padding: 4px 2px; border-bottom: 1px solid var(--line); }
.bk-cmp b { font-size: 11px; letter-spacing: .12em; font-weight: 400; color: var(--ink2); }
.bk-cmp .up { color: var(--seal); font-weight: 700; }

/* ---------- 상자 보상 ---------- */
#reward { background: radial-gradient(ellipse at center, rgba(233, 225, 207, .6), rgba(233, 225, 207, .92)); }
.reward-panel { width: min(92vw, 520px); padding: 34px 30px 26px; }
.reward-panel .rw-kick { display: block; margin-bottom: 4px; font-size: 12px; color: var(--seal); letter-spacing: .7em; text-indent: .7em; }
.reward-panel h2 { font-size: 30px; letter-spacing: .2em; text-indent: .2em; margin-bottom: 4px; }
.reward-panel .rule { width: 180px; margin: 6px auto 18px; }
.rw-flow { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 4px 0 12px; }
.rw-flow .ico { transform: none; }
.rw-flow .arrow { font-size: 26px; color: var(--seal); }
.rw-items { display: flex; gap: 8px; justify-content: center; }
.rw-name { margin: 8px 0 2px; font-size: 22px; letter-spacing: .1em; }
.rw-name span { display: block; font-size: 12px; color: var(--ink2); letter-spacing: .2em; font-weight: 400; margin-top: 2px; }
.rw-desc { margin: 10px 0 0; font-size: 14px; line-height: 1.75; color: var(--ink2); }
.rw-lines { margin: 12px auto 0; max-width: 360px; text-align: left; font-size: 13px; }
.rw-lines div { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid var(--line); }
.rw-lines em { font-style: normal; font-weight: 700; color: var(--seal); }
.reward-panel.evo .ico.evo { width: 70px; height: 70px; font-size: 40px; animation: evoPulse 1.6s ease-in-out infinite; }
@keyframes evoPulse { 0%, 100% { box-shadow: 0 0 10px rgba(181, 139, 42, .5); } 50% { box-shadow: 0 0 26px rgba(181, 139, 42, .9); } }

/* ---------- 움직임: 화면은 살짝 떠오르고, 족자는 차례로 펼쳐진다. '동작 줄이기' 설정이면 모두 끈다 ---------- */
@keyframes scrIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.screen:not(.hidden):not(.scene) { animation: scrIn .16s ease-out backwards; }
.cards .card { animation: cardIn .28s cubic-bezier(.2, .8, .3, 1) backwards; }
.cards .card:nth-child(2) { animation-delay: .06s; } .cards .card:nth-child(3) { animation-delay: .12s; }
.cards.still .card { animation: none; }
.reward-panel, .pause-panel, .help-panel, .rec-panel { animation: popIn .2s ease-out backwards; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; } }

/* ---------- 폭이 좁을 때 ---------- */
@media (max-width: 860px) {
  .sel-body { grid-template-columns: 1fr; }
  .sel-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
  .tile { grid-template-columns: 46px 1fr; padding: 6px 10px 6px 6px; column-gap: 8px; }
  .tile canvas { width: 46px; height: 56px; }
  .tile b { font-size: 15px; } .tile small { font-size: 11px; }
  .tile .emb { font-size: 16px; right: 7px; top: 4px; }
  .tile::after { display: none; }
  .tile:hover, .tile.sel { transform: none; }
  .tile .meter.sm { left: 60px; right: 36px; }
  .sel-detail { grid-template-columns: 120px 1fr; padding: 14px; gap: 14px; }
  .hero-view { min-height: 190px; align-self: start; }
  .info h3 { font-size: 22px; }
  .pause-grid { grid-template-columns: 1fr; }
  .rs-grid { grid-template-columns: 1fr; }
  .rs-side { padding-top: 0; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .rs-side .btn { width: auto; }
  .stamp { width: 62px; height: 62px; font-size: 22px; right: 14px; top: 12px; }
  .help-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; gap: 22px; padding: 0 10px; }
  .card { min-height: 0; padding: 30px 14px 22px; display: grid; grid-template-columns: 58px 1fr; column-gap: 12px; align-items: start; }
  .card > .ico { grid-row: 1 / span 4; margin: 0; }
  .card > small, .card > h3, .card > p { grid-column: 2; }
  .card > ul, .card > .evo-note { grid-column: 1 / -1; }
  .card .wm { font-size: 90px; bottom: 6px; }
  .lu-head h2 { font-size: 26px; }
  .lu-actions { gap: 4px; flex-wrap: nowrap; margin-top: 24px; } .lu-actions .btn { flex: 1 1 0; min-width: 0; padding: 6px 2px 14px; font-size: 13px; letter-spacing: 0; } .lu-actions .btn kbd { display: none; } .hint { font-size: 11px; }
  .stat { font-size: 11px; line-height: 1.4; }
  .stat span { display: block; } .stat span + span::before { display: none; }
  .sel-foot { position: static; background: none; padding-top: 12px; }
  #select { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } /* 아래에 붙는 출진 줄이 내용을 가리지 않게 */
  .foot-btns { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 18px calc(8px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(rgba(233, 225, 207, 0), var(--paper) 34%); } /* 폰: 어디를 보고 있든 출진·돌아가기가 화면 아래에 있다 */
  .sel-head p { flex: 1 0 100%; font-size: 12px; }
  .sel-head .link { margin-left: auto; }
  .card { padding: 26px 12px 16px; row-gap: 3px; }
  .card > .ico { width: 46px; height: 46px; font-size: 27px; }
  .card kbd { display: none; }
  .card .wm { display: none; }
  .card p { font-size: 12px; line-height: 1.5; margin-top: 2px; }
  .card ul { margin-top: 6px; }
  .cards { gap: 18px; }
  #levelup { padding-top: 10px; padding-bottom: 20px; }
  .lu-head .sub { margin-bottom: 14px; }
  .lu-head h2 { font-size: 24px; }
  .clock { padding: 4px 12px 7px 8px; column-gap: 8px; } .cseal { width: 26px; height: 26px; font-size: 16px; } .clock b { font-size: 13px; } .clock span { font-size: 11px; }
  .menu { right: 50%; transform: translateX(50%); width: min(92vw, 360px); flex-direction: row; flex-wrap: wrap; justify-content: center; bottom: 12px; gap: 0 4px; }
  .menu .btn { flex: 1 1 28%; text-align: center; padding: 8px 4px 13px; font-size: 15px; letter-spacing: .12em; }
  .menu .btn small { display: block; margin: 0 0 1px; }
  .menu .btn.primary { flex: 1 1 100%; font-size: 22px; margin-bottom: 8px; padding: 12px 8px; }
  .menu .more { flex: 1 1 100%; justify-content: center; margin-top: 4px; padding: 0; }
  .best { display: none; }
  .brand { right: 12px; top: 10px; }
  .vtitle { font-size: clamp(60px, 22vw, 110px); }
  .stats { grid-template-columns: 1fr; }
  .kv div:nth-child(3) { grid-column: 1 / -1; } .kv dd { white-space: nowrap; }
  .sel-foot { gap: 10px; } .curse, .lenbox { flex-wrap: wrap; row-gap: 6px; }
  .panel { padding: 22px 18px 20px; }
  .rec-top { grid-template-columns: 1fr; }
  .rec-big b { font-size: 24px; }
  .sk-row h4 em { display: block; margin: 2px 0 0; }
  .pause-btns, .pause-extra { gap: 10px; }
}

/* 폰을 가로로 든 낮은 화면(높이 ~460px 이하): 메뉴는 2줄로 줄이고, 카드·결과·설정은 옆으로 눕힌다 */
@media (max-height: 460px) {
  .menu { right: 12px; left: auto; transform: none; bottom: 8px; width: 300px; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 0 2px; }
  .menu .btn { flex: 1 1 22%; text-align: center; padding: 4px 2px 11px; font-size: 14px; letter-spacing: .1em; }
  .menu .btn small { display: none; }
  .menu .btn.primary { flex: 1 1 100%; font-size: 18px; margin-bottom: 4px; padding: 8px; }
  .menu .more { display: none; }
  .vtitle { font-size: clamp(54px, 14vmin, 90px); }
  .vsub { font-size: 11px; letter-spacing: .14em; }
  .best { display: none; }
  #levelup { padding: 8px 16px; }
  .lu-head h2 { font-size: 20px; margin: 0; } .lu-head .rule { margin: 2px auto; width: 160px; } .lu-head .sub { display: none; }
  .lu-head { margin-bottom: 14px; }
  .cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .card { min-height: 0; padding: 22px 10px 12px; display: flex; }
  .card > .ico { margin: 0 0 2px; width: 36px; height: 36px; font-size: 21px; }
  .card p { font-size: 11px; line-height: 1.4; margin: 3px 0; }
  .card ul { font-size: 11px; }
  .card h3 { font-size: 15px; }
  .card .wm, .card kbd { display: none; }
  .lu-actions { margin-top: 16px; }
  .hint { display: none; }
  .sel-body { grid-template-columns: 210px 1fr; gap: 14px; }
  .sel-grid { grid-template-columns: 1fr; gap: 6px; }
  .tile { grid-template-columns: 34px 1fr; padding: 4px 8px 4px 4px; } .tile canvas { width: 34px; height: 42px; } .tile .emb, .tile .meter.sm { display: none; } .tile b { font-size: 14px; } .tile small { font-size: 10px; }
  .sel-detail { grid-template-columns: 130px 1fr; padding: 12px; } .hero-view { min-height: 170px; } .info h3 { font-size: 20px; } .blurb { font-size: 12px; line-height: 1.6; }
  .rs-side .btn { white-space: nowrap; }
  .sel-head p { display: none; }
  .sel-foot { padding: 5px 0 0; gap: 8px; flex-wrap: nowrap; }
  .sel-opts { gap: 4px 14px; flex-wrap: nowrap; } .curse, .lenbox { gap: 4px; font-size: 12px; } .curse .seg, .lenbox .seg { padding: 3px 9px; font-size: 12px; } .curse > span:first-child, .lenbox > span:first-child { margin-right: 4px; }
  .foot-btns { gap: 8px; } .foot-btns .btn { padding: 5px 16px 12px; font-size: 14px; } .foot-btns .btn.primary { padding: 6px 20px; } .foot-btns .btn small { display: none; }
  .pause-grid { grid-template-columns: 1.1fr 1fr; gap: 10px 22px; }
  .rs-grid { grid-template-columns: 1fr 160px; gap: 16px; } .rs-side { padding-top: 0; } .rs-card canvas { width: 140px; height: 175px; }
  .result h2 { font-size: 26px; }
}