/*
Theme Name: Eutteum ENG
Theme URI:
Author: 5FUNNEL / OSC
Description: 으뜸ENG 방수·외벽도색 / 잡철·철구조물 C 리드형 랜딩 테마. 승인된 bespoke Astro 디자인(yoonho 방식 포팅) 충실 이식 · trust blue.
Version: 1.4.0
Text Domain: eutteum
*/

/* ===========================================================================
   1. @osc/ui BASE TOKENS — shared base (trust/blue). EVERY variable referenced
      by the LeadForm + call bar is defined here. The bespoke :root override
      block below (source-order wins) adds the dark/sheen/ease tokens.
   =========================================================================== */
:root {
  /* Brand — blue (물·철 = trust) + warm CTA accent */
  --brand-primary: #1f5fbf;       /* primary blue */
  --brand-primary-dark: #16498f;  /* navy — pill text / ours emphasis */
  --brand-primary-soft: #eaf1fb;  /* tinted background */
  --brand-ink: #16202e;           /* near-black text */
  --brand-ink-soft: #54616f;      /* secondary text */
  --brand-line: #e2e7ee;          /* hairline borders */
  --brand-surface: #ffffff;
  --brand-surface-alt: #f6f8fb;
  --brand-accent: #ff7a1a;        /* CTA / phone accent (warm) */
  --brand-success: #14924d;

  /* Typography */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;

  /* Radius / shadow */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(22, 32, 46, 0.04), 0 8px 24px rgba(22, 32, 46, 0.06);

  /* Layout */
  --container-max: 720px;         /* leadform card / privacy width */
  --mobile-callbar-h: 64px;       /* reserved space for fixed bottom call bar */
  --header-h: 58px;               /* sticky header height (blog sticky offsets) */
}

/* ===========================================================================
   2. BASE RESETS
   =========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--brand-ink);
  background: var(--brand-surface);
  line-height: 1.7;
  /* Korean text: prevent mid-syllable line breaks across the whole page. */
  word-break: keep-all;
  overflow-wrap: anywhere;
  /* iOS Safari address-bar safe — dvh, never 100vh. */
  min-height: 100dvh;
}

/* leave room for the fixed mobile call bar so the footer isn't covered */
@media (max-width: 767px) {
  body { padding-bottom: var(--mobile-callbar-h); }
}

/* Korean headlines: snug leading + balanced wrap (no orphan words). */
h1, h2, h3 {
  line-height: 1.25;
  text-wrap: balance;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
p { text-wrap: pretty; margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }

/* ===========================================================================
   3. SHARED UTILITIES (leadform + call bar base)
   =========================================================================== */
.osc-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 20px;
}

.osc-eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand-primary);
  text-transform: none;
}

/* CTA buttons — base. GPU-safe transitions (transform/opacity). */
.osc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: 14px 22px;
  border: 1px solid transparent;
  transition: transform 0.15s ease, opacity 0.15s ease;
  will-change: transform;
}
.osc-btn:active { transform: translateY(1px); }
.osc-btn-primary { background: var(--brand-primary); color: #fff; }
.osc-btn-call { background: var(--brand-accent); color: #fff; }
.osc-btn-ghost { background: #fff; color: var(--brand-primary); border-color: var(--brand-primary); }

/* Placeholder image slot (used by blog fallbacks). */
.osc-image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--brand-surface-alt);
  border: 1px dashed var(--brand-line);
  border-radius: var(--radius-md);
  color: var(--brand-ink-soft);
  font-size: 0.8125rem;
  padding: 24px;
  min-height: 160px;
}

/* ===========================================================================
   ==========  BESPOKE :root OVERRIDE (source-order wins over base)  ==========
   Copied from sites/eutteum-eng/src/styles/app.css — dark/sheen/ease tokens.
   =========================================================================== */
:root {
  /* 커스텀 클론 전용 토큰 (블루 팔레트) */
  --brand-dark: #0f1b2d;           /* 다크 섹션(블루 차콜) */
  --brand-dark-2: #16263d;         /* 다크 카드(블루 차콜) */
  --brand-accent-soft: #fdeede;    /* 오렌지 틴트 */
  --brand-cream: #f6f8fb;          /* 카드 톤 */

  /* 버튼 입체감(3D) — sheen = 세로 명도차 버벨, shadow = 다단, transform/box-shadow만 애니메이션 */
  --btn-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, 0.12) 100%);
  --btn-shadow: 0 1px 2px rgba(22, 32, 46, 0.18), 0 3px 8px rgba(22, 32, 46, 0.14);
  --btn-shadow-hover: 0 3px 6px rgba(22, 32, 46, 0.20), 0 10px 22px rgba(22, 32, 46, 0.18);
  --btn-shadow-active: 0 1px 2px rgba(22, 32, 46, 0.22);
  --btn-shadow-dark: 0 2px 8px rgba(0, 0, 0, 0.32);
  --btn-shadow-dark-hover: 0 6px 20px rgba(0, 0, 0, 0.42);

  /* 공용 easing (natural deceleration) */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 히어로 플로팅 칩 — 은은한 상하 부유 루프(GPU-safe: transform만) */
@keyframes eut-float-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes eut-float-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes eut-spin { to { transform: rotate(360deg); } }
@keyframes eut-pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* 상담 폼 제출/전화 버튼(@osc/ui LeadForm .osc-btn) 입체감 오버라이드 */
.osc-btn-primary,
.osc-btn-call {
  background: var(--btn-sheen), var(--brand-primary);
  box-shadow: var(--btn-shadow);
  transition: transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart), filter 0.2s var(--ease-out-quart);
}
.osc-btn-call { background: var(--btn-sheen), var(--brand-accent); }
.osc-btn-primary:hover,
.osc-btn-call:hover { transform: translateY(-2px); box-shadow: var(--btn-shadow-hover); filter: brightness(1.04); }
.osc-btn-primary:active,
.osc-btn-call:active { transform: translateY(0); box-shadow: var(--btn-shadow-active); }

/* 상담 폼 UX 폴리시 (공유 leadform 무수정, 사이트-로컬) */
.osc-field input,
.osc-field textarea {
  transition: border-color 0.16s var(--ease-out-quart), box-shadow 0.16s var(--ease-out-quart), background-color 0.16s var(--ease-out-quart);
}
.osc-field input:focus,
.osc-field textarea:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 1px;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(31, 95, 191, 0.18);
}
.osc-field.is-invalid input,
.osc-field.is-invalid textarea { border-color: #d94a4a; box-shadow: 0 0 0 3px rgba(217, 74, 74, 0.15); }
.osc-field.is-valid input { border-color: rgba(20, 146, 77, 0.55); }
.osc-field__hint {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.45;
  color: #c0392b;
  display: flex;
  align-items: center;
  gap: 4px;
}
.osc-field.is-valid .osc-field__hint { color: var(--brand-success); }
.osc-field__hint::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.osc-leadform-submit:disabled { opacity: 0.85; cursor: progress; }
.osc-leadform-submit:disabled::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  animation: eut-spin 0.7s linear infinite;
}
.osc-leadform-done::before {
  content: "";
  display: block;
  width: 58px;
  height: 58px;
  margin: 2px auto 16px;
  border-radius: 50%;
  background: var(--brand-success)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E")
    center / 28px 28px no-repeat;
  box-shadow: 0 12px 26px -10px rgba(20, 146, 77, 0.65);
  animation: eut-pop 0.42s var(--ease-out-quint);
}

/* 앵커 스크롤: sticky 헤더 높이만큼 여백(제목이 헤더에 가리지 않게) */
:where(section[id], [id="lead-final"]) { scroll-margin-top: calc(var(--header-h) + 24px); }

/* 키보드 포커스 링 (접근성) */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}
:where(.hero, .darkcta, .site-footer, .quickmenu) :where(a, button):focus-visible {
  outline-color: var(--brand-accent);
}

/* 가로 오버플로 클립 (모바일 스크롤 방지). html/body overflow-x는 sticky를 깨므로 main에만 clip. */
main { overflow-x: clip; }

/* ── 스크롤 리빌 (JS-off / reduced-motion 안전) ──────────────────────────────
   main.js 가 .reveal → .in 토글. html.reveal-on 은 header.php head 가드가
   (모션 허용 시에만) 부여 → JS 없음/reduced-motion 이면 클래스 없음 = 항상 표시. */
html.reveal-on .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.72s var(--ease-out-quart), transform 0.72s var(--ease-out-quint);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
html.reveal-on .reveal[data-reveal="left"] { transform: translate3d(-44px, 8px, 0); }
html.reveal-on .reveal[data-reveal="right"] { transform: translate3d(44px, 8px, 0); }
html.reveal-on .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .osc-btn,
  .osc-btn-primary,
  .osc-btn-call { transition: none; }
  .osc-btn-primary:hover,
  .osc-btn-call:hover { transform: none; }
  .osc-leadform-submit:disabled::before { display: none; }
  .osc-leadform-done::before { animation: none; }
  html.reveal-on .reveal,
  html.reveal-on .reveal[data-reveal="left"],
  html.reveal-on .reveal[data-reveal="right"] { opacity: 1; transform: none; transition: none; }
}

/* ===========================================================================
   ==================  BESPOKE COMPONENTS (Astro <style> ports)  =============
   =========================================================================== */

/* ── HEADER (SiteHeader.astro port; WP wiring: #hdr / #nav / #burger) ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--brand-line);
}
.site-header.solid { background: #fff; }
.site-header__bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; flex-shrink: 0; }
/* 브랜드 락업(.brand__*) 규칙은 파일 끝 브랜드 블록에 있다.
   2026-09-10 로고 교체 때 옛 CSS 도형(파란 사각 + 주황 점) 규칙을 여기서 걷어냈다. */

.site-nav { display: flex; align-items: center; gap: 1.9rem; margin-left: auto; }
.site-nav a {
  font-size: 0.98rem;
  font-weight: 600;
  color: rgba(22, 32, 46, 0.78);
  text-decoration: none;
  padding: 0.3rem 0;
  white-space: nowrap;
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}
.site-nav a:hover { color: var(--brand-primary-dark); }
.site-nav a.active,
.site-nav a[aria-current="page"] { color: var(--brand-primary-dark); font-weight: 700; }

/* phone pill (walker path = .site-nav__cta, fallback path = .nav__tel) */
.site-nav .site-nav__cta,
.site-nav .nav__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.62rem 1.2rem;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.01em;
  background: var(--btn-sheen), linear-gradient(135deg, var(--brand-accent), #e86a0c);
  box-shadow: 0 6px 16px -6px rgba(255, 122, 26, 0.6);
  border: 0;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, filter 0.18s ease-out;
}
.site-nav .site-nav__cta:hover,
.site-nav .nav__tel:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(255, 122, 26, 0.7);
  filter: brightness(1.03);
}
.site-nav .site-nav__cta:active,
.site-nav .nav__tel:active { transform: translateY(0); }
.site-nav__cta-ic { font-size: 0.95rem; }

