/* Presentation v2. Semantic colors stay independent of national identity. */
html[data-ui=v2][data-theme=dark],html[data-ui=v2]{--paper:#0b0c10;--panel:#15171c;--soft:#1d2027;--line:#343843;--ink:#f2eee6;--muted:#bdbcc4;--gold:#e0bd7a;--gold-ink:#e0bd7a;--green:#7fc79a;--red:#ef8a7f;--good:#7fc79a;--caution:#e6b955;--risk:#ef8a7f;--info:#8fb4e8;--serif:'Noto Serif KR',serif;color-scheme:dark}
html[data-ui=v2][data-theme=light]{--paper:#f6f2e9;--panel:#fffcf5;--soft:#eee8dc;--line:#b7afa2;--ink:#1f2a24;--muted:#4e534f;--gold:#9a7330;--gold-ink:#856123;--green:#276842;--red:#a53329;--good:#276842;--caution:#775508;--risk:#a53329;--info:#345d91;color-scheme:light}
html[data-ui=v2] body{background:var(--paper);color:var(--ink);font:17px/1.6 'Noto Sans KR',sans-serif}
html[data-ui=v2] #app,html[data-ui=v2] button,html[data-ui=v2] input{font-family:'Noto Sans KR',sans-serif;font-variant-numeric:tabular-nums}
html[data-ui=v2] #app *{box-sizing:border-box;box-shadow:none!important}
html[data-ui=v2] #app :is(p,li,dd,dt,button,input,label){font-size:17px;line-height:1.6}
html[data-ui=v2] #app :is(small,.tiny,.eyebrow,.tag,.brand-sub,.stat-label,.stat-bottom,.event-note,.effect-list,.effect-list span,.footer,.atlas-footer,.ui-atlas-link,.project-bottom,.city-caption,.city-caption span,.phase-line,.country-chip,.research-summary,.research-summary small,.route-step,.choice-num,.map-disclaimer,.save,.mobile-save,.trait-empty,.advisor-mini>span,.tech-node h4 span,.nation-caption,.era,.era strong){font-size:14px!important;line-height:1.6;letter-spacing:0;color:var(--muted)}
html[data-ui=v2] #app :is(h1,h2,h3,h4){font-family:var(--serif);line-height:1.35;color:var(--ink);letter-spacing:-.02em}
html[data-ui=v2] #app h1{font-size:30px}html[data-ui=v2] #app h2{font-size:24px}html[data-ui=v2] #app h3{font-size:20px}html[data-ui=v2] #app h4{font-size:20px}
html[data-ui=v2] #app :is(.panel,.event-card,.project,.tech-node,.policy-card,.tactic-card,.terrain-card,.faction-card,.province-card,.combo-card,.bill-card,.career,.ach,.country-dossier,.atlas-map-panel,.modal,.foreign){background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;color:var(--ink)}
html[data-ui=v2] #app :is(.quote,.goal-box,.choice,.research-intro,.research-summary,.realm-warning,.enemy-intent,.scenario-goal,.campaign-cost,.tag,.compare-box,.intent-box,.route-box,.pact-box,.stage-box,.pledge-card,.pledge-option,.guide-box,.guide-step,.war-panel,.dynasty-actions,.route-step,.bill-forecast,.province-map){background:var(--soft);color:var(--ink);border-color:var(--line);border-radius:12px}
html[data-ui=v2] #app :is(.outline-btn,.rest-btn,.help-link,.text-button,.region-tabs button,.era-option,.country-chip,.research-filters button){background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:8px}
html[data-ui=v2] #app button{min-height:48px;white-space:normal;overflow-wrap:anywhere;cursor:pointer;padding:10px 14px}
html[data-ui=v2] #app button:disabled{cursor:not-allowed;opacity:.65}
html[data-ui=v2] #app :is(button,a,input,summary):focus-visible{outline:2px solid var(--gold);outline-offset:4px}
html[data-ui=v2] #app .primary{background:var(--gold-ink);color:var(--paper);border:1px solid var(--gold)}
html[data-ui=v2] #app :is(.selected,.active){border-color:var(--gold)}
html[data-ui=v2] #app :is(.negative,.warn){color:var(--risk)}
html[data-ui=v2] #app :is(.effect-list,.project-effect,.ambition.met){color:var(--good)}
html[data-ui=v2] #app :is(.event-story,.tech-node p,.project p,.policy-card p,.tactic-card p,.leader-profile p,.quote,.accounting,.relation){color:var(--muted);font-size:15px;line-height:1.6}
html[data-ui=v2] #app :is(.stat-num,.faction-card strong,.realm-strip strong){font-size:28px;color:var(--ink)}
html[data-ui=v2] #app :is(.stat-bar,.skill-track,.relation-bar){background:var(--line)}
html[data-ui=v2] #app :is(.stat-bar span,.skill-track i){background:var(--info)}
html[data-ui=v2] #app .ui-icon{color:currentColor;width:24px;height:24px}
html[data-ui=v2] #app :is(.event-story,.event-note,.project p,.policy-card p){max-width:38em}
html[data-ui=v2] #app :is(.project-grid,.people-grid,.policy-grid,.tactic-grid,.research-tree,.faction-grid){gap:16px}
html[data-ui=v2] #app img{max-width:100%;object-fit:cover}
html[data-ui=v2] #toast{font-size:16px;background:var(--panel);color:var(--ink);border:1px solid var(--gold)}
@media(max-width:767px){html[data-ui=v2] #app :is(p,li,dd,dt,button,input,label){font-size:16px}html[data-ui=v2] #app :is(.panel,.event-card,.project,.tech-node,.policy-card,.tactic-card,.terrain-card,.country-dossier,.atlas-map-panel,.modal){padding:16px}html[data-ui=v2] #app h1{font-size:24px}html[data-ui=v2] #app h2{font-size:20px}html[data-ui=v2] #app :is(.event-story,.tech-node p,.project p,.policy-card p,.tactic-card p){font-size:16px}}
@media(prefers-reduced-motion:reduce){html[data-ui=v2] *,html[data-ui=v2] *::before,html[data-ui=v2] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* 02 · Atlas and nation dossier */
html[data-ui=v2] #app .atlas-shell{max-width:1520px;padding:0 32px 32px}
html[data-ui=v2] #app .atlas-header{min-height:72px;gap:16px;flex-wrap:wrap;padding:16px 0}
html[data-ui=v2] #app .atlas-header>span{font-size:20px;color:var(--ink)}
html[data-ui=v2] #app .atlas-heading{gap:24px;margin:40px 0 28px;align-items:center}
html[data-ui=v2] #app .atlas-heading h1{font-size:38px;margin:8px 0}
html[data-ui=v2] #app .atlas-heading>p{color:var(--muted);font-size:17px}
html[data-ui=v2] #app .era-picker{gap:12px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:24px;flex-wrap:wrap}
html[data-ui=v2] #app .era-option{padding:14px 20px;flex:1;min-width:170px;text-align:left}
html[data-ui=v2] #app .era-option strong{font-size:24px;color:var(--ink)}
html[data-ui=v2] #app .era-option span{font-size:15px;color:var(--muted)}
html[data-ui=v2] #app .era-option.selected{background:var(--soft);border:2px solid var(--gold)}
html[data-ui=v2] #app :is(.atlas-step,.era-note,.atlas-map-heading>span,.country-search label,.dossier-note,.dossier-goal small,.pledge-picker>small){font-size:14px;color:var(--muted)}
html[data-ui=v2] #app .atlas-layout{grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start}
html[data-ui=v2] #app .atlas-map-panel{padding:0;overflow:hidden}
html[data-ui=v2] #app .atlas-map-heading{padding:20px;gap:12px;flex-wrap:wrap}
html[data-ui=v2] #app .region-tabs{width:100%;display:flex;flex-wrap:wrap;gap:8px}
html[data-ui=v2] #app .region-tabs button{font-size:14px;padding:8px 12px}
html[data-ui=v2] #app .region-tabs .selected{color:var(--gold-ink);background:var(--soft);border:2px solid var(--gold)}
html[data-ui=v2] #app .map-frame{background:var(--paper);border-block:1px solid var(--line)}
html[data-ui=v2] #app .map-sea{fill:var(--paper)}
html[data-ui=v2] #app .map-land{fill:var(--soft);stroke:var(--line)}
html[data-ui=v2] #app .map-country path{filter:saturate(1.12) brightness(1.12);fill-opacity:.4}
html[data-ui=v2] #app .map-country.selected path{stroke:var(--gold);stroke-width:3;fill-opacity:.8}
html[data-ui=v2] #app .map-country text{font-size:21px;fill:var(--ink);stroke:var(--paper);stroke-width:4px}
html[data-ui=v2] #app .map-country .map-leader{font-size:14px}
html[data-ui=v2] #app :is(.map-muted,.sea-label,.map-date){fill:var(--muted);font-size:14px}
html[data-ui=v2] #app .map-tools{gap:6px;right:12px;bottom:12px}
html[data-ui=v2] #app .map-tools button{min-width:48px;min-height:48px;background:var(--panel);color:var(--ink);border-color:var(--line)}
html[data-ui=v2] #app .country-search{padding:20px;border-color:var(--line)}
html[data-ui=v2] #app .country-search input{background:var(--paper);border:1px solid var(--line);color:var(--ink);min-height:48px;border-radius:8px;width:100%;margin:10px 0 16px}
html[data-ui=v2] #app .country-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:none}
html[data-ui=v2] #app .country-chip{display:flex;align-items:center;flex-wrap:wrap;min-width:0;text-align:left;padding:12px}
html[data-ui=v2] #app .country-chip small{display:block;width:100%;padding-left:32px;color:var(--muted)}
html[data-ui=v2] #app .country-chip.selected{background:var(--soft);border:2px solid var(--gold);color:var(--ink)}
html[data-ui=v2] #app .country-dossier{border-top:3px solid var(--nation);position:relative;padding:24px}
html[data-ui=v2] #app .country-dossier>h2{font-size:30px;max-width:calc(100% - 100px);margin:16px 0}
html[data-ui=v2] #app .dossier-portrait.ui-portrait{top:64px;right:24px;width:96px;height:120px;border-radius:8px}
html[data-ui=v2] #app .country-dossier>h3{margin-top:24px}
html[data-ui=v2] #app .country-dossier dl{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;margin:24px 0}
html[data-ui=v2] #app .country-dossier dd{margin:0;color:var(--ink)}
html[data-ui=v2] #app .dossier-stats{gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-ui=v2] #app .dossier-stats>span{font-size:14px;color:var(--muted)}
html[data-ui=v2] #app .dossier-stats strong{font-size:28px;color:var(--ink)}
html[data-ui=v2] #app .pledge-picker{display:grid;gap:12px;margin:24px 0}
html[data-ui=v2] #app .pledge-option{text-align:left;padding:16px;border:1px solid var(--line)}
html[data-ui=v2] #app .pledge-option strong{font-size:18px;color:var(--ink);flex-wrap:wrap}
html[data-ui=v2] #app .pledge-option span{font-size:15px;color:var(--muted)}
html[data-ui=v2] #app .pledge-option.selected{border:2px solid var(--gold)}
html[data-ui=v2] #app .pledge-option em{font-size:14px;color:var(--gold-ink);font-style:normal}
html[data-ui=v2] #app .nation-caption{color:var(--muted)!important}
@media(max-width:1199px){html[data-ui=v2] #app .atlas-layout{grid-template-columns:minmax(0,1fr) 350px}html[data-ui=v2] #app .atlas-shell{padding-inline:24px}html[data-ui=v2] #app .country-options{grid-template-columns:1fr}}
@media(max-width:767px){html[data-ui=v2] #app .atlas-shell{padding:0 16px 24px}html[data-ui=v2] #app .atlas-heading{display:block;margin:24px 0}html[data-ui=v2] #app .atlas-heading h1{font-size:30px}html[data-ui=v2] #app .atlas-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}html[data-ui=v2] #app .atlas-header small{display:none}html[data-ui=v2] #app .atlas-header{gap:8px}html[data-ui=v2] #app .atlas-header>span{font-size:18px}html[data-ui=v2] #app .era-picker{display:grid;grid-template-columns:1fr;padding:16px}html[data-ui=v2] #app .era-option{width:100%;min-width:0;display:flex;gap:20px;align-items:center}html[data-ui=v2] #app .era-option span{font-size:15px}html[data-ui=v2] #app .country-options{grid-template-columns:1fr}html[data-ui=v2] #app .country-dossier{padding:16px}html[data-ui=v2] #app .dossier-portrait.ui-portrait{right:16px}html[data-ui=v2] #app .atlas-footer{display:grid;gap:16px}html[data-ui=v2] #app .atlas-footer a{overflow-wrap:anywhere}html[data-ui=v2] #app .atlas-map-heading{padding:16px}html[data-ui=v2] #app .country-map{min-height:300px}}
/* 03 · Fixed status bar, leader context, and navigation */
html[data-ui=v2] #app .v2-type-floor{font-size:14px!important}
html[data-ui=v2] #app .shell{display:grid;grid-template-columns:320px minmax(0,920px);gap:24px;max-width:1304px;margin:0 auto;padding:88px 20px 24px;align-items:start}
html[data-ui=v2] #app .main{min-width:0;padding:0;max-width:920px;width:100%}
html[data-ui=v2] #app .topbar{position:fixed;inset:0 0 auto;z-index:15;height:64px;padding:8px 24px;margin:0;display:flex;gap:24px;align-items:center;background:var(--panel);border-bottom:1px solid var(--line)}
html[data-ui=v2] #app .v2-brand{font:20px var(--serif);color:var(--ink);text-decoration:none;white-space:nowrap}
html[data-ui=v2] #app .v2-date{font-size:15px;color:var(--muted);white-space:nowrap}
html[data-ui=v2] #app .v2-status{display:flex;gap:24px;border:0;background:transparent;color:var(--ink);padding:0;min-height:48px;align-items:center}
html[data-ui=v2] #app .v2-status span{display:flex;gap:8px;align-items:center}
html[data-ui=v2] #app .v2-status small{font-size:14px;color:var(--muted)}
html[data-ui=v2] #app .v2-status b{font-size:20px}
html[data-ui=v2] #app .top-meta{display:flex;gap:8px;margin-left:auto;max-width:none;flex-wrap:nowrap}
html[data-ui=v2] #app .top-meta>span{display:none}
html[data-ui=v2] #app .top-meta button{font-size:14px;padding:8px 10px;min-height:44px}
html[data-ui=v2] #app .v2-context{min-width:0;display:block}
html[data-ui=v2] #app .v2-context>summary{cursor:pointer;min-height:48px;font-size:16px;padding:12px 16px;border:1px solid var(--line);border-radius:8px;margin-bottom:16px;color:var(--muted)}
html[data-ui=v2] #app .v2-context>.panel{margin-bottom:16px}
html[data-ui=v2] #app .v2-identity .country{padding:0 0 16px;margin:0 0 16px;display:grid;grid-template-columns:52px 1fr;gap:4px 12px;text-align:left;align-items:center}
html[data-ui=v2] #app .v2-identity .crest{grid-row:span 2;width:48px;height:56px;margin:0;display:grid;place-items:center}
html[data-ui=v2] #app .v2-identity .crest .nation-emblem{width:40px;height:40px}
html[data-ui=v2] #app .v2-identity strong{font:24px var(--serif)}
html[data-ui=v2] #app .v2-identity p{font-size:14px;color:var(--muted);margin:0}
html[data-ui=v2] #app .v2-context .panel-head{padding:0 0 16px;flex-wrap:wrap;gap:8px}
html[data-ui=v2] #app .v2-context h2{font-size:20px}
html[data-ui=v2] #app .v2-context .leader-body{padding:16px 0}
html[data-ui=v2] #app .leader-profile{flex-wrap:nowrap;gap:16px;align-items:center}
html[data-ui=v2] #app .leader-name{font-size:24px}
html[data-ui=v2] #app .ui-portrait.portrait{width:88px;height:110px;border-radius:8px;border-bottom:2px solid var(--nation)}
html[data-ui=v2] #app .leader-profile>div{min-width:0}
html[data-ui=v2] #app .skill-row{font-size:15px}
html[data-ui=v2] #app .skill-row span:first-child{width:40px}
html[data-ui=v2] #app .v2-dynasty{font-size:15px;margin:12px 0 0}
html[data-ui=v2] #app .v2-context .quote{padding:16px;font-size:15px}
html[data-ui=v2] #app .v2-context .stats{display:grid;grid-template-columns:1fr;gap:12px;margin:16px 0}
html[data-ui=v2] #app .v2-context .stat{display:grid;grid-template-columns:1fr auto;gap:8px;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
html[data-ui=v2] #app .stat-num{margin:0;grid-column:2;grid-row:1/3;font-size:28px}
html[data-ui=v2] #app .stat-bar{grid-column:1/-1;height:5px}
html[data-ui=v2] #app .stat-bottom{font-size:14px;grid-column:1}
html[data-ui=v2] #app .advisor-list{padding:0}
html[data-ui=v2] #app .advisor-mini{flex-wrap:wrap;gap:12px;border-color:var(--line)}
html[data-ui=v2] #app .advisor-mini .ui-portrait{width:48px;height:60px}
html[data-ui=v2] #app .advisor-mini strong{font-size:16px}
html[data-ui=v2] #app .advisor-mini>div{flex:1;min-width:130px}
html[data-ui=v2] #app .advisor-mini>span{margin-left:60px}
html[data-ui=v2] #app .v2-page-title{margin:0 0 20px}
html[data-ui=v2] #app .v2-page-title h1{margin:6px 0}
html[data-ui=v2] #app .v2-tabs{display:flex;width:100%;gap:4px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;margin:0 0 24px;overflow:visible}
html[data-ui=v2] #app .v2-tabs button{display:flex;flex:1;flex-direction:column;gap:6px;align-items:center;justify-content:center;min-width:70px;padding:10px 8px;color:var(--muted);font-size:14px;border:1px solid transparent;background:transparent;border-radius:8px}
html[data-ui=v2] #app .v2-tabs button.active{color:var(--gold-ink);background:var(--soft);border-color:var(--gold)}
html[data-ui=v2] #app .v2-tabs .ui-icon{width:24px!important;height:24px!important}
html[data-ui=v2] #app .content-grid{display:block}
html[data-ui=v2] #app .content-grid>div{min-width:0}
html[data-ui=v2] #app .realm-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;background:var(--panel);border:1px solid var(--line);padding:12px;border-radius:12px;margin-bottom:24px}
html[data-ui=v2] #app .realm-strip>p{grid-column:1/-1}
html[data-ui=v2] #app .realm-strip button{min-width:0;padding:10px;flex-wrap:wrap;border-color:var(--line);color:var(--ink)}
html[data-ui=v2] #app .realm-strip button>span{font-size:14px}
@media(min-width:1200px){html[data-ui=v2] #app .v2-context>summary{display:none}}
@media(max-width:1199px){html[data-ui=v2] #app .shell{grid-template-columns:minmax(0,1fr);max-width:960px;padding:88px 24px 24px;gap:16px}html[data-ui=v2] #app .v2-context[open]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}html[data-ui=v2] #app .v2-context>summary,html[data-ui=v2] #app .v2-identity{grid-column:1/-1}html[data-ui=v2] #app .v2-context .stats{margin:0}html[data-ui=v2] #app .v2-brand{display:none}html[data-ui=v2] #app .topbar{gap:16px}html[data-ui=v2] #app .v2-status{gap:16px}}
@media(max-width:767px){html[data-ui=v2] #app .shell{display:block;padding:80px 16px 88px}html[data-ui=v2] #app .topbar{height:64px;padding:8px 16px;gap:8px;flex-wrap:wrap;justify-content:center}html[data-ui=v2] #app .topbar .v2-date,html[data-ui=v2] #app .topbar .top-meta{display:none}html[data-ui=v2] #app .topbar.expanded{height:auto;min-height:64px}html[data-ui=v2] #app .topbar.expanded .v2-date{display:block}html[data-ui=v2] #app .topbar.expanded .top-meta{display:flex;margin:0;flex-wrap:wrap}html[data-ui=v2] #app .v2-status{width:100%;justify-content:space-between;gap:8px}html[data-ui=v2] #app .v2-status span{gap:6px}html[data-ui=v2] #app .v2-status b{font-size:20px}html[data-ui=v2] #app .v2-context{margin-bottom:20px}html[data-ui=v2] #app .v2-context[open]{display:block}html[data-ui=v2] #app .v2-context .stats{margin-bottom:16px}html[data-ui=v2] #app .v2-tabs{position:fixed;inset:auto 0 0;height:64px;z-index:20;margin:0;border-radius:0;padding:4px;flex-wrap:nowrap;gap:0;justify-content:space-around;border-inline:0;border-bottom:0}html[data-ui=v2] #app .v2-tabs button{min-width:48px;min-height:48px;padding:3px 0;gap:2px;font-size:13px}html[data-ui=v2] #app .v2-tabs .ui-icon{width:20px!important;height:20px!important}html[data-ui=v2] #app .realm-strip{grid-template-columns:repeat(2,minmax(0,1fr));padding:8px}html[data-ui=v2] #app .section-heading{flex-wrap:wrap;gap:8px}html[data-ui=v2] #app .section-heading h2{flex-wrap:wrap}html[data-ui=v2] #toast{bottom:80px}}
/* 04 · Decisions, research, government, and court content */
html[data-ui=v2] #app .realm-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
html[data-ui=v2] #app .project{min-height:220px;padding:20px}
html[data-ui=v2] #app .project h3{font-size:20px}
html[data-ui=v2] #app .project-bottom{gap:12px;flex-wrap:wrap}
html[data-ui=v2] #app .project-price{color:var(--gold-ink);font-size:17px}
html[data-ui=v2] #app .project-icon{background:var(--soft);border-color:var(--line);border-radius:8px;width:44px;height:44px;color:var(--ink)}
html[data-ui=v2] #app .research-tree{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
html[data-ui=v2] #app .branch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
html[data-ui=v2] #app .branch>h3,html[data-ui=v2] #app .branch>.route-map{grid-column:1/-1}
html[data-ui=v2] #app .branch>h3{font-size:24px;color:var(--ink);border-color:var(--line);margin:16px 0 0}
html[data-ui=v2] #app .tech-node{min-width:0;margin:0;display:flex;flex-direction:column;gap:12px}
html[data-ui=v2] #app .tech-node h4{font-size:20px;display:flex;gap:12px;flex-wrap:wrap;margin:0}
html[data-ui=v2] #app .tech-node p{margin:0}
html[data-ui=v2] #app .tech-node button{margin-top:auto;width:100%}
html[data-ui=v2] #app .tech-node.complete{border-color:var(--good);background:var(--panel)!important}
html[data-ui=v2] #app .tech-node.running{border-color:var(--info);box-shadow:none!important}
html[data-ui=v2] #app .tech-node.locked{opacity:1}
html[data-ui=v2] #app .tech-node .research-glyph{color:var(--ink);border-color:var(--line);border-radius:8px;width:32px;height:32px}
html[data-ui=v2] #app .research-filters{display:flex;gap:8px;flex-wrap:wrap}
html[data-ui=v2] #app .research-filters button{font-size:15px}
html[data-ui=v2] #app .research-summary{padding:16px;gap:12px;flex-wrap:wrap}
html[data-ui=v2] #app .route-map{display:flex;flex-wrap:wrap;gap:8px}
html[data-ui=v2] #app .route-step{min-width:100px;flex:1;padding:12px}
html[data-ui=v2] #app .policy-card strong,html[data-ui=v2] #app .tactic-card strong{font-size:18px}
html[data-ui=v2] #app :is(.policy-card,.tactic-card){text-align:left}
html[data-ui=v2] #app :is(.policy-card.selected,.terrain-card.selected){border:2px solid var(--gold);background:var(--soft);color:var(--ink)}
html[data-ui=v2] #app .faction-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-ui=v2] #app .faction-card>span{font-size:15px;color:var(--muted)}
html[data-ui=v2] #app .faction-card p{font-size:15px;color:var(--muted)}
html[data-ui=v2] #app .province-map{width:100%;padding:16px}
html[data-ui=v2] #app .province-map text{font-size:15px!important;fill:var(--ink)}
html[data-ui=v2] #app .gov-track{background:var(--line)}
html[data-ui=v2] #app .gov-track i{background:var(--info)}
html[data-ui=v2] #app .person-card .ui-portrait{width:96px;height:120px}
html[data-ui=v2] #app .person-card strong{font:20px var(--serif)}
html[data-ui=v2] #app .person-card .effect-list{margin:20px 0}
html[data-ui=v2] #app .foreign{margin-bottom:16px}
html[data-ui=v2] #app .foreign h3{font-size:24px}
html[data-ui=v2] #app .foreign-top{gap:12px;flex-wrap:wrap}
html[data-ui=v2] #app .relation{gap:16px;flex-wrap:wrap}
html[data-ui=v2] #app .relation-bar{min-width:80px;background:var(--line)}
html[data-ui=v2] #app .relation-bar i{background:var(--info)}
html[data-ui=v2] #app .scene{border:1px solid var(--line);border-radius:12px;overflow:hidden}
html[data-ui=v2] #app .city-caption{background:var(--panel);border-color:var(--line);color:var(--ink);gap:16px;flex-wrap:wrap}
html[data-ui=v2] #app .city-head span{background:var(--panel)!important;color:var(--ink)!important;border-color:var(--line)!important;font-size:14px}
html[data-ui=v2] #app .ui-city{min-height:200px}
html[data-ui=v2] #app .guide-box{padding:16px;margin-bottom:24px;border-color:var(--line)}
html[data-ui=v2] #app .guide-step{padding:16px}
html[data-ui=v2] #app .guide-step strong{font-size:16px}
html[data-ui=v2] #app .guide-step p{font-size:15px}
html[data-ui=v2] #app .effect-list span{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid var(--line);background:var(--soft);border-radius:6px}
html[data-ui=v2] #app .effect-list .negative{color:var(--risk)}
html[data-ui=v2] #app .effect-list .ui-icon{width:16px;height:16px}
@media(max-width:767px){html[data-ui=v2] #app .realm-strip{grid-template-columns:repeat(2,minmax(0,1fr))}html[data-ui=v2] #app :is(.project-grid,.people-grid,.branch,.policy-grid,.combo-grid,.province-grid,.tactic-grid){grid-template-columns:minmax(0,1fr)}html[data-ui=v2] #app .project{min-height:0;padding:16px}html[data-ui=v2] #app .guide-steps{grid-template-columns:1fr}html[data-ui=v2] #app .person-card .ui-portrait{width:80px;height:100px}html[data-ui=v2] #app .province-map text{font-size:24px!important}html[data-ui=v2] #app .city-caption span{max-width:100%}}
/* 05 · Focused event decisions */
html[data-ui=v2] #app .v2-decision{width:min(800px,calc(100vw - 48px));max-height:calc(100dvh - 64px);margin:auto;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);overflow:auto;overscroll-behavior:contain}
html[data-ui=v2] #app .v2-decision::backdrop{background:#000b}
html[data-ui=v2] #app .v2-decision-close{display:block;margin:16px 20px 0 auto;font-size:14px}
html[data-ui=v2] #app .v2-decision .event-card{border:0;padding:24px}
html[data-ui=v2] #app .event-card h3{font-size:30px;margin:16px 0;line-height:1.35}
html[data-ui=v2] #app .event-label{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px}
html[data-ui=v2] #app .event-story{font-size:17px;line-height:1.6;margin-bottom:24px;max-width:38em}
html[data-ui=v2] #app .choices{display:grid;gap:16px}
html[data-ui=v2] #app .choice{padding:20px;gap:12px;border:1px solid var(--line);border-radius:12px;grid-template-columns:24px minmax(0,1fr);background:var(--soft);color:var(--ink)}
html[data-ui=v2] #app .choice:hover:not(:disabled){border-color:var(--gold);background:var(--soft);color:var(--ink)}
html[data-ui=v2] #app .choice strong{font-size:18px;line-height:1.35;gap:12px}
html[data-ui=v2] #app .choice p{font-size:15px;line-height:1.6;color:var(--muted)}
html[data-ui=v2] #app .chance-line{display:block;color:var(--info)}
html[data-ui=v2] #app .chance-line.risky{color:var(--caution)}
html[data-ui=v2] #app progress{display:block;appearance:none;width:100%;height:6px;border:0;border-radius:4px;margin-top:10px;background:var(--line);accent-color:var(--info)}
html[data-ui=v2] #app progress::-webkit-progress-bar{background:var(--line);border-radius:4px}
html[data-ui=v2] #app progress::-webkit-progress-value{background:var(--info);border-radius:4px}
html[data-ui=v2] #app .choice:disabled{opacity:1;color:var(--muted)}
html[data-ui=v2] #app .choice:disabled strong{color:var(--muted)}
@media(max-width:767px){html[data-ui=v2] #app .v2-decision{width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}html[data-ui=v2] #app .v2-decision .event-card{padding:16px}html[data-ui=v2] #app .event-card h3{font-size:24px}html[data-ui=v2] #app .choice{padding:16px;grid-template-columns:20px minmax(0,1fr);gap:8px}html[data-ui=v2] #app .event-story{font-size:16px}html[data-ui=v2] #app .v2-decision-close{margin:12px 16px 0 auto}}
/* 06 · Battle decisions and force readouts */
html[data-ui=v2] #app .battle-panel{padding:24px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
html[data-ui=v2] #app .battle-heading{margin-bottom:20px}
html[data-ui=v2] #app .battle-heading h2{font-size:30px}
html[data-ui=v2] #app .battle-heading p{color:var(--muted)}
html[data-ui=v2] #app .battle-scene{border:1px solid var(--line);border-radius:12px;filter:none;width:100%;height:auto}
html[data-ui=v2] #app .battle-forces{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0}
html[data-ui=v2] #app .battle-forces article{padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
html[data-ui=v2] #app .battle-forces h3{font-size:20px;margin:0 0 12px}
html[data-ui=v2] #app .battle-forces strong{font-size:28px;color:var(--ink)}
html[data-ui=v2] #app .battle-forces p{font-size:15px;color:var(--muted)}
html[data-ui=v2] #app .gov-track.enemy i{background:var(--risk)}
html[data-ui=v2] #app .enemy-intent{padding:20px;border:1px solid var(--info);margin:20px 0}
html[data-ui=v2] #app .enemy-intent>span{display:block;font-size:14px;color:var(--info);margin-bottom:8px}
html[data-ui=v2] #app .enemy-intent strong{font-size:18px}
html[data-ui=v2] #app .tactic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
html[data-ui=v2] #app .tactic-card{padding:20px;color:var(--ink)}
html[data-ui=v2] #app .tactic-card small,html[data-ui=v2] #app .tactic-card>span{display:block;font-size:14px;line-height:1.6;color:var(--muted);margin-top:8px}
html[data-ui=v2] #app .tactic-card .odds{color:var(--info)}
html[data-ui=v2] #app .tactic-card.withdraw{border-color:var(--line)}
html[data-ui=v2] #app .combat-log{border-top:1px solid var(--line);margin-top:24px;padding-top:16px}
html[data-ui=v2] #app .combat-log p{font-size:15px;line-height:1.6;border-bottom:1px solid var(--line);padding-bottom:16px;color:var(--muted)}
html[data-ui=v2] #app .combat-log strong{display:block;color:var(--ink);font-size:16px}
html[data-ui=v2] #app .army-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
html[data-ui=v2] #app .army-overview>div{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--panel)}
html[data-ui=v2] #app .army-overview strong{font-size:28px;color:var(--ink)}
html[data-ui=v2] #app .terrain-card strong{font-size:18px;color:var(--ink)}
html[data-ui=v2] #app .terrain-card span{font-size:15px;color:var(--muted)}
html[data-ui=v2] #app .v2-decision .event-card:focus{outline:none}
@media(max-width:767px){html[data-ui=v2] #app .battle-panel{padding:16px}html[data-ui=v2] #app .battle-heading h2{font-size:24px}html[data-ui=v2] #app .battle-forces{gap:8px}html[data-ui=v2] #app .battle-forces article{padding:12px}html[data-ui=v2] #app .battle-forces h3{font-size:18px}html[data-ui=v2] #app .battle-forces strong{font-size:24px}html[data-ui=v2] #app .tactic-grid{grid-template-columns:1fr}html[data-ui=v2] #app .army-overview{grid-template-columns:1fr}html[data-ui=v2] #app .terrain-grid{grid-template-columns:1fr}}
/* Manifest-backed painted assets retain an SVG fallback. */
html[data-ui=v2] #app img.painted{image-rendering:auto;object-fit:cover}
html[data-ui=v2] #app .ui-portrait.painted{background:var(--panel)!important}
html[data-ui=v2] #app .ui-city.painted{aspect-ratio:16/9;max-height:400px;object-position:center}
html[data-ui=v2] #app .nation-emblem.painted{object-fit:contain;filter:saturate(1.12) brightness(1.12)}
html[data-ui=v2] #app .v2-event-art{margin:20px 0;aspect-ratio:3/2;max-height:260px;overflow:hidden;border-radius:8px;border:1px solid var(--line)}
html[data-ui=v2] #app .v2-event-art img{display:block;width:100%;height:100%}
html[data-ui=v2] #app .v2-battle-art{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
html[data-ui=v2] #app .v2-battle-art>img{width:100%;height:100%;display:block;filter:brightness(.65)}
html[data-ui=v2] #app .v2-battle-art>.battle-scene{position:absolute;inset:0;aspect-ratio:auto;width:100%;height:100%;border:0;background:none}
html[data-ui=v2] #app .v2-battle-art>.battle-scene>rect:first-child,html[data-ui=v2] #app .v2-battle-art>.battle-scene>path{display:none}
/* 07 · Annual accounting, with explicit before/after values */
html[data-ui=v2] #app .v2-decision .report{border:0;padding:24px;text-align:left}
html[data-ui=v2] #app .report h3{font-size:30px;line-height:1.35}
html[data-ui=v2] #app .report p{font-size:17px;line-height:1.6;color:var(--muted)}
html[data-ui=v2] #app .report .report-seal{background:var(--soft);border-color:var(--line);color:var(--good);margin:0 0 16px}
html[data-ui=v2] #app .v2-report-table{width:100%;border-collapse:collapse;margin:24px 0;text-align:left;font-size:17px}
html[data-ui=v2] #app .v2-report-table caption{text-align:left;color:var(--muted);font-size:15px;margin-bottom:12px}
html[data-ui=v2] #app .v2-report-table :is(th,td){padding:12px 8px;border-bottom:1px solid var(--line);font-size:17px;font-weight:400}
html[data-ui=v2] #app .v2-report-table thead th{font-size:14px;color:var(--muted)}
html[data-ui=v2] #app .v2-report-table td:last-child{text-align:right}
html[data-ui=v2] #app .v2-report-table .positive{color:var(--good)}
html[data-ui=v2] #app .report .effect-list{justify-content:flex-start;margin:16px 0;gap:8px}
html[data-ui=v2] #app .accounting{padding:16px 0;gap:12px;flex-wrap:wrap;border-color:var(--line);color:var(--muted);font-size:15px}
html[data-ui=v2] #app .luck{padding:16px;background:var(--soft);border:1px solid var(--line);border-radius:8px;font-size:16px}
html[data-ui=v2] #app .luck.success{color:var(--good)}
html[data-ui=v2] #app .luck.failure{color:var(--risk)}
html[data-ui=v2] #app .new-trait{background:var(--soft);border-color:var(--gold);color:var(--gold-ink);font-size:16px;border-radius:8px}
html[data-ui=v2] #app .effect-list .negative .ui-icon{transform:rotate(90deg)}
html[data-ui=v2] #app .v2-decision .report:focus{outline:none}
@media(max-width:767px){html[data-ui=v2] #app .v2-decision .report{padding:16px}html[data-ui=v2] #app .report h3{font-size:24px}html[data-ui=v2] #app .report p{font-size:16px}html[data-ui=v2] #app .v2-report-table :is(th,td){font-size:16px;padding:12px 4px}}
/* 08 · Legacy and chronicle */
html[data-ui=v2] #app .ending{padding:32px;max-width:920px}
html[data-ui=v2] #app .ending .crest{margin:0 auto 20px;width:72px;height:80px;display:grid;place-items:center;border-radius:12px}
html[data-ui=v2] #app .ending h2{font-size:38px;margin:20px 0}
html[data-ui=v2] #app .ending h3{font-size:24px;color:var(--ink)}
html[data-ui=v2] #app .ending-text{font-size:17px;line-height:1.6;color:var(--muted);max-width:38em;margin-inline:auto}
html[data-ui=v2] #app .ending-score{width:140px;height:140px;border:2px solid var(--gold);font-size:38px;color:var(--gold-ink);gap:8px}
html[data-ui=v2] #app .ending-score small{font-size:14px;color:var(--muted)}
html[data-ui=v2] #app .compare-box{padding:24px;border-color:var(--line);margin:24px 0}
html[data-ui=v2] #app .ending-table :is(td,th){font-size:17px;line-height:1.6;padding:14px 8px;border-color:var(--line)}
html[data-ui=v2] #app .ending-table th{font-size:14px;color:var(--muted)}
html[data-ui=v2] #app .timeline{padding:0 20px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
html[data-ui=v2] #app .timeline-item{grid-template-columns:64px minmax(0,1fr);gap:16px;padding:20px 0;border-color:var(--line)}
html[data-ui=v2] #app .timeline-year{font-size:20px;color:var(--gold-ink)}
html[data-ui=v2] #app .timeline-kind{font-size:14px;color:var(--muted);margin-bottom:8px}
html[data-ui=v2] #app .timeline-item strong{font-size:17px;line-height:1.6}
html[data-ui=v2] #app .history-compare{font-size:16px;line-height:1.6}
html[data-ui=v2] #app .history-compare p{font-size:16px;color:var(--muted)}
html[data-ui=v2] #app .ach{border:1px solid var(--line);border-radius:12px;padding:16px}
html[data-ui=v2] #app .ach strong{font-size:17px;color:var(--ink)}
html[data-ui=v2] #app .ach small{font-size:14px;color:var(--muted)}
html[data-ui=v2] #app .ending-actions{gap:12px}
html[data-ui=v2] #app .overlay{background:#000b;z-index:30;padding:24px;align-items:flex-start}
html[data-ui=v2] #app .modal{margin:auto;max-height:calc(100dvh - 48px);overflow:auto;padding:32px}
html[data-ui=v2] #app .modal .close{min-width:48px;min-height:48px;position:sticky;display:block;margin-left:auto;top:0;right:auto;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:8px}
html[data-ui=v2] #app .modal .help-list{font-size:17px;color:var(--muted)}
html[data-ui=v2] #app .career-options{gap:16px;grid-template-columns:1fr}
html[data-ui=v2] #app .career strong{font-size:20px}
html[data-ui=v2] #app .career p{font-size:16px;min-height:0}
html[data-ui=v2] #app .career.selected{background:var(--soft);border:2px solid var(--gold)}
@media(max-width:767px){html[data-ui=v2] #app .ending{padding:16px}html[data-ui=v2] #app .ending h2{font-size:30px}html[data-ui=v2] #app .ending-text{font-size:16px}html[data-ui=v2] #app .ending-table :is(td,th){font-size:14px;padding:12px 4px}html[data-ui=v2] #app .timeline{padding:0 16px}html[data-ui=v2] #app .timeline-item{grid-template-columns:44px minmax(0,1fr);gap:12px}html[data-ui=v2] #app .timeline-year{font-size:18px}html[data-ui=v2] #app .overlay{padding:12px}html[data-ui=v2] #app .modal{padding:16px;max-height:calc(100dvh - 24px)}html[data-ui=v2] #app .compare-box{padding:16px}}
html[data-ui=v2] #app .goal-box p{color:var(--muted)}
html[data-ui=v2] #app .goal-box strong{color:var(--ink)}
html[data-ui=v2] #app .country-chip.selected::after{content:'✓ 선택';font-size:14px;color:var(--ink);margin-left:auto}
html[data-ui=v2] #app .policy-card.selected::after,html[data-ui=v2] #app .terrain-card.selected::after{content:'✓ 선택됨';display:block;font-size:14px;margin-top:8px;color:var(--ink)}
html[data-ui=v2] #app .map-label-line{stroke:var(--muted);stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
@media(max-width:767px){html[data-ui=v2] #app :is(.map-country .map-leader,.map-muted,.sea-label,.map-date){display:none}}

html[data-ui=v2] #app :is(a,.stage-steps .done,.pledge-option em,.ach em){color:var(--gold-ink)}