/* 지역 SEO 엔진 공개 화면 — 경림전력 assets/css/style.css 를 그대로 옮기고 색만 변수로 바꿈.
   사이트 색은 /assets/site.css(:root 덮어쓰기)에서 옵니다. 고치면 모든 사이트에 다시 배포해야 반영됩니다.
   한글 조판 규칙(자간·행간·keep-all)은 body / h1~h3 에 모여 있습니다. */

:root {
  /* 값은 경림전력 그대로(기본값). 사이트마다 /assets/site.css 가 같은 이름으로 덮습니다 —
     chrome.js siteCss(site) 가 site.colors 에서 만듭니다. 이름은 역할입니다(색 이름이 아님):
       ink-950/900  히어로 · 어두운 구역 바탕      amber  누르는 곳(전화)에만
       navy         눈썹 · 링크 · 강조 테두리        copper 구조(진행 막대 · 눈썹 분기선 · 카드 띠) */
  --ink-1000: #050f1c;   /* 푸터 바탕 */
  --ink-950:  #07182b;   /* 가장 어두운 남색 — 히어로·다크 섹션 바탕 */
  --ink-900:  #0b2440;
  --navy:     #0d4b85;
  --navy-600: #1668ad;
  --amber:    #ffc24d;   /* 행동(전화)에만. 눌러야 할 곳은 이 색 하나뿐입니다 */
  --amber-600:#f0a500;
  --amber-hi: #ffd070;   /* 전화 단추 hover */
  --amber-lt: #ffe6a8;   /* 제목 강조 그라데이션 끝 · 카드 띠 끝 */
  --on-amber: #291d05;   /* 앰버 위 글자 */

  /* 구조 색. 행동(앰버)과 역할을 나눕니다. 구리는 '구조', 앰버는 '누르는 곳'. */
  --copper:   #b5713c;
  --copper-lt:#d99a63;

  --glow:     #1d6fb8;   /* 히어로 오른쪽 위 번짐 */

  /* rgb(var(--x-rgb) / 투명도) 로 씁니다. site.css 가 위 값과 같이 덮습니다. */
  --amber-rgb:     255 194 77;
  --amber-600-rgb: 240 165 0;
  --navy-rgb:      13 75 133;
  --copper-rgb:    181 113 60;
  --ink-950-rgb:   7 24 43;
  --ink-900-rgb:   16 38 70;

  /* 공지 띠(밝은 앰버 계열) */
  --notice-bg:   #fff8e8;
  --notice-line: #f2e2bd;
  --notice-ink:  #4a3400;
  --notice-soft: #7a6534;
  --notice-mute: #a08c5c;

  /* 값(숫자 · 규격 · 전화번호)에만 씁니다. 한글에는 걸지 마세요 — 글자 사이가 벌어집니다. */
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ink:      #16202b;
  --ink-soft: #5a6875;
  --ink-mute: #8894a1;
  --line:     #e4e9ef;
  --line-soft:#eef2f6;
  --line-strong:#d5dde6;
  --bg:       #ffffff;
  --bg-alt:   #f5f8fb;

  --wrap:     1080px;
  /* 둥근 16px 카드는 SaaS 랜딩의 기본값입니다. 모서리를 깎습니다.
     알약(지역·서비스 링크)만 둥글게 둡니다 — 그건 스위치니까요. */
  --radius:   4px;
  --radius-sm:3px;
  --shadow:   0 1px 2px rgba(16,32,48,.04), 0 8px 24px rgba(16,32,48,.06);
  --shadow-lg:0 2px 4px rgba(16,32,48,.05), 0 18px 48px rgba(16,32,48,.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system,
               BlinkMacSystemFont, system-ui, "Malgun Gothic", sans-serif;
  font-size: 17px;
  line-height: 1.72;         /* 한글은 라틴 문자보다 넉넉해야 읽힙니다 */
  letter-spacing: -0.011em;  /* 살짝 좁혀야 덜 성깁니다 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.32;
  letter-spacing: -0.032em;
  word-break: keep-all;      /* '수변전' 이 '수변' + '전' 으로 잘리지 않게 */
}

p { margin: 0; word-break: keep-all; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.number { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.wrap-narrow { max-width: 800px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink-950); color: #fff; padding: 12px 18px; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--navy-600); outline-offset: 3px; border-radius: 4px; }

/* ── 헤더 ─────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .2s, border-color .2s;
}
.site-header.is-stuck { box-shadow: 0 1px 20px rgba(16,32,48,.07); border-color: transparent; }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px; gap: 20px;
}

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark { width: 34px; height: 34px; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-size: 20px; font-weight: 800; letter-spacing: -0.04em; }
.brand-sub { font-size: 12px; font-weight: 500; color: var(--ink-mute); letter-spacing: 0.02em; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  padding: 9px 13px; border-radius: 9px;
  font-size: 15.5px; font-weight: 500; color: var(--ink-soft);
  white-space: nowrap; transition: background .15s, color .15s;
}
.nav a:hover { background: var(--bg-alt); color: var(--ink); }

.nav-call {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ink-950); color: #fff !important;
  margin-left: 8px; font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
}
.nav-call:hover { background: var(--navy) !important; }
.nav-call svg { width: 15px; height: 15px; fill: var(--amber); }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;      /* 손가락으로 누르는 버튼은 44px 이상 */
  border: 1px solid var(--line); border-radius: 12px;
  background: #fff; cursor: pointer; padding: 13px 12px;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 히어로 ───────────────────────────────────────────── */

.hero {
  position: relative; isolation: isolate;
  background: linear-gradient(165deg, var(--ink-900) 0%, var(--ink-950) 68%);
  color: #fff; overflow: hidden;
  padding: 112px 0 120px;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-grid { width: 100%; height: 100%; }

.hero-inner { position: relative; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--amber); margin-bottom: 22px;
}
.hero-eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 4px rgb(var(--amber-rgb) / 0.2);
}

.hero-title { font-size: clamp(32px, 5.4vw, 56px); font-weight: 800; letter-spacing: -0.042em; }
.hero-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--amber) 10%, var(--amber-lt) 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero-lead {
  margin-top: 24px; max-width: 33em;
  font-size: clamp(16px, 1.6vw, 18.5px);
  color: rgba(255, 255, 255, 0.76);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.hero-badges {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 44px; padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero-badges li {
  font-size: 14.5px; color: rgba(255, 255, 255, 0.72);
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
  word-break: keep-all;
}
.hero-badges strong { color: #fff; font-weight: 800; font-size: 16px; }

/* ── 버튼 ─────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px; padding: 0 26px;
  border-radius: 12px; font-size: 16.5px; font-weight: 700;
  letter-spacing: -0.015em;
  transition: background .16s, transform .1s, box-shadow .16s, border-color .16s;
}
.btn svg { width: 17px; height: 17px; }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--amber); color: var(--on-amber);
  box-shadow: 0 6px 20px rgb(var(--amber-rgb) / 0.24);
  font-variant-numeric: tabular-nums;
}
.btn-primary:hover { background: var(--amber-hi); }
.btn-primary svg { fill: var(--on-amber); }

.btn-ghost { border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255,255,255,.45); }

.btn-outline { border: 1px solid var(--line); background: #fff; color: var(--navy); margin-top: 32px; }
.btn-outline:hover { background: var(--bg-alt); border-color: var(--navy); }

.btn-wide { width: 100%; margin-top: 22px; }

/* ── 섹션 공통 ────────────────────────────────────────── */

.section { padding: 100px 0; }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--ink-950); color: #fff; }

.section-eyebrow {
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--navy); margin-bottom: 12px; text-transform: uppercase;
}
.section-dark .section-eyebrow { color: var(--amber); }

.section-title {
  font-size: clamp(29px, 4.2vw, 46px);
  font-weight: 800;
  letter-spacing: -0.042em;
  line-height: 1.22;
}

.section-lead {
  margin-top: 20px; max-width: 40em;
  font-size: 17px; color: var(--ink-soft);
}
.section-dark .section-lead { color: rgba(255, 255, 255, 0.68); }

.lead { font-size: 17.5px; color: var(--ink-soft); }

/* 지역별 소개글. 이 페이지에만 있는 문장이라 눈에 띄게 둡니다. */
.lead-intro {
  color: var(--ink); font-weight: 500;
  padding: 16px 20px; border-left: 3px solid var(--amber-600);
  background: rgb(var(--amber-600-rgb) / .06); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.note {
  margin-top: 28px; padding: 17px 20px;
  background: rgb(var(--navy-rgb) / 0.045);
  border-left: 3px solid var(--navy);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15.5px; color: var(--ink-soft);
}
.section-alt .note { background: rgb(var(--navy-rgb) / 0.07); }
.note a { color: var(--navy); font-weight: 600; border-bottom: 1px solid currentColor; }

/* ── 회사소개 (2단) ───────────────────────────────────── */

.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 56px; }
.split-head { position: sticky; top: 108px; align-self: start; }

.quote { margin: 30px 0 0; padding: 0; }
.quote blockquote {
  margin: 0; padding: 28px 30px;
  background: var(--bg-alt); border-radius: var(--radius);
  border-left: 4px solid var(--amber-600);
}
.quote blockquote p { font-size: 18.5px; line-height: 1.78; font-weight: 500; color: var(--ink); }
.quote figcaption { margin-top: 13px; padding-left: 4px; font-size: 14.5px; color: var(--ink-mute); }
.quote cite { font-style: normal; }

/* ── 카드 ─────────────────────────────────────────────── */

/* 장수가 늘어도 줄이 깨지지 않게. 6장이든 8장이든 알아서 채웁니다. */
.cards {
  margin-top: 48px;
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 28px;
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }

.card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: 13px; background: rgb(var(--navy-rgb) / 0.07);
}
.card-icon svg {
  width: 23px; height: 23px;
  fill: none; stroke: var(--navy); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.card h3 { font-size: 19.5px; font-weight: 700; }
.card p { margin-top: 11px; color: var(--ink-soft); font-size: 15.8px; }

/* 요즘 주력 분야 한 장만 눈에 띄게. */
.card-lead {
  border-color: var(--navy);
  box-shadow: 0 2px 4px rgb(var(--navy-rgb) / .06), 0 16px 40px rgb(var(--navy-rgb) / .13);
}
.card-lead .card-icon { background: var(--navy); }
.card-lead .card-icon svg { stroke: var(--amber); }
.card-tag {
  display: inline-block; margin-bottom: 14px !important;
  background: var(--navy); color: #fff !important;
  border-radius: 999px; padding: 5px 13px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
}

/* ── 지역별 글 (관리자에서 채웁니다) ─────────────────── */

.regionbody { margin-top: 24px; }
.regionbody h3 {
  margin-top: 34px; font-size: 20px; font-weight: 700;
  padding-left: 16px; border-left: 3px solid var(--navy);
}
.regionbody h3:first-child { margin-top: 0; }
.regionbody p { margin-top: 14px; font-size: 17px; line-height: 1.85; color: var(--ink-soft); }

/* ── 증상별 안내 ──────────────────────────────────────── */

.symptoms { margin-top: 36px; display: grid; gap: 2px; border-top: 1px solid var(--line); }
.symptom { padding: 26px 0; border-bottom: 1px solid var(--line); }
.symptom h3 {
  font-size: 19px; font-weight: 700;
  padding-left: 16px; border-left: 3px solid var(--amber-600);
}
.symptom p { margin-top: 12px; padding-left: 19px; color: var(--ink-soft); font-size: 16.5px; }

@media (max-width: 520px) {
  .symptom h3 { font-size: 17.5px; padding-left: 12px; }
  .symptom p { padding-left: 15px; font-size: 16px; }
}

/* ── 지역 페이지 ──────────────────────────────────────── */

/* 지역 페이지 머리는 홈보다 낮게. 본문을 빨리 보여줍니다. */
.hero-region { padding: 72px 0 78px; }
.hero-region .hero-title { font-size: clamp(28px, 4.2vw, 44px); }

.crumb { font-size: 14.5px; color: rgba(255, 255, 255, 0.62); margin-bottom: 16px; }
.crumb a { color: var(--amber); }
.crumb span { margin: 0 6px; opacity: .6; }

.regionlinks { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.regionlinks a {
  padding: 11px 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-size: 15.5px; font-weight: 600; color: var(--navy);
  transition: background .15s, border-color .15s, transform .15s;
}
.regionlinks a:hover { background: var(--navy); color: #fff; border-color: var(--navy); transform: translateY(-1px); }

.footer-col { flex: 1 1 190px; }
.footer-col-head {
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em;
  color: #fff; margin-bottom: 12px;
}
.footer-col ul { display: grid; gap: 8px; }
.footer-col a { font-size: 14.5px; color: rgba(255, 255, 255, 0.6); }
.footer-col a:hover { color: #fff; }

.footer-regions {
  padding: 26px 0 4px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.footer-regions-head {
  width: 100%; margin-bottom: 6px;
  font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}
.footer-regions a {
  font-size: 14px; color: rgba(255, 255, 255, 0.55);
  padding: 5px 11px; border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.11);
}
.footer-regions a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }

/* ── 나눠 맡길 때 vs 한 곳에서 ────────────────────────── */

.versus {
  margin-top: 44px;
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 0;
  align-items: stretch;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.vs-col { padding: 30px 28px; }
.vs-bad  { background: var(--bg-alt); color: var(--ink-soft); }
.vs-good { background: var(--ink-950); color: rgba(255, 255, 255, 0.82); }

.vs-head { font-size: 15px; font-weight: 800; letter-spacing: 0.02em; margin-bottom: 16px; }
.vs-bad  .vs-head { color: var(--ink-mute); }
.vs-good .vs-head { color: var(--amber); }

.vs-col ul { display: grid; gap: 11px; }
.vs-col li {
  position: relative; padding-left: 26px;
  font-size: 16px; word-break: keep-all;
}
.vs-col li::before {
  position: absolute; left: 0; top: 0;
  font-weight: 800; font-size: 15px;
}
.vs-bad  li::before { content: "✕"; color: #c0736f; }
.vs-good li::before { content: "✓"; color: var(--amber); }

.vs-mid {
  display: flex; align-items: center; justify-content: center;
  padding: 0 6px; background: var(--bg-alt);
}
.vs-mid svg {
  width: 26px; height: 26px;
  fill: none; stroke: var(--ink-mute); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── 이유 셋 ──────────────────────────────────────────── */

.reasons { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.reason {
  padding: 28px 26px; border-radius: var(--radius);
  border: 1px solid var(--line); background: #fff;
}
.reason h3 { font-size: 19px; font-weight: 700; }
.reason h3::before {
  content: ""; display: block;
  width: 26px; height: 3px; margin-bottom: 14px;
  background: var(--amber-600); border-radius: 2px;
}
.reason p { margin-top: 11px; font-size: 15.8px; color: var(--ink-soft); }

/* ── 진행 순서 ────────────────────────────────────────── */

.steps {
  margin-top: 52px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius); overflow: hidden;
}
.steps li { background: var(--ink-950); padding: 30px 28px 32px; }
.step-no {
  display: block; font-size: 13px; font-weight: 800;
  color: var(--amber); letter-spacing: 0.08em; margin-bottom: 14px;
}
.steps h3 { font-size: 19px; font-weight: 700; }
.steps p { margin-top: 9px; font-size: 15.5px; color: rgba(255, 255, 255, 0.62); }

/* ── 공지 띠 ──────────────────────────────────────────── */

.noticebar { background: var(--notice-bg); border-bottom: 1px solid var(--notice-line); }
.noticebar-inner { display: flex; gap: 16px; align-items: flex-start; padding-top: 16px; padding-bottom: 16px; }
.noticebar-tag {
  flex: 0 0 auto; margin-top: 2px;
  background: var(--amber-600); color: var(--on-amber);
  font-size: 13px; font-weight: 800; letter-spacing: 0.03em;
  padding: 4px 12px; border-radius: 999px;
}
.noticebar-list { flex: 1 1 auto; min-width: 0; display: grid; gap: 7px; }
.noticebar-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 15.5px; }
.noticebar-list strong { font-weight: 700; color: var(--notice-ink); word-break: keep-all; }
.noticebar-list span { color: var(--notice-soft); word-break: keep-all; }
.noticebar-list time { margin-left: auto; flex: 0 0 auto; color: var(--notice-mute); font-size: 14px; }

/* ── 사진 있는 현장 ───────────────────────────────────── */

.works { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.work-thumb {
  position: relative; display: block;
  border-radius: var(--radius); overflow: hidden;
  background: var(--bg-alt); border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
}
.work-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.work-thumb:hover img { transform: scale(1.04); }
.work-count {
  position: absolute; right: 10px; bottom: 10px;
  background: rgb(var(--ink-950-rgb) / 0.82); color: #fff;
  font-size: 12.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
}
.work h3 { margin-top: 15px; font-size: 18.5px; font-weight: 700; }
.work-meta { margin-top: 5px; font-size: 15px; color: var(--navy); font-weight: 600; }
.work-body { margin-top: 9px; font-size: 15.5px; color: var(--ink-soft); }

.subhead {
  margin-top: 66px; padding-top: 30px;
  border-top: 1px solid var(--line);
  font-size: 21px; font-weight: 800;
}

/* ── 글 한 편 ─────────────────────────────────────────── */

.post { padding-top: 56px; }
.crumb-dark { color: var(--ink-mute); margin-bottom: 18px; }
.crumb-dark a { color: var(--navy); font-weight: 600; }

.post-title { font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; }
.post-meta { margin-top: 12px; font-size: 15.5px; color: var(--ink-mute); font-weight: 600; }

.post-photos { margin-top: 30px; display: grid; gap: 14px; }
.post-photos img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }

/* 본문은 읽는 글입니다. 폭을 좁히고 행간을 넉넉히. */
.post-body {
  margin-top: 30px; font-size: 17.5px; line-height: 1.85;
  color: var(--ink); word-break: keep-all;
}

.post-cta {
  margin-top: 44px; padding: 26px 28px;
  background: var(--bg-alt); border-radius: var(--radius);
  border-left: 4px solid var(--amber-600);
}
.post-cta p { color: var(--ink-soft); font-size: 16px; }
.post-cta .btn { margin-top: 16px; }

.postlist { margin-top: 24px; }
.postlist li { border-bottom: 1px solid var(--line); }
.postlist a {
  display: flex; gap: 16px; align-items: baseline; justify-content: space-between;
  padding: 16px 4px; transition: padding-left .15s;
}
.postlist a:hover { padding-left: 12px; }
.postlist-t { font-weight: 600; word-break: keep-all; }
.postlist-m { flex: 0 0 auto; font-size: 14.5px; color: var(--ink-mute); }

.work h3 a { display: block; }
.work h3 a:hover { color: var(--navy); }

/* ── 관련 기사 ────────────────────────────────────────── */

.presslist { margin-top: 40px; display: grid; gap: 12px; }
.presslist a {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 6px 18px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px;
  box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.presslist a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--navy); }
.press-title { font-size: 17.5px; font-weight: 700; word-break: keep-all; }
.press-meta { grid-column: 1; font-size: 14.5px; color: var(--ink-mute); }
.press-arrow {
  grid-row: 1 / 3; grid-column: 2;
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: none; stroke: var(--navy); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── 실적 목록 ────────────────────────────────────────── */

.worklist { margin-top: 44px; border-top: 1px solid var(--line); }
.worklist li {
  display: grid; grid-template-columns: 76px 1fr;
  gap: 16px; align-items: baseline;
  padding: 17px 6px; border-bottom: 1px solid var(--line);
  transition: background .15s, padding-left .15s;
}
.worklist li:hover { background: var(--bg-alt); padding-left: 14px; }
.worklist-year { font-weight: 800; color: var(--navy); font-size: 15.5px; }
.worklist-name { font-size: 16.5px; }

/* ── 요금표 ───────────────────────────────────────────── */

/* 좁은 화면에서 표가 본문을 밀어내지 않게 자기 안에서만 가로로 넘칩니다. */
.table-scroll {
  margin-top: 36px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
}
.fee-table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 16px; }
.fee-table th, .fee-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line-soft); }
.fee-table thead th {
  background: var(--ink-950); color: #fff;
  font-weight: 600; font-size: 14.5px; letter-spacing: 0.02em;
}
.fee-table tbody tr:last-child td { border-bottom: 0; }
.fee-table tbody tr:hover { background: var(--bg-alt); }
.fee-table td:last-child { text-align: right; font-weight: 800; color: var(--navy); }

/* ── 지금 부를 일인지 가리는 표 ─────────────────────────
   화면에서 제일 먼저 읽히는 자리입니다. 색은 세 줄을 구분하는 데만 쓰고,
   앰버(전화 버튼)와는 섞지 않습니다 — 여기서 누를 곳은 전화번호 하나뿐입니다. */

.triage { margin-top: 44px; }
.triage h3 { font-size: clamp(19px, 2.1vw, 23px); letter-spacing: -0.03em; }
.triage-lead { margin-top: 10px; color: var(--ink-soft); font-size: 16.5px; line-height: 1.75; }
.triage .table-scroll { margin-top: 20px; }

.tri-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15.5px; }
.tri-table th, .tri-table td {
  padding: 15px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line-soft); line-height: 1.7;
}
.tri-table thead th {
  background: var(--ink-950); color: #fff;
  font-weight: 600; font-size: 14px; letter-spacing: 0.02em;
}
.tri-table tbody tr:last-child th, .tri-table tbody tr:last-child td { border-bottom: 0; }
.tri-table tbody th[scope="row"] {
  width: 132px; font-weight: 800; color: var(--ink); white-space: nowrap;
  border-left: 4px solid transparent;
}
.tri-table td:first-of-type { color: var(--ink); }
.tri-table td:last-child { color: var(--ink-soft); width: 33%; }

/* 바로 위 `.tri-table tbody th[scope="row"]` 이 더 구체적이라, 줄 이름만으로는
   색이 안 먹습니다. 실제로 한 번 그렇게 나갔습니다. 선택자를 같은 길이로 맞춥니다. */
.tri-table tbody tr.tri-now  th[scope="row"] { border-left-color: #c2392f; color: #a8322a; }
.tri-table tbody tr.tri-soon th[scope="row"] { border-left-color: var(--copper); color: var(--copper); }
.tri-table tbody tr.tri-wait th[scope="row"] { border-left-color: var(--line); color: var(--ink-mute); }
.tri-now  { background: #fdf5f4; }
.tri-wait { background: var(--bg-alt); }

/* 표 안의 전화번호. 여기가 이 페이지에서 전화 의사가 가장 높은 순간입니다. */
.tri-call {
  display: inline-block; margin-top: 8px;
  font-family: var(--mono); font-size: 17px; font-weight: 700;
  color: #a8322a; border-bottom: 2px solid currentColor; padding-bottom: 1px;
}
.tri-call:hover { color: #8c2721; }

@media (max-width: 600px) {
  .tri-table { min-width: 540px; font-size: 15px; }
  .tri-table th, .tri-table td { padding: 13px 14px; }
  .tri-table tbody th[scope="row"] { width: 104px; }
}

/* ── FAQ ──────────────────────────────────────────────── */

.faq { margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 22px 44px 22px 2px;
  font-size: 17.5px; font-weight: 600; word-break: keep-all;
}
.faq summary::-webkit-details-marker { display: none; }
/* 질문은 h3 입니다 — 검색엔진이 소제목을 먼저 봅니다.
   보이기는 원래대로 한 줄이어야 하니 기본 제목 여백만 지웁니다. */
.faq summary h3 { display: inline; margin: 0; font-size: inherit; font-weight: inherit; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2px solid var(--ink-mute); border-bottom: 2px solid var(--ink-mute);
  transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details[open] summary { color: var(--navy); }
.faq p { padding: 0 8px 24px 2px; color: var(--ink-soft); font-size: 16.2px; }

/* ── 문의 ─────────────────────────────────────────────── */

.contact-grid {
  margin-top: 44px;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 22px; align-items: start;
}
.places { display: grid; gap: 18px; }
.place {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius); padding: 28px 26px;
}
.place h3 { font-size: 19px; font-weight: 700; }
.place-addr { margin-top: 9px; color: rgba(255, 255, 255, 0.66); font-size: 16px; }
.place-link {
  display: inline-block; margin-top: 15px;
  font-size: 15px; font-weight: 600; color: var(--amber);
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}

.callbox {
  background: #fff; color: var(--ink);
  border-radius: var(--radius); padding: 30px 28px;
  box-shadow: var(--shadow-lg);
}
.callbox-label { font-size: 13.5px; font-weight: 700; color: var(--navy); letter-spacing: 0.05em; }
.callbox-num {
  display: block; margin-top: 6px;
  font-size: 30px; font-weight: 800; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; color: var(--ink-950);
}
.callbox-list { margin: 22px 0 0; display: grid; gap: 1px; }
.callbox-list > div {
  display: grid; grid-template-columns: 88px 1fr; gap: 10px;
  padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 15.5px;
}
.callbox-list dt { margin: 0; color: var(--ink-mute); font-weight: 500; }
.callbox-list dd { margin: 0; font-weight: 500; }
.callbox-list a { color: var(--navy); font-weight: 600; }

/* ── 푸터 ─────────────────────────────────────────────── */

.site-footer { background: var(--ink-1000); color: rgba(255, 255, 255, 0.62); padding: 56px 0 40px; font-size: 15px; }
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 28px;
  justify-content: space-between; align-items: start;
  padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.footer-brand { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.03em; }
.footer-info { margin-top: 14px; line-height: 1.8; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-links a {
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 14.5px; transition: background .15s;
}
.footer-links a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.footer-copy { font-size: 13.5px; color: rgba(255, 255, 255, 0.38); }

/* 맨 아랫줄. 관리자 링크는 눈에 띄되 방문자에게 거슬리지 않게. */
.footer-bottom {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
}
.footer-admin {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px;          /* 손가락으로 눌러야 하니 44px */
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 14.5px; font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  transition: background .15s, color .15s, border-color .15s;
}
.footer-admin:hover { background: rgba(255, 255, 255, 0.09); color: #fff; border-color: rgba(255,255,255,.36); }
.footer-admin svg {
  width: 15px; height: 15px; flex: 0 0 auto;
  fill: none; stroke: var(--amber); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── 전화 버튼 (모바일 고정) ──────────────────────────── */

.call-fab { display: none; }

/* ── 등장 효과 ────────────────────────────────────────── */

/* 기본값은 '보임' 입니다. JS 가 죽거나 CSS 만 실행돼도 내용은 무조건 보입니다.
   숨기는 건 main.js 가 <html> 에 .js-reveal 을 붙였을 때뿐입니다. */
.js-reveal .reveal { opacity: 0; transform: translateY(16px); }
.js-reveal .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── 좁은 화면 ────────────────────────────────────────── */

@media (max-width: 1100px) {
  .nav a { padding: 9px 10px; font-size: 15px; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1020px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .reasons { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .works { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split-head { position: static; }
}

@media (max-width: 860px) {
  .section { padding: 68px 0; }
  .hero { padding: 76px 0 84px; }
  .cards, .steps, .places, .works { grid-template-columns: 1fr; }

  /* 좁은 화면에서는 위아래로 쌓고, 가운데 화살표는 아래를 가리키게 돌립니다. */
  .versus { grid-template-columns: 1fr; }
  .vs-mid { padding: 10px 0; }
  .vs-mid svg { transform: rotate(90deg); }
  .noticebar-inner { flex-direction: column; gap: 10px; }
  .noticebar-list time { margin-left: 0; }

  .header-inner { height: 66px; }
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 66px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 10px 22px 18px;
    box-shadow: 0 14px 30px rgba(16, 32, 48, 0.1);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 8px; font-size: 17px; border-radius: 0; border-bottom: 1px solid var(--line-soft); }
  .nav a:last-of-type { border-bottom: 0; }
  .nav-call {
    margin: 12px 0 0; border-radius: 12px;
    justify-content: center; padding: 16px !important; font-size: 17px;
  }

  /* 어디를 보고 있든 전화가 한 번에 닿게. */
  .call-fab {
    position: fixed; right: 16px; bottom: 16px; z-index: 60;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1px; width: 62px; height: 62px; border-radius: 50%;
    background: var(--amber); color: var(--on-amber);
    font-size: 12px; font-weight: 800;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  }
  .call-fab svg { width: 19px; height: 19px; fill: var(--on-amber); }
  .call-fab:active { transform: translateY(1px); }

  .site-footer { padding-bottom: 104px; }   /* 고정 버튼에 가리지 않게 */
}

@media (max-width: 520px) {
  body { font-size: 16.5px; }
  .quote blockquote { padding: 22px 20px; }
  .quote blockquote p { font-size: 17px; }
  .worklist li { grid-template-columns: 58px 1fr; gap: 11px; }
  .worklist-name { font-size: 15.8px; }
  .callbox-num { font-size: 26px; }
  .callbox-list > div { grid-template-columns: 78px 1fr; }
  .card, .place, .callbox { padding: 24px 20px; }
  .steps li { padding: 26px 22px; }
}

/* 키워드 묶음 소제목 — 검색어 조합을 넓게 받는 자리입니다 */
.pairlist { margin: 22px 0 30px; }
.pairhead {
  font-size: 16px; font-weight: 600; color: var(--ink-soft);
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.pairhead a { color: var(--navy); text-decoration: none; border-bottom: 1px solid transparent; }
.pairhead a:hover { border-bottom-color: currentColor; }

/* 지역·서비스 페이지에는 매장 주소를 안 씁니다.
   그 지역 손님이 '아 멀구나' 하고 닫습니다. 대신 이 자리에 짧은 설명을 둡니다. */
.contact-grid-solo { grid-template-columns: minmax(0, 1fr) 360px; }
.reachout p { margin: 0 0 16px; font-size: 16.6px; line-height: 1.9; color: rgba(255,255,255,.78); }
.reachout p:last-child { margin-bottom: 0; }

/* 공통 페이지의 긴 글 — 읽는 글이라 본문 폭을 좁게 씁니다 */
#story h3, #know h3 {
  margin-top: 40px; font-size: 20px; font-weight: 700;
  padding-left: 15px; border-left: 3px solid var(--navy);
}
#story h3:first-of-type, #know h3:first-of-type { margin-top: 34px; }
#story p, #know p { margin-top: 14px; font-size: 17px; line-height: 1.9; color: var(--ink-soft); }
#story p b, #know p b { color: var(--ink); font-weight: 700; }
.story-lead { margin-top: 20px; font-size: 18px; line-height: 1.85; color: var(--ink-soft); }

/* ═══════════════════════════════════════════════════════════════
   살아 있는 화면
   ───────────────────────────────────────────────────────────────
   전기 회사 사이트입니다. 정적인 종이처럼 보이면 설득이 안 됩니다.
   다만 어르신 손님이 많으니 **읽는 데 방해가 되면 안 됩니다** —
   움직이는 건 처음 한 번만이고, 글자는 절대 흔들리지 않습니다.
   prefers-reduced-motion 을 켜 두신 분에게는 전부 멈춥니다.
   ═══════════════════════════════════════════════════════════════ */

/* ── 버스바 ─────────────────────────────────────────────────────
   이 사이트가 기억될 하나입니다.
   분전반을 열면 차단기들이 굵은 구리 막대 하나에 전부 물려 있습니다.
   그게 버스바입니다. 화면 왼쪽을 세로로 관통하는 이 선이 그 역할을 합니다 —
   읽어 내려간 만큼 구리가 차오르고, 각 섹션의 눈썹 문구가 짧은 분기선으로
   여기에 물립니다. 위쪽 가로 진행막대는 걷어냈습니다. 둘 다 두면 둘 다 흐려집니다.
   좁은 화면에서는 나오지 않습니다. 넣을 자리가 없으면 안 넣는 게 낫습니다. */
.busbar {
  position: fixed; left: 30px; top: 92px; bottom: 30px; width: 3px;
  background: var(--line); border-radius: 2px; z-index: 40; display: none;
}
.busbar i {
  position: absolute; inset: 0 0 auto 0; height: 0; border-radius: 2px;
  background: linear-gradient(180deg, var(--copper-lt), var(--copper));
  box-shadow: 0 0 12px rgb(var(--copper-rgb) / .45);
}
.busbar b {
  position: absolute; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: var(--copper);
  box-shadow: 0 0 0 4px rgb(var(--copper-rgb) / .16);
  transition: top .1s linear;
}
@media (min-width: 1280px) { .busbar { display: block; } }

/* 눈썹 문구가 버스바 쪽으로 분기선을 뻗습니다 */
@media (min-width: 1280px) {
  .section-eyebrow { position: relative; }
  .section-eyebrow::before {
    content: ""; position: absolute; right: calc(100% + 14px); top: .72em;
    width: 0; height: 2px; background: var(--copper);
    transition: width .5s cubic-bezier(.2, .7, .3, 1);
  }
  .section-eyebrow.is-in::before { width: 34px; }
}

/* ── 히어로: 전선을 타고 흐르는 불빛 ── */
.hero-grid .wire {
  stroke-dasharray: 14 320;
  animation: flow 7s linear infinite;
}
.hero-grid .wire:nth-of-type(2) { animation-delay: 2.3s; }
.hero-grid .wire:nth-of-type(3) { animation-delay: 4.6s; }
@keyframes flow { to { stroke-dashoffset: -334; } }

.hero-grid circle { animation: blink 2.6s ease-in-out infinite; }
.hero-grid circle:nth-of-type(2) { animation-delay: 1.3s; }
@keyframes blink {
  0%, 100% { opacity: .35; r: 4; }
  50%      { opacity: 1;   r: 6; }
}

/* 눈썹 문구의 점이 실제로 깜빡입니다 */
.hero-eyebrow .dot { animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--amber-rgb) / .55); }
  70%      { box-shadow: 0 0 0 9px rgb(var(--amber-rgb) / 0); }
}

/* ── 히어로 글자가 위에서 내려옵니다. 한 번뿐입니다 ── */
.hero-eyebrow, .hero-title, .hero-lead, .hero-actions, .hero-badges { animation: rise .7s both; }
.hero-title   { animation-delay: .06s; }
.hero-lead    { animation-delay: .14s; }
.hero-actions { animation-delay: .22s; }
.hero-badges  { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ── 전화 단추: 누르고 싶게 ── */
.btn-primary {
  box-shadow: 0 6px 18px rgb(var(--amber-rgb) / .28);
  transition: transform .18s, box-shadow .18s, background .18s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgb(var(--amber-rgb) / .42); }
.btn-primary:active { transform: translateY(0); }

/* 히어로의 전화 단추만 한 번씩 숨을 쉽니다 */
.hero .btn-primary { animation: rise .7s .22s both, breathe 3.6s 1.4s ease-in-out infinite; }
@keyframes breathe {
  0%, 92%, 100% { box-shadow: 0 6px 18px rgb(var(--amber-rgb) / .28); }
  96%           { box-shadow: 0 6px 18px rgb(var(--amber-rgb) / .28), 0 0 0 12px rgb(var(--amber-rgb) / 0); }
  94%           { box-shadow: 0 6px 18px rgb(var(--amber-rgb) / .5),  0 0 0 0 rgb(var(--amber-rgb) / .35); }
}

/* ── 카드: 위쪽에 전기 띠가 그어집니다 ── */
.card { position: relative; overflow: hidden; }
.card::before {
  content: ""; position: absolute; inset: 0 auto auto 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--amber), var(--amber-lt));
  transition: width .38s cubic-bezier(.2, .7, .3, 1);
}
.card:hover::before { width: 100%; }

/* ── 지역·서비스 알약: 커서를 따라 살짝 뜹니다 ── */
.regionlinks a { transition: transform .16s, background .16s, color .16s, border-color .16s, box-shadow .16s; }
.regionlinks a:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgb(var(--ink-900-rgb) / .18); }

/* ── 숫자가 올라갑니다 ── */
.count-up { font-variant-numeric: tabular-nums; }

/* ── 등장: 조금 더 살아 있게, 순서대로 ── */
.js-reveal .reveal { opacity: 0; transform: translateY(22px) scale(.995); }
.js-reveal .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .62s cubic-bezier(.2, .7, .3, 1), transform .62s cubic-bezier(.2, .7, .3, 1);
}
.js-reveal .reveal.is-in:nth-child(2) { transition-delay: .07s; }
.js-reveal .reveal.is-in:nth-child(3) { transition-delay: .14s; }
.js-reveal .reveal.is-in:nth-child(4) { transition-delay: .21s; }

/* ── 소제목 왼쪽 막대가 그어집니다 ── */
#story h3, #know h3, .regionbody h3 { border-left-color: transparent; transition: border-color .5s .1s; }
#story h3.is-in, #know h3.is-in, .regionbody h3.is-in { border-left-color: var(--navy); }

/* ── 모바일 전화 단추(이미 있는 것)를 눈에 띄게 ──
   새 막대를 하나 더 만들면 화면 아래가 두 겹이 됩니다. 있는 걸 살립니다. */
.call-fab {
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s;
  animation: fabring 3.2s 1.6s ease-out infinite;
}
.call-fab:active { transform: scale(.94); }
.call-fab.is-big { transform: scale(1.06); }
@keyframes fabring {
  0%, 78%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .3), 0 0 0 0 rgb(var(--amber-rgb) / .5); }
  88%           { box-shadow: 0 8px 24px rgba(0, 0, 0, .3), 0 0 0 14px rgb(var(--amber-rgb) / 0); }
}

/* ── 움직임을 꺼 두신 분에게는 전부 멈춥니다 ── */
@media (prefers-reduced-motion: reduce) {
  .hero-grid .wire, .hero-grid circle, .hero-eyebrow .dot,
  .hero-eyebrow, .hero-title, .hero-lead, .hero-actions, .hero-badges,
  .hero .btn-primary, .call-fab { animation: none !important; }
  .progress { transition: none; }
  .card::before { display: none; }
}

/* ── 「전화 걸기 전에」 소제목 ──
   번호(01·02·03)를 붙였다가 뺐습니다. 이건 순서가 아니라 **확인할 것들**입니다.
   순서가 아닌 데 번호를 붙이면 없는 규칙을 있는 척하는 셈입니다.
   순서인 것은 「전화부터 준공까지」 하나뿐이고 거기는 원래 번호가 있습니다.
   대신 회로 분기 표시를 씁니다 — 하나의 줄기에서 갈라져 나온 항목들입니다. */
#know h3 {
  padding-left: 0; border-left: 0;
  display: flex; align-items: baseline; gap: 13px;
}
#know h3::before {
  content: ""; flex: none; width: 15px; height: 15px;
  border-left: 2px solid var(--copper); border-bottom: 2px solid var(--copper);
  border-bottom-left-radius: 5px; transform: translateY(-5px);
  opacity: 0; transition: opacity .4s;
}
#know h3.is-in::before { opacity: 1; }

