/* ================================================================
   올빼미청소 style.css v72 — 2026-04-11 lead-strong inherit — 밝은 버전
   기존 레이아웃 구조 동일 / 어두운 네이비 → 밝고 깔끔하게
   ================================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:'Pretendard Variable','Pretendard',
    -apple-system,'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
  font-size:15px;line-height:1.72;
  color:#1a1a1a;background:#f8f9fb;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  word-break:keep-all;overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;font:inherit;border:none;background:none}

/* ── 색상 변수 ── */
:root{
  /* 기본 */
  --green:#03C75A;
  --green-d:#018a40;
  --green-bg:#e6f9f0;
  --green-bd:#86d4a8;
  --navy:#0b1d33;
  --blue-mid:#1a4a7a;

  /* 텍스트 */
  --text:#1a1a1a;
  --text2:#374151;
  --text3:#6b7280;

  /* 배경 */
  --bg:#f8f9fb;
  --bg2:#eef2f7;
  --white:#ffffff;

  /* 테두리 */
  --bd:#e2e8f0;
  --bd2:#cbd5e1;

  /* 카드 */
  --shadow:0 1px 3px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.04);
  --shadow-h:0 4px 20px rgba(0,0,0,.1),0 1px 4px rgba(0,0,0,.06);

  /* 기타 */
  --kakao:#FEE500;
  --radius:10px;
  --radius-s:6px;
  --max-w:1100px;

  /* index.html 인라인 변수 호환 */
  --brand:#0b1d33;
  --brand-2:#1a4a7a;
  --sub:#4b5563;
  --muted:#9ca3af;
  --line:#e2e8f0;
  --bg-panel:#ffffff;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.04);
  --emerald:#03C75A;
  --coral:#f05438;
}

/* ── 레이아웃 ── */
.wrap,.container{max-width:var(--max-w);margin:0 auto;padding:0 20px}

