/* main.css — 문찍힘수리 컴포넌트 스타일
   하드코딩 #hex/rgb() 0건. 그라디언트 0건.
   box-shadow: .ba-card 한 곳에만. */

/* ── 리셋 ─────────────────────────────────────────────────── */
html { max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; background: none; border: none; cursor: pointer; }
table  { border-collapse: collapse; width: 100%; }
a      { color: var(--brick); text-decoration: underline; text-underline-offset: 3px; }
a:active { color: var(--brick-deep); }

body {
  padding-bottom: 76px; /* 모바일 CTA 바 가림 방지 */
}
@media (min-width: 768px) {
  body { padding-bottom: 0; }
}

/* ── 헤더 ─────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  height: 64px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  z-index: 50;
  display: flex;
  align-items: center;
  transition: border-color 0.18s;
}
.site-header.is-scrolled { border-bottom-color: var(--line-2); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo {
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
  flex: none;
}

/* 데스크톱 네비 */
.site-nav { display: none; }
@media (min-width: 1024px) {
  .site-nav { display: flex; align-items: center; }
  .site-nav > ul { display: flex; align-items: center; gap: 2px; }
  .site-nav > ul > li > a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    color: var(--ink);
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    border-radius: var(--r);
    transition: background-color 0.18s;
  }
  .site-nav > ul > li > a:hover  { background: var(--mist); }
  .site-nav > ul > li > a:active { background: var(--brick-soft); color: var(--brick); }
  .site-nav > ul > li > a.nav-call-btn {
    background: var(--brick);
    color: hsl(0 0% 100%);
    font-weight: 700;
    border-radius: var(--r);
    padding: 0 20px;
    min-height: 40px;
    margin-left: 8px;
  }
  .site-nav > ul > li > a.nav-call-btn:hover { background: var(--brick-deep); }
  .site-nav > ul > li > a.nav-call-btn:active { background: var(--brick-deep); color: hsl(0 0% 100%); }
}

/* 드롭다운 */
.has-dropdown { position: relative; }
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 16px;
  color: var(--ink);
  font-weight: 500;
  font-size: 16px;
  border-radius: var(--r);
  transition: background-color 0.18s;
}
.nav-toggle::after {
  content: "";
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.18s;
}
.has-dropdown:hover .nav-toggle,
.nav-toggle[aria-expanded="true"] { background: var(--mist); }
.nav-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  min-width: 168px;
  overflow: hidden;
  z-index: 60;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.dropdown.is-open { display: block; }
.dropdown a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
  transition: background-color 0.18s;
}
.dropdown a:hover { background: var(--brick-soft); color: var(--brick); }

/* 햄버거 버튼 */
.burger {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 28px; height: 20px; padding: 0; flex-shrink: 0;
}
.burger span {
  display: block; height: 2px; background: var(--ink);
  border-radius: 2px; transition: transform .22s, opacity .22s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
@media (min-width: 1024px) { .burger { display: none; } }

/* 모바일 드로어 */
.mobile-nav {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--card); border-bottom: 1px solid var(--line); z-index: 49;
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { padding: 6px 0 12px; }
.mobile-nav a {
  display: flex; align-items: center; min-height: 48px;
  padding: 0 24px; color: var(--ink); font-size: 16px;
  font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mobile-nav li:last-child a { border-bottom: none; }
.mobile-nav a:active { background: var(--brick-soft); }
.mobile-nav .mobile-nav-call { color: var(--brick); font-weight: 700; }
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }

/* ── 히어로 공통 ────────────────────────────────────────────── */
.hero { width: 100%; overflow: hidden; }

/* 풀블리드 (/) */
.hero--fullbleed {
  position: relative;
  min-height: min(86vh, 700px);
  display: flex;
  align-items: center;
}
.hero--fullbleed .hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero--fullbleed .hero-scrim {
  position: absolute; inset: 0;
  background: hsl(14 28% 12% / 0);
  z-index: 1;
}
.hero--fullbleed .hero-content {
  position: relative; z-index: 2;
  padding: 60px 20px;
  max-width: 1180px; width: 100%; margin-inline: auto;
}
@media (min-width: 768px) { .hero--fullbleed .hero-content { padding: 100px 32px; } }
.hero--fullbleed h1,
.hero--fullbleed .hero-sub { color: hsl(0 0% 100%); }
.hero--fullbleed .hero-sub { opacity: .88; margin-block: 18px 32px; }
.hero-cta-group { display: flex; flex-wrap: wrap; gap: 12px; }

/* 히어로 슬라이더 */
.hero-slides { position:absolute; inset:0; z-index:0; }
.hero-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease; }
.hero-slide.active { opacity:1; }

