/* 우리 같이 창업해도 될까요? (founder) — dataforge/design.md 토큰·뼈대를 따른다. 모바일 기본 → 768·1024 확장 */
:root {
  --bg:#f8fafc; --card:#ffffff; --card2:#f1f5f9;
  --border:rgba(0,0,0,.1); --border2:rgba(0,0,0,.15);
  --text:#1e293b; --muted:#64748b; --dim:#94a3b8;
  --accent:#2563eb; --accent2:#6366f1;
  --amber:#d97706; --green:#059669; --red:#dc2626; --orange:#ea580c;
  --r:10px;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }   /* .header-back 같은 display 지정이 hidden 속성을 이기지 않게 */
html, body { margin:0; }
body {
  font-family:'Noto Sans KR','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:14px; line-height:1.6; color:var(--text); background:var(--bg);
  overflow-x:hidden;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(37,99,235,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,.04) 1px, transparent 1px);
  background-size:40px 40px;
}
.page-wrap { max-width:1100px; margin:0 auto; position:relative; z-index:1; }
.page { padding:0 16px 80px; }

/* 헤더 */
.site-header {
  padding:12px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:rgba(248,250,252,.97); position:sticky; top:0; z-index:100;
}
.logo { display:flex; align-items:center; gap:10px; min-width:0; }
.logo-brand { font-family:'Space Mono',monospace; font-size:16px; font-weight:700; color:var(--accent); letter-spacing:2px; text-decoration:none; }
.logo-brand em { color:var(--orange); font-style:normal; }
.logo-sep { width:1px; height:16px; background:var(--border2); flex-shrink:0; }
.logo-title { font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.header-back {
  font-size:12px; color:var(--muted); text-decoration:none; white-space:nowrap;
  border:1px solid var(--border2); padding:8px 12px; border-radius:8px; min-height:36px; display:inline-flex; align-items:center;
  background:none; cursor:pointer; font-family:inherit;
}
.header-back:hover, .header-back:focus-visible { color:var(--text); border-color:rgba(0,0,0,.3); }

/* 첫 화면 */
.hero { text-align:center; padding:40px 0 24px; }
.hero h1 { font-size:26px; margin:0 0 12px; line-height:1.35; }
.hero h1 .hl { color:var(--accent); }
.hero p { color:var(--muted); margin:0; font-size:15px; }
.hero p b { color:var(--red); }

.intro-box {
  background:rgba(59,130,246,.06); border:1px solid rgba(59,130,246,.15); border-radius:var(--r);
  padding:12px 16px; font-size:13px; color:var(--muted); line-height:1.7; margin-top:16px;
}
.intro-box strong { color:var(--text); }
.notice-box {
  background:rgba(217,119,6,.08); border:1px solid rgba(217,119,6,.3); border-radius:var(--r);
  padding:12px 16px; font-size:13px; color:#92400e; margin-top:16px;
}

/* 카드 */
.a-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:16px 18px; margin-top:16px; }
.a-card-title {
  font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.04em;
  margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
}
.narrow { max-width:440px; margin-left:auto; margin-right:auto; }
.grid2 { display:grid; grid-template-columns:1fr; gap:0 16px; }
@media (min-width:768px) { .grid2 { grid-template-columns:1fr 1fr; } }

/* 폼 */
.field { margin-bottom:12px; }
.field label { display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:4px; }
.field input, .field textarea, .field select {
  width:100%; font-size:16px; font-family:inherit; color:var(--text);
  padding:10px 12px; border:1px solid var(--border2); border-radius:8px; background:#fff; min-height:44px;
}
.field input:focus, .field textarea:focus { outline:2px solid rgba(37,99,235,.35); border-color:var(--accent); }
.field input[readonly] { background:var(--card2); color:var(--muted); }
.field .hint { font-size:12px; color:var(--dim); margin-top:4px; }
.row-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:4px; }

