/* 게임 정보의 공통 표현. 카테고리별 배치는 각 화면이, 같은 역할의 표현은 이 파일이 맡는다.
   본문 안으로 범위를 좁혀 빌더·사이트 메뉴·떠 있는 툴팁의 밀도를 바꾸지 않는다. */
body.game-info :is(.vpane, .cx-main) {
  --gi-body: 16px;
  --gi-label: 14px;
  --gi-meta: 13px;
  --gi-radius: 6px;
  --gi-secondary: color-mix(in srgb, var(--text) 76%, var(--surface-2));
  --text-2: var(--gi-secondary);
  --muted: var(--gi-secondary);
  --faint-readable: var(--gi-secondary);
  font-size: var(--gi-body);
  line-height: 1.75;
  color: var(--text);
}

/* 읽는 화면과 탐색 화면은 폭을 달리하고, 바깥 여백과 시작선은 공유한다. */
body.game-info .cx-main {
  max-width: 832px;
  padding: var(--sp-6) var(--sp-5) 60px;
}
body.game-info .cx-main.wide { max-width: 1280px; }
body.game-info .vpane {
  max-width: 1232px;
  width: calc(100% - var(--sp-5) * 2);
  margin: var(--sp-5) auto;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-image: none;
  border-radius: var(--gi-radius);
  background: var(--surface-2);
  box-shadow: none;
}
body.game-info #monster-app { max-width: none; padding: 0; }
body.game-info #monster-app .monster-detail { max-width: 1140px; }
body.game-info :is(.cx-main, .vpane) :is(p, li, dd) { overflow-wrap: anywhere; }

/* 페이지 제목 / 절 제목 / 본문 / 보조 정보의 네 단계. 등급색과 피해 속성색은 보존한다. */
body.game-info .cx-main > h1,
body.game-info .cx-main h1.st-name,
body.game-info .cx-main h1.tt-name,
body.game-info .cx-tree-head h1,
body.game-info #monster-app :is(.monster-heading, .monster-detail) h1 {
  margin: 0 0 var(--sp-3);
  font: 500 var(--fs-hh)/1.35 var(--font-title);
  color: var(--text);
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}
body.game-info :is(.cx-main, .vpane) :is(.cx-related h2, .cx-block-root h2, .cx-block-header h3, .cx-learning-body h2),
body.game-info .cx-main > section > h2,
body.game-info #monster-app .monster-detail section h2,
body.game-info #detail h3 {
  margin: var(--sp-5) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  font: 600 var(--fs-lg)/1.5 var(--font-body);
  color: var(--accent);
  letter-spacing: 0;
  border-bottom: 1px solid var(--line);
}
body.game-info :is(.cx-main, .vpane) :is(.cx-lead, .cx-block-answer, .cx-block-original,
  .cx-learning-body, .cx-status-variant, .cx-status p, .cx-node-body, .cx-option-body, .st-body, .tt-effect,
  .tt-acq-raw, .tt-grants p),
body.game-info #detail > .st .st-body,
body.game-info #monster-app :is(.monster-detail, .monster-card > div, .monster-skill-card .st-body) {
  font-size: var(--gi-body);
  line-height: 1.8;
  color: var(--text);
}
body.game-info :is(.cx-main, .vpane) :is(.cx-count, .cx-index-hint, .cx-crumbs,
  .cx-learning-meta, .cx-learning-before, .cx-learning-sources, .cx-provenance,
  .cx-block-kind, .cx-block-direct, .cx-status-badge, .cx-node-type, .cx-level-head,
  .cx-level-empty, .cx-unknown, .cx-tree-head p, .cx-class-facts dt,
  .cx-question-recommended, [data-cx-read-marker], .st-kind, .st-stats, .st-foot,
  .st-classes, .st-parents, .tt-en, .tt-kind, .tt-foot, .tt-caveat, .tt-tag,
  .tt-grant-cost, .freshbadge, .hint, .en, .rarity, .meta, .source, .trait-note,
  .trait-intro, .taggroup .n, .raretoggle),
body.game-info #monster-app :is(.monster-value-note, .monster-en, .monster-row small,
  .monster-count, .monster-stats dt, .monster-skill-card .st-kind,
  .monster-skill-card .st-stats, .monster-skill-card .st-foot) {
  font-size: var(--gi-meta);
  line-height: 1.6;
  color: var(--gi-secondary);
}
body.game-info :is(.cx-main, .vpane) :where(.cx-status h3, .cx-option summary,
  .cx-node-name, .st-name, .tt-grant-name, .taggroup label) {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: 1.5;
}
body.game-info :is(.cx-main, .vpane) :is(.cx-lead, .cx-count) { margin-bottom: var(--sp-5); }
body.game-info :is(.cx-main, .vpane) :is(.tt-flavor, .tt-acq-sub) {
  font-size: var(--gi-label);
  line-height: 1.75;
  color: var(--gi-secondary);
}
/* 주의 표시는 보조 정보와 같은 크기여도 의미를 담은 경고색을 유지한다. */
body.game-info :is(.cx-main, .vpane) :is(.hint.warn, .hint.over, .tt-tag.is-warn, .tt-missing, .tt-unobtainable) {
  color: var(--warn);
}

