/* column · clinic-site-ai-citation — 이 원고 전용.
   사이트 토큰(site-src/toss/t01-head.html → site/assets/site.css :root)에서 파생.
   --blue #3182f6 / --blue-700 #1b64da / --blue-50 #e8f3ff / --g900 #191f28 … --g50 #f9fafb
   --green #03b26c / --red #f04452 / --orange #fe9800 / --font Pretendard / --shadow-card
   사이트가 다크 모드를 쓰지 않으므로 라이트 단일. 모든 배경·글자색을 명시적으로 칠한다. */

.c-col{
  --c-ink:var(--g900,#191f28);
  --c-body:var(--g800,#333d4b);
  --c-mute:var(--g600,#6b7684);
  --c-faint:var(--g500,#8b95a1);
  --c-line:var(--g200,#e5e8eb);
  --c-hair:var(--g100,#f2f4f6);
  --c-panel:var(--g50,#f9fafb);
  --c-blue:var(--blue,#3182f6);
  --c-blue-deep:var(--blue-700,#1b64da);
  --c-blue-soft:var(--blue-50,#e8f3ff);
  --c-blue-edge:var(--blue-100,#c9e2ff);
  --c-go:#027a4a;
  --c-go-soft:var(--green-50,#f0faf6);
  --c-stop:#c01f2e;
  --c-stop-soft:var(--red-50,#ffeeee);
  --c-thin:#b35300;
  --c-thin-soft:var(--orange-50,#fff3e0);
  --c-code-bg:#0f1720;
  --c-code-ink:#e6edf5;
  --c-gutter:clamp(16px,5vw,32px);
  --c-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  color-scheme:light;
  box-sizing:border-box;
  max-width:788px;
  margin:0 auto;
  padding:40px var(--c-gutter) 96px;
  background:#fff;
  color:var(--c-body);
  font-family:var(--font,"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,sans-serif);
  font-size:17px;
  line-height:1.85;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.c-col *{box-sizing:border-box}

/* ── 제목 ───────────────────────────────────────── */
.c-col h1{
  margin:0 0 24px;
  font-size:clamp(27px,4.6vw,40px);
  line-height:1.33;
  font-weight:800;
  letter-spacing:-.032em;
  color:var(--c-ink);
}
.c-col h2{
  margin:64px 0 16px;
  padding-top:28px;
  border-top:2px solid var(--c-line);
  font-size:clamp(21px,2.9vw,28px);
  line-height:1.42;
  font-weight:800;
  letter-spacing:-.028em;
  color:var(--c-ink);
  scroll-margin-top:80px;
}
.c-col h3{
  margin:38px 0 10px;
  font-size:clamp(18px,2.1vw,20px);
  line-height:1.5;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--c-ink);
}
.c-col p{margin:0 0 16px}
.c-col a{color:var(--c-blue-deep);text-decoration:underline;text-underline-offset:3px}
.c-col a:hover{text-decoration-thickness:2px}
.c-col cite{font-style:normal;font-weight:700}

/* 인라인 코드 — 긴 URL이 가로 스크롤을 만들지 않게 */
.c-col code{
  padding:1px 6px;
  border-radius:6px;
  background:var(--c-hair);
  color:var(--c-ink);
  font-family:var(--c-mono);
  font-size:.86em;
  line-height:1.5;
  overflow-wrap:anywhere;
  word-break:break-all;
}

/* ── 머리말 · 한눈에 보는 답 · 확인일 배지 ─────────── */
.c-scope{
  margin:0 0 28px;
  padding:16px 18px;
  border-left:3px solid var(--c-line);
  border-radius:0 14px 14px 0;
  background:var(--c-panel);
  font-size:14.5px;
  line-height:1.75;
  color:var(--c-mute);
}
.c-answer{
  margin:0 0 14px;
  padding:22px 24px;
  border:1px solid var(--c-blue-edge);
  border-radius:20px;
  background:var(--c-blue-soft);
}
.c-answer-label{
  display:flex;align-items:center;gap:7px;
  margin:0 0 8px;
  font-size:12.5px;font-weight:800;letter-spacing:.04em;
  color:var(--c-blue-deep);
}
.c-answer-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-blue);flex:none}
.c-lede{margin:0;font-size:18px;line-height:1.8;font-weight:600;color:var(--c-ink)}
.c-stamp{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 8px;
  font-size:13px;line-height:1.7;color:var(--c-mute);
}
.c-stamp-k{
  display:inline-flex;align-items:center;height:24px;padding:0 10px;
  border-radius:999px;background:var(--c-ink);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.02em;
}

/* ── 표 ─────────────────────────────────────────── */
.c-tblwrap{
  margin:22px 0 18px;
  border:1px solid var(--c-line);
  border-radius:18px;
  background:#fff;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.c-tbl{width:100%;min-width:600px;border-collapse:collapse;font-size:14.5px;line-height:1.65;color:var(--c-body)}
.c-tbl caption{
  padding:0;
  border-bottom:1px solid var(--c-hair);
  background:var(--c-panel);
  text-align:left;
}
/* 캡션 본체는 가로 스크롤 컨테이너 안에서 왼쪽에 고정되고 화면 폭을 넘지 않는다 */
.c-cap{
  display:block;
  position:sticky;left:0;
  width:min(calc(100vw - 2 * var(--c-gutter) - 2px),722px);
  padding:13px 16px;
  font-size:12.5px;
  line-height:1.6;
  color:var(--c-mute);
}
.c-cap code{font-size:.94em;background:#fff}
.c-tbl th,.c-tbl td{padding:12px 15px;text-align:left;vertical-align:top;border-bottom:1px solid var(--c-hair)}
.c-tbl thead th{background:#fff;font-size:12.5px;font-weight:800;color:var(--c-mute);letter-spacing:-.01em;border-bottom:1px solid var(--c-line)}
.c-tbl tbody th{font-weight:700;color:var(--c-ink)}
.c-tbl tbody tr:last-child th,.c-tbl tbody tr:last-child td{border-bottom:0}
.c-tbl tbody tr:nth-child(even) th,.c-tbl tbody tr:nth-child(even) td{background:#fcfdfe}

/* 판정 셀 — 색 + 점 + 글자. 색만으로 뜻을 전하지 않는다 */
.c-v{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.c-v::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:currentColor;vertical-align:1px}
.c-v-go{color:var(--c-go)}
.c-v-stop{color:var(--c-stop)}
.c-v-thin{color:var(--c-thin)}
.c-tbl td.c-v-go{background:var(--c-go-soft)}
.c-tbl td.c-v-stop{background:var(--c-stop-soft)}
.c-tbl td.c-v-thin{background:var(--c-thin-soft)}

/* ── 세 갈래 대조 블록 ──────────────────────────── */
.c-lanes{margin:0 0 18px;padding:0;list-style:none}
.c-lanes li{
  padding:15px 18px;
  border-left:3px solid var(--c-line);
  border-radius:0 14px 14px 0;
  background:var(--c-panel);
  font-size:15.5px;line-height:1.75;color:var(--c-body);
}
.c-lanes li+li{margin-top:10px}
.c-lanes li:nth-child(1){border-left-color:var(--c-go);background:var(--c-go-soft)}
.c-lanes li:nth-child(2){border-left-color:var(--c-stop);background:var(--c-stop-soft)}
.c-lanes li:nth-child(3){border-left-color:var(--c-thin);background:var(--c-thin-soft)}
.c-lanes b{display:block;margin-bottom:2px;font-size:16px;font-weight:800;color:var(--c-ink)}

/* ── 주의 박스 ──────────────────────────────────── */
.c-warn{
  display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;
  margin:20px 0;padding:17px 19px;
  border-radius:16px;background:var(--c-thin-soft);
  font-size:15.5px;line-height:1.75;color:var(--c-body);
}
.c-warn::before{
  content:"!";display:grid;place-items:center;
  width:24px;height:24px;border-radius:50%;
  background:var(--orange,#fe9800);color:#fff;font-size:14px;font-weight:800;
}
.c-warn>*{grid-column:2;margin:0}
.c-warn b{color:var(--c-ink)}

/* ── 원문 인용 카드 (원어 + 번역 병기) ───────────── */
.c-quote{
  position:relative;
  margin:22px 0;padding:22px 24px 18px;
  border:1px solid var(--c-blue-edge);
  border-radius:18px;
  background:#fbfdff;
}
.c-quote::before{
  content:"\201C";
  position:absolute;top:6px;left:18px;
  font-size:44px;line-height:1;font-weight:800;color:var(--c-blue-edge);
}
.c-quote>p{margin:0 0 8px;padding-left:30px}
.c-quote p[lang="en"]{font-size:15.5px;line-height:1.7;color:var(--c-ink);font-weight:600}
.c-quote .c-quote-ko{font-size:15.5px;line-height:1.75;color:var(--c-body);font-weight:400}
.c-quote footer{
  margin-top:12px;padding-top:11px;padding-left:30px;
  border-top:1px solid var(--c-hair);
  font-size:12.5px;line-height:1.6;color:var(--c-mute);
}

/* ── 검사 단계 (번호가 뜻을 가질 때만 ol) ─────────── */
.c-steps{margin:22px 0 18px;padding:0;list-style:none}
.c-steps>li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start}
.c-steps>li+li{margin-top:20px}
.c-step-n{
  display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;background:var(--c-blue);color:#fff;
  font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;
}
.c-steps>li>div>b{display:block;margin:4px 0 9px;font-size:17px;font-weight:800;color:var(--c-ink);line-height:1.5}
.c-cmd{
  margin:0 0 10px;padding:14px 16px;
  border-radius:14px;background:var(--c-code-bg);color:var(--c-code-ink);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.c-cmd code{
  display:block;padding:0;background:none;color:inherit;
  font-family:var(--c-mono);font-size:12.5px;line-height:1.75;
  white-space:pre;word-break:normal;overflow-wrap:normal;
}
.c-judge{
  margin:0;padding:11px 14px;
  border-radius:12px;background:var(--c-blue-soft);
  font-size:14.5px;line-height:1.7;color:var(--c-body);
}
.c-judge b{color:var(--c-blue-deep);font-weight:800}

/* ── 판정 기준 목록 ─────────────────────────────── */
.c-thresholds{margin:16px 0 18px;padding:0;list-style:none}
.c-thresholds li{
  padding:13px 0;border-bottom:1px solid var(--c-hair);
  font-size:15.5px;line-height:1.75;
}
.c-thresholds li:last-child{border-bottom:0}
.c-thresholds b{
  display:inline-block;margin-right:8px;padding:2px 9px;
  border-radius:8px;background:var(--c-ink);color:#fff;
  font-size:13px;font-weight:700;white-space:nowrap;
}

/* ── 자기점검 체크리스트 ────────────────────────── */
.c-check{margin:16px 0 18px;padding:0;list-style:none}
.c-check li{
  position:relative;padding:14px 0 14px 32px;
  border-bottom:1px solid var(--c-hair);
  font-size:15.5px;line-height:1.75;
}
.c-check li:last-child{border-bottom:0}
.c-check li::before{
  content:"";position:absolute;left:0;top:19px;
  width:20px;height:20px;border-radius:6px;
  background:var(--c-blue-soft);
  box-shadow:inset 0 0 0 1.5px var(--c-blue-edge);
}
.c-check li::after{
  content:"";position:absolute;left:6px;top:24px;
  width:8px;height:4px;border-left:2px solid var(--c-blue-deep);border-bottom:2px solid var(--c-blue-deep);
  transform:rotate(-45deg);
}
.c-check b{display:block;color:var(--c-ink);font-weight:800}

/* ── 근거 카드 (사이트 .srcs/.src 체계의 원고판) ──── */
.c-srcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0 0}
.c-src{
  display:flex;flex-direction:column;
  padding:22px;border-radius:20px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--c-line);
}
.c-src-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.c-src-kind{
  display:inline-flex;align-items:center;height:26px;padding:0 10px;
  border-radius:8px;background:var(--c-blue-soft);color:var(--c-blue-deep);
  font-size:12.5px;font-weight:700;white-space:nowrap;
}
.c-src-date{margin-left:auto;font-size:12.5px;color:var(--c-mute);white-space:nowrap}
.c-src h3{margin:14px 0 3px;font-size:17px;line-height:1.45;font-weight:800;letter-spacing:-.015em}
.c-src-org{margin:0;font-size:13px;color:var(--c-mute)}
.c-src dl{margin:15px 0 0}
.c-src dl>dt:first-child{margin-top:0}
.c-src dt{margin-top:12px;font-size:12.5px;font-weight:800;color:var(--c-mute)}
.c-src dd{margin:3px 0 0;font-size:14.5px;line-height:1.7;color:var(--c-body)}
.c-src>p:last-child{margin:auto 0 0;padding-top:16px}
.c-src>p:last-child a{font-size:13.5px;font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.c-src>p:last-child a:hover{text-decoration:underline}

/* ── 글쓴이 · 링크 · FAQ ────────────────────────── */
.c-meta{margin:16px 0 0;padding:0;list-style:none;border-top:1px solid var(--c-line)}
.c-meta li{padding:12px 0;border-bottom:1px solid var(--c-hair);font-size:15px;line-height:1.7;color:var(--c-body)}
.c-meta b{display:inline-block;min-width:96px;margin-right:10px;font-weight:800;color:var(--c-ink)}
.c-links{margin:16px 0 0;padding:0;list-style:none}
.c-links li{border-bottom:1px solid var(--c-hair)}
.c-links a{
  display:flex;align-items:center;gap:10px;
  padding:14px 2px;font-size:16px;font-weight:600;text-decoration:none;color:var(--c-ink);
}
.c-links a::after{content:"→";margin-left:auto;color:var(--c-faint);font-weight:400}
.c-links a:hover{color:var(--c-blue-deep)}
.c-links a:hover::after{color:var(--c-blue-deep)}
.c-faq{margin:16px 0 0}
.c-faq h3{
  position:relative;margin:26px 0 8px;padding-left:28px;
  font-size:17.5px;font-weight:800;line-height:1.55;
}
.c-faq h3::before{
  content:"Q";position:absolute;left:0;top:2px;
  display:grid;place-items:center;width:21px;height:21px;
  border-radius:6px;background:var(--c-blue-soft);color:var(--c-blue-deep);
  font-size:12.5px;font-weight:800;
}
.c-faq p{margin:0 0 4px;padding-left:28px;font-size:16px;line-height:1.8;color:var(--c-body)}

/* ── 모바일 (360px에서 페이지 가로 스크롤이 생기지 않게) ── */
@media (max-width:860px){
  .c-srcs{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .c-col{padding-top:28px;padding-bottom:64px;font-size:16px;line-height:1.8}
  .c-col h2{margin-top:48px;padding-top:22px}
  .c-answer{padding:18px 18px;border-radius:16px}
  .c-lede{font-size:16.5px}
  .c-quote{padding:20px 18px 16px}
  .c-quote::before{left:14px;font-size:38px}
  .c-quote>p,.c-quote footer{padding-left:24px}
  .c-steps>li{grid-template-columns:28px minmax(0,1fr);gap:11px}
  .c-step-n{width:28px;height:28px;font-size:13px}
  .c-steps>li>div>b{font-size:16px}
  .c-cmd code{font-size:12px}
  .c-src{padding:18px}
  .c-meta b{display:block;min-width:0;margin:0 0 2px}
  .c-tbl{min-width:520px;font-size:14px}
  .c-tbl th,.c-tbl td{padding:11px 12px}
}

/* ── 인라인 도해 (SVG) ──────────────────────────── */
/* 래스터 이미지를 쓰지 않는다. <text>가 초기 HTML의 글자로 남고,
   색은 위 .c-col 토큰만 참조해 팔레트가 바뀌면 같이 따라간다.
   고정 px width 없이 viewBox + width:100%로만 크기를 잡는다. */
.c-fig{
  margin:30px 0 26px;
  padding:0;
}
.c-fig svg{
  display:block;
  width:100%;
  max-width:540px;
  height:auto;
  margin:0 auto;
  font-family:inherit;
}
.c-fig svg text{
  font-family:inherit;
  letter-spacing:-.01em;
}
.c-figcap{
  max-width:540px;
  margin:12px auto 0;
  font-size:13.5px;
  line-height:1.7;
  color:var(--c-mute);
}
.c-figcap code{font-size:.92em}
.c-figcap cite{font-weight:700}

@media (max-width:560px){
  .c-fig{margin:24px 0 22px}
  .c-figcap{font-size:13px;line-height:1.65}
}