/* 폰트는 HTML head 에서 preconnect + link 로 받는다(_shell/build.js).
   여기서 @import 로 부르면 CSS 를 다 받은 뒤에야 폰트 요청이 시작된다. */

/* ============================================================
   제이피인사이트 · JP INSIGHT (자율제작연구소 사이트의 틀을 옮겨 왔다)
   색은 대표님이 고른 A안(2026-10-15): 명함의 빨강 #D63A26 · 진빨강 #9E1F1F · 검정 #1A1A1A, 흰 바탕.
   연구소와 구분되도록 머리(히어로)를 밝게 두고 왼쪽에 명함의 빨간 막대를 세운다 - 맨 아래 'A안' 블록
   브랜드 아이덴티티 브리프 10번(비주얼)을 그대로 구현한다.
   · 네이비가 주인공(60~70%), 퍼플은 보조(20~30%), 골드는 포인트(5% 이하)
   · 히어로·푸터는 딥네이비, 본문은 화이트/크림 - 샌드위치 구조
   · 크림은 카드·섹션 배경으로만. 기본 배경으로 쓰지 않는다
   · 나눔고딕 단일. Bold/Regular 두 단계로 위계를 만든다
   페이지 HTML에는 style 속성을 쓰지 않는다.
   ============================================================ */

:root {
  --navy:       #1A1A1A;
  --navy-deep:  #1A1A1A;
  --navy-soft:  #333333;
  --purple:     #D63A26;
  --purple-soft:#F4A595;
  --gold:       #D63A26;

  --cream:      #F7F5F4;
  --white:      #FFFFFF;

  --text:       #333333;
  --text-mid:   #555555;
  --text-light: #6B6B6B;   /* 흰 배경 5.13:1 · 크림 4.74:1 (WCAG AA 본문 4.5:1) */
  --divider:    #E8E6E5;
  --line-navy:  #E5E5E5;   /* 격자 실선 - 장식이므로 대비 기준 대상 아님 */
  --line-form:  #757575;   /* 폼 입력칸 테두리 - 흰 배경 3.83:1 · 크림 3.54:1 (WCAG AA UI 3:1) */

  --on-dark:      #FFFFFF;
  --on-dark-mid:  #D6D6D6;
  --on-dark-soft: #A8A8A8;

  --f: "Nanum Gothic", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", sans-serif;

  /* 간격 - 전부 4의 배수. 새 값을 만들지 말고 이 중에서 고른다 */
  --s1:  4px;   /* 붙은 요소 사이 */
  --s2:  8px;   /* 목록 항목 사이 */
  --s3: 12px;   /* 제목과 본문 사이 */
  --s4: 16px;
  --s5: 24px;   /* 카드 안쪽 여백 (기본) */
  --s6: 32px;   /* 카드 안쪽 여백 (큰 것) */
  --s7: 48px;   /* 섹션 머리 아래 */
  --s8: 64px;

  --w:      1120px;
  --w-read: 62ch;
  --r:      3px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--f);
  font-size: 17px;
  line-height: 1.78;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 2px; }
/* 어두운 배경 위에서는 네이비가 안 보이므로 골드로 되돌린다 */
.hero :focus-visible, .cta-band :focus-visible, .site-foot :focus-visible,
.section--deep :focus-visible, .rules :focus-visible { outline-color: var(--gold); }

.skip { position: absolute; left: -9999px; top: 0; background: var(--navy); color: var(--on-dark); padding: 10px 16px; z-index: 100; }
.skip:focus { left: 0; }

/* ---------- 레이아웃 ---------- */
.container { max-width: var(--w); margin: 0 auto; padding: 0 24px; }
.narrow    { max-width: 760px; margin-left: auto; margin-right: auto; }

.section { padding: clamp(64px, 9vw, 108px) 0; }
.section--tint { background: var(--cream); }
.section--deep { background: var(--navy-deep); color: var(--on-dark-mid); }
.section--tight { padding: clamp(48px, 6vw, 72px) 0; }

.section--deep .sec-eyebrow { color: var(--purple-soft); }
/* 색만 바꾼다. 크기를 여기서 정하면 전역 제목 층(h2 33px)을 덮어써
   이 섹션 제목만 본문 크기로 눌린다. */
.section--deep h2, .section--deep h3, .section--deep h4 { color: var(--on-dark); }
.section--deep .sec-lead, .section--deep p { color: var(--on-dark-mid); }

/* ---------- 타이포 ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; color: var(--navy); }
/* 본문은 pretty 로 둔다. 마지막 줄에 낱말 하나만 덩그러니 남는 것을 막는다.
   제목의 balance 는 줄 길이를 고르게 맞추는 쪽이라 역할이 다르다.
   모르는 브라우저는 이 값을 무시하고 기본 줄바꿈을 쓴다. */
p, li, dd, dt, figcaption, .lead, .sec-lead { text-wrap: pretty; }

h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.32; font-weight: 800; }
h2 { font-size: clamp(24px, 3vw, 33px); line-height: 1.38; }
h3 { font-size: clamp(18px, 1.8vw, 21px); line-height: 1.5; }
h4 { font-size: 17px; line-height: 1.55; font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.sec-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--purple); margin: 0 0 13px; }
/* 컨설팅 3단계의 순서 표시.
   브리프 §7 이 피하라고 한 것은 "자간을 벌린 라벨"이므로 자간을 주지 않고
   숫자 자체가 보이게 한다. 순서 정보는 브리프 65행이 써도 좋다고 한 것이다. */
.step-no { font-size: 13px; font-weight: 700; color: var(--purple); margin: 0 0 var(--s2); }

.sec-head { margin-bottom: clamp(30px, 4vw, 48px); max-width: 780px; }
.sec-lead { font-size: 17px; line-height: 1.85; color: var(--text-mid); margin: 16px 0 0; max-width: var(--w-read); }
.note { font-size: 14.5px; line-height: 1.75; color: var(--text-light); }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1;
  padding: 15px 26px; border-radius: var(--r);
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--navy); color: var(--on-dark); border-color: var(--navy); }
.btn--primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line-navy); }
.btn--ghost:hover { border-color: var(--navy); background: var(--cream); }
.btn--onDeep { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
.btn--onDeep:hover { background: #B92F1D; border-color: #B92F1D; }
.section--deep .btn--ghost, .cta-band .btn--ghost { color: var(--on-dark); border-color: rgba(255,255,255,.38); background: transparent; }
.section--deep .btn--ghost:hover, .cta-band .btn--ghost:hover { border-color: var(--on-dark); background: rgba(255,255,255,.08); }
.btn--sm { font-size: 14.5px; padding: 11px 18px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- 헤더 ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--divider); }
/* 간격 20px. 메뉴가 8개라 28px 로는 가로가 모자란다(아래 버거 분기 주석 참고). */
.head-in { display: flex; align-items: center; gap: 20px; height: 70px; }
.brand { display: flex; flex-direction: column; text-decoration: none; flex: none; line-height: 1.2; }
.brand b { font-size: 16px; font-weight: 800; letter-spacing: .06em; color: var(--navy); }
.brand span { font-size: 12px; color: var(--text-light); }

.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { text-decoration: none; color: var(--text-mid); font-size: 16px; font-weight: 700; padding: 9px 10px; border-radius: var(--r); }
.nav a:hover { color: var(--navy); background: var(--cream); }
.nav a[aria-current="page"] { color: var(--navy); }
.head-cta { flex: none; }
/* 로그인은 전환 버튼이 아니다. 신청 버튼과 경쟁하지 않게 글씨만 둔다. */
.head-login {
  flex: none; font-size: 15px; color: var(--text-mid);
  text-decoration: none; padding: 8px 4px; white-space: nowrap;
  transition: color .2s ease;
}
.head-login:hover { color: var(--navy); }

.burger { display: none; margin-left: auto; background: none; border: 1px solid var(--line-navy); border-radius: var(--r); width: 42px; height: 40px; cursor: pointer; align-items: center; justify-content: center; }
.burger span { display: block; width: 18px; height: 2px; background: var(--navy); position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--navy); }
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }

/* 메뉴를 한 줄로 펼치려면 1085px 가 필요하다(브랜드 199 + 메뉴 + 로그인 50 +
   신청 버튼 129 + 간격 20×3 + 좌우 패딩 48, 실측값).
   분기가 1000px 이던 때는 1001~1078px 에서 신청 버튼이 화면 밖으로 밀려나 있었다.
   메뉴가 7개이던 때부터 그랬고, 연구 노트가 붙으면서 구간이 1121px 까지 넓어졌다.
   1120px 에서 접으면 펼친 쪽에 36px 여유가 남는다. */
@media (max-width: 1120px) {
  .burger { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 70px; flex-direction: column; gap: 0; background: var(--white); border-bottom: 1px solid var(--divider); padding: 8px 16px 16px; }
  .nav.open { display: flex; }
  .nav a { padding: 13px 8px; border-bottom: 1px solid var(--divider); }
  /* .nav a 의 회색이 .btn--primary 를 우선순위에서 이겨 버튼 글자가
     남색 바탕에 회색으로 찍혔다. 실측 대비 1.82:1.
     hover 까지 잡아야 한다. 안 잡으면 손가락으로 누른 뒤 크림 바탕에
     남색 글자로 바뀌어 일반 메뉴처럼 보이고, 그 상태로 머무는 브라우저가 있다. */
  .nav a.btn { color: var(--on-dark); border-bottom-color: var(--navy); }
  .nav a.btn:hover { color: var(--on-dark); background: var(--navy-deep); border-color: var(--navy-deep); }
  .nav .head-cta-m { display: block; margin-top: 12px; text-align: center; }
}
/* 좁아져서 로고·버튼·버거가 서로 밀기 시작하는 지점부터 버튼을 버거 안으로 넘긴다 */
@media (max-width: 620px) { .head-cta { display: none; } .head-login { display: none; } }
@media (min-width: 621px) { .nav .head-login-m { display: none; } }
@media (min-width: 621px) { .nav .head-cta-m { display: none; } }
@media (min-width: 921px) { .nav .head-cta-m { display: none; } }

/* ---------- 히어로 : 샌드위치 위쪽 ---------- */
/* 히어로 높이를 페이지마다 같게 맞춘다.
   내용 길이가 달라 300~520px 로 들쭉날쭉했다. 홈(1280px 에서 520px)을 기준으로
   최소 높이를 주고 세로 가운데 정렬한다. 내용이 더 길면 그만큼만 늘어난다. */
.hero {
  background: var(--navy-deep); color: var(--on-dark-mid);
  padding: clamp(64px, 9vw, 112px) 0;
  /* 화면을 더 채운다. 상단 한 화면이 거의 히어로만으로 채워지는 것이
     요즘 방식이고, 큰 글자가 들어갈 자리도 여기서 나온다. */
  min-height: clamp(480px, 53vw, 660px);
  display: flex; align-items: center;
}
.hero > .container { width: 100%; }
/* 본문 h1(46px)과 달리 히어로는 디스플레이 크기로 간다.
   자간을 더 조여야 큰 글자가 흩어지지 않는다. */
