/* ============================================================================
   SpaceBridge v50 — 통합 디자인 시스템
   ============================================================================
   기존 5개 CSS(v40~v46) 통합. HTML 클래스명 유지.
   4px 그리드 / 5단계 타이포 / 3종 라운드·그림자 / DNA 컬러 고정.
   -------------------------------------------------------------------------- */


/* ──────────────────────────────────────────────────────────────────────────────
   0. FONT & RESET
   ────────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: Pretendard;
  src: url('/assets/fonts/PretendardVariable-subset.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* ── DNA 컬러 (변경 금지) ── */
  --ink:       #16233A;
  --body:      #5A6B84;
  --blue:      #075f96;
  --blue-cta:  #086CAD;
  --sky:       #EAF4F9;
  --canvas:    #F4F8FB;
  --white:     #FFFFFF;
  --dark:      #081A2D;
  --line:      #d7e3ea;
  --success:   #087F6C;

  /* ── 시스템 토큰 ── */
  --radius-s:  8px;
  --radius-m:  14px;
  --radius-l:  24px;

  --shadow-s:  0  4px 12px rgba(27,64,96,.06);
  --shadow-m:  0 12px 32px rgba(27,64,96,.10);
  --shadow-l:  0 20px 60px rgba(27,64,96,.14);

  --shell:     min(1200px, calc(100% - clamp(40px,5.2vw,48px)));
  --ease:      cubic-bezier(.22, 1, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family:"Pretendard Variable","Pretendard Variable Full",Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;              /* Body 단계 */
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: -.018em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }


/* ──────────────────────────────────────────────────────────────────────────────
   1. LAYOUT PRIMITIVES
   ────────────────────────────────────────────────────────────────────────────── */
.shell { width: var(--shell); margin-inline: auto; }

.skip-link {
  position: fixed; z-index: 1000; left: 16px; top: -80px;
  padding: 12px 16px; background: var(--ink); color: #fff;
  border-radius: var(--radius-s);
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 3px solid rgba(10,118,192,.32);
  outline-offset: 3px;
}


/* ──────────────────────────────────────────────────────────────────────────────
   2. TYPOGRAPHY — 5단계만
   ────────────────────────────────────────────────────────────────────────────── */

/* Hero (h1) */
.hero h1 {
  max-width: 650px;
  font-size: clamp(40px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.04em;
}
.hero h1 em { color: var(--blue); font-style: normal; }

/* Section h2 */
.section-head h2 {
  max-width: 820px;
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 650;
  line-height: 1.18;
  letter-spacing: -.035em;
}

/* Card h3 — 20px/650 은 각 카드 컴포넌트에서 적용 */

/* Body — 16px/400 은 body 에서 이미 적용 */

/* Caption / Eyebrow — 14px/600 */
.eyebrow {
  display: block;
  margin-bottom: 16px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.eyebrow::before { display: none; }


/* ──────────────────────────────────────────────────────────────────────────────
   3. SHARED SECTION & COMPONENTS
   ────────────────────────────────────────────────────────────────────────────── */
.section { padding: 96px 0; }
.section:nth-of-type(even) { background: var(--canvas); }

.section-head { margin-bottom: 48px; }
.section-head > p,
.split-head > p,
.centered > p:last-child {
  color: var(--body);
  font-size: 16px;
  line-height: 1.8;
}

.split-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  align-items: end;
  gap: 64px;
}

.centered {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

/* 버튼 — 최소 52px 높이 */
.button {
  position: relative;
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-s);
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.button:hover { transform: translateY(-2px); }

.button.primary {
  background: var(--blue-cta);
  color: #fff;
  box-shadow: 0 12px 28px rgba(7,95,156,.17);
}
/* CTA 반짝임 효과 */
.button.primary::before {
  content: "";
  position: absolute;
  inset: -35% auto -35% -42%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg);
  animation: cta-glint 1s 1.1s var(--ease) both;
}

.button.text-button {
  padding-inline: 8px;
  background: transparent;
  color: var(--blue);
  box-shadow: none;
}

.button.light,
.button.cream {
  background: #fff;
  color: var(--blue);
  box-shadow: var(--shadow-s);
}

.button.kakao { background: #fee500; color: #161616; }

.inline-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--blue);
  font-weight: 650;
}


/* ──────────────────────────────────────────────────────────────────────────────
   4. SITE HEADER — 고정, 76px, 블러
   ────────────────────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  height: 76px;
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid rgba(220,230,239,.9);
  backdrop-filter: saturate(160%) blur(14px);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  flex: none;
}

.brand-mark {
  position: relative;
  display: grid;
  width: 42px; height: 42px;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: var(--shadow-m);
  animation: brand-arrive .58s var(--ease) both;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.75) 49%, transparent 60%);
  transform: translateX(-80%);
  animation: brand-sheen .9s .65s var(--ease) both;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }

.brand-type { display: flex; flex-direction: column; line-height: 1; }
.brand-type b { font-size: 20px; font-weight: 700; letter-spacing: -.055em; }
.brand-type b span { color: var(--blue-cta); }
.brand-type small {
  margin-top: 4px;
  color: var(--body);
  font-size: 14px;
  font-weight: 550;
  letter-spacing: .08em;
  white-space: nowrap;
}

/* 데스크톱 내비 */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}
.desktop-nav a {
  position: relative;
  color: #394a61;
  font-size: 14px;
  font-weight: 600;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -8px;
  height: 2px;
  background: var(--blue-cta);
  transition: right .25s var(--ease);
}
.desktop-nav a:hover::after { right: 0; }

.header-cta {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  background: var(--blue);
  color: #fff;
  border-radius: var(--radius-s);
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--shadow-m);
}

.menu-toggle,
.mobile-menu { display: none; }


/* ──────────────────────────────────────────────────────────────────────────────
   5. HERO
   ────────────────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding: 48px 0 64px;
  background: linear-gradient(180deg, #fff 0%, #F4F8FB 100%);
}
.hero::before { display: none; }

.hero-grid {
  position: relative;
  display: block;
  min-height: 620px;
  overflow: hidden;
  border-radius: var(--radius-l);
  border: 1px solid rgba(220,230,239,.7);
  box-shadow: var(--shadow-l);
}
.hero-grid::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.99) 0%,
    rgba(255,255,255,.96) 40%,
    rgba(255,255,255,.55) 57%,
    rgba(255,255,255,0) 75%
  );
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  width: 52%;
  min-height: 620px;
  flex-direction: column;
  justify-content: center;
  padding: 48px 0 48px 48px;
}

.hero-lede {
  max-width: 600px;
  margin-top: 24px;
  color: var(--body);
  font-size: 17px;
  line-height: 1.85;
}
.hero-lede strong { color: var(--ink); font-weight: 650; }

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

/* 신뢰 표시 */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 28px;
  color: var(--body);
  font-size: 14px;
}
.trust-strip li { display: flex; align-items: center; gap: 8px; }
.trust-strip li::before {
  content: '\2713';
  color: var(--success);
  font-weight: 800;
}

