/*
  폐업점포원상복구 — 바모스
  컨셉: "철거 현장 기록부" — 세이프티 오렌지 + 딥 블루 배경.
  전체 서체는 SUIT Variable 하나로 통일(가변 폰트, 웨이트 100~900), 폴백 스택 없음.
  헤드라인 800, 라벨/캡션 600~700, 리드문 440 등 웨이트 대비로 위계를 만든다.
  40대 이상 사용자를 고려해 본문 최소 크기를 16px 이상으로 유지한다.
*/

:root {
  --ink: #2e2312;
  --ink-soft: #5c4a30;
  --ink-faint: #85715a;
  --line: #b7c3dc;
  --line-strong: #93a4c6;
  --paper: #d4def0;
  --surface: #eef2fa;
  --surface-2: #c3d0e8;
  --accent: #d5490f;
  --accent-dim: #f2e3d8;
  --focus: #1360c4;

  --font-display: "SUIT Variable";

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 18px; --sp-5: 27px;
  --sp-6: 40px; --sp-7: 60px; --sp-8: 90px; --sp-9: 128px;

  --radius-sm: 4px;
  --radius: 8px;
  --maxw: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --nav-h: 76px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-display);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  word-break: keep-all;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.24; margin: 0 0 .5em; letter-spacing: -.015em; text-wrap: balance; overflow-wrap: break-word; font-weight: 800; }
p { margin: 0 0 1em; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.mono-label {
  font-family: var(--font-display);
  font-size: .86rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

/* ================= GNB : 로고+H1, 상담하기 버튼만, 오버랩→스크롤 시 구분 ================= */
.gnb {
  position: sticky; top: 0; z-index: 50;
  background: rgba(212, 222, 240, .82);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 2px 14px -10px rgba(46,35,18,.3);
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.gnb.is-scrolled {
  background: rgba(212, 222, 240, .98);
  border-bottom-color: var(--line-strong);
  box-shadow: 0 10px 26px -16px rgba(46,35,18,.4);
}
.gnb-inner { max-width: var(--maxw); margin: 0 auto; padding: 15px 24px; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: var(--nav-h); }
.gnb-id { display: flex; flex-direction: column; gap: 3px; line-height: 1.1; }
.gnb-logo { font-weight: 800; font-size: 1.18rem; letter-spacing: -.02em; }
.gnb-logo::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; }
.gnb-h1 { font-family: var(--font-display); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); }
.gnb-cta { padding: 12px 22px; font-size: .95rem; flex: none; }

.breadcrumb { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-3) 24px 0; font-size: .84rem; color: var(--ink-faint); font-family: var(--font-display); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.breadcrumb a:hover { color: var(--accent); }

/* ================= Hero : 항상 멀티 이미지 컴포지션 (정적 단일 사진 금지) ================= */
.hero { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-7) 24px var(--sp-6); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--sp-7); align-items: center; }
.hero-copy .eyebrow { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: .82rem; font-weight: 600; color: var(--accent); letter-spacing: .04em; margin-bottom: var(--sp-4); text-transform: uppercase; }
.hero-copy .eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--accent); }
.hero-copy h1 { font-size: clamp(2.1rem, 3.6vw, 3rem); }
.hero-copy .lede { font-size: 1.14rem; font-weight: 440; color: var(--ink-soft); max-width: 44ch; }
.hero-cta { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 26px; border-radius: var(--radius-sm); font-weight: 700; font-size: 1rem; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--accent); box-shadow: 0 6px 16px -6px rgba(213,73,15,.55); transform: translateY(-1px); }
.btn-secondary { border: 1px solid var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink); background: var(--surface); transform: translateY(-1px); }
.btn:active { transform: scale(.97); transition-duration: .1s; }

/* 히어로 = 철거 전/후 자동 전환. 정적 이미지 대신 "전 → 후" 와이프가 스스로 반복 재생되며
   콘텐츠 자체(변화)를 모션으로 전달한다 (장식용 모션이 아니라 콘텐츠와 결합된 모션).
   사용자 조작 없음 — prefers-reduced-motion에서는 완전히 멈춘다. */