.hero h1 {
  color: var(--on-dark);
  font-size: clamp(30px, 5.1vw, 64px);
  line-height: 1.14; letter-spacing: -.04em;
}
.hero .sec-eyebrow { color: var(--purple-soft); }
.hero p.lead { font-size: clamp(17px, 1.8vw, 19px); line-height: 1.85; color: var(--on-dark-mid); max-width: var(--w-read); margin: 20px 0 0; }
.hero .sub { font-size: clamp(16px, 1.6vw, 18px); color: var(--gold); font-weight: 700; margin: 14px 0 0; }
.hero .btn--ghost { color: var(--on-dark); border-color: rgba(255,255,255,.38); }
.hero .btn--ghost:hover { border-color: var(--on-dark); background: rgba(255,255,255,.08); }
.hero .btn--primary { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
.hero .btn--primary:hover { background: #B92F1D; border-color: #B92F1D; }

/* ---------- 사다리 ---------- */
.ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.rung { background: var(--white); padding: calc(var(--s5) - 4px) var(--s5) var(--s5); display: flex; flex-direction: column; text-decoration: none; color: inherit; border-top: 4px solid var(--purple-soft); transition: background-color .15s ease, border-color .15s ease; }
.rung:nth-child(2) { border-top-color: var(--purple); }
.rung:nth-child(3) { border-top-color: var(--navy); }
.rung:hover { background: var(--cream); }
.rung .rung-step { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--text-light); margin-bottom: 10px; }
.rung h3 { margin-bottom: 6px; }
.rung .price { font-size: 16px; font-weight: 700; color: var(--purple); margin-bottom: 12px; }
.rung p { font-size: 15.5px; line-height: 1.8; color: var(--text-mid); margin: 0; }
.rung .go { margin-top: auto; padding-top: 18px; font-size: 15.5px; font-weight: 700; color: var(--navy); }
.rung .go::after { content: " >"; }
@media (max-width: 840px) { .ladder { grid-template-columns: 1fr; } }

/* ---------- 3단계 방법론 ---------- */
.steps {
  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1fr;
  gap: clamp(26px, 3.2vw, 52px); counter-reset: st; justify-content: center;
}
.steps > * { grid-column: span 2; }
/* 5개 → 아랫줄 2개를 가운데로. 4개 → 아랫줄 1개를 가운데로. */
.steps > :nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
.steps > :nth-child(4):last-child { grid-column: 3 / span 2; }
.step {
  counter-increment: st; background: transparent;
  padding: var(--s4) 0 0; border-top: 1px solid var(--line-navy);
}
/* 번호를 크게 세운다. 동그라미 배지보다 번호 자체가 눈금 노릇을 더 잘한다. */
.step::before {
  content: "0" counter(st); display: block;
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 800;
  letter-spacing: -.05em; line-height: 1;
  color: var(--line-navy); margin-bottom: var(--s3);
}
.step { transition: border-color .3s ease; }
.step:hover { border-top-color: var(--purple); }
/* 단계 제목도 상자 안 제목과 같은 층으로. 컨설팅은 카드(20px), 대행은
   h3 기본값(21px)이라 같은 역할인데 크기가 갈려 있었다. */
.step h3 { font-size: clamp(17px, 1.6vw, 20px); margin-bottom: var(--s3); }
.step p { font-size: 15.5px; line-height: 1.85; color: var(--text-mid); }
.step .out { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--divider); font-size: 15.5px; color: var(--text); }
.step .out b { display: block; font-size: 15.5px; color: var(--purple); font-weight: 700; margin-bottom: 5px; }
.steps--5 { grid-template-columns: repeat(5, 1fr); gap: clamp(20px, 2.2vw, 34px); }
.steps--5 > * { grid-column: span 1 !important; }
@media (max-width: 1060px) { .steps--5 { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 840px) {
  .steps, .steps--5 { grid-template-columns: 1fr; gap: var(--s5); }
  .steps > * { grid-column: 1 !important; }
}

/* ---------- 커서에 반응하는 블록 ----------
   상자가 살짝 떠오르며 그림자가 깊어진다.
   같은 가감속 곡선(.2,.7,.3,1)을 홈의 사진 확대에도 쓰고 있어 사이트 전체가
   같은 속도감을 갖는다. 움직임을 줄여 달라고 설정한 사람에게는 멈춘다. */
.card, .price-card, .scope > div, .fit > div {
  transition: transform .35s cubic-bezier(.2,.7,.3,1),
              box-shadow .35s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: no-preference) {
  .card:hover, .price-card:hover, .scope > div:hover, .fit > div:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 0 1px var(--line-navy), 0 14px 34px rgba(15, 26, 61, .10);
  }
}
/* 업종 갤러리는 사진이 주인공이라 사진만 확대한다 */
.ind-img { transition: transform .5s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: no-preference) {
  .ind:hover .ind-img { transform: scale(1.035); }
}
.ind { overflow: hidden; }

/* ---------- 카드 그리드 ---------- */
/* ---------- 카드 격자 ----------
   두 가지를 지킨다.

   ① 모든 칸의 높이가 같다
      grid-auto-rows:1fr 이 줄마다 다른 높이를 가장 큰 줄에 맞춘다.
      전에는 줄마다 내용 길이대로 높이가 달라 윗줄과 아랫줄 상자 크기가 달랐다.

   ② 마지막 줄이 덜 차면 가운데로 모인다
      3열을 6등분 격자 위에 얹고 칸마다 2칸씩 차지하게 했다.
      그러면 반 칸 단위로 밀 수 있어 남은 칸을 가운데로 보낼 수 있다.
      3등분 격자로는 반 칸이 없어 가운데 정렬이 안 된다.
      (수강 안내 5개가 3+2 로 갈리면서 아랫줄이 왼쪽에 붙어 있었다) */
.cards {
  display: grid; gap: clamp(26px, 3.2vw, 52px);
  grid-auto-rows: 1fr;
  justify-content: center;
}
.cards--2 { grid-template-columns: repeat(4, 1fr); }
.cards--2 > * { grid-column: span 2; }
.cards--3 { grid-template-columns: repeat(6, 1fr); }
.cards--3 > * { grid-column: span 2; }
.cards--4 { grid-template-columns: repeat(8, 1fr); }
.cards--4 > * { grid-column: span 2; }

/* 마지막 줄 가운데 모으기
   :nth-child(N):nth-last-child(M) 는 "앞에서 N번째이면서 뒤에서 M번째" 라는 뜻이라
   전체 개수를 알아내는 방법이 된다. 개수별로 첫 칸의 시작 위치만 밀어 준다. */
/* 3열 · 5개 → 아랫줄 2개를 2번 칸부터 */
.cards--3 > :nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
/* 3열 · 4개 → 아랫줄 1개를 3번 칸부터 */
.cards--3 > :nth-child(4):last-child { grid-column: 3 / span 2; }
/* 4열 · 5개 → 아랫줄 1개를 4번 칸부터 */
.cards--4 > :nth-child(5):last-child { grid-column: 4 / span 2; }
/* 4열 · 6개 → 아랫줄 2개를 3번 칸부터 */
.cards--4 > :nth-child(5):nth-last-child(2) { grid-column: 3 / span 2; }
/* 4열 · 7개 → 아랫줄 3개를 2번 칸부터 */
.cards--4 > :nth-child(5):nth-last-child(3) { grid-column: 2 / span 2; }
/* 2열 · 3개 → 아랫줄 1개를 2번 칸부터 */
.cards--2 > :nth-child(3):last-child { grid-column: 2 / span 2; }
.card {
  /* 하이라인 box-shadow 가 따로 걸려 있으므로 안쪽 여백이 반드시 필요하다.
     여백을 0 으로 두면 글자가 상자 벽에 그대로 붙는다. */
  background: var(--white);
  padding: var(--s5);
  border-top: 2px solid var(--navy);
}
/* 상자 안 제목. 밖의 섹션 제목(최대 33px)과 층이 지도록 20px 에서 멈춘다. */
.card h3 { font-size: clamp(17px, 1.6vw, 20px); letter-spacing: -.02em; margin-bottom: var(--s3); }
.card h4 { margin-bottom: var(--s2); }
/* 상자 안 본문. 밖의 본문 17px 보다 한 단계 작다. */
.card p { font-size: 15.5px; line-height: 1.85; color: var(--text-mid); margin: 0; }
/* 단계 표시. 알약 모양 배지 대신 글자만 남긴다.
   보라 #6B5B95 는 흰 배경 7.13:1 · 크림 6.60:1 로 작은 글자에도 충분하다. */
.card .tag {
  display: block; font-size: 13px; font-weight: 800; letter-spacing: .12em;
  color: var(--purple); background: none; padding: 0; margin-bottom: var(--s3);
}
@media (max-width: 980px) {
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
  /* 2열로 접히면 밀어 둔 시작 위치를 모두 풀어야 빈칸이 생기지 않는다 */
  .cards--4 > * { grid-column: span 2 !important; }
}
@media (max-width: 840px) {
  .cards--3 { grid-template-columns: 1fr; }
  .cards--3 > * { grid-column: 1 !important; }
}
@media (max-width: 620px) {
  .cards--2, .cards--4 { grid-template-columns: 1fr; }
  .cards--2 > *, .cards--4 > * { grid-column: 1 !important; }
}

/* ---------- 두 갈래 ---------- */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 44px); }
.fit > div { background: var(--white); padding: var(--s5); border-top: 2px solid var(--navy); }
.fit h3 { font-size: clamp(17px, 1.6vw, 20px); margin-bottom: 16px; }
.fit ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.fit li { font-size: 15.5px; line-height: 1.75; color: var(--text-mid); padding-left: 24px; position: relative; }
.fit--yes li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 9px; height: 5px; border-left: 2px solid var(--purple); border-bottom: 2px solid var(--purple); transform: rotate(-45deg); }
/* 밀어내는 목록이 아니라 길 안내이므로 표시도 막대에서 화살표로 바꾼다 */
.fit--no li::before {
  content: ""; position: absolute; left: 2px; top: 10px;
  width: 6px; height: 6px;
  border-top: 2px solid var(--gold); border-right: 2px solid var(--gold);
  transform: rotate(45deg);
}
@media (max-width: 760px) { .fit { grid-template-columns: 1fr; } }

/* ---------- 길 안내 목록 ----------
   "맞지 않는 경우" 를 상자에 담아 늘어놓으면 문 앞에서 돌려보내는 그림이 된다.
   상황 → 갈 곳 → 이유 세 칸으로 나눠 한 줄씩 놓으면 안내판이 된다.
   상자를 쓰지 않고 가로 실선으로만 줄을 나눈다. */
.routes { list-style: none; margin: 0; padding: 0; }
.route {
  display: grid; grid-template-columns: 1.05fr clamp(140px, 14vw, 176px) 1.1fr;
  gap: clamp(16px, 2.6vw, 40px); align-items: center;
  padding: var(--s5) 0; border-top: 1px solid var(--divider);
}
.route:last-child { border-bottom: 1px solid var(--divider); }
.route-if {
  /* 안내 목록의 상황 문장도 상자 안 제목과 같은 층이다 */
  margin: 0; font-size: clamp(17px, 1.6vw, 20px); font-weight: 700;
  line-height: 1.6; color: var(--navy); word-break: keep-all;
}
/* 갈 곳. 앞의 화살표가 "여기로 가라" 를 만든다. */
.route-to {
  position: relative; justify-self: start;
  padding-left: 34px; white-space: nowrap;
  font-size: clamp(16px, 1.7vw, 20px); font-weight: 800; letter-spacing: -.02em;
  color: var(--purple); text-decoration: none;
}
.route-to::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 22px; height: 1px; background: var(--gold);
}
.route-to::after {
  content: ""; position: absolute; left: 15px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px;
  border-top: 1px solid var(--gold); border-right: 1px solid var(--gold);
  transform: rotate(45deg);
}
.route-to:hover { text-decoration: underline; text-underline-offset: 4px; }
.route-why {
  margin: 0; font-size: 15.5px; line-height: 1.8;
  color: var(--text-light); word-break: keep-all;
}
@media (max-width: 780px) {
  .route { grid-template-columns: 1fr; gap: var(--s2); }
  .route-to { justify-self: start; }
}

/* ---------- 고객이 하는 말 ----------
   체크 목록이 아니라 인용이다. 체크 표시는 "우리가 제공하는 것" 을 뜻하는데
   이 문장들은 고객의 말이라 뜻이 어긋나 있었다.
   따옴표를 크게 붙이고 글자를 세워 목소리가 들리게 한다. */
