/* ==========================================================================
   totalclean site-v2 — layout.css
   페이지 껍데기(헤더/본문/푸터/섹션)와 반응형 그리드
   ========================================================================== */

.shell {
  width: min(var(--shell), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
}

.main {
  display: block;
}

/* ---------- 헤더 ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  color: var(--c-ink);
}

.brand:hover {
  text-decoration: none;
  color: var(--c-ink);
}

.brand__mark {
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--c-brand-700);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brand__mark--sm {
  width: 28px;
  height: 28px;
  font-size: var(--fs-xs);
}

.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.2;
}

.brand__en {
  display: block;
  margin-top: 2px;
  color: var(--c-muted);
  font-size: 10px;
  letter-spacing: var(--ls-wide);
}

.nav {
  margin-left: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.nav__link {
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.nav__item.is-current .nav__link {
  color: var(--c-brand-600);
  box-shadow: inset 0 -2px 0 var(--c-brand-500);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.nav-drawer {
  display: none;
  position: relative;
}

.nav-drawer__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.nav-drawer__toggle::-webkit-details-marker {
  display: none;
}

.nav-drawer__bars,
.nav-drawer__bars::before,
.nav-drawer__bars::after {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--c-brand-700);
}

.nav-drawer__bars {
  position: relative;
}

.nav-drawer__bars::before,
.nav-drawer__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-drawer__bars::before {
  top: -5px;
}

.nav-drawer__bars::after {
  top: 5px;
}

.nav-drawer__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-3));
  display: grid;
  gap: var(--space-3);
  width: min(320px, calc(100vw - 48px));
  padding: var(--space-5);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-md);
}

.nav-drawer__panel .nav__list {
  display: grid;
  gap: 2px;
}

.nav-drawer__panel .nav__link {
  display: block;
  padding: var(--space-3) var(--space-2);
  border-bottom: var(--border);
  font-size: var(--fs-base);
}

/* ---------- 히어로 ---------- */

.hero {
  padding: var(--space-8) 0 var(--space-6);
  background:
    radial-gradient(120% 90% at 88% 0%, #efe4d8 0%, rgba(239, 228, 216, 0) 58%),
    var(--c-canvas);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-8);
  align-items: center;
}

.hero__title {
  margin: var(--space-4) 0 var(--space-5);
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}

.hero__title-line {
  display: block;
}

.hero__title-line--accent {
  color: var(--c-brand-600);
}

.hero__lead {
  max-width: 44ch;
  color: var(--c-body);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
  color: var(--c-muted);
  font-size: var(--fs-sm);
}

.hero__fact::before {
  content: "✓";
  margin-right: var(--space-2);
  color: var(--c-brand-500);
  font-weight: 700;
}

.hero__panel {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--c-brand-800) 0%, var(--c-brand-900) 100%);
  color: var(--c-on-dark);
  box-shadow: var(--shadow-lg);
}

.hero__panel-title {
  color: #fff;
  font-size: var(--fs-2xl);
}

.hero__panel-note {
  color: var(--c-on-dark-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* ---------- 페이지 히어로(약관·개인정보) ---------- */

.page-hero {
  padding: var(--space-7) 0 var(--space-6);
  background: var(--c-surface);
  border-bottom: var(--border);
}

.page-hero__title {
  margin: var(--space-3) 0 var(--space-4);
  font-size: clamp(30px, 3.4vw, 44px);
}

.page-hero__lead {
  max-width: 72ch;
  color: var(--c-body);
  line-height: var(--lh-relaxed);
}

/* ---------- 지역 히어로 ---------- */

.region-hero {
  padding: var(--space-7) 0 var(--space-8);
  background:
    radial-gradient(110% 80% at 10% 0%, #e6e2dc 0%, rgba(230, 226, 220, 0) 55%),
    var(--c-canvas);
}

.region-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-7);
  align-items: end;
  margin-top: var(--space-5);
}

.region-hero__title {
  margin: var(--space-4) 0 var(--space-5);
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: var(--ls-display);
}

.region-hero__title-line {
  display: block;
}

.region-hero__title-line--accent {
  color: var(--c-brand-600);
}

.region-hero__lead {
  max-width: 58ch;
  line-height: var(--lh-relaxed);
}

.region-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.region-hero__facts {
  display: grid;
  gap: var(--space-2);
}

.region-hero__note {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border);
  color: var(--c-muted);
  font-size: var(--fs-sm);
}

.region-hero__fact {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--c-brand-500);
  background: var(--c-surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--c-ink);
  font-weight: 700;
}

/* ---------- 섹션 ---------- */

.section {
  padding: var(--section-y) 0;
}

.section--tint {
  background: var(--c-surface-alt);
}

.section--quote {
  background: var(--c-surface);
  border-top: var(--border);
}

.section--area {
  background: linear-gradient(150deg, var(--c-brand-800) 0%, var(--c-brand-900) 100%);
  color: var(--c-on-dark);
}

.section__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-8);
  align-items: start;
}

.section__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--c-surface-alt);
}

