/* AXB 홈페이지 — 2026-10 개편 스타일
 * 방향: 제조 현장의 관리 대장. 카드 나열 대신 괘선으로 나눈 목록·표, 다크 강철 바탕에 브랜드 오커 1색.
 * 회사 심벌(마크·상호·태그라인·마스코트) 규칙은 2026-09-05 확정본을 그대로 옮겼다(§머리글).
 */

/* ── 1. 토큰 ─────────────────────────────────────────────── */
:root {
    color-scheme: dark;
    --bg: #07090E;
    --bg-raised: #0D121B;
    --bg-sunken: #05070B;
    --line: #1E2633;
    --line-strong: #2E3846;
    --field-line: #6B7A90;          /* 입력칸 테두리 — 배경 대비 4.1:1 */
    --ink: #EEF0F3;
    --ink-2: #C3CAD4;
    --ink-3: #96A1B0;               /* 배경 대비 7.4:1 */
    --accent: #D97742;              /* 브랜드 오커 */
    --accent-ink: #E89A6B;          /* 어두운 바탕 위 글자용 오커 */
    --accent-wash: rgb(217 119 66 / 0.10);
    --on-accent: #231206;
    --ok: #34D399;
    --ok-wash: rgb(52 211 153 / 0.10);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.55);
    --logo-ink: #E9E6E0;
    --logo-sub: #A8A39C;
    --radius: 10px;
    --container: 1160px;
    --font: 'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #FAF7F2;
    --bg-raised: #FFFFFF;
    --bg-sunken: #F3EFE7;
    --line: #E4DED3;
    --line-strong: #CFC6B8;
    --field-line: #8C8273;
    --ink: #1A1E23;
    --ink-2: #3A424A;
    --ink-3: #5A6570;
    --accent: #9A4310;
    --accent-ink: #9A4310;
    --accent-wash: #F8EFE7;
    --on-accent: #FFFFFF;
    --ok: #0F6B45;
    --ok-wash: #E7F4EC;
    --shadow: 0 1px 2px rgb(60 45 25 / 0.14);
    --logo-ink: #23282D;
    --logo-sub: #5A6169;
}

/* ── 2. 바탕 ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--bg); color: var(--ink-2);
    font-family: var(--font); font-size: 16px; line-height: 1.75;
    word-break: keep-all; overflow-wrap: break-word; overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--on-accent); }
img, video, svg { display: block; max-width: 100%; }
a { color: var(--accent-ink); text-underline-offset: 3px; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.32; margin: 0; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 10px 16px; background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; }
.skip-link:focus { left: 0; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html { scrollbar-color: var(--line-strong) var(--bg); }

/* ── 3. 버튼 ─────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 22px; border-radius: 8px; border: 1px solid transparent;
    font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out);
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-ink); }
:root[data-theme="light"] .btn-primary:hover { background: #7A3409; }
.btn-line { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-line:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ── 4. 머리글 (회사 심벌 규칙 — styles.css §5·§25 에서 그대로 옮김) ── */
.header { position: fixed; inset: 0 0 auto 0; z-index: 100; background: rgb(7 9 14 / 0.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
:root[data-theme="light"] .header { background: rgb(250 247 242 / 0.94); }
.nav-container { height: 76px; display: flex; align-items: center; gap: 16px; }
.brand-corner { display: flex; align-items: center; gap: 16px; min-width: 0; margin-right: auto; }
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; color: inherit; }
.logo-icon, .axb-mark { color: var(--accent); flex: none; }
.logo-icon { width: 40px; height: 40px; }
.logo-lockup { display: flex; flex-direction: column; justify-content: center; line-height: 1; position: relative; }
.brand-mascot { position: absolute; right: 6.4px; bottom: 8px; display: block; pointer-events: auto; z-index: 1; }
.logo-sub { font-family: monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.8px; color: var(--logo-sub); text-transform: uppercase; margin-top: 3px; white-space: nowrap; }
.logo:hover .logo-sub { color: var(--accent); }
.logo-text { font-family: 'Outfit', var(--font); color: var(--logo-ink); font-size: 26px; font-weight: 900; letter-spacing: 0.0754em; margin-right: -0.0754em; line-height: 1; transform: translateY(-0.0106em); white-space: nowrap; }
.logo-text span { color: var(--accent); margin-left: -0.089em; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav-link { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; }
.nav-link:hover { color: var(--accent-ink); }
.theme-toggle {
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; min-height: 40px; padding: 0 13px;
    border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink-3);
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.theme-toggle:hover { color: var(--accent-ink); border-color: var(--accent-ink); }
.theme-toggle .tt-face { display: none; align-items: center; gap: 7px; }
:root[data-theme="dark"] .theme-toggle .tt-to-light,
:root:not([data-theme]) .theme-toggle .tt-to-light { display: inline-flex; }
:root[data-theme="light"] .theme-toggle .tt-to-dark { display: inline-flex; }
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; }
.nav-toggle .ico { width: 22px; height: 22px; }

@media (max-width: 1100px) {
    .nav-toggle { display: inline-flex; }
    .theme-toggle .tt-label { display: none; }
    .theme-toggle { width: 44px; height: 44px; padding: 0; justify-content: center; }
    .nav {
        display: none; position: absolute; top: 76px; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--bg); border-bottom: 1px solid var(--line);
        padding: 8px 24px 24px; max-height: calc(100dvh - 76px); overflow-y: auto;
        box-shadow: var(--shadow);
    }
    .nav.open { display: flex; }
    .nav .nav-link { padding: 15px 2px; border-bottom: 1px solid var(--line); font-size: 17px; }
    .nav .btn { margin-top: 18px; }
}
@media (max-width: 768px) {
    .nav-container { height: 64px; }
    .nav { top: 64px; max-height: calc(100dvh - 64px); }
    html { scroll-padding-top: 76px; }
    .logo-text { font-size: 22px; }
    .logo-sub, .brand-mascot { display: none; }
    .logo-icon { width: 32px; height: 32px; }
    .container { padding: 0 16px; }
}