.quotes { list-style: none; margin: 0; padding: 0; }
.quotes li {
  position: relative;
  padding: var(--s5) 0 var(--s5) clamp(38px, 4vw, 62px);
  border-top: 1px solid var(--divider);
  font-size: clamp(19px, 2.2vw, 27px); font-weight: 700;
  line-height: 1.5; letter-spacing: -.02em;
  color: var(--navy); word-break: keep-all;
}
.quotes li:last-child { border-bottom: 1px solid var(--divider); }
/* 여는 따옴표. 글자가 아니라 도형이라 화면 낭독기는 읽지 않는다. */
.quotes li::before {
  content: "\201C";
  position: absolute; left: 0; top: calc(var(--s5) - .06em);
  font-size: clamp(46px, 5.4vw, 74px); line-height: 1;
  color: var(--gold); opacity: .55;
}
@media (max-width: 620px) { .quotes li { padding-left: 34px; } }

/* ---------- 목록 ---------- */
.checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 13px; }
.checks li { font-size: 16px; line-height: 1.8; color: var(--text-mid); padding-left: 26px; position: relative; }
.checks li::before { content: ""; position: absolute; left: 3px; top: 11px; width: 10px; height: 5px; border-left: 2px solid var(--purple); border-bottom: 2px solid var(--purple); transform: rotate(-45deg); }
.checks b { color: var(--navy); font-weight: 700; }

.scope { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: clamp(26px, 3.2vw, 52px); }
.scope > div { background: var(--white); padding: var(--s5); border-top: 2px solid var(--navy); }
.scope h4 { font-size: clamp(17px, 1.6vw, 20px); color: var(--purple); margin-bottom: var(--s3); }
.scope ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.scope li { font-size: 15.5px; line-height: 1.8; color: var(--text-mid); }
@media (max-width: 900px) { .scope { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .scope { grid-template-columns: 1fr; } }

/* ---------- 업종 ---------- */
.ind-group { margin-bottom: 32px; }
.ind-group:last-child { margin-bottom: 0; }
.ind-group > h4 { font-size: 14.5px; color: var(--purple); margin-bottom: 14px; }
/* ---------- 업종 갤러리 ----------
   격자에 상자를 채우던 것을 가로로 넘기는 줄로 바꿨다.
   테두리를 없애고 사진을 키워 각 업종이 제 얼굴을 갖게 한다.
   모바일에서는 손가락으로 밀면 되므로 오히려 더 자연스럽다.
   scroll-snap 으로 카드가 왼쪽 끝에 딱 맞춰 선다. */
.inds {
  display: grid; grid-auto-flow: column;
  /* minmax(272px, 1fr) 은 항목이 적은 묶음에서 카드가 남는 폭을 나눠 가져
     같은 층인데 폭이 341 / 272 / 524 로 갈렸다. 3장 기준 폭으로 못박는다. */
  grid-auto-columns: max(272px, calc((100% - var(--s5) * 2) / 3));
  gap: var(--s5);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* 이게 없으면 스냅이 왼쪽 여백을 지워 첫 카드가 화면 끝에 붙는다.
     375px 에서 제목 x=24, 카드 x=0 으로 어긋나 있었다. */
  scroll-padding-inline-start: var(--s5);
  /* 컨테이너 여백 밖까지 흘려보내 화면 끝에서 잘리는 느낌을 만든다 */
  margin-inline: calc(var(--s5) * -1); padding-inline: var(--s5);
  padding-bottom: var(--s5);
  scrollbar-width: thin;
}
.ind {
  scroll-snap-align: start; min-width: 0;
  background: transparent; padding: 0;
}
.ind b {
  display: block; font-size: clamp(17px, 1.7vw, 20px); font-weight: 800;
  color: var(--navy); margin: var(--s4) 0 var(--s2); letter-spacing: -.02em;
}
.ind span { font-size: 15.5px; line-height: 1.8; color: var(--text-mid); }

/* ---------- 가격 ---------- */
.prices { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: clamp(28px, 3.4vw, 56px); }
.price-card {
  background: var(--white); padding: var(--s6);
  border-top: 2px solid var(--navy);
  display: flex; flex-direction: column;
}
/* 추천 항목은 배경 대신 윗선 색으로 구분한다 */
.price-card--hi { border-top-color: var(--purple); }
.price-card .pname { font-size: clamp(17px, 1.6vw, 20px); font-weight: 700; color: var(--navy); margin-bottom: 4px; letter-spacing: -.02em; }
.price-card .pnum { font-size: clamp(38px, 4.6vw, 58px); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; color: var(--navy); margin: var(--s3) 0 4px; }
.price-card .punit { font-size: 14.5px; color: var(--text-light); }
.price-card ul { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.price-card li { font-size: 15.5px; line-height: 1.7; color: var(--text-mid); padding-left: 20px; position: relative; }
.price-card li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 8px; height: 4px; border-left: 2px solid var(--purple); border-bottom: 2px solid var(--purple); transform: rotate(-45deg); }
@media (max-width: 720px) { .prices { grid-template-columns: 1fr; } }

.rules {
  /* 가격 칸 사이 간격과 같은 값. 옛 격자에 맞춘 1px 이 그대로 남아 붙어 있었다. */
  margin-top: clamp(28px, 3.4vw, 56px);
  background: var(--navy); color: var(--on-dark-mid);
  padding: var(--s6); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: no-preference) {
  .rules:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(15, 26, 61, .18); }
}
.rules div { font-size: 15.5px; line-height: 1.7; }
.rules b { display: block; font-size: 17px; color: var(--gold); font-weight: 700; margin-bottom: 8px; }
@media (max-width: 720px) { .rules { grid-template-columns: 1fr; gap: 16px; } }
/* 나눌 항목이 아니라 이어지는 설명일 때 - 한 칸으로 두고 글줄 길이만 잡아 준다 */
.rules--one { grid-template-columns: 1fr; }
.rules--one div { max-width: var(--w-read); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--divider); }
.faq details { border-bottom: 1px solid var(--divider); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-size: 17px; font-weight: 700; color: var(--navy); line-height: 1.55; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 27px; width: 10px; height: 10px; border-right: 2px solid var(--purple); border-bottom: 2px solid var(--purple); transform: rotate(45deg); transition: transform .18s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 32px; }
.faq .ans { padding: 0 40px 22px 0; font-size: 16px; line-height: 1.85; color: var(--text-mid); max-width: var(--w-read); }

/* ---------- CTA 밴드 : 샌드위치 아래쪽으로 이어짐 ---------- */
.cta-band { background: var(--navy-deep); color: var(--on-dark-mid); }
.cta-band .container { padding-top: clamp(56px, 7vw, 82px); padding-bottom: clamp(56px, 7vw, 82px); }
.cta-band h2 { color: var(--on-dark); max-width: 22ch; }
.cta-band .sec-eyebrow { color: var(--purple-soft); }
.cta-band p { color: var(--on-dark-mid); max-width: var(--w-read); margin-top: 14px; }
.cta-band .contact-line { font-size: 14.5px; color: var(--on-dark-soft); margin-top: 24px; line-height: 1.95; }
.cta-band a.inline { color: var(--on-dark); }

/* ---------- 커뮤니티 배너 ---------- */
.banner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; background: var(--cream); border-left: 4px solid var(--gold); padding: var(--s5); }
.banner .b-txt { flex: 1 1 320px; }
.banner h3 { font-size: clamp(17px, 1.6vw, 20px); margin-bottom: 6px; }
.banner p { font-size: 15.5px; color: var(--text-mid); margin: 0; }

/* ---------- 신청 폼 ---------- */
/* 한 줄 폭을 조금 넓혀 입력칸이 답답하지 않게 한다.
   항목 사이 간격은 라벨-칸 간격의 네 배로 벌려야 한 항목이 한 덩어리로 읽힌다. */
.form { display: grid; gap: var(--s6); max-width: 680px; }
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field label { font-size: 15.5px; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
.field label .req { font-size: 12px; color: var(--gold); margin-left: 3px; }
/* 손가락으로 누르는 자리다. 높이를 키우고 테두리는 얇게, 대신 안쪽을 넓게. */
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 16.5px; color: var(--text);
  background: var(--white); border: 1px solid var(--line-form);
  border-radius: var(--r); padding: var(--s4) var(--s4); width: 100%;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.75; }
/* 커서가 들어간 칸이 확실히 보이게 한다. 테두리만 바꾸면 눈에 안 띈다. */
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy); outline: none;
  box-shadow: 0 0 0 3px rgba(26,43,92,.14);
}
.field .hint { font-size: 14.5px; color: var(--text-light); }
.radio-row label:focus-within { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: var(--r); }
/* 1fr 은 minmax(auto, 1fr) 이라 칸이 좁아지면 글자가 긴 항목만 넓어진다.
   320px 실측에서 130.9 / 145.3 으로 갈렸다. 0 을 최소값으로 못박아야 넷이 같아진다.
   대신 칸이 글자보다 좁아지면 글자가 테두리를 넘으므로,
   두 칸으로도 모자라는 360px 미만에서는 한 칸씩 세로로 쌓는다. */
/* 항목이 5개라 4열로 놓으면 마지막 줄에 하나만 남아 왼쪽으로 치우친다.
   6열을 깔고 항목마다 두 칸씩 차지하게 해 한 줄에 3개를 놓고,
   마지막 줄에 남는 2개는 한 칸 밀어 가운데로 보낸다.
   .cards--3 이 쓰는 것과 같은 방법이다. */
.radio-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.radio-row > label { grid-column: span 2; }
.radio-row > :nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
/* 두 개씩. 5개면 마지막 하나를 가운데로. */
@media (max-width: 820px) {
  .radio-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .radio-row > :nth-child(4):nth-last-child(2) { grid-column: span 2; }
  .radio-row > :nth-child(5):last-child { grid-column: 2 / span 2; }
}
/* 두 칸으로도 글자가 안 들어가는 폭에서는 하나씩 쌓는다. */
@media (max-width: 359px) {
  .radio-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radio-row > :nth-child(5):last-child { grid-column: span 2; }
}
.radio-row label {
  display: inline-flex; align-items: center; justify-content: flex-start;
  white-space: nowrap; gap: 8px; cursor: pointer;
  border: 1px solid var(--line-navy); border-radius: var(--r);
  padding: var(--s3) var(--s4); font-size: 15.5px; font-weight: 400; color: var(--text-mid);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.radio-row label:hover { border-color: var(--navy); color: var(--navy); }
.radio-row input { accent-color: var(--navy); margin: 0; flex: none; width: auto; }
.radio-row label:has(input:checked) { border-color: var(--navy); background: var(--cream); color: var(--navy); font-weight: 700; }
.agree-note {
  border: 1px solid var(--line-navy); border-radius: var(--r);
  padding: var(--s5); background: var(--cream);
}
.agree-note h3 { font-size: 15.5px; margin-bottom: var(--s3); }
.agree-note .checks { gap: 9px; }
.agree-note .checks li { font-size: 14.5px; line-height: 1.75; padding-left: 24px; }
.agree-note .checks li::before { top: 10px; }
.agree-note .note { margin-top: var(--s4); }
.agree { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; color: var(--text-mid); line-height: 1.7; }
.agree input { accent-color: var(--navy); margin-top: 5px; flex: none; }
.form-msg { font-size: 15.5px; padding: 14px 16px; border-radius: var(--r); display: none; line-height: 1.7; }
.form-msg.ok  { display: block; background: var(--cream); color: var(--navy); border: 1px solid var(--divider); }
.form-msg.err { display: block; background: #FDF3F2; color: #9B2C22; border: 1px solid #F3D3CF; }

/* ---------- 소셜 로그인 버튼 ----------
   세로로 쌓는다. 셋 다 같은 크기여야 어느 하나가 권장처럼 보이지 않는다.
   각 브랜드 색은 제공자 가이드라인을 따른다.
   구글만 흰 바탕이라 테두리가 없으면 배경에 묻힌다. */
/* ---------- 로그인 · 내 정보 ----------
   히어로를 두지 않는다. 버튼 하나 누르고 지나가는 화면이라
   위아래로 길 이유가 없고, 읽을 것을 늘릴수록 방해가 된다.
   수집 항목은 화면에 나열하지 않는다. 동의는 카카오·네이버·구글의
   동의 화면에서 항목별로 받고, 우리 쪽은 처리방침으로 안내한다. */
/* place-items:center 는 세로뿐 아니라 가로도 가운데로 만들어
   컨테이너가 내용 폭으로 줄어든다. 그러면 페이지마다 박스 폭이 달라진다.
   실측에서 /login 327px, /account 293px 로 갈렸다.
   세로만 가운데로 두고 가로는 .auth-box 의 margin auto 에 맡긴다. */
/* 그리드로 두면 트랙이 내용 폭으로 잡혀 페이지마다 박스가 달라진다.
   실측에서 /login 327px, /account 130px 까지 벌어졌다.
   flex 로 세로만 가운데 두고, 컨테이너는 폭을 꽉 채우게 못박는다. */
.auth { display: flex; align-items: center; min-height: 62vh; }
.auth > .container { width: 100%; }
.auth-box { width: 100%; max-width: 360px; margin: 0 auto; text-align: center; }
.auth-box h1 { font-size: clamp(27px, 3.4vw, 36px); letter-spacing: -.03em; }
.auth-sub { margin-top: var(--s3); font-size: 16px; line-height: 1.75; color: var(--text-mid); }
.auth .sso { margin-top: var(--s6); }
/* 오류 문구는 여러 줄이 될 수 있어 왼쪽으로 흘린다. 가운데로 두면 줄마다 끝이 달라 읽기 나쁘다. */
.auth .form-msg { margin-top: var(--s5); text-align: left; }
.auth .btn-row { justify-content: center; margin-top: var(--s5); }
.auth-fine { margin-top: var(--s5); font-size: 14px; line-height: 1.75; color: var(--text-light); }

/* 내 정보의 항목 목록. 이름표는 왼쪽, 값은 오른쪽에 두는 편이 눈으로 훑기 쉽다. */
.auth-facts { margin: var(--s6) 0 0; border-top: 1px solid var(--line-navy); }
.auth-facts > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
  padding: 13px 2px; border-bottom: 1px solid var(--line-navy); text-align: left;
}
.auth-facts dt { flex: none; font-size: 14.5px; color: var(--text-light); }
.auth-facts dd { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--navy); text-align: right; }

