:root {
  /* 표면 고도(elevation) 사다리 — 같은 남색 계열에서 명도만 단계적으로 올린다.
     page(--bg) < 입력 우물(--field) < 카드(--surface) < 부상 요소(--surface-2).
     입력은 카드보다 '어둡게'(inset) 두어 "여기에 입력" 신호를 준다. */
  --bg: #0f1729;
  --field: #131c31;
  --surface: #1a2540;
  --surface-2: #243152;
  --text: #e8edf7;
  --muted: #9aa7c4;
  --accent: #5b8def;
  --accent-2: #6f9bf2;
  /* 경계선은 고정 남색 hex 대신 저투명 쿨화이트 — 배경에 녹아들되 필요할 때
     찾을 수 있게. 세 단계 + 포커스 링. */
  --border: rgba(226, 234, 255, .10);
  --border-soft: rgba(226, 234, 255, .055);
  --border-strong: rgba(226, 234, 255, .20);
  --ring: rgba(91, 141, 239, .55);
  --safe: #3ec98a;
  --fit: #5b8def;
  --reach: #f0a13c;
  --risk: #ef5b5b;
  /* 반경 스케일 — 입력·버튼(작게) < 카드(기본) < 알약(pill). 동심원 반경 유지용. */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  /* 다크 테마: 그림자는 약하므로 경계선이 주도하고 깊이감은 속삭이듯 얕게. */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow-lift: 0 6px 18px -6px rgba(0, 0, 0, .5);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* ---------- 타입 스케일 (iteration 81) ----------
     14px 본문에 1.25 비율. 이전에는 0.68~1.15rem 사이 15종이 뒤섞여 크기가
     계단이 아니라 죽처럼 뭉개졌다. 계단을 6칸으로 고정하고, 위계는 크기만이
     아니라 굵기·색과 함께 만든다(값=600/기본색, 라벨=500/보조색, 메타=400/흐림). */
  --fs-micro: 0.6875rem;  /* 11px — 소캡스 라벨·배지 */
  --fs-meta:  0.75rem;    /* 12px — 메타데이터 */
  --fs-sm:    0.8125rem;  /* 13px — 보조 본문 */
  --fs-body:  0.875rem;   /* 14px — 본문 기준 */
  --fs-lg:    1rem;       /* 16px — 패널 제목 */
  --fs-h3:    1.125rem;   /* 18px */
  --fs-h2:    1.375rem;   /* 22px — 화면 제목 */
  --fs-hero:  1.75rem;    /* 28px — 초점 수치 */

  /* 밀도 — '배치표' 밀도를 하나 정해 전역에 반복한다(값을 흩뿌리지 않는다). */
  --pad-panel: 13px 15px;   /* 패널 내부 */
  --gap-panel: 10px;        /* 패널 사이 */
  --gap-group: 22px;        /* 그룹 사이 — 여기서만 크게 숨쉰다 */
  --appbar-h: 52px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 터치 반응 개선(iteration 72, issue #7): 탭 시 기본 회색 사각 플래시를
   은은한 accent로 대체하고, 더블탭 확대 대기(≈300ms)를 제거해 버튼·링크·탭이
   손끝에 즉각 반응하게 한다. 데스크톱 동작에는 영향 없음. */
button, a, .tab, summary, input[type="checkbox"], input[type="radio"], label {
  -webkit-tap-highlight-color: rgba(91, 141, 239, 0.18);
  touch-action: manipulation;
}

body {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--text);
  /* 한글은 기본적으로 아무 글자에서나 줄이 끊긴다 — "합격"이 '합 / 격'으로
     쪼개지면 읽는 속도가 떨어진다. 어절 단위로 끊고, 넘치는 긴 토큰(URL·
     대학명 나열)만 예외로 강제 개행한다. */
  word-break: keep-all;
  /* break-word 로 둔다 — anywhere 는 min-content 폭을 0으로 만들어 좁은
     플렉스/그리드 칸에서 대학명이 한 글자씩 세로로 쪼개진다. */
  overflow-wrap: break-word;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 큰 제목은 자간을 살짝 조여 '문서'가 아닌 '제품' 느낌으로, 줄바꿈은 균형있게.
   본문·힌트는 pretty로 외톨이 단어(orphan)를 줄인다. */
.card > h2, .onboarding-title { text-wrap: balance; }
p, .hint, .card-lede, .onboarding-sub { text-wrap: pretty; }

.wrap { max-width: 940px; margin: 0 auto; padding: 0 16px; }

/* ---------- 아이콘 (iteration 81) ----------
   이전에는 46종의 서로 다른 컬러 이모지(🏰📊🎯🔬🧩🛟…)가 아이콘 체계 노릇을
   했다. 이모지는 폰트가 제 색을 강제하므로 남색 팔레트 위에 무지개 스티커가
   흩뿌려지고, 색이 의미가 아니라 소음이 된다("accent 하나"를 46개가 깨뜨린다).
   1.5px 스트로크 단일 세트로 교체하고 currentColor를 상속시켜, 아이콘 색이
   언제나 그 옆 글자의 위계를 따라가게 한다. */
.ic {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -0.13em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic-lg { width: 1.15em; height: 1.15em; }
.ic-safe  { color: var(--safe); }
.ic-fit   { color: var(--fit); }
.ic-reach { color: var(--reach); }
.ic-risk  { color: var(--risk); }
.ic-muted { color: var(--muted); }

/* 아이콘을 품은 컨트롤·줄은 아이콘과 글자 사이 간격을 공통으로 갖는다.
   (마크업마다 &nbsp; 를 흩뿌리지 않는다 — 간격은 레이아웃의 일이다.) */
.btn, .tab, .onboarding-steps a, .rec-chip,
.agenda-type, .cal-event-type, .adm-meta, .deadline, .announcement, .exam-day,
.enroll-day, .score-gap, .memo, .min-csat, .min-csat-plan, .ec-date,
.cost-budget-ok, .share-banner-head, .sw-toast, .undo-toast, .proj-goal,
.cb-diag, .todo-block > summary, .deep-panels > summary,
.conv-calc > summary, .naesin-calc > summary, .class-legend > summary, .disclaimer {
  display: inline-flex;
  /* 방향을 못 박는다 — .btn 이 <label> 에 붙으면(JSON 불러오기) 전역
     label{flex-direction:column} 이 그대로 남아 아이콘이 글자 위로 쌓인다. */
  flex-direction: row;
  align-items: center;
  gap: 7px;
}
/* 여러 줄로 흐르는 진단 문장은 아이콘만 첫 줄에 걸치고 글자는 자연스레 감긴다. */
.cb-diag, .min-csat, .min-csat-plan, .disclaimer, .share-banner-head { align-items: baseline; }
.btn .ic, .tab .ic { margin-left: -2px; }

/* ---------- 앱 바 (iteration 81) ----------
   이전에는 장식 그라디언트 히어로(28px 패딩 + 1.8rem 제목 + 태그라인)가 화면
   상단 ~190px를 먹고, 그 아래 sticky 내비가 또 52px를 먹었다. 정보량 0인
   영역이 첫 화면의 4분의 1이었다는 뜻이다. 이 앱은 문서가 아니라 도구이므로
   브랜드와 내비를 한 줄(52px)로 합치고 그라디언트를 걷어낸다 —
   '색은 의미를 전달할 때만 쓴다'는 원칙에 장식 그라디언트는 어긋난다. */
.appbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 23, 41, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.appbar-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: var(--appbar-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.015em;
}
.brand-mark { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; }
.brand-name { font-size: var(--fs-lg); font-weight: 650; }
.brand:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: var(--radius-sm); }
/* 태그라인 요소는 앱 바에서 제거했다 — 매 화면 반복할 정보가 아니라 푸터에서 한 번 말한다. */

/* 부드러운 anchor 스크롤 — 모션 줄임 사용자는 즉시 점프 */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* 섹션 내비 — 앱 바 안에 들어가므로 자체 배경·경계선은 없다(고도 중복 제거). */
.section-nav { flex: 1 1 auto; min-width: 0; }
.section-nav-inner {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0;
  max-width: none;
  -webkit-overflow-scrolling: touch;
}
.section-nav-inner::-webkit-scrollbar { display: none; }
.section-nav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 550;
  padding: 6px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.section-nav a { transition: color .15s var(--ease-out), border-color .15s var(--ease-out), background .15s var(--ease-out), transform .1s var(--ease-out); }
.section-nav a:hover { color: var(--text); }
.section-nav a:active { transform: scale(0.96); }
.section-nav a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.section-nav a.active {
  color: var(--text);
  background: rgba(226, 234, 255, .07);
}

main { padding: 20px 0 48px; }

/* sticky nav 높이만큼 anchor 점프 시 보정 — 본문 섹션이 nav 아래에 가려지지 않도록 */
section.card { scroll-margin-top: 56px; }

/* ---------- 탭 기반 뷰 전환 ----------
   JS가 body.views-enabled 를 켜면 한 번에 한 뷰만 표시(앱처럼 한 화면 집중).
   JS 미작동 시엔 모든 섹션이 그대로 보여 graceful degradation. */
body.views-enabled .view { display: none; }
body.views-enabled .view.view-active {
  display: block;
  animation: view-in 0.18s ease both;
}
@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.views-enabled .view.view-active { animation: none; }
}
/* 활성 탭은 '채워진 파란 알약'이 아니라 은은한 톤 변화 + accent 밑줄로 알린다.
   내비는 제품이 아니라 제품으로 가는 길이다 — 매 화면에서 가장 밝은 요소가
   내비여선 안 된다(초점은 본문의 데이터가 가져가야 한다). */
.section-nav a.active {
  color: var(--text);
  background: rgba(226, 234, 255, .07);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.section-nav a.active .ic { color: var(--accent); }

/* 첫 방문 온보딩 카드 — 상태가 전부 비어있을 때만 표시 */
.onboarding {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.onboarding-title { font-size: 1rem; color: var(--text); }
.onboarding-sub { color: var(--muted); font-size: 0.86rem; margin: 4px 0 10px; }
.onboarding-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.onboarding-steps li { display: contents; }
.onboarding-steps a {
  display: inline-block;
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
}
.onboarding-steps a:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* 단계 번호는 키캡 이모지(1️⃣)가 아니라 조판된 숫자 배지 — 폰트가 색을
   강제하지 않으므로 hover 시 링크 색을 그대로 따라간다. */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: rgba(91,141,239,.18);
  color: var(--accent-2);
  font-size: var(--fs-micro);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.onboarding-steps a:hover .step-num { background: rgba(91,141,239,.28); }

/* 저장소 경고 배너 — 온보딩·공유 배너와 같은 형태를 쓰되 왼쪽 띠와 제목만
   위험 색으로 바꾼다. 데이터가 보관되지 않는다는 사실은 흐리게 말할 수 없다. */
.storage-warning {
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--risk) 32%, var(--border));
  border-left: 3px solid var(--risk);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.storage-warn-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--risk);
}
.storage-warn-body {
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 8px 0 0;
}
.storage-warn-body strong { color: var(--text); font-weight: 700; }

