/* 정적 원화 + 짧은 opacity/transform 전환. 탐색 효과는 서버 요청·상시 RAF를 만들지 않습니다. */
body #detail-dialog .codex-v17-content,
body #detail-dialog .codex-v17-detail { --codex-accent:#d8b677; --codex-glow:rgba(216,182,119,.15); }
body #detail-dialog [data-codex-tone="fire"] { --codex-accent:#efae83; --codex-glow:rgba(224,112,73,.17); }
body #detail-dialog [data-codex-tone="water"] { --codex-accent:#8cd9ee; --codex-glow:rgba(85,164,198,.18); }
body #detail-dialog [data-codex-tone="wind"] { --codex-accent:#9be0c0; --codex-glow:rgba(104,188,148,.15); }
body #detail-dialog [data-codex-tone="earth"] { --codex-accent:#dec895; --codex-glow:rgba(165,145,78,.17); }
body #detail-dialog [data-codex-tone="lightning"] { --codex-accent:#c8b5f8; --codex-glow:rgba(165,130,213,.17); }
body #detail-dialog .codex-v17-toolbar,
body #detail-dialog .dialog-content-navigation[data-compact-row="true"] .codex-v17-toolbar { gap:8px; }
body #detail-dialog .codex-v17-toolbar>.segmented-control button[aria-pressed="true"] { color:#fff3d1; border-color:#dfbb79; background:linear-gradient(180deg,#4a4136,#302e2b); box-shadow:inset 0 -2px #ddba79; }
body #detail-dialog .codex-v17-hub { position:relative; isolation:isolate; overflow:hidden; display:grid; gap:20px; padding:24px; margin-bottom:16px; border:1px solid #716047; border-radius:14px; background:linear-gradient(100deg,rgba(17,27,34,.98) 2%,rgba(17,27,34,.78) 68%,rgba(24,33,39,.57)),url('/resource/ui/sanctuary-codex-v17/runtime/codex-archive-v17.webp') center 42%/cover; box-shadow:inset 0 1px #b99d6440,0 10px 24px #080d1429; }
body #detail-dialog .codex-v17-hub::after { content:""; position:absolute; inset:8px; border:1px solid #b9a47c26; border-radius:9px; pointer-events:none; z-index:-1; }
body #detail-dialog .codex-v17-eyebrow { display:block; color:#d7bc87; font-size:max(13px,var(--oa-fs-caption,13px)); font-weight:700; letter-spacing:.12em; line-height:1.5; }
body #detail-dialog .codex-v17-hub-heading h3 { margin:8px 0 10px; font-size:clamp(22px,3vw,34px); line-height:1.3; color:#fff4dc; font-weight:750; }
body #detail-dialog .codex-v17-hub-heading p { margin:0; max-width:500px; font-size:16px; line-height:1.6; color:#c3ced4; }
body #detail-dialog .codex-v17-summaries { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
body #detail-dialog .codex-v17-summaries button { display:flex; flex-direction:column; justify-content:center; gap:7px; min-width:0; min-height:80px; padding:10px 12px; border:1px solid #8e82633d; border-radius:8px; color:#d0d9db; background:#142229c2; text-align:left; transition:border-color .16s ease,background .16s ease; }
body #detail-dialog .codex-v17-summaries button:hover,
body #detail-dialog .codex-v17-summaries button[aria-pressed="true"] { border-color:#bd9f6e; background:#263534e0; }
body #detail-dialog .codex-v17-summaries strong { color:#f3e2bd; font-size:23px; font-variant-numeric:tabular-nums; line-height:1.1; }
body #detail-dialog .codex-v17-summaries strong>span { font-size:14px; font-weight:400; color:#9caeb5; }
body #detail-dialog .codex-v17-summaries button>span { font-size:max(13px,var(--oa-fs-caption,13px)); line-height:1.5; overflow-wrap:anywhere; }
body #detail-dialog .codex-v17-progress { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:12px 2px; font-size:14px; line-height:1.5; color:#bcccce; }
body #detail-dialog .codex-v17-progress>span { flex:1 1 auto; }
body #detail-dialog .codex-v17-progress progress { flex:1 1 120px; width:100%; min-width:0; max-width:300px; height:6px; border:0; border-radius:8px; accent-color:#ddbd82; overflow:hidden; }
body #detail-dialog .codex-v17-progress progress::-webkit-progress-bar { background:#111b23; }
body #detail-dialog .codex-v17-progress progress::-webkit-progress-value { background:linear-gradient(90deg,#8d7857,#e0c697); }
body #detail-dialog .codex-v17-search { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin:10px 0 18px; }
body #detail-dialog .codex-v17-search label { grid-column:1/-1; font-size:14px; color:#cfdbdb; font-weight:650; }
body #detail-dialog .codex-v17-search>div { display:flex; min-width:0; border:1px solid #7b878448; border-radius:8px; overflow:hidden; background:#101b23; }
body #detail-dialog .codex-v17-search input { flex:1; width:100%; min-width:0; min-height:48px; padding:10px 12px; border:0; border-radius:0; color:#f4efdf; background:transparent; font-size:16px; box-shadow:none; }
body #detail-dialog .codex-v17-search input::placeholder { color:#9cabaf; opacity:1; }
body #detail-dialog .codex-v17-search input::-webkit-search-cancel-button { display:none; }
body #detail-dialog .codex-v17-search>div>button { width:48px; min-width:48px; min-height:48px; border:0; color:#e6c997; background:#26343a; font-size:24px; line-height:1; }
body #detail-dialog .codex-v17-search>div>button:disabled { opacity:.35; }
body #detail-dialog .codex-v17-search>span { display:flex; align-items:center; color:#a9b9bf; font-size:13px; line-height:1.5; white-space:nowrap; }
body #detail-dialog .codex-grid.codex-v17-grid { grid-template-columns:minmax(0,1fr); gap:14px; }
body #detail-dialog .codex-card.codex-v17-card { position:relative; display:grid; grid-template-columns:minmax(86px,.42fr) minmax(0,1fr); gap:16px; min-height:188px; padding:16px; border:1px solid #71817f5e; border-radius:12px; overflow:hidden; color:#edf2ef; background:radial-gradient(ellipse at 24% 60%,var(--codex-glow),transparent 65%),linear-gradient(145deg,#202e36,#131e29); box-shadow:inset 0 1px #dae2ca0d; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; text-align:left; }
body #detail-dialog .codex-card.codex-v17-card::after { content:""; position:absolute; inset:6px; border:1px solid #d3c3960e; border-radius:7px; pointer-events:none; }
body #detail-dialog .codex-card.codex-v17-card:hover { transform:translateY(-3px); border-color:var(--codex-accent); box-shadow:0 6px 16px #03091240,inset 0 1px #dcd2ad2b; }
body #detail-dialog .codex-card.codex-v17-card:active { transform:translateY(0) scale(.99); }
body #detail-dialog .codex-card.codex-v17-card:focus-visible { outline:2px solid #f8da93; outline-offset:3px; border-color:var(--codex-accent); }
body #detail-dialog .codex-v17-art { position:relative; align-self:stretch; display:flex; align-items:center; justify-content:center; min-width:0; height:164px; }
body #detail-dialog .codex-v17-art::before,
body #detail-dialog .codex-v17-full-art::before { content:""; position:absolute; width:86%; aspect-ratio:1; border:1px solid var(--codex-accent); opacity:.14; border-radius:50%; background:radial-gradient(circle,var(--codex-glow),transparent 70%); }
body #detail-dialog .codex-card.codex-v17-card picture,
body #detail-dialog .codex-card.codex-v17-card .codex-v17-character-art { position:relative; display:block; width:100%; max-width:190px; height:100%; object-fit:contain; filter:drop-shadow(0 8px 7px #03091585); }
body #detail-dialog .codex-card.codex-v17-card picture>img { width:100%; height:100%; object-fit:contain; }
body #detail-dialog .codex-v17-card-copy { position:relative; display:flex; min-width:0; flex-direction:column; align-items:flex-start; gap:7px; justify-content:center; }
body #detail-dialog .codex-card.codex-v17-card strong { font-size:20px; line-height:1.35; color:#f3eddd; }
body #detail-dialog .codex-card.codex-v17-card small { margin:0; font-size:14px; line-height:1.5; color:#bbc9cf; }
body #detail-dialog .codex-v17-status { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border:1px solid #9eacaa38; border-radius:4px; color:#b4c1c4; background:#07101938; font-size:max(13px,var(--oa-fs-caption,13px)); line-height:1.4; }
body #detail-dialog .codex-v17-status::before { content:""; flex:none; width:5px; height:5px; background:#7b9299; border-radius:50%; }
body #detail-dialog .codex-v17-status.is-known { color:#d1e7d6; border-color:#7aac9648; }
body #detail-dialog .codex-v17-status.is-known::before { background:#99cdb0; box-shadow:0 0 7px #99cdb05c; }
body #detail-dialog .codex-v17-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:1px; }
body #detail-dialog .codex-v17-tag { display:inline-flex; padding:4px 7px; font-size:max(13px,var(--oa-fs-caption,13px)); color:#c2d0d3; line-height:1.35; border:1px solid #a7b8b026; border-radius:4px; background:#06131b3b; }
body #detail-dialog .codex-v17-tag--fire { color:#f5b593; border-color:#dc927b4d; }
body #detail-dialog .codex-v17-tag--water { color:#a7dfed; border-color:#8ac4d54d; }
body #detail-dialog .codex-v17-tag--wind { color:#abe1c6; border-color:#8bcaa94d; }
body #detail-dialog .codex-v17-tag--earth { color:#ddce9e; border-color:#c4b0834d; }
body #detail-dialog .codex-v17-tag--lightning { color:#d8c5ff; border-color:#b49cda4d; }
body #detail-dialog .codex-v17-card-link { display:flex; align-items:center; gap:8px; margin-top:4px; font-size:max(13px,var(--oa-fs-caption,13px)); line-height:1.5; color:var(--codex-accent); }
body #detail-dialog .codex-v17-card-link>span { font-size:16px; }
body #detail-dialog .codex-card.codex-v17-card .codex-monster-art { width:64px; height:64px; transform:scale(1.65); transform-origin:center; }
body #detail-dialog .codex-card.codex-v17-card .item-icon { width:88px; height:108px; object-fit:contain; filter:drop-shadow(0 6px 6px #050b1680); }
body #detail-dialog .codex-card.codex-v17-card--world { display:flex; min-height:240px; align-items:flex-end; padding:18px; }
body #detail-dialog .codex-v17-card--world>.codex-v17-art { position:absolute; inset:0; width:100%; height:100%; opacity:.65; }
body #detail-dialog .codex-card.codex-v17-card--world .codex-card-map { width:100%; height:100%; object-fit:cover; border:0; }
body #detail-dialog .codex-v17-card--world>.codex-v17-art::before { z-index:1; inset:0; width:100%; height:100%; border:0; border-radius:0; opacity:1; background:linear-gradient(0deg,#091622 4%,#0f1f27b8 48%,transparent); }
body #detail-dialog .codex-v17-record-note { margin:18px 0 0; padding-top:12px; border-top:1px solid #71817f32; color:#9eafb5; font-size:max(13px,var(--oa-fs-caption,13px)); line-height:1.6; }
body #detail-dialog .codex-v17-detail { max-width:100%; animation:codex-v17-reveal .28s ease both; }
body #detail-dialog .codex-entry-navigation.codex-v17-entry-navigation { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:10px; align-items:center; margin:0 0 14px; }
body #detail-dialog .codex-v17-entry-navigation button { min-width:44px; min-height:48px; padding:8px 12px; border:1px solid #70817a69; border-radius:6px; background:#162630; color:#d9dfd8; font-size:max(13px,var(--oa-fs-caption,13px)); line-height:1.4; }
body #detail-dialog .codex-v17-entry-navigation button:disabled { opacity:.4; }
body #detail-dialog .codex-v17-entry-navigation>span { min-width:40px; color:#c8d6d6; font-size:14px; font-variant-numeric:tabular-nums; text-align:center; }
body #detail-dialog .codex-v17-character-hero { display:grid; grid-template-columns:minmax(130px,.7fr) minmax(0,1fr); align-items:center; gap:24px; padding:20px; border:1px solid #aab3973b; border-radius:14px; background:radial-gradient(ellipse at 25% 65%,var(--codex-glow),transparent 60%),linear-gradient(135deg,#1b2e36,#101b28); }
body #detail-dialog .codex-v17-full-art { display:flex; position:relative; justify-content:center; align-items:center; height:340px; min-width:0; }
body #detail-dialog .codex-v17-full-art picture,
body #detail-dialog .codex-v17-full-art .codex-v17-character-art { position:relative; display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 10px #000a); }
body #detail-dialog .codex-v17-full-art picture>img { display:block; width:100%; height:100%; object-fit:contain; }
body #detail-dialog .codex-detail-heading.codex-v17-detail-heading { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:0; min-width:0; }
body #detail-dialog .codex-detail-heading.codex-v17-detail-heading h3 { margin:0; color:#f4e7c9; font-size:clamp(26px,4vw,44px); line-height:1.2; overflow-wrap:anywhere; }
body #detail-dialog .codex-detail-heading.codex-v17-detail-heading p { margin:0; font-size:16px; line-height:1.6; color:#c2d0d4; }
body #detail-dialog .codex-v17-detail-heading .codex-v17-status { margin-top:8px; font-size:13px; }
body #detail-dialog .codex-v17-detail-panels { display:grid; gap:14px; margin-top:18px; }
body #detail-dialog .codex-v17-info { padding:18px; margin-top:14px; border:1px solid #a1b5ac2e; border-radius:10px; background:#101d26b3; }
body #detail-dialog .codex-v17-detail-panels>.codex-v17-info { margin:0; }
body #detail-dialog .codex-v17-info h4 { margin:0 0 12px; font-size:17px; line-height:1.5; color:#e9d9b7; }
body #detail-dialog .codex-v17-info p { margin:0; font-size:16px; line-height:1.7; color:#c5d2d5; }
body #detail-dialog .codex-v17-info p+p { margin-top:10px; }
body #detail-dialog .codex-v17-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; }
body #detail-dialog .codex-v17-facts>div { min-width:0; padding:10px 12px; border-radius:6px; background:#192c33; }
body #detail-dialog .codex-v17-facts dt { color:#aec0c4; font-size:max(13px,var(--oa-fs-caption,13px)); line-height:1.5; }
body #detail-dialog .codex-v17-facts dd { margin:5px 0 0; font-size:18px; line-height:1.4; color:#f2e4c9; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
body #detail-dialog .codex-v17-info .codex-v17-fineprint { margin-top:12px; font-size:max(13px,var(--oa-fs-caption,13px)); line-height:1.65; color:#9fb1b6; }
body #detail-dialog .codex-v17-section-line { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
body #detail-dialog .codex-v17-section-line h4 { margin:0; }
body #detail-dialog .codex-v17-acquisition { border-color:#ad976242; background:linear-gradient(125deg,#2b302a7a,#14222bb3); }
body #detail-dialog .codex-v17-object-hero { display:grid; grid-template-columns:minmax(100px,.55fr) minmax(0,1fr); align-items:center; gap:24px; min-height:260px; padding:24px; border:1px solid #9fa6943b; border-radius:14px; background:radial-gradient(ellipse at 25% 60%,var(--codex-glow),transparent 64%),linear-gradient(135deg,#243440,#121e2b); }
body #detail-dialog .codex-v17-object-art { display:flex; align-items:center; justify-content:center; min-width:0; height:180px; }
body #detail-dialog .codex-v17-object-art .codex-monster-art { transform:scale(2.5); }
body #detail-dialog .codex-v17-object-art>.item-icon { width:130px; height:160px; object-fit:contain; filter:drop-shadow(0 10px 10px #030e18a0); }
body #detail-dialog .codex-v17-world-hero { position:relative; display:flex; align-items:flex-end; min-height:300px; padding:24px; border:1px solid #9f977448; border-radius:14px; overflow:hidden; isolation:isolate; }
body #detail-dialog .codex-v17-world-hero>.codex-map-art { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
body #detail-dialog .codex-v17-world-hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,#0b1828 3%,#0b1828a8 58%,#0b182829); }
body #detail-dialog .codex-v17-detail>.detail-list,
body #detail-dialog .codex-v17-detail-panels>.detail-list { padding:18px; border:1px solid #a1b5ac2e; border-radius:10px; background:#101d26b3; }
@keyframes codex-v17-reveal { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media(min-width:700px) {
  body #detail-dialog .codex-grid.codex-v17-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body #detail-dialog .codex-v17-hub { grid-template-columns:minmax(0,1fr) minmax(300px,.9fr); align-items:center; }
  body #detail-dialog .codex-v17-detail-panels { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body #detail-dialog .codex-v17-detail-panels>.codex-v17-acquisition,
  body #detail-dialog .codex-v17-detail-panels>.detail-list { grid-column:1/-1; }
}
@media(min-width:1001px) {
  body #detail-dialog .codex-grid.codex-v17-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body #detail-dialog .codex-card.codex-v17-card { grid-template-columns:minmax(0,1fr); gap:12px; }
  body #detail-dialog .codex-v17-art { height:220px; }
  body #detail-dialog .codex-v17-card-copy { min-height:146px; }
  body #detail-dialog .codex-v17-full-art { height:410px; }
}
@media(max-width:359px) {
  body #detail-dialog .codex-v17-hub { padding:16px; gap:16px; }
  body #detail-dialog .codex-v17-hub-heading h3 { font-size:23px; }
  body #detail-dialog .codex-v17-hub-heading p { font-size:15px; }
  body #detail-dialog .codex-v17-summaries button { min-height:86px; padding:8px 6px; }
  body #detail-dialog .codex-v17-summaries strong { font-size:20px; }
  body #detail-dialog .codex-v17-summaries button>span { font-size:max(13px,var(--oa-fs-caption,13px)); }
  body #detail-dialog .codex-v17-search { grid-template-columns:minmax(0,1fr); }
  body #detail-dialog .codex-v17-search>span { justify-content:flex-end; }
  body #detail-dialog .codex-card.codex-v17-card { grid-template-columns:90px minmax(0,1fr); gap:12px; padding:12px; }
  body #detail-dialog .codex-v17-character-hero { grid-template-columns:minmax(0,1fr); gap:18px; padding:16px; }
  body #detail-dialog .codex-v17-full-art { height:260px; }
  body #detail-dialog .codex-v17-character-hero>.codex-v17-detail-heading { text-align:left; }
  body #detail-dialog .codex-v17-object-hero { grid-template-columns:minmax(0,1fr); padding:18px; gap:16px; }
  body #detail-dialog .codex-v17-object-art { height:170px; }
}
@media(max-height:480px) {
  body #detail-dialog .codex-v17-hub { grid-template-columns:minmax(0,1fr); padding:16px; gap:14px; }
  body #detail-dialog .codex-v17-character-hero { grid-template-columns:minmax(130px,.55fr) minmax(0,1fr); gap:16px; padding:16px; }
  body #detail-dialog .codex-v17-full-art { height:240px; }
  body #detail-dialog .codex-grid.codex-v17-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body #detail-dialog .codex-card.codex-v17-card { grid-template-columns:72px minmax(0,1fr); gap:12px; padding:12px; }
  body #detail-dialog .codex-v17-art { height:158px; }
  body #detail-dialog .codex-card.codex-v17-card strong { font-size:18px; }
  body #detail-dialog .codex-card.codex-v17-card .codex-monster-art { transform:scale(1.15); }
}
@media(prefers-reduced-motion:reduce) {
  body #detail-dialog .codex-v17-detail { animation:none; }
  body #detail-dialog .codex-card.codex-v17-card { transition:none; }
  body #detail-dialog .codex-card.codex-v17-card:hover { transform:none; }
}
html[data-reduce-motion="true"] body #detail-dialog .codex-v17-detail,
body[data-reduced-motion="true"] #detail-dialog .codex-v17-detail,
body[data-motion="reduced"] #detail-dialog .codex-v17-detail,
body.motion-reduced #detail-dialog .codex-v17-detail { animation:none; }
body.motion-reduced #detail-dialog .codex-card.codex-v17-card,
body[data-motion="reduced"] #detail-dialog .codex-card.codex-v17-card { transition:none; }
body.motion-reduced #detail-dialog .codex-card.codex-v17-card:hover,
body[data-motion="reduced"] #detail-dialog .codex-card.codex-v17-card:hover { transform:none; }
@media(max-width:699px) {
  body #detail-dialog .codex-v17-hub { padding:16px; gap:10px; margin-bottom:10px; }
  body #detail-dialog .codex-v17-hub-heading h3 { margin:4px 0 0; font-size:23px; }
  body #detail-dialog .codex-v17-hub-heading p { display:none; }
  body #detail-dialog .codex-v17-summaries button { min-height:64px; padding:8px; gap:5px; }
  body #detail-dialog .codex-v17-summaries strong { font-size:20px; }
  body #detail-dialog .codex-v17-summaries button>span { font-size:max(13px,var(--oa-fs-caption,13px)); }
  body #detail-dialog .codex-v17-search { grid-template-columns:minmax(0,1fr) auto; gap:6px; margin:6px 0 12px; }
  body #detail-dialog .codex-v17-search label { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }
  body #detail-dialog .codex-v17-search>span { font-size:max(13px,var(--oa-fs-caption,13px)); }
  body #detail-dialog .codex-v17-progress { padding:8px 2px; }
}
@media(max-width:359px) {
  body #detail-dialog .codex-v17-hub { padding:10px; gap:8px; }
  body #detail-dialog .codex-v17-hub-heading>.codex-v17-eyebrow { display:none; }
  body #detail-dialog .codex-v17-hub-heading h3 { margin:0; font-size:20px; }
  body #detail-dialog .codex-v17-summaries { gap:6px; }
  body #detail-dialog .codex-v17-summaries button { flex-direction:row; justify-content:center; align-items:center; gap:6px; min-height:48px; padding:6px 4px; text-align:center; }
  body #detail-dialog .codex-v17-summaries strong { font-size:18px; }
  body #detail-dialog .codex-v17-summaries strong>span { display:none; }
}
@media(max-width:560px) and (min-height:481px) {
  html:not([data-visual-viewport-compact="true"]) body #detail-dialog #dialog-content-navigation:not([hidden]) { padding-block:6px; }
  html:not([data-visual-viewport-compact="true"]) body #detail-dialog .codex-toolbar.codex-v17-toolbar { gap:6px; }
  html:not([data-visual-viewport-compact="true"]) body #detail-dialog .codex-v17-toolbar>.segmented-control { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; gap:6px; overflow:visible; }
  html:not([data-visual-viewport-compact="true"]) body #detail-dialog .codex-v17-toolbar>.segmented-control.codex-filter { grid-template-columns:repeat(3,minmax(0,1fr)); }
  html:not([data-visual-viewport-compact="true"]) body #detail-dialog .codex-v17-toolbar>.segmented-control button { min-width:0; min-height:44px; padding:6px 4px; font-size:max(13px,var(--oa-fs-caption,13px)); line-height:1.3; white-space:normal; overflow-wrap:normal; }
}
/* 작은 창의 첫 화면에는 이름·속성·역할을 먼저 보여줍니다. 자세한 설명은 본문을 따라 읽습니다. */
@media(max-width:359px) {
  body #detail-dialog .codex-v17-character-hero { grid-template-columns:86px minmax(0,1fr); align-items:start; gap:12px; padding:12px; }
  body #detail-dialog .codex-v17-full-art { height:128px; align-self:center; }
  body #detail-dialog .codex-v17-character-hero .codex-v17-detail-heading { gap:8px; }
  body #detail-dialog .codex-v17-character-hero .codex-v17-detail-heading>.codex-v17-eyebrow { display:none; }
  body #detail-dialog .codex-v17-character-hero .codex-v17-detail-heading h3 { font-size:24px; }
  body #detail-dialog .codex-v17-character-hero .codex-v17-detail-heading p { font-size:14px; }
  body #detail-dialog .codex-v17-character-hero .codex-v17-detail-heading .codex-v17-status { margin-top:0; }
}
@media(max-width:560px) {
  body #detail-dialog[data-experience-v17="codex"] .dialog-fixed-actions>.codex-fixed-actions[data-thumb-action-count="3"] { grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 48px; gap:8px; }
  body #detail-dialog[data-experience-v17="codex"] .dialog-fixed-actions>.codex-fixed-actions[data-thumb-action-count="3"]>button { min-height:48px; padding:8px 5px; font-size:max(13px,var(--oa-fs-caption,13px)); }
}
@media(max-height:480px) {
  body #detail-dialog .codex-entry-navigation.codex-v17-entry-navigation { margin-bottom:8px; }
  body #detail-dialog .codex-v17-entry-navigation button { min-height:44px; padding:6px 10px; }
  body #detail-dialog .codex-v17-character-hero { grid-template-columns:86px minmax(0,1fr); align-items:start; padding:10px; gap:12px; }
  body #detail-dialog .codex-v17-full-art { height:125px; }
  body #detail-dialog .codex-v17-character-hero .codex-v17-detail-heading { gap:6px; }
  body #detail-dialog .codex-v17-character-hero .codex-v17-detail-heading>.codex-v17-eyebrow { display:none; }
  body #detail-dialog .codex-v17-character-hero .codex-v17-detail-heading h3 { font-size:24px; }
  body #detail-dialog .codex-v17-character-hero .codex-v17-detail-heading p { font-size:14px; }
  body #detail-dialog .codex-v17-character-hero .codex-v17-detail-heading .codex-v17-status { margin-top:0; }
  body #detail-dialog .codex-v17-object-hero { grid-template-columns:86px minmax(0,1fr); align-items:start; min-height:160px; padding:10px; gap:12px; }
  body #detail-dialog .codex-v17-object-art { height:125px; }
  body #detail-dialog .codex-v17-object-art .codex-monster-art { transform:scale(1.35); }
  body #detail-dialog .codex-v17-object-hero .codex-v17-detail-heading>.codex-v17-eyebrow { display:none; }
  body #detail-dialog .codex-v17-world-hero { min-height:160px; align-items:flex-start; padding:12px; }
  body #detail-dialog .codex-v17-world-hero>.codex-v17-detail-heading { gap:6px; }
  body #detail-dialog .codex-v17-world-hero>.codex-v17-detail-heading>.codex-v17-eyebrow { display:none; }
  body #detail-dialog .codex-v17-world-hero>.codex-v17-detail-heading h3 { font-size:24px; }
  body #detail-dialog .codex-v17-world-hero::after { background:linear-gradient(180deg,#0b1828e8,#0b182891 68%,#0b182845); }
}
@media(min-width:1001px) and (max-height:850px) {
  body #detail-dialog .codex-v17-hub { padding:18px 20px; gap:16px; }
  body #detail-dialog .codex-v17-hub-heading h3 { font-size:28px; margin:4px 0 6px; }
  body #detail-dialog .codex-v17-hub-heading p { font-size:14px; }
  body #detail-dialog .codex-card.codex-v17-card { grid-template-columns:minmax(70px,.42fr) minmax(0,1fr); gap:14px; padding:14px; }
  body #detail-dialog .codex-v17-art { height:180px; }
  body #detail-dialog .codex-v17-card-copy { min-height:0; }
}

/* Keep a record's identity in the first view, including short landscape windows. */
body #detail-dialog .codex-v17-card-copy>strong { order:-1; }
body #detail-dialog[data-experience-v17="codex"] .dialog-fixed-actions .dialog-button { font-size:13px; font-size:max(13px,var(--oa-fs-caption,13px)); }
body #detail-dialog[data-experience-v17="codex"] .detail-list dt,
body #detail-dialog[data-experience-v17="codex"] .detail-list dd,
body #detail-dialog[data-experience-v17="codex"] .dialog-muted { font-size:13px; font-size:max(13px,var(--oa-fs-caption,13px)); }
/* The latest catalog includes full illustrations as well as the existing atlas icons. */
body #detail-dialog .codex-v17-art>.codex-monster-preview { width:min(100%,160px); height:100%; }
body #detail-dialog .codex-v17-object-art>.codex-monster-preview { width:min(100%,240px); height:100%; }
body #detail-dialog .codex-v17-object-art .codex-monster-preview picture,
body #detail-dialog .codex-v17-object-art .codex-monster-preview img { display:block; width:100%; height:100%; object-fit:contain; }

/* 몬스터의 고유 호칭·실루엣·계열·전투 역할을 같은 카드에서 읽습니다. */
body #detail-dialog .codex-v15-monster-card { border-color:#93826766; }
body #detail-dialog .codex-v15-monster-card .codex-v17-card-copy>small { color:#dec594; }
body #detail-dialog .codex-v15-monster-card .codex-v17-tags { min-width:0; max-width:100%; }
body #detail-dialog .codex-v15-monster-card .codex-v17-tag { min-width:0; max-width:100%; overflow-wrap:anywhere; }
body #detail-dialog .codex-v15-monster-card .codex-v17-tag--family { color:#bccfd2; border-color:#adc6c22e; }
body #detail-dialog .codex-v15-monster-card .codex-v17-tag--role { color:#efd6a4; border-color:#d8b57642; background:#65533426; }
body #detail-dialog .codex-v15-monster-hero { border-color:#a78d615c; background:radial-gradient(ellipse at 28% 70%,#c59c5824,transparent 62%),linear-gradient(135deg,#2b3338,#151f2a); }
body #detail-dialog .codex-v15-monster-hero .codex-v15-monster-epithet { color:#e2c997; }
body #detail-dialog .codex-v15-monster-facts { grid-template-columns:repeat(3,minmax(0,1fr)); }
body #detail-dialog .codex-v15-monster-facts dd { font-size:16px; }
body #detail-dialog .codex-v15-monster-lore { border-left:3px solid #aa8d5e; }
body #detail-dialog .codex-v15-monster-tactics { border-color:#97b4ab59; background:#152b2d; }
@media(max-width:699px) {
  body #detail-dialog .codex-v15-monster-facts { grid-template-columns:minmax(0,1fr); gap:7px; }
  body #detail-dialog .codex-v15-monster-facts>div { display:grid; grid-template-columns:minmax(76px,.4fr) minmax(0,1fr); gap:10px; padding:10px; }
  body #detail-dialog .codex-v15-monster-facts dd { margin:0; }
  body #detail-dialog .codex-v15-monster-hero { grid-template-columns:minmax(80px,.65fr) minmax(0,1fr); gap:14px; min-height:190px; padding:16px; }
  body #detail-dialog .codex-v15-monster-hero .codex-v17-object-art { height:170px; }
  body #detail-dialog .codex-v15-monster-hero .codex-v17-detail-heading h3 { font-size:26px; }
  body #detail-dialog .codex-v15-monster-hero .codex-v17-detail-heading p { font-size:14px; }
  body #detail-dialog .codex-v15-monster-hero .codex-v17-detail-heading .codex-v17-status { margin-top:0; }
}
@media(max-height:480px) {
  body #detail-dialog .codex-v15-monster-hero { min-height:150px; padding:12px; gap:12px; }
  body #detail-dialog .codex-v15-monster-hero .codex-v17-object-art { height:125px; }
}
@media(min-width:700px) {
  body #detail-dialog .codex-v17-hub { padding:12px 16px; gap:12px; margin-bottom:8px; }
  body #detail-dialog .codex-v17-hub-heading h3 { font-size:24px; margin:4px 0; }
  body #detail-dialog .codex-v17-hub-heading p { font-size:max(13px,var(--oa-fs-caption,13px)); }
  body #detail-dialog .codex-v17-summaries button { min-height:56px; gap:4px; padding:8px 10px; }
  body #detail-dialog .codex-v17-summaries strong { font-size:20px; }
  body #detail-dialog .codex-v17-progress { padding:6px 2px; }
  body #detail-dialog .codex-v17-search { margin:6px 0 12px; }
}
@media(min-width:1001px) {
  body #detail-dialog .codex-card.codex-v17-card { grid-template-columns:minmax(80px,.42fr) minmax(0,1fr); gap:14px; padding:14px; }
  body #detail-dialog .codex-v17-art { height:180px; }
  body #detail-dialog .codex-v17-card-copy { justify-content:flex-start; min-height:0; }
}
@media(max-height:480px) {
  body #detail-dialog .codex-v17-hub { display:none; }
  body #detail-dialog .codex-v17-progress { padding:0; gap:8px; font-size:max(13px,var(--oa-fs-caption,13px)); line-height:1.3; }
  body #detail-dialog .codex-v17-search { grid-template-columns:minmax(0,1fr) auto; gap:6px; margin:5px 0 8px; }
  body #detail-dialog .codex-v17-search label { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }
  body #detail-dialog .codex-card.codex-v17-card { min-height:108px; padding:10px; }
  body #detail-dialog .codex-v17-art { height:88px; }
  body #detail-dialog .codex-v17-card-copy { align-self:start; justify-content:flex-start; gap:5px; }
}
/* 좁은 세로 화면에서도 넓은 사족·방패 전신을 작은 왼쪽 칸에 축소하지 않습니다. */
@media(max-width:699px) and (min-height:481px) {
  body #detail-dialog .codex-v15-monster-hero { grid-template-columns:minmax(0,1fr); gap:8px; padding:10px; }
  body #detail-dialog .codex-v15-monster-hero>.codex-v17-detail-heading { order:-1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; }
  body #detail-dialog .codex-v15-monster-hero .codex-v17-eyebrow { display:none; }
  body #detail-dialog .codex-v15-monster-hero h3,
  body #detail-dialog .codex-v15-monster-hero .codex-v15-monster-epithet { grid-column:1 / -1; margin:0; }
  body #detail-dialog .codex-v15-monster-hero .codex-v17-status,
  body #detail-dialog .codex-v15-monster-hero .codex-v17-tags { margin:0; align-self:center; }
  body #detail-dialog .codex-v15-monster-hero>.codex-v17-object-art { width:100%; height:150px; }
  body #detail-dialog .codex-v15-monster-hero .codex-monster-preview { width:100%; max-width:240px; }
}
@media(max-width:699px) and (min-height:481px) and (max-height:600px) {
  body #detail-dialog .codex-v15-monster-hero>.codex-v17-object-art { height:120px; }
  /* 긴 번역의 헤더·이전/다음·고정 footer 뒤에도 전신을 첫 화면에서 확인합니다. */
  body #detail-dialog#detail-dialog[data-codex-art-v20='monsters'] .codex-v15-monster-hero.codex-v20-hero { padding:10px; gap:8px; }
  body #detail-dialog#detail-dialog[data-codex-art-v20='monsters'] .codex-v15-monster-hero>.codex-v20-art-host>.codex-v20-fullbody {
    --codex-v20-zone-height:154px; height:154px; padding:10px;
  }
}
@media(min-width:700px) and (max-height:900px) {
  body #detail-dialog#detail-dialog[data-codex-art-v20='monsters'] .codex-v15-monster-hero>.codex-v20-art-host>.codex-v20-fullbody {
    --codex-v20-zone-height:clamp(180px,calc(100dvh - 420px),420px); height:300px; height:var(--codex-v20-zone-height);
  }
  html[data-browser-compat='ie11'] body #detail-dialog#detail-dialog[data-codex-art-v20='monsters'] .codex-v15-monster-hero.codex-v20-hero { display:block; overflow:hidden; }
  html[data-browser-compat='ie11'] body #detail-dialog#detail-dialog[data-codex-art-v20='monsters'] .codex-v15-monster-hero>.codex-v20-art-host { float:left; width:44%; margin:0 24px 0 0; }
  html[data-browser-compat='ie11'] body #detail-dialog#detail-dialog[data-codex-art-v20='monsters'] .codex-v15-monster-hero>.codex-v17-detail-heading,
  html[data-browser-compat='ie11'] body #detail-dialog#detail-dialog[data-codex-art-v20='monsters'] .codex-v15-monster-hero>.codex-v20-hero-meta { display:block; overflow:hidden; }
}