/* 소개 페이지 전용 스타일 (C6: 리캐치 흐름) · 2026-10-27 시안
   구성·연출 방식만 참고(docs/reference/recatch/README.md). 문구·값·이미지는 옮기지 않았다.
   색·글자 크기·간격·라운드·움직임 값은 tokens.css 변수만 쓴다(hex·rgb 없음).
   다크 구간 = 구간 요소의 data-theme="dark" (tokens.css 2절 다크 별칭을 구간 단위로 읽는다).
   라임: 3단계 Step 03 도식 한 곳. 청록: 'AI에게 맡긴 칸' 도식 면에만. 앰버·탁한 색 없음.
   움직임 줄이기(prefers-reduced-motion: reduce): 등장·순환·회전·흐름을 모두 끄고 최종 상태를 보인다.
   JS 꺼짐: 숨김 상태는 about.js 가 html 에 붙인 can-* 클래스가 있을 때만 걸린다. */

/* 0. 구간 바탕 ------------------------------------------------------- */

.about-page [data-theme="dark"],
.about-page .footer[data-theme="dark"] {
  background: var(--bg-page);
  color: var(--text-2);
}

.about-page { overflow-x: clip; }
/* 위(GNB)·아래(푸터)가 다크라 오버스크롤 바탕도 숯. 이 쪽에서만 */
html:has(body.about-page) { background: var(--char-950); }

.a-sec { padding-block: var(--gap-section); }
.a-sec--tight { padding-top: 0; }
.a-sec--talks { padding-top: 0; }

.a-head {
  max-width: var(--measure);
  margin: 0 auto var(--gap-group);
  text-align: center;
}
.eyebrow {
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-m);
  background: var(--bg-cover);
  color: var(--text-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-en);
  text-transform: uppercase;
}
.a-title {
  margin-top: var(--sp-4);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-semibold);
}
.a-lead {
  margin-top: var(--sp-4);
  color: var(--text-2);
}
.a-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
}

/* 버튼 */
.a-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--btn-min-w);
  min-height: var(--btn-h);
  padding: 0 var(--sp-6);
  border-radius: var(--radius-m);
  font-size: var(--btn-fs);
  line-height: var(--lh-small);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard);
}
.a-btn--primary { background: var(--bg-inverse); color: var(--text-on-inverse); }
.a-btn--primary:hover { background: var(--grey-200); }
.a-btn--primary:active { background: var(--grey-300); }
.a-btn--ghost {
  border: 1px solid var(--btn-line-border);
  background: transparent;
  color: var(--btn-line-text);
}
.a-btn--ghost:hover { background: var(--btn-line-bg-hover); }
.a-btn--ghost:active { background: var(--btn-line-bg-pressed); }

/* 카드 격자 */
.a-grid { display: grid; gap: var(--gutter); grid-template-columns: minmax(0, 1fr); }
.a-card {
  padding: var(--card-pad);
  border-radius: var(--radius-m);
  background: var(--bg-cover);
}
.a-card p { color: var(--text-2); }
.a-card .a-h3 { color: var(--text-1); }

/* 1. 히어로 ---------------------------------------------------------- */

.a-hero {
  padding-top: var(--sp-10);
  padding-bottom: 0;
  text-align: center;
  overflow: hidden;
}
.hero-title {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-ko);
}
.hero-line { display: block; }
.hero-line--chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--sp-3);
}

/* 순환 칩: 다크 면 위 한 단 밝은 면. 폭은 about.js 가 현재 낱말 폭으로 바꾼다 */
/* 칩 안쪽 여백 0.3em: 글자 크기(display 40/28)를 따라 같이 줄어야 해서 em 으로 둔다(토큰은 px 고정) */
.chip {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding-inline: 0.3em;
  border-radius: var(--radius-m);
  background: var(--bg-hover);
  color: var(--text-1);
  white-space: nowrap;
}
.chip-sizer { visibility: hidden; }
.chip-word {
  position: absolute;
  left: 0.3em;
  top: 0;
  opacity: 0;
  transform: translateY(100%);
}
.chip-word.is-cur { opacity: 1; transform: none; }
.chip-word.is-out { opacity: 0; transform: translateY(-100%); }
.can-chip .chip { transition: width var(--dur-4) var(--ease-standard); }
.can-chip .chip-word {
  transition:
    transform var(--dur-4) var(--ease-standard),
    opacity var(--dur-4) var(--ease-standard);
}