/* 백업 화면 저장 상태 진단 — 라벨/값 2열, 값은 줄바꿈 가능(긴 주소). */
.storage-diagnostics {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 12px 0 16px;
  padding: var(--pad-panel);
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.diag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: var(--fs-meta);
}
.diag-label { color: var(--muted); min-width: 84px; }
.diag-value { color: var(--text); word-break: break-all; }
.diag-bad .diag-value { color: var(--risk); font-weight: 600; }

/* 전략 공유 수신 배너 — 온보딩 카드와 동일 토큰 재사용 */
.share-banner {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.share-banner-head { font-size: 1rem; font-weight: 700; color: var(--text); }
.share-preview {
  list-style: none;
  padding: 0;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.share-preview li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text);
}
.share-preview li.more { color: var(--muted); font-size: 0.82rem; padding-left: 2px; }
.share-warn { color: var(--muted); font-size: 0.82rem; margin: 8px 0 12px; }
.share-banner .row { gap: 8px; }

/* 합격 분류 범례 — <details> 네이티브 토글 */
.class-legend {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 14px;
  font-size: 0.85rem;
}
.class-legend > summary {
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  font-weight: 600;
}
.class-legend > summary::-webkit-details-marker { display: none; }
.class-legend > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  color: var(--muted);
  transition: transform .15s;
}
.class-legend[open] > summary::before { transform: rotate(90deg); }
.class-legend[open] > summary { color: var(--text); }
.legend-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 4px;
}
.legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.legend-row .badge { flex: 0 0 auto; }
.legend-row > span:nth-child(2) { flex: 1; color: var(--muted); }
.legend-pct {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 700;
  font-size: 0.82rem;
}
.legend-note { color: var(--muted); font-size: 0.78rem; margin-top: 4px; }

/* 정시 환산점수 계산기 — class-legend의 접이식 패턴 재사용 */
.conv-calc, .naesin-calc {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  margin-bottom: 14px;
  font-size: 0.85rem;
}
.naesin-calc { margin: 10px 0 4px; }
.conv-calc > summary, .naesin-calc > summary {
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  font-weight: 600;
}
.conv-calc > summary::-webkit-details-marker,
.naesin-calc > summary::-webkit-details-marker { display: none; }
.conv-calc > summary::before, .naesin-calc > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  color: var(--muted);
  transition: transform .15s;
}
.conv-calc[open] > summary::before,
.naesin-calc[open] > summary::before { transform: rotate(90deg); }
.conv-calc[open] > summary, .naesin-calc[open] > summary { color: var(--text); }

/* 심화 진단 접이식 그룹 — class-legend 접이식 패턴 재사용 */
.deep-panels {
  margin: 4px 0 14px;
}
.deep-panels > summary {
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 0.9rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.deep-panels[open] > summary {
  color: var(--text);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.deep-panels > summary::-webkit-details-marker { display: none; }
.deep-panels > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--muted);
  transition: transform .15s;
}
.deep-panels[open] > summary::before { transform: rotate(90deg); }
.deep-panels-body {
  padding: 12px;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
}
.deep-panels-body > *:last-child { margin-bottom: 0; }

.conv-body { padding: 6px 0 4px; }
.conv-body .hint { margin: 4px 0 10px; }
.conv-weights {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.conv-weights label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}
.conv-weights input { width: 100%; }
.conv-result {
  margin: 6px 0 10px;
  color: var(--text);
  line-height: 1.5;
}
.conv-score { color: var(--accent); font-variant-numeric: tabular-nums; }
.conv-scale { color: var(--muted); font-size: 0.82rem; }
.conv-miss { color: var(--muted); font-size: 0.78rem; }
.conv-empty { color: var(--muted); }
.conv-note { color: var(--muted); font-size: 0.74rem; margin: 8px 0 2px; }
@media (max-width: 480px) {
  .conv-weights { grid-template-columns: repeat(2, 1fr); }
}

/* 내신 평균 등급 계산기 — 과목 행(등급·단위·삭제) */
.naesin-body { padding: 6px 0 4px; }
.naesin-body .hint { margin: 4px 0 10px; }
.naesin-head, .naesin-row {
  display: grid;
  grid-template-columns: 1fr 1fr 36px;
  gap: 8px;
  align-items: center;
}
.naesin-head {
  margin-bottom: 4px;
  font-size: 0.74rem;
  color: var(--muted);
}
.naesin-rows { display: flex; flex-direction: column; gap: 8px; }
.naesin-row input { width: 100%; }
.ns-del {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  touch-action: manipulation;
}
.ns-del:hover { color: var(--danger, #e5484d); border-color: var(--danger, #e5484d); }
.naesin-actions { margin: 10px 0 2px; }
.naesin-result {
  margin: 10px 0;
  color: var(--text);
  line-height: 1.5;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 22px 24px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}
/* 화면 제목은 본문(14px)에서 22px로 — 이전 18px는 본문과 4px 차이라
   '더 큰 본문'으로 읽혔다. 크기·굵기·자간을 함께 움직여 확실히 앞세운다. */
.card > h2 {
  font-size: var(--fs-h2);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 4px;
}
/* 단계 번호는 제목 안의 "1." 이 아니라 위에 붙는 작은 눈썹(eyebrow)으로.
   제목 텍스트가 번호에 밀려 시작점이 흔들리지 않는다. */
.card-step {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin-bottom: 7px;
}
.card-lede {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin: 0 0 18px;
  max-width: 62ch;
}
.card-lede:empty { display: none; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-sm);
  color: var(--muted);
}
/* 필드 라벨은 값이 아니라 값의 이름 — 500/보조색으로 한 단 내린다.
   위계는 크기 하나가 아니라 크기·굵기·색 세 레버를 함께 움직여 만든다. */
label > input, label > select { font-weight: 500; }

/* ---------- 성적 입력 스트립 (iteration 81) ----------
   문제: 2자리 숫자 7개를 받는 데 180px 넓이 × 44px 높이짜리 상자 7개를 썼다.
   폰에서는 첫 화면이 통째로 거대한 빈 상자들이었고, 정작 학생이 보러 온 값
   (내신 2.35 / 백분위 83.5)은 그 아래 회색 힌트 한 줄로 눌려 있었다.
   입력은 담는 내용의 크기에 맞추고(계기판처럼 좁고 중앙 정렬된 숫자칸),
   화면의 초점은 파생된 수치가 가져간다. */
.grid-scores {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px 12px;
}
.grid-scores label { gap: 5px; font-size: var(--fs-meta); }
.grid-scores input {
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 8px 6px;
  letter-spacing: -0.01em;
}
.grid-scores .unit { color: var(--muted); font-weight: 400; }
/* 빈 칸의 안내문이 입력된 값처럼 굵고 진하면 "이미 채워져 있다"로 읽힌다 —
   자리표시자는 한 단 아래 무게로 내린다. */
.grid-scores input::placeholder { font-weight: 400; font-size: 0.82em; color: var(--muted); }

/* 프로필 요약 — 이 화면의 초점. 흐린 힌트 한 줄에서 큰 수치 두 개로. */
.profile-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  align-items: flex-start;
  margin: 18px 0 4px;
}
.profile-readout:empty { display: none; }
.readout-item { display: flex; flex-direction: column; gap: 1px; }
.readout-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.readout-value {
  font-size: var(--fs-hero);
  font-weight: 620;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.readout-value .readout-unit {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 3px;
}
.readout-item.readout-minor .readout-value { font-size: var(--fs-h3); font-weight: 600; }
.profile-readout .readout-empty { color: var(--muted); font-size: var(--fs-sm); }

input, select {
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22);
  transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
input:hover, select:hover { border-color: var(--border-strong); }
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22), 0 0 0 3px var(--ring);
}
/* 체크박스·라디오·레인지는 우물(inset)이 아니라 컨트롤이므로 필 처리 제외 */
input[type="checkbox"], input[type="radio"], input[type="range"] {
  background: none;
  box-shadow: none;
}

.btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 12px;
  font-family: inherit;
  box-shadow: var(--shadow-card);
  transition: background .15s var(--ease-out), box-shadow .15s var(--ease-out), transform .1s var(--ease-out);
}
.btn:hover { background: var(--accent-2); box-shadow: var(--shadow-lift); }
.btn:active { transform: scale(0.97); box-shadow: var(--shadow-card); }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn.ghost { background: var(--surface-2); border: 1px solid var(--border); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--border-strong); filter: brightness(1.12); }
/* 파괴적 동작은 조용해야 한다 — 되돌릴 수 없는 '전체 초기화'가 화면에서 가장
   밝은 요소가 되면 누르라는 신호가 된다. 평소엔 위험색 글자만 쓰고, 마우스를
   올려 의도를 보였을 때 비로소 채워진다. */
.btn.danger {
  background: none;
  border: 1px solid color-mix(in srgb, var(--risk) 45%, transparent);
  color: var(--risk);
  box-shadow: none;
}
.btn.danger:hover {
  background: color-mix(in srgb, var(--risk) 16%, transparent);
  border-color: var(--risk);
  box-shadow: none;
  filter: none;
}
.btn.small { padding: 5px 10px; font-size: 0.8rem; margin-top: 0; }