.compare {
  position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 28px 56px -26px rgba(46,35,18,.45);
}
.compare-media { position: absolute; inset: 0; }
.compare-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-after { z-index: 1; }
.compare-before {
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
  transition: clip-path .85s cubic-bezier(.16,1,.3,1);
}
.compare-handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 0; z-index: 3;
  transform: translateX(-50%);
  transition: left .85s cubic-bezier(.16,1,.3,1);
}
.compare-handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%);
  background: #fff; box-shadow: 0 0 0 1px rgba(46,35,18,.25);
}
.compare-tag {
  position: absolute; bottom: var(--sp-3); z-index: 4;
  background: rgba(46,35,18,.82); color: #fff; font-size: .78rem; font-weight: 600;
  padding: 6px 12px; border-radius: var(--radius-sm); letter-spacing: .02em;
  transition: opacity .35s var(--ease);
}
.compare-tag-before { left: var(--sp-3); opacity: clamp(0, calc((var(--pos, 50%) - 14%) / 1%), 1); }
.compare-tag-after { right: var(--sp-3); opacity: clamp(0, calc((86% - var(--pos, 50%)) / 1%), 1); }
.compare-location {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 4;
  font-size: .76rem; font-weight: 600; letter-spacing: .03em; color: #fff;
  background: rgba(46,35,18,.55); padding: 5px 10px; border-radius: var(--radius-sm);
}
.compare-pause {
  position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 5;
  width: 34px; height: 34px; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(46,35,18,.55); color: #fff; cursor: pointer;
  opacity: .8; transition: opacity .18s var(--ease), background .18s var(--ease), transform .1s var(--ease);
}
.compare-pause:hover, .compare-pause:focus-visible { opacity: 1; background: rgba(46,35,18,.75); }
.compare-pause:active { transform: scale(.92); }
.compare-pause svg { width: 14px; height: 14px; }
.compare-pause .icon-play { display: none; }
.compare-pause[aria-pressed="true"] .icon-pause { display: none; }
.compare-pause[aria-pressed="true"] .icon-play { display: block; }

/* ================= Sections =================
   섹션 간 리듬을 넉넉하게: 상하 패딩을 크게 잡아 내용이 촘촘해 보이지 않게 한다. */
section { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-9) 24px; }
.section-head { max-width: 60ch; margin-bottom: var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.section-head .kicker { display: block; margin-bottom: var(--sp-3); }
.section-head h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.section-head p { color: var(--ink-soft); font-size: 1.02rem; }

/* ================= 대표 서비스 : NSEO 내부링크 그리드 (실 발행 페이지만, 가짜 카드 금지) =================
   auto-fit 사용 이유: 카드가 1개뿐이어도 빈 트랙이 접혀 어색한 여백 없이 자연스럽게 앉는다.
   페이지가 늘어나면 이 그리드/ItemList가 그대로 카드 수만큼 확장된다. */
.services-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); gap: var(--sp-4); }
.service-card { display: block; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); overflow: hidden; transition: box-shadow .22s var(--ease), transform .22s var(--ease); }
.service-card:hover { box-shadow: 0 20px 40px -22px rgba(46,35,18,.35); transform: translateY(-3px); }
.service-card:active { transform: scale(.98); transition-duration: .1s; }
.service-card img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s var(--ease); }
.service-card:hover img { transform: scale(1.04); }
.service-card-body { display: block; padding: var(--sp-4); }
.service-card-body strong { display: block; font-size: 1.1rem; font-weight: 800; margin-bottom: 6px; }
.service-card-body span { display: block; color: var(--ink-soft); font-size: .92rem; }
.service-card .more { color: var(--accent); font-weight: 700; font-size: .9rem; margin-top: var(--sp-2); display: inline-flex; align-items: center; gap: 6px; transition: gap .2s var(--ease); }
.service-card:hover .more { gap: 10px; }

