:root {
  --bg: #0e0d0c;
  --panel: #191715;
  --line: #2e2a26;
  --text: #ece4d6;
  --dim: #a59c8c;
  --faint: #8a8174; /* 바탕 대비 4.5 넘게(예전 #6f675b 3.5 — 12px 규칙 안내가 흐렸다, 2026-10-24) */
  --accent: #d8b46a;
  --jade: #8fb3a0;
  --blood: #c4533f;
  --body-font: 'RIDIBatang', 'Gowun Batang', 'Nanum Myeongjo', serif;
  --ui-font: 'NanumBarunGothic', 'Nanum Gothic', system-ui, sans-serif;
  --title-font: 'Nanum Myeongjo', serif;
}

* { box-sizing: border-box; }
/* 화면은 고정, 글만 body 안에서 스크롤한다(앱처럼): 주소창이 오르내려도 높이가 출렁이지 않고, 당겨서 튕기거나 새로고침되지 않는다.
   노치·홈 바 자리는 safe-area 만큼 비운다(상단은 .hud·.title-screen 이 맡는다). */
html { height: 100%; overflow: hidden; }
body { margin: 0; height: 100%; height: 100dvh; overflow-y: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch;
       padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
body { background: var(--bg); color: var(--text); font-family: var(--body-font); font-size: 17px; line-height: 1.75; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
#app { max-width: 640px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }

/* ---------- 제목 ---------- */
.title-screen { padding: calc(48px + env(safe-area-inset-top, 0px)) 20px 40px; display: flex; flex-direction: column; gap: 18px; }
.title-screen .kicker { font-family: var(--ui-font); font-size: 12px; letter-spacing: .3em; color: var(--faint); }
.title-screen h1 { font-family: var(--title-font); font-size: 42px; line-height: 1.2; margin: 0; font-weight: 800; letter-spacing: .02em; }
.title-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; }
.title-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.9); }
.lede { color: var(--dim); margin: 0; }
.title-screen { position: relative; }
.pack-corner { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px; display: flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; font-family: var(--ui-font); font-size: 11px; color: var(--faint); cursor: pointer; }
.pack-corner i { width: 22px; height: 12px; border-radius: 6px; border: 1px solid var(--line); position: relative; }
.pack-corner i::after { content: ''; position: absolute; top: 1px; left: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); transition: transform .2s; }
.pack-corner.on { color: var(--accent); }
.pack-corner.on i { border-color: var(--accent); }
.pack-corner.on i::after { transform: translateX(10px); background: var(--accent); }
.field { display: flex; gap: 8px; }
.field input { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line); color: var(--text); font: inherit; padding: 12px 14px; border-radius: 3px; }
.field input:focus { outline: 1px solid var(--accent); }
/* 폰 폭: 이름 칸·성별·태어나기 셋이 한 줄이면 이름 칸이 45px까지 줄던 일(2026-10-21 점검) — 이름 칸을 윗줄로 따로 */
@media (max-width: 480px) { .field { flex-wrap: wrap; } .field input { flex-basis: 100%; } .field .btn { flex: 1; } }
.btn { background: var(--accent); color: #1b150a; border: 0; padding: 12px 18px; border-radius: 3px; font-family: var(--ui-font); font-weight: 700; font-size: 15px; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); font-weight: 400; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { background: none; border: 1px solid var(--line); border-radius: 20px; padding: 4px 14px; font-family: var(--ui-font); font-size: 13px; color: var(--dim); }
.pill.on { border-color: var(--accent); color: var(--accent); }
.pill small { font-size: 10px; opacity: .7; }
.carry { border: 1px solid #3e4a42; background: #151b17; border-radius: 3px; padding: 12px 14px; font-size: 15px; color: var(--jade); }
.carry > b { display: block; font-family: var(--ui-font); font-size: 12px; letter-spacing: .15em; color: var(--faint); font-weight: 400; margin-bottom: 4px; }
.carry-n { letter-spacing: 0; margin-left: 6px; color: var(--dim); }
.carry-none { color: var(--faint); font-size: 13px; }
.carry-edit { margin-top: 8px; font: inherit; font-family: var(--ui-font); font-size: 12px; color: var(--accent); background: none; border: 1px solid var(--line); border-radius: 12px; padding: 3px 12px; cursor: pointer; }
.carry-pick { margin-top: 10px; display: grid; gap: 6px; }
.carry-pick .choice { text-align: left; }
.carry-pick .choice.on { border-color: var(--jade); color: var(--jade); }
.book-big { display: flex; align-items: center; gap: 12px; width: 100%; margin: 4px 0 14px; padding: 12px 16px; text-align: left; cursor: pointer; font: inherit; color: var(--text); background: linear-gradient(90deg, rgba(216,180,106,.16), rgba(216,180,106,.04)); border: 1px solid rgba(216,180,106,.55); border-radius: 4px; }
.book-big:hover { border-color: var(--accent); }
.book-big .book-ico { font-size: 22px; }
.book-big b { display: block; font-family: var(--title-font); font-size: 18px; color: var(--accent); }
.book-big small { display: block; font-family: var(--ui-font); font-size: 12px; color: var(--dim); margin-top: 2px; }
.meta-line { font-family: var(--ui-font); font-size: 13px; color: var(--faint); }
.small-print { font-family: var(--ui-font); font-size: 12px; color: var(--faint); line-height: 1.65; }

/* ---------- 상단 ---------- */
.hud { position: sticky; top: 0; z-index: 5; background: rgba(14, 13, 12, .95); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 8px; font-family: var(--ui-font); }
.hud-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.hud-name { font-weight: 700; font-size: 15px; }
.nick { color: var(--accent); font-size: 13px; }
.hud-age { font-size: 13px; color: var(--dim); }
.hud-ng { font-size: 12px; color: var(--accent); margin-left: 4px; opacity: .85; }
.hud-top { align-items: center; flex-wrap: wrap; row-gap: 6px; }
.hud-id { flex: 1 1 auto; min-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-btns { display: flex; gap: 4px; flex-shrink: 0; }
.hud-btns button { background: none; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; padding: 0 9px; min-height: 30px; color: var(--dim); white-space: nowrap; word-break: keep-all; }
@media (max-width: 380px) { .hud-btns { gap: 3px; } .hud-btns button { padding: 0 6px; } }
/* 폰 폭: 한 줄로 두면 내공(.hud-ng)이 오른쪽에서 잘렸다(2026-10-21 점검 큰 글자, 2026-10-30 보통 글자에서도 별호 · 잠든 기운이 길면) — 조각마다 끊지 않고 줄을 넘긴다 */
@media (max-width: 480px) { .hud-id { white-space: normal; overflow: visible; line-height: 1.5; } .hud-id > span { white-space: nowrap; } }
.ladder { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-top: 6px; font-size: 12px; color: var(--dim); }
.realm { font-family: var(--title-font); font-weight: 800; font-size: 16px; color: var(--text); }
.realm.r4 { color: #e4c27a; } .realm.r5 { color: #f0cf7e; text-shadow: 0 0 8px rgba(240, 207, 126, .35); }
/* 화경 · 현경: 금(초절정)보다 위로 읽히게 — 희게 달아오른 백은 + 금빛 테 + 푸른 무리(2026-10-24 사용자 「은백이 금보다 약해 보인다」) */
.realm.r6 { color: #cfe3ff; text-shadow: 0 0 1px rgba(255, 226, 150, .9), 0 0 6px rgba(150, 195, 255, .95), 0 0 14px rgba(110, 165, 255, .75), 0 0 26px rgba(90, 150, 255, .45); }
.realm.r7 { color: #e6d8ff; text-shadow: 0 0 1px rgba(255, 226, 150, .95), 0 0 6px rgba(200, 165, 255, .95), 0 0 14px rgba(165, 120, 255, .8), 0 0 28px rgba(120, 205, 255, .5); }
.rank { color: var(--jade); }
.fame { color: var(--accent); }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 7px; }
.stat { position: relative; font-size: 11px; color: var(--dim); padding-bottom: 4px; }
.stat span { display: block; line-height: 1.2; }
.stat b { display: block; font-size: 15px; color: var(--text); line-height: 1.25; font-family: var(--title-font); }
.stat i { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent); opacity: .7; max-width: 100%; }
.stat.low b { color: #f0a593; } .stat.low i { background: var(--blood); }
.stats.big { gap: 10px; } .stats.big .stat b { font-size: 20px; }
.hud-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip { font-family: var(--ui-font); font-size: 11px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--line); color: var(--dim); }
.chip.t-good { color: #cfc6b4; } .chip.t-bad { color: #cf9a8c; border-color: #4a302a; } .chip.t-odd { color: #b9c9bf; border-color: #34423a; }
.chip.close { border-color: #5b5232; color: var(--accent); }
.chip.foe { border-color: #6b2c22; color: #e08c7a; }
.chip.cold { opacity: .6; } .chip.dead { text-decoration: line-through; opacity: .5; }
.chip.rare { border-color: #7a6532; color: #f0cf7e; }

/* ---------- 무대 ---------- */
.stage { flex: 1; padding: 0 0 40px; }
.frame { position: relative; aspect-ratio: 16 / 10; max-height: 40vh; width: 100%; background: #070706; overflow: hidden; }
.frame img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.frame img.bg.on { opacity: 1; }
.frame::after { content: ''; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(transparent, rgba(14, 13, 12, .85)); pointer-events: none; z-index: 2; }
.who { position: absolute; inset: 0; z-index: 1; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; }
.who img { height: 112%; margin-bottom: -18%; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6)); }
.who img.on { opacity: 1; transform: none; }
.who-name { position: absolute; right: 12px; bottom: 10px; z-index: 3; font-family: var(--ui-font); font-size: 12px; color: var(--accent); text-shadow: 0 1px 3px #000; }
.age-tag { display: none; }
.age-tag-unused { position: absolute; left: 12px; bottom: 10px; z-index: 3; font-family: var(--ui-font); font-size: 12px; color: rgba(255, 255, 255, .8); text-shadow: 0 1px 3px #000; }

.card { padding: 20px 20px 0; animation: rise .4s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.card p { margin: 0 0 1em; white-space: pre-line; }
.card .span { font-family: var(--ui-font); font-size: 13px; color: var(--faint); letter-spacing: .1em; margin-bottom: 10px; }
.card.quiet p { color: var(--dim); }
.card.duel { animation: none; }
.card.duel p:first-child { font-family: var(--ui-font); font-size: 14px; color: var(--dim); }

.choices { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.choice { text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px 12px 40px; position: relative; line-height: 1.55; transition: border-color .15s, background .15s; }
.choice:hover:not(:disabled):not(.spent) { border-color: #4f4840; background: #201d1a; }
.choice .num { position: absolute; left: 14px; top: 12px; font-family: var(--ui-font); font-size: 12px; color: var(--faint); }
.choice.picked { border-color: var(--accent); }
.choice:disabled { cursor: default; }
.choice:disabled:not(.picked) { opacity: .35; }
.choice.locked { opacity: .45; border-style: dashed; }
.choice .needs { display: inline-block; margin-left: 8px; font-family: var(--ui-font); font-size: 11px; line-height: 18px; color: var(--jade); border: 1px solid #34423a; border-radius: 10px; padding: 0 6px; vertical-align: 1px; }
.choice .needs.recall { color: #f0cf7e; border-color: #6a5a30; }
/* 들고 갈 기억으로 고른 것: 또렷하게(2026-10-20 사용자: 고른 것과 안 고른 것이 잘 안 갈린다) — 굵은 테두리·물든 바탕·「✓ 들고 간다」 */
.memories .choice.on, .carry-pick .choice.on { border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.memories .choice.on::after, .carry-pick .choice.on::after { content: '✓ 들고 간다'; display: block; margin-top: 6px; font-family: var(--ui-font); font-size: 12px; font-weight: 700; color: var(--accent); }
.memories .choice:not(.on), .carry-pick .choice:not(.on) { opacity: .78; }

.result { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); animation: rise .4s ease both; }
.result p { white-space: pre-line; margin: 0 0 1em; }
.deltas { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; font-family: var(--ui-font); font-size: 12px; }
.delta { padding: 1px 8px; border-radius: 10px; background: #24201b; color: var(--dim); }
.delta.up { background: #1c241e; color: #a9cfa3; }
.delta.down { background: #2a1f1c; color: #d8a497; }
.delta.inf { background: #2e1a17; color: #ec8a7a; box-shadow: inset 0 0 0 1px #5a2a22; } /* 악명: 오르든 내리든 붉게 */
.delta-note { margin: -8px 0 14px; font-family: var(--ui-font); font-size: 12px; line-height: 1.5; color: #d99a8c; }
.delta.big { background: #2e2614; color: #f0cf7e; border: 1px solid #6a5a30; }
.delta.art { background: #1b2226; color: #a6c4d4; }
.delta.gear { background: #262219; color: #e2d6b8; border: 1px solid #4a4233; } /* 병기 칩 — 글자색 · 바탕은 뒤의 등급(tier-*)이 덮는다 */
.delta.hurt { background: #3a1a15; color: #f0a593; }
.delta.memory { background: #2b2412; color: #f0cf7e; border: 1px dashed #6a5a30; }
.delta.person { background: #1f1e24; color: #bdbcd0; }
.delta.cap { background: #1e1e1e; color: #8c8c8c; } /* 「정신 · 가득」 — 상한에 막혀 못 받은 몫(#81) */
/* 사람 칩은 사이에 따라 색을 달리한다(누르지 않아도 어떤 변화인지 보이게). */
.delta.ps-new { background: #1c2230; color: #9fc0e8; }
.delta.ps-close { background: #1a2620; color: var(--jade); }
.delta.ps-ok { background: #1f1e24; color: #bdbcd0; }
.delta.ps-cold { background: #1e1e1e; color: #8c8c8c; }
.delta.ps-foe { background: #2c1714; color: #e08a78; }
.delta.ps-gone { background: #1d1c1a; color: #9c9384; font-style: italic; }
.delta.ps-dead { background: #141312; color: #7a7266; text-decoration: line-through; }
.next { margin-top: 10px; width: 100%; }

/* ---------- 겹창 ---------- */
.overlay { position: fixed; inset: 0; z-index: 20; background: rgba(6, 5, 5, .88); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 16px; }
.overlay-inner { width: 100%; max-width: 560px; }
.overlay-close { display: block; margin: 18px auto 0; }
.book { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 20px; }
.book h2 { margin: 0 0 6px; font-size: 20px; font-family: var(--title-font); }
.book h3 { font-family: var(--ui-font); font-size: 12px; letter-spacing: .2em; color: var(--faint); margin: 20px 0 8px; font-weight: 400; }
.book ul { margin: 0; padding-left: 1.1em; }
.book li { margin-bottom: 4px; }
.locked { color: var(--faint); }

/* ---------- 끝 ---------- */
.end { padding: 30px 20px 50px; }
.end h2 { font-family: var(--title-font); font-size: 28px; margin: 0 0 8px; }
.verdict { display: flex; gap: 18px; align-items: center; margin: 22px 0; padding: 16px; border: 1px solid #6a5a30; background: #1d1810; border-radius: 4px; }
.verdict .score { font-family: var(--title-font); font-size: 44px; font-weight: 800; color: #f0cf7e; line-height: 1; }
.verdict .score small { font-size: 14px; margin-left: 2px; }
.end h3.sub { font-family: var(--ui-font); font-size: 12px; letter-spacing: .2em; color: var(--faint); margin: 24px 0 8px; font-weight: 400; }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
.timeline li { padding: 3px 0 3px 14px; color: var(--dim); }
.timeline li.big { color: var(--text); }
.timeline li b { font-family: var(--ui-font); font-weight: 400; color: var(--faint); font-size: 12px; margin-right: 8px; }
.memories { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

@media (max-width: 420px) {
  body { font-size: 16px; }
  .title-screen h1 { font-size: 36px; }
}

button.chip { background: none; cursor: pointer; }
.tip {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 30; width: min(92vw, 420px);
  background: #23201b; border: 1px solid #6a5a30; border-radius: 6px; padding: 12px 14px; font-family: var(--ui-font); font-size: 13px;
  color: var(--dim); line-height: 1.55; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.tip.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; cursor: pointer; }
/* 아래쪽을 눌렀으면 위에 띄운다(누른 자리와 그 주변 선택지를 가리지 않게) */
.tip.top { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 12px); transform: translate(-50%, -20px); }
.tip.top.on { transform: translate(-50%, 0); }
/* 누른 단어에 붙여 띄울 때: 자리는 js(placeTip)가 정하고, 위에 뜨면 아래에서 · 아래에 뜨면 위에서 살짝 다가온다 */
:root { --sat: env(safe-area-inset-top, 0px); }
.tip.anchored { left: 0; bottom: auto; transform: translateY(6px); overflow-y: auto; }
.tip.anchored.below { transform: translateY(-6px); }
.tip.anchored.on { transform: none; }
.tip b { display: block; color: var(--accent); font-size: 14px; margin-bottom: 2px; }
.traits { list-style: none; padding: 0; }
.traits li { margin-bottom: 6px; }

/* 성향 등급 */
.tier-common { color: #e8e2d6; }
.chip.tier-common { color: #d9d2c4; border-color: #3a352f; }
.tier-rare, .chip.tier-rare, .delta.tier-rare { color: #7fb2ff; }
.chip.tier-rare { border-color: #2f4a70; }
.tier-epic, .chip.tier-epic, .delta.tier-epic { color: #c39bff; }
.chip.tier-epic { border-color: #5b3f8c; background: rgba(120, 80, 200, .12); box-shadow: 0 0 8px rgba(160, 110, 255, .25); }
.tier-curse, .chip.tier-curse, .delta.tier-curse { color: #ff7a6b; }
.chip.tier-curse { border-color: #7a2f26; background: rgba(200, 60, 40, .1); }
.delta.tier-epic { background: #241a36; border: 1px solid #5b3f8c; }
.delta.tier-curse { background: #331814; border: 1px solid #7a2f26; }
.delta.tier-rare { background: #18233a; }
/* 병기 등급(data/world.js GEAR_GRADES): 범철 흰 · 정련 초록(fine — 무공 품계 사이에 끼운 색) · 명장 파랑 · 보검 보라 · 신병 금 */
.tier-fine, .chip.tier-fine, .delta.tier-fine { color: #8fd18a; }
.chip.tier-fine { border-color: #345a33; }
.delta.tier-fine { background: #18291a; }
.choice .needs.tier-fine { color: #8fd18a; border-color: #345a33; }
.me-gear { margin-top: 8px; }
.standing { font-size: 12px; color: var(--jade); margin-top: 4px; line-height: 1.5; word-break: keep-all; }
.standing .realm { font-size: 14px; }
.tip small { font-size: 11px; opacity: .8; margin-left: 4px; }
.ending { margin: 18px 0 10px; padding: 14px 16px; border-radius: 4px; border: 1px solid currentColor; background: rgba(255, 255, 255, .03); }
.ending small { display: block; font-family: var(--ui-font); font-size: 11px; letter-spacing: .15em; opacity: .8; }
.ending b { font-family: var(--title-font); font-size: 22px; }
.epitaph { color: var(--dim); font-size: 16px; line-height: 1.85; }

/* 인물 */
.book ul.people { list-style: none; padding: 0; display: grid; gap: 8px; }
.person { display: flex; gap: 10px; align-items: center; margin: 0; }
.person .face { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); background: #1d1b18; display: grid; place-items: center; color: var(--dim); font-size: 18px; }
.person .face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(1.9); transform-origin: 50% 0; }
.person .said { font-size: 12px; margin-top: 2px; }
.person.close b { color: var(--accent); }
.person.foe b { color: #e08c7a; }
.person.cold, .person.gone { opacity: .7; }
.person.dead { opacity: .5; } .person.dead b { text-decoration: line-through; }

/* 눌러 보는 설명이 있는 칩 */
[data-tip] { cursor: pointer; }
/* 글 속 인물 이름도 누르면 누군지(main.js whoTip) */
.nm[data-who] { cursor: pointer; }
.tip { white-space: normal; }

/* 기록 창 */
.log .log-age { margin: 14px 0 4px; font-size: 13px; color: var(--accent); }
.log .log-row { font-size: 13px; line-height: 1.55; margin: 0 0 8px; }
.log .log-row .deltas { margin-top: 4px; }
.log .log-pick { font-weight: 600; }

/* 건강 최대치 */
.stat { position: relative; }
.stat small.max { font-size: 11px; opacity: .6; margin-left: 1px; font-weight: 400; }
.stat u { position: absolute; right: 0; bottom: 0; height: 2px; background: repeating-linear-gradient(90deg, #5a2a2a 0 3px, transparent 3px 5px); text-decoration: none; }

/* 해가 바뀔 때 */
.carried { display: flex; align-items: center; gap: 8px; margin: -4px 0 14px; justify-content: center; }
.carried > span { font-family: var(--ui-font); font-size: 11px; color: var(--faint); white-space: nowrap; }
.carried .deltas { margin: 0; }
.year-turn { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--ui-font); font-size: 12px; color: var(--accent); letter-spacing: .08em; animation: yt .6s ease-out; }
.year-turn::before, .year-turn::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
@keyframes yt { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.hud-age.flash { animation: agef 1s ease-out; }
@keyframes agef { 0%, 30% { color: var(--accent); text-shadow: 0 0 8px var(--accent); } 100% { text-shadow: none; } }
.year-turn.season { color: var(--dim); font-size: 11px; }

/* 능력치는 삽화 아래 */
.hud-stats { margin: 10px 0 14px; padding: 0 16px; }
.hud-stats .stat { padding-bottom: 5px; }
.hud-stats .stats { margin: 0; }
/* 성별 고르기 */
.gender { display: inline-flex; gap: 4px; }
.gender button { min-width: 36px; padding: 0 10px; border: 1px solid var(--line); background: transparent; color: var(--dim); border-radius: 4px; font-family: var(--ui-font); }
.gender button.on { color: var(--text); border-color: var(--accent); background: rgba(240,207,126,.08); }

/* 누르면 풀이가 뜨는 말 */
.term { text-decoration: underline dotted rgba(214, 190, 140, .55); text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: help; }
.term:active { color: var(--accent); }

/* 겪어 본 선택지의 「?」 — 누르면 지난 결과가 뜬다(고르지는 않는다) */
.choice { position: relative; }
.choice:has(.seen) { padding-right: 46px; }
.choice .seen { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(214, 190, 140, .45); color: var(--accent); font-family: var(--ui-font); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.choice .seen:active { background: rgba(214, 190, 140, .15); }

/* 운: 글에 덧붙이지 않고 작은 표시로 */
.luck { font-family: var(--ui-font); font-size: 11px; margin: 2px 0 6px; letter-spacing: .05em; }
.luck.great { color: var(--accent); }
.luck.bad { color: #cf9a8c; }

/* 구글 로그인 */
.cloud-row { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }

.hud-body { font-size: 12px; color: var(--jade); margin-left: 2px; }

.mem-hint { display: block; font-family: var(--ui-font); font-size: 11px; color: var(--faint); margin-top: 3px; }
.hud-ng small { font-size: 10px; opacity: .8; }

/* 능력치 게이지: 바탕 칸 위에 능력치마다 다른 색 막대. 한눈에 들어오게 두껍게. */
.stat { --c: var(--accent); padding-bottom: 10px; }
.stat.s-power { --c: #e07a4a; } .stat.s-hp { --c: #6dbb6f; } .stat.s-mind { --c: #64a6de; } .stat.s-money { --c: #d8b46a; } .stat.s-fame { --c: #a993e0; }
.stat::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; border-radius: 3px; background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.stat i { height: 6px; border-radius: 3px; opacity: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 100%, white 25%), var(--c)); box-shadow: 0 0 6px color-mix(in srgb, var(--c) 45%, transparent); z-index: 1; transition: width .5s ease; }
.stat u { height: 6px; border-radius: 0 3px 3px 0; z-index: 1; }
/* 잃은 최대치를 까닭마다(#32 — js/main.js wearBar). 맨 오른쪽 조각만 둥글게 */
.stat u[class^="w-"] { border-radius: 0; } .stat u.edge { border-radius: 0 3px 3px 0; }
.stat u.w-aged { background: rgba(150, 150, 150, .38); } .stat u.w-qi { background: #c4533f; } .stat u.w-poison { background: #7a3f9e; } .stat u.w-blood { background: #6b1f24; }
.stat span { color: color-mix(in srgb, var(--c) 70%, var(--dim)); font-weight: 600; }
.stat.low i { background: var(--blood); box-shadow: 0 0 8px var(--blood); }
.hud-stats .stat { padding-bottom: 10px; }
.stats.big .stat { padding-bottom: 12px; } .stats.big .stat::before, .stats.big .stat i, .stats.big .stat u { height: 8px; }

/* 삽화 위 인물 이름: 밝은 그림 위에서도 읽히게 어두운 이름표를 깐다. */
.who-name { right: 10px; bottom: 10px; padding: 4px 11px 5px; font-size: 14px; font-weight: 700; letter-spacing: .04em; color: #f3dca4;
  background: rgba(12, 10, 8, .72); border: 1px solid rgba(216, 180, 106, .55); border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, .55); text-shadow: none; }

.btn:disabled { opacity: .4; cursor: not-allowed; }
.need-mem { color: var(--accent); margin-top: 8px; }
.need-mem:empty { display: none; }
.p-info { margin-top: 2px; font-size: 12px; }
.p-info .realm { font-size: 13px; }
.stat small.max em.why { font-style: normal; font-size: 10px; margin-left: 3px; padding: 0 4px; border-radius: 3px; background: rgba(196, 83, 63, .22); color: #e8a491; opacity: 1; }
/* 건강 칸은 어떤 경우에도 한 줄(#7 — 「45/98 노화」가 줄바꿈). 칸이 좁으면 꼬리표가 줄어든다 */
.stat.s-hp b { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.stat.s-hp small.max em.why { margin-left: 2px; padding: 0 3px; letter-spacing: -.03em; }
.share { margin: 12px 0 4px; font-family: var(--ui-font); font-size: 12px; color: var(--dim); }
.share b { color: var(--accent); }
.share small { opacity: .7; }
.share-more { margin-left: 6px; font: inherit; font-size: 11px; color: var(--accent); background: none; border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; cursor: pointer; }
.share-list { margin-top: 8px; display: grid; gap: 5px; }
.share-list[hidden] { display: none; }
.share-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 34px; gap: 8px; align-items: center; }
.share-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share-lbl em { font-style: normal; font-size: 10px; color: var(--faint); margin-left: 4px; }
.share-bar { height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.share-bar i { display: block; height: 100%; background: var(--dim); }
.share-pct { text-align: right; font-variant-numeric: tabular-nums; }
.share-row.mine { color: var(--text); font-weight: 700; }
.share-row.mine .share-bar i { background: var(--accent); }
.share-row.locked { opacity: .5; }
.share-total { font-size: 11px; color: var(--faint); text-align: right; }
.choice.spent { cursor: default; }
.choice.spent:not(.picked) { opacity: .35; }
.choice.spent .seen { cursor: pointer; opacity: 1; }
.vol-pop { position: fixed; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #1c1916; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.5); font-family: var(--ui-font); font-size: 13px; color: var(--dim); }
.vol-pop input { width: 150px; accent-color: var(--accent); }
.vol-pop b { min-width: 26px; text-align: right; color: var(--text); }

/* 무공 품계 색: 흰(범용) · 파랑(정통) · 보라(비전) · 금(절세) */
.tier-legend, .chip.tier-legend, .delta.tier-legend { color: #f0b04a; }
.chip.tier-legend, .delta.tier-legend { border: 1px solid #7a5520; background: rgba(240, 176, 74, .12); box-shadow: 0 0 8px rgba(240, 176, 74, .3); }
.choice .needs.tier-common { color: #d9d2c4; border-color: #4a443c; }
.choice .needs.tier-rare { color: #7fb2ff; border-color: #2f4a70; }
.choice .needs.tier-epic { color: #c39bff; border-color: #5b3f8c; background: rgba(120, 80, 200, .14); }
.choice .needs.tier-legend { color: #f0b04a; border-color: #7a5520; background: rgba(240, 176, 74, .14); }
.art-corner { top: 46px; }
.art-corner[hidden] { display: none; }
.who img.kid { height: 82%; margin-bottom: -4%; }

/* ── 정보 화면(js/info.js): 폰은 한 줄로 좁게, 넓은 화면은 두 칸 ── */
:root { --g-hp: #6dbb6f; --g-mind: #64a6de; --g-power: #e07a4a; --g-fame: #a993e0; --g-money: #d8b46a; }
.realm-bar { position: relative; display: inline-block; width: 46px; height: 5px; margin-left: 6px; vertical-align: middle; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.realm-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); }
.realm-bar u { position: absolute; top: 0; bottom: 0; background: rgba(216,180,106,.35); text-decoration: none; }
.realm-bar.wall i { background: #e4c27a; box-shadow: 0 0 6px rgba(228,194,122,.7); }
.book.me .realm-bar { display: block; width: 100%; height: 8px; margin: 6px 0 4px; }
.me-realm { margin: 0; }
.me-grid { display: grid; gap: 4px 28px; }
@media (min-width: 760px) { .me-grid { grid-template-columns: 1fr 1fr; } }
.arts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.arts-table th { text-align: left; font-weight: 400; color: var(--faint); font-size: 11px; padding: 2px 4px; border-bottom: 1px solid var(--line); }
.arts-table td { padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,.05); }
.arts-table tr.tier-common b { color: #d9d2c4; } .arts-table tr.tier-rare b { color: #7fb2ff; } .arts-table tr.tier-epic b { color: #c39bff; } .arts-table tr.tier-legend b { color: #f0b04a; }
@media (max-width: 480px) { .info-wide { display: none; } }
.life-graph { margin: 6px 0 10px; }
.life-graph svg { width: 100%; height: 140px; display: block; background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 6px; }
@media (min-width: 760px) { .life-graph svg { height: 190px; } }
.life-graph .gl { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; opacity: .9; }
.life-graph .gm { stroke: rgba(255,255,255,.18); stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.life-graph .gt { fill: var(--faint); font-size: 10px; text-anchor: middle; }
.gl-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--dim); margin-top: 4px; }
.gl-legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.mem-state { font-size: 11px; color: var(--faint); border: 1px solid var(--line); border-radius: 8px; padding: 0 6px; margin-left: 4px; }
.mem-state.on { color: var(--jade); border-color: #34423a; }
.choice .needs.odds-good { color: #8fd18f; border-color: #3c5a3c; }
.choice .needs.odds-bad { color: #f0a593; border-color: #6a3a32; }
.log-tools { position: sticky; top: -1px; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; background: var(--panel, #171513); }
.log-tools input { flex: 1 1 180px; min-width: 0; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--line); background: #1c1916; color: var(--text); font-size: 14px; }
.log-kinds { display: flex; gap: 6px; }
.codex { margin: 6px 0; } .codex summary { cursor: pointer; padding: 6px 0; font-weight: 600; }
.codex-grid { list-style: none; padding: 0; margin: 4px 0 10px; display: grid; gap: 6px 14px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); font-size: 13px; }
.codex-grid.nick { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.codex-grid li.locked { color: var(--faint); }
/* 인물 화면: 맺어질 수 있는 사람의 작은 꼬리표 */
.bond { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 9px; font-size: 11px; line-height: 17px; vertical-align: 2px; color: #e2967a; border: 1px solid currentColor; font-family: var(--ui-font); }
.bond.mate { color: var(--bg); background: #e2967a; border-color: #e2967a; }
.bond.lost { color: var(--faint); }
.cloud-row .warn { color: #e08c7a; font-weight: normal; }


/* 제보 창 */
.report textarea { width: 100%; box-sizing: border-box; background: #1d1b18; color: var(--ink, #e8e2d6); border: 1px solid var(--line); border-radius: 6px; padding: 10px; font: inherit; font-size: 15px; line-height: 1.5; resize: vertical; }
.report .rrun { display: block; margin: 10px 0; font-size: 13px; color: var(--dim); }
.report .rrun small { opacity: .7; }


/* 넘긴다 옆 「지난 이야기」: 높이를 더 먹지 않게 한 줄에 */
.next-row { display: flex; gap: 8px; align-items: stretch; margin-top: 10px; }
.next-row .next { margin-top: 0; flex: 1; }
.log-mini { flex: none; background: none; border: 1px solid var(--line); border-radius: 6px; color: var(--dim); font-family: var(--ui-font); font-size: 12px; padding: 0 10px; cursor: pointer; }
.choice-log { display: flex; justify-content: flex-end; margin: 6px 0 0; }
.choice-log .log-mini { padding: 4px 10px; }
.log-mini:hover, .log-mini:active { color: var(--accent); border-color: #6a5a30; }
.end-n { opacity: .8; }

/* 글 끌어 고르기·길게 눌러 메뉴·그림 끌기를 막는다(앱처럼 보이게). 글을 쓰는 칸은 예외 */
/* 글은 드래그해서 읽을 수 있게(따라 읽기 편하다는 말). 복사는 js/main.js 의 copy 막기가 막는다. 버튼·그림은 선택되지 않게. */
body { -webkit-touch-callout: none; }
button, .choice, .btn, .hud, nav, img { -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img { -webkit-user-drag: none; user-select: none; }

/* 명성을 보고 찾아온 일(data/mind.js byFame) */
/* 글 속 인물 이름(main.js nameMark) */
.nm { color: #e8c48c; }
[data-theme="light"] .nm { color: #8a4f12; }
/* 장소 · 문파와 세력 */
.pl { color: #93c9b0; }
.sc { color: #a9b6ec; }
[data-theme="light"] .pl { color: #2f6b52; }
[data-theme="light"] .sc { color: #3c4f9a; }
/* 이어 하기 첫 장의 지난 이야기(main.js recapHtml) */
.recap { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .03); font-size: .92em; color: var(--text); opacity: .82; }
.recap b { display: block; margin-bottom: 6px; font-family: var(--ui-font); font-size: 12px; letter-spacing: .05em; }
.recap p { margin: 3px 0; line-height: 1.6; }
.recap .ra { display: inline-block; min-width: 3.2em; margin-right: 6px; font-family: var(--ui-font); font-size: 11px; opacity: .8; }
.recap .rp { margin-top: 8px; }
/* 대형 사건 띠(main.js arcTagHtml) — 이어지는 장은 흐린 띠, 첫 장은 진한 띠 */
.arc-tag { display: inline-block; margin: 0 6px 6px 0; padding: 1px 8px; border-radius: 10px; font-family: var(--ui-font); font-size: 11px; color: #c9b8e8; border: 1px solid rgba(201, 184, 232, .45); background: rgba(201, 184, 232, .07); }
.arc-tag.mem-road { color: #a9b6ec; border-color: rgba(169, 182, 236, .5); background: rgba(169, 182, 236, .08); }
.arc-tag.mem-luck { color: #93c9b0; border-color: rgba(147, 201, 176, .5); background: rgba(147, 201, 176, .08); }
.arc-tag.fresh { color: #e2d6fa; border-color: rgba(201, 184, 232, .8); background: rgba(201, 184, 232, .16); }
/* 인연 띠(main.js bondTagHtml): 인물 창의 짝 꼬리표(.bond)와 같은 붉은 감빛 — 대형 사건 띠(보라)와 가른다 */
.bond-tag { display: inline-block; margin: 0 6px 6px 0; padding: 1px 8px; border-radius: 10px; font-family: var(--ui-font); font-size: 11px; color: #e2967a; border: 1px solid rgba(226, 150, 122, .45); background: rgba(226, 150, 122, .07); }
.bond-tag.fresh { color: #f3b9a2; border-color: rgba(226, 150, 122, .8); background: rgba(226, 150, 122, .16); }
.fame-tag { display: inline-block; margin: 0 0 6px; padding: 1px 8px; border-radius: 10px; font-family: var(--ui-font); font-size: 11px; color: #f3d28a; border: 1px solid rgba(243, 210, 138, .55); background: rgba(243, 210, 138, .08); }
.stat small.tier { color: #e9c87e; }

.end-hint { color: var(--dim); font-size: 13px; }

/* 제목 화면 버튼 위계(2026-10-20): 태어나기(금) > 이어 하기(옥빛) > 강호록(금테 카드) > 버그·의견(글자 링크) */
.btn.resume { background: rgba(143,179,160,.14); color: var(--jade); border: 1px solid var(--jade); font-weight: 700; }
.btn.resume:hover { background: rgba(143,179,160,.24); }
.title-screen #born { box-shadow: 0 0 0 1px rgba(216,180,106,.4), 0 4px 14px rgba(216,180,106,.18); }
/* 이어 할 삶이 있으면 「이어 하기」가 맨 위·크게, 「다시 태어나기」는 차분하게(눌러도 한 번 묻는다) */
.title-screen .resume-row { margin: 6px 0 14px; }
.title-screen .resume-row .btn.resume { width: 100%; padding: 14px 16px; font-size: 1.05em; box-shadow: 0 0 0 1px rgba(143,179,160,.45), 0 4px 14px rgba(143,179,160,.18); }
.title-screen .field.has-saved #born { box-shadow: none; background: none; border: 1px solid var(--line); color: var(--dim); font-weight: 400; }
.link-btn { display: block; margin: 6px auto 4px; background: none; border: 0; padding: 4px 8px; font-family: var(--ui-font); font-size: 12px; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--text); }
.cloud-row .btn.ghost { font-size: 13px; padding: 7px 14px; color: var(--dim); }
/* 과업(data/feats.js): 게임 중 칩은 금빛으로 눈에 띄게, 처음 이룬 것은 「새로」 꼬리표. 끝 화면의 과업 목록도 같은 결. */
.delta.feat { background: #33270e; color: #ffd36b; border: 1px solid #b08a2e; box-shadow: 0 0 8px rgba(255, 200, 80, .35); font-weight: 600; }
.feat-new { font-style: normal; font-weight: 600; margin-left: 6px; padding: 0 5px; border-radius: 8px; font-size: 10px; background: #ffd36b; color: #2a1d05; }
.row.feats { gap: 6px; }
.chip.feat { cursor: pointer; font-size: 12px; padding: 2px 9px; }
.chip.feat.fresh { border-color: #b08a2e; box-shadow: 0 0 10px rgba(255, 200, 80, .4); }

/* 강호록 탭(js/main.js openBook, 2026-10-20 개편): 위에 갈래 탭, 본 것은 펼치고 못 본 것은 접어 둔다 */
.book-nav { position: sticky; top: -40px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px -20px 6px; padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.book-nav .pill { font-size: 13px; padding: 5px 12px; }
.book-nav .pill small { margin-left: 3px; }
.book-pane[hidden] { display: none; }
.book-pane .seen-list { margin-top: 10px; }
.locked-box { margin: 12px 0 4px; border: 1px dashed var(--line); border-radius: 4px; padding: 6px 12px; }
.locked-box > summary { cursor: pointer; font-family: var(--ui-font); font-size: 13px; color: var(--dim); padding: 4px 0; }
.locked-box[open] > summary { margin-bottom: 6px; }
.locked-box .hint-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px 18px; font-size: 14px; }
@media (min-width: 560px) { .locked-box .hint-list { grid-template-columns: 1fr 1fr; } }

/* 제목 화면 위쪽 줄(2026-10-20): 화면 · 여인강호 · 미소녀 그림을 알약 단추로 */
.title-screen { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
.title-bar { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 20px; right: 20px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tb-right { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.tb-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-family: var(--ui-font); font-size: 12px; color: var(--dim); white-space: nowrap; transition: color .15s, border-color .15s; }
.tb-btn:hover { color: var(--text); border-color: var(--faint); }
.tb-btn[hidden] { display: none; }
.tb-ico { font-size: 14px; line-height: 1; color: var(--accent); }
.tb-switch i { position: relative; flex: none; width: 26px; height: 15px; border-radius: 8px; border: 1px solid var(--faint); }
.tb-switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); transition: transform .2s, background .2s; }
.tb-switch.on { color: var(--accent); border-color: var(--accent); }
.tb-switch.on i { border-color: var(--accent); }
.tb-switch.on i::after { transform: translateX(11px); background: var(--accent); }

/* 판 고르기(제목 화면 「人」 단추 → 창) */
.tb-pick.on { color: var(--accent); border-color: var(--accent); }
.view-pop.pack-pop { gap: 6px; width: 220px; }
.pack-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 8px 12px; background: none; border: 1px solid var(--line); border-radius: 6px; text-align: left; color: var(--text); }
.pack-opt b { font-size: 14px; font-family: var(--title-font); }
.pack-opt small { font-size: 11px; color: var(--faint); }
.pack-opt.on { border-color: var(--accent); background: rgba(216, 180, 106, .08); }
.pack-opt.on b { color: var(--accent); }

/* 큰 그림이 오기 전 잠깐 띄우는 작은 그림(img/thumb): 흐리게 · 살짝 크게(가장자리 번짐 가리기) · 빨리 나타나게 */
.frame img.bg.thumb { filter: blur(12px); transform: scale(1.05); transition: opacity .2s ease; }

/* 끝 화면 점수 내역(engine scoreParts) */
.verdict .score-parts { margin-top: 6px; font-family: var(--ui-font); font-size: 12px; font-weight: 400; color: var(--dim); line-height: 1.5; }
.verdict .score-parts summary { cursor: pointer; color: var(--accent); }
.verdict .score-parts ul { list-style: none; padding: 0; margin: 4px 0 0; min-width: 190px; }
.verdict .score-parts li { display: flex; justify-content: space-between; gap: 10px; }
.verdict .score-parts b { color: var(--text); font-weight: 600; }

/* 인생 그래프 개편(js/info.js lifeGraphHtml · 2026-10-20): 생애 구간 띠 · 무력/건강 · 경지·고비·과업 깃발 · 이 생의 고비 */
.lg2 .lg-plot { position: relative; height: 210px; margin-top: 18px; border: 1px solid var(--line); border-radius: 6px; overflow: visible; }
.lg2 .lg-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border: 0; background: none; border-radius: 0; }
.lg2 .lg-band { position: absolute; top: 0; bottom: 0; background: rgba(255, 255, 255, .025); border-right: 1px dashed var(--line); }
.lg2 .lg-band.alt { background: rgba(255, 255, 255, .055); }
.lg2 .lg-band span { position: absolute; top: -17px; left: 2px; font-family: var(--ui-font); font-size: 10px; color: var(--faint); white-space: nowrap; }
.lg2 .lg-danger { fill: rgba(196, 83, 63, .10); }
.lg2 .lg-dz { position: absolute; right: 4px; bottom: 2px; font-family: var(--ui-font); font-size: 10px; color: var(--blood); opacity: .8; }
.lg2 .gl { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
/* 꺼진 줄도 아주 흐리게 깔아 둔다(누르면 켜진다는 걸 보이게 — 2026-10-21 사용자) */
.lg2 .gl.off { opacity: .22; stroke-width: 1.5; }
.lg2 .lg-pin { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; padding: 0; border-radius: 50%; border: 2px solid var(--panel); cursor: pointer; z-index: 2; }
.lg2 .lg-pin.up { background: var(--g-power); }
.lg2 .lg-pin.hurt { background: var(--blood); }
.lg2 .lg-pin.feat { background: #ffd36b; border-radius: 2px; transform: rotate(45deg); width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.lg2 .lg-pin.wed { background: var(--jade); width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.lg2 .lg-pin.loss { background: var(--faint); width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.lg2 .lg-pin.sel { box-shadow: 0 0 0 3px var(--accent); }
.lg2 .lg-lab { position: absolute; transform: translate(7px, -50%); font-family: var(--ui-font); font-size: 11px; line-height: 1.2; white-space: nowrap; padding: 1px 4px; border-radius: 3px; background: color-mix(in srgb, var(--panel) 80%, transparent); pointer-events: none; z-index: 1; }
.lg2 .lg-lab.end { transform: translate(calc(-100% - 7px), -50%); }
.lg2 .lg-lab.up { color: var(--g-power); }
.lg2 .lg-lab.hurt { color: #f0a593; }
.lg2 .lg-ticks { position: relative; height: 16px; margin-top: 2px; }
.lg2 .lg-tick { position: absolute; transform: translateX(-50%); font-family: var(--ui-font); font-size: 10px; color: var(--faint); }
.lg2 .gl-legend { margin-top: 6px; }
.lg2 .gl-key { background: rgba(255, 255, 255, .04); border: 1px dashed var(--faint); border-radius: 10px; padding: 3px 10px; margin: 0 4px 4px 0; font-family: var(--ui-font); font-size: 12px; color: var(--faint); cursor: pointer; }
.lg2 .gl-key:not(.on) i { opacity: .35; }
.lg2 .gl-key.on { color: var(--text); border-style: solid; border-color: var(--faint); background: rgba(255, 255, 255, .1); }
.lg2 .gl-hint { display: block; margin-bottom: 4px; font-family: var(--ui-font); font-size: 11px; color: var(--faint); }
.lg2 .gl-key i, .lg2 .lg-key i { display: inline-block; vertical-align: middle; margin-right: 4px; }
.lg2 .gl-key i { width: 10px; height: 3px; border-radius: 2px; }
.lg2 .lg-key { font-family: var(--ui-font); font-size: 11px; color: var(--faint); }
.lg2 .lg-key .lg-pin { position: static; margin: 0 4px 0 0; cursor: default; }
.lg2 .lg-cap { min-height: 1.5em; margin: 6px 0 0; color: var(--text); }
.lg2 .lg-tips { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 3px; font-size: 14px; }
.lg2 .lg-tips b { font-family: var(--ui-font); font-size: 11px; font-weight: 700; margin-right: 6px; padding: 1px 6px; border-radius: 8px; }
.lg2 .lg-tips b.up { color: var(--g-power); border: 1px solid currentColor; }
.lg2 .lg-tips b.hurt { color: #f0a593; border: 1px solid currentColor; }
.lg2 .lg-tips b.feat { color: #ffd36b; border: 1px solid currentColor; }
.lg2 .lg-tips small { color: var(--faint); margin-left: 4px; }
/* 상단 이름 옆 성별 표시(무작위로 태어난 판도 알 수 있게) */
.hud-sex { margin-left: 5px; padding: 0 5px; border: 1px solid var(--line); border-radius: 8px; font-size: 10px; color: var(--dim); vertical-align: 1px; }

/* 엔딩 점수 여섯 갈래(main.js scoreGroupsHtml · 2026-10-20) */
.verdict .score-kind { margin-top: 6px; font-family: var(--ui-font); font-size: 13px; font-weight: 600; color: var(--accent); }
.score-groups { display: grid; gap: 4px; font-family: var(--ui-font); font-size: 13px; }
.score-groups .sg summary { display: grid; grid-template-columns: 3em 1fr 3.2em; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.score-groups .sg summary::-webkit-details-marker { display: none; }
.score-groups .sg[data-empty] summary { cursor: default; opacity: .6; }
.score-groups .sg-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.score-groups .sg-bar i { display: block; height: 100%; background: #f0cf7e; border-radius: 4px; }
.score-groups .sg summary b { text-align: right; color: var(--text); }
.score-groups ul { list-style: none; padding: 2px 0 6px 3.6em; margin: 0; color: var(--dim); font-size: 12px; }
.score-groups li { display: flex; justify-content: space-between; gap: 10px; }
.score-groups li b { color: var(--text); font-weight: 600; }
/* #95(10-30 사용자 — 가독성): 갈래마다 막대 · 이름 색, 무공 · 과업 줄은 등급 색(li.tier-*), 등급이 높을수록 굵게 */
.score-groups .sg { --sgc: #f0cf7e; }
.score-groups .sg[data-g="무위"] { --sgc: #e8a35a; } .score-groups .sg[data-g="무공"] { --sgc: #7fb2ff; } .score-groups .sg[data-g="과업"] { --sgc: #c39bff; }
.score-groups .sg[data-g="이름"] { --sgc: #f0cf7e; } .score-groups .sg[data-g="인생"] { --sgc: #8fd19e; } .score-groups .sg[data-g="끝"] { --sgc: #e58a8a; }
.score-groups .sg-bar i { background: var(--sgc); }
.score-groups .sg-name { color: var(--sgc); font-weight: 700; }
.score-groups .sg[open] ul { border-left: 2px solid color-mix(in srgb, var(--sgc) 45%, transparent); margin-left: 1.2em; padding-left: 2.2em; }
.score-groups li.tier-epic span, .score-groups li.tier-legend span { font-weight: 700; }
.score-groups li[class*="tier-"] b { color: inherit; }

/* 기록 잇기 창(main.js openSync) */
.cloud-row .pill.warn { color: #e08c7a; border-color: #e08c7a; }
.cloud-hint { width: 100%; text-align: center; font-family: var(--ui-font); font-size: 12px; color: var(--accent); }
.sync-box h3 { margin: 14px 0 4px; font-size: 15px; }
.sync-who { font-family: var(--ui-font); font-size: 15px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--dim); }
.sync-who.on { color: var(--text); border-color: var(--jade); }
.sync-sum { margin: 0; font-family: var(--ui-font); font-size: 14px; }
.sync-box .row { margin-top: 12px; gap: 8px; flex-wrap: wrap; }
.sync-box .link-btn { margin-top: 10px; }
/* 제목 화면 구글 로그인 단추(main.js cloudRowHtml) — 흰 바탕에 구글 로고, 다크·라이트 어디서나 또렷하게 */
.g-sign { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 6px; border: 1px solid #dadce0; background: #fff; color: #1f1f1f; font-family: var(--ui-font); font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.g-sign:hover { background: #f2f2f2; }
.cloud-line { background: none; border: none; padding: 4px 6px; font-family: var(--ui-font); font-size: 13px; color: var(--dim); cursor: pointer; }
.cloud-line:hover { color: var(--text); }
.cloud-row .link-btn { font-size: 12px; }
/* 애플 로그인 단추(iOS 앱): 애플 지침의 검은 단추 — 구글 단추와 같은 크기 */
.a-sign { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 6px; border: 1px solid #000; background: #000; color: #fff; font-family: var(--ui-font); font-size: 15px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.a-sign:hover { background: #222; }
.cloud-hint.guest { color: var(--dim); }
.link-btn.danger { color: #e08c7a; }

/* 성향 덕에 죽을 고비를 넘긴 칩(engine.js 질긴 목숨 · kind saved) — 다른 칩보다 또렷하게 */
.delta.saved { color: #ffe3a3; background: rgba(240, 190, 90, .16); border: 1px solid #e0b25a; font-weight: 700; padding: 2px 10px; }
.delta.saved::before { content: '✦ '; }
html[data-theme="light"] .delta.saved { color: #7a4d00; background: rgba(224, 178, 90, .2); }
/* 정신의 흔들림 표시(main.js renderHud · engine mindBand) */
.stat .mind-band { color: #e08c7a; }

/* 앱 인트로: 먹색 위에 제목 로고가 번져 오르고, 아래에 작게 회사 이름. index.html 의 짧은 스크립트가 1.6초 뒤(또는 누르면) 걷어 낸다. */
#intro { position: fixed; inset: 0; z-index: 9999; background: #161412; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .45s ease; }
#intro[hidden] { display: none; }
#intro img { width: min(72vw, 360px); height: auto; opacity: 0; transform: scale(.96); filter: blur(4px); animation: intro-in .9s ease-out .1s forwards; }
#intro small { position: absolute; bottom: calc(28px + env(safe-area-inset-bottom)); font-family: var(--ui-font); font-size: 11px; letter-spacing: .32em; color: #8a8178; opacity: 0; animation: intro-in .6s ease-out .5s forwards; }
#intro.out { opacity: 0; pointer-events: none; }
@keyframes intro-in { to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { #intro img, #intro small { animation-duration: .01s; } }
/* 켤 때 맞추는 화면(#92 덧붙임 — main.js boot): 로고 + 「기록을 맞추는 중…」. 바로 풀리면(로그인한 적 없는 웹) 그려지기도 전에 제목으로 간다.
   늦게(0.4초 뒤) 비쳐 들게 — 잠깐 맞추고 끝나는 대부분의 경우엔 깜빡이지 않게. 앱은 이 위를 첫 로고(#intro)가 덮고 있다. */
.boot-screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 0 16px; opacity: 0; animation: boot-in .4s ease-out .4s forwards; }
.boot-screen img { width: min(60vw, 280px); height: auto; }
.boot-msg { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--ui-font); font-size: 13px; color: var(--faint); }
.boot-msg i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: cloud-wait 1s linear infinite; }
@keyframes boot-in { to { opacity: 1; } }
/* 4초 넘게 걸려 이 기기 기록으로 먼저 그린 뒤, 서버 결과로 칸이 바뀌어 다시 그릴 때(main.js refreshTitle): 툭 바뀌지 않고 살짝 비쳐 든다 */
.title-screen.soft { animation: title-soft .35s ease-out; }
@keyframes title-soft { from { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .boot-screen { animation-duration: .01s; } .boot-msg i { animation: none; } .title-screen.soft { animation: none; } }
/* 기억 묶음(길·힘·인연) — main.js memGroups */
.mem-kind { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 2px; font-family: var(--ui-font); }
.mem-kind b { font-size: 14px; color: var(--accent); }
.mem-kind span { font-size: 12px; color: var(--dim); }
.mem-kind-tag { display: inline-block; margin-right: 6px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; font-family: var(--ui-font); font-size: 11px; color: var(--dim); vertical-align: 1px; }
/* 기억의 깊이(2026-10-20, docs/memory_depth.md) — main.js memDots · memDeeper. 깊이가 여럿인 기억만 ●○ 점, 덜 판 기억 아래 다음 깊이 힌트 */
/* 기억 한 줄(접기 · main.js memRow): 머리 줄만, ▾ 로 전문. 왼쪽 색 줄 = 묶음(길 금빛 · 힘 옥빛 · 인연 주홍). 다 쓴 기억은 흐리게 ✓ */
.mem-list, .carry-pick, .memories { display: flex; flex-direction: column; gap: 6px; }
.mem-row { --mk: var(--line); border: 1px solid var(--line); border-left: 4px solid var(--mk); border-radius: 4px; background: color-mix(in srgb, var(--panel) 88%, transparent); text-align: left; }
.mem-row.mk-road { --mk: #c9a25a; }
.mem-row.mk-power { --mk: var(--jade); }
.mem-row.mk-bond { --mk: #c97a5c; }
.mem-head { display: flex; align-items: stretch; }
.mem-pick { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 10px 10px 10px 12px; margin: 0; background: none; border: 0; color: var(--text); font: inherit; text-align: left; }
button.mem-pick { cursor: pointer; }
.mem-pick .arc-tag, .mem-pick .bond-tag { margin: 0; }
.mem-short { font-size: 15px; font-weight: 700; line-height: 1.35; }
.mem-pick .needs { font-family: var(--ui-font); font-size: 11px; color: #f0cf7e; border: 1px solid #6a5a30; border-radius: 10px; padding: 0 6px; }
.mem-more { flex: none; width: 44px; margin: 0; padding: 0; background: none; border: 0; border-left: 1px solid var(--line); color: var(--dim); font-size: 15px; cursor: pointer; }
.mem-more span { display: inline-block; transition: transform .15s; }
.mem-row.open .mem-more { color: var(--accent); }
.mem-row.open .mem-more span { transform: rotate(180deg); }
.mem-detail { padding: 10px 12px 12px; border-top: 1px dashed var(--line); font-size: 14px; line-height: 1.6; }
.mem-done-btn { display: inline-block; margin-top: 10px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--dim); font-family: var(--ui-font); font-size: 12px; cursor: pointer; }
.mem-done-mark { display: none; margin-left: auto; color: var(--jade); font-family: var(--ui-font); font-weight: 700; }
.mem-row.done { opacity: .55; }
.mem-row.done .mem-done-mark { display: inline-block; }
.mem-row.done.on, .mem-row.done.open { opacity: .85; }
.mem-row.on { border-color: var(--accent); border-left-color: var(--mk); background: color-mix(in srgb, var(--accent) 14%, var(--panel)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.mem-row.on .mem-pick::after { content: '✓ 들고 간다'; margin-left: auto; font-family: var(--ui-font); font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.mem-row.on.done .mem-done-mark { margin-left: 0; }
.mem-row.mem-new { background: color-mix(in srgb, #7fa8e8 10%, var(--panel)); }
.mem-row.mem-new.on { background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
/* 깊이: 칸 막대(채운 칸 = 아는 깊이) */
.mem-dp { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ui-font); font-size: 11px; color: var(--dim); white-space: nowrap; vertical-align: 1px; }
.mem-dp-bar { display: inline-flex; gap: 3px; }
.mem-dp-bar i { width: 14px; height: 6px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent); }
.mem-dp-bar i.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 5px color-mix(in srgb, var(--accent) 55%, transparent); }
.mem-dp em { font-style: normal; }
.carry .mem-dp { margin-left: 6px; }
/* 전체 펼치기 · 접기 / 제목 화면의 들고 갈 기억(펼쳐 볼 수 있는 기억 줄) */
.mem-fold { display: flex; justify-content: flex-end; gap: 6px; }
.mem-fold-btn { font-family: var(--ui-font); font-size: 12px; color: var(--dim); background: none; border: 1px solid var(--line); border-radius: 12px; padding: 3px 11px; cursor: pointer; }
.mem-fold-btn:hover { color: var(--accent); border-color: var(--accent); }
.carry-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.carry-list .mem-pick { padding: 8px 8px 8px 10px; }
.carry-list .mem-short { font-size: 14px; }
.carry-list .mem-detail { color: var(--text); }
/* 들고 갈 기억 칸 띠: 기본 칸 셋 ┃ 기연 칸(금테, 힘 기억만). 칸에는 묶음 이름과 상태만 — 찬 칸을 누르면 그 기억 줄이 펼쳐진다 */
.carry-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 6px 0 4px; }
.cs { --mk: var(--line); min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin: 0; padding: 6px 8px; border: 1px solid var(--line); border-left: 4px solid var(--mk); border-radius: 4px; background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--text); font: inherit; text-align: left; white-space: nowrap; overflow: hidden; }
.cs b { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--mk); }
.cs small { font-family: var(--ui-font); font-size: 11px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
button.cs { cursor: pointer; }
button.cs:hover, .cs.on { background: color-mix(in srgb, var(--mk) 14%, var(--panel)); }
.cs.on small { color: var(--mk); }
.cs.mk-road { --mk: #c9a25a; } .cs.mk-power { --mk: var(--jade); } .cs.mk-bond { --mk: #c97a5c; }
.cs.empty { border-style: dashed; }
.cs.empty b { color: var(--dim); font-weight: 400; }
.cs.locked { opacity: .45; border-style: dashed; }
.cs.locked b { color: var(--faint); font-weight: 400; }
.cs.ky { --mk: #d9b45e; border-color: #b8924a; box-shadow: inset 0 0 0 1px color-mix(in srgb, #d9b45e 30%, transparent); }
.cs-sep { border-radius: 1px; background: color-mix(in srgb, #d9b45e 55%, var(--line)); }
.mem-cap { margin-left: auto; font-style: normal; font-family: var(--ui-font); font-size: 11px; color: var(--dim); white-space: nowrap; }
/* 제목 화면: 들고 갈 기억 줄은 칸을 누르거나 전체 펼치기를 했을 때만 */
.carry-list .mem-row:not(.shown) { display: none; }
.carry-list .mem-fold { margin-top: 2px; }
/* 고른 선택지를 서버 판 머리에 적는 동안(js/main.js pick — 보통 한순간) */
.choice.committing { opacity: .6; pointer-events: none; transition: opacity .2s .15s; }
/* 입신(극성 너머 한 칸 — 한 생에 많아야 둘): 글씨 · 바탕은 그 무공의 품계 색 그대로, 금테 · 빛무리 · 훑고 지나가는 빛만 더한다
   (2026-10-26 사용자: 흰 무공 입신이 절세처럼 보이지 않게 — 품계 색은 두고 금테만). 「나」 표 · 끝 화면에서도 같은 표시 */
.delta.ipsin, .chip.ipsin { position: relative; overflow: hidden; font-weight: 700; border: 1px solid #e0b45e; box-shadow: 0 0 0 1px rgba(240, 196, 98, .35), 0 0 12px rgba(240, 190, 80, .4); }
.delta.ipsin::after, .chip.ipsin::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 236, 180, .35) 50%, transparent 70%); transform: translateX(-120%); animation: ipsin-shine 2.6s ease-in-out .4s infinite; pointer-events: none; }
@keyframes ipsin-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .delta.ipsin::after, .chip.ipsin::after { animation: none; } }
.arts-table tr.art-ipsin td:nth-child(2) { font-weight: 700; text-shadow: 0 0 6px rgba(255, 200, 100, .55); }
.mo-word.ipsin { color: #ffe39a; letter-spacing: .2em; text-shadow: 0 0 18px rgba(255, 200, 90, .9), 0 0 42px rgba(240, 170, 60, .6); }
/* #121 입신 연출: 어두워진 화면을 칼빛 한 줄이 가로지르고, 무공 이름이 먹처럼 번져 나온다(경지 돌파의 터짐 · 고리와 다르게) */
.mo-ip-dim { position: absolute; inset: 0; background: rgba(6, 5, 4, .72); animation: mo-ip-dim .5s ease-out both; }
@keyframes mo-ip-dim { from { opacity: 0; } to { opacity: 1; } }
.mo-ip-line { position: absolute; left: 0; right: 0; top: 42%; height: 2px; background: linear-gradient(90deg, transparent, #fff3c8 20%, #ffd77a 50%, #fff3c8 80%, transparent); box-shadow: 0 0 14px rgba(255, 215, 120, .9), 0 0 40px rgba(255, 190, 80, .5); transform-origin: left center; animation: mo-ip-line .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes mo-ip-line { 0% { transform: scaleX(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: scaleX(1); opacity: .35; } }
.mo-word.ip-name { font-size: clamp(30px, 9vw, 64px); letter-spacing: .12em; animation: mo-ip-name .9s ease-out both; }
@keyframes mo-ip-name { 0% { opacity: 0; filter: blur(10px); letter-spacing: .5em; } 100% { opacity: 1; filter: blur(0); letter-spacing: .12em; } }
.mo-sub.up.ip-sub { top: calc(42% + clamp(38px, 9vw, 60px)); color: #e9d3a0; letter-spacing: .06em; font-size: 13px; animation: mo-in .5s ease .2s both; }
html[data-theme="light"] .delta.ipsin, html[data-theme="light"] .chip.ipsin { border-color: #d9a441; box-shadow: 0 0 0 1px rgba(217, 164, 65, .35), 0 0 10px rgba(217, 164, 65, .35); }
.mem-kind { flex-wrap: wrap; }
.mem-depth { display: inline-block; margin-left: 6px; font-family: var(--ui-font); font-size: 11px; letter-spacing: 1px; color: var(--accent); vertical-align: 1px; white-space: nowrap; }
.mem-deeper { display: block; font-family: var(--ui-font); font-size: 11px; color: var(--dim); margin-top: 2px; }
/* 비무 작전 칩(2026-10-21, js/duel.js chipsOf · main.js) — 경지 · 무공 · 작전 · 승률. 초록=내게 좋음, 붉음=나쁨, 회색=엇비슷, 노랑 점선=모름 */
.choice .dchips { display: flex; flex-wrap: wrap; gap: 4px 5px; margin-top: 6px; }
.choice .dchip { display: inline-block; font-family: var(--ui-font); font-size: 11px; line-height: 18px; padding: 1px 7px; /* 앱 글꼴에서 위아래가 잘리던 것(#6) */ border: 1px solid var(--line); border-radius: 10px; color: var(--dim); white-space: nowrap; word-break: keep-all; }
.choice .dchip.dc-good { color: #8fd18f; border-color: #3c5a3c; background: rgba(143, 209, 143, .07); }
.choice .dchip.dc-bad { color: #f0a593; border-color: #6a3a32; background: rgba(196, 83, 63, .1); }
.choice .dchip.dc-unk { color: #e6c86e; border-color: #7a6530; border-style: dashed; }
.choice .dchip.dc-win { font-weight: 700; }
html[data-theme="light"] .choice .dchip.dc-good { color: #2f7a2f; border-color: #a8cfa8; background: rgba(47, 122, 47, .06); }
html[data-theme="light"] .choice .dchip.dc-bad { color: #a3301c; border-color: #e3a99a; background: rgba(163, 48, 28, .06); }
html[data-theme="light"] .choice .dchip.dc-unk { color: #8a6512; border-color: #c9a85a; }
/* 비무 상대 경지 띠(main.js foeRealmHtml) — 경지 차이를 색으로 */
.foe-realm { display: inline-flex; align-items: baseline; gap: 8px; margin: 2px 0 10px; padding: 4px 12px; border-radius: 14px; border: 1px solid currentColor; font-family: var(--ui-font); font-size: 13px; }
/* 여럿이 덤비는 판은 「셋이 한꺼번에」가 붙어 길어진다 — 좁은 폰에선 이름 · 경지는 안 끊고 풀이만 아랫줄로. */
.foe-realm { flex-wrap: wrap; row-gap: 0; } .foe-realm span, .foe-realm b { white-space: nowrap; }
.foe-realm span { color: var(--text); } .foe-realm b { font-size: 15px; } .foe-realm small { font-size: 12px; opacity: .85; }
.foe-realm.up2 { color: #ff5a46; background: rgba(255, 90, 70, .14); font-weight: 700; }
.foe-realm.up1 { color: #e0705f; background: rgba(224, 112, 95, .10); }
.foe-realm.eq { color: var(--dim); }
.foe-realm.dn1 { color: #6fc89a; background: rgba(95, 191, 143, .08); }
.foe-realm.dn2 { color: #4fd18a; background: rgba(79, 209, 138, .12); }
html[data-theme="light"] .foe-realm.up2 { color: #b3261a; } html[data-theme="light"] .foe-realm.up1 { color: #b84a3a; } html[data-theme="light"] .foe-realm.dn1, html[data-theme="light"] .foe-realm.dn2 { color: #1f7a4c; }
/* 비무 칩의 까닭 한 줄(duel.js whyOf) */
.dchips .dwhy { flex-basis: 100%; font-size: 11.5px; color: var(--dim); font-weight: 400; margin-top: 1px; }
/* 이름 없는 비무 상대의 실루엣(main.js setScene · img/sil) — 입식과 같은 자리, 조금 옅게 */
.who img.sil { filter: drop-shadow(0 0 2px rgba(236, 229, 214, .45)) drop-shadow(0 0 14px rgba(236, 229, 214, .18)); } .who img.sil.on { opacity: .95; }
/* 여럿이 덤비는 비무(#42): 같은 실루엣을 겹쳐 줄지어 — 가운데가 앞, 양옆은 작고 흐리게 뒤로 */
.who img.sil-mid { position: relative; z-index: 2; }
.who img.sil-l, .who img.sil-r { height: 96%; margin-bottom: -12%; }
.who img.sil-l { margin-right: -16%; } .who img.sil-r { margin-left: -16%; transform: scaleX(-1) translateY(10px); }
.who img.sil-l.on, .who img.sil-r.on { opacity: .7; } .who img.sil-r.on { transform: scaleX(-1); }
.who img.sil-pair { height: 106%; margin-bottom: -16%; } .who img.sil-pair.on { opacity: .9; }
/* ---------- 비무 연출(main.js duelShow) ---------- */
#result > * { transition: opacity .3s ease, transform .3s ease; }
#result > .dz-hide { opacity: 0; transform: translateY(8px); pointer-events: none; }
.dz-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.dz-layer.dz-out { opacity: 0; transition: opacity .5s ease; }
.dz-slash { position: absolute; left: -10%; width: 120%; height: 3px; transform-origin: 50% 50%; transform: rotate(var(--a)) scaleX(0);
  background: linear-gradient(90deg, transparent, rgba(255, 248, 230, .9) 30%, #fff 50%, rgba(255, 248, 230, .9) 70%, transparent);
  box-shadow: 0 0 14px rgba(255, 236, 190, .85); animation: dz-slash .34s cubic-bezier(.2, .9, .3, 1) forwards; }
.dz-slash.parry { height: 2px; background: linear-gradient(90deg, transparent, rgba(190, 215, 255, .95) 50%, transparent); box-shadow: 0 0 10px rgba(170, 200, 255, .7); }
.dz-slash.hit, .dz-slash.charge { height: 5px; box-shadow: 0 0 22px rgba(255, 220, 160, .95); }
@keyframes dz-slash { 0% { transform: rotate(var(--a)) scaleX(0); opacity: 1; } 40% { transform: rotate(var(--a)) scaleX(1); opacity: 1; } 100% { transform: rotate(var(--a)) scaleX(1.02); opacity: 0; } }
.dz-stamp { position: absolute; left: 50%; top: 40%; translate: -50% -50%; padding: 12px 20px 14px; display: grid; place-items: center; white-space: nowrap;
  font-family: var(--title-font); font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: .06em; border-radius: 12px; border: 5px solid currentColor;
  background: rgba(16, 12, 10, .55); box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 10px 40px rgba(0, 0, 0, .6);
  animation: dz-stamp .46s cubic-bezier(.2, 1.5, .35, 1) both, dz-fade .5s ease 1.5s forwards; }
.dz-stamp.win { color: #f0c55a; text-shadow: 0 0 18px rgba(240, 190, 80, .6); } /* 2026-10-23 사용자: 붉은 승리 도장이 패배처럼 보인다 → 금빛 */
.dz-stamp.lose { color: #a59d92; text-shadow: 0 0 10px rgba(0, 0, 0, .8); }
.dz-stamp.big { padding: 14px 26px 17px; font-size: 68px; border-width: 6px; }
@keyframes dz-stamp { 0% { transform: rotate(-10deg) scale(2.6); opacity: 0; filter: blur(6px); } 55% { opacity: 1; filter: none; } 100% { transform: rotate(-7deg) scale(1); opacity: 1; } }
@keyframes dz-fade { to { opacity: 0; } }
.dz-blood { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 42%, rgba(140, 16, 10, .62) 100%); animation: dz-blood 1.4s ease-out forwards; }
@keyframes dz-blood { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }
.dz-shake { animation: dz-shake .26s linear; }
.dz-shake-hard { animation: dz-shake-hard .46s linear; }
@keyframes dz-shake { 0%, 100% { transform: none; } 25% { transform: translate(-5px, 2px); } 50% { transform: translate(5px, -2px); } 75% { transform: translate(-3px, 1px); } }
@keyframes dz-shake-hard { 0%, 100% { transform: none; } 15% { transform: translate(-9px, 3px); } 35% { transform: translate(8px, -3px); } 55% { transform: translate(-6px, 2px); } 75% { transform: translate(4px, -1px); } }
.who img.dz-recoil { animation: dz-recoil 1.2s ease-out forwards; }
@keyframes dz-recoil { 0% { transform: none; } 10% { transform: translateX(16px) rotate(2deg); filter: brightness(2.4) drop-shadow(0 6px 18px rgba(0, 0, 0, .6)); }
  100% { transform: translateX(10px) rotate(1deg); opacity: .5; filter: grayscale(.7) drop-shadow(0 6px 18px rgba(0, 0, 0, .6)); } }
.delta.dz-pop { animation: dz-pop .55s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes dz-pop { 0% { transform: scale(1.9); filter: brightness(1.8); } 100% { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .dz-stamp { animation: dz-fade .5s ease 1.5s forwards; } .delta.dz-pop, .who img.dz-recoil { animation: none; } }

/* ---------- 깊은 기억: 깊이마다 한 칸(main.js memLvls) ---------- */
.mem-lvs { display: flex; flex-direction: column; gap: 8px; }
.mem-lv { display: block; padding-left: 10px; border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.mem-lv.deep { border-left-color: var(--accent); }
.mem-lv b.mem-lv-tag { display: inline-block; width: auto; margin-right: 6px; padding: 0 6px; border-radius: 8px; font-family: var(--ui-font); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; vertical-align: 2px;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.mem-lv.deep b.mem-lv-tag { color: #1a1611; background: var(--accent); border-color: var(--accent); }
.mem-lv-more { display: block; margin-top: 6px; }
.mem-lv-more .mem-depth { margin-left: 0; margin-right: 6px; }
/* ---------- 큰 순간 연출(main.js momentShow): 경지 돌파 · 벽을 깸 · 주화입마 ---------- */
.mo-word { position: absolute; left: 50%; top: 42%; translate: -50% -50%; white-space: nowrap; font-family: var(--title-font); font-weight: 800; line-height: 1; letter-spacing: .08em; }
.mo-sub { position: absolute; left: 50%; top: calc(42% - 54px); translate: -50% -50%; white-space: nowrap; font-family: var(--ui-font); font-size: 14px; letter-spacing: .3em; }
.mo-word.up { font-size: calc(46px + var(--k, 3) * 6px); color: #ffe7a3; text-shadow: 0 0 18px rgba(255, 210, 110, .9), 0 0 48px rgba(255, 180, 60, .6); animation: mo-rise .7s cubic-bezier(.2, 1.4, .4, 1) both, dz-fade .5s ease 1.6s forwards; }
.mo-sub.up { top: calc(42% + 58px + var(--k, 3) * 5px); color: #f3d58a; text-shadow: 0 0 8px rgba(0, 0, 0, .8); animation: mo-in .5s ease .1s both, dz-fade .5s ease 1.6s forwards; }
@keyframes mo-rise { 0% { opacity: 0; transform: translateY(26px) scale(.7); filter: blur(6px); } 60% { opacity: 1; filter: none; } 100% { opacity: 1; transform: none; } }
@keyframes mo-in { from { opacity: 0; } to { opacity: 1; } }
.mo-burst { position: absolute; left: 50%; top: 42%; width: calc(70vmax + var(--k, 3) * 14vmax); height: calc(70vmax + var(--k, 3) * 14vmax); translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 170, .75) 0%, rgba(255, 200, 90, .35) 12%, rgba(255, 170, 60, 0) 34%); animation: mo-burst 1.6s ease-out forwards; }
@keyframes mo-burst { 0% { transform: scale(.05); opacity: 1; } 40% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.mo-ring { position: absolute; left: 50%; top: 42%; width: 80px; height: 80px; translate: -50% -50%; border-radius: 50%; border: 2px solid rgba(255, 220, 140, .9);
  box-shadow: 0 0 16px rgba(255, 200, 100, .8), inset 0 0 12px rgba(255, 200, 100, .5); animation: mo-ring 1.1s ease-out forwards; }
@keyframes mo-ring { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(9); opacity: 0; } }
.mo-flash { position: absolute; inset: 0; background: #fffdf4; animation: mo-flash .45s ease-out forwards; }
@keyframes mo-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.mo-dark { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(40, 0, 0, .55) 20%, rgba(90, 6, 6, .85) 100%); animation: mo-pulse 1.9s ease-in-out forwards; }
@keyframes mo-pulse { 0% { opacity: 0; } 12% { opacity: 1; } 22% { opacity: .55; } 34% { opacity: 1; } 48% { opacity: .6; } 62% { opacity: .95; } 100% { opacity: .75; } }
.mo-word.qi { font-size: calc(54px + var(--k, 3) * 4px); color: #ff4b3a; text-shadow: 2px 0 0 rgba(0, 220, 255, .35), -2px 0 0 rgba(255, 0, 0, .5), 0 0 26px rgba(255, 40, 20, .8);
  animation: mo-slam .42s cubic-bezier(.2, 1.6, .4, 1) both, mo-tremble .08s linear .42s 10, dz-fade .5s ease 1.6s forwards; }
.mo-sub.qi { top: calc(42% + 64px + var(--k, 3) * 4px); color: #e7a49a; animation: mo-in .4s ease .3s both, dz-fade .5s ease 1.6s forwards; }
@keyframes mo-slam { 0% { opacity: 0; transform: scale(2.4) skewX(-8deg); filter: blur(8px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes mo-tremble { 0%, 100% { transform: none; } 25% { transform: translate(-3px, 1px) skewX(-2deg); } 50% { transform: translate(3px, -1px); } 75% { transform: translate(-2px, -1px) skewX(2deg); } }
@media (prefers-reduced-motion: reduce) { .mo-burst, .mo-ring, .mo-flash { display: none; } .mo-word.qi, .mo-word.up { animation: mo-in .3s ease both, dz-fade .5s ease 1.6s forwards; } }
/* 벽 앞에서 기운을 모음(main.js momentShow charge) · 높은 벽 장식 · 벽에 막힘 */
.mo-gather { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, transparent 14%, rgba(4, 4, 6, .86) 62%); animation: mo-gather .7s ease-out forwards; }
@keyframes mo-gather { from { opacity: 0; } to { opacity: 1; } }
.mo-orb { position: absolute; left: 50%; top: 42%; width: 120px; height: 120px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 225, .95) 0%, rgba(255, 215, 120, .6) 30%, rgba(255, 180, 60, 0) 70%);
  animation: mo-orb 1.3s ease-in forwards, mo-flick .12s linear .5s infinite; }
@keyframes mo-flick { 50% { filter: brightness(1.6); } }
@keyframes mo-orb { 0% { transform: scale(.1); opacity: .2; } 100% { transform: scale(calc(.8 + var(--k, 3) * .12)); opacity: 1; } }
.mo-in-ring { position: absolute; left: 50%; top: 42%; width: 90px; height: 90px; translate: -50% -50%; border-radius: 50%; border: 2px solid rgba(255, 220, 150, .75);
  box-shadow: 0 0 12px rgba(255, 200, 110, .7); animation: mo-in-ring .7s ease-in forwards; }
@keyframes mo-in-ring { 0% { transform: scale(7); opacity: 0; } 30% { opacity: .9; } 100% { transform: scale(.2); opacity: 0; } }
.mo-sub.pre { top: calc(42% + 84px); color: #e8d6a8; text-shadow: 0 0 8px rgba(0, 0, 0, .9); letter-spacing: .14em; animation: mo-in .4s ease both; }
.mo-pop { position: absolute; left: 50%; top: 42%; width: 240px; height: 240px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 120, 80, .9), rgba(140, 10, 10, 0) 70%); animation: mo-pop .5s ease-out forwards; }
@keyframes mo-pop { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }
.mo-aura { position: absolute; left: 50%; top: 42%; width: 420px; height: 420px; translate: -50% -50%; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 220, 140, 0), rgba(255, 230, 160, .55), rgba(255, 220, 140, 0) 30%, rgba(255, 240, 190, .45) 55%, rgba(255, 220, 140, 0) 75%, rgba(255, 230, 160, .5));
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%, #000 62%, transparent 70%); mask: radial-gradient(circle, transparent 38%, #000 40%, #000 62%, transparent 70%);
  animation: mo-spin 2.2s linear forwards, dz-fade .6s ease 1.5s forwards; }
@keyframes mo-spin { from { transform: rotate(0deg) scale(.6); } to { transform: rotate(240deg) scale(1.25); } }
.mo-silver .mo-word.up { color: #f4f7ff; text-shadow: 0 0 18px rgba(200, 225, 255, .95), 0 0 52px rgba(150, 190, 255, .65); }
.mo-silver .mo-burst { background: radial-gradient(circle, rgba(245, 250, 255, .85) 0%, rgba(190, 215, 255, .4) 12%, rgba(150, 190, 255, 0) 34%); }
.mo-silver .mo-ring, .mo-silver .mo-in-ring { border-color: rgba(220, 235, 255, .95); box-shadow: 0 0 18px rgba(170, 205, 255, .9); }
.mo-silver .mo-orb { background: radial-gradient(circle, #fff 0%, rgba(200, 225, 255, .7) 30%, rgba(150, 190, 255, 0) 70%); }
.mo-silver .mo-aura { background: conic-gradient(from 0deg, rgba(200, 225, 255, 0), rgba(230, 240, 255, .6), rgba(200, 225, 255, 0) 30%, rgba(255, 255, 255, .5) 55%, rgba(200, 225, 255, 0) 75%, rgba(230, 240, 255, .55)); }
.mo-thud { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, rgba(60, 60, 64, .2), rgba(10, 10, 12, .8) 75%); animation: mo-blood-like 1.2s ease-out forwards; }
@keyframes mo-blood-like { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: .6; } }
.mo-word.held { font-size: 44px; color: #b9b2a6; text-shadow: 0 0 10px rgba(0, 0, 0, .9); animation: mo-slam .4s cubic-bezier(.2, 1.4, .4, 1) both, dz-fade .5s ease 1s forwards; }
@media (prefers-reduced-motion: reduce) { .mo-in-ring, .mo-aura, .mo-pop { display: none; } .mo-orb { animation: mo-in .4s ease both; } }
/* 이 생의 이름(끝 화면 — 2026-10-21 결말·과업 다시 가르기): 결말 띠 아래, 가장 높은 과업을 크게 · 생의 이름 과업의 긴 글은 펼치거나 접어서 */
.life-name { margin: 22px 0 8px; padding: 16px 16px 14px; border-radius: 4px; border: 2px solid currentColor; background: rgba(255, 255, 255, .04); }
.life-name small { display: block; font-family: var(--ui-font); font-size: 11px; letter-spacing: .15em; opacity: .85; }
.life-name b { display: block; font-family: var(--title-font); font-size: 28px; line-height: 1.3; }
.life-name .life-how { display: block; margin-top: 2px; color: var(--dim); font-size: 15px; }
.title-text { margin: 6px 0; }
.title-text summary { cursor: pointer; font-family: var(--title-font); font-size: 15px; }
.title-text .epitaph { margin-top: 6px; }
.chip.feat.is-name { outline: 1px solid currentColor; outline-offset: 2px; }

/* 더빙되는 줄(main.js parasV) — 「살짝」: 앞뒤 짧은 여백, 왼쪽 가는 선, 아주 옅은 바탕. 말풍선·큰 상자 ✕ */
.vline { position: relative; margin: .55em 0; padding: .1em 2.2em .1em .8em; border-left: 2px solid rgba(232, 196, 140, .45); background: rgba(232, 196, 140, .035); }
.vline .vwho { display: flex; align-items: center; gap: 6px; font-family: var(--ui-font); font-size: 11px; letter-spacing: .04em; color: var(--faint); margin-bottom: 1px; }
/* #110 말한 사람 얼굴(입식 윗부분만 동그랗게) */
.vline .vface { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: 50% 6%; background: rgba(0, 0, 0, .35); border: 1px solid currentColor; flex: none; }
.vline .vre { position: absolute; right: .3em; top: 50%; transform: translateY(-50%); width: 1.7em; height: 1.7em; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--dim); font-size: 11px; line-height: 1; cursor: pointer; padding: 0; }
.vline .vre:hover, .vline .vre:active { color: var(--accent); border-color: var(--accent); }
/* 결과 칸에 펼친 새 삽화(#50 — 그림 칸이 화면 밖일 때만). 누르면 크게(#43 전신 보기와 같은 창) */
.cg-inline { margin: 0 0 .8em; border-radius: 6px; overflow: hidden; animation: cgIn .6s ease; cursor: zoom-in; }
.cg-inline img { display: block; width: 100%; height: auto; }
@keyframes cgIn { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: none; } }
/* 「나」 창 자리 사다리(#60 — js/info.js meHtml) */
.rank-ladder { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 4px 0 2px; }
.rank-ladder li { font-size: 12px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--faint); }
.rank-ladder li.past { color: var(--dim); }
.rank-ladder li.on { color: #e9c87e; border-color: #7a5520; background: rgba(240, 176, 74, .12); font-weight: 700; }
/* 인물 칸 입식 전신 보기(#43 — js/main.js openPeople) */
.person .face img[data-full] { cursor: zoom-in; }
.full-view { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .25s; cursor: zoom-out; }
.full-view.on { opacity: 1; }
.full-view img { max-width: 100%; max-height: calc(100% - 72px); object-fit: contain; }
.full-view .fv-cap { margin-top: 10px; text-align: center; color: #e8dcc4; font-size: 14px; max-width: 520px; }
.full-view .fv-cap small { color: #a89a80; margin-left: 4px; } .full-view .fv-cap div { color: #c9bca4; font-size: 12.5px; margin-top: 4px; }
[data-theme="light"] .vline { border-left-color: rgba(138, 79, 18, .45); background: rgba(138, 79, 18, .04); }
/* 말한 사람 색(#24 — js/main.js parasV): 장면 입식 인물은 금색, 그 밖은 사람마다 차분한 색. 이름표 글자는 그대로 둔다(색만으로 가르지 않게) */
.vline.vmain { border-left-color: rgba(233, 200, 126, .8); } .vline.vmain .vwho { color: #e9c87e; }
.vline[style*="--vh"] { border-left-color: hsl(var(--vh) 40% 58% / .7); } .vline[style*="--vh"] .vwho { color: hsl(var(--vh) 35% 68%); }
[data-theme="light"] .vline.vmain { border-left-color: rgba(150, 100, 20, .7); } [data-theme="light"] .vline.vmain .vwho { color: #8a5a10; }
[data-theme="light"] .vline[style*="--vh"] { border-left-color: hsl(var(--vh) 45% 40% / .6); } [data-theme="light"] .vline[style*="--vh"] .vwho { color: hsl(var(--vh) 45% 32%); }

/* 입식 이름표(main.js whoName): 그림 틀 맨 위 층(그림자 띠 z-index 2 위), 조금 위로, 누르면 인물 창 */
.frame .who-name { position: absolute; z-index: 4; bottom: 18px; right: 12px; cursor: pointer; font: inherit; font-family: var(--ui-font); }
.frame .who-name:disabled { cursor: default; }
.frame .who-name:not(:disabled):hover { border-color: var(--accent); color: #fff3d0; }
.frame .who-name:not(:disabled)::after { content: ' ›'; opacity: .6; }
.person.focus { outline: 1px solid rgba(216, 180, 106, .6); border-radius: 6px; background: rgba(216, 180, 106, .06); }

/* 이어 하기 단추의 판 이름: 판을 바꿔도 이어 하는 삶은 처음 판 그대로다(2026-10-22 사용자) */
.btn.resume .resume-pack { margin-left: 8px; padding: 1px 7px; border: 1px solid rgba(143,179,160,.5); border-radius: 999px; font-size: .78em; font-weight: 600; opacity: .9; vertical-align: 1px; }

/* 끝 화면 기억 고르기: 이번 생에 알게 됐거나 깊어진 기억은 틀 색부터 다르게(2026-10-22 사용자: 기억이 많아져 「이번 생에 알게 됨」 꼬리표만으로는 눈에 안 띈다).
   고른 것(.on)의 금색 틀과 겹쳐도 보이게 왼쪽 띠는 그림자로 */
.memories .choice.mem-new { border-color: #7fa8e8; background: color-mix(in srgb, #7fa8e8 10%, var(--panel)); box-shadow: inset 4px 0 0 #7fa8e8; }
.memories .choice.mem-new.on { box-shadow: inset 4px 0 0 #7fa8e8, 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }

/* 앱(스토어판)의 수익 장치(js/bm.js): 제목 화면의 환생 포인트 줄 · 판 자물쇠 · 상점 창. 웹·데모에는 이 요소들이 없다. */
.rpts { display: block; margin: 6px auto 0; padding: 4px 10px; background: none; border: none; font-family: var(--ui-font); font-size: 13px; color: var(--dim); letter-spacing: .02em; cursor: pointer; }
.rpts:hover { color: var(--text); }
.rpts.empty { color: #e08c7a; }
.tb-pick.locked .tb-lbl::after { content: ' 🔒'; font-size: 11px; }
.pack-lock { font-size: 11px; }
.bm-box .bm-pts { margin: 6px 0; font-family: var(--ui-font); font-size: 20px; letter-spacing: .1em; color: var(--accent); }
.bm-box .bm-pts b { letter-spacing: 0; color: var(--text); margin-left: 6px; }
.bm-box .btn[disabled] { opacity: .45; }
.shop-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.shop-item.focus { border-color: var(--accent); background: rgba(216, 180, 106, .08); }
.shop-item.owned { border-color: var(--jade); }
.shop-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.shop-txt b { font-family: var(--title-font); font-size: 16px; }
.shop-txt small { font-family: var(--ui-font); font-size: 12px; color: var(--dim); }
.shop-buy { flex: none; min-width: 92px; padding: 9px 12px; }
.shop-own { flex: none; font-family: var(--ui-font); font-size: 13px; color: var(--jade); }

/* 앱 첫 실행 로그인 화면(js/login.js, 2026-10-22): 제목 화면 위를 덮는다. 기록 잇기 창(.overlay 20)보다 위, 알림(.tip 30)·인트로보다 아래. */
.login-gate { position: fixed; inset: 0; z-index: 25; background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
  padding: calc(40px + env(safe-area-inset-top, 0px)) calc(20px + env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) calc(20px + env(safe-area-inset-left, 0px)); }
.login-inner { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 14px; text-align: center; word-break: keep-all; }
.login-gate .kicker { font-family: var(--ui-font); font-size: 12px; letter-spacing: .3em; color: var(--faint); }
.login-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; }
.login-art .login-bg { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.45); }
.login-art .login-logo { position: absolute; left: 50%; top: 50%; width: 78%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .7)); }
.login-title { margin: 6px 0 0; font-family: var(--title-font); font-size: 22px; font-weight: 800; }
.login-lede { margin: 0; color: var(--dim); font-size: 15px; line-height: 1.7; }
.login-btns { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 4px; }
.login-btns .g-sign, .login-btns .a-sign { width: min(100%, 300px); justify-content: center; padding: 12px 18px; font-size: 16px; }
.login-btns .dim { opacity: .45; }
.login-btns button:disabled { opacity: .6; cursor: default; }
.login-msg { min-height: 1.6em; margin: 0; font-family: var(--ui-font); font-size: 13px; color: var(--dim); line-height: 1.6; }
.login-msg.warn { color: #e08c7a; }
.login-guest { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 2px; }
.login-guest .btn.ghost { font-size: 14px; padding: 9px 22px; color: var(--dim); }
.login-note { margin: 0; font-family: var(--ui-font); font-size: 12px; color: var(--faint); line-height: 1.6; }

/* 인터넷 끊김 표시(js/main.js 끝) — 돌아올 때까지 위쪽 가운데에 떠 있다 */
.net-off { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; translate: -50% 0; z-index: 30; display: flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px; background: rgba(110, 24, 18, .94); color: #fff3ea; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45); pointer-events: none; animation: net-in .35s ease both; }
.net-off::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ff6a4d; animation: net-blink 1.2s ease-in-out infinite; }
@keyframes net-in { from { opacity: 0; translate: -50% -8px; } }
@keyframes net-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .net-off, .net-off::before { animation: none; } }

/* 붓글씨(js/main.js brushWord · img/word): 먹 글씨 그림을 틀로 써서 색을 칠한다. 네온처럼 빛내지 않고 먹빛으로, 검은 테두리에 은은한 번짐(2026-10-22 사용자 「너무 밝다, 피는 검붉다」 → 「너무 어둡다, 테두리 검게 + 살짝 블룸」). 빛은 바깥(filter)에 — 틀 안쪽 요소에 걸면 빛까지 잘린다.
   붓이 지나가듯 왼쪽부터 드러난다(--p). */
@property --p { syntax: '<percentage>'; inherits: false; initial-value: 115%; }
.brushed { color: transparent !important; text-shadow: none !important; letter-spacing: 0; }
.brush-ink { display: block; width: min(calc(1.7em * var(--ar)), 88vw); aspect-ratio: var(--ar); background: var(--ink, #f2e6cc);
  -webkit-mask: var(--w) center / contain no-repeat, linear-gradient(90deg, #000 var(--p), transparent calc(var(--p) + 14%));
  -webkit-mask-composite: source-in;
  mask: var(--w) center / contain no-repeat, linear-gradient(90deg, #000 var(--p), transparent calc(var(--p) + 14%));
  mask-composite: intersect;
  animation: brush-write .55s cubic-bezier(.45, 0, .2, 1) both; }
@keyframes brush-write { from { --p: -15%; } to { --p: 115%; } }
.mo-word.up.brushed { filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 18px rgba(235, 180, 85, 0.77)) drop-shadow(0 0 45px rgba(200, 140, 50, 0.42)); }
.mo-word.up .brush-ink { --ink: linear-gradient(180deg, #ecd08f 0%, #bf8d3e 50%, #74501b 100%); }
/* 화경 이상(--k 6·7): 흐린 은(회색 끝)이 금보다 낮아 보여서, 희게 달아오른 백은 + 금빛 테 + 더 넓은 푸른 빛, 그리고 빛이 한 번씩 훑고 지나간다 */
.mo-silver .mo-word.up.brushed { filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 2px rgba(255, 222, 140, 0.95)) drop-shadow(0 0 22px rgba(210, 228, 255, 0.95)) drop-shadow(0 0 60px rgba(140, 180, 255, 0.6)); }
.mo-silver .mo-word.up .brush-ink { --ink: linear-gradient(110deg, #c9d8f5 0%, #ffffff 38%, #fffbe9 46%, #ffffff 54%, #c9d8f5 100%); background-size: 260% 100%; background-position: 100% 0;
  animation: brush-write .55s cubic-bezier(.45, 0, .2, 1) both, ink-sheen 1.8s ease-in-out .6s infinite; }
@keyframes ink-sheen { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .mo-silver .mo-word.up .brush-ink { animation: brush-write .55s cubic-bezier(.45, 0, .2, 1) both; } }
.mo-word.qi.brushed { filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 18px rgba(205, 25, 15, 0.7)) drop-shadow(0 0 45px rgba(140, 0, 0, 0.49)); }
.mo-word.qi .brush-ink { --ink: linear-gradient(180deg, #a51818 0%, #6c0909 50%, #300202 100%); animation-duration: .3s; }
.dz-stamp.brushed { padding: 6px 14px 8px; }
.dz-stamp.brushed .brush-ink { width: min(calc(1.7em * var(--ar)), 80vw); }
.dz-stamp.win.brushed { filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 18px rgba(240, 190, 80, 0.75)) drop-shadow(0 0 40px rgba(220, 160, 60, 0.4)); }
.dz-stamp.win .brush-ink { --ink: linear-gradient(180deg, #ffe7a3 0%, #e0aa48 50%, #94631f 100%); }
.dz-stamp.lose.brushed { filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 15px rgba(165, 155, 140, 0.35)); }
.dz-stamp.lose .brush-ink { --ink: linear-gradient(180deg, #908a7f 0%, #4f4943 100%); }
@media (prefers-reduced-motion: reduce) { .brush-ink { animation: none; } }

/* 연출 아래 글(벽을 넘었다 · 기혈이 거꾸로 솟는다): 뒤 장면 글씨와 겹쳐도 읽히게 뒤를 흐리고 어둡게(2026-10-22 사용자) */
.mo-sub.up, .mo-sub.qi { padding: 5px 16px; border-radius: 999px; background: rgba(12, 6, 4, .5); box-shadow: 0 0 18px 10px rgba(12, 6, 4, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* 지나온 삶 한 줄 지우기(js/main.js 강호록) */
.life-del { float: right; margin-left: 8px; width: 26px; height: 26px; border: 1px solid var(--line, rgba(255,255,255,.18)); border-radius: 50%;
  background: transparent; color: var(--dim, #9a9284); font-size: 15px; line-height: 1; cursor: pointer; opacity: .55; }
.life-del:hover, .life-del:focus-visible { opacity: 1; color: #e2735f; border-color: #e2735f; }
/* 끝 화면 박제가 있는 줄(#86 · #87): 줄을 누르면 다시 보기, ☆ 간직하기, 이번 주 판이면 「랭킹에 올리기」(#88) */
.life-open { background: none; border: 0; padding: 2px 0; margin: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.life-open:hover, .life-open:focus-visible { color: var(--accent); }
.life-pin { float: left; margin: 0 6px 0 0; width: 26px; height: 26px; background: transparent; border: 0; color: var(--faint); font-size: 17px; line-height: 1; cursor: pointer; padding: 0; }
.life-pin.on { color: var(--accent); }
.life-row .life-rank { display: inline; margin: 0 0 0 6px; padding: 2px 4px; color: var(--accent); }
.kept-list { margin-bottom: 6px; }
/* 지나온 삶 다시 보기(js/main.js openPast) — 끝 화면 그대로, 읽기 전용 */
.past-book .past-art { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 6px; margin: 0 0 4px; }
.past-end { padding: 18px 4px 10px; background: none; border: 0; box-shadow: none; }
.past-end .past-note { margin-top: 22px; }
.past-act:empty { display: none; }
.past-people .chip.mate { border-color: var(--accent); color: var(--accent); }

/* 설정 창 맨 아래 버전(js/view.js · js/build-info.js) */
.vp-ver { margin-top: 8px; text-align: right; font-size: 11px; opacity: .55; letter-spacing: .04em; }

/* 처음 보는 장면(js/main.js sceneSeenBefore): 카드 모서리의 작은 금빛 점, 선택지는 1초 흐릿했다가 또렷해진다(그동안 누르지 못한다 — 더블클릭 방지) */
.card.new-scene { position: relative; }
.card.new-scene::before { content: ''; position: absolute; top: 10px; right: 10px; width: 6px; height: 6px; border-radius: 50%; background: #d8b45a; box-shadow: 0 0 6px rgba(216, 180, 90, .6); opacity: .85; }
.choices.arming .choice { opacity: .45; cursor: default; }
.choices .choice { transition: opacity .35s ease, border-color .15s, background .15s; }

/* 깊어진 성향(✦, engine traitLv 2): 제 등급 빛은 지키되 한 단 짙게 — 글자는 밝게, 칩은 속을 채우고 테를 금빛으로. ✦ 는 늘 금빛. */
.deep-mark { color: #e9c46a; }
.chip.deep { font-weight: 600; border-color: #8a6d2e; box-shadow: 0 0 6px rgba(233, 196, 106, .28); }
.chip.tier-common.deep { color: #f2e2b8; background: rgba(233, 196, 106, .10); }
.chip.tier-rare.deep { color: #a9cbff; background: rgba(90, 140, 230, .18); }
.chip.tier-epic.deep { color: #d9c0ff; background: rgba(140, 90, 220, .24); }
.chip.tier-legend.deep { color: #ffd27a; background: rgba(240, 176, 74, .22); }
.chip.tier-curse.deep { color: #ff9a8c; background: rgba(200, 60, 40, .22); border-color: #9a3f30; box-shadow: 0 0 6px rgba(255, 110, 90, .3); }
.traits b.tier-common.deep { color: #f2e2b8; }

/* 비무 까닭마다 다른 연출(main.js duelShow WHY_LINE) — good 은 내 쪽이 이긴 까닭(금빛), bad 는 진 까닭(잿빛·핏빛) */
.dz-why { position: absolute; left: 50%; top: calc(40% + 66px); translate: -50% 0; white-space: nowrap; font-family: var(--ui-font); font-size: 15px; letter-spacing: .32em; text-shadow: 0 0 8px #000, 0 0 2px #000;
  animation: mo-in .4s ease .25s both, dz-fade .5s ease 1.5s forwards; }
.dz-why.win { color: #f3d58a; } .dz-why.lose { color: #b9b0a4; }
.dz-glory { position: absolute; left: 50%; top: 40%; width: 90vmax; height: 90vmax; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 228, 150, .42) 0%, rgba(255, 200, 90, .16) 18%, rgba(255, 190, 80, 0) 40%); animation: mo-burst 1.4s ease-out forwards; }
.dz-slash.heavy { height: 6px; box-shadow: 0 0 26px rgba(255, 220, 150, .95); }
.dz-slash.flurry { height: 2px; animation-duration: .24s; opacity: .85; }
/* 설정 색 줄(#91 — js/view.js palRow) */
.vp-pal { gap: 6px; flex-wrap: wrap; } .vp-col { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--dim); }
.vp-col input[type="color"] { width: 28px; height: 22px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: none; }
/* 싸움 선택지 미리 경고(#76 — js/engine.js warnOf): 한 단 위 주황 · 두 단 이상 붉게 · 처음 생의 피하는 길 */
.choice.warn-up { border-color: #8a5a22; } .choice.warn-big { border-color: #8a2c22; }
.choice .needs.warn-up { color: #f0b04a; border-color: #7a5520; } .choice .needs.warn-big { color: #f0836f; border-color: #7a2c22; background: rgba(196, 83, 63, .12); }
.choice .needs.survive { color: #8fd18f; border-color: #3c5a3c; }
/* #48 무기 · 작전 갈래(js/main.js duelShow) */
.dz-slash.w-blade { height: 2px; left: -20%; width: 140%; }
.dz-slash.w-staff { height: 60px; background: none !important; border-top: 4px solid rgba(255, 236, 200, .9); border-radius: 50% 50% 0 0; box-shadow: none; }
.dz-slash.w-bow { left: 20%; width: 45%; height: 2px; }
.dz-ring { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 3px solid rgba(255, 225, 170, .9); border-radius: 50%; animation: dz-ring .45s ease-out forwards; }
@keyframes dz-ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(4); opacity: 0; } }
.dz-mark { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2px dashed rgba(255, 255, 255, .85); border-radius: 50%; animation: dz-mark .5s ease-out forwards; }
@keyframes dz-mark { from { transform: scale(2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dz-clash { position: absolute; left: 50%; top: 46%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #fff6d8; box-shadow: 0 0 30px 14px rgba(255, 210, 120, .9); animation: dz-ring .5s ease-out forwards; }
.dz-retreat { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .35)); animation: dz-retreat .7s ease-out forwards; }
@keyframes dz-retreat { from { transform: translateX(-30%); opacity: 0; } 50% { opacity: 1; } to { transform: translateX(30%); opacity: 0; } }
.dz-slash.cross { height: 6px; }
.dz-slash.feint { height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 248, 230, .7) 0 14px, transparent 14px 26px); box-shadow: none; animation: dz-feint .5s ease-out forwards; }
@keyframes dz-feint { 0% { transform: rotate(var(--a)) scaleX(0); opacity: .9; } 45% { transform: rotate(var(--a)) scaleX(1); opacity: .7; } 100% { transform: rotate(var(--a)) scaleX(1) translateY(-14px); opacity: 0; filter: blur(3px); } }
.dz-slash.ally { left: 50%; width: 70%; translate: -50% 0; height: 4px; background: linear-gradient(90deg, transparent, rgba(190, 240, 210, .95) 50%, transparent); box-shadow: 0 0 16px rgba(160, 230, 190, .8); }
.dz-aura { position: absolute; left: 50%; top: 42%; width: 90px; height: 90px; translate: -50% -50%; border-radius: 50%; border: 3px solid; animation: mo-ring .9s ease-out forwards; }
.dz-aura.good { border-color: rgba(255, 215, 130, .85); box-shadow: 0 0 22px rgba(255, 200, 100, .7), inset 0 0 14px rgba(255, 200, 100, .45); }
.dz-aura.bad { border-color: rgba(150, 60, 50, .85); box-shadow: 0 0 22px rgba(120, 20, 10, .7), inset 0 0 14px rgba(120, 20, 10, .45); }
.dz-freeze { position: absolute; inset: 0; background: #fffdf4; animation: dz-freeze .22s ease-out forwards; }
@keyframes dz-freeze { 0% { opacity: .75; } 100% { opacity: 0; } }
.dz-glint { position: absolute; top: -20%; left: -60%; width: 40%; height: 140%; rotate: 18deg; animation: dz-glint .9s ease-in-out forwards; }
.dz-glint.good { background: linear-gradient(90deg, transparent, rgba(255, 240, 190, .32), transparent); }
.dz-glint.bad { background: linear-gradient(90deg, transparent, rgba(160, 170, 190, .26), transparent); }
@keyframes dz-glint { from { transform: translateX(0); } to { transform: translateX(420%); } }
.dz-flicker { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); animation: dz-flicker .3s steps(2, jump-none) forwards; }
@keyframes dz-flicker { 0% { opacity: 1; } 50% { opacity: 0; } 75% { opacity: .8; } 100% { opacity: 0; } }
.dz-ache { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(120, 18, 10, .5) 100%); animation: dz-ache .52s ease-in-out 3; }
@keyframes dz-ache { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dz-why { animation: dz-fade .5s ease 1.5s forwards; } }

/* 악명(engine infamy · data/infamy.js — 2026-10-26 개편): 명성 칸 밑 얇은 붉은 줄 + 이름 옆 「악명★★」. 한 번도 악행을 안 한 판 · 0 으로 떨군 판에는 없다.
   줄의 눈금은 별 문턱(8 · 20 · 35 · 55 · 80 — engine INFAMY_STEPS) */
/* 「악명★★★★★」는 붉은 줄 바로 밑에 — 이름 옆에 두면 폰 너비에서 별 다섯이 줄을 넘겨 명성 숫자만 한 줄 내려갔다. 그 칸만 아래로 조금 늘린다 */
.stat.has-inf { margin-bottom: 18px; }
.stats:has(.has-inf) { align-items: start; } /* 그 여백에 다른 칸이 늘어나 막대가 아래로 처지지 않게 */
.stat .inf-lab { position: absolute; right: 0; top: calc(100% + 7px); font-size: 9px; line-height: 1.2; font-weight: 600; letter-spacing: 0; color: #e2574a; text-shadow: 0 0 6px rgba(226, 87, 74, .45); white-space: nowrap; }
.stat .infbar { position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 2px; z-index: 1;
  background: linear-gradient(90deg, #d24a3c 0 var(--iv), rgba(226, 87, 74, .16) var(--iv) 100%); box-shadow: 0 0 5px rgba(226, 87, 74, .35); }
.stat .infbar::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent calc(8% - .5px), rgba(0, 0, 0, .75) calc(8% - .5px) calc(8% + .5px), transparent calc(8% + .5px) calc(20% - .5px), rgba(0, 0, 0, .75) calc(20% - .5px) calc(20% + .5px), transparent calc(20% + .5px) calc(35% - .5px), rgba(0, 0, 0, .75) calc(35% - .5px) calc(35% + .5px), transparent calc(35% + .5px) calc(55% - .5px), rgba(0, 0, 0, .75) calc(55% - .5px) calc(55% + .5px), transparent calc(55% + .5px) calc(80% - .5px), rgba(0, 0, 0, .75) calc(80% - .5px) calc(80% + .5px), transparent calc(80% + .5px)); }
.choice .needs.evil { color: #e8836f; border-color: #6b2c22; }

/* 혼불(환생 포인트 — js/bm.js paint · flames): 제목 화면의 세 불(2026-10-26 다섯 → 셋). 켜진 불은 따뜻하게 일렁이고 꺼진 불은 잿빛 불씨. 그림(img/ui)이 없으면 CSS 불꽃 */
#rpts { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hb-row { display: inline-flex; gap: 6px; align-items: flex-end; }
.hb { display: inline-block; width: 26px; height: 32px; background: center / contain no-repeat; }
.hb.on { background-image: url("../img/ui/honbul_on.webp?v=2"), radial-gradient(ellipse 45% 55% at 50% 62%, #fff6d8 0%, #f2c46a 45%, rgba(230, 140, 50, 0) 72%);
  filter: drop-shadow(0 0 6px rgba(255, 196, 96, .55)); animation: hb-flicker 1.8s ease-in-out infinite; transform-origin: 50% 95%; }
/* 불마다 박자 · 길이를 달리해 같이 흔들리지 않게(2026-10-26 사용자: 불꽃처럼 흔들리듯) */
.hb.on:nth-child(2) { animation-duration: 2.15s; animation-delay: -.7s; } .hb.on:nth-child(3) { animation-duration: 1.95s; animation-delay: -1.3s; }
.hb.off { background-image: url("../img/ui/honbul_off.webp?v=2"), radial-gradient(circle 3px at 50% 80%, #6d655c 0%, rgba(109, 101, 92, 0) 100%); opacity: .9; filter: brightness(1.9) saturate(.6); }
/* 불꽃: 밑동은 그대로 두고 끝이 좌우로 휘청이며(skew) 늘었다 줄었다, 빛무리도 따라 밝았다 어두워진다 — 고르지 않은 박자로 */
@keyframes hb-flicker {
  0%, 100% { transform: skewX(0deg) scale(1, 1); filter: drop-shadow(0 0 6px rgba(255, 196, 96, .55)) brightness(1); }
  12% { transform: skewX(-5deg) scale(.97, 1.06); }
  26% { transform: skewX(3deg) scale(1.03, .95); filter: drop-shadow(0 0 10px rgba(255, 190, 90, .8)) brightness(1.14); }
  39% { transform: skewX(-2deg) scale(.99, 1.03); }
  53% { transform: skewX(6deg) scale(.96, 1.08); filter: drop-shadow(0 0 5px rgba(255, 196, 96, .45)) brightness(.93); }
  67% { transform: skewX(-4deg) scale(1.02, .97); }
  81% { transform: skewX(2deg) scale(.98, 1.05); filter: drop-shadow(0 0 8px rgba(255, 200, 100, .7)) brightness(1.08); }
}
.hb-cap { font-family: var(--ui-font); font-size: 13px; color: var(--dim); letter-spacing: .04em; }
#rpts.full .hb-cap { color: var(--accent); }
#rpts.empty .hb-cap { color: #cf9a8c; }
.hb-tip { font-family: var(--ui-font); font-size: 12px; color: #b9ae9c; max-width: 300px; text-align: center; line-height: 1.5; opacity: .9; }
.bm-box .bm-pts .hb { width: 30px; height: 36px; }
@media (prefers-reduced-motion: reduce) { .hb.on { animation: none; } }

/* ---------- 인게임 팝업(js/dialog.js) — window.confirm · alert 대신 ---------- */
.dlg-wrap { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px 18px;
            background: rgba(6, 5, 5, 0); transition: background .18s ease; }
.dlg-wrap.on { background: rgba(6, 5, 5, .78); }
.dlg-wrap.out { background: rgba(6, 5, 5, 0); pointer-events: none; }
.dlg { position: relative; width: 100%; max-width: 380px; padding: 26px 22px 18px; border-radius: 4px;
       background: linear-gradient(180deg, #221e1a, #171411); border: 1px solid #4a3f2e;
       box-shadow: 0 0 0 1px #0b0a09, 0 0 0 4px #1c1814, 0 0 0 5px #3a3125, 0 18px 50px rgba(0, 0, 0, .65);
       opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .18s ease, transform .18s ease; }
.dlg-wrap.on .dlg { opacity: 1; transform: none; }
.dlg-wrap.out .dlg { opacity: 0; transform: translateY(6px) scale(.98); }
.dlg-title { margin: 0 0 10px; font-family: var(--title-font); font-size: 19px; font-weight: 800; color: var(--accent); text-align: center; letter-spacing: .03em; }
.dlg-text { font-size: 16px; line-height: 1.7; color: var(--text); text-align: center; word-break: keep-all; }
.dlg-btns { display: flex; gap: 10px; margin-top: 20px; }
.dlg-btns .btn { flex: 1; min-height: 44px; padding: 10px 12px; font-size: 14px; line-height: 1.35; word-break: keep-all; }
.dlg-btns .btn.ghost { color: var(--dim); }
.btn.danger { background: var(--blood); color: #fff3ee; }
@media (prefers-reduced-motion: reduce) { .dlg-wrap, .dlg { transition: none; } }

/* ---------- 그림 크게 보기 · 저장 · 화면 공유(js/shot.js) ---------- */
.frame-tools { position: absolute; z-index: 4; top: 8px; right: 8px; display: flex; gap: 6px; }
.ft-btn { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 50%;
          background: rgba(14, 13, 12, .55); border: 1px solid rgba(216, 180, 106, .35); color: #e9dcc0; backdrop-filter: blur(3px); opacity: .8; transition: opacity .15s, border-color .15s; }
.ft-btn:hover, .ft-btn:focus-visible { opacity: 1; border-color: var(--accent); }
.ft-btn:disabled { opacity: .35; }
.overlay.lbox { z-index: 120; align-items: center; padding: 16px; background: rgba(6, 5, 5, .94); overflow: hidden; } /* 키운 그림(transform)이 스크롤 막대를 만들지 않게 */
.lbox-in { width: 100%; max-width: 1100px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lbox-img { display: block; max-width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; border-radius: 3px; box-shadow: 0 0 0 1px #3a3125, 0 18px 50px rgba(0, 0, 0, .6); }
/* 손가락 줌(shot.js pinch): 그림만 키운다. 키운 그림은 창 밖으로 넘쳐 화면을 덮고, 단추는 그 위에 남는다. */
.lbox-img { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transform-origin: center; position: relative; z-index: 1; cursor: zoom-in; }
.lbox-img.zoomed { cursor: grab; border-radius: 0; }
/* #121 선택지 속 무공 이름을 품계 색으로(괄호 「(비전)」 대신 — js/main.js gradeMark) */
.choice .art-g { font-weight: 700; }
/* #103 배경 위에 입식을 같이 세운 크게 보기 — 「인물 끄기」면 .nofig */
.lbox-stack { position: relative; line-height: 0; overflow: hidden; }
.lbox-stack .lbox-bg { display: block; max-width: 100%; max-height: calc(100dvh - 120px); pointer-events: none; }
.lbox-stack .lbox-fig { position: absolute; bottom: 0; left: 50%; height: 94%; width: auto; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 0 18px rgba(0, 0, 0, .55)); }
.lbox-stack.nofig .lbox-fig { display: none; }
.lbox-hint { margin: -4px 0 0; font: 12px var(--ui-font); color: var(--dim); text-align: center; }
@media (hover: hover) and (pointer: fine) { .lbox-hint { display: none; } }
.lbox-btns { display: flex; gap: 10px; width: 100%; max-width: 380px; position: relative; z-index: 2; }
.lbox-btns .btn { flex: 1; min-height: 44px; }
.shot-toast { position: fixed; z-index: 210; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 10px); opacity: 0;
              padding: 10px 18px; border-radius: 4px; background: #221e1a; border: 1px solid #4a3f2e; color: var(--text); font-family: var(--ui-font); font-size: 14px; transition: opacity .2s, transform .2s; pointer-events: none; }
.shot-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 그린 장식 입히기(img/ui/ui_*, Codex — 2026-10-23 사용자: 「코드로 만든 ui는 조금 투박하다」) ----------
   판: 먹빛 옻칠 질감 + 금 구름 모서리 두 개(왼쪽 위 · 오른쪽 아래). 큰 단추: 바랜 금박. 팝업 제목 밑: 매듭 구분선. */
.dlg, .book, .sync-box { position: relative; background: linear-gradient(180deg, rgba(40, 34, 27, .55), rgba(14, 12, 10, .35)), url('../img/ui/ui_panel.jpg?v=2') center / 256px repeat, #1c1814;
  border: 1px solid #4a3f2e; box-shadow: 0 0 0 1px #0b0a09, 0 18px 50px rgba(0, 0, 0, .55); }
.sync-box { border-radius: 4px; padding: 22px 20px; }
.dlg::before, .dlg::after, .book::before, .book::after, .sync-box::before, .sync-box::after {
  content: ''; position: absolute; width: 58px; height: 58px; margin: 0; opacity: .9; pointer-events: none;
  background: url('../img/ui/ui_corner.webp?v=2') 0 0 / contain no-repeat; }
.dlg::before, .book::before, .sync-box::before { top: 5px; left: 5px; bottom: auto; }
.dlg::after, .book::after, .sync-box::after { right: 5px; bottom: 5px; top: auto; left: auto; transform: rotate(180deg); }
.dlg-title::after { content: ''; display: block; height: 20px; margin: 8px auto 0; max-width: 240px; background: url('../img/ui/ui_divider.webp?v=2') center / contain no-repeat; opacity: .85; }
/* 금박 질감 그림(ui_button.jpg)은 결이 거슬려(2026-10-24 사용자) 무늬 없는 금빛 그러데이션으로 — 판 색(--accent)을 따라 밝은 테마에서도 맞는다 */
.btn:not(.ghost):not(.danger):not(.resume) { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff6dc) 0%, var(--accent) 52%, color-mix(in srgb, var(--accent) 84%, #2a1a06) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 248, 225, .55), inset 0 -2px 0 rgba(70, 45, 12, .3), 0 1px 3px rgba(0, 0, 0, .3); text-shadow: 0 1px 0 rgba(255, 240, 210, .35); }
.btn:not(.ghost):not(.danger):not(.resume):active { filter: brightness(.92); }

/* ---------- UI 2차(2026-10-23): 선택지 · 능력치 붓질 · 위 단추줄 · 해 넘김 줄 · 제목 화면 ---------- */
/* 선택지: 옻칠 판 질감, 번호는 금테 먹빛 원패(img/ui/ui_num.webp?v=2), 손을 대면 금빛 테가 오른다 */
.choice { background: linear-gradient(90deg, rgba(30, 26, 21, .92), rgba(22, 19, 16, .86)), url('../img/ui/ui_panel.jpg?v=2') center / 256px repeat; border-color: #352e26;
  padding-left: 50px; box-shadow: inset 0 1px 0 rgba(255, 236, 190, .03); }
.choice:hover:not(:disabled):not(.spent) { border-color: rgba(216, 180, 106, .55); background: linear-gradient(90deg, rgba(48, 40, 28, .92), rgba(26, 22, 17, .86)), url('../img/ui/ui_panel.jpg?v=2') center / 256px repeat;
  box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .12), 0 0 12px rgba(216, 180, 106, .08); }
.choice .num { left: 11px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; display: grid; place-items: center; font-family: var(--title-font); font-size: 13px; font-weight: 700;
  color: #e6cf98; background: url('../img/ui/ui_num.webp?v=2') center / contain no-repeat; text-shadow: 0 1px 2px #000; }
.choice.picked { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(216, 180, 106, .3); }
.choice.picked .num { color: #fff1c8; filter: drop-shadow(0 0 4px rgba(216, 180, 106, .6)); }
/* 능력치: 납작한 색 막대 대신 붓질(img/ui/ui_brush.webp 를 가면으로 — 2026-10-24 끝이 마른 꼬리처럼 흩어져 값이 어디까지인지 안 보였다 → 꾹 눌러 멈춘 둥근 끝, Codex) */
.stat::before { height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.stat i, .stat u { height: 8px; }
.stat i { border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c) 45%, transparent));
  -webkit-mask: url('../img/ui/ui_brush.webp?v=3') left center / 100% 100% no-repeat; mask: url('../img/ui/ui_brush.webp?v=3') left center / 100% 100% no-repeat; }
.stats.big .stat::before, .stats.big .stat i, .stats.big .stat u { height: 10px; }
/* 붓질 그림 한 장을 막대 길이대로 통째로 늘이면 값이 작을 땐 찌그러지고 클 땐 늘어진다(2026-10-25 사용자) → 그림은 막대 전체 길이로 고정하고
   값만큼만 드러낸다(--v, main.js). 오른쪽 끝은 값에서 곧게 잘리고, 가득 찼을 때만 둥근 붓 끝이 보인다. */
.stat i[style*="--v"] { width: 100% !important; clip-path: inset(0 calc(100% - var(--v)) 0 0); transition: clip-path .5s ease; }
/* 위 단추줄: 옻칠 패 */
.hud-btns button { background: linear-gradient(180deg, rgba(40, 34, 27, .9), rgba(20, 17, 14, .9)); border-color: #3a3125; color: #b9ae9c; transition: color .15s, border-color .15s; }
.hud-btns button:hover, .hud-btns button:focus-visible { color: var(--accent); border-color: rgba(216, 180, 106, .5); }
/* 해 넘김 줄: 가는 금선 대신 매듭 구분선의 양 날개 */
.year-turn::before, .year-turn::after { height: 12px; background: url('../img/ui/ui_divider.webp?v=2') center / auto 12px no-repeat; opacity: .55; }
.year-turn::before { background-position: right center; } .year-turn::after { background-position: left center; }
/* 제목 화면: 그림에 금 모서리, 제목 글자에 바랜 금빛 */
.title-art { box-shadow: 0 0 0 1px #3a3125, 0 10px 30px rgba(0, 0, 0, .5); }
.title-art::before, .title-art::after { content: ''; position: absolute; z-index: 2; width: 64px; height: 64px; pointer-events: none; background: url('../img/ui/ui_corner.webp?v=2') 0 0 / contain no-repeat; filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 3px rgba(0, 0, 0, .85)); }
.title-art::before { top: 6px; left: 6px; } .title-art::after { right: 6px; bottom: 6px; transform: rotate(180deg); }
.title-screen h1 { background: linear-gradient(180deg, #f3e6c4 10%, #d8b46a 60%, #a8823d); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }

/* ---------- UI 3차(2026-10-23 「앱 관련 다 하고 빌드」): 설정 창 · 알림 · 로그인 그림 ---------- */
/* 설정 · 판 고르기 창(.vol-pop): 옻칠 판 + 금 모서리, 고른 칸은 금빛으로 물든다 */
.vol-pop { background: linear-gradient(180deg, rgba(40, 34, 27, .6), rgba(14, 12, 10, .4)), url('../img/ui/ui_panel.jpg?v=2') center / 256px repeat, #1c1814;
  border-color: #4a3f2e; box-shadow: 0 0 0 1px #0b0a09, 0 14px 36px rgba(0, 0, 0, .6); }
.vol-pop::before, .vol-pop::after { content: ''; position: absolute; width: 32px; height: 32px; pointer-events: none; opacity: .85; background: url('../img/ui/ui_corner.webp?v=2') 0 0 / contain no-repeat; }
.vol-pop::before { top: 4px; left: 4px; } .vol-pop::after { right: 4px; bottom: 4px; transform: rotate(180deg); }
.vol-pop .vp-title { color: var(--accent); font-family: var(--title-font); padding-left: 18px; }
.vol-pop .pill { background: rgba(14, 12, 10, .5); border-color: #3a3125; }
.vol-pop .pill.on { background: linear-gradient(180deg, rgba(216, 180, 106, .22), rgba(216, 180, 106, .08)); border-color: rgba(216, 180, 106, .75); color: #f0d898; }
/* 알림(.tip · 저장 알림): 같은 판 */
.tip, .shot-toast { background: linear-gradient(180deg, rgba(40, 34, 27, .7), rgba(14, 12, 10, .5)), url('../img/ui/ui_panel.jpg?v=2') center / 256px repeat, #1c1814; border-color: #5a4b30; }
/* 로그인 화면 그림: 제목 화면과 같은 금 모서리 */
.login-art { box-shadow: 0 0 0 1px #3a3125, 0 10px 30px rgba(0, 0, 0, .5); }
.login-art::before, .login-art::after { content: ''; position: absolute; z-index: 2; width: 56px; height: 56px; pointer-events: none; background: url('../img/ui/ui_corner.webp?v=2') 0 0 / contain no-repeat; filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 3px rgba(0, 0, 0, .85)); }
.login-art::before { top: 6px; left: 6px; } .login-art::after { right: 6px; bottom: 6px; transform: rotate(180deg); }
.login-title { background: linear-gradient(180deg, #f3e6c4 10%, #d8b46a 60%, #a8823d); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 개인정보처리방침 · 문의 메일 한 줄(js/legal.js — 설정 창 · 로그인 화면 · 상점 창 맨 아래, 2026-10-24). 눈에 띄지 않게 작고 흐리게 */
.legal-line { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 8px; font-family: var(--ui-font); font-size: 11px; line-height: 1.6; color: var(--faint); }
.legal-link { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }
.legal-sep { opacity: .6; }
.legal-copy { color: var(--dim); cursor: pointer; -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; border-bottom: 1px dotted var(--line); }
.view-pop .legal-line { justify-content: flex-end; margin-top: 4px; }
.login-inner .legal-line { margin-top: 0; }
/* 오픈소스 라이선스 창(js/legal.js openLicenses): 앱에 묶은 licenses.html 을 iframe 으로. 로그인 화면(25) · 설정 창(60) 위, 인게임 팝업(200) 아래 */
.overlay.oss-ov { z-index: 150; align-items: stretch; padding: calc(env(safe-area-inset-top, 0px) + 16px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px); overflow: hidden; }
.oss-box { width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.oss-frame { flex: 1; min-height: 0; width: 100%; border: 1px solid var(--line); border-radius: 4px; background: #0f1012; }
html[data-theme="light"] .oss-frame { background: #f4efe4; }
.oss-box .overlay-close { margin: 0 auto; flex: none; }
.shop-refund { font-size: 11px; line-height: 1.6; }

/* ---------- 보조 단추(닫는다 · 아니요 · 그만둔다): 투명 + 얇은 테두리라 잘 안 보였다(2026-10-24 사용자) → 옻칠 판에 금빛 테 ---------- */
.btn.ghost { background: linear-gradient(180deg, #2c261f, #1b1714); border: 1px solid #6a5838; color: #e9dfcb; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 236, 190, .06), 0 1px 2px rgba(0, 0, 0, .4); }
.btn.ghost:hover, .btn.ghost:focus-visible { border-color: var(--accent); color: #fff1cf; }
.btn.ghost:active { filter: brightness(.92); }
.dlg-btns .btn.ghost, .cloud-row .btn.ghost, .login-guest .btn.ghost { color: #ddd2bd; }
.overlay-close { min-width: 140px; min-height: 44px; }

/* ---------- 제목 로고 · 계정 확인 중 · 판 맛보기(2026-10-24) ---------- */
/* 제목: 붓글씨 로고를 산문 그림 왼쪽 위에 작게(그림을 다 덮거나 누르지 않는다 — 2026-10-24 사용자). 로고 뒤만 살짝 어둡게 해서 금빛이 읽히게 */
.title-screen h1.title-logo { position: absolute; z-index: 1; left: 0; top: 0; width: 40%; max-width: 260px; margin: 0; padding: 4.5% 0 0 5%; font-size: 0; line-height: 0;
  background: radial-gradient(ellipse 70% 70% at 40% 40%, rgba(8, 6, 4, .5), rgba(8, 6, 4, 0) 75%); -webkit-background-clip: border-box; background-clip: border-box; color: inherit; filter: none; }
.title-screen h1.title-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .8)) drop-shadow(0 0 2px rgba(0, 0, 0, .6)); }
/* 계정 확인 중(제목 화면 기록 잇기 줄 — 로그인 상태를 알기 전에 흰 구글 단추가 잠깐 비치지 않게). 구글 단추 줄과 같은 높이 */
.cloud-wait { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--ui-font); font-size: 13px; color: var(--faint); }
.cloud-wait i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; animation: cloud-wait 1s linear infinite; }
@keyframes cloud-wait { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cloud-wait i { animation: none; } }
/* 판 맛보기(js/sample.js): 상점 판 상품 · 판 고르기 창의 잠긴 판 옆 단추, 그리고 그림 보기 창 */
.shop-smp, .pack-smp { border: 1px solid rgba(216, 180, 106, .5); background: rgba(216, 180, 106, .08); color: var(--accent); font-family: var(--ui-font); font-size: 12px; cursor: pointer; }
.shop-smp:hover, .pack-smp:hover { border-color: var(--accent); background: rgba(216, 180, 106, .16); }
.shop-smp { align-self: flex-start; margin-top: 6px; padding: 4px 12px; border-radius: 999px; }
.view-pop.pack-pop { width: min(272px, calc(100vw - 16px)); }
.pack-opt-row { display: flex; gap: 6px; align-items: stretch; width: 100%; }
.pack-opt-row .pack-opt { flex: 1; min-width: 0; }
.pack-smp { flex: none; padding: 0 10px; border-radius: 6px; }
.smp-lede { margin: 0; }
.smp-stage { margin: 10px 0 0; }
.smp-frame { position: relative; height: clamp(240px, 46vh, 380px); display: grid; place-items: center; overflow: hidden; border-radius: 3px; cursor: pointer;
  background: radial-gradient(ellipse 60% 70% at 50% 62%, rgba(216, 180, 106, .16), transparent 72%), url('../img/ui/ui_panel.jpg?v=2') center / 256px repeat, #15120f;
  box-shadow: 0 0 0 1px #3a3125, inset 0 0 40px rgba(0, 0, 0, .6); }
.smp-frame::before, .smp-frame::after { content: ''; position: absolute; z-index: 2; width: 44px; height: 44px; pointer-events: none; background: url('../img/ui/ui_corner.webp?v=2') 0 0 / contain no-repeat; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .85)); }
.smp-frame::before { top: 5px; left: 5px; } .smp-frame::after { right: 5px; bottom: 5px; transform: rotate(180deg); }
.smp-frame img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .6)); }
.smp-frame.cg { height: auto; aspect-ratio: 16 / 10; } /* 삽화는 폭에 맞춰(폰에서 위아래가 비지 않게). 작은 그림 줄이 위에 있어 높이가 바뀌어도 누를 자리는 그대로 */
.smp-frame.cg img { width: 100%; height: 100%; filter: none; }
.smp-cap { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 8px; margin-top: 10px; text-align: center; word-break: keep-all; }
.smp-cap b { font-family: var(--title-font); font-size: 17px; color: var(--accent); }
.smp-cap span { font-family: var(--ui-font); font-size: 12px; color: var(--dim); }
.smp-cap small { flex-basis: 100%; font-size: 14px; color: var(--text); line-height: 1.6; }
.smp-thumbs { display: flex; gap: 6px; margin-top: 12px; }
.smp-lede + .smp-thumbs { margin-top: 10px; }
.smp-th { flex: 1 1 0; min-width: 0; height: 58px; padding: 0; border: 1px solid #3a3125; border-radius: 4px; overflow: hidden; background: #15120f; opacity: .62; transition: opacity .15s, border-color .15s; }
.smp-th.cg { flex-grow: 1.7; }
.smp-th img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.smp-th.cg img { object-position: center; }
.smp-th:hover { opacity: .9; }
.smp-th.on { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 1px rgba(216, 180, 106, .35); }
.smp-note { margin-top: 12px; }
/* 강호록 길잡이(js/main.js bookHelp): 탭 줄 + 찾기 칸 + 칸 바로 가기를 한 덩이로 위에 붙인다(예전엔 탭 줄만 붙었다) */
.book-head { position: sticky; top: -40px; z-index: 3; margin: 10px -20px 6px; padding: 10px 20px 8px; border-bottom: 1px solid #3a3125;
  background: linear-gradient(180deg, rgba(40, 34, 27, .96), rgba(24, 20, 16, .97)), url('../img/ui/ui_panel.jpg?v=2') center / 256px repeat, #1c1814; box-shadow: 0 8px 14px -10px rgba(0, 0, 0, .8); }
.book-head .book-nav { position: static; margin: 0; padding: 0; background: none; border: 0; }
.book-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; }
.book-find { flex: 1 1 160px; min-width: 0; max-width: 260px; padding: 6px 10px; border-radius: 999px; border: 1px solid #3a3125; background: rgba(14, 12, 10, .6); color: var(--text); font-family: var(--ui-font); font-size: 13px; }
.book-find:focus { outline: none; border-color: rgba(216, 180, 106, .7); }
.book-hits { font-family: var(--ui-font); font-size: 12px; color: var(--accent); }
.book-jump { display: flex; flex-wrap: nowrap; gap: 6px; width: 100%; overflow-x: auto; scrollbar-width: none; }
.book-jump:empty { display: none; }
.book-jump::-webkit-scrollbar { display: none; }
.book-jump .pill { flex: none; font-size: 12px; padding: 3px 10px; background: rgba(14, 12, 10, .5); border-color: #3a3125; color: var(--dim); }
.book-jump .pill:hover { color: var(--accent); border-color: rgba(216, 180, 106, .6); }
.book ul.clamp > li:nth-child(n+31) { display: none; }
.book.finding ul.clamp > li:nth-child(n+31) { display: list-item; }
.book li.miss, .book .mem-row.miss { display: none !important; }
.book-more { margin-top: 2px; }
.book.finding .book-more { display: none; }
.book-top { position: fixed; z-index: 21; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(216, 180, 106, .6); background: linear-gradient(180deg, #2c261f, #1b1714); color: var(--accent); font-family: var(--ui-font); font-size: 13px; box-shadow: 0 6px 16px rgba(0, 0, 0, .6); }
.book-top[hidden] { display: none; }

/* ---------- 글꼴 고르기(설정 「글꼴」 — js/view.js font): 고딕이면 본문을 나눔고딕으로. 제목 · 로고는 그대로 ---------- */
html[data-font="1"] { --body-font: 'NanumBarunGothic', 'Nanum Gothic', system-ui, sans-serif; }
html[data-font="1"] body { letter-spacing: -.005em; }

/* ---------- 랭킹(js/rank.js): 제목 화면 「랭킹」 · 보드 창(전체 · 이번 주) · 칸 하나(어떻게 얻었는지) · 끝 화면 「랭킹에 올리기」 ---------- */
/* 랭킹 단추는 강호록(금빛)과 다른 쪽빛으로(10-30 사용자: 둘이 같아 순간 헷갈렸다) */
.book-big.rank-big { background: linear-gradient(90deg, rgba(120, 170, 235, .16), rgba(120, 170, 235, .04)); border-color: rgba(120, 170, 235, .55); }
.book-big.rank-big:hover { border-color: #8fbcf2; }
.book-big.rank-big b, .book-big.rank-big .rank-ico { color: #9cc4f5; }
html[data-theme="light"] .book-big.rank-big b, html[data-theme="light"] .book-big.rank-big .rank-ico { color: #2f63b8; }
.book-big .rank-ico { font-family: var(--title-font); font-weight: 800; font-size: 20px; color: var(--accent); width: 26px; text-align: center; }
.rank-book .rank-note { margin: 4px 0; font-size: 12px; }
.rank-tabs .pill small { margin-left: 4px; }
.rank-wait { padding: 18px 0; text-align: center; }
.rank-retry { display: block; margin: 0 auto; }
.rank-mine { margin: 6px 0 2px; color: var(--accent); }
.rank-list { list-style: none; margin: 6px 0 0; padding: 0; }
.book .rank-list li { margin: 0; }
.rank-row { display: grid; grid-template-columns: 2.4em 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 9px 6px; text-align: left; cursor: pointer; font: inherit; color: var(--text); background: none; border: 0; border-bottom: 1px solid var(--line); min-height: 48px; }
.rank-row:hover { background: rgba(216, 180, 106, .06); }
.rank-row.me { background: rgba(216, 180, 106, .1); box-shadow: inset 3px 0 0 var(--accent); }
.rank-row .rk-n { font-family: var(--title-font); font-size: 17px; font-weight: 800; color: var(--dim); text-align: center; }
.rank-row.top1 .rk-n { color: #f0cf7e; font-size: 21px; }
.rank-row.top2 .rk-n { color: #d9d2c4; font-size: 19px; }
.rank-row.top3 .rk-n { color: #c99a6a; font-size: 18px; }
.rank-row .rk-who { min-width: 0; }
.rank-row .rk-who b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-row .rk-who small { display: block; font-family: var(--ui-font); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-row .rk-nick, .rank-detail h2 small { font-family: var(--ui-font); font-size: 12px; font-weight: 400; color: var(--dim); }
.rank-row .rk-me { font-style: normal; font-family: var(--ui-font); font-size: 10px; padding: 0 6px; margin-left: 4px; border-radius: 8px; border: 1px solid var(--accent); color: var(--accent); vertical-align: 2px; }
.rank-row .rk-sc { font-family: var(--title-font); font-size: 19px; font-weight: 800; color: #f0cf7e; white-space: nowrap; }
.rank-row .rk-sc small { font-size: 11px; margin-left: 1px; }
.rank-detail h2 { margin-top: 0; }
.rank-detail .verdict { margin: 12px 0; gap: 14px; }
.rank-detail .verdict > div:last-child { min-width: 0; font-size: 14px; }
.rank-detail h3.sub { font-family: var(--ui-font); font-size: 12px; letter-spacing: .2em; color: var(--faint); margin: 20px 0 8px; font-weight: 400; }
.rank-detail .feats { display: flex; flex-wrap: wrap; gap: 6px; }
.rank-detail .feats .chip { cursor: default; }
.rank-detail .timeline { padding-left: 0; }
.rank-detail .rank-foot { margin-top: 16px; font-size: 11px; }
.rank-detail .rank-report { margin-top: 10px; color: var(--faint); }
.rank-why .row { display: flex; flex-wrap: wrap; gap: 6px; }
.rank-why .btn { min-height: 40px; font-size: 13px; padding: 6px 12px; }
@media (max-width: 420px) {
  .rank-row { grid-template-columns: 2em 1fr auto; gap: 8px; padding: 8px 2px; }
  .rank-detail .verdict { flex-direction: column; align-items: flex-start; }
}

/* ---------- 작은 단추의 누르는 자리(2026-10-24 출시 전 점검): 보이는 크기는 두고 손가락 닿는 자리만 44px 안팎으로 넓힌다 ---------- */
.hud-btns button, .tb-btn, .life-del, .ft-btn { position: relative; } /* 「?」(.choice .seen)는 원래 absolute 라 넣지 않는다 — 넣었더니 선택지 오른쪽 끝에서 글 줄 안으로 끌려 들어왔다(2026-10-24 사용자) */
.hud-btns button::after, .tb-btn::after, .choice .seen::after, .life-del::after, .ft-btn::after { content: ''; position: absolute; }
.hud-btns button::after { inset: -5px -2px; }
.tb-btn::after { inset: -6px -3px; }
.choice .seen::after, .life-del::after { inset: -9px; border-radius: 50%; }
.ft-btn::after { inset: -5px -3px; }
.overlay-inner:focus { outline: none; }
/* 구글 단추: 한 줄로 길게 두면 폰 폭에서 「이 / 어 하기」로 끊겼다 — 두 줄로 나눠 둔다(2026-10-24) */
.g-sign .g-lab { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.35; }
.g-sign .g-lab small { font-size: 12px; font-weight: 400; color: #5f6368; word-break: keep-all; }
/* 결말 점수 칸의 갈래 이름(「무공을 모은 생」)이 두 줄로 찌그러지던 일 */
.verdict .score-kind { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 움직임 줄이기(기기 설정): 장면 카드 떠오름 · 나이 반짝임 · 해 넘김 줄도 멈춘다(비무 연출 등은 이미 따로 따른다) */
@media (prefers-reduced-motion: reduce) { .card, .year-turn, .hud-age.flash { animation: none !important; } }

/* ---------- 위 능력치가 바뀐 순간(js/main.js renderHud — 2026-10-24): 숫자 · 붓질이 잠깐 빛나고 「+3」이 떴다 사라진다 ---------- */
.stat .pop { display: inline-block; margin-left: 4px; font-style: normal; font-family: var(--ui-font); font-size: 12px; font-weight: 700; pointer-events: none;
  animation: stat-pop 1.6s ease-out both; animation-delay: var(--fl, 0ms); }
.stat.up .pop { color: #9ad38f; } .stat.dn .pop { color: #ef8571; }
html[data-theme="light"] .stat.up .pop { color: #2f7a2f; } html[data-theme="light"] .stat.dn .pop { color: #a3301c; }
@keyframes stat-pop { 0% { opacity: 0; transform: translateY(4px); } 12% { opacity: 1; transform: none; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
.stat.chg b { animation: stat-num 1.6s ease-out both; animation-delay: var(--fl, 0ms); }
@keyframes stat-num { 0%, 35% { color: var(--c); text-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent); } }
.stat.chg i { animation: stat-bar 1.6s ease-out both; animation-delay: var(--fl, 0ms); }
@keyframes stat-bar { 0%, 35% { filter: brightness(1.45) drop-shadow(0 0 5px var(--c)); } }
@media (prefers-reduced-motion: reduce) { .stat .pop { animation-name: stat-pop-still; } }
@keyframes stat-pop-still { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* 위 단추줄: 「제보」 · 「그만」을 「⋯」로 묶어 자리가 나서 조금 크게(누르는 자리는 아래 ::after 가 44px 안팎으로) */
.hud-btns button { min-height: 34px; font-size: 13px; padding: 0 11px; }
@media (max-width: 380px) { .hud-btns button { padding: 0 8px; } }
#hmore { font-size: 16px; letter-spacing: .05em; padding: 0 10px; }
.view-pop.more-pop { gap: 0; padding: 6px; width: auto; min-width: 190px; }
.more-pop .more-item { min-height: 44px; padding: 0 14px; text-align: left; background: none; border: 0; border-radius: 4px; font-family: var(--ui-font); font-size: 14px; color: var(--text); }
.more-pop .more-item:hover, .more-pop .more-item:focus-visible { background: rgba(216, 180, 106, .1); color: var(--accent); }
.more-pop .more-item + .more-item { border-top: 1px solid var(--line); border-radius: 0 0 4px 4px; }
/* 색 칸 다섯이 한 줄에 안 들어가면 둘째 줄도 첫 칸 밑에서 시작(10-30 사용자 — PC 에서 「대숲」만 맨 왼쪽으로 떨어졌다) */
.vp-pills { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
/* 강호록 인물 · 삽화 탭(#85) */
.ppl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 6px 0 12px; }
.ppl-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--panel) 85%, transparent); color: var(--text); font: inherit; cursor: pointer; min-width: 0; }
.ppl-cell img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: 50% 6%; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); }
.ppl-cell b { font-size: 12px; font-family: var(--ui-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ppl-cell small { font-size: 10px; color: var(--accent); font-family: var(--ui-font); }
.ppl-cell:hover { border-color: var(--accent); }
.ppl-cell.locked { cursor: default; opacity: .45; min-height: 96px; justify-content: center; }
.ppl-q { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; border: 1px dashed var(--line); color: var(--faint); font-size: 22px; }
.cg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; margin: 6px 0 12px; }
.cg-th { padding: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #000; cursor: zoom-in; aspect-ratio: 16 / 10; }
.cg-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ppl-card { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 16px; align-items: start; }
.ppl-card .ppl-full { width: 100%; max-height: 70vh; object-fit: contain; cursor: zoom-in; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5)); }
.ppl-card .ppl-say { color: var(--dim); font-style: italic; }
@media (max-width: 560px) { .ppl-card { grid-template-columns: 1fr; } .ppl-card .ppl-full { max-height: 45vh; } }