/* burger (WP #burger; main.js sets aria-expanded + toggles #nav.open) */
.burger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.burger span { display: block; width: 24px; height: 2px; border-radius: 2px; background: var(--brand-ink); transition: transform 0.25s ease, opacity 0.2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .site-header__bar { gap: 1rem; padding: 0.8rem 1.25rem; }
  .burger { display: flex; }
  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--brand-line);
    box-shadow: 0 14px 24px rgba(22, 32, 46, 0.12);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
    z-index: 55;
  }
  .site-nav.open { max-height: 82vh; }
  .site-nav a { padding: 1rem 1.5rem; font-size: 1rem; border-top: 1px solid var(--brand-line); }
  .site-nav .site-nav__cta,
  .site-nav .nav__tel { margin: 0.9rem 1.5rem 1.1rem; justify-content: center; padding: 0.85rem 1.25rem; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav, .burger span, .site-nav .site-nav__cta, .site-nav .nav__tel { transition: none; }
  .site-nav .site-nav__cta:hover, .site-nav .nav__tel:hover { transform: none; }
}

/* ── SectionHead (SectionHead.astro) ── */
.sec-head { max-width: 720px; margin: 0 auto 3rem; }
.sec-head--center { text-align: center; }
.sec-head--left { margin-left: 0; margin-right: auto; text-align: left; }
.sec-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brand-primary-dark);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(31, 95, 191, 0.1);
  border: 1px solid rgba(31, 95, 191, 0.24);
  margin-bottom: 1.1rem;
}
.sec-head__title {
  font-size: clamp(1.6rem, 1.2rem + 1.75vw, 2.2rem);
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -0.022em;
  color: var(--brand-ink);
  word-break: keep-all;
  text-wrap: balance;
}
.sec-head__title strong { color: var(--brand-primary-dark); }
.sec-head__sub {
  margin-top: 1rem;
  color: var(--brand-ink-soft);
  font-size: 1.02rem;
  line-height: 1.7;
  word-break: keep-all;
  text-wrap: pretty;
}
@media (max-width: 900px) { .sec-head { margin-bottom: 2.2rem; } }