/* ================= 시공사진 그리드 : 고정 8칸(사진7+상담1), 3행 고정, 고아셀 금지 ================= */
.portfolio-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(3, 148px); gap: var(--sp-2); }
.portfolio-grid figure, .portfolio-grid .p-consult { margin: 0; overflow: hidden; border-radius: var(--radius-sm); position: relative; background: var(--surface-2); }
.portfolio-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.portfolio-grid figure:hover img { transform: scale(1.045); }
.portfolio-grid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; font-family: var(--font-display); font-size: .76rem; letter-spacing: .01em; background: linear-gradient(transparent, rgba(0,0,0,.72) 85%); color: #fff; }
.portfolio-grid .p1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.portfolio-grid .p2 { grid-column: 3 / 5; grid-row: 1 / 2; }
.portfolio-grid .p3 { grid-column: 5 / 7; grid-row: 1 / 2; }
.portfolio-grid .p4 { grid-column: 3 / 5; grid-row: 2 / 3; }
.portfolio-grid .p5 { grid-column: 5 / 7; grid-row: 2 / 3; }
.portfolio-grid .p6 { grid-column: 1 / 3; grid-row: 3 / 4; }
.portfolio-grid .p7 { grid-column: 3 / 5; grid-row: 3 / 4; }
.portfolio-grid .p-consult {
  grid-column: 5 / 7; grid-row: 3 / 4;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  background: var(--ink); color: #fff; padding: var(--sp-4);
  transition: background .2s var(--ease);
}
.portfolio-grid .p-consult:hover { background: var(--accent); }
.portfolio-grid .p-consult:active { transform: scale(.98); transition-duration: .1s; }
.portfolio-grid .p-consult strong { font-size: 1.02rem; }
.portfolio-grid .p-consult span { font-family: var(--font-display); font-size: .78rem; opacity: .85; }

/* ================= 절차 : 항상 5단계, 순차 리빌 애니메이션(항목마다 다르게) ================= */
.process-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4); counter-reset: step; padding: 0; margin: 0; }
.process-list li { list-style: none; border-top: 2px solid var(--ink); padding-top: var(--sp-3); }
.process-list li::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: .9rem; margin-bottom: var(--sp-2); }
.process-list h3 { font-size: 1.05rem; }
.process-list p { color: var(--ink-soft); font-size: .95rem; }

/* JS 미실행/미지원 시 전 콘텐츠가 항상 보이도록 기본은 불투명.
   .js 클래스가 붙었을 때만 리빌 애니메이션을 적용한다 (점진적 향상). */
