/* ─────────────────────────────────────────────────────────────
   광고대행사 원페이지 공용 스타일 — 50개 사이트 공유 1벌
   강조색만 사이트별로 다르므로 색은 전부 변수로 뺐다.
   변수 3개만 덮어쓰면 사이트가 갈린다:
     --accent      면·테두리·아이콘 전용 (밝아도 됨)
     --accent-soft 아주 옅은 배경면
     --accent-ink  글자용 (밝은 크림 바탕에서 대비 확보한 어두운 값)
   ───────────────────────────────────────────────────────────── */

:root{
  /* 바탕/면 — 실측한 크림톤 */
  --bg:#f1f2ea;
  --panel:#fafbf6;
  --panel-2:#f6f7ef;

  /* 글자 — 잉크색 한 계열에서 투명도로 단계 */
  --ink:#14201c;
  --ink-2:rgba(20,32,28,.72);
  /* ⚠ .54 로는 크림 바탕(#f1f2ea)에서 대비가 3.55 라 본문 기준 4.5 에 못 미친다.
     보조 글자라도 읽어야 하는 글자다(안내문·지표 설명·영문 표기). .66 으로 4.7 확보. */
  --ink-3:rgba(20,32,28,.66);

  /* 선 — 잉크의 옅은 알파라 어떤 강조색과도 안 싸운다 */
  --line:rgba(20,32,28,.12);
  --line-2:rgba(20,32,28,.20);

  /* 강조색 기본값(사이트에서 덮어쓰는 전제의 안전한 초록) */
  --accent:#4a7c59;
  --accent-soft:#e6eee6;
  --accent-ink:#2f5b3d;

  /* 모서리/그림자 — 카드 18~28px, 버튼은 알약 */
  --r-s:14px;
  --r-m:18px;
  --r-l:28px;
  --r-pill:999px;
  --shadow:0 16px 44px rgba(20,32,28,.08);
  --shadow-s:0 6px 18px rgba(20,32,28,.06);

  /* 헤더 높이는 앵커 스크롤 보정과 물려 있어 변수로 둔다 */
  --hd-h:68px;
  --tap:44px;               /* 최소 터치 크기 */
  --pad:clamp(16px,4vw,28px);
  --maxw:1120px;
}

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

html{
  -webkit-text-size-adjust:100%;      /* iOS 가로전환 시 글자 확대 방지 */
  scroll-behavior:smooth;
  /* 앵커로 점프해도 sticky 헤더에 제목이 가리지 않게 */
  scroll-padding-top:calc(var(--hd-h) + 12px);
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  /* ⚠ 불러오는 글꼴 이름은 'Pretendard Variable' 이다. 'Pretendard' 만 적으면
     그 이름의 글꼴이 없어 시스템 기본(맑은 고딕)으로 떨어진다 — 실제로 그랬다.
     document.fonts 로 재보니 상태가 unloaded 였다. 쇼핑몰과 같은 차례로 맞춘다. */
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',sans-serif;
  font-variant-numeric:tabular-nums;
  font-feature-settings:'ss01','cv01';
  font-size:16px;
  line-height:1.65;
  letter-spacing:-.01em;
  word-break:keep-all;                /* 한국어는 어절 단위로 끊어야 읽힌다 */
  overflow-wrap:anywhere;
}

img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}

/* 키보드 사용자만 초점 링을 보게 */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
}

/* 스크린리더 전용 (라벨 숨김용) */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── 공통 폭 ───────────────────────────────────────────────── */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ── 헤더 : sticky 68px, 반투명 ────────────────────────────── */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--hd-h);
  display:flex;
  align-items:center;
  /* backdrop-filter 미지원 브라우저에서도 글자가 읽히도록 불투명도를 높게 */
  background:rgba(241,242,234,.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header > .wrap{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
}

/* 외부 369 SNS 주문 사이트 홍보 — 메인과 대행사 50곳에 한 번씩만 노출 */
.network-promo{
  position:relative;
  z-index:3;
  color:#f7f8f2;
  background:
    radial-gradient(circle at 10% 30%,rgba(78,118,255,.30),transparent 25%),
    linear-gradient(110deg,#101b18 0%,#14231f 58%,#1b2925 100%);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.network-promo-in{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:13px;
  padding-bottom:13px;
}
.network-promo-copy{display:flex;align-items:center;gap:18px;min-width:0}
.network-promo-copy span{
  flex:none;
  font-size:11px;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
  color:#91a8ff;
}
.network-promo-copy p{margin:0;font-size:15px;line-height:1.5;font-weight:650;letter-spacing:-.02em}
.network-promo-btn{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 16px;
  color:#101b18;
  background:#f7f8f2;
  border:1px solid rgba(255,255,255,.8);
  border-radius:2px;
  font-size:13px;
  font-weight:850;
  text-decoration:none;
  transition:transform .18s ease,background .18s ease;
}
.network-promo-btn:hover{transform:translateY(-1px);background:#fff}
.network-promo-btn:focus-visible{outline:3px solid #91a8ff;outline-offset:3px}

@media(max-width:700px){
  .network-promo-in{min-height:0;gap:12px;padding-top:12px;padding-bottom:12px}
  .network-promo-copy{display:block}
  .network-promo-copy span{display:block;margin-bottom:5px;font-size:9px}
  .network-promo-copy p{font-size:13px;line-height:1.4}
  .network-promo-btn{min-height:38px;padding:0 12px;font-size:12px;white-space:nowrap}
}
@media(max-width:430px){
  .network-promo-in{align-items:flex-start}
  .network-promo-copy p{font-size:12px}
  .network-promo-btn{padding:0 10px}
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:var(--tap);
  font-weight:800;
  font-size:17px;
  letter-spacing:-.03em;
  flex:0 0 auto;
}
.brand-mark{
  width:32px;height:32px;
  flex:0 0 32px;
  display:grid;place-items:center;
  border-radius:10px;
  background:var(--accent);           /* 면이라 --accent 그대로 */
  color:#fff;
  font-size:14px;
  font-weight:900;
  letter-spacing:-.04em;
}

/* 데스크톱 메뉴 — 모바일에서는 숨기고 .anchor-nav 가 대신한다 */
.gnb{display:none}
.gnb a{
  display:inline-flex;
  align-items:center;
  min-height:var(--tap);
  padding:0 12px;
  border-radius:var(--r-pill);
  font-size:15px;
  font-weight:600;
  color:var(--ink-2);
}
.gnb a:hover,
.gnb a[aria-current="true"]{
  color:var(--accent-ink);            /* 글자색은 반드시 ink 계열 */
  background:var(--accent-soft);
}

.hd-cta{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--tap);
  padding:0 16px;
  border-radius:var(--r-pill);
  background:var(--accent);
  color:#fff;
  font-weight:800;
  font-size:15px;
  white-space:nowrap;
  box-shadow:var(--shadow-s);
}
.hd-cta:hover{filter:brightness(.94)}

/* ── 모바일 앵커 띠 : 가로 스크롤은 이 상자 안에서만 ───────── */
.anchor-nav{
  position:sticky;
  top:var(--hd-h);
  z-index:40;
  background:rgba(241,242,234,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.anchor-nav::-webkit-scrollbar{display:none}
.anchor-nav ul{
  display:flex;
  gap:6px;
  width:max-content;                  /* 줄바꿈 대신 가로로 밀리게 */
  padding:8px var(--pad);
}
.anchor-nav a{
  display:inline-flex;
  align-items:center;
  min-height:var(--tap);
  padding:0 14px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:var(--panel);
  font-size:14px;
  font-weight:700;
  color:var(--ink-2);
  white-space:nowrap;
  scroll-snap-align:start;
}
.anchor-nav a[aria-current="true"]{
  color:var(--accent-ink);
  border-color:var(--accent);
  background:var(--accent-soft);
}

/* ── 히어로 ────────────────────────────────────────────────── */
.hero{
  padding:clamp(40px,9vw,88px) 0 clamp(32px,7vw,64px);
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  border-radius:var(--r-pill);
  background:var(--accent-soft);
  border:1px solid var(--accent);
  color:var(--accent-ink);            /* 옅은 면 위 글자 → ink */
  font-size:13px;
  font-weight:800;
  letter-spacing:-.02em;
}
.hero-h{
  margin-top:18px;
  /* ⚠ 76px 로 두었더니 글자 칸(587px)보다 제목이 길어 4줄로 넘쳤다.
       히어로 제목은 '앞줄|뒷줄' 두 줄로 끊어 쓰는 전제이므로 한 줄이 안 넘겨야 한다.
       50곳 중 가장 긴 줄이 13자다 — 그 줄이 한 줄에 들어가는 크기로 잡는다.
     ⚠ 줄간격 .98 은 한글에 너무 좁아 윗줄과 아랫줄이 붙어 보였다. */
  /* 칸 너비(100cqw)를 긴 줄의 글자 수로 나눠 그 줄이 접히지 않는 크기를 구한다.
     0.96 은 한글 한 글자가 차지하는 폭(자간 -.055em 을 뺀 실측치)이다. */
  font-size:clamp(26px, calc(100cqw / (var(--hero-ch, 12) * 0.96)), 58px);
  font-weight:900;
  letter-spacing:-.055em;
  line-height:1.14;
}
.hero-h em{
  font-style:normal;
  color:var(--accent-ink);            /* 제목 안 강조도 글자라 ink */
}
.hero-lead{
  margin-top:18px;
  max-width:44ch;                     /* 한 줄이 너무 길면 못 읽는다 */
  font-size:clamp(16px,2.1vw,19px);
  color:var(--ink-2);
}

.hero-cta{
  margin-top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* 지표 — 모바일 2열, 넓어지면 4열 */
.hero-stats{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.stat{
  padding:16px;
  border-radius:var(--r-m);
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--shadow-s);
}
.stat b{
  display:block;
  font-size:clamp(22px,4.4vw,30px);
  font-weight:900;
  letter-spacing:-.045em;
  line-height:1.1;
  color:var(--accent-ink);
}
.stat span{
  display:block;
  margin-top:4px;
  font-size:13px;
  color:var(--ink-3);
}

/* ── 신뢰 띠 : 로고/문구 가로 나열, 넘치면 이 상자만 스크롤 ── */
.strip{
  border-block:1px solid var(--line);
  background:var(--panel-2);
  padding:14px 0;
}
.strip-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  overflow:visible;
  padding-inline:var(--pad);
}
.strip-list li{
  flex:0 0 auto;
  padding:8px 14px;
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:var(--panel);
  font-size:14px;
  font-weight:700;
  color:var(--ink-2);
  white-space:nowrap;
}

/* ── 섹션 ──────────────────────────────────────────────────── */
.sec{padding:clamp(48px,9vw,96px) 0}
.sec-alt{background:var(--panel-2)}   /* 배경만 바꿔 리듬을 준다 */

.sec-head{
  max-width:60ch;
  margin-bottom:clamp(24px,4vw,44px);
}
.sec-eyebrow{
  display:block;
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;               /* 짧은 라벨은 자간을 벌려야 읽힌다 */
  text-transform:uppercase;
  color:var(--accent-ink);
}
.sec-title{
  margin-top:10px;
  font-size:clamp(26px,4.6vw,44px);
  font-weight:900;
  letter-spacing:-.05em;
  line-height:1.1;
}
.sec-lead{
  margin-top:14px;
  font-size:clamp(15px,1.9vw,17px);
  color:var(--ink-2);
}

/* ── 카드 ──────────────────────────────────────────────────── */
.cards{
  display:grid;
  grid-template-columns:1fr;          /* 모바일 1열이 기본 */
  gap:14px;
}
.card{
  position:relative;
  padding:clamp(20px,3.4vw,28px);
  border-radius:var(--r-l);
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.card-n{
  display:inline-grid;
  place-items:center;
  width:36px;height:36px;
  border-radius:12px;
  background:var(--accent-soft);
  border:1px solid var(--accent);
  color:var(--accent-ink);
  font-size:14px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}
.card-label{
  display:inline-block;
  margin-top:14px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--ink-3);
}
.card-title{
  margin-top:6px;
  font-size:clamp(18px,2.6vw,21px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.28;
}
.card-desc{
  margin-top:10px;
  font-size:15px;
  color:var(--ink-2);
}
.card-items{
  margin-top:16px;
  padding-top:14px;
  border-top:1px dashed var(--line-2);
  display:grid;
  gap:8px;
}
.card-items li{
  position:relative;
  padding-left:20px;
  font-size:14px;
  color:var(--ink-2);
}
/* 불릿은 아이콘이라 --accent 그대로 써도 대비 문제가 없다 */
.card-items li::before{
  content:"";
  position:absolute;
  left:2px;top:.62em;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--accent);
}

/* ── 좌우 2단 행 : 번호+라벨 / 내용 ────────────────────────── */
.rows{
  display:grid;
  gap:12px;
}
.row{
  display:grid;
  grid-template-columns:1fr;          /* 모바일은 위아래로 쌓는다 */
  gap:10px;
  padding:20px;
  border-radius:var(--r-m);
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--shadow-s);
}
.row > :first-child{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-weight:900;
  letter-spacing:-.035em;
  color:var(--accent-ink);
  font-size:16px;
}
.row > :last-child{
  font-size:15px;
  color:var(--ink-2);
}

/* ── 채널 그리드 ───────────────────────────────────────────── */
.chan-grid{
  display:grid;
  /* ⚠ 150px 로 두었더니 1120px 화면에서 6열이 돼 카드가 짜부라졌다.
       채널 카드에는 설명 두 문장 + 항목 3개 + 문의 링크가 들어간다 —
       한 줄에 두세 낱말만 들어가면 읽을 수가 없다. */
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:12px;
}
.chan{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px;
  border-radius:var(--r-m);
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--shadow-s);
}
.chan-cat{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--ink-3);
}
.chan-badge{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:var(--r-pill);
  background:var(--accent-soft);
  border:1px solid var(--accent);
  color:var(--accent-ink);
  font-size:12px;
  font-weight:800;
}
.chan-name{
  font-size:16px;
  font-weight:800;
  letter-spacing:-.03em;
}
.chan-sub{
  font-size:13px;
  color:var(--ink-3);
  /* ⚠ 여기에 margin-top:auto 를 두면 안 된다. 부제 아래에 설명·항목·문의 링크가
       더 있어서, 부제가 통째로 아래로 밀리며 카드마다 제목 높이가 제각각이 됐다.
       바닥 정렬이 필요한 것은 맨 마지막 요소(.chan-cta)다. */
  margin-top:2px;
}

/* ── 진행 단계 ─────────────────────────────────────────────── */
.steps{
  display:grid;
  gap:12px;
  counter-reset:step;
}
.step{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:14px;
  padding:18px;
  border-radius:var(--r-m);
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--shadow-s);
}
.step-n{
  display:grid;
  place-items:center;
  width:38px;height:38px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;                         /* 진한 면 위이므로 흰 글자 */
  font-size:15px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
}
.step h3{
  font-size:17px;
  font-weight:800;
  letter-spacing:-.035em;
}
.step p{
  margin-top:6px;
  font-size:14px;
  color:var(--ink-2);
}

/* ── 주차별 계획 ───────────────────────────────────────────── */
.weeks{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.week{
  padding:18px;
  border-radius:var(--r-m);
  background:var(--panel);
  border:1px solid var(--line);
  border-left:4px solid var(--accent); /* 왼쪽 선만 강조색(면 용도) */
  box-shadow:var(--shadow-s);
}
.week b{
  display:block;
  font-size:13px;
  font-weight:900;
  letter-spacing:.05em;
  color:var(--accent-ink);
}
.week h3{
  margin-top:6px;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.035em;
}
.week p{
  margin-top:6px;
  font-size:14px;
  color:var(--ink-2);
}

/* ── FAQ : details/summary ─────────────────────────────────── */
.faq{display:grid;gap:10px}
.faq details{
  border-radius:var(--r-m);
  background:var(--panel);
  border:1px solid var(--line);
  overflow:hidden;
}
.faq details[open]{border-color:var(--line-2)}
.faq summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:var(--tap);
  padding:14px 18px;
  cursor:pointer;
  list-style:none;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.03em;
}
/* 기본 삼각형 제거 (사파리 포함) */
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
/* 직접 그린 +/− 표시 — 아이콘이라 --accent 사용 */
.faq summary::after{
  content:"";
  flex:0 0 auto;
  width:12px;height:12px;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .18s ease;
}
.faq details[open] summary::after{
  transform:rotate(-135deg) translateY(-3px);
}
.faq details > *:not(summary){
  padding:0 18px 18px;
  font-size:15px;
  color:var(--ink-2);
}

/* ── 폼 ────────────────────────────────────────────────────── */
.form-box{
  padding:clamp(20px,4vw,32px);
  border-radius:var(--r-l);
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:grid;
  gap:14px;
}
.field{display:grid;gap:6px}
.field > label{
  font-size:14px;
  font-weight:800;
  color:var(--ink-2);
}
.field input,
.field select,
.field textarea{
  width:100%;
  min-height:48px;                    /* 44px 이상 */
  padding:12px 14px;
  border-radius:var(--r-s);
  border:1px solid var(--line-2);
  background:#fff;
  font-size:16px;                     /* 16px 미만이면 iOS가 화면을 확대한다 */
  line-height:1.5;
  appearance:none;
}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,
.field textarea::placeholder{color:var(--ink-3)}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
  outline:none;
}
.field small{font-size:13px;color:var(--ink-3)}

.f-agree{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-height:var(--tap);
  padding:10px 0;
  font-size:14px;
  color:var(--ink-2);
  cursor:pointer;
}
.f-agree input[type="checkbox"]{
  flex:0 0 auto;
  width:22px;height:22px;             /* 기본 체크박스는 너무 작다 */
  margin:0;
  accent-color:var(--accent);
}
.f-agree a{
  color:var(--accent-ink);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* 버튼 — 모바일에서는 폭 100%가 누르기 쉽다 */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:52px;
  padding:0 24px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.02em;
  cursor:pointer;
  text-align:center;
  transition:transform .15s ease,filter .15s ease,background-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-solid{
  background:var(--accent);
  color:#fff;
  box-shadow:var(--shadow-s);
}
.btn-solid:hover{filter:brightness(.94)}
.btn-line{
  background:transparent;
  border-color:var(--line-2);
  color:var(--ink);
}
.btn-line:hover{
  border-color:var(--accent);
  color:var(--accent-ink);
  background:var(--accent-soft);
}
.form-box .btn{width:100%}

/* ── 푸터 ──────────────────────────────────────────────────── */
.ft{
  border-top:1px solid var(--line);
  background:var(--panel-2);
  padding:clamp(32px,6vw,56px) 0 40px;
}
.ft > .wrap{
  display:grid;
  gap:22px;
}
.ft-info{
  font-size:13px;
  line-height:1.9;
  color:var(--ink-3);
}
.ft-info strong{
  display:block;
  margin-bottom:8px;
  font-size:16px;
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--ink);
}
.ft-nav{
  display:flex;
  flex-wrap:wrap;
  gap:4px 6px;
}
.ft-nav a{
  display:inline-flex;
  align-items:center;
  min-height:var(--tap);
  padding:0 10px;
  border-radius:var(--r-pill);
  font-size:14px;
  font-weight:700;
  color:var(--ink-2);
}
.ft-nav a:hover{color:var(--accent-ink);background:var(--accent-soft)}

/* ── 넓은 것 담는 상자 (표 등) ─────────────────────────────── */
/* 표는 페이지가 아니라 이 상자만 가로로 밀려야 한다 */
.scroll-x{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--r-m);
  border:1px solid var(--line);
  background:var(--panel);
}
.scroll-x table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:14px;
}
.scroll-x th,
.scroll-x td{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  text-align:left;
  white-space:nowrap;
}
.scroll-x th{
  background:var(--panel-2);
  font-weight:800;
  color:var(--ink-2);
}
.scroll-x tr:last-child td{border-bottom:0}

/* ── 480px+ : 버튼을 가로로, 폼을 2열로 ───────────────────── */
@media (min-width:480px){
  .hero-cta .btn{width:auto}
  .form-box{grid-template-columns:1fr 1fr}
  .form-box > .field:last-of-type,
  .form-box > .f-agree,
  .form-box > .btn{grid-column:1 / -1}
  .form-box .btn{width:auto;justify-self:start}
}

/* ── 720px+ : 2열 카드, 좌우 2단 행 ───────────────────────── */
@media (min-width:720px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .weeks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* 여기서부터 번호+라벨을 왼쪽에 고정 */
  .row{
    grid-template-columns:minmax(180px,26%) 1fr;
    gap:24px;
    align-items:start;
    padding:24px 26px;
  }
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft > .wrap{grid-template-columns:1.4fr 1fr;align-items:start}
  .ft-nav{justify-content:flex-end}
}

