/* 「인류의 회의」 — 호두나무·금박 톤(유화 카드와 어울리게). 색은 전부 토큰으로. */
:root {
  --bg: #120f0c;
  --bg2: #1b1611;
  --panel: rgba(34, 27, 20, .82);
  --panel2: rgba(52, 40, 28, .72);
  --line: rgba(212, 175, 95, .28);
  --gold: #d6b25e;
  --gold2: #f1d796;
  --ink: #efe6d2;
  --ink2: #b9ab8f;
  --muted: #8a7d66;
  --good: #7fd18b;
  --bad: #e2786c;
  --me: #e7c979;
  --op: #c9a3e0;
  --shadow: 0 10px 30px rgba(0, 0, 0, .55);
  --radius: 12px;
  --card-w: clamp(62px, min(13.5vh, 8.2vw), 160px);   /* 손패 10~12장이 가로로 들어가게 높이·너비 중 작은 쪽 */
  --row-w: clamp(50px, min(10vh, 6.2vw), 120px);
  --pact-w: clamp(40px, min(7.5vh, 4.6vw), 90px);
  --serif: "Noto Serif KR", "Nanum Myeongjo", "Batang", serif;
  --sans: "Noto Sans KR", "Pretendard", "Malgun Gothic", system-ui, sans-serif;
  /* 전당 색 */
  --f-power: #c2453d;
  --f-mind: #4a7cc2;
  --f-create: #d09435;
  --f-soul: #8a63c4;
  --f-star: #cf4f87;
  --f-sport: #3c9a64;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 700px at 50% 38%, #2a2017 0%, var(--bg2) 45%, var(--bg) 100%);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; }
.hidden { display: none !important; }

/* ---------------- 공용 ---------------- */
.btn {
  appearance: none; border: 1px solid var(--gold); color: #1a130b;
  background: linear-gradient(180deg, var(--gold2), var(--gold)); border-radius: 999px;
  padding: 10px 20px; font-weight: 700; font-size: 15px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(214, 178, 94, .25); transition: transform .12s, filter .12s, opacity .12s;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn.ghost { background: transparent; color: var(--gold2); box-shadow: none; }
.btn.danger { background: linear-gradient(180deg, #f0a08e, #d9705e); border-color: #d9705e; }
.btn.small { padding: 5px 12px; font-size: 13px; }
.honor { color: var(--gold2); font-weight: 700; font-size: 14px; }

/* ---------------- 시작 ---------------- */
#start { max-width: 1180px; margin: 0 auto; padding: 36px 20px 40px; }
.hero { text-align: center; margin-bottom: 26px; }
.hero-kicker { letter-spacing: .38em; color: var(--gold); font-size: 12px; }
.hero h1 {
  font-family: var(--serif); font-weight: 900; font-size: clamp(40px, 7vw, 72px); margin: 6px 0 8px;
  background: linear-gradient(180deg, #fff3d0, var(--gold) 70%, #9a7a36); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 2px 30px rgba(214, 178, 94, .15);
}
.hero-sub { font-size: 17px; margin: 0 0 6px; }
.hero-fuse { color: var(--ink2); font-size: 13px; margin: 0; }
.pick-title { font-family: var(--serif); text-align: center; font-size: 20px; margin: 22px 0 14px; color: var(--gold2); }
.factions { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.faction {
  position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer; background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .15s, border-color .15s;
  display: flex; flex-direction: column;
}
.faction:hover { transform: translateY(-4px); border-color: var(--gold); }
.faction img { width: 100%; aspect-ratio: 360 / 400; object-fit: cover; object-position: 50% 18%; display: block; }
.faction .fbody { padding: 10px 12px 12px; border-top: 3px solid var(--fc, var(--gold)); }
.faction .fname { font-family: var(--serif); font-weight: 700; font-size: 17px; }
.faction .fcount { color: var(--muted); font-size: 12px; }
.faction .fpass { font-size: 13px; margin-top: 4px; color: var(--ink2); }
.faction .fpass b { color: var(--fc, var(--gold2)); }
.start-actions { display: flex; gap: 16px; justify-content: center; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.speed { color: var(--ink2); font-size: 14px; cursor: pointer; }
.start-foot { text-align: center; color: var(--muted); font-size: 12px; margin-top: 18px; }

/* ---------------- 대국 ---------------- */
#game {
  display: grid; grid-template-columns: 1fr 260px; grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "top top" "board log" "action log" "hand hand";
  height: 100vh; gap: 0 12px; padding: 0 12px 10px;
}
.topbar { grid-area: top; display: flex; align-items: center; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.brand { font-family: var(--serif); font-weight: 900; color: var(--gold); font-size: 20px; }
.rounds { display: flex; gap: 8px; }
.rpip { font-family: var(--serif); font-size: 13px; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink2); }
.rpip.now { border-color: var(--gold); color: var(--gold2); background: rgba(214, 178, 94, .12); }
.rpip.win { border-color: var(--good); color: var(--good); }
.rpip.lose { border-color: var(--bad); color: var(--bad); }
.rpip.tie { border-color: var(--muted); }
.top-actions { display: flex; gap: 8px; align-items: center; }

.board { grid-area: board; display: grid; grid-template-rows: 1fr auto 1fr; gap: 8px; padding: 8px 0; min-height: 0; }
.side { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.side.opp { justify-content: flex-start; }
.side.me { justify-content: flex-end; }
.side-head { display: flex; align-items: center; gap: 14px; }
.who { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.who .fdot { width: 12px; height: 12px; border-radius: 50%; background: var(--fc); box-shadow: 0 0 10px var(--fc); }
.who .pname { font-family: var(--serif); }
.who .ptext { font-weight: 400; color: var(--ink2); font-size: 12.5px; }
.crowns { display: flex; gap: 4px; }
.crown { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--gold); opacity: .35; display: grid; place-items: center; font-size: 11px; color: var(--gold2); }
.crown.on { opacity: 1; background: radial-gradient(circle at 40% 35%, #fff1c2, var(--gold) 60%, #8f6a26); color: #2a1c08; box-shadow: 0 0 12px rgba(214, 178, 94, .6); }
.meta { color: var(--ink2); font-size: 12.5px; display: flex; gap: 12px; flex-wrap: wrap; }
.meta .passed { color: var(--bad); font-weight: 700; }
.lane {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: calc(var(--row-w) * 1.49 + 14px);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 10px;
}
.side.me .lane { border-color: rgba(231, 201, 121, .45); }
.row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-height: calc(var(--row-w) * 1.49); }
.row:empty::after { content: attr(data-empty); color: var(--muted); font-size: 13px; }
.pact-slot { display: flex; gap: 4px; align-items: center; padding-right: 10px; border-right: 1px dashed var(--line); min-width: calc(var(--pact-w) * 2 + 14px); min-height: calc(var(--pact-w) * 1.49); position: relative; }
.pact-slot .plabel { position: absolute; top: -9px; left: 2px; font-size: 10.5px; color: var(--gold); background: var(--bg2); padding: 0 5px; border-radius: 6px; }
.total { text-align: center; min-width: 92px; }
.total .num { font-family: var(--serif); font-weight: 900; font-size: 38px; line-height: 1; }
.side.me .total .num { color: var(--me); }
.side.opp .total .num { color: var(--op); }
.total .sub { font-size: 11.5px; color: var(--ink2); }

/* 과제 */
.trial {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  background: linear-gradient(90deg, rgba(214, 178, 94, .10), rgba(214, 178, 94, .02) 60%, rgba(214, 178, 94, .10));
  border: 1px solid rgba(214, 178, 94, .5); border-radius: var(--radius); padding: 8px 14px;
}
.trial .tlabel { font-family: var(--serif); color: var(--gold); font-size: 12px; letter-spacing: .1em; }
.trial .tname { font-family: var(--serif); font-size: 19px; font-weight: 700; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.chip { font-size: 12.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0, 0, 0, .25); white-space: nowrap; }
.chip b { color: var(--gold2); }
.chip.dom { border-color: rgba(214, 178, 94, .6); }
.chip.reach { border-color: rgba(127, 209, 139, .5); }
.chip.era { border-color: rgba(138, 180, 240, .55); }
.trial .thead { display: flex; align-items: center; gap: 12px; }
.trial .tsym { width: 46px; aspect-ratio: 360 / 537; border-radius: 5px; background: #000 center / cover; box-shadow: 0 3px 10px rgba(0, 0, 0, .6); flex: 0 0 auto; }
.chip.extra { border-color: #d9705e; }
.trial .preview { color: var(--ink2); font-size: 12px; text-align: right; }
.trial .preview b { color: var(--ink); font-weight: 500; }

/* 행동 줄 */
.actionbar { grid-area: action; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 2px; }
.prompt { font-size: 14.5px; color: var(--ink); }
.prompt b { color: var(--gold2); }
.buttons { display: flex; gap: 8px; flex: 0 0 auto; }
.buttons .btn { white-space: nowrap; }

/* 손패 */
.hand {
  grid-area: hand; display: flex; gap: 8px; justify-content: safe center; align-items: flex-end; overflow-x: auto; overflow-y: visible;
  padding: 10px 6px 6px; min-height: calc(var(--card-w) * 1.49 + 24px); border-top: 1px solid var(--line);
}

/* 회의록 */
.log { grid-area: log; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-top: 8px; display: flex; flex-direction: column; min-height: 0; }
.log-head { font-family: var(--serif); color: var(--gold); padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
.log ol { list-style: none; margin: 0; padding: 8px 12px; overflow-y: auto; font-size: 12.5px; color: var(--ink2); flex: 1; }
.log li { padding: 3px 0; border-bottom: 1px dashed rgba(212, 175, 95, .1); }
.log li.me b { color: var(--me); }
.log li.op b { color: var(--op); }
.log li.sys { color: var(--gold2); font-weight: 500; }

/* ---------------- 카드 ---------------- */
.card {
  position: relative; width: var(--card-w); aspect-ratio: 360 / 537; border-radius: 8px; flex: 0 0 auto;
  background: #000 center / cover no-repeat; box-shadow: 0 6px 16px rgba(0, 0, 0, .6); cursor: default;
  transition: transform .15s, box-shadow .15s, outline-color .15s; outline: 2px solid transparent; outline-offset: 2px;
}
.card.sz-row { width: var(--row-w); }
.card.sz-pact { width: var(--pact-w); }
.card.playable { cursor: pointer; }
.card.playable:hover { transform: translateY(-10px) scale(1.04); box-shadow: 0 14px 28px rgba(0, 0, 0, .7), 0 0 0 1px var(--gold); z-index: 2; }
.card.selected { outline-color: var(--gold2); transform: translateY(-14px); box-shadow: 0 0 22px rgba(241, 215, 150, .55); }
.card.dim { filter: saturate(.55) brightness(.75); }
.card.back {
  background: repeating-linear-gradient(45deg, #3a2b1b 0 6px, #2c2015 6px 12px);
  border: 2px solid rgba(214, 178, 94, .55);
}
.card.back::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); font-size: 22px; opacity: .8; }
.card .pw {
  position: absolute; left: -6px; top: -6px; min-width: 30px; height: 30px; padding: 0 5px; border-radius: 15px;
  display: grid; place-items: center; font-family: var(--serif); font-weight: 900; font-size: 16px; color: #1c140a;
  background: radial-gradient(circle at 35% 30%, #fff4cf, var(--gold) 65%, #8a6526); border: 1.5px solid #2a1d0c;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.card .pw.up { background: radial-gradient(circle at 35% 30%, #eaffe9, #8fd89b 60%, #3f8a4c); }
.card.sz-row .pw, .card.sz-pact .pw { min-width: 24px; height: 24px; font-size: 13px; left: -5px; top: -5px; }
.card .nm {
  position: absolute; left: 6%; right: 6%; bottom: 5%; padding: 2px 4px; text-align: center; border-radius: 5px;
  background: rgba(10, 8, 6, .78); color: var(--ink); font-size: 11px; line-height: 1.25; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card.sz-row .nm { font-size: 9.5px; }
.card.sz-pact .nm { display: none; }
.card .dm { display: block; font-weight: 400; font-size: 9.5px; color: var(--ink2); }
.card.sz-row .dm { display: none; }
.card .tags { position: absolute; right: -4px; top: -4px; display: flex; flex-direction: column; gap: 2px; }
.card .tag { font-size: 9.5px; font-weight: 900; padding: 1px 4px; border-radius: 4px; background: #2a1d0c; color: var(--gold2); border: 1px solid var(--gold); }
.card .tag.edge { background: #5b1f16; color: #ffd9c9; border-color: #e2786c; }
.card .hallbar { position: absolute; left: 10%; right: 10%; top: 0; height: 4px; border-radius: 0 0 3px 3px; background: var(--fc); }
.card.legend { box-shadow: 0 0 16px rgba(241, 215, 150, .55), 0 6px 16px rgba(0, 0, 0, .6); }
.card.relic .pw { background: radial-gradient(circle at 35% 30%, #ffe0d8, #e2786c 65%, #8a3b2f); }
/* 애니메이션은 첫 프레임에 멈춰도(창이 가려져 그리기가 멈출 때) 카드가 보이게 — 회전·투명 0 에서 시작하지 않는다 */
.card.flip { animation: flip .5s ease-out both; }
@keyframes flip { from { transform: scale(.88); filter: brightness(1.7); } to { transform: none; filter: none; } }
.card.enter { animation: enter .35s ease-out both; }
@keyframes enter { from { transform: translateY(14px) scale(.94); } to { transform: none; } }
.res-pact .card { width: 92px; }

/* ---------------- 겹창 ---------------- */
.overlay { position: fixed; inset: 0; background: rgba(6, 4, 2, .72); display: grid; place-items: center; z-index: 50; padding: 16px; backdrop-filter: blur(3px); }
.modal-card, .rules-card, .zoom-card {
  background: linear-gradient(180deg, #2a2118, #1a140f); border: 1px solid var(--gold); border-radius: 16px; box-shadow: var(--shadow);
  max-width: 820px; width: 100%; max-height: 92vh; overflow-y: auto; padding: 22px 24px;
}
.modal-card h2, .rules-card h2 { font-family: var(--serif); color: var(--gold2); margin: 0 0 10px; font-size: 24px; }
.modal-card .mbtns { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.res-side { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.res-side h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 16px; }
.res-side .big { font-family: var(--serif); font-size: 44px; font-weight: 900; line-height: 1.05; }
.res-side.me .big { color: var(--me); }
.res-side.op .big { color: var(--op); }
.res-side.win { border-color: var(--gold); box-shadow: 0 0 22px rgba(214, 178, 94, .25); }
.res-pact { display: flex; gap: 8px; margin: 8px 0; }
.res-lines { font-size: 13px; color: var(--ink2); }
.res-lines b { color: var(--gold2); }
.combo-name { display: inline-block; font-family: var(--serif); font-weight: 900; color: #2a1c08; background: linear-gradient(180deg, #fff1c2, var(--gold)); padding: 1px 10px; border-radius: 6px; margin-left: 4px; }
.verdict { text-align: center; font-family: var(--serif); font-size: 22px; margin: 12px 0 0; }
.verdict.win { color: var(--good); }
.verdict.lose { color: var(--bad); }
.go-exp { color: var(--ink2); font-size: 14px; }
.go-exp li { margin: 4px 0; }
.zoom-card { display: grid; grid-template-columns: 300px 1fr; gap: 20px; max-width: 760px; }
.zoom-card .zimg { width: 300px; aspect-ratio: 360 / 537; border-radius: 12px; background: #000 center / cover; box-shadow: var(--shadow); }
.zoom-card h3 { font-family: var(--serif); margin: 0; font-size: 26px; color: var(--gold2); }
.zoom-card .zen { color: var(--muted); font-size: 13px; }
.zoom-card .ztitle { font-style: italic; color: var(--ink2); margin: 4px 0 10px; font-size: 13.5px; }
.zoom-card table { border-collapse: collapse; font-size: 13.5px; width: 100%; }
.zoom-card td { padding: 4px 6px; border-bottom: 1px dashed rgba(212, 175, 95, .15); }
.zoom-card td:first-child { color: var(--gold); width: 88px; }
.zoom-card .ach { margin-top: 10px; font-size: 13.5px; color: var(--ink); }
.zoom-card .bd { margin-top: 10px; font-size: 13px; color: var(--ink2); }
.rules-card { max-width: 860px; }
.rules-card h3 { font-family: var(--serif); color: var(--gold); margin: 18px 0 6px; font-size: 17px; }
.rules-card p, .rules-card li { font-size: 14px; color: var(--ink); }
.rules-card table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.rules-card th, .rules-card td { border-bottom: 1px solid var(--line); padding: 5px 8px; text-align: left; }
.rules-card th { color: var(--gold); font-weight: 500; }
.toast { position: fixed; left: 50%; top: 18%; transform: translateX(-50%); background: rgba(20, 15, 10, .92); border: 1px solid var(--gold); color: var(--gold2); padding: 10px 22px; border-radius: 999px; z-index: 60; font-family: var(--serif); font-size: 18px; box-shadow: var(--shadow); }

/* ---------------- 좁은 화면 ---------------- */
@media (max-width: 980px) {
  #game { grid-template-columns: 1fr; grid-template-areas: "top" "board" "action" "hand" "log"; height: auto; min-height: 100vh; }
  .log { max-height: 220px; margin-top: 10px; }
  :root { --card-w: 86px; --row-w: 60px; --pact-w: 48px; }
  .trial { grid-template-columns: 1fr; }
  .trial .preview { text-align: left; }
  .zoom-card { grid-template-columns: 1fr; }
  .zoom-card .zimg { width: 220px; margin: 0 auto; }
}
.rpip, .btn.small { white-space: nowrap; }
@media (max-width: 560px) {
  :root { --card-w: 72px; --row-w: 50px; --pact-w: 40px; }
  .topbar { gap: 6px; }
  .brand { font-size: 16px; }
  .rounds { gap: 4px; }
  .rpip { padding: 2px 9px; }
  .rpip .rw, #honorTop { display: none; }
  .lane { grid-template-columns: 1fr; }
  .pact-slot { border-right: 0; border-bottom: 1px dashed var(--line); padding: 0 0 6px; }
  .total { text-align: left; }
  .res-grid { grid-template-columns: 1fr; }
  .hand { justify-content: flex-start; }
}

/* ================= v2: 탭 · 페이지 · 오늘 · 소환 · 도감 · 상세 ================= */
.tabs { position: sticky; top: 0; z-index: 30; display: flex; gap: 4px; justify-content: center; padding: 8px 10px; background: rgba(18, 15, 12, .92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.tab { appearance: none; background: transparent; border: 1px solid transparent; color: var(--ink2); font-family: var(--serif); font-weight: 700; font-size: 15px; padding: 8px 18px; border-radius: 999px; cursor: pointer; display: flex; gap: 6px; align-items: center; min-height: 44px; }
.tab .ti { font-size: 14px; }
.tab.on { color: var(--gold2); border-color: var(--gold); background: rgba(214, 178, 94, .12); }
.page { max-width: 1080px; margin: 0 auto; padding: 18px 16px 90px; }
.page-head h1 { font-family: var(--serif); font-size: 30px; margin: 4px 0 2px; color: var(--gold2); }
.page-sub { color: var(--ink2); margin: 0 0 14px; font-size: 14px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sec { font-family: var(--serif); font-size: 18px; color: var(--gold2); margin: 18px 0 8px; }
.hint { color: var(--muted); font-size: 12px; font-weight: 400; font-family: var(--sans); margin-left: 6px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.ok { color: var(--good); }
.bad { color: var(--bad); }
.tiles { display: flex; gap: 14px; flex-wrap: wrap; }
.tile { min-width: 96px; }
.tile .tv { font-family: var(--serif); font-weight: 900; font-size: 28px; line-height: 1.1; color: var(--gold2); }
.tile .ts { font-size: 14px; color: var(--muted); font-weight: 400; }
.tile .tl { font-size: 12px; color: var(--ink2); }
.mini-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.mini { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.quest { display: grid; grid-template-columns: 1fr 140px 44px auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed rgba(212, 175, 95, .15); }
.quest.done { opacity: .55; }
.quest .qt { font-size: 14px; }
.quest .qn { font-size: 12px; color: var(--muted); text-align: right; }
.qbar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.qbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold2)); }
.save-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.code { width: 100%; font-family: monospace; font-size: 11px; background: rgba(0, 0, 0, .35); color: var(--ink2); border: 1px solid var(--line); border-radius: 8px; padding: 8px; resize: vertical; }
.btn.small.danger { border-color: var(--bad); color: var(--bad); }
.summon-actions { display: flex; gap: 12px; justify-content: center; margin: 6px 0 14px; }
.summon-result { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; min-height: 20px; margin-bottom: 8px; }
.ptable { border-collapse: collapse; width: 100%; max-width: 420px; font-size: 14px; }
.ptable th, .ptable td { text-align: left; padding: 5px 8px; border-bottom: 1px solid rgba(212, 175, 95, .15); }
.plist { font-size: 13.5px; color: var(--ink2); padding-left: 18px; }
.journal { list-style: none; padding: 0; margin: 0; font-size: 13.5px; }
.journal li { padding: 4px 0; border-bottom: 1px dashed rgba(212, 175, 95, .12); }
.new { color: var(--good); font-weight: 900; font-size: 11px; }
/* 작은 카드(도감·소환) */
.cx { position: relative; width: 112px; aspect-ratio: 848 / 1264; border-radius: 8px; background: #2a2017 center / cover no-repeat; border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(0, 0, 0, .5); cursor: pointer; overflow: hidden; transition: transform .12s; }
.cx:hover { transform: translateY(-4px); border-color: var(--gold); }
.cx .hallbar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--fc); }
.cx .nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px 5px; font-size: 11px; font-weight: 700; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .85) 45%); line-height: 1.2; }
.cx .dm { display: block; font-weight: 400; font-size: 9.5px; color: var(--ink2); }
.cx.locked { filter: grayscale(1) brightness(.55); }
.cx .lock { position: absolute; right: 6px; top: 6px; font-size: 10px; color: var(--ink2); background: rgba(0, 0, 0, .6); padding: 1px 5px; border-radius: 4px; }
.cx .badge { position: absolute; left: 8px; top: 6px; font-size: 10.5px; font-weight: 900; padding: 2px 6px; border-radius: 6px; background: #2a1d0c; color: var(--gold2); border: 1px solid var(--gold); z-index: 2; }
.cx .badge.new { background: #163d1e; color: #b6f5c0; border-color: var(--good); }
.cx .badge.ver { background: #2a1740; color: #e2c9ff; border-color: var(--op); }
.cx.legend { box-shadow: 0 0 16px rgba(241, 215, 150, .45); }
.cx.flip { animation: flipin .5s both; }
@keyframes flipin { from { transform: rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.codex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; justify-items: center; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.filters select, .filters input { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 13px; min-height: 40px; }
.filters input { flex: 1; min-width: 140px; }
.more { text-align: center; margin: 16px 0; }
/* 상세 */
.detail-card { display: grid; grid-template-columns: 260px 1fr; gap: 20px; max-width: 860px; width: 100%; max-height: 92vh; overflow-y: auto; background: var(--bg2); border: 1px solid var(--gold); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.detail-card .dpic { width: 100%; aspect-ratio: 848 / 1264; border-radius: 10px; background: center / cover no-repeat #2a2017; }
.dthumbs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.dth { font-size: 11px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--ink2); cursor: pointer; }
.dth.locked { opacity: .5; }
.detail-card h3 { font-family: var(--serif); font-size: 24px; margin: 0; }
.detail-card h4 { font-family: var(--serif); font-size: 15px; color: var(--gold2); margin: 14px 0 6px; }
.detail-card table { border-collapse: collapse; font-size: 13.5px; margin-top: 8px; }
.detail-card td { padding: 3px 10px 3px 0; vertical-align: top; }
.detail-card td:first-child { color: var(--muted); white-space: nowrap; }
.tagline { display: inline-block; font-size: 12px; color: var(--ink2); border: 1px dashed var(--line); padding: 2px 8px; border-radius: 6px; margin-top: 6px; }
.flavor { margin-top: 10px; padding: 8px 10px; border-left: 3px solid var(--line); color: var(--ink2); font-size: 13px; }
.flabel { display: block; font-size: 11px; color: var(--muted); }
.rec { font-size: 13.5px; line-height: 1.6; }
.timeline { list-style: none; padding: 0; margin: 6px 0; font-size: 13px; }
.timeline li { padding: 2px 0; }
.timeline .td { color: var(--gold); font-family: monospace; font-size: 12px; margin-right: 6px; }
.quotes { padding-left: 16px; font-size: 13.5px; }
.quotes .orig, .quotes .note { color: var(--muted); font-size: 12px; }
a.src { color: var(--gold2); font-size: 12px; }
button.link { background: none; border: 0; color: var(--gold2); cursor: pointer; padding: 0; font: inherit; text-decoration: underline dotted; }
@media (max-width: 980px) {
  .tabs { position: fixed; top: auto; bottom: 0; left: 0; right: 0; border-top: 1px solid var(--line); border-bottom: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .tab { flex: 1; justify-content: center; padding: 6px 4px; font-size: 13px; flex-direction: column; gap: 0; }
  .page { padding-bottom: 96px; }
  .cards2 { grid-template-columns: 1fr; }
  .detail-card { grid-template-columns: 1fr; }
  .detail-card .dpic { max-width: 220px; margin: 0 auto; }
  .quest { grid-template-columns: 1fr 44px auto; }
  .quest .qbar { display: none; }
  #start { padding-bottom: 90px; }
}
@media (prefers-reduced-motion: reduce) { .cx.flip { animation: none; } }

/* ================= v2.0.1: 세계(지구본) ================= */
.world-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; }
.globe-box { position: relative; }
.globe { width: 100%; aspect-ratio: 1 / 1; max-height: 78vh; display: block; border-radius: 50%; touch-action: none; cursor: grab; background: transparent; }
.globe:active { cursor: grabbing; }
.globe-hint { text-align: center; margin-top: 6px; }
.world-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.era-bar { display: flex; gap: 4px; flex-wrap: wrap; }
.era { appearance: none; background: transparent; border: 1px solid var(--line); color: var(--ink2); border-radius: 999px; padding: 6px 11px; font-size: 13px; cursor: pointer; min-height: 36px; }
.era.on { color: var(--gold2); border-color: var(--gold); background: rgba(214, 178, 94, .12); }
.era.locked { opacity: .6; }
.world-search input { width: 100%; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 14px; min-height: 40px; }
.hits { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.hit { text-align: left; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer; }
.hit:hover { border-color: var(--gold); }
.city-panel { background: rgba(0, 0, 0, .25); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; max-height: 60vh; overflow-y: auto; }
.city-panel h3 { font-family: var(--serif); margin: 0 0 4px; font-size: 20px; color: var(--gold2); }
.badge-owned { font-size: 11px; color: #1a130b; background: var(--gold); border-radius: 6px; padding: 1px 6px; vertical-align: middle; }
.cx.sm { width: 84px; }
@media (max-width: 980px) {
  .world-wrap { grid-template-columns: 1fr; }
  .globe { max-height: 60vh; }
  .city-panel { max-height: none; }
}

.exp-faction { width: 100%; margin: 6px 0 8px; background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font-size: 13px; min-height: 40px; }

/* ================= v2.0.3: 인연 · 시공간 대화 ================= */
.bond-list { display: flex; flex-direction: column; gap: 6px; }
.bond { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed rgba(212, 175, 95, .12); font-size: 14px; }
.dialog-card { max-width: 720px; width: 100%; max-height: 92vh; overflow-y: auto; background: var(--bg2); border: 1px solid var(--gold); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); }
.dlg-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.dlg-pair { display: flex; gap: 6px; }
.dlg-pic { width: 56px; aspect-ratio: 848 / 1264; border-radius: 6px; background: center / cover no-repeat #2a2017; border: 1px solid var(--line); }
.dialog-card h3 { font-family: var(--serif); font-size: 20px; margin: 0; }
.dlg-badge { font-size: 12px; color: var(--gold2); border: 1px dashed var(--gold); border-radius: 8px; padding: 6px 10px; margin: 8px 0 12px; }
.dlg-narr { color: var(--ink2); font-style: italic; font-size: 14px; margin: 8px 0; }
.dlg-line { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0; padding: 8px 10px; background: rgba(0, 0, 0, .25); border-radius: 10px; }
.dlg-who { font-family: var(--serif); font-weight: 700; color: var(--gold2); }
.dlg-text { font-size: 15px; line-height: 1.55; }
.dlg-orig, .dlg-note { grid-column: 2; color: var(--muted); font-size: 12px; }
.dlg-src { grid-column: 2; font-size: 12px; color: var(--gold2); }
.dlg-foot { color: var(--muted); font-size: 12px; margin-top: 10px; }
.dlg-refused { color: var(--ink2); }

/* ================= v2.0.4: 미니게임 · 원더픽 · 방어 덱 ================= */
.mini-game { padding: 8px 0 12px; border-bottom: 1px dashed rgba(212, 175, 95, .15); }
.mini-game:last-child { border-bottom: 0; }
.mini-game h3 { font-family: var(--serif); font-size: 16px; color: var(--gold2); margin: 0 0 6px; }
.mini-q { display: flex; gap: 14px; align-items: flex-start; }
.mini-opts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.defense { max-width: 720px; margin: 22px auto 0; }

/* ================= v2.0.6: 영상 자산(시대 장면·회의장·소환 연출·살아 있는 초상) · 체험 기록 ================= */
.scene { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: center / cover no-repeat #1a1410; border: 1px solid var(--line); position: relative; overflow: hidden; }
.scene video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene .scene-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; font-size: 11px; color: var(--ink2); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .7)); }
.scene .scene-play { position: absolute; right: 8px; top: 8px; }
.hero.with-scene { background: center 30% / cover no-repeat; border-radius: 14px; padding: 26px 12px 20px; box-shadow: inset 0 0 0 1000px rgba(18, 15, 12, .62); }
.summon-result.ritual { background: center / cover no-repeat; border-radius: 12px; padding: 14px; box-shadow: inset 0 0 0 1000px rgba(18, 15, 12, .55); }
.dportrait { margin-top: 8px; }

/* ---- 쉬움(이슈 #38 P0): 참모 추천 · 안내 대국 */
.card.rec { outline: 2px solid var(--gold2); box-shadow: 0 0 0 3px rgba(241, 215, 150, .25), 0 0 26px rgba(241, 215, 150, .75); animation: recpulse 1.6s ease-in-out infinite; }
.card.rec::after { content: '추천'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--gold2); color: #1a1408; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; letter-spacing: .06em; z-index: 3; }
@keyframes recpulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(241, 215, 150, .25), 0 0 18px rgba(241, 215, 150, .55); } 50% { box-shadow: 0 0 0 3px rgba(241, 215, 150, .45), 0 0 30px rgba(241, 215, 150, .95); } }
.advice { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 8px; background: rgba(241, 215, 150, .12); color: var(--gold2); font-size: 13px; }
.guide { margin: 0 0 6px; padding: 8px 12px; border-left: 3px solid var(--gold2); background: rgba(214, 178, 94, .1); border-radius: 6px; font-size: 14px; line-height: 1.5; }
.guide b { color: var(--gold2); }
.guide .gstep { display: inline-block; min-width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; background: var(--gold2); color: #1a1408; font-weight: 700; margin-right: 6px; font-size: 12px; }
.guide-box { margin: 0 auto 14px; max-width: 720px; text-align: center; }
.guide-box h3 { margin: 0 0 6px; color: var(--gold2); font-size: 18px; }
.guide-box p { margin: 0 0 10px; color: var(--ink2); font-size: 14px; }
.guide-box .mbtns { justify-content: center; }
.btn.rec { outline: 2px solid var(--gold2); box-shadow: 0 0 16px rgba(241, 215, 150, .55); }

/* ---- 내 성(삼국지W 번안 · #38) */
.quest { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.quest .owl { width: 56px; height: 74px; object-fit: contain; flex: 0 0 auto; }
.quest .qbody { flex: 1 1 200px; }
.quest .qlabel { font-size: 12px; color: var(--muted); letter-spacing: .06em; }
.quest .qtext { font-size: 16px; font-weight: 700; color: var(--gold2); margin: 2px 0; }
.quest .qreward { font-size: 13px; color: var(--ink2); }
.quest .qbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bld { background: var(--bg2); border: 1px solid rgba(214, 178, 94, .25); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.bld.can { border-color: var(--gold2); }
.bld .bname { font-weight: 700; font-size: 15px; } .bld .blv { display: inline-block; min-width: 22px; text-align: center; border-radius: 10px; background: var(--gold2); color: #1a1408; font-size: 12px; padding: 0 6px; margin-left: 4px; }
.bld .bdesc { font-size: 12px; color: var(--muted); min-height: 30px; }
.bld .btn { font-size: 12px; padding: 6px 8px; white-space: normal; }
.qrow { display: flex; justify-content: space-between; padding: 4px 0; } .qrow .cd { color: var(--gold2); font-variant-numeric: tabular-nums; }
.roster, .recruit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.gen { background: var(--bg2); border: 1px solid rgba(214, 178, 94, .25); border-radius: 10px; padding: 8px; text-align: center; color: var(--ink); }
.gen.pick { cursor: pointer; font: inherit; } .gen.pick:hover { border-color: var(--gold2); }
.gen .gpic { width: 64px; height: 96px; margin: 0 auto 6px; border-radius: 6px; background-size: cover; background-position: top center; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.gen .gname { font-weight: 700; font-size: 14px; } .gen .glv { color: var(--gold2); font-size: 12px; } .gen .gst { font-size: 12px; color: var(--muted); }
.recruit-list { margin-top: 10px; }
.unit-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.unit-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; align-items: end; margin-bottom: 8px; }
.unit-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink2); }
.unit-form select, .unit-form input { background: var(--bg2); color: var(--ink); border: 1px solid rgba(214, 178, 94, .35); border-radius: 8px; padding: 6px 8px; font: inherit; }
.targets { display: flex; flex-direction: column; gap: 8px; }
.target { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; background: var(--bg2); border-radius: 10px; padding: 8px 10px; }
.chance { font-weight: 700; padding: 2px 10px; border-radius: 10px; } .chance.good { background: rgba(80, 200, 120, .2); color: #8fe3a8; } .chance.mid { background: rgba(241, 215, 150, .18); color: var(--gold2); } .chance.bad { background: rgba(220, 80, 80, .2); color: #f0a0a0; }
.intro { background: radial-gradient(ellipse at 30% 20%, rgba(214, 178, 94, .22), transparent 55%), linear-gradient(160deg, #2a2116, #120f0c 70%); background-size: cover; min-height: 260px; display: flex; align-items: flex-end; padding: 0; overflow: hidden; border: 1px solid rgba(214, 178, 94, .35); }
.intro .intro-body { background: linear-gradient(transparent, rgba(18, 15, 12, .92) 40%); padding: 80px 18px 18px; width: 100%; }
.intro h2 { margin: 0 0 8px; color: var(--gold2); }
.fight-art { width: 100%; height: 160px; border-radius: 10px; background-size: cover; background-position: center; margin-bottom: 10px; }
.panel.small { font-size: 13px; color: var(--ink2); }
.gen.on { border-color: var(--gold2); }
.grow { margin: 10px 0; padding: 10px 12px; border: 1px solid rgba(214, 178, 94, .35); border-radius: 10px; background: var(--bg2); }
.grow h3 { margin: 0 0 8px; font-size: 15px; color: var(--gold2); }
.grow-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 4px 0; border-top: 1px dashed rgba(214, 178, 94, .18); }
.grow-row .btn { font-size: 12px; padding: 4px 8px; }
.terr { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .terr .chip { font-size: 12px; }
.exp-city .btn { margin: 4px 4px 0 0; }
/* W2b: 내 성 — 로컬 그림(건물·병종·NPC 성·배경) · 오늘 · 연맹 · 공성전 */
#castleBox.castle-on { background: linear-gradient(rgba(22, 16, 9, 0.9), rgba(22, 16, 9, 0.96)), url(img/ui/w_castle_bg.webp) center top / cover no-repeat; border-radius: 12px; padding: 4px 6px; }
.bico { width: 44px; height: 44px; border-radius: 8px; background: rgba(0, 0, 0, 0.25) center / cover no-repeat; flex: 0 0 auto; }
.bico.big { width: 72px; height: 72px; }
.bld .bico { margin-bottom: 6px; }
.tico { display: inline-block; width: 22px; height: 22px; vertical-align: middle; background: center / contain no-repeat; margin-left: 4px; }
.target { display: flex; gap: 10px; align-items: center; }
.today .qrow, .panel .qrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip .btn { margin-left: 4px; }
.siege .boss { display: flex; gap: 12px; align-items: center; }
.siege .bossbody { flex: 1; min-width: 0; }
.hpbar { position: relative; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin: 6px 0; }
.hpbar .hp { position: absolute; top: 0; bottom: 0; }
.hpbar .hp.mine { left: 0; background: #d9b25c; z-index: 2; }
.hpbar .hp.ally { left: 0; background: rgba(217, 178, 92, 0.35); z-index: 1; }
/* W3: 소리 조절(항상 보임 · 끌 수 없는 소리 금지) */
.audio-ctl { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(217, 178, 92, 0.25); vertical-align: middle; }
.audio-ctl button { all: unset; cursor: pointer; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 15px; line-height: 1; }
.audio-ctl button:hover { background: rgba(255, 255, 255, 0.12); }
.audio-ctl button:focus-visible { outline: 2px solid #d9b25c; outline-offset: 1px; }
.audio-ctl input[type=range] { width: 70px; height: 4px; cursor: pointer; accent-color: #d9b25c; background: transparent; }
.audio-ctl .small { min-width: 34px; text-align: center; white-space: nowrap; }
@media (max-width: 640px) { .audio-ctl input[type=range] { width: 52px; } .audio-ctl .small { display: none; } }
.audio-ctl button.off { opacity: 0.55; }
/* W3b: 회의 상자 · 열기 연출 · 명예의 길 · 천장 게이지 · ▲ 배지 */
.chests { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chest { border: 1px solid rgba(217, 178, 92, 0.3); border-radius: 10px; padding: 8px; text-align: center; background: rgba(0, 0, 0, 0.25); min-height: 96px; }
.chest.empty { opacity: 0.45; border-style: dashed; }
.chest .cico { width: 44px; height: 44px; margin: 0 auto 4px; border-radius: 8px; background: center / contain no-repeat; }
.chest .cico.k0 { background-color: #8b5a2b; } .chest .cico.k1 { background-color: #b8b8c0; } .chest .cico.k2 { background-color: #d9b25c; } .chest .cico.k3 { background-color: #8e5cd9; }
.chest.ready { box-shadow: 0 0 12px rgba(217, 178, 92, 0.6); animation: chestPulse 1.2s infinite alternate; }
@keyframes chestPulse { from { transform: scale(1); } to { transform: scale(1.04); } }
.chest-got { margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(217, 178, 92, 0.15); }
.open-box { text-align: center; }
.open-box .lid { width: 120px; height: 120px; margin: 0 auto 10px; border-radius: 14px; background: center / contain no-repeat; animation: shake 0.6s ease-in-out; }
@keyframes shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(4deg); } }
.open-cards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; min-height: 120px; }
.open-cards .cx { opacity: 0; transform: translateY(20px) scale(0.8); }
.open-cards .cx.pop { animation: pop 0.5s forwards; }
@keyframes pop { to { opacity: 1; transform: translateY(0) scale(1); } }
.cx.glow2 { box-shadow: 0 0 10px #6fa8ff; } .cx.glow3 { box-shadow: 0 0 12px #c58cff; } .cx.glow4 { box-shadow: 0 0 14px #ff9c3f; } .cx.glow5 { box-shadow: 0 0 18px 4px #ffd75e; }
body.quake { animation: quake 0.5s; }
@keyframes quake { 0%, 100% { transform: translate(0); } 25% { transform: translate(-4px, 2px); } 50% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, -2px); } }
.gauge { position: relative; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); overflow: hidden; margin: 6px 0; }
.gauge .fill { position: absolute; left: 0; top: 0; bottom: 0; background: #d9b25c; transition: width 0.6s; }
.gauge .fill.shard { background: #8e5cd9; }
.badge.up { background: #2e9e5b; color: #fff; }
.road { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0; }
.road .node { flex: 0 0 auto; min-width: 84px; border: 1px solid rgba(217, 178, 92, 0.3); border-radius: 10px; padding: 6px; text-align: center; background: rgba(0, 0, 0, 0.25); font-size: 12px; }
.road .node.done { opacity: 0.5; } .road .node.ready { box-shadow: 0 0 10px rgba(217, 178, 92, 0.6); }
.road .node .era { display: block; font-size: 11px; opacity: 0.7; }

/* ================= v2.7.0: 스크롤 0 게임 화면(#50) — 100dvh 틀 · 하단 탭 · 쪽 넘기기(pager.js) · 큰 카드(L1) · 내 성 장면 · 진영 캐러셀 · 시트 =================
   원칙: 문서 스크롤 0 · 화면 안 스크롤 영역 0(넘치면 쪽) · 카드 크기는 화면 높이 비율(META_RULES.ui: 손패 28% · 회의장 22% · 진영 40% · 크게 보기 75%) · 전환 200ms. 뒤에 오는 규칙이 앞의 것을 덮는다. */
:root { --vh: 100vh; --top-h: 44px; --tabs-h: 58px; --nav-h: 24px; --page-ms: 200ms; --hand-h: 28vh; --row-h: 22vh; --big-h: 75vh; --fac-h: 40vh;
  --card-w: calc(var(--hand-h) / 1.4917); --row-w: calc(var(--row-h) / 1.4917); --pact-w: calc(var(--row-h) / 1.4917 * 0.42); }
@supports (height: 100dvh) { :root { --vh: 100dvh; --hand-h: 28dvh; --row-h: 22dvh; --big-h: 75dvh; --fac-h: 40dvh; } }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
#app { height: var(--vh); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
#topbar { grid-row: 1; } .stage { grid-row: 2; } #tabs { grid-row: 3; }   /* 윗줄·탭이 접혀도(대국) 무대는 늘 2번째 줄 */
.topbar-app { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: var(--top-h); padding: 0 10px; border-bottom: 1px solid var(--line); background: rgba(18, 15, 12, .92); overflow: hidden; }
.hud { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--ink2); }
.hud b { color: var(--gold2); font-family: var(--serif); font-weight: 700; }
.hud .hi { margin-right: 10px; }
.topbar-app .audio-ctl { margin-left: 0; flex: 0 0 auto; }
.stage { position: relative; min-height: 0; overflow: hidden; }
.stage > .screen { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; padding: 6px 16px 0; max-width: none; margin: 0; }
.stage > .screen.page, #start { max-width: none; margin: 0; padding: 6px 16px 0; }
.stage > .screen.enter { animation: screenIn var(--page-ms) ease both; }
@keyframes screenIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stage > .screen.enter { animation: none; } .pg-track { transition: none !important; } }
/* 쪽 넘기기 */
.pg-view { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; width: 100%; max-width: 1180px; margin: 0 auto; }
.pg-track { position: relative; transition: transform var(--page-ms) ease; will-change: transform; }
.pg-nav { flex: 0 0 auto; height: var(--nav-h); display: flex; align-items: center; justify-content: center; gap: 6px; }
.pg-nav.one { visibility: hidden; }
.pg-nav button { all: unset; cursor: pointer; padding: 0 10px; min-width: 30px; text-align: center; color: var(--gold2); font-size: 13px; line-height: var(--nav-h); }
.pg-nav button:disabled { opacity: .25; cursor: default; }
.pg-nav button:not(:disabled):active { transform: scale(.9); }
.pg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: rgba(214, 178, 94, .3); margin: 0 3px; cursor: pointer; }
.pg-dot.on { background: var(--gold2); }
.pg-num { font-size: 12px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.page-head, h2.sec, .pick-title, .hero, .filters, .summon-actions { break-after: avoid; break-inside: avoid; }
.page-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.page-head h1 { font-size: 20px; margin: 0; }
.page-sub { font-size: 12px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sec { margin: 8px 0 6px; font-size: 16px; }
.panel { margin-bottom: 10px; padding: 10px 12px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.tile, .quest, .chest, .gen, .bld, .cx, .target, .grow-row, .qrow, .mini-game, .bond, .journal li, .ptable tr, .save-row, .tiles, .chests, .road, .gauge, .siege .boss, .unit-form, .unit-tabs, .res-side, .open-box, .fight-art, .intro, .guide-box, .start-actions, .cards2 .panel, .factions, .dlg-line, .dlg-head, .mbtns { break-inside: avoid; }
.road { flex-wrap: wrap; overflow: visible; }
.cards2 { grid-template-columns: 1fr 1fr; }
.city-panel { max-height: none; overflow: hidden; }
/* 탭 바(아래 고정 줄 · 그리드 한 줄) */
.tabs { position: static; top: auto; bottom: auto; display: flex; gap: 2px; height: var(--tabs-h); padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); border-bottom: 0; background: rgba(18, 15, 12, .96); }
.tab { flex: 1; flex-direction: column; justify-content: center; gap: 0; padding: 2px 4px; min-height: 0; font-size: 12px; line-height: 1.2; border-radius: 10px; transition: transform .1s, background .15s; }
.tab .ti { font-size: 19px; }
.tab:active { transform: scale(.92); }
.btn:active, .cx:active, .faction:active, .card.playable:active, .bld:active, .sc-b:active { transform: scale(.96); filter: brightness(1.1); }
/* ---- 회의(시작): 진영 캐러셀(한 장씩 크게 · ≥ 화면 40%) */
.hero { margin-bottom: 6px; }
.hero h1 { font-size: clamp(26px, 4.5vw, 42px); margin: 2px 0 4px; }
.hero-sub { font-size: 14px; margin: 0 0 2px; }
.hero-fuse { font-size: 11.5px; }
.hero.with-scene { padding: 12px 10px 10px; }
.pick-title { font-size: 16px; margin: 6px 0 6px; }
.factions { display: block; position: relative; padding: 0 44px; height: calc(var(--fac-h) + 34px); }
.fac-view { overflow: hidden; height: var(--fac-h); }
.fac-track { display: flex; height: 100%; transition: transform var(--page-ms) ease; }
.fac-slide { flex: 0 0 100%; display: grid; place-items: center; min-width: 0; }
.faction { height: var(--fac-h); width: min(100%, calc(var(--fac-h) * .92)); display: flex; flex-direction: column; }
.faction img { flex: 1 1 auto; min-height: 0; height: 0; width: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 15%; }
.faction .fbody { flex: 0 0 auto; padding: 6px 10px 8px; }
.faction .fname { font-size: 16px; }
.faction .fpass { font-size: 12px; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fac-prev, .fac-next { position: absolute; top: calc(var(--fac-h) / 2 - 22px); width: 40px; height: 44px; border: 1px solid var(--line); background: rgba(18, 15, 12, .8); color: var(--gold2); border-radius: 10px; font-size: 18px; cursor: pointer; z-index: 2; }
.fac-prev { left: 0; } .fac-next { right: 0; }
.fac-dots { display: flex; justify-content: center; gap: 6px; height: 30px; align-items: center; }
.fac-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(214, 178, 94, .3); cursor: pointer; } .fac-dots i.on { background: var(--fc, var(--gold2)); box-shadow: 0 0 8px var(--fc, var(--gold2)); }
.start-actions { margin-top: 8px; gap: 8px 14px; }
.start-foot { margin-top: 8px; }
.defense { margin-top: 10px; }
/* ---- 대국: 한 화면(손패 ≥ 28% · 회의장 카드 ≥ 22%) · 겹침 부채꼴(--ov 는 JS) · 회의록은 잘리기만(스크롤 없음) */
#game { height: 100%; min-height: 0; padding: 0 12px 4px; gap: 0 10px; grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "top top" "board log" "action log" "hand hand"; }
#game .topbar { padding: 3px 4px; gap: 8px; min-height: 36px; }
#game .top-actions { gap: 6px; }
#game .audio-ctl { padding: 1px 6px; }
.board { padding: 4px 0; gap: 6px; grid-template-rows: auto auto auto; align-content: center; min-height: 0; }
.side { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 0 8px; align-items: center; min-height: 0; }
.side .lane { grid-column: 1; grid-row: 1; }
.side-head { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.side-head .who { flex-wrap: wrap; font-size: 13px; }
.side-head .who .ptext { display: none; }
.side-head .meta { flex-direction: column; gap: 0; font-size: 12px; line-height: 1.3; }
.lane { padding: 6px 8px; gap: 8px; min-height: 0; grid-template-columns: auto minmax(0, 1fr) auto; }
.pact-slot { min-width: calc(var(--pact-w) * 2 + 8px); min-height: calc(var(--pact-w) * 1.4917); padding-right: 8px; }
.row { flex-wrap: nowrap; min-height: var(--row-h); overflow: visible; }
.row .card + .card, .hand .card + .card { margin-left: calc(-1 * var(--ov, 0px)); }
.row .card:hover { z-index: 3; }
.total { min-width: 72px; }
.total .num { font-size: 30px; }
.total .sub { font-size: 11px; }
.trial { grid-template-columns: auto minmax(0, 1fr) auto; padding: 4px 10px; gap: 8px; align-items: center; }
.trial .thead { gap: 8px; }
.trial .tsym { width: 30px; }
.trial .tlabel { font-size: 11px; }
.trial .tname { font-size: 15px; line-height: 1.2; }
.trial .chips { flex-wrap: wrap; max-height: 46px; overflow: hidden; margin-top: 0; }
.chip { font-size: 11.5px; padding: 1px 8px; }
.trial .preview { font-size: 11px; max-width: 170px; line-height: 1.3; }
.actionbar { padding: 3px 2px; gap: 8px; min-height: 40px; }
.prompt { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; }
.prompt .guide { margin: 0; padding: 2px 8px; font-size: 13px; display: inline-block; }
.prompt .advice { margin-top: 0; padding: 1px 6px; font-size: 12px; }
.buttons .btn { padding: 7px 14px; font-size: 14px; }
.hand { overflow: visible; padding: 12px 6px 2px; min-height: 0; height: calc(var(--hand-h) + 16px); justify-content: center; align-items: flex-end; }
.hand .card { transition: transform .15s, box-shadow .15s, outline-color .15s, margin .15s; }
.hand .card.focus { transform: translateY(-14px) scale(1.06); z-index: 4; box-shadow: 0 16px 30px rgba(0, 0, 0, .75), 0 0 0 2px var(--gold2); }
.card.selected { z-index: 3; }
.log { margin-top: 4px; min-height: 0; overflow: hidden; }
.log-head { padding: 5px 10px; font-size: 13px; }
.log ol { overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; flex: 1 1 auto; min-height: 0; padding: 4px 10px; font-size: 12px; }
.log li { padding: 2px 0; flex: 0 0 auto; }
.card .nm { font-size: clamp(9px, calc(var(--card-w) * .085), 14px); }
.card.sz-row .nm { font-size: clamp(8.5px, calc(var(--row-w) * .085), 12px); }
.card .pw { min-width: clamp(24px, calc(var(--card-w) * .2), 36px); height: clamp(24px, calc(var(--card-w) * .2), 36px); font-size: clamp(13px, calc(var(--card-w) * .11), 19px); }
.card.sz-row .pw { min-width: clamp(22px, calc(var(--row-w) * .2), 32px); height: clamp(22px, calc(var(--row-w) * .2), 32px); font-size: clamp(12px, calc(var(--row-w) * .11), 17px); }
@media (max-width: 980px) {
  #game { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "board" "action" "hand"; height: 100%; min-height: 0; }
  .log { display: none; }
  .cards2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #game .topbar .brand, #game .rpip .rw, #honorTop, #game .audio-ctl input, #game .audio-ctl .small { display: none; }
  .side { grid-template-columns: minmax(0, 1fr); }
  .side-head { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; gap: 8px; height: 22px; overflow: hidden; }
  .side.me .side-head { display: none; }
  .side-head .meta { flex-direction: row; gap: 8px; }
  .lane { grid-template-columns: minmax(0, 1fr) 62px; grid-template-rows: auto auto; padding: 5px 6px; gap: 2px 6px; }
  .row { grid-column: 1; grid-row: 1 / span 2; }
  .total { grid-column: 2; grid-row: 1; min-width: 0; text-align: center; }
  .total .num { font-size: 22px; }
  .total .sub { display: none; }
  .pact-slot { grid-column: 2; grid-row: 2; border: 0; padding: 0; min-width: 0; min-height: 0; justify-content: center; }
  .pact-slot .plabel { display: none; }
  :root { --pact-w: 26px; }
  .trial .preview, .trial .chip:last-child, .trial .tlabel { display: none; }
  .trial { padding: 3px 8px; gap: 6px; }
  .trial .chips { max-height: 24px; flex-wrap: nowrap; }
  .actionbar { flex-wrap: nowrap; min-height: 44px; }
  .buttons .btn { padding: 6px 10px; font-size: 13px; }
  .hand { padding: 10px 2px 0; }
  .res-grid { grid-template-columns: 1fr; }
}
@media (max-height: 520px) {   /* 가로 휴대폰: 손패를 오른쪽 세로 부채꼴로 */
  :root { --top-h: 36px; --tabs-h: 44px; }
  #game { grid-template-columns: minmax(0, 1fr) calc(var(--card-w) + 22px); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "top hand" "board hand" "action hand"; gap: 0 8px; }
  .hand { flex-direction: column; height: auto; border-top: 0; border-left: 1px solid var(--line); padding: 4px 4px 4px 8px; justify-content: flex-start; align-items: center; }
  .hand .card + .card { margin-left: 0; margin-top: calc(-1 * var(--ov, 0px)); }
  .hand .card.focus { transform: translateX(-10px) scale(1.06); }
  .side { grid-template-columns: minmax(0, 1fr); } .side-head { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; gap: 8px; height: 20px; overflow: hidden; } .side.me .side-head { display: none; } .side-head .meta { flex-direction: row; gap: 8px; }
  .lane { padding: 4px 6px; } .board { gap: 3px; padding: 2px 0; }
  .trial { padding: 2px 8px; } .trial .preview { display: none; } .trial .chips { max-height: 24px; flex-wrap: nowrap; overflow: hidden; }
  .actionbar { min-height: 36px; }
  .tab .ti { font-size: 15px; } .tab .tn { display: none; }
  .factions { height: calc(var(--fac-h) + 30px); }
}
/* ---- 겹창 = 고정 높이 시트(넘치면 시트 안 쪽 넘기기) · 휴대폰은 아래 시트 */
.overlay { padding: 10px; place-items: center; }
.modal-card, .rules-card, .zoom-card, .detail-card, .dialog-card { max-height: none; overflow: hidden; display: flex; flex-direction: column; padding: 14px 16px 4px; }
.modal-card h2, .rules-card h2 { font-size: 20px; margin: 0 0 8px; }
.detail-card { grid-template-columns: none; gap: 0; }
.zoom-card { grid-template-columns: none; gap: 0; }
.detail-card .dimg, .zoom-card .zimg { break-after: column; break-inside: avoid; }
.detail-card .dpic { width: auto; height: var(--big-h); max-width: 100%; aspect-ratio: 848 / 1264; margin: 0 auto; }
.zoom-card .zimg { width: auto; height: var(--big-h); max-width: 100%; aspect-ratio: 360 / 537; margin: 0 auto; }
.detail-card .dpic, .zoom-card .zimg { max-height: calc(var(--vh) * .8); }
.dthumbs { justify-content: center; }
.detail-card h3 { font-size: 20px; }
.detail-card h4 { margin: 10px 0 4px; }
@media (max-width: 980px) { .detail-card { grid-template-columns: none; } .detail-card .dpic { max-width: 100%; } .zoom-card .zimg { width: auto; } }
@media (max-width: 640px) { .overlay { place-items: end center; padding: 0; } .modal-card, .rules-card, .zoom-card, .detail-card, .dialog-card { border-radius: 16px 16px 0 0; border-bottom: 0; } }
.toast { top: 12%; font-size: 16px; padding: 8px 18px; }
/* ---- 내 성: 장면 화면(성 배경 위 건물 아이콘 · 첫 쪽) */
.scene-castle { position: relative; height: calc(var(--page-h, 60vh) - 6px); break-after: column; break-inside: avoid; border-radius: 12px; overflow: hidden; background: #1a1410 url(img/ui/w_castle_bg.webp) center / cover no-repeat; border: 1px solid rgba(214, 178, 94, .35); box-shadow: inset 0 0 0 1000px rgba(18, 15, 12, .28); }
.sc-strip { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: linear-gradient(rgba(18, 15, 12, .92), rgba(18, 15, 12, .55) 80%, transparent); z-index: 2; }
.sc-strip .owl { width: 40px; height: 52px; object-fit: contain; flex: 0 0 auto; }
.sc-strip .qbody { flex: 1 1 auto; min-width: 0; }
.sc-strip .qtext { font-size: 14px; font-weight: 700; color: var(--gold2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-strip .qsub { font-size: 11.5px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-strip .qbtns { display: flex; gap: 6px; flex: 0 0 auto; }
.sc-b { position: absolute; width: clamp(64px, 12%, 104px); transform: translate(-50%, -50%); text-align: center; cursor: pointer; border: 0; background: transparent; padding: 0; color: var(--ink); font: inherit; transition: transform .12s; }
.sc-b:hover { transform: translate(-50%, -52%) scale(1.06); }
.sc-b .sci { width: 100%; aspect-ratio: 1; border-radius: 14px; background: rgba(0, 0, 0, .25) center / cover no-repeat; box-shadow: 0 6px 16px rgba(0, 0, 0, .6); border: 1px solid rgba(214, 178, 94, .35); }
.sc-b.can .sci { border-color: var(--gold2); box-shadow: 0 0 14px rgba(241, 215, 150, .6), 0 6px 16px rgba(0, 0, 0, .6); }
.sc-b .scl { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 700; text-shadow: 0 1px 3px #000; white-space: nowrap; }
.sc-b .scl b { display: inline-block; min-width: 18px; border-radius: 9px; background: var(--gold2); color: #1a1408; font-size: 10.5px; padding: 0 5px; margin-left: 3px; }
.sc-b .scl .cd { color: var(--gold2); font-weight: 400; }
.sc-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 6px 8px; background: linear-gradient(transparent, rgba(18, 15, 12, .9) 60%); z-index: 2; }
.sc-foot .btn { padding: 4px 10px; font-size: 12px; }
.sc-foot .btn.hot { outline: 2px solid var(--gold2); box-shadow: 0 0 12px rgba(241, 215, 150, .6); }
@media (max-width: 640px) { .sc-b { width: 19%; } .sc-b .scl { font-size: 10.5px; } .sc-strip .owl { display: none; } }
/* ---- 도감: 쪽마다 3×3(휴대폰) · 6×3(큰 화면) — 카드 폭은 JS 가 --cx-w 로 */
.codex-grid { grid-template-columns: repeat(auto-fill, minmax(var(--cx-w, 112px), 1fr)); gap: 12px; justify-items: center; align-content: start; }
.codex-grid .cx { width: var(--cx-w, 112px); }
.filters { margin-bottom: 8px; gap: 5px; }
.filters select, .filters input { min-height: 34px; padding: 5px 8px; font-size: 12.5px; }
.more { margin: 8px 0; }
/* ---- 세계: 지구본 + 도시 패널이 한 쪽(패널 안은 쪽 넘기기) */
.world-wrap { height: 100%; min-height: 0; break-inside: avoid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; }
#worldBox { height: calc(var(--page-h, 60vh) - 2px); margin: 0; padding: 8px 10px; }
.globe-box { height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; }
.globe { width: auto; height: 100%; max-width: 100%; max-height: 100%; aspect-ratio: 1 / 1; }
.globe-hint { margin-top: 2px; font-size: 11.5px; }
.world-side { height: 100%; min-height: 0; gap: 6px; }
.city-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 8px 10px; }
.city-panel .pg-view { max-width: none; }
.city-panel h3 { font-size: 17px; }
.era { padding: 4px 9px; min-height: 30px; font-size: 12px; }
.world-search input { min-height: 34px; padding: 6px 9px; font-size: 13px; }
@media (max-width: 980px) { .world-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 42%) minmax(0, 1fr); gap: 6px; } .globe { max-height: 100%; } .city-panel { max-height: none; } }
/* v2.7.0 보정(첫 실측 뒤): 내 성·세계는 탭 이름이 곧 제목 — 머리글을 접고 장면·지구본이 첫 쪽을 다 쓴다 · 휴대폰 대국의 상대 머리줄은 회의장 위 한 줄 · 과제 상자 두 줄 · 첫 화면 영웅 글은 작은 화면에서 접는다 */
#castle .page-head, #world .page-head { display: none; }
#castleBox.castle-on { padding: 0; background: transparent; border-radius: 0; }
.scene-castle { height: calc(var(--page-h, 60vh) - 2px); }
@media (max-width: 640px), (max-height: 520px) {
  .side .lane { grid-row: auto; }
  .trial { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px; }
  .trial .thead > div { min-width: 0; } .trial .tname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
  .topbar-app .audio-ctl input[type=range], .topbar-app .audio-ctl .small { display: none; }
}
@media (max-width: 640px), (max-height: 800px) {
  .hero-sub, .hero-fuse { display: none; }
  .hero h1 { font-size: 24px; margin: 0; } .hero { margin-bottom: 4px; } .hero.with-scene { padding: 8px 10px 8px; }
  .guide-box { padding: 8px 10px; margin-bottom: 8px; } .guide-box h3 { font-size: 15px; margin: 0 0 4px; } .guide-box p { font-size: 12px; margin: 0 0 6px; } .guide-box .btn { padding: 6px 14px; font-size: 13px; }
}
/* v2.7.0 보정 2: 장면 아이콘은 블록 · 가로 휴대폰 대국 윗줄 한 줄 · 휴대폰 회의장 머리줄은 회의장 위 줄(겹침 0) · 가로 휴대폰 시트는 거의 전체 높이 */
.sc-b .sci { display: block; }
@media (max-width: 640px), (max-height: 520px) {
  .side.opp .side-head { grid-row: 1; grid-column: 1; } .side.opp .lane { grid-row: 2; grid-column: 1; } .side.me .lane { grid-row: 1; grid-column: 1; }
}
@media (max-height: 520px) {
  #game .topbar { flex-wrap: nowrap; overflow: hidden; } #game .topbar .brand, #honorTop, #game .rpip .rw, #game .audio-ctl input, #game .audio-ctl .small { display: none; }
  .overlay { padding: 4px; } .modal-card, .rules-card, .zoom-card, .detail-card, .dialog-card { padding: 8px 12px 2px; }
  .detail-card .dthumbs { margin-top: 4px; }
}
/* v2.7.0 보정 3: 문서 스크롤 0 은 html 에서만 잠근다(body 는 보이게 — 무엇이든 틀 밖으로 넘치면 게이트 NS1 이 잡는다) · 가로 휴대폰 첫 화면은 영웅 글을 접고 안내 상자를 한 줄로 */
html { overflow: hidden; overscroll-behavior: none; } body { overflow: visible; }
@media (max-height: 520px) {
  #start .hero { display: none; }
  .guide-box { display: flex; align-items: center; gap: 10px; text-align: left; padding: 4px 10px; margin-bottom: 4px; }
  .guide-box h3 { margin: 0; font-size: 13px; flex: 1 1 auto; } .guide-box p { display: none; } .guide-box .mbtns { margin: 0; flex: 0 0 auto; }
  .pick-title { margin: 2px 0; font-size: 14px; }
}
/* v2.8.0: 오늘의 상점(#47-8) · 주말 이벤트 대국(#47-6) */
.shop-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.shop-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.event-box { break-inside: avoid; margin-top: 8px; }
.ev-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.ev-track { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.ev-step { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink2); }
.ev-step.reach { border-color: var(--gold); color: var(--gold2); }
.ev-step.got { border-color: var(--good); color: var(--good); }
/* v2.9.0: 시즌 패스(#47-9) — 명예의 길 마디 재사용 */
#seasonBox .road .node { min-width: 76px; }
/* v2.10.0: 감정 표현(#47-7) — 💬 메뉴 · 말풍선(출처 링크 포함 · 3초) */
#game .top-actions { position: relative; }
.emote-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: flex; gap: 4px; flex-wrap: wrap; max-width: 320px; padding: 6px; background: rgba(18, 15, 12, .96); border: 1px solid var(--gold); border-radius: 10px; box-shadow: var(--shadow); }
.side.me .lane { position: relative; }
.bubble { position: absolute; left: 10px; top: -10px; z-index: 5; max-width: min(72%, 520px); padding: 6px 10px; border-radius: 12px 12px 12px 2px; background: #f3e9d2; color: #1a130b; font-size: 13px; line-height: 1.35; box-shadow: 0 6px 16px rgba(0, 0, 0, .5); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; animation: bubbleIn .2s ease-out; }
.bubble .orig { display: block; font-size: 11px; color: #5a4a30; }
.bubble a.src { color: #7a5a1a; font-size: 11px; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .bubble { max-width: 90%; font-size: 12px; } }
@media (max-width: 640px) { #game .topbar .btn.small { padding: 5px 8px; } #game .topbar { gap: 4px; } }
/* v2.11.0 L1 보정(#38 댓글 07:53): 진영 캐러셀의 '보이는 초상(img)' 높이 = 화면 높이 40% — 카드 = 초상, 글 상자는 초상 아래를 덮는 띠 */
.faction { height: var(--fac-h); position: relative; display: block; }
.faction img { position: absolute; inset: 0; width: 100%; height: 100%; flex: none; min-height: 0; aspect-ratio: auto; object-fit: cover; object-position: 50% 15%; }
.faction .fbody { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 8px; border-top: 0; background: linear-gradient(transparent, rgba(18, 15, 12, .6) 34%, rgba(18, 15, 12, .94)); }
.faction .fname { text-shadow: 0 1px 3px #000; }
.faction .fname::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--fc, var(--gold)); box-shadow: 0 0 8px var(--fc, var(--gold)); margin-right: 6px; vertical-align: middle; }
.faction { border: 0; outline: 1px solid var(--line); outline-offset: -1px; }   /* 테두리가 초상 높이를 2px 깎지 않게(L1 = innerHeight 40% 정확히) */
.faction:hover { outline-color: var(--gold); }
/* v2.12.0 카드 물성(#27 · 품질 2): 올리면/누르면 기울기 + 전설 홀로그램 · 코치마크(품질 3) */
.card.tilt, .cx.tilt, .faction.tilt { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px) scale(1.04); z-index: 5; transition: transform .08s ease-out; }
.hand .card.tilt { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-12px) scale(1.05); }
.card.legend::before, .cx.legend::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 1;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 42%), linear-gradient(115deg, transparent 22%, rgba(255, 120, 200, .38) 36%, rgba(120, 255, 220, .38) 46%, rgba(255, 230, 120, .38) 56%, rgba(120, 160, 255, .38) 66%, transparent 80%);
  background-size: 100% 100%, 260% 260%; background-position: 0 0, var(--mx, 50%) var(--my, 50%); mix-blend-mode: screen; }
.card.legend.tilt::before, .cx.legend.tilt::before { opacity: 1; }
.card .pw, .card .nm, .card .tags, .cx .nm, .cx .badge, .cx .lock { z-index: 2; }
.coach { position: fixed; z-index: 80; padding: 8px 12px; border-radius: 12px; background: #f3e9d2; color: #1a130b; font-size: 13px; line-height: 1.4; box-shadow: 0 8px 24px rgba(0, 0, 0, .6); animation: bubbleIn .2s ease-out; }
.coach b { color: #7a5a1a; margin-right: 4px; }
.coach::before { content: ''; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; background: #f3e9d2; transform: translateX(-50%) rotate(45deg); }
.coach.up::before { top: auto; bottom: -6px; }
.coach-ring { position: fixed; z-index: 79; border: 2px solid var(--gold2); border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 4px rgba(241, 215, 150, .25), 0 0 18px rgba(241, 215, 150, .7); animation: coachPulse 1.2s ease-in-out infinite; }
@keyframes coachPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .coach-ring { animation: none; } .card.tilt, .cx.tilt, .faction.tilt { transform: none; } }
/* v2.13.0 대화 타자기(#27 · 품질 4): 전체 글은 투명하게 자리만 지키고(보조기기는 읽는다) 위에 겹친 글이 한 글자씩 */
.dlg-text.tw { display: block; position: relative; }
.dlg-text.tw .tw-full { color: transparent; }
.dlg-text.tw .tw-vis { position: absolute; left: 0; top: 0; right: 0; white-space: pre-wrap; }
.dlg-text.typing .tw-vis::after { content: '▍'; color: var(--gold2); animation: twBlink 1s steps(2) infinite; }
@keyframes twBlink { 50% { opacity: 0; } }
/* v2.14.0 첫 화면 영상 배경(#27 · 품질 5) — 글 아래에 어둡게 · 지연 적재 */
.hero { position: relative; overflow: hidden; }
.hero > :not(.hero-video) { position: relative; z-index: 1; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: brightness(.42) saturate(.9); opacity: 0; animation: heroIn 1.2s ease-out forwards; pointer-events: none; }
@keyframes heroIn { to { opacity: 1; } }
@media (max-height: 520px) { .hero-video { display: none; } }
/* v2.16.1 첫인상(로컬 · 09-28 실측: 1920 첫 화면의 약 75%가 빈 곳 · 탭 이모지 · 코치 말풍선이 모달 뒤 단추를 가리킴)
   ① 성 세우기 전 화면이 한 쪽을 다 쓰고, 세운 뒤 보게 될 성 그림을 흐린 미리보기로 깐다 — 미리보기는 같은 그림의 48x85 축소판(926바이트 · 글에 박음)이라 P1 첫 화면 예산을 거의 안 쓴다(원본 237KB 는 세운 뒤에만)
   ② 탭 아이콘 = 한 벌 선 SVG(#27-6) — 크기는 기존 .tab .ti 글자 크기를 그대로 따른다 */
.tab .ti svg { display: block; width: 1.25em; height: 1.25em; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#castleBox.castle-intro { padding: 0; background: transparent; border-radius: 0; }
.intro { position: relative; height: calc(var(--page-h, 60vh) - 2px); min-height: 260px; }
.intro::before { content: ''; position: absolute; inset: -32px; z-index: 0; background: #1a1410 url(data:image/webp;base64,UklGRpYDAABXRUJQVlA4IIoDAABwEgCdASowAFUAPsFQn0qnpKKhsBqqqPAYCWIArk97j+Ca/mcV3DjbbLkMWJuicKOrQeZOjFo7hHx5G9aYSS1XgtWwq+9YOv6hnCUmUdAOk7TvgPv2lQI721/fEUIzhTaYeAKNUwuQ+CypA5iIteYPIQPF0N5pD580ZFYBei4y3VKP/+QEbkCWZXSomOCtMykiWDMKTtTNjMR1MnAA/vyos4sWKPtlIL2kzgFfs8NTaQYFuT4g15iC+eNueEWXrRPOqKRNeUbwVnz0KPYlkGMMWzKDCuiQLB5cGsAKO0oLa1caq10fnfe0TGV6SJqS6BqgAgdQAg5K2Yvk/LgnZGJALSq0Va+JK/10lnYdyO0cZPMBFUCoT3mxNq9V0ANdXlbsxCaOB8nW3h2ruIqtysSB5abAsVrC3YXX+9LVC+bTG8BHvzvVittTeNduXDbMmBqyCPaomyuU0fjMricggsk0A12Mm3Rx4Kkx+URHUUahpI071xdkpe/5O4paVBvUQXYL6dhy80lGIF8mC4TLzkGNL2blvQxioezSlSho4H8Qgh34fCnHQFEH7A8DQufFZv0MjU5EZh+C/y/04wPvwpoleBnJe6/a48M2A2VkzsmTQpVa9cjMWsqj8gVyccL8aWkjS5d4IpHqYu5GdAJQlom/37uJXCzO0/VoUwpLoRtmSAJFohzQDHYGhyZ7b6g83cG/pdGbwvxKbHCkbJRe6AUvRKBtQRi12v6Ilp5W6fx9ja3YTaNzc0VKu0Ph8xL6ZPY/cJ/KedK1UAUC0/6ruB9hrLOumMvSMYhh0tAw9MlINY4tLs27Zl3EwmLYwtNqqlrm7nIqV/GN/R3mAvb1ux25RKmYCHHJkVLW2z7jh8glB0KZD8oKRxbzyHSEH7Vm4FESZvvZj3zVnqVsMQiVm87yu3Ubr+TFWP4IqcIHo1Q5fn2fh0ntOJHARX5K5sPfcBbDhj0bkiNV3b23QBk3ucEtbMa/bnPVNYbnyj6DStF39kohzyl+pNGLReBOcG3vXXhj9ENiaQO0S7AtaOC9hwMiWI/76yOK6pAPgj68bEyp8JYRQPD1TErWVJJvCXBOfnq4u0hzTP1mhRhxkNxZwrh2Qf8fJ9EqqaQ16DpgIeRDyL7LS+l9iRrXKY5zWxsmmaXRDJGWw1pRTlo1VWPQXLrs+Pz9ukRH9VZbB3PHsO0CJCxAAeLNhzCYAAA=) center / cover no-repeat; filter: blur(max(12px, 1vw)) brightness(.72) saturate(1.05); transform: scale(1.04); }
.intro .intro-body { position: relative; z-index: 1; padding: 120px max(18px, calc((100% - 760px) / 2)) 22px; }
.intro h2 { font-size: clamp(22px, 3vw, 34px); }
@media (prefers-reduced-motion: no-preference) { .intro::before { animation: introDrift 18s ease-in-out infinite alternate; } }
@keyframes introDrift { to { transform: scale(1.12) translateY(-2%); } }

/* ---------------------------------------------------------------- v2.17 — 잠금을 즐길 거리로 · 고화질 올림 · 자가 플레이 결함 */
/* 비활성 단추: 포인터를 통과시켜 부모에서 잡고 이유를 토스트(app.js wireOff · 터치는 title 을 못 본다) */
button[disabled], .btn[disabled] { pointer-events: none; }
/* 고화질 올림: 바뀐 순간 살짝 스며들기(같은 그림이라 깜빡임 없음) */
.hd-in { animation: hdIn .35s ease-out; }
@keyframes hdIn { from { filter: blur(1.5px); } to { filter: none; } }
/* 첫 화면: 한 줄 소개 · 흐린 자리표시 위로 진짜 성 그림이 스며든다 */
.intro-art { position: absolute; inset: 0; z-index: 0; background: center / cover no-repeat; opacity: 0; transition: opacity .9s ease; }
.intro-art.hd-in { opacity: 1; animation: none; }
.intro-art.hd-in ~ .intro-body { background: linear-gradient(transparent, rgba(18, 15, 12, .9) 38%); }
.intro-what { margin: 0 0 10px; font-size: clamp(15px, 1.6vw, 18px); color: var(--gold2); font-weight: 600; }
/* 시대 칩: 잠김 → 맛보기 · 진행도 */
.era.taste { border-style: dashed; }
.era-tag { margin-left: 5px; font-size: 10px; padding: 1px 5px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink2); vertical-align: 1px; }
.era-prog { flex-basis: 100%; margin-top: 4px; line-height: 1.5; }
.city-btns .btn { white-space: normal; text-align: left; line-height: 1.35; height: auto; }
/* 미래 회의: 과제 6개 */
.future-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.future-card { appearance: none; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(214, 178, 94, .06); color: var(--ink); cursor: pointer; min-height: 96px; }
.future-card:hover { border-color: var(--gold); }
.future-card .fi { font-size: 26px; }
.future-card b { color: var(--gold2); font-size: 16px; }
/* 판본 미리보기 */
.detail-card .dpic { position: relative; }
.ver-lock { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(18, 15, 12, .82); border: 1px dashed var(--gold); color: var(--gold2); font-size: 12px; text-align: center; }
.dth.on { border-color: var(--gold); color: var(--gold2); }
/* 소환 공개: 살아 있는 초상 */
.sm-portrait { flex-basis: 100%; max-width: 360px; margin: 0 auto 8px; text-align: center; }
.sm-portrait video, .sm-portrait img { width: 100%; border-radius: 12px; display: block; }
@media (max-width: 600px) { .era-tag, .era-prog .ep-order { display: none; } }   /* 휴대폰: 칩 두 줄 · 진행도 한 줄(세계 쪽 도시 패널 자리 — NS1) — 맛보기 표시는 점선 테두리 + 누르면 토스트 */
/* v2.17.1 휴대폰 손패(자가 플레이 결함 3-8 · 390 폭에서 손패 10장이 22px 띠로 겹쳐 이름을 못 읽음) — 스크롤 0(NS1) 그대로
   ① 많이 겹치면(.hand.tight = 겹침 > 45%) 보이는 왼쪽 띠에 이름을 세로로 ② 한 번 누르면 손패 위에 큰 미리보기(#handPeek · 비모달 · 누르기는 카드로) */
.hand.tight .card:not(:last-child):not(.focus) .nm { left: 1px; right: auto; top: 28px; bottom: 6px; width: 17px; padding: 3px 1px; writing-mode: vertical-rl; white-space: nowrap; text-overflow: clip; font-size: 11px; line-height: 1; letter-spacing: -.5px; border-radius: 4px; text-align: start; }
.hand.tight .card:not(:last-child):not(.focus) .nm .dm { display: none; }
#handPeek { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--hand-h, 150px) + 56px); z-index: 60; width: min(58vw, 280px); pointer-events: none; display: flex; flex-direction: column; gap: 6px; filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .75)); }
#handPeek.hidden { display: none; }
#handPeek .hp-img { width: 100%; aspect-ratio: 848 / 1264; border-radius: 12px; background: #1a1410 center / cover no-repeat; border: 2px solid var(--gold2); }
#handPeek .hp-cap { text-align: center; background: rgba(18, 15, 12, .92); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; font-size: 13px; color: var(--ink2); }
#handPeek .hp-cap { word-break: keep-all; line-height: 1.35; }
#handPeek .hp-cap b { display: block; color: var(--gold2); font-size: 15px; }
#handPeek .hp-hint { align-self: center; text-align: center; font-size: 11.5px; color: var(--ink2); background: rgba(18, 15, 12, .92); border-radius: 8px; padding: 3px 10px; word-break: keep-all; }
@media (min-width: 900px) { #handPeek { display: none !important; } }   /* 넓은 화면은 손패가 안 겹친다 — 미리보기는 휴대폰 전용 */