.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-visible { opacity: 1; }
.js [data-reveal="fade-up"] { transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-reveal="fade-up"].is-visible { transform: translateY(0); }
.js [data-reveal="fade-left"] { transform: translateX(-26px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-reveal="fade-left"].is-visible { transform: translateX(0); }
.js [data-reveal="fade-right"] { transform: translateX(26px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-reveal="fade-right"].is-visible { transform: translateX(0); }
.js [data-reveal="scale-in"] { transform: scale(.92); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js [data-reveal="scale-in"].is-visible { transform: scale(1); }
.js [data-reveal="rise"] { transform: translateY(34px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal="rise"].is-visible { transform: translateY(0); }
/* 팝 : 케이스 카드처럼 "빵빵빵" 하고 하나씩 튀어 오르듯 등장해야 하는 항목용 (약간 오버슈트되는 이징) */
.js [data-reveal="pop"] { transform: scale(.8); transition: opacity .4s cubic-bezier(.34,1.56,.64,1), transform .4s cubic-bezier(.34,1.56,.64,1); }
.js [data-reveal="pop"].is-visible { transform: scale(1); }

/* 그리드/리스트 내부 각 항목이 개별적으로 리빌되도록: 부모에 [data-reveal-group]을 걸고
   각 자식에 [data-reveal]을 개별 지정하면, 자식마다 순서대로 조금씩 늦게 시작한다
   (동시에 통째로 한 덩어리로 뜨는 것을 방지). 한 행에 나란히 걸쳐 있는 항목도 눈에 띄게
   순차적으로 보이도록 간격을 넉넉히 잡는다. 최대 8개까지 다룬다(포트폴리오 그리드가 8칸 고정). */
.js [data-reveal-group] > *:nth-child(1) { transition-delay: 0ms; }
.js [data-reveal-group] > *:nth-child(2) { transition-delay: 120ms; }
.js [data-reveal-group] > *:nth-child(3) { transition-delay: 240ms; }
.js [data-reveal-group] > *:nth-child(4) { transition-delay: 360ms; }
.js [data-reveal-group] > *:nth-child(5) { transition-delay: 480ms; }
.js [data-reveal-group] > *:nth-child(6) { transition-delay: 600ms; }
.js [data-reveal-group] > *:nth-child(7) { transition-delay: 720ms; }
.js [data-reveal-group] > *:nth-child(8) { transition-delay: 840ms; }

/* ================= FAQ : 항상 5문항. 아이콘 회전 + 답변 높이를 실제로 애니메이션한다 =================
   details/summary는 유지해 JS 없이도 열고 닫을 수 있게 하고, JS가 있으면 grid-template-rows를
   인라인으로 제어해 부드럽게 펼친다 (site.js 참고). */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.06rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: var(--sp-4) 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq-icon { position: relative; width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--accent); border-radius: 1px; }
.faq-icon::before { width: 100%; height: 2px; }
.faq-icon::after { width: 2px; height: 100%; }
.faq details[open] .faq-icon { transform: rotate(45deg); }
.faq-a { overflow: hidden; transition: grid-template-rows .32s var(--ease); }
.faq-a p { color: var(--ink-soft); font-size: 1rem; margin: 0 0 var(--sp-4); }

/* ================= CTA 배너 : 항상 이미지/디자인 포함 ================= */
/* 풀블리드 CTA: 배경은 뷰포트 끝까지, 텍스트 컬럼만 본문 그리드에 맞춘다 */
.cta-fullbleed { max-width: none; margin: 0; padding: 0; }
.cta-banner {
  position: relative; overflow: hidden; color: #fff;
  min-height: 460px; display: flex; align-items: center;
  padding: var(--sp-8) max(24px, calc((100vw - var(--maxw)) / 2 + 24px));
}
.cta-banner .cta-bg { position: absolute; inset: 0; z-index: 0; }
.cta-banner .cta-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-banner .cta-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(23,18,10,.92) 32%, rgba(23,18,10,.55) 75%, rgba(23,18,10,.3) 100%); }
.cta-banner .cta-body { position: relative; z-index: 1; max-width: 620px; }
.cta-kicker { display: block; color: #ffb08a; margin-bottom: var(--sp-3); }
.cta-banner h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); max-width: 18ch; margin-bottom: var(--sp-3); }
.cta-sub { color: rgba(255,255,255,.82); font-size: 1.08rem; margin-bottom: var(--sp-5); }
.cta-banner .btn-primary, .cta-btn { position: relative; z-index: 1; background: var(--accent); font-size: 1.08rem; padding: 18px 34px; }
.cta-banner .btn-primary:hover, .cta-btn:hover { background: #b93e0c; box-shadow: 0 6px 16px -6px rgba(213,73,15,.7); }

/* ================= 상세페이지 : 이미지 최우선, 컴포넌트 시각화 본문 ================= */
.article { max-width: var(--maxw); margin: 0 auto; padding: 0 24px var(--sp-8); }
.article-hero { position: relative; margin-bottom: var(--sp-6); border-radius: var(--radius); overflow: hidden; aspect-ratio: 21/9; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 68%; }
.article-hero .article-hero-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-6); background: linear-gradient(transparent, rgba(46,35,18,.86) 70%); color: #fff; }
.article-hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); color: #fff; }

/* ================= 상세페이지 본문 레이아웃 : PC에서는 본문 + 우측 고정 상담 사이드바 =================
   본문만 좁게 가운데 몰아넣지 않고, 넓은 화면에서는 오른쪽 여백을 실제 상담 유도 컴포넌트로 채운다.
   사이드바는 DOM상 본문보다 먼저 와서 모바일에서 위쪽에 노출되고, PC에서는 order로 오른쪽에 배치한다. */
