/* =====================================================================
   랜딩페이지 디자인 시스템 — 실무 견적형
   딥네이비 + 앰버 · Pretendard

   설계 관점
   ---------
   이 페이지를 여는 사람은 대부분 급합니다. 불이 났거나, 상가 문을 닫았거나,
   이사 날짜가 잡혀 있습니다. 그 사람이 알고 싶은 것은 네 가지뿐입니다.
   며칠 걸리나 · 몇 명 오나 · 얼마인가 · 언제 올 수 있나.

   그래서 감성 카피나 큰 여백 대신 그 답을 화면 위쪽에 숫자로 먼저 놓습니다.
   시그니처는 '견적 기준표'입니다. 견적서를 미리 보여주는 셈입니다.
   숫자는 tabular-nums 로 자릿수를 맞춰 실제 견적서처럼 읽히게 합니다.

   금지 (안티-AI 톤 표준)
   - 크림 배경 + 세리프 대제목 + 국문 위 영문 라벨
   - 감성 카피, 큰 블록쿼트
   - 과한 여백, 중앙정렬 일변도
   ===================================================================== */

:root{
  --navy-900:#14161A;
  --navy-800:#1C1F24;
  --navy-700:#24282E;
  --navy-500:#3E444B;

  --amber:#C79A3E;
  --amber-deep:#B8842A;
  --amber-soft:#FBF3E2;

  --ink:#14161A;
  --body:#3E444B;
  --muted:#8E959D;
  --line:#E6E9ED;
  --line-soft:#EEF0F3;
  --mist:#FAFBFC;
  --paper:#fff;
  --alert:#C8322B;

  --sans:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,
         "Malgun Gothic","맑은 고딕",sans-serif;

  --wrap:1120px;
  --narrow:820px;
  --r:14px;
  --r-pill:999px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--body);background:var(--paper);
     font-size:16px;line-height:1.75;word-break:keep-all;
     -webkit-font-smoothing:antialiased;padding-bottom:62px}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{color:var(--ink);line-height:1.32;letter-spacing:-.025em}
table{border-collapse:collapse;width:100%}

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

section{padding:58px 0}
section.alt{background:var(--mist);border-top:1px solid var(--line-soft);
            border-bottom:1px solid var(--line-soft)}

section h2{font-size:25px;font-weight:800;margin-bottom:6px;
           padding-top:14px;position:relative}
section h2::before{content:"";position:absolute;top:0;left:0;
                   width:34px;height:3px;background:var(--amber)}
section h3{font-size:19px;font-weight:700;margin-bottom:14px}
.sec-desc{font-size:14.5px;color:var(--muted);margin-bottom:24px}

/* ── 헤더 ─────────────────────────────────────────── */
.hd{background:var(--navy-900);position:sticky;top:0;z-index:40}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;
          height:60px;padding-top:0;padding-bottom:0}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17.5px;
      color:#fff;letter-spacing:-.02em}
.logo img{height:28px;width:auto}
.logo .em{width:24px;height:24px;border-radius:3px;background:var(--amber);
          position:relative;flex:none}
.logo .em::after{content:"";position:absolute;left:6px;right:6px;top:6px;height:3px;
                 background:var(--navy-900);box-shadow:0 6px 0 var(--navy-900)}
.hd .tel{font-size:16.5px;font-weight:700;color:var(--amber);
         font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:7px}
.hd .tel::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ADE80;
                 box-shadow:0 0 0 3px rgba(74,222,128,.2);flex:none}

/* ── 히어로 ───────────────────────────────────────── */
.hero{background:var(--navy-800);color:#fff;position:relative;padding:52px 0 0;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;
         opacity:.22;filter:saturate(.7)}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,var(--navy-900) 28%,rgba(12,26,43,.55) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:37px;font-weight:800;color:#fff;margin-bottom:12px;line-height:1.24}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero .sub{font-size:16px;color:#B9C8D9;max-width:56ch;margin-bottom:24px;line-height:1.72}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
       background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13);
       margin-bottom:24px}
