/* 검사모아 공통 스타일
   글꼴: Pretendard (국내 서비스에서 가장 널리 쓰는 본문·제목용 글꼴)
   톤: 넉넉한 여백, 굵은 제목, 회색 면으로 구역 구분, 테두리 대신 면 */

:root{
  --bg:#ffffff; --bg-soft:#f5f7f8; --surface:#ffffff;
  --ink:#191f28; --ink-2:#4e5968; --ink-3:#8b95a1; --line:#e5e8eb;
  --brand:#0a7c6b; --brand-strong:#07614f; --brand-ink:#ffffff; --brand-soft:#e7f4f1;
  --warn:#c2410c; --warn-soft:#fff1e8;
  --radius:20px;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --shadow:0 2px 12px rgba(25,31,40,.06);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121417; --bg-soft:#1a1d21; --surface:#202328;
  --ink:#f2f4f6; --ink-2:#b0b8c1; --ink-3:#7e8792; --line:#2c3035;
  --brand:#3cc4ac; --brand-strong:#5fd4bf; --brand-ink:#06201b; --brand-soft:#15302b;
  --warn:#fb923c; --warn-soft:#35200f; --shadow:none;
}}
:root[data-theme="dark"]{
  --bg:#121417; --bg-soft:#1a1d21; --surface:#202328;
  --ink:#f2f4f6; --ink-2:#b0b8c1; --ink-3:#7e8792; --line:#2c3035;
  --brand:#3cc4ac; --brand-strong:#5fd4bf; --brand-ink:#06201b; --brand-soft:#15302b;
  --warn:#fb923c; --warn-soft:#35200f; --shadow:none;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;word-break:keep-all;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
h1,h2,h3{letter-spacing:-.03em;line-height:1.3;text-wrap:balance}
a{color:inherit}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1080px;margin:0 auto;padding-inline:24px}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}

/* ── 헤더 ─────────────────────────── */
.header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.8) blur(12px);-webkit-backdrop-filter:saturate(1.8) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.header.scrolled{border-bottom-color:var(--line)}
.header .wrap{display:flex;align-items:center;gap:40px;height:64px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px;letter-spacing:-.04em;text-decoration:none;color:var(--ink)}
/* 로고: "검"의 ㄱ을 단순화한 모양 + 민트색 점 (logo.svg와 같은 그림) */
.logo-mark{width:30px;height:30px;flex:none;background:url("logo.svg") center/contain no-repeat}
.logo b{color:var(--brand);font-weight:800}
.gnb{display:flex;gap:4px;flex:1}
.gnb a{padding:8px 14px;border-radius:10px;font-size:16px;font-weight:600;color:var(--ink-2);text-decoration:none;transition:background .15s,color .15s}
.gnb a:hover{background:var(--bg-soft);color:var(--ink)}
.gnb a[aria-current="page"]{color:var(--ink)}
.header-cta{display:flex;align-items:center;gap:8px}
.menu-btn{display:none;width:44px;height:44px;border:0;background:transparent;border-radius:10px;cursor:pointer;color:var(--ink)}
.menu-btn svg{width:24px;height:24px}
.mobile-menu{display:none}

/* ── 버튼 ─────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--brand);color:var(--brand-ink);border:0;border-radius:14px;padding:0 24px;height:56px;font:700 17px var(--font);cursor:pointer;text-decoration:none;transition:background .15s,transform .1s;white-space:nowrap}
.btn:hover{background:var(--brand-strong)}
.btn:active{transform:scale(.98)}
.btn.sm{height:40px;padding:0 16px;font-size:15px;border-radius:10px}
.btn.soft{background:var(--brand-soft);color:var(--brand)}
.btn.soft:hover{background:var(--brand-soft);filter:brightness(.97)}
.btn.ghost{background:var(--bg-soft);color:var(--ink)}
.btn.ghost:hover{filter:brightness(.97)}
.btn.block{width:100%}
.btn:disabled{opacity:.6;cursor:default}

/* ── 공통 구역 ─────────────────────── */
.section{padding-block:96px}
.section.soft{background:var(--bg-soft)}
.eyebrow{display:inline-block;font-size:15px;font-weight:700;color:var(--brand);margin-bottom:12px}
.title{font-size:clamp(28px,4vw,40px);font-weight:800}
.lead{font-size:clamp(17px,2vw,20px);color:var(--ink-2);margin-top:14px;max-width:34em}
.head{margin-bottom:48px}
.head.center{text-align:center}
.head.center .lead{margin-inline:auto}