/* ── 960px+ : 데스크톱 메뉴 노출, 앵커 띠 숨김 ────────────── */
@media (min-width:960px){
  .gnb{
    display:flex;
    align-items:center;
    gap:2px;
    margin-left:14px;
  }
  .anchor-nav{display:none}           /* 상단 메뉴와 중복되므로 */
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .weeks{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hero-lead{font-size:19px}
  .sec-head{margin-bottom:52px}
}

/* ── 움직임 최소화 설정 존중 ──────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── 인쇄 : 배경/그림자 제거 ──────────────────────────────── */
@media print{
  .site-header,.anchor-nav,.hd-cta{position:static;display:none}
  .card,.row,.step,.week,.form-box{box-shadow:none;border-color:#ccc}
  body{background:#fff}
}
/* 업종별 법정 고지 — 의료·부동산·학원처럼 광고에 표시사항이 법으로 정해진 분야에만 뜬다.
   ⚠ 눈에 띄되 광고 문구처럼 보이면 안 된다. 안내문 톤을 유지한다. */
.notice-law{border-left-color:var(--accent);background:var(--accent-soft)}
.notice-law b{color:var(--accent-ink)}
.ft-owner{font-weight:600}
.ft-owner b{color:var(--ink)}

/* ── 좁은 화면 헤더 ────────────────────────────────────────────
   ⚠ 헤더는 [로고][빈칸][견적버튼] 가로 배치다. flex 자식은 기본이 min-width:auto 라
     내용보다 작아지지 않는다. 상호가 긴 곳(성큼웍스·여울웍스·홈그라운드 등 7곳)에서
     견적 버튼이 화면 밖으로 59px 밀려나 페이지 전체가 가로로 흔들렸다.
     min-width:0 을 줘야 줄어들고, 영문 표기는 좁을 때 접는다. */
@media (max-width:600px){
  .hd-in{gap:10px}
  .brand{min-width:0;flex:1 1 auto}
  .brand-text{min-width:0;overflow:visible}
  .brand-text b{display:block;overflow:visible;text-overflow:clip;white-space:nowrap;font-size:14px;line-height:1.08}
  .brand-text i{display:none}
  .brand--bespoke{gap:9px}
  .brand-wordmark--compact b{font-size:11.5px;letter-spacing:-.085em}
  .brand-wordmark--wide b{font-size:12px;letter-spacing:.035em}
  .brand-wordmark--underline b{font-size:13px;letter-spacing:.015em}
  .brand-wordmark--slash b,.brand-wordmark--dot b{font-size:13px;gap:4px}
  .brand-wordmark--duo b,.brand-wordmark--duo-reverse b,.brand-wordmark--accent-tail b{font-size:13px}
  .hd-cta{flex:0 0 auto;padding:0 14px;font-size:13.5px;white-space:nowrap}
}
@media (max-width:360px){
  /* 아주 좁은 기기에서는 버튼 글자를 줄인다 — 앵커 띠에도 '상담 신청'이 있다 */
  .hd-cta{font-size:13px;padding:0 11px}
  .brand--bespoke{gap:7px}
  .brand--bespoke .brand-symbol{width:34px;height:34px}
  .brand-wordmark b{font-size:12.5px}
  .brand-wordmark--compact b{font-size:10.5px}
  .brand-wordmark--wide b{font-size:11px}
}

/* ── 로고 글자 ────────────────────────────────────────────────
   ⚠ 상호(b)와 영문 표기(i)는 두 줄로 쌓여야 한다. 규칙이 없으면 둘 다 인라인이라
     "채움랩chaeum lab" 처럼 한 줄에 붙어 나온다(검사기에서 48곳 적발).
   ⚠ 줄간격을 너무 좁히면 글자 아랫부분이 다음 줄에 닿는다. 1.2 아래로 내리지 말 것. */
.brand-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
/* ⚠ 한글 잉크 높이는 글자 크기의 약 1.43배다(Pretendard 기준).
     줄간격을 그보다 좁게 잡으면 글자 아랫부분이 줄 상자 밖으로 나와
     아랫줄에 닿는다 — 1.22 로 뒀더니 틈이 -0.3px 였다. */
.brand-text b{
  font-size:17px;
  line-height:1.5;                    /* 25.5px > 잉크 24.3px */
  font-weight:800;
  letter-spacing:-.035em;
  color:var(--ink);
  white-space:nowrap;
}
.brand-text i{
  font-style:normal;
  font-size:11.5px;
  line-height:1.5;                    /* 17.2px > 잉크 16.4px */
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3,#6b756f);
  margin-top:2px;
  white-space:nowrap;
}
.brand svg{flex:0 0 auto;display:block}

/* ── 전용 브랜드 로고 1차분 ───────────────────────────────────────
   단순히 심벌만 바꾸지 않고 이름 조판까지 브랜드마다 다르게 둔다.
   이 규칙은 헤더·푸터·비교 보드에서 공용으로 쓴다. */
.brand--bespoke{gap:12px}
.brand-symbol{display:block;overflow:visible}
.brand-wordmark b{font-family:Pretendard,"Arial Black",Arial,sans-serif;font-size:17px;line-height:1.06;color:var(--ink);white-space:nowrap}
.brand-wordmark b span{display:inline}
.brand-wordmark b em{display:inline-block;font-style:normal}
.brand-wordmark i{font-family:Pretendard,Arial,sans-serif;font-size:9px;line-height:1.25;margin-top:4px;letter-spacing:.08em;color:var(--ink-3);white-space:nowrap}

.brand-wordmark--truepixel b{font-weight:920;letter-spacing:-.075em}
.brand-wordmark--truepixel b span{color:var(--accent);margin-left:.04em}
.brand-wordmark--truepixel i{letter-spacing:.11em}

.brand-wordmark--measurebase b{display:flex;align-items:baseline;font-weight:860;letter-spacing:-.055em}
.brand-wordmark--measurebase b span+span{font-weight:420;letter-spacing:-.07em}
.brand-wordmark--measurebase i{letter-spacing:.15em}

.brand-wordmark--splitlab b{display:flex;align-items:center;gap:5px;font-weight:900;letter-spacing:-.065em}
.brand-wordmark--splitlab b em{width:2px;height:16px;background:var(--accent);transform:skewX(-14deg)}
.brand-wordmark--splitlab b span:last-child{font-weight:480;letter-spacing:-.08em}

.brand-wordmark--pulsemedia b{font-weight:900;letter-spacing:.015em}
.brand-wordmark--pulsemedia b span{font-size:.72em;font-weight:650;letter-spacing:.12em;margin-left:.5em;color:var(--accent-ink)}
.brand-wordmark--pulsemedia i{letter-spacing:.14em}

.brand-wordmark--baseline b{position:relative;width:max-content;font-weight:840;letter-spacing:.09em;padding-bottom:3px}
.brand-wordmark--baseline b::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent)}
.brand-wordmark--baseline i{letter-spacing:.17em}

.brand-wordmark--duo b{font-weight:900;letter-spacing:-.065em}
.brand-wordmark--duo b span{font-weight:480;margin-left:.06em;color:var(--accent-ink)}

.brand-wordmark--duo-reverse b{font-weight:480;letter-spacing:-.065em}
.brand-wordmark--duo-reverse b span{font-weight:920;margin-left:.04em;color:var(--accent-ink)}

.brand-wordmark--accent-tail b{font-weight:900;letter-spacing:-.055em}
.brand-wordmark--accent-tail b span{margin-left:.06em;color:var(--accent);font-weight:760}

.brand-wordmark--slash b{display:flex;align-items:center;gap:5px;font-weight:900;letter-spacing:-.055em}
.brand-wordmark--slash b em{width:2px;height:16px;background:var(--accent);transform:skewX(-14deg)}
.brand-wordmark--slash b span{font-weight:540;letter-spacing:-.07em}

.brand-wordmark--dot b{display:flex;align-items:center;gap:5px;font-weight:880;letter-spacing:-.05em}
.brand-wordmark--dot b em{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.brand-wordmark--dot b span{font-weight:520;letter-spacing:-.065em}

.brand-wordmark--wide b{font-weight:840;letter-spacing:.075em}
.brand-wordmark--wide b span{font-weight:520;margin-left:.36em;letter-spacing:.12em;color:var(--accent-ink)}

.brand-wordmark--compact b{font-size:15px;font-weight:900;letter-spacing:-.075em}
.brand-wordmark--compact b span{font-size:.72em;font-weight:650;margin-left:.45em;letter-spacing:.035em;color:var(--accent-ink)}
.brand-wordmark--compact i{font-size:10px;letter-spacing:.06em}

.brand-wordmark--underline b{position:relative;width:max-content;font-weight:850;letter-spacing:.035em;padding-bottom:3px}
.brand-wordmark--underline b span{font-weight:500;margin-left:.2em;letter-spacing:.08em}
.brand-wordmark--underline b::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent)}

.ft .brand-symbol{--logo-ink:#fff;--logo-paper:var(--panel,#fafbf6)}
.ft .brand-wordmark b{color:#fff}
.ft .brand-wordmark i{color:rgba(255,255,255,.68)}
.ft-brand .brand-wordmark i{white-space:normal;max-width:280px}
.hub-card:hover .brand-symbol{--logo-ink:#fff;--logo-paper:#17140f}

/* ═══════════════════════════════════════════════════════════════
   빠져 있던 규칙들.

   ⚠ 마크업이 쓰는 클래스 104개 중 53개에 규칙이 없었다. 규칙이 없으면
     '스타일만 안 먹을 뿐' 이라 넘침도 없고 대비도 통과하고 글자도 안 잘린다.
     그래서 계측 검사는 전부 통과했는데 화면은 무너져 있었다 —
     히어로 오른쪽 카드가 맨 글씨로 흘러내리고 헤더 메뉴가 세로로 흩어졌다.
     화면을 한 번도 안 보고 숫자만 본 탓이다.
     tools/css-coverage.mjs 가 이제 이 어긋남을 전수로 잡는다.
   ═══════════════════════════════════════════════════════════════ */

/* ── 헤더 속 배치 ─────────────────────────────────────────── */
.hd-in{
  display:flex;
  align-items:center;
  gap:20px;
  width:100%;
}
.gnb{margin-left:auto}
.gnb ul{
  display:flex;
  align-items:center;
  gap:22px;
  list-style:none;
  margin:0;
  padding:0;
}
.gnb li{flex:0 0 auto}

/* ── 히어로 : 넓으면 글과 카드를 좌우로 ─────────────────────── */
.hero-in{
  display:grid;
  gap:clamp(28px,4vw,44px);
  align-items:start;
}
.hero-copy{min-width:0;container-type:inline-size}
.hero-note{
  margin:16px 0 0;
  font-size:13.5px;
  color:var(--ink-3);
}

/* 오른쪽 요약 카드 */
.hero-card{
  border:1px solid var(--line);
  border-radius:var(--r-l);
  background:var(--panel);
  box-shadow:var(--shadow);
  padding:clamp(20px,3vw,26px);
  min-width:0;
}
.hc-top{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--ink-3);
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.hc-dot{
  width:8px;height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:var(--accent);
}
.hc-edge{margin-top:18px}
.hc-label{
  display:block;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--accent-ink);
  margin-bottom:6px;
}
.hc-edge p{
  margin:0;
  font-size:16px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:-.02em;
}
.hc-why{
  margin:12px 0 0;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-2);
}
.hc-stats{
  list-style:none;
  margin:20px 0 0;
  padding:18px 0 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.hc-stats li{min-width:0}
.hc-stats b{
  display:block;
  font-size:22px;
  font-weight:900;
  letter-spacing:-.045em;
  line-height:1.15;
  color:var(--accent-ink);
}
.hc-stats span{
  display:block;
  margin-top:3px;
  font-size:11.5px;
  line-height:1.4;
  color:var(--ink-3);
}

/* ── 채널 띠 라벨 ─────────────────────────────────────────── */
.strip-label{
  display:block;
  padding-inline:var(--pad);
  margin-bottom:10px;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--ink-3);
}

/* ── 카드 열 수 ───────────────────────────────────────────── */
.cards-2{grid-template-columns:1fr}
.cards-3{grid-template-columns:1fr}
.card-lg{padding:clamp(22px,3vw,30px)}

/* 강점 상자 — 이 대행사만의 문장이라 눈에 들어와야 한다 */
.edge-box{
  margin-top:26px;
  padding:clamp(20px,3vw,28px);
  border:1px solid var(--accent-line,var(--line));
  border-left:4px solid var(--accent);
  border-radius:var(--r-m);
  background:var(--accent-soft);
}
.edge-label{
  display:block;
  font-size:12.5px;
  font-weight:800;
  color:var(--accent-ink);
  margin-bottom:8px;
}
.edge-box b{
  display:block;
  font-size:clamp(17px,2.4vw,20px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.45;
}
.edge-box p{
  margin:10px 0 0;
  font-size:14.5px;
  line-height:1.75;
  color:var(--ink-2);
}

/* 구획 끝 안내 줄 */
.sec-foot{
  margin:28px 0 0;
  text-align:center;
  font-size:15px;
  color:var(--ink-2);
}
.sec-foot a{
  margin-left:8px;
  font-weight:800;
  color:var(--accent-ink);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ── 운영 범위 : 번호·라벨 / 내용 ──────────────────────────── */
.rows{display:grid;gap:12px}
.row{
  display:grid;
  gap:6px 22px;
  padding:clamp(20px,3vw,26px);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  background:var(--panel);
}
.row-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width:0;
}
.row-n{
  font-size:20px;
  font-weight:900;
  letter-spacing:-.04em;
  color:var(--accent-ink);
  line-height:1.2;
}
.row-label{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--ink-3);
}
.row-body{min-width:0}
.row-body b{
  display:block;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.03em;
  margin-bottom:6px;
}
.row-body p{
  margin:0;
  font-size:14.5px;
  line-height:1.75;
  color:var(--ink-2);
}
.row-body ul{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  gap:7px;
}
.row-body li{
  position:relative;
  padding-left:16px;
  font-size:14px;
  color:var(--ink-2);
}
.row-body li::before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
}

/* 약속 3가지 */
.promise{
  margin-top:24px;
  display:grid;
  gap:12px;
}
.promise div{
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:var(--r-m);
  background:var(--panel);
}
.promise b{
  display:block;
  font-size:15px;
  font-weight:800;
  color:var(--accent-ink);
  margin-bottom:5px;
}
.promise p{margin:0;font-size:14px;line-height:1.7;color:var(--ink-2)}