/* ── 5. 섹션 공통 ─────────────────────────────────────────── */
section { padding: 104px 0; border-top: 1px solid var(--line); }
.sec-head { max-width: 760px; margin-bottom: 44px; }
.sec-head h2 { font-size: clamp(26px, 3vw, 34px); }
.sec-head p { margin-top: 14px; font-size: 17px; color: var(--ink-3); }
@media (max-width: 768px) { section { padding: 68px 0; } .sec-head { margin-bottom: 32px; } }

/* ── 6. 첫 화면 ─────────────────────────────────────────── */
.hero { padding: 148px 0 88px; border-top: 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.28; letter-spacing: -0.03em; }
.hero h1 em { font-style: normal; color: var(--accent-ink); }
.hero h1 { overflow-wrap: normal; }
.nw { white-space: nowrap; }
.hero-lead { margin-top: 22px; font-size: 18px; color: var(--ink-2); max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-actions .btn-line .ico { width: 18px; height: 18px; }
.hero-media { margin: 0; }
.media-frame { position: relative; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: var(--bg-sunken); box-shadow: var(--shadow); aspect-ratio: 16 / 9; }
.media-frame video, .media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-toggle { position: absolute; left: 12px; bottom: 12px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgb(255 255 255 / 0.35); border-radius: 50%; background: rgb(7 9 14 / 0.72); color: #fff; cursor: pointer; }
.media-toggle:hover { background: rgb(7 9 14 / 0.9); }
.media-toggle .ico { width: 18px; height: 18px; }
.hero-media figcaption { margin-top: 12px; font-size: 14px; color: var(--ink-3); }
.assure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 72px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.assure div { padding: 22px 24px 22px 0; }
.assure div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.assure b { display: block; color: var(--ink); font-size: 17px; }
.assure span { display: block; margin-top: 4px; font-size: 15px; color: var(--ink-3); }
@media (max-width: 960px) {
    .hero { padding: 112px 0 64px; }
    .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .assure { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
    .assure div, .assure div + div { padding: 16px 0; border-left: 0; }
    .assure div + div { border-top: 1px solid var(--line); }
}

/* ── 7. 지금 이런 일이 있다면 (장부형 대조표) ───────────────── */
.ledger { border-top: 1px solid var(--line-strong); }
.ledger-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 180px; gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.ledger-head { padding: 12px 0; font-size: 14px; font-weight: 700; color: var(--ink-3); }
.ledger-row .now { color: var(--ink); font-size: 18px; font-weight: 500; }
.ledger-row .after { color: var(--ink-2); }
.ledger-row .sys { font-size: 14px; color: var(--accent-ink); font-weight: 700; text-align: right; }
@media (max-width: 860px) {
    .ledger-head { display: none; }
    .ledger-row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 20px 0; }
    .ledger-row .sys { text-align: left; }
}

/* ── 8. 연결 원리 ─────────────────────────────────────────── */
.principle { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line-strong); }
.principle article { padding: 28px 28px 8px 0; }
.principle article + article { padding-left: 28px; border-left: 1px solid var(--line); }
.principle h3 { font-size: 20px; }
.principle p { margin-top: 10px; color: var(--ink-3); }
@media (max-width: 860px) {
    .principle { grid-template-columns: minmax(0, 1fr); }
    .principle article, .principle article + article { padding: 22px 0; border-left: 0; }
    .principle article + article { border-top: 1px solid var(--line); }
}

/* ── 9. 실제 화면 ─────────────────────────────────────────── */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tab {
    min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px;
    background: transparent; color: var(--ink-2); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}
.tab:hover { color: var(--ink); border-color: var(--ink-3); }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 700; }
.shots { display: grid; gap: 40px; }
.shot { margin: 0; }
.shot a { display: block; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: var(--bg-sunken); box-shadow: var(--shadow); }
.shot img { width: 100%; height: auto; }
.shot figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 14px; font-size: 15px; color: var(--ink-3); }
.shot figcaption b { color: var(--ink); font-weight: 700; }
.shot-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.shot-phone { max-width: 340px; }
.shots-note { margin-top: 28px; font-size: 14px; color: var(--ink-3); }
@media (max-width: 860px) { .shot-pair { grid-template-columns: minmax(0, 1fr); } }