/* ── 홈 히어로 ─────────────────────── */
.hero{padding-block:88px 72px}
.hero h1{font-size:clamp(34px,5.6vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1.25}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero .lead{margin-top:20px;font-size:clamp(18px,2.2vw,21px)}
.services{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.service{display:flex;flex-direction:column;gap:10px;padding:32px;border-radius:24px;background:var(--bg-soft);text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}
.service:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.service .tag{align-self:flex-start;font-size:13px;font-weight:700;color:var(--brand);background:var(--brand-soft);padding:4px 10px;border-radius:999px}
.service h3{font-size:24px;font-weight:800;margin-top:6px}
.service p{color:var(--ink-2);font-size:16px}
.service .arrow{margin-top:14px;font-weight:700;color:var(--brand);font-size:16px}
.soon{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:20px;font-size:15px;color:var(--ink-3)}
.soon b{color:var(--ink-2);font-weight:600;margin-right:4px}
.soon span{padding:4px 12px;border-radius:999px;background:var(--bg-soft)}

/* ── 장점 ─────────────────────────── */
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.point{background:var(--surface);border-radius:var(--radius);padding:32px}
.point .ic{width:48px;height:48px;border-radius:14px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin-bottom:20px}
.point .ic svg{width:24px;height:24px}
.point h3{font-size:20px;font-weight:700;margin-bottom:8px}
.point p{color:var(--ink-2);font-size:16px}

/* ── 이용 순서 ─────────────────────── */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:f}
.flow li{list-style:none;counter-increment:f;padding:32px;border-radius:var(--radius);background:var(--bg-soft)}
.flow li::before{content:counter(f);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--bg);font-weight:700;font-size:15px;margin-bottom:20px}
.flow h3{font-size:20px;font-weight:700;margin-bottom:8px}
.flow p{color:var(--ink-2);font-size:16px}
ol.flow{padding:0;margin:0}

/* ── FAQ ───────────────────────────── */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:24px 4px;font-weight:700;font-size:18px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg) translateY(-3px);transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq details p{padding:0 4px 24px;color:var(--ink-2)}
.more{text-align:center;margin-top:32px}

/* ── 배너 ─────────────────────────── */
.banners{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.banner{display:flex;flex-direction:column;gap:8px;padding:32px;border-radius:var(--radius);background:var(--surface);text-decoration:none;color:var(--ink)}
.banner h3{font-size:20px;font-weight:700}
.banner p{color:var(--ink-2);font-size:16px;flex:1}
.banner .arrow{color:var(--brand);font-weight:700;margin-top:12px}

.cta-band{text-align:center;padding-block:88px}
.cta-band .title{margin-bottom:28px}

/* ── 서비스 페이지(계산기) ───────────── */
.page-head{padding-block:64px 32px}
.page-head h1{font-size:clamp(30px,4.4vw,44px);font-weight:800}
.page-head .lead{margin-top:12px}
.tool{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start;padding-bottom:96px}
.panel{background:var(--bg-soft);border-radius:24px;padding:36px}
.q{display:block;font-weight:700;font-size:18px;margin-bottom:14px}
.q small{display:block;font-weight:500;color:var(--ink-3);font-size:14px;margin-top:2px}
.q + .choices,.q + .row{margin-bottom:36px}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.choices.two{grid-template-columns:1fr 1fr}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.choice span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:56px;padding:10px;border-radius:14px;background:var(--surface);font-weight:600;font-size:16px;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .15s,color .15s,background .15s}
.choice input:checked + span{box-shadow:inset 0 0 0 2px var(--brand);color:var(--brand);background:var(--brand-soft)}
.choice input:focus-visible + span{outline:3px solid var(--brand);outline-offset:2px}
.row{display:flex;align-items:center;gap:12px;max-width:320px}
.row em{font-style:normal;font-weight:700;flex:none;color:var(--ink-2)}
input[type=number],input[type=text],input[type=tel],input[type=email],input[type=date],textarea{font:17px var(--font);color:var(--ink);background:var(--surface);border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:14px;padding:0 18px;height:56px;width:100%;transition:box-shadow .15s}
textarea{height:auto;min-height:110px;padding:16px 18px;resize:vertical}
input:focus,textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--brand)}
.hint{font-size:15px;color:var(--ink-3);margin-top:-26px;margin-bottom:26px}

