/* 게임 소개 (/about-game): docs/intro-sian 시안 J · 꾸밈 6번을 옮김 (docs/intro-sian/_port.py 로 만듦, 여기서 직접 고치지 말고 시안을 고친 뒤 다시 실행)
   책: 모든 쪽 크기가 같고 긴 장은 여러 쪽으로 흐름 · 오른쪽 색인 탭 · 종이처럼 넘어가는 책장 · 그림 크게 보기 · 화면 짚어 보기 */
/* 시안 공용: 위쪽 시안 이동 띠 + 내용 조각(.ig-*) 기본 모양. 나머지는 사이트 dnd2.css 그대로 */
.px { image-rendering: pixelated; }
img.x2 { zoom: 2; }
/* 클래스 색 (글자 / 왼쪽 띠) */
.cls-f { color: #6FB6DA; }
.cls-c { color: #E2BC57; }
.cls-e { color: #6CC27A; }
.cls-d { color: #C49A62; }
.cls-m { color: #9B8CF0; }
.cls-t { color: #D06FAE; }
.cls-bd-f { --cc: #6FB6DA; }
.cls-bd-c { --cc: #E2BC57; }
.cls-bd-e { --cc: #6CC27A; }
.cls-bd-d { --cc: #C49A62; }
.cls-bd-m { --cc: #9B8CF0; }
.cls-bd-t { --cc: #D06FAE; }
/* 글쇠: 방향 = 네모, 버튼 = 사이트 커맨드 아이콘(vendor/dnd2-moves.css .cmd-btn)과 같은 둥근 버튼 (A 빨강 · B 파랑 · C 초록 · D 금색) */
.kc { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; font-family: var(--font-display); font-size: 13px; font-weight: var(--fw-bold);
  line-height: 1; color: var(--text-strong); border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line-strong); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.kc + .kc { margin-left: 3px; }
.kc--dir { font-family: var(--font); font-size: 14px; }
.kc--a, .kc--b, .kc--c, .kc--d { flex: none; width: 26px; min-width: 0; padding: 0; border: 0; border-radius: 50%; color: #fff; font-family: var(--font); font-weight: 800;
  background: radial-gradient(circle at 36% 28%, var(--c1), var(--c2) 72%);
  box-shadow: inset 0 -.13em .18em rgba(0,0,0,.35), inset 0 .07em .05em rgba(255,255,255,.4), 0 .06em 0 rgba(0,0,0,.5); text-shadow: 0 .06em 0 rgba(0,0,0,.35); }
/* 색은 dnd2-moves.css 의 --cmd-a1 … 과 같은 값 (이 화면엔 그 CSS 를 안 불러서 값을 그대로 씀) */
.kc--a { --c1: #e5566b; --c2: #8d1527; }
.kc--b { --c1: #6fa2e4; --c2: #234e8b; }
.kc--c { --c1: #6cc289; --c2: #23693b; }
.kc--d { --c1: #f2cb62; --c2: #936b18; color: #2a1a08; text-shadow: 0 .06em 0 rgba(255,255,255,.3); }
.kc--start { border-radius: 999px; padding: 0 10px; font-size: 11px; letter-spacing: .08em; }
.kc--lg { min-width: 40px; height: 40px; font-size: 18px; }
.kc--lg.kc--a, .kc--lg.kc--b, .kc--lg.kc--c, .kc--lg.kc--d { width: 40px; min-width: 0; }
.kc-plus { margin: 0 3px; color: var(--text-sub); font-weight: var(--fw-bold); }
.kc-pre { margin-right: 6px; font-size: var(--fs-xs); color: var(--text-sub); }
/* 공통 조각 (도트 그림은 검은 바탕을 따낸 투명 그림이라 칸에는 옅은 바닥 빛만) */
.ig-h { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-xl); font-weight: var(--fw-heavy); color: var(--text-strong); }
.ig-h:first-child { margin-top: 0; }
.ig-block + .ig-block { margin-top: var(--sp-6); }
.ig-block .info-text + .info-text { margin-top: var(--sp-3); }
.info-text { line-height: var(--lh-loose); }
.ig-fig { margin: var(--sp-4) 0 0; display: inline-flex; flex-direction: column; gap: var(--sp-2); }
.ig-fig img { max-width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.ig-fig figcaption { font-size: var(--fs-xs); color: var(--text-sub); }
.ig-fig--wide img { width: 576px; }
.ig-split { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-6); align-items: start; margin-bottom: var(--sp-5); }
.ig-split .ig-fig { margin: 0; }
.ig-callout { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--text); background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); }
.ig-no { display: inline-block; margin-top: var(--sp-2); padding: 1px 8px; font-size: var(--fs-2xs); color: var(--text-sub); border: 1px solid var(--line); border-radius: 999px; }
.ig-src { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); text-align: right; }
.ig-note { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--text-sub); }
.ig-en { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: var(--ls-caps); color: var(--accent); }
.ig-games { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.ig-game { margin: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); }
.ig-game img { width: 288px; max-width: 100%; display: block; margin: 0 auto; }
.ig-game__img { padding: var(--sp-3) var(--sp-3) 0; }
/* 타이틀 화면 양옆 검은 띠 없이, 카드 안에 액자처럼 */
.ig-game__img img { border-radius: 4px; box-shadow: 0 0 0 1px var(--line-strong), 0 4px 10px rgba(0,0,0,.35); }
.ig-game figcaption { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3) var(--sp-4); }
.ig-game b { font-size: var(--fs-lg); color: var(--text-strong); }
.ig-game small { font-size: var(--fs-xs); color: var(--text-sub); }
.ig-timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--line-strong); }
.ig-timeline li { position: relative; padding: var(--sp-4) var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--text-sub); }
.ig-timeline li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--bg); }
.ig-timeline b { display: block; font-family: var(--font-display); font-size: var(--fs-lg); color: var(--gold); }
.ig-classes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); margin-top: var(--sp-5); }
.ig-class { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-4); background: var(--surface-solid); border: 1px solid var(--line); border-left: 3px solid var(--cc); border-radius: var(--radius); }
.ig-class__art { flex: none; width: 96px; height: 150px; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.ig-class h3 { margin: 2px 0 var(--sp-1); font-size: var(--fs-lg); color: var(--text-strong); }
.ig-class h3 small { margin-left: 4px; font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--text-sub); }
.ig-class p { font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--text-sub); }
.ig-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.ig-stat { padding: var(--sp-4) var(--sp-5); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); }
.ig-stat header { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.ig-stat__k { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--gold); }
.ig-stat header span { display: flex; flex-direction: column; font-weight: var(--fw-bold); color: var(--text-strong); }
.ig-stat header small { font-size: var(--fs-2xs); font-weight: var(--fw-regular); color: var(--text-sub); }
.ig-stat > p { font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--text); }
.ig-stat ul { margin: var(--sp-2) 0 0; padding-left: 1.1em; font-size: var(--fs-xs); line-height: var(--lh-loose); color: var(--text-sub); }
.ig-types th, .ig-types td { text-align: center; white-space: nowrap; }
.ig-types tbody th { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--gold); }
.ig-all { color: var(--text-strong); }
.ig-all small { margin-left: 6px; font-size: var(--fs-2xs); color: var(--text-sub); }
.ig-screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.ig-shot { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.ig-shot img { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.ig-shot figcaption { font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--text-sub); }
.ig-shot b { color: var(--text-strong); margin-right: 4px; }
.ig-slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-5); list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); color: var(--text); }
.ig-slots b { display: inline-block; width: 1.8em; color: var(--gold); font-size: var(--fs-lg); }
.ig-btns { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.ig-btn { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); }
.ig-btn div { display: flex; flex-direction: column; gap: 2px; }
.ig-btn b { color: var(--text-strong); }
.ig-btn small { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--text-sub); }
.ig-moves { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.ig-move { display: grid; grid-template-columns: 150px 1fr; gap: var(--sp-4); align-items: center; padding: var(--sp-3); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); }
.ig-move__img { display: grid; place-items: center; height: 120px; background: radial-gradient(ellipse at 50% 88%, rgba(255,255,255,.07), transparent 62%); border-radius: var(--radius-sm); overflow: hidden; }
.ig-move__img img { max-width: 150px; max-height: 120px; }
.ig-move__cmd { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.ig-move b { color: var(--text-strong); }
.ig-move p { margin-top: 2px; font-size: var(--fs-xs); line-height: var(--lh-loose); color: var(--text-sub); }
.ig-magic { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-5); }
.ig-spell { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); background: var(--surface-solid); border: 1px solid var(--line); border-left: 3px solid var(--cc); border-radius: var(--radius); }
.ig-spell__row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ig-spell__name { padding: 4px 12px; font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-strong); background: var(--surface-2); border-radius: 999px; }
.ig-link { color: var(--text-sub); }
.ig-spell small { font-size: var(--fs-xs); color: var(--text-sub); }
.ig-chestrow { display: flex; gap: var(--sp-5); align-items: flex-end; flex-wrap: wrap; padding: var(--sp-4); background: radial-gradient(ellipse at 50% 88%, rgba(255,255,255,.07), transparent 62%); border-radius: var(--radius); }
.ig-rules { margin: var(--sp-4) 0; padding-left: 1.1em; font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--text); }
.ig-drop { display: flex; gap: var(--sp-5); align-items: center; padding: var(--sp-4); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); }
.ig-drop img { border-radius: 4px; }
.ig-drop ol { margin: 0; padding-left: 1.2em; font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--text-sub); }
.ig-drop b { margin-right: 6px; color: var(--text-strong); }
.ig-traps { display: grid; gap: var(--sp-3); }
.ig-trap { display: grid; grid-template-columns: 360px 1fr; gap: var(--sp-5); align-items: center; padding: var(--sp-3); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); }
.ig-trap__art { display: flex; gap: var(--sp-3); align-items: center; justify-content: center; height: 150px; background: radial-gradient(ellipse at 50% 88%, rgba(255,255,255,.07), transparent 62%); border-radius: var(--radius-sm); }
.ig-trap h4, .ig-other h4 { margin-bottom: var(--sp-1); font-size: var(--fs-lg); color: var(--text-strong); }
.ig-trap p, .ig-other p { font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--text-sub); }
.ig-others { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
.ig-other { padding: var(--sp-3); background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); }
.ig-other__art { display: flex; gap: var(--sp-2); align-items: center; justify-content: center; height: 130px; margin-bottom: var(--sp-3); background: radial-gradient(ellipse at 50% 88%, rgba(255,255,255,.07), transparent 62%); border-radius: var(--radius-sm); overflow: hidden; }
.ig-other__art img { max-height: 120px; max-width: 48%; }
.ig-menus { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }
.ig-menu { display: grid; grid-template-columns: 360px 1fr; gap: var(--sp-5); align-items: start; }
.ig-menu img { max-width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.ig-menu h4 { margin-bottom: var(--sp-2); font-family: var(--font-display); font-size: var(--fs-lg); color: var(--gold); }
.ig-menu dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; font-size: var(--fs-sm); }
.ig-menu dt { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-strong); }
.ig-menu dd { margin: 0; line-height: var(--lh-loose); color: var(--text-sub); }
@media (max-width: 1024px) {
.ig-moves, .ig-stats, .ig-classes { grid-template-columns: 1fr; }
.ig-others { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.ig-games, .ig-screens, .ig-btns, .ig-magic, .ig-slots, .ig-split, .ig-trap, .ig-menu { grid-template-columns: 1fr; }
.ig-timeline { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--line-strong); }
.ig-timeline li { padding: 0 0 var(--sp-3) var(--sp-4); }
.ig-timeline li::before { top: 2px; left: -7px; }
.ig-fig--wide img { width: 100%; }
.ig-move { grid-template-columns: 110px 1fr; }
.ig-move__img img { max-width: 110px; }
}
/* 그림 크게 보기 (SIAN.zoom): 본문 도트 그림을 누르면 정수 배율(최대 4배)로 크게, ← → 로 같은 섹션 그림 넘기기, Esc 닫기 */
main img.px:not([data-nozoom]) { cursor: zoom-in; }
.zv { position: fixed; inset: 0; z-index: var(--z-lightbox); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-6) var(--sp-4);
  background: rgba(5, 4, 9, .94); animation: zv-in .15s ease-out; }
