/* ============================================================
   가게톡 공용 톤 오버라이드 (tone.css)

   seo-page.php (철거 5,318p) + guide.php (가이드 12p) 에서 로드.
   product-page.php 는 같은 내용을 인라인으로 이미 갖고 있음.
   seo.css 는 건드리지 않으므로 되돌리려면 <link> 한 줄만 제거.

     히어로  어두운 그라데이션 → 밝은 배경, 사진은 우측 패널
     제목    가운데 정렬        → 좌측 정렬 + 액센트 바
     카드    둥근 모서리+그림자 → 얇은 테두리, 각진 모서리
     절차    가로 카드          → 세로 타임라인
     FAQ     카드               → 구분선형
   ============================================================ */

/* ── 히어로: 밝은 배경 + 우측 사진 패널 ───────────────── */
.hero{background:#fff!important;color:var(--ink)!important;
  border:1px solid var(--line);border-radius:14px!important;
  padding:44px 38px 46px!important;margin-top:14px!important;
  display:flex;align-items:center;gap:40px}
.hero-bg{position:relative!important;inset:auto!important;opacity:1!important;
  order:2;flex:0 0 360px;width:360px!important;height:auto!important;
  aspect-ratio:4/3;border-radius:12px;object-fit:cover}
.hero-inner{order:1;flex:1 1 auto;max-width:640px!important}
.hero .badge{background:var(--orange-soft)!important;
  border:1px solid rgba(6,199,85,.35)!important;color:var(--orange-d)!important;
  font-size:12.5px!important;padding:7px 13px!important;border-radius:7px!important}
.hero h1{color:var(--navy);font-size:38px!important;letter-spacing:-.035em}
.hero .sub{color:var(--muted)!important;font-size:16.5px!important;line-height:1.75}
.hero .btn-call{background:var(--navy)!important;color:#fff!important}
.hero .btn-quote{background:#fff!important;color:var(--navy)!important;
  border:1.5px solid var(--line)}

/* ── 섹션 제목: 좌측 정렬 + 액센트 바 ─────────────────── */
.sec{margin-top:64px!important;padding-top:30px;border-top:1px solid var(--line)}
.sec:first-of-type{border-top:none;padding-top:0}
.sec h2,.sec h2.center,.whyus h2{text-align:left!important;position:relative;
  padding-top:15px;font-size:25px!important;color:var(--navy);letter-spacing:-.03em}
.sec h2::before,.whyus h2::before{content:"";position:absolute;top:0;left:0;
  width:26px;height:3px;background:var(--orange)}
.sec-lead,.whyus-lead{text-align:left!important;color:var(--muted);
  font-size:15px;margin-bottom:22px}

/* ── 카드: 각지고 얇게 ────────────────────────────────── */
.card{border-radius:10px!important;box-shadow:none!important;transition:border-color .16s}
.card:hover{transform:none!important;box-shadow:none!important;border-color:var(--orange)!important}
.card-img{border-radius:0!important}
.why-card{border-radius:10px!important;text-align:left!important;padding:26px 22px!important}
.why-card .why-ico{display:none}
.why-card strong{font-size:17px!important;color:var(--navy)}

/* ── 진행 절차: 가로 카드 → 세로 타임라인 ─────────────── */
.flow{position:relative;padding-left:34px}
.flow::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--orange),var(--line))}
.flow-row{display:block!important;grid-template-columns:none!important}
.flow-down{display:none!important}
.flow-step{position:relative;background:transparent!important;border:none!important;
  border-radius:0!important;padding:0 0 30px 0!important;text-align:left!important}
.flow-step::before{content:"";position:absolute;left:-34px;top:4px;width:20px;height:20px;
  border-radius:50%;background:#fff;border:2.5px solid var(--orange)}
.flow-step .fn{position:static!important;display:block;margin:0 0 6px 0!important;
  width:auto!important;height:auto!important;background:transparent!important;
  color:var(--orange)!important;font-size:12px!important;font-weight:900;
  letter-spacing:.08em;border-radius:0!important;line-height:1.2!important}
.flow-step strong{display:block;font-size:19px;color:var(--navy);margin-bottom:9px}
.flow-step ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding-left:0!important}
.flow-step li{font-size:13.5px;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:7px;padding:6px 11px}
.flow-step li::before{display:none!important}

/* ── 후기: 카드 → 인용문 ──────────────────────────────── */
.review-card{background:transparent!important;border:none!important;
  border-radius:0!important;position:relative;padding-top:30px}
.review-card::before{content:"\201C";position:absolute;top:-10px;left:-2px;font-size:58px;
  font-weight:900;color:var(--orange);opacity:.28;line-height:1}
.review-card .rev-img{width:42px!important;height:42px!important;border-radius:50%!important;
  aspect-ratio:1!important;order:2;margin-top:14px}
.review-card .rev-body{padding:0!important}
.review-card .stars{display:none}

/* ── FAQ: 카드 → 구분선형 ─────────────────────────────── */
.faq details{background:transparent!important;border:none!important;
  border-bottom:1px solid var(--line)!important;border-radius:0!important;
  padding:20px 2px!important;margin-bottom:0!important}
.faq details:first-of-type{border-top:1px solid var(--line)!important}
.faq summary{font-size:16.5px!important;color:var(--navy);
  display:flex;justify-content:space-between;gap:14px}
.faq summary::after{content:"+";color:var(--orange);font-weight:900;font-size:20px;flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}

/* ── 상담·폼·지원금 배너 ──────────────────────────────── */
.support{border-radius:14px!important}
.support h2{text-align:left!important}
.support h2::before{display:none}
.form{border-radius:14px!important}
.form h2::before{display:none}

/* ── 가이드 본문 ──────────────────────────────────────── */
.guide-article h2{position:relative;padding-top:15px;margin-top:38px;
  color:var(--navy);letter-spacing:-.03em}
.guide-article h2::before{content:"";position:absolute;top:0;left:0;
  width:26px;height:3px;background:var(--orange)}
.guide-cta{border-radius:14px!important}
.blog-card{border-radius:10px!important;box-shadow:none!important}
.blog-card:hover{transform:none!important;border-color:var(--orange)!important}

/* ── 반응형 ───────────────────────────────────────────── */
@media (max-width:860px){
  .hero{flex-direction:column;align-items:stretch;gap:26px;padding:32px 22px 34px!important}
  .hero-bg{order:2;flex:1 1 auto;width:100%!important}
  .hero-inner{order:1;max-width:none!important}
  .hero h1{font-size:29px!important}
  .sec{margin-top:48px!important;padding-top:24px}
  .sec h2,.sec h2.center,.whyus h2{font-size:21px!important}
}