.result{position:sticky;top:88px;background:var(--surface);border-radius:24px;padding:32px;box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
/* 두 줄짜리 선택지 (측정 종류) */
.kinds .choice span{flex-direction:column;gap:2px;min-height:72px;padding:12px}
.kinds .choice b{font-size:16px;color:var(--ink)}
.kinds .choice small{font-size:13px;font-weight:500;color:var(--ink-3)}
.kinds .choice input:checked + span b{color:var(--brand)}
/* 주소로 연면적 찾기 */
.addr{margin:-14px 0 36px}
.addr-btn{height:60px;font-size:16px;font-weight:700;box-shadow:inset 0 0 0 1.5px var(--brand)}
.addr-btn svg{width:20px;height:20px;flex:none}
.addr-btn:hover{background:var(--brand);color:var(--brand-ink)}
.addr-out{margin-top:14px;background:var(--surface);border-radius:14px;padding:16px 18px;box-shadow:inset 0 0 0 1px var(--line)}
.addr-msg{font-size:14px;color:var(--ink-2);line-height:1.6}
.addr-msg b{color:var(--ink)}
.addr-note{font-size:13px;color:var(--ink-3);margin-top:10px;line-height:1.6}
/* 개인정보 동의 */
.consent{display:flex;flex-direction:column;gap:10px;background:var(--surface);border-radius:14px;padding:16px 18px;box-shadow:inset 0 0 0 1px var(--line)}
.consent .agree.all{padding-bottom:12px;border-bottom:1px solid var(--line);color:var(--ink)}
.consent-item{display:flex;flex-direction:column;gap:4px}
.consent-item details{margin-left:32px;font-size:13px;color:var(--ink-3)}
.consent-item summary{cursor:pointer;font-weight:600;color:var(--ink-3);width:max-content}
.consent-item details p{margin-top:6px;line-height:1.6}
.consent-tbl{width:100%;border-collapse:collapse;margin-top:8px}
.consent-tbl th,.consent-tbl td{text-align:left;vertical-align:top;padding:6px 8px;border-top:1px solid var(--line);font-weight:500}
.consent-tbl th{width:84px;color:var(--ink-2);font-weight:700;white-space:nowrap}
.consent-link{font-size:13px;margin-top:2px}
.consent-link a{color:var(--brand);font-weight:600}
.addr-warn{display:flex;gap:12px;align-items:flex-start;background:var(--warn-soft);border-radius:14px;padding:16px;margin-top:14px}
.addr-warn .w-ic{flex:none;width:26px;height:26px;border-radius:50%;background:var(--warn);color:#fff;font-weight:800;font-size:16px;display:grid;place-items:center}
.addr-warn b{display:block;font-size:16px;color:var(--warn);margin-bottom:4px}
.addr-warn p{font-size:14px;color:var(--ink-2);line-height:1.6;margin-bottom:12px}
.addr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:14px;color:var(--ink-2)}
.addr-head b{display:block;color:var(--ink);font-size:15px}
.addr-head .opt{display:block;margin-top:2px}
.addr-picked{display:flex;justify-content:space-between;align-items:center;gap:12px}
.addr-picked b{display:block;font-size:16px}
.addr-picked span{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
button.link{background:none;border:0;padding:6px 4px;font:600 14px var(--font);color:var(--brand);cursor:pointer;flex:none}
button.link:hover{text-decoration:underline}
.bld-filter{height:44px;margin-top:12px;font-size:15px}
.bld{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto}
.bld button{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:var(--bg-soft);border:0;box-shadow:inset 0 0 0 1px transparent;border-radius:12px;padding:12px 14px;cursor:pointer;font:inherit}
.bld button:hover{box-shadow:inset 0 0 0 1px var(--border-strong)}
.bld button.on{background:var(--brand-soft);box-shadow:inset 0 0 0 2px var(--brand)}
.bld button b{font-size:15px;font-weight:700}
.bld button span{font-size:13px;color:var(--ink-3)}
.bld button.on span{color:var(--brand)}
.period{font-size:15px;color:var(--ink-2);background:var(--bg-soft);border-radius:12px;padding:12px 14px;margin-bottom:18px}
.period b{color:var(--ink)}
.period.on{background:var(--brand-soft);color:var(--brand)}
.period.on b{color:var(--brand)}
.period.over{background:var(--warn-soft);color:var(--warn)}
.when-note{font-size:14px;color:var(--ink-3);margin-top:10px}
.when-date{margin-top:14px}
#workAreaBox{margin-bottom:36px}
#workAreaBox .row{margin-bottom:14px}
.eco{font-size:15px}
.extra{background:var(--bg-soft);border-radius:14px;padding:16px 18px;margin:14px 0 16px;font-size:14px;color:var(--ink-2)}
.extra b{display:block;color:var(--ink);font-size:15px;margin-bottom:8px}
.extra ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.extra li span{font-weight:700;color:var(--ink);white-space:nowrap}
.extra p{margin-top:10px}
.price-wait{color:var(--ink-3);font-size:15px;font-weight:600;padding:8px 0}
.breakdown{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0 10px;color:var(--ink-2)}
.breakdown td{padding:6px 0;border-bottom:1px dashed var(--line)}
.breakdown td:last-child{text-align:right;font-weight:600}

/* 판정 박스: 결과 카드 맨 위에서 가장 먼저 보이는 결론 */
.verdict{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:16px;margin-bottom:22px}
.verdict .v-ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff}
.verdict .v-ic svg{width:24px;height:24px}
.verdict strong{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.3}
.verdict span:not(.v-ic){display:block;font-size:15px;margin-top:4px;color:var(--ink-2)}
/* 대상 = 초록(브랜드색), 비대상 = 주황, 기한 지남 = 주황 */
.verdict.yes{background:var(--brand-soft)}
.verdict.yes .v-ic{background:var(--brand)}
.verdict.yes strong{color:var(--brand)}
.verdict.no,.verdict.late{background:var(--warn-soft)}
.verdict.no .v-ic,.verdict.late .v-ic{background:var(--warn)}
.verdict.no strong,.verdict.late strong{color:var(--warn)}
.verdict.info{background:var(--bg-soft)}
.verdict.info .v-ic{background:var(--ink-2)}
.verdict.wait{background:var(--bg-soft)}
.verdict.wait .v-ic{background:var(--line);color:var(--ink-2)}
.verdict.wait strong{color:var(--ink-2)}
.verdict + h3{margin-top:0!important}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;padding:6px 12px;border-radius:999px}
.badge.yes{background:var(--warn-soft);color:var(--warn)}
.badge.no{background:var(--brand-soft);color:var(--brand)}
.result h3{font-size:20px;font-weight:700;margin:14px 0 18px}
.todo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.todo li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.todo .when{flex:none;font-size:13px;font-weight:700;color:var(--ink-2);background:var(--bg-soft);border-radius:8px;padding:3px 9px;margin-top:2px}
.todo small{display:block;color:var(--ink-3);font-size:14px;font-weight:500}
.divider{height:1px;background:var(--line);margin:24px 0}
.price-lbl{font-size:14px;color:var(--ink-3);font-weight:600}
.price{font-size:clamp(30px,4vw,38px);font-weight:800;letter-spacing:-.03em;margin:4px 0}
.price-note{font-size:14px;color:var(--ink-3);margin-bottom:20px}
.deadline{font-size:clamp(34px,5vw,44px);font-weight:800;color:var(--warn);letter-spacing:-.03em}
.result .hint{margin:4px 0 0}
.disclaimer{font-size:13px;color:var(--ink-3);margin-top:16px}