.sso { display: grid; gap: 10px; max-width: 380px; }
.sso-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 13px 52px; border-radius: 10px; line-height: 1.4;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  text-decoration: none; border: 1px solid transparent;
  transition: filter .2s ease, transform .2s ease;
}
.sso-btn:hover { filter: brightness(.96); transform: translateY(-1px); }
/* 동그란 자리에 머리글자만. 브랜드 로고 파일을 쓰려면 각 사의 사용 규정을 따라야 한다. */
/* 아이콘은 왼쪽에 고정한다. 흐름에서 빼야 글자가 버튼 한가운데에 온다. */
.sso-mark {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800;
}
.sso-btn--kakao  { background: #FEE500; color: #191600; }
.sso-btn--kakao  .sso-mark { background: rgba(0,0,0,.14); color: #191600; }
.sso-btn--naver  { background: #03C75A; color: #FFFFFF; }
.sso-btn--naver  .sso-mark { background: rgba(255,255,255,.22); color: #FFFFFF; }
.sso-btn--google { background: var(--white); color: #1F1F1F; border-color: var(--line-form); }
.sso-btn--google .sso-mark { background: #F1F3F4; color: #1F1F1F; }
/* 아직 열지 않은 제공자. 지우지 않고 남겨 두는 이유는
   곧 열린다는 것을 알려주는 편이 낫기 때문이다. */
.sso-btn.is-off { filter: grayscale(1); opacity: .5; cursor: not-allowed; }
.sso-btn.is-off:hover { transform: none; filter: grayscale(1); }
.sso-soon {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 400;
}
/* 마지막으로 쓰신 방법을 알려주는 말풍선.
   버튼 위에 얹어 어느 버튼을 가리키는지 꼬리로 분명히 한다. */
.sso-btn.is-last { overflow: visible; }
.sso-last {
  position: absolute; right: 12px; top: -11px;
  background: var(--navy); color: var(--on-dark);
  font-size: 12px; font-weight: 700; letter-spacing: -.01em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  pointer-events: none;
}
.sso-last::after {
  content: ""; position: absolute; right: 14px; bottom: -4px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--navy);
}

.btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* ---------- 표 ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line-navy); }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15.5px; }
th, td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--divider); vertical-align: top; }
th { background: var(--cream); font-weight: 700; font-size: 14.5px; color: var(--navy); }
td { color: var(--text-mid); }
tr:last-child td { border-bottom: 0; }