/* ── 운영 채널 ────────────────────────────────────────────── */
.chan-top{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.chan-n{
  font-size:13px;
  font-weight:900;
  letter-spacing:-.03em;
  color:var(--accent-ink);
}
.chan-desc{
  margin:10px 0 0;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-2);
}
.chan-items{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:grid;
  gap:6px;
}
.chan-items li{
  position:relative;
  padding-left:15px;
  font-size:13.5px;
  color:var(--ink-2);
}
.chan-items li::before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--accent);
}
.chan-cta{
  display:inline-flex;
  align-items:center;
  margin-top:auto;                    /* 카드 높이가 달라도 문의 링크는 바닥에 */
  padding-top:14px;
  min-height:var(--tap);
  font-size:13.5px;
  font-weight:800;
  color:var(--accent-ink);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ── 업종 ─────────────────────────────────────────────────── */
.ind-case,.ind-mix{
  margin:12px 0 0;
  font-size:14px;
  line-height:1.7;
  color:var(--ink-2);
}
.ind-case span,.ind-mix span{
  display:inline-block;
  margin-right:8px;
  padding:2px 9px;
  border-radius:var(--r-pill);
  background:var(--accent-soft);
  color:var(--accent-ink);
  font-size:11.5px;
  font-weight:800;
  vertical-align:middle;
}
.ind-mix{color:var(--ink-3);font-size:13.5px}

/* ── 첫 30일 ──────────────────────────────────────────────── */
.first30{margin-top:clamp(48px,7vw,80px)}
.sec-head-sm{margin-bottom:24px}
.sec-title-sm{font-size:clamp(21px,3.4vw,30px)}
.weeks{display:grid;gap:12px}
.week{
  padding:clamp(18px,2.6vw,24px);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  background:var(--panel);
}
.week-n{
  display:block;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.1em;
  color:var(--accent-ink);
  margin-bottom:8px;
}
.week b{
  display:block;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.03em;
  margin-bottom:6px;
}
.week p{margin:0;font-size:14px;line-height:1.7;color:var(--ink-2)}
.week-out{
  display:inline-block;
  margin-top:12px;
  padding:5px 11px;
  border-radius:var(--r-pill);
  background:var(--accent-soft);
  color:var(--accent-ink);
  font-size:12.5px;
  font-weight:700;
}

/* ── 요금 ─────────────────────────────────────────────────── */
.ask-box{
  margin-top:26px;
  padding:clamp(20px,3vw,28px);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  background:var(--panel);
}
.ask-box b{
  display:block;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.03em;
  margin-bottom:14px;
}
.ask-box ol{
  margin:0;
  padding-left:20px;
  display:grid;
  gap:9px;
}
.ask-box li{font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.ask-box li::marker{color:var(--accent-ink);font-weight:800}

.notice-box{
  margin-top:24px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-left:4px solid var(--line-2);
  border-radius:var(--r-m);
  background:var(--panel-2);
}
.notice-box b{
  display:block;
  font-size:14.5px;
  font-weight:800;
  margin-bottom:7px;
}
.notice-box p{margin:0;font-size:14px;line-height:1.75;color:var(--ink-2)}
.note{
  margin:16px 0 0;
  font-size:13px;
  line-height:1.7;
  color:var(--ink-3);
}

/* ── FAQ 번호 ─────────────────────────────────────────────── */
.faq-n{
  display:inline-block;
  margin-right:10px;
  font-size:12.5px;
  font-weight:900;
  color:var(--accent-ink);
}

/* ── 상담 ─────────────────────────────────────────────────── */
.sec-contact{background:var(--panel-2);border-top:1px solid var(--line)}
.contact-in{
  display:grid;
  gap:clamp(28px,4vw,44px);
  align-items:start;
}
.contact-copy{min-width:0}
.contact-list{
  list-style:none;
  margin:22px 0 0;
  padding:0;
  display:grid;
  gap:9px;
}
.contact-list li{
  position:relative;
  padding-left:24px;
  font-size:14.5px;
  color:var(--ink-2);
}
.contact-list li::before{
  content:"";
  position:absolute;
  left:2px;top:.5em;
  width:9px;height:5px;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.contact-side{
  margin-top:26px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:var(--r-m);
  background:var(--panel);
}
.contact-side b{
  display:block;
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  color:var(--ink-3);
  margin-bottom:8px;
}
.contact-side p{margin:0 0 3px;font-size:16px;font-weight:700}
.cs-hours{font-size:13.5px;font-weight:500;color:var(--ink-3);margin-top:6px}

/* ⚠ display:grid 만 주면 칸이 내용 크기(입력칸 기본 240px)에 맞춰 멈춘다.
     561px 짜리 카드 안에서 입력칸이 241px 로만 나왔다. 칸을 명시해 채우게 한다. */
.lead-form{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.form-box{grid-template-columns:minmax(0,1fr)}
.field{grid-template-columns:minmax(0,1fr)}
.f-err{
  margin:0;
  min-height:1.3em;
  font-size:13.5px;
  font-weight:600;
  color:#a4331f;
}
.lead-done{
  padding:clamp(22px,3vw,30px);
  border:1px solid var(--accent-line,var(--line));
  border-radius:var(--r-m);
  background:var(--accent-soft);
  text-align:center;
}
.lead-done b{
  display:block;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.03em;
  margin-bottom:10px;
}
.lead-done p{margin:0 0 6px;font-size:15px}
.lead-done strong{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:17px;
  color:var(--accent-ink);
}
.ld-note{font-size:13.5px;color:var(--ink-2);margin-top:10px}

/* ── 버튼 크기 ────────────────────────────────────────────── */
.btn-lg{min-height:52px;padding:0 26px;font-size:16px}
.btn-sm{min-height:38px;padding:0 16px;font-size:13.5px}

/* ── 푸터 ─────────────────────────────────────────────────── */
.ft-top{
  display:grid;
  gap:20px;
  padding-bottom:26px;
  border-bottom:1px solid var(--line);
}
.ft-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.ft-brand span{display:flex;flex-direction:column;min-width:0}
.ft-brand b{font-size:17px;font-weight:800;letter-spacing:-.03em}
.ft-brand i{font-style:normal;font-size:13px;color:var(--ink-3);margin-top:2px}
.ft-copy{margin-top:14px;font-size:12.5px;color:var(--ink-3);line-height:1.7}

/* ── 허브·404 ─────────────────────────────────────────────── */
.hub-hero{
  padding:clamp(48px,8vw,88px) 0 clamp(28px,4vw,48px);
  text-align:center;
}
.hub-hero h1{
  font-size:clamp(30px,6vw,60px);
  font-weight:900;
  letter-spacing:-.055em;
  line-height:1.1;
  margin:18px 0 0;
}
.hub-hero .lead{
  max-width:720px;
  margin:20px auto 0;
  font-size:clamp(15px,2vw,17px);
  line-height:1.8;
  color:var(--ink-2);
}
.hub-hero .lead b{color:var(--ink);font-weight:800}
.hub-note{
  margin:18px 0 0;
  font-size:13.5px;
  color:var(--ink-3);
}
.hub-note a{color:var(--accent-ink);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.hub-group{margin:0 0 clamp(36px,6vw,56px)}
.hub-group h2{
  font-size:clamp(17px,2.4vw,21px);
  font-weight:800;
  letter-spacing:-.03em;
  margin:0 0 16px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.hc-body{display:flex;flex-direction:column;min-width:0}
.hc-body b{font-size:17px;font-weight:800;letter-spacing:-.03em}
.hc-body i{font-style:normal;font-size:13.5px;color:var(--accent-ink);font-weight:700;margin-top:3px}
.hc-body em{font-style:normal;font-size:13px;line-height:1.6;color:var(--ink-3);margin-top:8px}

/* ── 넓은 화면에서 좌우 2단 ───────────────────────────────── */
@media (min-width:720px){
  .cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .row{grid-template-columns:200px 1fr}
  .row-head{flex-direction:column;align-items:flex-start;gap:2px}
  .promise{grid-template-columns:repeat(3,minmax(0,1fr))}
  .weeks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:960px){
  .hero-in{grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr)}
  .contact-in{grid-template-columns:minmax(0,.9fr) minmax(380px,1.1fr)}
  .weeks{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ft-top{grid-template-columns:auto 1fr;align-items:center}
  .ft-nav{justify-self:end}
}

/* ⚠ 11.5px 짜리 작은 라벨들 — 좁은 화면에서는 12px 아래로 내리지 않는다.
     내가 새로 쓴 규칙에서 다섯 군데가 11.5px 이었다(운영 요약 제목·지표 설명·
     채널 띠 라벨·운영범위 라벨·주차 라벨). 데스크톱에서는 촘촘해서 괜찮지만
     작은 화면에서 11.5px 한글은 읽기 힘들다. */
@media (max-width:600px){
  .hc-top,
  .hc-stats span,
  .strip-label,
  .row-label,
  .week-n,
  .ind-case span,
  .ind-mix span,
  .chan-cat,
  .sec-eyebrow{font-size:12px}
}

/* ═══════════════════════════════════════════════════════════════
   시각 정비층 — 뒤에 붙어 앞 규칙을 덮어쓴다. 새 클래스는 만들지 않았다.

   왜 손대나: 면(카드)·글자 크기·대비가 전부 한 단계에 몰려 있었다.
   모든 구획이 '옅은 카드 + 17px 굵은 제목' 한 벌이라 눈이 멈출 곳이 없다.
   그래서 깔끔한데도 밋밋하게 읽혔다. 세 가지만 바꾼다.
     1) 강약 — 첫 화면 제목을 키우고, 영문 대문자 라벨을 구획 표지로 세운다
     2) 리듬 — 어두운 면 두 곳(채널 띠 · 운영 범위)으로 페이지를 끊는다
     3) 밀도 — 카드는 얇은 선 + 아주 옅은 그림자로, 절차·FAQ는 카드를 벗겨 선으로
   색은 기존 변수만 쓴다. 사이트마다 강조색이 다르므로 색을 새로 박지 않는다.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* 그림자를 넓게 퍼진 덩어리에서 '얇은 선 + 바닥 그늘'로 바꾼다.
     앞의 0 16px 44px/.08 은 카드를 붕 띄워 대행사보다 앱 화면처럼 보이게 했다.
     여기 쓰는 알파값은 이 파일이 이미 쓰던 잉크색 그대로다(강조색과 무관). */
  --shadow:0 1px 2px rgba(20,32,28,.05), 0 26px 50px -34px rgba(20,32,28,.30);
  --shadow-s:0 1px 2px rgba(20,32,28,.05);
  --maxw:1160px;                      /* 큰 제목이 앉을 자리를 넓힌다 */
}

/* ── 1. 영문 대문자 라벨 ───────────────────────────────────────
   eyebrow·label·cat 은 원고가 전부 영문 대문자다(PAID MEDIA, WHY …).
   한글 본문과 성격이 다르니 자간을 벌리고 짧은 선을 앞에 세워 표지처럼 만든다.
   ⚠ 어디서도 12px 아래로 내리지 않는다. */
.eyebrow{
  padding:0;
  border:0;
  border-radius:0;
  background:none;                    /* 알약을 벗기고 맨 라벨로 */
  gap:10px;
  font-size:12.5px;
  letter-spacing:.16em;
  color:var(--accent-ink);            /* 글자이므로 ink 계열 */
}
.eyebrow::before{
  content:"";
  flex:0 0 28px;
  width:28px;height:2px;
  background:var(--accent);           /* 선은 '면'이라 --accent 를 써도 된다 */
}
.sec-eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  letter-spacing:.16em;
}
.sec-eyebrow::before{
  content:"";
  flex:0 0 28px;
  width:28px;height:2px;
  background:var(--accent);
}
/* 11.5px 이던 작은 라벨들을 12px 로 올린다(좁은 화면 예외 규칙에도 안 걸리게) */
.strip-label,
.row-label,
.week-n,
.hc-top,
.hc-stats span,
.ind-case span,
.ind-mix span,
.brand-text i{font-size:12px}
.strip-label,.row-label,.week-n,.hc-top{letter-spacing:.16em}
.card-label{font-size:12px;letter-spacing:.16em;margin-top:0}
.chan-cat{font-size:12px;letter-spacing:.1em}

/* ── 2. 첫 화면 ────────────────────────────────────────────────
   대행사 사이트는 제목이 첫 화면을 지배한다.
   크기 계산식(칸 너비 ÷ 글자 수)은 그대로 두고 상한만 올린다 —
   계산식이 '그 줄이 안 접히는 크기'를 이미 보장하므로 상한을 올려도 안전하다. */
.hero{padding:clamp(48px,10vw,104px) 0 clamp(36px,7vw,72px)}
.hero-h{
  margin-top:22px;
  font-size:clamp(30px, calc(100cqw / (var(--hero-ch, 12) * 0.96)), 72px);
  letter-spacing:-.06em;
  line-height:1.1;                    /* 한글은 1.1 아래로 내리면 아랫줄에 닿는다 */
}
/* 강조 낱말은 색만으로는 약하다. 글자 뒤에 옅은 띠를 깔아 형광펜처럼 집는다.
   (글자색은 앞 규칙의 --accent-ink 를 그대로 쓴다) */
.hero-h em{
  background:linear-gradient(var(--accent-soft),var(--accent-soft)) 0 86%/100% .22em no-repeat;
}
.hero-lead{
  margin-top:20px;
  max-width:42ch;
  font-size:clamp(16px,2.2vw,19px);
  line-height:1.75;
}
.hero-cta{margin-top:30px;gap:12px}

/* 오른쪽 요약 카드 — 대행사가 즐겨 쓰는 '지표판'으로 */
.hero-card{border-radius:var(--r-l)}
.hc-top{
  padding-bottom:16px;
  border-bottom:1px solid var(--line-2);
  color:var(--ink-2);
}
.hc-stats{margin-top:24px;padding-top:20px;gap:14px}
.hc-stats li + li{
  padding-left:14px;
  border-left:1px solid var(--line);  /* 숫자 사이를 선으로 끊어 표처럼 보이게 */
}
.hc-stats b{font-size:clamp(26px,4.8vw,34px);letter-spacing:-.05em}
.hc-stats span{line-height:1.4}

/* ── 3. 어두운 면 ① 채널 띠 ───────────────────────────────────
   히어로 바로 아래를 어둡게 깔면 페이지가 한 번 끊긴다.
   전면 다크가 아니라 띠 하나뿐이라 무겁지 않다.
   ⚠ 어두운 면에 얹는 글자는 전부 밝은 값으로 다시 지정한다. */
.strip{
  background:var(--ink);
  border-block:0;
  padding:clamp(18px,3vw,26px) 0;
}
/* ⚠ .wrap 이 이미 좌우 여백을 가진다. 여기서 또 주면 띠만 안쪽으로 밀려
     히어로 글줄과 왼쪽 끝이 어긋난다. 0 으로 맞춘다. */
.strip-label{
  padding-inline:0;
  margin-bottom:14px;
  color:rgba(255,255,255,.66);        /* 잉크면 위 대비 약 7:1 */
}
.strip-list{padding-inline:0}
.strip-list li{
  background:transparent;
  border-color:rgba(255,255,255,.24);
  color:rgba(255,255,255,.90);
}

/* ── 4. 구획 제목 ─────────────────────────────────────────────── */
.sec{padding:clamp(56px,10vw,116px) 0}
.sec-head{margin-bottom:clamp(28px,5vw,56px)}
.sec-title{
  margin-top:16px;
  font-size:clamp(28px,5vw,52px);
  letter-spacing:-.055em;
  line-height:1.08;
}
.sec-title-sm{font-size:clamp(22px,3.6vw,32px)}  /* 위 규칙 뒤에 와야 작은 제목이 유지된다 */
.sec-lead{margin-top:16px;font-size:clamp(15px,1.9vw,17px);line-height:1.8}

/* ── 5. 카드 : 얇은 선 · 큰 모서리 · 큰 번호 ───────────────────
   번호를 36px 칩에 가두면 장식이 된다. 칩을 풀고 숫자를 키운 뒤 아래에
   선을 그으면 카드가 '자료'처럼 읽힌다. */
.card{
  border-radius:var(--r-l);
  box-shadow:var(--shadow-s);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover{
  border-color:var(--line-2);
  box-shadow:var(--shadow);
  transform:translateY(-2px);
}
.card-n{
  display:block;
  width:auto;height:auto;
  padding:0 0 12px;
  margin-bottom:14px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:none;
  font-size:clamp(26px,3.6vw,34px);
  line-height:1;
  letter-spacing:-.05em;
  color:var(--accent-ink);
}
.card-title{margin-top:6px;font-size:clamp(19px,2.7vw,22px);line-height:1.35}
.card-desc{font-size:15px;line-height:1.75}

/* 이 대행사만의 문장 — 페이지에서 가장 크게 읽혀야 할 한 줄 */
.edge-box{margin-top:32px;border-left-width:5px;border-radius:var(--r-l)}
.edge-label{font-size:12px;letter-spacing:.16em}
.edge-box b{font-size:clamp(19px,2.9vw,25px);line-height:1.45}

/* ── 6. 어두운 면 ② 운영 범위 ─────────────────────────────────
   가운데쯤 어두운 구획을 한 번 넣어 위아래를 갈라 준다.
   여기서는 카드를 벗기고 선으로만 나눠 업무 목록처럼 보이게 한다.
   ⚠ #scope 는 마크업에 이미 있는 id 다(새로 만들지 않았다).
   ⚠ --accent-deep 은 명도 16% 라 어떤 강조색이어도 흰 글자와 9:1 이상이다. */
#scope{
  background:var(--accent-deep);
  border-block:0;
  color:var(--panel);                 /* 빠뜨린 글자가 있어도 밝게 떨어지도록 */
}
#scope .sec-eyebrow{color:var(--accent-soft)}
#scope .sec-eyebrow::before{background:var(--accent-soft)}
#scope .sec-title{color:var(--panel)}
#scope .sec-lead{color:rgba(255,255,255,.76)}
#scope .rows{gap:0}
#scope .row{
  padding:clamp(22px,3vw,30px) 0;
  gap:10px 32px;
  background:transparent;
  border:0;
  border-top:1px solid rgba(255,255,255,.18);
  border-radius:0;
  box-shadow:none;
}
#scope .row-n{font-size:clamp(24px,3vw,30px);color:var(--accent-soft)}
#scope .row-label{color:rgba(255,255,255,.68)}
#scope .row-body b{font-size:19px;color:var(--panel)}
#scope .row-body p,
#scope .row-body li{color:rgba(255,255,255,.78)}
#scope .row-body li::before{background:var(--accent-soft)}
#scope .promise{margin-top:36px}
#scope .promise div{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
  border-radius:var(--r-m);
}
#scope .promise b{color:var(--accent-soft)}
#scope .promise p{color:rgba(255,255,255,.76)}

/* ── 7. 채널 카드 ─────────────────────────────────────────────── */
.chan{
  border-radius:var(--r-l);
  transition:border-color .18s ease, transform .18s ease;
}
.chan:hover{border-color:var(--accent);transform:translateY(-2px)}
.chan-top{
  justify-content:space-between;      /* 번호는 왼쪽, 분류는 오른쪽 끝 */
  padding-bottom:10px;
  margin-bottom:12px;
  border-bottom:1px solid var(--line);
}
.chan-n{font-size:15px}
.chan-name{font-size:17px}

/* ── 8. 진행 절차 : 카드를 벗기고 굵은 선으로 ──────────────────
   절차는 '단계'라 상자보다 선이 맞다. 카드가 이어지던 흐름도 여기서 끊긴다. */
.steps{gap:0 clamp(18px,2.6vw,32px)}
.step{
  grid-template-columns:1fr;          /* 번호를 옆이 아니라 위로 */
  gap:0;
  padding:18px 0 26px;
  background:transparent;
  border:0;
  border-top:2px solid var(--ink);
  border-radius:0;
  box-shadow:none;
}
.step-n{
  display:block;
  width:auto;height:auto;
  border-radius:0;
  background:none;
  color:var(--accent-ink);            /* 이제 밝은 바탕 위이므로 ink 계열 */
  font-size:14px;
  letter-spacing:.14em;
  text-align:left;
}
/* ⚠ 마크업은 <b> 인데 앞 규칙은 .step h3 에 걸려 있었다 — 절차 제목만
     아무 규칙도 못 받아 그냥 굵은 본문으로 나오고 있었다. */
.step b{
  display:block;
  margin-top:12px;
  font-size:clamp(17px,2.2vw,19px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.35;
}
.step p{margin-top:10px;font-size:14.5px;line-height:1.7}

/* ── 9. 첫 30일 ───────────────────────────────────────────────── */
.week{
  border-top:3px solid var(--accent); /* 선이라 --accent 그대로 */
  border-radius:0 0 var(--r-m) var(--r-m);
}
.week b{font-size:17px}

/* ── 10. FAQ : 상자 대신 목록 ─────────────────────────────────── */
.faq{gap:0}
.faq details{
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:transparent;
}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{padding:20px 2px;font-size:clamp(16px,2vw,18px)}
.faq details > *:not(summary){padding:0 2px 22px;font-size:15px;line-height:1.8}
.faq-n{font-size:13px;letter-spacing:.06em}

/* ── 11. 상담 ──────────────────────────────────────────────────
   연락처 상자만 어둡게 해 '여기로 연락' 이 한눈에 잡히게 한다.
   구획 전체를 어둡게 하면 어두운 면이 셋이 돼 리듬이 아니라 무게가 된다. */
.contact-side{
  margin-top:30px;
  padding:22px 24px;
  background:var(--ink);
  border-color:var(--ink);
  border-radius:var(--r-l);
}
.contact-side b{font-size:12px;letter-spacing:.16em;color:rgba(255,255,255,.66)}
.contact-side p{font-size:17px;color:#fff}
.cs-hours{font-size:13.5px;color:rgba(255,255,255,.68)}

.form-box{border-radius:var(--r-l)}
.field > label{font-size:14px}
.field input,
.field select,
.field textarea{
  min-height:52px;                    /* 44px 이상 */
  border-radius:12px;
  font-size:16px;                     /* 16px 미만이면 iOS 가 화면을 확대한다 */
}
.field textarea{min-height:140px}     /* 바로 위 min-height 를 되돌린다 */

/* ── 12. 버튼 ─────────────────────────────────────────────────── */
.btn-line{border-color:var(--line-2);color:var(--ink)}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px}  /* 38px 은 터치 최소치 미달이었다 */
.hd-cta{font-weight:800}

/* ── 13. 푸터 ──────────────────────────────────────────────────
   ⚠ 어둡게 하지 않는다. 엠블럼(emblem.mjs)이 '밝은 바탕 전용'으로 그려져 있고
     50곳 색을 눈으로 확인할 수 없다. 대신 굵은 윗선으로 페이지를 닫는다. */
.ft{border-top:2px solid var(--ink)}
.ft-brand b{font-size:18px}
.ft-copy{font-size:12.5px}

/* ── 14. 좁은 화면 보정 ────────────────────────────────────────
   자간을 벌린 라벨과 아주 큰 자간의 제목은 좁은 화면에서 줄이 쉽게 넘친다. */
@media (max-width:600px){
  .eyebrow,.sec-eyebrow{letter-spacing:.12em}
  .hero-h{letter-spacing:-.045em}
  .hc-stats{gap:10px}
  .hc-stats li + li{padding-left:10px}
}

/* ── 15. 움직임 최소화 ─────────────────────────────────────────
   앞의 전역 규칙이 전환 시간을 없애지만, 들어올림 자체를 안 하는 편이 낫다. */
@media (prefers-reduced-motion:reduce){
  .card:hover,.chan:hover{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   시각 개선층 (2026-08-30) — 여기서부터 파일 끝까지가 한 덩어리다.

   ⚠ 반드시 파일 맨 끝에 둔다. 이 파일은 앞부분을 뒷부분이 덮는 구조이고,
     여기서 바꾸는 값 다수가 앞과 특정성이 같다. 중간에 끼우면
     에러 없이 조용히 원래대로 돌아간다.
   ⚠ 되돌리려면 이 주석부터 파일 끝까지 지우고 `node build.mjs` 를 다시 돌린다.
     기존 줄은 하나도 고치지 않았다.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   층 3 — 색면·깊이·배치층. 앞 두 층을 덮는다.
   ⚠ palette()·solveL()·PAPER(#f1f2ea)/CARD(#fafbf6) 상수에 손대지 않는다
     → accent-contrast.mjs 결과 불변.
   ⚠ 밝은 면(paper·card·accent-soft)을 어둡게 만드는 레이어를 절대 넣지 않는다.
     accentInk on PAPER 최저 4.508, 필요 바탕 휘도 하한 0.87970 vs #f1f2ea 0.88135
     → 여유 ΔY 0.00165 (8bit 0.4계단). 바탕을 2 L* 만 내려도 50곳 다수가 4.5 미달인데
     dark-contrast.mjs 는 background-color 만 읽어 그라디언트·::before 오버레이를
     못 본다 → 거짓 초록불이 난다.
   ⚠ 그림자에 --accent 계열을 섞지 않는다. 잉크와 흰색만 쓴다(hue 50종 공용).
   ═══════════════════════════════════════════════════════════════ */

body{
  /* 강조색 원본 보관. ⚠ 반드시 body 다 — --accent-* 는 <body style> 인라인 주입이라
     :root(html) 에 쓰면 site.css 기본값 #2f5b3d 를 잡아 50곳이 전부 초록으로 죽는다.
     ⚠ 폴백 값이 허브(dist/index.html)·404 를 살린다 — 그 둘은 <body class="hub"> 라
       styleVars() 인라인이 없어 --accent-* 가 아예 정의되지 않는다. */
  --accent-lit      : var(--accent,      #4a7c59);
  --accent-ink-lit  : var(--accent-ink,  #2f5b3d);
  --accent-soft-lit : var(--accent-soft, #e6eee6);
  --surf-deep       : var(--accent-deep, #14201c);
  --surf-tint       : color-mix(in srgb, var(--accent, #4a7c59) 14%, #f1f2ea);

  /* 깊이 사다리 — 접촉 + 중간 + 주변 3겹. 한 겹짜리는 어떤 알파를 줘도 안 뜬다.
     현재 --shadow-s(0 1px 2px .05) 는 접점 ΔL* 약 2, 번짐 2px.
     --sh-1 은 접점 실효 α≈.13 → ΔL* 약 11, 번짐 12px. */
  --sh-1 : 0 1px 1px rgba(20,32,28,.045),
           0 2px 4px -1px rgba(20,32,28,.05),
           0 6px 12px -4px rgba(20,32,28,.07);
  --sh-2 : 0 1px 1px rgba(20,32,28,.05),
           0 4px 8px -2px rgba(20,32,28,.06),
           0 14px 24px -10px rgba(20,32,28,.12);
  --sh-3 : 0 1px 2px rgba(20,32,28,.05),
           0 8px 16px -6px rgba(20,32,28,.08),
           0 28px 44px -18px rgba(20,32,28,.17);
  --sh-4 : 0 2px 4px rgba(20,32,28,.06),
           0 14px 28px -10px rgba(20,32,28,.12),
           0 44px 72px -28px rgba(20,32,28,.22);
  --sh-d : 0 2px 4px rgba(0,0,0,.28), 0 40px 72px -44px rgba(0,0,0,.72);

  /* 기존 12개 선언부를 한 번에 승격 */
  --shadow-s: var(--sh-1);
  --shadow  : var(--sh-2);

}

/* ── 1. 진행 절차 : 5 = 전폭 1 + 4열 ─────────────────────────
   COPY.steps 5개 vs .steps 4열(L825) → ≥960px 2행 오른쪽 3칸이 빈다.
   .step 은 배경 없이 border-top:2px solid var(--ink) 뿐이라(L1748)
   빈 칸에는 그 굵은 선조차 안 그려져 '깨진 표'로 읽힌다.
   열을 5로 늘리는 건 오답 — .step p 가 85~114자라 1104/5=197px 이면 13자 8줄 기둥이 된다.
   ⚠ .step 은 이미 display:grid(L510) 라 아래 grid-template-columns 가 그대로 먹는다. */
@media (min-width:720px){
  .steps > .step:first-child{ grid-column:1 / -1 }
}
@media (min-width:960px){
  .steps{ grid-template-columns:repeat(4,minmax(0,1fr)) }
  .steps > .step:first-child{
    grid-template-columns:auto minmax(0,auto) minmax(0,1fr);
    column-gap:clamp(24px,3.4vw,48px);
    align-items:start;
    padding:22px 0 34px;
  }
  .steps > .step:first-child .step-n{
    font-size:clamp(40px,5.2vw,64px); line-height:.82; letter-spacing:-.05em;
  }
  .steps > .step:first-child b{
    margin-top:0; font-size:clamp(21px,2.6vw,26px); white-space:nowrap;
  }
  .steps > .step:first-child p{ margin-top:6px; font-size:15.5px; max-width:60ch }
}

/* ── 2. 요금 결정요소 : 5 = 4·4·4 / 6·6 ──────────────────────
   PRICE_FACTORS 5개 vs .cards-3 3열(L1483) → ≥720px 2행 오른쪽 1칸이 빈다.
   ⚠ audit.mjs 는 #pricing .card >= 5 를 센다 — 카드를 합치거나 지우면 반려.
     개수는 그대로 두고 12칼럼 위에서 자리만 옮긴다.
   ⚠ why 의 카드 3개는 span 4 × 3 = 79.1667×4+14×3 = 358.67px 로
     기존 repeat(3) 의 (1104-28)/3 = 358.67px 와 픽셀까지 같다 → 무변화. */
@media (min-width:720px){
  .cards-3{ grid-template-columns:repeat(12,minmax(0,1fr)) }
  .cards-3 > *{ grid-column:span 4 }
  .cards-3 > :nth-child(4),
  .cards-3 > :nth-child(5){ grid-column:span 6 }
}
/* 넓어진 2행은 번호를 옆으로 눕혀 넓이 차이를 '의도'로 만든다 */
@media (min-width:960px){
  #pricing .cards-3 > :nth-child(n+4){
    display:grid;
    grid-template-columns:minmax(0,auto) minmax(0,1fr);
    column-gap:clamp(18px,2.4vw,30px);
    align-items:start;
  }
  #pricing .cards-3 > :nth-child(n+4) .card-n{
    grid-row:1 / 3; margin:0; padding:0; border-bottom:0;
    font-size:clamp(30px,4vw,44px);
  }
  #pricing .cards-3 > :nth-child(n+4) .card-title{ margin-top:0 }
}

/* ── 3. 깊이 : 그림자를 실제로 보이게 + 1px 베벨 ──────────────
   현행 .card 그림자는 0 1px 2px rgba(20,32,28,.05) 한 겹 = 화면에 없다.
   ⚠ 밝은 면 광택(--sheen)과 흰 rim(inset 0 1px 0 rgba(255,255,255,.9)) 은 넣지 않는다.
     --panel(#fafbf6) 위에서 ΔL* 1.23 — .sec-alt 의 ΔL* 1.7 보다도 작아 안 보인다.
     실제로 베벨을 만드는 건 아래 비대칭 테두리 하나뿐이다. */
.card                 { box-shadow:var(--sh-1) }
.card-lg              { box-shadow:var(--sh-2) }
.chan,.week,
.ask-box,.notice-box  { box-shadow:var(--sh-1) }
.edge-box             { box-shadow:var(--sh-2) }
.hero-card,.form-box  { box-shadow:var(--sh-3) }

/* 사방 균일 rgba(20,32,28,.12) 를 위 .08 / 아래 .17 로 갈라 1px 베벨을 만든다 */
.card,.chan,.hero-card,.form-box,.ask-box{
  border-top-color   :rgba(20,32,28,.08);
  border-bottom-color:rgba(20,32,28,.17);
}
.notice-box{ border-bottom-color:rgba(20,32,28,.17) }  /* 왼쪽 4px --line-2 유지 */

/* hover = 고도 변화. ⚠ z-index 필수 —
   .cards{gap:14px} 인데 --sh-3 은 박스 아래 32px, --sh-4 는 52px 까지 뻗는다.
   z-index 없으면 다음 행 카드의 불투명 --panel 배경에 그림자가 가로로 뚝 잘린다
   (services 2행, industries 2행, pricing 2행, chan-grid 4행 전부 해당). */
.chan{ position:relative }
.card{ transition:box-shadow .22s cubic-bezier(.2,.7,.3,1),
                  transform  .22s cubic-bezier(.2,.7,.3,1),
                  border-color .18s ease }
.chan{ transition:box-shadow .22s cubic-bezier(.2,.7,.3,1),
                  transform  .22s cubic-bezier(.2,.7,.3,1),
                  border-color .18s ease }
.card:hover   { box-shadow:var(--sh-3); transform:translateY(-3px); z-index:2 }
.card-lg:hover{ box-shadow:var(--sh-4); transform:translateY(-4px) }
.chan:hover   { box-shadow:var(--sh-2); transform:translateY(-3px);
                border-color:var(--accent); z-index:2 }
.card:active,.chan:active{ box-shadow:var(--sh-1); transform:translateY(-1px) }

/* ── 4. 밴드 악보 ─────────────────────────────────────────────
   ■ deep(L16) · ▨ accent · ▧ tint · ▤ panel-2+헤어라인 · ▢ paper
   hero ■ / strip ▨ / why ▧ / services ▢ / scope ■ / channels ▧ /
   industries ▤ / process ▢ / pricing ▤ / faq ▢ / contact ■ / footer ■
   ⚠ 다크는 3개(+푸터)가 상한이다. #process 는 다크로 만들지 않는다 —
     참고조사 "다크 4개 이상 금지" + tint 가 실제로 보이게 된 이상 불필요하다.
   ⚠ --accent-deep 은 solveL 을 안 거친 고정 L16% 다. 이 명도를 올리면 안 된다 —
     L32% 에서 흰 글자가 10곳, L36% 에서 20곳 미달한다. */
.hero  { background:var(--surf-deep) }
.strip { background:var(--accent) }
#scope { background:var(--surf-deep) }   /* 기존과 동일 */
#contact{ background:var(--surf-deep); border-top:6px solid var(--accent) }
.ft    { background:var(--surf-deep);
         border-top:1px solid rgba(255,255,255,.14);
         padding-top:clamp(40px,7vw,64px) }

/* tint 밴드 — color-mix 미지원 시 --panel-2 로 남는다(현행과 동일, 안전) */
.sec-alt:not([id]), #channels{ background:var(--panel-2) }
@supports (background:color-mix(in srgb,#000 14%,#fff)){
  .sec-alt:not([id]), #channels{ background:var(--surf-tint) }
}

/* ── 4-a. 다크 밴드 : 글자·선 토큰만 뒤집는다 ────────────────
   ⚠ --ink 와 --panel 은 절대 스왑하지 않는다. 둘 다 '면'으로도 쓰인다
     (--ink = .contact-side 배경·.step 윗선·.ft 윗선 / --panel = #scope 안 글자색).
   값은 #scope 블록(L1693~1726)이 이미 50곳에서 초록불인 것을 그대로 재사용한다.
   .78 → 최저 6.93 / .68 → 최저 5.71 / soft → 최저 9.44 (accent-deep 기준 50곳 전수). */
.hero, #scope, #contact, .ft{
  --ink-2 : rgba(255,255,255,.78);
  --ink-3 : rgba(255,255,255,.68);
  --line  : rgba(255,255,255,.18);
  --line-2: rgba(255,255,255,.28);
  /* 다크 위 --accent-ink 는 50/50 전부 1.97~2.10 : 사용 불가. soft 로 치환. */
  --accent-ink: var(--accent-soft-lit);
  color: var(--panel);
}
/* --ink 를 글자로 직접 쓰는 곳 — 변수 스왑이 안 잡는다.
   ⚠ .ft-owner b (site.css:853) 를 빠뜨리면 흰 푸터 문단 한가운데 검은 상호가
     1.2:1 로 박혀 dark-contrast 가 50곳 전부 반려한다. audit 이 그 텍스트로
     /라오유튜브/ 를 검사하는 자리라 지울 수도 없다. */
.ft-info strong,
.ft .ft-brand b,
.ft .ft-owner b{ color:#fff }

/* ── 4-b. 다크 밴드 위의 '밝은 판' 은 토큰을 되돌린다 ────────
   ⚠ 이걸 빠뜨리면 accent-soft 바탕에 accent-soft 글자가 얹혀 대비 1.0 이 되고
     dark-contrast 가 50곳 전부를 반려한다. 되돌릴 판은 정확히 이 셋이다.
   ⚠ #scope .promise div 는 제외 — 반투명 다크 상자라 color:var(--panel) 이 정답이다. */
.hero .hero-card,
#contact .form-box,
#contact .lead-done{
  --ink-2 : rgba(20,32,28,.72);
  --ink-3 : rgba(20,32,28,.66);
  --line  : rgba(20,32,28,.12);
  --line-2: rgba(20,32,28,.20);
  --accent-ink: var(--accent-ink-lit);
  color: var(--ink);
}

/* ── 4-c. 다크 위 강조색 선·도형 → soft (accent 는 3.5:1 까지 떨어진다) */
.hero .eyebrow::before,
#contact .sec-eyebrow::before{ background:var(--accent-soft-lit) }
#contact .contact-list li::before{
  border-left-color  :var(--accent-soft-lit);
  border-bottom-color:var(--accent-soft-lit);
}

/* ── 4-d. tint 밴드 위 accent-ink 는 3.81~4.22 로 전부 미달 → ink-2 로.
   밴드에 직접 얹히는 accent-ink 요소는 .sec-eyebrow 뿐이다
   (.edge-label·.card-n·.chan-n·.chan-cta 는 전부 흰 카드 안).
   ::before 28×2px 는 선이라 대비 규칙 대상이 아니다 — accent 그대로 둔다. */
.sec-alt:not([id]) .sec-eyebrow,
#channels .sec-eyebrow{ color:var(--ink-2) }

/* ── 4-e. accent-soft 바탕 상자는 tint 밴드 위에서 사라진다 → 흰 판으로 */
.sec-alt:not([id]) .edge-box{
  background:var(--panel);
  border-color:var(--line);
  border-left-color:var(--accent);
  box-shadow:var(--sh-2);
}

/* ── 5-a. 히어로 : 다크 커버 + 처음으로 '떠 있는' 흰 판 ────── */
.hero-card{ border-color:transparent; box-shadow:var(--sh-d) }
/* 다크 위 accent 면 버튼은 바탕에 묻힌다 → 흰 판으로 뒤집는다.
   accent-ink on #fff = 5.08:1 이상 (도구가 재는 #fafbf6 4.887 보다 높다).
   ⚠ filter:brightness(.94) 를 흰 판에 그대로 두면 #f0f0f0 위 4.15:1 로 떨어진다. */
.hero .btn-solid{
  background:#fff; color:var(--accent-ink-lit);
  box-shadow:0 1px 2px rgba(0,0,0,.30);
}
.hero .btn-solid:hover{ filter:none; background:var(--accent-soft-lit) }
.hero .btn-line{ color:#fff; border-color:rgba(255,255,255,.42); box-shadow:none }
.hero .btn-line:hover{
  background:var(--accent-soft-lit); color:var(--accent-ink-lit);
  border-color:transparent;
}
/* 반투명 크림 헤더가 다크 히어로 색을 먹어 탁해진다 → 불투명도를 올린다(대비는 상승) */
.site-header{ background:rgba(241,242,234,.94) }
.anchor-nav { background:rgba(241,242,234,.96) }

/* ── 5-b. 채널 띠 : 페이지 유일의 큰 브랜드색 면 ──────────────
   지금 강조색이 나오는 최대 면적은 .hd-cta 버튼 한 개다.
   ⚠ 채도면 위에는 흰 판 위 글자만 올린다. #fff on --accent 는 4.503~4.763 로
     통과하되 최악 여유가 0.003 이라, 같은 여유를 12개 알약으로 늘리지 않는다.
   ⚠ L1624 의 background:var(--ink) 단축을 덮으므로 이 블록이 뒤에 있어야 한다. */
.strip{ padding:clamp(20px,3.4vw,30px) 0 }
.strip-label{
  display:inline-block;                /* L1025 display:block 을 되돌린다 */
  padding:6px 12px; border-radius:var(--r-pill);
  background:#fff; color:var(--accent-ink-lit);
}
.strip-list li{
  background:#fff; border-color:transparent;
  color:var(--accent-ink-lit);
  box-shadow:0 1px 2px rgba(0,0,0,.10);
}

/* ── 5-c. 상담·푸터 마감 블록 ────────────────────────────────
   ⚠ .contact-side 는 배경이 --ink 라 다크 밴드 위에서 사라진다.
     #scope .promise div 와 같은 검증된 값으로 교체.
   ⚠ L1826 주석("엠블럼이 밝은 바탕 전용이라 푸터는 어둡게 안 한다")은 사실이 아니다.
     emblem.mjs:290 의 바깥 틀은 fill="url(#…f)" 로 pale hsl(h,44,91) →
     paleAcc hsl(h,40,93) 자기 밝은 판을 갖는다. 50곳 전부 동일 구조·다크 위 12:1 이상. */
#contact .contact-side{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
  box-shadow:none;
}
#contact .contact-side b{ color:rgba(255,255,255,.72) }  /* .66 → 반투명 판 위 5.36:1 */
#contact .form-box{ border-color:transparent; box-shadow:var(--sh-d) }
.ft .ft-nav a:hover{ background:var(--accent-soft-lit); color:var(--accent-ink-lit) }

/* ── 6-a. .sec-alt : 색이 아니라 경계로 나눈다 ────────────────
   .sec-alt 는 site.css:326 의 background:var(--panel-2) 한 줄이 전부다 —
   테두리도 그림자도 없고 --bg 와 ΔL* 1.7 / 1.046:1 이라 대면적 인지 한계선이다.
   R1 때문에 이 색을 더 어둡게 만들 수 없으므로 모서리로 우회한다.
   ⚠ #scope 는 --accent-deep 으로 덮인 어두운 구획이라 반드시 제외.
   ⚠ inset 그림자에서 음수 spread 는 안쪽 사각형을 확대한다 — spread 를
     blur/2 보다 크게 음수로 주면 그늘이 박스 밖으로 밀려 4px 꼬리만 남는다.
     아래 -4px 는 안쪽 top = padTop+8, 실도달 약 15px.
     .sec padding-top 최소 56px 이라 글자에 절대 안 닿는다. */
.sec-alt:not(#scope){
  box-shadow: inset 0  1px 0 var(--line),
              inset 0 12px 14px -4px rgba(20,32,28,.14),
              inset 0 -1px 0 var(--line);
}

/* 어두운 대면적은 반복 무늬 없이 넓고 매끈한 면으로 유지한다.
   최종 배경 깊이와 색 번짐은 §G에서 한 번만 정의한다. */

/* ── 7. 눌린 것 vs 눌리는 것 ─────────────────────────────────
   지금은 입력칸도 버튼도 카드도 전부 같은 평면이다.
   ⚠ L656 의 포커스 링을 반드시 되살릴 것 — 이 층이 뒤라 덮인다.
     (.field input:focus (0,2,1) > .field input (0,1,1) 이므로
      border-color:var(--accent) 는 자동으로 살아남는다.)
   ⚠ min-height:52px / font-size:16px (L1817-1820) 를 건드리지 않는다 — mobile-hit. */
.field input,.field select,.field textarea{
  box-shadow: inset 0 1px 2px rgba(20,32,28,.07),
              inset 0 0 0 1px rgba(255,255,255,.55);
  border-color: rgba(20,32,28,.22) rgba(20,32,28,.18) rgba(20,32,28,.15);
}
.field input:focus,.field select:focus,.field textarea:focus{
  box-shadow: 0 0 0 3px var(--accent-soft),
              inset 0 1px 2px rgba(20,32,28,.07);
}
.btn-solid,.hd-cta{
  box-shadow: var(--sh-1),
              inset 0  1px 0 rgba(255,255,255,.22),
              inset 0 -1px 0 rgba(20,32,28,.20);
}
.btn-solid:hover,.hd-cta:hover{ box-shadow:var(--sh-2), inset 0 1px 0 rgba(255,255,255,.24) }
.btn-solid:active,.hd-cta:active{ box-shadow:inset 0 2px 5px rgba(20,32,28,.30) }
.btn-line{ box-shadow:var(--sh-1) }
/* 5-b 의 흰 히어로 버튼은 위 규칙보다 뒤에 있어야 한다 → 재선언 */
.hero .btn-solid{ box-shadow:0 1px 2px rgba(0,0,0,.30), inset 0 -1px 0 rgba(20,32,28,.10) }

/* ── 8-a. 그리드 기본값 stretch 가 한 줄을 같은 높이로 늘려 '상자 벽'을 만든다.
   ⚠ .chan-grid 에는 걸지 않는다 — .chan-cta{margin-top:auto}(L1213) 가
     stretch 를 전제로 바닥 정렬을 하고 있다. */
.cards{ align-items:start }

/* ── 8-b. 서비스 4카드 : 7·5 / 5·7 지그재그 ──────────────────
   #services 와 #industries 는 마크업이 완전히 같다(.cards-2 + .card-lg 4개).
   한쪽을 틀어야 두 구획이 구별된다.
   1160 폭 기준 span7=638px / span5=452px, .card-lg padding 30 을 빼면
   글 폭 578/392px — .card-items 4항목이 둘 다 들어간다. */
@media (min-width:1024px){
  #services .cards-2{ grid-template-columns:repeat(12,minmax(0,1fr)) }
  #services .cards-2 > :nth-child(1){ grid-column:span 7 }
  #services .cards-2 > :nth-child(2){ grid-column:span 5 }
  #services .cards-2 > :nth-child(3){ grid-column:span 5 }
  #services .cards-2 > :nth-child(4){ grid-column:span 7 }
}

/* ── 9-a. 구획 머리 : 제목 왼쪽 / 부제 오른쪽 (세 곳만) ───────
   7개 구획이 전부 [라벨→제목→부제] 를 60ch 안에서 세로로 쌓는다.
   세 곳만 좌우로 갈라 머리 실루엣을 A-B-A-B 로 교대시킨다.
   ⚠ .sec-title 은 clamp(28px,5vw,52px) = 뷰포트 기반이라 60ch 는 글자 크기를
     제한한 적이 없다. 얻는 것은 '실루엣 교대'이고 폭 이득은 부수적이다.
   ⚠ 부제를 fr 이 아니라 고정 트랙으로 빼야 제목 칸이 실제로 넓어진다
     (1.05fr/.95fr + vw gap 조합은 1024~1180px 에서 오히려 좁아진다).
   ⚠ .sec-eyebrow 는 내부가 flex(28×2px 선 + 글자, L1554) 라
     justify-self:start 가 없으면 셀 폭만큼 늘어나 선과 글자가 벌어진다. */
@media (min-width:1180px){
  #services .sec-head,#channels .sec-head,#pricing .sec-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,420px);
    column-gap:clamp(32px,4vw,64px);
    max-width:none;
  }
  #services .sec-head > .sec-eyebrow,
  #channels .sec-head > .sec-eyebrow,
  #pricing  .sec-head > .sec-eyebrow{ grid-column:1; grid-row:1; justify-self:start }
  #services .sec-head > .sec-title,
  #channels .sec-head > .sec-title,
  #pricing  .sec-head > .sec-title{ grid-column:1; grid-row:2 }
  #services .sec-head > .sec-lead,
  #channels .sec-head > .sec-lead,
  #pricing  .sec-head > .sec-lead{
    grid-column:2; grid-row:2; align-self:end;
    margin-top:0; padding-bottom:.5em; max-width:46ch;
  }
}

/* ── 9-b. FAQ : 페이지에서 두 번째 sticky (지금은 헤더 하나뿐) ──
   ⚠ align-items:start 가 없으면 왼쪽 칸이 행 높이로 늘어나 sticky 가 조용히 무효가 된다.
   ⚠ 300px 는 max-content 클램프라 '자주 묻는 질문'(52px) 이 2줄로 접힌다 → 340px. */
@media (min-width:1024px){
  #faq > .wrap{
    display:grid;
    grid-template-columns:minmax(0,340px) minmax(0,1fr);
    column-gap:clamp(40px,6vw,96px);
    align-items:start;
  }
  #faq .sec-head{
    position:sticky; top:calc(var(--hd-h) + 28px);
    margin-bottom:0; max-width:none;
  }
}

/* ── 10. 첫 30일 : 유일한 전폭 요소 ──────────────────────────
   페이지가 13,980px 동안 단 한 번도 1160px 밖으로 안 나간다 — 좌우 여백선이
   처음부터 끝까지 완벽한 일직선인 것이 '밋밋함'의 구조적 정체다.
   ⚠ 100vw 를 쓰지 않는다 — 스크롤바 폭만큼 문서가 넘쳐 audit(≤2px)·mobile-hit⑥ 이
     50곳을 반려한다. .sec 계열 자식은 스크롤바를 뺀 폭을 그대로 받는다.
   ⚠ *{box-sizing:border-box}(L47) 라 1360 + padding 이 1600px 에서 안 넘친다.
   ⚠ overflow-x:auto 는 overflow-y 를 visible→auto 로 강제한다 →
     padding-block 없이는 .week 그림자와 hover 들어올림이 위에서 잘린다.
   ⚠ 스크롤바를 숨기지 않는다 — 스크롤 어포던스를 스스로 지울 이유가 없다.
   ⚠ grid-template-columns:none 이 L1487(720px)·L1492(960px) 의 repeat(2/4) 를
     되돌린다. 이 블록이 파일 맨 끝이라 미디어쿼리 안 규칙도 이긴다. */
.weeks{
  width:100%;
  grid-template-columns:1fr;
  grid-auto-flow:row;
  grid-auto-columns:auto;
  gap:clamp(12px,1.4vw,18px);
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
  padding-block:4px 12px;
  overflow:visible;
}
@media (min-width:720px){ .weeks{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:960px){ .weeks{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.first30 > .wrap > .sec-head-sm{ margin-bottom:clamp(20px,2.6vw,32px) }
.first30 > .wrap:last-child{ margin-top:14px }

/* ── 10-b. 주차 진행 미터 : 4주가 진행된다는 사실을 시각화 ────
   지금 .week 4장은 똑같은 길이의 강조선(위 3px + 왼쪽 4px)을 갖는다.
   25/50/75/100% 는 일정 진행이지 성과 수치가 아니다 → 표시광고법 무관.
   ⚠ border-left:0 이 빠지면 미터가 보이는 왼쪽 끝에서 4px 안쪽에서 시작해 어긋난다. */
.weeks{ counter-reset:wk }
.week{
  position:relative; counter-increment:wk;
  border-top:0; border-left:0;
  box-shadow: inset 0 3px 0 var(--line-2), var(--sh-1);
}
.week::before{
  content:""; position:absolute; left:0; top:0; z-index:2;
  width:var(--wk,25%); height:3px; background:var(--accent);
}
.week:nth-child(1){--wk:25%}  .week:nth-child(2){--wk:50%}
.week:nth-child(3){--wk:75%}  .week:nth-child(4){--wk:100%}

/* ── 11. 채널 픽토그램 ────────────────────────────────────────
   .chan-cat 는 이미 display:flex; align-items:center; gap:6px (L470) 라
   SVG 가 첫 flex 자식으로 그대로 들어간다 — 새 레이아웃 규칙이 필요 없다.
   ⚠ .chan-mark 는 <svg class=…> 안이라 css-coverage 의 <svg> 제거 정규식에
     통째로 걷힌다(미검사). 그래도 아래에 정의해 둔다.
   ⚠ .chan-cat 이 자식을 갖게 되어 type-audit(잎 요소만) 과
     dark-contrast.mjs:59(!t || e.children.length) 두 곳의 검사에서 빠진다.
     12px 고정 --ink-3 on --panel = 5.29:1 이라 실질 위험은 없으나 인지할 것. */
.chan-mark{ flex:0 0 17px; color:var(--accent); overflow:visible }
.chan-mark circle,.chan-mark rect,.chan-mark path{ vector-effect:non-scaling-stroke }
.chan:hover .chan-mark{ color:var(--accent-ink) }

/* ── 12. 인쇄 ─────────────────────────────────────────────────
   L843 의 print 블록은 body 배경만 흰색으로 만들고 구획 배경·새 그림자는 안 잡는다.
   ⚠ display:none 에 !important 가 필요하다 — 특정성 동률이라 배치에만 의존하면 위험하다. */
@media print{
  .hero,.strip,.sec-alt:not([id]),#services,#scope,#channels,#industries,
  #process,#pricing,#faq,#contact,.ft{
    background:#fff !important; background-image:none !important;
    border-top-color:#ccc !important;
  }
  .hero,#scope,#contact,.ft{
    --ink-2:rgba(20,32,28,.72); --ink-3:rgba(20,32,28,.66);
    --line:rgba(20,32,28,.12);  --line-2:rgba(20,32,28,.20);
    --accent-ink:var(--accent-ink-lit);
    color:var(--ink) !important;
  }
  .ft-info strong,.ft .ft-brand b,.ft .ft-owner b,
  .strip-label,.strip-list li,.hero .btn-solid{ color:var(--ink) !important }
  .card,.card-lg,.chan,.week,.hero-card,.form-box,.ask-box,.notice-box,
  .edge-box,.lead-done,.contact-side,.strip,#scope,.sec-alt,.sec-contact,
  .btn-solid,.hd-cta,.btn-line,.site-header,.anchor-nav,
  .field input,.field select,.field textarea{ box-shadow:none !important }
}

/* ══════════════════════════════════════════════════════════════════════
   층 4 — 통합층 (2026-08-30). 여기서부터 파일 끝까지 한 덩어리.
   ⚠ 반드시 1차 개선층(1851~2328) 뒤, 파일 맨 끝. 앞에 끼우면 조용히 무효.
   ⚠ 되돌리려면 이 주석부터 파일 끝까지 지우고 node build.mjs.
   ══════════════════════════════════════════════════════════════════════ */

/* ── §A-1. 모바일 세로 리듬 ────────────────────────────────────────
   ≤480 규칙이 파일에 하나도 없다(min-width:480 하나뿐).
   20,772px 는 미디어쿼리가 아니라 clamp 하한값 9개가 만든 것이다.
   ⚠ .sec-title{line-height:1.06} 은 넣지 않는다 — 390px 에서 28px 글자라
     전 페이지 −10px(전체의 0.1%)인데 한글 자간 -.055em 과 겹쳐 읽기만 나빠진다. */
@media (max-width:640px){
  .sec{ padding:36px 0 }
  .sec-head{ margin-bottom:20px }
  .sec-lead{ margin-top:12px; line-height:1.7 }
  .hero{ padding:36px 0 30px }
  .hero-cta{ margin-top:22px }
  .cards{ gap:10px }
  .card{ padding:18px }
  .first30{ margin-top:32px }
  .promise{ margin-top:20px; gap:10px }
  .promise div{ padding:14px 16px }
  #scope .promise{ margin-top:24px }
  .ask-box{ margin-top:18px; padding:18px }
  .notice-box{ margin-top:16px; padding:16px 18px }
  .edge-box{ margin-top:20px }
  .ft{ padding-top:36px }
  .faq summary{ padding:16px 2px }
  .faq details > *:not(summary){ padding:0 2px 18px }
}

/* ── §A-2. 카드 덱 : 격자 3종을 한 규칙으로 눕힌다 (≤640) ─────────
   ⚠ .steps 는 넣지 않는다 — 진행 절차는 순서 정보다. 세로로 읽어야 1→2→3 이
     읽히고, 절감은 −596px(전체 5.8%)뿐인데 #process 안에서 .steps 덱과
     .weeks 덱이 연달아 두 번 나온다. 번호 가로압축(§A-3)만 취한다.
   ⚠ 100vw 금지. margin-inline 음수는 .wrap 의 padding 만 되돌리므로 상자가
     조상 폭을 절대 못 넘는다 → 클래식 스크롤바 실브라우저에서도 넘침 구조적 0.
   ⚠ overflow-x 는 auto 여야 한다. hidden 이면 clip-audit 이 넘친 항목마다
     1건씩 잡아 50곳 × 30여 건이 된다(실측).
   ⚠ 1차 §8-a .cards{align-items:start} 를 stretch 로 되돌린다 — 안 그러면
     덱 카드 아랫단이 들쭉날쭉해지고 .chan-cta{margin-top:auto} 가 죽는다.
   ⚠ scrollbar-width:none 필수 — 없으면 좁은 데스크톱 창(≤640)에서
     레일 5개 밑에 가로 스크롤바가 5줄 뜬다(headless 는 오버레이라 못 잡는다). */
@media (max-width:640px){
  .cards-2,.cards-3,.chan-grid{
    grid-template-columns:minmax(0,1fr);
    grid-auto-flow:row;
    grid-auto-columns:auto;
    align-items:stretch;
    gap:10px;
    margin-inline:0;
    padding:0;
    overflow:visible;
    scroll-snap-type:none;
  }
  .cards-2 > *,.cards-3 > *,.chan-grid > *{
    min-width:0;
    width:100%;
    scroll-snap-align:none;
  }
}

/* ── §A-3. 절차 번호 가로 압축 (덱 아님, 세로 목록 유지) ───────── */
@media (max-width:640px){
  .step{ grid-template-columns:auto minmax(0,1fr); column-gap:14px;
         padding:14px 0 18px; border-top-width:3px }
  .step-n{ padding-top:3px }
  .step b{ margin-top:0 }
  .step p{ grid-column:2; margin-top:6px }   /* 없으면 2행 1열로 떨어진다 */
}

/* ── §A-4. 덱 표지 : 몇 장 중 몇 장인지 ──────────────────────────
   ⚠ ::after 를 쓰는 이유는 "검사에서 안 빠져서" 가 아니다(dark-contrast 는
     ::after 의 color 를 애초에 읽지 않는다). <em> 같은 자식을 넣으면
     .chan-n 이 잎 요소가 아니게 되어 그 요소 자체가 검사에서 빠지기 때문이다.
   ⚠ 색은 --ink-3. 바탕은 --panel 이 아니라 #channels 의 --surf-tint 다.
     최악 대역 h240 남색 기준 5.4:1 — 전 hue 통과. */
.rail-hint{ display:none }

/* ── §B. 운영 범위 접이식 ────────────────────────────────────────
   ⚠ 마크업은 open 으로 나간다. JS 가 죽으면 지금과 똑같은 페이지가 남는다.
     (opacity:0 초기상태처럼 '콘텐츠가 영영 안 보이는' 실패 모드를 만들지 않는다)
   ⚠ 화살표는 --accent 가 아니라 --accent-soft-lit 이다. 다크 밴드(L16%) 위에서
     --accent 는 2.14~3.83(50곳)이라 h210~269 8곳에서 사실상 안 보인다.
   ⚠ summary 의 flex·화살표·min-height 는 ≤959 에만 — 전역에 두면 1440 에서도
     제목이 접히는 요소가 되어 드래그 선택이 막힌다(회귀). */
.row-body > summary{ list-style:none }
.row-body > summary::-webkit-details-marker{ display:none }
.row-body > summary::marker{ content:"" }
.row-body > summary b{ margin-bottom:0 }   /* L1114 margin-bottom:6px 이 flex 안에 남는다 */
.row-body > summary:focus-visible{ outline:3px solid var(--accent-soft-lit); outline-offset:3px }

@media (max-width:959px){
  .row-body > summary{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; cursor:pointer; min-height:var(--tap);
  }
  .row-body > summary::after{
    content:""; flex:0 0 auto; width:11px; height:11px;
    border-right:2px solid var(--accent-soft-lit);
    border-bottom:2px solid var(--accent-soft-lit);
    transform:rotate(45deg) translateY(-3px);
    transition:transform .18s ease;
  }
  .row-body[open] > summary::after{ transform:rotate(-135deg) translateY(-3px) }
}
@media (prefers-reduced-motion:reduce){ .row-body > summary::after{ transition:none } }

/* ── §C. 하단 상담 바 ────────────────────────────────────────────
   ⚠ position:fixed 는 루트 스크롤 오버플로에 기여하지 않는다(headless/headed 0).
   ⚠ mobile-hit ① 이 a.btn 을 44px 로 잰다 → min-height:50px.
   ⚠ body{padding-bottom} 을 쓰지 않는다 — body 배경(크림 #f1f2ea)으로 칠해져
     어두운 푸터 밑에 74px 밝은 띠가 남는다(실측 확인된 시각 결함).
     여백은 .ft 에 준다. body 배경을 --surf-deep 로 바꾸는 우회는 절대 금지 —
     캔버스로 전파돼 자기 배경 없는 구획이 전부 어두워진다.
   ⚠ 어떤 검사기도 '바가 #lfBtn 을 덮는 사고' 를 못 잡는다
     (audit 은 evaluate(()=>el.click()) 이라 완전히 가려도 통과시킨다). JS 가 내린다. */
.cta-dock{ display:none }
@media (max-width:640px){
  .cta-dock{
    display:flex; gap:8px; align-items:center;
    position:fixed; inset:auto 0 0 0; z-index:45;   /* 헤더 50 · 앵커띠 40 사이 */
    padding:9px var(--pad) calc(9px + env(safe-area-inset-bottom,0px));
    background:var(--surf-deep);
    border-top:1px solid rgba(255,255,255,.14);
    transform:translateY(120%);
    transition:transform .26s cubic-bezier(.2,.7,.3,1);
  }
  .cta-dock.on{ transform:none }
  .cta-dock .btn{ min-height:50px }
  .cta-dock-btn{ flex:1 1 auto }
  .cta-dock-tel{ flex:0 0 auto; padding-inline:18px;
                 color:#fff; border-color:rgba(255,255,255,.42) }
  .ft{ padding-bottom:114px }        /* 기존 40px + 바 높이 74px */
}
@media (prefers-reduced-motion:reduce){ .cta-dock{ transition:none } }

/* ── §D. 태블릿 768–959 ──────────────────────────────────────────
   820px 은 720≤w<960 버킷에 갇혀 히어로·상담·푸터가 전부 1열이었다.
   이게 '어중간' 의 정체다. 길이가 아니라 골격 문제다. */
@media (min-width:768px){
  .gnb{ display:flex }
  .anchor-nav{ display:none }        /* mobile-hit 은 375px 만 잰다 — 안전 */
}
@media (min-width:768px) and (max-width:959px){
  .hero-in{ grid-template-columns:minmax(0,1fr) minmax(250px,.66fr); align-items:start }
  .contact-in{ grid-template-columns:minmax(0,.86fr) minmax(300px,1.14fr) }
  .ft-top{ grid-template-columns:auto 1fr; align-items:center }

  /* 운영 범위 2열. ⚠ .row 내부 200px 라벨 칼럼(L1484)을 반드시 풀어야 한다 —
     안 풀면 칸이 좁아져 오히려 +183px 늘어난다(실측). */
  #scope .rows{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(28px,4vw,44px) }
  #scope .row{ grid-template-columns:minmax(0,1fr) }
  #scope .row-head{ flex-direction:row; align-items:baseline; gap:10px }

  /* 균등 2열을 7·5 / 5·7 로 깬다(1024 지그재그를 태블릿까지 내림) */
  .cards-2{ grid-template-columns:repeat(12,minmax(0,1fr)) }
  .cards-2 > :nth-child(1),.cards-2 > :nth-child(4){ grid-column:span 7 }
  .cards-2 > :nth-child(2),.cards-2 > :nth-child(3){ grid-column:span 5 }
}

/* ── §E. 채널 띠 = 페이지 유일의 광선 밴드 ──────────────────────
   결정적 사실: .strip 에 직접 자식 텍스트가 하나도 없다(sections.mjs:112-118).
   모든 글자가 흰 알약(1차 §5-b background:#fff) 안에 있고, 알약이 불투명이라
   dark-contrast.mjs:44 의 if(p.a===1) break 에서 조상 체인이 끊긴다
   → .strip 면은 글자 대비 계산에 등장하지 않는 유일한 대면적이다. */
.strip{
  background-color:var(--accent-lit);
  background-image:
    linear-gradient(102deg,
      rgba(0,0,0,.36) 0%, rgba(0,0,0,.08) 24%,
      rgba(255,255,255,.16) 47%,       /* 상한 .20(알약/면 3.16). .16 은 3.39 */
      rgba(0,0,0,.08) 74%, rgba(0,0,0,.36) 100%),
    radial-gradient(80% 190% at 50% -70%, rgba(255,255,255,.20), transparent 68%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30),
              inset 0 -1px 0 rgba(0,0,0,.34);
}
.strip-label, .strip-list li{
  box-shadow: 0 1px 2px rgba(0,0,0,.22), 0 6px 14px -6px rgba(0,0,0,.34),
              inset 0 1px 0 #fff;
}

/* ── §F-1. 히어로 겹치는 비대칭 3칼럼 ────────────────────────────
   ⚠ modern 시안의 960–1099 분기는 넣지 않는다 — 1024 에서 히어로가
     622→1019px(+397) 늘고 카드 왼쪽에 400×325 빈 다크 사각형이 생기며
     요약 카드가 1024×768 첫 화면 밖으로 밀린다(심사 실측). 1024 는 오늘 그대로.
   ⚠ margin-top 하한 232px 근거: eyebrow 20 + .hero-h{margin-top:22}
     + 2줄 × 1.1 × 72px = 200.4px(최악 --hero-ch:11, 50곳 중 18곳).
     실측 여유 1100/1180/1280 24.3px · 1440 37.1 · 1600 44.3. */
@media (min-width:1100px){
  .hero-in{
    --hero-lap:clamp(88px,13vw,156px);
    grid-template-columns:minmax(0,1fr) var(--hero-lap) minmax(288px,340px);
    column-gap:0;
  }
  .hero-copy{ grid-column:1 / 3; grid-row:1 }
  .hero-card{
    grid-column:2 / 4; grid-row:1; align-self:stretch;
    margin-top:clamp(232px,17vw,252px);
    margin-bottom:-116px;            /* 히어로 padding-bottom 72 + 띠 침범 44 */
    display:flex; flex-direction:column;
  }
  .hero-card .hc-stats{ margin-top:auto }
}
@media (min-width:960px){
  .hc-stats b{ font-size:clamp(24px,3.4vw,40px) }   /* ⚠ 반드시 ≥960 안 */
}

/* ── §F-2. why 벤토 7 / 5 (≥900) ─────────────────────────────────
   이 구획의 .edge-box 는 50곳이 서로 달라지는 유일한 문장인데
   카드 3장 아래 가장 안 읽히는 자리에 있다. 구획이 오히려 −101px 짧아진다.
   ⚠ grid-row 를 양쪽 다 명시해야 한다 — grid 자동배치는 DOM 순서 커서라
     명시하지 않으면 겹치려던 항목이 조용히 다음 행으로 떨어진다.
   ⚠ .sec-alt:not([id]) 는 why 전용이다(1차가 tint 밴드를 이 선택자로 가른다).
     why 에 id 를 붙이는 순간 배경과 이 벤토가 동시에 사라진다. */
@media (min-width:900px){
  .sec-alt:not([id]) > .wrap{
    display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:clamp(24px,3vw,44px); row-gap:clamp(26px,3.2vw,44px);
    align-items:start;
  }
  .sec-alt:not([id]) > .wrap > .sec-head{ grid-column:1 / 8; grid-row:1;
    margin-bottom:0; max-width:none }
  .sec-alt:not([id]) > .wrap > .edge-box{ grid-column:8 / 13; grid-row:1;
    margin-top:0; align-self:stretch;
    display:flex; flex-direction:column; justify-content:center }
  .sec-alt:not([id]) > .wrap > .cards{ grid-column:1 / -1; grid-row:2 }
}

/* ── §F-3. #scope 인셋 라운드 슬랩 + 붙는 머리 ──────────────────
   페이지가 처음부터 끝까지 좌우 여백선이 완벽한 일직선이다.
   1차는 첫 30일 레일로 '밖으로' 깼다 — 여기서는 '안으로' 깬다.
   ⚠ #scope 에 overflow 를 절대 걸지 마라 — sticky 머리가 조용히 죽고
     clip-audit 위험이 생긴다. 오로라·그레인은 border-radius:inherit 로 처리한다.
   ⚠ align-items:start 가 없으면 sticky 가 조용히 죽는다.
   ⚠ 1180 미만으로 내리지 마라 — 1024 에서 시험하면 #scope 가 +434px 늘어난다. */
@media (min-width:720px){
  #scope{
    margin-inline:clamp(12px,2.4vw,28px);
    border-radius:clamp(18px,2.6vw,36px);
    box-shadow:var(--sh-4);          /* 잉크 전용 — 1차 '그림자에 강조색 금지' 준수 */
  }
}
@media (min-width:1180px){
  #scope > .wrap{
    display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr);
    column-gap:clamp(40px,5vw,76px); align-items:start;
  }
  #scope > .wrap > .sec-head{ position:sticky; top:calc(var(--hd-h) + 28px);
    margin-bottom:0; max-width:none }
  #scope > .wrap > .rows{ grid-column:2 }
  #scope > .wrap > .promise{ grid-column:1 / -1; margin-top:clamp(28px,4vw,52px) }
}

/* ── §F-4. .cards-3 태블릿~좁은데스크톱 6·6/12 (720–1023) ────────
   820 에서 3열이 되어 카드 안쪽 글자폭이 187px(12자/줄)까지 좁아진다.
   ⚠ 상한을 1023 으로 둔다(원안 899 는 900px 에서 357→214px, 1px 차이로 −40%
     절벽을 만든다). 3장 → 6·6/12, 5장 → 6·6/6·6/12 라 마지막 칸이 안 빈다.
   ⚠ 960–1023 에서 1차 §2 의 #pricing 4·5번 가로배치를 되돌린다 —
     span 6 칸에서 가로배치가 겹친다. */
@media (min-width:720px) and (max-width:1023px){
  .cards-3 > *{ grid-column:span 6 }
  .cards-3 > :last-child{ grid-column:span 12 }
  #pricing .cards-3 > :nth-child(n+4){ display:block }
  #pricing .cards-3 > :nth-child(n+4) .card-n{ margin:0 0 6px; padding:0; border-bottom:0 }
}

/* ── §F-5. #industries 거울 + #contact 상담폼 침범 ───────────────
   ⚠ margin-top 스태거는 넣지 않는다 — #industries +230px 중 128px 이
     스태거값이고 얻는 건 '기준선이 어긋난다' 하나뿐이다. 거울(+102px)만 취한다. */
@media (min-width:1024px){
  #industries .cards-2{ grid-template-columns:repeat(12,minmax(0,1fr)) }
  #industries .cards-2 > :nth-child(1){ grid-column:span 5 }
  #industries .cards-2 > :nth-child(2){ grid-column:span 7 }
  #industries .cards-2 > :nth-child(3){ grid-column:span 7 }
  #industries .cards-2 > :nth-child(4){ grid-column:span 5 }
}
@media (min-width:960px){
  #contact{ padding-top:clamp(40px,5vw,64px) }
  #contact .form-box{ margin-top:calc(-1 * clamp(48px,7.5vw,104px)) }
}

/* ── §G-1. 무패턴 딥 서피스 ──────────────────────────────────────
   히어로·운영 범위·상담 구간에 있던 가로/세로 반복 격자를 제거한다.
   단일 비네트와 아래 오로라 메시만 사용해 넓고 매끈한 브랜드 면을 만든다. */
body{ --surface-vignette: rgba(0,0,0,.30) }
.hero, #scope, #contact{
  background-image:
    radial-gradient(128% 96% at 50% 24%,
      rgba(255,255,255,.025) 0%, transparent 52%, var(--surface-vignette) 100%);
  background-size:100% 100%;
  background-position:center;
  background-repeat:no-repeat;
}

/* ── §G-2. 오로라 메시 ───────────────────────────────────────────
   ⚠ 하드 상한을 opacity 로 건다. 내부 3겹 최대 합성 .5304 × .34 = 0.1803.
   ⚠ #scope 만 .26 이다 — §J-3 hover 워시(α .10)가 같은 면에서 합산되기 때문.
     1-(1-.5304×.26)(1-.10) = .224 로 상한 안. 이 두 값을 함께 올리지 마라.
   ⚠ color-mix 미지원은 background 선언 전체를 파싱 단계에서 버린다
     → ::before 가 투명한 빈 상자로 남는다. @supports 없이 폴백 정상.
   ⚠ filter:blur() 를 쓰지 않는다 — #channels(모바일 5,148px)에 걸면
     DPR3 서피스 72.3MB(뷰포트 6배). 정지 stop 만으로 이미 부드럽다.
   ⚠ #scope 는 §F-3 에서 border-radius 가 생기므로 inherit 필수. */
.hero, #scope, #contact, .ft{ position:relative; isolation:isolate }
.hero::before, #scope::before, #contact::before, .ft::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit;
  opacity:.34;
  background:
    radial-gradient(58% 46% at  8% -6%,
      color-mix(in srgb, var(--accent-lit) 30%, transparent) 0, transparent 66%),
    radial-gradient(40% 55% at 92% 96%,
      color-mix(in srgb, var(--accent-lit) 22%, transparent) 0, transparent 62%),
    radial-gradient(74% 54% at 76%  4%,
      color-mix(in srgb, var(--accent-lit) 14%, transparent) 0, transparent 58%);
}
#scope::before{ opacity:.26 }
@media (min-width:1180px){
  .hero::before, #scope::before, #contact::before, .ft::before{
    background-position:-8% 0, 8% 0, 0 0;   /* 광원 중심을 글자 칼럼 밖으로 */
  }
}
@media (max-width:600px){
  /* 좁은 화면은 세로로 길다 — 가로로 퍼지는 광원이 띠처럼 보인다. 세로로 세운다 */
  .hero::before, #scope::before, #contact::before, .ft::before{
    background:
      radial-gradient(120% 34% at 50% -2%,
        color-mix(in srgb, var(--accent-lit) 30%, transparent) 0, transparent 66%),
      radial-gradient( 96% 26% at 50% 101%,
        color-mix(in srgb, var(--accent-lit) 22%, transparent) 0, transparent 62%);
  }
}