/* ── 10. 대표 소개 ─────────────────────────────────────────── */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.about-body p + p { margin-top: 16px; }
.about-body .lead { font-size: 20px; color: var(--ink); line-height: 1.6; }
.built { border-top: 1px solid var(--line-strong); }
.built li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.built b { color: var(--ink); font-size: 17px; }
.built small { grid-column: 1 / -1; font-size: 15px; color: var(--ink-3); }
.built-note { margin-top: 18px; font-size: 15px; color: var(--ink-3); }
ul.plain { list-style: none; margin: 0; padding: 0; }
@media (max-width: 960px) { .about { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* ── 11. 배지 ───────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-live { color: var(--ok); background: var(--ok-wash); }
.badge-build { color: var(--accent-ink); background: var(--accent-wash); }

/* ── 12. 도입 절차 ─────────────────────────────────────────── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); counter-reset: step; }
.steps li { padding: 26px 24px 8px 0; counter-increment: step; }
.steps li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.steps li::before { content: counter(step); display: block; font-size: 14px; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.steps h3 { margin-top: 8px; font-size: 19px; }
.steps .dur { display: inline-block; margin-left: 8px; font-size: 14px; font-weight: 500; color: var(--ink-3); }
.steps p { margin-top: 10px; font-size: 15px; color: var(--ink-3); }
.steps-note { margin-top: 24px; font-size: 15px; color: var(--ink-3); }
@media (max-width: 960px) {
    .steps { grid-template-columns: minmax(0, 1fr); }
    .steps li, .steps li + li { padding: 20px 0; border-left: 0; }
    .steps li + li { border-top: 1px solid var(--line); }
}

/* ── 13. 자주 묻는 질문 ─────────────────────────────────────── */
.faq { border-top: 1px solid var(--line-strong); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; list-style: none; color: var(--ink); font-size: 18px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { color: var(--ink-3); transition: transform .2s var(--ease-out); }
.faq details[open] summary .ico { transform: rotate(45deg); color: var(--accent-ink); }
.faq .answer { padding: 0 0 26px; max-width: 72ch; }
.faq .answer p + p, .faq .answer p + .table-wrap, .faq .answer .table-wrap + p { margin-top: 14px; }
.faq .answer ul { margin: 12px 0 0; padding-left: 20px; }
.faq .answer li + li { margin-top: 6px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.data-table caption { text-align: left; padding: 12px 14px 0; font-size: 14px; color: var(--ink-3); }
.data-table th, .data-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.data-table thead th { font-size: 14px; color: var(--ink-3); font-weight: 700; }
.data-table tbody th { color: var(--ink); font-weight: 700; white-space: nowrap; }
.data-table tr:last-child th, .data-table tr:last-child td { border-bottom: 0; }

/* ── 14. 지원·지속성 ─────────────────────────────────────── */
.support { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-strong); }
.support article { padding: 26px 26px 8px 0; }
.support article + article { padding-left: 26px; border-left: 1px solid var(--line); }
.support h3 { font-size: 19px; margin-bottom: 14px; }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.kv span { color: var(--ink-3); }
.kv b { color: var(--ink); font-weight: 500; text-align: right; }
.support p { margin-top: 14px; font-size: 15px; color: var(--ink-3); }
.limits { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 900px; }
.limits h3 { font-size: 18px; }
.limits ul { margin: 12px 0 0; padding-left: 20px; color: var(--ink-2); }
.limits li + li { margin-top: 8px; }
@media (max-width: 960px) {
    .support { grid-template-columns: minmax(0, 1fr); }
    .support article, .support article + article { padding: 22px 0; border-left: 0; }
    .support article + article { border-top: 1px solid var(--line); }
}

/* ── 15. 전체 시스템 목록 ─────────────────────────────────── */
.legend { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 32px; font-size: 15px; color: var(--ink-3); }
.legend span { display: inline-flex; align-items: center; gap: 10px; }
.dept { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding: 30px 0; border-top: 1px solid var(--line-strong); }
.dept-name { color: var(--accent-ink); font-size: 15px; font-weight: 700; letter-spacing: 0; }
.dept-name small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--ink-3); }
.sys-list { list-style: none; margin: 0; padding: 0; }
.sys-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 0 0 22px; }
.sys-list li + li { padding-top: 22px; border-top: 1px solid var(--line); }
.sys-list h4 { font-size: 20px; margin: 0; color: var(--ink); line-height: 1.32; letter-spacing: -0.02em; }
.sys-list .has { grid-column: 1 / -1; color: var(--ink-2); }
.sys-list .fit { grid-column: 1 / -1; font-size: 15px; color: var(--ink-3); }
.sys-list .fit::before { content: "도입 시 · "; color: var(--accent-ink); font-weight: 700; }
.sys-list .more { grid-column: 1 / -1; font-size: 15px; }
.count-note { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line-strong); font-size: 14px; color: var(--ink-3); }
@media (max-width: 860px) {
    .dept { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 26px 0; }
}