#story h3 { border-left-color: transparent; }
#story h3.is-in { border-left-color: var(--copper); }

/* ── 섹션 사이 회로 무늬 ── 밝은 구역이 이어질 때 지루해지지 않게 */
.section + .section:not(.section-alt)::before {
  content: ""; display: block; height: 1px; max-width: 1080px;
  margin: 0 auto 56px; padding: 0 22px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  #know h3.is-in::before { animation: none; }
}

/* ── 값은 고정폭으로 ──
   도면과 계측기가 값을 찍는 방식입니다. 본문은 프리텐다드 그대로 두고
   '숫자와 규격' 만 옮깁니다. 섞어 쓰면 산만하니 여기까지만. */
/* 한글에는 절대 걸지 마세요. IBM Plex Mono 에 한글이 없어서
   '직접 처리' 가 '직접  처리' 로 벌어집니다. 숫자와 전화번호까지만. */
.number,
.callbox-num,
.btn-primary,
.topbar-tel,
.cost td .number,
.hero-badges strong.number {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}
.btn-primary { font-weight: 600; }
.callbox-num { letter-spacing: -0.02em; }

/* 눈썹 문구도 계측기 라벨처럼 — 넓은 자간, 작은 크기, 구리색 */
.section-eyebrow {
  color: var(--copper);
  letter-spacing: .14em;
  font-size: 12.5px;
  font-weight: 700;
}