/* ── §G-3. 필름 그레인 ───────────────────────────────────────────
   ⚠ opacity 를 .05 → .03 으로 낮춘다. feTurbulence 는
     color-interpolation-filters 기본값이 linearRGB 라 타일 평균이 sRGB 127.5 가
     아니라 실측 188 이다 — 원안은 밝기를 정확히 2배 과소평가했다. */
.hero::after, #scope::after, #contact::after, .ft::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px;        /* 타일 = 캐시된다 */
}

/* ── §H. 히어로 요약 카드 · 상담 폼 : 빛이 훑고 지나가는 테두리 ───
   대비 위험이 구조적으로 0 인 유일한 화려함이다 — 테두리만 칠하고 면은
   1픽셀도 안 건드린다. 이 둘만 고른 이유: 1차 §5-a/§5-c 가 이미
   border-color:transparent 로 만들어 뒀다(충돌 0). .card/.chan 은
   1차 §3 이 위/아래 테두리 색으로 베벨을 만들어 뒀으므로 건드리면 1차를 깬다.
   ⛔ background 단축은 background-color 를 초기화해 rgba(0,0,0,0) 으로 만든다
      → dark-contrast.mjs:44 의 bgOf 가 알파 0 을 건너뛰고 조상으로 올라가
      카드/폼 안 모든 글자를 --surf-deep 위에서 잰다 → 사이트당 16건,
      50곳 약 800건 반려(실측). background-color 재선언이 그것을 되살린다.
   ⛔ var(--ang) 에 폴백이 없으면 @property 미등록 브라우저에서
      선언 전체가 무효(IACVT)가 되어 판이 통째로 사라진다 — Safari<16.4 /
      Firefox<128 에서 어두운 밴드 위에 진한 글자만 남아 상담 폼을 못 읽는다. */