.zv[hidden] { display: none; }
@keyframes zv-in { from { opacity: 0; } to { opacity: 1; } }
.zv__stage { display: grid; place-items: center; max-width: 100%; max-height: calc(100vh - 160px); overflow: auto; background: #000; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.zv__stage img { display: block; image-rendering: pixelated; }
.zv__bar { display: flex; align-items: center; gap: var(--sp-4); max-width: 900px; width: 100%; color: var(--text-sub); font-size: var(--fs-sm); }
.zv__cap { flex: 1; min-width: 0; color: var(--text-strong); font-weight: var(--fw-bold); }
.zv__cap small { display: block; font-weight: var(--fw-regular); color: var(--text-sub); }
.zv__n { font-family: var(--font-display); color: var(--gold); }
.zv button { display: grid; place-items: center; width: 40px; height: 40px; flex: none; font: inherit; font-size: 18px; color: var(--text-strong); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 50%; cursor: pointer; }
.zv button:hover { border-color: var(--accent); }
.zv button:disabled { opacity: .3; cursor: default; }
.zv__x { display: grid; place-items: center; position: absolute; top: var(--sp-4); right: var(--sp-4); }
.zv__scale { display: flex; gap: 4px; }
.zv__scale button { width: auto; height: 28px; padding: 0 10px; border-radius: 999px; font-size: var(--fs-xs); }
.zv__scale button[aria-pressed="true"] { color: #1a1407; background: var(--gold); border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
.zv { animation: none; }
}
/* 게임 화면 짚어 보기 (part.hud) */
.ig-hud { display: grid; grid-template-columns: minmax(0, 768px) minmax(200px, 1fr); gap: var(--sp-5); align-items: start; }
.ig-hud__scr { position: relative; line-height: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.ig-hud__img { width: 100%; height: auto; }
.ig-hud__spot { position: absolute; padding: 0; background: transparent; border: 1px dashed rgba(232,196,106,.45); border-radius: 2px; cursor: pointer; }
.ig-hud__spot:hover, .ig-hud__spot:focus-visible, .ig-hud__spot.on { outline: none; background: rgba(232,196,106,.18); border: 2px solid var(--gold); box-shadow: 0 0 0 9999px rgba(0,0,0,.35); z-index: 1; }
.ig-hud__info { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); background: var(--surface-solid); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius); }
.ig-hud__info b { font-size: var(--fs-lg); color: var(--text-strong); }
.ig-hud__info p { font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--text-sub); }
@media (max-width: 1024px) {
.ig-hud { grid-template-columns: minmax(0, 1fr); }
}
/* I: 취급 설명서 — 펼친 두 쪽(왼쪽 = 장 표지 · 그림, 오른쪽 = 본문). 종이는 어두운 양피지, 본문 글꼴 고운바탕, 제목 Cinzel, 쪽 번호 · 머리글.
   폰에서는 한 쪽씩 위아래로 */