/* 조작: 도감 단추·탭을 통일한다. 탐색 필터는 기존 기본 버튼 스타일을 쓴다. */
body.game-info :is(.cx-main, .vpane) :is(.btn:not(.filters-reset), .filter-chip,
  .difficulty-tabs button, .cx-subclass-nav a, .cx-question, .cx-all-toggle) {
  box-sizing: border-box;
  min-height: var(--m-touch);
  min-width: var(--m-touch);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-image: none;
  border-radius: var(--gi-radius);
  background: var(--surface-2);
  box-shadow: none;
  color: var(--text);
  font: 500 var(--gi-label)/1.5 var(--font-body);
  letter-spacing: 0;
  text-decoration: none;
}
body.game-info :is(.cx-main, .vpane) .btn.primary::before,
body.game-info :is(.cx-main, .vpane) .btn.primary::after { content: none; }
body.game-info :is(.cx-main, .vpane) :is(.btn:not(.filters-reset), .filter-chip,
  .difficulty-tabs button, .cx-subclass-nav a, .cx-question, .cx-all-toggle):hover {
  color: var(--text);
  background: var(--surface-3);
  border-color: var(--accent-quiet);
  box-shadow: none;
}
body.game-info :is(.cx-main, .vpane) :is(.btn.primary, .filter-chip[aria-pressed="true"],
  .difficulty-tabs button[aria-pressed="true"]) {
  color: var(--accent);
  border-color: var(--accent-quiet);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-2));
}
body.game-info :is(.cx-main, .vpane) :is(.stabs, .difficulty-tabs) { gap: var(--sp-2); }
body.game-info .vpane .stab {
  min-height: var(--m-touch);
  padding: var(--sp-2) var(--sp-4);
  font: 500 var(--gi-label)/1.5 var(--font-body);
  color: var(--gi-secondary);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  letter-spacing: 0;
}
body.game-info .vpane .stab[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
body.game-info :is(.cx-main, .vpane) :is(input[type="search"], select, .tagq),
body.game-info :is(#itemfilter, #spellfilter) input[type="search"] {
  box-sizing: border-box;
  min-height: var(--m-touch);
  max-width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--gi-radius);
  background: var(--surface-2);
  color: var(--text);
  font: 400 var(--gi-body)/1.5 var(--font-body);
}
body.game-info :is(.cx-main, .vpane) input::placeholder { color: var(--gi-secondary); opacity: 1; }
body.game-info :is(.cx-main, .vpane) :is(a, button, input, select, summary):focus-visible,
body.game-info :is(#itemfilter, #spellfilter) input[type="search"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: none;
}

/* 설명 카드: 얇은 선, 작은 모서리, 밝은 본문. 인게임 장식 테두리는 페이지에서는 걷는다. */
body.game-info :is(.cx-main, .vpane) :is(.st, .tt, .cx-status, .cx-block-root,
  .cx-option, .cx-node, .cx-class-facts > div, .cx-learning-example),
