@import url('styles.css') layer(legacy);
@import url('ui-common.css');
@import url('reward-ui.css');

/* 승인 시안 기준 실제 화면 전용 배치 · 논리 해상도 360 × 640 */
.art-screen { color:#eadabc; font-family:'Myeongwon',serif; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.hero-preview:focus { outline:none; }.hero-preview:focus-visible { outline:1px dashed #b9a06b66; }
:where(.art-screen) button { border:0; border-radius:0; background:none; box-shadow:none; padding:0; color:inherit; font:inherit; min-height:0; }
:where(.art-screen) button::before,:where(.art-screen) button::after { border:0; border-image:none; box-shadow:none; }
.art-screen svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.art-screen button:focus-visible { outline:2px solid #efd29a; outline-offset:2px; }
.art-screen .ui-action:focus-visible { outline:0; }
.ui-action,.ui-action * { text-shadow:none; }
.ui-action::before,.ui-action::after { border:0; border-image:none; }
.art-screen .ui-utility { position:relative; width:36px; height:38px; min-height:0; }
.art-screen .ui-utility svg { width:20px; height:20px; }
.art-screen .ui-utility>span:last-child { font-size:8px; }
.art-screen .energy-icon { width:18px; height:18px; object-fit:contain; }
.art-screen .energy-cost { gap:2px; font:11px/16px Georgia,serif; }
.art-screen .energy-cost .energy-icon { width:15px; height:15px; }
.art-screen .energy-cost>span { color:inherit; font-size:inherit; }
.art-screen .ui-action-icon { width:25px; height:28px; }
.art-screen .ui-action-icon svg { width:21px; height:23px; }
.art-screen button:disabled { cursor:default; }
.art-screen .mode-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; height:72px; align-items:center; }
.art-screen .mode-actions>button { display:flex; align-items:center; justify-content:center; gap:7px; height:60px; padding:0 11px; min-width:0; font-size:18px; }
.mode-label { display:block; text-align:left; white-space:nowrap; line-height:22px; transform:rotate(-3deg); }
.mode-label small { display:block; height:15px; line-height:15px; margin-top:1px; font-size:9px; }
.mode-symbol { flex:0 0 25px; transform:rotate(-3deg); }

/* 타이틀 · 이어하기 우선순위 */
#title-screen.art-title { display:flex; flex-direction:column; justify-content:space-between; padding:52px 28px 29px; isolation:isolate; background:#10191b url('assets/title-v2/background.webp') center/cover no-repeat; }
.art-title::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(#0712158a,transparent 49%,#06101233 62%,#071012ef 100%),radial-gradient(ellipse at 50% 18%,#07101188,transparent 44%); }
.art-title #title-settings { position:absolute; top:15px; right:20px; }
.art-title .title-brand { position:relative; top:auto; margin:0; text-align:center; }
.title-emblem { position:relative; width:73px; height:54px; margin:0 auto 8px; filter:drop-shadow(2px 3px #050b0c); }
.title-emblem img { position:absolute; top:3px; left:19px; width:35px; height:47px; object-fit:contain; transform-origin:50% 100%; }
.title-emblem img:first-child { transform:rotate(-20deg) translateX(-6px); filter:brightness(.7); }
.title-emblem img:nth-child(2) { transform:rotate(20deg) translateX(6px); filter:brightness(.8); }
.art-title .eyebrow { margin:0; color:#c3ae82; font-size:9px; letter-spacing:3px; }
.art-title #title-heading { display:flex; justify-content:center; gap:4px; margin:4px 0 2px; color:#ecd3a1; font-size:74px; line-height:1.13; font-weight:400; letter-spacing:0; text-shadow:2px 3px #57412c,3px 5px #081112,0 8px 18px #000a; }
.art-title h1 span:first-child { transform:rotate(-5deg) translateY(3px); }.art-title h1 span:nth-child(2) { transform:translateY(-3px); }.art-title h1 span:last-child { transform:rotate(4deg) translateY(2px); }
.title-rule { font-size:10px; color:#a28c62; letter-spacing:6px; }
.art-title .title-tagline { margin:7px 0 0; color:#d3c5a7; font-size:11px; letter-spacing:1px; }
.art-title .title-actions { position:relative; inset:auto; width:100%; display:flex; flex-direction:column; align-items:center; gap:10px; }
.art-title .mode-actions { width:245px; height:70px; grid-template-columns:1fr; }
.art-title .mode-actions>button { height:63px; width:100%; font-size:23px; gap:10px; padding-right:27px; }
.art-title.has-resume .mode-actions { height:128px; grid-template-rows:70px 50px; gap:8px; }
.art-title.has-resume #new-run { height:45px; font-size:18px; }
.title-start-arrow { position:absolute; right:18px; top:50%; transform:translateY(-50%); opacity:.75; }
.art-title .title-collection { display:flex; align-items:center; justify-content:center; gap:8px; width:192px; height:62px; text-align:left; font-size:16px; color:#d6c7a8; }
.art-title .title-collection small { display:block; margin-top:4px; color:#9f9f8a; font-size:9px; }
.title-book,.title-book svg { width:51px; height:58px; }.title-book { transform:rotate(-5deg); filter:drop-shadow(3px 4px #050e1080); }

/* 캐릭터 · 전신과 세로 소지품 */
#character-screen.art-character { display:block; padding:0; overflow:hidden; background:linear-gradient(90deg,#06121335,transparent 55%,#0d171761),linear-gradient(#0d1818df 0%,#0d181829 20%,transparent 52%,#111b1beb 73%,#101818 100%),var(--character-landscape,url('assets/region-backgrounds-v2/brass-ledger-street.webp')) center top/auto 535px no-repeat,#101818; }
.selection-topbar { height:42px; padding:2px 70px 0 13px; display:flex; align-items:center; gap:13px; margin-bottom:0; border:0; background:none; }
.art-back { width:28px; height:32px; color:#d1b985; }
.wallet { margin-left:auto; display:flex; align-items:center; gap:5px; font:16px Georgia,serif; color:#d4ba7c; }
.wallet svg { width:15px; height:18px; }
.selection-topbar .art-back { flex-shrink:0; }
.selection-shop { display:flex; align-items:center; justify-content:center; gap:5px; width:76px; height:34px; flex-shrink:0; margin-left:auto; padding:0 5px 3px; font-size:14px; }
.selection-shop svg { width:17px; height:18px; }
.selection-topbar .wallet { margin-left:0; min-width:0; }
.selection-topbar .wallet span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.selection-topbar .wallet svg { flex-shrink:0; }
.selection-utilities { position:absolute; right:20px; top:4px; z-index:5; display:flex; flex-direction:column; gap:8px; }
.hero { position:relative; height:382px; }
.hero-heading { position:absolute; top:2px; left:23px; z-index:2; }
.hero-heading .eyebrow { margin:0; color:#c2aa78; font-size:10px; letter-spacing:1px; }
.hero-heading h2 { margin:3px 0 2px; font-size:32px; font-weight:400; letter-spacing:2px; line-height:1.2; text-shadow:2px 3px #000; }
.hero-heading p:last-child { margin:0; font-size:10px; color:#c2bbaa; }
.stat-strip { position:absolute; top:75px; left:22px; z-index:3; display:flex; gap:9px; align-items:center; font-size:13px; text-shadow:0 1px 3px #000; }
.stat-strip>span { display:flex; gap:3px; align-items:center; font-family:Georgia,serif; }.stat-strip svg,.stat-strip .energy-icon { width:14px; height:15px; }.stat-strip>span:first-child { color:#a5cfb6; }
.hero-preview { position:absolute; inset:102px 110px 24px 5px; outline-offset:-3px; touch-action:pan-y; }
.hero-preview #character-art { position:absolute; left:0; bottom:0; width:245px; height:268px; object-fit:contain; object-position:center bottom; opacity:1; filter:brightness(1) saturate(1) drop-shadow(4px 6px #03090988) drop-shadow(0 0 12px #aabca82b); transform:translateX(var(--drag-x,0px)); }
.hero-preview #character-art.entering { animation:character-enter 280ms ease-out; }
@keyframes character-enter {
  from { opacity:.2; transform:translateX(calc(var(--drag-x,0px) - 12px)); }
  to { opacity:1; transform:translateX(var(--drag-x,0px)); }
}
.hero-preview.dragging #character-art { animation:none; }
.hero-preview.locked #character-art { filter:brightness(.55) saturate(0) drop-shadow(4px 6px #03090988) drop-shadow(0 0 12px #aabca82b); }
.hero-preview.just-unlocked #character-art { animation:character-unlock-color 650ms ease-out; }
@keyframes character-unlock-color {
  from { filter:brightness(.55) saturate(0) drop-shadow(4px 6px #03090988) drop-shadow(0 0 12px #aabca82b); }
  to { filter:brightness(1) saturate(1) drop-shadow(4px 6px #03090988) drop-shadow(0 0 12px #aabca82b); }
}
.ground-shadow { position:absolute; bottom:-1px; left:18px; width:185px; height:20px; background:#000b; border-radius:50%; filter:blur(7px); }
.hero-preview #character-lock-badge { display:none; }
.loadout { position:absolute; top:86px; right:17px; width:123px; height:284px; display:flex; flex-direction:column; gap:10px; isolation:isolate; z-index:3; }
.loadout::before { content:''; position:absolute; inset:-23px -20px -13px -23px; background:radial-gradient(ellipse,#0e1819a8 12%,#0e18196b 50%,transparent 74%); z-index:-1; pointer-events:none; }
.info-panel { position:relative; display:flex; flex-direction:column; align-items:center; flex-shrink:0; width:123px; text-align:center; text-shadow:0 2px 3px #000; }
.info-panel::after { content:''; position:absolute; width:63px; height:1px; left:30px; bottom:0; background:linear-gradient(90deg,transparent,#b5a47c50,transparent); }
.panel-title { display:flex; align-items:center; justify-content:center; gap:4px; min-height:22px; }.panel-title strong { font-size:14px; font-weight:400; color:#ebd9b1; }.panel-title svg { width:10px; height:10px; color:#b8a478; }
.panel-sub { margin-top:2px; font-size:9px; color:#bcbba8; line-height:1.4; }
.deck-panel { height:116px; }.deck-panel strong { font-size:18px; }
.card-fan { position:relative; width:87px; height:73px; flex-shrink:0; filter:drop-shadow(0 4px 2px #0008); }
.card-fan img { position:absolute; width:40px; height:57px; left:23px; top:6px; transform-origin:50% 100%; }.card-fan img:first-child { transform:rotate(-18deg) translateX(-8px); filter:brightness(.72); }.card-fan img:nth-child(2) { transform:rotate(18deg) translateX(8px); filter:brightness(.8); }
.trait-panel { height:90px; }.trait-emblem { display:grid; place-items:center; width:29px; height:30px; margin:2px 0 6px; border:2px solid #9e8456; background:#68563b; color:#d9bc88; border-radius:46% 51% 43% 48%; box-shadow:2px 3px #0b1313; }.trait-emblem svg { width:19px; height:19px; }
.tool-panel { height:58px; }.tool-panel::after { display:none; }.tool-icons { display:flex; gap:6px; height:37px; margin:0 0 4px; }.tool-token { display:flex; flex-direction:column; align-items:center; width:33px; height:37px; }.tool-token>img { width:24px; height:24px; object-fit:contain; filter:drop-shadow(1px 3px #020606); }.tool-token .energy-cost { font-size:10px; line-height:13px; }.tool-token .energy-icon { width:13px; height:13px; }
.hero-quote { position:absolute; bottom:0; left:10px; width:216px; margin:0; text-align:center; font-size:11px; color:#e3d2b0; text-shadow:0 2px 4px #000; }
.selection-bottom { position:relative; padding:0 17px; }
.character-roster { --slant:22px; height:83px; display:grid; grid-template-columns:27px minmax(0,1fr) 27px; padding:10px 0; gap:0; }
.roster-window { overflow:hidden; height:63px; clip-path:polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%); background:#070d0f; }
.roster-track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - var(--slant)) / 3); height:100%; }
.roster-arrow { width:27px; height:63px; font:36px Georgia,serif; color:#d0b681; }.roster-arrow:disabled { opacity:.3; }
.portrait { position:relative; isolation:isolate; overflow:hidden; width:calc(100% + var(--slant)); height:63px; clip-path:polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%); }
.portrait-shell { position:absolute; inset:0; background:#797767; }.portrait-window { position:absolute; inset:3px 2px; overflow:hidden; clip-path:polygon(var(--slant) 0,100% 0,calc(100% - var(--slant)) 100%,0 100%); background:linear-gradient(135deg,#4a5750 0 46%,#303c38 46% 73%,#25302e 73%); }.portrait-window::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 45%,#081011ee 94%); }
.portrait img { position:absolute; left:-3px; top:-8px; width:105px; height:105px; object-fit:contain; opacity:.85; filter:saturate(.7); }.portrait-name { position:absolute; bottom:7px; left:0; width:91%; font-size:12px; color:#d6ccb4; text-shadow:0 2px #050a0b; z-index:2; }
.portrait[aria-pressed="true"] .portrait-shell { background:#e5c588; }.portrait[aria-pressed="true"] .portrait-window { background:linear-gradient(135deg,#8f8152 0 46%,#5e6649 46% 73%,#334039 73%); }.portrait[aria-pressed="true"] img { opacity:1; filter:none; }.portrait[aria-pressed="true"] .portrait-name { color:#ffe7b3; }
.portrait.is-locked img { opacity:.3; filter:grayscale(1); }.portrait-lock { position:absolute; left:calc(50% - 12px); top:12px; width:23px; height:24px; display:grid; place-items:center; border-radius:45%; background:#17201fdf; color:#e1c795; z-index:2; }.portrait-lock svg { width:18px; height:19px; }
.roster-pagination { height:25px; display:flex; align-items:center; justify-content:center; gap:2px; }.roster-page { display:grid; place-items:center; width:24px; height:25px; }.roster-page::before { content:''; width:6px; height:6px; border:1px solid #bba273; transform:rotate(45deg); }.roster-page[aria-current="true"]::before { background:#e2c78f; border-color:#e2c78f; }
#character-message { margin:4px 0 0; font-size:10px; line-height:1.3; color:#d5c4a2; text-align:center; min-height:13px; }

/* 전투 상단 · 기존 정보 및 상태 연출 유지 */
#battle-screen.art-battle { display:block; padding:0; background-color:#101c1c; background-repeat:no-repeat; background-position:top center; background-size:100% 312px; }
.art-battle::before { content:''; position:absolute; inset:302px 0 0; background:radial-gradient(ellipse at 50% 3%,#23332e70,transparent 62%),repeating-linear-gradient(18deg,transparent 0 3px,#050c0c13 3px 4px),#101c1c; pointer-events:none; }
.art-battle>header { position:absolute; top:11px; left:18px; right:15px; height:34px; padding:0; display:flex; align-items:center; border:0; background:none; z-index:3; }
.art-battle .battle-heading { flex:1; min-width:0; }.art-battle .battle-heading-line { display:flex; gap:7px; align-items:baseline; margin:0; font-weight:400; }.art-battle #run-position { color:#e6c68a; font-size:20px; white-space:nowrap; }.art-battle #enemy-name { max-width:150px; font-size:14px; color:#eadfc6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.art-battle>header nav { gap:10px; display:flex; align-items:center; }.art-battle #relic-open { color:#d4bd8c; font-size:12px; white-space:nowrap; min-height:32px; }
.art-battle .battle-settings { position:relative; }.art-battle .battle-turn { position:absolute; top:48px; right:0; display:flex; align-items:baseline; gap:7px; color:#c9c4b5; font-size:9px; white-space:nowrap; }.art-battle #turn { font:12px Georgia,serif; color:#f3ead7; }
.art-battle #battle-stage { position:absolute; top:63px; left:0; width:100%; height:234px; padding:0; background:none; border:0; box-shadow:none; overflow:visible; }
.art-battle .battle-scene { position:relative; height:100%; background:none; }
.art-battle .player-stats { position:absolute; top:0; left:18px; width:143px; display:block; padding:0; }
.art-battle .player-health { display:flex; justify-content:space-between; align-items:center; padding:0 0 5px; }.art-battle .player-health>span { font-size:11px; color:#b4d0b7; }.art-battle #health { font:600 14px Georgia,serif; color:#eadabc; }
.art-battle .player-health-track { position:relative; top:auto; left:auto; width:100%; height:6px; margin:0; border:0; border-radius:4px; background:#263934; overflow:hidden; }.art-battle #player-bar { height:100%; background:#a5cfb6; }
.art-battle .player-energy { display:flex; justify-content:space-between; align-items:center; height:31px; margin-top:3px; }.art-battle .player-energy>span { font-size:10px; }.art-battle #focus { display:flex; gap:5px; height:23px; }.art-battle .energy-pip,.art-battle .energy-pip .energy-icon { width:18px; height:21px; }
.art-battle .player-portrait { position:absolute; top:61px; left:14px; width:152px; height:162px; bottom:auto; }.art-battle #player-art { width:100%; height:100%; object-fit:contain; }
.art-battle .enemy-combatant { position:static; width:auto; height:auto; }.art-battle .enemy-portrait { position:absolute; top:-13px; right:44px; left:auto; width:121px; height:142px; margin:0; }.art-battle #enemy-art { width:100%; height:100%; object-fit:contain; }
.art-battle #intent { position:absolute; top:153px; right:18px; bottom:auto; left:auto; width:195px; height:auto; min-height:24px; padding:0; color:#e8b2a4; background:none; border:0; font-size:11px; text-align:right; white-space:pre-line; }
.art-battle .enemy-health { position:absolute; top:183px; right:18px; left:auto; width:143px; display:flex; justify-content:space-between; align-items:center; font-size:11px; }.art-battle #enemy-hp { font:600 14px Georgia,serif; }
.art-battle .health-track { position:absolute; top:205px; right:18px; left:auto; width:143px; height:6px; margin:0; background:#263934; border:0; border-radius:4px; }.art-battle #enemy-bar { background:#d07870; }
.art-battle .enemy-trait { position:absolute; top:216px; right:18px; left:auto; width:205px; min-height:18px; max-height:29px; padding:0; font-size:10px; text-align:right; color:#cbc5af; line-height:1.25; }
.art-battle .boss-counter { position:absolute; top:136px; right:18px; color:#ebc189; font-size:10px; }

/* 카드 중심 및 도구 확인 영역 */
.art-battle .arena { position:absolute; top:307px; left:18px; right:18px; height:211px; padding:0; background:none; border:0; box-shadow:none; }
.art-battle .arena>.section-label { position:relative; height:25px; display:flex; justify-content:space-between; align-items:center; margin:0; font-size:11px; }
.art-battle #battle-rule { font-size:11px; }.art-battle #deck-open { display:flex; align-items:center; gap:4px; color:#c1b796; min-height:28px; font:14px Georgia,serif; }
.art-battle #regroup { position:absolute; top:313px; left:123px; z-index:3; padding:0 5px; min-height:24px; font-size:10px; color:#e4c992; background:#101c1c; }
.art-battle .cards { position:absolute; top:36px; left:15px; right:15px; height:116px; display:flex; justify-content:space-between; align-items:flex-start; gap:0; margin:0; }
.art-battle .card { position:relative; flex:0 0 auto; width:82px; height:109px; min-height:0; margin:7px 0 0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; color:#423727; filter:drop-shadow(0 5px 3px #02080799); }
.art-battle .card::before,.art-battle .card::after { display:none; }.art-battle .card-art { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; opacity:1; }.art-battle #left { transform:rotate(-5deg); }.art-battle #right { transform:rotate(5deg); }
.art-battle .boundary-slot { position:relative; flex:0 0 82px; width:82px; height:109px; margin-top:7px; }
.art-battle .boundary-slot>.card { margin:0; }
.art-battle .card-adjusters { position:absolute; bottom:-7px; left:-4px; right:-4px; display:flex; gap:4px; z-index:2; }
.art-battle .shift-button { --shape:polygon(8% 5%,90% 0,100% 15%,94% 94%,5% 100%,0 81%); flex:1; height:33px; min-height:33px; padding:0; font:18px Georgia,serif; }
.art-battle:has(.card-adjusters:not([hidden])) .boundary .card-foot { visibility:hidden; }
.art-battle .card strong { position:absolute; inset:0; display:grid; place-items:center; padding:0 0 3px; font:600 48px Georgia,serif; color:#423727; text-shadow:none; }.art-battle .card .card-label { display:none; }.art-battle .boundary .card-foot { position:absolute; bottom:8px; left:0; width:100%; font-size:10px; color:#9c8246; }
.art-battle #middle { width:100px; height:133px; margin-top:-10px; transform:none; filter:drop-shadow(0 0 13px #c7ac6145) drop-shadow(0 5px 3px #02080799); }.art-battle #middle strong { font-size:54px; }.art-battle #middle:not(.known):not(.hit):not(.miss)>strong,.art-battle #middle:not(.known):not(.hit):not(.miss)>.card-foot { display:none; }
.art-battle #middle .card-foot { position:absolute; bottom:10px; width:100%; left:0; display:flex; align-items:center; justify-content:center; gap:2px; font-size:9px; color:#635238; }.art-battle #middle .mark-icon { width:16px; height:16px; }
.art-battle .boundary:disabled { opacity:1; filter:drop-shadow(0 5px 3px #02080799); }.art-battle .boundary.targetable { filter:drop-shadow(0 0 6px #f0d490); }.art-battle .boundary.selected { outline:2px solid #f0d490; outline-offset:3px; }
.art-battle .battle-rule-group { display:flex; align-items:center; gap:5px; min-width:0; }
.art-battle #mirror-help { width:24px; min-width:24px; min-height:28px; padding:0; color:#d6a7e3; font-size:14px; }
.art-battle .boundary.mirror-cursed .card-label { display:block; position:absolute; top:9px; left:0; width:100%; color:#663773; font-size:10px; letter-spacing:0; }
.art-battle .boundary.mirror-cursed .card-foot { color:#663773; font-size:11px; }
.art-battle #range { position:absolute; top:161px; left:0; width:100%; max-height:30px; min-height:0; margin:0; text-align:center; color:#bcb99f; font-size:11px; line-height:1.3; white-space:normal; }
.art-battle .prediction { position:absolute; top:191px; left:0; width:100%; display:flex; justify-content:center; align-items:center; gap:18px; padding:0; background:none; border:0; }.art-battle .prediction>div { display:flex; flex-direction:row; align-items:center; gap:7px; }.art-battle .prediction span { font-size:11px; color:#c5bca3; }.art-battle #chance { font:23px Georgia,serif; color:#eed5a1; }.art-battle #damage { font-size:12px; line-height:1.25; color:#eed5a1; }.art-battle #damage.compact { font-size:9px; }
.art-battle .tool-context { position:absolute; top:0; left:0; max-width:242px; min-height:25px; color:#f0d699; text-align:left; font-size:12px; background:#101c1c; }
.art-battle .controls { position:absolute; inset:0; padding:0; pointer-events:none; }.art-battle .controls button { pointer-events:auto; }
.art-battle .tool-dock { position:absolute; top:532px; left:18px; right:18px; height:45px; min-height:0; margin:0; padding:0; background:none; border:0; }
.art-battle .tool-base { position:relative; display:flex; height:45px; width:100%; }.art-battle .tool-base[inert] { visibility:visible; }.art-battle .tool-heading { position:static; display:flex; align-items:center; width:70px; flex-shrink:0; padding:0 12px 0 0; border-right:1px solid #8b83564d; margin:0; }.art-battle .tool-heading .section-label { display:flex; flex-direction:column; align-items:center; gap:2px; margin:0; width:100%; }.art-battle .tool-heading .section-label>span:first-child { display:flex; flex-direction:column; align-items:center; font-size:10px; color:#b7b697; }.art-battle #tool-count { font:19px Georgia,serif; color:#e2d5af; }.art-battle #grudge-status { font-size:8px; white-space:nowrap; color:#dcc397; }
.art-battle #tool-help { position:absolute; top:-9px; right:-2px; width:17px; height:17px; padding:0; font-size:11px; border:1px solid #807a58; border-radius:50%; color:#c1b796; z-index:3; }
.art-battle .tools { display:flex; flex:1; justify-content:space-evenly; gap:0; margin:0; padding:0 5px; }.art-battle .tools>button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:0; min-width:50px; min-height:50px; padding:0; border:0; background:none; box-shadow:none; }.art-battle .tools>button::before,.art-battle .tools>button::after { display:none; }.art-battle .tools img[id] { position:static; order:0; width:26px; height:26px; object-fit:contain; margin:0; filter:drop-shadow(1px 2px #0008); }.art-battle .tools small { order:1; height:15px; min-height:15px; line-height:15px; margin:0; font-size:9px; }.art-battle .tools strong { order:2; font-size:11px; line-height:14px; font-weight:400; }.art-battle .tools .energy-cost .energy-icon { position:static; width:14px; height:14px; }.art-battle .tools>button:disabled { opacity:.42; filter:none; }.art-battle .tools>button.active { opacity:1; color:#f4d594; }
.art-battle .target-controls { position:absolute; top:-57px; left:0; width:100%; height:24px; padding:0; margin:0; display:flex; justify-content:center; border:0; background:none; box-shadow:none; z-index:4; }.art-battle .target-controls>span { display:none; }.art-battle .target-controls>div { display:flex; justify-content:center; gap:10px; align-items:center; }.art-battle .target-controls button { width:auto; min-width:62px; min-height:24px; height:24px; font-size:13px; padding:0 8px; }.art-battle #tool-confirm { min-width:90px; max-width:135px; font-size:13px; }
.art-battle #status { position:absolute; top:-23px; left:0; width:100%; max-height:22px; min-height:0; margin:0; text-align:center; font-size:11px; line-height:1.2; color:#e4c992; }
.art-battle #status { width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.art-battle #turn-result { position:absolute; top:161px; left:0; width:100%; height:29px; text-align:center; font-size:11px; line-height:1.25; color:#e4c992; }
.art-battle .actions { position:absolute; top:594px; left:18px; right:18px; height:38px; display:flex; align-items:center; gap:8px; margin:0; padding:0; }.art-battle .actions>button { flex:1; min-width:0; height:42px; min-height:0; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 7px; font-size:18px; }.art-battle .actions .action-label { display:flex; flex-direction:column; align-items:center; gap:0; line-height:21px; }.art-battle .actions small { display:flex; align-items:center; justify-content:center; margin:0; height:14px; min-height:14px; line-height:14px; font-size:9px; }.art-battle .actions .ui-action-icon { width:20px; height:26px; }.art-battle .actions .ui-action-icon svg { width:20px; height:22px; }
.art-battle .actions #next { flex:1; }

/* 공통 양피지 · 기존 네이티브 대화상자와 내부 기능 유지 */
dialog { --muted:#766346; --ink:#403625; --gold:#805c35; color:#403625; padding:27px 25px 22px; border:0; border-image:none; border-radius:0; background:linear-gradient(90deg,#a88d60 0,#d5bd8e 3%,#e2cea5 9%,#d8c095 97%,#a98e64); box-shadow:0 12px 35px #0009; max-height:90dvh; scrollbar-color:#91744b transparent; clip-path:polygon(2% 1%,48% 0,97% 2%,100% 15%,98% 99%,50% 98%,1% 100%,0 11%); }
dialog::before,dialog::after { display:none; }dialog::backdrop { background:#06100fc7; backdrop-filter:blur(4px); }
dialog .modal-head { border:0; border-bottom:1px solid #79634466; padding:0 0 10px; margin-bottom:12px; background:none; }dialog .modal-head h2 { color:#3f3524; font-size:25px; font-weight:400; }dialog .modal-head button { border:0; border-image:none; background:#844c36; color:#f2dab1; border-radius:47% 51% 44% 48%; width:34px; height:35px; min-height:35px; padding:0; box-shadow:none; }
dialog button::before,dialog button::after { border:0; border-image:none; box-shadow:none; }dialog .modal-head button::before,dialog .modal-head button::after { display:none; }
dialog p,dialog #modal-body { color:#473e2d; }dialog button { color:#66452f; border-color:#957d52; border-image:none; background:#bba57533; box-shadow:none; }dialog .settings-options button::before,dialog .settings-options button::after { display:none; }
dialog button:focus-visible { outline:2px solid #70452b; outline-offset:2px; }dialog :is(.collection-tabs,.collection-variants) button[aria-selected="true"],dialog .collection-variants button[aria-pressed="true"] { background:#705c36; color:#f4e4be; }
dialog button,dialog button * { text-shadow:none; }
dialog .collection-card small,dialog #collection-category,dialog #collection-status { color:#766346; }
dialog #collection-name { color:#714a29; }
dialog .help-example>strong,dialog .help-example>b,dialog .help-topic-body>h4 { color:#3f6550; }
dialog .help-miss>strong,dialog .help-miss>b { color:#9b4432; }
dialog .help-critical>strong,dialog .help-critical>b { color:#8b5b23; }
dialog .help-topic[open]>summary { background:#d9c297; }
dialog .help-list dt { color:#714a29; }dialog .help-list dd { color:#473e2d; }
dialog #card-trait-detail { --ink:#403625; --muted:#766346; color:#403625; background:#e4cea2; border-color:#96784e; }
dialog .card-trait-detail>div { border:1px solid #96784e; border-image:none; background:linear-gradient(90deg,#d5bd8e,#e2cea5); color:#403625; padding:12px; }
/* 시작 덱·남은 덱 공통 종이 카드 · 문양 정보 추가 */
dialog .deck-cell.marked-card { border:2px solid transparent; background:linear-gradient(#e3cea4,#dcc18e) padding-box,var(--mark-border) border-box; }
dialog .deck-cell { padding:7px 3px; }
dialog .deck-cell .mark-badges { margin:0 0 3px; min-height:0; }
dialog .deck-cell .mark-badges:empty { display:none; }
dialog .deck-cell .mark-badge { font-size:13px; line-height:16px; }
dialog .deck-cell .mark-badge b { font:inherit; }
dialog .deck-cell .mark-icon { width:12px; height:12px; }
dialog .deck-cell:focus-visible { outline:2px solid #70452b; outline-offset:3px; }
/* 양피지 위 문양 이름·장수 대비 확보 */
dialog .mark-ward { color:#174438; }
dialog .mark-spark { color:#60280e; }
dialog .mark-insight { color:#503067; }
/* 확대 없는 팝업 본문 기준 크기 · 작은 설명 동일 적용 */
dialog { --detail-font-size:15px; font-size:var(--detail-font-size); line-height:1.65; }
dialog :where(#modal-body,p,li,dt,dd,small,.mark-legend,.deck-extra,.trait-detail-note,.help-steps span) { font-size:var(--detail-font-size); line-height:1.65; }
dialog .resume-character { font-size:18px; }
dialog :is(.help-steps strong,.help-topic>summary strong,.help-topic-body>h4,.card-trait-detail strong) { font-size:var(--detail-font-size); }
dialog .help-guide h3 { font-size:18px; }
dialog.help-modal { --detail-font-size:16px; }
dialog :is(small,.settings-options p,.collection-footnote,#collection-category,#collection-note) { font-size:13px; }
dialog :is(.help-note,.help-steps span,.help-topic small,.trait-detail-row small,.trait-detail-note) { font-size:14px; }
dialog .mark-legend { gap:12px; margin:4px 0 0; }
dialog .deck-summary { text-align:left; }
dialog .deck-battle-counts { width:100%; border-collapse:collapse; text-align:center; font-size:14px; }
dialog .deck-battle-counts th,dialog .deck-battle-counts td { padding:4px 2px; border-bottom:1px solid #927b5355; }
dialog :is(.deck-remaining,.ui-number-card>span,.collection-card strong) { font-size:14px; line-height:1.5; }
@media(max-width:380px) { dialog.help-modal { --detail-font-size:15px; } }
dialog .help-tabs button[aria-selected="true"],dialog .help-example { background:#c9b184; color:#493925; }dialog .help-tabs,dialog .help-section { color:#493925; }dialog .settings-options p { color:#766346; }

/* 이어하기 공통 제목·닫기 및 사선 확인·취소 */
#resume-dialog .modal-head { text-align:left; }
#resume-dialog .modal-head h2 { margin:0; }
#resume-dialog .resume-summary { padding:8px 0 4px; }
#resume-dialog .resume-character { margin:5px 0 12px; color:#714a29; font-size:23px; font-weight:400; line-height:1.4; }
#resume-dialog #resume-progress,#resume-dialog #resume-condition { margin:6px 0; font-size:15px; line-height:1.65; }
#resume-dialog #resume-question { margin:14px 0 18px; font-size:15px; }
#resume-dialog .resume-actions { display:flex; gap:12px; margin:0 2px 12px; }
#resume-dialog .resume-actions .ui-action { flex:1; min-width:0; min-height:44px; padding:8px 14px; border-radius:0; font-size:17px; font-weight:400; }
#resume-dialog .resume-actions .ui-action:focus-visible { outline:0; }

/* 도감 아이콘 목록 독립 스크롤 및 하단 고정 상세 */
#collection-dialog { width:min(calc(100vw - 24px),480px); height:min(94dvh,740px); max-height:94dvh; padding:24px 24px 16px; overflow:hidden; }
#collection-dialog .modal-head { flex-shrink:0; margin-bottom:8px; }
#collection-heading { font-size:25px; line-height:1.3; }
#collection-dialog .collection-tabs { display:flex; gap:12px; border-bottom:1px solid #92764966; }
#collection-dialog .collection-tabs button { position:relative; flex:1; display:flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:3px 6px 8px; border:0; border-radius:0; background:none; box-shadow:none; color:#796344; font-size:18px; }
#collection-dialog .collection-tabs svg { width:20px; height:20px; }
#collection-dialog .collection-tabs [aria-selected="true"] { color:#743f29; }
#collection-dialog .collection-tabs [aria-selected="true"]::after { content:''; position:absolute; bottom:-2px; left:8%; right:8%; height:4px; background:#8a4f34; clip-path:polygon(0 45%,70% 0,100% 35%,96% 100%,4% 86%); }
#collection-panel { flex:1; display:flex; flex-direction:column; overflow:hidden; min-height:0; padding:0; margin:0; }
#collection-list { flex:1; display:flex; flex-direction:column; min-height:0; }
#collection-count { flex-shrink:0; margin:6px 0; font-size:13px; line-height:1.4; color:#796344; }
#collection-scroll { flex:1; overflow-y:auto; overflow-x:hidden; min-height:0; padding:4px 5px 7px 2px; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#91744b transparent; scrollbar-gutter:stable; }
#collection-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px 9px; align-content:start; }
#collection-grid.is-relics { grid-template-columns:repeat(5,minmax(0,1fr)); }
#collection-dialog .collection-card { position:relative; display:grid; place-items:center; height:63px; padding:3px; border:0; border-radius:46% 54% 48% 52%; background:none; box-shadow:none; color:#9b865f; }
#collection-dialog .collection-card::before,#collection-dialog .collection-card::after { display:none; }
#collection-dialog .collection-card[aria-pressed="true"] { background:radial-gradient(ellipse at 50% 65%,#77553280 0%,#94703f45 42%,transparent 73%); outline:0; }
#collection-dialog .collection-card:focus-visible { outline:0; background:radial-gradient(ellipse at 50% 65%,#624125b3 0%,#98734566 48%,transparent 76%); }
#collection-dialog .collection-art { width:100%; height:57px; }
#collection-dialog :is(.collection-art,.collection-portrait)>:is(img,.collection-placeholder) { grid-area:1 / 1; }
#collection-dialog .collection-art img { filter:drop-shadow(1px 2px 1px #5a482944); }
#collection-dialog .collection-card.unseen img,#collection-dialog .collection-portrait.unseen img { filter:brightness(0); opacity:.62; }
#collection-dialog .collection-placeholder { color:#9b865f; font:28px Georgia,serif; }
#collection-dialog .collection-boss { top:-2px; right:-1px; border:0; padding:0; background:none; color:#8b3e2d; font-size:11px; line-height:1.2; }
.collection-discovery { position:absolute; right:5px; bottom:0; color:#50603b; font:14px Georgia,serif; }
#collection-dialog .collection-elite-mark { position:absolute; left:3px; bottom:0; color:#a23f32; font:11px Georgia,serif; }
#collection-detail { flex:0 0 290px; border-top:1px solid #92764977; padding-top:9px; margin-top:5px; text-align:left; }
.collection-detail-heading { display:grid; grid-template-columns:68px minmax(0,1fr); gap:12px; align-items:center; height:66px; }
#collection-portrait { width:68px; height:66px; background:none; }
#collection-portrait img,#collection-portrait.is-relic img { width:100%; height:100%; }
#collection-category { margin:0 0 3px; font-size:13px; line-height:1.3; }
#collection-name { margin:0 0 3px; font-size:23px; line-height:1.2; font-weight:400; }
#collection-status { display:block; margin:0; padding:0; border:0; font-size:13px; line-height:1.3; color:#596143; }
#collection-dialog .collection-variants { gap:12px; margin:4px 0 6px; }
#collection-dialog .collection-variants button { min-height:32px; min-width:65px; padding:2px 7px; border:0; border-bottom:1px solid transparent; border-radius:0; background:none; box-shadow:none; color:#796344; font-size:15px; }
#collection-dialog .collection-variants small { font-size:13px; }
#collection-dialog .collection-variants [aria-pressed="true"] { color:#70452b; border-bottom-color:#8b5435; }
#collection-dialog #collection-elite[aria-pressed="true"] { color:#a23f32; border-bottom-color:#a23f32; }
#collection-dialog .collection-description { display:grid; grid-template-columns:29px minmax(0,1fr); gap:7px 9px; margin:8px 0 0; }
#collection-dialog .collection-description dt { margin:0; padding-top:2px; color:#805d38; font-size:13px; line-height:1.5; }
#collection-dialog .collection-description dd { margin:0; font-size:15px; line-height:1.5; color:#473e2d; overflow-wrap:anywhere; }
#collection-note { margin:9px 0 0; font-size:13px; line-height:1.4; color:#6c5c42; }
#collection-confirm.ui-action { align-self:center; flex-shrink:0; width:126px; min-height:40px; margin:5px 0 12px; padding:5px 18px 7px; border-radius:0; font-size:17px; }
#collection-confirm.ui-action:focus-visible { outline:0; }
@media(max-width:380px) { #collection-dialog { width:calc(100vw - 16px); padding-inline:17px; } #collection-detail { flex-basis:310px; } #collection-name { font-size:21px; } }
@media(max-height:650px) { #collection-dialog { height:96dvh; max-height:96dvh; padding-top:16px; padding-bottom:10px; } #collection-dialog .modal-head { padding-bottom:5px; margin-bottom:5px; } #collection-dialog .collection-tabs button { min-height:36px; padding-bottom:5px; } #collection-count { margin:4px 0; } #collection-detail { flex-basis:280px; padding-top:6px; } .collection-detail-heading { height:56px; grid-template-columns:58px minmax(0,1fr); gap:9px; } #collection-portrait { height:56px; width:58px; } #collection-dialog .collection-description { gap:5px 8px; margin-top:5px; } #collection-dialog .collection-description dd { line-height:1.45; } #collection-note { margin-top:6px; } }
.character-detail-list>section { padding:8px 0 12px; border-bottom:1px dashed #957f5655; }.character-detail-list h3 { display:flex; align-items:center; gap:8px; margin:5px 0; color:#714a29; }.character-detail-list h3>img { width:32px; height:32px; object-fit:contain; }.character-detail-list p { margin:8px 0 0; }
.character-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.character-stats-grid>p { border-bottom:1px solid #9981575e; padding:8px 0; }.character-stats-grid strong { display:block; font:24px Georgia,serif; color:#714a29; }
.ui-icon { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
@media(prefers-reduced-motion:reduce) { .art-screen *, .art-screen *::before,.art-screen *::after { transition:none; animation:none; } }