/* ── 상단 공지바 ── */
.topbar{
  background:var(--navy);color:#e8f0f8;letter-spacing:.01em;
  text-align:center;padding:8px 20px;
  font-size:12.5px;font-weight:500;letter-spacing:.01em;
}
.topbar-live{background:#0f7a3c;color:#fff}
.topbar-night{background:#1e3a6e;color:#fff}
.topbar-dawn{background:#3b2d6b;color:#fff}

/* ── 헤더 ── */
.site-header{
  background:#fff;
  border-bottom:2px solid var(--green);
  position:sticky;top:0;z-index:900;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.nav{display:flex;align-items:center;gap:8px;height:62px}
.logo a{
  font-size:19px;font-weight:800;color:var(--navy);
  letter-spacing:-.025em;
}
.logo small{
  display:block;font-size:12px;color:var(--text3);
  margin-top:-1px;font-weight:400;
}
.menu{display:flex;align-items:center;gap:2px;margin-left:auto}
.menu a{
  font-size:13.5px;color:var(--text2);padding:7px 11px;
  border-radius:var(--radius-s);transition:background .15s,color .15s;
  white-space:nowrap;
}
.menu a:hover{background:var(--bg);color:var(--navy)}
.menu a.cta{
  background:var(--green);color:#fff;font-weight:700;
  padding:8px 18px;border-radius:var(--radius-s);margin-left:6px;
}
.menu a.cta:hover{background:var(--green-d)}
.menu-toggle{
  display:none;padding:11px;color:var(--navy);min-width:44px;min-height:44px;
  border-radius:var(--radius-s);margin-left:auto;
}
.menu-toggle svg{width:22px;height:22px;display:block}

/* ── 페이지 히어로 (서비스 페이지) ── */
.page-hero{
  background:linear-gradient(135deg,#0b1d33 0%,#1a3a5c 100%);
  color:#fff;padding:48px 0 40px;
}
.page-box{max-width:760px}
.eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  background:#0b6e38;color:#ffffff;
  font-size:12.5px;font-weight:700;
  padding:5px 13px;border-radius:20px;margin-bottom:16px;
  border:1px solid #0b6e38;
}
.dot{
  width:7px;height:7px;border-radius:50%;
  background:#4ade80;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.4);
}
.breadcrumb{font-size:12px;color:#6b7280;margin-bottom:8px;}
.page-box h1{
  font-size:clamp(22px,3.5vw,32px);font-weight:900;
  color:#0b1d33;margin-bottom:16px;letter-spacing:-.03em;
  line-height:1.28;
}
.lead{
  font-size:15px;color:#374151;line-height:1.78;
  margin-bottom:22px;max-width:680px;
}
.lead strong{color:#fff;font-weight:700;}
.hero-points{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:8px;margin-bottom:24px;
}
.hero-points li{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;color:#1f2937;font-weight:500;
  background:#fff;border:1px solid var(--bd2);
  padding:9px 13px;border-radius:var(--radius-s);
}
.hero-points li::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--green);flex-shrink:0;
}
/* ── hero-list (areas · local 페이지) ── */
.hero-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:8px;margin-bottom:24px;
}
.hero-list li{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;color:#1f2937;font-weight:500;
  background:#fff;border:1px solid var(--bd2);
  padding:9px 13px;border-radius:var(--radius-s);
}
.hero-list li::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--green);flex-shrink:0;
}

.button-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.hero-note{font-size:12.5px;color:rgba(255,255,255,.75);line-height:1.6}
.page-box .hero-note{color:rgba(255,255,255,.75);}

/* ── index.html 히어로 ── */
.hero{
  position:relative;
  background:linear-gradient(135deg,var(--navy) 0%,#1a3a5c 60%,#0f6040 100%);
  overflow:hidden;
}
/* 히어로 배경 도트 패턴 — 빈 공간 채움 */
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:24px 24px;
  pointer-events:none;
}
/* 히어로 h1 뒤 글로우 — 시각적 앵커 */
.hero-card::before{
  content:'';position:absolute;top:-40px;left:-60px;
  width:320px;height:320px;
  background:radial-gradient(circle,rgba(3,199,90,.12) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;z-index:-1;
  animation:heroGlow 6s ease-in-out infinite alternate;
}
.hero-card{position:relative}
@keyframes heroGlow{
  0%{opacity:.6;transform:scale(1)}
  100%{opacity:1;transform:scale(1.15)}
}
.hero-video{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;opacity:.18;
  filter:grayscale(50%);
  pointer-events:none;
}
.hero-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:32px;min-height:520px;align-items:center;
  position:relative;z-index:2;padding:52px 0;
}
.hero-card h1{
  font-size:clamp(24px,3.5vw,38px);font-weight:800;
  color:#fff;line-height:1.25;margin-bottom:16px;letter-spacing:-.025em;
  text-shadow:0 2px 20px rgba(0,0,0,.3);
}
.hero-card .eyebrow{
  background:rgba(3,199,90,.25);color:#a7f3d0;
  border-color:rgba(74,222,128,.5);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.hero-card .eyebrow .dot{background:#4ade80;animation:pulse-dot 2s infinite}
.hero-card .lead{color:rgba(255,255,255,.9)}
.hero-card .lead strong{color:#fff}
.hero-card .hero-points li{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);
  color:#ffffff;
  font-weight:500;
}
.hero-card .hero-points li::before{background:#4ade80}
.hero-card .hero-note{color:rgba(255,255,255,.72)}
.hero-media-card{
  display:flex;flex-direction:column;gap:12px;
}
.hero-media-frame{
  position:relative;border-radius:16px;overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.3),0 0 0 1px rgba(74,222,128,.2);
}
.hero-media-frame img{
  width:100%;height:360px;object-fit:cover;display:block;
}
.hero-media-badge{
  position:absolute;left:12px;
  background:rgba(255,255,255,.95);
  border-radius:10px;padding:10px 14px;
  font-size:12px;line-height:1.5;color:var(--navy);
  box-shadow:0 2px 12px rgba(0,0,0,.15);
}
.hero-media-badge.top{top:12px}
.hero-media-badge.bottom{bottom:12px}
.hero-media-badge strong{display:block;font-weight:700;font-size:12.5px}
.hero-stat-stack{display:flex;flex-direction:column;gap:8px}
.stat-box{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  border-radius:10px;padding:12px 16px;color:rgba(255,255,255,.9);
  font-size:13px;line-height:1.6;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .2s;
}
.stat-box:hover{background:rgba(255,255,255,.18)}
.stat-box strong{color:#fff;display:block;font-weight:700;margin-bottom:2px}

/* ── 버튼 ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 24px;border-radius:var(--radius-s);
  font-size:14px;font-weight:700;white-space:nowrap;
  transition:background .15s,transform .1s,box-shadow .15s;
}
.btn:active{transform:scale(.97)}
.btn.primary{background:#03C75A;color:#fff;font-weight:800;box-shadow:0 3px 12px rgba(3,199,90,.4);letter-spacing:-.01em;}
.btn.primary:hover{background:#018a40;box-shadow:0 6px 20px rgba(3,199,90,.5);transform:translateY(-1px);}
.btn.green{background:#f0fdf6;color:#065f36;border:2px solid #0f7a3c;font-weight:700;}
.btn.green:hover{background:#e6f9f0;border-color:#018a40;}
.btn.secondary{background:#fff;color:#0b1d33;border:2px solid #9ca3af;font-weight:600;}
.btn.secondary:hover{background:#f8f9fb;border-color:#6b7280;}
.btn.kakao{background:var(--kakao);color:#191919}
.btn.kakao:hover{background:#f0d600}

/* ── 섹션 ── */
.section{background:#fff;padding:56px 0}
.section.alt{background:var(--bg);padding:56px 0}
.section.highlight{
  background:#f4f8f4;
  padding:56px 0;
}
.section-head{margin-bottom:28px}
.section-head h2{
  font-size:clamp(19px,2.5vw,26px);font-weight:800;
  color:var(--navy);margin-bottom:8px;letter-spacing:-.02em;
}
.section-head h2::after{
  content:'';display:block;width:40px;height:3px;
  background:var(--green);border-radius:2px;margin-top:8px;
  box-shadow:0 1px 4px rgba(3,199,90,.45);
}
.section-head p{font-size:14px;color:#374151;line-height:1.7;}

/* ── 카드 ── */
.card{
  background:#fff;border:1px solid var(--bd);
  border-radius:var(--radius);padding:22px;
  transition:box-shadow .2s,transform .2s;
}
.card:hover{box-shadow:var(--shadow-h);transform:translateY(-2px)}
.card h3{font-size:14.5px;font-weight:700;color:var(--navy);margin-bottom:9px;line-height:1.4}
.card p{font-size:13.5px;color:var(--text2);line-height:1.75}
.card strong{color:var(--navy);font-weight:700}
.metric{
  display:inline-block;margin-top:12px;
  font-size:12px;font-weight:700;
  background:var(--green-bg);color:#0f7a3c;
  padding:4px 11px;border-radius:20px;
  border:1px solid var(--green-bd);
}
.kicker{
  display:inline-block;margin-top:10px;
  font-size:12px;font-weight:700;
  background:#eff3ff;color:#3b5bdb;
  padding:4px 10px;border-radius:20px;
}

/* ── 패널 ── */
.panel{
  background:#fff;border:1px solid var(--bd);
  border-radius:var(--radius);padding:22px;
}
.panel h3{
  font-size:14.5px;font-weight:700;color:#0b1d33;
  margin-bottom:10px;line-height:1.4;
  padding-left:12px;border-left:4px solid #03C75A;
  letter-spacing:-.01em;
}
.panel p{font-size:13.5px;color:#374151;line-height:1.75}
.panel strong{font-weight:700;color:var(--navy)}

/* ── 그리드 ── */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}

/* ── 비용 테이블 ── */
.cost-table-wrap{overflow-x:auto}
.cost-table{
  width:100%;border-collapse:collapse;background:#fff;
  border:1px solid var(--bd);border-radius:var(--radius);
  overflow:hidden;font-size:13.5px;
}
.cost-table th{
  background:var(--bg2);font-weight:700;color:var(--navy);
  padding:13px 16px;text-align:left;
  border-bottom:2px solid var(--green);font-size:13px;
}
.cost-table td{
  padding:12px 16px;color:var(--text2);
  border-bottom:1px solid var(--bd);
}
.cost-table tr:last-child td{border-bottom:none}
.cost-table tr:hover td{background:#f8fffe}

/* ── FAQ ── */
details{
  background:#fff;border:1px solid var(--bd);
  border-radius:var(--radius-s);margin-bottom:8px;
  overflow:hidden;
}
summary{
  padding:14px 18px;font-size:14px;font-weight:600;
  color:var(--navy);cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;
  list-style:none;gap:12px;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:'';width:16px;height:16px;flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s;
}
details[open] summary::after{transform:rotate(180deg)}
summary:hover{background:var(--bg)}
details[open] summary{
  background:var(--green-bg);color:#0f7a3c;
  border-bottom:1px solid var(--green-bd);
}
details[open] summary::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a3c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
details p{padding:14px 18px;font-size:13.5px;color:var(--text2);line-height:1.75}

/* ── 중간 CTA ── */
.mid-cta{
  background:linear-gradient(135deg,var(--navy) 0%,#1a3a5c 100%);
  padding:40px 20px;text-align:center;
}
.container.mid-cta{background:inherit;padding:40px 20px}
.mid-cta-text{font-size:17px;font-weight:700;color:#fff;margin-bottom:6px}
.mid-cta-buttons{
  display:flex;flex-wrap:wrap;gap:10px;
  justify-content:center;margin:18px 0 10px;
}
.mid-cta-sub{font-size:12.5px;color:rgba(255,255,255,.78)}

/* ── CTA 박스 ── */
.cta-box{
  background:linear-gradient(135deg,#f0f9f4,#e8f4ff);
  border:1px solid var(--bd);border-radius:var(--radius);
  padding:40px 24px;text-align:center;
}
.cta-box h2{font-size:22px;font-weight:800;color:var(--navy);margin-bottom:10px}
.cta-box p{font-size:14.5px;color:var(--text2);margin-bottom:22px}
.cta-box .button-row{justify-content:center}

/* ── 서비스 아이콘 그리드 ── */
.service-icon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:10px;
}
.service-icon-card{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:15px 8px;background:#fff;
  border:1px solid var(--bd);border-radius:var(--radius);
  font-size:12.5px;color:var(--text2);font-weight:600;text-align:center;
  transition:all .15s;
}
.service-icon-card:hover{
  background:var(--green-bg);border-color:var(--green-bd);
  color:#0f7a3c;transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.service-icon-card .icon{font-size:22px;line-height:1}

/* ── SEO 텍스트 ── */
.service-seo p,.seo-text-block p{
  font-size:13.5px;color:var(--text3);line-height:1.8;margin-bottom:10px;
}
.seo-text-block{max-width:780px;margin:0 auto}
.seo-text-block h3{
  font-size:16px;font-weight:700;color:var(--navy);margin:24px 0 8px;
}
.seo-text-block a{color:var(--brand-2);text-decoration:underline}

/* ── 갤러리 ── */
.gallery-grid,.gallery-scroll{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px;
}
.photo-card{border-radius:var(--radius);overflow:hidden;border:1px solid var(--bd)}
.photo-card img{width:100%;height:180px;object-fit:cover}

/* ── 비교 ── */
.comparison-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.comparison-grid,.comparison-card{
  background:#fff;border:1px solid var(--bd);
  border-radius:var(--radius);padding:20px;
}
.comparison-card h3{font-size:14.5px;font-weight:700;color:var(--navy);margin-bottom:10px}

/* ── 비교 슬라이더 ── */
.compare-slider{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--bd)}
.compare-slider .before,.compare-slider .after{position:absolute;inset:0}
.compare-slider .after{overflow:hidden;width:50%}
.divider{position:absolute;top:0;bottom:0;width:2px;background:#fff;transform:translateX(-50%);pointer-events:none}
.handle{
  position:absolute;top:50%;width:36px;height:36px;
  background:#fff;border:2px solid var(--bd2);
  border-radius:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow);pointer-events:none;
}
.compare-range{position:absolute;inset:0;opacity:0;cursor:ew-resize;width:100%;z-index:10}

/* ── 통계 ── */
.stat-counter-strip{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:24px 0}
.stat-counter-item,.stat-box-light{
  text-align:center;background:#fff;border:1px solid var(--bd);
  border-radius:var(--radius);padding:18px 24px;flex:1;min-width:120px;
}
.num{font-size:28px;font-weight:800;color:var(--navy)}
.num-unit{font-size:14px;color:var(--text3);margin-left:2px}
.label{font-size:12.5px;color:var(--text2);margin-top:4px}

/* ── 인증 칩 ── */
.cred-strip{display:flex;gap:12px;overflow-x:auto;padding:4px 0 12px;scroll-snap-type:x mandatory}
.cred-strip::-webkit-scrollbar{height:4px}
.cred-strip::-webkit-scrollbar-thumb{background:var(--bd);border-radius:4px}
.cred-chip{
  display:flex;align-items:center;gap:12px;min-width:240px;
  padding:14px 16px;background:#fff;border:1px solid var(--bd);
  border-radius:12px;box-shadow:var(--shadow-sm);
  scroll-snap-align:start;flex-shrink:0;
}
.cred-chip img{width:60px;height:60px;border-radius:10px;object-fit:cover;flex-shrink:0}
.cred-chip strong{font-size:14px;font-weight:700;color:var(--navy);white-space:nowrap;display:block}
.cred-chip span{font-size:12px;color:var(--muted)}
@media(min-width:820px){.cred-strip{flex-wrap:wrap;overflow-x:visible}.cred-chip{min-width:0;flex:1 1 calc(33.333% - 8px)}}

/* ── 안도 카드 ── */
.relief-card{
  background:#fff;border:1px solid var(--bd);border-radius:var(--radius);padding:22px;
  transition:box-shadow .2s,transform .2s;
}
.relief-card:hover{box-shadow:var(--shadow-h);transform:translateY(-2px)}
.relief-card h3{font-size:14.5px;font-weight:700;color:#0b1d33;margin-bottom:8px;letter-spacing:-.01em;}
.relief-card p{font-size:13.5px;color:var(--text2);line-height:1.7}

/* ── 견적 배너 ── */
.estimate-banner{
  display:flex;flex-direction:column;gap:10px;margin-top:16px;
}
.estimate-link{
  display:flex;align-items:center;gap:10px;
  padding:14px 20px;background:#34d399;color:#0b1d33;
  border-radius:var(--radius);font-size:14px;font-weight:700;
  transition:background .15s;cursor:pointer;
  border:1px solid rgba(255,255,255,.15);
}
.estimate-link:hover{background:#6ee7b7}
.estimate-link .est-icon{font-size:22px;flex-shrink:0}
.estimate-link .est-text{display:flex;flex-direction:column}
.estimate-link .est-title{font-size:14px;font-weight:800;color:#0b1d33}
.estimate-link .est-sub{font-size:12px;color:rgba(11,29,51,.6);margin-top:1px}

/* ── 자동견적 모달 오버레이 ── */
.estimate-modal-overlay{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:20px;
}
.estimate-modal-overlay.active{display:flex}
.estimate-modal{
  position:relative;width:100%;max-width:480px;height:85vh;max-height:820px;
  background:#fff;border-radius:16px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.estimate-modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;background:var(--navy);color:#fff;
}
.estimate-modal-header strong{font-size:15px;font-weight:700}
.estimate-modal-close{
  width:32px;height:32px;border-radius:50%;border:none;
  background:rgba(255,255,255,.15);color:#fff;font-size:18px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.estimate-modal-close:hover{background:rgba(255,255,255,.3)}
.estimate-modal iframe{
  width:100%;height:calc(100% - 52px);border:none;
}
@media(max-width:640px){
  .estimate-modal{max-width:100%;height:90vh;border-radius:12px 12px 0 0;padding-bottom:env(safe-area-inset-bottom,0px)}
  .estimate-modal-overlay{align-items:flex-end;padding:0}
}

/* ── 블로그 피드 ── */
.blog-feed-section{
  background:var(--bg);border-top:1px solid var(--bd);
  padding:44px 0 40px;
}
.blog-feed-section h2{font-size:19px;font-weight:800;color:var(--navy);margin-bottom:6px}
.blog-feed-section>p{font-size:13.5px;color:var(--text2);margin-bottom:18px}
.blog-feed-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px;margin-bottom:14px;
}
.blog-feed-card{
  display:block;background:#fff;border:1px solid var(--bd);
  border-radius:var(--radius-s);padding:14px 16px;
  transition:background .15s,border-color .15s;
}
.blog-feed-card:hover{background:var(--green-bg);border-color:var(--green-bd)}
.blog-feed-card strong{
  display:block;font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:4px;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.blog-feed-card span{font-size:12px;color:var(--green)}
.blog-feed-date{display:block;font-size:12px;color:var(--text3);margin-top:4px}
#blog-feed-notice{display:none}/* 방문자에게 숨김 */
.blog-feed-actions{display:flex;gap:10px;flex-wrap:wrap}
.primary-link{
  display:inline-flex;align-items:center;padding:10px 20px;
  background:var(--green);color:#fff;border-radius:var(--radius-s);
  font-size:13.5px;font-weight:700;transition:background .15s;
}
.primary-link:hover{background:var(--green-d)}
.secondary-link{
  display:inline-flex;align-items:center;padding:10px 20px;
  background:#fff;color:var(--navy);border:1px solid var(--bd2);
  border-radius:var(--radius-s);font-size:13.5px;font-weight:600;
}
.secondary-link:hover{background:var(--bg)}

/* ── 서비스 페이지 푸터 (.footer) ── */
.footer{
  background:var(--navy);color:rgba(255,255,255,.7);
  padding:44px 0 28px;
}
.footer-links-box{
  display:grid;grid-template-columns:1fr 2fr 1fr;
  gap:28px;align-items:start;
}
.footer-branding strong{color:#fff;font-size:15px;font-weight:800;display:block;margin-bottom:6px}
.footer-branding p{font-size:12.5px;line-height:1.7}
.footer-service-links{display:flex;flex-wrap:wrap;gap:5px 12px}
.footer-service-links a{font-size:12px;color:rgba(255,255,255,.55);transition:color .15s}
.footer-service-links a:hover{color:#fff}
.footbox{font-size:12px;line-height:1.85;color:rgba(255,255,255,.45)}


/* ── 인덱스 특성 카드 스트립 ── */
.feat-strip{background:var(--bg2);padding:32px 0}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.feat-card{background:#fff;border:1px solid var(--bd);border-radius:var(--radius);padding:16px 18px;display:flex;align-items:flex-start;gap:12px}
.feat-icon{font-size:24px;flex-shrink:0}
.feat-card strong{display:block;font-size:13px;color:var(--navy);margin-bottom:4px}
.feat-card span{font-size:12.5px;color:var(--text2);line-height:1.6}

/* ── FAQ 그룹 제목 ── */
.faq-group{font-size:14px;font-weight:700;color:var(--text2);margin:18px 0 10px;padding-left:4px}
.faq-group:first-of-type{margin-top:0}

/* ── 섹션 변형 ── */
.section-process{padding:40px 0;background:#fff}
.section-emergency{padding:44px 0;background:linear-gradient(180deg,#fefce8 0%,#fff 100%)}
.section-final-cta{background:linear-gradient(135deg,#0b1d33 0%,#143050 100%);color:#fff}
.section-final-cta .wrap{text-align:center;padding:48px 20px}
.section-final-cta h2{color:#fff;font-size:clamp(22px,4vw,32px);margin:0 0 12px}
.section-final-cta .cta-desc{color:rgba(255,255,255,.75);font-size:15px;line-height:1.8;max-width:560px;margin:0 auto 28px}
.section-final-cta .cta-buttons{display:flex;flex-direction:column;gap:12px;max-width:400px;margin:0 auto}
.section-final-cta .cta-btn-primary{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 24px;background:#0cc078;color:#0b1d33;border-radius:16px;text-decoration:none;font-weight:800;font-size:17px}
.section-final-cta .cta-btn-secondary{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 24px;background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.25);border-radius:16px;text-decoration:none;font-weight:700;font-size:16px}
.section-final-cta .cta-sub{font-weight:400;font-size:14px;opacity:.7}
.section-final-cta .cta-sub-alt{font-weight:400;font-size:14px;opacity:.6}
.section-final-cta .seo-bottom{color:rgba(255,255,255,.4);font-size:13px;line-height:1.9;max-width:700px;margin:28px auto 0;text-align:left}

/* ── 지역별 자주 찾는 서비스 박스 ── */
.local-popular-box{margin-top:20px;padding:20px;background:#fff;border:1px solid var(--bd);border-radius:var(--radius)}
.local-popular-box h3{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:12px}

/* ── 유틸리티 ── */
.text-center{text-align:center}
.mt-sm{margin-top:16px}
.mt-md{margin-top:18px}

/* ── 전체 사이트 공통 푸터 (.site-footer) ── */
.site-footer{background:var(--navy);color:rgba(255,255,255,.7);padding:48px 0 28px}
.site-footer .container{max-width:var(--max-w);margin:0 auto;padding:0 20px}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:28px;margin-bottom:28px;align-items:start;
}
.footer-col{}
.footer-brand{font-size:15px;font-weight:800;color:#fff;margin-bottom:10px;display:block}
.footer-col>p{font-size:12.5px;line-height:1.75;margin-bottom:5px;color:rgba(255,255,255,.65)}
.footer-phone a{display:block;font-size:15px;font-weight:700;color:#fff;margin:10px 0 4px}
.footer-sub{font-size:12px;color:rgba(255,255,255,.4)}
.footer-title{
  font-size:12px;font-weight:700;color:rgba(255,255,255,.8);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;display:block;
}
.footer-links{display:flex;flex-direction:column;gap:7px}
.footer-links a{font-size:12.5px;color:rgba(255,255,255,.55);transition:color .15s}
.footer-links a:hover{color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:18px;font-size:12px;
  color:rgba(255,255,255,.35);line-height:1.85;
}
.footer-bottom p{margin-bottom:2px}

/* ── 플로팅 사이드바 ── */
.float-sidebar{
  position:fixed;right:16px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:8px;z-index:800;
}
.float-sidebar a{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  background:#fff;border:1px solid var(--bd);border-radius:var(--radius);
  padding:10px 12px;font-size:12px;font-weight:600;color:var(--text2);
  box-shadow:var(--shadow);min-width:52px;text-align:center;
  transition:all .15s;
}
.float-sidebar a:hover{background:var(--green-bg);border-color:var(--green-bd);color:#0f7a3c}
.float-sidebar a.kakao-float{background:var(--kakao);border-color:#e8d000;color:#191919}
.float-sidebar a.kakao-float:hover{background:#f0d600}
.fs-icon{font-size:18px;line-height:1}

/* ── 하단 고정 ── */
.sticky-actions{
  display:none;position:fixed;bottom:0;left:0;right:0;
  z-index:850;background:#fff;border-top:1px solid var(--bd);
  padding:10px 16px;box-shadow:0 -4px 16px rgba(0,0,0,.08);
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
}
.sticky-actions .inner{display:flex;gap:8px;max-width:var(--max-w);margin:0 auto}
.sticky-actions .btn{flex:1;padding:12px 8px;font-size:13.5px}

/* ── 토글 버튼 ── */
.svc-toggle-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1px solid var(--bd2);
  border-radius:var(--radius-s);padding:8px 16px;
  font-size:13px;font-weight:600;color:var(--navy);
  transition:background .15s;margin-top:12px;
}
.svc-toggle-btn:hover{background:var(--bg)}

/* ── 기타 ── */
.scroll-row{overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:manipulation;overscroll-behavior-y:contain}
.note{font-size:12.5px;color:var(--text3);margin-top:8px;line-height:1.7}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.fade-step{opacity:0;transform:translateY(14px);animation:fadeUp .5s ease forwards}
.fade-1{animation-delay:.05s}.fade-2{animation-delay:.15s}
.fade-3{animation-delay:.25s}.fade-4{animation-delay:.35s}
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.info-link-card{
  background:#fff;border:1px solid var(--bd);border-radius:var(--radius);
  padding:18px;transition:box-shadow .2s,transform .2s;
}
.info-link-card:hover{box-shadow:var(--shadow-h);transform:translateY(-2px)}

/* ================================================================
   반응형
   ================================================================ */
@media(max-width:900px){
  .float-sidebar{display:none}
  .sticky-actions{display:block}
  .footer-links-box{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
  .hero-grid{grid-template-columns:1fr;min-height:auto}
  .hero-media-card{display:none}
  .section{padding:44px 0}
  .section.alt{padding:44px 0}
}
@media(max-width:640px){
  body{font-size:14px}
  .topbar{font-size:12px;padding:7px 12px}
  .nav{height:56px}
  .logo a{font-size:17px}
  .logo small{display:none}
  .menu{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:#fff;border-top:1px solid var(--bd);
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.1);
  }
  .menu.open{display:flex}
  .menu a{padding:12px 14px;border-radius:var(--radius-s);font-size:14px}
  .menu a.cta{margin:6px 0 0;text-align:center}
  .menu-toggle{display:flex;align-items:center;justify-content:center}
  .site-header .wrap.nav{position:relative}
  .page-hero{padding:32px 0 28px}
  .page-box h1{font-size:22px}
  .hero-grid{padding:36px 0}
  .hero-card h1{font-size:24px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .footer-links-box{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .service-icon-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
  .section{padding:32px 0}
  .section.alt{padding:32px 0}
  .section-head h2{font-size:20px}
  .mid-cta{padding:28px 16px}
  .blog-feed-grid{grid-template-columns:1fr}
  .blog-feed-actions{flex-direction:column}
  .primary-link,.secondary-link{justify-content:center}
  .comparison-split{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .cta-box{padding:28px 16px}
  .sticky-actions{padding:8px 12px}
}
@media(max-width:380px){
  .button-row{flex-direction:column}
  .btn{width:100%;justify-content:center}
}

/* ── 태블릿 (768px) ── */
@media(max-width:768px){
  .hero-grid{grid-template-columns:1fr;padding:36px 20px}
  .hero-media-card{display:none}
  .blog-feed-grid{grid-template-columns:repeat(2,1fr)}
  .service-icon-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr;gap:20px}
  .stat-counter-strip{gap:8px}
  .stat-counter-item{padding:14px 16px}
  .num{font-size:22px}
}

@media print{
  .topbar,.site-header,.float-sidebar,.sticky-actions,.footer,.site-footer,.mid-cta{display:none}
  .section,.section.alt{padding:24px 0}
}

/* ── 지역별 서비스 링크 그리드 (서비스 페이지 → local/ 내부 링크) ── */
.local-link-grid{display:flex;flex-direction:column;gap:20px}
.local-link-group h3{font-size:13px;font-weight:700;color:var(--text3,#9ca3af);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;padding-left:2px}
.local-link-tags{display:flex;flex-wrap:wrap;gap:8px}
.local-link-tags a{display:inline-block;padding:7px 15px;background:var(--white,#fff);border:1px solid var(--bd,#e2e8f0);border-radius:20px;font-size:13px;font-weight:600;color:var(--text2,#4b5563);text-decoration:none;transition:all .15s;white-space:nowrap}
.local-link-tags a:hover{background:var(--green-bg,#edfaf3);border-color:var(--green-bd,#b6e8c9);color:#0f7a3c;transform:translateY(-1px)}
@media(max-width:640px){.local-link-tags a{padding:10px 14px;font-size:12.5px;min-height:44px;display:inline-flex;align-items:center}}

/* ── 지역별 서비스 상세 링크 (area 페이지 → local/ 내부 링크) ── */
.local-region-grid{display:flex;flex-direction:column;gap:14px}
.local-region-item{padding:12px 16px;background:var(--white,#fff);border:1px solid var(--bd,#e2e8f0);border-radius:var(--radius,10px)}
.local-region-item strong{display:block;font-size:13.5px;font-weight:700;color:var(--navy,#0b1d33);margin-bottom:8px}
.local-region-item .local-link-tags{gap:6px}
.local-region-item .local-link-tags a{font-size:12.5px;padding:10px 14px;min-height:44px;display:inline-flex;align-items:center}
@media(min-width:640px){.local-region-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}}


/* ── 비교 테이블 (index.html과 동일) ── */
.compare-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--bd);border-radius:var(--radius);overflow:hidden;font-size:13.5px}
.compare-table th{padding:14px 16px;font-weight:700;font-size:13px;text-align:left;border-bottom:2px solid var(--bd)}
.compare-table th.other{background:#fef2f2;color:#991b1b;width:35%}
.compare-table th.us{background:var(--green-bg);color:#0f7a3c;width:35%}
.compare-table td{padding:13px 16px;border-bottom:1px solid var(--bd);vertical-align:top;line-height:1.65}
.compare-table td:first-child{font-weight:700;color:var(--navy);white-space:nowrap;width:15%;font-size:13px}
.compare-table td.other{color:#6b7280;background:#fffbfb}
.compare-table td.us{color:var(--text);background:#f8fffe}
.compare-table td.us strong{color:#0f7a3c}
.compare-table tr:last-child td{border-bottom:none}
@media(max-width:640px){.compare-table{font-size:12.5px}.compare-table td:first-child{white-space:normal}.compare-table th,.compare-table td{padding:10px 12px}}

/* ── 스크롤 등장 애니메이션 ── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}


/* ── 프로세스 플로우 인포그래픽 ── */
.process-flow{display:flex;align-items:flex-start;justify-content:center;gap:0;flex-wrap:wrap;padding:8px 0}
.process-step{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;min-width:120px;max-width:180px;padding:8px}
.process-num{width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.process-icon{font-size:28px;margin-bottom:8px;line-height:1}
.process-step strong{font-size:14px;color:var(--navy);margin-bottom:4px}
.process-step span{font-size:12.5px;color:var(--text2);line-height:1.5}
.process-arrow{font-size:20px;color:var(--green);font-weight:700;align-self:center;padding:0 4px;margin-top:30px}
@media(max-width:640px){.process-arrow{display:none}.process-flow{gap:8px}.process-step{min-width:calc(50% - 8px);border:1px solid var(--bd);border-radius:var(--radius);padding:14px 8px;background:#fff}}

/* ── 비용 비주얼 바 ── */
.cost-visual-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.cost-visual-card{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border:1px solid var(--bd);border-radius:var(--radius-s)}
.cost-visual-icon{font-size:20px;flex-shrink:0}
.cost-visual-label{font-size:12.5px;font-weight:600;color:var(--navy);min-width:90px}
.cost-visual-bar{height:8px;background:linear-gradient(90deg,var(--green),#4ade80);border-radius:4px;min-width:20px}
.cost-visual-range{font-size:13px;font-weight:700;color:var(--green-d);white-space:nowrap;margin-left:auto}

/* ── 체크리스트 비주얼 ── */
.checklist-visual{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.checklist-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border:1px solid var(--bd);border-radius:var(--radius-s);transition:all .15s}
.checklist-item:hover{border-color:var(--green-bd);background:var(--green-bg)}
.checklist-item .check{width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.checklist-item strong{display:block;font-size:13px;color:var(--navy)}
.checklist-item span{display:block;font-size:11.5px;color:var(--text3)}

/* ── 실시간 상담 가능 표시 ── */
.live-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;display:inline-block;margin-right:4px;animation:pulse-dot 2s infinite;vertical-align:middle}
@keyframes pulse-dot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(74,222,128,.6)}50%{opacity:.8;box-shadow:0 0 0 6px rgba(74,222,128,0)}}
.float-status{background:var(--green);color:#fff;border:none;border-radius:var(--radius);padding:8px 12px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:5px;box-shadow:0 2px 12px rgba(3,199,90,.3);cursor:default}
.float-status .live-dot{background:#fff;width:7px;height:7px}

/* ── 긴급 상황별 가이드 ── */
.emergency-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.emergency-card{background:#fff;border:1px solid var(--bd);border-radius:var(--radius);padding:18px 20px;transition:box-shadow .2s}
.emergency-card:hover{box-shadow:var(--shadow-h)}
.ec-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ec-icon{font-size:22px;line-height:1}
.ec-header strong{font-size:14.5px;color:var(--navy)}
.ec-steps{padding-left:20px;margin-bottom:14px}
.ec-steps li{font-size:13px;color:var(--text2);line-height:1.7;margin-bottom:6px}
.ec-steps li strong{color:var(--navy);font-weight:700}
.ec-cta{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:var(--green);color:#fff;border-radius:var(--radius-s);font-size:13px;font-weight:700;text-decoration:none;transition:background .15s}
.ec-cta:hover{background:var(--green-d)}


/* ── 지역 건물 유형 인포그래픽 ── */
.btype-grid{display:flex;flex-direction:column;gap:12px}
.btype-row{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:#fff;border:1px solid var(--bd);border-radius:var(--radius);transition:box-shadow .15s}
.btype-row:hover{box-shadow:var(--shadow-h)}
.btype-icon{font-size:24px;flex-shrink:0;margin-top:2px}
.btype-info{flex:1;min-width:0}
.btype-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.btype-header strong{font-size:14px;color:var(--navy)}
.btype-pct{font-size:14px;font-weight:800;color:var(--green)}
.btype-bar-wrap{height:8px;background:var(--bg2);border-radius:4px;overflow:hidden;margin-bottom:6px}
.btype-bar{height:100%;background:linear-gradient(90deg,var(--green),#4ade80);border-radius:4px;transition:width .6s ease}
.btype-detail{display:flex;justify-content:space-between;font-size:12px}
.btype-area{color:var(--text3)}
.btype-demand{color:var(--green-d);font-weight:600}
@media(max-width:640px){.btype-header strong{font-size:13px}.btype-detail{flex-direction:column;gap:2px}}


/* ── local 페이지 미니 프로세스 ── */
.mp-step{display:flex;align-items:center;gap:5px;padding:6px 12px;background:#fff;border:1px solid var(--bd);border-radius:var(--radius-s)}
.mp-icon{font-size:18px}
.mp-text{font-size:12.5px;font-weight:600;color:var(--navy);white-space:nowrap}
.mp-arrow{font-size:16px;color:var(--green);font-weight:700}
@media(max-width:480px){.mp-step{padding:5px 8px}.mp-text{font-size:11.5px}}

/* ── index.html 전용 컴포넌트 (index-critical.css 통합) ── */
/* ── 실시간 출동 티커 ── */
.hero-ticker{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.hero-ticker-item{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:9px 13px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.8);animation:tickFadeIn 1s ease;min-height:38px}
.hero-ticker-item .tick-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.hero-ticker-item .tick-dot.live{background:#4ade80;box-shadow:0 0 6px rgba(74,222,128,.5)}
.hero-ticker-item .tick-dot.done{background:#60a5fa}
.hero-ticker-item .tick-dot.scheduled{background:#fbbf24}
.hero-ticker-item .tick-region{font-weight:700;color:#4ade80;white-space:nowrap}
.hero-ticker-item .tick-time{margin-left:auto;font-size:11px;color:rgba(255,255,255,.35);white-space:nowrap}
.hero-trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.hero-trust-item{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:10px 12px;text-align:center}
.hero-trust-num{display:block;font-size:18px;font-weight:800;color:#4ade80;line-height:1.2}
.hero-trust-label{display:block;font-size:11px;color:rgba(255,255,255,.5);margin-top:3px;line-height:1.3}
.hero-trust-num.num{font-size:18px;color:#4ade80}
/* 미니 프로세스 인포그래픽 스트립 */
.hero-process-strip{
  display:flex;align-items:center;gap:0;margin:16px 0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:12px;padding:14px 16px;
}
.hero-ps-step{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
}
.hero-ps-icon{
  width:40px;height:40px;border-radius:50%;
  background:rgba(74,222,128,.15);border:1.5px solid rgba(74,222,128,.35);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;
}
.hero-ps-label{font-size:11px;font-weight:700;color:#fff;line-height:1.3}
.hero-ps-sub{font-size:11px;color:rgba(255,255,255,.45);line-height:1.3}
.hero-ps-arrow{
  font-size:14px;color:rgba(255,255,255,.25);flex-shrink:0;margin:0 2px;
}
@media(max-width:640px){
  .hero-trust-row{grid-template-columns:repeat(2,1fr)}
  .hero-process-strip{flex-wrap:wrap;gap:8px}
  .hero-ps-arrow{display:none}
  .hero-ps-step{min-width:calc(50% - 8px)}
}
.hero-ticker-item{font-size:11.5px;padding:8px 10px;flex-wrap:wrap}
.hero-ticker-item .tick-time{font-size:11px}
/* ── 인증 칩 ── */
.credential-section{background:var(--bg);padding:32px 0}
.blog-feed-thumb{height:110px;display:flex;align-items:center;justify-content:center;background:var(--navy)}
/* ── 히어로 뱃지 카드 (왼쪽 배치) ── */
.hero-badge-row{display:flex;gap:10px;margin-bottom:14px}
.hero-badge-item{flex:1;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:12px 14px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.hero-badge-label{display:block;font-size:11px;font-weight:700;color:#4ade80;letter-spacing:.04em;margin-bottom:4px}
.hero-badge-title{display:block;font-size:13px;font-weight:800;color:#fff;line-height:1.35}
@media(max-width:640px){.hero-badge-row{flex-direction:column;gap:8px}}
/* ── SEO 텍스트 접기 ── */
.seo-text-block.collapsed{max-height:400px;overflow:hidden;position:relative}
.seo-text-block.collapsed::after{content:'';position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.seo-expand-btn{display:block;margin:16px auto 0;padding:10px 24px;background:#fff;border:1px solid var(--bd2);border-radius:var(--radius-s);font-size:13px;font-weight:600;color:var(--navy);cursor:pointer;transition:all .15s}
.seo-expand-btn:hover{background:var(--green-bg);border-color:var(--green-bd);color:#0f7a3c}
/* ── 실시간 상담 가능 표시 ── */
.live-dot{width:8px;height:8px;border-radius:50%;background:#4ade80;display:inline-block;margin-right:4px;animation:pulse-dot 2s infinite;vertical-align:middle}
.float-status .live-dot{background:#fff;width:7px;height:7px}
@keyframes tickFadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}


/* ── 모바일 최적화 패치 2026-04-04 ── */
*{-webkit-tap-highlight-color:rgba(0,0,0,.05)}
a,button,summary,details summary,.btn,.service-icon-card,.info-link-card,.local-link-tags a,.svc-hub-card{
  -webkit-tap-highlight-color:rgba(3,199,90,.15);
}

/* 터치 타겟 최소 44px 보장 */
@media(max-width:768px){
  .btn{min-height:44px;padding:12px 20px}
  .sticky-actions .btn{min-height:48px;font-size:14px;font-weight:700}
  details summary{min-height:44px;display:flex;align-items:center;padding:12px 0}
  .local-link-tags a{min-height:36px;display:inline-flex;align-items:center}
  .service-icon-card{min-height:44px}
  .info-link-card{padding:14px 16px}
  .float-sidebar a{min-width:48px;min-height:48px;padding:8px}
  .float-sidebar{right:8px;gap:6px}
  
  /* 모바일 폰트 가독성 */
  body{font-size:15px;line-height:1.75}
  h1{font-size:22px;line-height:1.3}
  h2{font-size:18px;line-height:1.35}
  h3{font-size:15px;line-height:1.4}
  p{line-height:1.75}
  
  /* FAQ 터치 영역 확대 */
  details{border-bottom:1px solid var(--bd)}
  details summary{font-size:14px;font-weight:600;cursor:pointer;gap:8px}
  details summary::marker{font-size:12px}
  details p{font-size:14px;line-height:1.7;padding:0 0 12px}
  
  /* 전화번호 터치 크기 */
  a[href^="tel"]{min-height:44px;display:inline-flex;align-items:center}
  
  /* 카드 그리드 모바일 */
  .grid-2,.grid-3{gap:12px}
  .card,.panel{padding:16px}
  
  /* 이미지 최적화 */
  img{height:auto;max-width:100%}
  
  /* hero 섹션 모바일 */
  .hero{min-height:auto;padding:32px 16px}
  .hero h1{font-size:20px}
  .hero-list li{font-size:13px;line-height:1.6}
}

/* 극소 화면 (380px 이하) */
@media(max-width:380px){
  .btn{padding:10px 16px;font-size:13px}
  .sticky-actions .btn{font-size:13px}
  h1{font-size:19px}
  h2{font-size:16px}
  .float-sidebar{display:none}
}

/* 다크모드 대응 sticky-actions */
@media(prefers-color-scheme:dark){
  .sticky-actions{background:#1a1a1a;border-top-color:#333}
}

/* safe-area 노치 대응 */
@supports(padding:env(safe-area-inset-bottom)){
  .sticky-actions{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .float-sidebar{bottom:calc(80px + env(safe-area-inset-bottom))}
}

/* 스크롤 성능 */
.hero,.section{will-change:auto}
img{content-visibility:auto}

/* ================================================================
   v70 — 프리미엄 시각 강화
   ================================================================ */

/* ── 스크롤 리빌 애니메이션 ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.23,1,.32,1),transform .7s cubic-bezier(.23,1,.32,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}.reveal-d4{transition-delay:.32s}

/* ── 카운터 애니메이션 ── */
.stat-counter-strip .num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum';
  transition:color .3s;
}
.stat-counter-item{
  position:relative;
  overflow:hidden;
}
.stat-counter-item::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--green),#4ade80);
  border-radius:3px 3px 0 0;
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.stat-counter-item.counted::before{transform:scaleX(1)}

/* ── 전체 서비스 카탈로그 그리드 ── */
.catalog-mega{padding:48px 0}
.catalog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:10px;
}
.catalog-card{
  background:#fff;
  border:1px solid var(--bd);
  border-radius:var(--radius);
  padding:18px 14px;
  text-align:center;
  transition:all .25s cubic-bezier(.23,1,.32,1);
  position:relative;
  overflow:hidden;
}
.catalog-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--green),#4ade80);
  transform:scaleX(0);transition:transform .3s ease;
}
.catalog-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-h);
  border-color:var(--green-bd);
}
.catalog-card:hover::after{transform:scaleX(1)}
.catalog-card .cat-icon{
  font-size:28px;line-height:1;margin-bottom:8px;display:block;
}
.catalog-card .cat-name{
  font-size:13.5px;font-weight:700;color:var(--navy);
  display:block;margin-bottom:4px;
}
.catalog-card .cat-sub{
  font-size:11.5px;color:var(--text3);line-height:1.4;
}
@media(max-width:640px){
  .catalog-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .catalog-card{padding:14px 8px}
  .catalog-card .cat-icon{font-size:24px}
  .catalog-card .cat-name{font-size:12px}
  .catalog-card .cat-sub{display:none}
}

/* ── 강화된 자격증 섹션 ── */
.credential-section{
  background:linear-gradient(135deg,#0b1d33 0%,#1a3a5c 100%);
  padding:48px 0;
  position:relative;
  overflow:hidden;
}
.credential-section::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3C/svg%3E");
  opacity:.5;
}
.credential-section .section-head h2{color:#fff}
.credential-section .section-head p{color:rgba(255,255,255,.7)}
.cred-chip{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:12px;
  transition:all .25s ease;
}
.cred-chip:hover{
  background:rgba(255,255,255,.14);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.cred-chip strong{color:#fff !important}
.cred-chip span{color:rgba(255,255,255,.6) !important}

/* ── 비용 테이블 강화 ── */
.cost-table{
  border-collapse:separate;
  border-spacing:0;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.cost-table thead th{
  background:var(--navy);color:#fff;
  position:relative;
}
.cost-table tbody tr{
  transition:background .15s;
}
.cost-table tbody tr:hover{
  background:var(--green-bg);
}

/* ── 프리미엄 카드 hover ── */
.card,.panel,.relief-card{
  transition:all .25s cubic-bezier(.23,1,.32,1);
}
.card:hover,.panel:hover,.relief-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-h);
}

/* ── 긴급카드 아이콘 펄스 ── */
.emergency-card .ec-icon{
  display:inline-block;
  animation:ec-pulse 2.5s ease-in-out infinite;
}
@keyframes ec-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.15)}
}

/* ── 전체서비스 인포그래픽 바 ── */
.info-bar{
  display:flex;gap:0;
  background:#fff;border:1px solid var(--bd);
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);
}
.info-bar-item{
  flex:1;text-align:center;padding:20px 12px;
  border-right:1px solid var(--bd);
  position:relative;
}
.info-bar-item:last-child{border-right:none}
.info-bar-num{
  font-size:28px;font-weight:900;color:var(--green);
  display:block;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.info-bar-label{
  font-size:12px;color:var(--text3);margin-top:4px;display:block;
}
@media(max-width:640px){
  .info-bar{flex-wrap:wrap}
  .info-bar-item{flex:1 1 50%;border-bottom:1px solid var(--bd)}
  .info-bar-item:nth-child(2){border-right:none}
  .info-bar-item:nth-last-child(-n+2){border-bottom:none}
  .info-bar-num{font-size:22px}
}

/* ── 비교표 슬라이더 강화 ── */
.comparison-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
}
.comparison-card::before{
  content:'';position:absolute;top:0;left:0;width:4px;height:100%;
  background:var(--green);z-index:1;
  transform:scaleY(0);transform-origin:top;
  transition:transform .4s ease;
}
.comparison-card:hover::before{transform:scaleY(1)}

/* ── 섹션 헤더 강화 ── */
.section-head h2{position:relative;display:inline-block}
.section-head h2::after{
  content:'';display:block;
  width:40px;height:3px;
  background:var(--green);
  border-radius:2px;
  margin-top:8px;
}

/* ── FAQ 아코디언 강화 ── */
details{
  transition:all .2s ease;
  border-radius:var(--radius);
}
details[open]{
  background:var(--green-bg);
  border-color:var(--green-bd);
}
details summary{
  cursor:pointer;
  position:relative;
}
details summary::after{
  content:'▾';
  position:absolute;right:14px;top:50%;
  transform:translateY(-50%);
  font-size:12px;color:var(--text3);
  transition:transform .25s;
}
details[open] summary::after{
  transform:translateY(-50%) rotate(180deg);
  color:var(--green);
}

/* ── 프로세스 타임라인 강화 ── */
.section-process .step-card{
  position:relative;
}
.section-process .step-card::before{
  content:'';
  position:absolute;top:0;left:26px;
  width:2px;height:100%;
  background:linear-gradient(to bottom,var(--green),var(--green-bd));
}
.section-process .step-card:last-child::before{display:none}

/* ── 서비스 카테고리 탭 ── */
.cat-tabs{
  display:flex;gap:6px;flex-wrap:wrap;
  margin-bottom:16px;
  justify-content:center;
}
.cat-tab{
  padding:7px 16px;
  border-radius:20px;
  font-size:13px;font-weight:600;
  background:var(--bg2);
  color:var(--text2);
  cursor:pointer;
  transition:all .2s;
  border:1px solid transparent;
}
.cat-tab:hover,.cat-tab.active{
  background:var(--green);color:#fff;
  border-color:var(--green-d);
}

/* ── 지역 커버리지 비주얼 ── */
.coverage-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:20px 0;
}
.coverage-stat{
  text-align:center;
  padding:20px;
  background:#fff;
  border-radius:var(--radius);
  border:1px solid var(--bd);
  transition:all .25s ease;
}
.coverage-stat:hover{
  border-color:var(--green-bd);
  transform:translateY(-2px);
  box-shadow:var(--shadow-h);
}
.coverage-stat .cv-num{
  font-size:32px;font-weight:900;
  color:var(--navy);line-height:1;
  display:block;
}
.coverage-stat .cv-label{
  font-size:13px;color:var(--text2);
  margin-top:6px;display:block;
}
@media(max-width:640px){
  .coverage-stats{grid-template-columns:1fr}
}

/* ── 브랜드 스토리 카드 ── */
.brand-story{
  background:linear-gradient(135deg,#f0f7f4 0%,#e8f5ee 100%);
  border:1px solid var(--green-bd);
  border-radius:16px;
  padding:32px;
  position:relative;
  overflow:hidden;
}
.brand-story::before{
  content:'🦉';
  position:absolute;
  right:20px;top:20px;
  font-size:48px;
  opacity:.15;
}
.brand-story h3{
  font-size:18px;font-weight:800;
  color:var(--navy);margin-bottom:12px;
}
.brand-story p{
  font-size:14px;line-height:1.8;
  color:var(--text);
}

/* Related Info Cross-Links */
.related-info{background:var(--bg2,#f8f9fa);padding:40px 0}
.related-links{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.related-link{display:block;padding:14px 18px;background:var(--bg,#fff);border:1px solid var(--bd,#e0e0e0);border-radius:8px;color:var(--text,#222);text-decoration:none;font-size:15px;transition:border-color .2s,box-shadow .2s}
.related-link:hover{border-color:#1a3a5c;box-shadow:0 2px 8px rgba(11,29,51,.1)}
@media(min-width:640px){.related-links{flex-direction:row;flex-wrap:wrap}.related-link{flex:1 1 calc(50% - 8px)}}

/* ================================================================
   v71 — UI/UX 최적화 패치 (2026-04-09)
   모바일 개선 · 성능 · 접근성 · 시각 정돈
   ================================================================ */

/* ── 1. 버튼 행 모바일 개선 ──────────────────────────────────── */
/* 3개 버튼이 320px에서도 깨지지 않도록 */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.button-row .btn {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .button-row {
    flex-direction: column;
    gap: 8px;
  }
  .button-row .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ── 2. 히어로 섹션 모바일 개선 ──────────────────────────────── */
/* page-hero 규칙은 위에서 정의됨 */
.page-box {
  max-width: 760px;
}
.page-box h1 {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 14px;
}
.page-box .lead {
  font-size: 15px;
  color: rgba(255,255,255,.92);
  line-height: 1.75;
  margin-bottom: 18px;
}
.page-box .lead strong { color: #ffffff; font-weight: 700; }
.page-box .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #a7f3d0;
  background: rgba(3,199,90,.2);
  border: 1px solid rgba(74,222,128,.4);
  padding: 5px 13px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.page-box .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  display: inline-block;
  animation: pulse-dot 2s infinite;
}
.page-box .breadcrumb {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  margin-bottom: 10px;
}
.hero-points {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-points li {
  font-size: 13.5px;
  color: rgba(255,255,255,.85);
  padding-left: 20px;
  position: relative;
  line-height: 1.6;
  background: transparent;
  border: none;
}
.hero-points li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #4ade80;
  font-weight: 700;
}
.hero-note {
  font-size: 12.5px;
  color: rgba(255,255,255,.5);
  margin-top: 10px;
  line-height: 1.6;
}
@media (max-width: 640px) {
  .page-hero { padding: 32px 0 28px; }
  .page-box h1 { font-size: 20px; }
  .page-box .lead { font-size: 14px; }
}

/* ── 3. 카드 컴포넌트 일관성 개선 ────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  padding: 20px;
}
.panel {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  padding: 20px;
}
.card h3, .panel h3 {
  letter-spacing:-.01em;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.4;
}
.card p, .panel p {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.72;
}
@media (max-width: 640px) {
  .card, .panel { padding: 16px; }
}

/* ── 4. 섹션 여백 개선 ───────────────────────────────────────── */
.section { padding: 56px 0; }
.section.alt {
  padding: 56px 0;
  background: var(--bg2);
}
@media (max-width: 900px) {
  .section, .section.alt { padding: 44px 0; }
}
@media (max-width: 640px) {
  .section, .section.alt { padding: 32px 0; }
}

/* ── 5. 섹션 헤더 개선 ───────────────────────────────────────── */
.section-head {
  text-align: center;
  margin-bottom: 32px;
}
.section-head h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.35;
}
.section-head p {
  font-size: 15px;
  color: var(--text2);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .section-head h2 { font-size: 19px; }
  .section-head p { font-size: 14px; }
  .section-head { margin-bottom: 20px; }
}

/* ── 6. 그리드 시스템 개선 ───────────────────────────────────── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 540px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 12px; }
}

/* ── 7. 테이블 모바일 최적화 ─────────────────────────────────── */
.cost-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  /* 스크롤 힌트 그라디언트 */
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 0 100%,
    linear-gradient(to right, rgba(0,0,0,.06), rgba(0,0,0,0)),
    linear-gradient(to left, rgba(0,0,0,.06), rgba(0,0,0,0)) 0 100%;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-position: 0 0, 100%, 0 0, 100%;
  background-attachment: local, local, scroll, scroll;
}
.cost-table {
  min-width: 460px; /* 모바일에서 가로 스크롤 트리거 */
  border-radius: var(--radius);
}
@media (max-width: 640px) {
  .cost-table { font-size: 13px; }
  .cost-table th, .cost-table td { padding: 10px 12px; }
}

/* ── 8. FAQ 아코디언 모바일 개선 ─────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: 0; }
details {
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  margin-bottom: 6px;
  overflow: hidden;
  transition: all .2s ease;
}
details[open] {
  background: var(--green-bg);
  border-color: var(--green-bd);
}
details summary {
  padding: 16px 44px 16px 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  position: relative;
  line-height: 1.5;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 300;
  color: var(--text3);
  line-height: 1;
  transition: transform .25s, color .25s;
}
details[open] summary::after {
  content: '−';
  color: var(--green);
}
details p {
  padding: 0 16px 16px;
  font-size: 14px;
  color: var(--text2);
  line-height: 1.75;
  border-top: 1px solid var(--green-bd);
  padding-top: 12px;
}
@media (max-width: 640px) {
  details summary { padding: 14px 40px 14px 14px; font-size: 14px; }
  details p { padding: 0 14px 14px; padding-top: 10px; font-size: 13.5px; }
}

/* ── 9. 네비게이션 개선 ──────────────────────────────────────── */
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-s);
  align-items: center;
  justify-content: center;
  background: var(--bg2);
  margin-left: auto;
  flex-shrink: 0;
}
.menu-toggle svg {
  width: 22px;
  height: 22px;
}
@media (max-width: 640px) {
  .menu-toggle { display: flex; }
}

/* ── 10. 정보 링크 카드 개선 ─────────────────────────────────── */
.info-link-card {
  display: block;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: all .2s;
  position: relative;
}
.info-link-card:hover {
  border-color: var(--green-bd);
  background: var(--green-bg);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.info-link-card h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
  line-height: 1.4;
}
.info-link-card p {
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.6;
  margin: 0;
}
.info-link-card .tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--green-bg);
  border: 1px solid var(--green-bd);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #0f7a3c;
  margin-bottom: 6px;
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
@media (max-width: 540px) {
  .info-grid { grid-template-columns: 1fr; }
  .info-link-card { padding: 12px 14px; }
}

/* ── 11. sticky-actions 개선 ─────────────────────────────────── */
@media (max-width: 900px) {
  .sticky-actions {
    display: block;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 850;
    background: #fff;
    border-top: 1px solid var(--bd);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  }
  .sticky-actions .inner {
    display: flex;
    gap: 8px;
    max-width: var(--max-w);
    margin: 0 auto;
  }
  .sticky-actions .btn {
    flex: 1;
    min-height: 48px;
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--radius-s);
    justify-content: center;
  }
  /* sticky-actions 공간만큼 본문 하단 여백 */
  main { padding-bottom: 80px; }
}

/* ── 12. float-sidebar 터치 개선 ────────────────────────────── */
@media (max-width: 900px) {
  .float-sidebar { display: none; }
}
@media (min-width: 901px) {
  .float-sidebar {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 800;
  }
  .float-sidebar a {
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--bd);
    box-shadow: var(--shadow);
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text2);
    text-decoration: none;
    gap: 3px;
    transition: all .2s;
  }
  .float-sidebar a:hover {
    border-color: var(--green-bd);
    background: var(--green-bg);
    transform: scale(1.05);
  }
  .float-sidebar .fs-icon { font-size: 18px; }
  .float-sidebar .kakao-float {
    background: var(--kakao);
    border-color: #e5ce00;
    color: #391b00;
  }
}

/* ── 13. 로딩 성능 개선 ──────────────────────────────────────── */
/* 레이아웃 시프트 방지 */
.page-hero, .section { contain: layout style; }
/* 스크롤 성능 */
.sticky-actions, .float-sidebar, .site-header { will-change: transform; }
/* 폰트 로딩 중 레이아웃 안정 */
html { font-size: 15px; }

/* ── 14. 접근성 개선 ────────────────────────────────────────── */
/* 포커스 링 개선 */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 2px;
}
/* 건너뛰기 링크 */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--green);
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
  font-size: 14px;
  font-weight: 700;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { top: 0; }
/* 색상 대비 개선 */
.note { color: var(--text2); font-size: 13px; line-height: 1.7; }
.hero-note { color: rgba(255,255,255,.55); }

/* ── 15. 다크모드 완성 ───────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111827;
    --bg2: #1f2937;
    --white: #1f2937;
    --text: #f1f5f9;
    --text2: #94a3b8;
    --text3: #64748b;
    --bd: #374151;
    --bd2: #4b5563;
    --navy: #e2e8f0;
    --shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.2);
    --shadow-h: 0 4px 20px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.2);
  }
  body { background: var(--bg); color: var(--text); }
  .site-header { background: #1f2937; border-bottom-color: var(--green); }
  .logo a { color: #e2e8f0; }
  .topbar { background: #0f172a; }
  .card, .panel, .info-link-card, details, .cost-table {
    background: #1f2937;
    border-color: var(--bd);
    color: var(--text);
  }
  .card h3, .panel h3, details summary, .section-head h2 { color: #e2e8f0; }
  .card p, .panel p, details p { color: var(--text2); }
  .sticky-actions { background: #1f2937; border-top-color: var(--bd); }
  .site-footer { background: #0f172a; }
  .section.alt { background: #1a2233; }
  .cost-table thead th { background: #0f172a; }
  .local-link-tags a { background: #1f2937; border-color: var(--bd); color: var(--text2); }
  .process-step { background: #1f2937; }
  details[open] { background: #1a2d1f; border-color: #166534; }
  .info-link-card:hover { background: #1a2d1f; border-color: #166534; }
}

/* ── 16. 프린트 개선 ────────────────────────────────────────── */
@media print {
  .topbar, .site-header, .float-sidebar, .sticky-actions,
  .footer, .site-footer, .button-row, nav { display: none !important; }
  .page-hero { background: #fff !important; color: #000 !important; }
  .page-box h1, .section-head h2, .card h3 { color: #000 !important; }
  .section, .section.alt { padding: 16px 0 !important; }
  a { text-decoration: underline; }
}

/* ── 17. 애니메이션 모션 감소 접근성 ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ── 18. 서비스 아이콘 그리드 개선 ──────────────────────────── */
.service-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
}
.service-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text2);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  transition: all .2s;
  min-height: 72px;
}
.service-icon-card:hover {
  border-color: var(--green-bd);
  background: var(--green-bg);
  color: #0f7a3c;
  transform: translateY(-2px);
}
.service-icon-card .icon { font-size: 22px; line-height: 1; }
@media (max-width: 640px) {
  .service-icon-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .service-icon-card { padding: 10px 6px; font-size: 11px; min-height: 60px; }
  .service-icon-card .icon { font-size: 18px; }
}
@media (max-width: 380px) {
  .service-icon-grid { grid-template-columns: repeat(3, 1fr); }
}



/* === 플로팅 전화 CTA (모바일 핵심) === */
.float-cta-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:950;
  background:linear-gradient(135deg,#0b1d33 0%,#132d4a 100%);
  padding:10px 16px;display:flex;gap:8px;justify-content:center;align-items:center;
  box-shadow:0 -4px 20px rgba(0,0,0,.4);
  transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);
  border-top:1px solid rgba(79,195,247,.2);
}
.float-cta-bar.visible{transform:translateY(0)}
.float-cta-bar a{
  flex:1;max-width:160px;padding:12px 6px;border-radius:10px;
  font-size:13px;font-weight:700;text-align:center;text-decoration:none;
  transition:all .2s;display:flex;align-items:center;justify-content:center;gap:4px;
}
.float-cta-bar a:active{transform:scale(.95)}
.float-cta-phone{background:linear-gradient(135deg,#03C75A,#018a40);color:#fff !important;box-shadow:0 2px 12px rgba(3,199,90,.4)}
.float-cta-kakao{background:#FEE500;color:#191919 !important}
.float-cta-sms{background:rgba(255,255,255,.12);color:#fff !important;border:1px solid rgba(255,255,255,.2)}
body{padding-bottom:60px}

/* 스크롤 진행 바 */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;z-index:999;
  background:linear-gradient(90deg,#03C75A,#4FC3F7);
  width:0;transition:width .1s linear;
}

/* 맨위로 버튼 */
.scroll-top{
  position:fixed;bottom:76px;right:16px;z-index:940;
  width:44px;height:44px;border-radius:50%;
  background:rgba(11,29,51,.85);border:1px solid rgba(79,195,247,.3);
  color:#4FC3F7;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(20px);transition:all .3s;
  box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.scroll-top.visible{opacity:1;transform:translateY(0)}
.scroll-top:active{transform:scale(.9)}

/* 데스크탑에서는 플로팅 바 스타일 조정 */
@media(min-width:769px){
  .float-cta-bar{padding:12px 24px}
  .float-cta-bar a{max-width:180px;font-size:14px;padding:13px 10px}
  .scroll-top{bottom:80px;right:24px}
  body{padding-bottom:64px}
}

/* 인쇄 시 숨김 */
@media print{.float-cta-bar,.scroll-top,.scroll-progress{display:none !important}body{padding-bottom:0}}


/* === 스크롤 애니메이션 (체류시간 증가) === */
.fade-on-scroll{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.fade-on-scroll.in-view{opacity:1;transform:translateY(0)}

/* 섹션 구분선 — 부드러운 그라데이션 */
.section + .section::before{
  content:'';display:block;height:1px;
  background:linear-gradient(90deg,transparent,rgba(11,29,51,.08) 20%,rgba(11,29,51,.08) 80%,transparent);
  margin:0 auto;max-width:800px;
}
.section.alt + .section::before,
.section + .section.alt::before{display:none}

/* 카드 호버 개선 — 부드러운 테두리 효과 */
.card{transition:all .3s cubic-bezier(.4,0,.2,1)}
.card:hover{
  box-shadow:0 8px 32px rgba(11,29,51,.12);
  transform:translateY(-3px);
  border-color:rgba(3,199,90,.3);
}

/* CTA 박스 펄스 효과 */
.cta-box{position:relative;overflow:hidden}
.cta-box::after{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent);
  animation:cta-shine 4s infinite;
}
@keyframes cta-shine{0%{left:-100%}40%,100%{left:100%}}

/* 강조 뱃지 - 긴급·인기 */
.tag-urgent{
  display:inline-block;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700;
  background:rgba(239,83,80,.12);color:#EF5350;animation:tag-pulse 2s infinite;
}
.tag-hot{
  display:inline-block;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700;
  background:rgba(3,199,90,.12);color:#03C75A;
}
@keyframes tag-pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* 부드러운 스크롤 */
html{scroll-behavior:smooth}

/* FAQ 아코디언 개선 */
details{
  border:1px solid #e5e7eb;border-radius:10px;margin-bottom:8px;
  transition:all .2s;overflow:hidden;
}
details[open]{border-color:rgba(3,199,90,.3);box-shadow:0 2px 8px rgba(3,199,90,.08)}
details summary{
  padding:14px 16px;font-weight:600;font-size:14px;cursor:pointer;
  list-style:none;position:relative;padding-right:36px;
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:'＋';position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:16px;color:#9ca3af;transition:transform .2s;
}
details[open] summary::after{content:'－'}
details p{padding:0 16px 14px;font-size:13.5px;line-height:1.8;color:var(--text2)}

/* 전화번호 링크 강조 */
a[href^="tel:"]{
  color:#03C75A;font-weight:700;text-decoration:none;
  border-bottom:2px solid rgba(3,199,90,.3);
  transition:border-color .2s;
}
a[href^="tel:"]:hover{border-color:#03C75A}

/* 라이브 뱃지 */
.live-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#4ade80;margin-right:6px;
  animation:live-blink 1.5s infinite;
}
@keyframes live-blink{0%,100%{opacity:1}50%{opacity:.3}}