/* ============================================================
   미래일터 탐험대 · 교사·강사 자료실 전용 (접두사 tc-)
   로드 순서: tokens.css → base.css → comp.css → anim.css → teacher.css
   목적 1) 화면에서 읽기 쉬운 지도안·루브릭
   목적 2) A4 인쇄가 실제로 예쁘게 나오는 활동지·발문카드
   ============================================================ */

:root{
  --tc-rule:#C3CAD6;        /* 필기 괘선 */
  --tc-boxline:#9AA5B5;     /* 기입 박스 테두리 */
  --tc-cut:#9AA5B5;         /* 자르는 선 */
}

[hidden]{ display:none !important; }

/* ── 히어로(작게) ─────────────────────────────────────── */
.tc-hero{ position:relative; overflow:hidden; }
.tc-hero__eyebrow{ display:inline-flex; align-items:center; gap:8px; margin-bottom:var(--sp-3);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.26);
  padding:5px 13px; border-radius:var(--radius-pill); font-size:13px; font-weight:750; color:#fff; }
.tc-hero h1{ font-size:var(--fs-h1); color:#fff; margin-bottom:var(--sp-3); }
.tc-hero p{ color:var(--space-muted); max-width:62ch; }
.tc-hero__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-5); }

/* ── 3스텝 준비 안내 ──────────────────────────────────── */
.tc-steps{ list-style:none; padding:0; margin:0; display:grid; gap:var(--gut);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); counter-reset:tcs; }
.tc-steps>li{ counter-increment:tcs; margin:0; position:relative; background:var(--bg);
  border:1.5px solid var(--border); border-radius:var(--radius-kid); padding:var(--sp-5) var(--sp-5) var(--sp-5) 62px; }
.tc-steps>li::before{ content:counter(tcs); position:absolute; left:var(--sp-5); top:var(--sp-5);
  width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff;
  display:grid; place-items:center; font-weight:850; font-size:15px; }
.tc-steps h3{ font-size:17px; margin-bottom:6px; }
.tc-steps p{ margin:0; font-size:14.5px; color:var(--text-muted); }
.tc-steps p+p{ margin-top:6px; }

/* ── 진입 카드 ────────────────────────────────────────── */
.tc-entry{ display:flex; flex-direction:column; gap:var(--sp-2); text-decoration:none;
  background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-kid-lg);
  padding:var(--sp-5); min-height:172px; transition:transform var(--dur-2) var(--ease),
  box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); }
.tc-entry:hover{ transform:translateY(-3px); box-shadow:var(--shadow-3); border-color:var(--brand-600); }
.tc-entry__icon{ font-size:32px; line-height:1; }
.tc-entry__title{ font-size:18px; font-weight:850; color:var(--text-strong); letter-spacing:-.02em; }
.tc-entry__desc{ font-size:14.5px; color:var(--text-muted); margin:0; line-height:1.6; }
.tc-entry__go{ margin-top:auto; font-size:14px; font-weight:750; color:var(--brand-link); }

/* ── 도구 바 (인쇄 버튼 등) ───────────────────────────── */
.tc-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-kid);
  padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-5); }
.tc-toolbar__label{ font-size:var(--fs-small); font-weight:750; color:var(--text-muted); }

/* ── 행성 선택기 ──────────────────────────────────────── */
.tc-picker{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
  background:var(--planet-tint); border:1.5px solid var(--border); border-radius:var(--radius-kid);
  padding:var(--sp-4) var(--sp-5); }
.tc-picker__label{ font-weight:800; color:var(--text-strong); font-size:15px; }
.tc-picker select{ font-family:inherit; font-size:15.5px; font-weight:700; color:var(--text-strong);
  min-height:var(--tap-min); padding:0 var(--sp-4); border:2px solid var(--border);
  border-radius:var(--radius-kid); background:var(--bg); cursor:pointer; max-width:100%; }
.tc-picker select:focus-visible{ border-color:var(--brand-link); }
.tc-picker__hint{ font-size:13.5px; color:var(--text-muted); }

/* 치환되는 예시 텍스트 */
.tc-slot{ background:var(--planet-tint); color:var(--planet-ink); border-radius:6px;
  padding:1px 6px; font-weight:750; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.tc-slot--plain{ background:transparent; padding:0; color:inherit; font-weight:750; }

/* ── 지도안 ───────────────────────────────────────────── */
.tc-plan{ border:1.5px solid var(--border); border-radius:var(--radius-kid-lg); overflow:hidden;
  background:var(--bg); margin-bottom:var(--sp-8); }
.tc-plan__head{ padding:var(--sp-5); background:var(--planet-tint); border-bottom:1.5px solid var(--border); }
.tc-plan__badges{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-3); }
.tc-plan__head h3{ margin:0; font-size:var(--fs-h3); color:var(--planet-ink); }
.tc-plan__body{ padding:var(--sp-5); }
.tc-plan__body>*+*{ margin-top:var(--sp-5); }
.tc-plan h4{ font-size:16px; margin:0 0 var(--sp-3); display:flex; align-items:center; gap:8px; }
.tc-plan h4::before{ content:""; width:5px; height:17px; border-radius:3px; background:var(--planet); flex:0 0 auto; }
.tc-plan ol,.tc-plan ul{ margin:0; }