body.game-info #monster-app :is(.monster-card, .monster-skill-card, .monster-row, .monster-filters) {
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-image: none;
  border-radius: var(--gi-radius);
  background: var(--surface-2);
  box-shadow: none;
  filter: none;
}
body.game-info :is(.cx-main, .vpane) :is(.st, .tt) {
  --dim: var(--gi-secondary);
  --ink: var(--text);
  max-width: none;
  font-family: var(--font-body);
}
body.game-info :is(.cx-main, .vpane) .st,
body.game-info #detail > .st { padding: var(--sp-5); }
body.game-info :is(.cx-main, .vpane) .st-head { gap: var(--sp-4); }
body.game-info :is(.cx-main, .vpane) .st-icon { width: 52px; height: 52px; opacity: 1; }
body.game-info .cx-main > .st .st-name,
body.game-info .cx-class-intro .st-name,
body.game-info #detail :is(.tt-name, .st-name) {
  font: 500 var(--fs-hh)/1.35 var(--font-title);
  letter-spacing: 0;
  color: var(--text);
  text-shadow: none;
}
body.game-info :is(.cx-main, .vpane) .tt-head {
  padding: var(--sp-5);
  background: color-mix(in srgb, var(--rarity) 8%, var(--surface-2));
  border-bottom: 1px solid var(--line);
}
body.game-info :is(.cx-main, .vpane) .tt-icon { width: 72px; height: 72px; filter: none; }
body.game-info :is(.cx-main, .vpane) :is(.tt-body, .tt-acq, .tt-grants, .tt-flavor, .tt-foot) {
  padding: var(--sp-4) var(--sp-5);
  background: transparent;
  border-color: var(--line);
}
body.game-info :is(.cx-main, .vpane) .tt-foot { flex-wrap: wrap; }
body.game-info :is(.cx-main, .vpane) :is(.st-body, .st-stats, .st-foot, .st-classes, .st-parents) {
  margin-top: var(--sp-4);
}
body.game-info :is(.cx-main, .vpane) .cx-class-tree {
  padding: var(--sp-5) 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
}
body.game-info :is(.cx-main, .vpane) .cx-level { border-radius: var(--gi-radius); }
body.game-info :is(.cx-main, .vpane) :is(.cx-node-body, .cx-option-body) { padding: var(--sp-3); }
body.game-info :is(.cx-main, .vpane) .cx-index { gap: var(--sp-2); }
body.game-info :is(.cx-main, .vpane) .cx-index > li > a {
  min-height: var(--m-touch);
  border-radius: var(--gi-radius);
  padding: var(--sp-3);
  background: var(--surface-2);
  text-decoration: none;
  font-size: var(--gi-label);
}
body.game-info :is(.cx-main, .vpane) .cx-index > li > a:hover { background: var(--surface-3); }
body.game-info :is(.cx-main, .vpane) .cx-index-note { font-size: var(--gi-meta); line-height: 1.7; }
body.game-info :is(.cx-main, .vpane) :is(.cx-toolbar, .cx-learning-filters) {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--gi-radius);
  background: var(--surface-2);
  gap: var(--sp-3);
}
body.game-info :is(.cx-main, .vpane) :is(.cx-kind, #cxcount, .cx-subclass-nav a) { font-size: var(--gi-label); }
body.game-info :is(.cx-main, .vpane) summary { min-height: var(--m-touch); }
body.game-info :is(.cx-main, .vpane) :is(.cx-status-more > summary, .tagpicker summary,
  .search-filter-disclosure > summary, .taggroup h4, .traitgroup h4, .flabel) {
  font: 500 var(--gi-label)/1.6 var(--font-body);
  letter-spacing: 0;
  color: var(--gi-secondary);
}

/* 통합 탐색: 필터 다음에 결과가 오는 흐름은 유지하고, 선택 영역과 읽는 영역을 분리한다. */
body.game-info .vpane .vgrid { gap: var(--sp-5); }
body.game-info .vpane .vfilters { padding-top: var(--sp-4); }
body.game-info .vpane .frow { gap: var(--sp-3); }
body.game-info .vpane .frow + .frow { margin-top: var(--sp-2); }
body.game-info .vpane :is(#count, #scount) { font-size: var(--gi-meta); }
body.game-info .vpane :is(#tagbar, #main-content) { min-width: 0; }
body.game-info .vpane #main-content { gap: var(--sp-5); }
body.game-info .vpane #list { padding-right: var(--sp-2); }
body.game-info .vpane #list :is(.item-row, .spell-row) {
  min-height: 72px;
  padding: var(--sp-3);
  border-radius: var(--gi-radius);
  gap: 2px var(--sp-3);
  box-shadow: none;
}
body.game-info .vpane #list :is(.name, .st-name) { font-size: var(--fs-lg); line-height: 1.5; }
body.game-info .vpane #list :is(.en, .kind, .rarity) { font-size: var(--gi-meta); line-height: 1.5; }
body.game-info .vpane #list .thumb { width: 44px; height: 44px; background: none; border-radius: var(--gi-radius); }
body.game-info .vpane #list li { border-radius: var(--gi-radius); margin-bottom: var(--sp-1); }
body.game-info .vpane #list li.selected { background: var(--surface-3); }
body.game-info .vpane #detail { min-width: 0; }
body.game-info .vpane #detail > .hint { padding: var(--sp-5); text-align: center; }
body.game-info .vpane .fdot { box-shadow: none; }
body.game-info .vpane .filters-reset { margin: 0; }
body.game-info .vpane .search-filter-disclosure > summary { padding-right: 132px; }
body.game-info .cx-equip .btn { margin-left: 0; }

@media (max-width: 900px) {
  body.game-info .vpane { width: calc(100% - var(--sp-4) * 2); }
}
@media (max-width: 720px) {
  body.game-info .cx-main { padding: var(--sp-5) var(--sp-4) 60px; }
  body.game-info .vpane { width: calc(100% - var(--sp-3) * 2); margin: var(--sp-4) auto; padding: var(--sp-3); }
  body.game-info .vpane #stabs { gap: 0; }
  body.game-info .vpane .stab { padding-inline: var(--sp-2); }
  body.game-info .vpane .frow { flex-wrap: wrap; }
  body.game-info .vpane .flabel { width: 100%; }
  body.game-info .vpane .frow :is(#q, #sq) { min-width: 0; }
  body.game-info .vpane #list { padding-right: 0; }
  body.game-info :is(.cx-main, .vpane) .st,
  body.game-info #detail > .st { padding: var(--sp-4); }
  body.game-info :is(.cx-main, .vpane) :is(.tt-head, .tt-body, .tt-acq, .tt-grants, .tt-flavor, .tt-foot) {
    padding: var(--sp-4);
  }
  body.game-info :is(.cx-main, .vpane) .tt-icon { width: 56px; height: 56px; }
  body.game-info :is(.cx-main, .vpane) .cx-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.game-info :is(.cx-main, .vpane) .cx-index-desc { grid-template-columns: minmax(0, 1fr); }
}