/* 히어로 비주얼 */
.hero-visual {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  background: #e7f1f7;
  animation: hero-photo-in .72s .12s var(--ease) both;
}
.hero-visual picture { display: block; width: 100%; height: 100%; }
.hero-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .9s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .hero-grid:hover .hero-visual img { transform: scale(1.012); }
}

/* 히어로 상담 액션 (v43 패턴) */
.hero-contact-actions {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(92px,.72fr) minmax(116px,.9fr);
  gap: 12px;
}
.hero-contact-actions .button {
  width: 100%;
  min-width: 0;
  padding-inline: 16px;
  white-space: nowrap;
}
.hero-category-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
}

/* v46 미니 견적서 오버레이 */
.sb46-sheet {
  position: absolute;
  z-index: 4;
  right: 24px; bottom: 24px;
  width: min(360px, 34%);
  padding: 20px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 20px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-l);
  backdrop-filter: blur(18px);
}
.sb46-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.sb46-sheet-head img { width: 118px; height: auto; transform: none !important; }
.sb46-sheet-head span {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 50px;
  background: var(--sky);
  color: var(--blue);
  font-size: 14px;
  font-weight: 650;
}
.sb46-sheet h2 { margin: 0 0 12px; font-size: 20px; line-height: 1.3; }
.sb46-sheet dl { margin: 0; border-top: 1px solid var(--line); }
.sb46-sheet dl > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.sb46-sheet dt { color: var(--body); font-size: 14px; }
.sb46-sheet dd { margin: 0; color: var(--ink); font-size: 14px; font-weight: 620; }
.sb46-sheet-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--success);
  font-size: 14px;
}
.sb46-sheet-foot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(8,127,108,.10);
}


/* ──────────────────────────────────────────────────────────────────────────────
   6. JOURNEY BAR — 수평 단계 표시
   ────────────────────────────────────────────────────────────────────────────── */
.sb45-journey {
  padding: 0 0 48px;
  border-bottom: 0;
  background: var(--canvas);
}
.sb45-journey ol {
  position: relative;
  width: var(--shell);
  margin: auto;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: #fff;
  box-shadow: var(--shadow-s);
}
.sb45-journey li {
  position: relative;
  min-height: 52px;
  padding: 8px 12px 8px 32px;
  border-left: 1px solid var(--line);
  font-size: 14px;
  color: var(--body);
}
.sb45-journey li:last-child { border-right: 1px solid var(--line); }
.sb45-journey b {
  position: absolute;
  left: 8px; top: 8px;
  color: var(--blue);
  font-size: 14px;
}
.sb45-journey span {
  display: block;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.35;
}
.sb45-journey small {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.3;
}


/* ──────────────────────────────────────────────────────────────────────────────
   7. SITUATION — 탭 + 패널
   ────────────────────────────────────────────────────────────────────────────── */
.situation { background: #fff !important; }

.situation-layout {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  gap: 32px;
  align-items: stretch;
}

.situation-tabs {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.situation-tab {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  padding: 20px 8px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
  transition: padding .25s var(--ease), background .25s;
}
.situation-tab > span {
  grid-row: 1 / 3;
  display: grid;
  width: 36px; height: 36px;
  place-items: center;
  background: var(--sky);
  color: var(--blue);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}
.situation-tab b { font-size: 17px; font-weight: 650; }
.situation-tab small { color: var(--body); font-size: 14px; }
.situation-tab:hover,
.situation-tab.active {
  padding-left: 16px;
  background: #f5fafc;
}
.situation-tab.active b { color: var(--blue); }

.situation-panel {
  position: relative;
  display: flex;
  min-height: 400px;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 48px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 46%, rgba(255,255,255,.18) 100%),
    url('/assets/v42/situation-spacebridge-v42.webp') 64% center / cover no-repeat;
  color: var(--ink);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
}
.situation-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(234,244,249,.22), transparent 55%);
  pointer-events: none;
}
.situation-panel > * { position: relative; z-index: 1; }

.panel-kicker { margin-bottom: 12px; color: var(--blue); font-size: 14px; font-weight: 700; }
.situation-panel h3 {
  max-width: 650px;
  font-size: 32px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.04em;
}
.situation-panel > p:not(.panel-kicker) {
  max-width: 570px;
  margin-top: 16px;
  color: var(--body);
}
.panel-route {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 28px;
}
.panel-route span { font-size: 14px; font-weight: 650; }
.panel-route i { color: var(--blue-cta); font-style: normal; }
.situation-panel .button {
  align-self: flex-start;
  background: var(--blue-cta);
  color: #fff;
}


/* ──────────────────────────────────────────────────────────────────────────────
   8. CATEGORIES — 서비스 카드 그리드
   ────────────────────────────────────────────────────────────────────────────── */
.categories { background: var(--canvas) !important; }

/* 카테고리 스위처 (v46) */
.sb46-category-switcher {
  display: flex;
  gap: 8px;
  margin: 0 0 20px;
  padding: 4px 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sb46-category-switcher::-webkit-scrollbar { display: none; }
.sb46-category-switcher button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 50px;
  background: #fff;
  color: var(--body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.sb46-category-switcher button[aria-selected="true"] {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

/* 카테고리 스테이지 (v46) */
.sb46-category-stage {
  display: grid;
  grid-template-columns: 7fr 5fr;
  min-height: 420px;
  margin-bottom: 48px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: #fff;
  box-shadow: var(--shadow-m);
}
.sb46-category-photo {
  position: relative;
  min-height: 420px;
  margin: 0;
  overflow: hidden;
  background: #dcebf1;
}
.sb46-category-photo img { width: 100%; height: 100%; object-fit: cover; }
.sb46-category-photo figcaption {
  position: absolute;
  left: 16px; bottom: 16px;
  padding: 8px 12px;
  border-radius: var(--radius-s);
  background: rgba(10,40,60,.78);
  color: #fff;
  font-size: 14px;
  backdrop-filter: blur(8px);
}
.sb46-category-output {
  display: flex;
  flex-direction: column;
  padding: 36px;
}
.sb46-category-output > span { color: var(--blue); font-size: 14px; font-weight: 650; }
.sb46-category-output h3 { margin: 8px 0 12px; font-size: 28px; font-weight: 650; line-height: 1.2; }
.sb46-category-output > p { margin: 0; color: var(--body); font-size: 16px; line-height: 1.7; }
.sb46-category-output dl { margin: 24px 0 0; border-top: 1px solid var(--line); }
.sb46-category-output dl > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.sb46-category-output dt { color: var(--body); font-size: 14px; }
.sb46-category-output dd { margin: 0; font-size: 14px; font-weight: 620; }
.sb46-category-output a {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 24px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 650;
}

/* 서비스 카드 4열 그리드 */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  grid-auto-rows: 1fr;
}

.service-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(220,230,239,.72);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-m);
}