/* 히어로 눈썹은 어두운 바탕이라 밝은 구리로 */
.hero-eyebrow { letter-spacing: .12em; }
.hero-eyebrow .dot { background: var(--copper-lt); }

/* 카드 위 띠도 구리로 — 앰버는 '누르는 곳' 에만 남깁니다 */
.card::before { background: linear-gradient(90deg, var(--copper), var(--copper-lt)); }

/* 지역·서비스 알약: 눌러 들어가는 곳이라 테두리만 구리로 물듭니다 */
.regionlinks a:hover { background: var(--ink-900); border-color: var(--copper); }

/* 소제목 왼쪽 막대도 구리 */
.regionbody h3 { border-left-color: var(--copper); }

/* 페이지 왼쪽 여백이 버스바에 먹히지 않게 */
@media (min-width: 1280px) {
  .call-fab { bottom: 24px; }
}

/* ── 사양서 조판 ───────────────────────────────────────────────────
   히어로 → 카드 3장 → 아코디언 → CTA. 그 순서가 랜딩페이지의 기본값이고
   한눈에 어디서 찍어낸 건지 보입니다. 긴 글만이라도 다른 문서에서 가져옵니다 —
   장비 사양서와 패널 스케줄. 왼쪽에 항목, 오른쪽에 내용. 사이에 구리 헤어라인.
   이 업의 사람이 매일 보는 종이 모양입니다. */