.hero-sub {
  max-width: var(--measure);
  margin: var(--sp-6) auto 0;
  color: var(--text-2);
}
.hero-sub span { display: block; }
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

/* 작업 지도: 점 격자 반원 + 호 + 노드. 노드는 HTML(글자 크기 유지), 호는 SVG */
.map {
  position: relative;
  width: 100%;
  max-width: calc(var(--sp-24) * 10 + var(--sp-10));
  margin: var(--sp-6) auto 0;
  aspect-ratio: 4 / 5;
}
/* 점 반지름 1.2px·1.6px: 20px 격자 위 1~2px 점 그림용 렌더 값(간격 토큰 아님) */
.map-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--text-3) 1.2px, transparent 1.6px);
  background-size: var(--sp-5) var(--sp-5);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to bottom, var(--text-1) 0%, var(--text-1) 30%, transparent 92%);
  mask-image: linear-gradient(to bottom, var(--text-1) 0%, var(--text-1) 30%, transparent 92%);
}
.map-arcs { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-arcs--wide { display: none; }
.map-halo { fill: var(--brand); opacity: 0.35; }
.map-arc {
  fill: none;
  stroke: var(--text-1);
  stroke-width: 1.5;
  stroke-opacity: 0.75;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.node {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-m);
  background: var(--bg-hover);
  color: var(--text-1);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.node-c {
  left: 50%; top: 82%;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  padding: var(--sp-3) var(--sp-5);
}
.node-a { left: 22%; top: 48%; }
.node-b { left: 30%; top: 18%; }
.node-d { left: 70%; top: 18%; }
.node-e { left: 78%; top: 48%; }

@media (prefers-reduced-motion: no-preference) {
  .map-arc {
    animation: arc-draw calc(var(--dur-4) * 3) var(--ease-out) both;
    animation-delay: calc(var(--dur-4) * 0.5 + var(--stagger) * var(--i, 0));
  }
  .map-halo,
  .node {
    animation: node-in var(--dur-4) var(--ease-standard) both;
    animation-delay: calc(var(--dur-4) * 2 + var(--stagger) * var(--i, 0));
  }
  .node-c, .map-halo { animation-delay: 0s; }
  @keyframes arc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes node-in { from { opacity: 0; } }
}

/* 2. 만들어 본 것 띠 ------------------------------------------------- */

.a-marquee { padding-block: var(--gap-group) var(--gap-section); }
.mk-bar { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.mq-toggle {
  min-height: 44px; /* 터치 최소 44 */
  padding: 0 var(--sp-4);
  border: 1px solid var(--btn-line-border);
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: var(--fs-caption);
  cursor: pointer;
}
.mq-toggle:hover { background: var(--btn-line-bg-hover); }
.mq-toggle[aria-pressed="true"] { background: var(--bg-pressed); color: var(--text-1); }
.mk-title {
  max-width: var(--container);
  text-align: center;
  color: var(--text-2);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-medium);
}
.marquee {
  margin-top: var(--sp-6);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--text-1) 10%, var(--text-1) 90%, transparent);
  mask-image: linear-gradient(to right, transparent, var(--text-1) 10%, var(--text-1) 90%, transparent);
}
.mq-track { display: flex; width: max-content; }
.mq-group {
  display: flex;
  flex: none;
  gap: var(--sp-3);
  padding-right: var(--sp-3);
}
.mq-group li {
  flex: none;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-m);
  background: var(--bg-subtle);
  color: var(--text-2);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .mq-track { animation: mq-flow calc(var(--dur-4) * 60) linear infinite; }
  .marquee:hover .mq-track,
  .a-marquee:focus-within .mq-track,
  .a-paused .mq-track { animation-play-state: paused; }
  @keyframes mq-flow { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .mq-track { width: auto; justify-content: center; padding-inline: var(--page-margin); }
  .mq-group { flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .mq-group[aria-hidden="true"] { display: none; }
}

/* 3. PROBLEM 카드 + 작은 도식 --------------------------------------- */

.a-card--row { display: flex; flex-direction: column; gap: var(--sp-6); }
.a-card-text p { margin-top: var(--sp-2); }

.a-dg { display: flex; align-items: center; justify-content: flex-start; min-height: calc(var(--sp-16) + var(--sp-8)); }

/* 크기가 제각각인 막대 3개 */
.dg-sizes { gap: var(--sp-2); align-items: flex-end; flex: none; }
.dg-sizes i { display: block; width: var(--sp-6); border-radius: var(--radius-s); background: var(--dg-2); }
.dg-sizes i:nth-child(1) { height: var(--sp-10); }
.dg-sizes i:nth-child(2) { height: calc(var(--sp-16) + var(--sp-8)); width: var(--sp-8); }
.dg-sizes i:nth-child(3) { height: var(--sp-6); width: var(--sp-4); }

/* 문서 → 물음표 */
.dg-docq { gap: var(--sp-5); flex: none; }
.dq-doc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: calc(var(--sp-16) + var(--sp-1));
  padding: var(--sp-3);
  border-radius: var(--radius-m);
  background: var(--bg-page);
}
.dq-doc i { display: block; height: var(--sp-1); border-radius: var(--radius-s); background: var(--grey-300); }
.dq-doc i:nth-child(1) { width: 60%; background: var(--grey-500); }
.dq-doc i:nth-child(3) { width: 80%; }
.dq-doc i:nth-child(4) { width: 50%; }
.dq-q {
  display: grid;
  place-items: center;
  width: var(--sp-12);
  height: var(--sp-12);
  border-radius: 50%;
  background: var(--dg-2);
  color: var(--text-on-brand);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: 1;
}