@property --ang{ syntax:'<angle>'; initial-value:0deg; inherits:false }

.hero .hero-card, #contact .form-box{
  border:1px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    conic-gradient(from var(--ang, 0deg) at 50% 50%,
      transparent 0 56%,
      color-mix(in srgb, var(--accent-lit) 92%, #fff) 72%,
      color-mix(in srgb, var(--accent-lit) 46%, #fff) 80%,
      transparent 90% 100%) border-box;
  background-color:var(--panel);        /* ← 반드시 단축 뒤. 이 1줄이 없으면 800건 반려 */
}
@keyframes ag-sweep{ to{ --ang:360deg } }
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .hero .hero-card, #contact .form-box{ animation:ag-sweep 11s linear infinite }
}

/* ── §I-1. 스크롤 등장 ───────────────────────────────────────────
   ⚠ transform 이 아니라 translate 프로퍼티다. animation 오리진은
     author-normal 선언을 이기고 fill:both 로 상시 in-effect 라, transform 을
     쓰면 1차층 hover 들어올림 4종(.card/.card-lg/.chan/:active)이
     view() 지원 브라우저 85%에서 통째로 죽는다. translate 는 별개 프로퍼티라 공존.
   ⚠ animation 단축 금지 — animation-timeline 을 auto 로 리셋한다. 롱핸드만.
   ⚠ scale·letter-spacing 금지 — type-audit ② 가 250ms 시점 Range 폭을 재서
     이동 중이면 가짜 '넘침' 이 50곳 × 2폭으로 쏟아진다(실측 scale(1.15) → 2건).
   ⚠ @supports 안에 규칙을 넣는다 — 미지원(≈15%)은 opacity:0 을 아예 못 보므로
     '안 보이는 사이트' 사고가 원천 차단된다. JS 는 한 줄도 쓰지 않는다.
   ⚠ min-width:641 게이트 필수 — ≤640 에서 .cards-2/.cards-3/.chan-grid 가
     overflow-x:auto 스크롤 컨테이너가 되어 view(block) 이 그 안쪽을
     스크롤포트로 잡는다. 그 조합은 검증하지 못했다. 모바일은 덱 자체가 움직임이다.
   ⚠ .week 제외(.weeks 가 항상 가로레일) · #faq .sec-head 제외(sticky) ·
     #scope .sec-head 제외(§F-3 에서 sticky 가 됐다) · .hero 내부 제외(첫 화면). */
