/* 자리배치 프로그램 — '설정 탭 → 무대'. 성별 색은 옛 판(연한 청·분홍 + 남/여 글자) 값을 라이트에 그대로, 다크는 같은 색상을 어둡게 */
.sag{container:sag / inline-size;--sag-m:#e7eef4;--sag-m-ink:#3d5a73;--sag-f:#f6e7e3;--sag-f-ink:#8a4a3f;--sag-ease:cubic-bezier(.2,.8,.2,1)}
html[data-theme="dark"] .sag{--sag-m:#1d2a36;--sag-m-ink:#a8c4dc;--sag-f:#35211d;--sag-f-ink:#e6b3a6}
@media (prefers-color-scheme: dark){html:not([data-theme="light"]) .sag{--sag-m:#1d2a36;--sag-m-ink:#a8c4dc;--sag-f:#35211d;--sag-f-ink:#e6b3a6}}
.sag [hidden]{display:none!important}
.sag-help{margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.sag-help:empty{display:none}
.sag-help:lang(ko),.sag-count:lang(ko),.sag-status:lang(ko),.sag-checks:lang(ko){word-break:keep-all}
.sag-warn,.sag-help.sag-warn{color:var(--accent)}
.sag-btns{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sag-btns .v2-btn{white-space:nowrap}
.sag-file{position:relative;cursor:pointer}
.sag-file input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sag-file:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.sag-left{text-align:left!important}
.sag-mono{font-family:var(--mono)!important;letter-spacing:.04em}
.sag-select{display:block;width:100%;height:var(--v2-ctl);padding:0 30px 0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a08f70' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center;font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink);appearance:none;-webkit-appearance:none;text-overflow:ellipsis}
.sag-select:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.sag-ta{display:block;width:100%;box-sizing:border-box;margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--ink);resize:vertical}
.sag-ta:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.sag-ta::placeholder{color:var(--ink);opacity:.35}

/* 설정: 탭 4개 */
.sag-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line);background:var(--wash)}
.sag-tabs [role="tab"]{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:46px;padding:0 8px;border:0;border-right:1px solid var(--soft);background:none;font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--muted);cursor:pointer;transition:background var(--ease),color var(--ease)}
.sag-tabs [role="tab"]:last-child{border-right:0}
.sag-tabs [role="tab"]:hover{color:var(--ink);background:var(--btn)}
.sag-tabs [role="tab"] b{display:grid;place-items:center;flex:none;width:20px;height:20px;border:1px solid currentColor;border-radius:50%;font-family:var(--mono);font-size:11px}
.sag-tabs [role="tab"] span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sag-tabs [role="tab"] small{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted)}
.sag-tabs [role="tab"] small:empty{display:none}
.sag-tabs [role="tab"][aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.sag-tabs [role="tab"][aria-selected="true"] b{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.sag-tabs [role="tab"]:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
@container sag (max-width:699px){ .sag-tabs [role="tab"]{flex-direction:column;gap:2px;min-height:54px;font-size:12.5px} .sag-tabs [role="tab"] small{font-size:10px} }

.sag-pane{display:grid;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);animation:sagPane .22s var(--sag-ease)}
@keyframes sagPane{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.sag-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.sag-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;align-items:end}
.sag-grid3{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 14px;align-items:end}
@container sag (min-width:620px){
  .sag-pane--names,.sag-pane--save{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px}
  .sag-grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sag-grid3.sag-selgrid{grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr) minmax(0,1fr)}
}
/* 명단 */
.sag-lhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sag-lhead .v2-label{margin:0}
.sag-count{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.sag-count.is-warn{color:var(--accent)}
.sag-names{flex:1 1 auto;min-height:200px;height:220px}
@container sag (min-width:620px){ .sag-names{height:100%;min-height:236px;resize:none} }
.sag-side{justify-content:flex-start}
.sag-roster{display:grid;gap:8px;min-width:0;margin:0;padding:10px 12px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:color-mix(in srgb, var(--wash) 55%, var(--card))}
.sag-roster legend{padding:0 4px}
.sag-roster-row{display:grid;grid-template-columns:minmax(0,104px) minmax(0,1fr);gap:8px;align-items:end}
.sag-roster-row .v2-btn{grid-column:1 / -1;justify-content:center}
/* 책상 */
.sag-step{overflow:hidden}
.sag-step .sag-stepbtn{flex:0 0 40px;border:0;background:var(--btn);font-family:var(--sans);font-size:18px;font-weight:700;color:var(--ink);cursor:pointer;transition:background var(--ease)}
.sag-step .sag-stepbtn:hover{background:var(--btn-hover)}
.sag-step .sag-stepbtn:first-child{border-right:1px solid var(--soft)}
.sag-step .sag-stepbtn:last-child{border-left:1px solid var(--soft)}
.sag-step input{text-align:center;padding:0 4px}
.sag-step b{border-left:0;background:none;min-width:0;padding:0 8px 0 0}
.sag-shapebox{display:grid;gap:6px}
.sag-shapes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
@container sag (max-width:459px){ .sag-shapes{grid-template-columns:repeat(3,minmax(0,1fr))} }
.sag-shapes button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:62px;padding:8px 4px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--muted);cursor:pointer;transition:border-color var(--ease),background var(--ease),color var(--ease)}
.sag-shapes button:hover{border-color:var(--line);color:var(--ink)}
.sag-shapes button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sag-shapes button[aria-pressed="true"]{border-color:var(--ink);background:var(--card);color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.sag-ico{width:34px;height:20px;fill:currentColor;opacity:.75}
.sag-shapes button[aria-pressed="true"] .sag-ico{fill:var(--accent);opacity:1}
.sag-deskopts{align-items:end}
.sag-deskbtns{display:grid;gap:8px;align-content:end;min-width:0}
@container sag (max-width:619px){ .sag-deskopts{grid-template-columns:minmax(0,1fr)} }
/* 조건 */
.sag-fixedbox{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.sag-list{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:12.5px}
.sag-list li{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:0 4px 0 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink)}
.sag-list li.is-empty{padding:0;border:0;background:none;color:var(--muted)}
.sag-linkbtn{min-height:26px;padding:0 6px;border:0;background:none;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sag-linkbtn.is-quiet{color:var(--muted)}
#sagSaved{flex-direction:column;align-items:stretch}
#sagSaved li{justify-content:space-between}
#sagSaved li span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sag-coderow{display:flex;gap:8px}
.sag-coderow .v2-input{flex:1 1 auto;min-width:0}

/* 무대 */
.sag-stage{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--card)}
.sag-cmd{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;padding:14px 18px 10px}
.sag-go{min-width:168px;justify-content:center;font-size:14.5px}
.sag-go .i{width:16px;height:16px}
.sag-go.is-blocked{opacity:.7}
.sag-revealf{flex:0 1 190px;min-width:150px}
.sag-sw{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;min-height:var(--v2-ctl)}
.sag-full{margin-left:auto;align-self:flex-end;height:var(--v2-ctl)}
.sag-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:0 18px 10px}
.sag-tools{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.sag-tools button{height:34px;padding:0 12px;border:0;border-right:1px solid var(--soft);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background var(--ease),color var(--ease)}
.sag-tools button:last-child{border-right:0}
.sag-tools button:hover{background:var(--btn);color:var(--ink)}
.sag-tools button[aria-pressed="true"]{background:var(--fill);color:var(--on-fill)}
.sag-view{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sag-range{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12px;font-weight:650;color:var(--muted)}
.sag-range input{width:64px;accent-color:var(--accent)}
.sag-range output{min-width:34px;font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--ink);text-align:right}
.sag-ib{height:34px;padding:0 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);cursor:pointer;white-space:nowrap;transition:background var(--ease)}
.sag-ib:hover{background:var(--btn)}
.sag-ib[aria-pressed="true"]{border-color:var(--fill);background:var(--fill);color:var(--on-fill)}
.sag-status{min-height:1.55em;margin:0;padding:0 18px 8px;line-height:1.55;font-size:12.5px;color:var(--ink)}
.sag-movebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:0 18px 8px;padding:6px 6px 6px 12px;border:1px dashed var(--line);border-radius:var(--radius);font-family:var(--sans);font-size:12px;color:var(--muted)}