/* ── ImageSlot (ImageSlot.astro) ── */
.img-slot {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 20% 12%, rgba(255, 255, 255, 0.7) 0%, transparent 46%),
    linear-gradient(150deg, var(--brand-primary-soft) 0%, rgba(96, 152, 224, 0.32) 60%, rgba(31, 95, 191, 0.42) 100%);
  color: var(--brand-primary-dark);
  overflow: hidden;
}
.img-slot__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── SiteHero (SiteHero.astro) ── */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 760px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(680px 460px at 84% 8%, rgba(31, 95, 191, 0.4) 0%, transparent 62%),
    radial-gradient(560px 420px at 6% 96%, rgba(255, 122, 26, 0.14) 0%, transparent 60%),
    linear-gradient(155deg, #14263e 0%, var(--brand-dark) 58%, #0a1420 100%);
}
.hero__glow {
  position: absolute; top: -160px; right: -80px; width: 620px; height: 620px;
  background: radial-gradient(circle, rgba(31, 95, 191, 0.32) 0%, transparent 66%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
  display: grid;
  grid-template-columns: 1.02fr 1.06fr;
  gap: 3.5rem;
  align-items: center;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.5rem 1rem 0.5rem 0.85rem;
  border-radius: 999px;
  background: rgba(234, 241, 251, 0.08);
  border: 1px solid rgba(96, 152, 224, 0.4);
  color: #dceaff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hero__eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent); box-shadow: 0 0 0 4px rgba(255, 122, 26, 0.24); }
.hero__eyebrow-rgn { color: var(--brand-accent); font-weight: 800; }
/* gothic (sans, bold) accent line — client fix #2 */
.hero__accent {
  margin-top: 1.5rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--brand-accent);
  word-break: keep-all;
}
.hero__headline {
  margin-top: 0.4rem;
  font-size: clamp(2.1rem, 1.05rem + 3.7vw, 3.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.035em;
  color: #eef4fc;
  word-break: keep-all;
  text-wrap: balance;
}
.hero__sub {
  margin-top: 1.6rem;
  max-width: 40ch;
  font-size: clamp(1.02rem, 0.92rem + 0.5vw, 1.2rem);
  line-height: 1.66;
  font-weight: 400;
  color: rgba(238, 244, 252, 0.78);
  word-break: keep-all;
  text-wrap: pretty;
}
.hero__cta-row { display: flex; align-items: center; gap: 0.9rem; margin-top: 2.4rem; flex-wrap: wrap; }
.hero__btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  text-decoration: none; font-weight: 700; letter-spacing: -0.01em;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, filter 0.18s ease-out,
    background-color 0.18s ease-out, border-color 0.18s ease-out, color 0.18s ease-out;
}
.hero__btn--primary {
  padding: 1.05rem 1.8rem;
  border-radius: 16px;
  font-size: 1.08rem;
  color: #fff;
  background: var(--btn-sheen), linear-gradient(135deg, var(--brand-accent), #e86a0c);
  box-shadow: 0 16px 34px -12px rgba(255, 122, 26, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.hero__btn--primary svg { width: 19px; height: 19px; }
.hero__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 40px -12px rgba(255, 122, 26, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  filter: brightness(1.03);
}
.hero__btn--primary:active { transform: translateY(0); }
/* .hero__btn--ghost 규칙은 2026-09-10 에 지웠다 — 버튼을 마크업에서 뺐기 때문.
   바로 아래 hero__leadform 에 그 폼이 이미 펼쳐져 있어 같은 자리로 보내는 버튼이었다. */
.hero__chips { list-style: none; margin: 2.1rem 0 0; padding: 0; display: flex; gap: 0.7rem; flex-wrap: wrap; }
.hero__chips li {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #e3edfb;
  background: rgba(234, 241, 251, 0.06);
  border: 1px solid rgba(96, 152, 224, 0.22);
}
.hero__chip-tick { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-accent); }
/* Hero compact lead form (image 2) — white card on dark hero, in the text column. */
.hero__leadform { margin-top: 2rem; max-width: 440px; }
.hero__leadform .osc-leadform { padding: 20px; }
.hero__leadform .osc-leadform-head h3 { font-size: 1.1rem; }
.hero__visual { position: relative; height: 560px; }
.hero__blob { position: absolute; border-radius: 50%; filter: blur(48px); pointer-events: none; }
.hero__blob--gold { width: 300px; height: 300px; right: -26px; top: -30px; background: rgba(31, 95, 191, 0.5); opacity: 0.7; }
.hero__blob--coral { width: 280px; height: 280px; left: -40px; bottom: -26px; background: rgba(255, 122, 26, 0.35); opacity: 0.55; }
.hero__photo {
  position: absolute; inset: 0;
  border-radius: 34px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 44px 90px -36px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.hero__photo .img-slot { height: 100%; }
.hero__float {
  position: absolute; z-index: 3;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(22, 32, 46, 0.08);
  box-shadow: 0 24px 48px -22px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hero__float--tag {
  top: 22px; left: -26px;
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.75rem 1.05rem; border-radius: 15px;
  font-size: 0.92rem; font-weight: 700; color: var(--brand-ink);
  animation: eut-float-a 6s ease-in-out infinite;
}
.hero__float--tag svg { width: 18px; height: 18px; }
.hero__float--card {
  bottom: 20px; right: -24px;
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.9rem 1.15rem; border-radius: 18px;
  animation: eut-float-b 7.2s ease-in-out infinite;
}
.hero__avatars { display: flex; }
.hero__avatars i { width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid #fff; margin-left: -10px; display: block; }
.hero__avatars i:first-child { margin-left: 0; }
.hero__avatars i:nth-child(1) { background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); }
.hero__avatars i:nth-child(2) { background: linear-gradient(135deg, var(--brand-accent), var(--brand-primary)); }
.hero__avatars i:nth-child(3) { background: linear-gradient(135deg, var(--brand-primary-soft), var(--brand-primary)); }
.hero__float-txt strong { display: block; font-size: 0.92rem; font-weight: 800; letter-spacing: -0.01em; color: var(--brand-ink); }
.hero__float-txt span { display: block; font-size: 0.8rem; font-weight: 600; margin-top: 2px; color: var(--brand-ink-soft); }

@media (max-width: 980px) {
  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; padding: 3rem 1.5rem; }
  .hero__visual { display: none; } /* 모바일: 히어로 사진 숨김 — 컴팩트 폼이 시각 영역을 대체 */
  .hero__leadform { max-width: none; }
  /* 데스크탑 장식용 플로팅 오버레이 — 모바일 숨김 (client fix #3) */
  .hero__float--tag, .hero__float--card { display: none; }
}
@media (max-width: 560px) {
  .hero__inner { min-height: 560px; align-content: center; }
  .hero__btn--primary { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__btn { transition: none; }
  .hero__btn:hover { transform: none; }
  .hero__float--tag, .hero__float--card { animation: none; }
}

/* ── PositiveSet (PositiveSet.astro) ── */
.positive { background: var(--brand-surface); padding: 4.5rem 1.5rem; }
.positive__inner { max-width: 1000px; margin: 0 auto; }
.positive__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.positive__item {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.4rem 1.6rem;
  background: var(--brand-primary-soft);
  border: 1px solid var(--brand-line);
  border-radius: 16px;
  font-size: 1.04rem; font-weight: 500; color: var(--brand-ink);
  word-break: keep-all; line-height: 1.5;
  transition: transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
}
.positive__item:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(31, 95, 191, 0.55); }
.positive__check {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -6px rgba(31, 95, 191, 0.7);
}
.positive__check svg { width: 18px; height: 18px; }
@media (max-width: 720px) {
  .positive__grid { grid-template-columns: 1fr; }
  .positive { padding: 3.2rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .positive__item { transition: none; } .positive__item:hover { transform: none; } }

/* ── ValueProof (ValueProof.astro) ── */
.value { background: var(--brand-surface-alt); padding: 4.5rem 1.5rem; }
.value__inner { max-width: 1200px; margin: 0 auto; }
.value__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.value__card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--brand-line); border-radius: 20px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(22, 32, 46, 0.04), 0 18px 40px -30px rgba(22, 32, 46, 0.4);
  transition: transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
}
.value__card:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -28px rgba(31, 95, 191, 0.5); }
.value__media { position: relative; }
.value__media .img-slot { border-radius: 0; }
.value__num {
  position: absolute; top: 0.85rem; left: 0.95rem;
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; color: #fff;
  background: rgba(15, 27, 45, 0.78); padding: 0.24rem 0.6rem; border-radius: 999px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.value__body-wrap { display: flex; flex-direction: column; padding: 1.5rem 1.5rem 1.7rem; }
.value__title { font-size: 1.16rem; font-weight: 800; line-height: 1.35; color: var(--brand-ink); word-break: keep-all; }
.value__body { margin-top: 0.7rem; font-size: 0.95rem; line-height: 1.7; color: var(--brand-ink-soft); word-break: keep-all; text-wrap: pretty; }
@media (max-width: 940px) { .value__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .value__grid { grid-template-columns: 1fr; } .value { padding: 3.2rem 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .value__card { transition: none; } .value__card:hover { transform: none; } }

/* ── SocialProof (SocialProof.astro) ── */
.sproof { background: var(--brand-surface); padding: 4.5rem 1.5rem; }
.sproof__inner { max-width: 1120px; margin: 0 auto; }
.sproof__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.sproof__card {
  margin: 0; padding: 1.4rem 1.4rem 1.5rem;
  background: #fff; border: 1px solid var(--brand-line); border-radius: 20px;
  box-shadow: 0 20px 44px -32px rgba(22, 32, 46, 0.45);
  transition: transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
}
.sproof__card:hover { transform: translateY(-3px); box-shadow: 0 26px 52px -28px rgba(31, 95, 191, 0.45); }
.sproof__cat {
  display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--brand-primary-dark); background: var(--brand-primary-soft);
  padding: 0.3rem 0.75rem; border-radius: 999px; margin-bottom: 1rem;
}
.sproof__pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem; }
.sproof__pair--showcase { grid-template-columns: 1fr 1fr; }
.sproof__slot { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--brand-line); }
.sproof__slot .img-slot { border-radius: 0; }
.sproof__badge {
  position: absolute; top: 0.6rem; left: 0.6rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.01em;
  padding: 0.24rem 0.6rem; border-radius: 999px; color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.sproof__badge--before { background: rgba(15, 27, 45, 0.78); }
.sproof__badge--after { background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); }
.sproof__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, var(--brand-accent), #e86a0c);
  box-shadow: 0 8px 18px -8px rgba(255, 122, 26, 0.7);
}
.sproof__arrow svg { width: 17px; height: 17px; }
.sproof__caption { margin-top: 1rem; font-size: 0.92rem; line-height: 1.6; font-weight: 600; color: var(--brand-ink); word-break: keep-all; text-wrap: pretty; }
@media (max-width: 860px) { .sproof__grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
@media (max-width: 460px) {
  .sproof__pair { grid-template-columns: 1fr; gap: 0.9rem; }
  .sproof__pair--showcase { grid-template-columns: 1fr 1fr; }
  .sproof__arrow { transform: rotate(90deg); margin: 0 auto; }
  .sproof { padding: 3.2rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .sproof__card { transition: none; } .sproof__card:hover { transform: none; } }

/* ── PointDetails (PointDetails.astro) ── */
.pdet { background: var(--brand-surface); padding: 4.5rem 1.5rem; }
.pdet__inner { max-width: 1120px; margin: 0 auto; }
.pdet__rows { display: grid; gap: 1.6rem; }
.pdet__row {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  border: 1px solid var(--brand-line); border-radius: 22px; background: #fff; overflow: hidden;
  box-shadow: 0 20px 44px -34px rgba(22, 32, 46, 0.45);
}
.pdet__media { min-height: 300px; }
.pdet__media .img-slot { height: 100%; }
.pdet__copy {
  /* 2026-09-10 — 옅은 파랑 블록 + 4px 파란 구분선을 중성 회색으로.
     사진이 들어가면 파란 면·선이 사진과 싸워 촌스러워졌다. 사진이 유일한 색 덩어리가 되게 한다.
     파랑은 인포그래픽·링크·버튼에 남는다 — 넓은 «면»에서만 뺀다. (시안 A 채택) */
  padding: 2.8rem 2.8rem;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--brand-surface-alt);
  border-left: 0;
}
.pdet__row[data-flip="true"] .pdet__media { order: 2; }
.pdet__row[data-flip="true"] .pdet__copy { border-left: 0; border-right: 0; }
.pdet__num { font-size: 0.9rem; font-weight: 800; letter-spacing: 0.08em; color: var(--brand-primary-dark); }
.pdet__title { margin-top: 0.5rem; font-size: 1.5rem; font-weight: 800; color: var(--brand-ink); letter-spacing: -0.02em; word-break: keep-all; }
.pdet__body { margin-top: 0.95rem; font-size: 1rem; line-height: 1.78; color: var(--brand-ink-soft); word-break: keep-all; text-wrap: pretty; }
.pdet__link {
  align-self: flex-start; margin-top: 1.7rem;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.92rem; font-weight: 700; color: var(--brand-primary-dark);
  text-decoration: none; padding-bottom: 2px; border-bottom: 1.5px solid var(--brand-primary);
  transition: gap 0.16s ease;
}
.pdet__link:hover { gap: 0.6rem; }
@media (max-width: 860px) {
  .pdet__row { grid-template-columns: 1fr; }
  .pdet__row[data-flip="true"] .pdet__media { order: 0; }
  .pdet__media { min-height: 220px; }
  .pdet__copy, .pdet__row[data-flip="true"] .pdet__copy { border-left: 0; border-right: 0; border-top: 0; padding: 2rem 1.8rem; }
  .pdet { padding: 3.2rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .pdet__link { transition: none; } }

/* ── WaterproofLayersInfographic (WaterproofLayersInfographic.astro) ── */
.wli {
  width: 100%; height: 100%; min-height: 260px;
  display: flex; align-items: center; justify-content: center;
  padding: 1.6rem 1.4rem;
  background: var(--brand-surface-alt);
  overflow: hidden;
}
.wli__card { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 0.5rem; }
.wli__head { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.wli__drops { width: 132px; height: auto; display: block; }
.wli__head-txt { font-size: 0.8rem; font-weight: 700; letter-spacing: -0.01em; color: var(--brand-primary-dark); word-break: keep-all; text-align: center; }
.wli__stack {
  display: flex; flex-direction: column; gap: 3px;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 16px 34px -22px rgba(22, 32, 46, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.wli__layer { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 0 0.95rem; color: #fff; }
.wli__layer-name { font-size: 0.92rem; font-weight: 800; letter-spacing: -0.01em; word-break: keep-all; }
.wli__layer-sub { flex: 0 0 auto; font-size: 0.7rem; font-weight: 600; opacity: 0.85; word-break: keep-all; }
.wli__layer--top { min-height: 44px; align-items: center; background: linear-gradient(135deg, var(--brand-primary-soft), rgba(96, 152, 224, 0.55)); color: var(--brand-ink); }
.wli__layer--top .wli__layer-sub { color: var(--brand-primary-dark); }
.wli__layer--ure { min-height: 68px; align-items: center; background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); }
.wli__layer--pri { min-height: 38px; align-items: center; background: linear-gradient(135deg, var(--brand-primary-dark), #103a72); }
.wli__layer--base {
  min-height: 52px; align-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 7px, transparent 7px 14px),
    linear-gradient(135deg, #5b6675, var(--brand-ink));
}
html.reveal-on .wli__layer {
  opacity: 0; transform: translateY(10px);
  animation: wli-rise 0.5s var(--ease-out-quart) forwards;
  animation-delay: calc(120ms + (3 - var(--i)) * 90ms);
}
@keyframes wli-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html.reveal-on .wli__layer { opacity: 1; transform: none; animation: none; }
}

/* ── ProcessSection (ProcessSection.astro) ── */
.proc { background: var(--brand-surface-alt); padding: 4.5rem 1.5rem; }
.proc__inner { max-width: 1120px; margin: 0 auto; }
.proc__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--proc-count), 1fr); position: relative; }
.proc__steps::before {
  content: ""; position: absolute; top: 33px; left: 10%; right: 10%; height: 2px;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)); opacity: 0.4;
}
.proc__step { position: relative; text-align: center; padding: 0 0.7rem; }
.proc__num {
  width: 66px; height: 66px; margin: 0 auto 1.1rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  color: #fff; font-size: 1.5rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px -8px rgba(31, 95, 191, 0.7);
  border: 4px solid var(--brand-surface-alt);
}
.proc__label { font-size: 1.04rem; font-weight: 800; color: var(--brand-ink); word-break: keep-all; }
.proc__body { margin-top: 0.5rem; font-size: 0.88rem; line-height: 1.62; color: var(--brand-ink-soft); word-break: keep-all; text-wrap: pretty; }
@media (max-width: 860px) {
  .proc__steps { grid-template-columns: 1fr; gap: 1.1rem; max-width: 440px; margin: 0 auto; }
  .proc__steps::before { display: none; }
  .proc__step { display: grid; grid-template-columns: 66px 1fr; gap: 1.1rem; align-items: center; text-align: left; }
  .proc__num { margin: 0; }
  .proc__label { grid-column: 2; }
  .proc__body { grid-column: 2; margin-top: 0.2rem; }
  .proc { padding: 3.2rem 1.25rem; }
}

/* ── AskSection (2026-09-11). 「일반 업체와 무엇이 다를까요」 비교표를 대체 ──
   어느 업체에든 물어볼 질문 셋 + 으뜸의 답. 카드 3장, 좁으면 1열.
   답 줄은 카드 아래에 붙인다(margin-top:auto). 질문 길이가 달라도 답의 시작선이 맞는다. */
.ask { background: var(--brand-surface-alt); padding: 4.5rem 1.5rem; }
.ask__inner { max-width: 1080px; margin: 0 auto; }
.ask__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.ask__item {
  display: flex; flex-direction: column;
  padding: 1.7rem 1.6rem 1.6rem; background: #fff;
  border: 1px solid var(--brand-line); border-radius: 20px;
  box-shadow: 0 18px 40px -32px rgba(22, 32, 46, 0.4);
}
.ask__q { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 1rem; font-size: 1.06rem; font-weight: 800; line-height: 1.5; color: var(--brand-ink); word-break: keep-all; }
.ask__num {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-primary-soft); color: var(--brand-primary-dark);
  font-size: 0.9rem; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; margin-top: 0.05rem;
}
.ask__a {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--brand-line);
  font-size: 0.97rem; line-height: 1.7; color: var(--brand-ink-soft); word-break: keep-all; text-wrap: pretty;
}
.ask__who { display: block; margin-bottom: 0.3rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.02em; color: var(--brand-primary-dark); }
@media (max-width: 900px) { .ask__list { grid-template-columns: 1fr; } .ask { padding: 3.2rem 1.25rem; } }