@keyframes ag-rise{
  from{ opacity:0; translate:0 18px }
  to  { opacity:1; translate:none }
}
@supports (animation-timeline: view()){
 @media (min-width:641px) and (prefers-reduced-motion: no-preference){
  .card, .chan, .row, .step, .ask-box, .notice-box, .edge-box{
    animation-name:ag-rise; animation-timing-function:linear;
    animation-fill-mode:both; animation-timeline:view();
    animation-range: entry 8% entry 62%;
    /* will-change 금지 — 40개 × DPR3 ≈ 80MB. 스크롤 구동 opacity/translate 는
       이미 컴포지터에서 돈다(레이어 생성 여부는 저사양 실측 미검증). */
  }
  /* 짧은 요소는 cover 로 절대 거리를 잡는다 — entry X% entry Y% 는 페이스가
     요소 높이에 묶여 .sec-head(약 120px)가 화면 최하단 93px 에서 이미 끝난다. */
  .sec:not(#faq):not(#scope) > .wrap > .sec-head,
  .first30 > .wrap > .sec-head-sm{
    animation-name:ag-rise; animation-timing-function:linear;
    animation-fill-mode:both; animation-timeline:view();
    animation-range: entry 10% cover 28%;
  }
  /* 열 시차 — 열 매핑이 맞는 폭에서만. 원안의 .cards>:nth-child(3n) 은
     .cards-2 2행에서 좌우가 뒤집혔다. */
  @media (min-width:720px){
    .cards-2 > :nth-child(2n){ animation-range: entry 12% entry 66% }
  }
  @media (min-width:1024px){
    .cards-3 > :nth-child(3n+2), .chan-grid > :nth-child(3n+2){ animation-range: entry 12% entry 66% }
    .cards-3 > :nth-child(3n+3), .chan-grid > :nth-child(3n+3){ animation-range: entry 16% entry 70% }
  }
 }
}

/* ── §I-2. 스크롤 진행바 ─────────────────────────────────────────
   장식이 아니다. 모바일 12~13화면짜리 페이지의 방향감각이다. 마크업 0.
   ⚠ body::before 는 이 층이 점유한다. 다른 곳에서 쓰지 마라.
   ⚠ position:fixed 는 루트 스크롤 오버플로에 기여하지 않는다(headless/headed 0). */
@keyframes ag-prog{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
@supports (animation-timeline: scroll()){
 @media (prefers-reduced-motion: no-preference){
  body::before{
    content:''; position:fixed; left:0; top:0; z-index:60;
    width:100%; height:3px;
    background:var(--accent-lit);
    transform-origin:0 50%; transform:scaleX(0);
    pointer-events:none;
    animation-name:ag-prog; animation-timing-function:linear;
    animation-fill-mode:both; animation-timeline:scroll(root block);
  }
 }
}

/* ── §J-1. 카드 테두리 스윕 + 화살표 ─────────────────────────────
   밝은 면 예산이 0.26% 라 면은 못 칠한다. mask 로 안쪽을 도려내
   테두리 1px 만 칠한다 — 면에는 1픽셀도 안 닿는다.
   ⚠ content 는 모션 게이트 밖이다. 콘텐츠 유무를 모션 선호도로 가르지 마라. */
.card::after, .chan::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  pointer-events:none; padding:1px;
  background:linear-gradient(148deg,
    color-mix(in srgb, var(--accent-lit) 62%, transparent)  0%,
    transparent 34% 66%,
    color-mix(in srgb, var(--accent-lit) 24%, transparent) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;  mask-composite:exclude;
  opacity:0; transition:opacity .24s cubic-bezier(.2,.7,.3,1);
}
@media (hover:hover){ .card:hover::after, .chan:hover::after{ opacity:1 } }
.card:focus-within::after, .chan:focus-within::after{ opacity:1 }

.chan-cta::after{ content:"\2192"; display:inline-block; margin-left:.35em }
@media (prefers-reduced-motion: no-preference){
  .chan-cta::after{ transition:transform .22s cubic-bezier(.2,.7,.3,1) }
  @media (hover:hover) and (pointer:fine){
    .chan:hover .chan-cta::after{ transform:translateX(5px) }
    .chan:hover .chan-mark{ transform:scale(1.12) rotate(-4deg) }
  }
  .chan-cta:focus-visible::after{ transform:translateX(5px) }
  .chan-mark{ transition:transform .22s cubic-bezier(.2,.7,.3,1), color .18s ease }
}
/* hover 한정 강조색 그림자 — 정지 상태 그림자는 1차 값 그대로다 */
@media (hover:hover){
  .card:hover{ box-shadow: var(--sh-3),
    0 22px 46px -22px color-mix(in srgb, var(--accent-lit) 46%, transparent) }
  .chan:hover{ box-shadow: var(--sh-2),
    0 18px 36px -18px color-mix(in srgb, var(--accent-lit) 40%, transparent) }
}

/* ── §J-2. 상태 전환 3종 ─────────────────────────────────────────
   1차가 그림자 사다리를 만들어 놨는데 전환이 없다. */
@media (prefers-reduced-motion: no-preference){
  .anchor-nav a{ transition: background-color .2s ease, border-color .2s ease, color .2s ease }
  .btn, .hd-cta{ transition: transform .15s ease, filter .15s ease,
                             background-color .15s ease, color .15s ease,
                             box-shadow .2s cubic-bezier(.2,.7,.3,1) }
  @keyframes ag-done{ from{ opacity:0; translate:0 10px } to{ opacity:1; translate:none } }
  .lead-done:not([hidden]){ animation: ag-done .38s cubic-bezier(.2,.7,.3,1) both }
}

/* ── §J-3. #scope 행 hover 워시 ──────────────────────────────────
   ⚠ dark-contrast 는 그라디언트를 못 본다 → 거짓 초록불. 계산이 증거다.
   ⚠ α 를 .14 → .10 으로 낮췄다 — §G-2 오로라(#scope .26)와 같은 면에서
     합산되기 때문. 합성 .224 로 상한 안. 이 값과 오로라를 함께 올리지 마라.
   ⚠ motion 시안이 제시한 상한 0.38 은 재계산 결과 4.25(미달)다. 실제 상한 0.30. */
@media (prefers-reduced-motion: no-preference){
  #scope .row{ position:relative; isolation:isolate }
  #scope .row::after{
    content:''; position:absolute; inset:0; z-index:-1;
    pointer-events:none; opacity:0; transition:opacity .28s ease;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--accent-lit) 10%, transparent) 0%,
      color-mix(in srgb, var(--accent-lit)  3%, transparent) 46%,
      transparent 78%);
  }
  @media (hover:hover) and (pointer:fine){ #scope .row:hover::after{ opacity:1 } }
}

/* ── §J-4. CTA 발광 + 다크면 포커스 색 ───────────────────────────
   면은 절대 못 건드린다(#fff on --accent 최소 4.5039, 여유 0.0039).
   box-shadow 는 요소 밖이라 대비 계산과 무관하다.
   ⚠ #contact 의 border-top:6px 는 그대로 둔다 — inset box-shadow 는
     z-index:-1 의 ::before 아래에 그려져 오로라에 덮인다(합성 실측).
   ⚠ 1차 site.css:80 의 outline:3px 굵기를 건드리지 않는다. 다크 4곳만 색 교체 —
     accent/accent-deep 은 24/50 곳에서 3:1 미달(최악 2.13)이다. */
.hero .btn-solid{
  box-shadow:
    0 1px 2px rgba(0,0,0,.30),
    inset 0 -1px 0 rgba(20,32,28,.10),                        /* ← 1차 §7 값 보존 */
    0 0 0 7px  color-mix(in srgb, var(--accent-lit) 20%, transparent),
    0 16px 40px -12px color-mix(in srgb, var(--accent-lit) 72%, transparent);
}
.hero .btn-solid:hover{
  box-shadow:
    0 1px 2px rgba(0,0,0,.30), inset 0 -1px 0 rgba(20,32,28,.10),
    0 0 0 10px color-mix(in srgb, var(--accent-lit) 26%, transparent),
    0 20px 52px -12px color-mix(in srgb, var(--accent-lit) 88%, transparent);
}
.form-box .btn-solid, .hd-cta{
  box-shadow: var(--sh-1),
    inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(20,32,28,.20),
    0 12px 30px -10px color-mix(in srgb, var(--accent-lit) 55%, transparent);
}
#contact{ box-shadow: inset 0 7px 22px -6px
  color-mix(in srgb, var(--accent-lit) 70%, transparent) }
.hero :focus-visible, #scope :focus-visible,
#contact .contact-copy :focus-visible, .ft :focus-visible{
  outline-color: var(--accent-soft-lit);
}

/* ── §K-1. FAQ 열림 애니메이션 ───────────────────────────────────
   ::details-content 는 2025-09 Baseline(Chrome·FF·Safari 전부).
   interpolate-size 는 크로미움 전용 → 다른 엔진은 즉시 열림(기능 정상).
   ⚠ :root 가 아니라 .faq 에 건다 — 상속 프로퍼티라 스코프로 충분하고,
     §B 의 .row-body details 나 다른 곳에 전역 영향을 주지 않는다. */
@supports (interpolate-size: allow-keywords){
 @media (prefers-reduced-motion: no-preference){
  .faq{ interpolate-size: allow-keywords }
  .faq details::details-content{
    block-size:0; overflow:hidden;
    transition: block-size .32s cubic-bezier(.2,.7,.3,1),
                content-visibility .32s allow-discrete;
    transition-behavior: allow-discrete;
  }
  .faq details[open]::details-content{ block-size:auto }
 }
}
@media (prefers-reduced-motion: no-preference){
  .faq summary::after{ transition: transform .3s cubic-bezier(.2,.9,.3,1.25) }
}

/* ── §K-2. 타이포 : 바이트 0, 즉효 ───────────────────────────────
   Pretendard Variable(wght 45–920)이 sections.mjs:52 에서 이미 로드 중이다.
   외부 자산 추가가 아니라 안 쓰던 축을 여는 것뿐이다.
   ⚠ wght < 400 은 넣지 않는다 — 밝은 면 대비 여유가 0.00~0.20 이라
     얇은 획은 WCAG 숫자를 안 바꾸면서 체감 대비를 깎는다. */
h1,h2,.sec-title,.hero-h{ text-wrap:balance }
p,.chan-desc,.sec-lead{ text-wrap:pretty }
.sec-title{ font-weight:820 }
.chan-cat{ font-weight:620 }

/* ══════════════════════════════════════════════════════════════════════
   §L. 감소모션 가드 · 인쇄 리셋 — ★ 반드시 파일의 마지막 블록이다.
   site.css:1846 의 가드(.card:hover,.chan:hover{transform:none})는
   1차층 L1991~1993 이 소스 뒤에 있어 이미 죽어 있다(미디어쿼리는 특정성을
   안 올린다). CSSOM 실측으로 확인된 라이브 버그다 — 지금 감소모션
   사용자에게도 카드가 3px 튄다. !important 로 다시 세운다.
   ⚠ 새 블록을 §L 뒤에 붙이면 같은 함정이 반복된다.
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .card:hover, .card-lg:hover, .card:active,
  .chan:hover, .chan:active{ transform:none !important }
  .hero .hero-card, #contact .form-box{ animation:none !important }
  .card::after, .chan::after, .chan-cta::after{ transition:none !important }
  .chan:hover .chan-cta::after, .chan:hover .chan-mark{ transform:none !important }
  html{ scroll-behavior:auto !important }
}

/* 인쇄 — 새 의사요소가 print 에서 살아남는 것을 실측 확인했다(1차 인쇄 리셋을
   부분 무효화한다). body::before(진행바)·.cta-dock 도 함께 지운다. */