.tc-goals{ counter-reset:g; list-style:none; padding:0; margin:0; }
.tc-goals li{ counter-increment:g; position:relative; padding-left:32px; margin-top:var(--sp-2); }
.tc-goals li::before{ content:"목표 " counter(g); position:absolute; left:0; top:3px; font-size:10.5px;
  font-weight:850; color:var(--planet); letter-spacing:-.02em; }

.tc-kv{ margin:0; display:grid; gap:0; grid-template-columns:1fr; border:1.5px solid var(--border);
  border-radius:var(--radius-kid); overflow:hidden; }
@media (min-width:720px){ .tc-kv{ grid-template-columns:160px 1fr; } }
.tc-kv dt{ background:var(--surface-2); font-weight:800; font-size:14px; color:var(--text-strong);
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border); }
.tc-kv dd{ margin:0; padding:var(--sp-3) var(--sp-4); font-size:14.5px; border-bottom:1px solid var(--border); }
.tc-kv dt:last-of-type,.tc-kv dd:last-of-type{ border-bottom:0; }
@media (max-width:719px){ .tc-kv dt{ border-bottom:0; } }

table.tc-flow th:first-child,table.tc-flow td:first-child{ white-space:nowrap; font-weight:800;
  color:var(--planet); font-variant-numeric:tabular-nums; width:1%; }
table.tc-flow td:last-child{ color:var(--text-muted); font-size:13.5px; }
table.tc-flow tr.tc-flow--rest td{ background:var(--surface); color:var(--text-muted); font-style:normal; }

.tc-trouble{ list-style:none; padding:0; margin:0; display:grid; gap:var(--sp-3); }
.tc-trouble>li{ margin:0; border:1.5px solid var(--border); border-left:5px solid var(--warning-solid);
  border-radius:var(--radius-kid); padding:var(--sp-4) var(--sp-5); background:var(--bg); }
.tc-trouble__q{ font-weight:800; color:var(--text-strong); margin:0 0 6px; font-size:15px; }
.tc-trouble__q::before{ content:"상황 "; font-size:11px; color:var(--warning); letter-spacing:.04em; }
.tc-trouble__a{ margin:0; font-size:14.5px; line-height:1.68; }
.tc-trouble__a::before{ content:"대처 "; font-size:11px; font-weight:850; color:var(--success); letter-spacing:.04em; }

.tc-variant{ display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.tc-variant__box{ background:var(--surface); border-radius:var(--radius-kid); padding:var(--sp-4) var(--sp-5); }
.tc-variant__box b{ display:block; margin-bottom:4px; font-size:14px; }
.tc-variant__box p{ margin:0; font-size:14.5px; }

/* ── 체크리스트 ───────────────────────────────────────── */
.tc-check{ list-style:none; padding:0; margin:0; }
.tc-check>li{ position:relative; padding-left:30px; margin-top:var(--sp-2); font-size:14.5px; line-height:1.6; }
.tc-check>li::before{ content:""; position:absolute; left:0; top:4px; width:16px; height:16px;
  border:2px solid var(--tc-boxline); border-radius:4px; background:var(--bg); }
.tc-checkcard{ background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-kid);
  padding:var(--sp-5); }
.tc-checkcard h4{ font-size:15.5px; margin:0 0 var(--sp-3); color:var(--planet-ink); }

/* ── 캠프 ─────────────────────────────────────────────── */
.tc-day{ border:1.5px solid var(--border); border-radius:var(--radius-kid-lg); overflow:hidden; margin-bottom:var(--sp-5); }
.tc-day__head{ background:var(--space-1); color:#fff; padding:var(--sp-4) var(--sp-5); }
.tc-day__head h3{ color:#fff; margin:0; font-size:18px; }
.tc-day__head p{ margin:4px 0 0; font-size:13.5px; color:var(--space-muted); }
.tc-day__body{ padding:0; }

/* ── 루브릭 ───────────────────────────────────────────── */
table.tc-rubric{ font-size:13.8px; }
table.tc-rubric th{ font-size:13px; }
table.tc-rubric td:first-child{ background:var(--surface); font-weight:800; color:var(--text-strong); width:16%; }
table.tc-rubric thead th:nth-child(2){ background:var(--success-tint); color:var(--success); }
table.tc-rubric thead th:nth-child(3){ background:var(--info-tint); color:var(--info); }
table.tc-rubric thead th:nth-child(4){ background:var(--surface-2); }
table.tc-rubric thead th:nth-child(5){ background:var(--warning-tint); color:var(--warning); }
.tc-rubric__frame{ display:block; font-size:11.5px; font-weight:700; color:var(--text-muted); margin-top:4px; }

/* ── 학생부 기재 예시 ─────────────────────────────────── */
.tc-record{ border:1.5px solid var(--border); border-radius:var(--radius-kid); overflow:hidden; background:var(--bg); }
.tc-record__head{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4); background:var(--surface); border-bottom:1px solid var(--border); }
.tc-record__name{ font-weight:850; color:var(--text-strong); font-size:15px; }
.tc-record__len{ font-size:12px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.tc-record__body{ padding:var(--sp-4) var(--sp-5); font-size:14.6px; line-height:1.78; margin:0; }
.tc-record .btn{ margin-left:auto; }

/* ── 발문 카드 ────────────────────────────────────────── */
.tc-filterbar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-kid);
  padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-5); }