/* ── Rebuttal (Rebuttal.astro) ── */
.reb { background: var(--brand-surface); padding: 4.5rem 1.5rem; }
.reb__inner { max-width: 1000px; margin: 0 auto; }
.reb__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.reb__card {
  padding: 1.9rem 1.9rem; background: #fff; border: 1px solid var(--brand-line); border-radius: 20px;
  box-shadow: 0 18px 40px -32px rgba(22, 32, 46, 0.4);
  transition: transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
}
.reb__card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -28px rgba(31, 95, 191, 0.42); }
.reb__doubt { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 1.1rem; font-weight: 800; color: var(--brand-ink); word-break: keep-all; }
.reb__q {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-primary-soft); color: var(--brand-primary-dark);
  font-size: 1rem; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; margin-top: 0.05rem;
}
.reb__answer {
  display: flex; align-items: flex-start; gap: 0.7rem;
  margin-top: 1.05rem; padding-top: 1.05rem; border-top: 1px solid var(--brand-line);
  font-size: 0.98rem; line-height: 1.72; color: var(--brand-ink-soft); word-break: keep-all; text-wrap: pretty;
}
.reb__a {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  color: #fff; font-size: 0.9rem; font-weight: 900; display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 720px) { .reb__grid { grid-template-columns: 1fr; } .reb { padding: 3.2rem 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .reb__card { transition: none; } .reb__card:hover { transform: none; } }

/* ── FaqSection (FaqSection.astro) ── */
.faq { background: var(--brand-surface-alt); padding: 4.5rem 1.5rem; }
.faq__inner { max-width: 820px; margin: 0 auto; }
.faq__list { display: grid; gap: 0.8rem; }
.faq__item { background: #fff; border: 1px solid var(--brand-line); border-radius: 16px; padding: 0 1.6rem; transition: box-shadow 0.16s ease; }
.faq__item[open] { box-shadow: 0 16px 36px -26px rgba(31, 95, 191, 0.5); border-color: rgba(31, 95, 191, 0.4); }
.faq__q { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.95rem; padding: 1.3rem 0; font-weight: 700; font-size: 1.02rem; color: var(--brand-ink); word-break: keep-all; }
.faq__q::-webkit-details-marker { display: none; }
.faq__q-badge {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  color: #fff; font-size: 0.88rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.faq__q-text { flex: 1; }
.faq__q::after { content: "+"; flex: 0 0 auto; color: var(--brand-primary); font-size: 1.4rem; font-weight: 700; line-height: 1; transition: transform 0.2s ease; }
.faq__item[open] .faq__q::after { content: "\2212"; }
.faq__a { padding: 0 0 1.5rem 1.95rem; color: var(--brand-ink-soft); font-size: 0.97rem; line-height: 1.78; word-break: keep-all; text-wrap: pretty; }
@media (max-width: 720px) { .faq { padding: 3.2rem 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .faq__item, .faq__q::after { transition: none; } }

/* ── ContactSection (ContactSection.astro) — wraps the leadform (id="lead-final") ── */
.contact {
  position: relative;
  background:
    radial-gradient(680px 420px at 50% -8%, rgba(31, 95, 191, 0.16) 0%, transparent 60%),
    linear-gradient(165deg, var(--brand-primary-soft) 0%, #dfeafb 44%, var(--brand-surface) 100%);
  padding: 5rem 1.5rem 5.5rem;
  overflow: hidden;
}
.contact::before {
  content: ""; position: absolute; top: -150px; left: 50%; transform: translateX(-50%);
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(255, 122, 26, 0.12) 0%, transparent 62%);
  pointer-events: none;
}
.contact__inner { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; }
.contact__form { max-width: 540px; margin: 0 auto; }
.contact__note { margin-top: 1rem; text-align: center; font-size: 0.85rem; color: var(--brand-ink-soft); }
@media (max-width: 720px) { .contact { padding: 3.4rem 1.25rem 3.8rem; } }

/* ── DarkCta (DarkCta.astro) ── */
.darkcta {
  position: relative; overflow: hidden;
  background:
    radial-gradient(620px 380px at 82% 12%, rgba(31, 95, 191, 0.34) 0%, transparent 60%),
    linear-gradient(160deg, #14263e 0%, var(--brand-dark) 60%, #0a1420 100%);
  padding: 5rem 1.5rem; text-align: center;
}
.darkcta__glow { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.darkcta__glow--a { width: 340px; height: 340px; top: -80px; right: 6%; background: rgba(31, 95, 191, 0.18); }
.darkcta__glow--b { width: 320px; height: 320px; bottom: -90px; left: 4%; background: rgba(255, 122, 26, 0.16); }
.darkcta__inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.darkcta__eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; color: var(--brand-accent); margin-bottom: 1rem; }
.darkcta__title { color: #eef4fc; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); font-weight: 800; line-height: 1.25; letter-spacing: -0.022em; word-break: keep-all; text-wrap: balance; }
.darkcta__btns { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-top: 2rem; flex-wrap: wrap; }
.darkcta__btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 1.05rem 2rem; border-radius: 16px; font-size: 1.08rem; font-weight: 700; text-decoration: none;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, filter 0.18s ease-out,
    background-color 0.18s ease-out, border-color 0.18s ease-out;
}
.darkcta__btn svg { width: 19px; height: 19px; }
.darkcta__btn--call {
  color: #fff; background: var(--btn-sheen), linear-gradient(135deg, var(--brand-accent), #e86a0c);
  box-shadow: 0 18px 38px -12px rgba(255, 122, 26, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.darkcta__btn--call:hover { transform: translateY(-2px); box-shadow: 0 24px 46px -12px rgba(255, 122, 26, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.26); filter: brightness(1.03); }
.darkcta__btn--form { color: #dceaff; border: 1.5px solid rgba(238, 244, 252, 0.26); background: rgba(238, 244, 252, 0.05); }
.darkcta__btn--form:hover { transform: translateY(-2px); border-color: rgba(96, 152, 224, 0.6); color: #fff; background: rgba(31, 95, 191, 0.18); }
.darkcta__btn:active { transform: translateY(0); }
.darkcta__note { margin-top: 1.15rem; font-size: 0.85rem; color: rgba(238, 244, 252, 0.5); }
@media (max-width: 560px) { .darkcta__btn--call, .darkcta__btn--form { flex: 1 1 auto; justify-content: center; } }
@media (max-width: 720px) { .darkcta { padding: 3.6rem 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .darkcta__btn { transition: none; } .darkcta__btn:hover { transform: none; } }

/* ── SiteFooter (SiteFooter.astro) ── */
.site-footer { background: var(--brand-dark); color: #9fb2c9; }
.site-footer__inner { max-width: 1200px; margin: 0 auto; padding: 3.5rem 1.5rem 3rem; }
.site-footer__top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2rem 1.5rem;
  padding-bottom: 2.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.fbrand__name { font-size: 1.3rem; color: #fff; }
/* .fbrand__name b 의 주황(--brand-accent)은 뺐다 — 워드마크는 한 덩어리 한 색이다.
   나머지 푸터 브랜드 규칙도 파일 끝 브랜드 블록에 있다. */
.fbrand__tag { margin-top: 0.85rem; max-width: 34ch; font-size: 0.88rem; line-height: 1.7; color: #8ea1b8; word-break: keep-all; }
.fbrand__cta { display: inline-block; margin-top: 1.1rem; font-size: 0.9rem; font-weight: 700; color: var(--brand-accent); text-decoration: none; }
.fbrand__cta:hover { color: #ffa257; }
.fcol__head { font-size: 0.95rem; font-weight: 700; color: #fff; margin-bottom: 1rem; }
.fcol__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.fcol__list a { font-size: 0.85rem; color: #8ea1b8; text-decoration: none; }
.fcol__list a:hover { color: #d5e0ee; }
.fbiz { display: grid; gap: 0.5rem; margin: 0; }
.fbiz > div { display: flex; gap: 0.75rem; }
.fbiz dt { flex: 0 0 92px; font-size: 0.83rem; color: #728298; margin: 0; }
.fbiz dd { font-size: 0.83rem; color: #8ea1b8; margin: 0; }
.site-footer__bottom { padding-top: 1.6rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.site-footer__copy { font-size: 0.75rem; color: #64748b; }
@media (max-width: 900px) { .site-footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__top { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ── QuickMenu (QuickMenu.astro) — PC 전용 우측 고정 (모바일 <900px 숨김) ── */
.quickmenu {
  position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 45;
  display: flex; flex-direction: column;
  background: rgba(15, 27, 45, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08); border-right: none;
  border-radius: 14px 0 0 14px; overflow: hidden;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.5);
}
.quickmenu__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem;
  width: 78px; padding: 1rem 0.5rem; color: #cdddf0; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.15s ease, color 0.15s ease;
}
.quickmenu__item:last-child { border-bottom: none; }
.quickmenu__item:first-child:hover { background: linear-gradient(135deg, var(--brand-accent), #e86a0c); color: #fff; }
.quickmenu__item:hover { background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); color: #fff; }
.quickmenu__icon { width: 26px; height: 26px; display: inline-flex; }
.quickmenu__icon svg { width: 100%; height: 100%; }
.quickmenu__label { font-size: 0.74rem; font-weight: 600; letter-spacing: -0.01em; }
@media (max-width: 900px) { .quickmenu { display: none; } }

/* ===========================================================================
   16. LEADFORM — VERBATIM port of @osc/ui LeadForm.astro <style>
   (field names/classes are a HARD CONTRACT with lead.js — do NOT rename).
   =========================================================================== */
.osc-leadform {
  background: #fff;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px;
}
.osc-leadform-head h3 { font-size: 1.15rem; }
.osc-leadform-head p {
  margin-top: 6px;
  color: var(--brand-ink-soft);
  font-size: 0.9rem;
}
.osc-leadform-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.osc-field {
  display: grid;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
}
.osc-field em {
  color: var(--brand-accent);
  font-style: normal;
}
.osc-field input,
.osc-field textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-md);
  background: var(--brand-surface-alt);
}
.osc-field input:focus,
.osc-field textarea:focus {
  outline: 2px solid var(--brand-primary);
  outline-offset: 1px;
  background: #fff;
}
.osc-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.osc-consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.78rem;
  color: var(--brand-ink-soft);
  line-height: 1.5;
}
.osc-consent input {
  margin-top: 3px;
  flex: 0 0 auto;
}
.osc-leadform-error {
  margin: 0;
  color: #c0392b;
  font-size: 0.85rem;
  font-weight: 500;
}
.osc-leadform-actions {
  display: grid;
  gap: 10px;
}
.osc-leadform-actions .osc-btn { width: 100%; }
.osc-leadform-done {
  text-align: center;
  padding: 28px 12px;
}
.osc-done-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--brand-success);
}
.osc-done-sub {
  margin-top: 8px;
  color: var(--brand-ink-soft);
  font-size: 0.9rem;
}
@media (min-width: 480px) {
  .osc-leadform-actions { grid-template-columns: 1fr auto; }
  .osc-leadform-actions .osc-btn-primary { width: 100%; }
}

/* ===========================================================================
   18. MOBILE CALL BAR — ported from @osc/ui MobileCallBar.astro
   =========================================================================== */
.osc-callbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  height: var(--mobile-callbar-h);
  background: var(--brand-line);
  box-shadow: 0 -2px 12px rgba(22, 32, 46, 0.12);
  padding-bottom: env(safe-area-inset-bottom);
}
.osc-callbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.98rem;
}
.osc-callbar-phone { background: var(--brand-accent); color: #fff; }
.osc-callbar-form { background: var(--brand-primary); color: #fff; }
/* desktop: hide the bar (header already shows the phone). */
@media (min-width: 768px) {
  .osc-callbar { display: none; }
}

/* ===========================================================================
   개인정보처리방침 (page-privacy.php) — ported from @osc/ui PrivacyPolicy.astro
   =========================================================================== */
.pp-wrap {
  max-width: 720px;
  margin-inline: auto;
  padding: 96px 20px 80px;
  color: var(--brand-ink);
  font-size: 0.9375rem;
  line-height: 1.75;
  word-break: keep-all;
}
.pp-header { margin-bottom: 48px; border-bottom: 1px solid var(--brand-line); padding-bottom: 28px; }
.pp-eyebrow { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: var(--brand-primary); margin-bottom: 8px; }
.pp-title { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.01em; color: var(--brand-ink); margin: 0 0 10px; line-height: 1.25; text-wrap: balance; }
.pp-meta { font-size: 0.8125rem; color: var(--brand-ink-soft); margin: 0; }
.pp-section { margin-bottom: 36px; }
.pp-section h2 { font-size: 1.0625rem; font-weight: 700; color: var(--brand-ink); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--brand-line); line-height: 1.4; text-wrap: balance; }
.pp-section p { color: var(--brand-ink); margin-bottom: 10px; }
.pp-section p:last-child { margin-bottom: 0; }
.pp-dl { display: grid; gap: 12px; margin: 0; }
.pp-dl > div { display: grid; grid-template-columns: 120px 1fr; gap: 8px; align-items: start; }
.pp-dl dt { font-weight: 600; color: var(--brand-ink-soft); font-size: 0.875rem; margin: 0; padding-top: 2px; }
.pp-dl dd { margin: 0; color: var(--brand-ink); }
.pp-dl a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px; }
.pp-list { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.pp-list li { color: var(--brand-ink); }
.pp-placeholder { color: var(--brand-ink-soft); font-style: italic; font-size: 0.875rem; }
@media (max-width: 480px) {
  .pp-title { font-size: 1.375rem; }
  .pp-dl > div { grid-template-columns: 1fr; gap: 2px; }
  .pp-dl dt { font-size: 0.8125rem; }
}

/* ===========================================================================
   19. BLOG — hub (home.php) + post (single.php) + archive (index.php)
       Ported from kangwon-theme blog, recolored to eutteum --brand-* tokens.
       NOTE: dev source = _preview-blog.css. On deploy this block is appended
       to style.css verbatim; the _preview-* files are NOT uploaded.
   =========================================================================== */
:root { --blog-max: 1120px; }

/* Wider container for blog grids (site default .osc-container = 720px, too narrow). */
.bwrap { width: 100%; max-width: var(--blog-max); margin-inline: auto; padding-inline: 20px; }

/* On blog pages, align the header + footer with the wider blog content. */
body.blog .site-header__bar,
body.blog .site-footer__inner { max-width: var(--blog-max); }

/* Shared blog eyebrow (kangwon used .eyebrow; keep for blog templates). */
.eyebrow { display: inline-block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; color: var(--brand-primary); }

/* ---------------------------------------------------------------------------
   BLOG HERO (home.php)
   --------------------------------------------------------------------------- */
.bhero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary) 100%);
  color: #fff;
  padding: 52px 0 46px;
}
.bhero::after { content: ""; position: absolute; right: -70px; top: -70px; width: 300px; height: 300px; border: 1px solid rgba(255,255,255,0.16); border-radius: 50%; }
.bhero::before { content: ""; position: absolute; right: 24px; top: 26px; width: 180px; height: 180px; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; }
.bhero__in { position: relative; z-index: 1; }
.bhero .eyebrow { color: #ffd0ab; }
.bhero h1 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); margin: 12px 0 12px; color: #fff; }
.bhero p { color: rgba(255,255,255,0.86); max-width: 34em; font-size: 1.02rem; }
@media (min-width: 640px) { .bhero { padding: 70px 0 58px; } }

/* ---------------------------------------------------------------------------
   CATEGORY CHIP BAR (sticky under fixed header)
   --------------------------------------------------------------------------- */
.cats { position: sticky; top: var(--header-h); z-index: 20; background: #fff; border-bottom: 1px solid var(--brand-line); }
.cats__in { display: flex; gap: 8px; padding: 14px 0; overflow-x: auto; scrollbar-width: none; }
.cats__in::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--brand-line); background: #fff; font-size: 0.9rem; font-weight: 600; color: var(--brand-ink-soft); white-space: nowrap; transition: border-color 0.2s ease, color 0.2s ease; }
.chip:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.chip.on { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }

/* ---------------------------------------------------------------------------
   FEATURED (latest post)
   --------------------------------------------------------------------------- */
.feat { padding: 44px 0 26px; }
.feat__card { display: grid; grid-template-columns: 1fr; background: #fff; border: 1px solid var(--brand-line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.feat__img { display: block; aspect-ratio: 40 / 21; overflow: hidden; }
.feat__img img { width: 100%; height: 100%; object-fit: cover; }
.feat__body { padding: 24px 22px 26px; }
.feat__meta { display: flex; gap: 10px; align-items: center; font-size: 0.8rem; font-weight: 700; color: var(--brand-primary); letter-spacing: 0.03em; }
.feat__meta span { color: var(--brand-ink-soft); font-weight: 500; }
.feat__body h2 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); margin: 12px 0 10px; }
.feat__body p { color: var(--brand-ink-soft); margin-bottom: 16px; }
.txtlink { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-primary); font-weight: 700; font-size: 0.95rem; }
.txtlink:hover { color: var(--brand-primary-dark); }
.feat__body h2 a { color: inherit; text-decoration: none; }
.feat__body h2 a:hover { color: var(--brand-primary); }
@media (min-width: 820px) {
  .feat__card { grid-template-columns: 1.15fr 1fr; align-items: center; }
  .feat__body { padding: 34px 38px; }
}

/* ---------------------------------------------------------------------------
   LIST GRID (remaining posts)
   --------------------------------------------------------------------------- */
.list { padding: 22px 0 72px; }
.list__grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
.bcard { display: block; background: #fff; border: 1px solid var(--brand-line); border-radius: var(--radius-md); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.bcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.bcard__img { aspect-ratio: 40 / 21; overflow: hidden; }
.bcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.bcard:hover .bcard__img img { transform: scale(1.04); }
.bcard__body { padding: 16px 18px 18px; }
.bcard__meta { display: flex; gap: 8px; align-items: center; font-size: 0.76rem; font-weight: 700; color: var(--brand-primary); letter-spacing: 0.03em; }
.bcard__meta span { color: var(--brand-ink-soft); font-weight: 500; }
.bcard__body h3 { font-size: 1.08rem; margin: 8px 0 6px; line-height: 1.45; }
.bcard__body p { color: var(--brand-ink-soft); font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 640px) { .list__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .list__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------------------
   PAGINATION (the_posts_pagination → .pagination .nav-links)
   --------------------------------------------------------------------------- */
.pagination { margin-top: 44px; }
.pagination .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pagination .nav-links a,
.pagination .nav-links span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px;
  border: 1px solid var(--brand-line); border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; color: var(--brand-ink-soft);
}
.pagination .nav-links a:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.pagination .nav-links .current { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }

/* ---------------------------------------------------------------------------
   BLOG BOTTOM CTA (lead-oriented — phone + 상담)
   --------------------------------------------------------------------------- */
.bstrip { background: var(--brand-primary-soft); text-align: center; padding: 54px 0; }
.bstrip .eyebrow { color: var(--brand-primary); }
.bstrip h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 10px 0 10px; color: var(--brand-ink); }
.bstrip p { color: var(--brand-ink-soft); max-width: 32em; margin: 0 auto 22px; }
.bstrip__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
   READING PROGRESS (single)
   --------------------------------------------------------------------------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--brand-primary), var(--brand-accent)); z-index: 60; transition: width 0.1s linear; }

/* ---------------------------------------------------------------------------
   POST HERO (single)
   --------------------------------------------------------------------------- */
.phero { background: var(--brand-surface-alt); padding: 40px 0 32px; border-bottom: 1px solid var(--brand-line); }
.phero__crumb { font-size: 0.85rem; color: var(--brand-ink-soft); margin-bottom: 16px; }
.phero__crumb a { color: var(--brand-ink-soft); }
.phero__crumb a:hover { color: var(--brand-primary); }
.phero__meta { display: flex; gap: 10px; align-items: center; font-size: 0.82rem; font-weight: 700; color: var(--brand-primary); letter-spacing: 0.03em; }
.phero__meta span { color: var(--brand-ink-soft); font-weight: 500; }
.phero h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin: 12px 0 12px; max-width: 20em; line-height: 1.3; }
.phero__dek { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--brand-ink-soft); max-width: 36em; }
.phero__cover { margin-top: 28px; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 21 / 9; }
.phero__cover img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------------
   POST BODY + TOC (single)
   --------------------------------------------------------------------------- */
.pbody { padding: 44px 0 60px; }
.pbody__grid { display: grid; grid-template-columns: 1fr; }
.toc { display: none; }
.article { min-width: 0; }
.toc-mobile { background: #fff; border: 1px solid var(--brand-line); border-radius: var(--radius-md); padding: 14px 18px; margin-bottom: 28px; }
.toc-mobile summary { font-weight: 700; cursor: pointer; color: var(--brand-primary); font-size: 0.95rem; }
.toc-mobile ul { list-style: none; margin: 12px 0 2px; padding: 0; display: grid; gap: 8px; }
.toc-mobile a { font-size: 0.92rem; color: var(--brand-ink-soft); }
.toc-mobile a:hover { color: var(--brand-primary); }

.article h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 40px 0 14px; scroll-margin-top: calc(var(--header-h) + 20px); color: var(--brand-ink); }
.article h2:first-child { margin-top: 0; }
.article h3 { font-size: 1.15rem; margin: 26px 0 10px; color: var(--brand-ink); }
.article p { margin-bottom: 18px; font-size: 1.04rem; color: #2c3644; line-height: 1.85; }
.article strong { color: var(--brand-primary-dark); font-weight: 700; }
.article ul, .article ol { margin: 0 0 18px 1.1rem; display: grid; gap: 8px; }
.article li { padding-left: 4px; color: #2c3644; font-size: 1.02rem; line-height: 1.7; }
.article ul li::marker { color: var(--brand-accent); }
.article ol li::marker { color: var(--brand-primary); font-weight: 700; }
.article figure { margin: 26px 0; }
.article figure img { width: 100%; border-radius: var(--radius-md); }
.article figcaption { font-size: 0.85rem; color: var(--brand-ink-soft); text-align: center; margin-top: 10px; }
.article blockquote { border-left: 3px solid var(--brand-primary); background: var(--brand-primary-soft); padding: 14px 18px; margin: 24px 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--brand-primary-dark); font-size: 1.05rem; line-height: 1.7; }
.article a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 2px; }
.article a:hover { color: var(--brand-primary-dark); }

/* Tables in post content — visible borders (kangwon-theme parity; was missing → 표 테두리 없음 버그) */
.article table { width: 100%; border-collapse: collapse; margin: 1.8rem 0; font-size: 0.98rem; line-height: 1.6; }
.article th, .article td { border: 1px solid var(--brand-line); padding: 0.72rem 0.95rem; text-align: left; vertical-align: top; word-break: keep-all; }
.article thead th { background: var(--brand-primary); color: #fff; font-weight: 700; }
.article tbody tr:nth-child(even) { background: var(--brand-surface-alt); }

/* ---------------------------------------------------------------------------
   Generated post content (.osc-post) — highlight / callout styling.
   Ported from OSC blog highlights CSS (oscsnm), recolored to eutteum tokens.
   .article already sets the reading column width/padding → .osc-post does NOT
   re-apply its own max-width/padding (avoids double gutters).
   --------------------------------------------------------------------------- */
.osc-post mark,
.osc-post .osc-highlight,
.osc-post .osc-underline { background: linear-gradient(180deg, transparent 52%, rgba(255, 122, 26, 0.22) 52%); color: inherit; padding: 0 0.06em; }
.osc-post .eyebrow { display: block; margin-bottom: 8px; color: var(--brand-primary); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.osc-post .osc-byline, .osc-post .osc-trust-note { color: var(--brand-ink-soft); font-size: 0.9rem; line-height: 1.6; }
.osc-post .osc-byline { margin: 6px 0 22px; }
.osc-post .osc-trust-note { margin-top: 10px; }
.osc-post .osc-answer-first { border-left: 3px solid var(--brand-primary); margin: 24px 0; padding: 14px 18px; background: var(--brand-primary-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-weight: 600; line-height: 1.7; color: var(--brand-ink); }
.osc-post .osc-case-story, .osc-post [data-testid="case-story"] { border: 1px solid var(--brand-line); border-radius: var(--radius-md); margin: 28px 0; padding: 20px; background: #fff; }
.osc-post .osc-case-story::before, .osc-post [data-testid="case-story"]::before { content: "CASE"; display: block; margin-bottom: 8px; color: var(--brand-primary); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; }
.osc-post .osc-ai-figure, .osc-post [data-testid="ai-realistic-figure"] { margin: 32px 0; }
.osc-post .osc-ai-figure img, .osc-post [data-testid="ai-realistic-figure"] img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }
.osc-post .osc-ai-figure figcaption, .osc-post [data-testid="ai-realistic-figure"] figcaption { margin-top: 8px; color: var(--brand-ink-soft); font-size: 0.85rem; line-height: 1.6; text-align: center; }
.osc-post .osc-soft-cta { border-top: 1px solid var(--brand-line); margin-top: 36px; padding-top: 18px; color: var(--brand-ink-soft); }
.osc-post .osc-soft-cta a { color: var(--brand-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 981px) {
  .pbody__grid { grid-template-columns: 220px minmax(0, 720px); gap: 0 clamp(28px, 4vw, 56px); justify-content: center; }
  .toc { display: block; position: sticky; top: calc(var(--header-h) + 24px); align-self: start; height: max-content; }
  .toc__label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; color: var(--brand-primary); text-transform: uppercase; margin-bottom: 14px; }
  .toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; border-left: 1px solid var(--brand-line); }
  .toc a { display: block; padding: 3px 0 3px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 0.9rem; color: var(--brand-ink-soft); line-height: 1.5; transition: color 0.2s ease, border-color 0.2s ease; }
  .toc a:hover { color: var(--brand-ink); }
  .toc a.active { color: var(--brand-primary); border-left-color: var(--brand-primary); font-weight: 700; }
  .toc-mobile { display: none; }
}

/* ---------------------------------------------------------------------------
   LEAD CTA (single — replaces kangwon brand CTA)
   --------------------------------------------------------------------------- */
.pcta { background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary)); color: #fff; text-align: center; padding: 56px 0; }
.pcta .eyebrow { color: #ffd0ab; }
.pcta h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin: 10px 0 10px; color: #fff; }
.pcta p { color: rgba(255,255,255,0.86); max-width: 30em; margin: 0 auto 22px; }
.pcta__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pcta .osc-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.pcta .osc-btn-ghost:hover { background: rgba(255,255,255,0.12); }

/* ---------------------------------------------------------------------------
   RELATED (single)
   --------------------------------------------------------------------------- */
.rel { padding: 60px 0; background: var(--brand-surface-alt); border-top: 1px solid var(--brand-line); }
.rel__head { margin-bottom: 28px; }
.rel__head .eyebrow { color: var(--brand-primary); }
.rel__head h2 { font-size: clamp(1.4rem, 2.8vw, 2rem); margin-top: 8px; }
.rel__grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .rel__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .rel__grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------------------------------------------------------------------------
   ARCHIVE / SEARCH / 404 (index.php)
   --------------------------------------------------------------------------- */
.barchive { padding: 44px 0 72px; min-height: 52vh; }
.barchive__title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 8px; }
.barchive__sub { color: var(--brand-ink-soft); margin-bottom: 28px; }
.barchive__empty { color: var(--brand-ink-soft); padding: 48px 0; }

/* ============================================================
   EIG — 으뜸ENG 인포그래픽 (2026-09-10)
   기준: 위 .wli (특수방수 층상 단면). 같은 카드-온-그라디언트 문법을 따른다.
   AI 이미지 대신 마크업으로 그린다 — 글자가 안 깨지고, 검색엔진이 읽고,
   수치가 바뀌면 글자만 고치면 되고, 테마 색 토큰과 한 벌이 된다.
   ============================================================ */
.eig {
  width: 100%; height: 100%; min-height: 260px;
  display: flex; align-items: center; justify-content: center;
  padding: 1.6rem 1.4rem;
  background: var(--brand-surface-alt);
  overflow: hidden;
}
.eig__card { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 0.7rem; }
.eig__head { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.eig__ic { width: 44px; height: auto; display: block; }
.eig__head-txt {
  font-size: 0.8rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--brand-primary-dark); word-break: keep-all; text-align: center;
}
.eig__foot {
  margin: 0; font-size: 0.74rem; font-weight: 600; text-align: center;
  color: var(--brand-primary-dark); opacity: 0.9; word-break: keep-all;
}
.eig__foot b { font-weight: 800; }

/* 표 — 견적서 항목 */
.eig__rows {
  display: flex; flex-direction: column;
  border-radius: 12px; overflow: hidden; background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 16px 34px -22px rgba(22, 32, 46, 0.55);
}
.eig__row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.5rem 0.9rem; border-bottom: 1px solid var(--brand-line);
}
.eig__row:last-child { border-bottom: 0; }
.eig__row-name { font-size: 0.86rem; font-weight: 700; color: var(--brand-ink); word-break: keep-all; }
.eig__row-unit { flex: 0 0 auto; font-size: 0.7rem; font-weight: 600; color: var(--brand-ink-soft); }
.eig__row--out { background: #fdeaea; }
.eig__row--out .eig__row-name,
.eig__row--out .eig__row-unit { color: #b3261e; text-decoration: line-through; text-decoration-thickness: 2px; }

/* 번호 목록 — 3요인 */
.eig__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.eig__step {
  display: flex; align-items: flex-start; gap: 0.6rem;
  background: #fff; border-radius: 10px; padding: 0.55rem 0.75rem;
  box-shadow: 0 10px 24px -20px rgba(22, 32, 46, 0.6);
}
.eig__step-no {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px;
  background: var(--brand-primary); color: #fff;
  font-size: 0.68rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.eig__step-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.eig__step-body b { font-size: 0.86rem; font-weight: 800; color: var(--brand-ink); letter-spacing: -0.01em; }
.eig__step-body em { font-style: normal; font-size: 0.72rem; color: var(--brand-ink-soft); word-break: keep-all; }

/* 막대 비교 — 난간 */
.eig__bars { display: flex; align-items: flex-end; justify-content: center; gap: 1.1rem; min-height: 132px; }
.eig__bar {
  flex: 1 1 0; max-width: 130px; border-radius: 10px 10px 0 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 2px; padding: 0.5rem 0.4rem 0.55rem; color: #fff; text-align: center;
}
.eig__bar--tall { min-height: 128px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); }
.eig__bar--short { min-height: 96px; background: linear-gradient(135deg, var(--brand-primary-dark), #103a72); }
.eig__bar-fig { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; }
.eig__bar-name { font-size: 0.76rem; font-weight: 700; opacity: 0.95; }
.eig__bar-src { font-size: 0.6rem; font-weight: 600; opacity: 0.72; word-break: keep-all; line-height: 1.25; }

/* 연쇄 — 도미노 */
.eig__chain { display: flex; flex-direction: column; gap: 4px; }
.eig__chain-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  border-radius: 8px; padding: 0.42rem 0.75rem; color: #fff;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
  opacity: calc(1 - (var(--i) * 0.16));
  margin-left: calc(var(--i) * 9px);
}
.eig__chain-name { font-size: 0.84rem; font-weight: 800; letter-spacing: -0.01em; }
.eig__chain-tag { flex: 0 0 auto; font-size: 0.66rem; font-weight: 600; opacity: 0.85; }

/* 2분할 — 하자담보 */
.eig__duo { display: flex; gap: 0.6rem; }
.eig__duo-cell {
  flex: 1 1 0; background: #fff; border-radius: 12px; padding: 0.8rem 0.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  box-shadow: 0 14px 30px -24px rgba(22, 32, 46, 0.6);
}
.eig__duo-cap { font-size: 0.7rem; font-weight: 700; color: var(--brand-ink-soft); }
.eig__duo-fig { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; color: var(--brand-primary); line-height: 1.1; }
.eig__duo-cell--hi .eig__duo-fig { color: var(--brand-primary-dark); }
.eig__duo-src { font-size: 0.58rem; font-weight: 600; color: var(--brand-ink-soft); opacity: 0.85; word-break: keep-all; line-height: 1.25; }

@media (max-width: 480px) {
  .eig { min-height: 220px; padding: 1.2rem 1rem; }
  .eig__card { max-width: 320px; }
}

/* ============================================================
   브랜딩 홈 전용 섹션 (2026-09-10 신설 — inc/render-home.php)
   분기 2카드 · 하는 일 3계열 · 근거 · 대표 · 최근 글

   색 규율은 「시안 A」를 따른다 (사용자 확정 2026-09-10):
   넓은 «면»에 파랑을 깔지 않는다. 사진과 인포그래픽이 유일한 색 덩어리가 되고,
   파랑은 선·링크·버튼에만 남는다.

   섹션 바탕 교대 (같은 색이 붙지 않게):
     hero(dark) → branch(alt) → svc(흰) → evid(alt) → sproof(흰)
     → ceo(흰·윗선으로 분리) → proc(alt) → recent(흰) → faq(alt) → contact → darkcta(dark)
   ============================================================ */

/* ── §2 분기 2카드 ─────────────────────────────────────────── */
.branch { background: var(--brand-surface-alt); padding: 4.5rem 1.5rem; }

.branch__inner { max-width: 1080px; margin: 0 auto; }

.branch__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } /* 2026-10-21: 철거·잡철·방수 3카드 */

.branch__card {
  display: flex; flex-direction: column;
  padding: 2.4rem 2.1rem 2rem;
  background: var(--brand-surface);
  border: 1px solid var(--brand-line);
  border-top: 3px solid var(--brand-primary);
  border-radius: 20px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(22, 32, 46, 0.04), 0 18px 40px -30px rgba(22, 32, 46, 0.4);
  transition: transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
}

.branch__card:hover,
.branch__card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(22, 32, 46, 0.05), 0 28px 54px -30px rgba(22, 32, 46, 0.5);
}

.branch__eyebrow {
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.01em;
  color: var(--brand-primary-dark);
}

.branch__title {
  margin-top: 0.55rem;
  font-size: 1.42rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em;
  color: var(--brand-ink); word-break: keep-all;
}

.branch__body {
  margin-top: 0.85rem; flex: 1;
  font-size: 0.98rem; line-height: 1.75; color: var(--brand-ink-soft);
  word-break: keep-all; text-wrap: pretty;
}

.branch__go {
  margin-top: 1.5rem; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.94rem; font-weight: 700; color: var(--brand-primary-dark);
  padding-bottom: 2px; border-bottom: 1.5px solid var(--brand-primary);
  transition: gap 0.16s var(--ease-out-quart);
}

.branch__card:hover .branch__go { gap: 0.6rem; }

/* ── §3 하는 일 3계열 ───────────────────────────────────────── */
.svc { background: var(--brand-surface); padding: 4.5rem 1.5rem; }

.svc__inner { max-width: 1200px; margin: 0 auto; }

/* 2026-09-11 제목 아래 이유 문단(세 문장). 720px 이면 줄이 너무 짧게 끊겨 조금 넓힌다 */
.svc .sec-head { max-width: 780px; }

.svc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

.svc__card {
  position: relative; display: flex; flex-direction: column;
  background: var(--brand-surface);
  border: 1px solid var(--brand-line); border-radius: 20px; overflow: hidden;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(22, 32, 46, 0.04), 0 18px 40px -30px rgba(22, 32, 46, 0.4);
  transition: transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
}

.svc__card:hover,
.svc__card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(22, 32, 46, 0.05), 0 28px 54px -30px rgba(22, 32, 46, 0.5);
}

.svc__media { overflow: hidden; }

.svc__body-wrap { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.5rem 1.6rem; }

.svc__title { font-size: 1.2rem; font-weight: 800; line-height: 1.35; color: var(--brand-ink); word-break: keep-all; }

.svc__body {
  margin-top: 0.7rem; flex: 1;
  font-size: 0.95rem; line-height: 1.7; color: var(--brand-ink-soft);
  word-break: keep-all; text-wrap: pretty;
}

.svc__go {
  margin-top: 1.2rem; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.92rem; font-weight: 700; color: var(--brand-primary-dark);
  padding-bottom: 2px; border-bottom: 1.5px solid var(--brand-primary);
  transition: gap 0.16s var(--ease-out-quart);
}

.svc__card:hover .svc__go { gap: 0.6rem; }

/* ── §4 근거 ────────────────────────────────────────────────
   .eig 는 옅은 회색 바탕(시안 A)이라 섹션 바탕이 같으면 사라진다.
   그래서 섹션은 alt, 카드는 «흰»으로 두고 그 안에 eig 를 앉힌다.
   ──────────────────────────────────────────────────────────── */
.evid { background: var(--brand-surface-alt); padding: 4.5rem 1.5rem; }

.evid__inner { max-width: 1080px; margin: 0 auto; }

.evid__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.evid__card {
  display: flex; flex-direction: column; margin: 0;
  background: var(--brand-surface);
  border: 1px solid var(--brand-line); border-radius: 20px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(22, 32, 46, 0.04), 0 18px 40px -30px rgba(22, 32, 46, 0.4);
}

.evid__media { flex: 1; display: flex; }

.evid__note {
  margin: 0;
  padding: 1.1rem 1.5rem 1.3rem;
  border-top: 1px solid var(--brand-line);
  font-size: 0.92rem; line-height: 1.7; color: var(--brand-ink-soft);
  word-break: keep-all; text-wrap: pretty;
}

/* ── §6 대표 ────────────────────────────────────────────────
   앞 섹션(sproof)도 흰 바탕이라 윗선 한 줄로 가른다.
   ──────────────────────────────────────────────────────────── */
.ceo {
  background: var(--brand-surface);
  border-top: 1px solid var(--brand-line);
  padding: 4.5rem 1.5rem;
}

.ceo__inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 3rem; align-items: center;
}

.ceo__media { margin: 0; }

.ceo__media .img-slot { border-radius: 20px; border: 1px solid var(--brand-line); }

.ceo__note {
  margin-top: 0.7rem;
  font-size: 0.8rem; line-height: 1.6; color: var(--brand-ink-soft);
  word-break: keep-all;
}

.ceo__eyebrow {
  display: inline-flex; align-items: center;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--brand-primary-dark);
  padding: 0.4rem 0.85rem; border-radius: 999px;
  background: rgba(31, 95, 191, 0.1); border: 1px solid rgba(31, 95, 191, 0.24);
}

.ceo__title {
  margin-top: 1.1rem;
  font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.1rem);
  font-weight: 800; line-height: 1.3; letter-spacing: -0.022em;
  color: var(--brand-ink); word-break: keep-all; text-wrap: balance;
}

.ceo__body {
  margin-top: 1rem;
  font-size: 1rem; line-height: 1.8; color: var(--brand-ink-soft);
  word-break: keep-all; text-wrap: pretty;
}

.ceo__facts {
  margin: 1.9rem 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.5rem;
  border-top: 1px solid var(--brand-line); padding-top: 1.5rem;
}

.ceo__fact { display: flex; flex-direction: column; gap: 0.25rem; }

.ceo__fact-k { font-size: 0.8rem; font-weight: 700; color: var(--brand-primary-dark); }

.ceo__fact-v { margin: 0; font-size: 0.98rem; font-weight: 700; color: var(--brand-ink); word-break: keep-all; }

/* ── §8 최근 글 ─────────────────────────────────────────────── */
.recent { background: var(--brand-surface); padding: 4.5rem 1.5rem; }

.recent__inner { max-width: 1200px; margin: 0 auto; }

.recent__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

.recent__card {
  display: flex; flex-direction: column;
  padding: 1.7rem 1.6rem 1.8rem;
  background: var(--brand-surface);
  border: 1px solid var(--brand-line); border-radius: 20px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(22, 32, 46, 0.04), 0 18px 40px -30px rgba(22, 32, 46, 0.4);
  transition: transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
}

.recent__card:hover,
.recent__card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(22, 32, 46, 0.05), 0 28px 54px -30px rgba(22, 32, 46, 0.5);
}

.recent__date { font-size: 0.82rem; font-weight: 700; color: var(--brand-primary-dark); }

.recent__title {
  margin-top: 0.6rem;
  font-size: 1.08rem; font-weight: 800; line-height: 1.45; color: var(--brand-ink);
  word-break: keep-all;
}

.recent__excerpt {
  margin-top: 0.7rem; flex: 1;
  font-size: 0.92rem; line-height: 1.7; color: var(--brand-ink-soft);
  word-break: keep-all; text-wrap: pretty;
}

.recent__more {
  margin: 2rem auto 0; width: fit-content;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.95rem; font-weight: 700; color: var(--brand-primary-dark);
  text-decoration: none; padding-bottom: 2px; border-bottom: 1.5px solid var(--brand-primary);
  transition: gap 0.16s var(--ease-out-quart);
}

.recent__more:hover { gap: 0.6rem; }

/* ── 태블릿 ─────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .svc__grid,
  .recent__grid { grid-template-columns: 1fr 1fr; }

  .ceo__inner { grid-template-columns: 1fr; gap: 2.2rem; }

  .ceo__media { max-width: 340px; }
}

/* ── 모바일 ─────────────────────────────────────────────────
   여백은 데스크톱 값을 비례 축소하지 않고 «따로» 정한다.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .branch, .svc, .evid, .ceo, .recent { padding: 3.2rem 1.25rem; }

  .branch__grid,
  .evid__grid,
  .svc__grid,
  .recent__grid { grid-template-columns: 1fr; }

  .branch__card { padding: 2rem 1.6rem 1.8rem; }

  .branch__title { font-size: 1.3rem; }

  .ceo__facts { gap: 0.9rem 1.2rem; }
}

@media (max-width: 480px) {
  .ceo__facts { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .branch__card,
  .svc__card,
  .recent__card,
  .branch__go,
  .svc__go,
  .recent__more { transition: none; }

  .branch__card:hover,
  .svc__card:hover,
  .recent__card:hover { transform: none; }
}

/* ── 시공 항목 아래 한 줄 (2026-09-10) ─────────────────────────
   /steel/ 이 갖고 있던 「방수·외벽 도색」 항목을 빼고 그 자리를 대신한다.
   함께 진행할 수 있다는 사실은 참이지만, 서비스 «설명»은 /waterproof/ 가 갖는다 —
   같은 서비스를 두 URL 에 두면 중복 콘텐츠가 된다.
   ──────────────────────────────────────────────────────────── */
.pdet__note {
  margin: 1.7rem auto 0;
  max-width: 780px;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--brand-ink-soft);
  word-break: keep-all;
  text-wrap: pretty;
}

.pdet__note a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  font-weight: 700;
  color: var(--brand-primary-dark);
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1.5px solid var(--brand-primary);
  transition: gap 0.16s var(--ease-out-quart);
}

.pdet__note a:hover { gap: 0.55rem; }

@media (prefers-reduced-motion: reduce) {
  .pdet__note a { transition: none; }
}

/* ── 누수 경로 인포그래픽 (2026-09-10) ─────────────────────────
   /waterproof/ §5 「원인 분석 진단」 자리. .eig__step 어휘를 그대로 따른다.
   ──────────────────────────────────────────────────────────── */
.eig__leak { display: flex; flex-direction: column; gap: 0.7rem; }

.eig__leak-svg {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  border-radius: 10px;
  padding: 0.5rem 0.35rem;
  box-shadow: 0 10px 24px -20px rgba(22, 32, 46, 0.6);
}

.eig__leak-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.eig__leak-legend li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: #fff;
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  box-shadow: 0 10px 24px -20px rgba(22, 32, 46, 0.6);
}

