/*
 * 진로 검사 결과지 디자인 — 원장님이 주신 시안(`docs/result-ui-시안.html`)을 옮긴 것.
 *
 * ★ 모든 규칙을 **`.rui` 안으로 가둔다.** 결과지는 원장 화면(앱 셸 안)과 학생 페이지에서
 *   함께 쓰이는데, 시안의 색·글꼴을 전역에 풀면 다른 탭이 통째로 틀어진다.
 *
 * ★ 시안의 **사이드바·상단바는 옮기지 않았다.** 우리 앱에 이미 있고,
 *   시안의 「REPORT MENU」가 하는 일은 결과지 탭(`.rt-bar`)이 이미 하고 있다.
 *
 * ★ 원장님 지시(2026-08-18): **"내용을 줄이거나 자르지 마라."**
 *   그래서 시안에 자리가 없던 것들(영역별 해설·검사 총평·상담 질문·숫자 읽는 법)을 담을
 *   `.rui-note`, `.rui-longtext`, `.rui-table` 같은 자리를 새로 만들었다. 디자인을 이유로
 *   내용을 빼지 말 것.
 */

.rui {
  --navy: #102642;
  --blue: #2e68ff;
  --blue-soft: #eaf1ff;
  --mint: #00b99c;
  --mint-soft: #e5faf5;
  --purple: #7658eb;
  --purple-soft: #f0edff;
  --coral: #ff716d;
  --yellow: #ffb72b;
  --rui-ink: #17283d;
  --rui-muted: #6b7b90;
  --rui-line: #dce5ef;
  --rui-card: #ffffff;

  color: var(--rui-ink);
  line-height: 1.55;
}