/* ---------- 대표 프로필 ---------- */
.profile { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.profile .ph { aspect-ratio: 3/4; background: var(--cream); border: 1px solid var(--purple); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.profile .ph span { font-size: 13px; color: var(--text-light); text-align: center; padding: 16px; }
.profile .ph img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.profile .nm { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.profile .ttl { font-size: 15.5px; color: var(--text-light); margin-top: 4px; }
.profile .creds { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.profile .creds li { font-size: 15.5px; color: var(--text-mid); padding-left: 22px; position: relative; }
.profile .creds li::before { content: ""; position: absolute; left: 0; top: 12px; width: 11px; height: 2px; background: var(--purple); }
.profile blockquote { margin: 24px 0 0; padding: 20px 24px; background: var(--cream); border-left: 3px solid var(--gold); font-size: 17px; line-height: 1.8; color: var(--text); }
@media (max-width: 760px) { .profile { grid-template-columns: 1fr; gap: 26px; } .profile .ph { max-width: 240px; } }

/* ---------- 성과 숫자 ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
/* 칸마다 1px 그림자. gap 이 0 이라 이웃한 그림자가 정확히 겹쳐 실선 하나가 된다.
   배경색에 기대지 않으므로 흰 섹션에서도 크림 섹션에서도 똑같이 보인다. */
.stat { background: var(--white); padding: var(--s5); box-shadow: 0 0 0 1px var(--line-navy); }
.stat b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--navy); line-height: 1.2; }
.stat span { display: block; font-size: 15.5px; color: var(--text-mid); margin-top: 6px; }
.stats-cap { font-size: 14.5px; color: var(--text-light); margin-top: 14px; }
@media (max-width: 840px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 협력 파트너 ---------- */
.partners { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--divider); }
.partners li { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--divider); font-size: 16px; }
.partners b { font-weight: 700; color: var(--navy); min-width: 180px; }
.partners span { color: var(--text-light); font-size: 15.5px; }

/* ---------- 푸터 : 샌드위치 아래쪽 ---------- */
.site-foot { background: var(--navy-deep); color: var(--on-dark-soft); padding: clamp(48px, 6vw, 72px) 0; font-size: 15.5px; line-height: 1.9; }
/* 브랜드 칸을 넓게 잡아 이름이 먼저 보이게 한다.
   전에는 1.4 : 1 : 1 이라 세 칸이 비슷해 보여 어디가 먼저인지 알 수 없었다. */
.foot-top {
  display: grid; grid-template-columns: 2.2fr 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: var(--s6);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.foot-top .brand-logo { height: 26px; }
.foot-top > div:first-child .mt-1 {
  font-size: clamp(17px, 1.7vw, 20px); line-height: 1.6;
  color: var(--on-dark); margin-top: var(--s4); max-width: 18em;
}
.site-foot .brand b { color: var(--on-dark); }
.site-foot .brand span { color: var(--on-dark-soft); }
/* 푸터 칸 제목은 짧은 라벨이라 라벨 층으로 내린다 */
/* h4 였는데 위에 h3 이 없어 제목 단계가 h2 에서 h4 로 건너뛰었다.
   스크린리더로 제목만 훑을 때 빠진 단계가 생긴다. 모양은 그대로 두고 단계만 내린다. */
.foot-col h3 { color: var(--on-dark); font-size: 13px; font-weight: 800; letter-spacing: .1em; line-height: 1.5; margin-bottom: var(--s3); }
.foot-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.foot-col a {
  color: var(--on-dark-soft); text-decoration: none;
  transition: color .2s ease, padding-left .2s ease;
}
/* 커서를 얹으면 살짝 밀린다. 사이트 전체의 커서 반응과 결을 맞춘다. */
.foot-col a:hover { color: var(--on-dark); padding-left: 4px; }
.foot-biz { padding-top: 24px; font-size: 14.5px; color: var(--on-dark-soft); line-height: 1.95; }
.foot-biz p { margin: 0; }
.foot-biz a { color: var(--on-dark-mid); text-decoration: underline; text-underline-offset: 3px; }
.foot-biz a:hover { color: var(--on-dark); }
.foot-sign { margin-top: 18px; font-size: 15.5px; font-weight: 700; color: var(--on-dark); letter-spacing: .02em; }
@media (max-width: 840px) { .foot-top { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- 수료증 ----------
   출력이 목적이라 화면 픽셀이 아니라 A4 실치수(210 x 297mm)로 잡는다.
   그래야 브라우저의 "인쇄 > PDF로 저장" 이 여백 없이 한 장에 딱 떨어진다.
   글자는 벡터로 남으므로 확대해도 깨지지 않는다. 이미지로 굽는 것보다 낫다.

   배치는 (사)한국코치협회 인증서를 따랐다. 실측 좌표 기준:
   제목 48pt 가운데 → 부제 20pt → "이름 : 값" 줄 다섯 개(16pt, 가운데) →
   한글 본문 → 영문 본문 → 기관·직인 → 맨 밑 9pt 안내문. 표 선은 없다. */
.cert-page { background: var(--cream); }
.cert-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap;
}
.cert-back { font-size: 15px; color: var(--text-mid); text-decoration: none; }
.cert-back:hover { color: var(--navy); }
.cert-msg { font-size: 16px; color: var(--text-mid); }

.cert-sheet {
  width: 210mm; min-height: 297mm; margin: 0 auto;
  background: var(--white); color: var(--text);
  box-shadow: 0 10px 40px rgba(15, 26, 61, .13);
  padding: 14mm;
}
/* 화면이 A4 보다 좁으면 통째로 줄여 보여준다. 인쇄에는 영향이 없다. */
@media (max-width: 900px) {
  .cert-sheet { transform: scale(.62); transform-origin: top center; margin-bottom: -110mm; }
}
@media (max-width: 560px) {
  .cert-sheet { transform: scale(.42); margin-bottom: -172mm; }
}

/* 안쪽 이중 테두리. 격식은 여기서 나온다. */
.cert-frame {
  position: relative;
  border: 2px solid var(--navy);
  outline: 1px solid var(--navy); outline-offset: 3mm;
  height: 269mm; padding: 22mm 16mm 14mm;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

/* 제목. 자간을 벌리면 마지막 글자 뒤 여백만큼 왼쪽으로 쏠린다. text-indent 로 되돌린다. */
.cert-title {
  font-size: 40pt; font-weight: 800; color: var(--navy);
  letter-spacing: .45em; text-indent: .45em; line-height: 1;
  margin: 0;
}
.cert-title-en {
  font-size: 11pt; color: var(--text-light); letter-spacing: .18em;
  margin: 5mm 0 0;
}

/* "이름 : 값" 을 한 덩어리로 가운데 둔다.
   이름표는 오른쪽 맞춤, 값은 왼쪽 맞춤이라 쌍점(:)이 세로로 한 줄에 선다. */
.cert-rows { width: 100%; margin: 18mm 0 0; }
.cert-rows > div {
  display: flex; align-items: baseline; justify-content: center;
  padding: 3mm 0;
}
.cert-rows dt {
  flex: none; width: 36mm; text-align: right;
  font-size: 11.5pt; color: var(--text-light); letter-spacing: .12em;
}
.cert-rows dt::after { content: ":"; color: var(--text-light); margin: 0 5mm 0 4mm; letter-spacing: 0; }
.cert-rows dd {
  flex: none; width: 82mm; margin: 0; text-align: left;
  font-size: 13.5pt; font-weight: 700; color: var(--navy); word-break: keep-all;
}

.cert-body {
  font-size: 12pt; line-height: 2.05; color: var(--text);
  margin: 16mm 0 0; word-break: keep-all;
}
.cert-body b { color: var(--navy); }
.cert-body-en {
  font-size: 10.5pt; line-height: 1.9; color: var(--text-light);
  margin: 6mm 0 0; letter-spacing: .01em;
}

.cert-issued {
  font-size: 12pt; letter-spacing: .06em; color: var(--text);
  margin: auto 0 0;                       /* 남는 공간을 위로 밀어 아래쪽을 고정한다 */
}

.cert-sign { margin-top: 8mm; }
.cert-sign-org { font-size: 12.5pt; color: var(--text-mid); letter-spacing: .06em; }
/* 직인은 이름 끝 글자에 살짝 겹친다. 우리나라 서식 관례다.
   흐름에서 빼야 글자 자리가 안 밀린다. */
.cert-sign-ceo {
  position: relative; display: inline-block;
  font-size: 17pt; font-weight: 800; color: var(--navy);
  letter-spacing: .1em; margin-top: 3.5mm; padding-right: 12mm;
}
.cert-seal {
  position: absolute; right: -6mm; top: 50%;
  width: 24mm; height: 24mm; transform: translateY(-52%);
  /* multiply 로 두면 종이에 찍힌 것처럼 글자 위에 잉크가 얹힌다. 인쇄에도 그대로 나온다. */
  mix-blend-mode: multiply; opacity: .94;
}

.cert-foot {
  font-size: 8.5pt; color: var(--text-light); letter-spacing: .01em;
  margin: 10mm 0 0;
}

/* 인쇄할 때는 종이 한 장만 남긴다.
   머리글·꼬리글·버튼이 같이 찍히면 증서로 못 쓴다. */
@media print {
  @page { size: A4 portrait; margin: 0; }
  .site-head, .site-foot, .cert-bar, .cert-msg, .skip { display: none !important; }
  .cert-page, .cert-page .container { padding: 0 !important; margin: 0 !important; background: #FFF !important; }
  .cert-sheet {
    width: 210mm; min-height: 297mm; margin: 0; box-shadow: none;
    transform: none !important; page-break-after: avoid;
  }
  body { background: #FFF !important; }
  /* 브라우저가 배경·이미지 색을 빼고 찍지 않게 한다. 직인이 흐려지면 증서가 아니다. */
  .cert-frame, .cert-seal { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- 수료증 목록 · 발급 화면 ---------- */
.cert-mine { margin-top: var(--s6); text-align: left; }
.cert-mine h2 { font-size: 17px; letter-spacing: -.02em; }
.cert-mine-msg { margin-top: var(--s2); font-size: 14.5px; color: var(--text-light); }

.cert-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
  padding: 13px 2px; border-bottom: 1px solid var(--line-navy);
  text-decoration: none; color: var(--text);
  transition: padding-left .2s ease;
}
.cert-item:first-of-type { border-top: 1px solid var(--line-navy); margin-top: var(--s3); }
.cert-item:hover { padding-left: 5px; }
.cert-item-main { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.cert-item-kind {
  flex: none; font-size: 12px; font-weight: 700; color: var(--purple);
  border: 1px solid var(--purple); border-radius: 999px; padding: 1px 7px;
}
.cert-item-main > span { font-size: 15.5px; font-weight: 700; color: var(--navy); }
.cert-item-date { flex: none; font-size: 13.5px; color: var(--text-light); }

.admin-search { display: flex; gap: 8px; }
.admin-search input { flex: 1; }
.admin-search .btn { flex: none; }

.admin-list { display: grid; gap: 8px; margin-top: var(--s4); }
.admin-item {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--white); border: 1px solid var(--line-navy); border-radius: var(--r);
  padding: 12px 14px; font-family: inherit; font-size: 15px; color: var(--text);
  transition: border-color .2s ease, background .2s ease;
}
.admin-item:hover { border-color: var(--navy); }
.admin-item.is-picked { border-color: var(--navy); background: var(--cream); }
.admin-item b { color: var(--navy); font-size: 15.5px; }
.admin-item-meta { font-size: 13.5px; color: var(--text-light); }
/* 최근 발급 줄은 가로로 눕힌다. 보기·회수 단추가 오른쪽에 붙어야 훑기 좋다. */
.admin-item--row {
  flex-direction: row; align-items: center; gap: var(--s4); cursor: default;
  flex-wrap: wrap;
}
.admin-item--row:hover { border-color: var(--line-navy); }
.admin-item-main { flex: 1; min-width: 200px; font-size: 15px; color: var(--navy); }
.admin-item-act {
  flex: none; background: none; border: 0; padding: 4px 2px; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--text-mid); text-decoration: underline;
  text-underline-offset: 3px;
}
.admin-item-act:hover { color: var(--navy); }
.admin-item-act--danger:hover { color: #9B2C22; }
/* 아직 로그인 전이라 계정에 못 붙은 줄. 기록은 살아 있다. */
.admin-item.is-waiting { background: #FAFAFA; }
.admin-item.is-waiting .admin-item-main { color: var(--text-light); }
/* 신청서의 '하고 싶은 말' 은 길어질 수 있다. 줄바꿈을 살리고 색을 낮춘다. */
.admin-item-msg { white-space: pre-wrap; color: var(--text-mid); margin-top: 4px; line-height: 1.6; }
.admin-item { cursor: default; }
.admin-item:hover { border-color: var(--line-navy); }
.admin-list textarea, .form textarea#roster { font-family: inherit; }

/* ---------- 유틸 ---------- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 16px; }
.mt-2 { margin-top: 28px; }
.mt-3 { margin-top: 44px; }
.hr { height: 1px; background: var(--divider); border: 0; margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 필수 항목 표시 - 별표 대신 글자로 (브리프 11-3: 장식용 별표 금지) */
.field label .req {
  font-size: 12px; font-weight: 700; color: var(--gold);
  background: rgba(201,169,97,.14); padding: 2px 7px; border-radius: 2px;
  margin-left: 6px; vertical-align: middle;
}


/* ---------- 브랜드 로고 ----------
   로고는 네이비 워드마크 + 보라 구체 두 색이라 단색으로 칠할 수 없다.
   밝은 배경용(logo-h.png)과 어두운 배경용(logo-h-white.png)을 각각 쓴다. */
.brand { gap: 4px; align-items: flex-start; }
.brand-logo { height: 18px; width: auto; }   /* 여백을 걷어낸 파일이라 이 값이 곧 글자 높이다 */
.brand-ko { font-size: 12px; letter-spacing: .04em; color: var(--text-light); }
.site-foot .brand-ko { color: var(--on-dark-soft); }
@media (max-width: 1000px) { .brand-logo { height: 15px; } }

/* ---------- 현장 사진 ----------
   섹션 사이에 전폭으로 놓아 글만 이어지지 않게 한다. */
.shot { margin: 0; background: var(--navy-deep); }
.shot img {
  display: block; width: 100%; height: auto;
  max-height: 520px; object-fit: cover; object-position: center 42%;
}
@media (max-width: 760px) { .shot img { max-height: 300px; } }

/* ---------- 격자 칸의 실선 ----------
   컨테이너 배경을 틈으로 비추는 대신 칸마다 1px 테두리를 두른다.
   gap:1px 이라 이웃한 테두리가 같은 자리에 겹쳐 한 줄로 보이고,
   항목 수가 열 수의 배수가 아닐 때 생기던 빈 칸 회색 막대가 사라진다. */
.rung, .card, .fit > div, .scope > div, .ind, .price-card, .stat {
  box-shadow: 0 0 0 1px var(--line-navy);
}

/* ---------- 대표 인사말 ----------
   400자가 넘는 글이라 본문 폭을 좁히고 행간을 넉넉히 준다. */
/* ---------- 대표 인사말 ----------
   미션·비전과 같은 나눔펜으로 쓴다. 손으로 적은 편지처럼 보이게 하는 것이 목적이다.

   손글씨체는 본문용이 아니라 크기를 그냥 두면 읽기 힘들다. 세 가지로 보정한다.
     크기  17 -> 24px  나눔펜은 같은 px 에서 글자가 작게 그려진다
     행간  1.9 -> 2.05 획이 가늘어 줄이 붙으면 뭉쳐 보인다
     글줄  62ch -> 34em  손글씨는 글자폭이 고르지 않아 긴 줄이 더 힘들다

   색은 본문색(#333 계열)을 그대로 쓴다. 획이 가는 서체라 색까지 옅게 하면
   대비가 무너진다. */
.letter {
  margin: var(--s7) auto 0; padding-top: var(--s7);
  border-top: 1px solid var(--divider);
  /* 손으로 잡은 줄바꿈이 지켜지려면 가장 긴 줄이 한 줄에 들어가야 한다.
     가장 긴 줄이 31자이므로 23px 기준 약 713px. 여유를 두어 800px. */
  max-width: 800px; text-align: center;
}
/* 좁은 화면에서는 손으로 잡은 줄바꿈이 오히려 방해가 된다.
   한 줄이 두 줄로 접히면서 짧은 토막이 생긴다. 줄바꿈을 감춰 흐르게 둔다. */
@media (max-width: 820px) {
  .letter br { display: none; }
}
.letter p {
  font-family: "Nanum Pen Script", var(--f);
  font-size: clamp(19px, 1.85vw, 23px); line-height: 2.05;
  color: var(--text); margin: 0 0 var(--s5);
  word-break: keep-all;
}
/* 첫 줄은 편지의 인사말이라 조금 더 크게 세운다.
   나눔펜은 굵기가 400 하나뿐이라 굵게 하면 브라우저가 가짜 볼드를 그려
   획을 뭉갠다. 크기와 색으로만 올린다. */
.letter p:first-child {
  font-size: clamp(24px, 2.6vw, 32px); font-weight: 400; color: var(--navy);
}
/* 서명. 실제로 손으로 적은 것처럼 조금 더 크게, 본문 폭 기준 오른쪽 끝에. */
.letter-sign {
  font-size: clamp(19px, 1.9vw, 23px) !important;
  color: var(--navy) !important;
  margin-bottom: 0 !important; text-align: right;
}

/* ---------- 조직도 ----------
   맨 위는 이름 없이 직책만 둔다. 이름·자격은 같은 페이지 대표 프로필에
   이미 있어서 여기 또 넣으면 세 번째 반복이 된다.

   연결선은 세 조각이 만나야 트리로 읽힌다.
     ① 대표 상자에서 내려오는 줄기   .org-row::before
     ② 가로 버스바                    .org-unit::after
     ③ 버스바에서 카드로 내려오는 선  .org-unit::before
   버스바를 "전체 폭의 12.5%~87.5%" 로 잡지 않고 칸마다 자기 몫을 그리게 했다.
   각 조각이 양옆으로 gap 의 절반씩 뻗어 이웃과 맞물린다.
   이러면 칸 수를 바꾸거나 gap 을 바꿔도 좌표를 다시 계산할 필요가 없다. */
.org { display: flex; flex-direction: column; align-items: center; }
.org-top {
  margin: 0;
  background: var(--navy-deep); color: var(--on-dark);
  font-size: 20px; font-weight: 800; letter-spacing: .04em;
  padding: var(--s4) var(--s8); text-align: center;
}

.org-row {
  position: relative; width: 100%; margin-top: var(--s7);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5);
  list-style: none; padding: 0;
}
/* ① 줄기 - 대표 상자 바닥에서 버스바까지.
   간격(--s7 = 48px)의 위 절반이다. 아래 절반은 낙하선이 맡는다.
   top 을 -s5(-24px) 로 잡으면 가로선 아래쪽에 그려져 대표 칸까지 닿지 않는다. */
.org-row::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--s7) * -1);
  width: 1px; height: var(--s5); background: var(--line-navy);
}

.org-unit { position: relative; min-width: 0; }
/* ③ 낙하선 - 버스바에서 카드까지, 간격의 아래 절반 */
.org-unit::before {
  content: ""; position: absolute; left: 50%; bottom: 100%;
  width: 1px; height: var(--s5); background: var(--line-navy);
}
/* ② 버스바 조각 - 양옆으로 gap 의 절반씩. 끝 칸은 바깥으로 안 뻗는다. */
.org-unit::after {
  content: ""; position: absolute; height: 1px; background: var(--line-navy);
  bottom: calc(100% + var(--s5));
  left: calc(var(--s5) / -2); right: calc(var(--s5) / -2);
}
.org-unit:first-child::after { left: 50%; }
.org-unit:last-child::after  { right: 50%; }

/* 선 계산은 li 가, 상자 모양은 .org-card 가 맡는다.
   둘을 갈라 놔야 모바일에서 카드끼리 붙여도 선이 꼬이지 않는다. */
.org-card {
  height: 100%; background: var(--white);
  box-shadow: 0 0 0 1px var(--line-navy);
  padding: var(--s6) var(--s4);
  display: flex; align-items: center; justify-content: center;
}
.org-card h3 { font-size: clamp(17px, 1.6vw, 20px); color: var(--navy); margin: 0; word-break: keep-all; text-align: center; }

/* 2열 중간 단계는 두지 않는다.
   2×2 가 되면 버스바가 두 줄로 생기는데 둘째 줄 버스바는 위로 올라가는
   줄기가 없어 공중에 뜬 선이 된다. 한 줄에 하나로 바로 접는다. */
@media (max-width: 860px) {
  .org-row { grid-template-columns: 1fr; gap: 0; }
  /* 가로선과 낙하선을 걷고, 줄기를 끝까지 내려 첫 칸에 닿게 한다 */
  .org-unit::before, .org-unit::after { display: none; }
  .org-row::before { top: calc(var(--s7) * -1); height: var(--s7); }
  /* gap 이 0 이라 이웃한 1px 그림자가 겹쳐 한 덩어리로 쌓인다 */
  .org-card { padding: var(--s5) var(--s4); }
}

/* ---------- 업종 카드 이미지 ----------
   카드 안쪽 여백(--s5)만큼 음수 마진을 줘 사진만 카드 끝까지 채운다.
   글의 시작선은 다른 카드와 같은 자리에 그대로 남는다. */
/* 상자가 없어졌으므로 음수 마진도 필요 없다. 사진이 곧 카드다. */
.ind-img {
  display: block; width: 100%; margin: 0;
  aspect-ratio: 4 / 3; object-fit: cover;
}

/* ---------- 사진 히어로 ----------
   브리프 §7(대표 선호): "사진을 배경에 깔고 반투명 그라데이션 오버레이를 얹어
   텍스트를 이미지에 통합한다. 사진과 텍스트를 딱 잘라 나누는 하드 분할이나
   구분선은 쓰지 않는다."

   그전에는 딥네이비 히어로 블록 아래에 전폭 사진을 붙여 두 덩어리가 선으로
   갈려 있었다. 이제 사진이 히어로의 배경이 되고 글자가 그 위에 얹힌다.

   그라데이션은 왼쪽(글자 쪽)을 진하게, 오른쪽을 옅게 준다.
   왼쪽 끝은 딥네이비 불투명에 가까워 흰 글씨 대비가 12:1 이상 나오고,
   오른쪽은 사진이 그대로 보인다. */
.hero--photo { position: relative; background-color: var(--navy-deep); overflow: hidden; }
.hero--photo::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: var(--hero-pos, center);
  /* 사진 자체를 조금 어둡게 눌러 글자가 뜨게 한다 */
  filter: brightness(.72) saturate(.95);
}
.hero--photo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(15,26,61,.92) 0%,
      rgba(15,26,61,.84) 34%,
      rgba(15,26,61,.52) 62%,
      rgba(15,26,61,.26) 100%),
    /* 위아래로도 살짝 눌러 헤더·다음 섹션과 자연스럽게 이어지게 한다 */
    linear-gradient(rgba(15,26,61,.55), rgba(15,26,61,0) 30%, rgba(15,26,61,0) 72%, rgba(15,26,61,.5));
}
.hero--photo > .container { position: relative; z-index: 1; }
/* 글줄이 사진 위로 너무 길게 뻗지 않게 한다.
   ch 는 '0' 글자 폭 기준이라 한글에서는 실제 글자 수의 절반밖에 못 담는다.
   한글은 1자가 약 1em 이므로 em 으로 잡는다. */
.hero--photo h1   { max-width: 13em; }
.hero--photo .sub { max-width: 24em; }
.hero--photo .lead { max-width: 26em; }

@media (max-width: 760px) {
  /* 좁은 화면에서는 가로 그라데이션이 의미가 없다. 전체를 고르게 덮는다. */
  .hero--photo::after {
    background:
      linear-gradient(rgba(15,26,61,.88), rgba(15,26,61,.82)),
      linear-gradient(rgba(15,26,61,.4), rgba(15,26,61,0));
  }
  .hero--photo h1, .hero--photo .lead, .hero--photo .sub { max-width: none; }
}

/* ---------- 스크롤에 따라 움직이는 것들 ----------
   자바스크립트를 쓰지 않는다. animation-timeline 은 브라우저가 스크롤 위치를
   시간축으로 삼는 기능이라, 지원하지 않는 브라우저에서는 @supports 블록이
   통째로 무시되고 요소는 그냥 제자리에 보인다. 깨지지 않는다. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* 화면에 들어오면서 살짝 떠오른다 */
    .reveal {
      animation: reveal-rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 30%;
    }
    /* 히어로 사진이 스크롤에 따라 아주 천천히 밀린다.
       배경만 움직이고 글자는 제자리라 깊이가 생긴다. */
    .hero--photo::before {
      animation: hero-drift linear both;
      animation-timeline: scroll();
      animation-range: 0 90vh;
    }
  }
}
@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-drift {
  from { transform: scale(1.06) translateY(0); }
  to   { transform: scale(1.14) translateY(2.5%); }
}