/* 4. SOLUTIONS 카드 ---------------------------------------------------- */

.a-card--col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.a-card--col .a-dg { width: 100%; margin-bottom: var(--sp-3); }
.a-card--col .ref-link { margin-top: auto; padding-top: var(--sp-2); }
.a-card--col p { flex: 0 0 auto; }

/* 두 칸 레인 */
.dg-lanes { gap: var(--dg-gap); align-items: stretch; }
.ln { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--radius-m); }
.ln i { display: block; height: var(--sp-3); border-radius: var(--radius-s); background: var(--bg-page); opacity: 0.8; }
.ln-ai { background: var(--dg-ai); }
.ln-ai i:nth-child(2) { width: 70%; }
.ln-me { background: var(--dg-2); }
.ln-me i:nth-child(1) { width: 85%; }
.ln-me i:nth-child(2) { width: 55%; }

/* 규칙 줄이 있는 문서 */
.dg-rules .rl-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: 60%;
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--radius-m);
  background: var(--bg-page);
}
.rl-sheet i { display: block; height: var(--sp-1); border-radius: var(--radius-s); background: var(--grey-300); }
.rl-sheet .rl-h { width: 45%; height: var(--sp-2); background: var(--dg-2); }
.rl-sheet .rl-s { width: 65%; }

/* 체크 목록 */
.dg-checks { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--sp-3); }
.ck-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; }
.ck-row b {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-5);
  height: var(--sp-5);
  border-radius: var(--radius-m);
  background: var(--dg-2);
  color: var(--text-on-brand);
}
.ck-row svg { width: var(--sp-4); height: var(--sp-4); }
.ck-row i { display: block; width: 70%; height: var(--sp-2); border-radius: var(--radius-s); background: var(--grey-300); }
.ck-row i.ck-s { width: 45%; }

/* 5. 선언 -------------------------------------------------------------- */

.a-declare { background: var(--bg-cover); }
.declare {
  text-align: center;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-semibold);
}
.declare .dl { display: block; }
.dl + .dl { margin-top: var(--sp-2); }

/* 글자·낱말 리빌: about.js 가 쪼갠 칸만 이 규칙을 받는다 */
.sw { display: inline-block; white-space: nowrap; }
.sc { color: var(--text-4); transition: color var(--dur-2) var(--ease-standard); }
.sc.on { color: var(--text-1); }
.can-split .late-text .sc.on { color: var(--text-2); }

/* 6. 일하는 순서 ------------------------------------------------------- */

.steps { padding-block: var(--gap-section); }
.dial { display: none; }
.step-list { display: grid; gap: var(--gap-group); }
.step { text-align: center; }
.step-title {
  margin-top: var(--sp-4);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-semibold);
}
.step-text { max-width: var(--measure); margin: var(--sp-3) auto 0; color: var(--text-2); }
.st-card {
  margin: var(--sp-8) auto 0;
  padding: var(--card-pad);
  max-width: var(--container-narrow);
  border-radius: var(--radius-m);
  background: var(--bg-cover);
  text-align: left;
}