.service-card figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--sky);
}
.service-card figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .65s var(--ease);
}
.service-card:hover figure img { transform: scale(1.03); }
.service-card figure figcaption { display: none; }

.service-body {
  display: flex;
  min-height: 248px;
  flex: 1;
  flex-direction: column;
  padding: 24px;
}
.service-no { color: var(--blue); font-size: 14px; font-weight: 700; }
.service-card h3 {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.32;
  letter-spacing: -.03em;
}
.service-card p { margin-top: 12px; color: var(--body); font-size: 14px; line-height: 1.65; }
.scope-list { display: none; }

.service-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.service-links a,
.service-links button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.service-links a::after { content: ' \2192'; }
.service-links button { color: #52667e; }

.extension-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}
.extension-row > div { margin-right: auto; }
.extension-row b { font-weight: 650; }
.extension-row p { color: var(--body); font-size: 14px; }
.extension-row a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 650;
}


/* ──────────────────────────────────────────────────────────────────────────────
   9. CONDITION LAB — 견적 빌더 + 견적서
   ────────────────────────────────────────────────────────────────────────────── */
.condition-lab {
  background: #fff !important;
  border-top: 1px solid #e3ebf1;
  border-bottom: 1px solid #e3ebf1;
}
.condition-lab .section-head { margin-bottom: 36px; }
.condition-lab .section-head h2 { max-width: 720px; }
.condition-lab .section-head > p { max-width: 490px; }

.condition-builder {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 32px;
  align-items: stretch;
}

.condition-controls,
.condition-sheet {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
}

/* 컨트롤 패널 */
.condition-controls { padding: 32px; }
.condition-step + .condition-step { margin-top: 28px; }
.condition-step-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.condition-step-head span {
  display: grid;
  width: 28px; height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--sky);
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
}
.condition-step-head b { font-size: 16px; font-weight: 650; }
.condition-step-head small { margin-left: auto; color: var(--body); font-size: 14px; font-weight: 600; }