/* 배치도 */
.sag-wrap{position:relative;overflow-x:auto;padding:14px 12px 18px;border-top:1px solid var(--soft);border-bottom:1px solid var(--soft);background-color:var(--wash);background-image:radial-gradient(var(--dot) 1.2px, transparent 1.3px);background-size:16px 16px;overflow-anchor:none}
.sag-print{display:flex;flex-direction:column;align-items:center;min-width:min-content}
.sag-print-head{display:none}
.sag-frontbar{min-width:200px;margin:0 auto 18px;padding:6px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--btn);font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.04em;text-align:center;color:var(--muted)}
.sag-stage.is-flipped .sag-print{flex-direction:column-reverse}
.sag-stage.is-flipped .sag-frontbar{margin:18px auto 0}
.sag-colbar{position:relative;height:26px;margin:0 auto 8px}
.sag-stage.is-flipped .sag-colbar{margin:8px auto 0}
.sag-colchip{position:absolute;top:0;left:0;height:24px;padding:0 4px;border:1px dashed var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sag-colchip[data-rule="m"]{border-style:solid;border-color:var(--sag-m-ink);background:var(--sag-m);color:var(--sag-m-ink)}
.sag-colchip[data-rule="f"]{border-style:solid;border-color:var(--sag-f-ink);background:var(--sag-f);color:var(--sag-f-ink)}
.sag-board{position:relative;margin:0 auto;transition:height .3s var(--sag-ease)}
.sag-desk{position:absolute;top:0;left:0;margin:0;padding:0 0 7px;border:0;background:none;color:var(--ink);cursor:pointer;transition:transform .42s var(--sag-ease);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.sag-desk::after{content:"";position:absolute;left:30%;right:30%;bottom:0;height:4px;border:1px solid var(--line);border-top:0;border-radius:0 0 3px 3px;opacity:.6}
.sag-face{position:relative;display:grid;place-items:center;width:100%;height:100%;box-sizing:border-box;padding:4px 6px;border:1px solid var(--line);border-radius:3px;background:var(--paper);box-shadow:0 1px 0 var(--soft);transition:background var(--ease),border-color var(--ease),opacity var(--ease)}
.sag-num{position:absolute;top:3px;left:5px;font-family:var(--mono);font-size:var(--sag-num,11px);font-weight:700;line-height:1;color:var(--muted)}
.sag-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sans);font-size:var(--sag-font,15px);font-weight:800;line-height:1.15;color:var(--ink)}
.sag-tag{position:absolute;bottom:2px;left:0;right:0;font-family:var(--sans);font-size:max(9px, calc(var(--sag-num,11px) * .9));font-weight:700;line-height:1;text-align:center;color:var(--accent);white-space:nowrap;overflow:hidden}
.sag-tag:empty{display:none}
.sag-g{position:absolute;top:3px;right:5px;font-family:var(--sans);font-size:var(--sag-num,11px);font-weight:800;line-height:1}
.sag-desk:hover .sag-face{border-color:var(--ink)}
.sag-desk:focus-visible{outline:none}
.sag-desk:focus-visible .sag-face{outline:2px solid var(--accent);outline-offset:2px}
.sag-desk.is-filled .sag-face{background:var(--card)}
.sag-desk.is-m .sag-face{background:var(--sag-m)}
.sag-desk.is-f .sag-face{background:var(--sag-f)}
.sag-desk.is-m .sag-g{color:var(--sag-m-ink)}
.sag-desk.is-f .sag-g{color:var(--sag-f-ink)}
.sag-desk.is-need .sag-face{border-style:dashed}
.sag-desk.is-need .sag-name{font-size:calc(var(--sag-font,15px) * .72);font-weight:650;color:var(--muted)}
.sag-desk[data-need="m"].is-need .sag-face{background:color-mix(in srgb, var(--sag-m) 55%, var(--paper))}
.sag-desk[data-need="f"].is-need .sag-face{background:color-mix(in srgb, var(--sag-f) 55%, var(--paper))}
.sag-desk.is-fixed .sag-face{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.sag-desk.is-leader .sag-face{border-color:var(--accent);border-width:2px}
.sag-desk.is-off{cursor:pointer}
.sag-desk.is-off::after{opacity:0}
.sag-desk.is-off .sag-face{border-style:dashed;background:transparent;box-shadow:none;opacity:.7}
.sag-desk.is-off .sag-name{font-size:calc(var(--sag-font,15px) * .7);font-weight:600;color:var(--muted)}
.sag-desk.is-hidden .sag-face{background:var(--fill);border-color:var(--fill)}
.sag-desk.is-hidden .sag-name{color:var(--on-fill);font-family:var(--mono)}
.sag-desk.is-hidden .sag-num{color:var(--on-fill);opacity:.7}
.sag-desk.is-selected .sag-face{outline:2px solid var(--ink);outline-offset:2px}
.sag[data-tool="move"] .sag-desk{cursor:grab;touch-action:none}
.sag-desk.is-dragging{z-index:5;cursor:grabbing;transition:none}
.sag-board.is-compact .sag-tag,.sag-board.is-compact .sag-g{display:none}
.sag-board.is-compact .sag-num{top:2px;left:3px}
.sag-board.is-compact .sag-face{padding:9px 3px 2px}
.sag-desk.is-found{z-index:4}
.sag-desk.is-found .sag-face{outline:3px solid var(--accent);outline-offset:3px;animation:sagFound 1.1s var(--sag-ease) 2}
.sag-desk.is-entering .sag-face{animation:sagIn .55s var(--sag-ease) both;animation-delay:var(--sag-delay,0ms)}
.sag-desk.is-leaving{opacity:0;transition:opacity .3s}
.sag-desk.is-bump .sag-face{animation:sagBump .34s var(--sag-ease)}
.sag-desk.is-flip .sag-face{animation:sagFlip .62s var(--sag-ease) both;animation-delay:var(--sag-delay,0ms)}
.sag-desk.is-deal .sag-face{animation:sagDeal .5s var(--sag-ease) both;animation-delay:var(--sag-delay,0ms)}
.sag-desk.is-swap .sag-face{animation:sagSwap .5s var(--sag-ease)}
.sag-desk.is-spot .sag-face{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.sag-desk.is-shuffling .sag-name{opacity:.6;filter:blur(.4px)}
.sag-desk.is-shuffling .sag-face{animation:sagJitter .24s linear infinite alternate}
.sag-desk.is-shuffling:nth-child(2n) .sag-face{animation-direction:alternate-reverse}
.sag-wrap.is-shake .sag-board{animation:sagShake .42s}
.sag-wrap.is-trembling .sag-board{animation:sagTremble .16s linear infinite}
@keyframes sagIn{from{opacity:0;transform:translateY(14px) scale(.7)}to{opacity:1;transform:none}}
@keyframes sagBump{0%{transform:scale(1)}40%{transform:scale(.86)}100%{transform:scale(1)}}
@keyframes sagFlip{0%{transform:rotateY(90deg) scale(.94);opacity:.2}55%{transform:rotateY(-14deg) scale(1.06);opacity:1}100%{transform:none}}
@keyframes sagDeal{0%{transform:translateY(-26px) rotate(-6deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes sagSwap{0%{transform:none}35%{transform:translateY(-8px) scale(1.08)}100%{transform:none}}
@keyframes sagJitter{from{transform:rotate(-1.2deg)}to{transform:rotate(1.2deg)}}
@keyframes sagShake{0%,100%{transform:none}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes sagTremble{0%,100%{transform:translate(0,0)}25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}}
@keyframes sagFound{0%,100%{transform:scale(1)}30%{transform:scale(1.12)}60%{transform:scale(.98)}}

/* 고정석 고르기·카운트다운 */
.sag-pop{position:absolute;z-index:8;display:grid;gap:8px;width:min(260px, calc(100% - 16px));padding:12px;border:1px solid var(--ink);border-radius:var(--radius);background:var(--card);box-shadow:0 8px 24px rgba(26,18,8,.16);animation:sagPop .16s var(--sag-ease)}
.sag-pop p{margin:0;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink)}
@keyframes sagPop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sag-overlay{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:color-mix(in srgb, var(--wash) 72%, transparent);opacity:0;transition:opacity .25s}
.sag-overlay.is-on{opacity:1}
.sag-overlay.is-tense{background:color-mix(in srgb, var(--wash) 42%, transparent)}
.sag-countbox{position:relative;display:grid;place-items:center;width:132px;height:132px;border:1px solid var(--line);border-radius:50%;background:var(--card);box-shadow:0 10px 30px rgba(26,18,8,.14)}
.sag-countbox svg{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);transform:rotate(-90deg)}
.sag-countbox circle{fill:none;stroke:var(--soft);stroke-width:5}
.sag-countbox .sag-ring{stroke:var(--accent);stroke-dasharray:283;stroke-dashoffset:0;stroke-linecap:round;transition:stroke-dashoffset .9s linear}
.sag-countbox strong{position:relative;font-family:var(--sans);font-size:56px;font-weight:850;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.sag-countbox strong.is-pop{animation:sagCount .5s var(--sag-ease)}
.sag-overlay.is-final .sag-countbox{animation:sagBeat 1s ease-in-out infinite;border-color:var(--accent)}
.sag-overlay.is-final .sag-countbox strong{color:var(--accent)}
.sag-overlay p{margin:0;padding:4px 12px;border:1px solid var(--soft);background:var(--card);font-family:var(--sans);font-size:15px;font-weight:800;color:var(--ink)}
@keyframes sagCount{0%{transform:scale(1.8);opacity:0}35%{transform:scale(.94);opacity:1}60%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes sagBeat{0%,100%{transform:scale(1)}12%{transform:scale(1.07)}24%{transform:scale(1)}36%{transform:scale(1.05)}}
.sag-revealbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;padding:10px 18px 0;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* 조건 점검 띠 */
.sag-checks{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:12px 18px 0;list-style:none;font-family:var(--sans);font-size:12.5px;font-weight:650}
.sag-checks li{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px 0 6px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);animation:sagPane .3s var(--sag-ease) both}
.sag-checks li i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--fill);color:var(--on-fill);font-style:normal;font-size:11px;font-weight:800}
.sag-checks li.is-bad{border-color:var(--accent);color:var(--accent)}
.sag-checks li.is-bad i{background:var(--accent)}
.sag-checks li.is-info i{background:var(--btn);color:var(--muted)}
.sag-checks li.is-meter{gap:10px;padding:0 10px}
.sag-checks li.is-meter b{position:relative;display:block;width:90px;height:8px;border-radius:4px;background:var(--soft);overflow:hidden}
.sag-checks li.is-meter b i{position:absolute;inset:0 auto 0 0;width:0;height:auto;border-radius:0;background:var(--accent);transition:width .6s var(--sag-ease)}

/* 아래 줄 */
.sag-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 18px 14px}
.sag-legend{display:flex;flex-wrap:wrap;gap:10px;font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink)}
.sag-legend span{display:inline-flex;align-items:center;gap:5px}
.sag-legend i{width:12px;height:12px;border:1px solid var(--line);border-radius:2px}
.sag-legend .is-m i{background:var(--sag-m);border-color:var(--sag-m-ink)}
.sag-legend .is-f i{background:var(--sag-f);border-color:var(--sag-f-ink)}
.sag-legend .is-u i{background:var(--paper)}
.sag-legend.is-muted{opacity:.55}
.sag-find{display:inline-flex;align-items:stretch;height:32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.sag-find span{display:grid;place-items:center;padding:0 10px;border-right:1px solid var(--soft);background:var(--wash);font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.sag-find input{width:120px;min-width:0;padding:0 10px;border:0;background:none;outline:0;font-family:var(--sans);font-size:13px;color:var(--ink)}
.sag-find:focus-within{border-color:var(--ink)}
.sag-outs{display:flex;flex-wrap:wrap;gap:6px}
.sag-code{margin:0 0 0 auto;font-family:var(--sans);font-size:12px;color:var(--muted);white-space:nowrap}
.sag-code b{font-family:var(--mono);font-size:12.5px;color:var(--ink);letter-spacing:.04em}
.sag-noscript{padding:12px 18px}

/* 좁은 화면 */
@container sag (max-width:599px){
  .sag-pane{padding:14px}
  .sag-cmd{padding:12px 14px 8px;gap:10px}
  .sag-go{flex:1 1 100%}
  .sag-revealf{flex:1 1 150px}
  .sag-full{margin-left:0}
  .sag-bar{padding:0 14px 10px}
  .sag-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .sag-tools button:nth-child(2){border-right:0}
  .sag-tools button:nth-child(-n+2){border-bottom:1px solid var(--soft)}
  .sag-status{padding:0 14px 8px}
  .sag-movebar{margin:0 14px 8px}
  .sag-wrap{padding:12px 6px 14px}
  .sag-checks{padding:10px 14px 0}
  .sag-foot{padding:10px 14px 12px}
  .sag-find{flex:1 1 200px}
  .sag-find input{flex:1 1 auto;width:auto}
  .sag-code{margin-left:0}
}

/* 전체 화면: 무대만 */
.sag-stage:fullscreen{overflow:auto;background:var(--card)}
.sag-stage:-webkit-full-screen{overflow:auto;background:var(--card)}
.sag-stage.is-pseudo-full{position:fixed;inset:0;z-index:1000;overflow:auto}
html.sag-lock,html.sag-lock body{overflow:hidden}
.sag-stage.is-full .sag-wrap{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.sag-stage.is-full .sag-frontbar{font-size:15px}

@media (prefers-reduced-motion: reduce){
  .sag *,.sag *::before,.sag *::after{animation:none!important;transition:none!important}
}

/* 인쇄: 배치도 복제본만 A4 가로 한 장 */
@media print{
  @page{size:A4 landscape;margin:12mm}
  html.sag-printing body>*:not(#sagPrintClone){display:none!important}
  html.sag-printing body{background:#fff!important;margin:0!important;padding:0!important}
  #sagPrintClone{display:block!important;--sag-m:#e7eef4;--sag-m-ink:#3d5a73;--sag-f:#f6e7e3;--sag-f-ink:#8a4a3f;--paper:#fff;--card:#fff;--ink:#000;--muted:#444;--line:#888;--soft:#ccc;--btn:#eee;--wash:#fff;--fill:#000;--on-fill:#fff;--accent:#c44a00}
  #sagPrintClone .sag-print{display:flex;flex-direction:column;align-items:center}
  #sagPrintClone.is-flipped .sag-print{flex-direction:column-reverse}
  #sagPrintClone .sag-print-head{display:flex;justify-content:space-between;align-items:baseline;width:100%;margin-bottom:10px;font-family:var(--sans);color:#000}
  #sagPrintClone .sag-print-head strong{font-size:20px}
  #sagPrintClone .sag-print-head span{font-size:11px}
  #sagPrintClone .sag-colbar{display:none}
  #sagPrintClone .sag-desk,#sagPrintClone .sag-face{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.sag-printclone{display:none}
.sag-printclone .sag-desk{transition:none}