.spec {
  display: grid;
  grid-template-columns: minmax(0, 27%) minmax(0, 1fr);
  gap: 0 40px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.spec:first-of-type { border-top: 2px solid var(--copper); margin-top: 34px; }

.spec h3 {
  margin: 0; padding: 0; border: 0;
  font-size: 17px; font-weight: 700; line-height: 1.5;
  letter-spacing: -0.02em; color: var(--ink);
  position: sticky; top: 104px; align-self: start;
}
.spec h3::before { display: none; }        /* 회로 분기 표시는 여기선 안 씁니다 */
.spec-body p { margin: 0 0 15px; font-size: 17px; line-height: 1.92; color: var(--ink-soft); }
.spec-body p:last-child { margin-bottom: 0; }
.spec-body b { color: var(--ink); font-weight: 700; }

/* 왼쪽 항목에 작은 구리 눈금 — 패널 스케줄의 단자 번호 자리 */
.spec h3 { padding-left: 15px; }
.spec h3::after {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%;
  border: 2px solid var(--copper); background: var(--bg);
}
.section-alt .spec h3::after { background: var(--bg-alt); }

@media (max-width: 860px) {
  .spec { grid-template-columns: 1fr; gap: 12px; padding: 26px 0; }
  .spec h3 { position: static; font-size: 18.5px; }
}

/* 알약은 둥근 채로 둡니다 — 누르는 물건이라 손에 닿는 모양이어야 합니다 */
.regionlinks a, .pairhead a, .hero-badges li, .card-tag { border-radius: 999px; }

/* 큰 제목 아래 여백을 조입니다. 제목이 커진 만큼 붙어야 한 덩어리로 읽힙니다 */
.section-title + .section-lead { margin-top: 16px; }

/* ── 진행 순서를 결선도로 ──────────────────────────────────────────
   여섯 개의 카드가 나란히 놓인 건 어느 랜딩에나 있습니다.
   이건 실제로 **순서**가 있는 유일한 구역이라, 순서를 눈에 보이게 만듭니다 —
   구리 선 하나가 왼쪽에서 오른쪽으로 지나가고 각 단계가 단자처럼 물립니다.
   전기 도면에서 결선을 그리는 방식 그대로입니다. */
#process .steps {
  position: relative;
  background: transparent; border: 0; border-radius: 0; overflow: visible;
  gap: 46px 30px;
}
#process .steps::before {
  content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 2px;
  background: linear-gradient(90deg, var(--copper) 0%, var(--copper-lt) 70%, transparent 100%);
  opacity: .5;
}
#process .steps li {
  position: relative; background: transparent; padding: 0;
  border-top: 0;
}
#process .step-no {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--ink-950); border: 2px solid var(--copper);
  color: var(--copper-lt); font-size: 14px; font-weight: 600;
}
#process .steps h3 { margin-top: 18px; }
#process .steps li::after {
  content: ""; position: absolute; left: 21px; top: 42px; width: 2px; height: 14px;
  background: var(--copper); opacity: .45;
}