/* 페이지별 히어로 사진. 인라인 style 속성은 CSP 에 막히므로 클래스로 둔다.
   위치 값은 인물이 글자에 가리지 않도록 페이지마다 다르게 잡았다. */
.h-index { --hero-img: url('/assets/img/hero/lecture-wide.webp'); --hero-pos: 62% 42%; }
.h-about { --hero-img: url('/assets/img/hero/lecture-mic.webp'); --hero-pos: 58% 38%; }
.h-agency { --hero-img: url('/assets/img/hero/work-laptop.webp'); --hero-pos: 60% 45%; }
.h-clients { --hero-img: url('/assets/img/hero/lecture-screen.webp'); --hero-pos: 70% 45%; }
.h-consulting { --hero-img: url('/assets/img/hero/lecture-explain.webp'); --hero-pos: 50% 30%; }
.h-courses { --hero-img: url('/assets/img/hero/lecture-slide.webp'); --hero-pos: 68% 40%; }

/* ---------- 미션 · 비전 ----------
   서체를 따로 쓰지 않고 나눔고딕 하나로 푼다.
   캘리그라피(나눔손글씨 붓)는 가볍게 읽혔고, 나눔명조는 사이트 어디에도
   없는 서체라 혼자 떠 보였다. 본문과 같은 서체를 쓰되
   굵기(400 vs 800), 밝기, 자간, 크기로 차이를 만든다.

   문장 안에서 핵심 낱말만 800 + 흰색으로 올리고 나머지는 400 + 76% 로 눌러
   눈이 먼저 닿는 자리를 정한다. 미션의 "스스로" 는 두 번 반복되는데,
   둘 다 굵게 해서 그 반복이 눈에 보이게 했다. */
.creed .container { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(32px, 5vw, 72px); align-items: stretch; }
.creed-item { text-align: center; display: flex; flex-direction: column; }
.creed .creed-label {
  font-family: var(--f);
  font-size: clamp(22px, 2.6vw, 34px); font-weight: 800;
  /* 자간은 글자 크기에 비례해 벌어진다. 12px 때의 .24em 을 그대로 두면
     34px 에서는 8px 이 넘어 낱글자로 흩어진다. */
  letter-spacing: .16em;
  /* letter-spacing 은 마지막 글자 뒤에도 붙는다. 가운데 정렬에서는 그 여분만큼
     글자가 왼쪽으로 밀린다. 같은 값을 text-indent 로 되돌려야 라벨과 괘선과
     문장의 중심축이 실제로 맞는다. 눈으로는 안 보이고 계산해야 잡힌다. */
  text-indent: .16em;
  line-height: 1.1;
  color: var(--gold); margin: 0;
}
/* 라벨과 문장 사이 짧은 금색 괘선.
   문장을 페이지에서 떼어내 "선언" 으로 읽히게 하는 액자 장치다.
   전폭 선을 두 칸에 긋고 가운데 세로선까지 두면 선이 셋이라 어수선해진다. */
.creed .creed-mark {
  width: 44px; height: 1px; border: 0;
  background: var(--gold); opacity: .75;
  margin: var(--s6) auto var(--s6);
}
.creed .creed-line {
  /* 나눔고딕. 손글씨는 대표 인사말 한 곳에만 두고, 미션·비전은 본문 서체로 간다.
     손글씨가 두 곳에 나오면 인사말의 "손으로 적었다" 는 인상이 옅어진다.
     색은 그대로 둔다 - 흰 글자에 핵심어만 금색. */
  font-family: var(--f);
  font-weight: 700;
  /* 칸 폭 464px 에 가장 긴 줄이 약 14em 이다. 42px 이면 590px 이 되어
     의도한 두 줄이 네 줄로 접혔다. 33px 아래여야 두 줄로 선다. */
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.6;
  /* 큰 한글은 기본 자간이 성기다. 조여야 한 덩어리로 읽힌다. */
  letter-spacing: -.03em;
  color: var(--on-dark);
  margin: auto 0;
  word-break: keep-all;
}
/* 핵심어 강조. 굵기는 건드리지 않는다 - 나눔펜은 400 하나뿐이라
   굵히면 브라우저가 가짜 볼드를 그려 펜 획이 뭉갠다. 색으로만 올린다.
   금색 #C9A961 은 딥네이비 위에서 7.55:1 이라 크게 쓰기에 충분하다. */
.creed .creed-line b { font-weight: inherit; color: var(--gold); }

/* 미션과 비전을 가르는 세로선. 위아래로 흐려 딱 잘린 느낌을 없앤다. */
.creed-rule {
  width: 1px; align-self: stretch;
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.22) 22%, rgba(255,255,255,.22) 78%, rgba(255,255,255,0));
}

@media (max-width: 860px) {
  .creed .container { grid-template-columns: 1fr; gap: var(--s6); }
  .creed-rule {
    width: 100%; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.22) 22%, rgba(255,255,255,.22) 78%, rgba(255,255,255,0));
  }
}

/* ---------- 핵심가치 도식 ----------
   대표님 요청: 도형으로 단어만 보여주고 설명은 아래 박스로.
   브리프 41·57행: 넷은 나란한 항목이 아니라 흐름이다.
   고객(실재) → 우리(개방·동행) → 고객(자립) 의 주체 이동을 색으로 나눈다. */
/* ---------- 핵심가치 흐름 ----------
   전에는 원 도식 하나와 설명 카드 넷이 따로 있어 같은 낱말을 두 번 읽어야 했다.
   원 아래에 설명을 바로 붙여 하나로 합치고 카드 상자를 없앴다.
   원은 커지고 상자는 사라져 도형이 주인공이 된다. */
