/* site.css — ③ 도착지 전체가 쓰는 하나의 디자인 시스템.
   2026-09-02 index.html 인라인에서 빼냈다. 설계 근거 = 설계.md
   🔴 폭·색·헤더가 갈라졌던 원인이 「CSS 가 둘」이었다. 여기 하나만 둔다. */
/* ═══════════════════════════════════════════════════════════════
   MZ GROUP — 메인 페이지 시안 v2 (2026-08-06)
   디자인 시스템 = F/M 포스터와 동일: Noto Sans KR 하나 · 굵기 대비로만 위계
   무채색 + 브랜드 퍼플 #4820F2 극소량 · 명조/금색 없음
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ink:#111114; --ink2:#52525B; --ink3:#A1A1AA; --ink4:#D4D4D8;
  --line:#E7E7EA; --bg:#FFFFFF; --bg2:#FAFAFB;
  --dark:#0B0B0E; --dark2:#17171C;
  --pp:#4820F2; --pp-soft:#EFEBFE;
  --sans:'Noto Sans KR','Pretendard','Malgun Gothic','맑은 고딕',sans-serif;
  --hd:78px;   /* 헤더 높이 */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);
  line-height:1.7;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;
  word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px}
section{scroll-margin-top:var(--hd)}

/* ═══ 대문(gate) ═══ 세션 1회 · 2.2초 뒤 또는 클릭/스크롤/키에 걷힘 ═══ */
.gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--dark);overflow:hidden}
.gate.gone{display:none!important}
/* 걷힐 때 — 페이드가 아니라 「문이 열리듯」 위로 걷힌다. 스크롤 방향과 같은 쪽 */
.gate.out{animation:gateOut .95s cubic-bezier(.65,0,.24,1) forwards;pointer-events:none}
.gate.out .gate-in,.gate.out .gate-hint{animation:gFadeOut .4s ease forwards}
@keyframes gateOut{to{transform:translateY(-100%)}}
@keyframes gFadeOut{to{opacity:0}}
.gate-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.54) saturate(.75);transform:scale(1.06);
  animation:gateZoom 6s ease-out forwards}
@keyframes gateZoom{to{transform:scale(1)}}
.gate-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,14,.62) 0%,rgba(11,11,14,.34) 45%,rgba(11,11,14,.86) 100%)}
.gate-in{position:relative;text-align:center;padding:0 28px}
.gate-logo{height:64px;width:auto;margin:0 auto 36px;
  animation:gRise 1.1s cubic-bezier(.2,.7,.2,1) both}
.gate-tag{font-size:clamp(21px,4.6vw,34px);font-weight:200;color:#fff;
  line-height:1.5;letter-spacing:.01em;
  animation:gRise 1.15s cubic-bezier(.2,.7,.2,1) .18s both}
.gate-tag b{font-weight:600}
.gate-rule{width:42px;height:1px;background:rgba(255,255,255,.42);
  margin:30px auto 0;animation:gFade 1s ease .5s both}
.gate-en{margin-top:26px;font-size:12px;font-weight:400;letter-spacing:.34em;
  color:rgba(255,255,255,.55);animation:gFade 1.2s ease .66s both}
.gate-hint{position:absolute;left:0;right:0;bottom:38px;text-align:center;
  font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.42);
  animation:gFade 1s ease 1.2s both}
.gate-hint span{display:block;margin-top:8px;font-size:16px;animation:gBob 1.8s ease-in-out infinite}
@keyframes gRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes gFade{from{opacity:0}to{opacity:1}}
@keyframes gBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
/* 대문이 떠 있는 동안 본문 스크롤 잠금 */
html.gate-on,html.gate-on body{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .gate-bg,.gate-logo,.gate-tag,.gate-rule,.gate-en,.gate-hint,.gate-hint span{animation:none}
  .gate-bg{transform:none}
}

/* ── 헤더 ──────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:24px;height:var(--hd)}
.brand{display:flex;align-items:center;gap:14px;flex:none}
/* 흰색 로고 원본을 반전해 밝은 헤더에 쓴다 — 검정 잉크 판이 따로 없어서 */
.brand-logo{height:36px;width:auto;filter:invert(1)}
.brand .ko{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.03em;
  padding-left:14px;border-left:1px solid var(--line);line-height:1.15}