@media print{
  .hero::before,#scope::before,#contact::before,.ft::before,
  .hero::after, #scope::after, #contact::after, .ft::after,
  .card::after, .chan::after,
  body::before, .cta-dock{ display:none !important }
  .hero .hero-card, #contact .form-box{
    background:#fff !important; border-color:#ccc !important }
  #scope{ box-shadow:none !important; margin-inline:0 !important; border-radius:0 !important }
  .strip{ background-image:none !important; box-shadow:none !important }
}

/* ── 성능·경계 정리 (2026-08-30, 3차) ──────────────────────────────
   사장님 지적: "반응형이라 렉이 좀 있는 것 같아 / 스크롤할 때 글이 겹치는 경우도 있음"

   실측(모바일 390px · CPU 4배 느리게 · 5회 중간값):
     지금 그대로                버벅임 1033ms · 최악 883ms  (범위 266~1966 — 매우 불안정)
     어두운면 효과를 끄면          299ms · 50ms   −71%
     어두운면 GPU 승격(효과 유지)   283ms · 50ms   −73%   ← 끄는 것과 같은 성능
     헤더 blur 줄이기            349ms · 50ms   −66%
     둘 다                     250ms · 50ms   −76%
   ⚠ 효과를 끄는 것과 GPU 로 올리는 것의 성능이 같다 → 화려함을 버릴 이유가 없다. */

/* ① 어두운 면의 큰 그라디언트를 GPU 텍스처로 승격한다.
      매 프레임 다시 칠하던 것을 한 번 칠하고 옮기기만 하게 만든다.
      ⚠ will-change 는 남발하면 메모리를 먹는다. 스크롤 내내 다시 칠해지는
        이 8개(구획 4곳 × ::before/::after)에만 건다. */
.hero::before,.hero::after,
#scope::before,#scope::after,
#contact::before,#contact::after,
.ft::before,.ft::after{
  transform:translateZ(0);
  will-change:transform;
}

/* ② 붙는 막대를 불투명하게 + 경계를 또렷하게.
      ⚠ '글자가 비쳐 보인다' 가 원인은 아니었다 — 막대를 완전 불투명으로 바꿔
        같은 자리를 찍어 비교하니 픽셀 차이 0.00% 였다.
      진짜 문제는 blur 가 경계에서 글자를 뭉개는 것이다. 1차 전에는 막대 위아래가
      같은 크림색이라 안 보였는데, 어두운 구획이 생기면서 흰 글자가 잘리는 자리에
      번짐이 겹쳐 '글이 겹친 것' 처럼 보인다.
      → blur 를 줄이고 바탕을 불투명하게 해 자르는 선을 또렷한 경계로 만든다. */