.gi { padding-top: var(--sp-6); padding-bottom: var(--sp-16); --paper: #1a1610; --paper-2: #221c14; --ink: #e8dcc2; --ink-sub: #b3a587; --rule: #5a4a2c; --red: #c0503a; }
.gi-bar { position: sticky; top: calc(var(--header-h, 64px)); z-index: 5; display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-8); padding: var(--sp-2) 0; background: var(--bg); }
.gi-bar select { height: 36px; padding: 0 var(--sp-3); font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.gi-bar__prog { flex: 1; height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.gi-bar__prog i { display: block; height: 100%; background: var(--gold); transition: width .3s; }
.gi-bar__n { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--text-sub); font-variant-numeric: tabular-nums; }
.gi-bar button { display: grid; place-items: center; width: 36px; height: 36px; font: inherit; color: var(--text); background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 50%; cursor: pointer; }
.gi-bar button:disabled { opacity: .35; cursor: default; }
.gi-book { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--sp-3); perspective: 2000px; filter: drop-shadow(0 24px 40px rgba(0,0,0,.55)); }
.gi-page { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 720px; padding: 56px 52px 64px; color: var(--ink); font-family: 'Gowun Batang', serif;
  background: radial-gradient(ellipse at 30% 20%, var(--paper-2), var(--paper) 70%); border: 1px solid #2c2418; }
.gi-page--l { border-radius: 10px 2px 2px 10px; box-shadow: inset -28px 0 30px -20px rgba(0,0,0,.65); }
.gi-page--r { border-radius: 2px 10px 10px 2px; box-shadow: inset 28px 0 30px -20px rgba(0,0,0,.65); }
.gi-run { position: absolute; top: 22px; left: 52px; right: 52px; display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 10px; letter-spacing: .2em; color: var(--ink-sub); border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
.gi-folio { position: absolute; bottom: 22px; font-family: var(--font-display); font-size: var(--fs-sm); color: var(--ink-sub); }
.gi-page--l .gi-folio { left: 52px; }
.gi-page--r .gi-folio { right: 52px; }
.gi-turn { position: absolute; top: 0; bottom: 0; width: 40px; z-index: 2; background: none; border: 0; cursor: pointer; }
.gi-turn--prev { left: 0; }
.gi-turn--next { right: 0; }
.gi-turn::after { content: ""; position: absolute; bottom: 0; width: 0; height: 0; border-style: solid; opacity: 0; transition: opacity .15s; }
.gi-turn--next::after { right: 0; border-width: 0 0 44px 44px; border-color: transparent transparent #3a3020 transparent; }
.gi-turn--prev::after { left: 0; border-width: 44px 0 0 44px; border-color: transparent transparent transparent #3a3020; }
.gi-turn:hover::after, .gi-turn:focus-visible::after { opacity: 1; }
.gi-turn:disabled { display: none; }
/* 넘김: 바뀌는 쪽이 살짝 돌며 나타남 */
.gi-book.go-next .gi-page--r, .gi-book.go-prev .gi-page--l { animation: gi-flip .38s ease-out; }
.gi-book.go-next .gi-page--r { transform-origin: left center; }
.gi-book.go-prev .gi-page--l { transform-origin: right center; --dir: 1; }
@keyframes gi-flip { from { transform: rotateY(calc(var(--dir, -1) * 28deg)); opacity: .3; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.gi-book .gi-page { animation: none !important; }
}
/* 쪽 안 모양 */
.gi-chap { font-family: var(--font-display); font-size: var(--fs-sm); letter-spacing: .3em; color: var(--red); }
.gi-title { margin: var(--sp-2) 0 var(--sp-1); font-family: 'Gowun Batang', serif; font-size: 40px; font-weight: 700; line-height: 1.2; color: #f6ead0; }
.gi-en { font-family: var(--font-display); font-size: var(--fs-lg); letter-spacing: .12em; color: var(--ink-sub); }
.gi-lead { margin-top: var(--sp-5); padding-top: var(--sp-4); font-size: var(--fs-md, 17px); line-height: 1.9; border-top: 1px solid var(--rule); }
.gi-plate { margin-top: auto; padding-top: var(--sp-6); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.gi-plate img { max-width: 100%; border: 6px solid #0d0b08; outline: 1px solid var(--rule); box-shadow: 0 6px 16px rgba(0,0,0,.5); }
.gi-plate figcaption { font-size: var(--fs-xs); color: var(--ink-sub); font-style: italic; }
.gi-drop::first-letter { float: left; margin: 4px 8px 0 0; font-family: var(--font-display); font-size: 52px; line-height: .9; color: var(--red); }
.gi-big { margin: auto 0; font-family: var(--font-display); font-size: 160px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--rule); text-align: center; }
/* 목차 */
.gi-toc { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-direction: column; }
.gi-toc a { display: flex; align-items: baseline; gap: var(--sp-2); padding: 9px 0; color: var(--ink); text-decoration: none; font-size: var(--fs-md, 17px); }
.gi-toc a:hover { color: #fff; }
.gi-toc a b { font-family: var(--font-display); color: var(--red); width: 2em; }
.gi-toc a i { flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-4px); }
.gi-toc a span { font-family: var(--font-display); color: var(--ink-sub); }
.gi-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-6); flex: 1; text-align: center; }
.gi-cover img { width: 384px; max-width: 100%; }
.gi-cover p { font-family: var(--font-display); letter-spacing: .25em; font-size: var(--fs-sm); color: var(--ink-sub); }
.gi-cover small { font-family: 'Gowun Batang', serif; color: var(--ink-sub); letter-spacing: 0; }
/* 본문 쪽: 사이트 조각(.ig-*)을 종이 색으로 */
.gi-page .info-text, .gi-page p { font-family: 'Gowun Batang', serif; color: var(--ink); }
.gi-page .ig-h { font-family: 'Gowun Batang', serif; color: #f6ead0; border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.gi-page .ig-game, .gi-page .ig-class, .gi-page .ig-stat, .gi-page .ig-btn, .gi-page .ig-move, .gi-page .ig-spell, .gi-page .ig-drop, .gi-page .ig-trap, .gi-page .ig-other, .gi-page .ig-hud__info {
  background: rgba(0,0,0,.22); border-color: #3a3020; }
.gi-page .ig-class p, .gi-page .ig-stat > p, .gi-page .ig-move p, .gi-page .ig-trap p, .gi-page .ig-other p, .gi-page .ig-btn small, .gi-page .ig-shot figcaption, .gi-page .ig-stat ul, .gi-page .ig-menu dd { color: var(--ink-sub); }
.gi-page .ig-classes, .gi-page .ig-stats, .gi-page .ig-moves, .gi-page .ig-btns, .gi-page .ig-magic, .gi-page .ig-games, .gi-page .ig-screens { grid-template-columns: minmax(0, 1fr); }
.gi-page .ig-trap, .gi-page .ig-menu { grid-template-columns: minmax(0, 1fr); }
.gi-page .ig-others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gi-page .ig-split { grid-template-columns: minmax(0, 1fr); }
.gi-page .ig-timeline { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 2px solid var(--rule); }
.gi-page .ig-timeline li { padding: 0 0 var(--sp-3) var(--sp-4); color: var(--ink-sub); }
.gi-page .ig-timeline li::before { top: 4px; left: -7px; box-shadow: 0 0 0 3px var(--paper); }
.gi-page .ig-callout { background: rgba(192, 80, 58, .1); border-left-color: var(--red); color: var(--ink); }
.gi-page .table { color: var(--ink); }
.gi-cont { margin-top: auto; padding-top: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-sub); text-align: right; font-style: italic; }
@media (max-width: 1024px) {
.gi-book { grid-template-columns: minmax(0, 1fr); }
.gi-page { min-height: 0; padding: 48px 24px 56px; }
.gi-page--l { border-radius: 10px 10px 2px 2px; box-shadow: inset 0 -20px 24px -20px rgba(0,0,0,.6); }
.gi-page--r { border-radius: 2px 2px 10px 10px; box-shadow: inset 0 20px 24px -20px rgba(0,0,0,.6); }
.gi-run { left: 24px; right: 24px; }
.gi-page--l .gi-folio { left: 24px; }
.gi-page--r .gi-folio { right: 24px; }
.gi-turn { display: none; }
.gi-title { font-size: 30px; }
.gi-big { font-size: 96px; }
}
.gi-points { margin-top: var(--sp-6); }
.gi-points ul { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.gi-points li { padding: 8px 0 8px 22px; position: relative; font-size: var(--fs-md, 17px); border-bottom: 1px dotted var(--rule); }
.gi-points li::before { content: "❖"; position: absolute; left: 0; top: 9px; font-size: 12px; color: var(--red); }
/* 본문 쪽이 길면 왼쪽 장 표지가 따라 내려옴 */
.gi-stick { position: sticky; top: calc(var(--header-h, 64px) + 70px); display: flex; flex-direction: column; }
.gi-stick .gi-big { margin: var(--sp-8) 0 0; }
@media (max-width: 1024px) {
.gi-stick { position: static; }
}
/* J: F 의 짜임 + I 의 모양. 위에 _i.css 가 먼저 들어옴 (종이 · 글꼴 · 본문 조각 색)
   진짜 책: 모든 쪽 크기가 같음(높이 = --pg-h, 화면에 맞춤). 긴 장은 여러 쪽으로 흐름(CSS 다단: 한 단 = 한 쪽),
   장 표지는 늘 왼쪽 쪽에서 시작(모자라면 빈 쪽). 목차는 책 오른쪽 모서리 색인 탭 = F 의 늘 보이는 메뉴 자리 */
.gj { --pg-h: 720px; --pg-pad-t: 52px; --pg-pad-b: 56px; --pg-pad-x: 44px; }
.gj-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: start; margin-top: var(--sp-6); }
.gj-stage { min-width: 0; }
.gj-book { position: relative; grid-template-columns: 1fr 1fr; margin-top: 0; }
.gj-pg { height: var(--pg-h); min-height: 0; padding: var(--pg-pad-t) var(--pg-pad-x) var(--pg-pad-b); overflow: hidden; cursor: pointer; }
.gj-pg .gi-run { left: var(--pg-pad-x); right: var(--pg-pad-x); gap: 12px; white-space: nowrap; }
.gj-pg .gi-run span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* 쪽이 좁은 PC 폭(1100 안팎)에서 머리글이 두 줄로 꺾여 장 번호(CHAPTER)와 겹치던 것 → 한 줄 · 넘치면 … */
.gj-pg.gi-page--l .gi-folio { left: var(--pg-pad-x); }
.gj-pg.gi-page--r .gi-folio { right: var(--pg-pad-x); }
.gj-pg.is-empty { cursor: default; }
/* 본문 쪽 = 그 장 본문을 다단으로 흘린 것 중 한 단만 보이는 창 */
.gj-win { position: relative; height: 100%; overflow: hidden; }
.gj-flow { height: 100%; column-fill: auto; column-gap: var(--gap, 80px); }
.gj-flow > * { break-inside: auto; }
.gj-flow .ig-h { break-after: avoid; }
.gj-flow .ig-h:first-child { margin-top: 0; }
.gj-flow .ig-game, .gj-flow .ig-class, .gj-flow .ig-stat, .gj-flow .ig-btn, .gj-flow .ig-move, .gj-flow .ig-spell, .gj-flow .ig-drop, .gj-flow .ig-trap, .gj-flow .ig-other,
.gj-flow .ig-menu, .gj-flow .ig-shot, .gj-flow .ig-fig, .gj-flow .ig-hud, .gj-flow .table-wrap, .gj-flow .ig-chestrow, .gj-flow .ig-block p, .gj-flow .ig-timeline li, .gj-flow .ig-callout,
.gj-flow .ig-slots li, .gj-flow .ig-rules li, .gj-flow .ig-split { break-inside: avoid; }
.gj-flow .ig-classes, .gj-flow .ig-stats, .gj-flow .ig-moves, .gj-flow .ig-btns, .gj-flow .ig-magic, .gj-flow .ig-games, .gj-flow .ig-screens, .gj-flow .ig-traps, .gj-flow .ig-menus, .gj-flow .ig-others {
  display: block; }
/* 다단에서는 grid 대신 위에서 아래로 쌓아야 쪽을 넘어 흐름 */
.gj-flow .ig-classes > *, .gj-flow .ig-stats > *, .gj-flow .ig-moves > *, .gj-flow .ig-btns > *, .gj-flow .ig-magic > *, .gj-flow .ig-games > *, .gj-flow .ig-screens > *,
.gj-flow .ig-traps > *, .gj-flow .ig-menus > * { margin-bottom: var(--sp-3); }
/* 그 밖의 함정 카드: 두 장씩 한 줄. 예전엔 여기에 column-count: 1 (다단 안의 다단)이 있어 카드 줄이 다음 쪽으로 못 넘어가고 쪽 아래로 잘렸음 */
.gj-flow .ig-others > * { display: inline-block; width: calc(50% - 6px); margin: 0 4px var(--sp-3) 0; vertical-align: top; }
.gj-flow .ig-other p { min-height: calc(3 * 1.6em); }   /* 설명 줄 수(2~3줄)가 달라 나란한 두 카드 높이가 어긋나던 것 → 3줄 높이로 맞춤 (inline-block 이라 grid 처럼 늘어나지 않음) */
.gj-flow .ig-hud { display: block; }
.gj-flow .ig-hud__scr { width: 100%; max-width: 384px; margin: 0 auto var(--sp-3); }
.gj-flow .ig-timeline { display: block; border-top: 0; border-left: 2px solid var(--rule); }
.gj-flow .ig-timeline li { padding: 0 0 var(--sp-3) var(--sp-4); }
.gj-flow .ig-timeline li::before { top: 4px; left: -7px; box-shadow: 0 0 0 3px var(--paper); }
.gj-flow .ig-fig img, .gj-flow .ig-menu img, .gj-flow .ig-split img { max-width: 100%; }
.gj-flow .ig-trap { display: block; }
.gj-flow .ig-trap__art { margin-bottom: var(--sp-2); }
/* 이름 타입 시작 장비 표: 펼친 두 쪽에 나눠 실음. 줄 높이를 같게 해 가운데를 넘어 줄이 이어지게 */
.gj-tt { display: flex; flex-direction: column; height: 100%; }
.gj-tt .ig-h small { font-size: var(--fs-sm); font-weight: 400; color: var(--ink-sub); }
.gj-tt__t { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-sm); }
.gj-tt__t th, .gj-tt__t td { height: 42px; padding: 2px 4px; text-align: center; border-bottom: 1px dotted var(--rule); font-size: 13px; line-height: 1.25; word-break: keep-all; }
/* 긴 이름(성직자의 모자 · 브레이슬릿)은 칸 안에서 두 줄로 */
.gj-tt__t thead th { height: 36px; font-size: var(--fs-xs); font-weight: 700; border-bottom: 1px solid var(--rule); }
.gj-tt__t .gj-tt__kh { width: 44px; }
.gj-tt__k { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--gold); }
.gj-tt__all { color: #f6ead0; letter-spacing: .02em; }
.gj-tt__all small { color: var(--ink-sub); font-size: var(--fs-xs); }
.gj-tt__more { margin-top: auto; padding-top: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-sub); text-align: right; font-style: italic; }
.gi-page--r .gj-tt__more { text-align: left; }
/* 폰 · 태블릿: 쪽 높이(--pg-h)가 화면에 맞춰 줄어 42px 줄 10개가 쪽을 넘침(J 줄 · 이어짐 문구가 잘리고 쪽 번호가 I 줄에 겹침)
   → 줄 높이를 정하지 않고 표가 남은 높이를 채워 줄마다 고르게 나눔 */
@media (max-width: 1024px) {
  .gj-tt { min-height: 0; }
  .gj-tt__wrap { flex: 1 1 auto; display: flex; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } /* 키가 작은 화면(360×640 등): 줄을 최소로 해도 넘치면 표만 쪽 안에서 위아래로 밂 */
  .gj-tt__t { flex: 1 1 auto; }
  .gj-tt__t th, .gj-tt__t td, .gj-tt__t thead th { height: auto; }
  .gj-tt__more { padding-top: var(--sp-2); }
}
/* 클래스 그림은 원본 크기(얼굴 120×96, 선택 화면 384×227)로 또렷하게 */
.gj-flow .ig-class__art { height: 140px; }
.gj-flow .ig-class { align-items: center; }
.gj-flow .ig-fig--wide img { width: auto; max-width: 100%; }
/* 장 표지 쪽 */
.gj-cover { position: relative; display: flex; flex-direction: column; height: 100%; } /* relative: about-game.js fitCover 가 목차 위치(offsetTop)를 표지 기준으로 잼 */
/* 표지 목차가 표지 아래로 넘칠 때만 (about-game.js fitCover): 1단계 줄 간격 · 위 여백 좁힘, 2단계 항목 한 줄씩 */
.gj.gj[data-skin] .gj-cover.is-tight .gi-lead { margin-top: 8px; padding-top: 10px; padding-bottom: 10px; }
.gj.gj[data-skin] .gj-cover.is-tight .gj-toc-t { margin-top: 8px; }
.gj.gj[data-skin] .gj-cover.is-tight .gj-points button { padding-top: 1px; padding-bottom: 1px; }
.gj.gj[data-skin] .gj-cover.is-tighter .gj-points button { font-size: 13px; line-height: 1.4; }
.gj.gj[data-skin] .gj-cover.is-tighter .gj-points button span { -webkit-line-clamp: 1; }
.gj.gj[data-skin] .gj-cover.is-tighter .gi-lead { font-size: 14px; line-height: 1.55; padding-top: 6px; padding-bottom: 8px; margin-top: 4px; }
.gj.gj[data-skin] .gj-cover.is-tighter .gi-title { padding-bottom: 6px; }
.gj.gj[data-skin] .gj-cover.is-tighter .gj-toc-t { margin-top: 4px; }
.gj-cover .gi-big { margin: auto 0 0; font-size: 140px; }
.gj-toc-t { margin-top: var(--sp-5); font-family: var(--font-display); font-size: 11px; letter-spacing: .3em; color: var(--red); }
.gj-points { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.gj-points button { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 5px 0 5px 20px; font: inherit; font-family: var(--font); font-size: var(--fs-base);
  text-align: left; color: var(--ink); background: none; border: 0; cursor: pointer; position: relative; }
.gj-points button::before { content: "❖"; position: absolute; left: 0; top: 8px; font-size: 11px; color: var(--red); }
.gj-points button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gj-points button i { flex: 1; min-width: 16px; border-bottom: 1px dotted var(--rule); transform: translateY(-4px); }
.gj-points button b { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--ink-sub); }
.gj-points button:hover, .gj-points button:focus-visible { color: #fff; outline: none; }
.gj-points button:hover b, .gj-points button:focus-visible b { color: var(--red); }
.gj-blank { display: grid; place-items: center; height: 100%; color: var(--rule); font-size: 22px; }
.gj-end { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--sp-3); height: 100%; text-align: center; color: var(--ink-sub); }
.gj-end b { font-family: var(--font-display); letter-spacing: .3em; color: var(--red); }
/* 아래 막대: 앞 · 지금 쪽 · 다음 */
.gj-bar { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-sub); }
.gj-bar button { display: grid; place-items: center; width: 40px; height: 40px; font: inherit; font-size: 18px; color: var(--text); background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 50%; cursor: pointer; }
.gj-bar button:disabled { opacity: .3; cursor: default; }
.gj-bar__t { min-width: 220px; text-align: center; font-variant-numeric: tabular-nums; }
.gj-bar__t b { color: var(--text-strong); }
.gj-bar { flex-wrap: wrap; }
.gj-dots { display: flex; gap: 6px; flex-basis: 100%; justify-content: center; order: 3; }
.gj-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line-strong); cursor: pointer; }
.gj-dots button.is-cover { border-radius: 2px; }
/* 네모 = 장 표지 */
.gj-dots button[aria-current="true"] { background: var(--gold); border-color: var(--gold); }
.gj-dots button:hover { border-color: var(--gold); }
/* 색인 탭: 책 오른쪽 모서리에 붙어 튀어나온 종이 탭. 지금 장은 더 튀어나오고 밝게 */
.gj-tabs { position: sticky; top: calc(var(--header-h, 64px) + 24px); display: flex; flex-direction: column; gap: 3px; padding-top: 40px; }
.gj-tab { position: relative; display: flex; align-items: center; gap: 6px; width: 140px; height: 40px; padding: 0 10px 0 12px; margin-left: -6px; font: inherit; font-family: var(--font);
  font-size: 13px; text-align: left; color: var(--ink-sub); background: linear-gradient(90deg, #120f0a, #1f1a12 30%, #241e15); border: 1px solid #2c2418; border-left: 0;
  border-radius: 0 8px 8px 0; box-shadow: 2px 2px 6px rgba(0,0,0,.45); cursor: pointer; transition: transform .2s, color .2s, background .2s; white-space: nowrap; overflow: hidden; }
.gj-tab b { flex: none; width: 2.2em; font-family: var(--font-display); font-size: 12px; color: var(--red); }
.gj-tab span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gj-tab small { flex: none; font-family: var(--font-display); font-size: 10px; color: var(--muted); }
/* 그 장 쪽 수 */
.gj-tab:hover { transform: translateX(4px); color: var(--ink); }
.gj-tab[aria-current="true"] { transform: translateX(8px); color: #fff; font-weight: 700; background: linear-gradient(90deg, #2a2216, #3a2f1e); border-color: var(--rule); }
.gj-tab:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--red); }
/* 색인 탭 아래 지금 장의 쪽 목록 (모든 쪽) */
.gj-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 2px; padding: 4px 0 4px 8px; border-left: 1px solid var(--rule); max-height: 46vh; overflow-y: auto; scrollbar-width: thin; }
.gj-sub button { display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 3px 4px; font: inherit; font-family: var(--font); font-size: 11.5px; line-height: 1.35; text-align: left;
  color: var(--ink-sub); background: none; border: 0; border-radius: 3px; cursor: pointer; }