.tc-filterbar select{ font-family:inherit; font-size:14.5px; font-weight:700; min-height:40px;
  padding:0 var(--sp-3); border:1.5px solid var(--border); border-radius:var(--radius); background:var(--bg); }
.tc-filterbar__count{ font-size:13.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; }

.tc-qgroup{ margin-bottom:var(--sp-6); }
.tc-qgroup__h{ font-size:16px; margin:0 0 var(--sp-3); display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.tc-qgrid{ display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.tc-qc{ border:1.5px solid var(--border); border-radius:var(--radius-kid); padding:var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-2); background:var(--bg); min-height:132px; }
.tc-qc--open{ background:var(--info-tint); border-color:transparent; }
.tc-qc--deep{ background:var(--warning-tint); border-color:transparent; }
.tc-qc--share{ background:var(--success-tint); border-color:transparent; }
.tc-qc__top{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:11.5px; font-weight:800; }
.tc-qc__type{ letter-spacing:.02em; }
.tc-qc--open .tc-qc__type{ color:var(--info); }
.tc-qc--deep .tc-qc__type{ color:var(--warning); }
.tc-qc--share .tc-qc__type{ color:var(--success); }
.tc-qc__planet{ margin-left:auto; color:var(--text-muted); font-weight:700; }
.tc-qc__text{ margin:0; font-size:15.2px; line-height:1.6; font-weight:650; color:var(--text-strong); flex:1; }
.tc-qc__foot{ font-size:10.5px; color:var(--text-muted); letter-spacing:.02em; }

/* ── 내려받기 표 ──────────────────────────────────────── */
table.tc-dl td:first-child{ font-weight:750; color:var(--text-strong); }
.tc-dl__state{ font-size:12px; font-weight:800; padding:2px 7px; border-radius:5px; white-space:nowrap; }
.tc-dl__state--web{ background:var(--success-tint); color:var(--success); }
.tc-dl__state--soon{ background:var(--warning-tint); color:var(--warning); }
.tc-dl__path{ display:block; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; color:var(--text-muted); word-break:break-all; }
.tc-dl__pending{ display:inline-block; margin-top:4px; font-size:11.5px; font-weight:800;
  padding:2px 7px; border-radius:5px; background:var(--surface-2); color:var(--text-muted); }

/* ============================================================
   활동지 (A4 인쇄 최적화)
   ============================================================ */
.tc-sheet{ background:var(--bg); border:1.5px solid var(--border); border-radius:var(--radius-kid);
  padding:clamp(18px,3vw,30px); margin-bottom:var(--sp-8); max-width:210mm; margin-inline:auto; }
.tc-sheet__bar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.tc-sheet__bar .btn{ margin-left:auto; }
.tc-sheet__head{ border-bottom:2.5px solid var(--text-strong); padding-bottom:8px; margin-bottom:14px; }
.tc-sheet__no{ font-size:11.5px; font-weight:850; letter-spacing:.08em; color:var(--text-muted); }
.tc-sheet__title{ font-size:20px; font-weight:850; color:var(--text-strong); margin:2px 0 0; letter-spacing:-.02em; }
.tc-sheet__sub{ font-size:12.5px; color:var(--text-muted); margin:4px 0 0; }
.tc-sheet__id{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px 14px;
  margin-bottom:16px; }
.tc-sheet__id span{ display:flex; align-items:flex-end; gap:6px; font-size:12.5px; font-weight:750;
  color:var(--text-strong); }
.tc-sheet__id span::after{ content:""; flex:1; border-bottom:1.4px solid var(--tc-boxline); height:20px; }
.tc-sheet h3{ font-size:14.5px; margin:16px 0 7px; padding-left:9px; border-left:4px solid var(--text-strong);
  line-height:1.35; }
.tc-sheet h3:first-of-type{ margin-top:0; }
.tc-sheet .tc-hint{ font-size:11.8px; color:var(--text-muted); margin:0 0 6px; }
.tc-sheet__foot{ margin-top:18px; padding-top:8px; border-top:1px solid var(--tc-rule);
  font-size:10.5px; color:var(--text-muted); line-height:1.5; }

/* 필기 괘선 */
.tc-lines{ display:block; }
.tc-lines>span{ display:block; height:9.6mm; border-bottom:1.2px solid var(--tc-rule); }
.tc-lines--tight>span{ height:8mm; }

/* 기입 박스 */
.tc-box{ border:1.4px solid var(--tc-boxline); border-radius:8px; }
.tc-box--sm{ min-height:20mm; }
.tc-box--md{ min-height:32mm; }
.tc-box--lg{ min-height:48mm; }
.tc-box--xl{ min-height:66mm; }
.tc-box__cap{ display:block; font-size:11px; font-weight:800; color:var(--text-muted);
  padding:5px 8px 0; }

.tc-boxgrid{ display:grid; gap:8px; grid-template-columns:1fr 1fr; }
.tc-boxgrid--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:560px){ .tc-boxgrid,.tc-boxgrid--3{ grid-template-columns:1fr; } }

