/* postinfra.co.kr — 메인 · 프로 · 맞춤 제작. 모바일 먼저.
   색 · 글꼴은 pi-site/site.css(블로그 프로그램 화면)와 같은 값을 쓴다 — 두 화면이 한 사이트로 보이게. 이 파일만 고친다.
   다이얼 VARIANCE 5 / MOTION 3 / DENSITY 6 — 움직임은 hover · active 뿐, 자동 애니메이션 없음. */
:root {
    --brand:#2f5bea; --brand-600:#2449c9; --brand-50:#eef2fe; --brand-100:#dde5fd;
    --bg:#fbfbfc; --panel:#ffffff; --tint:#f4f5f7; --dark:#111318; --dark-2:#1b1e26; --dark-line:#2a2e38;
    --ink:#16181d; --sub:#52555e; --mute:#6b6e78; --line:#e6e7ea; --line-2:#eef0f2;
    --ok:#1f7a55; --ok-bg:#e9f5ef; --warn:#b4471f; --warn-bg:#fdf0ea;
    --mono:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --ease:cubic-bezier(.16,1,.3,1);
    --shadow:0 30px 60px -30px rgba(22,24,29,.28), 0 12px 24px -16px rgba(22,24,29,.12);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:72px; -webkit-text-size-adjust:100%; }