.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.danger-row { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.hint { color: var(--muted); font-size: 0.85rem; margin: 8px 0; }

/* 프로필 저장 영역 — 명시 저장 버튼 + 자동 저장 상태 표시(iteration 80) */
.profile-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.save-status {
  color: var(--safe, #46b06b);
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.2s ease;
}
/* 저장 실패 시 같은 자리에서 색만 바뀐다 — 성공 문구와 헷갈리지 않게. */
.save-status.save-status-bad { color: var(--risk); }
.save-status.show { opacity: 1; }
.save-hint { margin: 6px 0 0; font-size: 0.78rem; }

.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
  transition: background .15s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease-out), transform .1s var(--ease-out);
}
.tab:hover:not(.active) { color: var(--text); border-color: var(--border-strong); }
.tab:active { transform: scale(0.97); }
.tab:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- 패널 위계 3단 (iteration 81) ----------
   이전 문제: 아래 17개 진단 패널이 전부 글자 하나 다르지 않은 같은 선언
   (surface-2 / 1px border / 8px radius / 10px 12px / 0.85rem)을 복사해 쓰고 있었다.
   그래서 '치명적 관문 미통과'와 '접수비 합계'가 화면에서 완전히 같은 무게로
   보였고, 지원 전략 화면은 9,600px짜리 똑같은 상자 18개의 벽이 됐다.
   위계를 세 단으로 나눈다:
     · .panel-lead — 그 화면이 답해야 할 질문 하나. 넓은 여백 + 큰 수치.
     · (기본)      — 테두리를 걷어낸 은은한 톤 면. 상자가 아니라 '구역'.
     · .panel-flag — 색 왼쪽 띠는 실제 경고에만. 색은 의미일 때만 쓴다.
   테두리를 뺀 것이 핵심이다. 카드(surface) 안에 테두리 있는 상자(surface-2)를
   17번 겹치면 눈이 매번 경계선을 먼저 읽는다 — 구조는 보이되 튀지 않아야 한다. */
.recommend, .event-calendar, .status-summary, .readiness, .cycle-anchor,
.cost-summary, .class-balance, .pass-forecast, .final-outcome,
.final-scenarios, .whatif-sim, .track-fit, .gun-board, .enroll-forecast,
.gap-fill, .susi-capture, .exam-conflict {
  background: var(--surface-2);
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--pad-panel);
  margin: 0 0 var(--gap-panel);
  font-size: var(--fs-body);
  color: var(--text);
}

/* 왼쪽 색 띠(경고·군배치·보완 등)는 각 패널 블록에서 그 의미와 함께 선언한다. */

/* 패널 제목 — 아이콘 + 16px/600. 이전에는 0.95rem 볼드라 본문과 구분이 약했다. */
.recommend-head strong, .rd-title strong, .cost-head strong, .pf-head strong,
.fo-head strong, .fs-head strong, .wi-head strong, .cb-head strong,
.gf-head strong, .gb-head strong, .ef-head strong, .tf-head strong,
.sc-head strong, .ec-head strong, .chart-head strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-lg);
  font-weight: 620;
  letter-spacing: -0.01em;
}
.recommend-head strong .ic, .rd-title strong .ic, .cost-head strong .ic,
.pf-head strong .ic, .fo-head strong .ic, .fs-head strong .ic, .wi-head strong .ic,
.cb-head strong .ic, .gf-head strong .ic, .gb-head strong .ic, .ef-head strong .ic,
.tf-head strong .ic, .sc-head strong .ic, .ec-head strong .ic, .chart-head strong .ic {
  color: var(--muted);
  width: 1.1em;
  height: 1.1em;
}

/* ---------- 패널 그룹 ----------
   18개 형제 상자를 5개 구역으로 묶는다. 구역 라벨은 소캡스 11px/흐림 —
   읽으려 하면 읽히고, 스캔할 땐 배경으로 물러난다. */
.pgroup { margin-bottom: var(--gap-group); }
.pgroup:last-of-type { margin-bottom: 0; }
.pgroup-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin: 0 0 9px;
}
.pgroup-label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--border-soft);
}
/* 접이식 그룹의 부제는 오른쪽 끝으로 밀어 라벨과 시각적으로 대칭을 이룬다. */
.pgroup > *:last-child { margin-bottom: 0; }

/* 접이식 그룹 — 분석 패널 셋은 기본 접힘. 접힌 상태에서는 세 줄이 서로
   붙어 '나머지 화면 목차'처럼 읽혀야 하므로 그룹 간 큰 여백(22px)을 걷고
   머리카락 굵기 구분선으로만 나눈다. 열린 그룹만 다시 숨을 쉰다. */
.pgroup-fold { margin-bottom: 0; border-bottom: 1px solid var(--border-soft); }
.pgroup-fold:first-of-type { border-top: 1px solid var(--border-soft); }
.pgroup-fold[open] { margin-bottom: var(--gap-group); }
.pgroup-fold[open] + .pgroup-fold { border-top: 1px solid var(--border-soft); }
.pgroup-fold > summary {
  cursor: pointer;
  list-style: none;
  min-height: 42px;
  margin-bottom: 0;
  padding: 0 2px;
  border-radius: var(--radius-sm);
  transition: color .15s var(--ease-out);
}
.pgroup-fold > summary::-webkit-details-marker { display: none; }
.pgroup-fold > summary:hover { color: var(--text); }
.pgroup-fold > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform .15s var(--ease-out);
}
.pgroup-fold[open] > summary::before { transform: rotate(90deg); }
.pgroup-fold[open] > summary { color: var(--text); }
.pgroup-sub {
  font-weight: 500;
  letter-spacing: 0;
  font-size: var(--fs-meta);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 행마다 실제 구분선이 생겼으므로 라벨 안쪽 여백선은 지운다(선을 두 번 긋지 않는다). */
.pgroup-fold > summary::after { display: none; }
.pgroup-fold > summary .pgroup-sub { margin-left: auto; text-align: right; }
.pgroup-body { padding: 12px 0 16px; }
.pgroup-fold + .pgroup:not(.pgroup-fold) { margin-top: var(--gap-group); }
.pgroup-body > *:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .pgroup-fold > summary::before { transition: none; }
}