/* 스플릿 슬라이드 (/) */
.hero--split-slide {
  display: grid;
  grid-template-columns: 1fr;
  min-height: min(86vh, 700px);
}
@media (min-width: 768px) {
  .hero--split-slide { grid-template-columns: 1fr 1fr; }
}
.hero--split-slide .hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 20px;
  background: var(--brick-deep);
}
@media (min-width: 768px) {
  .hero--split-slide .hero-text { padding: 80px 48px; }
}
.hero--split-slide h1,
.hero--split-slide .hero-sub { color: hsl(0 0% 100%); }
.hero--split-slide .hero-sub { opacity: .88; margin-block: 18px 32px; }
.hero--split-slide .hero-slides-wrap {
  position: relative;
  overflow: hidden;
  min-height: min(86vh, 700px);
}
.hero--split-slide .hero-slides {
  position: static; /* img들이 wrap 기준으로 absolute 잡히도록 */
}
.hero-ghost {
  background: transparent;
  color: hsl(0 0% 100%);
  border-color: hsl(0 0% 100% / .5);
}
.hero-ghost:active { background: hsl(0 0% 100% / .1); border-color: hsl(0 0% 100%); }

/* 좌우 스플릿 (/nseo-1) */
.hero--split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .hero--split { grid-template-columns: 1fr 1fr; min-height: 480px; }
}
.hero--split .hero-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px 20px; background: var(--mist);
}
@media (min-width: 768px) { .hero--split .hero-text { padding: 80px 40px; } }
.hero--split .hero-text h1 { margin-block-end: 16px; }
.hero--split .hero-text .hero-sub { color: var(--ink-2); margin-block: 12px 28px; }
.hero--split .hero-img-wrap { overflow: hidden; }
.hero--split .hero-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
@media (min-width: 768px) {
  .hero--split .hero-img-wrap img { border-radius: 0 var(--r) var(--r) 0; }
}

/* 대형 타이포 (/nseo-2) */
.hero--typo {
  background: var(--mist);
  padding: 80px 20px;
  text-align: center;
}
@media (min-width: 768px) { .hero--typo { padding: 120px 32px; } }
.hero--typo h1 { font-size: clamp(33px, 7vw, 52px); }
.hero--typo .hero-sub { color: var(--ink-2); margin-block: 18px 32px; max-width: 640px; margin-inline: auto; }
.hero--typo .hero-cta-group { justify-content: center; }

/* 전후 대비 스플릿 (/nseo-3) */
.hero--ba-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 360px; }
@media (min-width: 768px) { .hero--ba-split { min-height: 480px; } }
.hero-half { position: relative; overflow: hidden; }
.hero-half img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-text-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px;
  background: hsl(14 28% 12% / .45);
}
.hero-text-overlay h1 { color: hsl(0 0% 100%); font-size: clamp(20px, 3.5vw, 32px); }
.hero-text-overlay .hero-sub { color: hsl(0 0% 88%); font-size: 15px; margin-block-start: 8px; }
.hero-label {
  font-size: 15px; font-weight: 600; letter-spacing: .1em;
  color: hsl(0 0% 100%); background: hsl(14 28% 12% / .7);
  padding: 4px 10px; border-radius: var(--r-chip);
  align-self: flex-start;
}

/* 보더 프레임 (/nseo-4) */
.hero--frame {
  padding: 60px 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper);
}
@media (min-width: 768px) { .hero--frame { padding: 100px 32px; } }
.frame-inner {
  border: 2px solid var(--brick);
  border-radius: var(--r);
  padding: 40px;
  max-width: 680px; width: 100%;
  text-align: center;
}
.frame-inner .hero-sub { color: var(--ink-2); margin-block: 14px 28px; }
.frame-inner .hero-cta-group { justify-content: center; }