.cflow {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(12px, 2.4vw, 34px); flex-wrap: nowrap;
}
.cf-group { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.cf-who {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; line-height: 1.6;
  color: var(--text-light); margin: 0 0 var(--s5);
  white-space: nowrap;
}
.cf-group--us .cf-who { color: var(--purple); }
.cf-items { display: flex; gap: clamp(16px, 2.5vw, 32px); }
.cf-item { width: clamp(140px, 13.5vw, 200px); min-width: 0; text-align: center; }
.cf-dot {
  display: flex; align-items: center; justify-content: center;
  width: clamp(112px, 11vw, 148px); aspect-ratio: 1; margin: 0 auto var(--s5);
  border-radius: 50%;
  font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -.03em;
  color: var(--on-dark); background: var(--navy);
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.cf-group--us .cf-dot { background: var(--purple); }
.cf-item:hover .cf-dot { transform: translateY(-6px); }
.cf-item p {
  font-size: 15.5px; line-height: 1.8; color: var(--text-mid);
  margin: 0; word-break: keep-all;
}
/* 묶음 사이 화살표. 원 한가운데 높이에 오도록 위에서 밀어 준다. */
.cf-arrow {
  align-self: flex-start; flex: none;
  /* 라벨 21px(13px x 1.6) + 라벨 아래 여백 + 원 반지름 - 화살표 반높이 */
  margin-top: calc(21px + var(--s5) + clamp(112px, 11vw, 148px) / 2 - 4px);
  width: 26px; height: 8px;
  background:
    linear-gradient(var(--gold), var(--gold)) left center / 18px 1px no-repeat;
  position: relative;
}
.cf-arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px;
  border-top: 1px solid var(--gold); border-right: 1px solid var(--gold);
  transform: rotate(45deg);
}

@media (max-width: 900px) {
  .cflow { flex-direction: column; align-items: center; gap: var(--s6); flex-wrap: wrap; }
  /* 세로로 접히면 화살표도 가운데로 와야 한다.
     align-self 가 없으면 왼쪽 끝에 붙어 375px 에서 150px 어긋난다. */
  .cf-arrow { align-self: center; margin: 0; transform: rotate(90deg); }
  .cf-items { flex-wrap: wrap; justify-content: center; }
}

/* ---------- 콘텐츠 소용돌이 ----------
   낱말이 궤도를 돌며 가운데 "콘텐츠" 로 빨려 든다.
   안쪽 궤도일수록 누구나 콘텐츠라 부르는 것(영상·사진·글),
   바깥 궤도일수록 콘텐츠라 잘 안 부르지만 실은 콘텐츠인 것(공간·손길·습관).
   배치 자체가 "이것도 콘텐츠다" 라는 주장이 된다.

   CSP 가 인라인 style 을 막으므로 각도는 .a1~.a27 클래스로 낸다.
   낱말 위치 = rotate(각도) → translate(반지름) → rotate(-각도)
   마지막 역회전이 없으면 글자가 궤도를 따라 드러눕는다. */
.vortex-sec {
  background: var(--navy-deep); color: var(--on-dark-mid);
  overflow: hidden;
}
.vortex-sec h2 { color: var(--on-dark); }
.vortex-sec .sec-lead { color: var(--on-dark-mid); }
.sec-head--center { text-align: center; }
.sec-head--center .sec-lead { margin-left: auto; margin-right: auto; }

.vortex {
  position: relative;
  /* cqw 의 기준을 만든다. inline-size 라 폭만 가둔다. */
  container-type: inline-size;
  width: min(100%, 760px); margin: clamp(24px, 5vw, 56px) auto 0;
  aspect-ratio: 1;
  display: grid; place-items: center;
}
/* 소용돌이 결. 겹친 원뿔 그라데이션으로 도는 느낌을 만든다.
   이미지 파일이 아니라 그린 것이라 어느 화면에서도 흐려지지 않는다. */
.vortex::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(201,169,97,.16), rgba(201,169,97,0) 28%, rgba(201,169,97,.13) 55%, rgba(201,169,97,0) 82%, rgba(201,169,97,.16)),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 46%);
  animation: vortex-turn 44s linear infinite;
}
/* 안쪽으로 빨려 드는 인상을 주는 옅은 테두리 두 겹 */
.vortex::after {
  content: ""; position: absolute; inset: 12%; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 0 0 14vmin rgba(15,26,61,.0) inset;
}

.orbit {
  position: absolute; inset: 0;
  animation: vortex-turn 60s linear infinite;
}
.orbit--2 { animation-duration: 84s; animation-direction: reverse; }
.orbit--3 { animation-duration: 112s; }

.orb {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1));
  white-space: nowrap;
  animation: vortex-turn-back 60s linear infinite;
}
.orbit--2 .orb { animation-duration: 84s; animation-direction: reverse; }
.orbit--3 .orb { animation-duration: 112s; }

/* 반지름과 크기. 바깥으로 갈수록 작고 옅어져 멀어 보인다. */
.orbit--1 .orb { --r: 26cqw; font-size: clamp(15px, 2.1vw, 23px); font-weight: 800; color: #FFFFFF; }
.orbit--2 .orb { --r: 36cqw; font-size: clamp(13px, 1.7vw, 18px); font-weight: 700; color: rgba(255,255,255,.80); }
.orbit--3 .orb { --r: 46cqw; font-size: clamp(11px, 1.35vw, 15px); font-weight: 400; color: rgba(255,255,255,.55); }

.vortex-core {
  position: relative; z-index: 2; margin: 0;
  font-size: clamp(40px, 8vw, 100px); font-weight: 800; line-height: 1;
  letter-spacing: -.04em; color: var(--on-dark);
  text-shadow: 0 0 60px rgba(15,26,61,.9), 0 0 24px rgba(15,26,61,.9);
}

@keyframes vortex-turn { to { transform: rotate(360deg); } }
@keyframes vortex-turn-back {
  from { transform: translate(-50%, -50%) rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1)); }
  to   { transform: translate(-50%, -50%) rotate(var(--a)) translate(var(--r)) rotate(calc(var(--a) * -1 - 360deg)); }
}

/* 움직임을 줄여 달라고 설정한 사람에게는 세우고 보여준다 */
@media (prefers-reduced-motion: reduce) {
  .vortex::before, .orbit, .orb { animation: none; }
}

/* 좁은 화면에서는 원이 작아 글자가 겹친다. 궤도를 풀어 흐르게 둔다. */
@media (max-width: 760px) {
  .vortex { aspect-ratio: auto; display: block; width: 100%; }
  .vortex::before, .vortex::after { display: none; }
  .orbit { position: static; animation: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; }
  .orbit--1 { margin-bottom: 18px; }
  .orbit--2 { margin-bottom: 14px; }
  .orb { position: static; transform: none; animation: none; }
  .vortex-core {
    display: block; text-align: center;
    margin: 8px 0 20px; text-shadow: none;
    font-size: clamp(52px, 17vw, 80px);
  }
  /* 모바일에서는 큰 낱말 → 콘텐츠 → 나머지 순으로 흐르게 순서를 바꾼다 */
  .vortex { display: flex; flex-direction: column; }
  .orbit--1 { order: 1; }
  .vortex-core { order: 2; }
  .orbit--2 { order: 3; }
  .orbit--3 { order: 4; }
}

/* 각도 - 궤도마다 시작 각을 어긋나게 해 방사선으로 줄 서지 않게 했다 */
.a1 { --a: 0.0deg; }
.a2 { --a: 60.0deg; }
.a3 { --a: 120.0deg; }
.a4 { --a: 180.0deg; }
.a5 { --a: 240.0deg; }
.a6 { --a: 300.0deg; }
.a7 { --a: 20.0deg; }
.a8 { --a: 60.0deg; }
.a9 { --a: 100.0deg; }
.a10 { --a: 140.0deg; }
.a11 { --a: 180.0deg; }
.a12 { --a: 220.0deg; }
.a13 { --a: 260.0deg; }
.a14 { --a: 300.0deg; }
.a15 { --a: 340.0deg; }
.a16 { --a: 11.0deg; }
.a17 { --a: 41.0deg; }
.a18 { --a: 71.0deg; }
.a19 { --a: 101.0deg; }
.a20 { --a: 131.0deg; }
.a21 { --a: 161.0deg; }
.a22 { --a: 191.0deg; }
.a23 { --a: 221.0deg; }
.a24 { --a: 251.0deg; }
.a25 { --a: 281.0deg; }
.a26 { --a: 311.0deg; }
.a27 { --a: 341.0deg; }

.define {
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1.75;
  color: var(--navy); font-weight: 700; margin: 0; word-break: keep-all;
}

/* ---------- 대표 소개 ----------
   회사소개 맨 위에 놓이는 블록이라 사진을 키우고 이름을 크게 세운다. */
.lead-figure { display: grid; grid-template-columns: 320px 1fr; gap: var(--s7); align-items: center; }
.lead-photo { aspect-ratio: 3/4; border-radius: 10px; border: 1px solid var(--purple); overflow: hidden; background: var(--cream); }
.lead-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.lead-name { font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.02em; color: var(--navy); margin: 0; }
.lead-role { font-size: 15.5px; color: var(--gold); font-weight: 700; margin: var(--s2) 0 0; }
.lead-oneline { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.8; color: var(--text); margin: var(--s5) 0 0; }
.lead-who .creds { margin-top: var(--s5); }
@media (max-width: 760px) {
  .lead-figure { grid-template-columns: 1fr; gap: var(--s5); }
  .lead-photo { max-width: 260px; }
}

/* ---------- 홈 서비스 3종 ----------
   그전에는 글자만 있는 카드였다. 사진을 얹어 무엇을 파는지 눈으로 먼저 읽히게 한다. */
/* ---------- 세 가지 방법 (전폭 교차 블록) ----------
   카드 세 장을 나란히 놓으면 셋 다 작아지고 사진도 작아진다.
   한 줄에 하나씩, 사진과 글을 좌우로 놓고 줄마다 방향을 뒤집는다.
   시선이 지그재그로 내려가면서 각 항목이 제 크기를 갖는다. */
.ways { display: grid; gap: clamp(48px, 7vw, 96px); }
.way {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 64px); align-items: center;
  text-decoration: none; color: inherit;
}
/* 짝수 줄은 사진을 오른쪽으로 보낸다. 열 비율도 같이 뒤집어야
   사진이 늘 넓은 칸에 앉는다. 순서만 바꾸면 짝수 줄 사진이 좁아진다.

   반드시 데스크톱 안에 가둔다. 미디어쿼리 밖에 두면 우선순위가 높아
   모바일 규칙(1열)을 이기고 02 카드만 2단으로 남는다.
   실제로 375px 에서 01·03 사진은 327px 인데 02 만 141px 이었다. */
@media (min-width: 821px) {
  .way:nth-child(even) { grid-template-columns: 1fr 1.15fr; }
  .way:nth-child(even) .way-img { order: 2; }
}
.way-img {
  display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.way:hover .way-img { transform: scale(1.03); }
.way-txt { min-width: 0; }
/* 큰 숫자. 상자를 없앤 자리를 숫자가 대신 잡아 준다. */
.way-no {
  display: block; font-size: clamp(40px, 5.2vw, 68px); font-weight: 800;
  letter-spacing: -.05em; line-height: 1; color: var(--line-navy);
  margin-bottom: var(--s3);
}
.way-txt h3 { font-size: clamp(24px, 2.8vw, 36px); letter-spacing: -.03em; color: var(--navy); margin: 0; }
.way-price { font-size: 17px; font-weight: 700; color: var(--purple); margin: var(--s2) 0 var(--s4); }
.way-desc { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.85; color: var(--text-mid); margin: 0 0 var(--s5); }
.way .go { font-size: 16px; }

@media (max-width: 820px) {
  .way { grid-template-columns: 1fr; gap: var(--s5); }
  .way-no { margin-bottom: var(--s2); }
}

.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.svc-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--white); box-shadow: 0 0 0 1px var(--line-navy);
  transition: box-shadow .15s ease;
}
.svc-card:hover { box-shadow: 0 0 0 1px var(--purple); }
.svc-img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.svc-body { padding: var(--s5); display: flex; flex-direction: column; flex: 1; }
.svc-body h3 { color: var(--navy); margin-bottom: var(--s1); }
.svc-price { font-size: 16px; font-weight: 700; color: var(--purple); margin: 0 0 var(--s3); }
.svc-body p { font-size: 15.5px; line-height: 1.8; color: var(--text-mid); margin: 0; }
.svc-body .go { margin-top: auto; padding-top: var(--s5); }
@media (max-width: 860px) { .svc { grid-template-columns: 1fr; } }

