/* ═══════════════════════════════════════════
   하위 페이지(SEO·GEO 가이드, 무료 진단, 홈페이지 제작)를 메인과 같은 톤으로 (2026-11-12)
   fc.css 다음에 불러온다. 상단바에 data-theme="light"를 줘서 body.light가 켜져 있어야 한다.
   - 색: 보라·분홍 그라데이션 → 파랑 단색, 바탕 연회색 #f9f9f9
   - 틀: 양옆 세로선(fc-frame) + 위쪽 알림 띠(fc-ann)는 HTML에 직접 넣었다
   - 버튼: 검은 알약 → 파란 사각 버튼(10px), 보조 버튼은 회색
   ═══════════════════════════════════════════ */
body.light {
  --bg: #f9f9f9; --bg2: #f3f3f3; --surface: #fff; --surface-2: #f6f6f6; --card-grad: #fff;
  --text: #262626; --muted: #5c5c5c; --dim: #a1a1a1;
  --border: #e8e8e8; --line: #e8e8e8; --line2: #dcdcdc; --track: #ececec;
  --accent: var(--blue); --acc: var(--blue); --acc-soft: var(--blue-soft);
  --a: var(--blue); --b: #5b7fff; --p: var(--blue); --c: var(--blue);
  --grad-a: var(--blue); --grad-b: #5b7fff;
  --grad: linear-gradient(135deg, #2b5cff, #5b7fff); --grad2: linear-gradient(135deg, #2b5cff, #5b7fff);
  --grad-text: linear-gradient(90deg, #2b5cff, #2b5cff);
  --g-S: var(--blue);
  --shadow: 0 1px 2px rgba(0, 0, 0, .04); --shadow-lg: 0 20px 40px -24px rgba(0, 0, 0, .18);
  --fpad: clamp(16px, 3vw, 40px);
}
body.light ::selection { background: rgba(43, 92, 255, .18); }

/* 본문이 양옆 세로선에 닿지 않게: 본문 폭을 세로선 안쪽으로 */
.light main { max-width: none; width: var(--fw); margin-left: auto; margin-right: auto; padding-left: var(--fpad); padding-right: var(--fpad); }
.light main .container { width: 100%; }

/* ── 위쪽 배경: 보라 빛 대신 메인 히어로와 같은 격자 (제목 뒤는 비움) ── */
.light .bg-glow { position: absolute; left: 0; right: 0; top: 0; height: 560px; z-index: 0; }
.light .bg-glow::before { display: none; }
.light .bg-glow::after {
  inset: 0; filter: none;
  background-image: radial-gradient(circle, #d6d6d6 1.4px, transparent 1.6px), linear-gradient(var(--l) 1px, transparent 1px), linear-gradient(90deg, var(--l) 1px, transparent 1px);
  background-size: 101px 101px; background-position: calc(50% + 50px) 50px, center 0, center 0;
  -webkit-mask-image: radial-gradient(ellipse 42% 46% at 50% 48%, transparent 58%, #000 92%), linear-gradient(#000 45%, transparent 96%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 42% 46% at 50% 48%, transparent 58%, #000 92%), linear-gradient(#000 45%, transparent 96%);
  mask-composite: intersect;
}
/* 홈페이지 제작: 제목이 왼쪽에 있어서 격자를 오른쪽만 */
.light.web-page .bg-glow::after {
  -webkit-mask-image: linear-gradient(90deg, transparent 45%, #000 70%), linear-gradient(#000 45%, transparent 96%);
  mask-image: linear-gradient(90deg, transparent 45%, #000 70%), linear-gradient(#000 45%, transparent 96%);
}

/* ── 글자 강조: 파랑 단색 ── */
.light .grad-text, .light h1 em, .light h2 em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--blue); -webkit-text-fill-color: var(--blue); }

/* ── 제목 위 꼬리표(pill): 흰 바탕 + 파란 고정폭 글꼴 ── */
.light .pill { border-radius: 999px; border: 1px solid var(--l); background: #fff; box-shadow: none; }
.light .pill b { background: var(--blue); font-family: var(--mono); font-weight: 500; letter-spacing: .04em; border-radius: 6px; }
.light .pill .dot { background: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }

/* ── 버튼 ── */
.light main .btn-primary, .light #submit, .light .btn-grad, .light .cta-band a {
  border-radius: 10px; background: var(--blue); color: #fff; border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .08), 0 8px 18px -8px rgba(43, 92, 255, .75);
}
.light main .btn-primary:hover, .light #submit:hover, .light .btn-grad:hover, .light .cta-band a:hover { background: var(--blue-d); transform: none; }
.light main .btn-ghost, .light .cta-band a + a { border-radius: 10px; border: 0; background: #ececec; color: var(--ink); box-shadow: none; }
.light main .btn-ghost:hover, .light .cta-band a + a:hover { background: #e2e2e2; }

/* ── 탭 (가이드 목차, 진단 SEO/GEO 전환) ── */
.light .sub-tabs, .light .mode-tabs { border-radius: 12px; border: 1px solid var(--l); background: #fff; box-shadow: none; }
.light .sub-tabs a, .light .mode-tab { border-radius: 8px; }
.light .sub-tabs a.active, .light .mode-tab.active { background: var(--blue); color: #fff; }
.light .sub-tabs a.active *, .light .mode-tab.active small { color: rgba(255, 255, 255, .8); }

/* ── 검색창 ── */
.light .search-box { border-radius: 14px; border: 1px solid var(--l); background: #fff; box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .22); }
.light #submit { border-radius: 10px; }

/* ── 카드: 얇은 회색 테두리 + 작은 모서리, 그림자 거의 없이 ── */
.light .card, .light .panel, .light .pager-card, .light .callout, .light .serp-legend div, .light .calc-kpi, .light .stat, .light .grade-card, .light .dialog { border-radius: 14px; }
.light .card { border-color: var(--l); box-shadow: none; }
.light .grade-card.current { box-shadow: 0 0 0 3px color-mix(in srgb, var(--g) 22%, transparent); }

/* ── 아래쪽 상담 띠: 메인 카드처럼 흰 바탕 + 회색 테두리 ── */
.light .cta-band { border-radius: 14px; border: 1px solid var(--l); background: #fff; }
.light .cta-band::before { display: none; }

@media (max-width: 640px) {
  .light .search-box { border-radius: 14px; }
}

/* 메인의 .lead(신청서 카드) 규칙이 하위 페이지의 설명 문단(p.lead)에 묻지 않게 */
.light p.lead { border: 0; border-radius: 0; background: none; box-shadow: none; }

/* ── 홈페이지 제작 맨 아래 상담 영역: 회색 상자 + 흰 판이 겹쳐 글자가 왼쪽 끝에 붙던 것을
      메인처럼 흰 카드 하나로 정리하고 안쪽 여백을 준다 ── */
.light.web-page .final { width: 100%; padding: 0; margin-bottom: clamp(64px, 8vw, 110px); border-radius: 0; overflow: visible; }
.light.web-page .final-bg { display: none; }
.light.web-page .final-in { padding: clamp(28px, 4.5vw, 56px); gap: clamp(32px, 4vw, 56px); }
.light.web-page .final-copy .kicker { font-family: var(--mono); font-weight: 500; letter-spacing: .08em; color: var(--blue); }
.light.web-page .final .lead { background: #fafafa; box-shadow: none; }
.light .quick-row { border-radius: 12px; border-color: var(--l); }
.light .quick-row button { border-radius: 10px; background: var(--blue); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 18px -8px rgba(43, 92, 255, .75); }
.light .quick-row button:hover { background: var(--blue-d); }
@media (max-width: 640px) {
  .light .quick-row { border-radius: 12px; }
}