nav{margin-left:auto;display:flex;gap:30px;font-size:15px;font-weight:400;color:var(--ink2)}
nav a{padding:6px 0;border-bottom:2px solid transparent;transition:.15s}
nav a:hover{color:var(--pp);border-bottom-color:var(--pp)}
.hd-cta{flex:none;font-size:14px;font-weight:500;background:var(--ink);color:#fff;
  padding:12px 20px;transition:.15s}
.hd-cta:hover{background:var(--pp)}

/* ── 히어로 ────────────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:1fr 40%;min-height:calc(100vh - var(--hd))}
.hero-t{display:flex;flex-direction:column;justify-content:center;
  padding:96px 60px 96px max(40px,calc((100vw - 1180px)/2 + 40px))}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.3em;color:var(--pp);margin-bottom:26px}
.hero h1{letter-spacing:-.045em;margin-bottom:30px}
.hero h1 .l1{display:block;font-size:clamp(21px,2.9vw,36px);font-weight:200;line-height:1.32;color:var(--ink2)}
.hero h1 .l2{display:block;font-size:clamp(30px,4.7vw,52px);font-weight:800;line-height:1.2;margin-top:6px}
.hero .lead{font-size:17.5px;font-weight:300;color:var(--ink2);line-height:1.9;max-width:520px}
.hero-meta{display:flex;gap:14px;margin-top:44px;flex-wrap:wrap}
.hero-meta div{border-left:2px solid var(--pp);padding:2px 0 2px 15px}
.hero-meta b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em}
.hero-meta small{font-size:13px;font-weight:300;color:var(--ink3);letter-spacing:0}
.hero-cta{display:flex;gap:12px;margin-top:46px;flex-wrap:wrap}
.btn{font-size:15px;font-weight:500;padding:16px 30px;transition:.15s;display:inline-block}
.btn-solid{background:var(--pp);color:#fff}
.btn-solid:hover{background:#3612c9}
.btn-ghost{border:1px solid var(--ink4);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:var(--bg2)}
.hero-img{position:relative;overflow:hidden;background:var(--dark)}
.hero-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.04)}

/* ── 판별 선언 밴드 ────────────────────────────────────────── */
.decl{background:var(--dark);color:#fff;padding:62px 0}
.decl .t{font-size:clamp(21px,3vw,30px);font-weight:200;line-height:1.55;letter-spacing:-.03em}
.decl .t b{font-weight:700}
.decl .d{margin-top:18px;font-size:16px;font-weight:300;color:rgba(255,255,255,.6);max-width:640px;line-height:1.85}

/* ── 공통 섹션 ─────────────────────────────────────────────── */
.sec{padding:104px 0;border-bottom:1px solid var(--line)}
.sec.alt{background:var(--bg2)}
.sec-h{font-size:12.5px;font-weight:500;letter-spacing:.3em;color:var(--pp);margin-bottom:20px}
.sec-t{font-size:clamp(25px,3.2vw,36px);font-weight:800;letter-spacing:-.04em;
  line-height:1.35;margin-bottom:16px}
.sec-t span{font-weight:200}
.sec-d{font-size:16.5px;font-weight:300;color:var(--ink2);max-width:660px;line-height:1.9}

/* 하는 일 6 */
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  margin-top:56px;border:1px solid var(--line)}
.cell{background:var(--bg);padding:38px 32px}
.sec.alt .cell{background:var(--bg2)}
.cell .no{font-size:13px;font-weight:800;color:var(--pp);letter-spacing:.08em}
.cell h3{font-size:19px;font-weight:700;margin:14px 0 12px;letter-spacing:-.03em}
.cell p{font-size:15px;font-weight:300;color:var(--ink2);line-height:1.85}
.chips{margin-top:34px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chips .lb{font-size:14px;font-weight:500;color:var(--ink3);margin-right:6px}
.chip{font-size:14px;font-weight:400;border:1px solid var(--line);padding:7px 14px;color:var(--ink2);background:var(--bg)}

/* 진행 5단계 */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:56px}
.step{border-top:2px solid var(--ink);padding-top:20px}
.step .n{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--pp)}
.step h4{font-size:18px;font-weight:700;margin:10px 0 8px;letter-spacing:-.03em}
.step .en{font-size:12px;font-weight:400;letter-spacing:.1em;color:var(--ink3);margin-bottom:10px}
.step p{font-size:14.5px;font-weight:300;color:var(--ink2);line-height:1.8}

