/* 컴포넌트 — 여러 화면이 함께 쓰는 조각 */
@layer components {
    .group .chev { margin-left: auto; width: 16px; height: 16px; fill: none; stroke: var(--plum-40); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    /* ── 컴포넌트 ────────────────────────────────────────── */
    .appicon {
        flex: none;
        display: inline-grid;
        place-items: center;
        width: 30px;
        height: 30px;
        border-radius: 9px;
        color: var(--white);
        background: var(--grad-plum);
        box-shadow: inset 0 1px 0 var(--white-35), 0 3px 8px -4px var(--plum-35);
    }
    .appicon svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    .appicon--red { background: var(--grad-red); }
    .appicon--apricot { background: var(--grad-apricot); }
    .appicon--lilac { background: var(--grad-lilac); }
    .appicon--lg { width: 50px; height: 50px; border-radius: 15px; }
    .pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 20px;
        border: 0;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -0.01em;
        white-space: nowrap;
        cursor: pointer;
        transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
    }
    .pill--ink { color: var(--ink); background: var(--grad-ink); box-shadow: inset 0 1px 0 var(--white-90), 0 2px 5px -3px var(--accent-shadow); }   /* 흰 단추와 같은 입체 컨벤션 */
    /* 확정 단추 — 표 · 목록 · 짧은 폼 안의 작은 단추(신청 · 결제하기 · 글 확인). 큰 단추(--lg · 폭 전체)와 홈 · 메뉴는 살구빛 .pill--ink */
    .pill--strong { color: var(--white); background: var(--grad-strong); box-shadow: inset 0 1px 0 var(--white-25), 0 2px 5px -3px var(--plum-50); }
    .pill--strong:hover { background: linear-gradient(180deg, #7c5180 0%, #634566 100%); }
    .pill:is(:disabled, [aria-disabled=true]) { color: var(--muted); background: var(--shade-22); box-shadow: none; cursor: not-allowed; } /* 아직 누를 수 없는 단추 — 결제 수단을 고르기 전. aria-disabled 는 눌리면 안내 토스트 */
    .pill:is(:disabled, [aria-disabled=true]):hover { background: var(--shade-22); }
    .pill--glass { color: var(--ink); background: var(--white-66); border: 1px solid transparent; }   /* 테는 투명 — 크기만 유지, 윤곽은 아래 입체 규칙 한 겹 */
    .pill--glass:hover { background: var(--white-90); }
    .pill--lg { min-height: 52px; padding: 0 26px; font-size: 16px; }
    .pill--sm { min-height: 38px; padding: 0 16px; font-size: 14px; }
    /* 이메일 상담 폼 (_contact_form.inc) — 모달 · /formmail 단독 화면 공용. 칸 이름 72 + 입력칸, 안내 글머리, 단추 가운데 (2026-10-16) */
    .contact-form__fields { display: grid; gap: 14px; }
    .contact-form__row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; }
    .contact-form__row > span { font-size: 14px; font-weight: 600; color: var(--muted); }
    .contact-form__row:has(textarea) { align-items: start; }
    .contact-form__row:has(textarea) > span { padding-top: 12px; }
    .contact-form__row :is(input, textarea) { width: 100%; }
    .contact-form__row textarea { min-height: 150px; resize: vertical; }
    .contact-form__tips { margin: 20px 0 0; padding: 16px 0 0 20px; border-top: 1px solid var(--hair); list-style: disc; font-size: 14px; line-height: 1.75; color: var(--text); }
    .contact-form__tips li + li { margin-top: 8px; }
    .contact-form__btns { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
    .contact-form__btns .pill { min-width: 120px; }
    .contact-page { max-width: var(--form-col); margin: 0 auto; padding: 32px; border-radius: var(--r-xl); }
    /* 우편번호 · 영문 주소 검색 모달 (assets/address.js) — 카카오 우편번호 화면이 채울 높이 */
    .ssz-modal:has(.postcode-box) .ssz-modal__body { padding: 0; }
    .postcode-box { height: min(520px, calc(100dvh - 140px)); }
    @media (max-width: 480px) {
        .contact-form__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
        .contact-form__row:has(textarea) > span { padding-top: 0; }
        .contact-form__btns .pill { flex: 1 1 0; min-width: 0; }
        .contact-page { padding: 20px var(--inset); }
    }
    .chip {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-height: 32px;
        padding: 0 14px 0 12px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 500;
        color: var(--plum-deep);
        background: var(--white-70);
        box-shadow: inset 0 0 0 1px var(--white-95), 0 4px 12px -8px var(--plum-40);
    }
    .chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px var(--red-halo); }
    .more { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 0 8px 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--plum-deep); background: var(--white-72); box-shadow: inset 0 0 0 1px var(--white-90); white-space: nowrap; }
    /* 작은 흰 단추 입체 — 위쪽 빛줄 · 아래쪽 옅은 그늘 · 짧은 바닥 그림자 (상세정보 · 요금표 · 11종 등) */
    .pill--glass, .more { box-shadow: inset 0 1px 0 var(--white-90), 0 2px 5px -3px var(--plum-35); }
    .more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .chev { width: 16px; height: 16px; fill: none; stroke: var(--plum-40); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    /* 위젯 */
    .widgets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
    .widget { position: relative; border-radius: var(--r-lg); padding: 22px 24px 22px; display: flex; flex-direction: column; min-width: 0; }
    .widget__label { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
    .widget__label .appicon { width: 26px; height: 26px; border-radius: 8px; }
    .widget__big { margin-top: auto; padding-top: 26px; display: flex; align-items: baseline; gap: 4px; }
    .widget__big b { font-size: 44px; line-height: 1; font-weight: 300; letter-spacing: -0.05em; }
    .widget__big > span { font-size: 18px; font-weight: 500; color: var(--ink); }
    .widget__sub { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--muted); }
    .widget--ns { grid-column: span 2; }
    .widget__sub--pair span + span::before { content: ' · '; }
    .widget > .more { position: absolute; right: 18px; top: 16px; }
    /* 설비 카드 — 위젯 크기 그대로 제목 + 설명. 아래 서비스 카드와 상품이 겹치지 않게 */
    .widget--feat { color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
    .widget--feat:hover { transform: translateY(-2px); }
    .widget__big--word { margin-top: 0; padding-top: 22px; }   /* 네임서버 카드처럼 라벨 바로 아래에서 시작 */
    .widget__big--word b { font-size: 29px; letter-spacing: -0.04em; font-weight: 400; white-space: nowrap; }   /* 숫자 위젯과 같은 자리, 글자라 한 단계 작게 (36 의 80%, 2026-10-14). 굵기는 제목과 같은 400 — 숫자만 얇게 (2026-10-16) */
    .ns { margin-top: auto; padding-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .ns div { padding: 13px 16px; border-radius: var(--r-md); background: var(--tile); box-shadow: inset 0 0 0 1px var(--white-90); min-width: 0; }
    .ns dt { font-size: 14px; color: var(--muted); }
    .ns dd { margin-top: 2px; font-size: 21px; font-weight: 400; color: var(--ink); letter-spacing: -0.03em; white-space: nowrap; }
    /* 다른 서비스의 네임서버 — 모바일 목록 행 문법으로 낮춰 옆 위젯과 높이를 맞춘다 */
    /* 홈 네임서버 — 입금 카드(.wallet__card)와 같은 그라데이션 · 흰 글자 · 빛 번짐 */
    .ns--card div { position: relative; overflow: hidden; background: var(--grad-wallet); box-shadow: 0 14px 26px -18px var(--plum-50), inset 0 1px 0 var(--white-25); }
    .ns--card div::after { content: ''; position: absolute; right: -40px; top: -60px; width: 140px; height: 140px; border-radius: 50%; background: var(--glow-card); pointer-events: none; }
    .ns--card dt { color: var(--white); opacity: .92; }
    .ns--card dd { color: var(--white); }
    /* 눌러서 복사 — 포인터. 안내는 공용 토스트 */
    [data-copy] { cursor: pointer; }
    [data-copy]:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; }
    /* 공용 토스트 — core.js showToast(). 화면 정가운데에서 떠올랐다 사라진다 */
    .toast { position: fixed; inset: 0; width: max-content; height: max-content; margin: auto; z-index: 90; display: flex; align-items: center; gap: 12px; max-width: min(440px, calc(100% - 32px)); padding: 12px 18px 12px 12px; border-radius: 18px; background: rgba(28, 22, 34, .94); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .45); opacity: 0;   /* 어떤 배경 위에서도 읽히게 검정 */ transform: translateY(12px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
    .toast.is-on { opacity: 1; transform: none; }
    .toast__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--white); background: var(--grad-plum); }
    .toast--notice .toast__icon { background: var(--grad-apricot); } /* 안내 — 살구 느낌표 (완료는 자주 체크) */
    .toast__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    .toast__text { display: grid; gap: 2px; min-width: 0; }
    .toast__text strong { font-size: 15px; font-weight: 600; color: var(--white); }
    .toast__text small { font-size: 13px; color: rgba(255, 255, 255, .72); overflow-wrap: anywhere; }
    @media (prefers-reduced-motion: reduce) { .toast { transition: opacity .2s ease; transform: none; } }
    .ns--stack { grid-template-columns: 1fr; gap: 0; margin-top: 18px; padding-top: 0; border-radius: 16px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--white-90); }
    .ns--stack div { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; background: none; box-shadow: none; border-radius: 0; }
    .ns--stack div + div { border-top: 1px solid var(--hair); }
    .ns--stack dd { margin: 0; font-size: 17px; }
    /* 세그먼트 */
    .seg { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 26px; padding: 6px; border-radius: 999px; background: var(--white-90); box-shadow: inset 0 1px 3px var(--plum-08); }
    .seg a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; transition: background-color .2s ease; }
    .seg a:hover { background: var(--white-60); }
    .seg--sm { margin-top: 0; padding: 4px; }
    .seg--sm a { min-height: 36px; padding: 0 14px; font-size: 14px; }   /* 목록 도구줄 정렬 — 제목 무대 탭보다 한 단계 작게 (2026-10-16) */
    .seg a.is-on { color: var(--ink); font-weight: 600; background: var(--white); box-shadow: 0 3px 8px -5px var(--plum-35), 0 0 0 .5px var(--plum-08); }   /* 높이감 · 번짐 한 단계 낮춤 (2026-10-14) */
    /* 요금표 — PC 유리판 위 표 */
    .table { border-radius: var(--r-xl); padding: 10px 10px 6px; }
    .table table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
    .table th { padding: 16px 20px 14px; font-size: 14px; font-weight: 600; color: var(--muted); text-align: right; white-space: nowrap; }
    .table th:first-child { text-align: left; }
    .table thead th { border-bottom: 1px solid var(--hair); }
    .table td { padding: 0 20px; height: 76px; font-size: 16px; color: var(--ink); text-align: right; white-space: nowrap; border-bottom: 1px solid var(--hair); }
    .table tbody tr:last-child td { border-bottom: 0; }
    .table tbody tr { transition: background-color .2s ease; }
    .table tbody tr:hover td { background: var(--white-55); }
    .table tbody tr:hover td:first-child { border-radius: 16px 0 0 16px; }
    .table tbody tr:hover td:last-child { border-radius: 0 16px 16px 0; }
    .table td:first-child { text-align: left; }
    .plan-name { font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.03em; }
    .plan-price b { font-size: 26px; font-weight: 400; letter-spacing: -0.04em; }
    .plan-price b + span { margin-left: 3px; font-size: 14px; color: var(--muted); }
    .table td.acts { width: 1%; padding-left: 28px; }
    .acts__in { display: flex; gap: 8px; justify-content: flex-end; }
    .acts .pill { min-height: 40px; padding: 0 16px; font-size: 14px; }
    /* 항목 · 값 표 — 상품 사양 (머리 칸 th scope=row) */
    .spec-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; background: var(--white-60); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--white-90); }
    .spec-table th, .spec-table td { height: 52px; padding: 10px 16px; line-height: 1.5; border-bottom: 1px solid var(--hair); } /* 위아래 10 — 두 줄로 꺾인 값(사용료 · 상품군)이 줄 테두리에 붙지 않게, 한 줄은 높이 52 그대로 */
    .spec-table tr:last-child > th, .spec-table tr:last-child > td { border-bottom: 0; }
    .spec-table th { text-align: left; font-size: 14px; font-weight: 600; color: var(--muted); }
    .spec-table td { color: var(--ink); }
    .cell-label { display: none; }
    .fine { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-size: 15px; color: var(--muted); }
    .fine span { display: inline-flex; align-items: center; gap: 8px; }
    .fine span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--plum); opacity: .5; }
    .fine--note span::before { content: none; }
    .plan-code { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
    .table tbody + tbody tr:first-child td { border-top: 1px solid var(--hair-strong); }
    .table--center th, .table--center td { text-align: center; }
    .table--center tbody th { padding: 0 20px; font-size: 15px; font-weight: 600; color: var(--ink); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--hair); }
    .table--center tbody tr:last-child th { border-bottom: 0; }
    .table--lines td { height: 52px; }
    .widget__big em { font-size: 18px; font-weight: 500; font-style: normal; color: var(--ink); }
    @media (max-width: 1024px) {
        .widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
        .table th, .table td { padding-left: 10px; padding-right: 10px; } /* 상품명 칸을 넓힌다 — SSL 상품명이 3–4줄로 꺾이던 것 (769–900) */
        .table td.acts { padding-left: 10px; }
        .plan-price b { font-size: 22px; }
        .acts .pill { padding: 0 12px; }
        .table th, .table td { white-space: normal; }
        .table td { height: 64px; font-size: 15px; }
    }
    @media (max-width: 768px) {
        .pill--sm, .more, .acts .pill { min-height: var(--tap); }
        .more { min-width: var(--tap); }
        .widgets { gap: 12px; }
        .widget { padding: 16px 16px 18px; }
        .widget--ns { grid-column: 1 / -1; }
        .widget__sub--pair span { display: block; }
        .widget__sub--pair span + span::before { content: none; }
        .widget__label { font-size: 14px; gap: 8px; }
        .widget .widget__big--word b { font-size: 19px; line-height: 1.15; white-space: normal; word-break: keep-all; }
        .widget__label .appicon { width: 24px; height: 24px; border-radius: 7px; }
        .widget__big { padding-top: 18px; }
        .widget__big b { font-size: clamp(30px, 9vw, 38px); }
        .widget__big > span { font-size: 16px; }
        .widget__sub { font-size: 14px; }
        .ns { grid-template-columns: 1fr; gap: 0; padding-top: 0; margin-top: 12px; background: var(--tile); border-radius: 16px; }
        .ns div { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; background: none; box-shadow: none; border-radius: 0; }
        .ns div + div { border-top: 1px solid var(--hair); }
        .ns dt { font-size: 15px; }
        .ns dd { margin: 0; font-size: 17px; }
        .ns--card { background: var(--grad-wallet); overflow: hidden; box-shadow: 0 14px 26px -18px var(--plum-50), inset 0 1px 0 var(--white-25); }   /* 모바일 — 한 장 카드에 두 줄 */
        .ns--card div { background: none; box-shadow: none; overflow: visible; }
        .ns--card div + div { border-top-color: var(--white-25); }
        .ns--card div::after { content: none; }
        .seg { display: flex; margin-top: 22px; border-radius: 26px; }
        .seg a { flex: 1 1 auto; padding: 0 10px; }
        .fine { flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 4px; }
        /* 표 카드 — 토글 행이 없는 표만 (.table--cards). 토글 행 표는 3-7 변형을 쓴다 */
        .table--cards { padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
        .table--cards thead { display: none; }
        .table--cards table, .table--cards tbody, .table--cards tr, .table--cards td, .table--cards tbody th { display: block; }
        .table--cards tbody { display: grid; gap: 22px; }
        .table--cards tbody + tbody { margin-top: 22px; }
        .table tbody + tbody tr:first-child td { border-top: 0; }
        .table--cards tr { border-radius: 18px; background: var(--white-80); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--white-90); overflow: hidden; }
        .table--cards tbody tr:hover td { background: none; }
        .table--cards td, .table--cards tbody th { height: auto; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--hair); font-size: 16px; text-align: right; white-space: normal; }
        .table--cards tbody tr:last-child td { border-bottom: 1px solid var(--hair); }
        .table--cards td:first-child, .table--cards tbody th { min-height: 64px; padding-block: 12px; text-align: left; background: var(--white-55); } /* 위아래 12 — 두 줄로 꺾인 상품명이 카드 윗선에 붙지 않게(320) */
        .table--cards .cell-label { display: inline; font-size: 15px; color: var(--muted); }
        .table--cards tbody tr td.acts { width: auto; padding: 0; border-bottom: 0; }
        .table--cards .acts__in { width: 100%; gap: 0; flex-direction: row; }
        .table--cards .acts .pill { flex: 1; min-height: 50px; border-radius: 0; background: none; border: 0; box-shadow: none; font-size: 16px; color: var(--plum); }
        .table--cards .acts .pill:hover { transform: none; background: var(--plum-tint); }
        .table--cards td[colspan] { justify-content: flex-end; }
        .plan-price b { font-size: 24px; }
        .plan-code { display: inline; }
    }
    @media (max-width: 480px) {
        .widget--feat { grid-column: 1 / -1; }   /* 설비 · 회선 카드 — 반 칸이면 설명이 4 · 5줄로 어긋난다. 한 줄씩 넓게 두면 둘 다 2줄(320 은 3줄) */
    }
    @media (max-width: 400px) {
        .widget { padding: 14px 14px 16px; }
        .ns dd { font-size: 16px; }
        .seg:not(.seg--wrap) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } /* 서비스 종류 탭 — 2 + 1 로 꺾여 둘째 줄에 하나만 남던 것. 같은 폭 칸, 긴 이름은 칸 안에서 두 줄 */
        .seg a { font-size: 14px; padding: 0 6px; line-height: 1.25; text-align: center; white-space: normal; }
    }

    /* 입력 카드 — 레이아웃 표(table.tbv.form-table)를 대신한다. fieldset 하나 = 카드 하나, 제목은 legend
       줄(.form-row) = [칸 이름 180 | 입력] 두 칸, 줄 높이 56 이상 · 가운데 맞춤 · 줄 사이 hairline. 768 이하는 칸 이름 위 · 입력 아래 */
    .form-card { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; min-inline-size: 0; margin: 0; padding: 0; border: 0; font-size: 15px; background: var(--white-60); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--white-90); }
    .form-card__title { float: left; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 20px; border-bottom: 1px solid var(--hair); font-size: 16px; font-weight: 600; color: var(--ink); } /* float — 테두리에 걸치는 legend 배치를 끄고 카드 첫 줄로 (그리드 안이라 실제 float 은 없다) */
    .form-row { display: grid; grid-template-columns: 180px 1fr; align-items: center; min-height: 56px; border-bottom: 1px solid var(--hair); } /* 칸 이름 180 · 줄 56 하나로 — 옛 tblv 흉내(160 · 56) 변형을 걷어 화면마다 입력칸 시작선이 같다 */
    .form-row:last-child { border-bottom: 0; }
    .form-row__label { padding: 10px 20px; font-size: 14px; font-weight: 600; color: var(--muted); }
    .form-row__field { padding: 10px 20px; color: var(--ink); }   /* 위아래 10 — 입력칸 · 단추(44)와 줄 테두리 사이 숨 쉴 틈 (이전 0 이라 4 만 남았다), 좌우 20 — 카드 테두리에서 한 걸음 */
    .form-row__field--top { align-self: start; } /* 이전 valign=top 칸 */
    .form-row__label--top { align-self: start; } /* 이전 th.th-top — 위에 붙는 칸 이름(위 여백 16 은 원래 .tbv th 에 져 미적용) */
    .form-card__group:not(:last-child) > .form-row:last-child { border-bottom: 0; } /* 줄 묶음(이전 tbody)의 끝 줄은 밑줄 없음 */
    @media (max-width: 768px) {
        .form-card__title { min-height: 52px; padding: 0 16px; } /* 위아래 가운데 — 이전 6 · 14 는 글자가 위로 붙었다 */
        .form-row { display: flow-root; min-height: 0; } /* 이전 표 줄처럼 안의 float 을 품는다 */
        .form-row__label { display: block; padding: 14px 16px 0; }
        .form-row__field { padding: 6px 16px 14px; }
    }
}