/* 버튼 */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:10px 18px; border-radius:8px; border:1px solid transparent;
  font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none; transition:.15s;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover:not(:disabled), .btn-primary:active { background:#1d4ed8; }
.btn-outline { background:#fff; color:var(--text); border-color:var(--border2); }
.btn-outline:hover:not(:disabled), .btn-outline:active { border-color:var(--accent); color:var(--accent); }
.btn-danger { background:#fff; color:var(--red); border-color:rgba(220,38,38,.4); }
.btn-danger:hover:not(:disabled), .btn-danger:active { background:rgba(220,38,38,.06); }
.btn-sm { min-height:36px; padding:6px 12px; font-size:12px; }
.btn-block { width:100%; }
@media (pointer:coarse) { .btn-sm { min-height:44px; } }

.msg { font-size:13px; margin-top:10px; min-height:1em; }
.msg.err { color:var(--red); }
.msg.ok { color:var(--green); }

/* 탭 — 좁은 화면에서는 탭 줄 안에서만 가로 스크롤 */
.tabs { display:flex; border-bottom:1px solid var(--border); margin-top:16px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.tab {
  padding:12px 14px; font-size:13px; font-weight:600; background:none; border:none; border-bottom:2px solid transparent;
  color:var(--muted); cursor:pointer; font-family:inherit; white-space:nowrap; min-height:44px;
}
.tab:hover, .tab:focus-visible { color:var(--text); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab .lock { font-size:11px; opacity:.7; }
@media (min-width:768px) { .tab { padding:14px 22px; } }

/* 정보 표 */
.kv { display:grid; grid-template-columns:96px 1fr; gap:6px 12px; font-size:14px; }
.kv dt { color:var(--muted); font-size:13px; }
.kv dd { margin:0; word-break:break-all; }
.mono { font-family:'Space Mono',monospace; }
.nowrap { white-space:nowrap; }
.hdr-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width:479px) {
  .logo-sep, .logo-title { display:none; }
  .site-header { flex-wrap:wrap; }
  .hdr-actions { flex:1 1 auto; }
}
table.t-wide { min-width:760px; }       /* 좁은 화면에서는 칸을 짜부라뜨리지 않고 표 안에서 가로 스크롤 */

/* 표 */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.t { width:100%; border-collapse:collapse; font-size:13px; }
table.t th { background:var(--card2); text-align:left; font-weight:600; color:var(--muted); padding:8px 10px; white-space:nowrap; border-bottom:1px solid var(--border); }
table.t td { padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
table.t tr:last-child td { border-bottom:none; }
table.t td.num, table.t th.num { text-align:right; }

.badge { display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.badge.ok { background:rgba(5,150,105,.12); color:var(--green); }
.badge.no { background:var(--card2); color:var(--dim); }
.badge.warn { background:rgba(217,119,6,.12); color:var(--amber); }
.badge.info { background:rgba(37,99,235,.1); color:var(--accent); }

.empty { text-align:center; color:var(--muted); padding:32px 12px; }
.empty .big { font-size:32px; margin-bottom:8px; }
.copy { cursor:pointer; border-bottom:1px dashed var(--dim); }

/* 모달 */
.modal-back { position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:200; display:flex; align-items:flex-start; justify-content:center; padding:24px 12px; overflow-y:auto; }
.modal { background:#fff; border-radius:var(--r); width:100%; max-width:720px; padding:18px; box-shadow:0 20px 50px rgba(0,0,0,.2); }
.modal h2 { font-size:17px; margin:0 0 6px; }

.loading { color:var(--muted); padding:24px 0; text-align:center; }

/* 성향 검사 */
.sv-progress { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted); }
.sv-progress .bar { flex:1; height:8px; background:var(--card2); border-radius:99px; overflow:hidden; }
.sv-progress .bar > div { height:100%; background:var(--accent); transition:width .3s; }
.sv-guide { font-size:13px; color:var(--muted); margin:14px 0 4px; }
.sv-guide b { color:var(--red); }
.sv-q { font-size:17px; font-weight:700; line-height:1.55; margin:10px 0 16px; word-break:keep-all; }
.sv-opts { display:grid; grid-template-columns:1fr; gap:10px; align-items:stretch; }
.sv-vs { text-align:center; font-family:'Space Mono',monospace; font-weight:700; color:var(--dim); font-size:13px; }
.sv-opt {
  display:flex; gap:10px; align-items:flex-start; text-align:left; width:100%; min-height:96px; padding:16px;
  background:#fff; border:2px solid var(--border2); border-radius:12px; cursor:pointer; font-family:inherit; font-size:15px; line-height:1.55;
  color:var(--text); transition:border-color .15s, background .15s; word-break:keep-all;
}
.sv-opt .k { font-family:'Space Mono',monospace; font-weight:700; color:var(--accent); flex-shrink:0; }
.sv-opt:hover:not(:disabled), .sv-opt:focus-visible { border-color:rgba(37,99,235,.5); outline:none; }
.sv-opt.picked { border-color:var(--accent); background:rgba(37,99,235,.08); }
/* 직무판 4단계 응답 (2026-10-25) — 두 문장을 위에 두고, 아래 네 칸에서 얼마나 가까운지 고른다 */
.sv-ab { display:grid; grid-template-columns:1fr; gap:8px; margin-bottom:12px; }
@media (min-width:768px) { .sv-ab { grid-template-columns:1fr 1fr; } }
.sv-side { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--r); background:var(--card2); font-size:15px; line-height:1.55; word-break:keep-all; }
.sv-side .k { font-family:'Space Mono',monospace; font-weight:700; color:var(--accent); flex-shrink:0; }
.sv-scale { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (min-width:768px) { .sv-scale { grid-template-columns:repeat(4, 1fr); } }
.sv-opt.sv-4 { justify-content:center; text-align:center; min-height:56px; font-size:14px; font-weight:700; }
.sv-opt.sv-4 .k { font-size:12px; color:var(--dim); }
.sv-opt.sv-4.s0, .sv-opt.sv-4.s1 { border-left:4px solid rgba(37,99,235,.55); }
.sv-opt.sv-4.s2, .sv-opt.sv-4.s3 { border-right:4px solid rgba(219,39,119,.5); }
.sv-opt:disabled { cursor:default; }
@media (min-width:768px) {
  .sv-opts { grid-template-columns:1fr auto 1fr; }
  .sv-vs { align-self:center; }
  .sv-opt { min-height:150px; }
}

/* 결과 화면 — PNG 로 찍히므로 배경을 분명하게 */
.rv { background:var(--bg); padding:1px 0 4px; }
.rv-head { display:grid; grid-template-columns:repeat(2, 1fr); gap:10px 16px; }
@media (min-width:768px) { .rv-head { grid-template-columns:repeat(4, 1fr); } }
.rv-cap { font-size:11px; color:var(--muted); }
.rv-v { font-weight:700; word-break:break-all; }
.rv-mbti { text-align:center; }
.rv-you { font-size:20px; }
.rv-you b { color:var(--red); }
.rv-type { font-size:22px; font-weight:700; margin-top:6px; }
.rv-type .mono { color:var(--red); letter-spacing:2px; }
.rv-desc { color:var(--muted); margin:10px auto; max-width:560px; word-break:keep-all; }
.rv-chips { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.rv-caution { margin-top:12px; font-size:13px; color:var(--amber); }
.rv-note, .sv-note { margin:10px 0 0; font-size:12px; color:var(--dim); line-height:1.6; word-break:keep-all; }
.sv-note { margin:0 0 14px; }
.rv-grid { display:grid; grid-template-columns:1fr; gap:0 16px; }
@media (min-width:768px) { .rv-grid { grid-template-columns:1fr 1fr; } }
/* 4단계 판(v2·직무판) 결과 배치 (2026-10-26) — 위에 요약 줄(MBTI · 한눈에 보기), 아래 묶음 3개는 데스크톱에서 3열 */
@media (min-width:768px) and (max-width:1023px) { .rv-grid3 > :nth-child(3):last-child { grid-column:1 / -1; } }   /* 태블릿 2열 — 세 번째 묶음은 한 줄 통째로(빈칸 없이) */
@media (min-width:1024px) { .rv-grid3 { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
.rv-sum { display:grid; grid-template-columns:1fr; gap:0 16px; }
@media (min-width:768px) { .rv-sum { grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:stretch; } }   /* MBTI · 한눈에 보기 같은 너비·같은 높이 (2026-10-27 요청) */
.rv-mbti-mini .rv-type { font-size:30px; margin-top:0; }
.rv-mbti-mini .rv-you { font-size:16px; margin-top:4px; }
.rv-mbti-mini .rv-desc { font-size:13px; margin:8px auto 0; }
.rv-gl { display:flex; gap:10px; align-items:baseline; margin:8px 0; font-size:13px; }
.rv-gl-k { flex:0 0 3.8em; font-size:12px; font-weight:700; white-space:nowrap; }
.rv-gl-v { display:flex; flex-wrap:wrap; gap:4px; }
.rv-gl-q { margin:12px 0 0; padding:10px 12px; background:var(--card2); border-radius:8px; font-size:13px; line-height:1.6; word-break:keep-all; }
details.rv-howto > summary { cursor:pointer; min-height:44px; line-height:44px; margin:-12px 0; }   /* flex 로 두면 펼침 ▸ 표시가 사라진다 */
details.rv-howto > p { margin:4px 0 6px; }
/* 척도 한 줄 = 양끝 축 (2026-10-26) — 이름·단계 / 낮은 편 문장 · 세 칸 · 높은 편 문장 */
.rv-gintro { margin:-4px 0 6px; font-size:12px; line-height:1.6; color:var(--muted); word-break:keep-all; }
.rv-rows { display:flex; flex-direction:column; }
.rv-row { padding:10px 0; border-top:1px solid var(--border); }
.rv-row:first-child { border-top:none; padding-top:4px; }
.rv-row-h { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; }
.rv-row-h .rv-sl { font-size:14px; }
.rv-row-h .lv-word { padding:2px 9px; border-radius:999px; background:var(--card2); border:1px solid var(--border); }
.rv-row-h .lv-word.lv0, .rv-row-h .lv-word.lv2 { background:rgba(37,99,235,.08); border-color:rgba(37,99,235,.3); color:var(--accent); }
.rv-axis { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-template-areas:"m m" "lo hi"; gap:6px 14px; font-size:12px; line-height:1.5; color:var(--dim); word-break:keep-all; }
.rv-axis .lv3 { grid-area:m; display:grid; grid-template-columns:repeat(3, 1fr); gap:3px; }   /* 세 칸을 줄 전체로 — 아래 양끝 문장과 왼쪽·오른쪽이 맞는다 */
.rv-axis .lv3 i { width:auto; height:8px; }
.rv-end.lo { grid-area:lo; text-align:left; }
.rv-end.hi { grid-area:hi; text-align:right; }
.rv-axis.s0 .lo, .rv-axis.s2 .hi { color:var(--text); font-weight:700; }
.rv-axis.s1 .rv-end { color:var(--muted); }
.rv-bars { display:flex; justify-content:space-around; align-items:flex-end; gap:8px; height:200px; padding:0 4px; }
.rv-bar { flex:1; max-width:64px; display:flex; flex-direction:column; align-items:center; height:100%; }
.rv-val { font-size:12px; font-weight:700; color:var(--accent); margin-bottom:4px; }
.rv-track { flex:1; width:100%; max-width:40px; background:var(--card2); border-radius:6px 6px 0 0; display:flex; align-items:flex-end; overflow:hidden; }
.rv-fill { width:100%; background:linear-gradient(180deg, var(--accent2), var(--accent)); border-radius:6px 6px 0 0; }
.rv-label { font-size:11px; color:var(--text); margin-top:6px; text-align:center; line-height:1.3; word-break:keep-all; min-height:2.6em; }
.rv-intro { font-size:13px; color:var(--muted); margin:14px 0 6px; }
.rv-legend { margin:0; padding:0; list-style:none; font-size:12px; color:var(--muted); }
.rv-legend li { margin:3px 0; }
.rv-legend b { color:var(--red); margin-right:4px; }
.rv-sscore { font-size:18px; font-weight:700; }
.rv-sscore .mono { color:var(--red); font-size:26px; margin-left:6px; }
.rv-meter { height:10px; background:var(--card2); border-radius:99px; overflow:hidden; margin-top:10px; }
.rv-meter > div { height:100%; background:linear-gradient(90deg, var(--green), var(--amber), var(--red)); }
.rv-scale { display:flex; justify-content:space-between; font-size:10px; color:var(--dim); margin:2px 0 8px; }
.rv-sline { margin:4px 0; font-size:13px; color:var(--text); }
.modal.wide { max-width:1000px; background:var(--bg); }

/* 동료 Fit — 나(인디고)·상대(핑크) 막대 */
.cb-legend { font-size:12px; font-weight:400; color:var(--muted); text-transform:none; letter-spacing:0; }
.cb-legend .me, .cb-vals .me { color:#4f46e5; }
.cb-legend .other, .cb-vals .other, .fm-v.other { color:#db2777; }
.cb-row { display:flex; justify-content:space-around; flex-wrap:wrap; gap:12px 6px; }
.cb { display:flex; flex-direction:column; align-items:center; min-width:64px; }
.cb-bars { display:flex; gap:4px; align-items:flex-end; }
.cb-me, .cb-other { width:20px; border-radius:4px 4px 0 0; }
.cb-me { background:#6366f1; }
.cb-other { background:#f472b6; }
.cb-vals { display:flex; gap:6px; font-size:11px; margin-top:3px; }
.cb-label { font-size:12px; font-weight:700; margin-top:2px; text-align:center; word-break:keep-all; }
.cb-label.clash { color:var(--red); }
.cb-label.calm { color:var(--green); }
.fm { display:flex; justify-content:center; align-items:center; gap:20px; text-align:center; }
.fm-v { font-size:26px; font-weight:700; color:#4f46e5; letter-spacing:2px; }
.fm-vs { color:var(--dim); font-weight:700; }
.ft-box { border-top:1px dashed var(--border2); margin-top:14px; padding-top:12px; }
.ft-title { font-size:12px; font-weight:700; color:var(--muted); margin-bottom:8px; }
.ft-item { background:rgba(220,38,38,.05); border:1px solid rgba(220,38,38,.18); border-radius:8px; padding:10px 12px; margin-bottom:8px; font-size:13px; }
.ft-item p { margin:3px 0; }
.ft-head { font-weight:700; color:var(--red); margin-bottom:4px; }
.ft-quote { color:var(--text); font-weight:500; }
.ft-none { font-size:13px; color:var(--green); margin:4px 0; }
.peer-chips { display:flex; flex-wrap:wrap; gap:6px; }
.peer-chip { min-height:44px; padding:6px 12px; border:1px solid var(--border2); border-radius:8px; background:#fff; cursor:pointer; font-family:inherit; font-size:13px; text-align:left; }
.peer-chip:hover:not(:disabled), .peer-chip:focus-visible { border-color:var(--accent); color:var(--accent); }
.peer-chip.on { border-color:var(--accent); background:rgba(37,99,235,.08); color:var(--accent); font-weight:700; }
.peer-chip:disabled { color:var(--dim); cursor:not-allowed; background:var(--card2); }
.peer-chip small { display:block; font-size:11px; color:var(--dim); }

/* 페르소나 */
.grid4 { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
@media (min-width:768px) { .grid4 { grid-template-columns:2fr 1fr 1fr 1fr; } }
.ps-row { margin-bottom:10px; }
.ps-label { font-size:13px; font-weight:600; display:flex; justify-content:space-between; gap:8px; }
.ps-my { font-size:11px; color:var(--red); font-weight:400; }
.ps-ctl { display:flex; align-items:center; gap:6px; }
.ps-ctl input[type=range] { flex:1; min-width:0; accent-color:var(--accent); height:32px; }
.ps-step { width:36px; height:36px; flex-shrink:0; border:1px solid var(--border2); border-radius:8px; background:#fff; cursor:pointer; font-size:16px; line-height:1; }
.ps-step:active { background:var(--card2); }
@media (pointer:coarse) { .ps-step { width:44px; height:44px; } }
.ps-val { width:56px; text-align:right; font-size:12px; white-space:nowrap; }
.pr-sum { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
@media (min-width:768px) { .pr-sum { grid-template-columns:repeat(4, 1fr); } }
.pr-fit { grid-column:1 / -1; }
@media (min-width:768px) { .pr-fit { grid-column:auto; } }

/* ── 결과를 대화 재료로 (2026-10-24) — % 막대 대신 3단계, Fit 점수 대신 차이와 질문 ── */
.rv-howto { font-size:13px; line-height:1.6; color:var(--muted); background:var(--card2); }
.rv-howto b { color:var(--text); }
.rv-notfor { font-size:13px; font-weight:700; }
.rv-wdesc { margin:-4px 0 6px; font-size:12px; color:var(--muted); line-height:1.5; }
.rv-steps { display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.rv-step { display:grid; grid-template-columns:minmax(0,1fr) auto 64px; align-items:center; gap:10px; font-size:13px; }
.rv-sl { font-weight:700; word-break:keep-all; }
.rv-sstep { margin:6px 0 10px; }
.lv3 { display:inline-flex; gap:3px; }
.lv3 i { display:block; width:22px; height:10px; border-radius:3px; background:var(--card2); border:1px solid var(--border); }
.lv3 i.on { background:var(--accent); border-color:var(--accent); }
.lv3.me i.on { background:#6366f1; border-color:#6366f1; }
.lv3.other i.on { background:#db2777; border-color:#db2777; }
.lv3.stress i.on { background:var(--amber); border-color:var(--amber); }
.lv-word { font-size:12px; font-weight:700; white-space:nowrap; color:var(--text); }
.tk-card .a-card-title { margin-bottom:10px; }
.tk-item { border:1px solid var(--border2); border-radius:8px; padding:10px 12px; margin-bottom:10px; font-size:13px; }
.tk-item.big { border-color:rgba(217,119,6,.45); background:rgba(217,119,6,.04); }
.tk-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-bottom:6px; }
.tk-head b { font-size:14px; }
.tk-pairs { display:inline-flex; flex-wrap:wrap; gap:4px 14px; align-items:center; }
.tk-pair { display:inline-flex; align-items:center; gap:6px; }
.tk-who { font-size:11px; font-weight:700; }
.tk-who.me { color:#4f46e5; }
.tk-who.other { color:#db2777; max-width:7em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-gap { margin:6px 0 2px; color:var(--text); }
.tk-line { margin:2px 0; color:var(--muted); }
.tk-q { margin:8px 0 0; padding:8px 10px; background:rgba(37,99,235,.06); border-radius:6px; font-weight:700; color:var(--text); }
.tk-row { padding:8px 0; border-top:1px dashed var(--border); font-size:13px; }
.tk-row:first-of-type { border-top:0; }
.tk-row > b:first-child { display:inline-block; min-width:5.5em; margin-right:6px; }
.tk-mb { font-size:13px; }
.tk-row.diff > b:first-child { color:var(--amber); }
.tk-row .tk-q { font-weight:500; }
.tk-more { margin-top:8px; }
/* 직무판 페르소나 — 세 단계 고르기 (2026-10-25) */
.seg { display:inline-grid; grid-template-columns:repeat(3, 1fr); border:1px solid var(--border2); border-radius:8px; overflow:hidden; width:100%; max-width:320px; }
.seg-b { min-height:44px; border:0; background:var(--card); font:inherit; font-size:13px; cursor:pointer; color:var(--muted); }
.seg-b + .seg-b { border-left:1px solid var(--border2); }
.seg-b.on { background:var(--accent); color:#fff; font-weight:700; }
.seg-b:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.ps-hl { margin-top:4px; }
.pr-ref { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:2px 14px; margin:16px 0; }
.pr-ref[open] { padding-bottom:12px; }
.pr-ref > .a-card { box-shadow:none; }
.tk-more > summary { cursor:pointer; font-size:13px; font-weight:700; color:var(--muted); min-height:44px; display:flex; align-items:center; gap:6px; }
.tk-alike { margin:4px 0 8px; font-size:13px; line-height:2; }
.tk-alike > b { margin-right:6px; }
table.t-fit { min-width:640px; }
table.t-fit td.syn { color:#065f46; }
table.t-fit td.trb { color:#991b1b; }
.hint { font-size:12px; color:var(--dim); font-weight:400; }

/* 인쇄 — 계정표 (화면 장식은 .no-print 로 숨긴다) */
@page { size:A4; margin:14mm; }
/* 새 교육 — 검사 종류 고르기 (2026-10-25) */
.kind-pick { border:0; padding:0; margin:0 0 14px; }
.kind-pick legend { font-size:13px; font-weight:700; margin-bottom:6px; }
.kind-pick .kind-opt { display:flex; gap:10px; align-items:flex-start; font-weight:400; color:var(--text); border:1px solid var(--border2); border-radius:var(--r); padding:10px 12px; margin-bottom:8px; cursor:pointer; font-size:14px; line-height:1.55; }
.kind-pick .kind-opt input { margin-top:4px; width:18px; height:18px; flex-shrink:0; }
.kind-pick .kind-opt:has(input:checked) { border-color:var(--accent); background:rgba(37,99,235,.05); }

/* 계정표 — 팀마다 표 하나 (2026-10-25) */
.acc-sum { font-size:13px; color:var(--muted); margin:4px 0 10px; }
.acc-teams { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:768px) { .acc-teams { grid-template-columns:1fr 1fr; } }
.acc-team { border:1px solid var(--border2); border-radius:var(--r); padding:10px 12px 6px; background:var(--card); break-inside:avoid; page-break-inside:avoid; min-width:0; }
.acc-team-h { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; font-size:15px; }
.acc-team-h b { color:var(--accent); }
.acc-t { width:100%; }
.acc-t th:first-child, .acc-t td:first-child { width:3.5em; }
.acc-pw { font-size:15px; letter-spacing:.04em; }

@media print {
  body { background:#fff; }
  body::before, .site-header, .no-print { display:none !important; }
  .page { padding:0; }
  .modal-back { position:static; background:none; padding:0; display:block; }
  .modal { box-shadow:none; max-width:none; padding:0; }
  .modal .no-print { display:none !important; }
  table.t th, table.t td { font-size:12px; padding:6px 8px; }
  .acc-teams { grid-template-columns:1fr 1fr; gap:8px; }
  .acc-team { border:1px dashed #999; }   /* 팀별로 잘라 나눠 주기 좋게 */
  table.t td.acc-pw { font-size:14px; font-weight:700; }   /* 보고 따라 칠 값이라 크게 */
}