/* ── 16. 문의 ───────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.contact-side p { margin-top: 14px; color: var(--ink-3); }
.contact-phone { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding: 18px 20px; border: 1px solid var(--line-strong); border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.contact-phone:hover { border-color: var(--accent-ink); }
.contact-phone .ico { width: 24px; height: 24px; color: var(--accent-ink); }
.contact-phone b { display: block; font-size: 22px; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.contact-phone small { display: block; font-size: 14px; color: var(--ink-3); }
.contact-mail { margin-top: 14px; font-size: 15px; color: var(--ink-3); }
.contact-form { padding: 32px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg-raised); }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 20px; }
.field label, .field legend { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.field .opt { font-weight: 400; color: var(--ink-3); }
.req { color: var(--accent-ink); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field textarea {
    width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--field-line); border-radius: 8px;
    background: var(--bg); color: var(--ink); font: inherit; font-size: 16px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; border-color: var(--accent-ink); }
.field input[aria-invalid="true"] { border-color: #F87171; }
.field-err { margin-top: 6px; font-size: 14px; color: #F87171; }
:root[data-theme="light"] .field-err { color: #B02A24; }
:root[data-theme="light"] .field input[aria-invalid="true"] { border-color: #B02A24; }
fieldset.field { border: 0; margin: 22px 0 0; padding: 0; min-width: 0; }
.checks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 20px; }
.checks label { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; font-weight: 400; color: var(--ink-2); margin: 0; cursor: pointer; }
.checks input, .consent input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.form-full { margin-top: 20px; }
.privacy-box { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 14px; color: var(--ink-3); line-height: 1.75; }
.privacy-box b { color: var(--ink-2); }
.consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 15px; color: var(--ink-2); }
.consent input { margin-top: 4px; }
.form-foot { margin-top: 20px; font-size: 14px; color: var(--ink-3); }
.contact-form .btn-primary { width: 100%; margin-top: 20px; min-height: 54px; font-size: 17px; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 18px; padding: 14px 16px; border-radius: 8px; font-size: 15px; line-height: 1.6; }
.form-status.ok { background: var(--ok-wash); color: var(--ok); border: 1px solid currentColor; }
.form-status.err { background: rgb(248 113 113 / 0.10); color: #FCA5A5; border: 1px solid rgb(248 113 113 / 0.5); }
:root[data-theme="light"] .form-status.err { color: #B02A24; background: #FBEDEC; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (max-width: 600px) {
    .contact-form { padding: 22px 18px; }
    .form-grid, .checks { grid-template-columns: minmax(0, 1fr); }
}

/* ── 17. 바닥글 ─────────────────────────────────────────── */
.footer { padding: 56px 0 120px; border-top: 1px solid var(--line); background: var(--bg-sunken); font-size: 14px; color: var(--ink-3); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; }
.footer .logo { margin-bottom: 14px; }
.footer p + p { margin-top: 8px; }
.footer a { color: var(--ink-2); }
.footer-links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 24px; align-content: start; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--accent-ink); }
.copyright { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
@media (min-width: 901px) { .footer { padding-bottom: 56px; } }
@media (max-width: 768px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── 18. 휴대폰 하단 상담 바 ──────────────────────────────── */
.callbar { display: none; }
@media (max-width: 900px) {
    .callbar {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
        background: var(--bg); border-top: 1px solid var(--line-strong);
        transition: transform .25s var(--ease-out);
    }
    .callbar .btn { min-height: 50px; }
    .callbar.is-hidden { transform: translateY(110%); }
    body { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}