/* ==========================================================================
   su-scenario.css — 학령인구 감소 대학 충원 시나리오 (v03_1)
   --------------------------------------------------------------------------
   build/wp_build.py 가 template_v3.html 에서 자동 생성한다.
   직접 고치지 말 것. 고쳐야 하면 template_v3.html 의 <style> 을 고치고
   `python3 build/wp_build.py` 를 다시 돌린다.

   모든 셀렉터는 .su-scn 아래로 스코프돼 있어 테마 다른 화면에 영향이 없다.
   색상은 테마의 :root 변수를 우선 쓰고, 없으면 원래 값으로 폴백한다.

   @package spotlightuniv
   ========================================================================== */

.su-scn{--scn-ink:#162126;--scn-muted:#65747a;--scn-soft:#526166;--scn-paper:#f3f1eb;--scn-card:#fffef9;
  --scn-line:#d9d7cf;--scn-line2:#c9c6bd;--scn-orange:#e75b32;--scn-teal:#1f6d69;--scn-yellow:#e8b94b;
  --scn-ok-bg:#dcebe3;--scn-ok-fg:#286247;--scn-wa-bg:#f3e8bf;--scn-wa-fg:#80630a;
  --scn-ri-bg:#f5d5c5;--scn-ri-fg:#a74425;--scn-cr-bg:#efc3bd;--scn-cr-fg:#952b27}
.su-scn *{box-sizing:border-box}
.su-scn{margin:0;background:var(--scn-paper);color:var(--scn-ink);font-size:14px;
  font-family:"Pretendard Variable",Pretendard,"Noto Sans KR","Malgun Gothic",-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased}
.su-scn button,.su-scn select,.su-scn input{font:inherit} .su-scn button{cursor:pointer}
.su-scn h1,.su-scn h2,.su-scn h3{margin:0;font-family:Georgia,"Noto Serif KR",serif;font-weight:500;letter-spacing:-.03em}
.su-scn main{max-width:1180px;margin:auto;padding:0 32px 80px}




.su-scn .zbar{height:8px;background:var(--scn-paper);margin-top:10px;position:relative}
.su-scn .zbar i{position:absolute;left:0;top:0;height:100%}
.su-scn .zcard{border-bottom:1px solid var(--scn-line);padding:14px 0}
.su-scn .zcard:last-child{border-bottom:0}
.su-scn .zcard .zh{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.su-scn .zcard .zn{font-size:13px;font-weight:700}
.su-scn .zcard .zv{font:500 22px/1 Georgia,serif}
.su-scn .zcard .zm{font-size:11px;color:var(--scn-muted);margin-top:7px;line-height:1.55}




.su-scn .tab{display:none;padding-top:44px} .su-scn .tab.on{display:block}
.su-scn .card{background:var(--scn-card);border:1px solid var(--scn-line);padding:26px}
.su-scn .card h3{font-size:22px;margin:0 0 3px}
.su-scn .card .sub{font-size:12px;color:var(--scn-muted);line-height:1.6;margin-bottom:18px}
.su-scn .note{padding:16px 18px;background:#edf3ef;border-left:3px solid var(--scn-teal);font-size:12.5px;line-height:1.8;color:var(--scn-soft)}
.su-scn .note b{color:var(--scn-ink)}
.su-scn .note.warn{background:#f7ece2;border-left-color:var(--scn-orange)}
.su-scn .hint{font-size:11.5px;color:var(--scn-muted);line-height:1.65;margin-top:10px}
.su-scn table{width:100%;border-collapse:collapse;font-size:12.5px}
.su-scn thead th{padding:11px 10px;color:var(--scn-muted);font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-align:right;border-bottom:2px solid var(--scn-ink)}
.su-scn thead th:first-child{text-align:left}
.su-scn tbody td{padding:11px 10px;text-align:right;border-bottom:1px solid var(--scn-line);font-variant-numeric:tabular-nums}
.su-scn tbody td:first-child{text-align:left}
.su-scn tbody tr:hover{background:var(--scn-paper)} .su-scn tbody tr.sel{background:#edf3ef}
.su-scn .scroll{max-height:440px;overflow:auto}
.su-scn .scroll::-webkit-scrollbar{width:9px}.su-scn .scroll::-webkit-scrollbar-thumb{background:var(--scn-line2)}
.su-scn .badge{display:inline-block;border-radius:20px;padding:4px 10px;font-size:10.5px;font-weight:800}
.su-scn .b-ok{background:var(--scn-ok-bg);color:var(--scn-ok-fg)}.su-scn .b-wa{background:var(--scn-wa-bg);color:var(--scn-wa-fg)}
.su-scn .b-ri{background:var(--scn-ri-bg);color:var(--scn-ri-fg)}.su-scn .b-cr{background:var(--scn-cr-bg);color:var(--scn-cr-fg)}
.su-scn .b-dim{background:var(--scn-paper);color:var(--scn-muted)}
.su-scn svg{width:100%;display:block} .su-scn svg text{fill:#819095;font-size:10.5px}
.su-scn .gridline{stroke:#e5e2d9;stroke-width:1}
.su-scn .legend{display:flex;gap:20px;color:var(--scn-muted);font-size:11.5px;margin-top:16px;flex-wrap:wrap}
.su-scn .legend i{display:inline-block;width:20px;height:3px;margin-right:7px;vertical-align:middle}
.su-scn .divider{height:1px;background:var(--scn-line);margin:26px 0}
.su-scn input[type=range]{width:100%;accent-color:var(--scn-orange)}
.su-scn select,.su-scn input[type=text]{background:var(--scn-paper);border:1px solid var(--scn-line);padding:11px 14px;color:var(--scn-ink);width:100%;font-size:13px}
.su-scn select:focus,.su-scn input:focus{outline:none;border-color:var(--scn-orange)}

/* ── 히어로 ── */
.su-scn .hero{margin-bottom:30px}
.su-scn .hero h1{font-size:clamp(30px,4vw,48px);line-height:1.14;letter-spacing:-.05em}
.su-scn .hero h1 em{color:var(--scn-orange);font-style:normal}
.su-scn .hero p{max-width:660px;color:var(--scn-soft);font-size:13.5px;line-height:1.85;margin:12px 0 0}
.su-scn .hero p.sub-lead{font-size:19px;line-height:1.5;color:var(--scn-ink);margin-top:18px;
  font-family:Georgia,"Noto Serif KR",serif;letter-spacing:-.02em;max-width:700px}
.su-scn .hero p.sub-lead b{font-weight:500;color:var(--scn-orange)}
.su-scn .yearbar{background:var(--scn-ink);color:#fff;padding:22px 28px;margin:28px 0;display:flex;
  align-items:center;gap:28px;flex-wrap:wrap;box-shadow:9px 9px 0 #d9d1c3}
.su-scn .yearbar .lab{font-size:11px;letter-spacing:.12em;color:#bdc9c9}
.su-scn .yearbar .big{font:500 46px/1 Georgia,serif;color:var(--scn-yellow);letter-spacing:-.03em}
.su-scn .yearbar .ctl{flex:1;min-width:260px}
.su-scn .yearbar input[type=range]{accent-color:var(--scn-yellow);margin-top:10px}
.su-scn .yearbar .meta{font-size:12px;color:#bdc9c9;line-height:1.7}
.su-scn .yearbar .meta b{color:#fff}
.su-scn .split{display:grid;grid-template-columns:1fr 340px;gap:22px}
.su-scn .split3{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:960px){.su-scn .split,.su-scn .split3{grid-template-columns:1fr}.su-scn main{padding-left:18px;padding-right:18px}}

/* ── 비교 카드 ── */
.su-scn .vs{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--scn-line);background:var(--scn-card)}
.su-scn .vs>div{padding:26px}
.su-scn .vs>div:first-child{border-right:1px solid var(--scn-line);background:var(--scn-paper)}
.su-scn .vs .k{font-size:11px;color:var(--scn-muted);font-weight:700;letter-spacing:.04em}
.su-scn .vs .v{font:500 44px/1 Georgia,serif;margin:12px 0 8px;letter-spacing:-.03em}
.su-scn .vs .d{font-size:12px;color:var(--scn-soft);line-height:1.7}
.su-scn .premise{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;border:1px solid var(--scn-line);background:var(--scn-paper)}
.su-scn .premise>div{padding:18px 20px;flex:1;min-width:130px}
.su-scn .premise>div:not(.ar){background:var(--scn-card)}
.su-scn .premise .ar{flex:0 0 auto;min-width:52px;display:flex;align-items:center;justify-content:center;
  font:500 20px Georgia,serif;color:var(--scn-muted);text-align:center;line-height:1.3}
.su-scn .premise .ar span{font-size:11px;font-family:inherit}
.su-scn .premise .k{font-size:11px;color:var(--scn-muted);font-weight:700}
.su-scn .premise .v{font:500 26px/1 Georgia,serif;margin:9px 0 5px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.su-scn .premise .d{font-size:11px;color:var(--scn-muted);line-height:1.5}
@media(max-width:820px){.su-scn .premise .ar{display:none}.su-scn .premise>div{min-width:45%}}
.su-scn .grp{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--scn-line)}
.su-scn .grp:last-child{border-bottom:0}
.su-scn .grp .nm{width:120px;font-size:12.5px;font-weight:700;flex-shrink:0}
.su-scn .grp .bar{flex:1;height:22px;background:var(--scn-paper);position:relative}
.su-scn .grp .bar i{position:absolute;left:0;top:0;height:100%}
.su-scn .grp .pc{width:56px;text-align:right;font:500 17px Georgia,serif;font-variant-numeric:tabular-nums}
.su-scn .dark{background:var(--scn-ink);color:#fff;padding:30px}
.su-scn .dark h3{color:#fff} .su-scn .dark p{color:#bdc9c9;font-size:12.5px;line-height:1.85}
.su-scn .dark .note{background:rgba(255,255,255,.07);border-left-color:var(--scn-yellow);color:#cfd9da}
.su-scn .dark .note b{color:#fff}
.su-scn .tealblk{background:var(--scn-teal);color:#fff;padding:30px}
.su-scn .tealblk h3{color:#fff;margin-bottom:14px}
.su-scn .tealblk .row{padding:13px 0;border-top:1px solid rgba(255,255,255,.25);font-size:12.5px;line-height:1.7}
.su-scn .tealblk .row b{display:block;font-size:13px;margin-bottom:3px}
.su-scn .tealblk .row span{color:#c7dddb;font-size:11.5px}
.su-scn details{border:1px solid var(--scn-line);background:var(--scn-card);margin-top:22px}
.su-scn details summary{padding:16px 22px;cursor:pointer;font-weight:700;font-size:13px;list-style:none}
.su-scn details summary::-webkit-details-marker{display:none}
.su-scn details summary:before{content:"▸ ";color:var(--scn-orange)}
.su-scn details[open] summary:before{content:"▾ "}
.su-scn details .body{padding:0 22px 22px}
.su-scn label.ctl{display:block;padding:6px 0 18px;margin-bottom:16px;border-bottom:1px solid var(--scn-line)}
.su-scn label.ctl:last-of-type{border-bottom:0;margin-bottom:0}
.su-scn label.ctl .row{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:700}
.su-scn label.ctl b{color:var(--scn-teal);font-family:Georgia,serif;font-size:16px;font-weight:500}
.su-scn label.ctl small{display:block;color:var(--scn-muted);font-size:11.5px;line-height:1.7;margin-top:10px}
.su-scn label.ctl small b{color:var(--scn-ink);font-family:inherit;font-size:11.5px}

/* 컨테이너 — 테마 본문 폭 제약을 벗어나 전체 폭을 쓴다 */
.su-scn{
  font-family: var(--font-sans, "Pretendard Variable", Pretendard, system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.su-scn *{ box-sizing: border-box; }
.su-scn main{ max-width: 1180px; margin: auto; padding: 0 0 40px; }

/* 탭 네비게이션 — 브랜드 바를 걷어낸 자리 */
.su-scn__nav{
  display: flex; gap: 2px; flex-wrap: wrap;
  margin: 0 0 24px; padding-bottom: 0;
  border-bottom: 2px solid var(--scn-line);
}
.su-scn__nav button{
  appearance: none; border: 0; background: none;
  padding: 11px 18px; margin-bottom: -2px;
  font-family: inherit; font-size: .875rem; font-weight: 700;
  color: var(--scn-muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.su-scn__nav button:hover{ color: var(--scn-ink); }
.su-scn__nav button.on{
  color: var(--scn-ink);
  border-bottom-color: var(--spotlight, #E2952B);
}

/* 출처 표기 */
.su-scn__foot{
  margin-top: 40px; padding-top: 16px;
  border-top: 1px solid var(--scn-line);
  font-size: .75rem; line-height: 1.7; color: var(--scn-muted);
}

/* 로딩·오류 */
.su-scn__loading,.su-scn__error{
  padding: 48px 20px; text-align: center;
  font-size: .875rem; color: var(--scn-muted);
}
.su-scn__error{ color: var(--breaking, #C8102E); }

@media (max-width: 820px){
  .su-scn__nav button{ padding: 10px 13px; font-size: .8125rem; }
}

/* 다크모드 ----------------------------------------------------------------
   테마 변수를 그대로 상속받으면 .dark 패널의 배경과 글자가 함께 뒤집혀
   읽을 수 없게 된다. 시뮬레이터 팔레트는 여기서 따로 정의한다.
   (테마 다크모드는 prefers-color-scheme + data-theme="auto" 를 함께 요구한다) */
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"] .su-scn{
    --scn-paper: #14181c;
    --scn-card:  #1b2026;
    --scn-ink:   #e6ecef;
    --scn-muted: #8b989e;
    --scn-soft:  #a8b4b9;
    --scn-line:  #2c3339;
    --scn-line2: #3a434a;
    --scn-yellow:#f0c968;
  }
  /* .dark 패널은 어두운 채로 남아야 한다 — --scn-ink 가 밝아지므로 따로 고정 */
  :root[data-theme="auto"] .su-scn .dark{ background: #0d1114; }
  :root[data-theme="auto"] .su-scn thead th{ background: #1f252b; }
  :root[data-theme="auto"] .su-scn .badge{ filter: brightness(.86); }
}

/* 페이지 제목 정렬 --------------------------------------------------------
   테마는 전체폭 레이아웃에서 제목만 --read(900px) 로 좁혀 가운데 정렬한다
   (main.css: `.layout--full .page-head`). 본문이 1180px 를 쓰는 이 페이지에서는
   제목만 안쪽으로 들어가 어긋나 보이므로, 시뮬레이터가 있는 문서에서만 푼다.
   body 클래스는 scenario.php 의 su_scenario_body_class() 가 붙인다. */
.su-has-scenario .layout--full .page-head,
.su-has-scenario .page-head{
  max-width: none;
  margin-inline: 0;
}