.eig__leak-no {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--brand-primary-dark);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eig__leak-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.eig__leak-txt b {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--brand-ink);
  letter-spacing: -0.01em;
}

.eig__leak-txt em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--brand-ink-soft);
  word-break: keep-all;
}

/* ============================================================
   모바일 터치 타깃·가독 보정 (2026-09-10)

   실측(390px·360px, 4개 페이지)에서 나온 것만 고친다:
     · 가로 스크롤 0 · 100vh 사용 0 · 콜바가 내용 안 가림  → 손대지 않는다
     · 푸터 링크 16px · 푸터 전화 CTA 24px · 인라인 링크 28~29px → 44px 로
     · 동의 체크박스 13px → 20px (라벨을 눌러도 되지만 사람은 «네모»를 겨눈다)
     · 인포그래픽 단위 11.2px · 전후 배지 11.5px → 12.5px 이상

   🔴 주 고객이 나이 있는 건물주다. 44px 은 취향이 아니라 전환 문제다.
   데스크톱은 건드리지 않는다 — 아래는 전부 미디어 쿼리 안이다.
   ============================================================ */
@media (max-width: 860px) {

  /* 푸터 바로가기·안내 — 16px 짜리 글자 링크였다.
     세로 패딩으로 «누를 면적»을 만든다. 색·글자 크기는 그대로. */
  .fcol__list { gap: 0; }

  .fcol__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 0.92rem;
  }

  /* 푸터 전화 CTA — 24px 였다. 전환 경로라 가장 급하다. */
  .fbrand__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 0.6rem;
    font-size: 0.98rem;
  }

  /* 본문 안의 글자 링크들 — 28~29px 였다. */
  .pdet__link,
  .pdet__note a,
  .recent__more,
  .svc__go,
  .branch__go {
    min-height: 44px;
    align-items: center;
  }

  /* 동의 체크박스 — 13px. 라벨이 커도 사람은 네모를 겨눈다. */
  .osc-consent input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 1px;
  }

  .osc-consent { gap: 10px; font-size: 0.82rem; }

  /* 가장 작던 글자 둘 — 나이 있는 눈에 11px 는 읽히지 않는다. */
  .eig__row-unit { font-size: 0.78rem; }

  .sproof__badge { font-size: 0.78rem; }

  .sec-head__eyebrow { font-size: 0.82rem; }
}