.condition-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.condition-options.categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.condition-option {
  min-height: 48px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #d7e3ea;
  border-radius: var(--radius-s);
  color: #31455d;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s, transform .18s;
}
.condition-option:hover { border-color: #8dbbd5; transform: translateY(-1px); }
.condition-option[aria-pressed="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-m);
}

.condition-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.condition-field { display: grid; gap: 8px; color: #475b72; font-size: 14px; font-weight: 650; }
.condition-field input,
.condition-field select {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid #d7e3ea;
  border-radius: var(--radius-s);
  outline: 0;
  font-size: 14px;
  font-weight: 500;
}
.condition-field input:focus,
.condition-field select:focus {
  border-color: var(--blue-cta);
  box-shadow: 0 0 0 3px rgba(10,118,192,.12);
}
.condition-privacy { margin-top: 16px; color: #526a7c; font-size: 14px; line-height: 1.6; }

/* 견적서 패널 */
.condition-sheet { position: relative; overflow: hidden; padding: 32px; }
.condition-sheet::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--blue-cta);
}

.condition-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.condition-sheet-kicker { display: block; color: var(--blue-cta); font-size: 14px; font-weight: 700; }
.condition-sheet-head h3 {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.035em;
}
.condition-sheet-state {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 0 12px;
  background: #edf7f4;
  border-radius: 50px;
  color: var(--success);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.condition-rows { display: grid; margin-top: 4px; }
.condition-row {
  display: grid;
  grid-template-columns: 40px 92px 1fr;
  gap: 16px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid #e6edf2;
}
.condition-row > span {
  display: grid;
  width: 36px; height: 36px;
  place-items: center;
  border-radius: var(--radius-s);
  background: var(--sky);
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
}
.condition-row b { padding-top: 8px; font-size: 14px; font-weight: 650; }
.condition-row p { padding-top: 8px; color: #526a7c; font-size: 14px; line-height: 1.6; }

.condition-questions {
  margin-top: 24px;
  padding: 20px;
  background: var(--canvas);
  border-radius: var(--radius-s);
}
.condition-questions summary {
  min-height: 28px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.condition-questions summary::-webkit-details-marker { display: none; }
.condition-questions summary::after { content: '+'; float: right; color: var(--blue); }
.condition-questions[open] summary::after { content: '\2212'; }
.condition-questions ol {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  counter-reset: question;
}
.condition-questions li {
  counter-increment: question;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  color: #526a7c;
  font-size: 14px;
  line-height: 1.55;
}
.condition-questions li::before {
  content: counter(question);
  display: grid;
  width: 20px; height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ccdbe5;
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
}

.condition-actions {
  display: grid;
  grid-template-columns: 1.25fr .9fr .9fr;
  gap: 8px;
  margin-top: 24px;
}
.condition-actions .button { min-height: 48px; padding: 0 12px; font-size: 14px; }
.condition-actions .condition-sms {
  background: #fff;
  border: 1px solid #b8ccd9;
  color: var(--blue);
  box-shadow: none;
}
.condition-actions .condition-kakao { background: #fee500; color: #191919; box-shadow: none; }

.condition-copy {
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  background: transparent;
  border: 0;
  color: #52667e;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.condition-disclaimer { margin-top: 16px; color: #526a7c; font-size: 14px; line-height: 1.6; }
.condition-feedback { min-height: 20px; margin-top: 8px; color: var(--success); font-size: 14px; font-weight: 650; }

/* 견적서 업데이트 슬라이드 인 애니메이션 */
.intent-pulse { animation: condition-intent-pulse .8s ease both; }
.condition-sheet.is-updating .condition-row,
.condition-sheet.is-updating .condition-questions {
  animation: condition-row-in .34s var(--ease) both;
}
.condition-sheet.is-updating .condition-row:nth-child(2) { animation-delay: 45ms; }
.condition-sheet.is-updating .condition-row:nth-child(3) { animation-delay: 90ms; }
.condition-sheet.is-updating .condition-row:nth-child(4) { animation-delay: 135ms; }
.condition-sheet.is-updating .condition-questions  { animation-delay: 180ms; }


/* ──────────────────────────────────────────────────────────────────────────────
   10. QUOTE — 상담 신청 폼
   ────────────────────────────────────────────────────────────────────────────── */
.quote { background: linear-gradient(140deg, var(--sky), #f7fbfd) !important; }

.quote-shell {
  display: grid;
  grid-template-columns: minmax(290px, .72fr) minmax(0, 1.28fr);
  gap: 48px;
  align-items: start;
}

.quote-intro {
  position: sticky;
  top: 116px;
  padding: 36px 12px 32px 0;
}
.quote-intro h2 {
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.04em;
}
.quote-intro > p:not(.eyebrow) { margin-top: 20px; color: var(--body); font-size: 14px; }

.quote-points {
  display: grid;
  gap: 8px;
  margin-top: 28px;
  color: #526a7c;
  font-size: 14px;
}
.quote-points span::before {
  content: '\2713';
  margin-right: 8px;
  color: var(--success);
  font-weight: 800;
}

.lead-form {
  padding: 36px;
  background: #fff;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
}

.form-step + .form-step {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.field-title {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 4px 12px;
  margin-bottom: 20px;
}
.field-title > span { grid-row: 1 / 3; color: var(--blue); font-size: 14px; font-weight: 700; }
.field-title > b { font-size: 18px; font-weight: 650; }
.field-title > small { color: var(--body); font-size: 14px; }

.choice-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-chips button,
.lf-chip {
  min-height: 44px;
  padding: 0 16px;
  background: #f5fafc;
  border: 1px solid #dfeff7;
  border-radius: var(--radius-s);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.choice-chips button:hover,
.choice-chips button.active,
.choice-chips button[aria-pressed="true"],
.lf-chip.active {
  background: #e7f3f9;
  border-color: #72b4d5;
  color: var(--blue);
}

.field-error,
.submit-status,
.time-help { margin-top: 8px; color: #5a6b84; font-size: 14px; }

.form-grid,
.partner-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field { display: flex; min-width: 0; flex-direction: column; gap: 8px; }
.field.wide { grid-column: 1 / -1; }
.field > span { font-size: 14px; font-weight: 600; }
.field i { color: #d64c4c; font-style: normal; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #cddae4;
  border-radius: var(--radius-s);
  outline: 0;
  font-size: 16px;
  transition: border .2s, box-shadow .2s;
}
.field textarea { min-height: 112px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue-cta);
  box-shadow: 0 0 0 4px rgba(10,118,192,.09);
}

.date-field,
.time-range { display: flex; align-items: center; gap: 8px; }
.date-field output { flex: none; color: var(--blue); font-size: 14px; }
.time-range input { min-width: 0; }

.consent {
  position: relative;
  display: block;
  margin-top: 24px;
  padding: 16px;
  background: var(--canvas);
  border-radius: var(--radius-s);
  color: #62748b;
  font-size: 14px;
  line-height: 1.6;
}
.consent input {
  position: absolute;
  z-index: 1;
  left: 4px; top: 4px;
  width: 44px; height: 44px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.consent label {
  position: relative;
  display: block;
  min-height: 44px;
  padding-left: 36px;
  cursor: pointer;
}
.consent label::before {
  content: "";
  position: absolute;
  left: 0; top: 2px;
  width: 20px; height: 20px;
  background: #fff;
  border: 1px solid #b9cbd8;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(30,65,90,.06);
}
.consent input:checked + label::before {
  background: var(--blue);
  border-color: var(--blue);
}
.consent input:checked + label::after {
  content: "";
  position: absolute;
  left: 6px; top: 7px;
  width: 7px; height: 4px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.consent input:focus-visible + label::before {
  outline: 3px solid rgba(10,118,192,.32);
  outline-offset: 3px;
}
.consent a { color: var(--blue); font-weight: 700; text-decoration: underline; }

.form-actions,
.partner-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.form-actions .button { width: 100%; padding-inline: 12px; }

.copy-button {
  min-height: 52px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid #cfdce6;
  border-radius: var(--radius-s);
  cursor: pointer;
  font-weight: 650;
}

.lead-success {
  padding: 32px;
  background: #effaf6;
  border-radius: var(--radius-s);
}
.lead-success b { font-size: 20px; font-weight: 650; }

/* 토스트 알림 */
.toast {
  position: fixed;
  z-index: 999;
  right: 20px; bottom: 24px;
  max-width: min(400px, calc(100% - 40px));
  padding: 16px 20px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-l);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: .25s var(--ease);
}
.toast.show { opacity: 1; transform: none; }


/* ──────────────────────────────────────────────────────────────────────────────
   11. MATCHING
   ────────────────────────────────────────────────────────────────────────────── */
.matching { background: #fff !important; }

.matching-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: stretch;
}

.matching-visual {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-m);
  min-height: 420px;
  background: var(--sky);
}
.matching-visual img { width: 100%; height: 100%; object-fit: cover; }

.criterion-list {
  counter-reset: criterion;
  border-top: 1px solid var(--line);
}
.criterion-list li {
  counter-increment: criterion;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.criterion-list li::before {
  content: '0' counter(criterion);
  grid-row: 1 / 3;
  color: var(--blue-cta);
  font-size: 14px;
  font-weight: 700;
}
.criterion-list b { font-size: 18px; font-weight: 650; }
.criterion-list span { color: var(--body); font-size: 14px; }
.matching-cta { margin-top: 32px; }


/* ──────────────────────────────────────────────────────────────────────────────
   12. PROCESS
   ────────────────────────────────────────────────────────────────────────────── */
.process { background: var(--canvas) !important; }

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 48px;
  background: var(--line);
  grid-auto-rows: 1fr;
}
.process-grid li {
  position: relative;
  min-height: 240px;
  padding: 32px;
  background: #fff;
}
.process-number { color: var(--blue); font-size: 14px; font-weight: 700; }
.process-symbol { display: none; }
.process-grid h3 { margin-top: 36px; font-size: 20px; font-weight: 650; }
.process-grid p { margin-top: 12px; color: var(--body); font-size: 14px; line-height: 1.75; }

.principle-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 32px;
  color: #60738a;
  font-size: 14px;
}
.principle-bar b { color: var(--ink); font-weight: 650; }
.principle-bar span::before {
  content: '\2713';
  margin-right: 8px;
  color: var(--success);
  font-weight: 800;
}


/* ──────────────────────────────────────────────────────────────────────────────
   13. PRICING
   ────────────────────────────────────────────────────────────────────────────── */
.pricing { background: #fff !important; }

.cost-board {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  align-items: stretch;
}
.cost-case {
  padding: 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
.cost-case.accent { background: #f5fafc; border-color: #cfe4ef; }

.cost-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
}
.cost-title span { color: var(--blue); font-size: 14px; font-weight: 700; }
.cost-title b { font-size: 20px; font-weight: 650; text-align: right; }

.cost-case li {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.cost-case li span { color: var(--body); font-size: 14px; }
.cost-case li b { font-size: 14px; font-weight: 550; }

.legal-note {
  max-width: 840px;
  margin: 28px auto 0;
  color: #65768d;
  font-size: 14px;
  text-align: center;
}


/* ──────────────────────────────────────────────────────────────────────────────
   14. TOOLS
   ────────────────────────────────────────────────────────────────────────────── */
.tools { background: var(--canvas) !important; }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  grid-auto-rows: 1fr;
}
.tool-card {
  display: flex;
  min-height: 268px;
  flex-direction: column;
  padding: 32px;
  background: #fff;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-s);
  transition: transform .25s var(--ease), box-shadow .25s;
}
.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-m);
}
.tool-card > span { color: var(--blue); font-size: 14px; font-weight: 700; }
.tool-card > b { margin-top: 32px; font-size: 20px; font-weight: 650; }
.tool-card > p { margin-top: 12px; color: var(--body); font-size: 14px; }
.tool-card > em {
  margin-top: auto;
  color: var(--blue);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

.primary-tool {
  background: linear-gradient(145deg, #075f96, #0A76C0);
  color: #fff;
}
.primary-tool > span,
.primary-tool > p,
.primary-tool > em { color: rgba(255,255,255,.94); }


/* ──────────────────────────────────────────────────────────────────────────────
   15. INSIGHTS
   ────────────────────────────────────────────────────────────────────────────── */
.insights { background: #fff !important; }

.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  grid-auto-rows: 1fr;
}
.insight-card {
  display: flex;
  min-height: 256px;
  flex-direction: column;
  padding: 28px 0;
  border-top: 2px solid var(--ink);
  transition: border-color .2s, transform .2s var(--ease);
}
.insight-card:hover {
  border-color: var(--blue-cta);
  transform: translateY(-4px);
}
.insight-card > span { color: var(--blue); font-size: 14px; font-weight: 700; }
.insight-card h3 { margin-top: 32px; font-size: 20px; font-weight: 650; line-height: 1.4; }
.insight-card p { margin-top: 12px; color: var(--body); font-size: 14px; }
.insight-card b { margin-top: auto; color: var(--blue); font-size: 14px; font-weight: 700; }


/* ──────────────────────────────────────────────────────────────────────────────
   16. FAQ
   ────────────────────────────────────────────────────────────────────────────── */
.faq { background: #fff !important; }

.faq-grid {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: 64px;
  align-items: start;
}

.faq-head { position: sticky; top: 116px; }
.faq-head h2 {
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.04em;
}
.faq-head > p:not(.eyebrow) { margin: 16px 0 28px; color: var(--body); }

.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+';
  color: var(--blue);
  font-size: 24px;
  font-weight: 300;
  transition: transform .2s;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p {
  padding: 0 44px 24px 0;
  color: var(--body);
  font-size: 14px;
}
.faq-list summary > span { display: none; }


/* ──────────────────────────────────────────────────────────────────────────────
   17. PARTNERSHIP
   ────────────────────────────────────────────────────────────────────────────── */
.partnership { background: #fff !important; }

.partner-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: stretch;
}

.partner-copy { padding: 36px 36px 36px 0; }
.partner-copy h2 {
  max-width: 700px;
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.04em;
}
.partner-copy > p:not(.eyebrow) { max-width: 680px; margin-top: 20px; color: var(--body); }

.partner-values {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 28px;
  color: #526a7c;
  font-size: 14px;
}
.partner-values span::before {
  content: '\2713';
  margin-right: 8px;
  color: var(--success);
  font-weight: 800;
}

.partner-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 36px;
  background: var(--sky);
  border-radius: var(--radius-m);
}
.partner-card small { color: var(--blue); font-weight: 700; }
.partner-card > b { margin-top: 16px; font-size: 20px; font-weight: 650; word-break: break-all; }
.partner-card p { margin: 12px 0 24px; color: var(--body); font-size: 14px; }

.partner-inquiry {
  grid-column: 1 / -1;
  margin-top: 12px;
  padding-top: 1px;
  border-top: 1px solid var(--line);
}
.partner-inquiry summary { padding: 24px 4px; cursor: pointer; font-weight: 650; }
.partner-inquiry[open] > div { padding: 32px 0; }


/* ──────────────────────────────────────────────────────────────────────────────
   18. SITE FOOTER
   ────────────────────────────────────────────────────────────────────────────── */
.site-footer {
  padding: 64px 0 28px;
  background: #eff6fa;
  color: #526a7c;
  font-size: 14px;
}

.footer-top {
  display: grid;
  grid-template-columns: .85fr 1.7fr .95fr;
  gap: 48px;
  padding-bottom: 36px;
}
.footer-brand p { margin-top: 16px; color: #5a6b84; }

.business-info dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 24px;
  margin: 0;
}
.business-info dl > div:last-child { grid-column: 1 / -1; }
.business-info dt { color: var(--body); font-size: 14px; }
.business-info dd { margin: 4px 0 0; color: #31455d; font-weight: 550; }

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 28px;
  border-left: 1px solid #cbdce7;
}
.footer-contact b { color: var(--ink); font-weight: 650; }
.footer-contact a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--blue);
  font-weight: 650;
}

.footer-notice {
  padding: 24px 0;
  border-top: 1px solid #cbdce7;
  border-bottom: 1px solid #cbdce7;
}

.footer-links { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 16px 0; }
.footer-links a { display: inline-flex; min-height: 44px; align-items: center; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid #cbdce7;
  font-size: 14px;
}


/* ──────────────────────────────────────────────────────────────────────────────
   19. CONTACT DOCK (하단 CTA 바)
   ────────────────────────────────────────────────────────────────────────────── */
.sb-contact-dock { display: none; }


/* ──────────────────────────────────────────────────────────────────────────────
   20. RIGHT RAIL (우측 고정 상담 패널)
   ────────────────────────────────────────────────────────────────────────────── */
.sb-rail {
  position: fixed;
  right: 0; top: 50%;
  transform: translate(calc(100% + 8px), -50%);
  z-index: 960;
  width: 296px;
  display: flex;
  align-items: stretch;
  transition: transform .42s var(--ease);
  font-family: inherit;
}
.sb-rail.is-in { transform: translate(0, -50%); }
.sb-rail.is-in.is-folded { transform: translate(calc(100% - 44px), -50%); }

/* 접기 손잡이 */
.sb-rail-toggle {
  flex: 0 0 44px;
  width: 44px;
  border: 0;
  cursor: pointer;
  padding: 0;
  background: linear-gradient(135deg, var(--blue-cta), var(--blue));
  color: #fff;
  border-radius: var(--radius-m) 0 0 var(--radius-m);
  box-shadow: -6px 0 18px rgba(8,26,45,.16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sb-rail-chev {
  font-size: 22px;
  line-height: 1;
  transition: transform .42s var(--ease);
}
.sb-rail.is-folded .sb-rail-chev { transform: rotate(180deg); }
.sb-rail-toggle::after {
  content: "\C0C1\B2F4\C2E0\CCAD";      /* 상담신청 */
  position: absolute;
  writing-mode: vertical-rl;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  margin-top: 72px;
  opacity: 0;
  transition: opacity .3s ease;
}
.sb-rail.is-folded .sb-rail-toggle::after { opacity: 1; }
.sb-rail.is-folded .sb-rail-chev { margin-bottom: 64px; }

.sb-rail-body {
  flex: 1 1 auto;
  min-width: 0;
  background: linear-gradient(180deg, #fff, var(--canvas));
  border: 1px solid var(--line);
  border-right: 0;
  box-shadow: -8px 0 32px rgba(8,26,45,.14);
  padding: 20px 16px 16px;
}
.sb-rail-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
.sb-rail-sub { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--body); }
.sb-rail-f { display: block; margin-bottom: 8px; }
.sb-rail-f input {
  width: 100%; height: 44px;
  padding: 0 12px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid #C3D6E6;
  border-radius: var(--radius-s);
}
.sb-rail-f input::placeholder { color: var(--body); font-weight: 500; }
.sb-rail-f input:focus { outline: 2px solid var(--blue-cta); outline-offset: 1px; }

.sb-rail-agree {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0;
  font-size: 14px;
  color: var(--body);
}
.sb-rail-agree input { width: 18px; height: 18px; accent-color: var(--blue-cta); flex: 0 0 auto; }
.sb-rail-agree a { color: var(--blue); text-decoration: underline; }

.sb-rail-go {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: var(--radius-s);
  cursor: pointer;
  background: linear-gradient(135deg, var(--blue-cta), var(--blue));
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  box-shadow: var(--shadow-m);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.sb-rail-go:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(10,118,192,.32); }
.sb-rail-go:active { transform: translateY(0); }
.sb-rail-note { margin: 8px 0 0; font-size: 14px; color: var(--body); text-align: center; }


/* ──────────────────────────────────────────────────────────────────────────────
   21. SCROLL-REVEAL ANIMATION
   ────────────────────────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.visible,
.reveal.is-visible { opacity: 1; transform: none; }

/* 그리드 내 순차 딜레이 */
.category-grid .reveal:nth-child(2),
.process-grid .reveal:nth-child(2),
.tool-grid .reveal:nth-child(2),
.insight-grid .reveal:nth-child(2) { transition-delay: 60ms; }

.category-grid .reveal:nth-child(3),
.process-grid .reveal:nth-child(3),
.tool-grid .reveal:nth-child(3),
.insight-grid .reveal:nth-child(3) { transition-delay: 120ms; }

.category-grid .reveal:nth-child(4) { transition-delay: 180ms; }

/* v43 데이터 기반 리빌 호환 */
body.sb-motion-ready [data-sb43-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity .52s var(--ease), transform .52s var(--ease);
  transition-delay: var(--sb43-delay, 0ms);
}
body.sb-motion-ready [data-sb43-reveal="soft"] { transform: translate3d(0, 12px, 0); }
body.sb-motion-ready [data-sb43-reveal="image"] { transform: scale(.985); transform-origin: center; }
body.sb-motion-ready [data-sb43-reveal].visible,
body.sb-motion-ready [data-sb43-reveal].is-visible { opacity: 1; transform: none; }

/* v45/v46 리빌 호환 */
.sb45-reveal,
.sb46-motion {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.sb45-reveal.is-visible,
.sb46-motion.is-visible { opacity: 1; transform: none; }


/* ──────────────────────────────────────────────────────────────────────────────
   22. KEYFRAME ANIMATIONS
   ────────────────────────────────────────────────────────────────────────────── */
@keyframes brand-arrive {
  from { opacity: 0; transform: translateY(-12px) rotate(-5deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes brand-sheen {
  from { transform: translateX(-80%) rotate(12deg); }
  to   { transform: translateX(280%) rotate(12deg); }
}
@keyframes hero-photo-in {
  from { opacity: 0; transform: translateX(32px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes cta-glint {
  from { left: -42%; }
  to   { left: 132%; }
}
@keyframes condition-row-in {
  from { opacity: .35; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes condition-intent-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(10,118,192,0); }
  45%      { box-shadow: 0 0 0 8px rgba(10,118,192,.18); }
}
@keyframes sb45-dock-in {
  from { transform: translateY(16px) scale(.97); opacity: .4; }
  to   { transform: none; opacity: 1; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — 1080px
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  :root { --shell: min(100% - 40px, 980px); }

  .desktop-nav { gap: 16px; }
  .desktop-nav a { font-size: 14px; }

  .hero-grid { min-height: 580px; }
  .hero-copy { min-height: 580px; }
  .hero h1 { font-size: 44px; }

  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .service-body { min-height: 220px; }
  .matching-grid { grid-template-columns: 1fr 1fr; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — 820px (주 모바일 분기점)
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
  :root { --shell: calc(100% - 40px); }
  html { scroll-padding-top: 68px; }

  /* 헤더 모바일 */
  .site-header { height: 68px; }
  .brand-type b { font-size: 18px; }
  .brand-mark { width: 36px; height: 36px; }
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle {
    display: grid;
    width: 44px; height: 44px;
    place-content: center;
    gap: 8px;
    margin-left: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
  }
  .menu-toggle span { display: block; width: 20px; height: 1.5px; background: var(--ink); }
  .mobile-menu {
    position: absolute;
    left: 0; right: 0; top: 68px;
    padding: 16px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-m);
  }
  .mobile-menu:not([hidden]) { display: grid; gap: 4px; }
  .mobile-menu a { padding: 12px 8px; font-weight: 600; min-height: 44px; }

  /* 섹션 공통 */
  .section { padding: 72px 0; }
  .split-head { grid-template-columns: 1fr; gap: 16px; }
  .section-head { margin-bottom: 32px; }
  .section-head h2 { font-size: clamp(24px, 6vw, 32px); }

  /* 히어로 모바일 — 단일 열, 이미지가 텍스트 위 */
  .hero {
    padding: 32px 0 48px;
    background: linear-gradient(180deg, #f2f8fb, #fff 45%);
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .hero-grid::after { display: none; }
  .hero-copy {
    grid-row: 2;
    width: auto;
    min-height: 0;
    padding: 0;
  }
  .hero h1 { font-size: clamp(32px, 8vw, 40px); }
  .hero-visual {
    position: relative;
    inset: auto;
    grid-row: 1;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-m);
  }
  .hero-actions { margin-top: 24px; }
  .hero-visual img { animation: none; }

  /* v46 시트 모바일 */
  .sb46-sheet {
    grid-row: 2;
    position: relative;
    right: auto; bottom: auto;
    width: 100%;
    margin: 12px 0 0;
    padding: 16px;
    border-color: var(--line);
    border-radius: var(--radius-m);
  }
  .sb46-sheet h2 { font-size: 18px; }

  /* 여정 바 */
  .sb45-journey ol {
    grid-template-columns: 1fr 1fr;
    padding: 16px;
  }
  .sb45-journey li { border-bottom: 1px solid var(--line); }
  .sb45-journey li:nth-child(even) { border-right: 1px solid var(--line); }

  /* 2열 그리드들 -> 1열 */
  .situation-layout,
  .matching-grid,
  .faq-grid,
  .quote-shell,
  .partner-shell { grid-template-columns: 1fr; }

  .situation-panel { min-height: 360px; }
  .faq-grid { gap: 40px; }
  .faq-head, .quote-intro { position: static; }
  .quote-intro { padding: 0; }
  .lead-form { padding: 28px; }

  .process-grid,
  .tool-grid,
  .insight-grid { grid-template-columns: 1fr; }
  .process-grid { gap: 16px; background: transparent; }
  .process-grid li { min-height: 192px; }
  .cost-board { grid-template-columns: 1fr; }
  .matching-visual { min-height: 0; aspect-ratio: 16 / 10; }

  /* 카테고리 스위처 모바일 */
  .sb46-category-stage { grid-template-columns: 1fr; min-height: 0; border-radius: 20px; }
  .sb46-category-switcher {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    overflow: visible;
    padding-bottom: 12px;
  }
  .sb46-category-switcher button {
    width: 100%;
    padding: 0 12px;
    white-space: normal;
    line-height: 1.25;
  }
  .sb46-category-photo { min-height: 0; aspect-ratio: 16 / 10; }
  .sb46-category-output { padding: 24px; }
  .sb46-category-output h3 { font-size: 24px; }

  /* 연락처 독 모바일 */
  .sb-contact-dock {
    right: 16px !important;
    left: 16px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
  }

  /* 우측 레일 숨김 */
  .sb-rail { display: none !important; }

  /* 푸터 */
  .footer-top { grid-template-columns: 1fr; }
  .footer-contact {
    padding: 24px 0 0;
    border-left: 0;
    border-top: 1px solid #cbdce7;
  }
  .business-info dl { grid-template-columns: repeat(2, 1fr); }
}


/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — 560px (작은 모바일)
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  :root { --shell: calc(100% - 40px); }
  body { font-size: 15px; }

  .section { padding: 56px 0; }
  .section-head h2 { font-size: clamp(22px, 7vw, 28px); line-height: 1.24; }
  .eyebrow { font-size: 14px; margin-bottom: 12px; }

  /* 히어로 소형 */
  .hero { padding-top: 24px; }
  .hero-grid { gap: 24px; }
  .hero h1 { font-size: clamp(28px, 8vw, 36px); line-height: 1.12; }
  .hero-lede { margin-top: 16px; font-size: 15px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .trust-strip { gap: 8px 16px; margin-top: 16px; font-size: 14px; }
  .hero-visual { aspect-ratio: 4 / 3; border-radius: 12px; }

  .hero-contact-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .hero-contact-actions .button:first-child { grid-column: 1 / -1; }
  .hero-category-link { justify-content: center; }

  /* 상황 탭 소형 */
  .situation-layout { gap: 24px; }
  .situation-tab { padding: 16px 4px; }
  .situation-tab:hover, .situation-tab.active { padding-left: 12px; }
  .situation-panel {
    min-height: 320px;
    padding: 24px;
    background-position: 56% center;
  }
  .situation-panel h3 { font-size: 24px; }
  .panel-route { flex-wrap: wrap; }

  /* 카테고리 카드 소형 — 2열 그리드 */
  .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .category-grid .reveal { opacity: 1; transform: none; }
  .service-card figure { aspect-ratio: 4 / 3; }
  .service-body { min-height: 208px; padding: 16px 12px; }
  .service-no { font-size: 14px; }
  .service-card h3 { font-size: 17px; line-height: 1.32; word-break: keep-all; }
  .service-card p { font-size: 14px; line-height: 1.55; }
  .service-links {
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
  }
  .service-links a,
  .service-links button {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    font-size: 14px;
  }
  .extension-row { align-items: flex-start; flex-direction: column; gap: 12px; }
  .extension-row > div { margin: 0; }

  /* 매칭 소형 */
  .matching-visual { aspect-ratio: 4 / 3; }
  .criterion-list li { padding: 20px 0; }
  .matching-cta { width: 100%; }

  /* 프로세스 소형 */
  .process-grid li { padding: 24px; }
  .principle-bar { align-items: flex-start; flex-direction: column; gap: 8px; }

  /* 가격 소형 */
  .cost-case { padding: 24px 20px; }
  .cost-title { flex-direction: column; }
  .cost-title b { text-align: left; }
  .cost-case li { grid-template-columns: 64px 1fr; }

  /* 도구·인사이트 소형 */
  .tool-card { min-height: 220px; padding: 24px; }
  .tool-card > b { margin-top: 24px; }
  .insight-card { min-height: 224px; }

  /* FAQ·견적·파트너 소형 */
  .faq-head h2,
  .quote-intro h2,
  .partner-copy h2 { font-size: clamp(24px, 7vw, 28px); }

  .lead-form { padding: 24px 16px; }
  .form-grid, .partner-form-grid { grid-template-columns: 1fr; }
  .field.wide { grid-column: auto; }
  .form-actions, .partner-actions { grid-template-columns: 1fr; }
  .copy-button { width: 100%; }
  .date-field { align-items: flex-start; flex-direction: column; }
  .time-range { display: grid; grid-template-columns: 1fr auto 1fr; }

  .partner-copy { padding: 0; }
  .partner-card { padding: 28px 20px; }
  .partner-values { align-items: flex-start; flex-direction: column; gap: 8px; }

  /* 견적 빌더 소형 */
  .condition-builder { grid-template-columns: 1fr; gap: 16px; }
  .condition-controls, .condition-sheet { padding: 20px 16px; border-radius: 12px; }
  .condition-step + .condition-step { margin-top: 20px; }
  .condition-options, .condition-options.categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .condition-option { min-height: 44px; padding: 8px 8px; font-size: 14px; }
  .condition-inline { grid-template-columns: 1fr; }
  .condition-sheet-head h3 { font-size: 20px; }
  .condition-sheet-state { display: none; }
  .condition-row { grid-template-columns: 36px 72px 1fr; gap: 8px; padding: 16px 0; }
  .condition-row > span { width: 32px; height: 32px; }
  .condition-row b, .condition-row p { font-size: 14px; }
  .condition-questions { padding: 16px; }
  .condition-actions { grid-template-columns: 1fr 1fr; }
  .condition-actions .button:first-child { grid-column: 1 / -1; }
  .condition-sheet { order: 2; }

  /* 모바일 하단 연락처 독 (560 이하) */
  .sb-contact-dock {
    position: fixed;
    z-index: 1200;
    right: 12px; bottom: 12px; left: 12px;
    display: grid;
    grid-template-columns: 1fr;
    min-height: 56px;
    padding: 4px;
    border: 1px solid rgba(22,35,58,.12);
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    box-shadow: var(--shadow-l);
    backdrop-filter: blur(18px);
  }
  .sb-contact-dock a {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 8px;
    border-radius: 12px;
    color: var(--ink);
    text-align: center;
  }
  .sb-contact-dock b { font-size: 14px; font-weight: 800; white-space: nowrap; }
  .sb-contact-dock small {
    display: block;
    margin-top: 4px;
    color: var(--body);
    font-size: 14px;
  }
  .sb-contact-dock .sb-contact-request { background: var(--blue-cta); color: #fff; }
  .sb-contact-dock .sb-contact-request small { color: #dceefa; }
  .sb-contact-dock .sb-contact-kakao { background: #fee500; color: #191919; }
  .sb-contact-dock .sb-contact-kakao small { color: #514900; }

  /* 푸터 소형 */
  .business-info dl { grid-template-columns: 1fr; }
  .business-info dl > div:last-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
  .footer-links { gap: 12px 20px; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   RESPONSIVE — 태블릿 레일 (1180px)
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .sb-rail { width: 268px; }
  .sb-rail.is-in { transform: translate(calc(100% - 44px), -50%); }
  .sb-rail.is-in:not(.is-folded) { transform: translate(0, -50%); }
}


/* ══════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY — 모션 감소
   ══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  .reveal,
  .sb45-reveal,
  .sb46-motion,
  body.sb-motion-ready [data-sb43-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .sb-rail,
  .sb-rail-chev,
  .sb-rail-go,
  .condition-option {
    transition: none !important;
  }
  .sb-rail-go:hover { transform: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════════════════════════ */
@media print {
  .reveal,
  .sb45-reveal,
  .sb46-motion,
  [data-sb43-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .sb-rail,
  .sb-contact-dock,
  .menu-toggle,
  .mobile-menu { display: none !important; }
}

/* v64: 비용 구조 도해 — 그림이 먼저 설명하고, 아래 목록이 상세를 받친다 */
.cost-figures{display:grid;gap:20px;margin:0 0 24px}
.cost-figure{margin:0;overflow:hidden;border:1px solid #d7e3ea;border-radius:18px;background:#fff;box-shadow:0 12px 30px rgba(19,67,98,.06)}
.cost-figure img{width:100%;height:auto;display:block}
@media(max-width:780px){.cost-figures{gap:16px;margin-bottom:20px}.cost-figure{border-radius:14px}}
.cost-figure .cost-svg{width:100%;height:auto;display:block}
.flow-figure{margin:0 0 24px}
@media(max-width:780px){.flow-figure{margin-bottom:18px}}

/* v67: 도해가 주역, 같은 내용의 표는 필요할 때만 펼친다 */
.cost-detail{margin:0}
.cost-detail>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
 min-height:48px;padding:0 20px;border:1px solid #cbdce7;border-radius:12px;background:#fff;
 color:#075f9c;font-size:14px;font-weight:760;transition:background .2s ease,border-color .2s ease}
.cost-detail>summary::-webkit-details-marker{display:none}
.cost-detail>summary::after{content:"+";font-size:17px;font-weight:800;line-height:1}
.cost-detail[open]>summary::after{content:"−"}
.cost-detail>summary:hover{background:#eaf7fc;border-color:#075f9c}
.cost-detail>summary:focus-visible{outline:3px solid #0ea5e9;outline-offset:3px}
.cost-detail[open]>summary{margin-bottom:16px}

/* v67: 표 제목이 주역 — 배지 옆에서 좌측부터 읽히게 한다 */
.cost-detail .cost-title{grid-template-columns:auto minmax(0,1fr)}
.cost-detail .cost-title b{text-align:left;justify-self:start}
.trust-figure{margin:0 0 24px}
@media(max-width:780px){.trust-figure{margin-bottom:18px}}