/* Decision and practice components. The map and battle remain the main scene. */
.mode-campaign #floating:has(.campaign-view){top:auto;bottom:8px;left:8px;right:auto;justify-content:flex-start}.mode-campaign #floating .campaign-view{display:block;pointer-events:auto;min-height:44px;height:44px;padding:5px 10px;font-size:14px;background:#203734e8;color:#f1e5ce;border:1px solid #c2b18a80}
.campaign-wallet{padding:3px 6px;min-height:44px;background:transparent;border:0;color:inherit;display:flex;align-items:center;gap:4px}.campaign-wallet:hover{background:#ffffff08}
.campaign-decision{max-width:1240px;margin:auto;padding:14px 24px;display:grid;grid-template-columns:240px minmax(220px,1fr) auto;gap:12px 24px;align-items:center}
.war-objective{display:flex;align-items:center;gap:9px;color:#ecd19b;font-size:15px;line-height:22px;grid-column:1/-1}
.war-objective img{object-fit:contain;width:30px;height:30px}
.commanding-army h2{font-family:Gowun,serif;font-size:23px;line-height:1.4;margin:0 0 8px}
.commanding-army h2 small{display:block;font:12px/18px var(--ui-font);color:#afbdb3;margin-top:3px}
.commanding-army .troops{gap:12px;font-size:14px}
.destination-tabs{display:flex;gap:6px;flex-wrap:wrap}
.destination-tabs button{flex:1;min-width:68px;min-height:46px;padding:5px 9px;background:#ffffff05;border:1px solid #849b8b55;color:#dedbca;border-radius:6px;display:flex;flex-direction:column;gap:2px;align-items:center}
.destination-tabs button span{font-size:12px;line-height:14px;color:#a6b4a8;font-weight:400}
.destination-tabs button strong{font-size:14px;line-height:20px;white-space:nowrap}
.destination-tabs button[aria-pressed=true]{background:#d8c39b;color:#233b3b;border-color:#ddc99f}
.destination-tabs button[aria-pressed=true] span{color:#4b5e52}
.campaign-preview{grid-column:2;grid-row:2/5;display:grid;grid-template-columns:160px minmax(180px,1fr);gap:10px 16px;align-items:center}
.destination-scene{height:96px;position:relative;overflow:hidden;border-radius:6px;background:#71806a;grid-row:1/4}
.destination-scene canvas{width:100%;height:100%;display:block}
.destination-scene>span,.destination-scene>b{position:absolute;bottom:5px;padding:2px 5px;background:#182c2ade;color:#f5e8cb;font-size:12px;line-height:16px;border-radius:3px;font-weight:400;white-space:nowrap}
.destination-scene>span{left:5px}.destination-scene>b{right:5px;top:5px;bottom:auto}
.destination-copy h3{font-size:16px;line-height:23px;margin:0 0 5px;color:#f5ead5}.destination-copy h3 span{padding:0 4px;color:#c6a978}
.destination-copy p{margin:0;font-size:13px;line-height:20px;word-break:keep-all}.destination-reason{color:#e1c995}.destination-outcome{color:#c0ccc1}
.destination-commit{min-height:46px;padding:9px 16px;font-size:15px}.destination-cost{font-size:12px;color:#b6c1b7;line-height:17px}
.campaign-decision>.campaign-actions{grid-column:3;grid-row:2/4;display:flex;flex-wrap:wrap;gap:8px;max-width:220px}
.campaign-decision>.campaign-actions button{min-height:44px;min-width:0;font-size:14px;flex:1 1 0;padding:8px;background:#ffffff06;color:#e6decb;border:1px solid #8d9c8844}.campaign-decision>.campaign-actions button.primary{background:var(--ui-gold);color:#203737}
.campaign-decision>.campaign-actions:has(.reinforcement-price){flex-direction:column;align-items:stretch}.campaign-decision .reinforcement-price{white-space:normal;display:grid;gap:3px;font-size:14px}.campaign-decision .reinforcement-price small{font-size:12px}.campaign-decision>.campaign-actions:has(.reinforcement-price) button{flex:auto;width:100%;min-width:44px}
.decision-supply{grid-column:3;display:flex;gap:8px;align-items:center}.decision-supply>[data-action=supply-focus]{display:grid;grid-template-columns:auto auto;gap:0 9px;background:transparent;border:0;color:#c0cec0;text-align:left;padding:0;min-height:44px;font-size:14px}.decision-supply small{grid-column:1/-1;font-size:12px;color:#b6c1b0}.decision-supply strong{color:#ebcd91}.decision-supply .quiet{min-width:44px;color:#b7c7bd;padding:8px}
.campaign-empty{grid-column:2;grid-row:2/5;display:grid;grid-template-columns:64px 1fr;gap:3px 14px;align-items:center}.campaign-empty img{grid-row:1/3}.campaign-empty strong{font-size:16px}.campaign-empty p{margin:0;font-size:13px;color:#bbc5b7}
#training-metrics{display:flex;align-items:center;gap:10px;color:#ecce91;font-size:13px;line-height:18px;font-variant-numeric:tabular-nums}
#training-metrics meter{width:80px;height:10px;accent-color:#d0b379}
#training-actions{display:flex;gap:6px;align-items:center}
#training-actions button{min-height:44px;font-size:14px;padding:8px 12px}
#training-actions .quiet{color:#e1d7bd;border:1px solid #a0ad8f55}
#training-guide{grid-template-rows:auto auto auto;height:auto;min-height:54px}
#training-metrics{grid-column:1;grid-row:3}
#training-actions{grid-column:1/-1;grid-row:4}
#training-guide:has(#training-actions:not([hidden])) .training-heading button{display:none}
#training-guide:has(#training-actions:not([hidden])){grid-template-columns:1fr auto;grid-template-rows:auto auto}
#training-guide:has(#training-actions:not([hidden])) #training-metrics{grid-column:1;grid-row:2}
#training-guide:has(#training-actions:not([hidden])) #training-detail{display:none}
#training-guide:has(#training-actions:not([hidden])) #training-actions{grid-column:2;grid-row:1/3}
@media(min-height:541px) and (min-width:701px){
 .mode-battle #training-guide{top:60px;left:24px;right:24px;display:grid;grid-template-columns:1fr auto;grid-template-rows:24px 22px;padding:10px 14px;border-radius:7px;background:#203536f5;width:510px}
 .mode-battle #training-guide .training-heading button{grid-column:2}
 .mode-battle #training-detail{display:none}.mode-battle #training-metrics{grid-row:2}
}
@media(max-height:540px) and (orientation:landscape){
 #game.mode-campaign{grid-template-columns:minmax(0,1fr) 272px}
 .campaign-decision{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:7px 14px;width:100%;margin:0;min-height:100%}
 .war-objective{font-size:14px;line-height:20px;gap:8px}.war-objective img{width:24px;height:24px}
 .commanding-army{display:flex;align-items:center;justify-content:space-between;gap:8px}.commanding-army h2{font-size:19px;margin:0}.commanding-army h2 small{display:none}.commanding-army .troops{gap:6px}.commanding-army .troop{font-size:13px;gap:2px}.commanding-army .troop svg{width:17px;height:21px}
 .destination-tabs{flex-wrap:nowrap;gap:5px}.destination-tabs button{min-width:0;padding:4px 6px}
 .campaign-preview{display:grid;grid-template-columns:78px minmax(0,1fr);gap:7px 10px}
 .destination-scene{height:64px;grid-column:1;grid-row:1}.destination-scene>span{bottom:3px;left:3px;font-size:12px;padding:1px 3px}.destination-scene>b{display:block;font-size:12px;right:3px;top:3px;padding:1px 3px}
 .destination-copy h3{display:none}.destination-copy p{font-size:12px;line-height:18px}
 .destination-commit{grid-column:1/-1;min-height:44px;font-size:14px;padding:8px}.destination-cost{display:none}
 .campaign-decision>.campaign-actions{display:flex;flex-wrap:nowrap;max-width:none;gap:5px}.campaign-decision>.campaign-actions button{padding:7px 5px;white-space:nowrap}
 .decision-supply{margin-top:auto;justify-content:space-between;border-top:1px solid #a0ad8f25;padding-top:3px}.decision-supply small{display:none}.decision-supply>[data-action=supply-focus]{display:flex;gap:8px}.decision-supply .quiet{min-height:44px;padding:6px}
 .campaign-empty{display:grid;margin:auto 0;padding:12px 0}
 .mode-battle #training-guide{min-height:0;height:calc(var(--battle-dock) - 8px);bottom:calc(4px + env(safe-area-inset-bottom));top:auto;grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:20px 17px 20px;align-content:center;padding:0 4px}
 .mode-battle #training-detail{font-size:12px;line-height:17px}.mode-battle #training-metrics{font-size:12px;line-height:18px;gap:7px}
 .mode-battle #training-guide:has(#training-actions:not([hidden])){display:grid;grid-template-columns:1fr;grid-template-rows:20px 44px;gap:3px}
 .mode-battle #training-guide:has(#training-actions:not([hidden])) #training-instruction{grid-row:1;grid-column:1;font-size:14px;align-self:center}
 .mode-battle #training-guide:has(#training-actions:not([hidden])) #training-metrics{display:none}
 .mode-battle #training-guide:has(#training-actions:not([hidden])) #training-actions{grid-row:2;grid-column:1}
 #training-actions button{flex:1;white-space:nowrap;padding:6px 8px}
}
@media(max-height:350px) and (orientation:landscape){
 #game.mode-campaign{grid-template-columns:minmax(0,1fr) 232px}
 .campaign-decision{padding:7px 10px;gap:6px}.war-objective{font-size:13px}.war-objective img{width:20px;height:20px}.commanding-army h2{font-size:17px}.commanding-army .troops{gap:3px}.commanding-army .troop svg{width:13px}
 .campaign-preview{grid-template-columns:54px minmax(0,1fr);gap:5px 8px}.destination-scene{height:60px}.destination-scene>span{display:none}.campaign-preview[data-kind=move] .destination-scene>b{display:none}.destination-copy h3{font-size:14px;line-height:19px}.destination-copy p{font-size:12px;line-height:16px}.destination-copy h3 span{padding:0 2px}
 .decision-supply{display:none}.destination-tabs button{padding:3px 4px}.destination-tabs button strong{font-size:14px}
 .mode-battle #training-guide{grid-template-rows:18px 16px 18px}.mode-battle #training-metrics{font-size:12px;line-height:16px}
}
@media(max-width:700px) and (orientation:portrait){
 .campaign-decision{display:grid;grid-template-columns:1fr;gap:10px;padding:12px 18px;max-width:none}
 .war-objective,.campaign-preview,.campaign-empty,.campaign-decision>.campaign-actions,.decision-supply{grid-column:1;grid-row:auto}
 .commanding-army{display:flex;justify-content:space-between;align-items:center}.commanding-army h2{margin:0;font-size:20px}.commanding-army h2 small{display:none}
 .campaign-preview{grid-template-columns:86px minmax(0,1fr);gap:8px 12px}.destination-scene{height:78px;grid-row:1}.destination-copy h3{font-size:15px}.destination-commit{grid-column:1/-1}.destination-cost{display:none}
 .campaign-decision>.campaign-actions{max-width:none;flex-wrap:nowrap}.decision-supply{display:none}.mode-campaign #hud{max-height:52vh;max-height:52dvh;overflow:auto}
 .destination-tabs{flex-wrap:nowrap}.destination-tabs button{min-width:0}
}

/* 지도 행동 버튼의 글자가 두 줄로 쪼개지지 않게 한다. */
.campaign-decision>.campaign-actions button{white-space:nowrap;flex:1 1 auto}
@media (min-width:900px){.campaign-decision>.campaign-actions{max-width:270px}}

/* 패배 뒤 한 가지 요령만 짧게 보여 준다. */
.battle-lesson{display:grid;gap:3px;margin:10px 0 0;padding:9px 12px;border-left:3px solid #c39a4e;background:#c39a4e1f;border-radius:4px;font-size:14px;line-height:1.5;color:inherit}
.battle-lesson b{font-size:12px;letter-spacing:.04em;color:#8a6a2c}
@media(max-height:540px) and (orientation:landscape){.encounter-result .battle-lesson{grid-column:1/-1;margin:0;font-size:12px;padding:6px 10px}}
.levy-note{border-color:#c39a4e!important;background:#c39a4e26!important}
/* 의병 안내나 전투 요령이 더해져도 결과 창이 한 화면에 들어오게 줄인다. */
.encounter-result:has(.levy-note,.battle-lesson) .result-stats{margin:14px 0}
.encounter-result:has(.levy-note,.battle-lesson) .result-stats>div{padding:10px 6px}
.encounter-result:has(.levy-note,.battle-lesson) .survivor-ledger>div{grid-template-columns:auto auto;grid-template-areas:"i s" "b e";padding:8px 6px;gap:2px 8px;align-items:center}
.encounter-result:has(.levy-note,.battle-lesson) .survivor-ledger svg{grid-area:i;width:24px;height:24px}
.encounter-result:has(.levy-note,.battle-lesson) .survivor-ledger span{grid-area:s}
.encounter-result:has(.levy-note,.battle-lesson) .survivor-ledger b{grid-area:b;font-size:20px}
.encounter-result:has(.levy-note,.battle-lesson) .survivor-ledger em{grid-area:e}
.encounter-result .levy-note{margin-top:10px}
@media(max-height:540px) and (orientation:landscape){.encounter-result:has(.levy-note,.battle-lesson) .survivor-ledger{display:none}.encounter-result .levy-note{grid-column:1;margin:0}.encounter-result:has(.levy-note) .result-stats{grid-row:2/4}}
@media(max-height:340px) and (orientation:landscape){.encounter-result:has(.levy-note) .encounter-consequence:not(.levy-note){display:none}.encounter-result .battle-lesson b{display:none}.encounter-result .levy-note span{display:none}}
/* 공격 전 병력 비교와 전면전 경고 */
.destination-scene>b.odds{font-weight:700}.odds-good{background:#2f6b4ccc!important;color:#eaf7ee!important}.odds-even{background:#8a6a2ccc!important;color:#fff4dc!important}.odds-bad{background:#9a3b2ecc!important;color:#ffece6!important}
.destination-risk{display:block;font-size:12px;line-height:17px;color:#f0a58f;font-weight:700}
@media(max-height:540px) and (orientation:landscape),(max-width:700px) and (orientation:portrait){.odds-mine{display:none}}
/* 351~380px 높이 가로 화면: 보급 줄을 남긴 채 패널 전체가 한 화면에 들어오게 줄인다. */
@media(min-height:351px) and (max-height:380px) and (orientation:landscape){
 .campaign-decision{gap:6px}.war-objective{font-size:13px}.war-objective img{width:22px;height:22px}.commanding-army h2{font-size:18px}
 .campaign-preview{grid-template-columns:64px minmax(0,1fr);gap:5px 8px}.destination-scene{height:62px}.destination-scene>span{display:none}
 .destination-copy p{font-size:12px;line-height:16px}.destination-commit{min-height:42px;padding:6px 12px}
 .destination-tabs button{padding:3px 4px;min-height:44px}.decision-supply small{display:none}
}
/* 전술 도전: PC 화면에서 여섯 임무가 스크롤 없이 한 번에 보이게 카드를 줄인다. */
@media(min-height:700px) and (min-width:900px){
 .mission-dialog .skirmish-choice{min-height:0;gap:6px;padding:14px 16px}
 .mission-dialog .mission-preview{height:66px;width:calc(100% + 32px);margin:-14px -16px 2px}
 .mission-dialog .skirmish-choice>strong{font-size:16px;line-height:1.35}
 .mission-dialog .skirmish-choice>span.mission-description{line-height:1.5}
 .mission-dialog .dialog-actions{margin-top:12px;padding-top:10px}
}
/* 지도 확대·전체 보기 전환은 지도 위가 아니라 목표 줄 오른쪽에 둔다. */
.war-objective{display:flex;align-items:center;gap:8px}
.war-objective .map-toggle{margin-left:auto;flex:none;min-height:36px;height:36px;padding:0 10px;border-radius:8px;font-size:12px;font-weight:700;white-space:nowrap}
/* 휴대폰 가로: 오른쪽 패널이 스크롤 없이 한 화면에 들어오게 한다. 행동 비용 줄은
   목적지 설명과 겹치는 정보라 숨기고, 전면전 경고는 남긴다. */
@media(max-height:440px) and (orientation:landscape){
 .campaign-decision{gap:5px}
 .destination-cost{display:none}
 .destination-tabs button{min-height:40px;padding-block:2px}
 .campaign-preview .destination-scene{height:56px}
 .decision-supply>[data-action=supply-focus]{min-height:34px;padding:2px 8px!important}.decision-supply small{display:none}
 .decision-supply>[data-action=war-log]{min-height:34px}
 .war-objective{min-height:0}.war-objective .map-toggle{height:34px;min-height:34px}
}
@media(max-height:380px) and (orientation:landscape){
 .commanding-army h2{font-size:16px;line-height:20px}
 .campaign-preview .destination-scene{height:50px}
 .destination-commit{min-height:40px}
 .campaign-actions button{min-height:40px!important}
}
/* 낮은 가로 화면: 조작 설정 대화상자가 스크롤 없이 계속 버튼까지 보이게 한다. */
@media(max-height:400px) and (orientation:landscape){
 .dialog:has(.pad-options){padding-top:14px;padding-bottom:14px}
 .dialog:has(.pad-options) h2{font-size:20px;line-height:1.3}
 .pad-options{gap:8px 12px;margin:10px 0 0}
 .pad-options .segment button{min-height:40px;padding:4px 8px}
 .pad-options p{padding-top:6px;line-height:1.5}
 .dialog:has(.pad-options) .dialog-actions{margin-top:10px;padding-top:10px}
}
/* 낮은 가로 화면: 일시정지 설정도 스크롤 없이 한 화면에 들어오게 줄인다. */
@media(max-height:400px) and (orientation:landscape){
 .dialog.game-settings{padding-top:14px;padding-bottom:14px}
 .dialog.game-settings h2{font-size:20px;line-height:1.3}
 #game .dialog.game-settings .settings-grid{gap:6px 16px;margin-top:10px}
 #game .dialog.game-settings .setting-row{min-height:42px}
 .dialog.game-settings .settings-note{margin-top:8px;line-height:1.4}
 .dialog.game-settings .dialog-actions{margin-top:10px;padding-top:10px}
}
@media(max-height:350px) and (orientation:landscape){
 .dialog.game-settings .settings-note{display:none}
}
/* 휴대폰: 목적지가 넷 이상이면 줄을 늘리지 않고 옆으로 밀어 넘긴다.
   잘려 보이는 마지막 버튼이 더 있다는 표시가 된다. */
@media(max-height:540px) and (orientation:landscape),(max-width:700px) and (orientation:portrait){
 .destination-tabs:has(>:nth-child(4)){overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-snap-type:x proximity}
 .destination-tabs:has(>:nth-child(4))::-webkit-scrollbar{display:none}
 .destination-tabs:has(>:nth-child(4)) button{flex:0 0 auto;min-width:72px;scroll-snap-align:start}
}