/* ============================================================
   브랜드 락업 — 신규 로고 적용 (2026-09-10)

   정본: docs/benefit-assets/eutteum-brand-assets/logo/README.md
   전에는 심볼이 «CSS 도형 두 개»(파란 둥근 사각 + 주황 점)였다. 실제 로고가 아니었다.
   이제 확정 마크(지붕 + 물결 2줄)를 인라인 SVG 로 넣는다.

   색은 로고 규정을 따른다 — 주색 #2D3349(네이비).
   사이트 --brand-primary(#1f5fbf)와 다른 값인 게 맞다: 그건 «UI 파랑»이고
   이건 «로고 색»이다. 명함·간판과 같은 값이라야 같은 회사로 읽힌다.

   🔴 로고 규정 금지: 가로세로비 변경 · 임의 색 · 그림자/입체 · 회전.
      비율 1.40 은 viewBox 가 잡으므로 height 만 주고 width 는 auto 로 둔다.
   ============================================================ */

/* 헤더 — 바탕이 항상 밝다(흰색 86% 또는 흰색)이라 네이비로 고정 */
.brand__mark {
  height: 26px;
  width: auto;
  display: block;
  flex: 0 0 auto;
  color: #2D3349;
}

.brand__name {
  font-family: "Gothic A1", var(--font-sans);
  font-weight: 900;
  font-size: 1.26rem;
  line-height: 1;
  letter-spacing: -0.02em; /* 로고 규정: 한글 -0.02em */
  color: #2D3349;
}