body {
    font-family:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    background:var(--bg); color:var(--ink); font-size:16px; line-height:1.7; word-break:keep-all; overflow-wrap:break-word;
    min-height:100dvh; -webkit-font-smoothing:antialiased;
}
a { color:inherit; }
img { max-width:100%; }
ol, ul { list-style:none; }
.mono { font-family:var(--mono); letter-spacing:-.01em; }
.wrap { width:100%; max-width:1180px; margin:0 auto; padding:0 16px; }
.ic { width:18px; height:18px; flex:none; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ------------------------------------------------------------------ 버튼 */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px;
    border-radius:12px; font-weight:600; font-size:15px; text-decoration:none; border:1px solid transparent; white-space:nowrap;
    transition:background .2s var(--ease), border-color .2s var(--ease), color .2s, transform .12s var(--ease);
}
.btn:active { transform:translateY(1px) scale(.99); }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid rgba(47,91,234,.35); outline-offset:2px; }
.btn-lg { min-height:52px; padding:14px 22px; font-size:16px; }
.btn-sm { min-height:36px; padding:7px 14px; font-size:14px; border-radius:10px; }
.btn-primary { background:var(--brand); color:#fff; box-shadow:0 8px 20px -10px rgba(47,91,234,.7), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary:hover { background:var(--brand-600); }
.btn-primary .ic { transition:transform .2s var(--ease); }
.btn-primary:hover .ic { transform:translateX(3px); }
.btn-ghost { background:var(--panel); border-color:var(--line); color:var(--ink); }
.btn-ghost:hover { border-color:#c9cbd1; }
.btn-light { background:#fff; color:var(--ink); }
.btn-light:hover { background:var(--brand-50); }
.btn-line-dark { border-color:var(--dark-line); color:#e7e8ec; }
.btn-line-dark:hover { border-color:#4a4f5c; }

/* ------------------------------------------------------------------ 머리 */
.top { position:sticky; top:0; z-index:20; background:rgba(251,251,252,.94); border-bottom:1px solid var(--line);
       backdrop-filter:saturate(1.5) blur(12px); -webkit-backdrop-filter:saturate(1.5) blur(12px); }
.top-in { display:flex; align-items:center; gap:16px; height:60px; }
.brand { display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:17px; letter-spacing:-.02em; text-decoration:none; }
.brand-mark { position:relative; width:20px; height:20px; border-radius:6px; background:var(--brand); overflow:hidden; flex:none; }
.brand-mark::after { content:''; position:absolute; left:4px; right:4px; bottom:4px; height:3px; border-radius:2px; background:rgba(255,255,255,.85); }
.brand-mark::before { content:''; position:absolute; left:4px; width:7px; top:4px; height:3px; border-radius:2px; background:rgba(255,255,255,.55); }
.nav { display:none; gap:2px; margin-left:auto; }
.nav a { font-size:14px; color:var(--sub); text-decoration:none; padding:6px 10px; border-radius:8px; transition:color .15s, background .15s; }
.nav a:hover { color:var(--ink); background:var(--tint); }
.nav a[aria-current="page"] { color:var(--ink); font-weight:600; }
.top-in > .btn { margin-left:auto; }

/* 모바일 아래 메뉴 줄 — 머리에 다 안 들어가서 */
.subnav { display:flex; gap:6px; overflow-x:auto; padding:8px 16px 10px; border-bottom:1px solid var(--line); background:var(--bg);
          scrollbar-width:none; }
.subnav::-webkit-scrollbar { display:none; }
.subnav a { flex:none; font-size:14px; color:var(--sub); text-decoration:none; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--panel); }
.subnav a[aria-current="page"] { color:#fff; background:var(--ink); border-color:var(--ink); }

/* ------------------------------------------------------------------ 첫 화면 */
.hero { position:relative; padding:40px 0 48px; overflow:hidden; isolation:isolate; }
.hero::before {
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
        radial-gradient(55% 45% at 88% 8%, rgba(47,91,234,.09), transparent 70%),
        linear-gradient(var(--line-2) 1px, transparent 1px) 0 0 / 100% 48px,
        linear-gradient(90deg, var(--line-2) 1px, transparent 1px) 0 0 / 48px 100%;
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 55%, transparent 100%);
}
.hero-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:36px; align-items:center; }
.chip { display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 10px; border-radius:999px;
        background:var(--panel); border:1px solid var(--line); font-size:13px; font-weight:500; color:var(--sub); }
.chip .dot { width:7px; height:7px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 3px var(--brand-100); }
h1 { margin-top:18px; font-size:clamp(28px, 7.6vw, 50px); line-height:1.22; letter-spacing:-.04em; font-weight:800; }
h1 .line { display:block; }
h1 em { font-style:normal; color:var(--brand); }
.lead { margin-top:18px; font-size:17px; color:var(--sub); max-width:34em; }
.cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.note { margin-top:14px; font-size:14px; color:var(--mute); }
.note b { color:var(--ink); font-weight:600; }

/* 첫 화면 오른쪽 — "이어서 돌린다" 흐름 판 (목업, 실제 화면 아님) */
.flow { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:18px; box-shadow:var(--shadow); }
.flow-h { display:flex; align-items:center; justify-content:space-between; font-size:13px; color:var(--mute); padding:2px 4px 12px; border-bottom:1px solid var(--line-2); }
.flow-h b { color:var(--ink); font-weight:600; }
.flow ol { display:grid; gap:0; }
.flow li { display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:12px; align-items:center; padding:14px 4px; border-bottom:1px solid var(--line-2); }
.flow li:last-child { border-bottom:0; padding-bottom:4px; }
.flow .n { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--tint); color:var(--sub); font-family:var(--mono); font-size:13px; font-weight:600; }
.flow li.on .n { background:var(--brand); color:#fff; }
.flow .t { font-weight:600; font-size:15px; line-height:1.4; }
.flow .d { display:block; font-size:13px; color:var(--mute); font-weight:400; }
.tag { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; padding:3px 8px; border-radius:999px; white-space:nowrap; }
.tag-ok { color:var(--ok); background:var(--ok-bg); }
.tag-wait { color:var(--sub); background:var(--tint); }
.tag-brand { color:var(--brand-600); background:var(--brand-50); }

/* ------------------------------------------------------------------ 구획 */
.sec { padding:56px 0; }
.sec-tint { background:var(--tint); }
.sec-dark { background:var(--dark); color:#e7e8ec; }
.eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); font-weight:600; }
.sec-dark .eyebrow { color:#8ea6ff; }
h2 { margin-top:10px; font-size:clamp(24px, 5.6vw, 36px); line-height:1.3; letter-spacing:-.035em; font-weight:800; }
.sec-lead { margin-top:12px; color:var(--sub); max-width:38em; }
.sec-dark .sec-lead { color:#a9adb8; }
h3 { font-size:18px; line-height:1.4; letter-spacing:-.02em; font-weight:700; }

/* 왼쪽 제목 + 오른쪽 내용 (2단, 모바일은 1단) */
.split { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; }

/* 고민 목록 — 카드 대신 줄로 나눈다 */
.pains { border-top:1px solid var(--line); }
.pains li { display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; padding:20px 0; border-bottom:1px solid var(--line); }
.pains .k { font-family:var(--mono); font-size:13px; color:var(--mute); padding-top:3px; }
.pains p { color:var(--sub); margin-top:4px; font-size:15px; }

/* 상품 — 프로 크게, 플러스 · 베이직 작게 (비대칭 격자) */
.plans { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-top:32px; }
.plan { position:relative; border-radius:20px; padding:24px; background:var(--panel); border:1px solid var(--line); display:flex; flex-direction:column; }
.plan .who { font-size:13px; color:var(--mute); }
.plan h3 { margin-top:6px; font-size:22px; }
.plan .what { margin-top:10px; color:var(--sub); font-size:15px; }
.plan ul { margin-top:16px; display:grid; gap:8px; }
.plan li { display:flex; gap:8px; font-size:15px; }
.plan li .ic { color:var(--brand); margin-top:4px; width:16px; height:16px; }
.plan .price { margin-top:auto; padding-top:20px; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.plan .price b { font-size:20px; letter-spacing:-.02em; }
.plan .price span { font-size:13px; color:var(--mute); }
.plan .go { margin-top:16px; }
.plan-pro { background:var(--dark); color:#e7e8ec; border-color:var(--dark); }
.plan-pro .who, .plan-pro .price span { color:#a9adb8; }
.plan-pro .what { color:#c3c6cf; }
.plan-pro li .ic { color:#8ea6ff; }
.plan-pro .badge { position:absolute; top:20px; right:20px; }
.badge { font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:rgba(142,166,255,.14); color:#b9c8ff; }

/* 작업 순서 */
.steps { display:grid; grid-template-columns:minmax(0,1fr); gap:0; margin-top:28px; border-top:1px solid var(--line); counter-reset:s; }
.steps li { padding:20px 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; }
.steps .n { font-family:var(--mono); font-size:13px; color:var(--brand); font-weight:600; padding-top:3px; }
.steps p { margin-top:4px; color:var(--sub); font-size:15px; }

/* 가격 요약 표 */
.ptable { width:100%; margin-top:28px; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.ptable th, .ptable td { text-align:left; padding:16px 18px; border-bottom:1px solid var(--line-2); vertical-align:top; font-size:15px; }
.ptable tr:last-child th, .ptable tr:last-child td { border-bottom:0; }
.ptable th { width:34%; font-weight:600; }
.ptable th span { display:block; font-size:13px; color:var(--mute); font-weight:400; }
.ptable td b { font-weight:700; }
.ptable td small { display:block; margin-top:2px; font-size:13px; color:var(--mute); }
.fine { margin-top:12px; font-size:13px; color:var(--mute); }

/* 사례 */
.cases { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-top:28px; }
.case { padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.case .ind { font-size:13px; color:var(--mute); }
.case h3 { margin-top:4px; }
.case p { margin-top:8px; color:var(--sub); font-size:15px; }
.case a { display:inline-flex; gap:6px; align-items:center; margin-top:12px; font-size:14px; font-weight:600; color:var(--brand-600); text-decoration:none; }

/* 하는 것 / 하지 않는 것 */
.dodont { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-top:28px; }
.dd { padding:22px; border-radius:16px; border:1px solid var(--line); background:var(--panel); }
.dd ul { margin-top:12px; display:grid; gap:10px; }
.dd li { display:flex; gap:10px; font-size:15px; }
.dd li .ic { margin-top:4px; width:16px; height:16px; }
.dd-do li .ic { color:var(--ok); }
.dd-dont li .ic { color:var(--warn); }

/* 지그재그 (프로 흐름 · 맞춤 제작) */
.zz { margin-top:32px; display:grid; gap:0; border-top:1px solid var(--line); }
.zz-row { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; padding:28px 0; border-bottom:1px solid var(--line); }
.zz-row .k { font-family:var(--mono); font-size:13px; color:var(--brand); font-weight:600; }
.zz-row h3 { margin-top:6px; font-size:21px; }
.zz-row .body p { margin-top:8px; color:var(--sub); }
.zz-row .pricechip { display:inline-block; margin-top:14px; font-size:14px; font-weight:600; padding:6px 12px; border-radius:10px; background:var(--brand-50); color:var(--brand-600); }
.zz-row ul.ex { display:grid; gap:8px; align-content:start; }
.zz-row ul.ex li { display:flex; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); font-size:15px; }
.zz-row ul.ex li .ic { color:var(--brand); margin-top:4px; width:16px; height:16px; }

/* 포함 표 */
.incl { margin-top:28px; border-top:1px solid var(--line); }
.incl div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; }
.incl dt { font-weight:600; }
.incl dt span { display:block; font-weight:400; font-size:13px; color:var(--mute); }
.incl dd { text-align:right; }

/* 자주 묻는 질문 */
.faq { margin-top:24px; border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:16px; padding:18px 0; font-weight:600; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .ic { transition:transform .2s var(--ease); color:var(--mute); margin-top:4px; }
.faq details[open] summary .ic { transform:rotate(45deg); }
.faq details p { padding:0 0 18px; color:var(--sub); font-size:15px; max-width:44em; }

/* 끝 상담 띠 */
.band { padding:48px 0; background:var(--dark); color:#e7e8ec; }
.band-in { display:grid; gap:20px; }
.band h2 { margin-top:0; color:#fff; }
.band p { color:#a9adb8; }
.band .cta { margin-top:0; }

/* ------------------------------------------------------------------ 바닥 */
.foot { padding:32px 0 40px; border-top:1px solid var(--line); font-size:13px; color:var(--mute); }
.foot-in { display:grid; gap:14px; }
.foot nav { display:flex; flex-wrap:wrap; gap:6px 16px; }
.foot nav a { text-decoration:none; color:var(--sub); }
.foot nav a:hover { color:var(--ink); }
.seller { display:flex; flex-wrap:wrap; gap:2px 14px; }

/* ------------------------------------------------------------------ 넓은 화면 */
@media (min-width:768px) {
    .wrap { padding:0 24px; }
    .subnav { display:none; }
    .nav { display:flex; }
    .top-in > .nav + .btn { margin-left:8px; }   /* 메뉴가 보일 때만 — 모바일은 버튼이 오른쪽 끝 */
    .hero { padding:64px 0 72px; }
    .hero-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; }
    .sec { padding:88px 0; }
    .split { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; align-items:start; }
    .plans { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); grid-template-rows:auto auto; }
    .plan-pro { grid-row:span 2; padding:32px; }
    .steps { grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:40px; }
    .cases { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .dodont { grid-template-columns:repeat(2, minmax(0,1fr)); }
    .zz-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; padding:40px 0; }
    .zz-row:nth-child(even) .body { order:2; }
    .band-in { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
    .foot-in { grid-template-columns:minmax(0,1fr) auto; align-items:start; }
}
@media (min-width:1024px) {
    .steps { grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:28px; }
    .steps li { grid-template-columns:minmax(0,1fr); border-bottom:0; padding:24px 0 0; }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    * { transition:none !important; }
}

/* 바닥 약관 링크 (2026-10-19 — 블로그 프로그램 화면과 같은 링크를 네 화면에) */
.foot nav.legal { margin-top:8px; gap:4px 18px; }
.legal span { display:inline-flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
.legal b { font-weight:600; color:var(--sub); }
.legal-h { color:var(--mute); }
/* /pro 도입비 단계 표 (2026-10-19) — 가격 한눈에 표와 같은 모양 */
.ptable.tiers { margin-top:32px; }
.ptable.tiers caption { caption-side:top; text-align:left; padding:0 0 10px; font-weight:700; font-size:15px; }
.ptable.tiers caption span { display:block; font-weight:400; font-size:13px; color:var(--mute); }
.ptable.tiers td { text-align:right; white-space:nowrap; }
.ptable.tiers th { width:auto; }

/* PostInfra 태블릿 — 준비 중 한 줄 (2026-10-19) */
.tablet-line { margin-top:16px; font-size:14px; color:var(--sub); }
.tablet-line b { color:var(--ink); font-weight:600; }
.tablet-line a { margin-left:4px; font-weight:600; }

/* ------------------------------------------------------------------ 블로그 노출 확인 /check (2026-10-20)
   입력은 왼쪽 소개 + 오른쪽 칸(모바일은 위아래). 결과는 큰 순위 숫자 + 내 글 줄 + 상위 10개 모양(숫자만) · 안내.
   움직임은 버튼 hover · active 뿐. 숫자는 Geist Mono. */
.chk-top { position:relative; padding:36px 0 44px; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--line); }
.chk-top::before {
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:radial-gradient(50% 50% at 92% 0%, rgba(47,91,234,.08), transparent 70%);
}
.chk-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; align-items:start; }
.chk-facts { margin-top:18px; display:grid; gap:8px; }
.chk-facts li { display:flex; gap:10px; font-size:15px; color:var(--sub); }
.chk-facts .ic { color:var(--ok); margin-top:4px; width:16px; height:16px; }

.chk-form { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:20px; box-shadow:var(--shadow); display:grid; gap:16px; }
.chk-field { display:grid; gap:6px; }
.chk-field label { font-size:14px; font-weight:600; }
.chk-field input {
    width:100%; min-height:48px; padding:12px 14px; font:inherit; font-size:16px; color:var(--ink);
    background:var(--bg); border:1px solid var(--line); border-radius:12px;
    transition:border-color .15s, box-shadow .15s, background .15s;
}
.chk-field input:focus { outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 3px rgba(47,91,234,.15); }
.chk-help { font-size:13px; color:var(--mute); }
.chk-hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.chk-go { width:100%; }
.chk-go[disabled] { opacity:.75; cursor:progress; }
.chk-alert { font-size:14px; padding:10px 12px; border-radius:10px; background:var(--tint); color:var(--sub); }
.chk-alert-warn { background:var(--warn-bg); color:var(--warn); font-weight:500; }

.chk-top-res { padding:28px 0 20px; border-bottom:0; }
.chk-top-res h1 { font-size:clamp(26px, 6.4vw, 40px); }
.chk-who { margin-top:12px; font-size:14px; color:var(--sub); }
.chk-who a { color:var(--brand-600); font-weight:600; text-underline-offset:3px; }
.chk-res { padding:8px 0 56px; }
.chk-hit { display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:center; padding-bottom:24px; border-bottom:1px solid var(--line); }
.chk-hit-n { display:flex; align-items:baseline; gap:2px; font-size:56px; line-height:1; font-weight:600; letter-spacing:-.04em; color:var(--brand); }
.chk-hit-n .u { font-size:18px; font-weight:600; color:var(--sub); }
.chk-hit-none { color:var(--mute); }
.chk-hit-h { font-size:18px; font-weight:700; line-height:1.45; letter-spacing:-.02em; }
.chk-hit-s { margin-top:4px; font-size:15px; color:var(--sub); }

.chk-mine { border-bottom:1px solid var(--line); }
.chk-mine li { display:grid; grid-template-columns:52px minmax(0,1fr); gap:4px 12px; padding:14px 0; border-top:1px solid var(--line-2); }
.chk-mine li:first-child { border-top:0; }
.chk-mine .rk { font-size:14px; font-weight:600; color:var(--brand-600); padding-top:2px; }
.chk-mine .tt { font-weight:600; font-size:15px; min-width:0; }
.chk-mine .tt a { text-decoration:none; }
.chk-mine .tt a:hover { text-decoration:underline; text-underline-offset:3px; }
.chk-mine .dt { grid-column:2; font-size:13px; color:var(--mute); }

.chk-split { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; margin-top:32px; }
.chk-split h3 { font-size:16px; }
.chk-stats { margin-top:12px; border-top:1px solid var(--line); }
.chk-stats div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--line); }
.chk-stats dt { font-size:15px; color:var(--sub); }
.chk-stats dd { display:flex; gap:4px; align-items:baseline; }
.chk-stats dd b { font-size:20px; font-weight:600; }
.chk-stats dd span { font-size:13px; color:var(--mute); }
.chk-tips { margin-top:12px; display:grid; gap:10px; }
.chk-tips li { display:flex; gap:10px; font-size:15px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.chk-tips .ic { color:var(--brand); margin-top:4px; width:16px; height:16px; }
.chk-note { margin-top:28px; font-size:13px; color:var(--mute); max-width:52em; }
.chk-again { margin-top:14px; }
.chk-again a { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:15px; color:var(--brand-600); text-decoration:none; }

.chk-cta { padding:40px 0; background:var(--dark); color:#e7e8ec; }
.chk-cta-in { display:grid; gap:18px; }
.chk-cta h2 { margin-top:0; color:#fff; }
.chk-cta p { color:#a9adb8; margin-top:8px; max-width:40em; }
.chk-cta .cta { margin-top:0; }
.chk-cta .chk-cta-s { margin-top:0; font-size:13px; }

.chk-seven { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 16px; border-top:1px solid var(--line); }
.chk-seven li { display:flex; gap:10px; align-items:baseline; padding:12px 0; border-bottom:1px solid var(--line); font-weight:600; font-size:15px; }
.chk-seven .k { font-size:12px; color:var(--brand); }
.chk-more-go { margin-top:20px; }
.chk-teaser { margin-top:14px; font-size:14px; }
.chk-teaser a { display:inline-flex; align-items:center; gap:6px; color:var(--brand-600); font-weight:600; text-decoration:none; }

@media (min-width:768px) {
    .chk-top { padding:56px 0 64px; }
    .chk-top-res { padding:44px 0 24px; }
    .chk-res { padding-bottom:88px; }
    .chk-grid { grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:56px; align-items:center; }
    .chk-form { padding:28px; }
    .chk-mine li { grid-template-columns:64px minmax(0,1fr) auto; }
    .chk-mine .dt { grid-column:auto; padding-top:2px; }
    .chk-split { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:48px; }
    .chk-cta-in { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
    .chk-cta .chk-cta-s { grid-column:1 / -1; }
}