.tc-formwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.tc-form{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.tc-form th,table.tc-form td{ border:1.2px solid var(--tc-boxline); padding:6px 8px;
  vertical-align:top; text-align:left; }
table.tc-form th{ background:var(--surface-2); font-weight:800; font-size:11.8px; white-space:nowrap; }
table.tc-form td.tc-form__blank{ height:11mm; }
table.tc-form td.tc-form__blank--tall{ height:20mm; }
.tc-scale{ white-space:nowrap; font-size:11.5px; letter-spacing:.14em; color:var(--text-muted); }

/* 좁은 화면에서는 머리글을 줄바꿈해 표가 화면 폭 안에 들어오게 한다 */
@media screen and (max-width:560px){
  table.tc-form th{ white-space:normal; }
}

.tc-cutline{ text-align:center; font-size:10.5px; color:var(--text-muted); letter-spacing:.3em;
  border-top:1.4px dashed var(--tc-cut); margin:14px 0 10px; padding-top:4px; }

/* ============================================================
   인쇄
   ============================================================ */
@media print{
  @page{ size:A4; margin:14mm; }

  html,body{ background:#fff !important; }
  body{ font-size:10.8pt; line-height:1.55; }
  p,li,td,th{ orphans:3; widows:3; }
  h1,h2,h3,h4{ break-after:avoid; page-break-after:avoid; }

  /* 화면 전용 요소 감추기 */
  .tc-toolbar,.tc-picker,.tc-filterbar,.tc-sheet__bar,.tc-entry,.tc-steps,
  .tc-hero__actions,.crumb,.tc-qgroup__h,.tc-record .btn{ display:none !important; }

  /* 다크 히어로는 흰 종이 + 검은 글씨로 (잉크 절약, 배경 인쇄 꺼도 읽힘) */
  .tc-hero{ background:#fff !important; color:#000 !important; padding-top:0 !important; }
  .tc-hero h1,.tc-hero .lead,.tc-hero__eyebrow{ color:#000 !important; }
  .tc-hero .starfield{ display:none !important; }

  /* 배경색·그림자 제거 (잉크 절약 + 흑백 안전) */
  .tc-sheet,.tc-plan,.tc-day,.tc-checkcard,.tc-record,.tc-qc,.tc-variant__box,.tc-steps>li{
    box-shadow:none !important; background:#fff !important; }
  .tc-plan__head,.tc-day__head,.tc-record__head{ background:#fff !important; color:#000 !important;
    border-bottom:1.5px solid #000 !important; }
  .tc-day__head h3,.tc-day__head p{ color:#000 !important; }
  .tc-slot{ background:transparent !important; color:#000 !important; padding:0; text-decoration:underline; }

  /* 활동지: 한 장에 하나씩 */
  .tc-sheet{ border:0 !important; border-radius:0; padding:0 !important; margin:0 !important;
    max-width:none; break-after:page; page-break-after:always; }
  .tc-sheet:last-of-type{ break-after:auto; page-break-after:auto; }
  .tc-sheet a[href^="http"]::after{ content:"" !important; }
  .tc-sheet__foot{ position:relative; }
  body.tc-only .tc-sheet:not(.tc-sheet--active){ display:none !important; }
  body.tc-only .tc-sheet--active{ break-after:auto; page-break-after:auto; }

  /* 지도안 / 캠프: 블록이 페이지 중간에 잘리지 않게 */
  .tc-plan,.tc-day,.tc-checkcard,.tc-record,.tc-trouble>li,.tc-variant__box{ break-inside:avoid; }
  .tc-plan{ border:1px solid #999 !important; margin-bottom:10mm; }
  .tbl-scroll,.tc-formwrap{ overflow:visible !important; border:0 !important; }
  table.tbl{ font-size:9.6pt; }
  table.tbl thead th{ background:#EEE !important; position:static; }
  table.tbl tbody tr{ break-inside:avoid; }

  /* 발문 카드: A4 한 장에 2×3 = 6장, 자르는 선 표시 */
  .tc-qgrid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:0 !important; }
  .tc-qc{ height:85mm; border:1px dashed #888 !important; border-radius:0 !important;
    padding:9mm 8mm !important; break-inside:avoid; min-height:0; }
  .tc-qc__text{ font-size:13pt; line-height:1.5; }
  .tc-qc__top{ font-size:8.5pt; }
  .tc-qc__foot{ font-size:7.5pt; }
  .tc-qgroup{ margin:0; }
  .tc-qgroup+.tc-qgroup{ break-before:page; page-break-before:always; }

  /* 괘선·박스는 인쇄에서 더 진하게 */
  .tc-lines>span{ border-bottom-color:#8A8A8A; }
  .tc-box,table.tc-form th,table.tc-form td{ border-color:#7A7A7A; }
  table.tc-form th{ background:#F0F0F0 !important; }
}

/* ============================================================
   커리어넷 검사 활용 페이지 (/teacher/careernet/)
   접두사 tc-  ·  화면 규칙 → 아래 @media print 에서 인쇄 규칙
   ============================================================ */

/* ── 윤리 원칙 3장 ─────────────────────────────────────── */
.tc-principle{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  margin:0; padding:0; list-style:none; counter-reset:tcp; }
.tc-principle>li{ counter-increment:tcp; margin:0; position:relative; background:var(--bg);
  border:1.5px solid var(--border); border-left:6px solid var(--warning-solid);
  border-radius:var(--radius-kid); padding:var(--sp-4) var(--sp-5); }
.tc-principle h3{ font-size:16px; margin:0 0 6px; display:flex; gap:8px; align-items:baseline; }
.tc-principle h3::before{ content:"원칙 " counter(tcp); flex:0 0 auto; font-size:10.5px; font-weight:850;
  letter-spacing:.06em; color:var(--warning); }
.tc-principle p{ margin:0; font-size:14.5px; line-height:1.7; color:var(--text-muted); }
.tc-principle p+p{ margin-top:6px; }

/* ── 인용 (윤리·출처) ─────────────────────────────────── */
.tc-quotes{ display:grid; gap:var(--sp-3); margin:0; padding:0; list-style:none; }
.tc-quote{ margin:0; border:1.5px solid var(--border); border-radius:var(--radius-kid);
  background:var(--surface); padding:var(--sp-4) var(--sp-5); }
.tc-quote blockquote{ margin:0 0 6px; font-size:15px; line-height:1.7; font-weight:650;
  color:var(--text-strong); }
.tc-quote blockquote::before{ content:"“"; }
.tc-quote blockquote::after{ content:"”"; }
.tc-quote__src{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px;
  color:var(--text-muted); }
.tc-quote__trans{ margin:6px 0 0; font-size:13.5px; color:var(--text-muted); }

/* ── 외부 링크 카드 ───────────────────────────────────── */
.tc-linkgrid{ display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  margin:0; padding:0; list-style:none; }
.tc-linkgrid>li{ margin:0; }
.tc-linkgrid a{ display:block; text-decoration:none; border:1.5px solid var(--border);
  border-radius:var(--radius-kid); padding:var(--sp-3) var(--sp-4); background:var(--bg);
  font-weight:750; font-size:14.5px; color:var(--brand-link); }
.tc-linkgrid a:hover{ border-color:var(--brand-600); }
.tc-linkgrid .tc-linkgrid__sub{ display:block; margin-top:3px; font-size:12.5px; font-weight:600;
  color:var(--text-muted); }

/* 안내표는 6열이라 좁은 화면에서 글자가 한 자씩 접힌다.
   최소 폭을 주어 .tbl-scroll 이 실제로 가로 스크롤되게 한다(페이지 가로 스크롤은 생기지 않는다). */
@media screen and (max-width:900px){
  .tc-guide table.tbl{ min-width:900px; }
}

/* ── 종이 집계표: 체크 격자 ───────────────────────────── */
.tc-tallywrap{ display:grid; gap:6px; grid-template-columns:1fr 1fr; }
@media screen and (max-width:700px){ .tc-tallywrap{ grid-template-columns:1fr; } }
table.tc-tally{ width:100%; border-collapse:collapse; table-layout:fixed; }
table.tc-tally th,table.tc-tally td{ border:1px solid var(--tc-boxline); padding:0; text-align:center;
  font-size:10.5px; line-height:1.2; }
table.tc-tally thead th{ background:var(--surface-2); font-weight:850; padding:3px 0; }
table.tc-tally thead th .tc-tally__ko{ display:block; font-size:8.6px; font-weight:650;
  color:var(--text-muted); }
table.tc-tally td{ height:6.2mm; }
table.tc-tally td.tc-tally__no,table.tc-tally th.tc-tally__no{ width:9mm; background:var(--surface-2);
  font-weight:800; font-variant-numeric:tabular-nums; }
table.tc-tally tfoot td,table.tc-tally tfoot th{ height:7mm; background:var(--surface-2);
  font-weight:850; font-size:10px; }
table.tc-tally--apt td{ height:5.2mm; }
.tc-legend{ display:flex; flex-wrap:wrap; gap:4px 12px; margin:0 0 8px; padding:0; list-style:none;
  font-size:11px; color:var(--text-strong); }
.tc-legend>li{ margin:0; white-space:nowrap; }
.tc-legend b{ font-weight:850; }

/* ── 육각형 그리기 칸 ─────────────────────────────────── */
.tc-hex{ display:block; width:100%; max-width:112mm; margin:0 auto; height:auto; }
.tc-hex .tc-hex__grid{ fill:none; stroke:var(--tc-rule); stroke-width:1; }
.tc-hex .tc-hex__axis{ stroke:var(--tc-boxline); stroke-width:1; }
.tc-hex .tc-hex__label{ font-size:9px; font-weight:800; fill:#333; }
.tc-hex .tc-hex__tick{ font-size:6px; fill:#777; }

/* ── 모둠 편성 카드 ───────────────────────────────────── */
.tc-teamgrid{ display:grid; gap:6px; grid-template-columns:repeat(3,1fr); }
@media screen and (max-width:700px){ .tc-teamgrid{ grid-template-columns:1fr 1fr; } }
@media screen and (max-width:420px){ .tc-teamgrid{ grid-template-columns:1fr; } }
.tc-teamcard{ border:1.3px solid var(--tc-boxline); border-radius:6px; padding:5px 6px 6px; }
.tc-teamcard__h{ font-size:11px; font-weight:850; color:var(--text-strong); margin:0 0 4px;
  display:flex; align-items:center; justify-content:space-between; gap:6px; }
.tc-teamcard__h span{ font-size:9px; font-weight:650; color:var(--text-muted); }
table.tc-teamcard__t{ width:100%; border-collapse:collapse; font-size:9.6px; }
table.tc-teamcard__t th,table.tc-teamcard__t td{ border:1px solid var(--tc-rule); padding:1px 2px;
  text-align:center; }
table.tc-teamcard__t th{ font-weight:800; font-size:8.6px; background:var(--surface-2); }
table.tc-teamcard__t td{ height:5.6mm; }
.tc-teamcard__foot{ margin:4px 0 0; font-size:9px; color:var(--text-muted); }
.tc-teamcard__foot::after{ content:""; display:block; border-bottom:1.1px solid var(--tc-rule);
  height:5mm; }

/* ── 웹 집계 도구 ─────────────────────────────────────── */
.tc-calc{ border:1.5px solid var(--border); border-radius:var(--radius-kid-lg); background:var(--bg);
  padding:var(--sp-5); }
.tc-calc__set{ border:0; padding:0; margin:0 0 var(--sp-4); }
.tc-calc__set legend{ font-size:15.5px; font-weight:850; color:var(--text-strong); padding:0;
  margin-bottom:var(--sp-3); }
.tc-calc__grid{ display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); }
.tc-calc__f{ display:flex; flex-direction:column; gap:5px; border:1.5px solid var(--border);
  border-left:6px solid var(--tc-c,var(--border)); border-radius:var(--radius-kid);
  padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); background:var(--surface); }
.tc-calc__f label{ font-size:14px; font-weight:800; color:var(--text-strong); }
.tc-calc__f .tc-calc__hint{ font-size:11.5px; font-weight:600; color:var(--text-muted); }
.tc-calc__f input{ font-family:inherit; font-size:17px; font-weight:800; min-height:44px; width:100%;
  padding:6px 10px; border:1.5px solid var(--border); border-radius:8px; background:var(--bg);
  color:var(--text-strong); text-align:center; font-variant-numeric:tabular-nums; }
.tc-calc__f input:focus-visible{ border-color:var(--brand-link); outline:2px solid var(--brand-link);
  outline-offset:1px; }
.tc-calc__bar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-top:var(--sp-4); }
.tc-calc__total{ font-size:14.5px; font-weight:800; color:var(--text-strong);
  font-variant-numeric:tabular-nums; }
.tc-calc__err{ margin:var(--sp-3) 0 0; font-size:14px; font-weight:750; color:var(--danger,#B42318); }

/* ── 막대 그래프 (라이브러리 없음) ────────────────────── */
.tc-bars{ display:grid; gap:6px; margin:0; }
.tc-bar{ display:grid; grid-template-columns:78px 1fr 56px; align-items:center; gap:8px; }
.tc-bar__label{ font-size:12.5px; font-weight:800; color:var(--text-strong); }
.tc-bar__track{ height:16px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:4px; overflow:hidden; }
.tc-bar__fill{ display:block; height:100%; width:0; background:var(--tc-c,#334155); }
.tc-bar__val{ font-size:12px; font-weight:800; text-align:right; color:var(--text-muted);
  font-variant-numeric:tabular-nums; }
.tc-out{ display:grid; gap:var(--sp-4); }
.tc-out h3{ font-size:14.5px; }
.tc-out ul{ margin:0; padding-left:18px; }
.tc-out li{ font-size:13.5px; line-height:1.65; margin-top:3px; }
.tc-out p{ font-size:13.5px; line-height:1.7; margin:0; }
.tc-out__pick{ display:grid; gap:6px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin:0; padding:0; list-style:none; }
.tc-out__pick>li{ margin:0; border:1.3px solid var(--tc-boxline); border-radius:8px; padding:8px 10px; }
.tc-out__pick b{ display:block; font-size:14px; }
.tc-out__pick span{ display:block; font-size:11.5px; color:var(--text-muted); margin-top:2px; }
table.tc-mini{ width:100%; border-collapse:collapse; font-size:12px; }
table.tc-mini th,table.tc-mini td{ border:1px solid var(--tc-boxline); padding:3px 6px; text-align:left; }
table.tc-mini th{ background:var(--surface-2); font-weight:800; }
table.tc-mini caption{ text-align:left; font-size:11.5px; color:var(--text-muted); padding-bottom:4px; }

/* ── 역할 카드 72장 ───────────────────────────────────── */
.tc-rcgroup{ margin-bottom:var(--sp-5); }
.tc-rcgroup__h{ font-size:15.5px; margin:0 0 var(--sp-3); display:flex; flex-wrap:wrap;
  align-items:center; gap:8px; }
.tc-rcgrid{ display:grid; gap:var(--sp-3); grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.tc-rc{ border:1.5px solid var(--border); border-radius:var(--radius-kid); padding:var(--sp-4);
  background:var(--bg); display:flex; flex-direction:column; gap:5px; }
.tc-rc__top{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:11px; font-weight:800; }
.tc-rc__code{ display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px;
  border-radius:5px; background:var(--tc-c,#334155); color:#fff; font-size:11px; font-weight:850; }
.tc-rc__type{ color:var(--text-muted); font-weight:750; }
.tc-rc__dom{ margin-left:auto; color:var(--text-muted); font-weight:700; font-size:10.5px; }
.tc-rc__role{ margin:0; font-size:16px; font-weight:850; color:var(--text-strong); letter-spacing:-.01em; }
.tc-rc__jobs{ margin:0; font-size:12.5px; font-weight:750; color:var(--brand-link); }
.tc-rc__what{ margin:0; font-size:12.5px; line-height:1.55; color:var(--text-muted); flex:1; }
.tc-rc__next{ margin:0; font-size:11px; line-height:1.5; color:var(--text-muted);
  border-top:1px dashed var(--tc-cut); padding-top:4px; }
.tc-rc__foot{ display:flex; align-items:center; gap:6px; font-size:9.5px; color:var(--text-muted); }
.tc-rc__ed{ font-size:9px; font-weight:850; letter-spacing:.04em; color:var(--warning);
  border:1px solid var(--warning-solid); border-radius:4px; padding:0 4px; }

/* ── 학부모 상담 스크립트 ─────────────────────────────── */
.tc-script{ display:grid; gap:var(--sp-3); margin:0; padding:0; list-style:none; counter-reset:tcs2; }
.tc-script>li{ counter-increment:tcs2; margin:0; border:1.5px solid var(--border);
  border-radius:var(--radius-kid); background:var(--bg); padding:var(--sp-4) var(--sp-5); }
.tc-script__when{ margin:0 0 8px; font-size:13px; font-weight:850; color:var(--text-strong); }
.tc-script__when::before{ content:"장면 " counter(tcs2) " · "; color:var(--brand-link); }
.tc-script__ok,.tc-script__no{ margin:0; font-size:14.2px; line-height:1.68; padding-left:26px;
  position:relative; }
.tc-script__ok+.tc-script__no,.tc-script__no+.tc-script__why{ margin-top:6px; }
.tc-script__ok::before{ content:"✅"; position:absolute; left:0; top:0; }
.tc-script__no::before{ content:"❌"; position:absolute; left:0; top:0; }
.tc-script__no{ color:var(--text-muted); text-decoration-color:var(--border); }
.tc-script__why{ margin:6px 0 0; font-size:12.8px; color:var(--text-muted); line-height:1.6; }

/* ── FAQ ──────────────────────────────────────────────── */
.tc-faq{ display:grid; gap:var(--sp-3); margin:0; padding:0; list-style:none; }
.tc-faq>li{ margin:0; border:1.5px solid var(--border); border-left:6px solid var(--brand-600);
  border-radius:var(--radius-kid); background:var(--bg); padding:var(--sp-4) var(--sp-5); }
.tc-faq h3{ font-size:15.5px; margin:0 0 6px; }
.tc-faq p{ margin:0; font-size:14.4px; line-height:1.72; }
.tc-faq p+p{ margin-top:7px; }
.tc-faq__src{ font-size:12.5px; color:var(--text-muted); }

/* ============================================================
   커리어넷 페이지 · 인쇄
   ============================================================ */
@media print{
  .tc-rcgroup__h,.tc-linkgrid,.tc-principle,.tc-quotes{ break-inside:auto; }
  .tc-calc{ display:none !important; }   /* 입력 폼은 인쇄하지 않는다. 결과지만 나간다 */
  .tc-quote,.tc-principle>li,.tc-faq>li,.tc-script>li,.tc-rc{ background:#fff !important;
    box-shadow:none !important; break-inside:avoid; }
  .tc-teamcard,.tc-out__pick>li{ break-inside:avoid; }

  /* 체크 격자: 흑백에서도 선이 보이게 */
  table.tc-tally th,table.tc-tally td,
  table.tc-teamcard__t th,table.tc-teamcard__t td,
  table.tc-mini th,table.tc-mini td{ border-color:#777 !important; }
  table.tc-tally thead th,table.tc-tally tfoot td,table.tc-tally tfoot th,
  table.tc-teamcard__t th,table.tc-mini th{ background:#F0F0F0 !important; }
  table.tc-tally td.tc-tally__no,table.tc-tally th.tc-tally__no{ background:#F0F0F0 !important; }
  .tc-teamcard{ border-color:#777 !important; }

  /* 역할 카드: A4 한 쪽에 6장(2×3), 점선이 자르는 선 */
  .tc-rcgrid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:0 !important; }
  .tc-rc{ height:84mm; border:1px dashed #888 !important; border-radius:0 !important;
    padding:8mm 7mm !important; break-inside:avoid; }
  .tc-rc__role{ font-size:15pt; }
  .tc-rc__jobs{ font-size:10pt; color:#000 !important; }
  .tc-rc__what{ font-size:9.5pt; color:#222 !important; }
  .tc-rc__next{ font-size:8pt; }
  .tc-rc__top{ font-size:8.5pt; }
  .tc-rc__foot{ font-size:7.5pt; }
  .tc-rcgroup{ margin:0; }
  .tc-rcgroup+.tc-rcgroup{ break-before:page; page-break-before:always; }

  /* 막대 그래프는 배경 인쇄를 꺼도 보이도록 테두리를 남긴다 */
  .tc-bar__track{ border-color:#555 !important; }
  .tc-bar__fill{ background:#555 !important; }

  /* 집계 양식 3종을 A4 한 쪽(182×269mm) 안에 넣기 위한 조판 */
  #cn-form-1,#cn-form-2,#cn-form-3,#cn-result{ break-after:page; page-break-after:always; }
  #cn-form-1 h3,#cn-form-2 h3,#cn-form-3 h3,#cn-result h3{ font-size:11pt; margin:9px 0 3px; }
  #cn-form-1 .tc-hint,#cn-form-2 .tc-hint,#cn-form-3 .tc-hint{ font-size:8pt; margin-bottom:3px;
    line-height:1.4; }
  #cn-form-3 .tc-check>li{ font-size:8.6pt; margin-top:2px; padding-left:22px; line-height:1.45; }
  #cn-form-3 .tc-check>li::before{ width:13px; height:13px; top:2px; }
  .tc-sheet .tc-legend{ font-size:8pt; gap:2px 10px; margin-bottom:5px; }
  table.tc-tally td{ height:4.9mm; }
  table.tc-tally--apt td{ height:4.5mm; }
  table.tc-tally th,table.tc-tally td{ font-size:8pt; }
  table.tc-tally thead th .tc-tally__ko{ font-size:6.4pt; }
  table.tc-teamcard__t td{ height:4.6mm; }
  .tc-hex{ max-width:52mm; }
  .tc-teamcard__foot::after{ height:4mm; }

  /* 집계 결과지: A4 한 쪽에 담는다 */
  #cn-result .tc-out{ gap:5px; }
  #cn-result .tc-sheet__head{ padding-bottom:5px; margin-bottom:8px; }
  #cn-result .tc-sheet__title{ font-size:14pt; }
  #cn-result .tc-sheet__foot{ margin-top:8px; padding-top:5px; }
  #cn-result .tc-out h3{ font-size:10.5pt; margin:5px 0 3px; }
  #cn-result .tc-out p,#cn-result .tc-out li{ font-size:8.4pt; line-height:1.5; }
  #cn-result .tc-out ul{ padding-left:15px; }
  #cn-result .tc-out li{ margin-top:1px; }
  #cn-result table.tc-mini caption{ font-size:7.4pt; padding-bottom:2px; }
  #cn-result .tc-bar{ grid-template-columns:62px 1fr 40px; gap:6px; }
  #cn-result .tc-bar__track{ height:11px; }
  #cn-result .tc-bar__label{ font-size:8pt; }
  #cn-result .tc-bar__val{ font-size:7.6pt; }
  #cn-result .tc-bars{ gap:3px; }
  #cn-result table.tc-mini{ font-size:8pt; }
  #cn-result table.tc-mini th,#cn-result table.tc-mini td{ padding:1px 4px; }
  #cn-result .tc-out__pick>li{ padding:4px 7px; }
  #cn-result .tc-sheet__foot{ font-size:7.4pt; }

  /* 안내표: 6열 표를 좁은 지면에 담는다 (자동 폭이면 첫 열이 한 글자씩 접힌다) */
  .tc-guide table.tbl{ font-size:7.6pt; table-layout:fixed; width:100%; }
  .tc-guide table.tbl th,.tc-guide table.tbl td{ word-break:keep-all; overflow-wrap:break-word; }
  .tc-guide table.tbl th:nth-child(1),.tc-guide table.tbl td:nth-child(1){ width:17%; }
  .tc-guide table.tbl th:nth-child(2),.tc-guide table.tbl td:nth-child(2){ width:8%; }
  .tc-guide table.tbl th:nth-child(3),.tc-guide table.tbl td:nth-child(3){ width:11%; }
  .tc-guide table.tbl th:nth-child(4),.tc-guide table.tbl td:nth-child(4){ width:14%; }
  .tc-guide table.tbl th:nth-child(5),.tc-guide table.tbl td:nth-child(5){ width:32%; }
  .tc-guide table.tbl th:nth-child(6),.tc-guide table.tbl td:nth-child(6){ width:18%; }
  .tc-guide .badge{ white-space:normal; display:inline; }
  .tc-guide table.tbl thead th{ white-space:normal; }
  .tc-guide table.tbl th,.tc-guide table.tbl td{ padding:2px 3px; line-height:1.35; }
  .tc-guide .badge{ font-size:6.5pt; padding:0 3px; min-height:0; }
  .tc-guide .tc-check>li{ font-size:8.4pt; margin-top:2px; }
}