/* 계단형 타이포 (/nseo-5) */
.hero--stairtype { padding: 80px 20px; background: var(--paper); }
@media (min-width: 768px) { .hero--stairtype { padding: 120px 32px; } }
.hero--stairtype h1 { line-height: 1.3; }
.stair-line { display: block; }
.stair-line:nth-child(2) { padding-inline-start: clamp(16px, 4vw, 32px); }
.stair-line:nth-child(3) { padding-inline-start: clamp(32px, 8vw, 64px); }
.hero--stairtype .hero-sub { color: var(--ink-2); margin-block: 20px 32px; }

/* 리스트형 (/services) */
.hero--list {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  padding: 60px 20px; background: var(--mist);
}
@media (min-width: 768px) {
  .hero--list { grid-template-columns: 1fr 1fr; align-items: start; padding: 80px 32px; }
}
.hero--list .hero-list-items { display: flex; flex-direction: column; gap: 10px; }
.hero--list .hero-list-items li {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-2); font-size: 16px;
}
.hero--list .hero-list-items li::before {
  content: ""; width: 8px; height: 8px; background: var(--amber); flex: none;
}

/* 중앙 미니멀 (/consulting) */
.hero--minimal { text-align: center; padding: 100px 20px; background: var(--paper); }
.hero--minimal .hero-sub { color: var(--ink-2); margin-block: 16px 32px; max-width: 560px; margin-inline: auto; }
.hero--minimal .hero-cta-group { justify-content: center; }

/* 통계 스트립 (/sitemap) */
.hero--stats { background: var(--mist); padding: 60px 20px; }
.hero--stats .hero-sub { color: var(--ink-2); margin-block: 14px 32px; }

/* ── 갤러리 ─────────────────────────────────────────────────── */
.gallery { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) { .gallery { gap: 16px; grid-template-columns: repeat(3, 1fr); } }

/* 드래그 전후 슬라이더 */
.ba-slider {
  position: relative; overflow: hidden;
  aspect-ratio: 1/1; border-radius: var(--r);
  cursor: col-resize; user-select: none; touch-action: pan-y;
}
.ba-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ba-img--before { clip-path: inset(0 50% 0 0); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; background: hsl(0 0% 100%);
  transform: translateX(-50%); pointer-events: none; z-index: 4;
  display: flex; align-items: center; justify-content: center;
}
.ba-handle-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: hsl(0 0% 100%); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: -2px;
  box-shadow: 0 2px 8px hsl(0 0% 0% / .3);
  flex-shrink: 0;
}
.ba-tag {
  position: absolute; bottom: 10px; z-index: 3;
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  padding: 3px 8px; border-radius: var(--r-chip);
  pointer-events: none;
}
.ba-tag--before { left: 10px; background: var(--mist); color: var(--ink-2); }
.ba-tag--after  { right: 10px; background: var(--moss-soft); color: var(--moss); }
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: col-resize; z-index: 5; margin: 0;
  -webkit-appearance: none; appearance: none;
}

/* 기존 ba-pair (다른 페이지 전후 비교용 유지) */
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: var(--r); overflow: hidden; cursor: pointer; }
.ba-img-box { aspect-ratio: 1/1; overflow: hidden; }
.ba-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-cap { font-size: 15px; font-weight: 600; letter-spacing: .1em; padding: 10px 12px; text-align: center; border-top: 1px solid var(--line); }
.ba-cap--before { background: var(--mist); color: var(--ink-2); }
.ba-cap--after  { background: var(--moss-soft); color: var(--moss); }
.ba-pair figure img { aspect-ratio: 1/1; object-fit: cover; width: 100%; display: block; }