@media (max-width: 900px) {
  #process .steps::before { display: none; }
  #process .steps li::after { display: none; }
  #process .steps { row-gap: 30px; }
}

/* ── 어두운 패널 위의 링크 ──
   흰 구역이 네 개 이어지면 눈이 지치고 페이지가 길게만 느껴집니다.
   지역·공사 링크 구역을 분전반 색으로 눕혀 리듬을 끊습니다. */
.section-dark .section-eyebrow { color: var(--copper-lt); }
.section-dark .section-lead    { color: rgba(255, 255, 255, .68); }
.section-dark .pairhead        { color: rgba(255, 255, 255, .72); border-bottom-color: rgba(255, 255, 255, .12); }
.section-dark .pairhead a      { color: var(--copper-lt); }

.section-dark .regionlinks a {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .9);
}
.section-dark .regionlinks a:hover {
  background: var(--copper); border-color: var(--copper); color: #fff;
}

/* ── 카드도 사양서 어법으로 ──
   흰 상자 여덟 개가 격자로 놓인 건 어느 회사 소개에나 있습니다.
   위쪽에 구리 헤어라인과 단자를 두어 분전반의 회로 목록처럼 읽히게 합니다. */
.card {
  border-top: 2px solid var(--line2, var(--line));
  padding: 26px 24px 28px;
}
.card::after {
  content: ""; position: absolute; left: 24px; top: -5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--copper);
}
.section-alt .card::after { background: var(--bg-alt); }
.card h3 { font-size: 18.5px; letter-spacing: -0.025em; }
.card p  { font-size: 15.4px; line-height: 1.82; }