/* ── 신청서 ───────────────────────── */
.form-wrap{max-width:720px;margin:0 auto;padding-bottom:96px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form label{display:flex;flex-direction:column;gap:8px;font-weight:700;font-size:15px}
.form .full{grid-column:1/-1}
.form fieldset{border:0;margin:0;padding:0}
.form legend{font-weight:700;font-size:15px;margin-bottom:10px;padding:0}
.opt{font-weight:500;color:var(--ink-3);font-size:13px}
.summary{grid-column:1/-1;background:var(--brand-soft);color:var(--ink);border-radius:14px;padding:16px 18px;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.summary .edit{flex:none;font-size:14px;font-weight:700;color:var(--brand);text-decoration:none;padding:6px 12px;border-radius:8px;background:var(--surface)}
.agree{flex-direction:row!important;align-items:center;gap:10px!important;font-weight:500!important;color:var(--ink-2)}
.agree input{width:22px;height:22px;accent-color:var(--brand);flex:none}
.done{grid-column:1/-1;text-align:center;padding:32px;background:var(--brand-soft);border-radius:20px}
.done strong{display:block;font-size:20px;margin-bottom:4px}
.error{grid-column:1/-1;font-size:15px;color:var(--warn);background:var(--warn-soft);border-radius:12px;padding:12px 16px}
.boxes{display:flex;flex-wrap:wrap;gap:8px}
.box{display:flex!important;flex-direction:row!important;align-items:center;gap:8px!important;border-radius:12px;padding:0 16px;height:48px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-weight:600!important;font-size:15px!important;color:var(--ink-2);cursor:pointer}
.box input{width:18px;height:18px;accent-color:var(--brand);margin:0}
.box:has(input:checked){box-shadow:inset 0 0 0 2px var(--brand);color:var(--brand);background:var(--brand-soft)}
.hp{position:absolute;left:-9999px;width:1px;height:1px}

/* ── 입점 페이지 ───────────────────── */
.rules{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;max-width:760px}
.rules li{display:flex;gap:14px;padding:20px 4px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.rules li b{color:var(--ink)}
.rules li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;background:var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a7c6b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat}

/* ── 푸터 ─────────────────────────── */
.footer{background:var(--bg-soft);padding-block:48px 120px;color:var(--ink-3);font-size:14px}
.footer .wrap{display:flex;flex-direction:column;gap:16px}
.footer .links{display:flex;gap:20px;flex-wrap:wrap;font-weight:600;color:var(--ink-2)}
.footer .links a{text-decoration:none}
.footer address{font-style:normal;line-height:1.8}

.sticky-cta{display:none}

/* ── 모바일 ───────────────────────── */
@media (max-width:860px){
  body{font-size:16px}
  .wrap{padding-inline:20px}
  .gnb,.header-cta .btn{display:none}
  .header .wrap{justify-content:space-between}
  .menu-btn{display:grid;place-items:center}
  .mobile-menu{display:block;position:fixed;inset:64px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 20px 20px;z-index:19}
  .mobile-menu a{display:block;padding:14px 4px;font-size:18px;font-weight:700;text-decoration:none;border-bottom:1px solid var(--line)}
  .mobile-menu a:last-child{border:0}
  .section{padding-block:64px}
  .hero{padding-block:48px 56px}
  .services,.points,.flow,.banners,.tool,.form{grid-template-columns:1fr}
  .choices{grid-template-columns:1fr 1fr}
  .choices.two{grid-template-columns:1fr}
  .panel,.result{padding:24px}
  .result{position:static}
  .service{padding:28px}
  .sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:15;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));background:var(--bg);border-top:1px solid var(--line)}
}