/* ══ 배포 시 적용되는 수정 — 반드시 스타일시트 맨 끝 ══ */

/* [1] 고스트 워드마크: 모바일 숨김.
   원본은 @media(640px){display:none} 뒤에 무조건 .ghost{display:flex}가 와서
   덮어써지고 있었습니다. 본문 위에 로고가 겹쳐 가독성을 해칩니다. */
@media (max-width:640px){
  .ghost{display:none!important}
}

/* [2] sticky 헤더 복구.
   html/body의 overflow-x:hidden 은 스크롤 컨테이너를 만들어
   position:sticky 를 무력화합니다(iOS Safari에서 특히).
   overflow-x:clip 은 컨테이너를 만들지 않아 sticky가 정상 동작합니다. */
@supports (overflow-x:clip){
  html,body{overflow-x:clip}
}
/* clip 미지원 구형 브라우저: 가로 넘침의 원인인 고스트가 모바일에서
   숨겨졌으므로 hidden 없이도 넘치지 않습니다. */
@supports not (overflow-x:clip){
  html,body{overflow-x:hidden}
  .gnb{position:-webkit-sticky;position:sticky}
}

/* [3] 헤더가 히어로 배경에 묻히지 않도록 최소 대비 확보 */
.gnb{z-index:200}

/* [4] Lighthouse 모바일 대비 기준(일반 텍스트 4.5:1) 충족 */
.ig-stack .lv.base .lb,.ig-stack .lv.base .it a{color:#0D3578}
.ig-stack .lv.base .lb em{color:#43515E}
.light .label{color:#12459E}
.ftr-btm>span,.ftr-btm .ftr-policy{color:#8190A0}

/* [5] 홈 사례 격자 — 광고주 소재 22장의 색이 제각각이라 잉크·코발트로 절제한
   페이지에서 여기만 시끄러웠다. 기본은 잉크 톤으로 눌러 두고 커서를 올린 것만
   원색으로 되돌린다. 흑백으로 죽이는 게 아니라 **한 번에 하나만 살리는** 것이다.

   ⚠️ **hover 의 색 복원은 여기서 하지 않는다.** motion.html 이 문서 끝에 더 뒤늦게
   실리면서 hover 시 filter 를 brightness 로 통째로 갈아치우고, 그 바람에 grayscale 이
   저절로 풀린다. 여기에 filter 복원을 적어도 그 규칙에 덮여 죽은 코드가 된다.
   여기서는 투명도만 되돌린다. hover 연출을 바꾸려면 motion.html 쪽을 본다.

   ⚠️⚠️ 이 파일의 주석에 닫는 body·style·script 태그를 글자로 적지 마라.
   prep_deploy 가 그 문자열을 기준으로 모션 스크립트를 끼워 넣기 때문에,
   주석 안의 가짜 태그가 먼저 잡혀 스크립트가 통째로 CSS 주석 안으로 들어간다.
   2026-08-14 에 실제로 사이트를 깨뜨렸다. */
.cases img{filter:grayscale(1) contrast(1.03);opacity:.78}
.cases figure:hover img{opacity:1}

/* 손가락으로 보는 화면에는 hover 가 없다. 영영 회색으로 두지 않고 조금 살려 둔다. */
@media (hover:none){
  .cases img{filter:grayscale(.8) contrast(1.03);opacity:.88}
}

/* 동작 줄이기를 켠 사용자에게 색이 스르륵 도는 연출은 필요 없다.
   `motion.html` 의 `.cases img{transition:...}` 이 뒤에 오므로 id 를 붙여 우선순위를 올린다. */
@media (prefers-reduced-motion:reduce){
  #cases .cases img{transition:none}
}

/* ══════════════════════════════════════════════════════════════════
   [6] 리퀴드 글래스 — 조작층에만 (2026-09-03 확정)

   ⚠️ 여기 한 곳에만 적는다. 페이지별 원본(공유용_사이트시안/*.html)에 넣지 마라 —
   22개 페이지 + 블로그 185편이 전부 이 파일을 받는다(블로그는 build_blog.py 가
   gi-import/about.html 의 head 를 통째로 빌려간다).

   ── 원칙 (2026-09-03 대표 확정) ───────────────────────────────────
   1. **유리는 떠 있는 것에만.** 헤더·드롭다운·버튼·칩·모바일 메뉴·히어로 위
      통계칩. 콘텐츠 카드는 **불투명**이다. 유리 카드를 흰 바닥에 올렸더니
      사라졌고, 바닥을 어둡게 하니 글자 대비가 무너졌다(스틸 3.03:1).
      애플 가이드도 "콘텐츠층에 쓰지 마라"다
   2. **모서리는 `--r` 하나 + 알약.** 20/16/14/26 을 섞었더니 한 화면에
      네 종류가 보였다. 새 값을 추가하지 마라
   3. **메시 그라데이션은 어두운 섹션에만.** 밝은 섹션은 크림 그대로 —
      그래야 기존 글자색이 전부 기준을 넘는다
   4. **헤어라인 격자 20개는 카드 격자로.** gap:1px 로 선을 긋던 것에 모서리를
      주면 1px 이 십자로 비친다
   ══════════════════════════════════════════════════════════════════ */

:root{
  --r:16px;
  --r-pill:999px;
  --gl-blur:blur(20px) saturate(160%);
  --gl-blur-sm:blur(12px) saturate(140%);

  /* 불투명 카드 */
  /* 밝은 면 카드도 유리(2026-09-03). 흰 58% + 블러. 링과 상단 하이라이트가 경계를 만든다 */
  --card-l:rgba(255,255,255,.58);
  --card-l-sh:0 0 0 1px rgba(16,20,28,.07),inset 0 1px 0 rgba(255,255,255,.95),
              0 18px 36px -20px rgba(16,20,28,.28);
  /* ⚠️ 다크 카드는 바닥보다 **어둡다.** #1B2233(ghost-dark)로 뒀더니 메시가
     깔린 바닥과 명도차 1.04 라 카드가 사라졌다. navy-alt 로 내리면 1.27 이고
     카드 위 코발트 글자도 6.05:1 로 넉넉하다. */
  /* 카드도 단색이면 「시커멓다」. 좌상단이 살짝 푸른 결로, 우하단은 navy-alt 로.
     밝은 끝(#131B2C)에서도 본문 7.6 · 코발트 5.3 이라 글자는 안전하다.
     바닥과 명도차는 약하므로 경계는 1px 링(.10)과 그림자가 맡는다. */
  /* 2026-09-03 확정: 어두운 면 카드는 다시 **유리**. 유리가 안 되던 건 밝은 면(흰 바닥)
     이야기였다. 어두운 바닥에선 뒤 블롭 색을 받아 카드마다 살짝 다른 색이 된다 — 그게 지향점. */
  --card-d:rgba(255,255,255,.075);
  --card-d-sh:0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.28),
              0 30px 60px -20px rgba(0,0,0,.65);
  --card-a-l:#DCE8FF;                            /* 강조 카드 (밝은 면) */
  --card-a-d:rgba(77,141,255,.16);                /* 강조 카드 (어두운 면) — 코발트 틴트 유리 */
}

/* ── 6-1. 바닥 — 어두운 섹션에만 메시. 히어로 사진 섹션은 사진이 바닥이다 ── */
/* ⚠️ 이 값들은 눈으로 고르지 마라. 블롭이 겹친 자리의 바닥 밝기가 그 위 글자의
   대비를 정한다. 세 번 걸렸다:
     밝은 색 옅게 .30/.20/.12  → 본문 #A5AEBE 2.87:1
     밝은 색 더 옅게 .12/.08/.05 → 코발트 라벨 3.80:1
     그래서 옅게 뒀더니 → 「시커멓고 단조롭다」(대표, 2026-09-03)
   해법은 **밝은 색을 옅게가 아니라 어둡고 진한 색을 진하게** 까는 것이다.
   딥블루·딥바이올렛·딥틸은 명도가 navy 와 비슷해서 색조는 또렷한데 밝기는
   거의 안 오른다. 아래 값은 삼중 겹침 최악에서 본문 6.81 · 코발트 4.76 이다. */
/* 2026-09-03 대표 확정: 블로그 표지 왼쪽(트렌드 원본)이 지향점. 레퍼런스 세기(코발트 .45
   마젠타 .35 틸 .25)의 40%. 100% 로 하면 카드 밖 본문이 2.09:1 이 된다 — 레퍼런스는
   글자가 전부 카드 안에 있어서 예뻐 보이는 것. 40% + 카드 밖 글자 한 단계 밝게(아래 6-1b)가
   본문 6.5 · 라벨 4.6 을 지키는 상한이다. */
/* 2026-09-03 (2차): 블롭이 모서리에만 작게 있어 긴 섹션 한가운데가 그냥 검정이었다
   (홈 「다섯 가지 방식」 캡처). ① 섹션 전체에 색조가 흐르는 선형 바탕을 깔아 평평한 곳을
   없애고 ② 블롭을 키우고 퍼뜨리고 세기를 레퍼런스 50% 로. 카드 밖 라벨을 #9CC2FF 로
   올려서 최악 겹침에서도 본문 5.5+ · 라벨 4.8+ (계산값). */
section.dark:not(.hero-photo){
  background-color:#0A0E15;
  background-image:
    radial-gradient(1300px 1000px at 12% 18%,  rgba(77,141,255,.225), transparent 62%),
    radial-gradient(1200px 950px  at 94% 78%,  rgba(244,114,182,.175),transparent 60%),
    radial-gradient(1100px 900px  at 50% 108%, rgba(52,211,153,.125), transparent 62%),
    radial-gradient(900px  800px  at 96% 12%,  rgba(77,141,255,.10),  transparent 60%),
    linear-gradient(168deg, #0F1A30 0%, #0A0E15 42%, #0C0E1A 70%, #140D1F 100%);
}
/* 6-1b. 어두운 섹션의 카드 밖 글자 — 블롭이 밝아진 만큼 한 단계 올린다.
   #A5AEBE→#C6CEDA(본문), 코발트→#7CACFF(라벨). 카드 안 작은 라벨은 유리면 최악에서도
   4.5 를 넘는 #9CC2FF 을 쓴다(계산값). */
.dark .body,.dark .lead,.dark p,.dark .way .d{color:#D6DCE6}
.dark .label,.dark .n,.svcnav a span,.posts .cat,.ceo .who,.contrast .b .k,.ai-flow .k,
.culture .n,.peer .n,.teach-note,.ai-panel .quote,.ftr-en,.ftr-col .h,.ftr-ext a,.dark .vs .b .t{color:#9CC2FF}
.dark .ig{--ig-key:#9CC2FF}
.dark .svc .n,.svcnav a span,.dark .steps .n,.dark .funnel .n,.dark .proc .n,.dark .modes .n,
.dark .flow .n,.goals .n,.proof .n,.culture .n,.ai-flow .k{color:#ADCCFF}
/* 2026-09-03 대표 요청: 밝은 섹션 카드도 유리로. 유리가 크림 위에서 사라졌던 건
   뒤에 비칠 색이 없어서다 → 밝은 섹션에도 옅은 블롭을 깐다. 최악 겹침에서
   슬레이트 본문 4.55+ · 딥코발트 라벨 6+ 로 안전(계산값 — .16/.12/.08 은 4.41 로 미달이었다). */
section.light:not(.hero-photo),.clients{
  background-color:var(--cream);
  background-image:
    radial-gradient(900px 720px at 12% 18%,  rgba(77,141,255,0.136),  transparent 60%),
    radial-gradient(820px 660px at 94% 80%,  rgba(244,114,182,0.102), transparent 58%),
    radial-gradient(760px 620px at 55% 108%, rgba(52,211,153,0.068),  transparent 60%);
}
/* ── 6-1c. 연속 같은 톤 섹션의 이음매 (2026-09-04) ──────────────────
   위 6-1 은 섹션 하나하나에 그리므로 dark·dark / light·light 가 연달아 붙으면
   경계마다 그러데이션이 다시 시작돼 색이 뚝 끊긴다(대표 지적, about). 짝수번째를
   위아래로 뒤집는 CSS 로는 안 됐다 — 168° 기울기 때문에 화면이 넓고 섹션이 짧을수록
   위·아래 끝 색이 좌우로 달라지고, 1000px 블롭은 짧은 섹션에서 경계를 넘는다.
   그래서 빌드(`run_wrap.py`)가 연속 섹션을 `.sec-run-dark`/`-light` 상자로 감싸고,
   배경은 **상자에 한 번만** 그린다. 안쪽 섹션은 투명. 값은 6-1 과 같은 팔레트라
   대비 계산은 그대로다. 상자가 길면 가운데는 선형 바탕만 남는데, 긴 단일 섹션
   (홈 「다섯 가지 방식」)이 이미 그 모습이다. */
.sec-run-dark{
  background-color:#0A0E15;
  background-image:
    radial-gradient(1300px 1000px at 12% 18%,  rgba(77,141,255,.225), transparent 62%),
    radial-gradient(1200px 950px  at 94% 78%,  rgba(244,114,182,.175),transparent 60%),
    radial-gradient(1100px 900px  at 50% 108%, rgba(52,211,153,.125), transparent 62%),
    radial-gradient(900px  800px  at 96% 12%,  rgba(77,141,255,.10),  transparent 60%),
    linear-gradient(168deg, #0F1A30 0%, #0A0E15 42%, #0C0E1A 70%, #140D1F 100%);
}
.sec-run-light{
  background-color:var(--cream);
  background-image:
    radial-gradient(900px 720px at 12% 18%,  rgba(77,141,255,0.136),  transparent 60%),
    radial-gradient(820px 660px at 94% 80%,  rgba(244,114,182,0.102), transparent 58%),
    radial-gradient(760px 620px at 55% 108%, rgba(52,211,153,0.068),  transparent 60%);
}
.sec-run-dark > section.dark:not(.hero-photo),
.sec-run-light > section.light:not(.hero-photo){background:none}
.ftr{
  background-image:
    radial-gradient(1100px 800px at 88% -10%, rgba(77,141,255,.16), transparent 62%),
    radial-gradient(900px 700px  at 6% 110%,  rgba(244,114,182,.10), transparent 60%),
    linear-gradient(168deg,#0C1424 0%,#0A0E15 50%,#100C18 100%);
}

/* ── 6-2. 조작층 — 흰 유리 (2026-09-03 대표 요청) ──────────────────
   어두운 반투명(rgba(16,20,28,.62))으로 뒀더니 밝은 히어로 위에서 칙칙한
   회색 띠로 보였다. 흰 유리로 바꾸면서 헤더 안의 **글자색을 전부 뒤집어야**
   한다 — 원본은 어두운 헤더 전제라 흰색·밝은 회색으로 적혀 있다.

   불투명도 80% 는 계산해서 고른 값이다. 헤더는 sticky 라 뒤에 어두운 섹션이
   올 때가 최악인데, 그때 헤더가 rgb(207,208,209) 이 되고 메뉴 글자(#3F4757)가
   6.05:1 로 통과한다. 더 낮추면(72%) 4.97:1 까지 떨어진다.

   ⚠️ 밝은 바탕이 됐으므로 **코발트를 글자로 쓰지 않는다**(2.95:1).
   강조는 딥코발트 #12459E (8.19:1). 브랜드 규칙 2번. */
.gnb{
  background:rgba(255,255,255,.80);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border-bottom:1px solid rgba(16,20,28,.08);
  box-shadow:0 10px 30px -22px rgba(16,20,28,.35);
}
.gnb .logo,.gnb .logo svg{color:var(--ink)}
.nav > li > a{color:#3F4757}
.nav > li > a:hover,.nav > li:hover > a{color:var(--ink)}
.nav .caret{color:#6B7689}
.nav .ext{color:var(--mint-800)}
.nav > li.on > a{color:var(--ink)}
.nav > li.on > a::after{background:var(--mint-800)}
.langsw{color:#3F4757}
.langsw:hover{color:var(--ink)}

.sub{
  border-radius:var(--r);
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:1px solid rgba(16,20,28,.08);
  box-shadow:0 22px 44px -24px rgba(16,20,28,.4);
  overflow:hidden;
}
.sub a{color:#3F4757}
.sub a:hover{color:var(--ink);background:rgba(16,20,28,.05);border-left-color:var(--mint-800)}
.sub .desc{color:#6B7689}
.sub-note{color:#6B7689;border-top-color:rgba(16,20,28,.10)}

/* 히어로 위 통계칩 — 사진·메시 위라 유리가 가장 유리다운 자리 */
.hero .stats div{
  padding:20px 24px;border-radius:var(--r);
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  box-shadow:0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.22),
             0 18px 36px -20px rgba(0,0,0,.6);
}
.hero.light .stats div,.hero-photo .stats div{
  background:rgba(255,255,255,.62);
  box-shadow:0 0 0 1px rgba(16,20,28,.06),inset 0 1px 0 rgba(255,255,255,.9),
             0 14px 30px -18px rgba(16,20,28,.28);
}
.hero .stats{gap:18px;border-top:0}

/* ── 6-3. 버튼·태그 — 전부 알약 ─────────────────────────────────── */
.btn,.gnb .cta,.langsw,.scq-opts button,.svcnav a,
.clients .more,.blog-more,.tags span,.pb-tag,.demo-note,.viral .badge,
.svc .new,.svc .demo,.rule,
.ig-chips span,.ig-stack .it a,.ig-stack .it span,.ig-steps .w,.ig-track .tag,
.ig-steps .bar,.ig-steps .bar i{
  border-radius:var(--r-pill);
}
/* CTA — 투명 유리 (2026-09-04 대표: 「굳이 색이 들어가야 하나, 투명하게」).
   색면을 없애고 유리 두께와 글자색으로만 주/보조를 가른다.
   주버튼: 뿌연 흰 유리 62% + 코발트 헤어라인 + 딥코발트 글자(크림 위 7+, 사진 어두운 곳 5+)
   보조:   맑은 유리 28% + 잉크 글자. 어두운 섹션에선 둘 다 흰 글자. */
.btn-primary,.gnb .cta,
:is(html,#_) :is(#giSend,.dg-card button[type=submit],.cp-card button[type=submit],.iz-card button[type=submit],input[type=submit]){
  background:rgba(255,255,255,.62);color:var(--mint-800);border:0;
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 0 0 1px rgba(77,141,255,.55),inset 0 1px 0 rgba(255,255,255,.9),0 12px 28px -18px rgba(16,20,28,.35);
}
.btn-primary:hover,.gnb .cta:hover{background:rgba(255,255,255,.78);transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(77,141,255,.8),inset 0 1px 0 rgba(255,255,255,.95),0 16px 32px -18px rgba(16,20,28,.4)}
.dark .btn-primary,.dark :is(#giSend,.dg-card button[type=submit],.iz-card button[type=submit]){
  background:rgba(255,255,255,.16);color:#fff;
  box-shadow:0 0 0 1px rgba(124,172,255,.6),inset 0 1px 0 rgba(255,255,255,.35),0 12px 28px -18px rgba(0,0,0,.6);
}
.dark .btn-primary:hover{background:rgba(255,255,255,.24)}
.btn-ghost{
  background:rgba(255,255,255,.08);color:#fff;
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.18);
}
.light .btn-ghost{
  background:rgba(255,255,255,.28);color:var(--ink);
  box-shadow:0 0 0 1px rgba(16,20,28,.14),inset 0 1px 0 rgba(255,255,255,.8);
}
/* 사진 히어로 위 보조 버튼 — 사진 어두운 곳에서 잉크 글자 4.37 → 38% 로 올려 5.3 */
.hero-photo .btn-ghost{background:rgba(255,255,255,.38)}
.btn-ghost:hover{box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.light .btn-ghost:hover{box-shadow:0 0 0 1px rgba(16,20,28,.25)}
.scq-opts button{
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:var(--gl-blur-sm);backdrop-filter:var(--gl-blur-sm);
}

/* ── 6-4. 헤어라인 격자 20개 → 카드 격자 (열 수는 그대로) ────────── */
.svc,.svcnav ul,.ai-flow,.cards,.cmp,.deep-grid,.deep-note,.flow5,
.goals6 ul,.opts,.steps,.modes,.proc,.proof,.leaks,.media,.culture,
.flow,.kinds,.funnel{
  gap:18px;background:transparent;border:0;
}
/* ⚠️ 위 규칙은 점수가 (0,1,0) 이라 `invert_patch` 의 `.light .svc{background:var(--divider)}`
   (0,2,0) 에 진다 — 홈에서 카드 틈으로 회색이 비쳤다(2026-09-03 캡처).
   :is() 로 점수를 (0,2,1) 로 올려 섹션 클래스가 붙은 규칙보다 항상 앞선다. */
:is(.light,.dark) :is(.svc,.svcnav ul,.ai-flow,.cards,.cmp,.deep-grid,.deep-note,.flow5,
  .goals6 ul,.opts,.steps,.modes,.proc,.proof,.leaks,.media,.culture,.flow,.kinds,.funnel){
  background:transparent;border:0;
}
@media (max-width:1024px){
  .svc,.svcnav ul,.ai-flow,.cards,.cmp,.deep-grid,.deep-note,.flow5,
  .goals6 ul,.opts,.steps,.modes,.proc,.proof,.leaks,.media,.culture,
  .flow,.kinds,.funnel{gap:14px}
}

/* ── 6-5. 콘텐츠 카드 — 불투명. 유리 아님 ───────────────────────────
   어두운 면: 브랜드 「다크 카드 배경」 #1B2233 */
.dark .stats:not(.hero .stats) div,.dark .svc article,.ai-panel,.ai-flow div,.dark .posts article,
.culture div,.dark .steps div,.flow5 div,.dark .proc div,.dark .modes div,.peer,
.goalpick a,.dark .flow div,.goals article,.dark .funnel div,.proof div,.report,
.svcnav a{
  border-radius:var(--r);
  background:var(--card-d);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:0;
  box-shadow:var(--card-d-sh);
}
/* 밝은 면: 흰 카드 + 얇은 링. 크림 바닥과 20% 명도차
   ⚠️ .posts 는 홈에서 invert 로 밝은 섹션이 된다. 섹션 구분 없이 어둡게 칠했다가
   「어두운 카드 + 어두운 글자」가 됐다(2026-09-03). 카드는 반드시 .dark/.light 로 나눈다. */
.opts article,.kinds article,.media div,.cards article,.deep-grid > div,
.cmp div,.goals6 a,.leaks article,.light .posts article,.deep-note > div,
.light .svc article,.light .steps div,.light .funnel div,.light .proc div,
.light .modes div,.light .flow div,.light .stats:not(.hero .stats) div,.light .goalpick a{
  border-radius:var(--r);
  background:var(--card-l);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:0;
  box-shadow:var(--card-l-sh);
}

/* ── 6-5b. 밝은 섹션 안의 「의도적 어두운 패널」 ─────────────────────
   .peer(교육)·.ai-panel·.report 처럼 원본이 밝은 섹션에 navy 패널을 둔 것들.
   흰 7.5% 유리로 두면 크림 위에선 투명해져 흰 글자가 크림에 뜬다
   (교육 「동종 에이전시」 1.08:1 — 2026-09-03 라이브에 잠깐 나갔다).
   어두운 틴트 유리(잉크 86% + 블러)로 둔다: 유리이면서 흰 글자 15:1. */
.light :is(.peer,.ai-panel,.culture div,.goals article,.proof div,.report,.svcnav a,
  .flow5 div,.ai-flow div,.goalpick a,.deliver .free,.callout){
  background:rgba(10,14,21,.86);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  box-shadow:0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.12),
             0 24px 48px -22px rgba(16,20,28,.5);
}
.ai-flow .s{color:#C6CEDA}   /* 유리 위 13px 4.28 → 5.2 */

/* ── 6-6. 강조 카드 — 한 묶음에 하나만 색 ─────────────────────────── */
.callout,.deliver .free{
  border-radius:var(--r);background:var(--card-a-d);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:0;border-left:3px solid var(--mint);box-shadow:var(--card-d-sh);
}
.light .callout,.light .deliver .free{background:var(--card-a-l);box-shadow:var(--card-l-sh)}
.ig-stack .base,.ig-tiers .found{background:var(--card-a-l)}
.dark .ig-stack .base,.dark .ig-tiers .found{background:var(--card-a-d)}

/* ── 6-7. 사진·삽입물 ───────────────────────────────────────────
   사진만 챙기고 지도·영상을 빼먹으면 그 둘만 각진 채로 남는다(실제로 그랬다).
   `map_patch`·`video_patch` 는 FIXES 보다 앞서 실리므로 여기서 잡힌다 —
   반면 채팅 위젯(`chat_patch`)은 **뒤**라 안 잡힌다. 그건 그 파일에서 고친다. */
.cases img,.teach img,.viral .poster img,.ceo-photo img,.gi-photo img,
.blog-list img,.post-body figure img,
.gi-map iframe,.gi-vid video,.gi-vid img{border-radius:var(--r)}
.gi-map{border-radius:var(--r);overflow:hidden}
.hero-bg img,.hero-cuts img{border-radius:0}

/* ── 6-8. 인포그래픽 17종 — 바깥 틀만. 안쪽 선은 뜻이 있다 ────────── */
.ig-chain,.ig-pipe,.ig-loop,.ig-vs,.ig-stack,.ig-tiers,.ig-lv,.ig-doc,.ig-mx,.ig-track{
  border-radius:var(--r);overflow:hidden;
}
.ig-tiers .gs{border-radius:0}
.ig-base{border-radius:0 0 var(--r) var(--r)}
.ig-chain:has(+ .ig-base),.ig-pipe:has(+ .ig-base),.ig-loop:has(+ .ig-base),
.ig-vs:has(+ .ig-base),.ig-stack:has(+ .ig-base),.ig-lv:has(+ .ig-base){
  border-radius:var(--r) var(--r) 0 0;
}

/* ── 6-8b. 글자 대비 보정 ──────────────────────────────────────────
   실제 렌더 화면에서 카드 안 글자를 전수 측정해 3:1 미만이던 것들.
   (4.24 짜리 스틸 #6B7689 라벨은 브랜드 토큰 문제라 여기서 안 건드린다) */
.dark .crumb{color:#A5AEBE}                 /* 2.90 → 6.81 */
.dark .crumb a{color:#C6CEDA}
.dark .crumb a:hover{color:#fff}
.light .contrast .a .k{color:#7C8799}       /* 「SUCCESS」 2.07 → 3.36 (32px, 흐림 유지) */
.dark .vs .a .t{color:#6B7A8F}              /* about 「WHAT」 64px #3B4C5E 2.09 → 3.4+ (흐림 유지) */
.dark .vs .a li{color:#A5AEBE}               /* 「클릭」 24px 2.9 → 6.8 */
.svcnav a span{color:#8A94A6}               /* 「01」 2.75 → 5.56 */
.ai-flow .s{color:#8A94A6}                  /* 3.04 → 5.56 */
.leaks .n{color:#B4541A}                    /* 「Leak 01」 앰버 2.16 → 4.97 */
.dk{color:#57606E}                          /* 「한계」 2.18 → 6.36 */
body .blog-list time,body .blog-list .read{color:#57606E}  /* 「약 3분」 2.23 → 6.36 */

/* ── 6-8c. 밝은 바탕의 스틸 라벨 → 슬레이트 (2026-09-03 대표 확정) ──────────
   스틸 #6B7689 는 크림 위 4.24:1 로 작은 글자 기준(4.5) 미달 — 실측 28곳.
   밝은 섹션에서는 토큰째 슬레이트로 바꾼다. 어두운 바탕의 스틸은 그대로.
   (hex 로 박힌 곳은 토큰 재매핑에 안 걸린다 — 아래 프로브 재측정으로 남는 곳을 본다) */
.light{--blue:#57606E;--olive:#57606E}
/* hex 로 박힌 스틸 글자 — 배포본에서 자동 수집한 선택자 */
.light :is(.nav .caret,.sub .desc,.sub-note){color:#57606E}
.light .ix-ind .d,.light .way .d{color:#57606E}          /* portfolio 산업 목록 13px 4.24 → 5.9 */
.dark .ai-flow .s,.ai-panel .ai-flow .s{color:#D6DCE6}   /* 홈 GI-Agent 패널 13px 4.28 → 5.2+ (더 구체적인 원본 규칙에 밀려 있었다) */
.light .ig{--ig-sub:#57606E}

/* ── 6-8d. 생성 페이지(진단·회사소개서·업종 5장·문의) + 폼 (2026-09-03) ──────
   dg-*·cp-*·iz-*·gi-consent 는 별도 클래스라 위 규칙에 한 줄도 안 걸렸다 — 대표님이
   /diagnosis 캡처로 지적. 배포본 CSS 에서 배경색을 자동 수집해 분류한 목록이다.
   전부 FIXES 보다 앞에 실리므로 여기서 덮인다. */
/* 어두운 패널 (밝은 페이지 안) → 잉크 틴트 유리 */
.cp-detail,.dark .mgrid,.dark .mgrid .m,.dark.proofsec .pf,.dark.proofsec .pf-side,.dg-detail,.iz-detail,.iz-perm{
  border-radius:var(--r);background:rgba(10,14,21,.86);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  box-shadow:0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.12),0 24px 48px -22px rgba(16,20,28,.5);
}
/* 밝은 카드 → 흰 유리 */
.dg-perm,.mgrid,.mgrid .m,.pf-side,.proofsec .pf{
  border-radius:var(--r);background:var(--card-l);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  box-shadow:var(--card-l-sh);
}
/* 테두리만 있던 박스 → 모서리만 */
.cp-alt,.cp-consent,.cp-toc,.dg-alt,.dg-consent,.dg-list,.dg-proof,.gi-consent,.ig-doc .cover .m,.iz-alt,.iz-cards article,.iz-check,.iz-consent,.iz-deliver,.iz-ga,.iz-kpi li,.iz-kpi-n,.iz-list,.iz-proof,.iz-r-list,.iz-two,.opts .need,.pf-logos span{border-radius:var(--r)}
/* 폼 입력 — 사이트 전체. 체크박스는 5px (16px 이면 원처럼 보여 라디오와 헷갈린다 — 유일한 예외) */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),select,textarea{border-radius:var(--r)}
input[type=checkbox]{border-radius:5px}
input[type=submit],input[type=button],button[type=submit],#giSend,.dg-card button,.cp-card button,.iz-card button{border-radius:var(--r-pill)}

/* ── 6-8e. 생성 페이지 2차 (자동 분류에서 빠진 것 + 폼 컨트롤 점수 + 라벨 대비) ── */
/* 폼 패널·「계약을 전제로 하지 않습니다」 박스 — 배경이 변수로 안 잡혀 분류에서 빠졌다 */
.dg-card,.cp-card,.iz-card,.dg-free,.iz-free{
  border-radius:var(--r);background:rgba(10,14,21,.86);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  box-shadow:0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.12),0 24px 48px -22px rgba(16,20,28,.5);
}
/* 배경이 무엇이든 모서리는 맞춘다 */
.dg-quiz,.iz-media,.iz-note,.dg-list,.iz-list,.iz-check,.iz-deliver,.iz-cards article{border-radius:var(--r)}
/* select·textarea 는 원본 `.dg-card select` (0,1,1) 에 밀렸다 → (0,1,2) 로 */
body :is(.dg-card,.cp-card,.iz-card,.gi-consent,form) :is(select,textarea,input:not([type=checkbox]):not([type=radio]):not([type=submit])){border-radius:var(--r)}
body :is(.dg-card,.cp-card,.iz-card,form) input[type=checkbox]{border-radius:5px}
/* 생성 페이지 작은 라벨 대비.
   ⚠️ 진단·회사소개서·업종 페이지는 자기 CSS 가 FIXES **뒤**에 붙는다(2026-09-03 실측) —
   같은 점수면 진다. `:is(html,#_)` 로 ID 점수(1,0,0)를 빌려 순서와 무관하게 이긴다.
   #_ 는 존재하지 않는 ID 다. :is() 는 인자 중 가장 높은 점수를 쓰는 규격을 이용한 것. */
:is(html,#_) :is(.dg-card,.cp-card,.iz-card) .opt,
:is(html,#_) :is(.dg-fine,.cp-fine,.iz-fine2){color:#A5AEBE}                 /* 어두운 패널 안 2.9 → 7+ */
:is(html,#_) :is(.iz-sym,.iz-kpi-k,.iz-fine,.iz-sub-k,.dgq-skip),
:is(html,#_) :is([class^=iz-],[class*=" iz-"]) .k,
:is(html,#_) :is(.iz-hero,.iz-top,.iz-head) .k{color:#57606E}                /* 밝은 바탕 3.0~4.2 → 5.9 */

/* ── 6-8f. 생성 페이지 라벨 — 실제 DOM 의 부모 배경으로 밝음/어두움을 판정해 자동 생성 (2026-09-03) ── */
:is(html,#_) :is(.dark .k,.dg-card .opt,.dg-quiz .k,.iz-card .opt,.iz-get .iz-sub-k){color:#A5AEBE}
:is(html,#_) :is(.dark .xk,.iz-get .k,.iz-roster .k){color:#C6CEDA}
:is(html,#_) :is(.dg-main .k,.iz-leak .iz-sym,.iz-leak .k,.iz-offer .k){color:#57606E}

/* ── 6-8g. 진단 페이지 자가진단 블록 — 원본이 `!important`/인라인으로 색을 박아 점수로는 못 이긴다 ── */
.dg-quiz .k,.dg-quiz .dgq-k{color:#9CC2FF!important}      /* 어두운 면 라벨 규약색. 원본 var(--mint) 는 2.9 */
.dgq-skip,.dg-quiz .dgq-skip{color:#A5AEBE!important}     /* 링크 2.9 → 7+ */

/* ── 6-8h. 전체 일괄 검사(23페이지)에서 남은 각진 서피스 27종 (2026-09-03) ────────
   부모·배경을 실제 DOM 에서 읽어 분류했다(audit/sharp2.js·anon.js). */
/* 헤어라인 격자 2개 더 (/brand) */
.rules,.ch{gap:18px;background:transparent;border:0}
/* 밝은 카드 → 흰 유리 */
.rules > div,.ch article,.rgrid article,.ytall li,.contact,.pf-main,.deep-hd,
.light .sc-quiz,section:not(.dark) .sc-quiz{
  border-radius:var(--r);background:var(--card-l);border:0;
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);box-shadow:var(--card-l-sh);
}
.rgrid{background:transparent}
/* 어두운 패널 → 잉크 틴트 유리 */
.pl a,.viral.in,.dark .sc-quiz{
  border-radius:var(--r);background:rgba(10,14,21,.86);border:0;
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  box-shadow:0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.12),0 24px 48px -22px rgba(16,20,28,.5);
}
/* 배경은 그대로, 모서리만 (테두리 콜아웃·컨테이너·코드블록·색 견본) */
.rline,.ask,.box,.deep,.goalpick,.pl,.ig-spec,.ch,pre{border-radius:var(--r)}
.deep,.goalpick,.ytop .th{overflow:hidden;border-radius:var(--r)}
.chip{border-radius:var(--r) var(--r) 0 0}
.meta{border-radius:0 0 var(--r) var(--r)}
/* seo 라벨 — 같은 .k 가 어두운 svcnav 와 밝은 카드 양쪽에 */
:is(html,#_) .svcnav .k{color:#9CC2FF}
:is(html,#_) .rgrid article .k{color:#57606E}

/* ── 6-8i. 마지막 6개 — 생성 페이지(privacy·brand)는 CSS 가 FIXES 뒤라 점수 트릭, 나머지는 부모로 지정 ── */
/* privacy 는 자기 규칙이 ID 점수라 :is 트릭으로도 비긴다(뒤에 와서 이김) → 이 한 곳만 important */
.contact{border-radius:var(--r)!important;background:var(--card-l)!important;border:0!important;
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);box-shadow:var(--card-l-sh)!important}
:is(html,#_) .rules,:is(html,#_) .ch{gap:18px;background:transparent;border:0;border-radius:0}
:is(html,#_) .rgrid{background:transparent;border:0}
.ig-spec > .c,.pf-side > article{border-radius:var(--r)}
.ig-spec > .c:is(.gi-a,[class]),.pf-side > article:is(.gi-a,[class]){border-radius:var(--r)}

/* ── 6-8j. 간격 배율표 (2026-09-04 대표 요청 「PC·모바일 간격이 어설프다」) ──────────
   실측(8페이지×2폭)에서 그리드 gap 이 18·32·36/28·44, 카드 여백이 52/44·38/32·20/20 으로
   제각각이었다. 값을 셋으로 줄인다:
     카드 gap        24 / 20(≤1024) / 16(≤640)
     카드 안쪽 여백   36·32 / 32·28 / 28·22
     제목 블록→그리드 56 / 48 / 40
   그리드는 한 줄 카드가 가장 긴 것에 맞춰 늘어나 아래가 비는데, 여백을 줄여 빈 공간을 좁힌다. */
:root{--gap:24px;--card-pad:36px 32px;--grid-mt:56px}
@media (max-width:1024px){:root{--gap:20px;--card-pad:32px 28px;--grid-mt:48px}}
@media (max-width:640px){:root{--gap:16px;--card-pad:28px 22px;--grid-mt:40px}}
:is(.light,.dark,body) :is(.svc,.svcnav ul,.ai-flow,.cards,.cmp,.deep-grid,.deep-note,.flow5,.goals6 ul,.opts,.steps,.modes,.proc,.proof,.leaks,.media,.culture,.flow,.kinds,.funnel,.posts,.cases,.hero .stats,.goals,.rgrid,.ytall ul){gap:var(--gap)}
body .blog-list{gap:var(--gap)}
:is(.svc,.svcnav ul,.ai-flow,.cards,.cmp,.deep-grid,.deep-note,.flow5,.goals6 ul,.opts,.steps,.modes,.proc,.proof,.leaks,.media,.culture,.flow,.kinds,.funnel,.posts,.cases,.goals,.rgrid,.ytall ul){margin-top:var(--grid-mt)}
.hero .stats{margin-top:64px}
@media (max-width:640px){.hero .stats{margin-top:40px}}
:is(html,#_) :is(.dark .svc article,.svcnav a,.ai-flow div,.dark .posts article,.culture div,.dark .steps div,.flow5 div,.dark .proc div,.dark .modes div,.goalpick a,.dark .flow div,.goals article,.dark .funnel div,.proof div),
:is(html,#_) :is(.opts article,.kinds article,.media div,.cards article,.deep-grid > div,.cmp div,.goals6 a,.leaks article,.light .posts article,.deep-note > div,.light .svc article,.light .steps div,.light .funnel div,.light .proc div,.light .modes div,.light .flow div,.light .goalpick a,.rgrid article){padding:var(--card-pad)}   /* 2026-09-07: .ytall li 는 목록이라 6-11 에서 따로 준다 */
body .blog-list article{padding:20px 20px 24px}       /* 썸네일이 있어 위쪽 여백은 얇게 */
.hero .stats div{padding:20px 24px}
@media (max-width:640px){.hero .stats div{padding:16px 18px}}
/* 제목 블록 내부 리듬: 라벨→제목 24, 제목→리드 20 */
.label{margin-bottom:24px}
h2 + .lead,h2 + .body,h2 + p{margin-top:20px}
@media (max-width:640px){.label{margin-bottom:18px} h2 + .lead,h2 + .body,h2 + p{margin-top:16px}}

/* ── 6-8k. 유리 강화 (2026-09-04 대표: 「리퀴드 글래스를 한층 더」) ────────────────
   버튼은 단색(직전 결정). 유리는 카드·헤더·칩에서 살린다:
   블러 20→28 · 채도 160→190 · 살짝 더 투명(밝은 .58→.50, 어두운 .075→.10) ·
   유리 가장자리 밝은 테두리 · 좌상단에서 흐르는 반사광(::before) · 호버 부상.
   대비: 밝은 유리 위 슬레이트 5.3+, 어두운 유리 위 본문 4.9+ (계산값). */
:root{
  --gl-blur:blur(28px) saturate(190%) brightness(1.04);
  --card-l:rgba(255,255,255,.50);
  --card-l-sh:0 0 0 1px rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.35),
              0 1px 0 rgba(16,20,28,.04),0 24px 48px -24px rgba(16,20,28,.32),0 8px 20px -14px rgba(77,141,255,.25);
  --card-d:rgba(255,255,255,.085);   /* .10 이면 카드 안 라벨 3.67 — 계산상 .085 + #ADCCFF 가 4.9 */
  --card-d-sh:0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.28),
              0 30px 60px -26px rgba(0,0,0,.75),0 10px 24px -16px rgba(77,141,255,.35);
}
/* 반사광 — 카드 좌상단에서 대각선으로 흐르는 하이라이트 */
.dark .stats:not(.hero .stats) div,.dark .svc article,.ai-panel,.ai-flow div,.dark .posts article,.culture div,.dark .steps div,.flow5 div,.dark .proc div,.dark .modes div,.peer,.goalpick a,.dark .flow div,.goals article,.dark .funnel div,.proof div,.report,.svcnav a,.opts article,.kinds article,.media div,.cards article,.deep-grid > div,.cmp div,.goals6 a,.leaks article,.light .posts article,.deep-note > div,.light .svc article,.light .steps div,.light .funnel div,.light .proc div,.light .modes div,.light .flow div,.light .goalpick a,.rgrid article,.ytall li,.dg-card,.cp-card,.iz-card,.dg-free,.iz-free,.contact,.pf-main,.rules > div,.ch article,.hero .stats div,body .blog-list article{position:relative;overflow:hidden;transition:transform .28s ease,box-shadow .28s ease}
.dark .stats:not(.hero .stats) div::before,.dark .svc article::before,.ai-panel::before,.ai-flow div::before,.dark .posts article::before,.culture div::before,.dark .steps div::before,.flow5 div::before,.dark .proc div::before,.dark .modes div::before,.peer::before,.goalpick a::before,.dark .flow div::before,.goals article::before,.dark .funnel div::before,.proof div::before,.report::before,.svcnav a::before,.opts article::before,.kinds article::before,.media div::before,.cards article::before,.deep-grid > div::before,.cmp div::before,.goals6 a::before,.leaks article::before,.light .posts article::before,.deep-note > div::before,.light .svc article::before,.light .steps div::before,.light .funnel div::before,.light .proc div::before,.light .modes div::before,.light .flow div::before,.light .goalpick a::before,.rgrid article::before,.ytall li::before,.dg-card::before,.cp-card::before,.iz-card::before,.dg-free::before,.iz-free::before,.contact::before,.pf-main::before,.rules > div::before,.ch article::before,.hero .stats div::before,body .blog-list article::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 28%,rgba(255,255,255,0) 52%);
  mix-blend-mode:soft-light;
}
.dark :is(.stats:not(.hero .stats) div,.svc article,.ai-panel,.ai-flow div,.posts article,.culture div,.steps div,.flow5 div,.proc div,.modes div,.peer,.goalpick a,.flow div,.goals article,.funnel div,.proof div,.report,.svcnav a,.opts article,.kinds article,.media div,.cards article,.deep-grid > div,.cmp div,.goals6 a,.leaks article,.posts article,.deep-note > div,.svc article,.steps div,.funnel div,.proc div,.modes div,.flow div,.goalpick a,.rgrid article,.ytall li,.dg-card,.cp-card,.iz-card,.dg-free,.iz-free,.contact,.pf-main,.rules > div,.ch article,.hero .stats div,body .blog-list article)::before,.peer::before,.report::before,.ai-panel::before{
  background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.06) 30%,rgba(255,255,255,0) 55%);mix-blend-mode:normal;
}
/* 호버 부상 — 링크형 카드만 (손가락 화면엔 hover 없음) */
@media (hover:hover){
  :is(.svc article,.opts article,.cards article,.goals6 a,.goalpick a,.svcnav a,.kinds article,.leaks article,body .blog-list article):hover{
    transform:translateY(-3px);
  }
}
/* 헤더 — 더 투명하게, 내용이 밑으로 흐르는 게 보이게 */
.gnb{background:rgba(255,255,255,.66);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border-bottom:1px solid rgba(255,255,255,.7);box-shadow:0 1px 0 rgba(16,20,28,.06),0 12px 32px -24px rgba(16,20,28,.35)}
/* 칩·태그 — 유리 알약 */
.tags span,.ig-chips span,.ig-stack .it a,.ig-stack .it span,.ig-steps .w,.ig-track .tag,.pb-tag,.demo-note,.viral .badge{
  background:rgba(255,255,255,.55);-webkit-backdrop-filter:var(--gl-blur-sm);backdrop-filter:var(--gl-blur-sm);
  box-shadow:0 0 0 1px rgba(255,255,255,.8),inset 0 0 0 1px rgba(16,20,28,.06);
}
.dark :is(.tags span,.ig-chips span,.ig-stack .it a,.ig-stack .it span,.ig-steps .w,.ig-track .tag,.pb-tag,.demo-note){
  background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.18);
}
/* 히어로 통계칩 — 사진 위라 가장 유리다운 자리: 더 투명·더 블러 */
.hero.light .stats div,.hero-photo .stats div{background:rgba(255,255,255,.42)}
.hero .stats div{-webkit-backdrop-filter:blur(32px) saturate(200%);backdrop-filter:blur(32px) saturate(200%)}

/* ── 6-8l. 전수조사(2026-09-04 2차) 잔여 ──────────────────────────
   어두운 폼 패널(dg/cp/iz-card) 위의 제출 버튼은 흰 62% 유리면 회색이 되어 딥코발트 3.62 →
   어두운 섹션과 같은 규칙(흰 16% + 흰 글자). 블로그 글 하단 관련 서비스 링크는 각짐. */
:is(html,#_) :is(.dg-card,.cp-card,.iz-card) :is(.btn,.btn-primary,button[type=submit],#giSend){
  background:rgba(255,255,255,.16);color:#fff;
  box-shadow:0 0 0 1px rgba(124,172,255,.6),inset 0 1px 0 rgba(255,255,255,.35),0 12px 28px -18px rgba(0,0,0,.6);
}
:is(html,#_) :is(.dg-card,.cp-card,.iz-card) :is(.btn,.btn-primary,button[type=submit],#giSend):hover{background:rgba(255,255,255,.24)}
.light figcaption,.light .viral figcaption{color:#57606E}              /* creative 캡션 3.04 → 5.9 */
body .rl-svc{border-radius:var(--r)}                                   /* 블로그 글 관련 서비스 링크 */

/* ── 6-8m. 어두운 바탕 위 주버튼 — ID 점수 문제 (2026-09-04 전수조사 2차) ──────
   밝은 유리 규칙이 `:is(html,#_) :is(#giSend,…)` 라 (2,0,0) 이고 `.dark .btn-primary` (0,2,0) 이 진다.
   문의 「문의 보내기」·진단 「자가진단 시작」이 어두운 바탕에서 밝은 유리+딥코발트로 3.5 가 됐다.
   어두운 컨테이너 안에서는 (2,1,0) 으로 확실히 이기게 한다. */
:is(html,#_) :is(.dark,.dg-card,.cp-card,.iz-card,.dg-quiz,.dg-free,.iz-free,.peer,.ai-panel,.report,.hero-photo.dark) :is(#giSend,.btn-primary,.btn,button[type=submit],input[type=submit]){
  background:rgba(255,255,255,.16);color:#fff;
  box-shadow:0 0 0 1px rgba(124,172,255,.6),inset 0 1px 0 rgba(255,255,255,.35),0 12px 28px -18px rgba(0,0,0,.6);
}
:is(html,#_) :is(.dark,.dg-card,.cp-card,.iz-card,.dg-quiz,.dg-free,.iz-free,.peer,.ai-panel,.report) :is(#giSend,.btn-primary,.btn,button[type=submit]):hover{background:rgba(255,255,255,.24)}
/* 어두운 패널 안 보조 버튼도 흰 글자 */
:is(html,#_) :is(.dark,.dg-card,.cp-card,.iz-card,.dg-quiz,.peer,.ai-panel,.report) .btn-ghost{background:rgba(255,255,255,.08);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.18)}
/* creative 바이럴(어두운 패널) 안 캡션 */
:is(html,#_) :is(.dark,.viral) figcaption{color:#C6CEDA}   /* 원본 .viral .poster figcaption (0,3,1) 을 이기려면 ID 점수 */

/* ── 6-8n. 눈 검수 (2026-09-04) ─────────────────────────────────────
   블로그 목록 필터·글 카테고리 태그가 각진 네모로 남아 있었다 → 알약.
   홈 히어로 사진 컷 전환 점이 4번째 통계칩과 겹쳤다 → 우상단으로. */
body .blog-filter a,body .blog-filter button,body .blog-tabs a,body .cats a,body .cats button,body .post-meta .cat,body .post-hero .cat,body .blog-list .cat,body .blog-filter a,body .post-meta .cat{
  border-radius:var(--r-pill);
}
body :is(.blog-filter,.blog-tabs,.cats) :is(a,button){background:rgba(255,255,255,.55);-webkit-backdrop-filter:var(--gl-blur-sm);backdrop-filter:var(--gl-blur-sm);box-shadow:0 0 0 1px rgba(16,20,28,.12);border:0}
body :is(.blog-filter,.blog-tabs,.cats) :is(a,button):is(.on,.active,[aria-current]){background:var(--ink);color:#fff;box-shadow:none}
.hero-photo .hero-dots{bottom:auto;top:28px;right:34px}

/* ── 6-9. 블로그 (POST_CSS 가 뒤에 오므로 body 로 이긴다) ───────────── */
body .blog-list article{
  border-top:0;border-radius:var(--r);padding:20px 20px 24px;
  background:var(--card-l);box-shadow:var(--card-l-sh);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
}
body .blog-list img{margin-bottom:14px}
body .post-def{border-radius:var(--r)}
body .post-body blockquote{border-radius:0 var(--r) var(--r) 0}

/* ── 6-11. 09-04 전환에서 빠진 것 (2026-09-07) ──────────────────────
   대표님이 /goals 의 「이 목적으로 무료 진단」 버튼을 보고 「일부러 직사각인가」라고 물어서 찾았다.
   놓친 이유는 검수 프로브 audit/all.js 가 ① 크기 하한(width>=100 && height>=40)으로
   작은 버튼·칩을 걸러내고 ② `.ig-*` 인포그래픽을 의도된 도형으로 제외하기 때문이다.
   하한을 50x18 로 낮춘 audit/small.js 로 다시 훑어 아래 넷을 찾았다.
   ⚠️ `.ig-vs .col` · `.ig-doc .cover` · `.ig-loop .st` · `.ig-lv .c` · `.ig-tiers .gs a` 와
      /brand 색 견본(`.sw button`)은 **일부러 각진 것**이다. 둥글게 만들지 마라. */

/* (1) /goals 「이 목적으로 무료 진단」 — 전역 버튼 목록(.btn/.btn-primary/button[type=submit]…)에
       없던 클래스라 각진 채 남았다. 밝은 섹션이라 흰 62% 유리 + 딥코발트 글자. */
:is(html,#_) .gr .go-dg{
  border-radius:var(--r-pill);border:0;
  background:rgba(255,255,255,.62);color:var(--mint-800);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 0 0 1px rgba(77,141,255,.55),inset 0 1px 0 rgba(255,255,255,.9),
             0 12px 28px -18px rgba(16,20,28,.35);
}
:is(html,#_) .gr .go-dg:hover{background:rgba(255,255,255,.78);color:var(--mint-800)}

/* (2) /goals 목적 선택 격자 — 6-4 헤어라인 격자 목록에서 빠졌다.
       타일(.goalpick a)은 이미 유리인데 사이에 1px 선이 비쳤다. */
:is(.light,.dark) .goalpick{gap:var(--gap);background:transparent;border:0}

/* (3) /seo 커뮤니티 칩 — reputation_patch.py 가 만드는 `.rplat span` 이 6-2 칩 목록에 없었다 */
.rplat span{border-radius:var(--r-pill)}
.dark .rplat span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.light .rplat span{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.8)}

/* (4) 영문 5페이지 — 클래스가 영문 전용(build_en.py)이라 6-4·6-5·6-6 목록에 없었다.
       영문도 fixes.html 을 받으므로 버튼은 이미 유리였고 카드만 옛 헤어라인 격자로 남아 있었다.
       ⚠️ 영문 CSS 의 `.dark .svcrow` `.dark .encards article` 이 (0,2,0)/(0,2,1) 로 점수가 같고
          FIXES 보다 뒤에 와서 이긴다 → `:is(html,#_)` 로 ID 점수를 빌려 (1,2,0) 이상으로 만든다. */
:is(html,#_) :is(.light,.dark) :is(.encards,.caselist,.svcrow){
  gap:var(--gap);background:transparent;border:0;
}
:is(html,#_) .light :is(.encards article,.caselist article,.svcrow .r){
  border-radius:var(--r);background:var(--card-l);border:0;
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  box-shadow:var(--card-l-sh);padding:var(--card-pad);
}
:is(html,#_) .dark :is(.encards article,.caselist article,.svcrow .r){
  border-radius:var(--r);background:var(--card-d);border:0;
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  box-shadow:var(--card-d-sh);padding:var(--card-pad);
}
/* (5) 남은 작은 배지·칩 세 종 — 전부 알약
       `.caselist .cat`  영문 사례 카드의 업종 라벨 (테두리 사각형)
       `.ch .pri`        /brand 「가장 급합니다」 배지
       `.ytop .dur`      /education 유튜브 영상 길이 배지 (8:16) */
:is(html,#_) :is(.caselist .cat,.ch .pri,.ytop .dur){border-radius:var(--r-pill)}
/* (6) /goals 2층 계층도 (`.ig-tiers`) — 2026-09-07 대표님이 「일부러 직사각인가」로 가리킨 것이
       실은 여기다. 처음엔 `.ig-*` 라는 이유로 「의도된 도형」으로 분류해 그대로 뒀는데,
       안쪽 타일은 `a` 링크에 hover 까지 있는 **카드**라 각지면 안 된다.
       ⚠️ 층 구분(`.tier` 아래 테두리)과 기반 층 파란 띠(`.found`)는 계층의 의미이니 그대로 둔다.
       ⚠️ 같은 `.ig-*` 라도 흐름도(`.ig-loop .st`)·대비 열(`.ig-vs .col`)·문서 표지(`.ig-doc .cover`)·
          계단(`.ig-lv .c`)은 도형이라 각진 게 맞다. 여기만 카드다. */
:is(html,#_) .ig-tiers .gs{gap:12px;background:transparent;border:0}
:is(html,#_) .ig-tiers .gs a{
  border-radius:var(--r);background:var(--card-l);border:0;
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  box-shadow:var(--card-l-sh);
}
:is(html,#_) .dark .ig-tiers .gs a{background:var(--card-d);box-shadow:var(--card-d-sh)}
:is(html,#_) .ig-tiers .gs a:hover{background:rgba(255,255,255,.74)}
:is(html,#_) .dark .ig-tiers .gs a:hover{background:rgba(255,255,255,.16)}

/* (7) /education 「마케팅 실무 12강」 목록 (`.ytall li`) — 2026-09-07 대표님 지적.
       한 줄짜리 목록 항목인데 6-8j 의 카드 여백(--card-pad 36·32)을 그대로 받아
       **여백 72px 이 내용 56px 보다 커져** 목록이 늘어져 보였다(실측 563×128).
       목록은 카드가 아니라 줄이다 — 여백을 줄이고 그림자도 한 단계 낮춘다.
   ⚠️ **여백이 두 겹이었다** — `li` 에 카드 여백이 붙고 그 안 `button` 에 또 `17px 20px`(youtube_patch.py)
      가 있었다. 그래서 글자 22px 짜리 한 줄이 128px 카드가 됐다. `li` 는 0 으로 두고
      `button` 하나만 여백을 갖게 한다 — 그래야 hover 배경도 카드 전체를 덮는다
      (그 전에는 회색 박스가 카드 안쪽에 작게 떠 보였다).
   ⚠️ 컨테이너 `.ytall ul` 도 헤어라인 격자다(`gap:1px` + 배경 + 테두리, youtube_patch.py:78).
      6-4 의 gap 목록에는 있었지만 **배경·테두리를 지우는 목록에는 없어서** 카드 뒤에
      회색 판이 통째로 남아 있었다. */
:is(html,#_) .ytall ul{background:transparent;border:0}

/* (8) 같은 증상(카드는 둥근데 **컨테이너에 회색 판이 남음**)이 남아 있던 두 곳 — 2026-09-07.
       컨테이너를 훑는 프로브(scratchpad `grid.js`: display:grid + 자식이 전부 둥근 카드인데
       컨테이너에 배경·테두리가 있는 곳)로 찾았다.
       `.pl`      /brand 페이지 목록 — 어두운 헤어라인 격자
       `.mgrid`   영문 홈 매체 로고 — 국문은 흰 유리인데 영문만 회색 판이었다 */
:is(html,#_) .pl{background:transparent;border:0;gap:var(--gap)}
:is(html,#_) .mgrid{background:var(--card-l);border:0}
:is(html,#_) .dark .mgrid{background:var(--card-d)}
:is(html,#_) .ytall li{padding:0}
:is(html,#_) .ytall li > button{padding:15px 22px;border-radius:var(--r)}
:is(html,#_) .ytall button:hover{background:rgba(255,255,255,.55)}
:is(html,#_) .dark .ytall button:hover{background:rgba(255,255,255,.10)}
:is(html,#_) .ytall li{
  box-shadow:0 0 0 1px rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.35),
             0 10px 20px -14px rgba(16,20,28,.28);
}
:is(html,#_) .dark .ytall li{
  box-shadow:0 0 0 1px rgba(255,255,255,.16),inset 0 1px 0 rgba(255,255,255,.28),
             0 12px 24px -16px rgba(0,0,0,.6);
}
@media (max-width:640px){:is(html,#_) .ytall li > button{padding:13px 18px}}

/* 영문 /en/work 고객사 이름 칩 (`.enchips span`, build_en.py:177) — 국문 `.tags span` 과 짝이다 */
:is(html,#_) .enchips span{border-radius:var(--r-pill)}
:is(html,#_) .light .enchips span{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.8)}
:is(html,#_) .dark .enchips span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}

/* ── 6-10. 모바일 — 모서리 값은 여기서 다시 정하지 않는다 ─────────── */
@media (max-width:640px){
  /* 헤더가 흰 유리이므로 햄버거 선도 어둡게 바꾼다 — 흰 선은 안 보인다.
     원본이 `background:linear-gradient(#C6CEDA,...)` 세 겹으로 선을 그리므로
     `background-image` 를 통째로 다시 준다(색만 바꿀 수 없다). */
  .gnb-toggle{
    border-radius:var(--r);border-color:rgba(16,20,28,.16);
    background-color:rgba(255,255,255,.55);
    background-image:
      linear-gradient(#3F4757,#3F4757),
      linear-gradient(#3F4757,#3F4757),
      linear-gradient(#3F4757,#3F4757);
    -webkit-backdrop-filter:var(--gl-blur-sm);backdrop-filter:var(--gl-blur-sm);
  }
  .gnb-toggle:checked{border-color:var(--mint-800)}
  .nav{
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
    border-bottom:1px solid rgba(16,20,28,.10);
    border-radius:0 0 var(--r) var(--r);
    box-shadow:0 22px 44px -24px rgba(16,20,28,.45);
    overflow:hidden;
  }
  .nav > li > a{border-bottom:1px solid rgba(16,20,28,.08)}
  /* 펼친 메뉴 안의 하위 목록에 유리를 겹치지 않는다 — 두 겹이면 탁해진다 */
  .sub{
    background:rgba(16,20,28,.04);
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-radius:0;border:0;box-shadow:none;
  }
  .sub a{border-bottom:1px solid rgba(16,20,28,.06)}
  .svc,.svcnav ul,.ai-flow,.cards,.cmp,.deep-grid,.deep-note,.flow5,
  .goals6 ul,.opts,.steps,.modes,.proc,.proof,.leaks,.media,.culture,
  .flow,.kinds,.funnel{gap:12px}
  .hero .stats{gap:12px}
  .hero .stats div{padding:16px 18px}
}
/* 8. 키보드 초점 — 2026-09-22. 탭으로 다니는 사람에게 지금 자리가 보여야 한다. 마우스 클릭에는 안 뜬다 */
:focus-visible{outline:2px solid var(--mint-800);outline-offset:3px;border-radius:6px}
.dark :focus-visible,.sec-run-dark :focus-visible,.gnb .cta:focus-visible{outline-color:var(--mint)}
/* 9. 어두운 CTA 의 안내문(.note) — 원본이 밝은 면용 --muted-light 를 써서 2.69:1 이었다 (2026-09-22 프로브). 어두운 면 보조 글자색으로 */
section.cta.dark .note,.sec-run-dark section.cta .note{color:#A5AEBE}