.rui * { box-sizing: border-box; }
.rui h1, .rui h2, .rui h3, .rui p { margin-top: 0; }
.rui .eyebrow { color: var(--mint); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.rui .micro { color: var(--rui-muted); font-size: 11px; }
.rui .muted { color: var(--rui-muted); }

/* ── 맨 위 요약 (시안의 hero) ── */
.rui-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(280px, .82fr); gap: 22px;
  padding: clamp(22px, 3.4vw, 42px); margin-bottom: 22px;
  border: 1px solid #dce9f3; border-radius: 26px; overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 52%, #eafbf7 100%);
  box-shadow: 0 16px 44px rgba(16, 38, 66, .08);
}
.rui-hero::before {
  content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -240px;
  border: 1px solid rgba(0,185,156,.18); border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(0,185,156,.05), 0 0 0 90px rgba(0,185,156,.035);
}
.rui-hero > * { position: relative; z-index: 1; }
.rui-hero h1 { margin: 8px 0 12px; color: var(--navy); font-size: clamp(26px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -.055em; }
.rui-hero .lead { max-width: 640px; margin-bottom: 16px; color: #587089; font-size: 14px; }
.rui-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.rui-badge { display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 999px; color: #216b73; background: var(--mint-soft); font-size: 11px; font-weight: 800; }
.rui-badge.blue { color: #285bc7; background: var(--blue-soft); }
.rui-badge.purple { color: #6145c7; background: var(--purple-soft); }
.rui-badge.warn { color: #a3243b; background: #fdf0f3; }

.rui-herocard { padding: 20px; border: 1px solid rgba(255,255,255,.75); border-radius: 20px; background: rgba(255,255,255,.78); box-shadow: 0 14px 32px rgba(16,38,66,.08); }
.rui-herocard-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 15px; }
.rui-herocard-head span { color: var(--rui-muted); font-size: 11px; font-weight: 700; }
.rui-herocard-head strong { display: block; margin-top: 3px; color: var(--navy); font-size: 16px; letter-spacing: -.04em; }
.rui-ringwrap { display: flex; align-items: center; gap: 16px; }
.rui-ring { width: 104px; height: 104px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; position: relative; }
.rui-ring::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
.rui-ring-in { position: relative; z-index: 1; text-align: center; }
.rui-ring-in strong { display: block; color: var(--navy); font-size: 23px; line-height: 1; letter-spacing: -.06em; }
.rui-ring-in span { display: block; margin-top: 4px; color: var(--rui-muted); font-size: 10px; font-weight: 700; }
.rui-ringcopy { min-width: 0; }
.rui-ringcopy strong { display: block; margin-bottom: 4px; color: var(--navy); font-size: 14px; }
.rui-ringcopy p { margin: 0; color: var(--rui-muted); font-size: 12px; }
.rui-herofoot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rui-line); }
.rui-herofoot span { color: var(--rui-muted); font-size: 11px; }
.rui-herofoot strong { color: var(--navy); }

/* ── 구역 머리 ── */
.rui-sechead { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.rui-sectitle { display: flex; align-items: center; gap: 10px; }
.rui-secno { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--blue); font-size: 11px; font-weight: 800; }
.rui-sechead h2 { margin-bottom: 4px; font-size: 20px; line-height: 1.25; letter-spacing: -.045em; color: var(--navy); }
.rui-sechead p { margin: 0; color: var(--rui-muted); font-size: 12px; }

/* ── 카드 ── */
.rui .card { border: 1px solid var(--rui-line); border-radius: 20px; background: var(--rui-card); box-shadow: 0 8px 25px rgba(16,38,66,.045); padding: 22px; }
.rui .card h2 { color: var(--navy); font-size: 20px; letter-spacing: -.045em; }
.rui-insight { padding: 24px; border: 1px solid #d6f0e9; border-radius: 20px; background: linear-gradient(135deg, #f4fffc, #fff); }
.rui-insight-label { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; color: var(--mint); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.rui-insight-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(0,185,156,.12); }
.rui-insight blockquote { margin: 0 0 16px; color: var(--navy); font-size: 21px; font-weight: 800; line-height: 1.38; letter-spacing: -.05em; }
.rui-insight p { margin: 0 0 8px; color: #5e7386; font-size: 13.5px; line-height: 1.75; }
.rui-evidence { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.rui-evidence span { padding: 6px 9px; border-radius: 8px; color: #2c7d72; background: #dff7f1; font-size: 11px; font-weight: 800; }
.rui-evidence span:nth-child(2) { color: #365ec7; background: #e8efff; }
.rui-evidence span:nth-child(3n) { color: #7857c7; background: #f0ecff; }

.rui-grid2 { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 18px; }
.rui-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.rui-highlight { padding: 15px; border: 1px solid var(--rui-line); border-radius: 15px; background: #fff; }
.rui-highlight small { color: var(--rui-muted); font-size: 10px; font-weight: 700; }
.rui-highlight strong { display: block; margin-top: 3px; color: var(--navy); font-size: 17px; letter-spacing: -.05em; }
.rui-highlight .mini { height: 5px; margin-top: 10px; border-radius: 99px; background: #e5edf5; overflow: hidden; }
.rui-highlight .mini i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--blue)); }

/* ── 영역별 막대 ── */
.rui-legend { display: flex; gap: 9px; align-items: center; color: var(--rui-muted); font-size: 10px; white-space: nowrap; }
.rui-legend i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--mint); }
.rui-legend b { color: var(--navy); }
.rui-scorelist { display: grid; gap: 4px; }
.rui-scorerow { display: grid; grid-template-columns: 132px minmax(80px, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rui-line); }
.rui-scorerow:last-child { border-bottom: 0; }
/* ★ 영역 이름은 상담에서 가장 먼저 짚는 값이라 굵고 크게 (원장님 요청) */
.rui-scorename { color: var(--navy); font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.rui-track { position: relative; height: 9px; border-radius: 999px; background: #e9eff5; }
/* 가운데 선 = 또래 평균 자리. T점수를 쓰는 검사에서만 의미가 있어 클래스로 켠다 */
.rui-track.mid::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px; background: #aebed0; opacity: .8; }
.rui-fill { position: absolute; top: 0; left: 0; height: 100%; min-width: 3px; border-radius: 999px; background: linear-gradient(90deg, #00b99c, #3670ff); }
.rui-nums { display: flex; gap: 10px; align-items: baseline; white-space: nowrap; }
.rui-num { color: var(--navy); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rui-num small { display: block; color: var(--rui-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; }
/*
 * ★ 또래 비교값(T점수·백분위)은 크게, 원점수는 작고 흐리게 (2026-08-19).
 *   같은 크기로 두면 두 숫자를 견주게 되는데 서로 견줄 수 있는 값이 아니다.
 *   원장님이 두 번 헷갈리셨고, 학부모가 함께 보는 화면이다.
 */
.rui-num.big { font-size: 15px; color: var(--blue); }
.rui-num.big small { color: #6b7b90; font-size: 9px; }
.rui-num.raw { font-size: 11px; color: #97a6b8; font-weight: 700; }
.rui-num.raw small { color: #b3bfcd; font-size: 8.5px; }
/* ★ 또래 대비 판정 — **낮은 것도 감추지 않는다** (원장님 지시 2026-08-18).
   다만 색으로 겁주지 않는다. 낮음은 주황 계열로, "고칠 수 있는 것"이라는 인상을 준다. */
.rui-verdict { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
/* 교육부 원본과 같은 5단계 — 매우높음 / 높음 / 보통 / 약간낮음 / 낮음 */
.rui-verdict.high2 { color: #0f6e57; background: #d6f6ec; }
.rui-verdict.high { color: #1c7d63; background: #e6f8f2; }
.rui-verdict.mid { color: #4e657d; background: #eef2f8; }
.rui-verdict.low { color: #9a5b16; background: #fdf0e2; }
.rui-verdict.low2 { color: #a3243b; background: #fdf0f3; }

/* 학과·직업 그림 — 원장님이 직접 만드신 파일(`/career-img/`)을 쓴다.
   ★ 파일이 없으면 JS가 통째로 숨긴다. 깨진 그림이 학부모 화면에 뜨면 안 된다. */
.rui-thumb { width: 100%; aspect-ratio: 4 / 3; margin: -17px -17px 12px; width: calc(100% + 34px);
  object-fit: cover; border-radius: 16px 16px 0 0; display: block; background: #eef2f8; }
/* 보완이 필요한 영역 모음 */
.rui-todo { display: grid; gap: 12px; margin-top: 12px; }
.rui-todo-item { padding: 16px 18px; border: 1px solid #f2ddc2; border-radius: 15px; background: #fffcf6; }
.rui-todo-item .t { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: #8a5a1a; font-size: 14px; font-weight: 800; }
.rui-todo-item .b { color: #52657b; font-size: 13px; line-height: 1.85; white-space: pre-wrap; }

.rui-level { padding: 3px 8px; border-radius: 999px; background: var(--blue-soft); color: #285bc7; font-size: 11px; font-weight: 800; }

/* ★ 영역별 해설 — 시안에 없던 자리. 접었다 펼 수 있게 해서 표를 짧게 유지한다.
     내용을 빼는 게 아니라 **접는 것**이다. */
.rui-note { grid-column: 1 / -1; margin: 0 0 6px; }
.rui-note > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #f2f6fb; color: #4e657d; font-size: 11.5px; font-weight: 700; }
.rui-note > summary::-webkit-details-marker { display: none; }
.rui-note > summary::after { content: "펼치기 ▾"; color: var(--blue); font-weight: 800; }
.rui-note[open] > summary::after { content: "접기 ▴"; }
.rui-note-body { margin-top: 10px; padding: 14px 16px; border: 1px solid var(--rui-line); border-radius: 14px; background: #fbfdff; font-size: 12.5px; line-height: 1.8; white-space: pre-wrap; }
.rui-note-body .k { display: inline-block; margin-bottom: 3px; color: var(--blue); font-weight: 800; }
.rui-note-body .blk { margin-bottom: 10px; }
.rui-note-body .blk:last-child { margin-bottom: 0; }

/* ── 긴 글(검사 총평 등) ── */
.rui-longtext { display: grid; gap: 12px; }
.rui-long { padding: 16px 18px; border: 1px solid var(--rui-line); border-radius: 15px; background: #fbfdff; }
.rui-long .t { margin-bottom: 6px; color: var(--navy); font-size: 13.5px; font-weight: 800; }
.rui-long .b { color: #52657b; font-size: 13px; line-height: 1.85; white-space: pre-wrap; }

/* ── 표(숫자 읽는 법 등) ── */
.rui-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rui-table td { padding: 11px 10px; border-bottom: 1px solid var(--rui-line); vertical-align: top; line-height: 1.75; }
.rui-table tr:last-child td { border-bottom: 0; }
.rui-table td:first-child { width: 96px; color: var(--navy); font-weight: 800; white-space: nowrap; }

/* ── 학과 카드 ── */
/* ★ 원장님 요청(2026-08-19): **한 줄에 두 칸**.
   auto-fill 로 두니 5장이 좁게 깔려 글씨만 세로로 길어졌다. 2칸으로 고정한다. */
/* ══════════════════════════════════════════════════════════
   추천 학과 — **경계를 3단으로** 나눈다

   ★ 원장님 지적(2026-08-19): "계열 사이에도 경계 구분선이 있어야 해.
     큰 카테고리 구분선 있어야 하고 그 안에 세분화된 내용 구분해주는 부분도 있어야 해"

     ① 계열 묶음  .rui-fieldgroup  — 가장 굵은 경계(위쪽 2px 남색 선)
     ② 학과 카드  .rui-dept        — 테두리 있는 흰 카드
     ③ 카드 안 항목 .rui-deptbox   — 옅은 박스 + 왼쪽 파란 선

   경계를 하나만 두면 전부 한 덩어리로 보인다. 굵기를 ①>②>③ 순으로 **분명히 다르게** 둘 것.
   ══════════════════════════════════════════════════════════ */

/* ① 계열 묶음 */
.rui-fieldgroup { margin-top: 26px; padding-top: 16px; border-top: 2px solid var(--navy); }
.rui-fieldgroup:first-of-type { margin-top: 16px; }
.rui-fieldhead { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
.rui-fieldhead .rui-thumb { width: 54px; height: 40px; margin: 0; flex: none; border-radius: 8px; object-fit: cover; }
.rui-fieldhead .tt { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.rui-fieldhead .nm { color: var(--navy); font-size: 17px; font-weight: 800; letter-spacing: -.04em; }
.rui-fieldhead .cnt {
  padding: 2px 9px; border-radius: 999px;
  background: var(--blue-soft); color: var(--blue); font-size: 11px; font-weight: 800;
}

/* ② 학과 카드 — 계열 안에서 카드끼리도 끊겨 보이게 테두리를 살린다 */
.rui-deptgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.rui-dept { padding: 17px; border: 1px solid #ccd8e6; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(16, 38, 66, .05); }
.rui-dept .type { color: var(--mint); font-size: 10px; font-weight: 800; }
.rui-dept h3 { margin: 7px 0 6px; font-size: 16px; letter-spacing: -.035em; color: var(--navy); }
.rui-dept p { margin: 0 0 12px; color: var(--rui-muted); font-size: 11.5px; line-height: 1.7; }
.rui-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.rui-chip { padding: 4px 7px; border-radius: 6px; color: #4e6680; background: #f0f4f8; font-size: 10px; font-weight: 700; }
.rui-deptmeta { display: grid; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rui-line); color: #52657b; font-size: 11px; }

/* ══════════════════════════════════════════════════════════
   학과 카드 안의 **구역 나누기**

   ★ 원장님 지적(2026-08-19): "내용마다 구역을 구분하는 박스 또는 선이 없어"
     실린 정보는 맞는데 항목 제목이 본문과 같은 크기라 전부 한 덩어리로 보였다.
     구분선(border-top)만으로는 부족했다 — 낮에도 "칸과 칸 사이 줄이 너무 흐리다"고
     같은 종류의 지적을 받았다. 그래서 **옅은 박스 + 왼쪽 강조선 + 라벨**로 바꾼다.
   ══════════════════════════════════════════════════════════ */

/* 연봉·취업률 — 숫자 두 칸은 가로로 나란히 */
.rui-deptfacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.rui-deptfacts > div {
  flex: 1 1 auto; padding: 7px 11px; border-radius: 10px;
  background: var(--blue-soft); color: var(--navy); font-size: 11.5px; font-weight: 700;
}
.rui-deptfacts b { display: block; color: #5f76a0; font-size: 10px; font-weight: 800; margin-bottom: 1px; }

/* 나머지 구역 — 옅은 박스로 감싸 확실히 끊어 준다 */
.rui-deptbox {
  margin-top: 10px; padding: 11px 13px;
  border: 1px solid var(--rui-line); border-left: 3px solid var(--blue);
  border-radius: 4px 12px 12px 4px; background: #fbfcfe;
  color: #4a5d73; font-size: 11.5px; line-height: 1.75;
}
.rui-deptlabel {
  margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px dashed var(--rui-line);
  color: var(--navy); font-size: 11.5px; font-weight: 800; letter-spacing: -.02em;
}
.rui-deptlabel .cnt { color: var(--blue); font-weight: 800; }
.rui-deptbox b { color: var(--navy); }
.rui-deptbox .rui-chips { margin-top: 2px; }
/* 박스 안의 펼침은 박스와 같은 폭을 쓴다 (grid 자식이 아니라 block 이므로) */
.rui-deptbox .rui-note { display: block; }
.rui-deptmeta b { color: var(--navy); }

/* ── 안내 ── */
.rui-final { margin-top: 16px; padding: 16px 19px; border: 1px solid #f4e2af; border-radius: 15px; color: #816a2a; background: #fffaf0; font-size: 12.5px; line-height: 1.8; }
.rui-final strong { color: #5d4a12; }
.rui-warn { margin-top: 12px; padding: 14px 16px; border: 1px solid #f6cdd6; border-radius: 15px; color: #a3243b; background: #fdf0f3; font-size: 12.5px; line-height: 1.8; }
.rui-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rui-line); color: var(--rui-muted); font-size: 10.5px; }

@media (max-width: 900px) {
  .rui-hero, .rui-grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .rui-highlights { grid-template-columns: 1fr; }
  .rui-deptgrid { grid-template-columns: 1fr; }  /* 휴대폰에서는 한 칸 */
  .rui-scorerow { grid-template-columns: 96px minmax(60px, 1fr); }
  .rui-nums { grid-column: 1 / -1; }
}
@media print {
  /* 인쇄에서는 접힌 해설도 모두 펼쳐 나가야 한다 — 종이에는 "펼치기"가 없다 */
  .rui-note[open] > summary, .rui-note > summary { display: none; }
  .rui-note .rui-note-body { display: block !important; }
  .rui .card, .rui-hero, .rui-insight { box-shadow: none; }
}


/* ══════════════════════════════════════════════════════════════
   생기부 맞춤 대학 추천 결과지 — **원장 화면과 학생 공유 링크가 같이 쓴다.**

   ★ 2026-08-19 — 원래 index.html 안에만 있어서 학생 링크에서는 모양자가 없었다.
     기능은 result-render.js 로, 모양은 이 파일로 옮겨 양쪽이 같은 결과지를 쓴다.
     색 이름은 화면마다 다르므로 **반드시 대체값을 함께** 적는다(var(--x, #fff)).
   ══════════════════════════════════════════════════════════════ */
.rm-head { background: var(--accent-soft, #eef3fe); border: 1px solid var(--accent, #3566f0); border-radius: 10px; padding: 13px 16px; margin-bottom: 10px; }
.rm-head .rm-track { font-size: 13px; font-weight: 800; color: var(--accent-text, #8a642b); margin-bottom: 5px; }
.rm-head .rm-overview { font-size: 13px; color: var(--text, #10213d); line-height: 1.7; }
.rm-head .rm-funnel { font-size: 11.5px; color: var(--muted, #6f7d91); margin-top: 7px; }
.rm-six { background: var(--card2, #f4f7fb); border: 1px solid var(--accent, #3566f0); border-radius: 10px; padding: 12px 15px; margin-bottom: 12px; }
.rm-box-title { font-size: 12px; font-weight: 800; color: var(--accent-text, #8a642b); margin-bottom: 6px; }
.rm-six-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0; }
.rm-six-item { font-size: 12px; }
.rm-six-why { font-size: 12.5px; color: var(--text, #10213d); line-height: 1.7; }
.rm-cards { display: flex; flex-direction: column; gap: 8px; }
.rm-card { border: 1px solid var(--line, #e3e9f2); border-radius: 10px; padding: 11px 14px; background: var(--card, #fff); break-inside: avoid; }
.rm-card.six { border-color: var(--accent, #3566f0); box-shadow: 0 0 0 1px var(--accent, #3566f0) inset; }
.rm-card-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
/* ── 대학 이름줄 판정 색 바탕바 (2026-08-20) ────────────────
   ★ 학부모 결과지(shared.html)는 이 위에 자기 색을 덧칠한다.
     여기서는 원장님 화면에서 깨지지 않을 만큼만 옅게 깐다. */
.rm-card.초안정   .rm-card-top { background: #e2f5f0; }
.rm-card.안정     .rm-card-top { background: var(--safe-bg, #e9fbf5); }
.rm-card.적정     .rm-card-top { background: var(--mid-bg, #fff4db); }
.rm-card.상향     .rm-card-top { background: #fdf0e3; }
.rm-card.상향도전 .rm-card-top { background: var(--reach-bg, #fff0f1); }
.rm-card [class*="rm-card-top"] { border-radius: 9px; padding: 8px 11px; margin: -3px -3px 7px; }
.rm-card .rm-no { font-size: 11px; font-weight: 800; color: var(--muted, #6f7d91); font-variant-numeric: tabular-nums; }
.rm-card .rm-univ { font-size: 14px; font-weight: 800; color: var(--text, #10213d); }
.rm-card .rm-dept { font-size: 13px; font-weight: 700; color: var(--accent-text, #8a642b); }
.rm-card .rm-sixtag { font-size: 10.5px; font-weight: 800; color: var(--btn-fg, #fff); background: var(--accent, #3566f0); border-radius: 4px; padding: 1px 6px; }
.rm-card .rm-meta { font-size: 11.5px; color: var(--muted, #6f7d91); margin-bottom: 6px; }
.rm-card .rm-reason { font-size: 12.5px; color: var(--text, #10213d); line-height: 1.7; }
.rm-card .rm-evidence { font-size: 12px; color: var(--muted, #6f7d91); line-height: 1.65; margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--line, #e3e9f2); }
.rm-card .rm-evidence b { color: var(--accent-text, #8a642b); }

/* 합격선 눈금(.rm-gauge …) 꾸밈은 **`gauge.css` 로 옮겼다** (2026-08-21).
   수시 전략 분석지가 이 파일을 안 써서 눈금이 통째로 빠져 있었기 때문이다.
   눈금을 쓰는 화면은 `gauge.css` 를 따로 링크한다. */
.scale-note { font-size: 12px; color: var(--mid, #a36c16); background: var(--mid-bg, #fff4db); border: 1px solid var(--mid-line, #f1dcae); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; line-height: 1.6; }


/* ══════════════════════════════════════════════════════════
   추천 직업군 — 원장님이 만든 직업 그림 6장을 쓰는 자리 (2026-08-19)

   커리어넷 원본 결과지처럼 맨 아래에서 직군별로 모아 보여준다.
   그림은 628x572 로 만들어 두었고 여기서는 작게 쓴다.
   ══════════════════════════════════════════════════════════ */
.rui-jobgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; margin-top: 4px; }
.rui-jobcard {
  display: flex; gap: 13px; padding: 15px;
  border: 1px solid #ccd8e6; border-radius: 16px; background: #fff;
  box-shadow: 0 1px 3px rgba(16, 38, 66, .05); break-inside: avoid;
}
.rui-jobthumb { width: 78px; height: 71px; flex: none; border-radius: 10px; object-fit: cover; background: #f2f6fb; }
.rui-jobbody { flex: 1 1 auto; min-width: 0; }
.rui-jobhead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px dashed var(--rui-line); }
.rui-jobhead .nm { color: var(--navy); font-size: 14px; font-weight: 800; letter-spacing: -.03em; }
.rui-jobhead .cnt { padding: 2px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 10.5px; font-weight: 800; }
@media (max-width: 620px) {
  .rui-jobgrid { grid-template-columns: 1fr; }
  .rui-jobthumb { width: 62px; height: 56px; }
}

/* ── 대학 지도 — 지역별 목록 · 눌러서 확대 (2026-08-20) ──────────
   원장님 요청: "지역 숫자는 좋은데 그 대학이 어디어디인지도 적어주고,
   그 학교를 클릭하면 지도상으로 더 자세히 줌인되도록."
   ★ 색은 각 화면이 토큰으로 정한다 — 여기서는 뼈대만. */
.um-mapbox { position: relative; }
.um-back {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  border: 1px solid var(--line, #e3e9f2); background: var(--card, #fff);
  color: var(--text, #10213d); border-radius: 99px; padding: 4px 11px;
  font-size: 11.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.um-back:hover { border-color: var(--accent, #3566f0); color: var(--accent, #3566f0); }
.um-picked {
  margin-top: 8px; font-size: 12.5px; line-height: 1.6;
  padding: 8px 11px; border: 1px solid var(--line, #e3e9f2);
  background: var(--card2, #f4f7fb); border-radius: 8px;
}
.um-picked b { font-weight: 800; color: var(--text, #10213d); }
.um-picked span { color: var(--muted, #6f7d91); }
.um-picked i { font-style: normal; font-weight: 800; }
.um-picked-region { margin-left: 6px; font-size: 11.5px; }

.um-groups { display: grid; gap: 12px; margin-bottom: 12px; }
.um-group { display: grid; gap: 5px; }
.um-chip {
  justify-self: start; border: 1px solid var(--line, #e3e9f2);
  cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 700;
}
.um-chip:hover { border-color: var(--accent, #3566f0); }
.um-list { display: grid; gap: 3px; }
.um-item {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  border: 1px solid transparent; background: none; cursor: pointer;
  padding: 5px 8px; border-radius: 7px; font-family: inherit;
  font-size: 12.5px; color: var(--text, #10213d); line-height: 1.5;
}
.um-item:hover { border-color: var(--line, #e3e9f2); background: var(--card2, #f4f7fb); }
.um-item.on { border-color: var(--accent, #3566f0); background: var(--card2, #f4f7fb); }
.um-item:focus-visible { outline: 2px solid var(--accent, #3566f0); outline-offset: 1px; }
.um-swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.um-item-name { font-weight: 700; }
.um-item-dept { color: var(--muted, #6f7d91); font-size: 11.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-item-band { margin-left: auto; font-size: 11px; color: var(--muted, #6f7d91); flex: none; }

/* 지역 이름표 — 글자에 흰 테를 둘러 어느 색 바탕에서도 읽히게 한다.
   크기·테두리는 확대할 때 univ-map.js 가 배율만큼 줄인다. */
.um-sidoname {
  fill: #43506b; font-weight: 700; text-anchor: middle;
  pointer-events: none; paint-order: stroke; stroke: #fff; stroke-linejoin: round;
  opacity: .9; font-family: inherit;
}

/* 모집요강 단추 꾸밈은 **gauge.css 로 옮겼다** (2026-08-21) —
   수시 전략 분석지가 이 파일을 안 써서 단추가 맨몸 링크로 나왔기 때문이다. */

/* 시·군·구 층 — 확대했을 때만 univ-map.js 가 켠다 */
.um-gungu { stroke: rgba(255, 255, 255, .75); }
.um-gunguname {
  fill: #5d6884; font-weight: 600; text-anchor: middle;
  pointer-events: none; paint-order: stroke; stroke: #fff; stroke-linejoin: round;
  opacity: .85; font-family: inherit;
}

/* 확대·축소 단추 (2026-08-21 원장님 요청) */
.um-zoom { position: absolute; right: 8px; top: 8px; display: grid; gap: 4px; }
.um-zbtn {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line, #e3e9f2); background: var(--card, #fff);
  color: var(--text, #10213d); font-size: 17px; font-weight: 700; line-height: 1;
  box-shadow: 0 2px 8px rgba(16, 33, 61, .08);
}
.um-zbtn:hover { border-color: var(--accent, #3566f0); color: var(--accent, #3566f0); }

.um-hit { cursor: pointer; }
.um-hit.on { stroke-width: 2.2; }
.um-label text { font-weight: 800; fill: var(--text, #10213d); text-anchor: middle; }
.um-label rect { fill: var(--card, #fff); stroke: var(--line, #e3e9f2); stroke-width: .5; }

@media print {
  .um-back { display: none !important; }
  .um-zoom { display: none !important; }
  .um-item { border-color: transparent !important; background: none !important; }
}

/* ── 생기부 PDF 성적표 (2026-08-20) ─────────────────────────
   ★ 전에는 과목마다 8줄씩 세로로 늘어놓아 라벨만 229개였다(원장님 지적).
     성적표는 **표**다. 좁은 화면에서는 옆으로 밀어 본다. */
/* 요약·구역 머리 — ⚠ `numsec`·`sr-gradebar` 는 **원장 화면(index.html)에만** 있다.
   학부모 결과지에는 없어서 밋밋하게 나왔다(2026-08-20). 그래서 자체 클래스를 쓴다. */
.sr-sum { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sr-sumitem {
  padding: 8px 13px; border-radius: 10px; background: var(--card2, #f4f7fb);
  border: 1px solid var(--line, #e3e9f2); font-size: 12.5px; font-weight: 700;
}
.sr-sumitem b { font-size: 15px; color: var(--accent-text, #8a642b); font-variant-numeric: tabular-nums; }
.sr-head { display: flex; align-items: center; gap: 9px; margin: 22px 0 10px; }
.sr-head .sr-no {
  width: 24px; height: 24px; border-radius: 8px; flex: none;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 800;
  background: var(--accent, #3566f0); color: var(--btn-fg, #fff);
}
.sr-head .sr-title { font-size: 15px; font-weight: 800; color: var(--text, #10213d); letter-spacing: -.02em; }

.sr-tablewrap { overflow-x: auto; margin-bottom: 14px; }
.sr-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 460px; }
.sr-table th, .sr-table td {
  padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line, #e3e9f2);
  white-space: nowrap;
}
.sr-table th {
  font-size: 11px; font-weight: 700; color: var(--muted, #6f7d91);
  border-bottom: 1.5px solid var(--line-strong, #c9cfde); letter-spacing: .02em;
}
.sr-table td.n, .sr-table th.n { text-align: right; font-variant-numeric: tabular-nums; }
.sr-table tbody tr:last-child td { border-bottom: 0; }
.sr-table .sr-cat { color: var(--muted, #6f7d91); font-size: 12px; }
.sr-table .sr-subj { font-weight: 700; white-space: normal; }
.sr-table .badge { padding: 1px 8px; font-size: 11.5px; }
.sr-term {
  font-size: 12.5px; font-weight: 800; color: var(--accent-text, #8a642b);
  margin: 14px 0 5px; padding-bottom: 4px; border-bottom: 1px solid var(--line, #e3e9f2);
}
.sr-short td { background: var(--warn-bg, #fff4db); }
.sr-diff { color: var(--warn, #a36c16); font-weight: 800; font-size: 11px; }
@media print { .sr-tablewrap { break-inside: avoid; } }

/* ═══ 생기부 맞춤 대학 추천 결과지 — 2026-08-22 전면 개편 부품 ═══
   원장 화면(index)과 학부모 결과지(shared)가 같이 쓴다. shared 는 토큰만 덧칠한다. */

/* 절 머리 — index 에만 있던 .numsec 을 공용으로 (shared 에서 맨몸으로 나오면 안 된다) */
.rm-sec { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; }
.rm-sec .numsec-no {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent, #3566f0); color: #fff; font-size: 12px; font-weight: 900; flex: none;
}
.rm-sec .numsec-title { font-size: 18px; font-weight: 900; letter-spacing: -.03em; color: var(--text, #10213d); }
.rm-sec .numsec-en { margin-left: auto; font-size: 10px; letter-spacing: .18em; color: var(--line-2, #c8d2e2); font-weight: 700; }

/* ① 요약 */
.rm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.rm-kpi { background: var(--card2, #f4f7fb); border: 1px solid var(--line, #e3e9f2); border-radius: 10px; padding: 11px 13px; }
.rm-kpi small { display: block; font-size: 11px; font-weight: 800; color: var(--muted, #6f7d91); }
.rm-kpi b { display: block; font-size: 17px; letter-spacing: -.02em; margin-top: 3px; color: var(--text, #10213d); }
.rm-kpi span { display: block; font-size: 11px; color: var(--muted, #6f7d91); margin-top: 3px; line-height: 1.5; }
.rm-diag { font-size: 14px; font-weight: 700; line-height: 1.7; color: var(--text, #10213d); background: var(--accent-soft, #eef3fe); border-left: 3px solid var(--accent, #3566f0); border-radius: 0 8px 8px 0; padding: 10px 14px; margin-bottom: 10px; }
.rm-sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rm-sum-box { border: 1px solid var(--line, #e3e9f2); border-radius: 10px; padding: 11px 14px; background: var(--card, #fff); }
.rm-sum-box b { font-size: 12.5px; }
.rm-sum-box.good b { color: var(--safe, #16866e); }
.rm-sum-box.warn b { color: var(--reach, #b34a59); }
.rm-sum-box ul { margin: 7px 0 0; padding-left: 17px; }
.rm-sum-box li { font-size: 12.5px; line-height: 1.65; margin-bottom: 4px; color: var(--text, #10213d); }
.rm-funnel { font-size: 11.5px; color: var(--muted, #6f7d91); margin-top: 9px; line-height: 1.6; }

/* ② 최종 6장 표 — 결과지에서 가장 강조되는 표 */
/* ⚠ overflow:hidden 이면 좁은 화면에서 표가 **잘린 채 스크롤도 안 된다** (실측).
   가로 스크롤을 살린다 — 페이지 몸통은 안 넘치고 표 안에서만 밀린다. */
.rm-sixwrap { border: 2px solid var(--accent, #3566f0); border-radius: 12px; overflow-x: auto; overflow-y: hidden; }
.rm-sixtbl, .rm-alttbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rm-sixtbl th, .rm-alttbl th { background: #10213d; color: #fff; font-weight: 700; font-size: 11.5px; padding: 8px 8px; text-align: left; white-space: nowrap; }
.rm-sixtbl th.n, .rm-alttbl th.n, .rm-sixtbl td.n, .rm-alttbl td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rm-sixtbl td, .rm-alttbl td { padding: 9px 8px; border-top: 1px solid var(--line, #e3e9f2); vertical-align: top; color: var(--text, #10213d); }
.rm-plan { font-weight: 900; white-space: nowrap; }
.rm-tbl-dept { font-size: 11.5px; color: var(--muted, #6f7d91); }
.rm-role { font-size: 12px; font-weight: 700; }
.rm-flag { font-size: 11px; font-weight: 700; color: var(--reach, #b34a59); }

/* ③ 전략 · ④ 4구역 카드 */
.rm-strategy { font-size: 13px; line-height: 1.8; color: var(--text, #10213d); background: var(--card2, #f4f7fb); border: 1px solid var(--line, #e3e9f2); border-radius: 10px; padding: 12px 15px; }
.rm-4grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.rm-4 { border: 1px solid var(--line, #e3e9f2); border-radius: 9px; padding: 9px 12px; background: var(--card, #fff); }
.rm-4 b { display: block; font-size: 11px; font-weight: 900; letter-spacing: .02em; color: var(--muted, #6f7d91); margin-bottom: 4px; }
.rm-4 p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--text, #10213d); }
.rm-4 ul { margin: 0; padding-left: 16px; }
.rm-4 li { font-size: 12px; line-height: 1.6; margin-bottom: 2px; color: var(--text, #10213d); }
.rm-4.risk b { color: var(--reach, #b34a59); }
.rm-more { margin-top: 8px; }
.rm-more summary { cursor: pointer; font-size: 12px; font-weight: 800; color: var(--accent, #3566f0); }
.rm-more p { font-size: 12.5px; line-height: 1.75; color: var(--text, #10213d); margin: 7px 0 0; }

/* ⑤ 대체 후보 — 시각적으로 한 단계 낮게 */
.rm-alt-note { font-size: 12px; margin-bottom: 7px; }
.rm-alttbl { opacity: .93; }
.rm-alttbl th { background: var(--muted, #6f7d91); }
.rm-alt-why { font-size: 11.5px; color: var(--muted, #6f7d91); line-height: 1.55; min-width: 160px; }

/* ⛔ 좁은 화면에서 표 칸이 **한 글자씩 세로로 흘러내리던 것** (2026-09-07 원장님: "모바일에서 수시 지원예측 지난기록 열어보니 세로정렬이야")
   원인 — 표가 `width:100%` 라 브라우저가 좁은 칸(지난기록 창은 래퍼 235px)에 억지로 밀어 넣는데,
   한글은 아무 데서나 줄바꿈이 되므로 칸의 최소 폭이 **글자 한 개**까지 내려간다. 실측: 「학생부교과(일반전형)」이 39px 칸에 세로로 300px.
   고침 — 읽을 수 있는 최소 폭을 칸마다 주고, 넘치는 만큼은 래퍼(.tbl-wrap/.rm-sixwrap)가 옆으로 밀어서 보여준다.
   입시일정 상세표에서 원장님이 고르신 방식과 같다(nowrap + 가로 스크롤).
   ⚠ 인쇄와 넓은 화면은 건드리지 않는다 — screen + 900px 이하에서만. */
@media screen and (max-width: 900px) {
  .rm-sixtbl td:nth-child(3), .rm-alttbl td:nth-child(3) { min-width: 148px; }  /* 대학 · 학과 */
  .rm-sixtbl td:nth-child(4) { min-width: 132px; }                              /* 전형 */
  .rm-alttbl td:nth-child(4) { min-width: 112px; }
  .rm-sixtbl td:nth-child(9) { min-width: 108px; }                              /* 선정 역할 */
  .rm-sixtbl td b, .rm-alttbl td b,
  .rm-sixtbl .rm-tbl-dept, .rm-alttbl .rm-tbl-dept { white-space: nowrap; }     /* 대학·학과 이름은 안 꺾는다 */
  .rm-sixtbl td:nth-child(2), .rm-alttbl td:nth-child(2) { white-space: nowrap; } /* 판정 배지 */
}

/* ⑥ 확인사항 · ⑧ 기준 */
.rm-checks { display: grid; gap: 6px; }
.rm-check { border: 1px solid var(--line, #e3e9f2); border-radius: 9px; padding: 9px 12px; font-size: 12.5px; background: var(--card, #fff); }
.rm-check b { display: block; margin-bottom: 2px; }
.rm-check span { color: var(--muted, #6f7d91); line-height: 1.6; }
.rm-check-common { margin-top: 9px; font-size: 12px; color: var(--warn, #8a6508); background: var(--warn-bg, #fff7e0); border: 1px solid var(--mid-line, #e7d3a8); border-radius: 9px; padding: 10px 13px; line-height: 1.7; }
.rm-basis { display: grid; gap: 6px; margin-bottom: 10px; }
.rm-basis-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; font-size: 12.5px; border-bottom: 1px solid var(--line, #e3e9f2); padding-bottom: 6px; }
.rm-basis-row b { color: var(--text, #10213d); }
.rm-basis-row span { color: var(--muted, #6f7d91); line-height: 1.65; }
.rm-tier-chip { font-style: normal; font-weight: 800; padding: 1px 8px; border-radius: 99px; font-size: 11px; margin-right: 4px; }
.rm-tier-chip.안정 { background: var(--safe-bg, #e9fbf5); color: var(--safe, #16866e); }
.rm-tier-chip.적정 { background: var(--mid-bg, #fff4db); color: var(--mid, #a36c16); }
.rm-tier-chip.상향 { background: #fdf0e3; color: #c2691f; }
.rm-tier-chip.상향도전 { background: var(--reach-bg, #fff0f1); color: var(--reach, #b34a59); }
.rm-gauge-note { font-size: 10.5px; color: var(--muted, #6f7d91); margin-top: 3px; }

/* 지도 — 휴대폰에서는 목록을 먼저 (스펙 10) */
@media (max-width: 700px) {
  .rm-kpis, .rm-sum-grid, .rm-4grid { grid-template-columns: 1fr; }
  .rm-basis-row { grid-template-columns: 1fr; gap: 2px; }
  .um-wrap { display: flex !important; flex-direction: column; }
  .um-side { order: -1; }
}

/* 인쇄 — 표·카드가 가운데서 안 잘리게, 접힌 상세는 핵심만 (스펙 4·11) */
@media print {
  .rm-sixtbl tr, .rm-alttbl tr, .rm-card, .rm-kpi, .rm-sum-box, .rm-check { break-inside: avoid; }
  .rm-sixtbl thead, .rm-alttbl thead { display: table-header-group; }
  .rm-more { display: none; }              /* 펼침 상세는 화면 전용 — 인쇄는 핵심 4구역만 */
  .rm-sec { break-after: avoid; }
}

/* 지도 범례 (2026-08-22) */
.um-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted, #6f7d91); margin-bottom: 6px; font-weight: 700; }
.um-lg { display: inline-flex; align-items: center; gap: 5px; }
.um-lg i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.um-lg-six { background: var(--safe, #16866e); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line-2, #c8d2e2); }
.um-lg-alt { background: #fff; border: 2px solid var(--muted, #6f7d91); }
.um-lg-etc { background: #b9c7db; width: 8px !important; height: 8px !important; }

/* ═══ 대학 탐색기 (explorer 모드, 2026-08-22 재설계) ═══ */
.umx-searchrow { display: flex; gap: 8px; }
.umx-searchrow input[type="search"] {
  flex: 1 1 auto; min-width: 0; font-size: 15.5px; padding: 12px 15px;
  border: 2px solid var(--accent, #3566f0); border-radius: 12px;
  background: var(--field, #fff); color: var(--text, #10213d);
}
.umx-maptoggle { display: none; }
.umx-filters { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.umx-filters select { padding: 7px 10px; border-radius: 9px; border: 1px solid var(--line, #e3e9f2); background: var(--field, #fff); color: var(--text, #10213d); font-size: 12.5px; }
.umx-filters label { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; color: var(--muted, #6f7d91); cursor: pointer; }
.umx-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; min-height: 26px; }
.umx-count { font-size: 12.5px; color: var(--muted, #6f7d91); margin-right: 4px; }
.umx-count b { color: var(--accent, #3566f0); font-size: 14px; }
.umx-tag { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--accent, #3566f0); background: var(--accent-soft, #eef3fe); color: var(--accent, #3566f0); cursor: pointer; }
.umx-tag.all { border-color: var(--line-2, #c8d2e2); background: none; color: var(--muted, #6f7d91); }

.umx-layout { display: grid; grid-template-columns: 340px 1fr; gap: 14px; align-items: start; }
.umx-list { display: flex; flex-direction: column; gap: 6px; max-height: 560px; overflow-y: auto; padding-right: 2px; }
.umx-sec { font-size: 11px; font-weight: 900; letter-spacing: .06em; color: var(--muted, #6f7d91); margin: 8px 0 2px; }
.umx-row {
  text-align: left; border: 1px solid var(--line, #e3e9f2); background: var(--card, #fff);
  border-radius: 11px; padding: 11px 13px; cursor: pointer; color: var(--text, #10213d);
  display: flex; flex-direction: column; gap: 3px; min-height: 44px;
  /* ⚠ 목록이 세로 flex + max-height 라 기본 flex-shrink:1 이면 행이 44px 로 **눌려서**
     글자가 카드 밖으로 흘러넘쳐 다음 줄과 겹친다 (2026-08-22 원장님 크롬 실측: 내용 90px vs 행 44px). */
  flex: none;
}
.umx-row:hover { border-color: var(--accent, #3566f0); }
.umx-row.on { border-color: var(--accent, #3566f0); background: var(--accent-soft, #eef3fe); }
.umx-row b { font-size: 13.5px; }
.umx-row-meta { font-size: 11.5px; color: var(--muted, #6f7d91); }
.umx-row-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.umx-badge { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--card2, #f4f7fb); color: var(--muted, #6f7d91); border: 1px solid var(--line, #e3e9f2); }
.umx-badge.warn { color: #8a6508; background: #fff7e0; border-color: #e7d3a8; }
.umx-pager { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 12.5px; color: var(--muted, #6f7d91); padding: 8px 0 2px; }
.umx-empty { text-align: center; padding: 40px 12px; color: var(--muted, #6f7d91); font-size: 13px; line-height: 1.8; }

.umx-mapbox { position: relative; }
.umx-svg { width: 100%; height: auto; display: block; }
.umx-cluster { cursor: pointer; }
/* ⚠ 흰 글자를 얹는 짙은 배경은 테마 토큰(--text) 금지 — 원장님 앱 어두운 테마에서
   --text 가 밝은 색(#eef2fb)이라 흰 글자와 겹쳐 보였다 (2026-08-22 실화면). 고정 남색을 쓴다. */
.umx-cluster circle { fill: #10213d; opacity: .82; stroke: #fff; stroke-width: 1.6; }
.umx-cluster:hover circle, .umx-cluster:focus-visible circle { fill: var(--accent, #3566f0); opacity: 1; }
.umx-cluster text { fill: #fff; font-weight: 800; text-anchor: middle; pointer-events: none; }
.umx-dot { fill: var(--accent, #3566f0); stroke: #fff; stroke-width: .6; cursor: pointer; }
.umx-dot:hover { fill: #10213d; }
.umx-dot.sel { fill: var(--reach, #b34a59); stroke: #10213d; stroke-width: 1.2; }
.umx-tip {
  position: absolute; transform: translateX(-50%); z-index: 5; pointer-events: none;
  background: #10213d; color: #fff; font-size: 12px; font-weight: 700;
  padding: 5px 10px; border-radius: 8px; white-space: nowrap; box-shadow: 0 6px 18px rgba(16,33,61,.25);
}
.umx-legend { margin-top: 6px; }
.umx-lg-dot { background: var(--accent, #3566f0); }
.umx-lg-sel { background: var(--reach, #b34a59); border: 1px solid #10213d; } /* index.html 어두운 테마에서 --text 가 밝은색이라 var(--text) 금지 */
.umx-back { z-index: 4; }

.umx-panel-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.umx-panel-head > div > b { font-size: 17px; }
.umx-panel-sub { display: block; font-size: 12px; margin-top: 3px; }
.umx-panel-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.umx-panel-btns .primary, .umx-panel-btns .ghost { min-height: 40px; }
.umx-guide { display: inline-flex; align-items: center; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2, #c8d2e2); text-decoration: none; font-size: 13px; font-weight: 700; color: var(--accent, #3566f0); }
.umx-facts { display: grid; gap: 6px; }
.umx-facts > div { display: grid; grid-template-columns: 160px 1fr; gap: 10px; font-size: 13px; border-bottom: 1px solid var(--line, #e3e9f2); padding-bottom: 6px; }
.umx-facts b { color: var(--text, #10213d); }
.umx-facts span { color: var(--muted, #6f7d91); line-height: 1.6; }

/* ═══ result 모드 — 지역 분포 요약 ═══ */
.umr-list { display: grid; gap: 8px; }
.umr-region { border: 1px solid var(--line, #e3e9f2); border-radius: 10px; padding: 9px 12px; background: var(--card, #fff); }
.umr-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 4px; }
.umr-head span { font-size: 11.5px; color: var(--muted, #6f7d91); font-weight: 700; }
.umr-row { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; padding: 3px 0; border-radius: 6px; }
.umr-row:hover { background: rgba(53, 102, 240, 0.07); }
/* 목록에서 학교를 눌러 확대했을 때 그 학교 점을 남색 테로 강조 (2026-09-04) */
.umr-dot.hot { stroke: #10213d !important; filter: drop-shadow(0 0 2.5px rgba(16, 33, 61, 0.65)); }
.umr-row b { color: var(--text, #10213d); }
.umr-row span { color: var(--muted, #6f7d91); font-size: 11.5px; }
.umr-tag { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 4px; flex: none; }
.umr-tag.six { background: #10213d; color: #fff; }
.umr-tag.alt { background: none; border: 1px solid var(--line-2, #c8d2e2); color: var(--muted, #6f7d91); }
.umr-band { font-style: normal; font-size: 11px; font-weight: 800; flex: none; }

/* 모바일 — 지도는 단추로 펼친다 (스펙 11), 목록·검색이 먼저 */
@media (max-width: 700px) {
  .umx-layout { grid-template-columns: 1fr; }
  .umx-maptoggle { display: inline-flex; }
  .umx-map { display: none; }
  .umx-map.open { display: block; }
  .umx-list { max-height: none; }
  .umx-facts > div { grid-template-columns: 1fr; gap: 2px; }
}
@media print {
  .umx-searchrow, .umx-filters, .umx-tags, .umx-pager { display: none !important; }
  .umr-region { break-inside: avoid; }
}

/* 클러스터 거품 — 불투명(글자 비침 방지) + 안에 지역명·숫자 (2026-08-22 겹침 수정) */
.umx-cluster circle { opacity: 1; }
.umx-cl-name, .umx-cl-num { fill: #fff; text-anchor: middle; pointer-events: none; }
.umx-cl-name { font-weight: 700; }
.umx-cl-num { font-weight: 900; }
/* ── 목표대학 상담 「지금부터 할 일」 (2026-08-23 구조화) ── */
.rm-todo {
  margin-top: 10px; border: 1px solid var(--line, #e3e9f2); border-left: 3px solid var(--accent, #3566f0);
  border-radius: 10px; padding: 9px 13px; background: var(--card, #fff);
}
.rm-todo > b { font-size: .78rem; letter-spacing: .04em; color: var(--accent, #3566f0); }
@media print { .rm-todo { break-inside: avoid; } }

/* ── 「담을 곳 고르기」 패널 (2026-08-23) — 결과지 바깥, 원장님 화면에만 ── */
.bkp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 11px; }
.bkp-head h3 { margin: 3px 0 3px; font-size: 17px; letter-spacing: -.04em; }
.bkp-head p { margin: 0; font-size: 12.5px; line-height: 1.6; }
.bkp-headbtns { display: flex; gap: 7px; flex-wrap: wrap; }
.bkp-list { display: flex; flex-direction: column; gap: 6px; max-height: 380px; overflow-y: auto; padding-right: 3px; }
.bkp-item {
  flex: none; display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1px solid var(--line, #e3e9f2); border-radius: 10px; padding: 9px 12px; background: var(--card, #fff);
}
.bkp-item:hover { border-color: var(--accent, #3566f0); }
.bkp-item input { width: 17px; height: 17px; margin-top: 2px; flex: none; cursor: pointer; }
.bkp-item:has(input:checked) { border-color: var(--accent, #3566f0); background: var(--accent-soft, #e8eeff); }
.bkp-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bkp-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; }
.bkp-dept { color: var(--muted, #6f7d91); }
.bkp-six { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 5px; background: #10213d; color: #fff; }
.bkp-meta { font-size: 11.5px; color: var(--muted, #6f7d91); }
.bkp-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line, #e3e9f2); }
.bkp-foot .gt-runbtn { width: auto; flex: none; padding: 11px 20px; border-radius: 10px; border: 0; cursor: pointer; }
.bkp-next { font-size: 11.5px; color: var(--muted, #6f7d91); margin-left: auto; margin-right: 10px; }
.bkp-next b { color: var(--accent, #3566f0); }
/* 검색 결과 줄의 전형 칩 (희망대학 저울) */
.gt-admchip {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 6px;
  background: #f0f3f9; color: #4a5a72; font-size: 10.5px; font-weight: 800; vertical-align: 1px;
}
@media print { .bkp, .pstep-toast { display: none !important; } }

/* ── 면접 답 접기 (2026-08-24 원장님: "스스로 생각해본 뒤에 열어보세요") ── */
.iv-ans { margin-top: 8px; border-top: 1px dashed var(--line, #e3e9f2); padding-top: 8px; }
.iv-ans > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 7px 11px; border-radius: 9px; background: #f4f7fd;
}
.iv-ans > summary::-webkit-details-marker { display: none; }
.iv-ans > summary:hover { background: #e9effb; }
.iv-ans-lock {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: var(--accent, #3566f0);
}
.iv-ans-lock::before { content: "▸"; transition: transform .15s; }
.iv-ans[open] > summary .iv-ans-lock::before { transform: rotate(90deg); }
.iv-ans-hint { font-size: 11px; color: var(--muted, #6f7d91); }
.iv-ans[open] > summary .iv-ans-hint { display: none; }
.iv-ans-body { padding-top: 4px; }
/* 인쇄할 때는 모두 펼친다 — 종이로 주면 어차피 다 보인다 */
@media print {
  .iv-ans > summary { display: none; }
  .iv-ans-body { display: block !important; }
  .iv-ans[open] .iv-ans-body, .iv-ans:not([open]) .iv-ans-body { display: block !important; }
}
/* 면접이 없는 전형 표시 */
.bk-noiv { font-size: 11.5px; color: var(--muted, #6f7d91); white-space: nowrap; }
.bk-iv.yes { border-color: var(--accent, #3566f0); color: var(--accent, #3566f0); }
/* 교과전형 — 면접이 드물어 잘못 누르기 쉽다. 흐리게 두고 눌렀을 때 한 번 짚어 준다 */
.bk-iv.unlikely { color: var(--muted, #6f7d91); border-style: dashed; }
/* 요강에서 「면접 없음」으로 읽힌 전형 — 막지 않고 흐리게만 (자료가 틀릴 수 있다) */
.bk-iv.none { color: #9aa6b6; border-style: dashed; background: transparent; }
/* ★ 원장님이 요강을 직접 봐야 하는 것 — 학과마다 면접이 다르거나 요강끼리 엇갈릴 때.
   흐리게 두면 놓친다(실측: 계명대는 의예과만 2단계 면접 30%). 그래서 **눈에 띄게** 둔다. */
.bk-iv.check { border-color: #c98a12; color: #8a5d00; background: #fff8e8; font-weight: 600; }
.bk-iv.check:hover { border-color: #a06f0a; color: #6d4900; background: #fff2d4; }
/* 되돌리기 알림 */
.bk-undo {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(120%);
  z-index: 60; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #10213d; color: #fff; border-radius: 12px; padding: 12px 16px;
  box-shadow: 0 12px 34px rgba(16,33,61,.34); font-size: 13px;
  opacity: 0; transition: transform .2s, opacity .2s; pointer-events: none;
}
.bk-undo.on { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.bk-undo i { font-style: normal; color: #ffd977; font-size: 11.5px; }
.bk-undo button {
  border: 0; border-radius: 8px; padding: 7px 13px; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 800; background: #ffd977; color: #10213d;
}
.bk-undo button.x { background: transparent; color: #b9c7db; padding: 4px 7px; font-size: 15px; }
@media print { .bk-undo { display: none !important; } }

/* 면접 로딩·결과를 **그 대학 줄 바로 아래**에 (2026-08-24 원장님 지시) */
.bk-tbl tr.iv-row > td { padding: 0; background: #f7f9fd; }
.bk-tbl tr.iv-row > td .iv-slot { padding: 12px 14px; }
/* sticky 로 붙인 칸이 이 행에는 없으므로 배경을 그대로 둔다 */
.iv-loading {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 15px; border: 1px solid #cfe0ff; border-radius: 11px; background: #fff;
  font-size: 13.5px;
}
.iv-loading b { color: var(--navy, #10213d); }
.iv-loading .muted { font-size: 11.5px; width: 100%; }
.iv-result { border: 1px solid var(--line, #e3e9f2); border-radius: 12px; background: #fff; padding: 14px 16px; }
.iv-result-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line, #e3e9f2);
}
.iv-result-head b { font-size: 15px; }
@media print { .bk-tbl tr.iv-row > td { background: none; } .iv-result-head .ghost { display: none; } }

/* 최종 결과지 안의 대학별 면접 묶음 (2026-08-24) */
.iv-univ { border: 1px solid var(--line, #e3e9f2); border-radius: 12px; margin-top: 10px; background: var(--card, #fff); }
.iv-univ > summary {
  list-style: none; cursor: pointer; padding: 12px 15px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.iv-univ > summary::-webkit-details-marker { display: none; }
.iv-univ > summary b { font-size: 14.5px; }
.iv-univ > summary span { color: var(--muted, #6f7d91); font-size: 12.5px; }
.iv-univ > summary i { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 800; color: var(--accent, #3566f0); }
.iv-univ[open] > summary { border-bottom: 1px solid var(--line, #e3e9f2); }
.iv-univ-body { padding: 12px 15px 14px; }
.iv-univ-body .rm-sum-box { margin-bottom: 9px; }
/* 면접을 만들어 둔 대학은 표에서 표시가 다르다 */
.bk-iv.done { border-color: #16866e; color: #16866e; background: #f0faf6; }
@media print { .iv-univ { break-inside: avoid; } .iv-univ > summary i { color: #444; } }

/* ── 면접 예상질문 준비 (2026-08-23) ── */
.iv-note { font-size: 12.5px; margin: 2px 0 12px; line-height: 1.6; }

/* ─────────────────────────────────────────────────────────────
   ★ 대학 카드 안의 면접 질문지 (2026-08-24 원장님 지시)

   1차 시안은 **노란색**이었는데 원장님이 "눈에 잘 안 들어와" 하셨다. 원인이 있다 —
   카드 안에 이미 노란 것이 둘이다: 판정 바(`.rm-card.적정 .rm-card-top` #fff4db)와
   판정 안정도 박스(`.rm-stability` #fdf6dd). 같은 색끼리는 서로 묻힌다.

   그래서 **보라**로 갔다. 결과지 어디에도 없는 색이다
   (판정은 초록·노랑·주황·빨강, 본문 강조는 파랑 #3566f0).
   ⚠ 앞으로 판정색이나 본문에 보라를 쓰지 말 것 — 여기가 묻힌다.
   ───────────────────────────────────────────────────────────── */

/* 면접 있는 대학은 **카드째** 달라 보이게 — 스크롤로 지나쳐도 왼쪽 띠가 걸린다 */
.rm-card.has-iv {
  border-color: #b9a4e6;
  border-left: 5px solid #6b46c1;
}

.iv-inline {
  margin-top: 12px;
  border: 1px solid #c9b6ee;
  border-radius: 12px;
  background: #fbf9ff;
  overflow: hidden;
}
/* 헤더는 **꽉 찬 보라 + 흰 글씨** — 연한 배경은 옆 노란 박스에 묻힌다 */
.iv-inline > summary {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 14px; cursor: pointer; list-style: none;
  background: #6b46c1; color: #fff;
}
.iv-inline > summary::-webkit-details-marker { display: none; }
.iv-inline > summary:hover { background: #5b37b0; }
.iv-inline-star { font-size: 16px; line-height: 1; }
.iv-inline-title { font-size: 14.5px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.iv-inline-title::after { content: " ▾"; display: inline-block; opacity: .75; transition: transform .15s; }
.iv-inline:not([open]) > summary .iv-inline-title::after { transform: rotate(-90deg); }
.iv-inline-hint { font-size: 12px; color: #e4d9fb; }
.iv-inline-hint b { color: #fff; }
.iv-inline-body { padding: 12px 14px 14px; background: var(--card, #fff); }
.iv-inline-body .rm-sum-box { margin-bottom: 9px; }

/* 카드 제목·비교표의 ⭐ 표시 — 어느 대학에 면접이 있는지 한눈에 */
/* 신설·입결없음 전형 칩 (2026-08-28) — 검색 줄에서 눈에 띄게, 하지만 판정색과 안 섞이게 호박 */
.gt-admchip.chip-newadm { background: #fff4d9; color: #7a5b12; border: 1px solid #e5c877; }

/* 면접 유무 표기 (2026-08-28) — 「있음」만 보라(면접 전용 색), 나머지는 조용히 */
.rm-ivflag { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.rm-ivflag.has { background: #6b46c1; color: #fff; }
.rm-ivflag.chk { background: #fff4d9; color: #7a5b12; border: 1px solid #e5c877; }
.rm-ivflag.no { background: #eef1f6; color: #5a6577; }
.rm-ivflag.unk { background: none; color: #8b94a5; font-weight: 500; padding: 0; }
.rm-ivflag.sm { font-size: 11px; padding: 1px 7px; }
.rm-ivquote { font-size: 12px; color: #6a5a86; background: #f6f2fc; border-left: 3px solid #6b46c1; padding: 6px 10px; border-radius: 0 8px 8px 0; margin: 6px 0 2px; }
.rm-ivstar {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 9px; border-radius: 999px;
  background: #6b46c1; border: 1px solid #5b37b0;
  color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: -.02em;
}
.rm-ivstar-sm { font-style: normal; font-size: 12px; }

/* 맨 위 요약의 안내 — 학생이 첫 화면에서 알아채도록 */
.iv-alert {
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid #c9b6ee; border-left: 6px solid #6b46c1; border-radius: 10px;
  background: #fbf9ff; display: flex; flex-direction: column; gap: 4px;
}
.iv-alert b { color: #4c2f8f; font-size: 14px; }
.iv-alert span { font-size: 12.5px; color: #55486b; line-height: 1.6; }

@media (max-width: 640px) {
  .iv-inline-hint { flex-basis: 100%; }
}

@media print {
  /* 종이로 주면 어차피 다 보인다 — 펼쳐서 인쇄한다 */
  .iv-inline > summary { display: none; }
  .iv-inline-body { display: block !important; }
  .iv-inline { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rm-ivstar, .iv-alert, .rm-card.has-iv, .rm-ivflag, .rm-ivquote { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.iv-ratio { font-size: .95rem !important; line-height: 1.35; }
.iv-group { margin-top: 16px; }
.iv-group-h {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 13px; font-weight: 800; color: var(--navy, #10213d);
}
.iv-group-h::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--accent, #3566f0); }
.iv-group-h i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted, #6f7d91); }
.iv-q {
  border: 1px solid var(--line, #e3e9f2); border-radius: 12px; background: var(--card, #fff);
  padding: 13px 15px; margin-bottom: 9px;
}
.iv-q-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 9px; }
/* ── 면접지 2판 (2026-09-07 원장님) — 위험도·2단 꼬리질문·외워 갈 것·마지막 한마디 ── */
.iv-risk { flex: none; font-size: 10.5px; font-weight: 900; padding: 3px 8px; border-radius: 999px; letter-spacing: -.01em; align-self: center; }
.iv-based { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 9px; }
/* 면접 판독기 — 담아 둔 대학을 눌러 채우기 (2026-09-07) */
.ivp-picks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ivp-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 11px; font-size: 12.5px; text-align: left; }
.ivp-pick small { font-size: 11px; color: var(--muted, #6f7d91); font-weight: 600; }
.iv-based-tag { font-size: 11.5px; font-weight: 800; color: #1f5d3f; background: #e6f5ec; border: 1px solid #b6e0c6; border-radius: 999px; padding: 3px 10px; }
.iv-risk.hi { background: #fdeff1; color: #b34a59; border: 1px solid #e9b9c1; }
.iv-risk.mid { background: #fff7e0; color: #8a6a2f; border: 1px solid #e6cf95; }
.iv-risk.low { background: #eef1f6; color: #6f7d91; border: 1px solid #dfe5ee; }
.iv-follow.deep { border-left-color: #b34a59; }
/* 예시 대답 — 학생이 소리 내어 연습할 문장 (2026-09-07 원장님 지시) */
.iv-sample { margin-top: 10px; background: #f3f7ff; border: 1px solid #c9d9f7; border-left: 4px solid var(--accent, #3566f0); border-radius: 12px; padding: 14px 17px; }
.iv-sample > b { display: block; font-size: 12px; font-weight: 900; color: var(--accent-text, #2b4ea8); letter-spacing: .01em; margin-bottom: 8px; }
.iv-sample > b i { font-style: normal; font-weight: 700; color: var(--muted, #6f7d91); margin-left: 6px; }
.iv-sample p { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--text, #10213d); }
.iv-sample-tip { display: block; margin-top: 9px; font-size: 11.5px; color: var(--muted, #6f7d91); }
@media print { .iv-sample { break-inside: avoid; } }
.iv-follow.deep b { color: #b34a59; }
/* 면접장 앞에서 볼 마지막 한 장 */
.iv-memo { display: grid; gap: 8px; }
.iv-memo-row { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--line, #e3e9f2); border-left: 3px solid var(--accent, #3566f0); border-radius: 10px; padding: 11px 14px; background: var(--card, #fff); }
.iv-memo-no { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent, #3566f0); color: #fff; font-size: 11.5px; font-weight: 900; }
.iv-memo-body { flex: 1 1 auto; min-width: 0; }
.iv-memo-body b { display: block; font-size: 13.5px; line-height: 1.5; }
.iv-memo-num { margin-top: 4px; font-size: 12.5px; font-weight: 800; color: #8a6a2f; background: #fff7e0; border-radius: 7px; padding: 5px 9px; }
.iv-memo-why { margin-top: 4px; font-size: 12px; color: var(--muted, #6f7d91); line-height: 1.6; }
/* 마지막으로 하고 싶은 말 */
.iv-closing { font-size: 14px; line-height: 1.95; color: var(--text, #10213d); background: var(--card, #fff); border: 2px solid var(--accent, #3566f0); border-radius: 12px; padding: 16px 19px; white-space: pre-wrap; }
.iv-closing-tip { margin-top: 8px; font-size: 12.5px; color: var(--muted, #6f7d91); }
.iv-closing-tip b { color: var(--text, #10213d); }
@media print { .iv-memo-row, .iv-closing { break-inside: avoid; } }
.iv-no {
  flex: none; min-width: 30px; height: 22px; padding: 0 7px; border-radius: 7px;
  display: grid; place-items: center; background: #10213d; color: #fff;
  font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums;
}
.iv-q-head p { margin: 0; font-size: 14.5px; font-weight: 800; line-height: 1.5; letter-spacing: -.02em; }
/* 라벨은 **한 줄로 위에**, 내용은 아래 — 옆에 붙이면 라벨이 두 줄로 접혀 답답하다 (2026-08-23 실측) */
.iv-why, .iv-ev, .iv-follow { display: block; font-size: 12.5px; line-height: 1.6; margin-top: 7px; }
.iv-why > b, .iv-ev > b, .iv-follow > b {
  display: block; margin-bottom: 2px; font-size: 10.5px; letter-spacing: .04em; white-space: nowrap;
}
.iv-why > b { color: #97701c; }
.iv-ev > b { color: #16866e; }
.iv-follow > b { color: var(--muted, #6f7d91); }
.iv-why { background: #fdf9ee; border-radius: 8px; padding: 7px 10px; }
.iv-ev { background: #f0faf6; border-radius: 8px; padding: 7px 10px; }
.iv-a { margin-top: 9px; }
.iv-a > b { display: block; font-size: 11px; letter-spacing: .04em; color: var(--accent, #3566f0); margin-bottom: 3px; }
@media (max-width: 700px) {
  .iv-q-head p { font-size: 13.5px; }
}
@media print {
  .iv-q { break-inside: avoid; }
  .iv-group-h { break-after: avoid; }
  .iv-no, .iv-why, .iv-ev { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 넓은 표는 제 안에서 가로로 넘긴다 — 정의가 없어 표가 눌려 있었다 (2026-08-24 실측) */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media print { .tbl-wrap { overflow: visible; } }

/* ── 학생 생기부 보관함 (2026-08-24) ── */
.sr-loadsaved {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 10px 13px; border-radius: 10px;
  background: var(--accent-soft, #e8eeff); font-size: 12.5px;
}
.sr-loadsaved b { color: var(--navy, #10213d); }
.sr-loadsaved #srLoadSavedMsg:empty { display: none; }

.sr-savebar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--line, #e3e9f2); border-radius: 11px;
  background: var(--card, #fff);
}
.sr-savebar-t b { display: block; font-size: 13px; }
.sr-savebar-t .muted { font-size: 11.5px; }
.sr-savebar #srSaveMsg { flex: 1 1 100%; }
.sr-savebar #srSaveMsg:empty { display: none; }
.sr-loadlist { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sr-loaditem {
  flex: none; text-align: left; border: 1px solid var(--line, #e3e9f2); background: var(--card, #fff);
  border-radius: 10px; padding: 9px 12px; cursor: pointer; font-family: inherit; color: var(--text, #10213d);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.sr-loaditem:hover { border-color: var(--accent, #3566f0); background: var(--accent-soft, #e8eeff); }
.sr-loaditem b { font-size: 13.5px; }
.sr-loaditem span { font-size: 11.5px; color: var(--muted, #6f7d91); }
@media print { .sr-savebar { display: none !important; } }

/* ── 장바구니: 대학 직접 찾아 담기 + 지난기록 불러오기 (2026-08-24) ── */
.bk-add { border: 1px dashed var(--line, #e3e9f2); border-radius: 11px; margin: 4px 0 14px; background: var(--card, #fff); }
.bk-add > summary {
  list-style: none; cursor: pointer; padding: 11px 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.bk-add > summary::-webkit-details-marker { display: none; }
.bk-add > summary b { font-size: 13.5px; color: var(--accent, #3566f0); }
.bk-add > summary .muted { font-size: 11.5px; }
.bk-add[open] > summary { border-bottom: 1px solid var(--line, #e3e9f2); }
.bk-add-body { padding: 12px 14px 14px; }
.bk-add-body .gt-searchrow { margin-bottom: 8px; }
.usage-restore {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line, #e3e9f2);
}
.usage-restore-t b { display: block; font-size: 13px; }
.usage-restore-t .muted { font-size: 11.5px; }
@media print { .bk-add, .usage-restore { display: none !important; } }

/* ── 지원 장바구니 (2026-08-23) ── */
/* ★ 학생 목록을 **위로** 올리고 표는 화면 폭을 다 쓴다 (2026-08-24 원장님:
   "클릭한 대학이랑 옆에 면접이 한 화면에 안 보여. 스튜던트 칸을 위로 올리고 전체를 옆으로 땡기면 될 것 같은데") */
.bk-layout { display: block; }
.bk-side { margin-bottom: 14px; }
.bk-side .card-title { margin-bottom: 9px; }
/* ⚠ 전에는 여기에 `flex-direction: row` 규칙을 넣고 **바로 아래에 column 규칙을 그대로 둬서**
   뒤엣것이 이겨 세로로 나왔다. 원장님이 8/24 에 요청하신 가로 배치가 안 되고 있었다.
   (2026-08-25 점검에서 합침 — 규칙을 겹쳐 쓸 때는 앞의 것을 반드시 지울 것) */
.bk-students { display: flex; flex-direction: row; flex-wrap: wrap; gap: 7px; }
.bk-stu {
  flex: 0 1 auto; min-width: 150px; text-align: left; border: 1px solid var(--line, #e3e9f2); background: var(--card, #fff);
  border-radius: 11px; padding: 10px 12px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; gap: 3px; color: var(--text, #10213d);
}
.bk-stu:hover { border-color: var(--accent, #3566f0); }
.bk-stu.on { border-color: var(--accent, #3566f0); background: var(--accent-soft, #e8eeff); }
.bk-stu b { font-size: 14px; }
.bk-stu span { font-size: 11.5px; color: var(--muted, #6f7d91); }
.bk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bk-head h3 { margin: 3px 0 0; font-size: 19px; letter-spacing: -.04em; }
.bk-head h3 .muted { font-size: 12.5px; font-weight: 500; }
.bk-headbtns { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bk-count { font-size: 12px; color: var(--muted, #6f7d91); font-weight: 700; }
.bk-count b { color: var(--navy, #10213d); font-variant-numeric: tabular-nums; }
.bk-count b.over { color: var(--reach, #b34a59); }
/* ⚠ 열이 많아 좁은 화면에서 글자가 세로로 눌린다 — 표를 가로로 넘기게 두고 최소 너비를 준다 (2026-08-24 실측) */
.bk-tbl { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 12.5px; }
/* 「최종」 전체 선택 (2026-08-28) — 체크박스와 글자가 한 줄로 */
.bk-tbl th.bk-allfin label { white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.bk-tbl th, .bk-tbl td { border-bottom: 1px solid var(--line, #e3e9f2); padding: 8px 9px; text-align: left; vertical-align: middle; }
.bk-tbl td:nth-child(3) { min-width: 140px; }
.bk-tbl td:nth-child(4) { min-width: 140px; max-width: 210px; font-size: 11.5px; line-height: 1.45; }
/* 면접 칸은 오른쪽 끝에 고정해 가로로 밀어도 늘 보이게 한다 — 어느 대학 줄인지 놓치지 않도록 */
.bk-tbl th:nth-child(10), .bk-tbl td:nth-child(10) { position: sticky; right: 34px; background: var(--card, #fff); }
.bk-tbl tr.fin td:nth-child(10) { background: #f6faff; }
.bk-tbl th:nth-child(3), .bk-tbl td:nth-child(3) { position: sticky; left: 0; background: var(--card, #fff); z-index: 1; }
.bk-tbl tr.fin td:nth-child(3) { background: #f6faff; }
.bk-tbl th:nth-child(3) { background: var(--card, #fff); }
.bk-tbl td:nth-child(8) { white-space: nowrap; }
.bk-tbl th { font-size: 11px; color: var(--muted, #6f7d91); font-weight: 800; white-space: nowrap; }
.bk-tbl td.n, .bk-tbl th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bk-tbl tr.fin { background: #f6faff; }
.bk-tbl input[type="checkbox"] { width: 17px; height: 17px; cursor: pointer; }
.bk-note { width: 100%; min-width: 110px; border: 1px solid var(--line, #e3e9f2); border-radius: 7px; padding: 5px 7px; font: inherit; font-size: 12px; }
.bk-iv {
  border: 1px solid var(--line, #e3e9f2); background: var(--card, #fff); color: var(--navy, #10213d);
  border-radius: 8px; padding: 5px 9px; font-size: 11.5px; font-weight: 700; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.bk-iv:hover { border-color: var(--accent, #3566f0); color: var(--accent, #3566f0); }
.bk-x { border: 0; background: none; color: var(--muted, #6f7d91); font-size: 17px; cursor: pointer; line-height: 1; padding: 2px 5px; }
.bk-x:hover { color: var(--reach, #b34a59); }
.bk-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line, #e3e9f2); }
.bk-foot .muted { font-size: 12px; flex: 1; min-width: 220px; }
.bk-foot .gt-runbtn { width: auto; flex: none; padding: 11px 20px; border-radius: 10px; border: 0; cursor: pointer; }
@media (max-width: 900px) {
  .bk-stu { flex: 1 1 150px; }
}

/* ── 대체 후보 전형별 묶음 (2026-08-23) ── */
.rm-altgrp { margin-top: 12px; }
.rm-altgrp-h {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 800; color: var(--navy, #10213d);
}
.rm-altgrp-h::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--accent, #3566f0); }
.rm-altgrp-h i { font-style: normal; font-size: 11px; font-weight: 700; color: var(--muted, #6f7d91); }
@media print { .rm-altgrp { break-inside: avoid; } }

/* ── 나열식 글을 번호 목록으로 (2026-08-23 원장님: "전부 읽어야 해서 불편") ── */
.rm-plist { margin: 4px 0 0; padding-left: 0; list-style: none; counter-reset: rmp; display: flex; flex-direction: column; gap: 5px; }
.rm-plist li {
  counter-increment: rmp; position: relative; padding-left: 21px; line-height: 1.58;
}
.rm-plist li::before {
  content: counter(rmp); position: absolute; left: 0; top: .18em;
  width: 15px; height: 15px; border-radius: 5px; display: grid; place-items: center;
  background: var(--accent-soft, #e8eeff); color: var(--accent, #3566f0);
  font-size: 9.5px; font-weight: 900; font-variant-numeric: tabular-nums;
}
/* 생기부 연결 칸은 근거라 번호를 금색 계열로 — 위험 칸(빨강)과 뜻이 섞이지 않게 */
.rm-4.evid .rm-plist li::before { background: #f6efdc; color: #97701c; }

/* ── 대학별 판정 근거 상세 (2026-08-23 — 수치 3칸 + 근거 목록 + 안정도) ── */
.rm-kpi3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 4px; }
.rm-kpi3 > div {
  border: 1px solid var(--line, #e3e9f2); background: var(--card, #fff);
  border-radius: 10px; padding: 8px 11px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.rm-kpi3 small { font-size: .72rem; color: var(--muted, #6f7d91); font-weight: 700; letter-spacing: .02em; }
.rm-kpi3 b { font-size: 1.28rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rm-kpi3 .good b { color: var(--safe, #16866e); }
.rm-kpi3 .bad b { color: var(--reach, #b34a59); }
.rm-basisblk { margin-top: 10px; font-size: .88rem; }
.rm-basisblk > b { font-size: .78rem; letter-spacing: .05em; color: var(--muted, #6f7d91); }
.rm-basisblk ul { margin: 5px 0 0; padding-left: 17px; display: flex; flex-direction: column; gap: 3px; }
.rm-basisblk li { line-height: 1.55; }
/* 경계 구간 경구 — 밝은 바탕+짙은 글자 짝을 고정색으로 (테마 토큰 뒤집힘 방지) */
.rm-stability {
  margin-top: 8px; border: 1px solid #e5d089; background: #fdf6dd; color: #7a5c10;
  border-radius: 9px; padding: 7px 11px; font-size: .84rem; font-weight: 700;
}
@media (max-width: 700px) {
  .rm-kpi3 { gap: 6px; }
  .rm-kpi3 b { font-size: 1.02rem; }
  .rm-kpi3 small { font-size: .66rem; }
}
@media print {
  .rm-kpi3 > div, .rm-stability { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rm-kpi3, .rm-basisblk, .rm-stability { break-inside: avoid; }
}

.umx-chip {
  /* 「전국 보기」 단추(.um-back, 8/8)와 같은 자리면 겹쳐 가려진다 — 단추 아래로 */
  position: absolute; left: 8px; top: 44px; z-index: 4;
  background: #10213d; color: #fff; font-size: 12px; font-weight: 700;
  padding: 6px 11px; border-radius: 9px; box-shadow: 0 4px 14px rgba(16,33,61,.2);
}

/* ══════════════════════════════════════════════════════════════════════
   ★★ 생기부 판독기 (2026-08-26 원장님 지시)

   > "AI가 분석한 것처럼 안 보여야 해 … 생기부 원본에서 중요 부분에 밑줄 그어주고,
   >  그 부분이 왜 잘되어 있고 … 원본에 첨삭·의견을 짚어주는 게 믿음이 간다"

   ★ 이 화면의 주인공은 **학생이 쓴 글**이다. 그래서 원문을 크고 편하게 두고,
     우리 의견은 그 아래 작게 붙인다. 반대로 하면 「분석 보고서」가 된다.
   ★ 밑줄 색은 둘뿐이다 — 초록(잘된 곳) · 주황(조심할 곳).
     결과지의 판정 색(초록·노랑·주황·빨강)과 겹치지만, 이 화면에는 판정이 없으므로 안 헷갈린다.
   ══════════════════════════════════════════════════════════════════ */
.rr-head { margin-bottom: 20px; }
.rr-head-label {
  font-size: 11px; font-weight: 800; letter-spacing: .16em;
  color: var(--muted, #6f7d91); text-transform: uppercase; margin-bottom: 7px;
}
.rr-target { font-size: 14px; font-weight: 700; color: var(--accent-text, #2a4a9c); margin-bottom: 6px; }
.rr-headline {
  font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1.45;
  margin: 0 0 10px; text-wrap: balance;
}
.rr-fit {
  display: inline-block; font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: 999px;
}
.rr-fit.ok { background: #e9fbf5; color: #16866e; }
.rr-fit.mid { background: #fff4db; color: #8a6d1a; }
.rr-fit.care { background: #fdf1ef; color: #b32d22; }

/* 짚은 자리 — 원문 인용 + 한마디 */
/* ⚠ 2026-08-26 부터 판독지는 **원고지 옷**(record-read.css)을 입는다.
   아래 .rr-notes / .rr-note* / .rr-major* / .rr-score* / .rr-verdict / .rr-head* 는
   그때 쓰던 옷이고 **지금은 아무도 안 그린다.** 여기를 고쳐도 화면은 안 바뀐다.
   살아 있는 것: .rr-source · .rr-mark · .rr-sup · .rr-chat* · .rr-where · .rr-quote */
.rr-notes { display: flex; flex-direction: column; gap: 11px; }
.rr-note {
  border: 1px solid var(--line, #e3e9f2); border-left: 4px solid var(--line, #e3e9f2);
  border-radius: 10px; padding: 13px 15px; background: var(--card, #fff); break-inside: avoid;
}
.rr-note.good { border-left-color: #16866e; }
.rr-note.care { border-left-color: #c07a1e; }
.rr-note-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; }
.rr-no {
  display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 6px; background: var(--card2, #f1f4f9); color: var(--muted, #6f7d91);
  font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.rr-note.good .rr-no { background: #e9fbf5; color: #16866e; }
.rr-note.care .rr-no { background: #fdf6ea; color: #a86a12; }
.rr-where { font-size: 12px; font-weight: 700; color: var(--muted, #6f7d91); }
.rr-quote {
  margin: 0 0 9px; padding: 9px 13px; border-radius: 8px;
  background: var(--card2, #f6f8fb); border-left: 2px solid var(--line, #e3e9f2);
  font-size: 14px; line-height: 1.7; color: var(--text, #1a2340);
}
.rr-comment { margin: 0; font-size: 14px; line-height: 1.72; color: var(--text, #1a2340); }

/* 어울리는 학과 */
.rr-major { margin-bottom: 20px; }
.rr-major-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 5px; }
.rr-major-no {
  font-size: 12px; font-weight: 800; color: var(--gold, #a8801f); font-variant-numeric: tabular-nums;
}
.rr-major-head b { font-size: 16.5px; letter-spacing: -.03em; }
.rr-major-why { margin: 0 0 10px; font-size: 14px; line-height: 1.7; color: var(--muted-strong, #55607a); }

.rr-missing {
  margin-top: 13px; padding: 12px 15px; border-radius: 10px;
  background: var(--ivory, #faf8f2); border: 1px solid var(--ivory-line, #e6e2d6);
}
.rr-missing b { display: block; font-size: 13px; margin-bottom: 6px; }
.rr-missing ul { margin: 0; padding-left: 19px; }
.rr-missing li { font-size: 13.5px; line-height: 1.7; }

/* ★ 원문 — 이 결과지의 본체 */
.rr-legend { font-size: 12.5px; margin: 2px 0 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.rr-chip { display: inline-block; width: 22px; height: 9px; border-radius: 3px; vertical-align: middle; }
.rr-chip.good { background: linear-gradient(transparent 55%, #9fe3cd 55%); border-bottom: 2px solid #16866e; }
.rr-chip.care { background: linear-gradient(transparent 55%, #f5d9a8 55%); border-bottom: 2px solid #c07a1e; }
.rr-source {
  border: 1px solid var(--line, #e3e9f2); border-radius: 12px; padding: 18px 20px;
  background: var(--card, #fff); font-size: 14.5px; line-height: 2.05;
  letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere;
}
.rr-mark {
  background: transparent; color: inherit; padding: 1px 0; border-radius: 2px;
  position: relative;
}
/* 형광펜이 아니라 **밑줄** — 원장님이 종이에 그은 것처럼 보이게 */
.rr-mark.good { background: linear-gradient(transparent 62%, #b9ecdb 62%); border-bottom: 2px solid #16866e; }
.rr-mark.care { background: linear-gradient(transparent 62%, #fae3bd 62%); border-bottom: 2px solid #c07a1e; }
.rr-sup {
  font-size: 10px; font-weight: 800; vertical-align: super; margin-left: 2px;
  color: var(--muted, #6f7d91);
}
.rr-mark.good .rr-sup { color: #16866e; }
.rr-mark.care .rr-sup { color: #a86a12; }

.rr-closing {
  margin-top: 20px; padding: 15px 18px; border-radius: 11px;
  background: var(--ivory, #faf8f2); border: 1px solid var(--ivory-line, #e6e2d6);
  font-size: 14.5px; line-height: 1.78;
}

@media (max-width: 640px) {
  .rr-headline { font-size: 17.5px; }
  .rr-source { padding: 14px 15px; font-size: 14px; line-height: 1.95; }
}
@media print {
  .rr-note, .rr-major, .rr-source { break-inside: avoid; }
  .rr-mark, .rr-chip, .rr-fit, .rr-no { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── 판독 결과를 놓고 이어서 묻기 (2026-08-26 원장님: "실시간 채팅 이런 거") ── */
.rr-chat {
  margin-top: 22px; border: 1px solid var(--line, #e3e9f2); border-radius: 13px;
  background: var(--card2, #f6f8fb); overflow: hidden;
}
.rr-chat-head {
  padding: 13px 16px; background: var(--card, #fff); border-bottom: 1px solid var(--line, #e3e9f2);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.rr-chat-head b { font-size: 14.5px; }
.rr-chat-head .muted { font-size: 12px; }
.rr-chat-log { padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; max-height: 460px; overflow-y: auto; }
.rr-chat-log:empty { display: none; }
.rr-chat-row { display: flex; }
.rr-chat-row.parent { justify-content: flex-end; }
.rr-chat-bubble {
  max-width: 78%; padding: 11px 14px; border-radius: 13px; font-size: 14px; line-height: 1.72;
  background: var(--card, #fff); border: 1px solid var(--line, #e3e9f2); min-width: 0;
}
.rr-chat-row.parent .rr-chat-bubble {
  background: var(--accent, #3566f0); color: #fff; border-color: transparent;
}
.rr-chat-row.teacher.waiting .rr-chat-bubble { color: var(--muted, #6f7d91); font-style: italic; }
.rr-chat-quotes { margin-top: 9px; display: flex; flex-direction: column; gap: 7px; }
.rr-chat-quote { border-left: 2px solid #16866e; padding-left: 10px; }
.rr-chat-quote .rr-where { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted, #6f7d91); margin-bottom: 2px; }
.rr-chat-quote blockquote {
  margin: 0; font-size: 13px; line-height: 1.65; color: var(--text, #1a2340);
  background: var(--card2, #f6f8fb); padding: 7px 10px; border-radius: 6px;
}
.rr-chat-tips { padding: 0 16px 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.rr-tip {
  font-size: 12px; padding: 6px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line, #e3e9f2); background: var(--card, #fff); color: var(--muted-strong, #55607a);
}
.rr-tip:hover { border-color: var(--accent, #3566f0); color: var(--accent, #3566f0); }
.rr-chat-bar {
  display: flex; gap: 8px; padding: 12px 16px; background: var(--card, #fff);
  border-top: 1px solid var(--line, #e3e9f2); align-items: flex-end;
}
.rr-chat-input {
  flex: 1; min-width: 0; resize: none; font-family: inherit; font-size: 14px; line-height: 1.6;
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line, #e3e9f2);
  background: var(--bg, #fff); color: var(--text, #1a2340);
  /* ⚠ 지난기록 창 안에서는 부모 높이를 따라 늘어난다 — 두 줄로 못 박는다 (2026-08-26 실측) */
  height: 62px; max-height: 62px;
}
.rr-chat-send { flex: none; padding: 10px 18px; border-radius: 10px; }

@media (max-width: 640px) { .rr-chat-bubble { max-width: 90%; } }
/* 종이에는 물음·답을 싣되 입력칸은 뺀다 */
@media print {
  .rr-chat-bar, .rr-chat-tips { display: none !important; }
  .rr-chat-log { max-height: none; overflow: visible; }
  .rr-chat-bubble, .rr-chat-quote { break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── 학과 적합도 점수판 (2026-08-26 원장님: "점수치를 계산해서 주면 좋을 것 같기도 해") ──
   ★ 40점 아래는 빨강이다. 상담 자리에서 **색만 봐도** 알 수 있어야 한다.
   ★ 원장님: "진짜 아닌 건 팩폭을 날려서 이야기해" — 그래서 두루뭉술한 등급 대신 숫자를 크게 둔다. */
.rr-score {
  margin: 16px 0 20px; border: 1px solid var(--line, #e3e9f2); border-radius: 13px;
  overflow: hidden; background: var(--card, #fff);
}
.rr-score-top {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  border-bottom: 1px solid var(--line, #e3e9f2);
}
.rr-score-num { display: flex; align-items: baseline; gap: 4px; }
.rr-score-num b { font-size: 38px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.rr-score-num span { font-size: 13px; color: var(--muted, #6f7d91); }
.rr-score-label { font-size: 16px; font-weight: 800; letter-spacing: -.03em; }

.rr-score.ok .rr-score-top { background: #eef9f5; }
.rr-score.ok { border-color: #a9ddcc; }
.rr-score.ok .rr-score-num b, .rr-score.ok .rr-score-label { color: #16866e; }
.rr-score.mid .rr-score-top { background: #fdf6ea; }
.rr-score.mid { border-color: #ecd39c; }
.rr-score.mid .rr-score-num b, .rr-score.mid .rr-score-label { color: #a86a12; }
.rr-score.care .rr-score-top { background: #fdf0ee; }
.rr-score.care { border-color: #e8b3aa; }
.rr-score.care .rr-score-num b, .rr-score.care .rr-score-label { color: #b32d22; }

.rr-score-bars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px; padding: 16px 18px;
}
.rr-bar { min-width: 0; }
.rr-bar-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.rr-bar-head span { font-size: 13px; font-weight: 700; }
.rr-bar-head b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rr-bar-head b i { font-size: 11px; font-weight: 600; font-style: normal; color: var(--muted, #6f7d91); }
.rr-bar-track { height: 7px; border-radius: 99px; background: var(--card2, #eef1f6); overflow: hidden; }
.rr-bar-track span { display: block; height: 100%; border-radius: 99px; background: #16866e; }
.rr-bar.mid .rr-bar-track span { background: #c07a1e; }
.rr-bar.low .rr-bar-track span { background: #b32d22; }
.rr-bar.low .rr-bar-head b { color: #b32d22; }
.rr-bar p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--muted-strong, #55607a); }

/* 결론 — 낮은 점수일 때 여기가 「팩폭」 자리다 */
.rr-verdict {
  padding: 15px 18px; border-top: 1px solid var(--line, #e3e9f2);
  font-size: 14.5px; line-height: 1.75; background: var(--card2, #f6f8fb);
}
.rr-score.care .rr-verdict { background: #fdf6f5; color: #6d2019; font-weight: 500; }

@media (max-width: 560px) { .rr-score-bars { grid-template-columns: 1fr; } }
@media print {
  .rr-score, .rr-bar { break-inside: avoid; }
  .rr-score, .rr-score-top, .rr-bar-track span, .rr-verdict { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ══════════════════════════════════════════════════════════════════════
   홍보 자료 만들기 — 원장님 화면 (2026-08-26)
   ⚠ 공개 자료 페이지(pack.html)의 옷은 여기가 아니라 record-read.css(원고지)다.
   ══════════════════════════════════════════════════════════════════════ */
.gpm-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 9px; }
.gpm-kinds > * { min-width: 0; }
.gpm-kind {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 15px; cursor: pointer;
  background: var(--card2); border: 1px solid var(--line); border-radius: 10px;
}
.gpm-kind:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.gpm-kind input { margin-top: 3px; flex: none; }
.gpm-kind span { min-width: 0; display: block; }
.gpm-kind b { display: block; font-size: 14px; }
.gpm-kind i { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.55; }

.gpm-pickbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.gpm-pickbar input[type="search"] { flex: 1 1 200px; min-width: 0; }
.gpm-count { font-weight: 700; font-size: 13px; color: var(--accent-text); margin-left: auto; }

.gpm-univs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px;
  max-height: 340px; overflow-y: auto;
  padding: 10px; background: var(--card2); border: 1px solid var(--line); border-radius: 10px;
}
.gpm-univs > * { min-width: 0; }
.gpm-u {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; cursor: pointer; border-radius: 7px;
  border: 1px solid transparent; font-size: 13.5px;
}
.gpm-u:hover { background: var(--card); }
.gpm-u.on { background: var(--accent-soft); border-color: var(--accent-line); }
.gpm-u input { flex: none; }
.gpm-u span { min-width: 0; display: flex; align-items: baseline; gap: 6px; overflow-wrap: anywhere; }
.gpm-u i { font-style: normal; font-size: 11px; color: var(--muted); flex: none; }

.gpm-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.gpm-two > * { min-width: 0; }

.gpm-row {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start;
  padding: 13px 15px; margin-bottom: 8px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 10px;
}
.gpm-row > * { min-width: 0; }
.gpm-row-main { flex: 1 1 260px; }
.gpm-row-main b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.gpm-row-main .muted { display: block; font-size: 12.5px; }
.gpm-views { color: var(--accent-text); }
.gpm-url {
  display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted);
  word-break: break-all; background: var(--card); padding: 4px 8px; border-radius: 6px;
}
.gpm-row-btns { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }
.gpm-row-btns .ghost { padding: 5px 12px; font-size: 12.5px; text-decoration: none; }
.share-pick-inline {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted); cursor: pointer;
  padding: 5px 11px; background: var(--card2); border: 1px solid var(--line); border-radius: 999px;
}
.share-pick-inline:has(input:checked) {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); font-weight: 700;
}
.share-pick-inline input { margin: 0; }

/* 보낸 링크 잠금 상태 줄 (2026-09-07 원장님: "링크를 만들 때 공개 비공개로") — 만든 직후·다시 열었을 때 상태와 토글 */
.share-lockline { border-top: 1px dashed var(--line, #e3e9f2); padding-top: 7px; }
.share-lockline .share-lockstate { letter-spacing: -.01em; }

/* 보낸 링크 관리 화면 (2026-09-07) — 기출분석의 「공개 중 / 꺼짐」 배지와 같은 결 */
.sh-group { border: 1px solid var(--line, #e3e9f2); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.sh-head { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: var(--card2, #f4f7fb); border-bottom: 1px solid var(--line, #e3e9f2); }
.sh-head b { font-size: 14px; }
.sh-head .sh-allbtn { margin-left: auto; padding: 4px 11px; font-size: 12px; }
.sh-row { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-top: 1px solid var(--line, #e3e9f2); flex-wrap: wrap; }
.sh-row:first-of-type { border-top: none; }
.sh-badge { flex: none; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.sh-badge.on { background: #e6f5ec; color: #1f7a4d; border: 1px solid #b6e0c6; }
.sh-badge.off { background: #fdeff1; color: #b34a59; border: 1px solid #e9b9c1; }
.sh-badge.del { background: #eef1f6; color: #6f7d91; border: 1px solid #dfe5ee; }
.sh-row.sh-del { opacity: .72; }
.sh-row .sh-delbtn { color: #b34a59; }
.sh-label { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sh-label b { font-size: 13px; }
.sh-label small { font-size: 11.5px; color: var(--muted, #6f7d91); }
.sh-row .ghost { flex: none; padding: 5px 11px; font-size: 12px; }
.sh-row .sh-open { text-decoration: none; border-radius: 8px; }
@media (max-width: 640px) { .sh-row { gap: 7px; } .sh-label { flex: 1 1 100%; } }
/* 비공개 알약은 잠금 뜻이 드러나게 붉은 기를 준다 */
.share-pick-inline:has(input[id$="Locked"]:checked),
.share-pick-inline:has(input[data-share-locked]:checked) {
  border-color: #e0a2ab; background: #fdeff1; color: #8c3341;
}

/* ── 수능최저 블록 — 나열식 한 줄을 구조로 (2026-08-27 원장님 지시) ──
   "위험사항 안내가 나열식으로 되어 있어서 눈에 하나도 읽히지 않아"
   [모집단위]는 줄 하나씩, ※ 각주는 작게. 글자는 요강 원문 그대로다(자리만 바꿈). */
.rm-minreq {
  margin: 0 0 12px; padding: 12px 14px;
  background: #fdf8ec; border: 1px solid #eaddba; border-left: 3px solid #b98a1c;
  border-radius: 8px; font-size: .86rem; line-height: 1.65; color: #4a4636;
}
.rm-minreq.one { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.rm-minreq.one > * { min-width: 0; }
.rm-minreq b { color: #8a6d1a; }
.rm-minreq-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.rm-minreq-h i { font-style: normal; font-size: .72rem; color: #a08b55; }
.rm-minreq-cond { margin: 0 0 8px; padding-left: 17px; }
.rm-minreq-cond li { margin: 2px 0; }
.rm-minreq-units { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.rm-minreq-units li {
  display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: 10px;
  padding: 7px 11px; background: rgba(255,255,255,.65);
  border: 1px solid #eee3c8; border-radius: 6px;
}
.rm-minreq-units li > * { min-width: 0; }
.rm-minreq-units li b { color: #6f5713; overflow-wrap: anywhere; }
.rm-minreq-note { margin: 8px 0 0; font-size: .78rem; color: #8a7c52; }
.rm-minreq-warn { margin: 8px 0 0; font-size: .8rem; font-weight: 700; color: #a05c14; }
@media print { .rm-minreq, .rm-minreq-units li { break-inside: avoid; } }

/* ── 수능최저 2판 — 한 목록에 종류별 줄 (2026-08-27) ──
   c=조건 · n=※각주(같은 크기, 흐리게 — 작은 글씨로 접었다가 벽이 됐던 1판의 실수를 고침) ·
   u=[모집단위] 이름표. 8줄 넘으면 「더 보기」로 접는다.
   ⚠ .rm-minreq-cond/.rm-minreq-units/.rm-minreq-note 는 1판 옷 — 이제 아무도 안 입는다. */
.rm-minreq-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.rm-minreq-lines li { min-width: 0; line-height: 1.65; }
.rm-minreq-lines li.c { padding: 2px 2px 2px 14px; position: relative; }
.rm-minreq-lines li.c::before { content: "·"; position: absolute; left: 3px; font-weight: 700; color: #b98a1c; }
.rm-minreq-lines li.n { padding: 2px 2px 2px 14px; color: #8a7c52; }
.rm-minreq-lines li.u {
  display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: 10px;
  padding: 7px 11px; background: rgba(255,255,255,.65);
  border: 1px solid #eee3c8; border-radius: 6px;
}
.rm-minreq-lines li.u > * { min-width: 0; }
.rm-minreq-lines li.u b { color: #6f5713; overflow-wrap: anywhere; }
.rm-minreq-more { margin-top: 7px; }
.rm-minreq-more > summary {
  cursor: pointer; list-style: none; display: inline-block;
  font-size: .78rem; font-weight: 700; color: #8a6d1a;
  padding: 4px 12px; background: rgba(255,255,255,.6); border: 1px solid #eee3c8; border-radius: 999px;
}
.rm-minreq-more > summary::-webkit-details-marker { display: none; }
.rm-minreq-more > summary::after { content: " ▾"; }
.rm-minreq-more[open] > summary::after { content: " ▴"; }
.rm-minreq-more > .rm-minreq-lines { margin-top: 7px; }
@media print {
  /* 종이에는 접힌 것이 없어야 한다 */
  .rm-minreq-more > summary { display: none; }
  .rm-minreq-more:not([open]) > .rm-minreq-lines { display: grid; }
  .rm-minreq-lines li { break-inside: avoid; }
}

/* 모집단위 이름이 길면(충남대 200자) 두 칸을 버리고 위아래로 쌓는다 (2026-08-27 원장님 캡쳐)
   ⚠ 짧은 이름도 칸을 40%에서 묶는다 — auto 로 두면 긴 이름이 폭을 다 먹고
     기준 글이 오른쪽 좁은 띠에 세로로 흘러내린다 */
.rm-minreq-lines li.u { grid-template-columns: minmax(90px, 40%) 1fr; }
.rm-minreq-lines li.u.long { display: block; }
.rm-minreq-lines li.u.long b { display: block; margin-bottom: 5px; }

/* 지난기록 검색칸 (2026-08-29) — 원장님 화면 전용 */
.usage-findbar { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.usage-findbar input {
  flex: 0 1 320px; min-width: 0; padding: 9px 13px; font-size: 13.5px;
  border: 1.5px solid var(--line, #3a4a6b); border-radius: 8px;
  background: var(--card, #16213c); color: var(--text, #e8eefc);
}
.usage-findbar input:focus { outline: none; border-color: var(--accent, #ebcb7b); }

/* ══ 면접 영상 코칭 (.ivv) — 2026-09-01 ══
   인용(.ivv-quote)은 영상 속 학생의 실제 발언 — 이탤릭 인용줄로 가른다. */
.ivv-quote {
  margin: 6px 0 2px; padding: 6px 12px; font-style: italic; font-size: 13px;
  color: #3d4a63; background: #f4f6fb; border-left: 3px solid #9fb2d8; border-radius: 0 6px 6px 0;
}
.ivv-how { margin-top: 4px; font-size: 12.5px; color: #1f6b45; font-weight: 600; }
.ivv-delivery { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ivv-delivery li { background: #fff; border: 1px solid #dfe5f0; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; color: #2a3550; min-width: 0; }
.ivv-delivery li b { color: #10213d; margin-right: 6px; }
.ivv-next { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 7px; font-size: 14px; color: #22304e; }
.ivv-tr { margin-top: 10px; border: 1px solid #dfe5f0; border-radius: 10px; background: #fff; }
.ivv-tr > summary { cursor: pointer; padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: #33415f; }
.ivv-tr-body { padding: 4px 16px 14px; font-size: 13.5px; line-height: 1.75; color: #2a3550; }
.ivv-tr-body p { margin: 0 0 6px; }
@media print { .ivv-tr[open], .ivv-tr { break-inside: auto; } .ivv-tr > summary { display: none; } .ivv-tr-body { padding-top: 12px; } }

/* ── 카드 전형 줄 강조 (2026-09-05 원장님: "상단에 전형이 잘 안 보여") — 세 결과지 공통 ── */
.rm-adm { color: #10213d; font-size: .92rem; font-weight: 700; margin: 4px 0 8px; }
.rm-adm .adm { display: inline-block; background: #eef2fb; border: 1px solid #c9d6ef; border-radius: 7px; padding: 2px 9px; font-weight: 900; color: #1f3b8f; }

/* 실전 면접 시험 — 응시 현황 (2026-09-07). 보낸 링크 목록(.sh-row)과 같은 옷을 입힌다 */
.sh-badge.live { background: #fff3dc; color: #8a642b; border: 1px solid #f0dcae; }
.mock-play { padding: 0 4px 6px 4px; }
.mock-play video { display: block; }

/* ══════════════════════════════════════════════════════════════════════
   카드 안 안내 한 줄 — 「.card-note」 (2026-09-08 원장님이 면접 판독기에서 발견)

   ⚠⚠ **`.hs-head-note` 를 빌려 쓰지 말 것.** 그건 고교분석 탭 머리의 **오른쪽 구석**용이라
   `text-align: right; max-width: 320px` 이 걸려 있다(school-report.css). 카드 본문에 그대로 쓰면
   글이 오른쪽으로 몰리고 320px에서 어색하게 꺾인다 — 실제로 세 곳이 그렇게 나가 있었다
   (생기부 판독기 · 면접 판독기 · 실전 면접 시험).
   ⚠ 밝은/어두운 테마 둘 다 도는 화면이라 색은 **토큰으로만** 쓴다.
   ══════════════════════════════════════════════════════════════════════ */
.card-note {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-size: 12.5px;
  line-height: 1.75;
  text-align: left;
  max-width: none;
}
.card-note > b { display: block; color: var(--accent-text); margin-bottom: 3px; }
.card-note > span { color: var(--muted); }
.card-note b b, .card-note span b { color: var(--text); font-weight: 700; }

/* ★ 희망 라인 기준 추천 (2026-09-10) — 희망 표식 · 우리 판단 · 절 머리말 */
.rm-wishtag { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: #fbf3df; color: #8a642b; border: 1px solid #e8d5a5; vertical-align: middle; }
.rm-wishtag.alt { background: var(--card2, #f4f7fb); color: var(--muted, #6f7d91); border-color: var(--line, #e3e9f2); }
.rm-wish-note { font-size: 13px; line-height: 1.7; color: var(--text, #10213d); background: #fbf3df; border: 1px solid #e8d5a5; border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }
.rm-wish-nf { font-size: 12px; margin-top: 8px; line-height: 1.6; }
.rm-wishv { margin-top: 8px; border-radius: 10px; padding: 10px 13px; font-size: 12.5px; line-height: 1.65; border: 1px solid var(--line, #e3e9f2); background: var(--card2, #f4f7fb); }
.rm-wishv > b { display: block; font-size: 12.5px; margin-bottom: 3px; }
.rm-wishv > span { display: block; color: var(--text, #10213d); }
.rm-wishv.ok { background: var(--safe-bg, #e9fbf5); border-color: #bee0d5; } .rm-wishv.ok > b { color: var(--safe, #16866e); }
.rm-wishv.swap { background: var(--mid-bg, #fff4db); border-color: #f0dcae; } .rm-wishv.swap > b { color: var(--mid, #a36c16); }
.rm-wishv.no { background: var(--reach-bg, #fff0f1); border-color: #ebc7cb; } .rm-wishv.no > b { color: var(--reach, #b34a59); }
.rm-wish-swap { margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--line, #e3e9f2); }
.rm-wish-swap i { font-style: normal; color: var(--muted, #6f7d91); font-size: 11.5px; }
/* 추천 실행 카드의 희망 대학 상자 (원장님 화면) */
.rm-wishbox { margin: 8px 0 4px; padding: 9px 12px; border-radius: 10px; border: 1px dashed var(--line, #e3e9f2); font-size: 12.5px; line-height: 1.6; }
.rm-wishbox .ws-basket { margin-top: 5px; }
.rm-wishbox label { margin-left: 6px; font-weight: 700; }

/* 장바구니 학생 목록 — 찾기 칸 · 마지막 판독 일시 (2026-09-10) */
.bk-stufind { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.bk-stufind input { flex: 1 1 auto; min-width: 0; font-size: 13px; padding: 6px 9px; }
.bk-stufind .muted { font-size: 11.5px; white-space: nowrap; }
.bk-stu { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.bk-stu .bk-stu-read { font-size: 11px; color: var(--accent-text, #8a642b); font-weight: 700; }
.bk-stu .bk-stu-read.none { color: var(--muted, #6f7d91); font-weight: 500; }
.bk-stulist { display: flex; flex-direction: row; flex-wrap: wrap; gap: 7px; flex: 1 1 100%; }

/* ═══ 목표대학 상담 2판 — 판독 절 · 요강 재료 · 남은 학기 로드맵 (2026-09-22 원장님: "결과지가 너무 빈약해") ═══ */
.gc-note { font-size: 12.5px; color: var(--muted, #6f7d91); line-height: 1.7; margin-bottom: 9px; }
.gc-marks { margin-top: 10px; border: 1px solid var(--line, #e3e9f2); border-radius: 10px; padding: 11px 14px; background: var(--card, #fff); }
.gc-marks > b { display: block; font-size: 12.5px; margin-bottom: 6px; }
.gc-marks.good > b { color: var(--safe, #16866e); }
.gc-marks.warn > b { color: var(--reach, #b34a59); }
.gc-marks.miss > b { color: var(--warn, #8a6508); }
.gc-marks ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.75; }
.gc-mark { padding: 7px 0; border-top: 1px dashed var(--line, #e3e9f2); }
.gc-mark:first-of-type { border-top: 0; padding-top: 2px; }
.gc-mark-where { display: inline-block; font-size: 11px; font-weight: 800; color: var(--muted, #6f7d91); background: var(--card2, #f4f7fb); border-radius: 6px; padding: 2px 7px; margin-bottom: 4px; }
.gc-mark-cmt { font-size: 13px; line-height: 1.75; color: var(--text, #10213d); }
.gc-quote { margin: 6px 0 2px; padding: 8px 12px; border-left: 3px solid var(--accent, #3566f0); background: var(--accent-soft, #eef3fe); border-radius: 0 8px 8px 0; font-size: 13.5px; line-height: 1.8; color: var(--text, #10213d); font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif; }
.gc-prep { margin-top: 9px; display: grid; grid-template-columns: 1fr; gap: 5px; font-size: 12.5px; }
.gc-prep > div { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: start; min-width: 0; }
.gc-prep > div > b { font-size: 11.5px; color: var(--muted, #6f7d91); padding-top: 1px; }
.gc-prep > div > span { line-height: 1.65; overflow-wrap: anywhere; }
.gc-prep i { font-style: normal; font-size: 11px; color: var(--muted, #6f7d91); }
.gc-prep em { font-style: normal; font-weight: 800; color: var(--accent, #3566f0); }
.gc-lens { margin-top: 9px; border: 1px solid var(--mid-line, #e7d3a8); background: var(--warn-bg, #fff7e0); border-radius: 10px; padding: 10px 13px; }
.gc-lens > b { display: block; font-size: 12.5px; color: var(--warn, #8a6508); margin-bottom: 4px; }
.gc-lens > b i { font-style: normal; font-weight: 600; font-size: 11px; opacity: .8; }
.gc-lens-item { padding: 6px 0; border-top: 1px dashed var(--mid-line, #e7d3a8); }
.gc-lens-item:first-of-type { border-top: 0; }
.gc-lens-what { font-size: 13px; font-weight: 700; line-height: 1.6; }
.gc-lens-so { font-size: 12.5px; line-height: 1.65; color: var(--text, #10213d); }
.gc-road { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.gc-sem { border: 1px solid var(--line, #e3e9f2); border-radius: 12px; background: var(--card, #fff); padding: 12px 14px; }
.gc-sem.now { border-color: var(--accent, #3566f0); box-shadow: inset 4px 0 0 var(--accent, #3566f0); }
.gc-sem-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.gc-sem-no { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: var(--text, #10213d); color: #fff; }
.gc-sem-head > b { font-size: 15px; letter-spacing: -.01em; }
.gc-sem-head > i { font-style: normal; font-size: 11px; font-weight: 800; color: var(--accent, #3566f0); background: var(--accent-soft, #eef3fe); border-radius: 6px; padding: 2px 7px; }
.gc-sem-goal { margin-left: auto; font-size: 12.5px; color: var(--text, #10213d); background: var(--card2, #f4f7fb); border-radius: 8px; padding: 4px 10px; line-height: 1.5; }
.gc-sem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gc-sem-box { min-width: 0; border: 1px solid var(--line, #e3e9f2); border-radius: 9px; padding: 9px 11px; background: var(--card2, #f4f7fb); font-size: 12.5px; line-height: 1.7; }
.gc-sem-box > b { display: block; font-size: 11.5px; color: var(--muted, #6f7d91); margin-bottom: 4px; }
.gc-sem-box ul, .gc-sem-box ol { margin: 0; padding-left: 16px; }
.gc-now-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; margin-top: 10px; }
.gc-now, .gc-avoid { border-radius: 10px; padding: 11px 14px; font-size: 13px; line-height: 1.75; }
.gc-now { background: var(--accent-soft, #eef3fe); border: 1px solid var(--accent, #3566f0); }
.gc-avoid { background: var(--reach-bg, #fdf0f2); border: 1px solid var(--reach, #b34a59); }
.gc-now > b, .gc-avoid > b { display: block; font-size: 12.5px; margin-bottom: 4px; }
.gc-now > b { color: var(--accent, #3566f0); } .gc-avoid > b { color: var(--reach, #b34a59); }
.gc-now ol, .gc-avoid ul { margin: 0; padding-left: 18px; }
@media screen and (max-width: 820px) {
  .gc-sem-grid, .gc-now-grid { grid-template-columns: 1fr; }
  .gc-sem-goal { margin-left: 0; width: 100%; }
  .gc-prep > div { grid-template-columns: 62px 1fr; }
}
@media print {
  .gc-sem, .gc-marks, .gc-lens, .gc-now, .gc-avoid { break-inside: avoid; }
}

/* ═══ 대학·학과·전형 자동완성 상자 (2026-09-22) — 원장님 화면(index)에서만 쓰인다. 테마 토큰 그대로 ═══ */
.ac-box { position: absolute; z-index: 9999; max-height: 320px; overflow-y: auto; background: var(--card, #fff); color: var(--text, #10213d); border: 1px solid var(--line, #e3e9f2); border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: 4px; font-size: 13px; }
.ac-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 7px; cursor: pointer; line-height: 1.4; }
.ac-item:hover, .ac-item.on { background: var(--accent-soft, #eef3fe); }
.ac-item b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ac-item b mark { background: transparent; color: var(--accent, #3566f0); font-weight: 800; padding: 0; }
.ac-item span { flex: none; font-size: 11px; color: var(--muted, #6f7d91); }
.ac-item .ac-iv { flex: none; font-style: normal; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 2px 7px; color: var(--muted, #6f7d91); background: var(--card2, #f4f7fb); }
.ac-item .ac-iv.on { color: #fff; background: #6b46c1; }
.ac-foot { padding: 5px 10px 3px; font-size: 11px; color: var(--muted, #6f7d91); border-top: 1px dashed var(--line, #e3e9f2); margin-top: 3px; }


/* ── 보고서 그림 (2026-10-04) — 그래프는 SVG, 도식은 그림 대기줄에서 채워진다. 학생 공유 화면도 같은 옷 ── */
.rd-figs { display: grid; gap: 14px; margin: 4px 0 14px; }
.rd-fig { margin: 0; padding: 12px 14px 10px; border: 1px solid var(--line, #e3e8f2); border-radius: 12px; background: var(--card, #fff); min-width: 0; }
.rd-fig-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rd-fig-h b { font-size: 14px; color: var(--text, #1f2a44); }
.rd-fig-save { font-size: 12px; padding: 4px 10px; text-decoration: none; }
.rd-fig-body { position: relative; width: 100%; overflow: hidden; border-radius: 8px; background: #fff; }
.rd-fig-body svg { display: block; width: 100%; height: auto; max-height: 420px; }
.rd-fig-body img { display: block; width: 100%; height: auto; }
.rd-fig-wait { display: flex; align-items: center; gap: 10px; min-height: 120px; padding: 18px; background: repeating-linear-gradient(45deg, #f6f8fc, #f6f8fc 10px, #eef2f8 10px, #eef2f8 20px); color: var(--muted, #6f7d91); font-size: 13px; }
.rd-fig-spin { width: 16px; height: 16px; border: 2px solid #c7d0e0; border-top-color: #3566f0; border-radius: 50%; animation: rdspin 1s linear infinite; flex: none; }
@keyframes rdspin { to { transform: rotate(360deg); } }
.rd-fig figcaption { margin-top: 8px; font-size: 12.5px; color: var(--muted, #6f7d91); line-height: 1.5; }
.rd-fig figcaption em { font-style: normal; color: #b45309; }
.rd-fig-data { margin-top: 6px; font-size: 12px; }
.rd-fig-data summary { cursor: pointer; color: var(--muted, #6f7d91); }
.rd-fig-table { border-collapse: collapse; margin-top: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.rd-fig-table th, .rd-fig-table td { border: 1px solid var(--line, #e3e8f2); padding: 4px 8px; text-align: right; }
.rd-fig-table th:first-child, .rd-fig-table td:first-child { text-align: left; }
.rd-fig-table th i { font-style: normal; font-weight: 400; color: var(--muted, #6f7d91); }
@media print { .rd-fig { break-inside: avoid; } .rd-fig-save, .rd-fig-data { display: none !important; } }