.recommend-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 10px; }
.recommend-head .hint { margin: 0; font-size: 0.78rem; }
.recommend-note { margin: 0 0 10px; font-size: 0.8rem; color: var(--muted); }
.recommend-note.hidden { display: none; }
.recommend-list { display: flex; flex-wrap: wrap; gap: 8px; }
.rec-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  transition: filter 0.1s;
}
.rec-chip { transition: border-color .15s var(--ease-out), transform .1s var(--ease-out), filter .15s var(--ease-out); }
.rec-chip:hover { filter: brightness(1.15); border-color: var(--border-strong); }
.rec-chip:active { transform: scale(0.97); }
.rec-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.rec-chip.safe { border-left-color: var(--safe); }
.rec-chip.fit  { border-left-color: var(--fit); }
.rec-chip.reach { border-left-color: var(--reach); }
.rec-chip .rec-name { font-weight: 600; }
/* 학과 단위 추천 — 대학명 옆에 구체 모집단위(학과)를 함께 노출. */
.rec-chip .rec-dept { color: var(--text); font-size: 0.8rem; opacity: 0.85; }
.rec-chip .rec-cut { color: var(--muted); font-size: 0.78rem; }
/* 정시: 아직 안 채운 모집군의 추천을 강조 — "지금 채워야 할 군" 신호. */
.rec-chip.empty-gun { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.rec-chip .gun-badge.empty { background: var(--accent); color: var(--bg); }
.recommend-list .empty { padding: 6px 0; }

.apply-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.apply-item {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.apply-item.safe { border-left-color: var(--safe); }
.apply-item.fit { border-left-color: var(--fit); }
.apply-item.reach { border-left-color: var(--reach); }
.apply-item.risk { border-left-color: var(--risk); }

.apply-item .info { flex: 1; }
.apply-item .title { font-weight: 600; font-size: 0.98rem; }
.apply-item .sub { color: var(--muted); font-size: 0.82rem; }
.apply-item .memo { color: var(--muted); font-size: 0.8rem; margin-top: 4px; }

.badge {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge.safe { background: rgba(62,201,138,.18); color: var(--safe); }
.badge.fit { background: rgba(91,141,239,.18); color: var(--fit); }
.badge.reach { background: rgba(240,161,60,.18); color: var(--reach); }
.badge.risk { background: rgba(239,91,91,.18); color: var(--risk); }
/* "담음" — 이미 지원 목록에 있는 학과(중립색, 합격 가능성 배지와 구분). */
.badge.added { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }

.pass-pct {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: help;
}
/* 수능최저 미충족으로 낮춰진 확률 — 위험 톤 + 게이트 자물쇠로 이유를 신호한다. */
.pass-pct.gated {
  color: var(--risk);
  border-color: var(--risk);
  background: rgba(239, 91, 91, .1);
}
/* 게이트 자물쇠는 마크업의 아이콘이 담당한다(이모지 글리프 제거). */
.pass-pct { display: inline-flex; align-items: center; gap: 4px; }

.gun-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--accent);
  vertical-align: 1px;
}

.dday-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 6px;
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
}
.dday-badge.soon  { background: rgba(239,91,91,.18); color: var(--risk); border: 1px solid var(--risk); }
.dday-badge.later { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
.dday-badge.past  { background: var(--surface); color: var(--muted); border: 1px dashed var(--border); }

.apply-item .score-gap { color: var(--accent); font-size: 0.8rem; margin-top: 4px; font-weight: 600; }
.apply-item .min-csat { font-size: 0.8rem; margin-top: 4px; font-weight: 600; }
.apply-item .min-csat.met { color: var(--safe); }
.apply-item .min-csat.unmet { color: var(--risk); }
.apply-item .min-csat.unknown { color: var(--muted); font-weight: 500; }
.apply-item .min-csat .inq-mode {
  display: inline-block; margin-left: 4px; padding: 0 6px;
  font-size: 0.72rem; font-weight: 600; vertical-align: middle;
  color: var(--muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
}
.apply-item .min-csat-plan { color: var(--accent); font-size: 0.78rem; margin-top: 2px; font-weight: 600; }
.apply-item .min-csat-plan.tough { color: var(--risk); }
.apply-item .deadline { color: var(--muted); font-size: 0.8rem; margin-top: 4px; }
.apply-item .announcement { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.apply-item .exam-day { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.apply-item .enroll-day { color: var(--accent); font-size: 0.8rem; margin-top: 2px; font-weight: 600; }
.apply-item.past { opacity: 0.55; }
.apply-item.failed-card { opacity: 0.6; border-left-style: dashed; }
.apply-item.celebrate { box-shadow: 0 0 0 1px var(--safe) inset; }

.passed-badge { font-size: 0.95rem; vertical-align: 1px; }

.status-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 8px;
  cursor: pointer;
  line-height: 1.2;
}
.status-select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.status-select.status-planned   { color: var(--muted); border-color: var(--border); }
.status-select.status-submitted { color: var(--fit);   border-color: var(--fit); background: rgba(91,141,239,.12); }
.status-select.status-passed    { color: var(--safe);  border-color: var(--safe); background: rgba(62,201,138,.14); }
.status-select.status-waitlist  { color: var(--reach); border-color: var(--reach); background: rgba(240,161,60,.14); }
.status-select.status-failed    { color: var(--risk);  border-color: var(--risk); background: rgba(239,91,91,.12); }

.cal-agenda {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.cal-agenda-head {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.cal-agenda-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.agenda-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-family: inherit;
}
.agenda-item:hover { border-color: var(--accent); }
.agenda-type { font-size: 0.75rem; font-weight: 700; }
.agenda-type.deadline { color: var(--reach); }
.agenda-type.exam { color: #a06bd4; }
.agenda-type.announcement { color: var(--safe); }
.agenda-type.enroll { color: var(--accent); }
.agenda-title { font-size: 0.88rem; font-weight: 600; flex: 1; min-width: 0; }
.agenda-track {
  font-size: 0.72rem;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}

.cal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.cal-head strong { flex: 1; text-align: center; font-size: 0.95rem; }
.cal-nav, .cal-today {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
}
.cal-nav:hover, .cal-today:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.cal-dow {
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
  padding: 4px 0;
  font-weight: 700;
}
.cal-dow.sun { color: var(--risk); }
.cal-dow.sat { color: var(--fit); }

.cal-cell {
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 6px;
  min-height: 40px;
  padding: 3px 4px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  font-size: 0.78rem;
}
.cal-cell.empty { background: transparent; cursor: default; visibility: hidden; }
.cal-cell:hover:not(.empty) { border-color: var(--accent); }
.cal-cell.today { background: var(--surface-2); font-weight: 700; }
.cal-cell.selected { background: rgba(91,141,239,.22); border-color: var(--accent); }
.cal-cell.sun .cal-day { color: var(--risk); }
.cal-cell.sat .cal-day { color: var(--fit); }
.cal-cell .cal-day { font-size: 0.78rem; line-height: 1.1; }
.cal-cell .cal-dots {
  display: flex;
  gap: 2px;
  justify-content: center;
  min-height: 6px;
  margin-top: 2px;
}
.cal-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--muted);
}
.cal-dot.deadline { background: var(--reach); }
.cal-dot.exam { background: #a06bd4; }
.cal-dot.announcement { background: var(--safe); }
.cal-dot.enroll { background: var(--accent); }

.cal-legend {
  display: flex;
  gap: 14px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.76rem;
}
.cal-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cal-events {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-event {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-family: inherit;
}
.cal-event:hover { border-color: var(--accent); }
.cal-event-type { font-size: 0.75rem; font-weight: 700; }
.cal-event-type.deadline { color: var(--reach); }
.cal-event-type.exam { color: #a06bd4; }
.cal-event-type.announcement { color: var(--safe); }
.cal-event-type.enroll { color: var(--accent); }
.cal-event-title { font-size: 0.9rem; font-weight: 600; }
.cal-event-meta { color: var(--muted); font-size: 0.75rem; }

.status-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.summary-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}
.summary-line .muted { color: var(--muted); }
.pass-strong {
  color: var(--safe);
  font-weight: 700;
  cursor: help;
}
.status-chip {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.76rem;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.status-chip.status-submitted { color: var(--fit);   border-color: var(--fit); background: rgba(91,141,239,.12); }
.status-chip.status-passed    { color: var(--safe);  border-color: var(--safe); background: rgba(62,201,138,.16); }
.status-chip.status-waitlist  { color: var(--reach); border-color: var(--reach); background: rgba(240,161,60,.14); }
.status-chip.status-failed    { color: var(--risk);  border-color: var(--risk); background: rgba(239,91,91,.12); }

/* 원서 접수 비용 요약 — 트랙별 지원료 합계 + 지출 대비 합격 기대. */
/* ---------- 전략 완성도 진단 ---------- */
.rd-head { display: flex; align-items: center; gap: 12px; }
.rd-ring { flex: 0 0 auto; }
.rd-ring .rd-track { stroke: var(--border); }
.rd-ring .rd-fill { transition: stroke-dasharray .4s ease; }
.rd-ring .rd-fill.rd-safe { stroke: var(--safe); }
.rd-ring .rd-fill.rd-reach { stroke: var(--reach); }
.rd-ring .rd-fill.rd-risk { stroke: var(--risk); }
.rd-ring .rd-score { fill: var(--text); font-size: 0.72rem; font-weight: 700; }
.rd-headmain { flex: 1 1 auto; min-width: 0; }
.rd-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.rd-title strong { font-size: 0.95rem; }
.rd-sub { color: var(--muted); font-size: 0.78rem; }
.rd-title .hint { color: var(--muted); font-size: 0.72rem; cursor: help; margin-left: auto; }
.rd-top {
  margin-top: 5px;
  padding: 6px 9px;
  border-radius: 6px;
  border-left: 3px solid var(--border);
  background: rgba(255, 255, 255, .04);
  line-height: 1.4;
}
.rd-top-label {
  display: inline-block;
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--muted);
  margin-right: 6px;
}
.rd-top-todo { border-left-color: var(--risk); }
.rd-top-warn { border-left-color: var(--reach); }
.rd-top-ok { border-left-color: var(--safe); }
.rd-top-crit {
  border-left-color: var(--risk);
  border-left-width: 4px;
  background: color-mix(in srgb, var(--risk) 12%, transparent);
}
.rd-top-crit .rd-top-label { color: var(--risk); }
.rd-crit {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--risk);
  background: color-mix(in srgb, var(--risk) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--risk) 45%, transparent);
  border-radius: 999px;
  padding: 1px 7px;
  cursor: help;
  white-space: nowrap;
}
.rd-details { margin-top: 8px; }
.rd-details > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.78rem;
  list-style: none;
}
.rd-details > summary::-webkit-details-marker { display: none; }
.rd-details > summary::before { content: "▸ "; }
.rd-details[open] > summary::before { content: "▾ "; }
.rd-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.rd-item { display: flex; align-items: baseline; gap: 8px; font-size: 0.8rem; }
.rd-icon { flex: 0 0 1.1em; text-align: center; font-weight: 700; }
.rd-item.rd-ok .rd-icon { color: var(--safe); }
.rd-item.rd-warn .rd-icon { color: var(--reach); }
.rd-item.rd-todo .rd-icon { color: var(--risk); }
.rd-item.rd-na { color: var(--muted); }
.rd-item.rd-na .rd-icon { color: var(--muted); }
.rd-name { flex: 0 0 5.2em; font-weight: 600; }
.rd-detail { color: var(--muted); }

/* ---------- 입시 캘린더 앵커 (수능 D-day + 시기 단계) ---------- */
.cyc-main { display: flex; align-items: center; gap: 12px; }
.cyc-dday {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.1;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(91, 141, 239, .12);
  color: var(--accent);
  white-space: nowrap;
}
.cyc-dday.cyc-dday, .cyc-dday.cyc-jeongsi-apply { color: var(--reach); border-color: var(--reach); background: rgba(240, 161, 60, .14); }
.cyc-dday.cyc-enroll { color: var(--risk); border-color: var(--risk); background: rgba(239, 91, 91, .12); }
.cyc-meta { flex: 1 1 auto; min-width: 0; }
.cyc-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.cyc-line strong { font-size: 0.95rem; }
.cyc-date { color: var(--muted); font-size: 0.8rem; }
.cyc-est { color: var(--reach); font-size: 0.72rem; }
.cyc-line .hint { color: var(--muted); font-size: 0.72rem; cursor: help; margin-left: auto; }
.cyc-phase { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 4px; }
.cyc-badge {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 0.74rem;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--accent);
  background: rgba(91, 141, 239, .12);
}
.cyc-badge.cyc-susi-apply, .cyc-badge.cyc-dday, .cyc-badge.cyc-jeongsi-apply { color: var(--reach); border-color: var(--reach); background: rgba(240, 161, 60, .14); }
.cyc-badge.cyc-enroll { color: var(--risk); border-color: var(--risk); background: rgba(239, 91, 91, .12); }
.cyc-focus { color: var(--muted); font-size: 0.8rem; }

.cost-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin-bottom: 8px;
}
.cost-head .hint { margin: 0; font-size: 0.76rem; cursor: help; }
.cost-rows { display: flex; flex-direction: column; gap: 3px; }
.cost-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.cost-row > span:last-child { font-variant-numeric: tabular-nums; }
.cost-row.cost-total {
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px solid var(--border);
  font-weight: 700;
}
.cost-cov { font-weight: 400; font-size: 0.76rem; color: var(--muted); }
.cost-eff {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--text);
  cursor: help;
}
.cost-eff strong { color: var(--fit); font-weight: 700; }
.cost-risky {
  margin: 6px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--risk);
}
/* 예산 상한 + 초과 컷 처방 */
.cost-budget {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.cost-budget-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cost-budget-row label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--muted);
}
.cost-budget-row input {
  width: 8.5em;
  padding: 3px 6px;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
}
.cost-budget-unit { font-size: 0.8rem; color: var(--muted); }
.cost-bar {
  margin-top: 7px;
  height: 8px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.cost-bar-fill { height: 100%; border-radius: 999px; transition: width 0.2s ease; }
.cost-bar-fill.ok { background: var(--safe); }
.cost-bar-fill.warn { background: var(--reach); }
.cost-bar-fill.over { background: var(--risk); }
.cost-budget-ok {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--safe);
}
.cost-budget-over {
  margin: 6px 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--risk);
}
.cost-budget-cut {
  margin: 4px 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text);
}
.cost-budget-pct { font-weight: 400; color: var(--muted); }
.cost-budget-note { font-weight: 400; font-size: 0.74rem; color: var(--muted); }
/* 견고성 밴드 — 헤드라인 기대값 옆 추정 오차 범위(낙관~비관). */
.pass-band {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  cursor: help;
  white-space: nowrap;
}
/* 취약 경고 — 예상 오차에 민감한 포트폴리오일 때만 노출. */
.summary-fragile {
  color: var(--reach);
  font-size: 0.8rem;
  line-height: 1.35;
}