/* ---------- 업종 이미지 모자이크 ----------
   홈에서는 업종 이름을 나열하지 않는다. 사례 페이지에 상세가 있으므로
   여기서는 "여러 업종과 일한다"만 사진으로 보이고 넘긴다. */
.mosaic { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; }
.mosaic img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }
@media (max-width: 860px) { .mosaic { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 표: 좁은 화면에서 세로로 쌓기 ----------
   모든 표가 "구분 / 내용" 2열이라 머리글을 값 위에 올리면 그대로 읽힌다.
   가로 스크롤(min-width:560px)은 375px 에서 옆으로 밀어야 해서 불편하다. */
@media (max-width: 620px) {
  .tbl-wrap { overflow-x: visible; border: 0; }
  table { min-width: 0; border-top: 1px solid var(--line-navy); }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tbody tr { display: block; padding: var(--s4) 0; border-bottom: 1px solid var(--divider); }
  tbody tr:last-child { border-bottom: 0; }
  tbody td { display: block; border: 0; padding: 0; }
  tbody td:first-child { font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: var(--s1); }
  tbody th { display: block; border: 0; padding: 0 0 var(--s1); font-size: 13px; }
}

/* ---------- 연구 노트 ----------
   목록은 쌓인 줄, 글은 긴 글 읽기용 모양. 둘 다 사이트 토큰만 쓴다. */

/* 골드(#C9A961)는 흰 바탕에서 2.25:1 이라 글자로 쓸 수 없다(본문 AA 4.5:1).
   [소식] 표시에 쓰려고 같은 계열을 어둡게 잡았다 - 흰 4.89:1 · 크림 4.52:1. */
:root { --gold-ink: #9E1F1F; }

.note-list { list-style: none; margin: 0; padding: 0; }
.note-card { border-top: 1px solid var(--divider); }
/* 상자 묶음(.card)이 네이비 2px 로 머리를 여는 것과 같은 신호를 준다. */
.note-card:first-child { border-top: 2px solid var(--navy); }
.note-card > a {
  display: block; text-decoration: none; color: inherit;
  padding: var(--s6) var(--s4) var(--s6) 0;
}
.note-card > a:hover { background: var(--cream); padding-left: var(--s4); }

/* 구분·날짜·글쓴이 줄. 브리프가 피하라고 한 "자간 벌린 라벨"을 쓰지 않는다.
   알약 배지도 쓰지 않는다 - .card .tag 와 같은 방식으로 글자만 남긴다. */
.note-meta, .post-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3);
  font-size: 13.5px; margin: 0 0 var(--s3);
}
.note-tag { font-weight: 800; }
.note-tag--info { color: var(--purple); }      /* 흰 5.91:1 */
.note-tag--news { color: var(--gold-ink); }    /* 흰 4.89:1 */
.note-meta time { color: var(--text-light); }

.note-title { font-size: clamp(20px, 2.2vw, 27px); line-height: 1.4; margin: 0; }
.note-desc {
  font-size: 15.5px; line-height: 1.85; color: var(--text-mid);
  max-width: var(--w-read); margin: var(--s3) 0 0;
}
.note-go { display: inline-block; margin-top: var(--s4); font-size: 15.5px; font-weight: 700; color: var(--navy); }
.note-card > a:hover .note-go { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 글 한 편 ---------- */
/* .hero 는 한 화면을 채우려고 min-height 가 크다. 글 머리는 제목만 얹으면 된다. */
.hero--post { min-height: 0; padding: clamp(44px, 6vw, 72px) 0; display: block; }
/* .hero h1 은 최대 64px 이다. 글 제목은 문장이라 그 크기로는 넉 줄이 된다. */
.hero--post h1 { font-size: clamp(25px, 3.4vw, 40px); line-height: 1.3; max-width: 19em; }
.post-meta { color: var(--on-dark-mid); }
.hero--post .note-tag--info { color: var(--purple-soft); }   /* 딥네이비 5.59:1 */
.hero--post .note-tag--news { color: var(--gold); }          /* 딥네이비 7.55:1 */
.hero--post time, .post-by { color: var(--on-dark-soft); }   /* 딥네이비 6.02:1 */

.prose { max-width: var(--w-read); line-height: 1.9; }
.prose > :first-child { margin-top: 0; }
/* 첫 문단은 질문의 답이다. 한 단계 크게 둬서 먼저 읽히게 한다. */
.prose > p:first-child { font-size: 18.5px; line-height: 1.85; }
.prose p { margin: 0 0 1.15em; }
.prose h2 { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.45; margin: var(--s8) 0 var(--s4); }
.prose h3 { font-size: clamp(17px, 1.7vw, 20px); margin: var(--s6) 0 var(--s3); }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.25em; }
.prose li { margin-bottom: var(--s2); }
.prose li:last-child { margin-bottom: 0; }
.prose a { color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--purple); }
/* 글 끝 가로줄 다음 문단은 회사 기준 문장이다(notes.js SIGN). */
.prose hr { border: 0; border-top: 1px solid var(--divider); margin: var(--s8) 0 var(--s5); }
.prose hr + p { font-size: 14.5px; line-height: 1.8; color: var(--text-light); }

/* 글 안의 이미지. 1080×1350(4:5) 세로 그림이라 본문 폭(639px)을 다 쓰면 800px 가까이 된다.
   520px 에서 멈춰 그림과 앞뒤 글이 한 화면에 같이 보이게 한다. 왼쪽 끝은 본문과 맞춘다.
   그림 바탕이 크림색이라 흰 페이지 위에서 테두리 없이도 경계가 보인다. */
.prose figure { margin: var(--s7) 0; }
.prose figure img { display: block; width: 100%; max-width: 520px; height: auto; }
.prose figcaption { margin-top: var(--s3); max-width: 520px; font-size: 14.5px; line-height: 1.7; color: var(--text-light); }

.post-back { margin: var(--s8) 0 0; font-size: 15.5px; font-weight: 700; }
.post-back a { color: var(--navy); text-decoration: none; }
.post-back a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 620px) {
  .note-card > a { padding: var(--s5) 0; }
  .note-card > a:hover { padding-left: 0; }
  .prose > p:first-child { font-size: 17.5px; }
}

/* ---------- 제이피인사이트 이름표 ----------
   자율제작연구소는 가로 로고 그림을 썼다. 제이피인사이트 로고는 정사각 심볼이라
   심볼 옆에 이름을 글자로 둔다. 글자로 두어야 검색엔진과 화면 낭독기가 이름을 읽는다. */
.brand--jp { flex-direction: row; align-items: center; gap: 10px; }
.brand--jp img { width: 36px; height: 36px; border-radius: 8px; flex: none; }
.brand--jp .brand-txt { display: flex; flex-direction: column; line-height: 1.25; }
.brand--jp b { font-size: 16px; font-weight: 800; color: var(--navy); letter-spacing: 0; }
.brand--jp .brand-txt span { font-size: 11.5px; letter-spacing: .08em; color: var(--text-light); }
.site-foot .brand--jp b { color: var(--on-dark); }
.site-foot .brand--jp .brand-txt span { color: var(--on-dark-soft); }

/* ---------- A안 (2026-10-15) ----------
   자율제작연구소는 딥네이비 머리 → 흰 본문 → 딥네이비 꼬리다. 같은 틀에 색만 바꾸니
   차콜 머리가 딥네이비처럼 보여 두 사이트가 닮았다(대표님 지적).
   머리를 흰 바탕으로 바꾸고 명함의 빨간 막대를 왼쪽에 세워 구조부터 다르게 한다.
   빨강 #D63A26 은 흰 바탕 글자로 4.69:1, 흰 글자를 얹어도 4.69:1 (AA 4.5:1 통과). */
.hero {
  background: var(--white); color: var(--text-mid);
  position: relative; border-bottom: 1px solid var(--divider);
}
.hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: clamp(10px, 1.4vw, 18px); background: var(--purple); }
.hero h1 { color: var(--navy); }
.hero .sec-eyebrow { color: var(--purple); }
.hero p.lead { color: var(--text-mid); }
.hero .btn--primary { background: var(--purple); color: var(--white); border-color: var(--purple); }
.hero .btn--primary:hover { background: #B92F1D; border-color: #B92F1D; }
.hero .btn--ghost { color: var(--navy); border-color: var(--line-form); }
.hero .btn--ghost:hover { border-color: var(--navy); background: var(--cream); }
.hero :focus-visible { outline-color: var(--navy); }

/* 글 머리도 흰 바탕. 구분 표시는 빨강·진빨강, 날짜·글쓴이는 회색 */
.post-meta { color: var(--text-light); }
.hero--post .note-tag--info { color: var(--purple); }
.hero--post .note-tag--news { color: var(--gold-ink); }
.hero--post time, .post-by { color: var(--text-light); }

/* 문의 띠는 빨간 면. 흰 글자 4.69:1 */
.cta-band { background: var(--purple); color: var(--white); }
.cta-band h2, .cta-band p { color: var(--white); }
.cta-band .btn--onDeep { background: var(--white); color: var(--navy); border-color: var(--white); }
.cta-band .btn--onDeep:hover { background: var(--cream); border-color: var(--cream); }
.cta-band .btn--ghost { color: var(--white); border-color: rgba(255,255,255,.7); }
.cta-band :focus-visible { outline-color: var(--white); }

/* 머리 버튼(카카오톡 문의)도 빨강 */
.head-cta, .head-cta-m { background: var(--purple); border-color: var(--purple); }
.head-cta:hover, .head-cta-m:hover { background: #B92F1D; border-color: #B92F1D; }

/* 꼬리는 검정. 빨간 막대 표시만 남긴다 */
.site-foot :focus-visible { outline-color: var(--purple-soft); }

/* 임시 이름표 - 로고를 새로 만들 때까지 명함의 빨간 막대 + 글자로 둔다(대표님: 지금 로고는 쓰지 않음) */
.brand--jp .brand-mark { width: 8px; height: 34px; background: var(--purple); flex: none; }

/* ---------- 글 읽기 (2026-10-15) ----------
   대표님: "SEO와 GEO도 중요하겠지만 가독성이 정말 중요하다."
   나눔고딕 그대로, 문단 사이와 소제목 앞을 넉넉히 띄우고, 첫 문단(질문의 답)은 상자로 먼저 읽히게 한다. */
.prose { font-size: 17.5px; line-height: 1.95; letter-spacing: -0.01em; }
.prose p { margin: 0 0 1.5em; }
.prose > p:first-child {
  background: var(--cream); border-left: 4px solid var(--purple); border-radius: 0;
  padding: 22px 26px; font-size: 18px; line-height: 1.9; margin: 0 0 2em;
}
/* 소제목 아래 짧은 빨간 줄 - 구간이 바뀌는 자리가 한눈에 보인다 */
.prose h2 { margin: 84px 0 22px; scroll-margin-top: 90px; }
.prose h2::after { content: ""; display: block; width: 40px; height: 3px; background: var(--purple); margin-top: 14px; }
.prose h3 { margin: 44px 0 12px; }
.prose li { margin-bottom: 10px; }
.prose ol li::marker { color: var(--purple); font-weight: 800; }
.prose ul li::marker { color: var(--purple); }
.prose b { color: var(--navy); font-weight: 800; }
.prose figure { margin: 60px 0; }

/* 이 글의 순서 */
.toc { border-top: 2px solid var(--navy); border-bottom: 1px solid var(--divider); padding: 18px 0 12px; margin: 0 0 2.6em; }
.toc-head { font-size: 14px; font-weight: 800; color: var(--navy); margin: 0 0 8px !important; }
.toc ol { margin: 0; padding-left: 1.3em; }
.toc li { margin: 4px 0; font-size: 16px; line-height: 1.7; }
.prose .toc a { color: var(--text-mid); font-weight: 400; text-decoration: none; }
.prose .toc a:hover { color: var(--purple); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 620px) {
  .prose { font-size: 17px; }
  .prose > p:first-child { padding: 18px; font-size: 17px; }
  .prose h2 { margin-top: 64px; }
  .prose figure { margin: 44px 0; }
}