.gj-sub button b { flex: none; min-width: 1.8em; font-family: var(--font-display); font-size: 10px; color: var(--muted); }
.gj-sub button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gj-sub button:hover { color: #fff; background: rgba(255,255,255,.04); }
.gj-sub button[aria-current="true"] { color: #fff; background: rgba(192, 80, 58, .16); }
.gj-sub button[aria-current="true"] b { color: var(--red); }
/* 쪽을 재는 곳 (화면 밖) */
.gj-measure { position: absolute; left: -99999px; top: 0; visibility: hidden; pointer-events: none; }
/* ---------- 책장 넘김 (_j.js flip) ----------
   .gj-flip = 넘어가는 종이 한 장(쪽 크기 그대로). 세로 조각(.gj-seg)이 책등에서 바깥쪽으로 겹겹이 이어져 있어
   바깥 조각이 조금씩 더 돌면 바깥 끝이 먼저 들리며 휘고, 다 넘어가면 평평하게 내려앉음.
   다음: 오른쪽 쪽이 책등(왼쪽 끝)을 축으로 0 → -180도, 뒷면 = 다음 펼침의 왼쪽 쪽 / 앞: 왼쪽 쪽이 책등(오른쪽 끝)을 축으로 0 → 180도, 뒷면 = 앞 펼침의 오른쪽 쪽 */
.gj-flip { position: absolute; top: 0; z-index: 8; pointer-events: none; perspective: 3200px; }
.gj-seg { position: absolute; top: 0; height: 100%; transform-style: preserve-3d; will-change: transform; }
.gj-flip--next .gj-seg { transform-origin: 0 50%; }
.gj-flip--prev .gj-seg { transform-origin: 100% 50%; }
.gj-seg__f, .gj-seg__b { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; contain: strict; }
.gj-seg__b { transform: rotateY(180deg); }
.gj-clone { position: absolute; top: 0; margin: 0; cursor: default; }
.gj-seg__shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.gj-cast { position: absolute; top: 0; height: 100%; opacity: 0; pointer-events: none; }
.gj-flip--narrow { z-index: 4; clip-path: inset(-20% 0 -20% 0); }
/* 폰: 한 쪽짜리라 넘어간 종이는 화면 왼쪽 밖으로 사라짐 */
.gj-flip.is-go .gj-seg--root { animation: var(--turn) var(--dur) cubic-bezier(.33, .02, .22, 1) forwards; }
.gj-flip.is-go .gj-seg:not(.gj-seg--root) { animation: var(--bend) var(--dur) cubic-bezier(.33, .02, .22, 1) forwards; }
.gj-flip.is-go .gj-seg__f .gj-seg__shade { animation: gj-dark var(--dur) linear forwards; }
.gj-flip.is-go .gj-seg__b .gj-seg__shade { animation: gj-light var(--dur) linear forwards; }
.gj-flip.is-go .gj-cast { animation: gj-cast var(--dur) linear forwards; }
.gj-flip--rev.is-go .gj-seg, .gj-flip--rev.is-go .gj-seg__shade, .gj-flip--rev.is-go .gj-cast { animation-direction: reverse !important; }
.gj-flip--rev:not(.is-go) .gj-seg--root { transform: rotateY(-180deg); }
/* 폰 앞 장: 출발 전엔 넘어가 있는 자리(안 보임)에서 기다림 */
@keyframes gj-turn-next { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes gj-turn-prev { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
/* 휨: 처음엔 바깥 끝을 잡아 올려 많이 휘고(끝이 앞섬), 넘어가며 펴지고, 내려앉을 때는 바깥 끝이 공기에 밀려 살짝 뒤처졌다가 평평해짐 */
@keyframes gj-bend-next { 0% { transform: rotateY(0); } 22% { transform: rotateY(-9deg); } 50% { transform: rotateY(-4deg); } 78% { transform: rotateY(3deg); } 100% { transform: rotateY(0); } }
@keyframes gj-bend-prev { 0% { transform: rotateY(0); } 22% { transform: rotateY(9deg); } 50% { transform: rotateY(4deg); } 78% { transform: rotateY(-3deg); } 100% { transform: rotateY(0); } }
/* 빛: 앞면은 세워질수록(90도 가까이) 어두워지고, 뒷면은 눕혀질수록 밝아짐 */
@keyframes gj-dark { 0% { opacity: 0; } 50% { opacity: .85; } 100% { opacity: .85; } }
@keyframes gj-light { 0% { opacity: .85; } 50% { opacity: .85; } 100% { opacity: 0; } }
@keyframes gj-cast { 0% { opacity: 0; } 15% { opacity: .55; } 50% { opacity: .35; } 85% { opacity: .5; } 100% { opacity: 0; } }
@media (max-width: 1024px) {
.gj { --pg-pad-t: 54px; --pg-pad-b: 48px; --pg-pad-x: 22px; }
.gj-wrap { grid-template-columns: minmax(0, 1fr); }
.gj-tabs { order: -1; position: sticky; top: calc(var(--header-h, 64px)); z-index: 6; flex-direction: row; gap: 4px; padding: var(--sp-2) 0; overflow-x: auto; background: var(--bg); scrollbar-width: none; }
.gj-tab { flex: none; width: auto; height: 34px; margin: 0; padding: 0 12px; border: 1px solid #2c2418; border-radius: 8px 8px 0 0; }
.gj-tab:hover, .gj-tab[aria-current="true"] { transform: none; }
.gj-tab[aria-current="true"] { transform: translateY(2px); }
.gj-book { grid-template-columns: minmax(0, 1fr); }
.gj-book #gj-r { display: none; }
/* 폰: 한 쪽씩 */
.gj-pg.gi-page--l { border-radius: 10px; box-shadow: none; }
.gj-cover .gi-big { font-size: 90px; }
.gj-bar__t { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
.gj-tab { transition: none; }
}
.gj-flow .ig-drop { flex-direction: column; align-items: flex-start; }
.gj-points button span { white-space: normal; overflow: hidden; text-overflow: clip; display: -webkit-box; /* overflow: visible 이면 두 줄로 안 잘리고 셋째 줄이 아래 항목과 겹쳤음 */ -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
/* 목차 항목은 잘리지 않게 두 줄까지 */
.gj-points button { align-items: flex-end; }
/* 책 글씨는 사이트 기본 글꼴(Noto Sans KR). 영문 머리말 · 쪽 번호는 Cinzel 그대로 (_i.css 의 고운바탕을 덮음) */
.gj .gi-page, .gj .gi-title, .gj .gi-page p, .gj .gi-page .info-text, .gj .gi-page .ig-h, .gj .gj-tt, .gj-tab, .gj-sub button, .gj-points button { font-family: var(--font); }
.gj .gi-title { font-weight: 700; letter-spacing: -.01em; }
.gj .gi-lead { font-weight: 500; }
/* 글자 크기 체계 (노토 산스 기준): 장 제목 32 · 요약 15 · 목차 14 · 소제목 17 · 카드 제목 14 · 본문 · 카드 설명 13 */
.gj .gi-title { font-size: 32px; line-height: 1.2; }
.gj .gj-cover .gi-lead { font-size: 15px; font-weight: 500; line-height: 1.7; }
.gj .gj-points button { font-size: 14px; line-height: 1.5; padding-top: 4px; padding-bottom: 4px; }
.gj .gj-points button b { font-size: 12px; }
.gj .gj-flow { font-size: 14px; }
.gj .gj-flow .info-text, .gj .gj-flow .ig-block p, .gj .gj-flow .ig-rules, .gj .gj-flow .ig-drop ol { font-size: 14px; line-height: 1.75; }
.gj .gj-flow .ig-h { font-size: 17px; font-weight: 700; }
.gj .gj-flow :is(.ig-move__body > b, .ig-btn b, .ig-class h3, .ig-stat header span, .ig-trap h4, .ig-other h4, .ig-menu h4, .ig-game b, .ig-hud__info b) { font-size: 14px; font-weight: 700; }
.gj .gj-flow :is(.ig-move p, .ig-btn small, .ig-class p, .ig-stat > p, .ig-stat ul, .ig-trap p, .ig-other p, .ig-menu dd, .ig-shot figcaption, .ig-hud__info p, .ig-game small, .ig-fig figcaption) { font-size: 13px; line-height: 1.6; }
.gj .gj-flow .ig-class h3 small { font-size: 12px; }
.gj .gj-tt__t th, .gj .gj-tt__t td { font-size: 13px; }
.gj .gj-sub button { font-size: 12px; }
/* ===== J 책 꾸밈 시안 (data-skin 0~5). _build.py 가 _j.css 뒤에 붙임 =====
   재질 그림은 _tex.py 로 렌더링한 tex/*.jpg · png (가죽 · 리넨 · 종이 · 금속 모서리 · 리본 · 봉랍 · 스테이플)
   구조: .gj-deco 안 <i> 들 = 표지 판(.gj-case) · 쪽 묶음 단면(.gj-stack--l/r/b) · 모서리(.gj-corner) · 리본 · 스테이플. 시안마다 켬.
   쪽 바탕 · 꾸밈은 .gj-pg 에 → 넘어가는 종이 복사본(.gj-clone 도 .gj-pg)에 그대로 붙어 같이 넘어감 */
.gj-deco { position: absolute; inset: 0; pointer-events: none; }
.gj-deco > i { position: absolute; display: none; }
.gj[data-skin]:not([data-skin="0"]) .gj-wrap { margin-top: calc(var(--sp-8) + 26px); column-gap: 34px; }   /* 책 테두리 장식(모서리 금속)이 위로 26px 튀어나와서 그만큼 더 띄움 → 설명과 32px */
.gj[data-skin]:not([data-skin="0"]) .gj-bar { margin-top: calc(var(--sp-8) + 32px); }                       /* 아래로 32px 튀어나온 장식과 쪽 넘김 막대 사이도 32px */
/* 색인 탭이 표지 밖에 */
/* ---------- 공용 부품 ---------- */
/* 표지 판: 쪽보다 사방으로 크게, 가죽/천 그림을 타일로. 가장자리는 닳아 밝고 둥글게 */
.gj-case { inset: -24px -28px -30px; z-index: -2; border-radius: 10px 14px 14px 10px; background-size: 384px; background-image: var(--cover);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 2px 1px rgba(255,235,200,.16), inset 0 0 18px rgba(0,0,0,.55), inset 0 0 3px 3px rgba(255,220,170,.06),
    0 2px 0 rgba(0,0,0,.6), 0 26px 50px rgba(0,0,0,.65), 0 8px 16px rgba(0,0,0,.4); }
.gj-case::after { content: ""; position: absolute; left: calc(50% - 18px); top: 0; bottom: 0; width: 36px;   /* 책등 굴곡 */
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.45) 40%, rgba(255,230,190,.08) 50%, rgba(0,0,0,.45) 60%, rgba(0,0,0,0)); }
/* 쪽 묶음 단면: 쪽 바깥으로 살짝 보이는 종이 결 */
.gj-stack { z-index: -1; background: repeating-linear-gradient(var(--sd, 90deg), var(--pe1, #6f6450) 0 1px, var(--pe2, #4a4232) 1px 2px, var(--pe1, #6f6450) 2px 3px); }
.gj-stack--l { left: -7px; top: 3px; bottom: -3px; width: 8px; border-radius: 4px 0 0 4px; box-shadow: inset 2px 0 3px rgba(0,0,0,.5); }
.gj-stack--r { right: -7px; top: 3px; bottom: -3px; width: 8px; border-radius: 0 4px 4px 0; box-shadow: inset -2px 0 3px rgba(0,0,0,.5); }
.gj-stack--b { left: 3px; right: 3px; bottom: -7px; height: 8px; --sd: 180deg; border-radius: 0 0 6px 6px; box-shadow: inset 0 -2px 3px rgba(0,0,0,.5); }
/* 금속 모서리: 표지 네 귀퉁이 */
.gj-corner { width: 84px; height: 84px; background: var(--corner-img) 0 0 / contain no-repeat; z-index: 0; filter: drop-shadow(1px 2px 2px rgba(0,0,0,.55)); }
.gj-corner--tl { left: -30px; top: -26px; }
.gj-corner--tr { right: -30px; top: -26px; transform: scaleX(-1); }
.gj-corner--bl { left: -30px; bottom: -32px; transform: scaleY(-1); }
.gj-corner--br { right: -30px; bottom: -32px; transform: scale(-1, -1); }
/* 쪽 바탕을 종이 그림으로 (책등 쪽 그늘 + 바깥쪽 빛은 그대로) */
.gj[data-skin]:not([data-skin="0"]) .gj-pg { background-image: var(--paper); background-size: 512px; background-color: var(--paper-c, #1c1710); border-color: rgba(0,0,0,.4); }
.gj[data-skin]:not([data-skin="0"]) .gj-pg.gi-page--l { box-shadow: inset -34px 0 34px -22px rgba(0,0,0,.75), inset 1px 0 0 rgba(255,240,210,.06); border-radius: 4px 1px 1px 4px; }
.gj[data-skin]:not([data-skin="0"]) .gj-pg.gi-page--r { box-shadow: inset 34px 0 34px -22px rgba(0,0,0,.75), inset -1px 0 0 rgba(255,240,210,.06); border-radius: 1px 4px 4px 1px; }
/* 리본: 책등 위에서 나와 오른쪽 쪽을 지나 책 아래로 */
.gj-ribbon { z-index: 6; top: -18px; left: calc(50% - 9px); width: 18px; height: calc(100% + 62px);   /* 책등 골을 따라 내려와 책 아래로 */ background: var(--ribbon-img) 0 0 / 100% 100% no-repeat; filter: drop-shadow(3px 4px 3px rgba(0,0,0,.5)); }
.gj-ribbon::before { content: ""; position: absolute; left: -2px; right: -2px; top: 0; height: 22px; background: linear-gradient(180deg, rgba(0,0,0,.55), transparent); }
/* 책등 속으로 들어가는 그늘 */
/* ---------- 1. 갈색 가죽 · 황동 모서리 · 붉은 리본 ---------- */
/* ---------- 2. 흑단 마법서 · 은 모서리 · 금 리본 · 장 표지 봉랍 ---------- */
/* ---------- 3. 남색 리넨 천 장정 · 금박 압인 테두리 · 미색 종이 ---------- */
/* 미색 종이일 때 글자 · 칸 색 (3 · 5 공용) */
/* ---------- 4. 와인 가죽 · 황동 모서리 · 색 천 엄지 색인 ---------- */
/* ---------- 5. 오락실 설명서 (스테이플로 묶은 인쇄 책자) ---------- */
/* ---------- 6. 드래곤즈 크라운풍 (공식 사이트 참고): 두루마리 장 제목 · 그을린 양피지 틀 · 뒤에 깔린 큰 영문 · 금테 명판 색인 ---------- */
.gj[data-skin="6"] { --cover: url(/img/guide/intro/tex/leather-black.jpg); --corner-img: url(/img/guide/intro/tex/corner-brass.png); --paper: url(/img/guide/intro/tex/paper-dark.jpg); }
.gj[data-skin="6"] :is(.gj-case, .gj-stack, .gj-corner) { display: block; }
.gj[data-skin="6"] .gj-case { box-shadow: inset 0 0 0 1px rgba(0,0,0,.7), inset 0 0 20px rgba(0,0,0,.6), 0 0 60px rgba(255,120,30,.12), 0 26px 50px rgba(0,0,0,.65); }
/* 6번 쪽 종이: 붉은 마호가니 양피지(#3a1f14). 잔잔하게 번진 종이 무늬(직접 만든 무늬)를 바탕색에 곱하기(multiply)로 얹어
   어두워도 종이 결이 살게 + 가는 알갱이 + 위쪽 옅은 금빛 + 가장자리 그을림. (파미통 미스타라 영웅전기 특집 종이 느낌 참고 · 그 그림 파일은 안 씀)
   네 변 같은 금테 이중선 + 머리글 밑줄도 같은 금빛. 테는 쪽 가장자리 5px 안 → 글자와 안 겹침
   .gj.gj 는 공통 규칙(.gj[data-skin]:not(...) .gj-pg…)보다 앞서려고 */
.gj[data-skin="6"] { --pg6-frame: inset 0 0 0 1px rgba(184,146,92,.42), inset 0 0 0 4px rgba(0,0,0,.3), inset 0 0 0 5px rgba(184,146,92,.16);
  --ink: #e4d3b4; --ink-sub: #ad977a; --rule: #5e4630; --red: #b8693e; } /* 마호가니 바탕에 맞춘 차분한 글자 · 고금(古金) · 구릿빛 */
.gj.gj[data-skin="6"] .gj-pg {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0%200%200%200%200%20%200%200%200%200%200%20%200%200%200%200%200%20%200%200%200%201.4%20-.5'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23g)'%20opacity='.25'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 70% 35% at 50% 0%, rgba(230,180,110,.10), transparent 70%),
    radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(12,6,2,.55) 85%, rgba(6,3,0,.85) 100%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='512'%20height='512'%3E%3Cfilter%20id='p'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.02'%20numOctaves='4'%20seed='4'%20stitchTiles='stitch'%20result='a'/%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.12'%20numOctaves='3'%20seed='9'%20stitchTiles='stitch'%20result='b'/%3E%3CfeComposite%20in='a'%20in2='b'%20operator='arithmetic'%20k1='0'%20k2='1'%20k3='.5'%20k4='0'/%3E%3CfeColorMatrix%20values='0.5%200%200%200%200.725%200.5%200%200%200%200.665%200.4%200%200%200%200.57%200%200%200%200%201'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23p)'/%3E%3C/svg%3E"),
    linear-gradient(#3a1f14, #3a1f14);
  background-size: 200px, auto, auto, 512px, auto;
  background-position: 0 0;
  background-repeat: repeat, no-repeat, no-repeat, repeat, no-repeat;
  background-blend-mode: normal, normal, normal, multiply, normal;
  box-shadow: var(--pg6-frame), inset 0 0 40px rgba(0,0,0,.45); }
.gj.gj[data-skin="6"] .gj-pg.gi-page--l { box-shadow: var(--pg6-frame), inset -34px 0 34px -22px rgba(0,0,0,.75); }  /* 책등 쪽 그늘은 그대로 */
.gj.gj[data-skin="6"] .gj-pg.gi-page--r { box-shadow: var(--pg6-frame), inset 34px 0 34px -22px rgba(0,0,0,.75); }
.gj[data-skin="6"] .gj-pg .gi-run { border-bottom-color: rgba(184,146,92,.24); }
.gj[data-skin="6"] .gj-pg :is(.eyebrow, .ig-en) { color: #cf9a66; } /* 카드 소제목 · 함정 영문 이름(기본 보라)도 고금색으로 */
.gj[data-skin="6"] .gj-cover { position: relative; }
.gj[data-skin="6"] .gj-cover .gi-chap { position: relative; z-index: 1; color: #cf9a66; letter-spacing: .35em; }
.gj[data-skin="6"] .gj-cover { container-type: inline-size; }
.gj[data-skin="6"] .gj-cover .gi-en { order: -1; position: relative; z-index: 0; display: block; margin: 6px 0 0; line-height: .95; letter-spacing: .02em; white-space: nowrap;
  font-size: min(28px, calc(100cqw / var(--n, 10) * 1.3));   /* 글자 수에 맞춰 쪽 폭 안에 다 들어가게 */
  color: rgba(207,154,102,.10); -webkit-text-stroke: 1px rgba(207,154,102,.45); }
/* 제목 위 큰 영문 (TOWN 街 처럼) */
/* 뒤에 깔린 큰 영문 (TOWN 街 처럼) */
.gj[data-skin="6"] .gj-cover .gi-title { position: relative; z-index: 1; margin: 4px 0 0; padding: 0 2px 12px; font-size: 32px; line-height: 1.2; letter-spacing: .02em;
  color: #f0dfc0; background: linear-gradient(90deg, #b8693e, rgba(184,105,62,.35) 70%, transparent) left bottom / 100% 1px no-repeat;
  text-shadow: 0 1px 0 #241008, 0 0 12px rgba(190,110,50,.22); }
/* 드래곤즈 크라운풍: 큰 영문 위에 겹친 빛나는 제목 + 붉은 밑줄 */
.gj[data-skin="6"] .gj-cover .gi-lead { position: relative; z-index: 1; margin-top: var(--sp-5); padding: 18px 22px; border: 22px solid transparent; 
  color: #2b1d0e; font-size: var(--fs-base); filter: drop-shadow(0 6px 10px rgba(0,0,0,.55)); border-top-width: 0; border-bottom-width: 0; }
.gj[data-skin="6"] .gj-cover .gi-lead { border-width: 14px; padding: 6px 10px; }
.gj[data-skin="6"] .gj-toc-t { color: #cf9a66; }
.gj[data-skin="6"] .gj-cover .gi-big { -webkit-text-stroke-color: rgba(255,140,60,.28); }
.gj[data-skin="6"] .gj-pg .ig-h { color: #ecd9b6; border-bottom: 0; padding-bottom: 6px;
  background: linear-gradient(90deg, #a5583a, rgba(165,88,58,.3) 60%, transparent) left bottom / 100% 1px no-repeat; }
.gj[data-skin="6"] .gj-tab { height: 36px; margin-left: -8px; width: 150px; border: 0; color: #f3dcae; font-family: var(--font-display); letter-spacing: .04em;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%);
  background: linear-gradient(180deg, #e9c46a, #8a5d1c 45%, #d7a94a 55%, #6b4612) border-box; box-shadow: none; padding: 0 14px; }
.gj[data-skin="6"] .gj-tab::before { content: ""; position: absolute; inset: 2px; z-index: -1; clip-path: inherit; background: radial-gradient(ellipse at 50% 30%, #3a2210, #170c05 75%); }
.gj[data-skin="6"] .gj-tab { position: relative; isolation: isolate; }
.gj[data-skin="6"] .gj-tab b { color: #ffb35c; }
.gj[data-skin="6"] .gj-tab small { color: #c9a26a; }
.gj[data-skin="6"] .gj-tab:hover { transform: translateX(4px); color: #fff; }
.gj[data-skin="6"] .gj-tab[aria-current="true"] { transform: translateX(8px); color: #fff; filter: drop-shadow(0 0 6px rgba(255,140,40,.55)); }
.gj[data-skin="6"] .gj-tab[aria-current="true"]::before { background: radial-gradient(ellipse at 50% 30%, #6a2a10, #2a0e05 75%); }
@media (max-width: 1024px) {
.gj-ribbon, .gj-staple, .gj-corner { display: none !important; }
.gj-case { inset: -12px -12px -16px; }
/* 폰 · 태블릿: 위 가로 탭 줄. PC 세로 탭(폭 150 · 왼쪽으로 8px 겹침 · 고른 탭 옆으로 밀림)을 그대로 쓰면 탭끼리 겹쳐 보였음 → 글자 폭만큼, 겹치지 않게 */
.gj[data-skin="6"] .gj-tab { width: auto; margin-left: 0; padding: 0 18px; }
.gj[data-skin="6"] .gj-tab span { overflow: visible; }
.gj[data-skin="6"] .gj-tab:hover, .gj[data-skin="6"] .gj-tab[aria-current="true"] { transform: none; }
/* 장 탭 · 쪽 목록 줄 · 책 · 쪽 넘김 막대 사이 여백을 줄여 책이 한 화면에 들어오게 (about-game.js paginate 의 쪽 높이 계산과 맞춤) */
.gj .gj-wrap { row-gap: 0 !important; } /* 스킨 규칙(.gj[data-skin] .gj-wrap row-gap 28px)보다 우선 */
.gj-stage { padding-top: 14px; }
.gj #gj-bar { margin-top: 22px; padding-right: 100px; flex-wrap: nowrap; gap: 8px; } /* 오른쪽 아래 채팅 단추가 다음 쪽(›) 단추를 덮지 않게 */
.gj #gj-bar .gj-dots { display: none; } /* 쪽 점은 위 쪽 목록 줄이 대신함 */
.gj #gj-bar .gj-bar__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
/* 소메뉴: 장 탭 아래 그 장의 쪽 목록 (가로로 밀어 봄, about-game.js status). 장 탭과 같이 위에 붙음 */
.gj-subn { order: -1; position: sticky; z-index: 6; display: flex; gap: 6px; min-height: 42px; padding: 4px 0 8px; overflow-x: auto; background: var(--bg); scrollbar-width: none; }
.gj-subn::-webkit-scrollbar { display: none; }
.gj-subn button { flex: none; max-width: 70vw; height: 30px; padding: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12.5px var(--font); color: #c9a26a; background: rgba(255,179,92,.06); border: 1px solid rgba(201,162,106,.35); border-radius: 999px; cursor: pointer; }
.gj-subn button[aria-current="true"] { color: #fff; background: linear-gradient(180deg, #8a3a14, #4a1c08); border-color: #ffb35c; }
/* 표지 쪽: 위 머리글(DUNGEONS & DRAGONS · SHADOW OVER MYSTARA)이 두 줄로 꺾여 CHAPTER 줄과 겹쳤음 → 한 줄 · 작게 */
.gj-pg .gi-run { gap: 12px; font-size: 9px; letter-spacing: .12em; white-space: nowrap; }
.gj-pg .gi-run span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 표지 목차: 두 줄 항목이 쪽 높이를 넘으면 칸끼리 겹쳤음 → 한 줄씩(말줄임) + 칸이 줄어들지 않게, 그래도 길면 표지 안에서 밀어 봄 */
.gj .gj-points button span { display: block; -webkit-line-clamp: unset; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gj .gj-points button { align-items: baseline; padding-top: 1px; padding-bottom: 1px; }
.gj-cover > * { flex-shrink: 0; }
.gj-cover { overflow-y: auto; scrollbar-width: none; }
.gj .gj-cover .gi-lead { font-size: 14px; line-height: 1.5; }
.gj .gj-cover .gi-lead, .gj[data-skin] .gj-cover .gi-lead { margin-top: 14px !important; margin-bottom: 4px !important; padding-top: 10px !important; padding-bottom: 10px !important; } /* 표지 요약 위아래 여백을 줄여 목차가 다 들어가게 */
.gj-toc-t { margin-top: 12px; }
}
@media (min-width: 1025px) { .gj-subn { display: none; } }
.gj[data-skin="6"] .gj-cover .gi-big { display: none; }
/* 큰 영문이 같은 역할 */
.gj[data-skin="6"] .gj-cover .gi-chap { order: -2; }
/* 순서: CHAPTER → 큰 영문 → 두루마리 제목 */
/* 6번 요약 칸 고르기 (data-lead): dark = 어두운 틀(기본) · line = 칸 없이 붉은 구분선 · parch = 그을린 양피지 */
.gj[data-skin="6"][data-lead="line"] .gj-cover .gi-lead { position: relative; margin: var(--sp-6) 0 var(--sp-2); padding: 18px 8px; color: #e2d0b0; font-size: var(--fs-md, 17px); line-height: 1.9; text-align: center;
  background: linear-gradient(90deg, transparent, #7a4128 25%, #c08a58 50%, #7a4128 75%, transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, #7a4128 25%, #c08a58 50%, #7a4128 75%, transparent) bottom / 100% 1px no-repeat; }
.gj[data-skin="6"][data-lead="line"] .gj-cover .gi-lead::before, .gj[data-skin="6"][data-lead="line"] .gj-cover .gi-lead::after { content: ""; position: absolute; left: calc(50% - 5px); width: 10px; height: 10px;
  background: #c08a58; transform: rotate(45deg); }
.gj[data-skin="6"][data-lead="line"] .gj-cover .gi-lead::before { top: -5px; }
.gj[data-skin="6"][data-lead="line"] .gj-cover .gi-lead::after { bottom: -5px; }
.gj[data-skin="6"][data-lead="line"] .gj-cover .gi-lead { margin-top: var(--sp-3); background-size: 0 0, 100% 1px; }
/* 제목 밑줄이 위쪽 선 역할 → 아래 구분선만 */
.gj[data-skin="6"][data-lead="line"] .gj-cover .gi-lead::before { display: none; }
.gj-hint { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--muted); text-align: center; }   /* 책 아래 사용법 한 줄 (실제 페이지에만) *//* 폰: 목차 탭이 책 위로 올라옴. 책 장식이 위로 12px · 아래로 16px 튀어나와서, 탭 · 쪽 넘김 막대와 각각 16 · 24px 띄움 */
@media (max-width: 1024px) {
.gj[data-skin]:not([data-skin="0"]) .gj-wrap { margin-top: var(--sp-6); row-gap: calc(var(--sp-4) + 12px); }
.gj[data-skin]:not([data-skin="0"]) .gj-bar { margin-top: calc(var(--sp-6) + 16px); }
}

/* ---------- GR: 폰 · 태블릿 읽기 모드 (about-game.js GR). 책 · 장 탭 · 쪽 목록 줄 대신 한 장씩 아래로 읽음 ---------- */
.gj.is-reader .gj-wrap, .gj.is-reader .gj-measure { display: none; }
.gr { margin-top: var(--sp-4); }
/* 위에 붙는 한 줄 막대: 지금 장 + [목차], 밑줄 = 이 장 읽은 만큼 */
.gr-bar { position: sticky; top: calc(var(--header-h) - 1px); z-index: 30; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 14px;
  font: inherit; color: #f3dcae; text-align: left; cursor: pointer; overflow: hidden;
  background: rgba(18, 14, 10, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(217, 173, 79, .35); border-radius: 12px; }
.gr-bar__no { flex: none; min-width: 34px; font: 700 15px Cinzel, var(--font-display); color: #ffb35c; text-align: center; }
.gr-bar__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 15px; }
.gr-bar__toc { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; font-size: 13px; font-weight: 700; color: #ffcf8a;
  border: 1px solid rgba(255, 179, 92, .45); border-radius: 999px; background: rgba(255, 140, 40, .08); }
.gr-bar__prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #c22a12, #ff8a3c); transform: scaleX(0); transform-origin: left; }
/* 본문 = 종이 한 장, 높이는 내용만큼 (쪽 나눔 없음) */
.gj .gr-page { height: auto; min-height: 0; margin-top: 12px; padding: 30px 20px 36px; overflow: visible; cursor: auto; border-radius: 10px; }
.gr-cover { display: flex; flex-direction: column; align-items: center; text-align: center; overflow: visible; }
.gj .gr-cover .gi-lead { margin-bottom: var(--sp-6) !important; }
.gr-body > * + * { margin-top: var(--sp-5); }
.gr-body .ig-fig img, .gr-body .ig-shot img { max-width: 100%; height: auto; }
/* 상자와 함정 · 그 밖의 것: 책(.gj-flow)의 좁은 쪽 규칙을 읽기 모드에도. 상자 아이템은 그림 위 · 목록 아래, 함정 그림은 넘치면 줄을 바꿈 */
.gr-body .ig-drop { flex-direction: column; align-items: flex-start; }
.gr-body .ig-drop img.x2 { zoom: 1; width: min(100%, 240px); height: auto; image-rendering: pixelated; }
.gr-body .ig-trap { display: block; }
.gr-body .ig-trap__art { flex-wrap: wrap; height: auto; min-height: 120px; margin-bottom: var(--sp-2); padding: var(--sp-2) 0; }
.gr-body .ig-trap__art img { max-width: 100%; height: auto; }
.gr-body .ig-other__art img { flex: 0 1 auto; min-width: 0; max-width: 48%; object-fit: contain; } /* 좁은 카드에 그림 여러 장: 줄어들어 카드 안에 */
.gr-body .ig-hud__scr, .gr-body .ig-fig img, .gr-body .ig-menu img, .gr-body .ig-split img { max-width: 100%; }
/* 시작 장비 표: 3 클래스씩 두 표 */
.gr-tt + .gr-tt { margin-top: var(--sp-4); }
.gr-tt__t { width: 100%; border-collapse: collapse; table-layout: fixed; }
.gr-tt__t th, .gr-tt__t td { padding: 8px 4px; text-align: center; font-size: 13px; line-height: 1.3; word-break: keep-all; border-bottom: 1px dotted var(--rule); }
.gr-tt__t thead th { font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--rule); }
.gr-tt__t tr > th:first-child { width: 44px; font-family: var(--font-display); font-size: 17px; color: var(--gold, #e0b04a); }
.gr-tt__t thead tr > th:first-child { font: 700 12px var(--font); color: var(--ink-sub); }
.gr-tt__all { color: #f6ead0; }
.gr-tt__all small { color: var(--ink-sub); font-size: 11px; }
/* 장 끝: 이전 · 다음 장 */
.gr-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--sp-4); }
.gr-nav__b { display: grid; gap: 2px; min-height: 64px; padding: 10px 14px; text-align: left; font: inherit; color: #f3dcae; cursor: pointer;
  background: rgba(30, 22, 14, .9); border: 1px solid rgba(217, 173, 79, .35); border-radius: 12px; }
.gr-nav__b small { font-size: 12px; color: #c9a26a; }
.gr-nav__b b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.gr-nav__b--next { grid-column: 2; text-align: right; }
/* 목차: 아래에서 올라오는 창 */
.gr-dim { position: fixed; inset: 0; z-index: calc(var(--z-sheet) - 1); background: rgba(0, 0, 0, .55); }
.gr-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet); display: flex; flex-direction: column; max-height: min(80svh, 640px);
  background: #17120c; border-top: 1px solid rgba(217, 173, 79, .45); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .5); animation: gr-up .22s ease-out; }
.gr-dim[hidden], .gr-sheet[hidden] { display: none; }
@keyframes gr-up { from { transform: translateY(40px); opacity: .4; } }
.gr-sheet__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; color: #f3dcae; border-bottom: 1px solid rgba(217, 173, 79, .2); }
.gr-sheet__x { width: 40px; height: 40px; font-size: 16px; color: #f3dcae; background: none; border: 0; cursor: pointer; }
.gr-toc { margin: 0; padding: 6px 8px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.gr-toc > li > button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 10px; font: inherit; text-align: left; color: #eadcc0; background: none; border: 0; border-radius: 10px; cursor: pointer; }
.gr-toc > li > button b { flex: none; width: 40px; font: 700 15px Cinzel, var(--font-display); color: #c9a26a; text-align: center; }
.gr-toc > li > button span { display: grid; font-size: 15px; font-weight: 700; }
.gr-toc > li > button small { font: 400 11px Cinzel, var(--font-display); letter-spacing: .08em; color: #a08a66; }
.gr-toc > li.on > button { background: linear-gradient(90deg, rgba(138, 58, 20, .55), rgba(74, 28, 8, .2)); }
.gr-toc > li.on > button b { color: #ffb35c; }
.gr-toc ul { margin: 2px 0 8px 52px; padding: 0; list-style: none; border-left: 1px solid rgba(217, 173, 79, .25); }
.gr-toc ul button { display: block; width: 100%; min-height: 40px; padding: 6px 12px; font: inherit; font-size: 14px; text-align: left; color: #d9c8a6; background: none; border: 0; cursor: pointer; }
html.gr-lock { overflow: hidden; }