.article-layout { display: grid; grid-template-columns: minmax(0, 720px) 300px; gap: var(--sp-8); align-items: start; }
.article-aside { order: 2; position: sticky; top: calc(var(--nav-h) + var(--sp-5)); }
.article-body { order: 1; }
.article-body h2 { font-size: 1.4rem; margin-top: 3.2em; padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.article-body h3 { font-size: 1.1rem; font-weight: 700; margin-top: 1.4em; }
.article-body p { color: var(--ink-soft); font-size: 1.03rem; }
.article-body > p:first-child { margin-top: 0; }

.aside-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); display: grid; gap: var(--sp-5); }
.aside-card dl { margin: 0; display: grid; gap: var(--sp-4); }
.aside-card dt { font-family: var(--font-display); font-size: .78rem; color: var(--ink-faint); font-weight: 600; letter-spacing: .01em; }
.aside-card dd { margin: 3px 0 0; font-weight: 800; font-size: 1.05rem; }
.aside-actions { display: grid; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.aside-actions .btn { width: 100%; justify-content: center; }

/* ================= 공정 상세 : 번호 붙은 단일 컬럼 리스트, 여백 넉넉히 =================
   PC 기준(기본) 780px 컬럼폭에 44px 번호 열만 더해 미니멀하게 유지, 모바일도 같은 구조가 자연스럽게 맞는다. */
.process-detail { list-style: none; margin: 1.8em 0; padding: 0; counter-reset: pd; display: grid; gap: var(--sp-6); }
.process-detail li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-4); align-items: start; padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.process-detail li::before { counter-increment: pd; content: counter(pd, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--accent); }
.process-detail h3 { margin: 0 0 6px; font-size: 1.05rem; }
.process-detail p { margin: 0; font-size: .97rem; }
@media (max-width: 600px) {
  .process-detail li { grid-template-columns: 32px minmax(0, 1fr); }
}

.direct-answer { position: relative; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: var(--sp-5); border-radius: 0 var(--radius) var(--radius) 0; font-size: 1.08rem; }
.direct-answer::before { content: "핵심 답변"; display: block; font-family: var(--font-display); font-size: .78rem; color: var(--accent); letter-spacing: .06em; margin-bottom: var(--sp-2); font-weight: 700; }

.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 2.2em 0; }
.stat-row .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-4); }
.stat-row .stat .n { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--accent); display: block; }
.stat-row .stat .l { font-size: .92rem; color: var(--ink-soft); }

.condition-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 2em 0; }
.condition-cards .cond { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-4); }
.condition-cards .cond .mono-label { display: block; margin-bottom: 6px; }
.condition-cards .cond p { margin: 0; font-size: .96rem; }

.before-after { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); margin: 2.2em 0; }
.before-after figure { margin: 0; }
.before-after img { width: 100%; height: auto; border-radius: var(--radius-sm); aspect-ratio: 4/3; object-fit: cover; }
.before-after figcaption { text-align: left; font-family: var(--font-display); font-size: .82rem; color: var(--ink-soft); margin-top: 8px; font-weight: 500; letter-spacing: .01em; }

.checklist { margin: 1.6em 0; padding-left: 0; list-style: none; }
.checklist li { padding-left: 28px; position: relative; margin-bottom: .65em; color: var(--ink-soft); font-size: 1rem; }
.checklist li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 9px; height: 9px; border: 2px solid var(--accent); border-radius: 50%; }