/* 갤러리 라이트박스 */
.g-modal { display: none; position: fixed; inset: 0; background: hsl(0 0% 0% / .88); z-index: 9999; align-items: center; justify-content: center; padding: 16px; }
.g-modal.is-open { display: flex; }
.g-modal-body { display: flex; gap: 10px; max-width: 860px; width: 100%; max-height: 90vh; }
.g-modal-body figure { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.g-modal-body img { width: 100%; flex: 1; min-height: 0; object-fit: contain; display: block; border-radius: var(--r); }
.g-modal-body figcaption { text-align: center; padding: 8px 4px 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: #fff; }
.g-modal-close { position: fixed; top: 14px; right: 14px; background: hsl(0 0% 100% / .18); border: none; color: #fff; font-size: 18px; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }
@media (max-width: 599px) { .g-modal-body { flex-direction: column; max-height: 88vh; gap: 8px; } }

/* ── 신뢰 배지 ─────────────────────────────────────────────── */
.trust-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding-block: 40px;
}
@media (min-width: 768px) { .trust-strip { grid-template-columns: repeat(4, 1fr); } }
.trust-item { display: flex; align-items: flex-start; gap: 12px; }
.trust-icon { width: 24px; height: 24px; flex: none; color: var(--brick); }
.trust-item p { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.trust-item strong { display: block; color: var(--ink); font-weight: 600; font-size: 16px; margin-block-end: 2px; }

/* ── 진행 절차 ─────────────────────────────────────────────── */
.procedure {
  display: grid; grid-template-columns: 1fr; gap: 0;
}
@media (min-width: 768px) { .procedure { grid-template-columns: repeat(4, 1fr); } }
.proc-step {
  position: relative; padding: 28px 20px;
  border-bottom: 1px solid var(--line-2);
}
@media (min-width: 768px) {
  .proc-step { border-bottom: none; border-right: 1px solid var(--line-2); }
  .proc-step:last-child { border-right: none; }
}
.proc-num {
  font-size: 15px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--brick); margin-block-end: 10px;
}
.proc-step h3 { font-size: 17px; margin-block-end: 8px; }
.proc-step p  { font-size: 15px; color: var(--ink-2); margin: 0; }

/* ── 비용 테이블 ────────────────────────────────────────────── */
.cost-table { border-top: 2px solid var(--line-2); }
.cost-table th,
.cost-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
.cost-table th { font-weight: 600; color: var(--ink); width: 38%; }
.cost-table td { color: var(--ink-2); }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; padding: 14px 0;
  font-weight: 600; font-size: 16px;
  cursor: pointer; color: var(--ink);
  gap: 16px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--brick);
  flex: none;
  transition: transform 0.18s;
}
.faq-list details[open] summary::after { transform: rotate(180deg); }
.faq-body { padding-block: 0 18px; color: var(--ink-2); line-height: 1.85; }

/* ── CTA 밴드 ─────────────────────────────────────────────── */
.cta-band { background: var(--brick-soft); padding: 60px 20px; text-align: center; }
@media (min-width: 768px) { .cta-band { padding: 80px 32px; } }
.cta-band h2 { margin-block-end: 12px; }
.cta-band .band-desc { color: var(--ink-2); margin-block-end: 32px; max-width: 560px; margin-inline: auto; }
.cta-btn-group { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.cta-band--dark { background: var(--brick-deep); }
.cta-band--dark h2, .cta-band--dark .band-desc { color: hsl(0 0% 100%); }
.cta-band--dark .band-desc { opacity: .78; }

/* CTA 좌우 스플릿 (/nseo-2) */
.cta--split {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  background: var(--mist); padding: 60px 20px;
  border-radius: var(--r);
}
@media (min-width: 768px) {
  .cta--split { grid-template-columns: 1fr 1fr; align-items: center; padding: 60px 40px; }
}
.cta--split h2 { margin-block-end: 12px; }
.cta--split p   { color: var(--ink-2); margin-block-end: 0; }
.cta--split .cta-btn-group { justify-content: flex-start; }

/* CTA 고스트 블록 (/nseo-3) */
.cta--ghost {
  border: 2px solid var(--line-2);
  border-radius: var(--r);
  padding: 40px;
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
}
.cta--ghost h2 { margin-block-end: 12px; }
.cta--ghost p   { color: var(--ink-2); margin-block-end: 28px; }

/* CTA 2열 듀얼 (/nseo-4) */
.cta--dual { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 480px; margin-inline: auto; }

/* CTA 중앙 카드 박스 (/nseo-1) */
.cta-box--center {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 40px;
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}
.cta-box--center h2 { margin-block-end: 12px; }
.cta-box--center p   { color: var(--ink-2); margin-block-end: 28px; }
.cta-box--center .cta-btn-group { justify-content: center; }

/* CTA 슬림 좌측 정렬 (/sitemap) */
.cta--slim-left { text-align: left; }
.cta--slim-left .cta-btn-group { justify-content: flex-start; }

/* ── 모바일 하단 CTA 바 ─────────────────────────────────────── */
.cta-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  height: 64px;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--line-2);
  background: var(--card);
  z-index: 100;
  transition: transform 0.18s;
}
.cta-bar.is-hidden { transform: translateY(100%); }
@media (min-width: 768px) { .cta-bar { display: none; } }
.cta-bar .btn-primary { border-radius: 0; border: none; font-size: 15px; min-height: 100%; }
.cta-bar .btn-ghost   { border-radius: 0; border: none; border-left: 1px solid var(--line-2); font-size: 15px; min-height: 100%; }