/* ENG 는 자간 0 (로고 규정). 색을 나누지 않는다 — 워드마크는 한 덩어리 한 색이다. */
.brand__name b {
  color: inherit;
  font-weight: 900;
  letter-spacing: 0;
}

/* 푸터 — 어두운 바탕. currentColor 가 부모의 흰색을 따라간다. */
/* 🔴 flex 로 만들지 않는다. gap 이 «심볼과 글자» 사이에만 들어갈 것 같지만,
   flex 컨테이너 안에서는 텍스트 노드 「으뜸」과 <b>ENG</b> 가 각각 별개 아이템이 돼
   그 «사이»에도 gap 이 들어간다 — 워드마크가 「으뜸 ENG」로 벌어졌다.
   헤더가 멀쩡한 이유도 같다: .brand 는 flex 지만 .brand__name(span)은 아니다. */
.fbrand__name {
  font-family: "Gothic A1", var(--font-sans);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.fbrand__mark {
  height: 24px;
  width: auto;
  display: inline-block;
  vertical-align: -0.2em;
  margin-right: 0.45rem;
  color: inherit;
}

.fbrand__name b { font-weight: 900; letter-spacing: 0; }

@media (max-width: 860px) {
  .brand__mark { height: 24px; }
  .brand__name { font-size: 1.18rem; }
}

/* ── 시공 항목 인포그래픽 추가분 (2026-09-10) ──────────────────
   외벽 도색(층 적층) · 데크(단면) · 징크(이음매) 3종.
   폐기물(waste)은 기존 .eig__rows 를 그대로 쓴다.
   ──────────────────────────────────────────────────────────── */

/* 도색 4층 — wli 의 적층 어휘를 eig 이름으로 옮긴 것 */
.eig__stack { display: flex; flex-direction: column; gap: 4px; }

.eig__layer {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  color: #fff;
}

.eig__layer-name { font-size: 0.86rem; font-weight: 800; letter-spacing: -0.01em; }

.eig__layer-sub { font-size: 0.72rem; font-weight: 600; opacity: 0.85; word-break: keep-all; }

/* 위에서 아래로 갈수록 짙어진다 — 위가 마감, 아래가 바탕 */
.eig__layer--a { background: linear-gradient(135deg, #6f9ce0, #4f83cf); }
.eig__layer--b { background: linear-gradient(135deg, #4f83cf, var(--brand-primary)); }
.eig__layer--c { background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark)); }
.eig__layer--d { background: linear-gradient(135deg, #2b4f86, #16304f); }

/* 원상복구 범위 (2026-09-11). 남기는 층은 회색, 사이에 «들어올 때 상태» 기준선 */
.eig__layer--keep { background: #e2e7ee; color: var(--brand-ink); }
.eig__layer--keep .eig__layer-sub { opacity: 0.75; }
.eig__line {
  display: flex; align-items: center; gap: 0.5rem; margin: 4px 0;
  font-size: 0.72rem; font-weight: 800; color: var(--brand-primary-dark); white-space: nowrap;
}
.eig__line::before,
.eig__line::after { content: ""; flex: 1; border-top: 2px dashed var(--brand-primary); opacity: 0.55; }

/* 데크 단면 */
.eig__deck { display: flex; flex-direction: column; gap: 0.7rem; }

.eig__deck-svg,
.eig__zinc-svg {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  border-radius: 10px;
  padding: 0.5rem 0.35rem;
  box-shadow: 0 10px 24px -20px rgba(22, 32, 46, 0.6);
}

.eig__deck-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }

.eig__deck-legend li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  background: #fff;
  border-radius: 10px;
  padding: 0.45rem 0.7rem;
  box-shadow: 0 10px 24px -20px rgba(22, 32, 46, 0.6);
}

.eig__sw { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; margin-top: 2px; }

.eig__sw--a { background: var(--brand-primary); opacity: 0.85; }
.eig__sw--b { background: var(--brand-primary-dark); opacity: 0.8; }
.eig__sw--c { background: #c9d3e0; }

.eig__sw-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.eig__sw-txt b { font-size: 0.84rem; font-weight: 800; color: var(--brand-ink); letter-spacing: -0.01em; }

.eig__sw-txt em { font-style: normal; font-size: 0.71rem; color: var(--brand-ink-soft); word-break: keep-all; }

/* 징크 이음매 */
.eig__zinc { display: flex; flex-direction: column; }

/* ============================================================
   3사이트 분리 (2026-10-21)
   서비스 이름 · 서비스 사이트 메뉴 · 서비스/지역 페이지 · 푸터 한 줄
   ============================================================ */

/* 서비스 사이트의 브랜드 줄 「으뜸ENG 철거」 — 워드마크는 그대로 두고 서비스 이름만 옆에 붙인다 */
.brand__svc {
  padding-left: 0.6rem;
  border-left: 1.5px solid var(--brand-line);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand-primary-dark);
}

/* 「으뜸ENG 다른 서비스 ›」 — 작게, 눈에 덜 띄게 */
.site-nav .nav__other { font-size: 0.8rem; font-weight: 600; color: var(--brand-ink-soft); }
.site-nav .nav__other:hover { color: var(--brand-primary-dark); }

/* 「시공 항목 ▾」 — 하위 페이지가 셋을 넘을 때 (details/summary: 키보드·스크린리더 기본 지원) */
.nav-drop { position: relative; }
.nav-drop > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.3rem 0;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: rgba(22, 32, 46, 0.78);
}
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary:hover,
.nav-drop[open] > summary { color: var(--brand-primary-dark); }
.nav-drop__menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: -1rem;
  z-index: 60;
  min-width: 15rem;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  box-shadow: 0 18px 40px -24px rgba(22, 32, 46, 0.45);
}
.site-nav .nav-drop__menu a { padding: 0.65rem 0.9rem; border-radius: 8px; font-size: 0.94rem; }
.site-nav .nav-drop__menu a:hover { background: var(--brand-primary-soft); }

@media (min-width: 901px) and (max-width: 1100px) { .site-nav { gap: 1.2rem; } }
@media (max-width: 900px) {
  .nav-drop > summary { padding: 1rem 1.5rem; font-size: 1rem; border-top: 1px solid var(--brand-line); }
  .nav-drop__menu { position: static; min-width: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--brand-surface-alt); }
  .site-nav .nav-drop__menu a { padding: 0.9rem 2.4rem; border-radius: 0; border-top: 1px solid var(--brand-line); }
  .site-nav .nav__other { font-size: 0.9rem; }
}

/* 서비스·지역 페이지의 글 단락 섹션 */
.psec { background: var(--brand-surface); padding: 4.5rem 1.5rem; }
.psec + .psec { border-top: 1px solid var(--brand-line); }
.psec__inner { max-width: 820px; margin: 0 auto; }
.psec .sec-head { margin-bottom: 1.6rem; }
.psec__body p { margin: 0 0 1.1rem; font-size: 1.02rem; line-height: 1.85; color: var(--brand-ink-soft); word-break: keep-all; text-wrap: pretty; }
.psec__list { margin: 1.2rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.psec__list li { position: relative; padding-left: 1.3rem; font-size: 1rem; line-height: 1.7; color: var(--brand-ink); word-break: keep-all; }
.psec__list li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-accent); }