/* ---------- 지원 밸런스 게이지 ---------- */
.cb-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.cb-head .hint { cursor: help; }
.cb-bar {
  display: flex;
  width: 100%;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}
.cb-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0f1729;
}
.cb-seg.cb-safe  { background: var(--safe); }
.cb-seg.cb-fit   { background: var(--fit); }
.cb-seg.cb-reach { background: var(--reach); }
.cb-seg.cb-risk  { background: var(--risk); }
.cb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.78rem;
}
.cb-leg { display: inline-flex; align-items: center; gap: 5px; }
.cb-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.cb-dot.cb-safe  { background: var(--safe); }
.cb-dot.cb-fit   { background: var(--fit); }
.cb-dot.cb-reach { background: var(--reach); }
.cb-dot.cb-risk  { background: var(--risk); }
.cb-diag {
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 600;
}
.cb-diag.cb-warn { color: var(--reach); }
.cb-diag.cb-info { color: var(--muted); }
.cb-diag.cb-ok   { color: var(--safe); }

/* 전형 유형 구성 — 밸런스 바(.cb-*)를 재사용하되 유형별 색만 별도(.tm-*) */
.tm-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0f1729;
}
.tm-seg.tm-gyogwa  { background: #6aa9ff; }
.tm-seg.tm-jonghap { background: #7ed0a0; }
.tm-seg.tm-nonsul  { background: #f2a65a; }
.tm-seg.tm-silgi   { background: #c99be6; }
.tm-seg.tm-etc     { background: rgba(255,255,255,.18); color: var(--muted); }
.tm-leg { display: inline-flex; align-items: center; gap: 5px; }
.tm-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.tm-dot.tm-gyogwa  { background: #6aa9ff; }
.tm-dot.tm-jonghap { background: #7ed0a0; }
.tm-dot.tm-nonsul  { background: #f2a65a; }
.tm-dot.tm-silgi   { background: #c99be6; }
.tm-dot.tm-etc     { background: rgba(255,255,255,.28); }
.tm-caution {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}

/* ---------- 합격 장수 전망(Poisson-binomial) ---------- */
.pf-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.pf-head .hint { cursor: help; }
.pf-bar {
  display: flex;
  width: 100%;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}
.pf-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0f1729;
  white-space: nowrap;
  overflow: hidden;
}
.pf-seg.pf-risk  { background: var(--risk); }
.pf-seg.pf-reach { background: var(--reach); }
.pf-seg.pf-fit   { background: var(--fit); }
.pf-seg.pf-safe  { background: var(--safe); }
.pf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.78rem;
}
.pf-leg { display: inline-flex; align-items: center; gap: 5px; }
.pf-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.pf-dot.pf-risk  { background: var(--risk); }
.pf-dot.pf-reach { background: var(--reach); }
.pf-dot.pf-fit   { background: var(--fit); }
.pf-dot.pf-safe  { background: var(--safe); }
.pf-diag {
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 600;
}
.pf-diag.pf-warn { color: var(--reach); }
.pf-diag.pf-info { color: var(--muted); }
.pf-diag.pf-ok   { color: var(--safe); }

/* 통합 최종 진로 전망 (수시 우선 접합) — pass-forecast 레이아웃 미러 */
.fo-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.fo-head .hint { cursor: help; }
.fo-bar {
  display: flex;
  width: 100%;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}
.fo-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0f1729;
  white-space: nowrap;
  overflow: hidden;
}
.fo-seg.fo-susi    { background: #8b7cf0; }
.fo-seg.fo-jeongsi { background: var(--accent); }
.fo-seg.fo-none    { background: var(--risk); }
.fo-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.78rem;
}
.fo-leg { display: inline-flex; align-items: center; gap: 5px; }
.fo-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.fo-dot.fo-susi    { background: #8b7cf0; }
.fo-dot.fo-jeongsi { background: var(--accent); }
.fo-dot.fo-none    { background: var(--risk); }
.fo-diag {
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 600;
}
.fo-diag.fo-warn { color: var(--reach); }
.fo-diag.fo-info { color: var(--muted); }
.fo-block {
  margin: 8px 0 0;
  padding: 6px 10px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text);
  background: rgba(139,124,240,.08);
  border-left: 3px solid #8b7cf0;
  border-radius: 4px;
}

/* 수능 시나리오별 최종 진로 전망 (iteration 74) */
.fsc-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fsc-row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: center;
  gap: 8px;
}
.fsc-tag {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.fsc-tag.fsc-high { color: var(--accent); }
.fsc-tag.fsc-low  { color: var(--reach); }
.fsc-bar {
  display: flex;
  width: 100%;
  height: 16px;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
}
.fsc-nums {
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  .fsc-row { grid-template-columns: 72px 1fr; }
  .fsc-nums { grid-column: 2; text-align: right; }
}

/* 점수 향상 What-if 시뮬레이터 */
.wi-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.wi-head .hint { cursor: help; }
.wi-slider {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.wi-slider input[type="range"] {
  flex: 1 1 160px;
  min-width: 140px;
  accent-color: var(--fit);
  height: 22px;
}
.wi-val {
  font-weight: 700;
  color: var(--fit);
  white-space: nowrap;
  font-size: 0.82rem;
}
.wi-body { margin-top: 8px; }
.wi-lead { font-size: 0.86rem; }
.wi-lead strong { font-weight: 700; }
.wi-gain { color: var(--safe); font-weight: 700; }
.wi-sub {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8rem;
}
.wi-chips {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.wi-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.8rem;
}
.wi-nm { font-weight: 600; margin-right: 2px; }
.wi-arr { color: var(--muted); }
.wi-p { color: var(--muted); margin-left: auto; white-space: nowrap; }

/* ---------- 안정권 보완 추천(gap-fill) ---------- */
.gap-fill {
  border-left: 3px solid var(--safe);
}
.gf-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.gf-head .hint { margin: 0; font-size: 0.78rem; }
.gf-list { display: flex; flex-wrap: wrap; gap: 8px; }
.gf-note { margin: 0; color: var(--muted); font-size: 0.82rem; }

/* ---------- 트랙 적합도 진단 (수시 vs 정시) ---------- */
.tf-prompt { margin: 0; color: var(--muted); font-size: 0.83rem; }
.tf-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.tf-head .hint { cursor: help; margin: 0; font-size: 0.78rem; }
.tf-verdict {
  font-size: 0.84rem;
  line-height: 1.45;
  margin-bottom: 10px;
  padding-left: 9px;
  border-left: 3px solid var(--border);
}
.tf-verdict.tf-susi     { border-left-color: var(--fit); }
.tf-verdict.tf-jeongsi  { border-left-color: var(--reach); }
.tf-verdict.tf-balanced { border-left-color: var(--safe); }
.tf-verdict.tf-none     { border-left-color: var(--risk); }
.tf-row { margin-bottom: 9px; }
.tf-row.lean .tf-track { font-weight: 700; }
.tf-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.tf-track { font-size: 0.82rem; }
.tf-star { color: var(--safe); font-size: 0.72rem; font-weight: 700; }
.tf-tier { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.tf-bar {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: rgba(255,255,255,.05);
  overflow: hidden;
}
.tf-fill { display: block; height: 100%; border-radius: 5px; }
.tf-fill.susi    { background: var(--fit); }
.tf-fill.jeongsi { background: var(--reach); }
.tf-best { margin-top: 4px; color: var(--muted); font-size: 0.78rem; }
.tf-cut { color: var(--text); font-weight: 600; }
.tf-cta { margin-top: 4px; font-size: 0.8rem; padding: 6px 12px; }

/* ---------- 현실적 등록 예측 ---------- */
/* 수시 납치 위험 패널 — 경고 톤(주황), 납치 확정 시 위험 톤(빨강). */
.susi-capture {
  background: rgba(240,161,60,.08);
  border-left: 3px solid var(--reach);
}
.susi-capture.certain {
  background: rgba(239,91,91,.09);
  border-left-color: var(--risk);
}
.cap-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin-bottom: 6px;
}
.cap-head .hint { margin: 0; font-size: 0.76rem; cursor: help; }
.cap-prob {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--reach);
}
.susi-capture.certain .cap-prob { color: var(--risk); }
.cap-body { margin: 0 0 8px; line-height: 1.5; color: var(--text); }
.cap-body strong { font-weight: 700; }
.cap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.cap-chips-label { font-size: 0.76rem; color: var(--muted); }
.cap-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.8rem;
  cursor: pointer;
}
.cap-chip:hover { border-color: var(--reach); }
.cap-chip.safe  { border-left-color: var(--safe); }
.cap-chip.fit   { border-left-color: var(--fit); }
.cap-chip.reach { border-left-color: var(--reach); }
.cap-chip.risk  { border-left-color: var(--risk); }
.cap-chip-pct { font-size: 0.74rem; color: var(--muted); font-weight: 600; }
/* 납치 완화 정량 처방 — '위험을 낮추는' 방향이라 safe 톤 좌측 악센트 */
.cap-reduce {
  margin: 0 0 8px;
  padding: 7px 10px;
  line-height: 1.5;
  font-size: 0.85rem;
  color: var(--text);
  background: rgba(62, 201, 138, .1);
  border-left: 3px solid var(--safe);
  border-radius: 6px;
}
.cap-reduce strong { font-weight: 700; }
.cap-reduce-pct { color: var(--muted); font-weight: 600; margin-left: 1px; }

/* 정시 군 배치판 (iteration 37) — 가·나·다 3슬롯 그리드 */
.gun-board {
  border-left: 3px solid var(--fit);
}
.gb-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin-bottom: 8px;
}
.gb-head .hint { margin: 0; font-size: 0.76rem; cursor: help; }
.gb-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 480px) {
  .gb-slots { grid-template-columns: 1fr; }
}
.gb-slot {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.gb-slot.gb-dup { border-color: var(--risk); }
.gb-gun {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
}
.gb-card, .gb-rec {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.gb-card:hover, .gb-rec:hover { border-color: var(--fit); }
.gb-card.safe, .gb-rec.safe   { border-left-color: var(--safe); }
.gb-card.fit,  .gb-rec.fit    { border-left-color: var(--fit); }
.gb-card.reach,.gb-rec.reach  { border-left-color: var(--reach); }
.gb-card.risk, .gb-rec.risk   { border-left-color: var(--risk); }
.gb-rec { border-style: dashed; background: transparent; }
.gb-rec-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .03em;
}
.gb-name {
  font-weight: 700;
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gb-major {
  font-size: 0.74rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gb-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}
.gb-pct { font-size: 0.72rem; color: var(--muted); font-weight: 600; }
.gb-empty {
  font-size: 0.8rem;
  color: var(--muted);
  padding: 2px 0;
}
.gb-slot-warn {
  margin: 0;
  font-size: 0.72rem;
  color: var(--risk);
  font-weight: 600;
}
.gb-summary {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.5;
}
.gb-unassigned {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--reach);
  line-height: 1.5;
}

/* 대학별고사 일정 충돌 패널 (iteration 32) — 보라 톤으로 납치(주황)와 구분 */
.exam-conflict {
  background: rgba(160,107,212,.10);
  border-left: 3px solid #a06bd4;
}
.ec-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin-bottom: 6px;
}
.ec-head strong { color: #a06bd4; }
.ec-head .hint { margin: 0; font-size: 0.76rem; cursor: help; }
.ec-body { margin: 0 0 10px; line-height: 1.5; }
.ec-body strong { font-weight: 700; }
.ec-group { margin-top: 8px; }
.ec-date {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 5px;
}
.ec-note { color: var(--muted); font-weight: 400; }
.ec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ec-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.8rem;
  cursor: pointer;
}
.ec-chip:hover { border-color: #a06bd4; }
.ec-chip.safe  { border-left-color: var(--safe); }
.ec-chip.fit   { border-left-color: var(--fit); }
.ec-chip.reach { border-left-color: var(--reach); }
.ec-chip.risk  { border-left-color: var(--risk); }
.ec-chip-track { font-size: 0.72rem; color: var(--muted); font-weight: 600; }
/* iteration 95: 고사 시작 시각 칩·동선 빠듯(soft) 톤 */
.ec-chip-time { font-variant-numeric: tabular-nums; font-weight: 600; color: #a06bd4; }
.exam-conflict.ec-soft { background: rgba(160,107,212,.05); border-left-style: dashed; }
.ec-group.ec-tight .ec-note { color: var(--text); }

.enroll-forecast {
  border-left: 3px solid var(--safe);
}
.ef-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin-bottom: 6px;
}
.ef-head .hint { margin: 0; font-size: 0.76rem; cursor: help; }
.ef-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.82rem;
}
.ef-summary strong { color: var(--text); font-weight: 600; }
.ef-strong { color: var(--safe) !important; font-weight: 700 !important; }
.ef-align {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
}
.ef-align.ef-align-warn { color: var(--reach); }
.ef-align.ef-align-info { color: var(--muted); }
.ef-align.ef-align-ok   { color: var(--safe); }
.ef-align-sub {
  display: inline-block;
  margin-left: 6px;
  color: var(--muted);
  font-weight: 500;
  font-size: 0.76rem;
}
.ef-list { display: flex; flex-direction: column; gap: 6px; }
.ef-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.ef-row.ef-top { border-color: var(--safe); }
.ef-rank {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.ef-top .ef-rank { color: var(--safe); border-color: var(--safe); }
.ef-main { flex: 1 1 auto; min-width: 0; }
.ef-name {
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ef-tag {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--safe);
  border: 1px solid var(--safe);
  border-radius: 999px;
  padding: 0 6px;
  margin-left: 4px;
}
.ef-bar {
  margin-top: 3px;
  height: 6px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
}
.ef-bar-fill {
  display: block;
  height: 100%;
  background: var(--safe);
  border-radius: 999px;
}
.ef-pcts { flex: 0 0 auto; font-size: 0.78rem; text-align: right; white-space: nowrap; }
.ef-pcts strong { color: var(--text); }
.ef-pcts .muted { color: var(--muted); }
.ef-moves { flex: 0 0 auto; display: inline-flex; flex-direction: column; gap: 2px; }
.ef-move {
  width: 22px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  line-height: 1;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}
.ef-move:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.ef-move:disabled { opacity: 0.3; cursor: default; }
.ef-note { margin: 8px 0 0; font-size: 0.74rem; color: var(--muted); }

.apply-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 10px;
  font-size: 0.82rem;
  color: var(--muted);
}
.apply-controls label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.apply-controls select {
  font-size: 0.82rem;
  padding: 4px 8px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
}

/* ---------- 카드별 준비 체크리스트 ----------
   카드 본문 안 <details> 네이티브 토글. 진행 칩(2/4)은 접혀 있어도 보임. */
.todo-block { margin-top: 6px; font-size: 0.8rem; }
.todo-block > summary {
  cursor: pointer;
  color: var(--muted);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  padding: 2px 0;
}
.todo-block > summary::-webkit-details-marker { display: none; }
.todo-block > summary:hover { color: var(--text); }
.todo-block[open] > summary { color: var(--text); }
.todo-progress {
  font-weight: 700;
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.todo-progress.all-done {
  color: var(--safe);
  border-color: var(--safe);
  background: rgba(62,201,138,.14);
}
.todo-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.todo-item { display: flex; align-items: center; gap: 6px; }
.todo-label {
  flex: 1;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
}
.todo-label input {
  width: auto;
  accent-color: var(--accent);
  cursor: pointer;
}
.todo-item.done .todo-label span {
  color: var(--muted);
  text-decoration: line-through;
}
.todo-del {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 4px;
  font-family: inherit;
}
.todo-del:hover { color: var(--risk); }
.todo-add {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.todo-add-input { flex: 1 1 160px; font-size: 0.8rem; padding: 5px 9px; }
.todo-add .btn.small { margin-top: 0; }

.del-btn, .edit-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0 4px;
  font-family: inherit;
}
.del-btn:hover { color: var(--risk); }
.edit-btn:hover { color: var(--accent); }

.apply-item.editing {
  display: block;
  border-left-color: var(--accent);
  background: var(--surface);
}
.edit-form { width: 100%; }
.edit-form > label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--muted); margin-top: 12px; }
.edit-actions { margin-top: 12px; }

.warning {
  background: rgba(240,161,60,.12);
  border: 1px solid var(--reach);
  color: var(--reach);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.86rem;
  margin-bottom: 14px;
}

.apply-form { border-top: 1px dashed var(--border); padding-top: 16px; }
.apply-form > label { margin-top: 12px; }

.apply-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--text);
}
.apply-preview .preview-label { color: var(--muted); font-size: 0.78rem; font-weight: 700; }
/* 중복 안내 라벨 — 위험색으로 "이미 담은 카드"임을 숨기지 않는다(iteration 89). */
.apply-preview .preview-label.warn { color: var(--risk); }
.apply-preview .preview-impact { color: var(--muted); font-size: 0.82rem; }
.apply-preview .preview-impact strong { color: var(--text); font-weight: 700; }
.apply-preview .preview-arrow { color: var(--muted); margin: 0 1px; }
.apply-preview .preview-delta {
  display: inline-block;
  font-weight: 700;
  font-size: 0.76rem;
  padding: 1px 7px;
  border-radius: 999px;
  margin-left: 2px;
}
.apply-preview .preview-delta.up   { color: var(--safe); background: rgba(62,201,138,.16); }
.apply-preview .preview-delta.down { color: var(--risk); background: rgba(239,91,91,.14); }
.apply-preview .preview-delta.flat { color: var(--muted); background: var(--surface); border: 1px solid var(--border); }
.apply-preview .swap-target {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 9px;
  margin: 0 2px;
  cursor: pointer;
  font-weight: 600;
}
.apply-preview .swap-target:hover,
.apply-preview .swap-target:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}

