/* ===================================================================
   20차 · 콤팩트 웹게임 레이어 (모든 마법서 테마 공통 — 색은 테마 변수에서)
   여백을 줄이고, 묶음 제목은 제목줄(띠), 상자는 테두리 + 안쪽 빛, 단추는 입체 단추, 목록은 줄무늬
   규칙 · 내용 · id · 동작은 바뀌지 않는 표시 전용 층 (tome.css 뒤에 불러옴)
   =================================================================== */
:root { --cp-r: 4px; --cp-edge: color-mix(in srgb, var(--leather, #3a1418) 55%, transparent); --cp-gold: color-mix(in srgb, var(--gold, #c9a865) 70%, transparent); }

/* ---- 크기 · 여백 ---- */
@media (min-width: 1100px) and (min-height: 640px) {
  html:has(#game-screen:not([hidden])) { font-size: calc(clamp(13.5px, min(calc(.38vw + 8.2px), 1.6vh), 18px) * var(--fs-k, 1)) !important; }
}
@media (min-width: 1100px) {
  :root { --band-h: 8.6rem !important; }
  .doom-seal { transform: translate(-50%, -50%) scale(.84) !important; }
  .topbar .wallet > div { padding: .18rem .6rem .18rem .45rem !important; }
  .topbar .icon-btn { width: 2.1rem !important; height: 2.1rem !important; }
  .logo { font-size: 2.2rem !important; line-height: 1.05 !important; } .topbar .who:first-child .sub, .topbar .tagline { font-size: .7rem; }
  .subnav .subtab { padding: .3rem .85rem !important; font-size: .86rem !important; min-height: 28px; }
  .tp, .t-spread > .t-col, .t-spread > .t-left, .t-spread > .t-right { padding-top: .9rem !important; padding-bottom: .8rem !important; }
  .tp-l, .t-spread > .t-left { padding-left: 1.6rem !important; padding-right: 1.1rem !important; }
  .tp-r, .t-spread > .t-right { padding-right: 1.6rem !important; padding-left: 1.1rem !important; }
  .tp > * + *, .t-col > * + *, .t-lpair > .t-col > * + * { margin-top: .8rem !important; }
  .t-lpair { column-gap: 1.2rem !important; row-gap: .8rem !important; }
}
@media (min-width: 2200px) { :root { --band-h: 10rem !important; } .doom-seal { transform: translate(-50%, -50%) scale(1) !important; } }
@media (min-width: 1100px) and (max-height: 820px) { :root { --band-h: 8rem !important; } .doom-seal { transform: translate(-50%, -50%) scale(.76) !important; } }

/* ---- 묶음 제목: 제목줄 (가죽색 띠 + 금선) ---- */
html[data-theme] .t-h2:not(#_), html[data-theme] .panel .section-title:not(#_) { position: relative; display: flex !important; align-items: center; gap: .5rem; min-height: 2rem;
  margin: 0 0 .5rem !important; padding: .28rem .7rem .28rem .8rem !important; font-size: 1.02rem !important; letter-spacing: 0;
  color: var(--gold-2, #ecdcae) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
  background: linear-gradient(180deg, color-mix(in srgb, var(--leather, #3a1418) 82%, #fff 6%), var(--leather-2, #22090d)) !important;
  border: 1px solid var(--cp-gold) !important; border-radius: var(--cp-r) var(--cp-r) 2px 2px; box-shadow: inset 0 1px 0 rgba(255, 240, 210, .12), 0 1px 2px rgba(0, 0, 0, .25) !important; }
.t-h2::before, .panel .section-title::before { content: ''; width: 6px; height: 6px; flex: none; transform: rotate(45deg); background: var(--gold, #c9a865); box-shadow: 0 0 4px var(--gold, #c9a865); }
.t-h2 .cz, .section-title[data-lat]::after { color: color-mix(in srgb, var(--gold-2, #ecdcae) 55%, transparent) !important; font-size: .56rem !important; }
.t-h2 .more, .t-h2 .more-link, .t-h2 .more-note { color: var(--gold-2, #ecdcae) !important; border-color: var(--cp-gold) !important; background: rgba(0, 0, 0, .18) !important; padding: .1rem .55rem !important; font-size: .7rem !important; }
.panel .section-title .muted, .t-h2 .muted { color: color-mix(in srgb, var(--gold-2, #ecdcae) 70%, transparent) !important; }
.panel-box.tb-on > .tb-head { margin-bottom: .35rem !important; }
/* 어두운 테마(심연)도 같은 제목줄 */
html[data-theme="tome-abyss"] .t-h2:not(#_), html[data-theme="tome-abyss"] .panel .section-title:not(#_) { background: linear-gradient(180deg, #2c2036, #170f1e) !important; }

/* ---- 상자: 얇은 테두리 + 안쪽 빛 (게임 판넬) ---- */
html[data-theme^="tome"] :is(.t-card, .shop-card, .skill-slot, .rite-card, .fc-card, .hub-card, .cx-cell, .item, .sb, .t-list, .t-facts > div, .hub-stats > div, .cx-sum > div) {
  border: 1px solid var(--cp-edge) !important; border-radius: var(--cp-r) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 250, 235, .35), inset 0 -2px 0 rgba(80, 50, 20, .08), 0 1px 2px rgba(40, 20, 5, .18) !important; }
html[data-theme^="tome"] :is(.t-card, .shop-card, .skill-slot, .rite-card, .fc-card, .hub-card, .panel-box:not(.tb-on), .item) { padding: .6rem .75rem !important; }
.panel-box > * + *, .t-card > * + * { margin-top: .4rem !important; }
.shop-grid, .cx-grid, .hub-grid, .rite-grid, .fc-grid, .skill-slots, .skill-grid, .job-grid { gap: .5rem !important; }
.hub-card { padding: .55rem .7rem !important; gap: .6rem !important; } .hub-glyph { width: 2.2rem !important; height: 2.2rem !important; }
.cx-cell { padding: .35rem .55rem !important; }
html[data-theme^="tome"] .shop-card:hover, html[data-theme^="tome"] .hub-card:hover { border-color: var(--accent) !important; }

/* ---- 단추: 입체 게임 단추 (낮게, 28px 이상) ---- */
html[data-theme^="tome"] .panel .btn, html[data-theme^="tome"] .modal .btn, html[data-theme^="tome"] #tour .btn { min-height: 28px; padding: .22rem .8rem !important; border-radius: 3px !important; font-weight: 700; letter-spacing: .01em; }
html[data-theme^="tome"] .btn-primary:not(.wish-gold):not(.wish-red) { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #fff 30%) 0, var(--accent) 48%, color-mix(in srgb, var(--accent) 80%, #000 20%) 52%, var(--accent) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, #000 45%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 0 color-mix(in srgb, var(--accent) 50%, #000 50%), 0 3px 5px rgba(0, 0, 0, .25) !important; }
html[data-theme^="tome"] .btn-primary:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 0 color-mix(in srgb, var(--accent) 50%, #000 50%) !important; }
html[data-theme^="tome"]:not([data-theme="tome-abyss"]) .panel .btn:not(.btn-primary):not(.t-gold):not(.wish-gold):not(.wish-red):not(.btn-ghost) {
  background: linear-gradient(180deg, #fbf3df, #e6d4ad) !important; border: 1px solid rgba(90, 60, 25, .5) !important; box-shadow: inset 0 1px 0 #fff, 0 2px 0 rgba(90, 60, 25, .35) !important; color: #3a2a1d !important; }
html[data-theme^="tome"] .panel .btn:not(.btn-primary):not(.btn-ghost):active:not(:disabled) { transform: translateY(1px); }
html[data-theme^="tome"] .btn:disabled { box-shadow: none !important; transform: none !important; }
.btn-sm { font-size: .8rem !important; }

/* ---- 목록 · 표: 촘촘한 줄 + 줄무늬 ---- */
.panel .table td, .panel .table th { padding: .3rem .5rem !important; }
.panel .table tbody tr:nth-child(even), .ledger-row:nth-child(even), .hub-row:nth-child(even) { background: rgba(110, 80, 40, .06); }
.panel .table thead th { background: color-mix(in srgb, var(--leather, #3a1418) 14%, transparent); font-size: .78rem; }
.ledger-row { padding: .3rem .4rem !important; } .hub-row { padding: .14rem .3rem !important; } .t-region { padding: .1rem 0 !important; }
.num, .lg-num, .hub-stats dd, .cx-big, .t-facts b, .wallet dd { font-variant-numeric: tabular-nums; }
.hub-stats dd, .t-facts b { font-weight: 900; }

/* ---- 칩 · 태그 · 게이지 ---- */
.chip, .t-tag, .rate-chip { padding: .04rem .45rem !important; border-radius: 3px !important; font-size: .74rem !important; }
.bar, .t-gauge { height: 7px !important; border-radius: 2px !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }
.bar-fill, .t-gauge > i { border-radius: 2px !important; background-image: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 55%) !important; }

/* ---- 휴대폰 ---- */
@media (max-width: 760px) {
  .game > .panel, #dyn-panels > .panel { padding: .5rem !important; }
  .t-h2, .panel .section-title { font-size: .98rem !important; min-height: 1.9rem; }
  .panel-box, .t-card { padding: .55rem .6rem !important; }
}

/* 제목줄 안의 장식 · 쪽 귀퉁이 장식 정리 (띠 위에서는 보이지 않게) */
html[data-theme] .t-h2:not(#_) .tb-orn, .panel-box.tb-on > .tb-head::before { display: none; }
@media (min-width: 1100px) { .topbar { padding-top: .5rem !important; padding-bottom: .5rem !important; } }
html[data-theme] .t-h2:not(#_) .more, html[data-theme] .t-h2:not(#_) .more-link, html[data-theme] .t-h2:not(#_) .more-note, html[data-theme] .panel .section-title:not(#_) .more { color: #f6e3a2 !important; border: 1px solid rgba(242, 210, 122, .55) !important; background: rgba(0, 0, 0, .25) !important; border-radius: 3px !important; text-shadow: none; margin-left: auto; }
html[data-theme] .t-h2:not(#_) .more:hover { background: rgba(242, 210, 122, .25) !important; color: #fff6df !important; }
@media (min-width: 1100px) {
  html[data-theme] .topbar .logo:not(#_), html[data-theme] .topbar .logo-small:not(#_) { font-size: 1.95rem !important; line-height: 1.1 !important; margin: 0 !important; }
  html[data-theme] .topbar:not(#_) { align-content: center !important; overflow: visible; }
}
@media (max-width: 760px) { html[data-theme^="tome"] .panel .item.bag-row:not(#_), html[data-theme^="tome"] .panel .item:not(#_) { padding: .45rem .3rem !important; } }

/* ===== 제목줄 · 본문 정렬: 제목 띠의 왼쪽 · 오른쪽 끝 = 바로 아래 본문 상자의 끝 ===== */
/* (1) 제목 아래 본문을 안쪽으로 들이던 여백 없앰 */
/*     → 글씨가 테두리에 붙지 않게 본문만 안쪽 여백 (제목 띠 · 테두리 끝은 그대로 맞춤) */
html[data-theme] .panel-box.tb-on > :not(.tb-head):not(#_) { margin-left: .95rem !important; margin-right: .95rem !important; max-width: calc(100% - 1.9rem); box-sizing: border-box; }
html[data-theme] .panel-box.tb-on:not(#_) { padding-bottom: .85rem !important; }
html[data-theme] .panel-box.tb-on > .tb-head + *:not(#_) { margin-top: .8rem !important; }
@media (max-width: 760px) { html[data-theme] .panel-box.tb-on > :not(.tb-head):not(#_) { margin-left: .75rem !important; margin-right: .75rem !important; max-width: calc(100% - 1.5rem); } }
/* 모바일: 카드 목록 · 표처럼 항목마다 자기 테두리가 있는 묶음은 바깥 여백을 조금만 (글 칸 너비 확보) */
@media (max-width: 760px) { html[data-theme] .panel-box.tb-on > :is(.plist, .shop-grid, .list, .table-wrap, .eq-grid, .skill-slots, .party-grid, .cx-grid):not(#_) { margin-left: .4rem !important; margin-right: .4rem !important; max-width: calc(100% - .8rem); } }
/* (2) 가운데 정렬된 쪽(캐릭터 · 직업 · 뽑기 · 던전)에서는 제목 띠도 같은 폭으로 가운데 */
html[data-theme] .t-col > .t-h2:not(#_), html[data-theme] .t-left > .t-h2:not(#_), html[data-theme] .t-right > .t-h2:not(#_) { margin-left: auto !important; margin-right: auto !important; }
/* (3) 제목 옆에 단추 · 칸이 함께 있는 줄은 줄 전체가 띠 — 안의 제목 글자는 띠 없이 */
html[data-theme] .panel .tb-head:not(h2):not(#_), html[data-theme] .panel .panel-box > .row-between:has(> .section-title):not(#_) {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .6rem; min-height: 2rem; margin: 0 0 .5rem !important; padding: .26rem .6rem .26rem .7rem !important;
  color: var(--gold-2, #ecdcae); background: linear-gradient(180deg, color-mix(in srgb, var(--leather, #3a1418) 82%, #fff 6%), var(--leather-2, #22090d)) !important;
  border: 1px solid var(--cp-gold) !important; border-radius: var(--cp-r) var(--cp-r) 2px 2px; box-shadow: inset 0 1px 0 rgba(255, 240, 210, .12), 0 1px 2px rgba(0, 0, 0, .25) !important; }
html[data-theme] .panel .tb-head:not(h2) > .section-title:not(#_), html[data-theme] .panel .panel-box > .row-between > .section-title:not(#_) {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; min-height: 0; flex: 0 1 auto; }
/* 띠 안의 단추 · 탭 · 선택칸 · 글자는 띠 위에서 읽히게 */
html[data-theme] .panel :is(.tb-head:not(h2), .panel-box > .row-between:has(> .section-title)) :is(.muted, .small, b, .num, label, span:not(.chip):not(.cz)) { color: var(--gold-2, #ecdcae) !important; }
html[data-theme] .panel :is(.tb-head:not(h2), .panel-box > .row-between:has(> .section-title)) :is(.seg-btn, .btn):not(.btn-primary) { background: rgba(0, 0, 0, .22) !important; color: #f3e2b4 !important; border: 1px solid rgba(242, 210, 122, .45) !important; box-shadow: none !important; min-height: 26px; padding: .12rem .6rem !important; }
html[data-theme] .panel :is(.tb-head:not(h2), .panel-box > .row-between:has(> .section-title)) .seg-btn[aria-pressed="true"] { background: var(--gold, #c9a865) !important; color: #2a1a0a !important; }
html[data-theme] .panel :is(.tb-head:not(h2), .panel-box > .row-between:has(> .section-title)) .seg { background: none !important; border: 0 !important; padding: 0 !important; gap: .25rem; }
html[data-theme] .panel :is(.tb-head:not(h2), .panel-box > .row-between:has(> .section-title)) :is(select, .input) { min-height: 26px; padding: .1rem .4rem !important; }
html[data-theme] .tp-cont-h:not(#_) { display: flex; align-items: center; gap: .5rem; min-height: 2rem; margin: 0 0 .5rem; padding: .28rem .7rem .28rem .8rem; font-size: 1.02rem; color: var(--gold-2, #ecdcae); text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
  background: linear-gradient(180deg, color-mix(in srgb, var(--leather, #3a1418) 82%, #fff 6%), var(--leather-2, #22090d)); border: 1px solid var(--cp-gold); border-radius: var(--cp-r) var(--cp-r) 2px 2px; }
html[data-theme] .tp-cont-h:not(#_)::before { content: ''; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold, #c9a865); }
html[data-theme] .panel-box.tp-cont:not(#_) { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
/* 정상 연결이면 연결 문구를 숨김 · 현재 위치 표시 없음 */
#conn[hidden], .topbar .conn[hidden] { display: none !important; }
.subnav::after { content: none !important; }
html[data-theme] .topbar #conn[hidden] ~ .world-chip::before { content: "세계\00a0" !important; }
/* 서버에 연결할 수 없을 때 안내 화면 */
.no-server { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; padding: 16px; }
.ns-box { width: min(26rem, 100%); padding: 1.4rem 1.5rem; text-align: center; background: var(--panel, #241a12); color: var(--text, #efe3c6); border: 1px solid var(--gold, #c9a865); border-radius: 6px; box-shadow: 0 12px 40px rgba(0, 0, 0, .6); }
.ns-box h1 { margin: 0 0 .7rem; font-size: 1.3rem; font-family: var(--f-title, serif); }
.ns-box p { margin: 0 0 1.1rem; line-height: 1.6; word-break: keep-all; }

/* ===== 글꼴: 기본은 예전 명조(제목 · 메뉴 · 부제 · 이야기 모두), 플레이어가 많이 읽는 '정보' 글만 고딕(Noto Sans KR) ===== */
:root, html[data-theme] { --f-sans: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Dotum", "돋움", sans-serif; }
/* 정보 글: 설명 · 효과 · 능력치 · 표 · 규칙 · 안내 · 알림 · 대화 · 입력칸 */
html body :is(p, .muted, .alert, .note, .t-note, .hint, .more-note, .hub-note, .ledger-note, .empty-state p,
  .stat-table, .table td, .rules, .t-rule, .skill-desc, .skill-line, .eq-stat, .hub-stats, .char-info, .mon-status, .mon-info, .mk-detail, .star-detail,
  .bd-card-stats, .reward-line, .progress-line, .tour-tip, .tour-body, .tour-hint, .guide-body, .term-body, .mail-body, .msg-bubble, .inbox-body,
  .toast, .dr-row small, .rate-chip, input, textarea, select, option, p.t-label, .small, .t-list li, .plain-list li, .shop-card .small) { font-family: var(--f-sans); font-weight: 400; }
html body :is(.stat-table dt, .stat-table dd, .table td) b { font-weight: 700; }
/* 예전 명조 유지: 제목 띠(컨테이너) 안의 모든 글 · 부제 · 이야기(종말 기록 · 대사 · 게시판 · 엔딩 · 인용) — 가벼운 선택자만 사용(:has 없음) */
html body :is(.tb-head, .t-h2, .tp-cont-h, .tf-head, .section-title, .dr-head, .sub-title, .rite-sub, .wish-sub, .hub-sub, .tf-sub, .slot-sub, h1, h2, h3, .h2,
  #tab-story, #tab-world, #tab-board, .story-line, .reader-body, .village-lines, .nt-body, .t-quote, .t-dropcap, .lore, .ending, .credits) *:not(#_),
html body :is(.tb-head, .t-h2, .tp-cont-h, .tf-head, .section-title, .sub-title, .t-label:not(p), .rite-sub, .wish-sub, .hub-sub, .tf-sub, .slot-sub, h1, h2, h3, .h2,
  .story-line, .reader-body, .village-lines, .nt-body, .t-quote, .t-dropcap, .lore):not(#_),
html body .panel-box > .row-between:first-child > *:not(#_) { font-family: var(--f-title); font-weight: inherit; }
html body :is(.tb-head, .t-h2, .tp-cont-h, .section-title) :is(input, select, textarea):not(#_) { font-family: var(--f-sans); }
html body :is(.num, .timer, .wallet dd, td.num, .big-rank) { font-variant-numeric: tabular-nums; }

/* ===== 줄 넘김 · 문단 넘김 ===== */
/* 한국어 낱말 중간에서 끊지 않음(띄어쓰기 단위) · 아주 긴 글자열만 칸 안에서 끊음 */
html body { word-break: keep-all; overflow-wrap: break-word; line-break: strict; }
/* 여러 줄 글: 줄 간격을 넉넉히, 마지막 줄에 낱말 하나만 남지 않게 */
html body :is(p, li, dd, .muted, .note, .hint, .alert, .tour-tip, .toast, blockquote) { line-height: 1.65; }
html body :is(h1, h2, h3, .h2) { text-wrap: balance; }
/* 이어지는 문단 사이 간격 */
html body :is(.panel, .modal, .t-card, .panel-box, .dr-box, .ns-box) p + p { margin-top: .55em; }
/* 입력칸 · 표 · 숫자는 원래대로(낱말 단위 끊기 때문에 넘치지 않게) */
html body :is(input, textarea, select, pre, code) { word-break: normal; overflow-wrap: anywhere; }
/* 설정 › 소리: 볼륨 막대 */
.snd-ctl { display: flex; align-items: center; gap: .6rem; min-width: 11rem; }
.snd-range { width: 9rem; accent-color: var(--gold, #c9a865); }
.snd-val { min-width: 2.8rem; text-align: right; }
@media (max-width: 760px) { .snd-ctl { min-width: 0; } .snd-range { width: 7rem; } }

/* 로그인 · 회원가입 화면: 어두운 책상 배경 위에 바로 놓이므로 글씨를 밝은 양피지색으로
   (입력칸 · 직업 카드 · 약관 상자처럼 밝은 바탕 안은 원래의 진한 글씨 그대로) */
html[data-theme^="tome"] .auth-screen { --text: #f3e6c6; --text-2: #e4d2aa; --text-3: #d2bf95; color: var(--text); }
html[data-theme^="tome"] .auth-screen :is(input, select, textarea, .starter-jobs, .terms-box) { --text: #2a1a0e; --text-2: #4e3822; --text-3: #614a30; color: var(--text); }
html[data-theme^="tome"] .auth-screen .auth-switch :is(a, .link-btn) { color: #f0b39e; }   /* 아래 「회원가입 · 로그인」 전환 링크도 밝게 */