.article-related { margin-top: var(--sp-7); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-3); }
.related-card { display: block; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-4); background: var(--surface); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.related-card:hover { box-shadow: 0 14px 28px -18px rgba(23,24,26,.3); transform: translateY(-2px); }
.related-card:active { transform: scale(.98); transition-duration: .1s; }
.related-card .mono-label { display: block; margin-bottom: 6px; }
.related-card strong { font-size: 1.02rem; }
.related-card.is-consult { background: var(--ink); color: #fff; border-color: var(--ink); }
.related-card.is-consult .mono-label { color: #ffb08a; }

/* ================= 컨택(상담) 페이지 : 전화 강조, 전화/문자 동일 비중 ================= */
.consult-hero { text-align: center; max-width: 760px; margin: 0 auto var(--sp-6); }
.consult-phone-block { max-width: 640px; margin: 0 auto var(--sp-6); text-align: center; background: var(--ink); color: #fff; border-radius: var(--radius); padding: var(--sp-7) var(--sp-6); }
.consult-phone-block .mono-label { color: #ffb08a; }
.consult-phone-block .phone-number { display: block; font-size: clamp(2.4rem, 6vw, 3.4rem); font-weight: 800; letter-spacing: -.01em; margin: var(--sp-3) 0 var(--sp-5); font-family: var(--font-display); }
.consult-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3); max-width: 640px; margin: 0 auto; }
.consult-actions .btn { justify-content: center; padding: 18px; font-size: 1.05rem; width: 100%; }
.consult-actions .btn-call { background: var(--accent); color: #fff; box-shadow: 0 10px 24px -10px rgba(213,73,15,.6); }
.consult-actions .btn-call:hover { background: #b93e0c; transform: translateY(-1px); }
.consult-actions .btn-sms { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55); }
.consult-actions .btn-sms:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); margin-top: var(--sp-7); }
.contact-info dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2) var(--sp-4); font-size: 1rem; }
.contact-info dt { color: var(--ink-faint); font-family: var(--font-display); font-size: .84rem; padding-top: 2px; }
.contact-info dd { margin: 0; font-weight: 500; }
.contact-guide h2, .contact-info h2 { font-size: 1.15rem; margin-bottom: var(--sp-3); }

/* ================= Footer : 사업자정보 / 바로가기 / 대표서비스, 가로 배치 ================= */
.site-footer { border-top: 1px solid var(--line); margin-top: var(--sp-7); background: var(--surface); }
.footer-inner { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-6) 24px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sp-6); font-size: .92rem; color: var(--ink-faint); }
.footer-col p { margin: 0 0 4px; }
.footer-col .mono-label { display: block; margin-bottom: var(--sp-2); }
.footer-nav { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.footer-nav a:hover { color: var(--accent); }

/* ================= 핵심 강점 : 2열, 카드를 크게 잡아 여유 있게 ================= */
.strengths-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.strengths-grid li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-6); display: flex; align-items: flex-start; gap: var(--sp-4); }
.strengths-grid .s-body { min-width: 0; }
.s-icon { color: var(--accent); flex: none; margin-top: 2px; }
.strengths-grid strong { display: block; font-size: 1.12rem; font-weight: 800; margin-bottom: 8px; }
.strengths-grid p { color: var(--ink-soft); font-size: .96rem; margin: 0; }

/* ================= 이런 상황이라면 : 여백 넓은 단일 리스트 ================= */
.problems-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-6); }
.problems-grid li { border-top: 1px solid var(--line-strong); padding-top: var(--sp-4); }
.problems-grid h3 { font-size: 1.08rem; margin: 10px 0 8px; }
.problems-grid p { color: var(--ink-soft); font-size: .96rem; margin: 0; max-width: 46ch; }

/* ================= 서비스 지역 : 편집형 디렉토리 리스트 =================
   칩/배지 대신 인덱스 페이지 같은 담백한 텍스트 목록으로 서울 25개 자치구 +
   경기 주요 도시 전체를 보여준다. */
.region-fullbleed { max-width: none; margin: 0; padding: 0; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.region-band { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-9) 24px; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--sp-8); align-items: start; }
.region-copy h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); margin-bottom: var(--sp-4); }
.region-copy p { color: var(--ink-soft); font-size: 1.06rem; }