@keyframes swap-flash {
  0%   { box-shadow: 0 0 0 0 rgba(91,141,239,.55); }
  40%  { box-shadow: 0 0 0 6px rgba(91,141,239,.18); }
  100% { box-shadow: 0 0 0 0 rgba(91,141,239,0); }
}
.apply-item.swap-flash { animation: swap-flash 1.5s ease-out; }

.empty { color: var(--muted); font-size: 0.88rem; text-align: center; padding: 16px; }
.hidden { display: none; }

.mock-form { border-bottom: 1px dashed var(--border); padding-bottom: 16px; margin-bottom: 14px; }
.mock-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.mock-item {
  background: var(--surface-2);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.mock-item .title { font-weight: 600; font-size: 0.95rem; }
.mock-item .mock-date { color: var(--muted); font-weight: 400; font-size: 0.78rem; margin-left: 6px; }
.mock-item .sub { color: var(--muted); font-size: 0.8rem; }
.mock-avg {
  background: rgba(91,141,239,.18);
  color: var(--fit);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
}

.mock-chart {
  background: var(--surface-2);
  border: 0;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.mock-chart .chart-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 8px;
}
.mock-chart .chart-head .hint { margin: 0; font-size: 0.78rem; }
.mock-chart-svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: inherit;
}
.mock-chart-svg .bg { fill: var(--surface); }
.mock-chart-svg .grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.mock-chart-svg .grid-label { fill: var(--muted); font-size: 9px; }
.mock-chart-svg .x-label { fill: var(--muted); font-size: 9px; }
.mock-chart-svg .dot { transition: r 0.1s; cursor: pointer; }
.mock-chart-svg .dot:hover { r: 5; }
/* 정시 목표선 — 지원 카드 커트라인 가로선. 닿음(met)=초록, 미달(miss)=주황. */
.mock-chart-svg .goal-line { stroke-width: 1.2; stroke-dasharray: 5 4; opacity: 0.85; }
.mock-chart-svg .goal-line.met { stroke: var(--safe); }
.mock-chart-svg .goal-line.miss { stroke: var(--reach); }
.mock-chart-svg .goal-label { font-size: 8.5px; font-weight: 600; }
.mock-chart-svg .goal-label.met { fill: var(--safe); }
.mock-chart-svg .goal-label.miss { fill: var(--reach); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}
.legend-chip.on { color: var(--text); border-color: var(--accent); }
.legend-chip:not(.on) .legend-dot { opacity: 0.35; }
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.mock-analysis { display: flex; flex-direction: column; gap: 14px; }
/* 분석 블록도 같은 3단 위계를 따른다 — 카드(surface) 위에 테두리 상자를
   여덟 개 겹치면 눈이 매번 경계선부터 읽는다. 톤 면만 남긴다. */
