/* ============================================================
   column-experience-campaign-review-boundaries.css
   korea.weu.kr 본문 전용 스타일. 사이트 전역 CSS(src/styles.css)에는
   본문 타이포그래피가 없으므로(*{margin:0;padding:0} / a{text-decoration:none})
   문단·제목·목록·표의 기본값을 이 파일이 직접 정의한다.
   색·폰트·모서리·그림자는 src/styles.css 1~11행의 :root 토큰에서 파생한다.
   .rv 계열 클래스는 App.tsx의 IntersectionObserver에만 의존하므로 쓰지 않는다.
   ============================================================ */

.c-a{
  /* --- 사이트 토큰 참조(폴백은 src/styles.css 실제 값) --- */
  --c-ink:      var(--ink, #1c2b52);
  --c-ink-70:   var(--ink-70, rgba(28,43,82,.7));
  --c-ink-50:   var(--ink-50, rgba(28,43,82,.5));
  --c-ink-25:   var(--ink-25, rgba(28,43,82,.22));
  --c-line:     var(--line, #e5ecf1);
  --c-navy:     var(--navy, #1c2b52);
  --c-navy-3:   var(--navy-3, #0e1830);
  --c-teal:     var(--teal, #3ba1ba);
  --c-teal-hi:  var(--teal-hi, #5fc4dc);
  --c-sky:      var(--sky, #eef5f8);
  --c-paper:    var(--paper, #fff);
  --c-on-navy:  var(--on-navy, #eaf1f6);
  --c-sans:     var(--sans, "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif);
  --c-serif:    var(--serif, "Nanum Myeongjo", serif);

  /* --- 원고 전용 파생값 --- */
  --c-r:     14px;                              /* .hf-row .ph / .hv-alert 와 동일 */
  --c-r-lg:  20px;                              /* .mk(24px)와 .c-r 사이 */
  --c-sh:    0 8px 20px rgba(28,43,82,.06);     /* .dbpanel 과 동일 */
  --c-sh-lg: 0 16px 38px rgba(28,43,82,.10);    /* .mp-shot 계열 축소 */
  --c-surface: #fff;
  --c-surface-2: #fbfdfe;
  --c-body-size: clamp(16px, 0.62vw + 14px, 17.5px);

  display: block;
  max-width: 800px;
  margin: 0 auto;
  padding: clamp(26px,6vw,54px) max(16px, var(--pad, clamp(20px,5vw,52px))) clamp(56px,9vw,104px);
  font-family: var(--c-sans);
  font-size: var(--c-body-size);
  line-height: 1.85;
  color: var(--c-ink);
  background: var(--c-paper);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 제목 ---------- */
.c-a h1{
  font-weight: 900;
  letter-spacing: -.035em;                      /* .sec-h(-.03em) / .hero h1(-.035em) */
  line-height: 1.26;
  font-size: clamp(25px, 3.6vw, 40px);
  color: var(--c-navy);
  text-wrap: balance;
  margin: 0 0 clamp(18px,3vw,26px);
}
.c-a h2{
  position: relative;
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.34;
  font-size: clamp(20px, 2.2vw, 27px);
  color: var(--c-navy);
  text-wrap: balance;
  margin: clamp(46px,6vw,74px) 0 0;
  padding-top: 18px;
}
.c-a h2::before{                                /* .eyebrow::before 파생 (20×2 teal bar) */
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 3px;
  background: var(--c-teal);
  border-radius: 3px;
}
.c-a h3{
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.45;
  font-size: clamp(17px, 1.5vw, 19.5px);
  color: var(--c-ink);
  margin: clamp(28px,3.6vw,40px) 0 0;
}

/* ---------- 본문 기본 ---------- */
.c-a p{ margin: 1.05em 0 0; }
.c-a h2 + p, .c-a h3 + p{ margin-top: .85em; }
.c-a b, .c-a strong{ font-weight: 700; color: var(--c-navy); }
.c-a a{
  color: #24758f;                               /* 작은 본문에서도 WCAG AA 대비를 확보한 teal 파생값 */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.c-a a:hover{ color: #1f6c84; }
.c-a a:focus-visible{
  outline: 3px solid #24758f;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- 한눈에 보는 답 ---------- */
.c-answer{
  margin-top: clamp(20px,3vw,28px);
  background: var(--c-sky);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-teal);
  border-radius: var(--c-r);
  padding: clamp(18px,3vw,26px) clamp(18px,3vw,28px);
}
.c-answer-k{
  margin: 0;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  color: #24758f;
}
.c-answer-k::before{
  content: ""; width: 20px; height: 2px;
  background: var(--c-teal); border-radius: 2px;
}
.c-answer-t{
  margin-top: 10px !important;
  font-size: 1.02em;
  line-height: 1.82;
  color: var(--c-ink);
}

/* ---------- 확인일 배지 ---------- */
.c-checked{
  position: relative;
  margin-top: 14px !important;
  padding: 11px 16px 11px 34px;
  border: 1px dashed var(--c-ink-25);
  border-radius: 12px;
  background: var(--c-surface);
  font-size: .85em; line-height: 1.7; color: var(--c-ink-70);
}
.c-checked b{ color: var(--c-navy); }
.c-checked-d{                                   /* .dbhead .dot 파생 */
  position: absolute; left: 15px; top: 1.15em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-teal);
  box-shadow: 0 0 0 4px rgba(59,161,186,.22);
}

/* ---------- 원문 인용 (.press-card q 파생) ---------- */
.c-a blockquote.c-quote{
  margin: 1.6em 0 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--c-teal);
  background: var(--c-surface);
}
.c-quote p{
  margin: 0;
  font-family: var(--c-serif);
  font-weight: 800;
  font-size: clamp(15.5px, 1.1vw, 17.5px);
  line-height: 1.72;
  color: var(--c-ink);
  quotes: none;
}
.c-quote cite{
  display: block;
  margin-top: 10px;
  font-family: var(--c-sans);
  font-style: normal;
  font-size: .8em;
  font-weight: 600;
  line-height: 1.6;
  color: var(--c-ink-70);
}

/* ---------- 표 ---------- */
.c-tw{
  margin: 1.5em 0 0;
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  box-shadow: var(--c-sh);
  background: var(--c-surface);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.c-table{
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: .9em;
}
.c-table caption{                               /* .dbhead 파생 */
  caption-side: top;
  text-align: left;
  background: var(--c-navy);
  color: #fff;
  font-size: .82em;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.55;
  padding: 12px 16px;
}
.c-table thead th{
  background: var(--c-sky);
  color: var(--c-navy);
  font-weight: 800;
  font-size: .94em;
  text-align: left;
  vertical-align: bottom;
  padding: 11px 14px;
  border-bottom: 1px solid var(--c-line);
}
.c-table tbody th[scope="row"]{
  text-align: left;
  font-weight: 800;
  color: var(--c-navy);
  background: var(--c-surface-2);
  vertical-align: top;
  padding: 12px 14px;
  border-top: 1px solid var(--c-line);
  min-width: 128px;
}
.c-table td{
  vertical-align: top;
  padding: 12px 14px;
  line-height: 1.68;
  color: var(--c-ink-70);
  border-top: 1px solid var(--c-line);
}
.c-table td b{ color: var(--c-navy); }
.c-table-num td:nth-child(3),
.c-table-num td:nth-child(4){
  font-variant-numeric: tabular-nums;           /* .tnum 파생 */
  text-align: right;
  white-space: nowrap;
}
.c-cap{
  font-size: .82em;
  line-height: 1.7;
  color: var(--c-ink-70);
  margin-top: 10px !important;
  padding-left: 12px;
  border-left: 2px solid var(--c-line);
}

/* ---------- 순서 있는 절차 (.mp-node 파생) ---------- */
.c-a ol.c-steps{
  list-style: none;
  counter-reset: cstep;
  margin: 1.4em 0 0;
  padding: 0;
}
.c-steps > li{
  counter-increment: cstep;
  position: relative;
  margin-top: 1.05em;
  padding-left: 46px;
  min-height: 30px;
}
.c-steps > li::before{
  content: counter(cstep);
  position: absolute; left: 0; top: 2px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #24758f;
  color: #fff;
  font-weight: 800; font-size: 14px;
  display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(36,117,143,.34);
}

/* ---------- 순서 없는 조건·체크리스트 ---------- */
.c-a ul.c-cond,
.c-a ul.c-check{
  list-style: none;
  margin: 1.3em 0 0;
  padding: 0;
}
.c-cond > li,
.c-check > li{
  position: relative;
  margin-top: 1em;
  padding-left: 28px;
}
.c-cond > li::before{
  content: "";
  position: absolute; left: 2px; top: .62em;
  width: 10px; height: 10px;
  background: var(--c-teal);
  border-radius: 3px;
  transform: rotate(45deg);
}
.c-check > li::before{
  content: "";
  position: absolute; left: 4px; top: .5em;
  width: 7px; height: 12px;
  border-right: 2.5px solid var(--c-teal);
  border-bottom: 2.5px solid var(--c-teal);
  transform: rotate(42deg);
}

/* ---------- 경고 박스 (.hstrip / .dbhead 의 navy 면 파생) ---------- */
.c-warn{
  margin-top: 1.6em;
  background: var(--c-navy);
  color: var(--c-on-navy);
  border-radius: var(--c-r);
  padding: clamp(18px,3vw,24px) clamp(18px,3vw,26px);
  box-shadow: var(--c-sh-lg);
}
.c-warn p{ margin-top: 10px; line-height: 1.8; font-size: .95em; }
.c-warn-k{
  margin: 0 !important;
  font-size: .88em; font-weight: 800; letter-spacing: -.01em;
  color: var(--c-teal-hi);
}

/* ---------- 좌우 대조 (구 판본 vs 현행) ---------- */
.c-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 1.5em;
}
.c-split-a, .c-split-b{
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  box-shadow: var(--c-sh);
  padding: 16px 18px;
}
.c-split-a{ border-top: 3px solid var(--c-ink-25); }
.c-split-b{ border-top: 3px solid var(--c-teal); }
.c-split-k{
  margin: 0 !important;
  font-size: .78em; font-weight: 800; letter-spacing: -.01em;
}
.c-split-a .c-split-k{ color: var(--c-ink-70); }
.c-split-b .c-split-k{ color: #24758f; }
.c-split p + p{
  margin-top: 9px;
  font-family: var(--c-serif);
  font-weight: 800;
  font-size: .92em;
  line-height: 1.7;
  color: var(--c-ink);
}

/* ---------- 근거 구분 태그 (.mp-badge 파생) ---------- */
.c-tag{
  display: inline-block;
  margin-left: 5px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .74em;
  font-weight: 800;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: baseline;
}
.c-tag-m{ background: var(--c-teal); color: #fff; }
.c-tag-o{ background: var(--c-surface); color: var(--c-navy); border: 1px solid var(--c-ink-25); }
.c-warn .c-tag-o{ background: transparent; color: var(--c-on-navy); border-color: rgba(255,255,255,.3); }

.c-mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86em;
  background: var(--c-sky);
  border-radius: 6px;
  padding: 1px 6px;
  word-break: break-all;
}

/* ---------- 확인한 근거 ---------- */
.c-sources{
  display: grid;
  gap: 9px;
  margin-top: 18px;
}
.c-src{
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-teal);
  border-radius: 12px;
  padding: 12px 16px;
}
.c-src p{
  margin: 0;
  font-size: .86em;
  line-height: 1.72;
  color: var(--c-ink-70);
}
.c-src a{ word-break: break-all; }

/* ---------- 글쓴이·확인일 ---------- */
.c-meta{
  margin-top: 26px !important;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
  font-size: .85em;
  line-height: 1.78;
  color: var(--c-ink-70);
}

/* ---------- 관련 페이지·문의 ---------- */
.c-cta{
  margin-top: clamp(40px,6vw,64px);
  background: var(--c-sky);
  border: 1px solid var(--c-line);
  border-radius: var(--c-r-lg);
  padding: clamp(22px,4vw,34px);
}
.c-cta h2{ margin-top: 0; }
.c-links{
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.c-links a{
  display: block;
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 13px 40px 13px 16px;
  font-size: .93em;
  font-weight: 700;
  color: var(--c-navy);
  text-decoration: none;
  transition: border-color .16s, transform .16s, box-shadow .16s;
}
.c-links a::after{
  content: "→";
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  color: #24758f;
  font-weight: 800;
}
.c-links a:hover{
  border-color: var(--c-teal);
  transform: translateX(2px);
  box-shadow: var(--c-sh);
}

/* ---------- 함께 묻는 질문 ---------- */
.c-faq{ margin-top: clamp(40px,6vw,64px); }
.c-faq h3{
  position: relative;
  padding-left: 28px;
  margin-top: clamp(24px,3vw,32px);
}
.c-faq h3::before{
  content: "Q";
  position: absolute; left: 0; top: 0;
  color: #24758f;
  font-weight: 900;
  font-size: 1.05em;
}
.c-faq p{ padding-left: 28px; font-size: .96em; }

/* ============================================================
   인라인 SVG 도해 (.c-fig)
   본문에 이미 있는 문장·표를 한눈에 다시 보게 하는 그림만 넣는다.
   래스터 이미지를 쓰지 않으므로 이미지 예산을 쓰지 않고, <text> 안의
   글자는 초기 HTML 텍스트라 GPTBot·ClaudeBot·PerplexityBot이 그대로 읽는다.
   색은 전부 위쪽 .c-a 의 --c-* 토큰만 참조하므로, 아래 다크 모드 블록이
   토큰을 바꾸면 도해도 같이 따라간다. 하드코딩한 색값이 없다.
   ============================================================ */
.c-a .c-fig{
  margin: 1.7em 0 0;
  padding: 0;
}
.c-fig-in{
  border: 1px solid var(--c-line);
  border-radius: var(--c-r);
  background: var(--c-surface);
  box-shadow: var(--c-sh);
  padding: clamp(10px, 2.2vw, 18px);
}
/* 고정 px 폭을 주지 않는다. viewBox 비율로만 커지고 작아진다. */
.c-fig-svg{
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.c-a .c-fig figcaption{
  margin-top: 11px;
  padding-left: 12px;
  border-left: 2px solid var(--c-line);
  font-size: .82em;
  line-height: 1.7;
  color: var(--c-ink-70);
}

/* ---------- 도해 내부 요소 (색은 전부 토큰 참조) ---------- */
.c-fg-h{  fill: var(--c-navy);   font-weight: 800; letter-spacing: -.01em; }
.c-fg-t{  fill: var(--c-ink);    font-weight: 600; }
.c-fg-m{  fill: var(--c-ink-70); }
.c-fg-mb{ fill: var(--c-ink-70); font-weight: 800; }
.c-fg-s{  fill: #59647e; }
.c-fg-a{  fill: #24758f; font-weight: 800; }

.c-fg-box{  fill: var(--c-surface);   stroke: var(--c-line); stroke-width: 1; }
.c-fg-hole{ fill: none;               stroke: var(--c-line); stroke-width: 1; }
.c-fg-band{  fill: var(--c-teal); fill-opacity: .14; stroke: none; }
.c-fg-bandb{ fill: var(--c-teal); fill-opacity: .10; stroke: var(--c-line); stroke-width: 1; }
.c-fg-s2{   fill: var(--c-surface-2); stroke: var(--c-line); stroke-width: 1; }

.c-fg-fill{  fill: var(--c-teal); }
.c-fg-fill2{ fill: var(--c-teal); opacity: .42; }
.c-fg-num{   fill: var(--c-sky);     stroke: var(--c-teal); stroke-width: 1.5; }
.c-fg-node{  fill: var(--c-surface); stroke: var(--c-teal); stroke-width: 2.5; }
.c-fg-rule{  fill: none; stroke: var(--c-ink-25); stroke-width: 1.5; }
.c-fg-dash{  fill: none; stroke: var(--c-ink-25); stroke-width: 1; stroke-dasharray: 3 5; }
.c-fg-spine{ fill: none; stroke: var(--c-ink-25); stroke-width: 2; stroke-dasharray: 5 5; }
.c-fg-arrow{ fill: var(--c-ink-25); }
.c-fg-strip-a{ fill: var(--c-teal); }
.c-fg-strip-b{ fill: var(--c-ink-25); }
.c-fg-strip-c{ fill: var(--c-ink-50); }

/* ============================================================
   모바일 — 360px에서 가로 스크롤이 생기지 않아야 한다.
   표만 자체 컨테이너 안에서 가로로 스크롤한다.
   ============================================================ */
@media (max-width: 720px){
  .c-split{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .c-a{ line-height: 1.8; }
  .c-a h2{ margin-top: 40px; }
  .c-table{ min-width: 480px; font-size: .86em; }
  .c-table caption,
  .c-table thead th,
  .c-table tbody th[scope="row"],
  .c-table td{ padding: 10px 12px; }
  .c-table tbody th[scope="row"]{ min-width: 104px; }
  .c-steps > li{ padding-left: 38px; }
  .c-steps > li::before{ width: 26px; height: 26px; font-size: 13px; }
  .c-faq h3, .c-faq p{ padding-left: 24px; }
  .c-links a{ padding-right: 34px; }
  .c-fig-in{ padding: 10px; }
}
@media (max-width: 380px){
  .c-a{ padding-left: 16px; padding-right: 16px; }
  .c-table{ min-width: 420px; }
  .c-tag{ margin-left: 3px; padding: 2px 8px; }
  .c-fig-in{ padding: 8px; }
}

@media (prefers-reduced-motion: reduce){
  .c-links a{ transition: none; }
  .c-links a:hover{ transform: none; }
}

/* ============================================================
   다크 모드 — korea.weu.kr 전역 CSS(src/styles.css)에는 다크 모드가
   없고 body 배경이 var(--paper)=#fff 로 고정되어 있다. 따라서
   prefers-color-scheme 만으로 본문을 어둡게 바꾸면 헤더·푸터는 밝은 채로
   남아 화면이 깨진다. 여기서는 문서가 명시적으로 옵트인한 경우
   (:root[data-theme="dark"])에만 적용되도록 두어, 사이트가 나중에 테마
   전환을 도입하면 이 원고가 바로 따라가도록 준비만 해 둔다.
   그때까지는 위 라이트 정의가 유일한 렌더링이며, 모든 블록이 배경색을
   명시적으로 칠하고 있어 브라우저 강제 다크에서도 글자가 배경에 묻히지 않는다.
   도해(.c-fig)는 별도 규칙이 필요 없다 — 아래에서 토큰만 바꾸면 SVG가
   그 토큰을 그대로 참조하므로 같이 따라간다. 앞자리 띠·구간 띠는
   --c-sky 대신 --c-teal + fill-opacity 로 칠했기 때문에 다크에서도 보인다.
   ============================================================ */
:root[data-theme="dark"] .c-a{
  --c-ink:     #e7eef4;
  --c-ink-70:  rgba(231,238,244,.76);
  --c-ink-50:  rgba(231,238,244,.56);
  --c-ink-25:  rgba(231,238,244,.26);
  --c-line:    rgba(231,238,244,.16);
  --c-navy:    #e7eef4;
  --c-sky:     #16233f;
  --c-paper:   #0e1830;
  --c-teal:    #5fc4dc;
  --c-surface:   #16233f;
  --c-surface-2: #1b2a49;
  --c-sh:    0 8px 20px rgba(0,0,0,.34);
  --c-sh-lg: 0 16px 38px rgba(0,0,0,.44);
}
:root[data-theme="dark"] .c-a a{ color: #7fd4e8; }
:root[data-theme="dark"] .c-table caption{ background: #22345a; color: #fff; }
:root[data-theme="dark"] .c-warn{ background: #1b2a49; border: 1px solid rgba(231,238,244,.16); }
:root[data-theme="dark"] .c-tag-m{ background: #2c84a0; color: #fff; }
:root[data-theme="dark"] .c-mono{ background: #1b2a49; }