/* ===== 강화유리문수리 - 디자인 시스템 =====
   화이트 + 실버그레이 + 딥 에메랄드 그린 + 앰버 + 차콜블랙
   넓고 압축된 정보형 레이아웃, 과도한 세로 스크롤 지양 */

:root {
  --bg: #ffffff;
  --bg-soft: #f4f6f6;
  --bg-soft-2: #eef1f1;
  --ink: #21262b;
  --ink-soft: #565f66;
  --primary: #0b5d43;
  --primary-dark: #083f2e;
  --primary-soft: #e5f0ec;
  --amber: #c98a2c;
  --amber-soft: #faf1e0;
  --silver: #9aa5ad;
  --silver-line: #dde1e3;
  --radius: 12px;
  --wrap: 1360px;
  --shadow: 0 4px 18px rgba(11, 93, 67, 0.08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.icon { width: 1.5em; height: 1.5em; }

/* ── 버튼 ── */
.btn-call {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff; font-weight: 700;
  padding: 12px 26px; border-radius: 999px; white-space: nowrap;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-call:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(11,93,67,.3); }
.btn-call:active { transform: translateY(0); }
.btn-call-header { padding: 9px 20px; font-size: .92rem; }

/* 스크롤 시 항상 보이는 플로팅 전화상담 버튼 */
.float-call {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(11,93,67,.35); transition: background .15s ease, transform .15s ease;
}
.float-call:hover { background: var(--primary-dark); transform: scale(1.06); }
.float-call .icon { width: 1.6rem; height: 1.6rem; color: #fff; }
.float-call.is-pending { opacity: .6; }
.btn-call.is-pending { opacity: .55; }

/* ── 헤더 ── */
.site-header { border-bottom: 1px solid var(--silver-line); position: sticky; top: 0; background: #fff; z-index: 50; }
.header-inner { display: flex; align-items: center; gap: 28px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.15rem; color: var(--primary-dark); margin-right: auto; }
.brand-icon { width: 26px; height: 26px; flex: none; border-radius: 7px; }
.main-nav { display: flex; gap: 22px; margin-right: auto; }
.main-nav a { font-size: .95rem; color: var(--ink-soft); font-weight: 600; }
.main-nav a:hover { color: var(--primary); }

/* ── 모바일 햄버거 메뉴 ── */
.hamburger-btn { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; flex: none; background: none; border: 1px solid var(--silver-line); border-radius: 8px; cursor: pointer; }
.hamburger-btn span { display: block; width: 20px; height: 2px; background: var(--primary-dark); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.hamburger-btn.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.is-active span:nth-child(2) { opacity: 0; }
.hamburger-btn.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav-panel { display: none; }

/* ── 섹션 공통 ── */
section { padding: 56px 0; }
.section-soft { background: var(--bg-soft); }
.section-head { max-width: 720px; margin: 0 0 32px; }
.section-head h2 { font-size: 1.9rem; color: var(--ink); }
.section-head p { color: var(--ink-soft); }
.eyebrow { color: var(--amber); font-weight: 700; letter-spacing: .04em; font-size: .85rem; text-transform: uppercase; margin-bottom: 8px; display: block; }

/* ── HERO ── */
.hero { padding: 44px 0 52px; background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%); }
.hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 48px; align-items: center; }
.hero-question { color: var(--ink-soft); font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; }
.hero h1 { font-size: 2.5rem; color: var(--primary-dark); }
.hero-symptoms { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 18px; }
.hero-photo { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--bg-soft); height: 600px; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: contain; }
.hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero-note { color: var(--silver); font-size: .85rem; }
.hero-checklist { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hero-checklist li { display: flex; gap: 8px; align-items: flex-start; font-size: .95rem; color: var(--ink); }
.hero-checklist .icon { color: var(--primary); flex: none; width: 1.15em; height: 1.15em; margin-top: .15em; }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--primary); color: var(--primary-dark); font-weight: 700;
  padding: 12px 26px; border-radius: 999px; white-space: nowrap; background: #fff;
  transition: background .15s ease;
}
.btn-outline:hover { background: var(--primary-soft); }

/* ── 증상 진단판 ── */
.symptom-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.symptom-card {
  background: #fff; border: 1px solid var(--silver-line); border-radius: var(--radius);
  padding: 20px 14px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.symptom-card:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(11,93,67,.12); border-color: var(--primary); }
.symptom-card .icon-circle {
  width: 52px; height: 52px; border-radius: 50%; background: var(--primary-soft);
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px; flex: none;
  transition: transform .18s ease;
}
.symptom-card:hover .icon-circle { transform: scale(1.08); }
.symptom-card .icon-circle .icon { color: var(--primary); width: 1.6rem; height: 1.6rem; }
.symptom-card h3 { font-size: .95rem; margin-bottom: 2px; }
.symptom-card p { color: var(--ink-soft); font-size: .78rem; margin: 0; }

/* ── 시공사례 (BEFORE → AFTER) ── */
.case-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: stretch; }
.case-photo { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.case-photo img { width: 100%; height: 520px; object-fit: contain; background: var(--bg-soft); }
.case-photo .tag {
  position: absolute; top: 12px; left: 12px; background: var(--primary); color: #fff;
  font-size: .78rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; letter-spacing: .03em;
}
.case-photo.after .tag { background: var(--amber); color: #2a1c00; }
.case-caption { grid-column: 1 / -1; color: var(--ink-soft); text-align: center; font-size: .95rem; margin-top: 4px; }

/* ── NSEO 서비스 카드 ── */
.service-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.region-related .service-card img { height: 230px; object-fit: cover; }
.service-card {
  background: #fff; border: 1px solid var(--silver-line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease;
}
.service-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(11,93,67,.14); }
.service-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.service-card-body { padding: 14px 16px 18px; }
.service-card-body h3 { font-size: 1.02rem; color: var(--primary-dark); margin-bottom: 4px; }
.service-card-body p { color: var(--ink-soft); font-size: .84rem; margin: 0; }

/* NSEO 서비스 카드 (메인페이지) - 사진 전체가 잘리지 않게 표시, 1행 고정 아님 */
.service-carousel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-carousel .service-card img { height: 340px; object-fit: contain; background: var(--bg-soft); }
.service-carousel .service-card-body { padding: 14px 16px 18px; }
.service-carousel .service-card-body h3 { font-size: 1.05rem; }
.service-carousel .service-card-body p { font-size: .85rem; }
.service-card-more { position: relative; display: flex; align-items: flex-end; justify-content: center; background: var(--primary-dark); border: none; min-height: 100%; }
.more-slide-wrap { position: absolute; inset: 0; }
.more-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.more-slide.is-active { opacity: .55; }
.service-card-more-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 20px; text-align: center; width: 100%; background: linear-gradient(180deg, transparent, rgba(8,63,46,.85) 60%); }
.service-card-more-inner .icon { width: 2rem; height: 2rem; color: #fff; }
.service-card-more-inner span { font-weight: 700; color: #fff; font-size: .96rem; }

/* ── 구조 진단 + 수리/교체 비교 (2분할) ── */
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.split-col { display: flex; flex-direction: column; }
.split-col h2 { font-size: 1.45rem; }

.door-diagram { position: relative; background: #fff; border: 1px solid var(--silver-line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.diagram-photo-wrap { position: relative; }
.door-diagram-photo { display: block; width: 100%; max-height: 420px; object-fit: contain; background: var(--bg-soft); border-radius: 8px; margin: 0 auto; }
.diagram-marker {
  position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%;
  background: var(--amber); color: #2a1c00; font-size: .78rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(0,0,0,.25);
}
.diagram-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.diagram-points li { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; border-left: 3px solid var(--primary); padding: 4px 0 4px 10px; }
.marker-num { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--amber); color: #2a1c00; font-size: .74rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.diagram-points li > div { display: flex; flex-direction: column; }
.diagram-points b { display: block; color: var(--primary-dark); }
.diagram-points span { color: var(--ink-soft); }

.compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: center; }
.compare-vs {
  width: 46px; height: 46px; border-radius: 50%; background: var(--primary-dark); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem;
  margin: 0 -14px; position: relative; z-index: 2; box-shadow: 0 0 0 4px #fff;
}
.compare-card { border-radius: var(--radius); padding: 20px; transition: transform .18s ease, box-shadow .18s ease; }
.compare-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.compare-card.ok { background: var(--primary-soft); border: 1px solid #cfe3da; }
.compare-card.no { background: var(--amber-soft); border: 1px solid #f0ddb8; }
.compare-card h3 { font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.compare-card.ok h3 { color: var(--primary-dark); }
.compare-card.no h3 { color: #8a5a12; }
.compare-card ul { margin: 0; padding-left: 0; list-style: none; }
.compare-card li { font-size: .88rem; padding: 5px 0; display: flex; gap: 8px; align-items: flex-start; color: var(--ink); }
.compare-card .icon { width: 1.1em; height: 1.1em; flex: none; margin-top: .2em; }
.compare-card.ok .icon { color: var(--primary); }
.compare-card.no .icon { color: var(--amber); }

/* ── 작업 진행 과정 ── */
.process-row { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.process-step { flex: 1; padding: 16px 18px; background: #fff; border: 1px solid var(--silver-line); border-radius: var(--radius); position: relative; display: flex; align-items: center; gap: 14px; }
.process-step .num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; font-size: .9rem; }
.process-step h3 { font-size: .98rem; margin-bottom: 2px; }
.process-step p { font-size: .82rem; color: var(--ink-soft); margin: 0; }

/* ── FAQ + 관련서비스 (2분할) ── */
.faq-split { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: stretch; }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: #fff; border: 1px solid var(--silver-line); border-radius: 10px; padding: 18px 20px; }
.faq-item summary { cursor: pointer; font-weight: 600; list-style: none; position: relative; padding-right: 24px; line-height: 1.5; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 0; top: 0; color: var(--primary); font-size: 1.2rem; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item[open] summary { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--silver-line); }
.faq-a { margin-top: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.7; }
/* FAQ 옆 CTA 박스 */
.faq-cta-box {
  background: var(--primary-dark); color: #fff; border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; gap: 16px; align-items: center;
  justify-content: center; height: 100%; text-align: center;
}
.faq-cta-photo { width: 100%; height: 380px; object-fit: cover; border-radius: 8px; }
.faq-cta-box h3 { font-size: 1.2rem; color: #fff; margin: 0; }
.faq-cta-box p { color: #d7e6df; font-size: .9rem; margin: 0; }
.faq-cta-box .btn-call { background: var(--amber); color: #2a1c00; align-self: center; }
.faq-cta-box .btn-call:hover { background: #b87a20; }

/* ── FINAL CTA (세부페이지용 배너) ── */
.final-cta { background: var(--primary-dark); color: #fff; padding: 30px 0; }
.final-cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.final-cta h2 { font-size: 1.4rem; margin: 0; color: #fff; }
.final-cta .btn-call { background: var(--amber); color: #2a1c00; }
.final-cta .btn-call:hover { background: #b87a20; }

/* ── FOOTER ── */
.site-footer { background: var(--bg-soft-2); border-top: 1px solid var(--silver-line); padding: 34px 0 20px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.3fr; gap: 24px; margin-bottom: 20px; }
.footer-col h4 { font-size: .88rem; color: var(--primary-dark); margin-bottom: 10px; }
.footer-col p { font-size: .82rem; color: var(--ink-soft); margin: 0 0 8px; }
.footer-links { display: flex; flex-direction: column; gap: 7px; font-size: .85rem; color: var(--ink-soft); }
.area-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 900px; }
.area-list a { display: block; padding: 12px 14px; background: #fff; border: 1px solid var(--silver-line); border-radius: 8px; font-size: .92rem; font-weight: 600; }
.area-list a:hover { border-color: var(--primary); color: var(--primary-dark); }
.footer-links a:hover { color: var(--primary); }
.footer-biz { display: flex; flex-direction: column; gap: 5px; font-size: .8rem; color: var(--silver); }
.footer-pending { font-style: italic; }
.footer-bottom { border-top: 1px solid var(--silver-line); padding-top: 14px; }
.footer-copy { font-size: .78rem; color: var(--silver); margin: 0; }

/* ── 세부페이지 본문 ── */
.page-hero { padding: 34px 0 10px; background: var(--bg-soft); }
.breadcrumb { font-size: .82rem; color: var(--ink-soft); margin-bottom: 10px; }
.breadcrumb a:hover { color: var(--primary); }
.page-hero h1 { font-size: 2rem; color: var(--primary-dark); }
.page-lead { color: var(--ink-soft); max-width: 760px; }

/* 핵심 요약 아이콘 행 */
.point-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.point-item { background: #fff; border: 1px solid var(--silver-line); border-radius: var(--radius); padding: 16px; display: flex; gap: 10px; align-items: flex-start; transition: transform .18s ease, border-color .18s ease; }
.point-item:hover { transform: translateY(-2px); border-color: var(--primary); }
.point-item .icon { color: var(--primary); flex: none; width: 1.4rem; height: 1.4rem; margin-top: .1em; }
.point-item span { font-size: .86rem; color: var(--ink); font-weight: 600; }

.article-grid { display: grid; grid-template-columns: 1fr 340px; gap: 40px; padding: 40px 0; align-items: start; }
.article-body { display: flex; flex-direction: column; gap: 16px; }
.article-section { background: #fff; border: 1px solid var(--silver-line); border-radius: var(--radius); padding: 22px 24px; }
.article-section h2 { font-size: 1.18rem; color: var(--primary-dark); display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.article-section h2 .icon { color: var(--primary); width: 1.3rem; height: 1.3rem; flex: none; }

/* 실제 시공 현장 사례 (인용구형) */
.case-tag { display: inline-block; background: var(--primary-soft); color: var(--primary-dark); font-size: .76rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; }
.case-story h3 { font-size: 1rem; color: var(--primary-dark); margin: 16px 0 6px; }
.case-quote { margin: 10px 0; padding: 12px 16px; background: var(--bg-soft); border-left: 3px solid var(--amber); font-style: italic; color: var(--ink); font-size: .95rem; }
.case-warn { background: var(--amber-soft); border-radius: 8px; padding: 12px 14px; font-size: .88rem; color: #6b4a10; margin-top: 14px; }
.case-area { font-size: .86rem; color: var(--ink-soft); margin-top: 10px; }
.case-story .btn-call { margin-top: 10px; }
.article-section p { color: var(--ink); font-size: .94rem; margin: 0 0 10px; }
.article-section p:last-child { margin-bottom: 0; }
.article-section ul { color: var(--ink); padding-left: 0; list-style: none; margin: 0; }
.article-section ul li { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; padding: 4px 0; }
.article-section ul li .icon { color: var(--primary); width: 1.05em; height: 1.05em; flex: none; margin-top: .2em; }

.article-photos { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 12px; }
.article-photos .photo-box { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.article-photos img { width: 100%; height: 260px; object-fit: cover; }
.article-photos .tag { position: absolute; top: 10px; left: 10px; background: var(--primary); color: #fff; font-size: .74rem; font-weight: 700; padding: 3px 11px; border-radius: 999px; }
.article-photos .photo-box.after .tag { background: var(--amber); color: #2a1c00; }
.article-photos .photo-cap { text-align: center; font-size: .82rem; color: var(--ink-soft); margin: 0; }

.detail-faq { padding-top: 0; }

/* 세부페이지: 사진 상단 + 아래 2단(좌: 내용, 우: FAQ) */
.detail-photos-top { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 24px; }
.detail-photos-top .photo-box { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.detail-photos-top img { width: 100%; height: 420px; object-fit: cover; }
.detail-photos-top .tag { position: absolute; top: 12px; left: 12px; background: var(--primary); color: #fff; font-size: .78rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.detail-photos-top .photo-box.after .tag { background: var(--amber); color: #2a1c00; }
.detail-photo-cap { text-align: center; font-size: .88rem; color: var(--ink-soft); margin: 10px 0 0; }

.detail-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 40px 0; align-items: start; }
.faq-col { background: #fff; border: 1px solid var(--silver-line); border-radius: var(--radius); padding: 22px 24px; }
.faq-col h2 { font-size: 1.18rem; color: var(--primary-dark); margin-bottom: 16px; }
.faq-col .faq-list { gap: 12px; }

/* 콘텐츠 2열 + FAQ 3열 압축 레이아웃 (시험 적용) */
.detail-split-compact { grid-template-columns: 1fr 1fr 1fr; gap: 24px 28px; }
.detail-split-compact .case-story { grid-column: 1 / -1; }
.detail-split-compact .content-col { display: flex; flex-direction: column; gap: 16px; }
.detail-split-compact .faq-col { grid-column: 3; }

/* 관련 서비스 + CTA (세부페이지 하단) */
.related-cta-row { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: stretch; }
.related-cta-row .service-grid { grid-template-columns: repeat(4, 1fr); }
.related-cta-row .service-card img { height: 230px; object-fit: cover; }
.related-cta-row .faq-cta-box { height: 100%; justify-content: center; }

/* ── 시공사례 페이지 ── */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.gallery-pair { background: #fff; border: 1px solid var(--silver-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gallery-pair .pair-imgs { display: grid; grid-template-columns: 1fr 1fr; }
.gallery-pair img { width: 100%; height: 440px; object-fit: contain; background: var(--bg-soft); }
.gallery-pair .pair-cap { padding: 12px 14px; font-size: .88rem; color: var(--ink-soft); }
.pair-imgs .before, .pair-imgs .after { position: relative; }
.pair-imgs span.tag { position: absolute; bottom: 8px; left: 8px; background: rgba(11,93,67,.85); color: #fff; font-size: .72rem; padding: 2px 8px; border-radius: 999px; }
.pair-imgs .after span.tag { background: rgba(201,138,44,.9); color: #2a1c00; }

/* ── 404 ── */
.error-page { padding: 100px 0; text-align: center; }
.error-page h1 { font-size: 2.4rem; color: var(--primary-dark); }

/* ── 반응형 ── */
@media (max-width: 1080px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .service-carousel { grid-template-columns: repeat(3, 1fr); }
  .symptom-grid { grid-template-columns: repeat(3, 1fr); }
  .article-grid { grid-template-columns: 1fr; }
  .article-photos { position: static; flex-direction: row; }
  .article-photos img { height: 220px; }
  .detail-split { grid-template-columns: 1fr; }
  .detail-split-compact .faq-col { grid-column: 1; }
  .point-row { grid-template-columns: repeat(2, 1fr); }
  .related-cta-row { grid-template-columns: 1fr; }
  .related-cta-row .service-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { order: -1; height: 320px; }
  .split-section { grid-template-columns: 1fr; }
  .compare-grid { grid-template-columns: 1fr; }
  .compare-vs { margin: -14px auto; }
  .faq-split { grid-template-columns: 1fr; }
  .case-row { grid-template-columns: 1fr 1fr; }
  .case-photo img { height: 320px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .article-photos { flex-direction: column; }
  .detail-photos-top { grid-template-columns: 1fr; }
  .detail-photos-top img { height: 320px; }
  .related-cta-row .service-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .main-nav { display: none; }
  .hamburger-btn { display: flex; }
  .mobile-nav-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(78vw, 300px); z-index: 60;
    background: #fff; box-shadow: -8px 0 30px rgba(0,0,0,.16);
    padding: 84px 24px 24px; display: flex; flex-direction: column; gap: 28px;
    transform: translateX(100%); transition: transform .25s ease;
  }
  .mobile-nav-panel.is-open { display: flex; transform: translateX(0); }
  .mobile-nav { display: flex; flex-direction: column; gap: 4px; }
  .mobile-nav a { padding: 12px 4px; font-size: 1.05rem; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--silver-line); }
  .nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(10,20,16,.4); z-index: 55; }
  .nav-backdrop.is-open { display: block; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service-carousel { grid-template-columns: repeat(2, 1fr); }
  .service-carousel .service-card img { height: auto; aspect-ratio: 3/4; object-fit: cover; background: none; }
  .symptom-grid { grid-template-columns: repeat(2, 1fr); }
  .case-row { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-pair img { height: auto; aspect-ratio: 3/4; object-fit: cover; background: none; }
  .case-photo img { height: auto; aspect-ratio: 3/4; object-fit: cover; }
  .site-footer { padding: 22px 0 14px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 18px 16px; margin-bottom: 14px; }
  .footer-col p { display: none; }
  .footer-col h4 { font-size: .8rem; margin-bottom: 6px; }
  .footer-links { flex-direction: row; flex-wrap: wrap; gap: 6px 12px; font-size: .82rem; }
  .footer-biz { font-size: .76rem; gap: 4px; }
  .point-row { grid-template-columns: 1fr; }
  .related-cta-row .service-grid { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 1.9rem; }
  .final-cta .wrap { justify-content: center; text-align: center; }
}

/* ── 사진 확대(라이트박스) ── */
img.is-zoomable { cursor: zoom-in; }
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(10, 20, 16, .88);
  display: flex; align-items: center; justify-content: center; padding: 30px;
  opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.lightbox-overlay.is-open { opacity: 1; visibility: visible; }
.lightbox-img {
  max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5); cursor: zoom-out;
  transform: scale(.94); transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.lightbox-overlay.is-open .lightbox-img { transform: scale(1); }

/* ── 스크롤 등장 효과 ── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .lightbox-img { transition: none; }
}