/* 스크롤 진입 시 0→N 카운트업 (호버 불필요, 모바일 동일하게 자동 재생) */
.region-stats { display: flex; gap: var(--sp-7); margin-top: var(--sp-6); }
.region-stat-n { display: block; font-size: 2.6rem; font-weight: 800; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.region-stat-l { display: block; margin-top: 6px; font-size: .86rem; color: var(--ink-soft); font-weight: 600; }

.region-note { margin: var(--sp-6) 0 var(--sp-4); font-size: .96rem; color: var(--ink-soft); }
.region-copy .btn-secondary { background: var(--surface); }

.region-directory { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-7); }
.region-col-label { display: block; font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); border-bottom: 1px solid var(--line-strong); }
.region-list { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: var(--sp-5); }
.region-list li {
  font-size: 1.02rem; font-weight: 500; color: var(--ink-soft);
  padding: 8px 0; border-bottom: 1px solid var(--line);
  break-inside: avoid;
}

/* ================= 실제 시공 전후 (검증된 동일 현장 쌍) ================= */
.ba-showcase { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.ba-imgs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; border-radius: var(--radius); overflow: hidden; }
.ba-imgs figure { margin: 0; position: relative; aspect-ratio: 4/3; }
.ba-imgs img { width: 100%; height: 100%; object-fit: cover; }
.ba-imgs figcaption { position: absolute; left: 8px; top: 8px; font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: rgba(46,35,18,.7); padding: 3px 8px; border-radius: 999px; }
.ba-caption { margin: var(--sp-3) 0 0; font-size: .92rem; color: var(--ink-soft); }
.ba-caption strong { color: var(--ink); }

/* ================= 플로팅 상담 버튼 ================= */
.quick-consult {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: .92rem;
  padding: 13px 18px; border-radius: 999px;
  box-shadow: 0 14px 28px -10px rgba(213,73,15,.55);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.quick-consult:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -10px rgba(213,73,15,.65); }
.quick-consult:active { transform: scale(.95); transition-duration: .1s; }

#page-404 { text-align: left; padding: var(--sp-8) 24px; }

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: var(--sp-6); }
  .compare { order: -1; aspect-ratio: 4/3; }
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .article-aside { order: 0; position: static; }
  .services-grid { grid-template-columns: minmax(0, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, 160px); }
  .portfolio-grid .p1 { grid-column: 1 / 3; grid-row: 1 / 2; }
  .portfolio-grid .p2 { grid-column: 1 / 2; grid-row: 2 / 3; }
  .portfolio-grid .p3 { grid-column: 2 / 3; grid-row: 2 / 3; }
  .portfolio-grid .p4 { grid-column: 1 / 2; grid-row: 3 / 4; }
  .portfolio-grid .p5 { grid-column: 2 / 3; grid-row: 3 / 4; }
  .portfolio-grid .p6 { grid-column: 1 / 2; grid-row: 4 / 5; }
  .portfolio-grid .p7 { grid-column: 2 / 3; grid-row: 4 / 5; }
  .portfolio-grid .p-consult { grid-column: 1 / 3; grid-row: 5 / 6; }
  .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-row, .condition-cards, .before-after, .related-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ba-showcase { grid-template-columns: minmax(0, 1fr); }
  .region-band { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .region-directory { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .consult-actions { grid-template-columns: minmax(0, 1fr); }
  .cta-banner { padding: var(--sp-6) 20px; min-height: 380px; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .quick-consult span { display: none; }
  .quick-consult { padding: 14px; }
}
@media (max-width: 600px) {
  .stat-row, .condition-cards, .before-after, .related-grid { grid-template-columns: minmax(0, 1fr); }
  .strengths-grid, .problems-grid { grid-template-columns: minmax(0, 1fr); }
  .article-hero { aspect-ratio: 4/3; }
}

/* ================= 감속 모션 : 전체 사이트에 일괄 적용 =================
   개별 컴포넌트마다 따로 챙기지 않고, 전환/애니메이션 자체를 여기서 한 번에 끈다.
   최종 상태(펼침, 노출, hover 색상 등)는 그대로 즉시 적용되고 "움직이는 과정"만 사라진다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}