.section__note {
  max-width: 76ch;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.section__note--wide {
  margin-top: var(--space-5);
}

/* ---------- 요약 스트립 ---------- */

.facts {
  padding: var(--space-6) 0;
  background: var(--c-surface);
  border-top: var(--border);
  border-bottom: var(--border);
}

.facts__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.facts__item {
  display: grid;
  gap: var(--space-1);
  padding-left: var(--space-4);
  border-left: 2px solid var(--c-brand-100);
}

.facts__key {
  color: var(--c-muted);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
}

.facts__item:first-child .facts__key {
  color: var(--c-accent);
}

.facts__value {
  color: var(--c-ink);
  font-size: var(--fs-base);
}

.facts__note {
  color: var(--c-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

/* ---------- 가격 밴드 ---------- */

.price-band {
  padding: var(--space-6) 0;
  background: var(--c-brand-900);
  color: var(--c-on-dark);
}

.price-band__inner {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.price-band__value {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: #fff;
}

.price-band__note {
  max-width: 70ch;
  color: var(--c-on-dark-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* ---------- 영역(지역) 섹션 ---------- */

.area__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-8);
  align-items: center;
}

.area__lead {
  margin-top: var(--space-5);
  color: var(--c-on-dark);
  line-height: var(--lh-relaxed);
}

.area__note {
  margin-top: var(--space-4);
  color: var(--c-on-dark-muted);
  font-size: var(--fs-sm);
}

.area__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.area__tag {
  padding: var(--space-3) var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  color: var(--c-on-dark);
  font-size: var(--fs-sm);
}

.area__tag:first-child {
  border-color: transparent;
  background: var(--c-brand-100);
  color: var(--c-brand-900);
  font-weight: 700;
}

/* ---------- 견적 영역 ---------- */

.quote__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr);
  gap: var(--space-7);
  align-items: start;
}

.quote__aside {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--c-surface-alt);
}

/* ---------- 약관(legal) ---------- */

.legal {
  padding: var(--space-8) 0 var(--space-8);
}

.legal__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
  gap: var(--space-8);
  align-items: start;
}

.legal__aside {
  position: sticky;
  top: 96px;
  padding: var(--space-5);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
}

.legal__aside-title {
  margin-bottom: var(--space-3);
  font-size: var(--fs-md);
}

.legal__toc-list {
  display: grid;
  gap: var(--space-1);
}

.legal__toc-item a {
  display: block;
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--c-line);
  color: var(--c-body);
  font-size: var(--fs-sm);
}

.legal__toc-item a:hover {
  color: var(--c-brand-600);
}

.legal__body {
  display: grid;
  gap: var(--space-5);
}

/* ---------- 지역 범위 ---------- */

.scope__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.scope__col {
  padding: var(--space-6);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
}

.scope__col--basic {
  border-color: var(--c-brand-500);
}

.scope__title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-lg);
}

/* ---------- 푸터 ---------- */

.site-footer {
  padding: var(--space-8) 0 var(--space-6);
  background: var(--c-brand-900);
  color: var(--c-on-dark-muted);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.site-footer__brandline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
}

.site-footer__brandline small {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: var(--ls-wide);
  color: var(--c-on-dark-muted);
}

.site-footer__lead {
  margin-top: var(--space-4);
  max-width: 48ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.site-footer__title {
  margin-bottom: var(--space-4);
  color: #fff;
  font-size: var(--fs-md);
}

.site-footer__links {
  display: grid;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}

.site-footer__links a {
  color: var(--c-on-dark);
}

.site-footer__links a:hover {
  color: #fff;
}

.site-footer__note {
  margin-top: var(--space-4);
  font-size: var(--fs-xs);
}

.site-footer__business {
  padding-top: var(--space-5);
}

.site-footer__business-line {
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--c-on-dark-muted);
}

.site-footer__copy {
  margin-top: var(--space-4);
  font-size: var(--fs-xs);
}

/* ---------- 하단 고정 상담 바 ---------- */

.call-bar {
  display: none;
}

/* ---------- 반응형 ---------- */

@media (max-width: 1080px) {
  .hero__grid,
  .region-hero__grid,
  .area__grid,
  .quote__grid,
  .section__grid,
  .legal__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .legal__aside {
    position: static;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  :root {
    --section-y: 64px;
  }

  .nav,
  .site-header__actions {
    display: none;
  }

  .nav-drawer {
    display: block;
    margin-left: auto;
  }

  .facts__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  :root {
    --section-y: 56px;
    --gutter: 20px;
  }

  body {
    padding-bottom: 88px;
  }

  .hero {
    padding-top: var(--space-6);
  }

  .hero__panel {
    padding: var(--space-6) var(--space-5);
  }

  .scope__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .call-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--c-brand-800);
    color: var(--c-on-dark);
    box-shadow: 0 -8px 24px rgba(10, 47, 44, 0.24);
  }
}

@media (max-width: 480px) {
  .facts__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__actions .btn,
  .region-hero__actions .btn,
  .cta-band__actions .btn {
    flex: 1 1 100%;
  }
}

/* 데스크톱에서 푸터 아래 여백 확보(고정 콜바 없음) */
@media (min-width: 721px) {
  .site-footer {
    padding-bottom: var(--space-8);
  }
}