/* ── 모눈종이 ──────────────────────────────────────────────────────
   밝은 구역이 완전히 평평하면 화면이 종이 한 장처럼 납작해집니다.
   배선을 스케치할 때 쓰는 모눈을 아주 옅게 깔았습니다. 장식이 아니라
   이 업이 쓰는 종이라서 골랐고, 글을 읽는 데 방해가 되면 안 되므로
   선은 배경색과 거의 구분되지 않을 만큼만 둡니다. */
.section-alt {
  background-image:
    linear-gradient(to right,  rgba(16, 32, 48, .028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 32, 48, .028) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* 어두운 패널에도 같은 모눈. 히어로와 같은 결이라 위아래가 이어집니다 */
.section-dark {
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* 모눈 위에 놓이는 상자는 바탕을 눌러 글이 뜨게 합니다 */
.section-alt .card,
.section-alt .symptom,
.section-alt .faq { background: #fff; }
.section-alt .spec h3::after { background: #fff; }
.section-alt .card::after { background: #fff; }

/* ── 문자 버튼 ──
   전화만 두면 밤이거나 통화가 부담스러운 사람을 통째로 놓칩니다.
   문자는 개인정보를 받지 않으므로 처리방침도, 관리할 화면도 필요 없습니다.
   앰버(전화)보다 한 단 낮춰서 무엇이 첫 번째인지는 흐리지 않습니다. */
.btn-sms {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
}
.btn-sms:hover { background: rgba(255, 255, 255, .15); border-color: var(--copper-lt); }
.btn-sms svg { width: 17px; height: 17px; fill: currentColor; margin-right: 7px; }

/* 밝은 바탕(문의 블록 안 callbox 는 어두우므로 그대로) */
.section:not(.section-dark) .btn-sms {
  background: #fff; border-color: var(--line2, var(--line)); color: var(--ink);
}
.section:not(.section-dark) .btn-sms:hover { border-color: var(--copper); color: var(--copper); }

.callbox .btn-sms { margin-top: 9px; }
.callbox-note {
  margin-top: 14px; font-size: 14px; line-height: 1.75;
  color: rgba(255, 255, 255, .6);
}

/* AI 가 쓴 글에 인용이 섞여 있을 때 */
.regionbody .quoteline {
  padding-left: 16px; border-left: 3px solid var(--copper-lt);
  color: var(--ink); font-style: normal;
}

/* ── 히어로 제목 두 줄 ──
   h1 은 검색어(의정부 전기공사), 그 아래가 사람이 읽는 문구.
   화면에서는 아래쪽이 더 큽니다 — 검색엔진은 태그를 보고 사람은 크기를 봅니다. */
.hero-h1 {
  margin: 0 0 10px;
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
  color: rgba(255, 255, 255, .82);
}
.hero-h1-yr { color: var(--amber); font-family: var(--mono); font-weight: 600; }

/* ── 숫자 띠 ──
   히어로와 본문 사이에 걸칩니다. 글보다 숫자가 먼저 읽힙니다. */
.figures { background: var(--ink-950); padding: 0 0 6px; }
.figs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  transform: translateY(-30px);
  overflow: hidden;
}
.fig {
  padding: 26px 18px 24px; text-align: center;
  border-left: 1px solid var(--line);
}
.fig:first-child { border-left: 0; }
.fig-n {
  font-family: var(--mono); font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 600; letter-spacing: -0.03em; color: var(--navy);
}
.fig-u { font-size: 16px; font-weight: 700; color: var(--navy); margin-left: 2px; }
.fig-l { display: block; margin-top: 6px; font-size: 14px; color: var(--ink-soft); }

@media (max-width: 760px) {
  .figs { grid-template-columns: repeat(2, 1fr); transform: translateY(-22px); }
  .fig:nth-child(3) { border-left: 0; }
  .fig:nth-child(n+3) { border-top: 1px solid var(--line); }
  .fig { padding: 20px 12px 18px; }
}

/* ── 증상 자가점검 ──
   "이 중 하나라도 있으면" — 읽는 사람이 자기 상황을 찾아내면 그때 전화가 옵니다.
   고르면 아래 안내가 바뀝니다. 자바스크립트가 죽어도 목록은 그대로 읽힙니다. */
.checkgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 30px; }
.checkgrid label {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 15px 16px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; transition: border-color .16s, box-shadow .16s;
  font-size: 16px; line-height: 1.5; word-break: keep-all;
}
.checkgrid label:hover { border-color: var(--copper); }
.checkgrid input { margin: 3px 0 0; width: 17px; height: 17px; accent-color: var(--navy); flex: none; }
.checkgrid label:has(input:checked) {
  border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy) inset;
}
.checkgrid .urgent { color: var(--bad, #c8403a); font-weight: 700; }

.checkout {
  margin-top: 22px; padding: 22px 24px;
  background: var(--ink-950); border-radius: var(--radius); color: #fff;
}
.checkout h3 { font-size: 19px; font-weight: 700; }
.checkout p { margin-top: 10px; color: rgba(255, 255, 255, .74); font-size: 16px; line-height: 1.8; }
.checkout .btn { margin-top: 16px; }

@media (max-width: 700px) { .checkgrid { grid-template-columns: 1fr; } }

/* ── 히어로의 분전반 도면 ──
   사진 자리입니다. 진짜 현장 사진을 받으면 이 자리를 바꿉니다.
   그때까지 사진인 척하지 않는 그림으로 채웁니다.
   좁은 화면에서는 안 보입니다 — 글이 먼저입니다. */
.hero-panel {
  position: absolute; right: 6vw; top: 50%;
  width: clamp(200px, 20vw, 280px); height: auto;
  transform: translateY(-50%);
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, .45));
  pointer-events: none;
  animation: rise .9s .3s both;
}
.hero-panel .pbus { animation: busglow 4.2s ease-in-out infinite; }
@keyframes busglow {
  0%, 100% { opacity: .78; }
  50%      { opacity: 1; }
}
/* 내려간 차단기 한 칸만 아주 느리게 깜빡입니다. 나머지는 가만히 둡니다 */
.hero-panel .brk-off rect:first-child { animation: offblink 3.4s ease-in-out infinite; }
@keyframes offblink {
  0%, 88%, 100% { stroke: rgba(200, 64, 58, .5); }
  94%           { stroke: rgba(200, 64, 58, .95); }
}

@media (max-width: 1100px) { .hero-panel { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-panel, .hero-panel .pbus, .hero-panel .brk-off rect:first-child { animation: none !important; }
}

/* ── 도해 ──
   글 세 문단보다 그림 하나가 빠른 자리에만 씁니다.
   사진이 아니라 도면입니다 — 실제로 하는 동작을 그린 것뿐입니다. */
.howto { margin: 20px 0 0; }
/* 도해는 이제 `<img src="assets/fig/*.svg">` 입니다. 인라인 svg 는 검색엔진이
   이미지로 안 세서 파일로 뺐습니다. 옛 규칙도 남겨 둡니다 — 다른 데서 아직 씁니다. */
.howto svg, .howto img { width: 100%; height: auto; display: block; }
.howto figcaption {
  margin-top: 12px; font-size: 14.5px; line-height: 1.75;
  color: var(--ink-mute); word-break: keep-all;
}
.section-alt .howto svg .bx { fill: #fff; }

/* 홈 「동네별 전기공사 · 누전공사」 (block_area_links) — 묶음마다 작은 제목 */
#area .area-head { margin: 30px 0 0; font-size: 16px; color: var(--ink-mute); font-weight: 600; }
#area .area-head + .regionlinks { margin-top: 12px; }

/* ── 참고 사진 (Pexels) ── 우리 현장 사진이 아니라서 캡션에 늘 「참고 사진」 을 답니다(app/blocks.php kw_photo). */
.kwphoto { margin: 22px 0 26px; }
.kwphoto img { width: 100%; height: auto; display: block; border-radius: var(--radius); background: var(--line-soft); }
.kwphoto figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-mute); }
.kwphoto figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* 2026-10-08: 전에는 좁은 화면에서 min-width 560px 로 가로로 밀어 보게 했는데, 휴대폰에서 상자 안 가로 스크롤이
   생겨 「화면 밖으로 넘친다」 는 지적을 받았습니다. 이제 폭에 맞춰 줄입니다(글씨가 작아지는 대신 한눈에 보임). */
.howto svg, .howto img { max-width: 100%; height: auto; }
@media (max-width: 620px) {
  .howto { overflow-x: visible; }
  .howto svg, .howto img { min-width: 0; width: 100%; }
}

/* 개인정보처리방침 — 긴 글이라 소제목 사이를 벌리고 목록을 읽히게 */
.privacy h2{font-size:1.12rem;margin:34px 0 10px;letter-spacing:-.02em}
.privacy ul{margin:8px 0 12px;padding-left:1.25em}
.privacy li{margin:4px 0;line-height:1.7}
.privacy p{line-height:1.8}
.privacy .logtable{margin:10px 0 14px}
.privacy .logtable th{width:7em;text-align:left}
.footer-copy a{color:inherit}

/* ── 2026-10-08 광고 전환 · 모바일 손질 ─────────────────────────────── */

/* 휴대폰 머리줄: 로고 + 「전화하기」 + 메뉴 단추. 넓은 화면에서는 메뉴 안의 전화 단추가 있어 숨깁니다. */
.head-call { display: none; }
@media (max-width: 860px) {
  .header-inner { gap: 10px; }
  .head-call {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    padding: 9px 14px; border-radius: 999px;
    background: var(--amber); color: var(--on-amber); font-size: 15px; font-weight: 800; white-space: nowrap;
  }
  .head-call svg { width: 15px; height: 15px; fill: var(--on-amber); }
  .brand { min-width: 0; }
  .brand-text { min-width: 0; }
}
@media (max-width: 360px) {
  .brand-sub { display: none; }          /* 아주 좁으면 「의정부 · 양주」 를 빼서 전화 단추 자리를 지킵니다 */
  .head-call { padding: 8px 11px; font-size: 14px; }
}

/* 히어로 — 급한 손님에게 한 줄. 앰버는 누르는 곳에만 쓰므로 여기서는 점 하나와 왼쪽 선만. */
/* flex 로 두면 <b> 와 나머지 글이 두 칸으로 갈라집니다(2026-10-08 375px 에서 확인) — 한 줄 글로 흘립니다 */
.hero-urgent {
  display: block;
  margin: 18px 0 0; padding: 11px 14px; max-width: 640px;
  border-left: 3px solid var(--amber); border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .92);
  font-size: 16px; line-height: 1.6;
}
.hero-urgent b { color: #fff; }
.hero-urgent-dot {
  display: inline-block; width: 9px; height: 9px; margin-right: 8px; vertical-align: .08em; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 0 0 rgb(var(--amber-rgb) / .6); animation: pulse 2.2s ease-in-out infinite;
}
@media (max-width: 520px) { .hero-urgent { font-size: 15px; padding: 10px 12px; } }
@media (prefers-reduced-motion: reduce) { .hero-urgent-dot { animation: none; } }

/* 푸터 주소 옆 네이버 지도 */
.footer-map {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; font-size: 14px; font-weight: 600;
}
.footer-map svg { width: 15px; height: 15px; fill: #03c75a; }   /* 네이버 초록 핀 */
.footer-map:hover { border-color: #03c75a; }
.footer-info a { color: inherit; }

/* 동네별 링크 — 휴대폰에서 다섯 화면을 차지해서 작게 촘촘히 */
@media (max-width: 620px) {
  .regionlinks { gap: 6px; margin-top: 18px; }
  .regionlinks a { padding: 5px 11px; font-size: 13.5px; font-weight: 500; }
  #area .area-head { margin-top: 20px; font-size: 14.5px; }
  #area .area-head + .regionlinks { margin-top: 8px; }
}

/* 동네별 링크 접기 — 휴대폰에서만. 넓은 화면은 전부 보이고 단추도 숨깁니다. */
.rl-more { display: none; }
@media (max-width: 620px) {
  .rl-fold.is-folded a:nth-child(n+13) { display: none; }
  .rl-more {
    display: inline-block; margin-top: 10px; padding: 6px 14px; border-radius: 999px;
    border: 1px dashed currentColor; background: none; color: inherit; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  }
}

/* ══ 엔진 덧붙임 ══════════════════════════════════════════════════════
   경림 원본에 없던 것만. 전부 업종 중립입니다. 원본과 다른 점은 core/pages/README.md 표. */

/* 히어로 배경 그림의 색 — 경림은 SVG 속성에 색을 박았습니다(#1d6fb8 · 앰버).
   사이트마다 색이 달라야 해서 클래스로 뺐습니다. CSP 때문에 style="" 은 못 씁니다. */
.hero-grid .hg-g0 { stop-color: var(--glow); stop-opacity: .55; }
.hero-grid .hg-g1 { stop-color: var(--glow); stop-opacity: 0; }
.hero-region .hero-grid .hg-g0 { stop-opacity: .5; }
.hero-grid .hg-wires { fill: none; stroke: rgb(var(--amber-rgb) / .28); stroke-width: 1.5; }
.hero-region .hero-grid .hg-wires { stroke: rgb(var(--amber-rgb) / .26); }
.hero-grid .hg-dots { fill: var(--amber); }

/* 히어로 오른쪽 — 경림은 분전반 도면(.hero-panel, 그림)이었습니다. 사이트가 사진을 주면 그 자리에 사진.
   좁은 화면에서 경림은 도면을 숨겼는데, 실사진은 손님이 «진짜 업체» 를 알아보는 단서라
   숨기지 않고 글 아래로 내립니다. */
.hero-photo {
  position: absolute; right: 6vw; top: 50%; margin: 0;
  width: clamp(220px, 24vw, 340px);
  transform: translateY(-50%);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  animation: rise .9s .3s both;
}
.hero-photo img { width: 100%; height: auto; display: block; }
.hero-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 10px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .62));
  color: rgba(255, 255, 255, .86); font-size: 13px; line-height: 1.45;
}
.hero-inner.has-photo { padding-right: clamp(0px, 30vw, 400px); }
@media (max-width: 1100px) {
  .hero-inner.has-photo { padding-right: 22px; }
  .hero-photo {
    position: relative; right: auto; top: auto; transform: none;
    width: calc(100% - 44px); max-width: 560px; margin: 36px auto 0;
  }
  .hero-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
}
@media (prefers-reduced-motion: reduce) { .hero-photo { animation: none !important; } }

/* 히어로 h1 꼬리 · 숫자 띠에 한글 낱말이 올 때 — 고정폭 서체에는 한글이 없어 글자 사이가 벌어집니다 */
.hero-h1-yr.is-word, .fig-n.is-word { font-family: inherit; }
.fig-n.is-word { font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; letter-spacing: -0.04em; }
.fig-u.is-word { font-size: 15px; }

/* 참고 · 현장 사진 — 경림은 가로(16:9)만 있었습니다. 세로 사진이 오면 화면을 다 덮지 않게 자릅니다 */
.kwphoto img { max-height: min(70vh, 540px); object-fit: cover; }

/* 경림 화면의 style="margin-top:52px" · style="margin-top:28px" 자리(CSP 때문에 클래스로) */
.section-title.is-gap { margin-top: 52px; }
.note.is-gap { margin-top: 28px; }

/* 상호 표시 — 사이트 그림(svg)이 들어옵니다 */
.footer-brand .brand-mark { display: inline-block; vertical-align: -6px; margin-right: 8px; width: 26px; height: 26px; }

/* 키워드 쪽 «이런 말로 전화 주십니다» — 손님 입말 한 줄씩(사이트 설정 keywords[slug].symptoms). 경림엔 없던 칸 */
.kwsays-head { margin-top: 26px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--ink-mute); }
.kwsays { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.kwsays li {
  padding: 8px 14px; border-radius: 999px; font-size: 15px; color: var(--ink);
  background: var(--bg-alt); border: 1px solid var(--line); word-break: keep-all;
}
.kwsays li::before { content: "“"; color: var(--copper); margin-right: 2px; }
.kwsays li::after { content: "”"; color: var(--copper); margin-left: 2px; }

/* 경림 원본의 순서 실수 — .contact-grid-solo(2단)가 «좁은 화면» 1단 규칙보다 뒤에 있어서 휴대폰에서 전화 상자가
   화면 밖으로 30px 밀려 나갔습니다(375px 에서 가로 스크롤). 지역 · 키워드 쪽 문의 구역. 같은 폭에서 1단으로. */
@media (max-width: 1100px) { .contact-grid-solo { grid-template-columns: 1fr; } }