/* Step 01 표 */
.st-table { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dg-gap); }
.st-col { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--radius-m); }
.st-col--ai { background: var(--bg-ai); }
.st-col--me { background: var(--bg-page); }
.st-head { color: var(--text-1); font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-semibold); }
.st-col i { display: block; height: var(--sp-8); border-radius: var(--radius-s); background: var(--bg-page); }
.st-col--ai i { background: var(--dg-ai); }
.st-col--me i { background: var(--bg-cover); }
.st-col i.b1 { width: 100%; }
.st-col i.b2 { width: 82%; }
.st-col i.b3 { width: 64%; }

/* Step 02 브라우저 틀 */
.st-build { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.st-browser { width: 100%; border-radius: var(--radius-m); background: var(--bg-page); overflow: hidden; }
.sb-bar { display: flex; gap: var(--sp-1); padding: var(--sp-3); background: var(--grey-200); }
.sb-bar i { width: var(--sp-2); height: var(--sp-2); border-radius: 50%; background: var(--grey-500); }
.sb-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-4);
}
.sb-body span { display: block; border-radius: var(--radius-s); background: var(--bg-cover); }
.sb-nav { grid-column: 1 / -1; height: var(--sp-5); background: var(--grey-200) !important; }
.sb-hero { grid-column: 1 / -1; height: var(--sp-16); background: var(--dg-2) !important; }
.sb-c1, .sb-c2, .sb-c3 { height: var(--sp-12); }
.st-tag {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-m);
  background: var(--bg-page);
  color: var(--text-1);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
}

/* Step 03 문서 + 라임 형광펜 한 줄(이 쪽 라임 1곳째) */
.st-doc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: calc(var(--sp-24) * 3);
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--radius-m);
  background: var(--bg-page);
}
.st-doc i { display: block; height: var(--sp-2); border-radius: var(--radius-s); background: var(--grey-300); }
.st-doc .d-h { width: 40%; height: var(--sp-3); background: var(--dg-2); }
.st-doc .d-m { width: 80%; }
.st-doc .d-s { width: 55%; }
.d-mark { display: block; padding: var(--sp-2); margin-block: calc(-1 * var(--sp-1)); margin-inline: calc(-1 * var(--sp-2)); border-radius: var(--radius-s); background: var(--mark); }
.d-mark i { background: var(--grey-500); }

/* 다이얼·sticky: 768 이상 + JS + 움직임 허용일 때만 */
@media (min-width: 768px) {
  .can-dial .steps { padding-top: 0; }
  .can-dial .step-list { padding-top: var(--sp-6); }
  .can-dial .dial {
    position: sticky;
    top: 0;
    z-index: 5;
    display: block;
    width: 100%;
    height: calc(var(--sp-24) + var(--sp-16));
    margin: 0 auto;
    background: var(--bg-page);
  }
  .can-dial .dial-svg {
    display: block;
    width: calc(var(--sp-24) * 2 + var(--sp-16));
    height: auto;
    margin: 0 auto;
  }
  .dial-ticks {
    transform-origin: 120px 128px;
    transform: rotate(var(--rot, 0deg));
    transition: transform calc(var(--dur-4) * 1.6) var(--ease-out);
  }
  .dial-ticks line { stroke: var(--text-4); stroke-width: 1.5; stroke-linecap: round; }
  .dial-ticks line.major { stroke: var(--text-3); stroke-width: 2; }
  .dial-ptr { stroke: var(--brand); stroke-width: 3; stroke-linecap: round; }
  .dial-num {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--sp-3);
    color: var(--text-1);
    font-size: var(--fs-display);
    line-height: 1;
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
  .can-dial .step { min-height: calc(var(--sp-24) * 4); }
  .can-dial .step-list { gap: var(--sp-12); }
}

/* 7. 강연 주제 --------------------------------------------------------- */

.a-grid > .talk + .talk { margin-top: 0; }
.a-card.talk .talk-sub { margin-top: var(--sp-2); }
.a-card .talk-facts { border-top-color: var(--line-1); }
.a-card .talk-facts > div { border-bottom-color: var(--line-1); }
.a-card .talk-facts dd { color: var(--text-1); }
.a-card .talk-facts dt { color: var(--text-3); }

/* 8. 적는 기준 · 후반부 다크 ---------------------------------------- */

.a-late { padding-block: var(--gap-section); }
.late-head { max-width: var(--measure); margin: 0 auto var(--gap-group); text-align: center; }
.late-title { margin-top: 0; font-size: var(--fs-h1); }
.late-text { margin-top: var(--sp-6); color: var(--text-2); }
.a-card--dark { background: var(--bg-subtle); display: flex; flex-direction: column; gap: var(--sp-3); }
.card-label {
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-en);
}
.a-card--dark .card-line {
  color: var(--text-1);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semibold);
}
.card-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px; /* 터치 최소 44(site.css 공통 규칙과 같은 값, 토큰 없음) */
  margin-top: auto;
  color: var(--text-link);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-medium);
}