.analysis-block {
  background: var(--surface-2);
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--pad-panel);
}
.analysis-block h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-lg);
  font-weight: 620;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.analysis-block h3 .ic { color: var(--muted); }
.analysis-block .muted { color: var(--muted); font-weight: 400; }
.trend-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.88rem; }
.case-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 8px; }
.case-card {
  background: var(--surface);
  border: 0;
  border-left: 3px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 12px;
}
.case-card.best { border-left-color: var(--reach); }
.case-card.median { border-left-color: var(--fit); }
.case-card.worst { border-left-color: var(--safe); }
.case-head { font-weight: 700; font-size: 0.95rem; }
.case-sub { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.case-list { color: var(--text); font-size: 0.8rem; margin-top: 6px; line-height: 1.4; }

/* 반영 구조별 환산 비교표 (iteration 50) */
/* 넓은 비교표는 자기 상자 안에서만 가로 스크롤 — 좁은 화면에서 페이지 body가
   가로로 밀리지 않게(iteration 72). */
.scen-wrap { margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scen-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.scen-table th, .scen-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--border); }
.scen-table th { color: var(--muted); font-weight: 600; font-size: 0.78rem; }
.scen-table .scen-score, .scen-table .scen-delta { text-align: right; font-variant-numeric: tabular-nums; }
.scen-table .scen-base td { color: var(--muted); }
.scen-table .scen-best td { font-weight: 700; }
.scen-table .scen-best td:first-child { box-shadow: inset 3px 0 0 var(--fit); }
.scen-tag { font-size: 0.68rem; font-weight: 700; color: var(--fit); border: 1px solid var(--fit); border-radius: 6px; padding: 0 5px; margin-left: 4px; vertical-align: middle; }
.scen-delta.up { color: var(--safe); }
.scen-delta.down { color: var(--reach); }
.scen-delta.flat { color: var(--muted); }

/* 수능 추세 예측 (iteration 59) */
.proj-block { border-left: 3px solid var(--accent); }
.proj-block h3 { display: flex; align-items: center; gap: 8px; }
.proj-conf { font-size: 0.72rem; font-weight: 600; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; font-variant-numeric: tabular-nums; }
.proj-main { font-size: 0.9rem; line-height: 1.7; }
.proj-val { color: var(--accent); font-variant-numeric: tabular-nums; }
.proj-dir { font-weight: 700; white-space: nowrap; }
.proj-dir.up { color: var(--safe); }
.proj-dir.down { color: var(--reach); }
.proj-dir.flat { color: var(--muted); }
.proj-band { font-size: 0.85rem; margin-top: 4px; font-variant-numeric: tabular-nums; }
.proj-band strong { color: var(--accent); }
.proj-goal { font-size: 0.85rem; margin-top: 6px; font-weight: 600; }
.proj-goal.met { color: var(--safe); }
.proj-goal.miss { color: var(--reach); }

.goal-rev.met { border-left: 3px solid var(--safe); }
.goal-rev.miss { border-left: 3px solid var(--reach); }
.goal-rev h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.goal-rev p { font-size: 0.9rem; line-height: 1.7; }
.goal-rev .gr-ok { color: var(--safe); font-weight: 700; }
.goal-rev .gr-gap { font-size: 0.72rem; font-weight: 600; color: var(--reach); border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; font-variant-numeric: tabular-nums; }
.goal-rev-paths { list-style: none; margin: 8px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.goal-rev-paths li { font-size: 0.86rem; line-height: 1.6; padding: 8px 10px; border-radius: 8px; background: var(--surface-2, rgba(127, 127, 127, 0.08)); }

.adm-meta {
  color: var(--muted);
  font-size: 0.76rem;
  margin: 0 0 12px;
  padding: 6px 10px;
  border-left: 2px solid var(--accent);
  background: rgba(91, 141, 239, 0.08);
  border-radius: 0 4px 4px 0;
}
.adm-meta:empty { display: none; }
.adm-controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.adm-search { position: relative; display: flex; align-items: center; }
.adm-search .ic {
  position: absolute;
  left: 12px;
  color: var(--muted);
  font-size: 1rem;
  pointer-events: none;
}
.adm-controls input[type="search"] { width: 100%; padding-left: 36px; }
.adm-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ---------- 필터 칩 (iteration 81) ----------
   버그였다: 전역 `label { flex-direction: column }` 이 `.chk` 에도 그대로
   상속돼(inline-flex 로 덮어도 방향은 column 그대로) 체크박스가 글자 *위에*
   쌓였다. 그래서 필터 줄이 "☑ ☑ 모집군 ☐ ☐ / 정시 수시 [전체] …" 처럼
   두 줄로 어긋나 보였다. 방향을 명시적으로 되돌리고, 기본 OS 체크박스 대신
   눌린 상태가 보이는 칩으로 만든다(상태는 선택이 아니라 필수다). */
.chk {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 550;
  cursor: pointer;
  padding: 6px 11px;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  transition: color .15s var(--ease-out), border-color .15s var(--ease-out), background .15s var(--ease-out);
}
.chk:hover { color: var(--text); border-color: var(--border-strong); }
.chk:has(input:checked) {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: rgba(91,141,239,.13);
}
.chk:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.chk input[type="checkbox"] {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--field);
  cursor: pointer;
  position: relative;
}
.chk input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.chk input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(43deg);
}
.chk.sel { gap: 6px; }
.chk.sel select {
  width: auto;
  padding: 2px 6px;
  font-size: var(--fs-sm);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--field);
  color: var(--text);
  cursor: pointer;
  box-shadow: none;
}
.chk.sel select:disabled { opacity: 0.5; cursor: not-allowed; }
/* ---------- 검색 결과 (iteration 81) ----------
   172건을 360px 창에 세로 한 줄로 흘리면 한 번에 4건만 보인다. 넓은 화면에선
   2열로 펼쳐 스캔 폭을 두 배로 넓히고, 행끼리는 테두리 상자가 아니라 머리카락
   굵기의 구분선으로 나눈다 — 상자 안의 상자 안의 상자를 한 겹 걷어낸다. */
.adm-results {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-height: 460px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 0;
  background: none;
}
@media (min-width: 760px) {
  .adm-results { grid-template-columns: 1fr 1fr; column-gap: 20px; }
}
.adm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 9px 10px 9px 2px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  text-align: left;
}
.adm-row { transition: background .15s var(--ease-out), color .15s var(--ease-out); }
.adm-row:hover { background: rgba(226, 234, 255, .05); }
.adm-row:active { background: rgba(226, 234, 255, .08); }
.adm-row:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--radius-sm); }
/* 이미 담은 학과 행 — 제목을 살짝 죽여 아직 안 담은 후보와 시각적으로 구분. */
.adm-row.added .adm-title { color: var(--muted); }
.adm-row .adm-title { font-weight: 600; font-size: var(--fs-body); letter-spacing: -0.008em; }
.adm-row .adm-sub { color: var(--muted); font-size: var(--fs-meta); margin-top: 2px; }
.adm-row .adm-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.adm-row .adm-right .badge { flex: 0 0 auto; }
/* 안내문은 결과 격자의 한 칸이 아니라 격자 전체에 걸치는 머리글이다. */
.adm-fit-hint { grid-column: 1 / -1; margin: 0; padding: 9px 2px; color: var(--muted); font-size: var(--fs-meta); }
/* 데이터셋 밖 교명 검색 — 막다른 "결과 없음" 대신 직접 추가 다리. 안내문은
   읽히게 좌측 정렬·행간을 주고, CTA 버튼을 그 아래 중앙에 둔다. */
.adm-noresult { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 14px; }
.adm-noresult .adm-noresult-msg {
  margin: 0; text-align: left; color: var(--muted);
  font-size: var(--fs-meta); line-height: 1.6; max-width: 44ch;
}
.adm-noresult .adm-noresult-msg strong { color: var(--text); font-weight: 600; }
.adm-noresult .adm-manual-add { flex: 0 0 auto; }
/* 커트라인은 '알약'이 아니라 값이다 — 배경 없이 고정폭 숫자로 오른쪽 정렬한다.
   한 행에 알약이 둘(분류 배지 + 커트) 있으면 무엇이 판단이고 무엇이 사실인지
   흐려진다. 판단(분류·확률)만 색을 쓰고, 사실(커트)은 조용한 숫자로 둔다. */
.adm-row .adm-cut {
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: 20px 0;
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
}
/* 최하단 크레딧 — 본문보다 한 톤 더 물러나되, 링크는 눌러야 함이 보이도록. */
.site-footer .powered-by {
  margin-top: 10px;
  font-size: 0.76rem;
  opacity: 0.7;
}
.site-footer .powered-by a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer .powered-by a:hover,
.site-footer .powered-by a:focus-visible {
  color: var(--accent);
}

.site-footer .disclaimer {
  margin-top: 8px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
  opacity: 0.85;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.sw-toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  z-index: 1000;
}
.sw-toast:hover { filter: brightness(1.1); }
.sw-toast[hidden] { display: none; }

