/* UI/Basic.img/ComboBox10: native 5×27 edges/fill, 30×27 state arrows.
   Keep sprite pixels unscaled; the surrounding hit area stays comfortably sized. */
.siteLanguageControl,.unionSnapshot .unionLevelPicker{
 --site-native-selectLeft:url("./site-media/combo-10-left.png");
 --site-native-selectFill:url("./site-media/combo-10-fill.png");
 --site-native-selectArrow:url("./site-media/combo-10-arrow.png");
 --site-native-selectHover:url("./site-media/combo-10-hover.png");
 --site-native-selectPressed:url("./site-media/combo-10-pressed.png");
 --site-native-selectDisabled:url("./site-media/combo-10-disabled.png");
}
/* Native Union pixels extend to website controls; the game board is untouched. */
:root{--text:#f1eee2;--muted:#b0bdc4;--accent:#f6d5af}
body{font-family:"MD모리스9",Arial,"Malgun Gothic",sans-serif;color:#e4e9e9}
body button,body input,body select,body summary{font-family:"MD모리스9",Arial,"Malgun Gothic",sans-serif}
h1,h2,h3,.brandWord strong,.footerBrand{color:#fff4d7;text-shadow:0 1px 2px #101820,0 0 8px #f6d5af24}
.hero h1{font-weight:700;letter-spacing:-.8px;line-height:1.35}
.hero h1 span{color:#f6d5af}
.hero p{color:#b8c6cd;line-height:1.85}
.eyebrow,.snapshotLabel,.progressEyebrow{color:#f6d5af;letter-spacing:1.2px}
.siteHeader{background-image:linear-gradient(#202e36f2,#17232bf5),var(--site-native-texture);border-bottom:1px solid #82939b45}
.brandMark{display:block;flex:none;width:39px;height:39px;background:var(--site-native-emblem) center/contain no-repeat}
.brandMark i{display:none}
.brandWord strong{font-size:15px;letter-spacing:1.1px}
.navLinks{gap:8px;font-size:12px}
.unionSnapshot,.areaQuickEditor,.progressReopen{
 border:5px solid transparent;border-image:var(--site-native-frame) 8 stretch;border-radius:0;
 background-image:linear-gradient(120deg,#35434bdc,#27333bde),var(--site-native-texture);
 background-clip:padding-box;box-shadow:0 12px 32px #0002;
}
.unionSnapshot{padding:15px 20px 18px}
.snapshotIdentity{display:flex;align-items:center;gap:14px;min-height:88px;margin:5px 0 8px}
#siteRankEmblem{width:80px;height:76px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 4px #0003)}
#siteRankArt{width:min(290px,calc(100% - 94px));height:83px;object-fit:cover;object-position:center 28%}
.snapshotStats{border-top:1px solid #7f939b45;padding-top:13px}
.snapshotStat strong{min-height:29px;display:flex;align-items:center}
.snapshotNote{font-size:11px;color:#aabac2;margin-top:14px}
.nativeDigits{display:inline-flex;align-items:flex-end;gap:0;white-space:nowrap;vertical-align:middle}
.nativeNumberValue{display:inline-flex;align-items:flex-end;gap:0}
.nativeDigits img{height:23px;width:auto;max-width:none;image-rendering:auto}
.nativeDigits img.nativeComma{height:7px;margin-inline:1px;margin-bottom:1px}
.nativeNumberSuffix{font-size:10px;color:#b9c8cf;font-weight:400;line-height:1.7;margin-left:4px}
.snapshotStat strong .nativeDigits{display:inline-flex;align-items:flex-end;gap:0}
.snapshotStat strong .nativeNumberSuffix{font-size:10px;display:inline;margin-left:4px;align-self:flex-end}
.plannerTitle h2{color:#f5e6c6}
.sectionSymbol{border:0;background:var(--site-native-emblem) center/31px 31px no-repeat;box-shadow:none;border-radius:0}
.sectionSymbol svg{visibility:hidden}.savedPill,.autoSaved{border-radius:3px;color:#e2e9c6;background:#53634a55;border-color:#b6b88933}
.siteFooter{border-top-color:#7f939b33;background:#17242b55}
.footerBrand{letter-spacing:1px;color:#e3d5b8}
.footerCopy{color:#99adb9}

/* Draw the original full-height caps and center once, at one scale. */
body .nativeAction{--action-height:32px;--action-padding:14px;--action-left:var(--site-native-gray-normal-left);--action-right:var(--site-native-gray-normal-right);--action-fill:var(--site-native-gray-normal-fill)}
body .nativeAction:not(.nativeIconAction){
 --action-cap:calc(var(--action-height) * 15 / 28);
 border:0!important;border-image:none!important;border-radius:0!important;box-shadow:none!important;
 background-color:transparent!important;background-image:var(--action-left),var(--action-right),var(--action-fill)!important;
 background-position:left center,right center,center!important;background-repeat:no-repeat!important;
 background-size:var(--action-cap) 100%,var(--action-cap) 100%,calc(100% - 2 * var(--action-cap) + 2px) 100%!important;
 background-clip:border-box!important;height:var(--action-height)!important;min-height:var(--action-height)!important;
 padding:0 var(--action-padding)!important;color:#f0eee7;text-shadow:0 1px 2px #0a1828;
 font-size:12px;line-height:1.5;transition:filter .12s,transform .12s;
 display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;
}
body .nativeAction[data-native-tone=gray]{--action-left:var(--site-native-gray-normal-left);--action-right:var(--site-native-gray-normal-right);--action-fill:var(--site-native-gray-normal-fill)}
body .nativeAction[data-native-tone=gray]:hover:not(:disabled){--action-left:var(--site-native-gray-mouseOver-left);--action-right:var(--site-native-gray-mouseOver-right);--action-fill:var(--site-native-gray-mouseOver-fill)}
body .nativeAction[data-native-tone=gray]:active:not(:disabled){--action-left:var(--site-native-gray-pressed-left);--action-right:var(--site-native-gray-pressed-right);--action-fill:var(--site-native-gray-pressed-fill)}
body .nativeAction[data-native-tone=gray]:disabled{--action-left:var(--site-native-gray-disabled-left);--action-right:var(--site-native-gray-disabled-right);--action-fill:var(--site-native-gray-disabled-fill)}
body .nativeAction[data-native-tone=blue]{--action-left:var(--site-native-blue-normal-left);--action-right:var(--site-native-blue-normal-right);--action-fill:var(--site-native-blue-normal-fill)}
body .nativeAction[data-native-tone=blue]:hover:not(:disabled){--action-left:var(--site-native-blue-mouseOver-left);--action-right:var(--site-native-blue-mouseOver-right);--action-fill:var(--site-native-blue-mouseOver-fill)}
body .nativeAction[data-native-tone=blue]:active:not(:disabled){--action-left:var(--site-native-blue-pressed-left);--action-right:var(--site-native-blue-pressed-right);--action-fill:var(--site-native-blue-pressed-fill)}
body .nativeAction[data-native-tone=blue]:disabled{--action-left:var(--site-native-blue-disabled-left);--action-right:var(--site-native-blue-disabled-right);--action-fill:var(--site-native-blue-disabled-fill)}
body .nativeAction[data-native-tone=green]{--action-left:var(--site-native-green-normal-left);--action-right:var(--site-native-green-normal-right);--action-fill:var(--site-native-green-normal-fill)}
body .nativeAction[data-native-tone=green]:hover:not(:disabled){--action-left:var(--site-native-green-mouseOver-left);--action-right:var(--site-native-green-mouseOver-right);--action-fill:var(--site-native-green-mouseOver-fill)}
body .nativeAction[data-native-tone=green]:active:not(:disabled){--action-left:var(--site-native-green-pressed-left);--action-right:var(--site-native-green-pressed-right);--action-fill:var(--site-native-green-pressed-fill)}
body .nativeAction[data-native-tone=green]:disabled{--action-left:var(--site-native-green-disabled-left);--action-right:var(--site-native-green-disabled-right);--action-fill:var(--site-native-green-disabled-fill)}
body .nativeAction[data-native-tone=blue]{color:#f4fbff}
body .nativeAction[data-native-tone=green]{color:#ffffed}
body .nativeAction:active:not(:disabled){transform:translateY(1px)}
body .nativeAction:disabled{opacity:.55;color:#9aa3a8}
body .nativeAction .icon{width:15px;height:15px;flex:none}
body .heroStart.nativeAction{--action-height:40px;--action-padding:22px;font-size:14px}
body #settings #run.nativeAction{--action-height:42px;--action-padding:16px;font-size:13px;font-weight:600}
body #settings .settingsFooter>.nativeAction{--action-height:30px;--action-padding:12px;font-size:10px}
body #settings #export.nativeAction,body #settings #showBoostRecommendation.nativeAction{--action-height:30px;--action-padding:12px;font-size:10px;color:#f1fbff;text-align:center}
body #settings .settingsFooter #showBoostRecommendation{display:flex}
body #settings .fileTools .nativeAction{font-size:10px;--action-padding:10px}
body #settings #addPriority.nativeAction{font-size:10px;--action-padding:13px;--action-height:36px}
body .nativeAction:focus-visible,body .textLink:focus-visible{outline:2px solid #f6d5af;outline-offset:3px}
body .navLinks .nativeAction{--action-height:28px;--action-padding:15px;font-size:11px}
body .textLink{border:0;background:none;padding:0;display:inline-flex;align-items:center;gap:7px;color:#eadcc3;font-size:12px;text-decoration:none}
.textLink .icon{display:none}
.textLink:before{content:'';width:32px;height:24px;background:var(--site-native-help-normal) center/32px 24px no-repeat}
.textLink:hover:before{background-image:var(--site-native-help-mouseOver)}
body .nativeIconAction.nativeIconAction,body #settings .nativeIconAction.nativeIconAction{
 position:relative;border:0;background:none;box-shadow:none;padding:0;width:36px;min-height:32px;
 font-size:0;color:transparent;flex:none;
}
.nativeIconAction>svg,.nativeIconAction>span{display:none}
.nativeIconAction:before{content:'';position:absolute;inset:0;background:var(--site-native-close-normal) center/12px 12px no-repeat}
.nativeIconAction:hover:not(:disabled):before{background-image:var(--site-native-close-mouseOver)}
.nativeIconAction:active:not(:disabled):before{background-image:var(--site-native-close-pressed)}
body .nativeIconAction[data-native-icon=undo]{width:48px}
.nativeIconAction[data-native-icon=undo]:before{background:var(--site-native-undo-normal) center/46px 28px no-repeat}
.nativeIconAction[data-native-icon=undo]:hover:not(:disabled):before{background-image:var(--site-native-undo-mouseOver)}
.nativeIconAction[data-native-icon=undo]:active:not(:disabled):before{background-image:var(--site-native-undo-pressed)}
.nativeIconAction[data-native-icon=undo]:disabled:before{background-image:var(--site-native-undo-disabled)}
#areaSwapRedo:before{transform:scaleX(-1)}
#settings .priorityRowHeader button[data-native-icon]{font-size:0;position:relative}
#settings .priorityRowHeader button[data-native-icon]:before{content:'';position:absolute;inset:0;background:var(--priority-icon) center/12px 12px no-repeat}
#settings .priorityRowHeader button[data-native-icon=up]{--priority-icon:var(--site-native-up-normal)}
#settings .priorityRowHeader button[data-native-icon=down]{--priority-icon:var(--site-native-down-normal)}
#settings .priorityRowHeader button[data-native-icon=close]{--priority-icon:var(--site-native-close-normal)}
#settings .priorityRowHeader button[data-native-icon=up]:hover:not(:disabled){--priority-icon:var(--site-native-up-mouseOver)}
#settings .priorityRowHeader button[data-native-icon=down]:hover:not(:disabled){--priority-icon:var(--site-native-down-mouseOver)}
#settings .priorityRowHeader button[data-native-icon=close]:hover:not(:disabled){--priority-icon:var(--site-native-close-mouseOver)}
#settings .priorityRowHeader button[data-native-icon=up]:active:not(:disabled){--priority-icon:var(--site-native-up-pressed)}
#settings .priorityRowHeader button[data-native-icon=down]:active:not(:disabled){--priority-icon:var(--site-native-down-pressed)}

.areaQuickEditor{padding:13px 16px}
.areaQuickEyebrow{color:#ecd5a8}
.areaQuickEditor select{appearance:none;color:#efe4cc;border:0;border-radius:0;min-height:36px;padding:6px 32px 6px 10px;background-color:#20282e;background-image:var(--site-native-selectLeft),var(--site-native-selectArrow),var(--site-native-selectFill);background-position:left center,right center,5px center;background-repeat:no-repeat,no-repeat,repeat-x;background-size:5px 100%,24px 100%,5px 100%}
.areaQuickEditor select:hover:not(:disabled){background-image:var(--site-native-selectLeft),var(--site-native-selectHover),var(--site-native-selectFill)}
.areaQuickEditor select:disabled{background-image:var(--site-native-selectLeft),var(--site-native-selectDisabled),var(--site-native-selectFill)}
@media(max-width:760px){
 .brandMark{width:30px;height:30px}.brandWord strong{font-size:12px}
 .unionSnapshot{padding:12px 15px}.snapshotIdentity{gap:8px;min-height:77px}
 #siteRankEmblem{width:57px;height:61px}#siteRankArt{width:calc(100% - 65px);max-width:245px;height:75px}
 .snapshotNote{font-size:10px}.snapshotStats{gap:8px}
 body .nativeAction.nativeAction,body #settings .nativeAction.nativeAction{--action-height:40px;--action-padding:15px;font-size:11px}
 body #settings .settingsFooter>.nativeAction{--action-height:36px;--action-padding:12px;font-size:10px}
 body #settings #run.nativeAction{--action-height:44px}
 .boardToolbarActions{gap:5px}.boardToolbarActions .nativeAction{font-size:9px!important;--action-height:34px;--action-padding:12px}
 .areaQuickEditor{padding:12px}.areaQuickActions{gap:5px}.areaQuickEditor select{min-height:44px}
 body .nativeIconAction.nativeIconAction{min-height:36px}
}
@media(prefers-reduced-motion:reduce){body .nativeAction{transition:none!important}}

/* Level selection belongs to the identity card; there is only one control. */
.hero{align-items:center}
.unionSnapshot .unionLevelControl{width:100%;max-width:none;margin:0 0 13px;padding:12px 0 13px;border:0;border-top:1px solid #82969d40;border-bottom:1px solid #82969d40;border-radius:0;background:none;scroll-margin-top:92px}
.unionSnapshot .unionLevelHeading{margin-bottom:9px;gap:12px}
.unionSnapshot .unionLevelHeading label{font-size:12px!important}
.unionSnapshot .unionLevelHeading>span{font-size:10px;color:#aabac4}
.unionSnapshot .unionLevelPicker{gap:8px}
.unionSnapshot .unionLevelPicker select{--rank-select-height:35px;--rank-select-edge:5px;appearance:none;border:0;border-radius:0;height:var(--rank-select-height);min-height:var(--rank-select-height);color:#f0e5cc;font-size:13px;font-weight:600;text-align:center;text-align-last:center;padding:6px calc(var(--rank-select-height) + 8px);background-color:transparent;background-image:var(--site-native-selectLeft),var(--site-native-selectArrow),var(--site-native-selectFill);background-position:left center,right center,5px center;background-repeat:no-repeat,no-repeat,repeat-x;background-size:5px 27px,30px 27px,5px 27px}
.unionSnapshot .unionLevelPicker select:hover:not(:disabled){background-image:var(--site-native-selectLeft),var(--site-native-selectHover),var(--site-native-selectFill)}
.unionSnapshot .unionLevelPicker select:active:not(:disabled){background-image:var(--site-native-selectLeft),var(--site-native-selectPressed),var(--site-native-selectFill)}
.unionSnapshot .unionLevelPicker select:disabled{background-image:var(--site-native-selectLeft),var(--site-native-selectDisabled),var(--site-native-selectFill);opacity:.6}
.unionSnapshot .unionLevelPicker option{background:#262f36;color:#f0e5cc;text-align:center}
.unionSnapshot .unionLevelPicker button{--action-height:36px;--action-padding:0;width:44px;font-size:18px}
.unionSnapshot .snapshotStats{border-top:0;padding-top:0}
.snapshotStat>span{color:#b7c8d0;font-size:11px}
@media(max-width:760px){
 .unionSnapshot .unionLevelHeading{align-items:flex-start;flex-direction:column;gap:4px}
 .unionSnapshot .unionLevelHeading>span{font-size:9px}
 .unionSnapshot .unionLevelPicker{gap:5px}
 .unionSnapshot .unionLevelPicker select{--rank-select-height:45px;font-size:10px;padding:6px 44px}
 .unionSnapshot .unionLevelPicker button{--action-height:44px;width:40px}
 .snapshotStat>span{font-size:9px}.snapshotStat strong .nativeNumberSuffix{font-size:9px;margin-left:3px}
 body #settings #export.nativeAction,body #settings #showBoostRecommendation.nativeAction{--action-height:36px}
}

@media(max-width:380px){
 .unionSnapshot .unionLevelPicker{display:grid;grid-template-columns:1fr 1fr;gap:7px}
 .unionSnapshot .unionLevelPicker select{grid-column:1/-1;grid-row:1;width:100%;font-size:11px}
 .unionSnapshot .unionLevelPicker button{width:100%;font-size:16px}
 #rankStepDown{grid-column:1;grid-row:2}#rankStepUp{grid-column:2;grid-row:2}
 #rankStepDown:after{content:'이전 구간';font-size:10px;margin-left:3px}#rankStepUp:before{content:'다음 구간';font-size:10px;margin-right:3px}
}