.facts div{background:var(--navy-800);padding:14px 16px}
.facts .v{font-size:19px;font-weight:800;color:#fff;
          font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.facts .v small{font-size:13px;font-weight:600;color:#B9C8D9;margin-left:2px}
.facts .l{font-size:12.5px;color:#93A6BA;margin-top:2px}

.cta{display:flex;gap:9px;flex-wrap:wrap;padding-bottom:34px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
     padding:14px 28px;border-radius:var(--r-pill);font-weight:700;font-size:15.5px;
     border:none;cursor:pointer;font-family:inherit;transition:.15s}
.btn-p{background:var(--amber);color:#20160A}
.btn-p:hover{background:#F2B45A}
.btn-o{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn-o:hover{background:rgba(255,255,255,.14)}

.trust{background:var(--navy-900);border-top:1px solid rgba(255,255,255,.1)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;padding-top:12px;padding-bottom:12px}
.trust span{font-size:12.8px;color:#93A6BA;display:flex;align-items:center;gap:6px}
.trust span::before{content:"";width:4px;height:4px;background:var(--amber);
                    border-radius:50%;flex:none}
.trust b{color:#DCE6F0;font-weight:600;font-variant-numeric:tabular-nums}

/* ── 본문 ─────────────────────────────────────────── */
.prose p{margin-bottom:15px;font-size:16px;line-height:1.88}
.prose p:last-child{margin-bottom:0}
.prose h2{margin-bottom:20px}

/* ── 그리드 · 카드 ────────────────────────────────── */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
@media(max-width:880px){.grid3,.grid4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}

.card{border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 22px;
      background:var(--paper)}
.card h4{font-size:15.5px;margin-bottom:7px;font-weight:700}
.card p{font-size:14.2px;line-height:1.72;color:var(--body)}
.card .num{display:inline-block;font-size:11.5px;font-weight:800;color:var(--amber-deep);
           font-variant-numeric:tabular-nums;letter-spacing:.08em;margin-bottom:9px}

/* ── 진행 절차 ────────────────────────────────────── */
.steps-v{border-left:2px solid var(--line);margin-left:13px}
.stp{position:relative;padding:0 0 24px 30px}
.stp:last-child{padding-bottom:0}
.stp::before{content:attr(data-n);position:absolute;left:-14px;top:0;
  width:26px;height:26px;border-radius:50%;background:var(--navy-700);color:#fff;
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:center}
.stp h4{font-size:15.5px;margin-bottom:4px;font-weight:700}
.stp p{font-size:14.2px;line-height:1.72}

/* ── 체크리스트 ───────────────────────────────────── */
.chk-list{list-style:none}
.chk-list li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--line);
             font-size:15.3px;color:var(--ink);font-weight:600}
.chk-list li:last-child{border-bottom:0}
.chk-list li::before{content:"";position:absolute;left:2px;top:19px;
  width:9px;height:9px;border:2px solid var(--amber);border-top:0;border-right:0;
  transform:rotate(-45deg)}
.chk-list li span{display:block;font-size:13.6px;color:var(--muted);
                  margin-top:3px;font-weight:400}

/* ── ★ 시그니처 · 견적 기준표 ─────────────────────── */
.cmp{font-size:15px;border-top:2px solid var(--navy-900)}
.cmp th{text-align:left;padding:13px 16px;background:var(--mist);color:var(--ink);
        font-weight:700;border-bottom:1px solid var(--line);width:34%;position:relative}
.cmp th::before{content:"";position:absolute;left:0;top:0;bottom:0;
                width:3px;background:var(--amber)}
.cmp td{padding:13px 16px;border-bottom:1px solid var(--line);
        font-variant-numeric:tabular-nums}
.cmp tr:hover td,.cmp tr:hover th{background:var(--amber-soft)}
.cmp tr:hover th::before{background:var(--amber-deep)}
.note-sm{font-size:13.4px;color:var(--muted);margin-top:12px;
         padding-left:12px;border-left:2px solid var(--line)}

/* ── 작업사례 ─────────────────────────────────────── */
.case{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
      background:var(--paper);display:flex;flex-direction:column}
.case img,.case .ph{width:100%;height:152px;object-fit:cover;
  background:linear-gradient(135deg,var(--navy-700),var(--navy-900))}
.case .body{padding:15px 16px 17px;flex:1}
.case .meta{font-size:11.8px;color:var(--muted);margin-bottom:6px;
            font-variant-numeric:tabular-nums}
.case h4{font-size:15px;margin-bottom:6px;font-weight:700;line-height:1.45}
.case p{font-size:13.4px;color:var(--muted);line-height:1.65}

/* ── 전후 비교 · 과정 ─────────────────────────────── */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ba-grid figure,.pphotos figure{position:relative}
.ba-grid img{width:100%;height:236px;object-fit:cover;border-radius:var(--r)}
.ba-grid figcaption,.pphotos figcaption{position:absolute;left:0;top:0;
  background:var(--navy-900);color:#fff;font-size:12.5px;font-weight:700;padding:5px 12px}
.pphotos img{width:100%;height:186px;object-fit:cover;border-radius:var(--r)}
@media(max-width:560px){.ba-grid{grid-template-columns:1fr}}

/* ── 후기 ─────────────────────────────────────────── */
.rev{border:1px solid var(--line);border-left:3px solid var(--amber);
     border-radius:var(--r);padding:19px 20px;background:var(--paper)}
.rev .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.rev .who{font-weight:700;color:var(--ink);font-size:14.5px}
.rev .star{color:var(--amber-deep);font-size:12.5px;letter-spacing:1px}
.rev p{font-size:14.5px;line-height:1.76}
.rev .src{display:inline-block;margin-top:9px;background:var(--mist);color:var(--muted);
          font-size:11.5px;padding:3px 8px;border-radius:2px}

/* ── 실적 지표 ────────────────────────────────────── */
.metrics{background:var(--navy-900);color:#fff}
.metrics h2{color:#fff}
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
       background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.13)}
.m{background:var(--navy-900);padding:24px 18px}
.m .v{font-size:27px;font-weight:800;color:var(--amber);
      font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.m .l{font-size:13.2px;color:#9EB2C6;margin-top:5px}
@media(max-width:700px){.mgrid{grid-template-columns:1fr 1fr}}

/* ── FAQ ──────────────────────────────────────────── */
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:first-child{border-top:1px solid var(--line)}
.faq-list summary{padding:17px 0;font-size:15.8px;font-weight:700;color:var(--ink);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--amber-deep);font-weight:400;
  font-size:19px;line-height:1;flex:none}
.faq-list details[open] summary{color:var(--navy-700)}
.faq-list details[open] summary::after{content:"−"}
.faq-list p{padding:0 0 18px;font-size:14.8px;line-height:1.82;max-width:74ch}

/* ── 상담 유도 밴드 ───────────────────────────────── */
.ctasec{background:var(--navy-800);color:#fff;position:relative}
.ctasec::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--amber)}
.ctasec h2{color:#fff;font-size:26px;margin-bottom:10px;padding-top:0}
.ctasec h2::before{display:none}
.ctasec p{color:#B9C8D9;margin-bottom:22px;font-size:15.5px;max-width:62ch}
.ctasec .cta{padding-bottom:0}

/* ── 견적 폼 ──────────────────────────────────────── */
.formsec{background:var(--mist);border-top:1px solid var(--line)}
.formcard{background:var(--paper);border:1px solid var(--line);
          border-top:3px solid var(--navy-900);border-radius:var(--r);padding:28px 30px 30px}
.formcard h2{font-size:21px;margin-bottom:5px;padding-top:0}
.formcard h2::before{display:none}
.lead-sm{font-size:14.3px;color:var(--muted);margin-bottom:20px}
.skeleton{height:120px;background:linear-gradient(90deg,var(--mist),#e9eef4,var(--mist));
  background-size:200% 100%;border-radius:var(--r);animation:sk 1.4s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── 내부링크 ─────────────────────────────────────── */
.linksec{background:var(--mist);padding:30px 0;border-top:1px solid var(--line-soft)}
.linksec+.linksec{padding-top:0;border-top:0}
.linksec h3{font-size:14.5px;margin-bottom:11px;color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag-l{display:inline-block;background:var(--paper);border:1px solid var(--line);
       border-radius:2px;padding:7px 14px;font-size:13.4px;color:var(--body)}
.tag-l:hover{border-color:var(--amber);color:var(--amber-deep);background:var(--amber-soft)}
.sitemap{background:var(--navy-900);color:#8FA4BA;padding:40px 0}
.sitemap h3{color:#fff;font-size:13.5px;margin-bottom:13px}
.idx{display:grid;grid-template-columns:repeat(4,1fr);gap:3px 18px}
.idx a{font-size:13px;color:#8FA4BA;padding:3px 0}
.idx a:hover{color:var(--amber)}
@media(max-width:880px){.idx{grid-template-columns:1fr 1fr}}

/* ── 기타 ─────────────────────────────────────────── */
.addr{font-size:15.5px;color:var(--ink)}
.about p{font-size:15.5px;line-height:1.86}
.ft{background:#08131F;color:#7B8DA1;font-size:12.8px;padding:28px 0}
.ft .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ft strong{color:#fff;font-size:14.3px;display:block;margin-bottom:7px}
.ft .right{text-align:right}
.ft a:hover{color:#fff}
@media(max-width:640px){.ft .right{text-align:left}}

.float{position:fixed;bottom:0;left:0;right:0;display:flex;z-index:50;
       box-shadow:0 -1px 14px rgba(12,26,43,.24)}
.float a{flex:1;padding:17px 8px;text-align:center;font-weight:700;font-size:15.5px;color:#fff}
.float .c{background:var(--navy-900)}
.float .k{background:linear-gradient(180deg,#E7C377,#C79A3E);color:#17120A}

/* ── 반응형 ───────────────────────────────────────── */
@media(max-width:760px){
  .hero{padding-top:40px}
  .hero h1{font-size:27px}
  .hero .sub{font-size:15px}
  .facts{grid-template-columns:1fr 1fr}
  .facts div{padding:12px 14px}
  .facts .v{font-size:17.5px}
  .facts .l{margin-top:1px}
  /* 버튼이 두 줄로 접히면 급한 사람이 누를 곳을 못 찾는다 */
  .cta{gap:8px}
  .cta .btn{flex:1;min-width:0;padding:14px 12px;font-size:15px;white-space:nowrap}
  .cta .btn .num{display:none}
  section{padding:42px 0}
  section h2{font-size:21px}
  .hd .tel{font-size:15px}
  .cmp th,.cmp td{padding:11px 12px;font-size:14px}
  .ba-grid img{height:190px}
}

a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--amber);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* =====================================================================
   견적 폼 (JS 렌더)
   ===================================================================== */
.fprog{height:3px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:10px}
.fprog i{display:block;height:100%;background:var(--amber);transition:width .3s}
.fstepno{font-size:12.5px;color:var(--muted);margin-bottom:14px;font-weight:600}
.fdesc{font-size:14.2px;color:var(--muted);margin-bottom:16px}
.ffields{display:flex;flex-direction:column;gap:16px}
.ffield label{display:block;font-size:14.2px;font-weight:700;color:var(--ink);margin-bottom:7px}
.ffield label .req{color:var(--alert);margin-left:3px}
.ffield input,.ffield select,.ffield textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);
  font-family:inherit;font-size:15.5px;color:var(--ink);background:#fff}
.ffield input:focus,.ffield select:focus,.ffield textarea:focus{
  outline:none;border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
.ffield.err input,.ffield.err select,.ffield.err textarea{border-color:var(--alert)}
.ferr{font-size:13px;color:var(--alert);margin-top:6px}
.fhelp{font-size:12.8px;color:var(--muted);margin-top:6px}
.fchoice{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:12px 18px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;
      font-family:inherit;font-size:14.5px;color:var(--body);cursor:pointer;transition:.12s}
.chip:hover{border-color:var(--amber)}
.chip.on{background:var(--navy-900);border-color:var(--navy-900);color:#fff;font-weight:700}
.fagree{display:flex!important;align-items:flex-start;gap:9px;font-weight:400!important;
        font-size:14px!important;cursor:pointer;margin-bottom:0!important}
.fagree input{width:auto!important;margin-top:3px}
.fpolicy{display:inline-block;margin-top:6px;margin-left:26px;font-size:12.5px;
         color:var(--muted);text-decoration:underline}
.fnav{display:flex;gap:9px;margin-top:22px}
.fnav .btn{flex:1}
.fnav .btn-o{flex:0 0 32%;background:var(--mist);color:var(--body);border:1px solid var(--line)}
.fnav .btn-o:hover{background:var(--line-soft)}
.fnav .btn:disabled{opacity:.6;cursor:wait}
.fdone{text-align:center;padding:34px 20px}
.fdone .mark{width:50px;height:50px;margin:0 auto 15px;border-radius:50%;
             background:var(--navy-900);color:var(--amber);font-size:24px;line-height:50px}
.fdone p{font-size:15.8px;color:var(--ink);line-height:1.7}
.form-fallback{padding:24px;text-align:center;color:var(--muted);font-size:14.5px}

/* 사례 카드의 작업 조건 — 숫자를 맞춰 카드끼리 비교가 되게 한다 */
.case .spec{font-size:13.6px;color:var(--ink);font-weight:600;
            font-variant-numeric:tabular-nums}
.case .spec span{font-weight:400;color:var(--muted);font-size:12.6px}

/* =====================================================================
   2026 PREMIUM FRONT REDESIGN — 청소업체연합
   기존 렌더러/블록 구조를 유지하면서 브랜드·모션·전환 UX를 전면 강화.
   ===================================================================== */
:root{
  --brand-black:#14161A;
  --brand-charcoal:#1C1F24;
  --brand-charcoal-2:#24282E;
  --brand-gold:#C79A3E;
  --brand-gold-hi:#E7C377;
  --brand-ivory:#F7F4EE;
  --brand-warm:#EFEAE0;
  --brand-ink:#14161A;
  --brand-copy:#535966;
  --brand-line:#E3DED4;
  --elev:0 24px 70px rgba(10,12,16,.13);
  --elev-sm:0 10px 30px rgba(10,12,16,.08);
  --ease:cubic-bezier(.2,.7,.2,1);
}
body{background:var(--brand-ivory);color:var(--brand-copy);padding-bottom:0;overflow-x:hidden}
.wrap{max-width:1200px;padding-left:30px;padding-right:30px}
section{padding:92px 0;position:relative}
section.alt{background:#fff;border-color:var(--brand-line)}
section h2{font-size:clamp(28px,3.3vw,45px);font-weight:850;letter-spacing:-.045em;padding-top:18px;margin-bottom:12px}
section h2::before{width:42px;height:3px;background:linear-gradient(90deg,var(--brand-gold),var(--brand-gold-hi))}
section h3{font-size:22px}.sec-desc{font-size:15px;max-width:760px;margin-bottom:34px;color:#777D86}

/* Header */
.hd{background:rgba(10,11,13,.92);backdrop-filter:blur(14px) saturate(130%);border-bottom:1px solid rgba(255,255,255,.08);transition:box-shadow .3s var(--ease),background .3s var(--ease)}
.hd.scrolled{background:rgba(10,11,13,.97);box-shadow:0 12px 30px rgba(0,0,0,.17)}
.hd .wrap{height:76px}.logo{gap:13px;font-size:18px;letter-spacing:-.03em}.logo img{height:48px;max-width:180px;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(214,168,63,.12))}
.logo .em{background:linear-gradient(145deg,var(--brand-gold-hi),var(--brand-gold));border-radius:9px}
.hd .tel{color:var(--brand-gold-hi);font-size:17px}.hd .tel::before{background:#57D98F;box-shadow:0 0 0 5px rgba(87,217,143,.11),0 0 16px rgba(87,217,143,.28)}

/* Hero */
.hero{min-height:650px;padding:88px 0 0;background:var(--brand-black);display:flex;align-items:flex-end;isolation:isolate}
.hero-bg{opacity:.52;filter:saturate(.68) contrast(1.08);transform:scale(1.035);animation:heroDrift 18s ease-in-out infinite alternate;will-change:transform}
@keyframes heroDrift{0%{transform:scale(1.035) translate3d(0,0,0)}100%{transform:scale(1.095) translate3d(-1.5%,1%,0)}}
.hero::after{background:linear-gradient(90deg,rgba(6,7,9,.97) 0%,rgba(8,9,12,.87) 42%,rgba(8,9,12,.28) 76%,rgba(8,9,12,.42) 100%)}
.hero::before{content:"";position:absolute;z-index:1;inset:auto 0 0;height:220px;background:linear-gradient(0deg,rgba(10,11,13,.78),transparent);pointer-events:none}
.hero .wrap{padding-bottom:0;display:grid;grid-template-columns:minmax(0,790px) 1fr;align-items:end;gap:70px;width:100%}
.hero h1{font-size:clamp(42px,5.4vw,72px);font-weight:900;letter-spacing:-.06em;line-height:1.06;margin-bottom:24px;text-shadow:0 10px 40px rgba(0,0,0,.22)}
.hero h1 em{color:var(--brand-gold-hi);background:linear-gradient(180deg,#FFE49A 0%,#D6A83F 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{font-size:18px;line-height:1.85;color:#CED2D9;max-width:650px;margin-bottom:32px}
.facts{grid-template-columns:repeat(4,minmax(125px,1fr));max-width:760px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.11);border-radius:16px;overflow:hidden;margin-bottom:32px;box-shadow:0 18px 45px rgba(0,0,0,.15)}
.facts div{background:rgba(17,20,25,.74);padding:18px 19px;backdrop-filter:blur(10px)}.facts .v{font-size:22px}.facts .l{font-size:12px;margin-top:4px;color:#AEB5C0}
.cta{padding-bottom:52px}.btn{min-height:52px;border-radius:12px;padding:15px 25px;position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}
.btn::after{content:"";position:absolute;top:-60%;left:-80%;width:42%;height:220%;transform:rotate(24deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transition:left .65s var(--ease)}
.btn:hover::after{left:135%}.btn:hover{transform:translateY(-3px)}
.btn-p{background:linear-gradient(145deg,#F2CF72,#C99A31);color:#17120A;box-shadow:0 16px 35px rgba(214,168,63,.23)}.btn-p:hover{background:linear-gradient(145deg,#FFE49A,#D6A83F);box-shadow:0 20px 42px rgba(214,168,63,.3)}
.btn-o{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.3);backdrop-filter:blur(8px)}.btn-o:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.52)}
.trust{background:rgba(10,11,13,.98);border-color:rgba(255,255,255,.08)}.trust .wrap{padding-top:16px;padding-bottom:16px}.trust span{color:#888F9A}.trust span::before{background:var(--brand-gold)}.trust b{color:#E5E8EC}

/* Cards / content */
.card,.case,.rev,.formcard{border-radius:18px;border-color:var(--brand-line);box-shadow:var(--elev-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.card:hover,.case:hover,.rev:hover{transform:translateY(-7px);box-shadow:var(--elev);border-color:#D2C5AC}
.card{padding:27px 27px 30px;background:rgba(255,255,255,.94)}.card .num{color:#A87920}
.case{border:0;border-radius:20px;background:#fff;box-shadow:0 10px 34px rgba(10,12,16,.08)}
.case img,.case .ph{height:215px;transition:transform .65s var(--ease),filter .5s var(--ease);filter:saturate(.88)}.case{overflow:hidden}.case:hover img{transform:scale(1.055);filter:saturate(1.05)}
.case .body{position:relative;padding:20px 21px 23px;background:#fff}.case .meta{text-transform:none;color:#8C8272}.case h4{font-size:17px;line-height:1.45}
.ba-grid{gap:18px}.ba-grid figure{overflow:hidden;border-radius:20px;box-shadow:var(--elev-sm)}.ba-grid img{height:340px;border-radius:0;transition:transform .8s var(--ease)}.ba-grid figure:hover img{transform:scale(1.045)}.ba-grid figcaption,.pphotos figcaption{top:16px;left:16px;border-radius:999px;background:rgba(10,11,13,.82);backdrop-filter:blur(8px);padding:7px 14px}
.rev{border-left:0;border-top:3px solid var(--brand-gold);padding:26px 27px}.rev .star{color:#B98626}.rev p{font-size:15px}

/* Process */
.steps-v{border-left:1px solid #D7CDBA;margin-left:19px}.stp{padding:0 0 32px 42px}.stp::before{left:-20px;width:38px;height:38px;background:linear-gradient(145deg,#22262C,#090A0C);border:1px solid #353A43;box-shadow:0 8px 20px rgba(10,11,13,.13);color:var(--brand-gold-hi)}.stp h4{font-size:17px}.stp p{font-size:15px}

/* Pricing */
.cmp{border-top:0;border:1px solid var(--brand-line);border-radius:18px;overflow:hidden;box-shadow:var(--elev-sm)}.cmp th{background:#171A20;color:#fff;border-bottom-color:#30343C;padding:17px 19px}.cmp th::before{background:linear-gradient(180deg,var(--brand-gold-hi),var(--brand-gold))}.cmp td{background:#fff;padding:17px 19px}.cmp tr:hover td{background:#FBF7EF}.cmp tr:hover th{background:#22262D}

/* Metrics */
.metrics{background:#0B0D10!important;color:#fff;border:0!important}.metrics h2{color:#fff}.metrics .mgrid{gap:1px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden}.metrics .m{background:#13161B;padding:29px 22px}.metrics .m .v{color:var(--brand-gold-hi);font-size:31px}.metrics .m .l{color:#969DA8}

/* Link pills */
.linksec{padding:50px 0}.tags{gap:9px}.tag-l{border-radius:999px;border:1px solid #D8D0C3;background:#fff;padding:10px 16px;transition:.25s var(--ease)}.tag-l:hover{background:#111317;color:#fff;border-color:#111317;transform:translateY(-2px)}

/* Forms */
.formsec{background:linear-gradient(180deg,#EFE9DE,#F7F4EE)}.formcard{background:#fff;border:1px solid #DBD2C3;max-width:900px;margin:auto;padding:40px;box-shadow:var(--elev)}.formcard h2{padding-top:0}.formcard h2::before{display:none}.lead-sm{color:#7E7567;margin-bottom:25px}
.ffield input,.ffield select,.ffield textarea{border-radius:10px!important;background:#FBFBFA!important;border-color:#D9D5CC!important;min-height:48px}.ffield input:focus,.ffield select:focus,.ffield textarea:focus{border-color:#B58B36!important;box-shadow:0 0 0 4px rgba(214,168,63,.12)!important}
.chip{border-radius:999px!important}.chip.on{background:#15171B!important;border-color:#15171B!important;color:#fff!important}

/* Footer */
.ft{background:#090A0C;color:#8F96A0;border-top:1px solid #20242A;padding:50px 0}.ft strong{color:#fff}.ft a{color:#D7B75D}

/* Floating action */
.fab,.floating-bar{backdrop-filter:blur(14px)}

/* Scroll reveal */
.motion-item{opacity:0;transform:translateY(26px);transition:opacity .72s var(--ease),transform .72s var(--ease)}
.motion-item.in-view{opacity:1;transform:none}.motion-item.delay-1{transition-delay:.08s}.motion-item.delay-2{transition-delay:.16s}.motion-item.delay-3{transition-delay:.24s}
.hero h1,.hero .sub,.hero .facts,.hero .cta{animation:heroEnter .85s var(--ease) both}.hero .sub{animation-delay:.08s}.hero .facts{animation-delay:.16s}.hero .cta{animation-delay:.23s}
@keyframes heroEnter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .hero{min-height:auto;padding-top:64px}.hero .wrap{grid-template-columns:1fr}.hero h1{font-size:clamp(38px,9vw,56px)}.facts{grid-template-columns:1fr 1fr}.wrap{padding-left:22px;padding-right:22px}.logo img{height:42px}
}
@media(max-width:560px){
  section{padding:70px 0}.hd .wrap{height:66px}.hd .tel{font-size:0}.hd .tel::after{content:"상담";font-size:13px;color:var(--brand-gold-hi)}.hero{padding-top:50px}.hero h1{font-size:39px}.hero .sub{font-size:16px}.facts{border-radius:13px}.facts div{padding:14px}.cta .btn{width:100%}.formcard{padding:27px 20px}.ba-grid img{height:260px}
}

/* ── Skin A: 긴급 상담형 ───────────────────────────────── */
.skin-a .hero .wrap::after{content:"24H\A현장 대응";white-space:pre;justify-self:end;align-self:center;border:1px solid rgba(255,255,255,.18);border-radius:50%;width:180px;height:180px;display:grid;place-items:center;text-align:center;font-size:20px;font-weight:850;letter-spacing:-.03em;color:#fff;background:radial-gradient(circle,rgba(214,168,63,.16),rgba(255,255,255,.025));box-shadow:0 0 0 18px rgba(255,255,255,.018),0 0 0 36px rgba(255,255,255,.012);animation:badgePulse 4s ease-in-out infinite}
@keyframes badgePulse{50%{transform:scale(1.035);box-shadow:0 0 0 24px rgba(214,168,63,.025),0 0 0 48px rgba(255,255,255,.008)}}

/* ── Skin B: 작업사례 중심 ─────────────────────────────── */
.skin-b{--brand-gold:#C9A36A;--brand-gold-hi:#F0D4A0}.skin-b .hero{min-height:760px}.skin-b .hero::after{background:linear-gradient(180deg,rgba(7,8,10,.22),rgba(7,8,10,.82) 80%,#08090B)}.skin-b .hero .wrap{display:block;padding-top:280px}.skin-b .hero h1{max-width:940px}.skin-b .hero .sub{max-width:780px}.skin-b .facts{max-width:930px}.skin-b .grid4{grid-template-columns:repeat(2,1fr);gap:24px}.skin-b .case img,.skin-b .case .ph{height:330px}.skin-b .case h4{font-size:20px}

/* ── Skin C: 지역 전문성형 ─────────────────────────────── */
.skin-c{--brand-gold:#79916D;--brand-gold-hi:#BFD2B5;--brand-ivory:#F5F6F2}.skin-c .hero{background:#101714}.skin-c .hero::after{background:linear-gradient(90deg,rgba(12,18,15,.97) 0%,rgba(12,18,15,.76) 55%,rgba(12,18,15,.28))}.skin-c section h2::before{background:#7E9771}.skin-c .linksec{background:#EEF1EA}.skin-c .tag-l{border-color:#CFD7C9}.skin-c .tag-l:hover{background:#233127;border-color:#233127}.skin-c .hero h1 em{background:linear-gradient(180deg,#D6E4CD,#8DA582);-webkit-background-clip:text;background-clip:text}

/* ── Skin D: 견적·비교 중심 ─────────────────────────────── */
.skin-d{--brand-gold:#486E9B;--brand-gold-hi:#A9C6E7}.skin-d .hero{background:#0B1624}.skin-d .hero::after{background:linear-gradient(90deg,#081421 0%,rgba(10,27,45,.89) 55%,rgba(10,27,45,.30))}.skin-d section h2::before{background:#557CA8}.skin-d .cmp{font-size:16px}.skin-d .cmp th,.skin-d .cmp td{padding:20px 21px}.skin-d .cmp th::before{background:#6D96C3}.skin-d .formsec{background:#EDF2F7}.skin-d .btn-p{background:linear-gradient(145deg,#BFD5EE,#7197C0);box-shadow:0 16px 35px rgba(65,105,150,.22)}

/* ── Skin E: 신뢰·후기 중심 ─────────────────────────────── */
.skin-e{--brand-gold:#A9895B;--brand-gold-hi:#E5CC9E}.skin-e .hero{background:#181715}.skin-e .hero::after{background:linear-gradient(100deg,rgba(20,18,15,.97),rgba(20,18,15,.69) 63%,rgba(20,18,15,.28))}.skin-e .rev{padding:34px 32px;border-top:0;border-left:1px solid #D6C5A9;background:#FFFDF9}.skin-e .rev p{font-size:17px;line-height:1.85}.skin-e .reviews .grid2{gap:22px}.skin-e .reviews{background:#EFE9DF}

/* ─────────────────────────────────────────────────────────────
   홈·서비스 허브 보정 (2026-08-20)

   히어로 장식은 랜딩의 2단 구성을 전제로 만들어져 있다.
   홈과 서비스 허브는 제목 한 줄짜리 1단이라 배지가 본문 옆 빈자리에
   혼자 떠 버리고, 지표 상자도 오른쪽이 비어 어색해진다.
   그 두 종류에서만 끄고 폭을 채운다.
   ───────────────────────────────────────────────────────────── */
.t-hub .hero .wrap::after,
.t-service .hero .wrap::after { content: none !important; }

.t-hub .hero .wrap,
.t-service .hero .wrap { display: block; }

.t-hub .hero .facts,
.t-service .hero .facts { max-width: 100%; }

/* 지표 상자는 항목 수에 맞춰 채운다. 3개인데 4칸이면 오른쪽이 빈다. */
.t-hub .hero .facts,
.t-service .hero .facts { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ─────────────────────────────────────────────────────────────
   헤더 로고 (2026-08-20)

   로고 원본이 방패 위 · 글자 아래로 쌓인 세로형이라
   가로로 긴 헤더에 48px 로 넣으면 글자가 뭉개져 읽히지 않는다.
   가로형으로 다시 합성했고, 그에 맞춰 표시 크기를 키운다.
   ───────────────────────────────────────────────────────────── */
.hd .logo img{height:52px;max-width:260px;width:auto;object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(214,168,63,.18))}
.hd.scrolled .logo img{height:44px;transition:height .25s var(--ease,ease)}
@media(max-width:640px){
  .hd .logo img{height:40px;max-width:190px}
  .hd.scrolled .logo img{height:36px}
}

/* ── 상담 바 채널 버튼 (2026-08-21 추가)
   카카오(.k)는 위에 이미 있다. 네이버 톡톡·텔레그램만 각 브랜드 색을 준다.
   칸이 셋이 되면 글자가 뭉개지므로 상담 바는 최대 3칸(전화+2개)까지만 쓴다. */
.float .nt{background:#03C75A;color:#fff}      /* 네이버 그린 */
.float .tg{background:#229ED9;color:#fff}      /* 텔레그램 */
@media(max-width:400px){.float a{font-size:14px;padding:15px 4px}}

/* ── 푸터 채널 링크 */
.ft-ch{margin-top:10px;font-size:12.5px;opacity:.85}
.ft-ch a{text-decoration:underline;text-underline-offset:2px}

/* ── 상담 바가 푸터를 덮는 문제 (2026-08-21)
   원래 site.css 50행에 body{padding-bottom:62px} 로 상담 바 자리를 비워뒀는데,
   나중에 합쳐진 프리미엄 디자인 CSS(372행)가 body{padding-bottom:0} 으로 덮어썼다.
   그 결과 화면 맨 아래로 내리면 상담 바가 푸터의 주소·전화 줄을 가렸다.
   공개된 전 페이지에 해당됐다.
   상담 바 높이(약 61px)에 여유를 더해 다시 비워둔다. */
body{padding-bottom:68px}
@media(max-width:400px){body{padding-bottom:62px}}

/* =====================================================================
   회사 페이지 층 (2026-08-23)

   사장님 지적: "메인 홈페이지의 첫화면이 너무 약하지 않나. 지사 모집도 없고
   그냥 단순 랜딩 페이지잖아."

   지역 랜딩과 톤은 같게 가져가되, **견적 신청 페이지처럼 보이지 않게** 한다.
   회사소개까지 견적 폼처럼 생기면 어디를 봐도 같은 페이지로 읽힌다.
   ===================================================================== */

/* ── 상단 메뉴 ─────────────────────────────────────────
   지금까지 헤더에 링크가 로고와 전화번호 둘뿐이었다.
   9천 장을 찍는 사이트인데 다른 곳으로 갈 길이 없었다. */
.hd.has-nav .wrap{gap:22px}
.gnb{display:flex;align-items:center;gap:2px;margin-left:auto;margin-right:18px}
.gnb a{color:#C6CBD2;font-size:14.5px;font-weight:650;letter-spacing:-.02em;
       padding:9px 13px;border-radius:8px;white-space:nowrap;
       transition:color .18s var(--ease),background .18s var(--ease)}
.gnb a:hover{color:#fff;background:rgba(255,255,255,.07)}
.gnb a.on{color:var(--brand-gold-hi);background:rgba(214,168,63,.11)}

/* 모바일 접기 단추 — 자바스크립트 없이 체크박스로 연다 */
.navtog{position:absolute;opacity:0;pointer-events:none}
.navbtn{display:none;flex-direction:column;gap:4px;padding:10px;cursor:pointer;
        margin-left:auto;border-radius:8px}
.navbtn span{display:block;width:20px;height:2px;background:#C6CBD2;border-radius:2px;
             transition:transform .2s var(--ease),opacity .2s var(--ease)}

@media(max-width:900px){
  .navbtn{display:flex}
  .gnb{position:absolute;top:100%;left:0;right:0;margin:0;
       flex-direction:column;align-items:stretch;gap:0;
       background:rgba(10,11,13,.985);backdrop-filter:blur(14px);
       border-bottom:1px solid rgba(255,255,255,.09);
       max-height:0;overflow:hidden;transition:max-height .26s var(--ease)}
  .gnb a{padding:15px 30px;border-radius:0;font-size:15.5px;
         border-top:1px solid rgba(255,255,255,.05)}
  .navtog:checked ~ .gnb{max-height:420px}
  .navtog:checked ~ .navbtn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .navtog:checked ~ .navbtn span:nth-child(2){opacity:0}
  .navtog:checked ~ .navbtn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .hd.has-nav .wrap{position:relative}
  .hd.has-nav .tel{order:-1}
}

/* 푸터 메뉴 */
.ft-nav{width:100%;padding-bottom:16px;margin-bottom:16px;
        border-bottom:1px solid rgba(255,255,255,.07);font-size:13.5px}
.ft-nav a{color:#B9C0C9}
.ft-nav a:hover{color:#fff}

/* ── 회사 페이지 머리 ───────────────────────────────────
   히어로(사진 배경 + 견적 단추)를 여기 쓰면 또 랜딩처럼 보인다.
   제목과 한 줄이면 충분하다. */
.phead{background:var(--brand-black);padding:74px 0 58px;position:relative}
.phead::after{content:"";position:absolute;inset:auto 0 0;height:1px;
              background:linear-gradient(90deg,var(--brand-gold),transparent 60%)}
.phead h1{color:#fff;font-size:clamp(30px,4.4vw,50px);font-weight:880;
          letter-spacing:-.05em;line-height:1.12;margin:0 0 12px}
.phead p{color:#A9B0BA;font-size:16.5px;max-width:720px;margin:0}

.wrap.narrow{max-width:880px}
.center{text-align:center}

/* 본문 글 */
.prose p{font-size:16.5px;line-height:1.85;margin:0 0 16px;color:var(--brand-copy)}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:750;color:var(--brand-ink,#14161A)}

/* ── 회사 정보 · 가입 조건 표 ───────────────────────────
   값이 없는 줄은 애초에 안 넘어온다. 「미정」을 찍지 않는다. */
.facts{width:100%;border-collapse:collapse;border-top:2px solid var(--brand-ink,#14161A)}
.facts th,.facts td{padding:15px 16px;border-bottom:1px solid var(--brand-line,#E6E9ED);
                    font-size:15.5px;text-align:left;vertical-align:top}
.facts th{width:170px;font-weight:700;color:#5A6068;background:rgba(0,0,0,.015)}
.facts td{color:var(--brand-copy)}
@media(max-width:560px){
  .facts th{width:110px;font-size:14px;padding:13px 12px}
  .facts td{font-size:14.5px;padding:13px 12px}
}

/* ── 전국 지사 ─────────────────────────────────────────
   상호가 감춰진 지사는 흐리게 — 「담당 지사 있음」이 이름처럼 보이면 안 된다. */
.brgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.brcard{background:#fff;border:1px solid var(--brand-line,#E6E9ED);border-radius:12px;
        padding:22px 22px 18px}
.brcard h3{font-size:18px;font-weight:800;letter-spacing:-.03em;margin:0 0 14px;
           display:flex;align-items:center;gap:8px}
.brcard h3::before{content:none}
.brn{font-size:12px;font-weight:700;color:var(--brand-gold);
     background:rgba(199,154,62,.12);border-radius:20px;padding:3px 9px}
.brcard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.brcard li{font-size:14.8px;line-height:1.5;padding-bottom:12px;
           border-bottom:1px solid var(--brand-line-soft,#EEF0F3)}
.brcard li:last-child{border-bottom:0;padding-bottom:0}
.brcard strong{font-weight:700}
.brcard strong.anon{font-weight:600;color:#8E959D}
.brcard .tag{font-size:11.5px;color:#6C737C;background:#F1F3F6;border-radius:5px;
             padding:2px 7px;margin-left:6px;vertical-align:middle}
.brtel{display:inline-block;margin-left:8px;font-size:13.5px;font-weight:700;color:var(--brand-gold-hi,#C79A3E)}
.bradr,.brcov{font-size:13px;color:#8E959D;margin-top:5px;line-height:1.5}

/* 지사 요약 한 줄 */
.bigline{font-size:clamp(20px,2.6vw,29px);font-weight:800;letter-spacing:-.04em;
         line-height:1.45;margin:0 0 22px}
.btn-line-lg{display:inline-block;padding:14px 30px;border:1.5px solid var(--brand-ink,#14161A);
             border-radius:9px;font-size:15px;font-weight:700;
             transition:background .18s var(--ease),color .18s var(--ease)}
.btn-line-lg:hover{background:var(--brand-ink,#14161A);color:#fff}

/* ── 서비스 · 사례 목록 ───────────────────────────────── */
.svcat{font-size:19px;font-weight:800;letter-spacing:-.03em;margin:34px 0 16px;
       padding-left:12px;border-left:3px solid var(--brand-gold)}
.svcat:first-of-type{margin-top:8px}
.svcard{display:block;background:#fff;border:1px solid var(--brand-line,#E6E9ED);
        border-radius:11px;padding:19px 20px;
        transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
a.svcard:hover{border-color:var(--brand-gold);transform:translateY(-2px);
               box-shadow:0 10px 24px rgba(10,12,16,.07)}
.svcard h4{font-size:16px;font-weight:750;letter-spacing:-.03em;margin:0 0 6px}
.svcard p{font-size:13.8px;color:#777D86;line-height:1.55;margin:0}
.svn{display:inline-block;margin-top:9px;font-size:12px;color:var(--brand-gold);font-weight:650}
.calink{display:inline-block;margin-top:9px;font-size:13px;font-weight:650;color:var(--brand-gold-hi,#C79A3E)}

/* ── 지사 모집 ─────────────────────────────────────────
   손님용 CTA 와 색을 다르게 준다. 나란히 두면 둘 다 흐려진다. */
.joincta{background:linear-gradient(135deg,#14161A,#22262C);color:#fff;padding:70px 0}
.joincta h2{color:#fff;font-size:clamp(24px,3vw,36px);margin-bottom:12px;padding-top:0}
.joincta h2::before{content:none}
.joincta p{color:#A9B0BA;font-size:16px;margin:0 0 26px}
.btn-gold{display:inline-block;padding:15px 34px;border-radius:9px;font-size:15.5px;font-weight:750;
          color:#14161A;background:linear-gradient(145deg,#E3C671,#C79A3E);
          box-shadow:0 12px 28px rgba(199,154,62,.28);
          transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(199,154,62,.36)}

/* 지사 신청 폼 — 견적 폼과 달리 칸이 HTML 에 그대로 있다.
   자바스크립트가 죽어도 무엇을 적어야 하는지는 보인다. */
.jf{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 6px;position:relative}
.jf label{display:flex;flex-direction:column;gap:7px}
.jf label.full{grid-column:1 / -1}
.jf span{font-size:13.5px;font-weight:700;color:#5A6068}
.jf i{color:var(--alert,#C8322B);font-style:normal;margin-left:2px}
.jf input,.jf textarea{width:100%;padding:13px 14px;border:1px solid var(--brand-line,#E6E9ED);
                       border-radius:9px;font-size:15px;font-family:inherit;background:#fff;
                       transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.jf input:focus,.jf textarea:focus{outline:0;border-color:var(--brand-gold);
                                   box-shadow:0 0 0 3px rgba(199,154,62,.14)}
.jf .bad-field{border-color:var(--alert,#C8322B);background:#FFF7F6}
.jf textarea{resize:vertical;min-height:96px}
.jf-note{font-size:12.8px;color:#8E959D;margin:14px 0 16px;line-height:1.6}
.jf-msg{margin-top:14px;padding:13px 16px;border-radius:9px;font-size:14.5px;line-height:1.6}
.jf-msg.ok{background:#F2FAF4;color:#1F7A3D;border:1px solid #CDEBD6}
.jf-msg.bad{background:#FFF6F5;color:#B3271F;border:1px solid #F3D2CF}
@media(max-width:640px){.jf{grid-template-columns:1fr}}

/* ─────────────────────────────────────────────────────────────
   히어로 2단 구성 바로잡기 (2026-08-24 전체 점검)

   `.hero .wrap` 은 `grid-template-columns: minmax(0,790px) 1fr` 이다.
   그런데 어느 자식을 어느 칸에 둘지 **지정하지 않았다.** 그래서 격자가
   자동으로 배치하며 제목·소개문·지표·버튼을 왼쪽/오른쪽에 번갈아 흩뿌렸다.

   실제로 이렇게 나왔다 (라이브 /estate-cleanout/haeundae 실측):

     1920px → 소개문이 오른쪽 280px 칸에 따로 떨어짐
     1100px → 그 칸이 180px 로 줄어 소개문이 3줄
     1000px → 80px  → "고층 / 주상복합 / 밀집 / 지역을 / 고려한 …" 세로 띠

   900px 이하는 1단으로 되돌리는 규칙이 있었고(447행), 홈·서비스 허브는
   `display:block` 으로 이미 고쳐 두었다(480행). **랜딩만 빠져 있었다.**
   그런데 랜딩이 전체의 대부분이다.

   오른쪽 칸은 원래 skin-a 의 원형 배지(`::after`, 454행) 자리다.
   그러니 본문은 전부 왼쪽 칸에 쌓고, 배지만 오른쪽 칸에 세로로 걸친다.
   배지가 없는 스킨(c·d·e)은 2단으로 나눌 이유가 없으므로 1단으로 둔다.
   ───────────────────────────────────────────────────────────── */
.hero .wrap > * { grid-column: 1; }
.skin-a .hero .wrap::after { grid-column: 2; grid-row: 1 / -1; }

/* 배지가 있는 skin-a 만 2단을 쓴다 */
.hero .wrap { display: block; }
.skin-a .hero .wrap { display: grid; }

/* 홈·서비스 허브는 skin-a 라도 1단이다 (배지는 477행에서 이미 껐다) */
.t-hub .hero .wrap,
.t-service .hero .wrap,
.skin-a.t-hub .hero .wrap,
.skin-a.t-service .hero .wrap { display: block; }

/* 1단이 되면 지표 상자가 좁은 칸에 갇힐 이유가 없다.
   전에는 오른쪽 칸으로 밀려 `overflow:hidden` 에 4칸 중 1~3칸이 잘렸다. */
.hero .facts { max-width: 760px; }

/* ─────────────────────────────────────────────────────────────
   `.facts` 이름 충돌 (2026-08-24)

   `.facts` 를 **서로 다른 두 부품이 같이 쓰고 있었다.**

     · 히어로 지표 띠   <div class="facts">   → display:grid, 4칸
     · 회사 정보 표     <table class="facts"> → 표

   표에 `display:grid` 가 남아 `<tbody>` 가 첫 칸(188px)에만 들어갔고,
   /about 의 회사 정보 표는 줄 구분선이 폭의 절반도 못 가고 끊겼다.
   표에는 `.facts-table` 이라는 자기 이름을 준다.
   ───────────────────────────────────────────────────────────── */
table.facts, .facts-table {
  display: table; width: 100%; border-collapse: collapse;
  grid-template-columns: none; max-width: none;
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
table.facts tbody, .facts-table tbody { display: table-row-group; width: auto; }
table.facts tr, .facts-table tr { display: table-row; }
table.facts th, table.facts td,
.facts-table th, .facts-table td {
  display: table-cell; background: none; backdrop-filter: none;
  padding: 13px 14px; border-bottom: 1px solid var(--line, rgba(0,0,0,.09));
  vertical-align: top; font-size: 15px; line-height: 1.7;
}
table.facts th, .facts-table th {
  width: 150px; white-space: nowrap; color: var(--muted, #6B7280); font-weight: 600; text-align: left;
}
@media(max-width:560px){
  table.facts th, .facts-table th { width: 96px; font-size: 13px; }
  table.facts td, .facts-table td { font-size: 14px; }
}

/* 글자 수 안내 (견적 폼 textarea) */
.fcount { margin-top: 5px; font-size: 12px; color: var(--muted, #6B7280); text-align: right; }

/* ─────────────────────────────────────────────────────────────
   인쇄 (2026-08-24)

   스크롤 연출을 위해 61개 요소에 `opacity:0` 을 걸고 화면에 들어올 때
   푼다. **인쇄는 스크롤하지 않는다.** 그래서 첫 화면 밖이 전부 투명한
   채로 인쇄돼 본문이 백지로 나왔다. 고정 상담 바는 모든 쪽 아래에 겹쳐 찍혔다.
   견적서를 뽑아 두려는 손님이 실제로 겪는다.
   ───────────────────────────────────────────────────────────── */
@media print {
  .motion-item { opacity: 1 !important; transform: none !important; }
  .hero h1, .hero .sub, .hero .facts, .hero .cta { animation: none !important; }
  .floating-bar, .fbar, .hd .tel, .navbtn, .nav-panel { display: none !important; }
  .hero { min-height: auto !important; }
  .hero-bg, .hero::after, .hero::before { display: none !important; }
  .hero, .hero .wrap { color: #000 !important; }
  a[href^="/"]::after { content: ""; }
  body { background: #fff !important; color: #111 !important; }
  section { padding: 18px 0 !important; break-inside: avoid; }
}

/* ─────────────────────────────────────────────────────────────
   모바일 · 접근성 (2026-08-24 전체 점검)
   ───────────────────────────────────────────────────────────── */

/* ① 햄버거 메뉴를 키보드로 열 수 있게

   `<input class="navtog" hidden>` 이었다. `hidden` 은 `display:none` 이라
   **탭 순서에서 아예 빠진다.** CSS 는 이미 `opacity:0` 으로 숨기고 있었으니
   `hidden` 은 없어도 보이지 않는다. 대신 초점은 받을 수 있게 둔다.
   손가락·마우스로는 되는데 키보드로만 못 열리는 상태였다. */
.navtog{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.navtog:focus-visible ~ .navbtn{outline:2px solid var(--brand-gold-hi,#F0D4A0);outline-offset:3px}
.navbtn:focus-visible{outline:2px solid var(--brand-gold-hi,#F0D4A0);outline-offset:3px}

/* ② 흐린 글자 대비 올리기

   `--muted:#8E959D` 를 흰 바탕에 쓰면 **3.03:1** 로 WCAG AA(4.5:1)에 못 미친다.
   하필 견적 폼 안내문에 몰려 있어, 밝은 곳에서 휴대폰으로 보면 안 읽힌다.
   본문 색 계열을 유지하면서 대비만 올린다. */
:root{ --muted:#5F6873; }                 /* 흰 바탕 대비 6.0:1 */
.sec-desc{color:#5A616B}                  /* 4.15 → 6.5 */
.case .meta{color:#6B6252}                /* 3.78 → 6.2 */

/* ③ 작은 글자 키우기 (본문 최소 14px)
   11.8~13px 짜리들이 전부 안내문·설명이라 정작 읽어야 하는 글이었다. */
.case .meta{font-size:13.5px}
.fhelp{font-size:13.5px}
.fstepno{font-size:13.5px}
.idx a{font-size:14px}
.ft .right{font-size:13.5px}

/* ④ 손가락으로 누를 수 있는 크기 (권장 44px)

   390px 아이폰 실측: 푸터 회사 메뉴 56×15px, 방침·약관 52×15px,
   「전체 서비스 안내」 164×29px, 헤더 「상담」 47×23px.
   특히 헤더 「상담」은 전화 거는 단추라 이게 제일 아깝다. */
@media(max-width:900px){
  .ft-nav a, .ft .right a { display:inline-block; padding:11px 6px; line-height:1.3; }
  .idx a { padding:11px 0; }
  .hd .tel { display:inline-flex; align-items:center; min-height:44px; padding:0 12px; }
  .navbtn { min-width:44px; min-height:44px; align-items:center; justify-content:center; }
}

/* ⑤ 초점 표시. 키보드로 다닐 때 지금 어디인지 보여야 한다. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--amber,#D6A83F); outline-offset:2px;
}

/* ⑥ 넓은 표·코드는 자기 상자 안에서 밀어 본다 (본문이 가로로 새지 않게) */
.wrap table{ max-width:100%; }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* 상단 공지 띠 — 관리자 → 설정 → 기본 정보 → 「공지 문구」 (2026-08-24) */
.topnotice{background:var(--brand-gold,#D6A83F);color:#1B1408;font-size:14px;font-weight:650;
  text-align:center;padding:10px 0;line-height:1.5}
.topnotice .wrap{padding-top:0;padding-bottom:0}
@media(max-width:560px){ .topnotice{font-size:13.5px;padding:9px 0} }

/* ─────────────────────────────────────────────────────────────
   상담 채널 · SNS 아이콘 (2026-08-24)

   전에는 푸터에 **글자만** 가운뎃점으로 이어 붙어 있었다.
   휴대폰에서 56×15px 짜리 글자 줄이라 눈에 띄지도, 누르기도 어려웠다.
   아이콘은 글자보다 먼저 읽힌다 — 카카오 노란 말풍선은 설명이 필요 없다.

   색은 브랜드 색을 쓰되 **평소에는 차분하게, 손을 올리면 제 색으로.**
   어두운 푸터에 원색 일곱 개가 동시에 켜져 있으면 그게 더 안 읽힌다.
   ───────────────────────────────────────────────────────────── */
.chi{width:18px;height:18px;flex:0 0 auto;display:block}

.ft-ch{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-top:14px}
.ft-ch .ch{display:inline-flex;align-items:center;gap:7px;
  padding:9px 13px;border-radius:999px;font-size:13.5px;line-height:1;
  color:#C3CAD3;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
  transition:background .18s var(--ease,ease),color .18s var(--ease,ease),
             border-color .18s var(--ease,ease),transform .18s var(--ease,ease)}
.ft-ch .ch:hover{transform:translateY(-1px);color:#fff;background:rgba(255,255,255,.1)}

/* 손을 올리면 그 채널 색으로 */
.ft-ch .ch-kakao:hover     { background:#FEE500; border-color:#FEE500; color:#191600 }
.ft-ch .ch-navertalk:hover,
.ft-ch .ch-naver:hover,
.ft-ch .ch-blog:hover      { background:#03C75A; border-color:#03C75A; color:#062611 }
.ft-ch .ch-instagram:hover { background:linear-gradient(45deg,#F9CE34,#EE2A7B,#6228D7); border-color:transparent; color:#fff }
.ft-ch .ch-youtube:hover   { background:#FF0033; border-color:#FF0033; color:#fff }
.ft-ch .ch-facebook:hover  { background:#1877F2; border-color:#1877F2; color:#fff }
.ft-ch .ch-telegram:hover  { background:#2AABEE; border-color:#2AABEE; color:#04222f }
.ft-ch .ch-threads:hover   { background:#101010; border-color:#3a3a3a; color:#fff }

@media(max-width:560px){
  .ft-ch{gap:7px}
  .ft-ch .ch{padding:9px 11px;font-size:13px}
  .ft-ch .ch .chi{width:17px;height:17px}
}

/* 아래 고정 상담 바 — 아이콘 + 글자 */
.float a{display:flex;align-items:center;justify-content:center;gap:8px}
.float a .chi{width:19px;height:19px}
@media(max-width:400px){
  /* 아주 좁은 화면에서는 글자를 줄이고 아이콘을 남긴다.
     글자가 뭉개져 읽히지 않느니 아이콘 하나가 낫다. */
  .float a{gap:6px;font-size:13.5px}
  .float a .chi{width:18px;height:18px}
}

/* 연락 방법 카드 제목 */
.svcard h4{display:flex;align-items:center;gap:9px}
.svcard h4 .chi{width:20px;height:20px;color:var(--brand-gold,#D6A83F)}

/* 채널 알약에는 밑줄을 넣지 않는다 (링크 기본 밑줄이 배지처럼 보이는 것을 깬다) */
.ft-ch .ch, .ft-ch .ch:hover{text-decoration:none}
.ft-ch .ch span{text-decoration:none}

/* ─────────────────────────────────────────────────────────────
   오른쪽 세로 퀵바 (2026-08-24)

   사장님: *"그냥 우측에 따라다니는 아이콘으로 하는게 좋지 않을까?"*

   PC 는 오른쪽 세로, 휴대폰은 지금까지대로 아래 가로 바.
   **둘이 동시에 뜨지 않는다** — 서로 반대로 숨긴다.
   좁은 화면에서 오른쪽 세로 줄은 본문을 가리고, 엄지는 아래쪽에 닿는다.
   ───────────────────────────────────────────────────────────── */
.qrail{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:8px}

.qrail .q{width:62px;padding:11px 4px 9px;border-radius:15px;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  font-size:11.5px;font-weight:700;letter-spacing:-.02em;line-height:1;
  text-decoration:none;cursor:pointer;
  color:#E7EAEE;background:rgba(20,22,26,.82);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  transition:transform .18s var(--ease,ease),background .18s var(--ease,ease),
             color .18s var(--ease,ease),border-color .18s var(--ease,ease)}
.qrail .q .chi{width:21px;height:21px}
.qrail .q:hover{transform:translateX(-3px)}

/* 채널별 색 — 손을 올렸을 때만 제 색으로. 평소에 원색이 여섯 개면 그게 더 안 읽힌다 */
.qrail .q-tel:hover      { background:var(--brand-gold,#D6A83F); border-color:var(--brand-gold,#D6A83F); color:#1B1408 }
.qrail .q-kakao:hover    { background:#FEE500; border-color:#FEE500; color:#191600 }
.qrail .q-navertalk:hover,
.qrail .q-blog:hover     { background:#03C75A; border-color:#03C75A; color:#062611 }
.qrail .q-telegram:hover { background:#2AABEE; border-color:#2AABEE; color:#04222f }
.qrail .q-quote:hover    { background:#fff; border-color:#fff; color:#14161A }
.qrail .q-top:hover      { background:rgba(255,255,255,.16); color:#fff }

/* 「견적」은 눈에 띄어야 한다 — 이 사이트가 받고 싶은 것이 그것이다 */
.qrail .q-quote{background:var(--brand-gold,#D6A83F);border-color:var(--brand-gold,#D6A83F);color:#1B1408}

.qrail .q-top{font-size:11px}

/* 휴대폰: 오른쪽 세로는 숨기고 아래 가로 바를 쓴다 */
@media(max-width:900px){ .qrail{display:none} }
/* PC: 아래 가로 바는 숨기고 오른쪽 세로를 쓴다 */
@media(min-width:901px){ .float{display:none} }

/* 화면이 낮으면(노트북 가로 등) 칸이 넘친다 — 글자를 접고 아이콘만 남긴다 */
@media(min-width:901px) and (max-height:700px){
  .qrail .q{width:50px;padding:10px 4px}
  .qrail .q span{display:none}
  .qrail .q .chi{width:20px;height:20px}
}

@media (prefers-reduced-motion: reduce){ .qrail .q{transition:none} .qrail .q:hover{transform:none} }

/* 빵부스러기 — 2026-08-30
   지역 페이지에서 「부산 공장청소 › 기장군」을 화면 글자로 보여준다.
   제목에 시·도를 되넣지 않고도 시·도와 구·군이 붙어 있게 하는 자리다. */
.hero .crumbs{font-size:12.5px;line-height:1.9;margin:0 0 10px;opacity:.85;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.hero .crumbs a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.hero .crumbs a:hover{border-bottom-color:currentColor}
.hero .crumbs .crumb-sep{opacity:.5}
.hero .crumbs [aria-current="page"]{font-weight:600;opacity:1}

/* 사례 카드가 링크일 때 — 2026-08-30
   「카드를 눌러도 아무 일이 없습니다」가 라이브 점검 지적이었다.
   눌리는 카드는 눌리게 보여야 한다. 안 그러면 있어도 안 누른다. */
a.case-link{text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
a.case-link:hover{border-color:var(--navy-700);box-shadow:0 6px 18px rgba(0,0,0,.10);transform:translateY(-2px)}
a.case-link .calink{display:inline-block;margin-top:10px;font-size:13px;font-weight:700}
a.case-link .calink::after{content:" ›"}

/* 지사 카드 높이 — 2026-08-30
   1건짜리 카드가 16건짜리 카드 높이만큼 늘어나 아래가 텅 비었다.
   그리드는 기본이 stretch 라 한 줄에서 제일 큰 카드에 맞춰진다. */
.brgrid{align-items:start}

/* 견적 폼을 진짜 <form> 으로 감쌌다 (2026-08-30)
   자동완성과 Enter 제출을 위해서다. 보이는 모양은 그대로여야 한다. */
.form-slot .fform{margin:0;padding:0;border:0;display:block}

/* 지사 신청 폼 — 칸 바로 아래 안내 (2026-08-30)
   전에는 폼 맨 아래 한 곳에만 띄워서, 첫 빈 칸으로 화면을 올리면
   안내가 화면 밖으로 밀려났다(실측 36px). 빨간 테두리만 보이고 이유는 안 보였다. */
.jf .jf-err{font-size:12.8px;color:var(--alert);margin-top:6px;font-weight:600}

/* ── 오른쪽 퀵바가 본문을 덮지 않게 (2026-08-30 브라우저 점검)
 *
 *   창 폭 1178px 에서 「해운대구 공장청소」 칩이 40px 덮였다.
 *   덮인 자리를 눌러도 링크가 아니라 퀵바가 잡혀서 **지역 페이지로 안 갔다.**
 *   눈에는 보이는데 안 눌리는 것이 제일 나쁘다.
 *
 *   퀵바는 62px + 오른쪽 여백 16px = 78px 을 차지한다.
 *   본문(--wrap 1120px)이 화면 가운데 있으므로, 화면 폭이
 *   1120 + 78*2 = 1276px 보다 좁으면 겹칠 수 있다.
 *   그 구간에서만 본문 오른쪽에 자리를 비워 준다. 넓은 화면은 그대로 둔다.
 */
@media (min-width:901px) and (max-width:1275px){
  .wrap{ padding-right:96px }
  /* 머리말은 화면 맨 위라 퀵바(세로 가운데)와 안 겹친다 — 원래대로 둔다 */
  .hd .wrap{ padding-right:22px }
}
@media (min-width:901px) and (max-width:1275px) and (max-height:700px){
  /* 낮은 화면에서는 퀵바가 50px 로 좁아진다 */
  .wrap{ padding-right:84px }
  .hd .wrap{ padding-right:22px }
}

/* 「전국 지사 안내」의 지역 이름을 링크로 (2026-08-30)
   전에는 이 페이지에서 나가는 길이 0개였다. 볼 것은 있는데 갈 곳이 없었다. */
.brgrid .brlink{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:inherit}
.brgrid .brlink strong{border-bottom:1px solid rgba(0,0,0,.18)}
.brgrid .brlink:hover strong{border-bottom-color:currentColor}
.brgrid .brn2{font-size:11.5px;color:var(--muted);font-weight:600}
.brgrid .brn2::before{content:"글 "}
.brgrid .brn2::after{content:"장"}

/* ─────────────────────────────────────────────────────────────
   좁은 휴대폰에서 페이지가 옆으로 밀리던 것 (2026-08-31 실측)

   머리말 한 줄이 화면보다 넓었다. 실측(크로미움, 로컬 사본):

       로고 190  +  전화 71  +  메뉴 단추 44  +  좌우 여백 44  +  사이 간격 22
       = 371px   ← 이보다 좁은 화면은 **페이지 전체가 가로로 밀린다**

   360px(갤럭시)에서 11px, 320px에서 51px 이 넘쳤다.
   한국에서 360px 은 제일 흔한 폭이다. 개업 첫날 손님 절반이 겪을 수 있었다.

   **375px 이상에서는 아무것도 달라지지 않는다.** 지금 깨져 있는 폭에서만 좁힌다.
   ───────────────────────────────────────────────────────────── */
@media (max-width:374px){
  .hd .wrap{ padding-left:12px; padding-right:12px }
  .hd .logo img{ height:32px; max-width:160px }
  .hd.scrolled .logo img{ height:30px }
}
@media (max-width:339px){
  .hd .wrap{ padding-left:8px; padding-right:8px }
  .hd .logo img{ height:28px; max-width:140px }
  .hd.scrolled .logo img{ height:26px }
  .hd .tel{ padding:0 6px }
}

/* 누가 만들었나 · AI 고지 (2026-08-31)
   기본은 꺼져 있다. 관리자 → 설정 → 기본 정보 에서 켤 때만 나온다. */
.ft-trust{border-top:1px solid rgba(255,255,255,.08);margin-top:18px;padding-top:14px}
.ft-trust p{font-size:12px;line-height:1.7;color:#8f9aa8;margin:0 0 4px}
.ft-trust p:last-child{margin-bottom:0}

/* 바깥 링크 배너 (2026-09-07)
   **기존 디자인은 한 줄도 안 건드린다.** 새 블록의 것만 더한다.
   사장님 지시: "디자인 변경 하면 죽는다."
   붙는 링크가 없으면 블록 자체가 안 그려지므로 이 자리는 아예 비어 있다. */
.outlinks{padding:8px 0 34px}
.outlinks h3{font-size:17px;font-weight:750;letter-spacing:-.02em;margin:0 0 12px;color:#1b1e23}
.olcard{display:flex;align-items:center;gap:14px;padding:16px 18px;
        border:1px solid #E3E6EA;border-radius:14px;background:#fff;
        text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.olcard:hover{border-color:#C9CFD6;box-shadow:0 6px 18px rgba(20,22,26,.07)}
.olcard .olimg{flex:0 0 92px;line-height:0}
.olcard .olimg img{width:92px;height:92px;object-fit:cover;border-radius:10px}
.olcard .oltxt{flex:1 1 auto;min-width:0}
.olcard .oltxt strong{display:block;font-size:16px;font-weight:750;letter-spacing:-.02em;
                      color:#14161A;margin-bottom:4px}
.olcard .oltxt em{display:block;font-style:normal;font-size:13.5px;line-height:1.6;color:#606A76}
.olcard .olgo{flex:0 0 auto;font-size:13.5px;font-weight:700;color:#8A6A1F;
              border:1px solid #E2D3A8;background:#FBF6E9;border-radius:999px;padding:8px 15px;
              white-space:nowrap}
.olad{font-size:12px;color:#8A939E;margin:7px 2px 0}
@media (max-width:600px){
  .olcard{flex-wrap:wrap;gap:12px}
  .olcard .olimg{flex:0 0 64px}
  .olcard .olimg img{width:64px;height:64px}
  .olcard .olgo{width:100%;text-align:center}
}

/* ─────────────────────────────────────────────────────────────
 * 히어로 퀵 상담  (2026-09-27)
 *
 * 첫 화면에서 손가락 세 번이면 끝나야 한다. 그래서 한 줄에 편다.
 * 좁은 화면에서는 세로로 쌓되 칸은 그대로 크게 둔다 — 휴대폰에서 작은 칸은 못 누른다.
 * ───────────────────────────────────────────────────────────── */
.qf{margin-top:18px;background:rgba(255,255,255,.94);border:1px solid rgba(0,0,0,.08);
    border-radius:12px;padding:14px 16px;max-width:760px;
    box-shadow:0 6px 22px rgba(0,0,0,.10)}
.qf-h{font-size:14px;font-weight:700;color:#17202e;margin-bottom:10px}
.qf-h span{font-weight:400;font-size:12.5px;color:#6b7788;margin-left:6px}
.qf-row{display:grid;grid-template-columns:1fr 1.2fr 1.2fr auto;gap:8px;align-items:end}
.qf-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.qf-f>span{font-size:11.5px;color:#6b7788}
.qf-f input,.qf-f select,.qf-etc{width:100%;height:42px;padding:0 11px;font-size:14px;
    border:1px solid #ccd3dd;border-radius:8px;background:#fff;color:#17202e}
.qf-f input:focus,.qf-f select:focus,.qf-etc:focus{outline:2px solid #2f6df6;outline-offset:1px;border-color:#2f6df6}
.qf-etc{margin-top:8px}
.qf-go{height:42px;padding:0 20px;font-size:14.5px;font-weight:700;white-space:nowrap;
    border:0;border-radius:8px;background:#17202e;color:#fff;cursor:pointer}
.qf-go:hover{background:#0f1723}
.qf-go[disabled]{opacity:.55;cursor:default}
/* 드롭다운을 펼쳤을 때 글자색은 브라우저가 따로 그린다 — 어두운 스킨에서 흐려 보이던 것 */
.qf-f select option{color:#17202e;background:#fff}
.qf-agree{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:12px;color:#5b6676}
.qf-agree a{color:#2f6df6;text-decoration:underline}
.qf-hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.qf-msg{margin:8px 0 0;font-size:13px;color:#5b6676;min-height:1px}
.qf-msg.bad{color:#b4232f}
.qf-msg.ok{color:#0b7a4b;font-weight:600}
@media(max-width:820px){
  .qf-row{grid-template-columns:1fr 1fr}
  .qf-go{grid-column:1 / -1}
}
@media(max-width:520px){
  .qf{padding:12px 13px;margin-top:14px}
  .qf-row{grid-template-columns:1fr}
}
/* 어두운 스킨에서는 카드가 떠 보이지 않게 */
body.skin-f .qf{background:rgba(16,20,28,.86);border-color:rgba(255,255,255,.14)}
body.skin-f .qf-h{color:#f2f5f9}
body.skin-f .qf-f>span,body.skin-f .qf-agree,body.skin-f .qf-msg{color:#b8c2d0}
body.skin-f .qf-f input,body.skin-f .qf-f select,body.skin-f .qf-etc{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#f2f5f9}
body.skin-f .qf-f input::placeholder,body.skin-f .qf-etc::placeholder{color:#94a1b2}
body.skin-f .qf-go{background:#e0913a;color:#17202e}
body.skin-f .qf-go:hover{background:#d0821f}


/* ═════════════════════════════════════════════════════════════
   사진 층 — 밝은 스킨(a~e)용 규칙   (2026-09-22, v129)

   ── 왜 여기 있나
   v126 의 사진 층(갤러리 · 크게 보기 · 전후 손잡이 · 사진 상담 띠)은
   assets/css/skin-f.css 에만 규칙이 있었다. 그 파일은 skin-f 일 때만 불린다.
   그런데 라이브는 **원래 스킨(skin-a)** 이고, 사장님 말씀은
     "이미 발행한 페이지들도 사진 보강하고 위치 이런 거 변경하고픈데" 였다.
   a~e 의 실제 규칙은 이 파일(site.css) 안에 있으므로 새 규칙도 여기 둔다.

   ── 캐스케이드
   전부 `body:not(.skin-f)` 로 시작한다. skin-f 에는 **선택자가 아예 안 맞는다** —
   그래서 skin-f 화면은 이 블록이 있으나 없으나 똑같다. 반대로 a~e 는
   skin-f.css 를 아예 안 받으므로 서로 덮을 일이 없다.

   ── 생김새
   위쪽 「2026 PREMIUM FRONT REDESIGN」 의 말을 그대로 쓴다 —
   아이보리 바탕 · 금색 강조 · 18~20px 둥근 모서리 · var(--elev-sm) 그림자.
   사진 칸은 작업사례 카드(.case)와 같은 모양이라 새 부품처럼 보이지 않는다.
   맺음 띠(.sfc)는 지표 띠(.metrics)처럼 검은 바탕이다 — 이미 이 디자인에 있는 대비다.
   ═════════════════════════════════════════════════════════════ */
:root{
  --sfg-ic-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5'/%3E%3C/svg%3E");
  --sfg-ic-lr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ── 갤러리 ─────────────────────────────────────────── */
body:not(.skin-f) section.sfg{padding:78px 0 70px;background:#fff;
  border-top:1px solid var(--brand-line);border-bottom:1px solid var(--brand-line)}
body:not(.skin-f) .sfg-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:8px 28px;flex-wrap:wrap;margin-bottom:28px}
body:not(.skin-f) .sfg-head h2{margin:0}
body:not(.skin-f) .sfg-sub{margin:0 0 6px;font-size:14.5px;color:#777D86}
body:not(.skin-f) .sfg-grid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:230px;grid-auto-flow:dense;gap:14px}
body:not(.skin-f) .sfg-i{position:relative;min-width:0;border-radius:20px;overflow:hidden;
  background:#EFEAE0;box-shadow:0 10px 34px rgba(10,12,16,.08);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
body:not(.skin-f) .sfg-i:hover{transform:translateY(-4px);box-shadow:var(--elev)}
body:not(.skin-f) .sfg-i.sfg-lead{grid-column:span 2;grid-row:span 2}
body:not(.skin-f) .sfg-i.sfg-pair{grid-column:span 2}
body:not(.skin-f) .sfg-a{position:relative;display:block;width:100%;height:100%;overflow:hidden;
  cursor:zoom-in;color:#fff}
body:not(.skin-f) .sfg-img{display:block;width:100%;height:100%;object-fit:cover;
  filter:saturate(.88);transition:transform .65s var(--ease),filter .5s var(--ease)}
body:not(.skin-f) .sfg-a:hover .sfg-img{transform:scale(1.055);filter:saturate(1.05)}
body:not(.skin-f) .sfg-a:focus-visible{outline:3px solid var(--brand-gold);outline-offset:-3px}
/* 단계 배지 — 전후 블록의 설명 알약(.ba-grid figcaption)과 같은 모양 */
body:not(.skin-f) .sfg-tag{position:absolute;left:14px;top:14px;padding:7px 14px;border-radius:999px;
  font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:#fff;
  background:rgba(10,11,13,.82);backdrop-filter:blur(8px)}
/* 스킨마다 강조색이 다르다(.skin-c 는 초록, .skin-d 는 파랑 …) — 변수로 받아 그 색을 쓴다 */
body:not(.skin-f) .sfg-tag--after{background:linear-gradient(145deg,var(--brand-gold-hi),var(--brand-gold));color:#17120A}
/* 「누르면 커진다」 표시 — 손을 올리거나 초점이 갔을 때만. 휴대폰에서는 늘 보인다 */
body:not(.skin-f) .sfg-zoom{position:absolute;right:14px;bottom:14px;width:36px;height:36px;
  border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 6px 16px rgba(10,12,16,.28);
  opacity:0;transition:opacity .25s var(--ease)}
body:not(.skin-f) .sfg-zoom::before{content:"";position:absolute;inset:9px;background:#17120A;
  -webkit-mask:var(--sfg-ic-search) center/contain no-repeat;mask:var(--sfg-ic-search) center/contain no-repeat}
body:not(.skin-f) .sfg-a:hover .sfg-zoom,
body:not(.skin-f) .sfg-a:focus-visible .sfg-zoom{opacity:1}
/* 전후 한 쌍 — 한 칸에 두 장, 사이에 금색 선 */
body:not(.skin-f) .sfg-duo{display:grid;grid-template-columns:1fr 1fr;height:100%}
body:not(.skin-f) .sfg-duo .sfg-a + .sfg-a{border-left:2px solid var(--brand-gold)}
body:not(.skin-f) .sfg-pair .sfg-cap{position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:30px 16px 13px;font-size:13.5px;font-weight:700;color:#fff;letter-spacing:-.02em;
  background:linear-gradient(180deg,transparent,rgba(10,11,13,.88));pointer-events:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body:not(.skin-f) .sfg-pair .sfg-zoom{bottom:auto;top:14px}
/* 「사진 더 보기」 — 지역 알약(.tag-l)과 같은 손놀림 */
body:not(.skin-f) .sfg-more{margin-top:18px}
body:not(.skin-f) .sfg-more > summary{list-style:none;display:flex;align-items:center;
  justify-content:center;gap:10px;min-height:56px;padding:0 26px;border-radius:999px;
  border:1px solid #D8D0C3;background:#fff;color:var(--brand-ink);font-weight:750;font-size:15.5px;
  cursor:pointer;transition:.25s var(--ease)}
body:not(.skin-f) .sfg-more > summary::-webkit-details-marker{display:none}
body:not(.skin-f) .sfg-more > summary b{color:#8C8272;font-weight:650}
body:not(.skin-f) .sfg-more > summary::after{content:"";width:9px;height:9px;margin-top:-4px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .25s var(--ease)}
body:not(.skin-f) .sfg-more[open] > summary::after{transform:rotate(-135deg);margin-top:2px}
body:not(.skin-f) .sfg-more > summary:hover{background:#111317;color:#fff;border-color:#111317}
body:not(.skin-f) .sfg-more > summary:hover b{color:#BDB4A6}
body:not(.skin-f) .sfg-more > summary:focus-visible{outline:3px solid var(--brand-gold);outline-offset:3px}
body:not(.skin-f) .sfg-grid--more{margin-top:14px;grid-auto-rows:176px}

/* ── 사진 바로 아래 상담 띠 ─────────────────────────── */
body:not(.skin-f) section.sfc{position:relative;overflow:hidden;padding:56px 0;
  background:#0B0D10;color:#fff}
body:not(.skin-f) section.sfc::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  z-index:2;background:linear-gradient(90deg,var(--brand-gold),var(--brand-gold-hi))}
body:not(.skin-f) .sfc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.5;filter:saturate(.72) contrast(1.02) brightness(1.06)}
/* 왼쪽은 글이 앉는 자리라 짙게, 오른쪽은 사진이 보이게. 단추 뒤는 다시 조금 짙다 */
body:not(.skin-f) section.sfc::after{content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(9,10,12,.95) 0%,rgba(9,10,12,.74) 44%,rgba(9,10,12,.46) 100%)}
body:not(.skin-f) .sfc-in{position:relative;z-index:1;display:flex;align-items:center;
  justify-content:space-between;gap:22px 40px;flex-wrap:wrap}
body:not(.skin-f) section.sfc h2{color:#fff;font-size:clamp(23px,2.6vw,33px);padding-top:0;margin:0 0 8px}
body:not(.skin-f) section.sfc h2::before{display:none}
body:not(.skin-f) .sfc-txt p{margin:0;color:#CED2D9;font-size:16px}
body:not(.skin-f) .sfc-btns{display:flex;gap:10px;flex-wrap:wrap}
body:not(.skin-f) .sfc-btns .btn{min-height:52px}
body:not(.skin-f) .sfc-k{display:inline-flex;align-items:center;gap:8px;background:#FEE500;
  color:#191600;border:0}
body:not(.skin-f) .sfc-k:hover{background:#FFEB3B}
body:not(.skin-f) .sfc-k svg{width:20px;height:20px}

/* ── 전후 비교 — 끌어서 견주는 손잡이 ───────────────────
   손잡이가 붙은 전후 블록만 한 장 겹치기로 바뀐다(:has). 손잡이가 없으면
   예전처럼 두 장이 나란히 있다 — 사진 층이 꺼진 페이지는 한 글자도 안 바뀐다. */
body:not(.skin-f) .ba-grid:has(.ba-range){display:block;position:relative;aspect-ratio:16/10;
  border-radius:20px;overflow:hidden;box-shadow:var(--elev-sm);
  touch-action:pan-y;user-select:none;-webkit-user-select:none}
body:not(.skin-f) .ba-grid:has(.ba-range) figure{position:absolute;inset:0;margin:0;
  border-radius:0;box-shadow:none;overflow:hidden}
body:not(.skin-f) .ba-grid:has(.ba-range) figure + figure{clip-path:inset(0 0 0 var(--pos,50%))}
body:not(.skin-f) .ba-grid:has(.ba-range) img{width:100%;height:100%;object-fit:cover;border-radius:0}
body:not(.skin-f) .ba-grid:has(.ba-range) figure:hover img{transform:none}
body:not(.skin-f) .ba-grid:has(.ba-range) figcaption{z-index:1}
body:not(.skin-f) .ba-range{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none}
body:not(.skin-f) .ba-knob{position:absolute;z-index:2;top:0;bottom:0;left:var(--pos,50%);width:2px;
  margin-left:-1px;background:#fff;pointer-events:none;box-shadow:0 0 0 1px rgba(10,12,16,.3)}
body:not(.skin-f) .ba-knob::before{content:"";position:absolute;left:50%;top:50%;width:50px;height:50px;
  margin:-25px 0 0 -25px;border-radius:50%;background:linear-gradient(145deg,var(--brand-gold-hi),var(--brand-gold));
  box-shadow:0 0 0 6px rgba(20,22,26,.18),0 10px 26px rgba(10,12,16,.4)}
body:not(.skin-f) .ba-knob::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;
  margin:-10px 0 0 -10px;background:#17120A;
  -webkit-mask:var(--sfg-ic-lr) center/contain no-repeat;mask:var(--sfg-ic-lr) center/contain no-repeat}
body:not(.skin-f) .ba-range:focus-visible + .ba-knob::before{box-shadow:0 0 0 3px #fff,0 0 0 8px var(--brand-gold)}

/* ── 크게 보기 창 ───────────────────────────────────────
   사진을 크게 보는 동안은 바탕이 어둡다 — 밝은 스킨에서도 그게 맞다.
   z-index 1000 이라 아래 고정 상담 바(50)·퀵바(60) 위에 온다. */
body:not(.skin-f).sflb-on{overflow:hidden}
body:not(.skin-f) .sflb{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;
  justify-content:center;background:rgba(8,9,11,.95);padding:64px 72px 24px}
body:not(.skin-f) .sflb[hidden]{display:none}
body:not(.skin-f) .sflb-top{position:absolute;top:0;left:0;right:0;height:60px;display:flex;
  align-items:center;justify-content:space-between;padding:0 12px 0 24px}
body:not(.skin-f) .sflb-count{color:#EDE7DC;font-size:14px;font-weight:700;letter-spacing:.08em;
  font-variant-numeric:tabular-nums}
body:not(.skin-f) .sflb-fig{margin:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;width:100%;height:100%;min-height:0}
body:not(.skin-f) .sflb-img{display:block;max-width:100%;max-height:calc(100% - 52px);width:auto;
  height:auto;object-fit:contain;border-radius:8px;background:#15171B;
  box-shadow:0 30px 80px rgba(0,0,0,.55)}
body:not(.skin-f) .sflb-cap{margin-top:16px;color:#EDE7DC;font-size:15px;text-align:center;
  max-width:760px;line-height:1.55}
body:not(.skin-f) .sflb button{position:absolute;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(231,195,119,.45);background:rgba(16,18,22,.8);color:var(--brand-gold-hi);
  cursor:pointer;border-radius:50%;padding:0}
body:not(.skin-f) .sflb button:hover{background:rgba(199,154,62,.2)}
body:not(.skin-f) .sflb button:focus-visible{outline:2px solid #fff;outline-offset:2px}
body:not(.skin-f) .sflb button[hidden]{display:none}
body:not(.skin-f) .sflb-x{position:static!important;width:44px;height:44px}
body:not(.skin-f) .sflb-x span{width:18px;height:18px;position:relative}
body:not(.skin-f) .sflb-x span::before,body:not(.skin-f) .sflb-x span::after{content:"";
  position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:currentColor;
  transform:rotate(45deg)}
body:not(.skin-f) .sflb-x span::after{transform:rotate(-45deg)}
body:not(.skin-f) .sflb-nav{top:50%;width:52px;height:52px;margin-top:-26px}
body:not(.skin-f) .sflb-prev{left:14px}
body:not(.skin-f) .sflb-next{right:14px}
body:not(.skin-f) .sflb-nav span{width:11px;height:11px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-left:-3px}
body:not(.skin-f) .sflb-prev span{transform:rotate(135deg);margin-left:3px}

/* ── 태블릿 ─────────────────────────────────────────── */
@media(max-width:1000px){
  body:not(.skin-f) .sfg-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:200px}
}

/* ── 휴대폰 ─────────────────────────────────────────────
   격자를 옆으로 넘기는 카드 줄로 바꾼다. `.wrap` 의 좌우 여백(22px)만큼
   밖으로 빼고 그만큼 안쪽 여백을 줘서 **페이지가 가로로 밀리지 않는다.**
   다음 카드가 살짝 보여서 더 있다는 것이 눈에 띈다. */
@media(max-width:900px){
  body:not(.skin-f) section.sfg{padding:54px 0 46px}
  body:not(.skin-f) .sfg-head{margin-bottom:20px}
  body:not(.skin-f) .sfg-grid[data-sfg]{display:flex;gap:12px;overflow-x:auto;
    overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:0 -22px;padding:4px 22px 10px;scroll-padding:0 22px;scrollbar-width:none}
  body:not(.skin-f) .sfg-grid[data-sfg]::-webkit-scrollbar{display:none}
  body:not(.skin-f) .sfg-grid[data-sfg] > .sfg-i{flex:0 0 84%;height:auto;aspect-ratio:4/3.3;
    scroll-snap-align:start}
  body:not(.skin-f) .sfg-grid[data-sfg] > .sfg-i.sfg-pair{flex-basis:92%}
  body:not(.skin-f) .sfg-i:hover{transform:none}
  body:not(.skin-f) .sfg-grid--more{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:154px;gap:10px}
  body:not(.skin-f) .sfg-grid--more .sfg-i.sfg-pair{grid-column:span 2}
  body:not(.skin-f) .sfg-zoom{opacity:1;width:32px;height:32px}
  body:not(.skin-f) .sfg-zoom::before{inset:8px}
  body:not(.skin-f) .sfg-tag{left:11px;top:11px;padding:6px 12px;font-size:12px}
  body:not(.skin-f) .sfg-pair .sfg-zoom{top:11px}
  body:not(.skin-f) section.sfc{padding:40px 0}
  body:not(.skin-f) .sfc-btns{width:100%}
  body:not(.skin-f) .sfc-btns .btn{flex:1 1 100%;justify-content:center}
  body:not(.skin-f) .sflb{padding:56px 8px 16px}
  body:not(.skin-f) .sflb-nav{top:auto;bottom:18px;margin-top:0;width:46px;height:46px}
  body:not(.skin-f) .sflb-img{max-height:calc(100% - 112px)}
  body:not(.skin-f) .sflb-cap{font-size:14px;padding:0 62px}
}
@media(max-width:560px){
  body:not(.skin-f) .ba-grid:has(.ba-range){aspect-ratio:4/3.4}
  body:not(.skin-f) .sfg-more > summary{min-height:52px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){
  body:not(.skin-f) .sfg-img,body:not(.skin-f) .sfg-i,body:not(.skin-f) .sfg-zoom{transition:none}
}
/* 인쇄 — 갤러리는 종이에서 잉크만 먹는다. 크게 보기 창은 아예 화면 것이다. */
@media print{
  body:not(.skin-f) section.sfg,body:not(.skin-f) section.sfc,body:not(.skin-f) .sflb{display:none!important}
}