/* 삭제 되돌리기 토스트 — sw-toast와 겹치지 않게 조금 위, 중립 배경으로 구분. */
.undo-toast {
  position: fixed;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  max-width: calc(100vw - 24px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  touch-action: manipulation;
  z-index: 1000;
}
.undo-toast:hover { filter: brightness(1.15); }
.undo-toast[hidden] { display: none; }

/* ---------- 모바일 하단 탭바 (iteration 79, issue #7) ----------
   폰에서 엄지가 닿는 하단 고정 내비. 상단 pill 내비(.section-nav)는 화면
   상단이라 한 손 조작 시 엄지가 닿지 않는다 — 좁은 폭에서만 상단 내비를 숨기고
   iOS/Android 네이티브 앱처럼 하단 탭바로 5개 섹션을 전환한다. 같은 data-target
   메커니즘을 재사용하므로 추가 JS 배선은 없다. 데스크톱에선 숨김. */
.tabbar { display: none; }

/* ---------- 인쇄 / PDF 포트폴리오 요약 ----------
   화면에서는 완전히 숨기고, 인쇄 시에만 전용 레이아웃을 노출한다.
   흑백 프린터에서도 읽히도록 배지는 색 텍스트 + 테두리 위주. */
#print-summary { display: none; }

/* ---------- 모바일 터치 사용성 (iteration 72, issue #7) ----------
   폰에서 "툭툭 가볍게" 쓰도록 입력·버튼·탭의 터치 적합성을 끌어올린다.
   데스크톱 규칙은 건드리지 않고 좁은 폭에서만 적용. */
@media (max-width: 480px) {
  /* iOS Safari는 16px 미만 입력창 포커스 시 화면을 자동 확대한다 —
     성적 7칸·카드 다수를 입력하는 이 앱에선 매 입력마다 화면이 튄다.
     모바일에서만 16px로 올려 확대 트리거를 원천 차단. */
  input, select, textarea, .todo-add-input {
    font-size: 16px;
  }

  /* 터치 타깃 ≥44px(애플 HIG) — 손끝으로 정확히 누를 수 있게. */
  .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .btn.small {
    min-height: 40px;
    padding: 8px 14px;
  }
  .tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .section-nav a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
  }
  .section-nav-inner { padding: 6px 16px; }

  /* 삭제·편집 아이콘 버튼: 아이콘은 그대로 두되 탭 영역만 확장. */
  .todo-del, .del-btn, .edit-btn {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* 체크박스는 손끝으로 누르기엔 기본 크기가 작다 — 조금 키움. */
  .todo-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
  /* 지원 카드 — 좁은 폭에서는 제목과 컨트롤이 같은 줄을 두고 다투다가 대학명이
     서너 줄로 접힌다. 컨트롤(분류·확률·상태·편집·삭제)을 한 줄로 올려 상태
     머리글로 쓰고, 본문은 폭을 통째로 갖게 한다. */
  .apply-item { flex-wrap: wrap; gap: 8px; }
  .apply-item > .info { flex: 1 1 100%; }
  .apply-item > .row { flex: 1 1 100%; order: -1; gap: 6px; }
  .apply-item > .row .status-select { margin-left: auto; }

  .chk input[type="checkbox"] { width: 17px; height: 17px; }
  .chk input[type="checkbox"]:checked::after { left: 5.5px; top: 2px; width: 4px; height: 9px; }

  /* 폰에서는 카드 안쪽 여백을 줄여 가로 폭을 내용에 돌려준다. */
  .card { padding: 16px 15px 18px; }
  .card > h2 { font-size: 1.25rem; }
  .card-lede { margin-bottom: 14px; }

  /* 성적 7칸은 3열 고정 — auto-fill 로는 폰 폭에서 2열까지만 잡혀 네 줄이 됐다.
     숫자는 길어야 다섯 글자라 3열에서도 충분히 읽힌다(4줄 → 3줄). */
  .grid-scores { grid-template-columns: repeat(3, 1fr); gap: 9px 8px; }
  .grid-scores label { font-size: 0.7rem; }
  .grid-scores input { padding: 8px 4px; }
  .profile-readout { gap: 12px 20px; }
  .readout-value { font-size: 1.5rem; }
}

/* 하단 탭바: 좁은 폭에서만 상단 내비를 대체한다(폰·소형 기기). */
@media (max-width: 640px) {
  /* 상단 pill 내비는 하단 탭바로 대체 — 중복·상단 도달 부담 제거 */
  .section-nav { display: none; }

  .tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: rgba(15, 23, 41, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbar-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 8px 2px;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
    background: none;
    border: 0;
    border-top: 2px solid transparent;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s var(--ease-out), background .15s var(--ease-out), border-color .15s var(--ease-out);
  }
  .tabbar-icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .tabbar-item:active { background: rgba(91,141,239,.10); }
  .tabbar-item.active {
    color: var(--text);
    border-top-color: var(--accent);
    background: rgba(91,141,239,.12);
  }
  .tabbar-item:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

  /* 하단 고정 탭바가 콘텐츠 끝을 가리지 않게 본문에 여백 확보 */
  main { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

  /* 토스트를 탭바 위로 띄운다(겹침 방지) */
  .sw-toast { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  .undo-toast { bottom: calc(128px + env(safe-area-inset-bottom, 0px)); }
}

@media print {
  .appbar, .site-footer,
  main.wrap, #sw-update, .sw-toast, #undo-toast, .undo-toast { display: none !important; }

  html, body { background: #fff !important; color: #111 !important; margin: 0; }
  @page { margin: 14mm; }

  #print-summary {
    display: block !important;
    color: #111;
    font-size: 10.5pt;
    line-height: 1.4;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #print-summary .ps-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; border-bottom: 2px solid #111; padding-bottom: 6px; margin-bottom: 10px;
  }
  #print-summary .ps-head h2 { font-size: 16pt; margin: 0; }
  #print-summary .ps-date { font-size: 9pt; color: #555; }
  #print-summary .ps-section {
    font-size: 11.5pt; margin: 14px 0 6px; padding-bottom: 2px;
    border-bottom: 1px solid #bbb;
  }
  #print-summary .ps-profile { display: flex; flex-wrap: wrap; gap: 6px 10px; }
  #print-summary .ps-pchip {
    border: 1px solid #ccc; border-radius: 4px; padding: 2px 7px; font-size: 9.5pt;
  }
  #print-summary .ps-pchip b { color: #555; font-weight: 600; margin-right: 3px; }
  #print-summary .ps-track { font-size: 10.5pt; margin: 12px 0 5px; }
  #print-summary .ps-count { color: #555; font-weight: 400; }
  #print-summary .ps-empty { color: #777; font-size: 9.5pt; margin: 4px 0; }
  #print-summary .ps-table {
    width: 100%; border-collapse: collapse; margin-bottom: 6px;
    page-break-inside: auto;
  }
  #print-summary .ps-table th, #print-summary .ps-table td {
    border: 1px solid #ccc; padding: 4px 6px; text-align: left;
    vertical-align: top; font-size: 9.5pt;
  }
  #print-summary .ps-table th { background: #f0f0f0; font-weight: 600; }
  #print-summary .ps-table tr { page-break-inside: avoid; }
  #print-summary .ps-num { text-align: right; white-space: nowrap; }
  #print-summary .ps-sub { color: #666; font-size: 8.5pt; }
  #print-summary .ps-badge {
    display: inline-block; border-radius: 4px; padding: 1px 6px;
    font-size: 9pt; font-weight: 600; border: 1px solid currentColor;
  }
  #print-summary .ps-safe  { color: #1d8a5a; }
  #print-summary .ps-fit   { color: #2f5fc0; }
  #print-summary .ps-reach { color: #b9700f; }
  #print-summary .ps-risk  { color: #c63232; }
  #print-summary .ps-min-unmet { color: #c63232; font-size: 8.5pt; font-weight: 700; }
  #print-summary .ps-min-met { color: #1d8a5a; font-size: 8.5pt; font-weight: 700; }
  #print-summary .ps-foot {
    margin-top: 14px; padding-top: 6px; border-top: 1px solid #bbb;
    color: #666; font-size: 8.5pt;
  }
}

/* ---------- 상호작용 마감(iteration 78) ----------
   전 컨트롤에 눌림·키보드 포커스 상태를 일관되게 부여한다. 하드코딩 hex 대신
   토큰만 쓰며, 계산·데이터·인프라 변경 0(순수 CSS). */

/* D-day 숫자는 자릿수가 흔들리지 않게 고정폭 숫자 */
.cyc-dday, .pass-pct, .gun-badge { font-variant-numeric: tabular-nums; }

/* 접이식 요약(<summary>)도 키보드 포커스가 보이게 */
summary:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 모션 줄임 선호 사용자: 이동·확대(변형)는 끄고 색·투명도만 남긴다. */
@media (prefers-reduced-motion: reduce) {
  .btn, .tab, .section-nav a, .rec-chip, .adm-row { transition-property: background, color, border-color, box-shadow, filter; }
  .btn:active, .tab:active, .section-nav a:active, .rec-chip:active, .adm-row:active { transform: none; }
}

/* 수능 가채점 최저 체크 (iteration 93) — conv-calc 접이식 패턴 재사용 */
.gachae-check { margin: 10px 0 14px; }
.gachae-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.gachae-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}
.gachae-grid input { width: 100%; }
@media (max-width: 560px) {
  .gachae-grid { grid-template-columns: repeat(3, 1fr); }
}
.gachae-sum { margin: 4px 0 8px; }
.gachae-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gachae-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.gachae-name { font-weight: 600; color: var(--text); }
.gachae-detail { color: var(--muted); font-size: 0.8rem; }
.gachae-adv { font-size: 0.8rem; font-weight: 600; flex-basis: 100%; }
.gachae-tip { margin: 8px 0 0; font-size: 0.8rem; color: var(--muted); }
/* iteration 94 — 가채점 전략 전반 반영 토글 */
label.gachae-apply {
  display: flex; flex-direction: row; align-items: flex-start; gap: 8px;
  margin: 10px 0 6px; font-size: .9rem; line-height: 1.4; cursor: pointer; color: var(--text);
}
label.gachae-apply input { padding: 0; margin-top: 3px; width: 18px; height: 18px; flex: none; }
.gachae-applied { margin: 8px 0 0; font-size: .85rem; color: var(--safe); }
.gachae-applied .ic { vertical-align: -2px; margin-right: 4px; }