/* 9. 순환 도식 ---------------------------------------------------------- */

.loop { margin-top: var(--gap-section); text-align: center; }
.loop-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-semibold);
}
.loop-fig { position: relative; max-width: calc(var(--sp-24) * 8); margin: var(--sp-8) auto 0; }
.loop-fig svg { display: block; width: 100%; height: auto; }
.loop-line {
  fill: none;
  stroke: url(#loop-g);
  stroke-width: 1.5;
  stroke-opacity: 0.85;
}
.loop-line:nth-child(odd) { stroke-opacity: 0.45; }
/* 좁은 폭(600 미만): 라벨은 도식 아래 한 줄. 600 이상에서만 곡선 위에 얹는다 */
.loop-labels { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.loop-labels li {
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-m);
  background: var(--bg-subtle);
  color: var(--text-1);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .can-draw .loop-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset calc(var(--dur-4) * 5) var(--ease-out);
    transition-delay: calc(var(--stagger) * var(--i, 0));
  }
  .can-draw .loop.is-in .loop-line { stroke-dashoffset: 0; }
  .can-draw .loop-labels li { opacity: 0; transition: opacity var(--dur-4) var(--ease-standard) calc(var(--dur-4) * 3); }
  .can-draw .loop.is-in .loop-labels li { opacity: 1; }
}

/* 10. 심청 띠: 받는 제안과 연락 ---------------------------------------- */

.about-page .a-contact[data-theme="dark"] {
  background-color: var(--bg-strong);
  background-image: var(--band-grain-dark), var(--grad-1);
  color: var(--text-1);
  padding-block: var(--gap-section);
  text-align: center;
}
.a-contact .a-title { margin-top: 0; }
.contact-sub { max-width: var(--measure); margin: var(--sp-6) auto 0; color: var(--text-1); }
.contact-line { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--sp-3); }
.contact-label { color: var(--text-on-brand-2); font-size: var(--fs-caption); }
.contact-line .mail { color: var(--text-1); font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.contact-fine {
  max-width: var(--measure);
  margin: var(--sp-2) auto 0;
  color: var(--text-on-brand-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}
.a-contact .a-btn--ghost { border-color: var(--text-on-brand-2); } /* 심청 띠 위 테두리 3:1 이상 */
.a-contact .a-btn--ghost:hover { background: transparent; border-color: var(--text-1); }

/* 11. 푸터 */
.about-page .footer[data-theme="dark"] { color: var(--text-3); }
.about-page .footer[data-theme="dark"] .footer-name { color: var(--text-1); }

/* 반응형 --------------------------------------------------------------- */

@media (min-width: 600px) {
  .a-card--row { flex-direction: row; align-items: center; gap: var(--sp-8); }
  .a-card--row .a-dg { width: calc(var(--sp-24) + var(--sp-8)); justify-content: center; }
  .map { aspect-ratio: 2 / 1; }
  .map-arcs--wide { display: block; }
  .map-arcs--narrow { display: none; }
  .node { font-size: var(--fs-small); line-height: var(--lh-small); }
  .node-c { font-size: var(--fs-body); }
  .node-c { top: 78%; }
  .node-a { left: 12%; top: 52%; }
  .node-b { left: 33%; top: 22%; }
  .node-d { left: 67%; top: 22%; }
  .node-e { left: 88%; top: 52%; }
  .loop-labels { display: block; margin-top: 0; }
  .loop-labels li {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }
  .ll-1 { left: 24%; }
  .ll-2 { left: 50%; }
  .ll-3 { left: 76%; }
}

@media (min-width: 1024px) {
  .a-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a-grid--2 > .a-card--row { flex-direction: row; }
}

@media (max-width: 599px) {
  .hero-cta .a-btn { flex: 1 1 calc(var(--sp-24) + var(--sp-8)); }
  .st-table { grid-template-columns: minmax(0, 1fr); }
}

/* 움직임 줄이기: 스크롤 등장 숨김·다이얼·칩 순환은 JS 가 켜지 않으므로 별도 처리 불필요. 전환은 site.css 가 끈다 */
@media (prefers-reduced-motion: reduce) {
  .dial { display: none !important; }
  .step { min-height: 0 !important; }
}