/* ── 서비스 카드 ────────────────────────────────────────────── */
.service-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; text-decoration: none; color: var(--ink);
  gap: 12px;
}
.service-card:hover { color: var(--brick); border-color: var(--brick); background: var(--brick-soft); }
.service-card-title { font-weight: 600; font-size: 16px; }
.service-card-desc  { font-size: 15px; color: var(--ink-2); margin-block-start: 4px; }
.service-card-arrow { color: var(--brick); flex: none; }
.service-card::after { content: "→"; color: var(--brick); flex: none; font-size: 18px; }

/* ── 상담 사진 안내 3단계 ───────────────────────────────────── */
.photo-guide { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 768px) { .photo-guide { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.photo-guide-step { padding: 24px; }
.photo-guide-num { font-size: 15px; font-weight: 600; letter-spacing: 0.1em; color: var(--brick); margin-block-end: 10px; }
.photo-guide-step h3 { font-size: 17px; margin-block-end: 8px; }
.photo-guide-step p  { font-size: 15px; color: var(--ink-2); margin: 0; }

/* ── 푸터 ──────────────────────────────────────────────────── */
.site-footer { background: var(--brick-deep); padding: 14px 0; }
.footer-biz-row {
  display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center;
  font-size: 13px; color: hsl(0 0% 62%);
}
.footer-biz-row a { color: hsl(0 0% 78%); text-decoration: none; }
.footer-biz-row a:hover { color: hsl(0 0% 100%); }

/* ── 유틸리티 ──────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}
.text-center { text-align: center; }
.mb-8  { margin-block-end: 8px; }
.mb-12 { margin-block-end: 12px; }
.mb-16 { margin-block-end: 16px; }
.mb-20 { margin-block-end: 20px; }
.mb-24 { margin-block-end: 24px; }
.mb-32 { margin-block-end: 32px; }
.mb-48 { margin-block-end: 48px; }

/* ── 손상 유형 섹션 4열 (§7 전용 예외) ─────────────────────── */
.grid--4col {
  display: grid; gap: 14px; grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid--4col { gap: 20px; grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--4col { grid-template-columns: repeat(4, 1fr); }
}
.damage-card { padding: 24px; }
.damage-card h3 { font-size: 17px; margin-block-end: 8px; }
.damage-card p  { font-size: 15px; color: var(--ink-2); margin-block-end: 16px; }
.damage-card a  { font-size: 15px; font-weight: 600; }

/* 서비스 캐러셀 */
.svc-carousel-wrap { position:relative; overflow:hidden; }
.svc-carousel { display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
.svc-carousel::-webkit-scrollbar { display:none; }
.svc-card { flex:0 0 calc(50% - 10px); scroll-snap-align:start; text-decoration:none; color:inherit; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--card); display:flex; flex-direction:column; }
@media (min-width:1024px) { .svc-card { flex:0 0 calc(33.333% - 14px); } }
.svc-card-img img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.svc-grid { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:768px) { .svc-grid { grid-template-columns:repeat(3,1fr); } }

/* 모바일: 카드 정사각, 텍스트 오버레이 */
@media (max-width:767px) {
  .svc-card { position:relative; aspect-ratio:1/1; }
  .svc-card-img { position:absolute; inset:0; }
  .svc-card-img img { width:100%; height:100%; aspect-ratio:unset; }
  .svc-card-body { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,.72)); padding:28px 18px 18px; gap:4px; }
  .svc-card-body h3 { color:#fff; }
  .svc-card-body p { color:rgba(255,255,255,.82); }
}

.svc-card-body { padding:16px 18px 20px; flex:1; display:flex; flex-direction:column; gap:8px; }
.svc-card-body h3 { font-size:17px; font-weight:700; margin:0; color:var(--ink); }
.svc-card-body p { font-size:14px; color:var(--ink-2); margin:0; flex:1; }
.svc-card-arrow { font-size:13px; font-weight:600; color:var(--brick); }
.svc-carousel-nav { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.svc-prev, .svc-next { border:1px solid var(--line); background:var(--card); border-radius:50%; width:40px; height:40px; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; }
.svc-prev:hover, .svc-next:hover { background:var(--brick); color:#fff; border-color:var(--brick); }

/* 관련 페이지 카드 */
.related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-top:24px; }
.related-card { display:block; text-decoration:none; padding:18px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); color:var(--ink); font-weight:600; font-size:15px; transition:border-color .2s,background .2s; }
.related-card:hover { border-color:var(--brick); background:var(--brick-soft); }

/* ── 문의하기 페이지 ──────────────────────────────────────────── */
.contact-band { background: var(--brick); padding: 14px 0; }
.contact-band-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.contact-band-label { color: hsl(0 0% 100% / .85); font-size: 14px; font-weight: 500; }
.contact-band-btns { display: flex; gap: 10px; }
.contact-band-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: var(--r);
  font-size: 15px; font-weight: 700; text-decoration: none;
}
.contact-band-btn--call { background: hsl(0 0% 100%); color: var(--brick); }
.contact-band-btn--sms  { background: var(--brick-deep); color: hsl(0 0% 100%); border: 1px solid hsl(0 0% 100% / .25); }
.contact-band-btn:hover { opacity: .9; }

.consult-compare { display: grid; gap: 20px; }
@media (min-width: 640px) { .consult-compare { grid-template-columns: 1fr 1fr; } }
.consult-compare-card {
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px 24px; border-radius: var(--r);
  border: 2px solid var(--line); background: var(--card);
}
.consult-compare-card--call { border-color: var(--brick); }
.consult-compare-card--sms  { border-color: var(--moss); }
.consult-compare-icon { color: var(--brick); }
.consult-compare-card--sms .consult-compare-icon { color: var(--moss); }
.consult-compare-card h3 { font-size: 20px; font-weight: 700; margin: 0; }
.consult-list { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; flex: 1; }
.consult-list li { font-size: 15px; color: var(--ink-2); padding-left: 20px; position: relative; }
.consult-list li::before { content: "✓"; position: absolute; left: 0; color: var(--moss); font-weight: 700; }

.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq-q { font-size: 17px; font-weight: 700; margin-bottom: 10px; color: var(--ink); }
.faq-a { font-size: 15px; color: var(--ink-2); line-height: 1.7; }

.check-list { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px; }
.check-list li { font-size: 15px; color: var(--ink-2); padding-left: 22px; position: relative; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--moss); font-weight: 700; font-size: 13px; top: 1px; }

/* ── 손상 유형별 관련 링크 ──────────────────────────────────── */
.nseo-related-grid { display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media(min-width:768px){ .nseo-related-grid { grid-template-columns:repeat(5,1fr); } }
.nseo-related-card { display:flex; flex-direction:column; gap:4px; padding:14px 16px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); text-decoration:none; color:inherit; transition:border-color .18s; }
.nseo-related-card:hover { border-color:var(--brick); }
.nseo-related-card strong { font-size:15px; font-weight:700; color:var(--ink); }
.nseo-related-card span { font-size:13px; color:var(--ink-2); }