.site-header{
  background:var(--bg);
  backdrop-filter:saturate(1.4) blur(6px);
  -webkit-backdrop-filter:saturate(1.4) blur(6px);
}
.anchor-nav{
  background:var(--bg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* ③ 메뉴로 이동했을 때 제목이 막대 밑에 깔리지 않게.
      전역값은 헤더(68) + 12 = 80px 인데, 모바일은 막대가 둘이라 129px 를 가린다.
      실측: #services "WHAT WE DO" 13px · #pricing "CUSTOM QUOTE" 9px 가려짐.
      ⚠ 767px 이하에서만 — 768px 부터는 앵커 띠가 사라지고 헤더 메뉴가 나온다. */
@media (max-width:767px){
  :root{ --anchor-mobile-h:103px }
  html{ scroll-padding-top:calc(var(--hd-h) + var(--anchor-mobile-h) + 12px) }
  .anchor-nav{ overflow:visible }
  .anchor-nav ul{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    width:auto;
  }
  .anchor-nav li{ min-width:0 }
  .anchor-nav a{
    width:100%;
    min-width:0;
    min-height:40px;
    justify-content:center;
    padding-inline:6px;
    font-size:13px;
  }
}

/* ── 덱 엿보기 정리 (2026-08-30, 4차) ─────────────────────────────
   사장님 지적: "폰에서 채널카드 근처에서 글이 겹친다".

   원인(실측 360~430px 전 폭):
     카드가 80% 라 두 번째 카드가 72~86px 만 보이는데,
     카드 안쪽 여백 16px 을 빼면 **글자가 55~69px 만 보인다.**
     그래서 화면 오른쪽 끝에 단어 중간이 잘린 글자가 10줄 세로로 늘어서고,
     첫 카드의 멀쩡한 글자 바로 옆에 붙어 '두 글이 겹친 것' 처럼 읽힌다.
       구글 광고 → "구글 광" · Google Ads → "Google A" · 검색·디스플레이 → "검색·디스플"

   처방 둘을 함께 쓴다:
     ① 카드를 넓혀(80→88%) 엿보이는 폭을 줄인다 — 카드 모서리만 보이고 글자는 거의 안 걸린다.
     ② 오른쪽 끝 26px 을 흐리게 지운다 — 남은 글자 꼬리가 사라져 '잘린 글' 이 아니라
        '옆에 더 있다' 로 읽힌다.
   ⚠ 마스크는 스크롤 상자 자체에 건다. 내용이 아니라 상자에 걸리므로 밀어도 끝에 그대로 있다.
   ⚠ .cards-2/.cards-3 는 카드가 3~5장뿐이라 80% 를 유지한다 — 넓히면 한 장씩만 보여
     '옆에 더 있다' 는 신호가 사라진다. 채널(12장)만 손본다. */
@media (max-width:640px){
  .chan-grid{
    grid-auto-columns:auto;
    -webkit-mask-image:none;
            mask-image:none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   §M. 2026-10-21 에이전시 개편 — 히어로 아트·키네틱 등장·상태 화면·실측 결함
   ⚠ 감소모션 가드(파일 맨 끝 블록) **앞**에 둔다. 뒤에 두면 가드를 눌러 죽인다.
   ⚠ 되돌리기: 이 §M 블록 통째 삭제 + sections.mjs 의 heroArt·.hl 두 곳 +
     app.js 의 접수 완료 스크롤·aria-invalid → node build.mjs
   ══════════════════════════════════════════════════════════════════════════ */

/* §M-0. 글꼴 교체 순간의 밀림(CLS 0.12~0.29 실측) 제거.
   원인: Pretendard 가 늦게 오면 맑은 고딕으로 먼저 그렸다가 바꿔 그린다. 맑은 고딕이
   약 15% 넓어 히어로 문단이 한 줄 더 길었다가 줄며 아래 전체가 30px 튀어 올랐다.
   처방: 맑은 고딕을 Pretendard 폭에 맞춘 대체 글꼴을 사이에 끼운다.
   ⚠ 한 비율로 줄이면 안 된다 — 글자 종류마다 폭 비가 다르다(실측, 페이지 글 전체):
     한글 .864 · 영문·숫자 1.021 · 문장부호 1.135(굵게 1.07) · 띄어쓰기 .714(굵게 .657).
     한 비율(.852)로는 합계 폭은 0.5% 안으로 맞아도 띄어쓰기·영문이 어긋나 줄이 갈렸다.
     → unicode-range 로 네 갈래를 따로 맞춘다. ascent/descent 는 Pretendard(0.95/0.24)를 비율로 환산.
   맥·안드로이드는 local() 이 없어서 이 면이 조용히 건너뛰어진다(기존 차례 그대로). */
@font-face{ font-family:"PFB Malgun"; font-weight:100 599; font-display:swap; src:local("Malgun Gothic"),local("MalgunGothic"),local("맑은 고딕");
  size-adjust:86.4%; ascent-override:110.0%; descent-override:27.8%; line-gap-override:0%; unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF }
@font-face{ font-family:"PFB Malgun"; font-weight:100 599; font-display:swap; src:local("Malgun Gothic"),local("MalgunGothic"),local("맑은 고딕");
  size-adjust:102.1%; ascent-override:93.0%; descent-override:23.5%; line-gap-override:0%; unicode-range:U+30-39,U+41-5A,U+61-7A }
@font-face{ font-family:"PFB Malgun"; font-weight:100 599; font-display:swap; src:local("Malgun Gothic"),local("MalgunGothic"),local("맑은 고딕");
  size-adjust:71.4%; ascent-override:133.1%; descent-override:33.6%; line-gap-override:0%; unicode-range:U+20 }
@font-face{ font-family:"PFB Malgun"; font-weight:100 599; font-display:swap; src:local("Malgun Gothic"),local("MalgunGothic"),local("맑은 고딕");
  size-adjust:113.5%; ascent-override:83.7%; descent-override:21.1%; line-gap-override:0%; unicode-range:U+21-2F,U+3A-40,U+5B-60,U+7B-7E,U+A0-FF,U+2000-206F,U+2190-21FF }
@font-face{ font-family:"PFB Malgun"; font-weight:600 1000; font-display:swap; src:local("Malgun Gothic Bold"),local("MalgunGothicBold"),local("Malgun Gothic");
  size-adjust:86.4%; ascent-override:110.0%; descent-override:27.8%; line-gap-override:0%; unicode-range:U+1100-11FF,U+3130-318F,U+A960-A97F,U+AC00-D7A3,U+D7B0-D7FF }
@font-face{ font-family:"PFB Malgun"; font-weight:600 1000; font-display:swap; src:local("Malgun Gothic Bold"),local("MalgunGothicBold"),local("Malgun Gothic");
  size-adjust:102.1%; ascent-override:93.0%; descent-override:23.5%; line-gap-override:0%; unicode-range:U+30-39,U+41-5A,U+61-7A }
@font-face{ font-family:"PFB Malgun"; font-weight:600 1000; font-display:swap; src:local("Malgun Gothic Bold"),local("MalgunGothicBold"),local("Malgun Gothic");
  size-adjust:65.7%; ascent-override:144.6%; descent-override:36.5%; line-gap-override:0%; unicode-range:U+20 }
@font-face{ font-family:"PFB Malgun"; font-weight:600 1000; font-display:swap; src:local("Malgun Gothic Bold"),local("MalgunGothicBold"),local("Malgun Gothic");
  size-adjust:107.0%; ascent-override:88.8%; descent-override:22.4%; line-gap-override:0%; unicode-range:U+21-2F,U+3A-40,U+5B-60,U+7B-7E,U+A0-FF,U+2000-206F,U+2190-21FF }
body{
  font-family:'Pretendard Variable',"PFB Malgun",Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',sans-serif;
  /* 간격 사다리 — §M 새 규칙은 이 값만 쓴다(4/8 배수) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --ok-ink:#1d6b45; --bad-ink:#a4331f; --bad-soft:#fdecea; --bad-line:#f0b6aa;
}

/* §M-1. 헤더 blur 제거 — 바탕이 이미 불투명(var(--bg))이라 blur 는 렉 비용만 냈다 */
.site-header{ -webkit-backdrop-filter:none; backdrop-filter:none }

/* §M-2. 테두리 훑기: 무한 반복 → 처음 한 번 + 상담 폼에 들어올 때 한 번.
   @property 각도 애니메이션은 페인트라 11초마다 영원히 다시 칠했다. */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  .hero .hero-card{ animation:ag-sweep 2.4s cubic-bezier(.4,0,.2,1) .6s 1 both }
  #contact .form-box{ animation:none }
  #contact .form-box:focus-within{ animation:ag-sweep 1.6s cubic-bezier(.4,0,.2,1) 1 both }
}

/* §M-3. 모바일 앵커 띠 — 3×2 격자는 유지(⚠ mobile-hit.mjs 규칙: 여섯 링크가 모두 한 화면에 보여야 한다),
   버튼 높이만 40 → 44(터치 기준). 줄 간격 6→4·위아래 8 로 띠 높이는 103 → 108px(+5). */
@media (max-width:767px){
  :root{ --anchor-mobile-h:108px }
  .anchor-nav ul{ gap:var(--sp-1) 6px; padding-block:var(--sp-2) }
  .anchor-nav a{ min-height:44px }
}

/* §M-4. 369 홍보 띠 — 9px 머리글(실측)·38px 버튼 → 12px·44px */
/* 그라디언트만 있고 바탕색이 없어 대비 검사기가 크림 위 흰 글자(1.06)로 읽었다. 같은 어두운 색을 바탕색으로도 둔다 */
.network-promo{ background-color:#14231f }
.network-promo-copy span{ font-size:12px }
.network-promo-btn{ min-height:44px }
@media (max-width:700px){
  .network-promo-copy span{ font-size:12px; letter-spacing:.04em }
  .network-promo-btn{ min-height:44px }
}
.ft-nav a{ min-width:48px; justify-content:center }

/* §M-5. 워드마크 강조 글자 대비 — 버튼 면 색(--accent, 흰 글자용)을 크림 위 글자로
   쓰고 있었다(4.02~4.23, 기준 4.5). 글자용 --accent-ink 로. 어두운 푸터는 옅은 색으로(2.41 → 통과).
   작은 영문(compact .72em = 9.7~10.8px)은 12px 하한. */
.site-header .brand-wordmark--truepixel b span, .site-header .brand-wordmark--accent-tail b span,
.hub-card .brand-wordmark--truepixel b span, .hub-card .brand-wordmark--accent-tail b span{ color:var(--accent-ink) }
.ft .brand-wordmark--truepixel b span, .ft .brand-wordmark--accent-tail b span{ color:var(--accent-soft-lit) }
.brand-wordmark--compact b span, .brand-wordmark--pulsemedia b span{ font-size:max(.72em,12px) }

/* §M-6. 히어로 아트 — 강점 계열 5갈래마다 다른 그림(hero-art.mjs: perf·content·search·commerce·industry).
   자리: ≥1100 은 요약 카드 위 빈 칸(3열 윗부분, 카드 margin-top 232~252 안쪽),
   768~1099 는 카드 위. ≤767 은 그림을 빼고 카드 머리의 작은 갈래 표시(.hc-glyph)만 남긴다 —
   큰 그림이 '가장 잘하는 것' 카드를 접는 선 아래로 214px 밀어냈다(375×812 실측, 검수 지적).
   ⚠ 어두운 히어로 위 선·면은 흰색 알파, 밝은 판(.ha-disc) 위 도형은 --accent·먹 알파로 칠한다. */
.hero-art{ min-width:0; height:136px; margin-block:calc(var(--sp-2) * -1); pointer-events:none }
.ha-svg{ display:block; width:100%; height:100%; overflow:visible }
.ha-s1{ stroke:color-mix(in srgb, var(--accent-soft-lit) 52%, transparent) }
.ha-s2{ stroke:var(--accent-soft-lit) }
.ha-s3{ stroke:rgba(255,255,255,.3) }
.ha-f1{ fill:var(--accent-soft-lit) }
.ha-f2{ fill:rgba(255,255,255,.92) }
.ha-f3{ fill:color-mix(in srgb, var(--accent-lit) 62%, #fff) }
.ha-halo{ fill:color-mix(in srgb, var(--accent-lit) 38%, transparent) }
.ha-disc{ fill:var(--panel) }
.ha-mark{ --logo-paper:var(--panel) }
.ha-bg{ fill:rgba(255,255,255,.07) }
.ha-ln{ stroke:rgba(255,255,255,.12) }
.ha-road{ stroke:rgba(255,255,255,.1) }
.ha-dots{ fill:rgba(255,255,255,.26) }
.ha-node{ fill:var(--surf-deep); stroke:var(--accent-soft-lit) }
.ha-hot{ fill:color-mix(in srgb, var(--accent-lit) 62%, #fff); stroke:#fff }
.ha-dk{ fill:var(--surf-deep) }
.ha-sheet{ fill:rgba(255,255,255,.06); stroke:rgba(255,255,255,.24) }
.ha-prod{ fill:rgba(255,255,255,.08); stroke:rgba(255,255,255,.32) }
.ha-k{ fill:var(--accent-lit) }
.ha-kl{ fill:color-mix(in srgb, var(--accent-lit) 24%, var(--panel)) }
.ha-kd{ fill:rgba(20,32,28,.14) }
.ha-ks{ stroke:var(--accent-lit) }
.ha-ksd{ stroke:rgba(20,32,28,.22) }
.ha-w{ fill:#fff }
.ha-pk{ fill:none; stroke:var(--surf-deep); stroke-width:5; stroke-linecap:round; stroke-linejoin:round }
.ha-pkf{ fill:var(--surf-deep) }
.hc-glyph{ flex:none; margin-left:auto; width:28px; height:28px; color:var(--accent-ink-lit) }
@media (max-width:767px){
  .hero-art{ display:none }
  .hc-glyph{ width:32px; height:32px }
}
@media (min-width:768px) and (max-width:1099px){
  .hero-copy{ grid-column:1; grid-row:1 / span 2 }
  .hero-art { grid-column:2; grid-row:1; height:176px; margin:0 }
  .hero-card{ grid-column:2; grid-row:2 }
}
@media (min-width:1100px){
  .hero-art{
    grid-column:3; grid-row:1; align-self:start; margin:0;
    height:calc(clamp(232px,17vw,252px) - 28px);
  }
}
/* 좁은 화면 CTA 두 개는 세로로 꽉 차게 — 원래 의도('480px+ 에서 가로로')인데 480 미만 규칙이 없었다.
   375 에서 두 버튼이 한 줄에 '겨우' 들어가 글꼴이 바뀌는 순간 둘째 줄로 떨어지며 64px 밀렸다(CLS 실측). */
@media (max-width:479px){
  .hero-cta{ flex-direction:column }
  .hero-cta .btn{ width:100% }
}
/* 히어로 제목 줄 — 줄마다 따로 솟는다(키네틱). 줄은 처음부터 칸 안에 있다(넘침 0) */
.hero-h .hl{ display:inline-block }

@media (prefers-reduced-motion:no-preference){
  @keyframes m-rise{ from{ opacity:0; transform:translateY(.36em) } to{ opacity:1; transform:none } }
  @keyframes m-up  { from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
  @keyframes m-pop { 0%{ opacity:0; transform:scale(.4) } 60%{ opacity:1 } 100%{ opacity:1; transform:none } }
  /* 0.6초 안에 제목이 다 선다(LCP·첫 화면 규칙).
     ⚠ fill 은 backwards — both 면 끝난 뒤에도 transform 을 쥐고 있어 :active·hover 가 죽는다 */
  .hero-h .hl{ animation:m-rise .5s cubic-bezier(.2,1.25,.35,1) backwards }
  .hero-h .hl ~ .hl{ animation-delay:.08s }
  .hero .eyebrow{ animation:m-up .4s ease-out backwards }
  .hero-lead{ animation:m-up .5s ease-out .16s backwards }
  /* ⚠ CTA 는 scale 금지 — 커지는 중에 재면 44px 미만으로 잡힌다(mobile-hit 5건 실측). 위로 튀는 스프링만 */
  .hero-cta .btn{ animation:m-up .55s cubic-bezier(.34,1.56,.64,1) .26s backwards }
  .hero-cta .btn + .btn{ animation-delay:.33s }
  .hero-note{ animation:m-up .5s ease-out .36s backwards }
  /* 그림은 바탕(q: 떠오름) → 주인공 도형(p: 스프링 팝) 순. 지연 ≤ .34s + 길이 .5s = 0.84초 안에 끝난다 */
  @keyframes m-lift{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
  .ha-p{ transform-box:fill-box; transform-origin:center;
         animation:m-pop .5s cubic-bezier(.34,1.56,.64,1) var(--d,0s) backwards }
  .ha-q{ animation:m-lift .45s ease-out var(--d,0s) backwards }
  /* 접수 완료 표시 체크 원 — 한 번 튀어나온다 */
  #leadDone:not([hidden]) b::before{ animation:m-pop .6s cubic-bezier(.34,1.56,.64,1) .1s backwards }
  /* 접수 중 표시 — 누른 동안만 도는 고리(transform 만) */
  @keyframes m-spin{ to{ transform:rotate(360deg) } }
  #lfBtn[disabled]::before{ animation:m-spin .8s linear infinite }
  /* 누름 피드백 — 버튼·알약 모두 살짝 눌린다 */
  .btn:active, .anchor-nav a:active, .network-promo-btn:active{ transform:scale(.97) }
}

/* §M-7. 상태 화면 — 오류·접수 중·접수 완료를 눈으로 구별되게 */
.f-err:not(:empty){
  position:relative;
  padding:var(--sp-3) var(--sp-4) var(--sp-3) 44px;
  border:1px solid var(--bad-line); border-radius:var(--r-s);
  background:var(--bad-soft); color:var(--bad-ink); line-height:1.5;
}
.f-err:not(:empty)::before{
  content:"!"; position:absolute; left:var(--sp-3); top:var(--sp-3);
  width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--bad-ink); color:#fff; font-size:13px; font-weight:900; line-height:1;
}
/* 동의 칸은 .field 밖(.f-agree)에 있어 위 규칙이 안 닿았다 — 오류 상자만 뜨고 칸 표시가 없었다 */
.f-agree input[aria-invalid="true"]{ outline:2px solid var(--bad-ink); outline-offset:2px }
.field [aria-invalid="true"]{
  border-color:var(--bad-ink) !important;
  box-shadow:0 0 0 3px rgba(164,51,31,.16) !important;
}
/* ⚠ 기존 결함: .lead-form{display:grid} 가 [hidden] 을 이겨 접수 뒤에도 폼이 그대로 남았다
   (완료 상자가 폼 아래에 붙고, 화면은 맨 위로 올라가 손님은 접수 여부를 못 봤다). */
.lead-form[hidden]{ display:none }
#lfBtn[disabled]{ cursor:progress; opacity:.92 }
#lfBtn[disabled]::before{
  content:""; width:18px; height:18px; flex:none; border-radius:50%;
  border:2px solid rgba(255,255,255,.42); border-top-color:#fff;
}
#leadDone b::before{
  content:""; display:block; width:48px; height:48px; margin:0 auto var(--sp-3);
  border-radius:50%;
  background:var(--accent-lit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/24px 24px no-repeat;
  box-shadow:0 8px 20px -8px color-mix(in srgb, var(--accent-lit) 70%, transparent);
}
#leadDone:focus{ outline:none }
#leadDone:focus-visible{ outline:3px solid var(--accent); outline-offset:4px }

/* §M-9. 태블릿(768~959) 헤더 — 메뉴 4개가 상담 버튼 밑으로 47~92px 깔려 '진행 방식' 이 안 보였다
   (50곳 중 30곳 실측 · tools/header_fit.js). 모바일처럼 상호 아래 한글 표기를 접고 메뉴 간격을 줄인다.
   히어로 지표 '1:1' 은 body 의 overflow-wrap:anywhere 때문에 좁은 카드에서 '1:' / '1' 로 쪼개졌다(30곳). */
@media (min-width:768px) and (max-width:959px){
  .site-header .brand-text i{ display:none }
  .site-header .hd-in{ gap:var(--sp-3) }
  .gnb ul{ gap:var(--sp-1) }
  .gnb a{ padding:0 10px; font-size:14px }
  .hd-cta{ padding:0 var(--sp-4); font-size:14px }
}
.hc-stats b{ white-space:nowrap }

/* ══════════════════════════════════════════════════════════════════════════
   §N. 2026-10-21 3차 — 칸별 오류 문구 · 모바일 히어로 그림 띠 · 첫 진단 구획 · 그림 색
   ⚠ §M-8·최후미 감소모션 가드 **앞**에 둔다.
   ⚠ 되돌리기: 이 §N 블록 삭제 + sections.mjs(focus·hc-stats·why·faq·f-msg·buildPage) +
     app.js(msgOf·clearBad·bad) + hero-art.mjs + focus.mjs → node build.mjs
   ══════════════════════════════════════════════════════════════════════════ */

/* §N-1. 칸별 오류 문구 — 틀린 칸 바로 아래. 비어 있으면 자리를 차지하지 않는다(CLS 0) */
.f-msg{ margin:0; font-size:14px; font-weight:700; line-height:1.45; color:var(--bad-ink) }
.f-msg:empty{ display:none }
.f-msg::before{
  content:""; display:inline-block; width:16px; height:16px; margin:0 6px -3px 0; border-radius:50%;
  background:var(--bad-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='7' y='3.4' width='2' height='6.2' rx='1' fill='%23fff'/%3E%3Ccircle cx='8' cy='12' r='1.2' fill='%23fff'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
.f-agree-wrap{ display:grid; gap:var(--sp-1) }
.f-agree-wrap .f-msg{ padding-left:32px }

/* §N-2. 모바일·태블릿 히어로 — 갈래 그림을 요약 카드의 머리 띠로 붙인다.
   ⚠ 2차는 ≤767 에서 그림을 숨겨 50곳 첫 화면이 로고·문구 말고 같았다(검수 HOLD).
   ⚠ 홍보 띠는 히어로 뒤로 옮겼다(sections.mjs buildPage) — 히어로 앞 76px 이 사라진다.
   375×812 목표: 그림 띠와 '가장 잘하는 것' 머리가 첫 화면 안. */
@media (max-width:1099px){
  .hero-art{
    background:color-mix(in srgb, var(--surf-deep) 86%, #fff);
    border:1px solid rgba(255,255,255,.12); border-bottom:0;
    border-radius:var(--r-l) var(--r-l) 0 0; padding:var(--sp-2) var(--sp-4);
  }
  .hero-card{ border-top-left-radius:0; border-top-right-radius:0 }
}
@media (min-width:768px) and (max-width:1099px){
  .hero-in{ row-gap:0 }
  .hero-art{ height:176px }
}
@media (max-width:767px){
  .hero{ padding:var(--sp-4) 0 28px }
  .hero-in{ row-gap:var(--sp-3) }
  .hero-h{ margin-top:var(--sp-3) }
  .hero-lead{ margin-top:var(--sp-3); line-height:1.62 }
  .hero-cta{ margin-top:var(--sp-4); gap:var(--sp-2) }
  .hero-cta .btn{ min-height:48px }
  .hero-note{ margin-top:var(--sp-2) }
  /* 띠 96px — 375×812 에서 가장 긴 히어로(쿼리랩)도 '가장 잘하는 것' 머리가 첫 화면 안(실측 824 → 804) */
  .hero-art{ display:block; height:96px; margin:0 0 calc(var(--sp-3) * -1) }
  .hero-card{ padding-top:var(--sp-4) }
  .hero-card .hc-top{ display:none }      /* 영문 장식 줄 — 그림 띠가 이 자리를 맡는다 */
  .hero-card .hc-edge{ margin-top:0 }
}

/* §N-3. 히어로 제목은 처음부터 보인다 — 움직임은 transform 만(LCP 지연 방지, 검수 권고) */
@media (prefers-reduced-motion:no-preference){
  @keyframes m-rise-t{ from{ transform:translateY(.36em) } to{ transform:none } }
  .hero-h .hl{ animation-name:m-rise-t }
}

/* §N-4. 첫 진단 구획 — 공통 뼈대(제목·소제목·본문 3단, 4/8 간격) */
.sec-focus{ background:var(--panel); border-block:1px solid var(--line) }
.fx-body{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-5); align-items:start }
.fx-main{ min-width:0 }
.fx-h{ margin:0 0 var(--sp-4); font-size:clamp(18px,2vw,21px); font-weight:800; line-height:1.4; letter-spacing:-.03em; color:var(--ink) }
.fx-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3) }
.fx-item{ display:flex; gap:var(--sp-4); align-items:flex-start; padding:var(--sp-4) var(--sp-5);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-m) }
.fx-item > div{ min-width:0 }
.fx-n{ flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:12px;
  background:var(--accent-soft-lit); color:var(--accent-ink-lit); font-size:15px; font-weight:900; font-variant-numeric:tabular-nums }
.fx-item b{ display:block; font-size:16px; font-weight:800; line-height:1.45; letter-spacing:-.02em; color:var(--ink) }
.fx-item p{ margin:var(--sp-1) 0 0; font-size:15px; line-height:1.6; color:var(--ink-2) }
.fx-side{ padding:var(--sp-5); border-radius:var(--r-l); background:var(--surf-deep); color:#fff }
.fx-side > b{ display:block; margin-bottom:var(--sp-3); font-size:17px; font-weight:800; letter-spacing:-.02em }
.fx-side ul{ list-style:none; margin:0 0 var(--sp-5); padding:0; display:grid; gap:var(--sp-3) }
.fx-side li{ position:relative; padding-left:28px; font-size:15px; line-height:1.55; color:rgba(255,255,255,.88) }
.fx-side li::before{
  content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:50%;
  background:var(--accent-soft-lit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%2314201c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6'/%3E%3C/svg%3E") center/18px no-repeat;
}
.fx-side .fx-cta{ width:100%; background:var(--accent-soft-lit); color:var(--accent-ink-lit); border-color:transparent }
.fx-side .fx-cta:hover{ filter:brightness(1.04) }
.fx-side .fx-cta:focus-visible{ outline:3px solid var(--accent-soft-lit); outline-offset:3px }
@media (min-width:900px){
  .fx-body{ grid-template-columns:minmax(0,1fr) minmax(260px,320px); gap:var(--sp-6) }
  .fx-side{ position:sticky; top:calc(var(--hd-h) + var(--sp-5)) }
}

/* 갈래마다 다른 모양 — 성과: 측정표(번호 | 항목 | 설명 3칸) */
.fx-perf .fx-list{ gap:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-m); padding:var(--sp-2) var(--sp-5) }
.fx-perf .fx-item{ background:none; border:0; border-radius:0; padding:var(--sp-4) 0 }
.fx-perf .fx-item + .fx-item{ border-top:1px dashed var(--line-2) }
.fx-perf .fx-n{ border-radius:50%; background:none; border:2px solid var(--accent-lit); color:var(--accent-ink-lit) }
@media (min-width:768px){
  .fx-perf .fx-item > div{ display:grid; grid-template-columns:minmax(150px,200px) minmax(0,1fr); gap:var(--sp-4); align-items:baseline; padding-top:var(--sp-2) }
  .fx-perf .fx-item p{ margin:0 }
}
/* 콘텐츠: 제작 순서 카드가 가로로 흐른다, '이럴 때' 는 아래 띠 */
@media (min-width:900px){ .fx-content .fx-body{ grid-template-columns:minmax(0,1fr) } .fx-content .fx-side{ position:static } }
.fx-content .fx-item{ flex-direction:column; gap:var(--sp-3); padding:var(--sp-5) }
.fx-content .fx-n{ width:auto; height:auto; padding:var(--sp-1) var(--sp-3); border-radius:999px; font-size:13px; letter-spacing:.08em }
@media (min-width:640px){ .fx-content .fx-list{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1100px){ .fx-content .fx-list{ grid-template-columns:none; grid-auto-columns:minmax(0,1fr); grid-auto-flow:column } }
@media (min-width:768px){
  .fx-content .fx-side{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--sp-6); align-items:center }
  .fx-content .fx-side > b{ grid-column:1 / -1 }
  .fx-content .fx-side ul{ margin:0; grid-template-columns:repeat(3,minmax(0,1fr)) }
  .fx-content .fx-cta{ width:auto; min-width:180px }
}
/* 검색·지역: 두 칸 타일, '이럴 때' 가 왼쪽 */
.fx-search .fx-item{ border-left:4px solid var(--accent-lit) }
@media (min-width:768px){ .fx-search .fx-list{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:900px){ .fx-search .fx-body{ grid-template-columns:minmax(260px,320px) minmax(0,1fr) } .fx-search .fx-side{ order:-1 } }
/* 커머스: 테두리 친 점검표, 번호 대신 네모 칸 표시 */
.fx-commerce .fx-list{ gap:0; background:#fff; border:1px solid var(--line-2); border-radius:var(--r-m); overflow:hidden }
.fx-commerce .fx-item{ border:0; border-radius:0; background:none; align-items:center }
.fx-commerce .fx-item:nth-child(even){ background:var(--panel-2) }
.fx-commerce .fx-item + .fx-item{ border-top:1px solid var(--line) }
.fx-commerce .fx-n{ width:32px; height:32px; border-radius:8px; background:#fff; border:2px solid var(--accent-lit); font-size:12px }
/* 업종: 위쪽 강조선을 단 두 칸 규칙 카드, '이럴 때' 는 위 띠 */
@media (min-width:900px){
  .fx-industry .fx-body{ grid-template-columns:minmax(0,1fr) }
  .fx-industry .fx-side{ position:static; order:-1; display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:var(--sp-6); align-items:center }
  .fx-industry .fx-side > b{ margin:0 }
  .fx-industry .fx-side ul{ margin:0 }
  .fx-industry .fx-cta{ width:auto; min-width:180px }
}
.fx-industry .fx-item{ border-top:4px solid var(--accent-lit); flex-direction:column; gap:var(--sp-2) }
.fx-industry .fx-n{ width:auto; height:auto; background:none; padding:0; color:var(--accent-ink-lit); font-size:13px; letter-spacing:.12em }
@media (min-width:768px){ .fx-industry .fx-list{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
/* 두 칸 격자에 항목이 홀수면 마지막 칸이 비어 미완성으로 읽힌다 — 마지막 하나는 한 줄을 다 쓴다 */
@media (min-width:768px){ .fx-industry .fx-item:last-child:nth-child(odd), .fx-search .fx-item:last-child:nth-child(odd){ grid-column:1 / -1 } }

/* §N-5. 히어로 그림 색(3차에서 새로 쓰는 것) — 어두운 바탕 위는 흰 알파, 밝은 판 위는 먹 알파 */
.ha-w-s{ stroke:#fff }
.ha-dk-s{ stroke:var(--surf-deep) }
.ha-f2-s{ stroke:rgba(255,255,255,.92) }
.ha-f3-s{ stroke:color-mix(in srgb, var(--accent-lit) 62%, #fff) }
.ha-s1-f{ fill:color-mix(in srgb, var(--accent-soft-lit) 52%, transparent) }
.ha-s3-f{ fill:rgba(255,255,255,.32) }
.ha-f1-soft{ fill:color-mix(in srgb, var(--accent-soft-lit) 28%, transparent) }
.ha-kd-soft{ fill:rgba(20,32,28,.07) }
.ha-kl-dk{ fill:color-mix(in srgb, var(--accent-lit) 46%, var(--panel)) }
.ha-zone{ fill:rgba(255,255,255,.035) }
.ha-track{ stroke:rgba(255,255,255,.08) }
.ha-ksd-x{ stroke:rgba(20,32,28,.62) }

/* §M-8. 감소모션 — 이 블록이 새로 붙인 움직임 전부 끈다 */
@media (prefers-reduced-motion:reduce){
  .hero-h .hl, .hero .eyebrow, .hero-lead, .hero-cta .btn, .hero-note,
  .ha-p, .ha-q, #leadDone b::before, #lfBtn[disabled]::before{ animation:none !important }
  .btn:active, .anchor-nav a:active, .network-promo-btn:active{ transform:none !important }
}

/* ══════════════════════════════════════════════════════════════════════════
   감소모션 가드 재건 — ⚠ 반드시 파일 최후미에 둘 것.

   내가 만든 회귀다. 1846행의 가드가 `.card:hover{transform:none}` 을 걸어 뒀는데,
   시각 개선층을 그 **뒤에** 붙이면서 `.card:hover{transform:translateY(-3px)}` 가
   같은 특정성으로 나중에 나와 가드를 눌러 죽였다.
   → 움직임 줄이기를 켠 분에게도 카드가 계속 움직이고 있었다(라이브 실측 확인).

   ⚠ 검사기가 못 잡았다. motion-check.mjs 가 animation 만 보고 hover transform 을
     안 봤기 때문이다. 검사기도 함께 고쳤다(hover 를 실제로 걸어 본다).
   ⚠ 앞으로 시각 규칙을 더 붙일 때는 반드시 이 블록 **앞**에 붙일 것.
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .card:hover,.card:active,
  .card-lg:hover,.card-lg:active,
  .chan:hover,.chan:active,
  .week:hover,.week:active{ transform:none !important }
  html{ scroll-behavior:auto !important }
}

/* 허브(369 네트워크 전체 목록) 전용 — 대행사 사이트 스타일 위에 얹는다 */
body.hub{background:var(--bg)}
.hub-hd{padding:60px 0 44px;border-bottom:1px solid var(--line);
  background:radial-gradient(1200px 460px at 50% -20%, #171410, transparent 70%), var(--bg)}
.hub-brand{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.hub-brand b{display:block;font-size:clamp(24px,4vw,34px);font-weight:900;letter-spacing:-.05em;line-height:1.15}
.hub-brand span{font-size:13.5px;color:var(--ink3);font-weight:600}
.hub-network{gap:12px}
.hub-network .m369{display:block;flex:none}
.hub-network .network-word{overflow:visible}
.hub-network .network-word b{font-family:Arial,"Arial Black",sans-serif;font-size:21px;font-weight:950;letter-spacing:-.07em;line-height:1;white-space:nowrap}
.hub-network .network-word b em{font-style:normal;color:var(--accent-ink,#b35b32);margin-left:.12em;letter-spacing:-.035em}
.hub-network .network-word i{font-family:Arial,sans-serif;font-size:8.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-top:6px;white-space:nowrap}
.hub-lead{max-width:720px;color:var(--ink2);font-size:16px;line-height:1.8;margin:0 0 26px}
.hub-stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-bottom:24px}
.hub-stat div{background:var(--bg2);padding:18px 20px}
.hub-stat b{display:block;font-size:24px;font-weight:800;color:var(--gold-lt);letter-spacing:-.03em}
.hub-stat span{font-size:12.5px;color:var(--ink3)}
.hub-search{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--ink);
  font:inherit;font-size:15px;padding:14px 18px}
.hub-search:focus{outline:2px solid var(--gold-dk);outline-offset:-1px}

.hub-sec{padding:38px 0 4px}
.hub-sec h2{font-size:14px;font-weight:800;letter-spacing:.06em;color:var(--gold);margin:0 0 16px}
.hub-sec h2 em{font-style:normal;color:var(--ink3);font-weight:600;margin-left:6px}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.hub-card{display:flex;flex-direction:column;align-items:stretch;gap:13px;min-height:132px;border:1px solid var(--line);
  background:var(--bg2);padding:19px 19px 17px;transition:border-color .15s,background .15s}
.hub-card:hover{border-color:var(--accent-line,var(--gold-dk));background:#eceee7}
.hub-card:hover .brand-symbol{--logo-ink:#14201c;--logo-paper:#f1f2ea}
.hc-brand{display:flex;align-items:center;gap:11px;min-width:0;width:100%}
.hc-brand .brand-symbol{display:block;flex:none}
.hc-brand .brand-text{overflow:visible;min-width:0}
.hc-brand .brand-wordmark b{font-size:16px}
.hc-brand .brand-wordmark--compact b{font-size:13.5px}
.hc-brand .brand-wordmark--wide b{font-size:14px}
.hc-brand .brand-wordmark i{font-size:8.5px;margin-top:5px;letter-spacing:.08em}
.hc-edge{display:block;font-size:12.5px;color:var(--ink3);line-height:1.55;padding-top:10px;border-top:1px solid var(--line)}

.hub-ft{border-top:1px solid var(--line);margin-top:44px;padding:32px 0 40px;background:var(--bg2)}
.hub-ft p{margin:0 0 5px;font-size:13px;color:var(--ink3)}
.hf-note{margin-top:12px;font-size:12.5px;line-height:1.7}

@media (max-width:600px){
  .hub-network .m369{width:48px;height:48px}
  .hub-network .network-word b{font-size:18px}
  .hub-network .network-word i{font-size:7px;letter-spacing:.11em}
  .hub-grid{grid-template-columns:1fr}
  .hub-card{min-height:124px}
}

/* 2026-10-21 개편 — 허브 작은 글자(8.5px 57건 실측)·강조 글자 대비 */
.hc-brand .brand-wordmark i{font-size:12px;letter-spacing:.02em;white-space:normal;line-height:1.35}
.hub-network .network-word i{font-size:12px;letter-spacing:.06em}
.hub-card{transition:border-color .15s,background .15s,box-shadow .2s,transform .2s}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .hub-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(20,32,28,.28)}
}
.hub-card:active{transform:scale(.99)}
.hub-card:focus-visible{outline:3px solid var(--accent-ink,#2f5b3d);outline-offset:2px}
@media (max-width:600px){
  .hub-network .network-word i{font-size:12px;letter-spacing:.02em}
}
@media (prefers-reduced-motion:reduce){
  .hub-card:hover,.hub-card:active{transform:none}
}

/* 2026-10-21 3차 — 갈래 바로가기(칩). 44px 터치, 가로로 넘치면 줄바꿈 */
.hub-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px}
.hub-jump a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid var(--line-2);background:var(--panel,#fafbf6);color:var(--ink);font-size:14px;font-weight:800;text-decoration:none;
  transition:background .15s,border-color .15s,transform .15s}
.hub-jump a span{font-size:12px;font-weight:700;color:var(--ink-2)}
.hub-jump a:hover{border-color:var(--ink);background:#fff}
.hub-jump a:active{transform:scale(.97)}
.hub-jump a:focus-visible{outline:3px solid #2f5b3d;outline-offset:2px}
.hub-group{scroll-margin-top:calc(var(--hd-h,68px) + 12px)}
@media (prefers-reduced-motion:reduce){ .hub-jump a:active{transform:none} }