/* ===== 강좌ON 관리자 · 공통 스타일 =====
   freee 확정 (2026-09) — https://oh-my-design.kr/freee/design.md
   Primary #2864f0 · Text #323232 · Muted #595959 · Border #e1dcdc · Tint #ebf3ff · radius 8px */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap");

:root{
  --ink:#323232; --ink2:#595959; --ink3:#8a8a8a;
  --line:#e1dcdc; --line2:#f0eeee; --bg:#f7f8fa; --paper:#fff;
  --brand:#2864f0; --brand2:#245ad9; --soft:#ebf3ff; --soft2:#f3f7ff;
  --brand-hover:#2761e8;
  --hot:#e53935; --hot-soft:#fdecea;
  --gold:#8A6908; --gold-soft:#FAF2DC;
  --wait:#57467E; --wait-soft:#EDEAF4;
  --blue:#2864f0; --blue-soft:#ebf3ff;
  --success:#2e7d32; --success-soft:#e8f5e9;
  --radius:8px;
  --c1:#B85C34;--c2:#2864f0;--c3:#7A4292;--c4:#96760F;
  --c5:#6B5738;--c6:#2e7d32;--c7:#A8426A;--c8:#25758C;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--ink);
  font-family:"Noto Sans KR",Pretendard,-apple-system,BlinkMacSystemFont,"Malgun Gothic","맑은 고딕",sans-serif;
  font-size:14px;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.wrap{width:100%;max-width:none;margin:0;padding:12px 20px 48px}

/* 헤더 */
.top{background:var(--paper);border:1px solid var(--line);border-bottom:none;
  border-radius:var(--radius) var(--radius) 0 0;padding:14px 20px;display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap;box-shadow:none}
.top .bd{display:flex;align-items:baseline;gap:10px}
.top .bd h1{font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.top .bd h1 em{font-style:normal;color:var(--brand)}
.top .bd .sub{font-size:13px;color:var(--ink3);font-weight:500}
.top .mid{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.termsel{background:var(--soft);color:var(--brand);border:1px solid #d8e5fd;border-radius:var(--radius);
  padding:6px 12px;font-size:13.5px;font-weight:700;cursor:pointer}
.wkinfo{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink2)}
.wkbar2{width:100px;height:7px;border-radius:99px;background:var(--line2);position:relative;overflow:hidden}
.wkbar2 i{position:absolute;left:0;top:0;height:100%;background:var(--brand)}
.wkbar2 u{position:absolute;top:-3px;width:2px;height:13px;background:var(--hot)}
.top .who{font-size:12.5px;color:var(--ink2);text-align:right;line-height:1.35}
.top .who b{display:block;color:var(--ink);font-weight:700;font-size:13.5px}

/* 탭 */
.tabs{display:flex;background:var(--paper);border:1px solid var(--line);
  border-bottom:2px solid var(--line);padding:0 12px;align-items:center}
.tabs a{padding:13px 18px;font-size:15px;font-weight:700;color:var(--ink3);
  border-bottom:3px solid transparent;margin-bottom:-2px;display:flex;align-items:center;gap:7px}
.tabs a:hover{color:var(--ink2)}
.tabs a.on{color:var(--brand);border-bottom-color:var(--brand)}
.tabs .sep{width:1px;height:20px;background:var(--line);margin:0 10px}
.tabs .pill{background:var(--hot);color:#fff;font-size:11px;font-weight:800;min-width:19px;height:19px;
  padding:0 5px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center}

.stage{background:var(--paper);border:1px solid var(--line);border-top:none;
  border-radius:0 0 var(--radius) var(--radius);min-height:640px;box-shadow:none}

/* 서브탭 */
.sub{display:flex;gap:6px;padding:12px 20px;border-bottom:1px solid var(--line2);flex-wrap:wrap}
.sub button{padding:8px 15px;border-radius:var(--radius);font-size:14px;font-weight:700;color:var(--ink2);
  background:var(--bg);border:1px solid transparent}
.sub button:hover{background:var(--line2)}
.sub button.on{background:var(--brand);color:#fff}

.pane{display:none;padding:20px}
.pane.on{display:block}
.ph{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.ph h2{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.ph .note{font-size:13px;color:var(--ink3)}

/* 요약 카드 */
.cards{display:grid;gap:12px;margin-bottom:18px}
.c5{grid-template-columns:repeat(5,1fr)}
.c6{grid-template-columns:repeat(6,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
.c3{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:14px 15px;background:var(--paper);box-shadow:none}
.card .lb{font-size:12.5px;font-weight:700;color:var(--ink2);display:flex;align-items:center;gap:6px}
.card .lb i{width:8px;height:8px;border-radius:50%;display:inline-block}
.card .v{font-size:25px;font-weight:700;letter-spacing:-.03em;margin-top:7px}
.card .m{font-size:12px;color:var(--ink3);margin-top:2px}
.card.ok{background:var(--soft);border-color:#d8e5fd}   .card.ok .v{color:var(--brand)}   .card.ok .lb i{background:var(--brand)}
.card.wt{background:var(--gold-soft);border-color:#EDD9A8} .card.wt .v{color:var(--gold)} .card.wt .lb i{background:var(--gold)}
.card.bd{background:var(--hot-soft);border-color:#f5c6c2}  .card.bd .v{color:var(--hot)}  .card.bd .lb i{background:var(--hot)}
.card.wl{background:var(--wait-soft);border-color:#CFC5E2} .card.wl .v{color:var(--wait)} .card.wl .lb i{background:var(--wait)}
.card.bl{background:var(--blue-soft);border-color:#d8e5fd} .card.bl .v{color:var(--blue)} .card.bl .lb i{background:var(--blue)}
.card.clickable{cursor:pointer}
.card.clickable:hover{box-shadow:0 0 0 2px var(--brand)}

/* 필터바 */
.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:13px 15px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px}
.filters .grp{display:flex;gap:5px;align-items:center}
.filters .grp>span{font-size:12px;color:var(--ink3);font-weight:700;margin-right:3px}
.chip{padding:6px 11px;border-radius:var(--radius);font-size:13px;font-weight:600;background:var(--paper);
  border:1px solid var(--line);color:var(--ink2);display:flex;align-items:center;gap:5px}
.chip .dot{width:8px;height:8px;border-radius:2px}
.chip.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.search{padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);min-width:200px}
.search:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(40,100,240,.18)}
select.sel{padding:8px 11px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-weight:600}

/* 액션바 */
.actbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:12px 15px;margin-bottom:12px;
  background:var(--soft2);border:1px solid #d8e5fd;border-radius:var(--radius)}
.actbar .n{font-size:13.5px;font-weight:700;color:var(--brand2)}
.actbar .sp{flex:1}

/* 버튼 */
.btn{padding:9px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  font-size:14px;font-weight:700;color:var(--ink2)}
.btn:hover{border-color:var(--brand);color:var(--brand);background:var(--soft)}
.btn.pri{background:var(--brand);border:2px solid var(--brand);color:#fff}
.btn.pri:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:#fff}
.btn.pri:active{background:var(--brand2);border-color:var(--brand2)}
.btn.danger{border-color:#f5c6c2;color:var(--hot)}
.btn.danger:hover{background:var(--hot-soft)}
.btn.big{padding:12px 20px;font-size:16px;border-radius:var(--radius);min-height:48px}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn:disabled:hover{border-color:var(--line);color:var(--ink2);background:var(--paper)}
.btn.pri:disabled:hover{background:var(--brand);border-color:var(--brand);color:#fff;opacity:.42}

/* 표 */
.tw{border:1px solid var(--line);border-radius:var(--radius);overflow:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:#f7f8fa;font-size:12.5px;font-weight:700;color:var(--ink2);padding:11px 12px;
  text-align:left;border-bottom:1.5px solid var(--line);white-space:nowrap;position:sticky;top:0;z-index:1}
td{padding:11px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fafbfc}
tbody tr.sel{background:var(--soft)}
tfoot td{background:#f7f8fa;font-weight:700;border-top:1.5px solid var(--line)}
.r{text-align:right}.c{text-align:center}
.dim{color:var(--ink3)}
.strong{font-weight:700}
.click{cursor:pointer}
input[type=checkbox]{width:17px;height:17px;accent-color:var(--brand);cursor:pointer}

.chipcode{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:22px;
  padding:0 7px;border-radius:5px;font-size:12px;font-weight:800;color:#fff}
.tag{display:inline-flex;padding:3px 9px;border-radius:5px;font-size:11.5px;font-weight:700;white-space:nowrap}
.tag.ok{background:var(--soft);color:var(--brand)}
.tag.wt{background:var(--gold-soft);color:var(--gold)}
.tag.bd{background:var(--hot-soft);color:var(--hot)}
.tag.wl{background:var(--wait-soft);color:var(--wait)}
.tag.bl{background:var(--blue-soft);color:var(--blue)}
.tag.gy{background:#f0eeee;color:var(--ink3)}
.over{color:var(--hot);font-weight:700}

/* 모달 */
.mask{position:fixed;inset:0;background:rgba(50,50,50,.4);z-index:60;display:none;
  align-items:center;justify-content:center;padding:24px}
.mask.on{display:flex}
.modal{background:var(--paper);border-radius:var(--radius);width:100%;max-width:600px;max-height:88vh;
  display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(50,50,50,.12);border:1px solid var(--line)}
.modal.wide{max-width:840px}
.mh{padding:17px 20px;border-bottom:1px solid var(--line2);display:flex;
  justify-content:space-between;align-items:center;gap:14px}
.mh h3{font-size:17px;font-weight:700;color:var(--ink)}
.mh-sub{margin:4px 0 0;font-size:13px;font-weight:500;color:var(--ink3);line-height:1.4}
.mh .x{font-size:23px;color:var(--ink3);line-height:1;padding:2px 7px;border-radius:6px}
.mh .x:hover{background:var(--line2);color:var(--ink)}
.mb{padding:20px;overflow-y:auto;flex:1}
.mf{padding:14px 20px;border-top:1px solid var(--line2);display:flex;
  justify-content:space-between;align-items:center;gap:10px}
.mf .rt{display:flex;gap:9px}

/* 수강신청 게시 모달 */
.pub-modal{max-width:560px}
.pub-hero{padding:16px 16px 14px;border-radius:var(--radius);border:1px solid #d8e5fd;
  background:linear-gradient(180deg,var(--soft) 0%,#fff 72%);margin-bottom:18px}
.pub-hero.warn{border-color:#EDD9A8;background:linear-gradient(180deg,var(--gold-soft) 0%,#fff 72%)}
.pub-hero.ok{border-color:#c8daf9}
.pub-hero-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.pub-hero-badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:6px;
  font-size:12px;font-weight:700;background:var(--brand);color:#fff}
.pub-hero.warn .pub-hero-badge{background:var(--gold);color:#fff}
.pub-hero-meta{font-size:12.5px;color:var(--ink3);font-weight:500}
.pub-hero-meta b{color:var(--ink);font-weight:700}
.pub-hero-title{margin:0 0 6px;font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.4}
.pub-hero-title b{color:var(--hot)}
.pub-hero-desc{margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--ink2)}
.pub-url{display:flex;flex-direction:column;gap:4px;padding:11px 13px;border-radius:7px;
  background:#fff;border:1px solid var(--line)}
.pub-url-label{font-size:11.5px;font-weight:700;color:var(--ink3);letter-spacing:.02em}
.pub-url-value{font-size:14px;font-weight:700;color:var(--brand);word-break:break-all;line-height:1.4}

.pub-sec{margin-bottom:18px}
.pub-sec:last-child{margin-bottom:0}
.pub-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.pub-sec-h h4{margin:0;font-size:14px;font-weight:700;color:var(--ink)}
.pub-sec-h .dim{font-size:12px}

.pub-checks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pub-check{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--paper)}
.pub-check.ok{border-color:#d8e5fd;background:var(--soft2)}
.pub-check.bad{border-color:#f5c6c2;background:var(--hot-soft)}
.pub-check-mark{flex-shrink:0;width:22px;height:22px;border-radius:6px;display:inline-flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:800;line-height:1}
.pub-check.ok .pub-check-mark{background:var(--brand);color:#fff}
.pub-check.bad .pub-check-mark{background:var(--hot);color:#fff}
.pub-check-body{min-width:0;flex:1}
.pub-check-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px}
.pub-check-row b{font-size:13px;font-weight:700;color:var(--ink)}
.pub-check-detail{font-size:12px;line-height:1.4;color:var(--ink3);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.pub-rules{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.pub-rule{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding:11px 14px;border-bottom:1px solid var(--line2)}
.pub-rule:last-child{border-bottom:0}
.pub-rule-k{flex-shrink:0;font-size:13px;font-weight:600;color:var(--ink3);padding-top:1px}
.pub-rule-v{font-size:13px;font-weight:600;color:var(--ink);text-align:right;line-height:1.45}
.pub-rule-v b{font-weight:700;color:var(--brand)}

@media(max-width:560px){
  .pub-checks{grid-template-columns:1fr}
}

/* 수강신청 주소 · QR 모달 */
.qr-modal{max-width:440px}
.qr-card{padding:16px 16px 14px;border-radius:var(--radius);border:1px solid #d8e5fd;
  background:linear-gradient(180deg,var(--soft) 0%,#fff 70%);text-align:center;margin-bottom:14px}
.qr-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.qr-badge{display:inline-flex;padding:3px 9px;border-radius:6px;font-size:12px;font-weight:700;
  background:var(--brand);color:#fff}
.qr-org{font-size:12.5px;font-weight:600;color:var(--ink3)}
.qr-frame{display:inline-flex;padding:12px;border-radius:10px;border:1px solid var(--line);
  background:#fff;box-shadow:0 2px 8px rgba(50,50,50,.04)}
.qr-frame img{display:block;width:200px;height:200px;border-radius:4px}
.qr-hint{margin:12px 0 12px;font-size:13px;color:var(--ink2);line-height:1.45}
.qr-url{display:flex;flex-direction:column;gap:4px;padding:11px 13px;border-radius:7px;
  background:#fff;border:1px solid var(--line);text-align:left}
.qr-url-label{font-size:11.5px;font-weight:700;color:var(--ink3)}
.qr-url-value{font-size:14px;font-weight:700;color:var(--brand);word-break:break-all;line-height:1.4}
.qr-tips{display:flex;flex-direction:column;gap:8px}
.qr-tip{padding:11px 13px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--paper);display:flex;flex-direction:column;gap:3px}
.qr-tip b{font-size:13px;font-weight:700;color:var(--ink)}
.qr-tip span{font-size:12.5px;line-height:1.45;color:var(--ink2)}
.qr-tip.mute{background:#f7f8fa;border-color:var(--line2)}
.qr-tip.mute b,.qr-tip.mute span{color:var(--ink3)}

/* 폼 */
.f{margin-bottom:14px}
.f label{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:6px}
.f label .req{color:var(--hot);margin-left:3px}
.f input,.f select,.f textarea{
  width:100%;min-height:44px;padding:10px 14px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--paper);font-size:16px;line-height:1.4;color:var(--ink);
  box-sizing:border-box}
.f textarea{min-height:110px;resize:vertical}
.f input::placeholder,.f textarea::placeholder{color:#9a9a9a}
.f input:hover,.f select:hover,.f textarea:hover{border-color:#b8c0c8}
.f input:focus,.f select:focus,.f textarea:focus{
  background:#fff;border-color:var(--brand);outline:none;
  box-shadow:0 0 0 3px rgba(40,100,240,.18)}
.f .hint{font-size:13px;color:var(--ink3);margin-top:6px;line-height:1.45}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ba-dd{position:relative}
.ba-dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);cursor:pointer;text-align:left;font:inherit;color:var(--ink)}
.ba-dd-btn:hover,.ba-dd.open .ba-dd-btn{border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px rgba(40,100,240,.12)}
.ba-dd-cur{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:14px;font-weight:650}
.ba-dd-cur .ba-logo{width:22px;height:22px;object-fit:contain;border-radius:4px;flex-shrink:0}
.ba-dd-cur .ba-logo-fb{width:22px;height:22px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex-shrink:0;background:#1e3a8a}
.ba-dd-cur .ba-ex{font-size:11px;font-weight:700;color:var(--ink3);margin-left:4px}
.ba-dd-caret{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink3);flex-shrink:0;transition:transform .15s}
.ba-dd.open .ba-dd-caret{transform:rotate(180deg)}
.ba-dd-panel{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);bottom:auto;max-height:260px;overflow:auto;padding:6px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:0 8px 24px rgba(50,50,50,.08)}
.ba-dd.drop-up .ba-dd-panel{top:auto;bottom:calc(100% + 4px);box-shadow:0 -8px 24px rgba(50,50,50,.08)}
.ba-dd-opt{width:100%;display:flex;align-items:center;gap:8px;padding:8px 10px;border:0;border-radius:6px;background:transparent;cursor:pointer;text-align:left;font-size:13px;font-weight:600;color:var(--ink)}
.ba-dd-opt:hover{background:var(--soft)}
.ba-dd-opt.on{background:var(--soft);color:var(--brand)}
.ba-dd-opt .ba-logo{width:20px;height:20px;object-fit:contain;border-radius:4px;flex-shrink:0}
.ba-dd-opt .ba-logo-fb{width:20px;height:20px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;flex-shrink:0;background:#1e3a8a}
.ba-dd-opt .ba-ex{font-size:10px;font-weight:700;color:var(--ink3);margin-left:auto}
.ba-bank-mark{display:inline-flex;align-items:center;gap:8px}
.ba-bank-mark .ba-logo{width:20px;height:20px;object-fit:contain;border-radius:4px;vertical-align:middle}
.ba-bank-mark .ba-logo-fb{width:20px;height:20px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff;background:#1e3a8a}
.ba-launcher-banner{display:flex;gap:12px;align-items:flex-start;margin-top:12px;padding:14px 16px;border:1px solid #E8C56A;border-radius:var(--radius);background:#FFF8E8;color:var(--ink)}
.ba-launcher-banner[hidden]{display:none!important}
.ba-launcher-banner-body{flex:1;min-width:0}
.ba-launcher-banner-title{margin:0 0 6px;font-size:14px;font-weight:800;color:#A15C00;line-height:1.35}
.ba-launcher-banner-desc{margin:0 0 12px;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.ba-launcher-banner-x{flex-shrink:0;width:32px;height:32px;border:1px solid #E8C56A;border-radius:7px;background:#fff;color:#A15C00;font-size:20px;line-height:1;cursor:pointer}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}

.kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line2);
  font-size:14px;gap:14px}
.kv:last-child{border:none}
.kv .k{color:var(--ink3);white-space:nowrap}
.kv .v{font-weight:700;text-align:right}

.band{padding:13px 15px;border-radius:var(--radius);font-size:13px;line-height:1.65;margin-bottom:14px}
.band.info{background:var(--blue-soft);border:1px solid #d8e5fd;color:#123A6B}
.band.warn{background:var(--gold-soft);border:1px solid #EDD9A8;color:#6E5407}
.band.bad{background:var(--hot-soft);border:1px solid #f5c6c2;color:#8A3524}
.band.ok{background:var(--soft);border:1px solid #d8e5fd;color:var(--brand2)}
.band b{font-weight:700}

.empty{text-align:center;padding:56px 20px;color:var(--ink3)}
.empty .e{width:46px;height:46px;border-radius:var(--radius);background:var(--line2);margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800}
.empty p{font-size:14.5px;line-height:1.75}

/* 규칙 편집 */
.rulerow{display:grid;grid-template-columns:90px 1fr 1fr auto;gap:10px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line2)}
.rulerow:last-child{border:none}
.rulerow input,.rulerow select{padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);width:100%}
.preview{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:14px}
.preview .ph2{padding:10px 14px;background:#f7f8fa;font-size:12.5px;font-weight:700;
  color:var(--ink2);border-bottom:1px solid var(--line)}
.preview table{font-size:13.5px}
.preview th,.preview td{padding:8px 12px}

/* 통계 막대 */
.bars{display:flex;flex-direction:column;gap:9px}
.barrow{display:grid;grid-template-columns:90px 1fr 74px;gap:11px;align-items:center;font-size:13.5px}
.barrow .track{height:22px;background:var(--line2);border-radius:5px;overflow:hidden}
.barrow .fill{height:100%;background:var(--brand);border-radius:5px}
.barrow .n{text-align:right;font-weight:700}

@media(max-width:1100px){
  .c5{grid-template-columns:repeat(3,1fr)}
  .c6{grid-template-columns:repeat(3,1fr)}
  .c4{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}