/* 지역 링크 줄 */
.areas { background: var(--brand-surface-alt); padding: 4.5rem 1.5rem; }
.areas__inner { max-width: 960px; margin: 0 auto; }
.areas__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
.areas__list a {
  display: inline-block;
  padding: 0.7rem 1.3rem;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: #fff;
  font-weight: 700;
  color: var(--brand-primary-dark);
  text-decoration: none;
}
.areas__list a:hover { border-color: var(--brand-primary); background: var(--brand-primary-soft); }
.areas + .areas { padding-top: 0; }  /* 링크 줄이 연달아 올 때 위 여백 한 번만 */
@media (max-width: 860px) { .psec, .areas { padding: 3.2rem 1.25rem; } }

/* 글 섹션 안의 그림(이미지 파일이 있을 때만 그려진다)과 다른 서비스 사이트 링크 목록 */
.psec__fig { margin: 1.6rem 0 1.8rem; }
.psec__fig .img-slot { border-radius: 16px; border: 1px solid var(--brand-line); }
.psec__links { margin: 1.2rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.8rem; }
.psec__links li { font-size: 1rem; line-height: 1.7; color: var(--brand-ink-soft); word-break: keep-all; }
.psec__links a { color: var(--brand-primary-dark); text-decoration: none; }
.psec__links a:hover { text-decoration: underline; }

/* 푸터 */
.fcol__head--sub { margin-top: 1.6rem; }
.site-footer__ai { font-size: 0.75rem; color: #64748b; }