/* 사례 */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  margin-top:56px;border:1px solid var(--line)}
.case{background:var(--bg);padding:40px 36px}
.case .loc{font-size:13.5px;font-weight:500;letter-spacing:.16em;color:var(--pp)}
.case h3{font-size:23px;font-weight:800;letter-spacing:-.04em;margin:12px 0 6px}
.case .conv{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:15px;font-weight:500;padding:16px 0;border-bottom:1px solid var(--line);margin-bottom:6px}
.case .conv .from{color:var(--ink3);font-weight:300}
.case .conv .ar{color:var(--pp);font-weight:700}
.case dl{display:grid;grid-template-columns:88px 1fr;gap:0 18px;margin-top:18px}
.case dt{font-size:13px;font-weight:500;color:var(--ink3);padding:11px 0;letter-spacing:.02em}
.case dd{font-size:15px;font-weight:300;color:var(--ink2);padding:11px 0;line-height:1.8;
  border-bottom:1px solid var(--line)}
.case dd b{font-weight:700;color:var(--ink)}
.case dd.q{color:var(--ink2);font-weight:300}
.note{margin-top:26px;font-size:13.5px;font-weight:300;color:var(--ink3);line-height:1.8}

/* ── RECORD (심장) ─────────────────────────────────────────── */
.record{position:relative;background:var(--dark);color:#fff;padding:110px 0;overflow:hidden}
.record .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.44) saturate(.6)}
.record .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,14,.86) 0%,rgba(11,11,14,.66) 50%,rgba(11,11,14,.93) 100%)}
.record .wrap{position:relative}
.record .sec-h{color:#8E75FF}
.record .sec-t{color:#fff}
.record .sec-d{color:rgba(255,255,255,.6)}
.tl{margin-top:58px;border-top:1px solid rgba(255,255,255,.16)}
.tl .r{display:grid;grid-template-columns:132px 1fr 176px;gap:26px;padding:26px 0;
  border-bottom:1px solid rgba(255,255,255,.16);align-items:baseline}
.tl .y{font-size:19px;font-weight:800;color:#8E75FF;letter-spacing:-.02em}
.tl .t{font-size:17.5px;font-weight:300;color:rgba(255,255,255,.95);line-height:1.65}
.tl .t em{font-style:normal;font-weight:500}
.tl .s{font-size:13.5px;font-weight:300;color:rgba(255,255,255,.42);text-align:right}
.rec-close{margin-top:52px;font-size:clamp(19px,2.6vw,26px);font-weight:200;
  line-height:1.7;color:rgba(255,255,255,.92);letter-spacing:-.03em}
.rec-close b{font-weight:700;color:#fff}

/* ── 회사 정보 ─────────────────────────────────────────────── */
.about{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:52px}
.about dl{display:grid;grid-template-columns:104px 1fr;gap:0 16px}
.about dt{font-size:13px;font-weight:500;color:var(--ink3);padding:14px 0;letter-spacing:.04em}
.about dd{font-size:16px;font-weight:300;color:var(--ink);padding:14px 0;
  border-bottom:1px solid var(--line);line-height:1.7}
.about dd a{color:var(--pp)}
.map{background:var(--bg2);border:1px solid var(--line);min-height:280px;
  display:grid;place-items:center;text-align:center;padding:34px}
.map p{font-size:14px;font-weight:300;color:var(--ink3);line-height:1.9}
.map b{display:block;font-size:16px;font-weight:500;color:var(--ink2);margin-bottom:10px}

/* ── 문의 폼 ───────────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;margin-top:52px}
.form-why li{list-style:none;padding:16px 0;border-bottom:1px solid var(--line);
  font-size:15.5px;font-weight:300;color:var(--ink2);line-height:1.8;display:flex;gap:14px}
.form-why li b{flex:none;font-weight:800;color:var(--pp);font-size:13px;padding-top:4px}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f{margin-bottom:16px}
.f label{display:block;font-size:13.5px;font-weight:500;color:var(--ink2);margin-bottom:8px}
.f label i{font-style:normal;color:var(--pp);margin-left:3px}
.f input,.f select,.f textarea{width:100%;font-family:var(--sans);font-size:16px;font-weight:300;
  color:var(--ink);background:var(--bg);border:1px solid var(--ink4);padding:14px 15px;
  transition:.15s;border-radius:0;-webkit-appearance:none;appearance:none}
.f select{background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--pp);box-shadow:0 0 0 3px var(--pp-soft)}
.f textarea{min-height:118px;resize:vertical;line-height:1.75}
.agree{display:flex;gap:11px;align-items:flex-start;margin:22px 0 8px;
  font-size:14px;font-weight:300;color:var(--ink2);line-height:1.7}
.agree input{flex:none;width:18px;height:18px;margin-top:3px;accent-color:var(--pp)}
.agree a{color:var(--pp);text-decoration:underline}
.submit{width:100%;font-family:var(--sans);font-size:16px;font-weight:600;color:#fff;
  background:var(--pp);border:0;padding:19px;cursor:pointer;transition:.15s;margin-top:12px}
.submit:hover{background:#3612c9}
.form-foot{margin-top:16px;font-size:13.5px;font-weight:300;color:var(--ink3);line-height:1.8}

/* ── 푸터 ──────────────────────────────────────────────────── */
footer{background:var(--dark);color:rgba(255,255,255,.62);padding:62px 0 44px;font-weight:300}
.f-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
  padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.14)}
.f-logo{height:38px;width:auto}
.f-links{display:flex;gap:26px;font-size:14.5px;align-items:center}
.f-links a:hover{color:#fff}
.f-info{margin-top:30px;font-size:14px;line-height:2.05}
.f-info b{font-weight:500;color:rgba(255,255,255,.88)}
.f-note{margin-top:24px;font-size:13.5px;color:rgba(255,255,255,.38);line-height:1.85}

/* ── 모바일 섹션 이동 띠 (데스크톱 nav 대체) ─────────────── */
.mnav{display:none;position:sticky;top:var(--hd);z-index:49;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch}
.mnav::-webkit-scrollbar{display:none}
.mnav ul{display:flex;gap:6px;list-style:none;padding:11px 20px;white-space:nowrap;min-width:max-content}
.mnav a{display:inline-block;font-size:14px;font-weight:400;color:var(--ink2);
  border:1px solid var(--line);padding:8px 15px;background:var(--bg)}

/* ── 반응형 ────────────────────────────────────────────────── */
/* ═══ 무료 검토 리포트 — 인바운드 진입점 ═══
   사이트에서 유일하게 「받아 가는 것」이 있는 자리. 브랜드 퍼플 틴트로 한 곳만 띄운다. */
.offer{background:var(--pp-soft);padding:96px 0;border-bottom:1px solid var(--line)}
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.offer h2{font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.04em;
  line-height:1.35;margin-bottom:22px}
.offer h2 span{font-weight:200}
.offer .d{font-size:16.5px;font-weight:300;color:var(--ink2);line-height:1.9}
.offer .d b{font-weight:600;color:var(--ink)}
.offer-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.offer .btn-ghost{border-color:#C6B9FA;background:rgba(255,255,255,.55)}
.offer .btn-ghost:hover{border-color:var(--pp);background:#fff}

.offer-r{background:var(--bg);padding:36px 34px}
.offer-r .lb{font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--pp);
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.offer-list{list-style:none}
.offer-list li{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.offer-list li b{font-size:12.5px;font-weight:800;color:var(--ink3);letter-spacing:.06em;
  flex:0 0 auto;padding-top:3px}
.offer-list h4{font-size:16px;font-weight:700;letter-spacing:-.03em;margin-bottom:5px}
.offer-list p{font-size:14.5px;font-weight:300;color:var(--ink2);line-height:1.8}
.offer-note{margin-top:18px;font-size:13px;font-weight:300;color:var(--ink3);line-height:1.8}

@media(max-width:1000px){
  .wrap{padding:0 26px}
  .offer{padding:70px 0}
  .offer-grid{grid-template-columns:1fr;gap:40px}
  nav{display:none}
  .hd-cta{margin-left:auto}   /* nav가 숨으면 CTA를 오른쪽 끝으로 */
  .mnav{display:block}
  section{scroll-margin-top:calc(var(--hd) + 52px)}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-t{padding:64px 26px 56px;order:2}
  .hero-img{order:1;height:46vw;max-height:400px}
  .grid6{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr 1fr 1fr}
  .cases{grid-template-columns:1fr}
  .about,.form-grid{grid-template-columns:1fr;gap:44px}
}
@media(max-width:680px){
  :root{--hd:64px}
  .wrap{padding:0 20px}
  .hd-cta{padding:11px 15px;font-size:13px}
  .brand .ko{font-size:16px;padding-left:10px}
  .brand-logo{height:28px}
  .brand{gap:10px}
  .sec{padding:70px 0}
  .hero-t{padding:52px 20px 48px}
  .hero-meta{gap:10px 20px}
  .grid6{grid-template-columns:1fr}
  .cell{padding:30px 24px}
  .flow{grid-template-columns:1fr;gap:0}
  .step{border-top:1px solid var(--line);padding:22px 0}
  .step:first-child{border-top:2px solid var(--ink)}
  .offer{padding:58px 0}
  .offer-r{padding:26px 22px}
  .offer-cta .btn{flex:1 1 100%;text-align:center}
  .case{padding:32px 24px}
  .case dl{grid-template-columns:78px 1fr;gap:0 12px}
  .record{padding:76px 0}
  .tl .r{grid-template-columns:1fr;gap:5px;padding:20px 0}
  .tl .s{text-align:left}
  .about dl{grid-template-columns:88px 1fr}
  form .row{grid-template-columns:1fr;gap:0}
  .f-top{flex-direction:column;align-items:flex-start;gap:24px}
}
.보냄{padding:48px 24px;text-align:center}
.보냄 h3{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-bottom:10px}
.보냄 p{color:var(--ink2);font-size:15px}

/* ═══════════════════════════════════════════════════════════════
   히어로 주소칸 · 조회 결과 (2026-09-02)
   🔴 별도 문서였던 도착지를 이 문서 안으로 들였다. 설계 근거 = 설계.md §2
   ═══════════════════════════════════════════════════════════════ */
.숨{display:none !important}

/* ── 히어로 안의 주소칸 — 스크롤 없이 보여야 한다 ── */
.찾기{margin-top:42px;max-width:560px}
.찾기 label{display:block;font-size:13px;font-weight:700;letter-spacing:.02em;
  color:var(--ink2);margin-bottom:9px}
.찾기줄{display:flex;gap:8px}
.찾기줄 input{flex:1;min-width:0;font-family:var(--sans);font-size:16px;font-weight:400;
  color:var(--ink);background:var(--bg);border:1px solid var(--ink4);
  padding:15px 16px;transition:.15s}
.찾기줄 input:focus{outline:none;border-color:var(--pp);box-shadow:0 0 0 3px var(--pp-soft)}
.찾기줄 input::placeholder{color:var(--ink3);font-weight:300}
.찾기줄 .btn{flex:none;padding:15px 20px}
.찾기귀띔{font-size:13.5px;font-weight:300;color:var(--ink3);line-height:1.75;margin-top:10px}
.찾기귀띔 b{font-weight:500;color:var(--ink2)}
.찾기곁{font-size:14px;color:var(--ink2);margin-top:16px}
.찾기곁 a{color:var(--pp);font-weight:500;text-decoration:none}
.찾기곁 a:hover{text-decoration:underline}

/* 주소 후보 */
.고르기{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.고르기 button{font-family:var(--sans);text-align:left;font-size:15px;font-weight:500;
  color:var(--ink);background:var(--bg);border:1px solid var(--line);
  padding:13px 15px;cursor:pointer;transition:.12s}
.고르기 button:hover{border-color:var(--pp);background:var(--pp-soft)}
.고르기 .작은줄{display:block;font-size:13px;font-weight:300;color:var(--ink3);margin-top:3px}

/* ── 조회 결과 ── */
.결과칸{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.결과h{font-size:18px;font-weight:700;letter-spacing:-.03em;margin:44px 0 16px}
.결과h:first-of-type{margin-top:32px}

.사실{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.사실 .줄{display:flex;gap:14px;align-items:baseline;background:var(--bg);padding:15px 18px}
.사실 dt{flex:none;width:92px;font-size:13px;font-weight:500;color:var(--ink3)}
.사실 dd{font-size:16px;font-weight:500;color:var(--ink);letter-spacing:-.02em}
.사실 .작은줄{display:block;font-size:12.5px;font-weight:300;color:var(--ink3);margin-top:3px;letter-spacing:0}

.짚기{list-style:none;display:flex;flex-direction:column;gap:12px}
.짚기 li{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--pp);
  padding:17px 20px}
.짚기 b{display:block;font-size:16px;font-weight:700;letter-spacing:-.025em;margin-bottom:6px}
.짚기 p{font-size:14.5px;font-weight:300;color:var(--ink2);line-height:1.8}

.결과단추{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.각주{font-size:13px;font-weight:300;color:var(--ink3);line-height:1.8;margin-top:14px}
.각주 b{font-weight:500;color:var(--ink2)}

@media(max-width:680px){
  .찾기{margin-top:32px}
  .찾기줄{flex-direction:column}
  .찾기줄 .btn{width:100%;justify-content:center;text-align:center}
  .사실{grid-template-columns:1fr}
  .결과단추 .btn{width:100%;justify-content:center;text-align:center}
}

/* ═══════════════════════════════════════════════════════════════
   카카오톡 오픈채팅 (2026-09-02)
   ★ 왜 강조하나 — **유일하게 검증된 채널**이다. 8/29 회의록: 그 방(222명)을 통해
     실제 문의가 들어왔다. 그리고 어르신에게 웹폼은 벽이지만 카톡은 이미 쓰는 도구다
     (컨셉기획서 §6). 위계가 폼보다 낮을 이유가 없다.
   ⚠️ 카카오 공식 로고를 복제하지 않는다 — 상표다. 색과 말은 쓰되 아이콘은 우리가 그린다.
   ═══════════════════════════════════════════════════════════════ */
:root{ --kko:#FEE500; --kko-ink:#191600; }

.카톡버튼{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--kko);color:var(--kko-ink);font-family:var(--sans);
  font-size:15.5px;font-weight:700;letter-spacing:-.02em;
  padding:15px 22px;border:none;cursor:pointer;text-decoration:none;transition:.15s}
.카톡버튼:hover{filter:brightness(.95)}
.카톡버튼 svg{flex:none;width:19px;height:19px;fill:currentColor}
.카톡버튼 .작게{display:block;font-size:12.5px;font-weight:400;opacity:.72;margin-top:2px;letter-spacing:0}

/* 히어로·결과에서 폼 옆에 나란히 */
.카톡곁{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.카톡곁 .말{font-size:14px;font-weight:300;color:var(--ink2);line-height:1.7}
.카톡곁 .말 b{font-weight:500;color:var(--ink)}

/* 문의 섹션 — 폼 위에 통째로 하나 */
.카톡카드{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:var(--kko);padding:24px 26px;margin-bottom:26px}
.카톡카드 .글{flex:1;min-width:230px}
.카톡카드 h3{font-size:19px;font-weight:800;letter-spacing:-.035em;color:var(--kko-ink);margin-bottom:7px}
.카톡카드 p{font-size:14.5px;font-weight:400;color:var(--kko-ink);opacity:.78;line-height:1.75}
.카톡카드 .카톡버튼{background:var(--kko-ink);color:var(--kko);flex:none}
.카톡카드 .카톡버튼:hover{filter:brightness(1.35)}

/* 늘 떠 있는 단추 — 어느 자리에서 마음이 움직여도 바로 누를 수 있게 */
.카톡뜨기{position:fixed;right:20px;bottom:20px;z-index:60;
  box-shadow:0 6px 22px rgba(0,0,0,.22);border-radius:999px;padding:14px 20px}
.카톡뜨기 .긴말{display:inline}
@media(max-width:680px){
  .카톡뜨기{right:14px;bottom:14px;padding:13px 16px;font-size:14.5px}
  .카톡뜨기 .긴말{display:none}
  .카톡카드{padding:20px}
  .카톡카드 .카톡버튼{width:100%}
}
@media print{ .카톡뜨기{display:none} }