/* 화면 — 홈 · 상품 · 인증 · 게시판 · 신청 · 내 서비스 · 회원 폼 */
@layer pages {
    /* ── 페이지 ──────────────────────────────────────────── */
    /* 홈 무대 — 서리 유리 하나에 롤과 카피 */
    .content_main:has(> .hero) { padding-top: 0; }
    /* 홈 PC — 카드 줄 → 서비스 · 서비스 → 공지 · 공지 → 하단 간격 (메뉴 바 → 히어로와 같은 50) */
    @media (min-width: 769px) {
        .content_main:has(> .hero) > .sec { padding-bottom: 50px; }
        .content_main:has(> .hero) > .sec--first { padding-top: 46px; }
        .content_main:has(> .hero) .sec__head { margin-bottom: 24px; }   /* 안내 문구 → 서비스 카드 28 → 24 */
        .content_main:has(> .hero) > .sec:last-child { padding-bottom: 0; }
    }
    .hero { position: relative; isolation: isolate; padding: 50px 0 24px; overflow-x: clip; }
    .hero::before { content: ''; position: absolute; z-index: -1; left: 8%; top: 40px; width: 720px; height: 460px; border-radius: 50%; background: var(--glow-hero); filter: blur(34px); }
    .stage { display: grid; grid-template-columns: minmax(0, 700px) minmax(0, 1fr); align-items: center; gap: 46px; padding: 18px 40px 18px 18px; border-radius: var(--r-xl); }
    .stage__copy { padding: 8px 0; justify-self: center; }
    .stage__title { margin-top: 18px; font-size: clamp(36px, 3.2vw, 46px); line-height: 1.14; font-weight: 400; letter-spacing: -0.05em; color: var(--ink); }
    .stage__title strong, .page-top h1 strong { display: inline-block; font-weight: 650; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .05em; }
    .lead { margin-top: 16px; font-size: 16px; line-height: 1.72; color: var(--text); }
    .stage__btns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: max-content; max-width: 100%; gap: 10px; margin-top: 26px; }   /* 단추 폭은 긴 쪽에 맞춰 같게 */
    /* 메인 사진 롤 — 950×400 원본. 1번은 바탕 고정, 2 — 4번이 차례로 겹친다 */
    .roll { position: relative; max-width: 950px; }
    .roll__frame { position: relative; aspect-ratio: 950 / 400; border-radius: var(--r-photo); overflow: hidden; background: var(--photo-bg); box-shadow: 0 22px 40px -26px var(--photo-shadow), 0 0 0 1px var(--white-60); }
    .roll__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .roll__frame img + img { position: absolute; inset: 0; opacity: 0; animation: roll-fade calc(var(--slide) * 4) linear infinite backwards; }
    .roll__frame img:nth-child(2) { animation-delay: 6s; }
    .roll__frame img:nth-child(3) { animation-delay: calc(6s + var(--slide)); }
    .roll__frame img:nth-child(4) { animation-delay: calc(6s + var(--slide) * 2); }
    @keyframes roll-fade {
        0% { opacity: 0; }
        5% { opacity: 1; }
        25% { opacity: 1; }
        30% { opacity: 0; }
        100% { opacity: 0; }
    }
    .roll__frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--white-28); pointer-events: none; }
    .roll__dots { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 7px 9px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)) drop-shadow(0 0 4px rgba(0, 0, 0, .25)); }   /* 바탕 없이 사진 위 — 흰 점 + 옅은 그림자 */
    .roll__dots button { position: relative; width: 6px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .3s ease; }   /* 높이 18 은 누르는 영역, 점은 ::before */
    .roll__dots button::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .55); }
    .roll__dots button::after { content: ''; position: absolute; inset: -13px -3px; }   /* 누르는 영역 — 점(6)은 그대로, 위아래로 넓혀 높이 44 (2026-10-16) */
    .roll__dots button:first-child { width: 18px; animation: dot-first calc(var(--slide) * 4) linear 6s infinite; }
    .roll__dots button + button { animation: dot-on calc(var(--slide) * 4) linear infinite; }
    .roll__dots button:nth-child(2) { animation-delay: 6s; }
    .roll__dots button:nth-child(3) { animation-delay: calc(6s + var(--slide)); }
    .roll__dots button:nth-child(4) { animation-delay: calc(6s + var(--slide) * 2); }
    /* 스크립트 제어(front.js) — 점을 눌러 사진 이동. 자동 넘김은 스크립트 타이머, CSS 애니메이션은 끈다 */
    .roll.is-js .roll__frame img + img { animation: none; transition: opacity .8s ease; }
    .roll.is-js .roll__frame img.is-on { opacity: 1; }
    .roll.is-js .roll__dots button { width: 6px; animation: none; }
    .roll.is-js .roll__dots button.is-on { width: 18px; }
    @keyframes dot-on {
        0%, 26.9% { width: 18px; }
        27%, 100% { width: 6px; }
    }
    @keyframes dot-first {
        0%, 76.9% { width: 6px; }
        77%, 100% { width: 18px; }
    }
    /* 섹션 */
    .sec { position: relative; padding: 0 0 84px; }
    .sec--first { padding-top: 76px; }
    .sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
    .sec__head--center { display: block; text-align: center; margin: 0 auto 44px; max-width: 640px; }
    .eyebrow { display: inline-block; font-size: 14px; font-weight: 600; color: var(--plum); letter-spacing: .02em; }
    .sec__head h2 { margin-top: 8px; font-size: clamp(30px, 3.2vw, 40px); line-height: 1.2; font-weight: 400; letter-spacing: -0.045em; }
    .sec__head p { margin-top: 12px; font-size: 16px; color: var(--muted); }
    .lead, .svc__card > p { text-wrap: pretty; }
    /* 서비스 카드 */
    .svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .svc__card { display: flex; flex-direction: column; padding: 28px 28px 24px; border-radius: var(--r-xl); transition: transform .25s ease, background-color .25s ease; }
    .svc__card:hover { transform: translateY(-4px); background: var(--glass-strong); }
    .svc__card h3 { margin-top: 24px; font-size: 23px; font-weight: 600; }
    .svc__card > p { margin-top: 8px; font-size: 16px; line-height: 1.7; color: var(--text); }
    /* 서비스 띠 — 밝은 유리 화면에 한 번만 짙은 자두색 구역을 둬 강약을 준다 (2026-10-16). 카드는 흐림 없는 흰 판 */
    .band { position: relative; isolation: isolate; overflow: hidden; padding: 56px 40px 40px; border-radius: var(--r-xl); background: var(--grad-band); box-shadow: var(--shadow); }
    .band::before { content: ''; position: absolute; z-index: -1; inset: 0; background: var(--glow-band); pointer-events: none; }
    .band .sec__head h2 { color: var(--white); }
    .band .sec__head p { color: var(--white-95); }
    .band .svc__card { background: var(--white-90); border-color: var(--white-60); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .band .svc__card:hover { background: var(--white); }
    .svc__foot { margin-top: auto; padding-top: 30px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
    .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; color: var(--ink); }
    .price b { font-size: 36px; line-height: 1; font-weight: 300; letter-spacing: -0.05em; }
    .price > span { font-size: 16px; font-weight: 500; }
    .price small { flex-basis: 100%; margin-top: 6px; font-size: 14px; color: var(--muted); }
    /* 특장점 — 유리판 하나를 3칸으로 */
    /* 공지 · 입금 */
    .board { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
    .notice { border-radius: var(--r-xl); padding: 24px 24px 14px; display: flex; flex-direction: column; }
    .notice__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px 8px; }
    .notice ul { margin-top: 6px; }
    .notice li + li { border-top: 1px solid var(--hair); }
    .notice li a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px; min-height: 70px; padding: 0 6px; border-radius: 14px; transition: background-color .2s ease; }
    .notice li a:hover { background: var(--white-60); }
    .notice strong { font-size: 17px; font-weight: 500; letter-spacing: -0.025em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .notice time { font-size: 15px; color: var(--muted); }
    .notice__empty { padding: 24px 6px; color: var(--muted); }
    .wallet { border-radius: var(--r-xl); padding: 24px; display: flex; flex-direction: column; }
    .wallet__card { display: block; margin-top: 18px; padding: 20px 22px 18px; border-radius: 20px; color: var(--white); background: var(--grad-wallet); box-shadow: 0 14px 26px -18px var(--plum-50), inset 0 1px 0 var(--white-25); position: relative; overflow: hidden; cursor: pointer; }
    .wallet__card::after { content: ''; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: var(--glow-card); }
    .wallet__card small { display: block; font-size: 14px; opacity: .92; }
    .wallet__card b { display: block; margin-top: 14px; font-size: 25px; font-weight: 400; color: var(--white); letter-spacing: -0.02em; }
    .wallet__card span { display: block; margin-top: 2px; font-size: 14px; opacity: .92; }
    /* 지갑 위젯 링크 목록 — 레거시 tr.rows 훅과 이름이 겹치지 않게 linklist */
    .linklist { margin: 10px 0 16px; }
    .linklist a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; border-bottom: 1px solid var(--hair); font-size: 16px; font-weight: 500; color: var(--ink); }
    .linklist a:last-child { border-bottom: 0; }
    .linklist a:hover { color: var(--plum); }
    .wallet .pill { width: 100%; margin-top: auto; }
    /* 하위 화면 머리 패널 */
    .page-top { position: relative; isolation: isolate; padding: 52px 0 40px; }
    .page-top .stage { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); padding: 18px 18px 18px 48px; gap: 48px; }
    .page-top .stage--solo { grid-template-columns: minmax(0, 1fr); padding: 36px 48px; }
    .page-top h1 { margin-top: 18px; font-size: clamp(36px, 3.6vw, 50px); line-height: 1.12; font-weight: 400; letter-spacing: -0.05em; }
    .page-top .lead { max-width: 30em; }
    .page-top .roll__frame img { animation: none; }
    @media (min-width: 1025px) {
        .page-top .stage:not(.stage--solo) .stage__copy { justify-self: start; } /* 사진 패널 카피는 왼쪽 여백 48 에 붙인다 — 가운데 두면 왼쪽만 120 가까이 빈다 */
    }
    .more-svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .more-svc .widget { padding: 24px 26px 24px; }
    .more-svc .widget__big { margin-top: 0; } /* 라벨 → 큰 숫자 → 설명을 위에서부터 붙인다 */
    .more-svc .widget__big b { font-size: 40px; }
    /* 요금 · 상세 */
    .content_main:has(> .page-top) { padding-top: 0; }
    .content_main > .sec:last-child { padding-bottom: 0; }
    .page-top h1 { display: block; }
    .page-top--compact { padding-bottom: 28px; }
    .page-top--compact h1 { margin-top: 0; font-size: clamp(28px, 2.6vw, 36px); }
    .colo__note { line-height: 1.7; border-left: 1px solid var(--hair); }
    .doc { padding: 36px 40px; border-radius: var(--r-xl); font-size: 16px; line-height: 1.8; }
    .doc p + p, .doc img + p { margin-top: 18px; }
    .doc__title, .colo__title { margin-bottom: 16px; font-size: 22px; font-weight: 600; }
    .colo__title { margin: 64px 0 20px; }
    .doc__photo { display: block; margin: 24px 0; border-radius: var(--r-photo); }
    .colo__figure { display: block; height: auto; margin: 0 auto 24px; border-radius: var(--r-md); }
    .colo__rack { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 24px; }
    .colo__rack .colo__figure { margin: 0; }
    .detail { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 40px; padding: 32px; border-radius: var(--r-xl); }
    .detail__box { display: flex; flex-direction: column; align-items: center; gap: 28px; padding-top: 12px; }
    /* 상품 표지 — 옛 상자 그림(GIF) 대신 토큰으로 그린 판. 입금 카드(.wallet__card)와 같은 결: 그러데이션 · 빛 원 · 흰 글자 (2026-10-16) */
    .plan-cover { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; width: 220px; aspect-ratio: 4 / 5; padding: 22px; border-radius: var(--r-lg); color: var(--white); background: var(--grad-wallet); box-shadow: 0 18px 34px -22px var(--plum-50), inset 0 1px 0 var(--white-25); }
    .plan-cover--sslc { background: var(--grad-red); box-shadow: 0 18px 34px -22px var(--shade-45), inset 0 1px 0 var(--white-25); }
    .plan-cover::after { content: ''; position: absolute; z-index: -1; right: -60px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: var(--glow-card); }
    .plan-cover__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--white-25); box-shadow: inset 0 0 0 1px var(--white-35); }
    .plan-cover__icon svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    .plan-cover__svc { margin-top: auto; font-size: 14px; font-weight: 500; opacity: .9; }
    .plan-cover__name { margin-top: 4px; font-size: 28px; line-height: 1.2; font-weight: 600; color: var(--white); letter-spacing: -0.04em; word-break: keep-all; }
    .plan-cover__code { margin-top: 6px; font-size: 14px; opacity: .85; }
    .detail__name { margin-bottom: 16px; font-size: 20px; font-weight: 600; color: var(--ink); }
    .detail__spec .spec-table th { width: 160px; }
    .detail__txt pre, .doc pre { font: inherit; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
    .spec-table td.detail__txt { height: auto; padding: 20px 16px 22px; font-size: 15px; line-height: 1.75; color: var(--text); }   /* 사양표 끝 설명 칸 — 위 줄 테두리에 글자가 붙던 것 */
    .folds { margin-top: 24px; padding: 8px 28px; border-radius: var(--r-xl); }
    .detail_fold { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; appearance: none; padding: 0; border: 0; background: none; text-align: left; font-size: 18px; font-weight: 600; letter-spacing: inherit; word-spacing: inherit; color: var(--ink); cursor: pointer; }   /* 접기 단추 — 단추 기본 모양을 걷어 제목 줄로 */
    .detail_fold + .detail_text + .detail_fold, .detail_text + .detail_fold { border-top: 1px solid var(--hair); }
    .detail_fold__icon { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--plum); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }   /* 접힘 › · 펼침 ⌄ — 옛 gif 대신 선 아이콘 */
    .detail_fold[aria-expanded=true] .detail_fold__icon { transform: rotate(90deg); }
    .detail_text { display: none; padding: 4px 0 32px; font-size: 15px; line-height: 1.8; }
    .detail_text.is-open { display: block; }
    .spec__title { margin: 24px 0 12px; font-size: 16px; font-weight: 600; }
    .spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-radius: var(--r-md); background: var(--white-60); box-shadow: inset 0 0 0 1px var(--white-90); overflow: hidden; }
    .spec > div { padding: 14px 16px; border-left: 1px solid var(--hair); }
    .spec > div:first-child { border-left: 0; }
    .spec dt { font-size: 13px; font-weight: 600; color: var(--muted); }
    .spec dd { margin-top: 4px; color: var(--ink); }
    .spec__note { margin-top: 8px; font-size: 14px; color: var(--muted); }
    /* 인증 · 회원 폼 */
    /* 폼 화면 — 920 한 열. 제목 패널 · 카드 · 단추가 같은 축 (⑫-1) */
    .content_main:has(.form-table, .form-card, .auth, .form-result, .domain_add_form) { max-width: calc(var(--form-col) + var(--gutter) * 2); }
    .auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 40px; padding: 40px 44px; border-radius: var(--r-xl); }
    .auth__intro p { font-size: 16px; color: var(--text); }
    .auth__intro p + p { margin-top: 10px; font-size: 15px; color: var(--muted); }
    .auth__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
    .auth__badge { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; padding: 10px 16px 10px 10px; border-radius: var(--r-md); background: var(--white-66); box-shadow: inset 0 1px 0 var(--white-90), 0 2px 5px -3px var(--plum-35); } /* SSL/TLS 보안 접속 표지 — 단추와 같은 한 겹 입체 (옛 Comodo 배지 대신) */
    .auth__badge-text { display: grid; gap: 1px; }
    .auth__badge-text strong { font-size: 14px; font-weight: 600; }
    .auth__badge-text small { font-size: 13px; color: var(--muted); }
    .auth__form { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-lg); background: var(--tile); box-shadow: inset 0 0 0 1px var(--white-90); }
    .auth__form form { display: flex; flex-direction: column; }
    .auth__label { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
    .auth__form input:not([type=hidden]) + .auth__label { margin-top: 16px; }   /* 숨은 uid · upw 뒤 첫 칸 이름에는 붙지 않게 — 카드 위가 16 더 비었다 */
    .auth__form #login_btn { margin-top: 24px; width: 100%; }
    .form-table { width: 100%; }
    .form-table > tbody > tr > th, .form-table > tr > th { width: 180px; }
    :is(.form-table, .form-card) .addr { display: block; width: 420px; margin-top: 8px; }
    .trap_field { position: absolute; left: -9999px; width: 1px; height: 1px; }
    .field-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
    .field-notice { margin-top: 6px; font-size: 14px; color: var(--red); }
    .field-notice:empty { display: none; }
    .field-hint { color: var(--muted); }
    .field-wide { width: 420px; } /* 긴 칸 — 주소 칸(.addr 420)과 같은 폭. 입력 폭은 짧은 · 보통 · 긴 3단계 */
    /* 결제 수단 선택 카드 — 라디오 그대로(이름 · 값 · 스크립트 무변경), 겉모양만 카드. 고르면 자주빛 테 · 면 + 오른쪽 위 체크 */
    .pay-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; padding-block: 12px; }
    .pay-way { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 16px; border-radius: var(--r-md); background: var(--white-72); box-shadow: inset 0 0 0 1px var(--hair-strong); cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; }
    .pay-way:hover { background: var(--white-90); }
    .pay-way input { position: absolute; opacity: 0; pointer-events: none; }
    .pay-way__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--plum); background: var(--plum-tint); }
    .pay-way__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .pay-way__name { font-size: 16px; font-weight: 600; color: var(--ink); }
    .pay-way:has(input:checked) { background: rgba(154, 85, 154, .08); box-shadow: inset 0 0 0 2px var(--plum); }
    .pay-way:has(input:checked) .pay-way__icon { color: var(--white); background: var(--grad-plum); }
    .pay-way:has(input:checked)::after { content: ''; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--plum) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
    .pay-way:has(input:focus-visible) { outline: 2px solid var(--plum); outline-offset: 3px; }
    .pay-way:has(input:disabled) { cursor: default; } /* 입금 대기 건이 있어 은행입금으로 잠긴 경우 — 선택된 채 고정 */
    .pay-way:has(input:disabled:not(:checked)) { opacity: .5; }
    .choice { display: inline-flex; align-items: center; min-height: var(--tap); margin-right: 18px; cursor: pointer; }
    .form-lead { margin: 0 0 24px; text-align: center; color: var(--text); }
    .form-result { padding: 48px 28px; text-align: center; font-size: 17px; color: var(--ink); border-radius: var(--r-xl); background: var(--tile); box-shadow: inset 0 0 0 1px var(--white-90); }   /* 결과 문구 — 맨바닥에 뜨지 않게 카드 */
    .form-note { margin: 28px 0 36px; text-align: center; font-size: 15px; color: var(--plum); }
    .form-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 8px; }
    .policy_checks label { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); cursor: pointer; }
    /* 게시판 · 문서 */
    .seg--wrap { flex-wrap: wrap; border-radius: 26px; }
    .board-list { padding: 10px 14px; border-radius: var(--r-xl); }
    .bw_body { width: 100%; border-collapse: separate; border-spacing: 0; }
    .bhc { padding: 14px 16px; font-size: 14px; font-weight: 600; color: var(--muted); text-align: center; border-bottom: 1px solid var(--hair-strong); }
    .bhc.bw_title { text-align: left; }
    .blc { height: 60px; padding: 0 16px; text-align: center; color: var(--text); border-bottom: 1px solid var(--hair); cursor: pointer; white-space: nowrap; }
    .blc--title { width: 100%; text-align: left; font-size: 16px; font-weight: 500; color: var(--ink); white-space: normal; }
    .bbrl:hover .blc { background: var(--white-55); }
    .blmm { display: none; }
    .bcmm { padding: 24px 28px; font-size: 15px; line-height: 1.8; color: var(--text); background: var(--tile); border-bottom: 1px solid var(--hair); }
    .bcmm__text { overflow-wrap: anywhere; }
    .bcmm .bbs_own_only { margin: 24px 0 0 auto; }
    .bvip { padding-right: 10px; font-size: 13px; color: var(--muted); }
    .is-anon .bbs_user_only, .is-not-admin .bbs_admin_only { display: none; }
    #webd .red { margin-left: 6px; font-size: 12px; font-style: normal; color: var(--muted); }
    .blbl { display: flex; align-items: flex-start; gap: 0 8px; padding: 18px 0 6px; } /* 단추 · 쪽 번호 줄 — 목록 바로 아래 (이전 49 는 목록과 동떨어져 보였다) */
    .blbl > .page_block { flex: 1; min-width: 0; }
    .page_links { text-align: center; }
    .page_box { padding: 9px 0 10px; } /* 모바일 쪽 번호(pagem) — 이전 칸 여백(10 · 16) 자리 */
    .bbs-search { display: flex; justify-content: center; gap: 8px; padding: 17px 1px 9px; } /* 이전 표 칸 기본 여백 1 포함 */
    .bbs-search input { width: 220px; }
    .content_main .page_block, .content_main .page_box { margin: 8px auto; }
    .content_main .page_btns, .content_main .page_btnn, .content_main .page_btn_prev, .content_main .page_btn_next, .content_main .page_btn_hide {
        float: none; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; margin: 0 3px; padding: 0 10px;
        border: 0; border-radius: 999px; font: 500 15px/1 var(--sans); color: var(--text); background: transparent;
    }
    .content_main .page_btns:hover { color: var(--ink); background: var(--white-70); }
    .content_main .page_btnn { color: var(--ink); font-weight: 600; background: var(--grad-ink); cursor: default; }
    .content_main .page_btn_prev, .content_main .page_btn_next { color: var(--plum); }
    .content_main .page_btn_hide { visibility: hidden; }
    .bbs-post .field-full, .field-full { width: 100%; }
    .bbs-post__memo { height: 320px; }
    .form-actions-cell { text-align: center; }
    .form-row.form-actions-cell { display: block; padding: 8px 16px; } /* 글쓰기 단추 줄 — 두 칸을 차지하던 칸 */
    .form-card textarea { width: 100%; height: 200px; margin: 10px 0; } /* 이전 .tbv textarea */
    .form-actions-cell .pill + .pill { margin-left: 8px; }
    .doc-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; }
    .sidenav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: var(--r-lg); background: var(--white-50); border: 1px solid var(--glass-edge); }
    .sidenav a { display: flex; align-items: center; min-height: var(--tap); padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--text); }
    .sidenav a:hover { background: var(--white-70); color: var(--ink); }
    .sidenav a.is-on { color: var(--ink); font-weight: 600; background: var(--white); box-shadow: 0 2px 7px -4px var(--plum-35), 0 0 0 .5px var(--plum-08); }   /* 탭 묶음(.seg)과 같은 낮은 높이감 */
    .doc__pre { font: inherit; font-size: 16px; line-height: 1.8; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
    .doc__pre img { display: block; height: auto; border-radius: var(--r-photo); }
    .doc__sign { margin-top: 16px; text-align: right; color: var(--ink); }
    .policy--doc { height: 800px; padding: 32px 36px; border-radius: var(--r-xl); font-size: 15px; line-height: 1.8; resize: none; } /* 처리방침 전문 — 높이 800, 넘치는 내용은 상자 안 스크롤 */
    .pds-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; margin-bottom: 16px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--white-60); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--white-90); }
    .pds-item > * { grid-column: 2; }
    .pds-item > .pds-item__icon { grid-column: 1; grid-row: 1 / span 4; text-align: center; }
    .pds-body a.download:has(> .pds-item__dl) { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; margin-left: 4px; padding: 0 11px 0 8px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--plum); background: var(--plum-tint); vertical-align: middle; }   /* 내려받기 — 옛 초록 그림 단추 대신 글자 칩 */
    .pds-body a.download:has(> .pds-item__dl):hover { background: var(--white-90); }
    .pds-item__dl { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .pds-body .download { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
    .pds-body .download a { color: var(--plum); }
    .pds-body .application_name { margin-bottom: 4px; font-size: 18px; font-weight: 600; color: var(--ink); }
    .pds-body .application_memo { padding-top: 10px; font-size: 15px; color: var(--text); }
    .pds-body .application_comment { margin-bottom: 6px; font-weight: 600; color: var(--red); }
    .pds-body .application_right { padding-top: 8px; font-size: 13px; color: var(--muted); }
    /* 자료실 하나뷰 추천 배너 (2026-10-16) — 자료실 카드와 같은 유리 결, 하나뷰 아이콘 색(하늘 · 민트)은 빛으로만 */
    .pds-promo { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; column-gap: 20px; margin-bottom: 20px; padding: 24px 28px; border-radius: var(--r-lg); background: radial-gradient(70% 160% at 0% 0%, rgba(141, 211, 244, .3), transparent 62%), radial-gradient(55% 140% at 100% 100%, rgba(54, 207, 174, .16), transparent 66%), var(--white-72); box-shadow: var(--shadow), inset 0 0 0 1px var(--white-90); }
    .pds-promo__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px; background: var(--white); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--hair); }
    .pds-promo__icon svg { width: 54px; height: 54px; }
    .pds-promo__eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--plum); }
    .pds-promo__title { margin: 2px 0 6px; font-size: 21px; font-weight: 700; }
    .pds-promo__title small { margin-left: 4px; font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
    .pds-promo__text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--text); word-break: keep-all; }
    .pds-promo__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
    .pds-promo__chips li { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--plum); background: var(--plum-tint); }
    .pds-promo__cta { white-space: nowrap; }
    @media (max-width: 768px) {
        .pds-promo { grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; padding: 20px 18px; }
        .pds-promo__icon { width: 56px; height: 56px; border-radius: 14px; align-self: start; }
        .pds-promo__icon svg { width: 42px; height: 42px; }
        .pds-promo__title { font-size: 19px; }
        .pds-promo__cta { grid-column: 1 / -1; margin-top: 16px; }
    }
    /* 신청 · 결제 */
    .area > .form-table, .policy_block + .form-table, .form-table + .form-table { margin-top: 0; }
    .content_main .tbv.form-table, .content_main .form-card { margin-bottom: 32px; }
    .block_title { text-align: center; font-weight: 600; color: var(--ink); }
    .tbv th.block_title { text-align: center; color: var(--ink); }
    /* 폼 화면 정렬축 하나 (⑫-2) — 표 머리 제목 · 약관 동의 · 안내 · 단추를 칸 이름과 같은 왼쪽 축(카드 안쪽 16)에.
       동의 · CSR 선택 label 은 input 을 글자 앞으로(마크업, name · 부모 label 그대로) — 칸 이름 축에 상자가 선다 */
    .form-table > tbody > tr:first-child > td[colspan], .form-table > tr:first-child > td[colspan], .tbv.form-table th.block_title { padding-left: 20px; text-align: left; font-size: 16px; font-weight: 600; color: var(--ink); }
    .content_main:has(.form-table, .form-card) :is(.policy_checks, .form-note, .form-lead) { padding-left: 20px; text-align: left; }   /* 카드 안 칸 이름과 같은 왼쪽 축 20 */
    :is(.form-actions, #pay_btn_row) .cancel { margin-left: 0; } /* 단추 사이는 gap 하나 — 레거시 .cancel 여백이 겹쳐 22 가 되지 않게 */
    .form-actions > :is(.pill--ink, .pill--strong) { order: 1; }   /* 단추 묶음은 가운데, 주 단추(확인 · 서비스내역)는 늘 오른쪽 — 모달 단추와 같은 순서. 마크업 순서가 화면마다 달라도 같게 */
    .form-actions { margin-top: 36px; }
    .form-actions .pill--lg { min-width: 140px; }
    .field-desc { padding: 8px 0; font-size: 14px; color: var(--muted); }
    .field-hint { font-size: 14px; color: var(--muted); } /* 한 줄 묶음(field-line) 끝의 짧은 안내 */
    .csr_input { width: 100%; height: 120px; margin-bottom: 10px; }
    .policy_block { margin-bottom: 32px; }
    .submit_area { margin-top: 12px; }
    /* 아이디 안내 · 결정 표시 — #xid_notice 는 규칙 위반 때 JS 가 보인다 (초기 숨김 3-8) */
    #xid_notice { display: none; }
    #wid_cell_d .xid_decided:not(:empty) { font-size: 17px; font-weight: 700; color: var(--ink); } /* 결정한 아이디 */
    .xid_decided_url { font-weight: 700; color: var(--plum); }
    .domain_plus_area { clear: both; padding: 10px 0; }
    .domain_row { clear: both; display: flex; align-items: center; gap: 8px; padding: 6px 0; }
    .domain_btn { min-width: 36px; }
    .domain_btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
    #policy_area { clear: both; margin-top: 45px; } /* 위 .area 카드와 같은 간격 — 마지막 카드 밑에 붙지 않게 */
    .pay_bank { display: none; }
    .pay_bank > tr:first-child { display: none; } /* 은행입금 대기 안내 — 대기 건이 있을 때만 pay.js 가 보인다 */
    .deposit_account_row > th, .deposit_account_row > td { height: 88px; }
    .deposit_account_row > td { font-weight: 700; color: var(--ink); }
    .pay_bank_account { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
    .pay_bank_account b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
    .pay_bank_account span { color: var(--text); }
    .pay_bank { border-top: 1px solid var(--hair); } /* 결제방법 줄과 입금 안내 사이 — 묶음 끝 줄 밑줄 없음 규칙 때문에 선이 빠졌다 */
    .pay_bank_desc { margin-top: 6px; font-size: 13px; color: var(--muted); }
    .pay_bank .form-row__field { padding-block: 10px; }
    @media (min-width: 769px) { :is(.pay_bank .form-row:has(.pay_bank_desc), .form-row:has(.field-notice:not(:empty))) .form-row__label { align-self: start; padding-top: 22px; } } /* 칸 이름을 입력칸 높이 가운데에 — 아래 안내 줄(입금 안내 · 칸 아래 오류 안내)까지 합친 가운데로 처지지 않게 */
    .check-line { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; }
    .check-line input { margin: 0; }
    #pay_btn_row { display: flex; justify-content: center; gap: 12px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--hair); }
    #pay_btn_row .pill { width: min(320px, 100%); } /* 결제 단추 하나 — 가운데 · 넓게, 진한 자주(결제는 큰 단추 예외 2026-10-14) */
    #pg_browser_list { margin: 28px 0 0; } /* 아래 여백 0 — 화면 끝이라 푸터 위 50 에 32 가 더해졌다. 옛 브라우저 로고 그림은 빼고 글자만 (2026-10-16) */
    #pg_browser_list > div { text-align: center; font-size: 13px; color: var(--muted); }
    #pg_loading { display: none; position: absolute; left: 0; right: 0; bottom: 110px; text-align: center; }
    #pg_loading > div { display: inline-block; padding: 25px 40px; border-radius: var(--r-md); background: var(--white); box-shadow: var(--shadow), 0 0 0 1px var(--hair); }
    #pg_loading > div > div { text-align: center; }
    #pg_loading > div > div:last-child { margin-top: 10px; font-size: 13px; }
    #pg_loading img { display: inline-block; }
    .pay_tbl { width: 100%; }
    .payfin_area { display: none; }
    .pay_way_disabled { color: var(--muted); opacity: .6; }
    .order_result_title { padding: 20px 0; font-size: 26px; font-weight: 400; text-align: center; color: var(--ink); border-bottom: 1px solid var(--hair); }
    .order_result_notice { padding: 34px 20px; text-align: center; color: var(--muted); }
    .order_result_notice div { margin-top: 20px; text-align: center; color: var(--ink); }
    .order_result_account { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; cursor: pointer; }   /* 눌러서 복사 — 옛 "[복사]" 글자는 눌러도 아무 일이 없었다 */
    .order_result_tbl { margin: 24px auto 0; }
    /* 내 서비스 */
    html.bare { background: var(--white); }
    html.bare body { min-height: 0; overflow-x: visible; }
    html.bare body::before { display: none; }
    .abook_mini { min-width: 460px; }
    .abook_mini__note { padding: 16px 10px 10px; font-size: 14px; color: var(--muted); }
    .dash { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; margin-bottom: 20px; }
    .dash__services .widget__big { margin-top: 0; padding: 18px 0 14px; } /* 라벨과 건수 사이 빈 공간 — 홈 설비 카드처럼 위에서 시작 */
    .dash__services .widget__sub { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hair); } /* 카드 바닥 줄 — 환영 카드 높이로 늘어난 남는 공간은 건수와 바닥 줄 사이로 (홈 상품 카드 svc__foot 문법) */
    .dash__services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
    .dash__welcome { padding: 22px 24px; border-radius: var(--r-lg); font-size: 15px; }
    .dash__hello { margin-bottom: 14px; color: var(--text); }
    .dash__hello a { font-size: 18px; font-weight: 700; color: var(--ink); }
    .mydetail { padding: 8px 0; border-bottom: 1px solid var(--hair); color: var(--text); }
    .dash__wish { margin-top: 14px; text-align: center; color: var(--muted); }
    .dash__blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .bblock { min-width: 0; padding: 22px 24px; border-radius: var(--r-lg); font-size: 15px; line-height: 1.7; }
    .bblock--link { cursor: pointer; }
    .bblock__title { margin-bottom: 12px; font-size: 16px; font-weight: 600; }
    .bblock__line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bblock__line small { color: var(--muted); }
    .ureq { width: 100%; cursor: pointer; }
    .ureq th { padding: 8px 4px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--hair-strong); }
    .ureq td { padding: 10px 4px; text-align: center; font-size: 14px; border-bottom: 1px solid var(--hair); }
    .rows.is-hover > td { background: var(--white-60); }
    .nocontents { padding: 24px 0; text-align: center; font-size: 14px; color: var(--muted); }
    .noinfo { color: var(--red); font-size: 13px; }
    .list-panel { padding: 10px 14px; border-radius: var(--r-xl); }
    .list-panel > table { width: 100%; background: none; box-shadow: none; }
    .list-panel th { padding: 14px 10px; font-size: 14px; font-weight: 600; color: var(--muted); text-align: center; border-bottom: 1px solid var(--hair-strong); }
    .list-panel td { padding: 10px; text-align: center; color: var(--ink); border-bottom: 1px solid var(--hair); }
    .list-panel > table > tbody:last-of-type > :is(tr:last-child, tr:has(+ .details_row:last-child)) > td { border-bottom: 0; }   /* 마지막 줄 아래 선은 패널 테두리와 겹쳐 보여 뺀다 (2026-10-16) */
    .list-panel .col-no { color: var(--muted); }
    .list-panel .col-amt { text-align: right; }
    #my_webs_tbl th:first-child, #my_webs_tbl td:first-child { text-align: left; }
    /* 짧은 값 칸은 한 줄 — 전화 · 날짜가 '-' 에서 끊겨 3줄이 되고, 수정 · 삭제 단추가 위아래로 쌓이던 것 (820 · 1024) */
    @media (min-width: 769px) {
        /* 대시보드 — 신청/결제 내역 3건 이상일 때만 두 줄 차지. 그 밖에는 마지막 블록이 두 칸 → 빈 칸 · 빈 바닥 없음 */
        .bblock--orders:has(.rows ~ .rows ~ .rows) { grid-row: span 2; }
        .dash__blocks:not(:has(.rows ~ .rows ~ .rows)) > .bblock:last-child { grid-column: 1 / -1; }
        .list-panel :is(td[data-label*='전화'], td[data-label*='날짜'], .col-acts, .col-no), #my_webs_tbl .rows > td:first-child { white-space: nowrap; } /* 계정 행만 — 상세 행 칸(그 행의 첫 칸)까지 묶으면 관리도구 단추 줄이 꺾이지 않는다 */
    }
    .rows > td:nth-child(1) > span { margin-right: 12px; color: var(--muted); }
    .web_domain_plus { font-size: 12px; color: var(--muted); }
    .web_prod_name, .web_stat_txt, .web_expr_day { font-size: 14px; }
    .web_stat { white-space: nowrap; }
    .used_graph { width: 206px; margin: 0 auto; padding: 2px; border-radius: 999px; background: var(--white-80); box-shadow: inset 0 0 0 1px var(--hair); }
    .used_graph_box { position: relative; display: flex; height: 18px; overflow: hidden; border-radius: 999px; font-size: 0; text-align: left; }
    .used_graph_bar { flex: none; width: calc(var(--pct, 0) * 1%); height: 100%; }
    .used_graph_bar--backup { background: var(--graph-backup); }
    .used_graph_bar--db { background: var(--graph-db); }
    .used_graph_bar--limegreen { background: var(--graph-limegreen); }
    .used_graph_bar--lightgreen { background: var(--graph-lightgreen); }
    .used_graph_bar--yellow { background: var(--graph-yellow); }
    .used_graph_bar--orange { background: var(--graph-orange); }
    .used_graph_bar--tomato { background: var(--graph-tomato); }
    .used_graph_bar--red { background: var(--graph-red); }
    .used_graph_label { position: absolute; inset: 0; text-align: center; line-height: 18px; }
    .used_graph_per_num, .used_graph_per_per { font-size: 12px; font-weight: 600; color: var(--ink); }
    .bank_ready_txt { padding-top: 4px; font-size: 13px; line-height: 1.6; text-align: left; }
    .col-stat { white-space: nowrap; }
    .col-stat > * { vertical-align: middle; }
    .web_ssl_stat { margin: 0 8px 0 10px; }
    /* SSL 표지 — 옛 자물쇠 gif 대신 글자 칩. 적용중은 초록, 미적용은 흐린 회색(누르면 신청 안내) */
    .ssl-badge { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 9px 0 7px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
    .ssl-badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .ssl-badge--on { color: var(--ok); background: rgba(47, 125, 79, .1); }
    .ssl-badge--off { color: var(--muted); background: var(--plum-07); cursor: pointer; }   /* 바탕을 옅게 — 회색 바탕에서 글자 대비 3.9 (2026-10-16) */
    .ssl-badge--off:hover { color: var(--plum); background: var(--plum-tint); }
    /* 계정 바로가기 화살표 · 상세 단추 쉐브론 · 도움말 — 옛 gif 대신 선 아이콘 */
    .arrow_icon { width: 15px; height: 15px; margin-left: 4px; vertical-align: -2px; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s ease; }
    .web_id_link:hover .arrow_icon { stroke: var(--plum); }
    .details_view_btn { margin-left: 4px; gap: 4px; padding: 0 10px 0 14px; }
    .details_view_btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .help_icon { width: 17px; height: 17px; margin-left: 4px; vertical-align: -3px; fill: none; stroke: var(--plum); stroke-width: 1.8; stroke-linecap: round; cursor: help; }
    [data-stat='4'] [class$=stat_txt], [data-stat='4'] [class$=expr_day] { color: var(--muted); }
    [data-stat='4'] [class$=_id], [data-stat='4'] [class$=prod_name] { color: var(--muted); text-decoration: line-through; }
    .details_area { display: none; width: 0; min-width: 100%; padding: 20px 10px; } /* 좌우 10 — 목록 칸 글자선(td 10)과 같은 x. 폭 0 · 최소 100% — 펼친 격자가 목록 표 최소 폭을 키워 820 에서 넘치지 않게 칸 폭만 채운다 */
    .details_row > td { height: 0; padding: 0; border-bottom: 0; }
    .details_view_btn { cursor: pointer; }
    .details_loading { margin: 20px; text-align: center; }
    .details_loading img { display: inline-block; }
    .details_tools { padding: 0 0 16px; text-align: left; }
    .details_tools__title { margin-bottom: 12px; color: var(--muted); }
    .details_tools__title b { margin-right: 6px; font-size: 17px; }
    .details_tools .pill { margin: 0 4px 6px 0; }
    .details_tools__gap { display: inline-block; width: 10px; }
    .details_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .details_table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: var(--r-md); background: var(--white-70); box-shadow: inset 0 0 0 1px var(--white-90); }
    .details_table th, .details_table td { padding: 8px 12px; font-size: 13px; font-weight: 400; text-align: right; border-bottom: 1px solid var(--hair); }
    .details_table th { color: var(--muted); }
    .details_table .details_table__head { text-align: left; background: var(--white-60); }
    .details_table tr:last-child > :is(th, td) { border-bottom: 0; }
    /* 상세 카드 제목 — 한글(사용날짜 · 계정사양 …)이 제목, 영문(Date · Spec …)은 작은 머리글. 한글 화면에서 영문이 큰 제목이던 위계만 뒤집는다(문구 그대로) */
    .details_table__head div:first-child { font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--muted); }
    .details_table__head div:last-child { margin-top: 1px; font-size: 16px; font-weight: 700; color: var(--ink); }
    .details_table .details_table__warn { text-align: center; color: var(--white); background: var(--red); }
    .details_ok { color: var(--ok); }
    .details_table img { display: inline-block; vertical-align: middle; }
    /* 표 안 바로가기(전송량) — 칸 높이를 키우는 단추 대신 밑줄 글자 */
    .details_link { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair-strong); cursor: pointer; }
    .details_link:hover { color: var(--plum); }
    .usage_rate_txt { font-size: 12px; color: var(--muted); }
    .page_notice_bottom { margin-top: 20px; font-size: 14px; color: var(--muted); }
    .page_notice_bottom { list-style: disc; }
    .page_notice_bottom > li { line-height: 1.8; }
    .page_notice_bottom > li + li { margin-top: 4px; }
    .pay_result_0, .pay_result_1 { font-size: 13px; }
    .pay_result_0 { color: var(--muted); }
    .cs_list .subjects { text-align: left; cursor: pointer; }
    .subject--root { color: var(--ink); }
    .subject--reply { color: var(--muted); }
    .new_badge { margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 700; color: var(--white); background: var(--red); }
    .cs_list .rows { cursor: pointer; }
    .msgs { display: none; }
    .list-panel .msgs__body { padding: 24px 28px; text-align: left; line-height: 1.8; background: var(--tile); }
    .reginfo { margin-top: 10px; text-align: right; font-size: 13px; color: var(--muted); }
    .mod_btn { margin-left: 10px; }
    .wh_domains_title { margin: 0 0 16px; text-align: center; font-size: 18px; color: var(--ink); }
    #wh_domains td.is-yes { color: var(--ok); }
    #wh_domains td.is-no { color: var(--red); }
    .domain_add_form { display: flex; flex-wrap: wrap; gap: 10px; padding: 24px; border-radius: var(--r-lg); }
    .domain_add_form > input[type=text] { flex: 1 1 200px; min-width: 0; } /* 세 칸이 카드 폭을 나눠 쓴다 — 모바일은 한 줄에 하나씩 꽉 차게 */
    .abook_bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
    .abook_groups, .abook_tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
    .abook_groups .seg { margin-top: 0; } /* 그룹 고르기 탭 묶음 — 제목 무대 안 탭과 달리 도구줄에 놓인다 */
    /* 주소록 목록 (2026-10-16) — 도구줄(전체 선택 · 개수 · 정렬 탭), 줄 동작은 2칸 격자, 주소추가는 그 격자와 같은 폭 */
    /* 도구줄 — 개수 · 선택 동작(그룹 이동 · 삭제 · 선택 해제) · 정렬. 메뉴(74) 아래에 붙어 따라온다. 고르면 자두빛으로 켜진다 */
    .addr_bar { position: sticky; top: 82px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 4px; padding: 8px 10px; border-radius: var(--r-md); background: var(--white-90); box-shadow: inset 0 0 0 1px var(--white-95), 0 8px 20px -16px var(--plum-35); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); transition: background-color .2s ease, box-shadow .2s ease; }
    .addr_bar.is-active { background: rgba(250, 238, 246, .94); box-shadow: inset 0 0 0 1px var(--plum-35), 0 10px 24px -18px var(--plum-50); }
    .addr_bar__count { min-width: 76px; font-size: 14px; color: var(--muted); white-space: nowrap; }
    .addr_bar__count b { font-size: 16px; font-weight: 700; color: var(--plum); }
    .addr_bar.is-active .addr_bar__count { color: var(--ink); font-weight: 600; }
    .addr_bar__acts { display: flex; align-items: center; gap: 6px; }
    .addr_bar__del:not([aria-disabled=true]) { color: var(--red); }
    .addr_bar__clear { min-height: 38px; padding: 0 10px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); background: transparent; cursor: pointer; }
    .addr_bar__clear:hover { color: var(--ink); background: var(--white-72); }
    .addr_sort { margin: 0 0 0 auto; }
    /* 선택 칸 — 머리 칸 전체 선택과 줄 체크박스가 같은 세로줄(왼쪽 맞춤 · 같은 안쪽 여백). 도구줄 글자도 같은 시작선 */
    .addr_list .col-no { width: 1%; padding-left: 10px; text-align: left; white-space: nowrap; }
    .addr_list .col-no .choice { margin-right: 0; gap: 8px; }
    .addr_all_text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* PC 는 체크박스만(읽기 도구에는 이름), 모바일은 글자도 */
    .addr_list .col-acts { width: 1%; white-space: nowrap; }
    .row-acts { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 6px; vertical-align: middle; }
    .addr_list th.col-acts .addr_add { width: 100%; }   /* 칸 폭 = 아래 수정 · 삭제 격자 폭(th · td 안쪽 여백 같음) */
    .addr_list > tbody > tr:hover > td { background: var(--white-55); }
    .addr_list > tbody > tr.is-selected > td { background: var(--plum-tint); }
    /* 그룹 이동 모달 */
    .addr_move__lead { margin: 0 0 14px; color: var(--text); }
    .addr_move__lead b { color: var(--plum); }
    .addr_move__groups { display: flex; flex-wrap: wrap; gap: 8px; }
    .addr_move__new { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hair); }
    .addr_move__label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
    .addr_move__new .field-line input { flex: 1 1 160px; min-width: 0; }
    .addr_list .addr .keep-word { white-space: nowrap; } /* 주소 낱말 단위 줄바꿈 — abook.js 가 낱말마다 감싼다 (이전 wordBreakKeepAll 플러그인) */
    /* 회원 폼 */
    .my_info_form :not(.form-row):is(.ut0, .ut1) { display: none; } /* 회원유형 글자 · 추가정보 단추 — my-info.js 가 회원유형대로 보인다. 입력 카드 줄은 hidden 속성 */
    .quit_unable { color: var(--red); }
    .form-options { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; min-height: 42px; margin: 8px 0 24px; }
    .form-options__more { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 600; color: var(--plum); } /* 추가정보 펼침 — 글자 단추(a role=button) */
    .form-options__more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .form-options { padding: 0 20px; }   /* 카드 안 칸 이름과 같은 왼쪽 축 */
    .form-options label { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); }
    .form-card textarea[name=msg] { color: var(--msg-default); }
    :is(.form-table, .form-card) .field-wide { max-width: 100%; }
    :is(.form-table, .form-card) :is(input[name=mail1], input.mail2) { width: 200px; }
    :is(.form-table, .form-card) select.mail3 { margin-left: 8px; } /* 메일 도메인 칸과 고르기 사이 — 낱말 사이 빈칸 4 만 남아 붙어 보였다 */
    /* ── 레거시 호환층 — 기존 클래스에 BV 모양 ────────────── */
    .content_main a:not([class]):hover { color: var(--plum); }   /* 본문 글자 링크만 — 단추 · 탭 · 카드(클래스 있는 a)는 각자 오버 모양 */
    .content_main h3 { font-size: 20px; font-weight: 600; }
    .content_main center { display: block; margin: 10px 0; }
    /* 제목 블록(제목 · 영문 부제) — 패널 없이 제목 글자만, 부제는 eyebrow 로 위에 (2026-10-16)
       제목만 든 유리 패널이 화면마다 한 장씩 쌓여 카드 위 카드가 됐다. 탭 · 설명 · 사진이 있는 머리(page-top)만 패널 */
    .page_title { clear: both; display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; margin: 22px 0 30px; text-align: center; }
    .page_title > div:first-child { color: var(--ink); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.12; font-weight: 400; letter-spacing: -0.05em; }
    .page_title > div:last-child:not(:first-child) { font-size: 14px; font-weight: 600; color: var(--plum); letter-spacing: .04em; text-transform: uppercase; }
    .page_error_simple_msg { max-width: var(--form-col); margin: 0 auto; padding: 64px 28px; font-size: 16px; color: var(--ink); text-align: center; border-radius: var(--r-xl); background: var(--tile); box-shadow: inset 0 0 0 1px var(--white-90); }   /* 오류 문구 — 카드 */
    [class^=page_notice] { margin-top: 24px; padding: 22px 26px; font-size: 14px; border-radius: var(--r-md); background: var(--tile); box-shadow: inset 0 0 0 1px var(--white-90); }
    [class^=page_notice]:has(> li) { padding-left: 48px; }   /* 글머리 안내 — 글머리가 왼쪽 테두리에 붙지 않게 */
    .nodata { padding: 90px 20px; text-align: center; color: var(--muted); }
    /* 목록 밖 빈 상태 문구 — 머리 줄만 남은 목록 패널 아래 맨바닥에 뜨지 않게 같은 폭의 타일로 */
    .content_main > .nodata { margin-top: 16px; padding: 64px 20px; border-radius: var(--r-xl); background: var(--tile); box-shadow: inset 0 0 0 1px var(--white-90); }
    .area { position: relative; margin-top: 45px; }
    .emphasis1, .pay_amt, #order_amt, form[name=pay] .amt { font-weight: 700; color: var(--ink); }
    .with_img_btn { float: left; margin-right: 14px; }
    .cancel { margin-left: 10px; }
    .date_html > div { display: inline-block; }
    .date_html > div:last-child { color: var(--muted); }
    .web_id_link { color: var(--ink); cursor: pointer; }
    .web_id_link:hover { color: var(--plum); }
    a, [class$=btn], [id$=btn] { cursor: pointer; }
    /* 레거시 단추 */
    [class^=btz], [class^=btw] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 36px;
        padding: 0 14px;
        border: 1px solid var(--glass-edge);
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        color: var(--ink);
        background: var(--white-72);
        box-shadow: var(--shadow-soft);
        white-space: nowrap;
        cursor: pointer;
        vertical-align: middle;
    }
    [class^=btz]:hover, [class^=btw]:hover { background: var(--white); color: var(--plum); }
    .btz, .btz02, .btw02 { color: var(--ink); border-color: transparent; background: var(--grad-ink); }
    .btz04, .btw03 { color: var(--white); border-color: transparent; background: var(--grad-red); }
    .btz:hover, .btz02:hover, .btw02:hover, .btz04:hover, .btw03:hover { color: var(--white); background: var(--grad-plum); }
    /* 레거시 표 — 유리판 위 hairline 표 */
    .tbr, .tbll, .tbv { font-size: 15px; background: var(--white-60); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--white-90); }
    .tbr { border-collapse: collapse; }
    .tbr th, .tbr td { height: 52px; border-bottom: 1px solid var(--hair); }
    .tbr th { width: 120px; padding: 0 20px 0 0; text-align: right; font-size: 14px; font-weight: 600; color: var(--muted); }
    .tbr td { padding: 0 24px; color: var(--ink); }
    .tbll { width: 100%; }
    .tbll th, .tbll td { height: 52px; padding: 0 12px; text-align: center; word-break: keep-all; }
    .tbll th { font-size: 14px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--hair-strong); }
    .tbll td { color: var(--ink); border-bottom: 1px solid var(--hair); }
    .tbv { border-collapse: separate; border-spacing: 0; }
    .tbv th, .tbv td { height: 52px; border-bottom: 1px solid var(--hair); }
    .tbv tr:last-child > th, .tbv tr:last-child > td { border-bottom: 0; }
    .tbv th { padding: 10px 20px; text-align: left; font-size: 14px; font-weight: 600; color: var(--muted); }
    .tbv td { padding: 10px 20px; color: var(--ink); }   /* 입력 카드(.form-row)와 같은 위아래 10 · 좌우 20 */
    /* ── 반응형 ──────────────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
        .roll__frame { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
        .roll__frame::-webkit-scrollbar { display: none; }
        .roll__frame img, .roll__frame img + img { position: static; flex: 0 0 100%; opacity: 1; animation: none; scroll-snap-align: start; }
        .roll__frame::after { display: none; }
        .roll__dots { display: none; }
        .pill, .svc__card, .notice a, .drawer__sheet { transition: none; }
    }
    @media (max-width: 1024px) {
        .hero { padding-top: 36px; }
        .hero::before { left: 50%; transform: translateX(-50%); }
        .stage, .page-top .stage { grid-template-columns: 1fr; gap: 28px; padding: 14px 14px 36px; }
        .roll { margin: 0 auto; width: 100%; }
        .stage__copy { padding: 0 24px; text-align: center; justify-self: stretch; }
        .lead { margin-left: auto; margin-right: auto; max-width: 32em; }
        .stage__btns { margin-inline: auto; }
        .page-top .stage { padding: 36px 14px 36px; }
        .page-top .roll { display: none; }
        .svc { gap: 16px; }
        .svc__card { padding: 24px 22px 22px; }
        .svc__foot { flex-wrap: wrap; row-gap: 12px; } /* 가격과 바로가기가 한 줄에 안 들어가면 바로가기만 다음 줄로 — '원'이 숫자 아래로 떨어지지 않게 (≤900) */
        .svc__foot .more { margin-left: auto; }
        .price b { font-size: 30px; }
        .board { grid-template-columns: 1fr; }
        .colo__rack { grid-template-columns: 1fr; }
        .dash { grid-template-columns: 1fr; }
        .details_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .more-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } /* 3칸은 라벨과 더보기 단추가 겹친다 — 2칸 + 네임서버 한 줄 */
        .more-svc > .widget:last-child { grid-column: 1 / -1; }
    }
    @media (min-width: 769px) and (max-width: 1024px) {
        /* 태블릿 목록 표 — 모바일 카드(≤768)에는 걸지 않는다(선택자가 더 세서 카드 칸 좌우 15 를 6 으로 덮었다) */
        /* 웹호스팅 관리 — 상태 칸 단추 · 표지 · 만료일이 한 줄로 이어져 표가 카드 밖으로 넘쳤다. 줄바꿈 허용, 그래프는 줄인다 */
        .col-stat { white-space: normal; }
        .col-stat > * { margin-block: 3px; }
        .used_graph { width: 150px; }
        .list-panel > table > * > tr:not(.details_row) > :is(th, td) { padding-inline: 6px; } /* 칸 많은 목록(도메인 연결 10칸)이 820 에서 카드 밖으로 넘치지 않게 */
        .details_area { padding-inline: 6px; } /* 펼친 상세 — 목록 칸 글자선(6)과 같은 x */
    }
    @media (max-width: 768px) {
        .hero { padding: 20px 0 16px; }
        .hero::before { width: 420px; height: 420px; top: 120px; }
        .stage, .page-top .stage { gap: 22px; padding: 8px 8px 28px; border-radius: 24px; }
        .page-top .stage { padding-top: 28px; }
        .page-top .stage--solo, .page-top .stage { padding: 28px var(--inset); }
        .page-top .stage__copy { padding: 0; }
        .stage__copy { padding: 0 12px; text-align: left; }
        .stage__title { margin-top: 16px; font-size: clamp(31px, 8.6vw, 38px); }
        .lead { margin-top: 14px; font-size: 16px; line-height: 1.7; }
        .stage__btns { width: auto; margin: 24px 0 0; grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }   /* 폭 가득 반씩, 좁으면 위아래 — 폭은 늘 같게 */
        .roll__dots { left: 10px; bottom: 10px; padding: 6px 8px; gap: 5px; }
        .roll__dots button { width: 5px; }
        .roll__dots button::before { top: 6.5px; height: 5px; }
        .roll__dots button:first-child { width: 14px; }
        .roll.is-js .roll__dots button { width: 5px; }
        .roll.is-js .roll__dots button.is-on { width: 14px; }
        @keyframes dot-on { 0%, 26.9% { width: 14px; } 27%, 100% { width: 5px; } }
        @keyframes dot-first { 0%, 76.9% { width: 5px; } 77%, 100% { width: 14px; } }
        .mydetail a, .bblock__title a, .dash__hello a, .form-options__more { display: inline-flex; align-items: center; min-height: var(--tap); }
        .bblock__line a { display: block; min-height: var(--tap); padding: 9px 0; overflow: hidden; text-overflow: ellipsis; } /* 한 줄 목록 — inline-flex 는 부모 말줄임을 끊어 끝 글자가 잘렸다(320) */
        .web_ssl_stat a[href] { position: relative; }
        .web_ssl_stat a[href]::after { content: ''; position: absolute; inset: -9px -4px; } /* 터치 영역 44 — 칩(26)은 그대로, 바깥 투명 띠로 넓힌다 */
        [class^=btz], [class^=btw] { min-height: var(--tap); }
        .group_link, .list-panel td a.btn { display: inline-flex; align-items: center; min-height: var(--tap); } /* 주소록 그룹 · 인증서 도메인 링크 — 데이터가 생겨 드러난 터치 대상 */
        .choice { min-width: var(--tap); }
        .abook_mini th, .abook_mini td { padding: 0 6px; }
        .sec { padding-bottom: 72px; }
        .sec--first { padding-top: 64px; }
        .sec__head { margin-bottom: 18px; }
        .sec__head--center { margin-bottom: 24px; }
        .sec__head h2 { font-size: 28px; }
        .svc { grid-template-columns: 1fr; gap: 12px; }
        .svc__card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; padding: 20px; }
        .svc__card .appicon--lg { width: 46px; height: 46px; border-radius: 13px; }
        .svc__card h3 { margin: 0; align-self: center; font-size: 21px; }
        .svc__card > p { grid-column: 1 / -1; margin-top: 14px; font-size: 15px; }
        .band { padding: 36px 10px 10px; }
        .svc__foot { grid-column: 1 / -1; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--hair); align-items: center; }
        .price b { font-size: 30px; }
        .price small { flex-basis: auto; margin: 0; }
        .board { gap: 16px; }
        .notice { padding: 18px 14px 8px; }
        .notice__head { padding: 0 6px 6px; }
        .notice li a { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; min-height: 0; padding: 13px 6px; }
        .notice strong { grid-column: 1; white-space: normal; font-size: 16px; line-height: 1.45; }
        .notice time { grid-column: 1; grid-row: 2; font-size: 14px; }
        .notice .chev { grid-column: 2; grid-row: 1 / 3; }
        .wallet { padding: 18px; }
        .linklist { margin-bottom: 0; }
        .wallet .pill { margin-top: 12px; }
        .page-top { padding: 20px 0 28px; }
        .page-top h1 { font-size: clamp(32px, 9vw, 40px); }
        .more-svc { grid-template-columns: 1fr; gap: 12px; }
        .dash { grid-template-columns: 1fr; }
        .dash__services { grid-template-columns: 1fr; gap: 12px; }
        .dash__blocks { grid-template-columns: 1fr; gap: 12px; }
        .list-panel { padding: 4px 0; }
        .list-head, .list-cards > thead, #my_webs_tbl > thead { display: none; }
        /* 목록 카드 — tr 은 table-row 그대로(토글 행 3-7), 칸만 block */
        /* 목록 표의 칸만 — 펼친 상세 안 표(details_table)까지 카드 칸이 되면 칸 이름 · 값이 위아래로 흩어진다 */
        .list-panel > table > * > tr > td { display: block; padding: 6px var(--inset); text-align: left; border-bottom: 0; }
        .list-panel > table > * > tr:not(.details_row) > td:first-child { padding-top: 16px; }
        .list-panel > table > * > tr:not(.details_row) > td:last-child { padding-bottom: 16px; border-bottom: 1px solid var(--hair); }
        .list-panel > table > * > :is(tr:last-child, tr:has(+ .details_row:last-child)) > td:last-child { border-bottom: 0; }
        /* 상세 펼침 행 — block 칸의 height 0 은 내용을 가두지 못해 아래 안내 · 푸터 위로 넘친다. 접힌 동안은 내용 없음 → 높이 0 */
        .list-panel .details_row > td { height: auto; padding: 0; }
        .details_area { padding: 4px var(--inset) 16px; }
        .list-panel td[data-label] { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px 12px; text-align: right; }
        .list-panel td[data-label]::before { content: attr(data-label); flex: none; margin-right: auto; color: var(--muted); font-size: 14px; text-align: left; }
        .list-panel .col-amt { text-align: right; }
        .used_graph { margin: 4px 0; }
        .details_grid { grid-template-columns: 1fr; }
        .abook_mini { min-width: 0; }
        .doc-layout { grid-template-columns: 1fr; gap: 16px; }
        .sidenav { position: static; flex-direction: row; flex-wrap: wrap; border-radius: 26px; }
        .sidenav a { flex: 1 1 auto; justify-content: center; }
        .board-list { padding: 6px calc(var(--inset) - 6px); } /* 행 안쪽 6 과 합쳐 --inset */
        .bhr { display: none; }
        /* 공지 행 — 홈 공지 패널 모바일 행(13 · 제목 16/1.45 · 날짜 14)과 같은 리듬. 작성자 · 날짜는 한 기준선 */
        .bbrl { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; padding: 13px 6px; border-bottom: 1px solid var(--hair); }
        .bbrl > .blc { display: block; height: auto; padding: 0; border-bottom: 0; font-size: 14px; color: var(--muted); text-align: left; }
        .bbrl > .blc:first-child { grid-row: 1 / 3; align-self: center; margin-right: 10px; font-size: 0; }
        .is-not-admin .bbrl > .blc:first-child { display: none; }
        .bbrl > .blc--title { grid-column: 2 / -1; grid-row: 1; width: auto; margin-bottom: 2px; font-size: 16px; line-height: 1.45; color: var(--ink); }
        .bbrl > .blc:nth-child(3) { grid-column: 2; margin-right: 10px; }
        .bbrl > .blc:nth-child(4) { grid-column: 3; }
        .bcmm { display: block; padding: 18px 14px; }
        /* 문의 목록 행 — 공지 행과 같은 문법: 제목 한 줄, 아래 서비스 · 아이디 · 등록 한 기준선 + 상태 단추 오른쪽. 펼침 행(.msgs)은 table-row 그대로 (3-7) */
        .cs_list > tbody > .rows { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 14px var(--inset); border-bottom: 1px solid var(--hair); }
        .cs_list > tbody > .rows > td { display: block; padding: 0; border: 0; font-size: 14px; color: var(--muted); text-align: left; }
        .cs_list > tbody > .rows > td.col-no, .cs_list > tbody > .rows:has(.subject--reply) > td:not(.subjects) { display: none; }
        .cs_list > tbody > .rows > td.subjects { grid-column: 1 / -1; margin-bottom: 6px; font-size: 16px; line-height: 1.45; }
        .cs_list > tbody > .rows > .subject--root { color: var(--ink); }
        .cs_list > tbody > .rows:has(.subject--reply) > td.subjects { margin: 0; font-size: 15px; color: var(--muted); }
        .cs_list > tbody > .rows > td:last-child { grid-column: 4; grid-row: 2; }
        .cs_list > tbody > tr:last-child, .cs_list > tbody > .rows:has(+ .msgs:last-child) { border-bottom: 0; }
        .list-panel .msgs__body { padding: 18px var(--inset); }
        .domain_add_form { padding: 16px; }
        .domain_add_form .pill { flex: 1 1 100%; }
        .wh_domains_title { padding: 0 16px; text-align: left; } /* 아래 목록 패널 글자선(32)과 같은 x */
        [class^=page_notice]:not(:has(> li)) { padding-left: var(--inset); padding-right: var(--inset); } /* 글머리 li 가 있는 안내는 들여쓰기 유지 */
        .blbl { flex-direction: column; align-items: stretch; text-align: center; }
        .bbs-search input { width: 100%; }
        .content_main .page_btns, .content_main .page_btnn, .content_main .page_btn_prev, .content_main .page_btn_next, .content_main .page_btn_hide { min-width: var(--tap); height: var(--tap); margin: 0 1px; } /* 숫자 5 + 앞뒤 단추가 한 줄 */
        .doc__pre { font-size: 15px; }
        .auth { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px var(--inset); }
        .auth__form { padding: 20px; }
        .auth__form { order: -1; } /* 입력이 먼저 — tabindex 1 — 3 순서와 같다 */
        .auth__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .auth__links .pill { padding: 0 12px; }
        .auth__links .pill:first-child { grid-column: 1 / -1; }
        .page_title { align-items: flex-start; margin: 10px 0 20px; padding: 0 var(--inset); text-align: left; }
        .page_title > div:first-child { font-size: clamp(28px, 8vw, 34px); }
        /* 모바일 입력칸은 칸 폭 전부 — 단추가 붙은 줄(field-line)은 남는 폭만 */
        :is(.form-table, .form-card) input:is([type=text], [type=password], [type=email], [type=tel], [type=number], :not([type])):not(.tel1) { width: 100%; }
        :is(.form-table, .form-card) .field-line > input[type] { flex: 1 1 160px; width: auto; min-width: 0; }
        :is(.form-table, .form-card) :is(input[type][name=mail1], input[type].mail2) { width: calc(50% - 14px); }
        .form-lead { text-align: left; }
        .with_img_btn { float: none; margin: 0 0 8px; }
        /* 주소록 머리 줄 — 칸 이름은 숨기고 주소추가 단추만 남긴다 (머리 줄 전체를 숨기면 추가 단추가 사라진다) */
        .addr_list > thead { display: table-header-group; }
        .addr_list > thead > .list-head { display: table-row; }
        .addr_list .list-head > th { display: none; }
        .addr_list .list-head > th:last-child { display: block; padding: 12px 8px; text-align: right; border-bottom: 1px solid var(--hair); }
        .addr_list th.col-acts .addr_add { width: auto; }
        .addr_list :is(.col-acts, .col-no) { width: auto; }   /* PC 의 칸 폭 최소(1%)는 카드에서 풀어 준다 — 주소추가는 오른쪽, 수정 · 삭제 줄 바탕은 카드 폭 전부 */
        .addr_list td[data-label]:empty { display: none; }   /* 빈 항목(회사 · 우편번호 등)은 카드에서 줄째 뺀다 */
        .addr_bar { top: 78px; margin: 0 4px 8px; padding: 8px 12px; }   /* 바깥 4 + 안 12 = 카드 글자 시작선(16)과 같은 x, 테두리와 글자 사이 12 */
        .addr_bar__acts { margin-left: auto; }
        .addr_sort { flex: 1 1 100%; margin-left: 0; }
        .addr_list > thead > .list-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--hair); }   /* 모바일 머리 줄 — 전체 선택(왼쪽) · 주소추가(오른쪽) */
        .addr_list .list-head > th:first-child { display: block; padding: 8px var(--inset); border-bottom: 0; }
        .addr_list td.col-no { padding-left: var(--inset); }   /* 카드 체크박스 = 머리 줄 전체 선택 = 카드 글자 시작선 */
        .addr_list .list-head > th:last-child { border-bottom: 0; }
        .addr_all_text { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 14px; font-weight: 600; color: var(--text); }
        .seg--sm a { min-height: var(--tap); }

        :is(.form-table, .form-card) select.mail3 { display: block; margin: 8px 0 0; }
        /* 나눠 받는 칸(휴대폰 · 사업자 등록번호 3칸)은 한 줄 — 칸 폭 100% 규칙이 칸마다 줄을 떨어뜨려 '-' 만 남은 줄이 생긴다 */
        .form-card .field-split { display: flex; align-items: center; gap: 6px; }
        .form-card .field-split > input[type] { flex: 1 1 0; width: 0; min-width: 0; }
        .form-card .field-split > .tel1 { flex: none; width: 88px; }
        .form-table > tbody > tr > th, .form-table > tbody > tr > td { display: block; width: auto; } /* tbody · tr 표시값은 건드리지 않는다 — 초기 숨김 · jQuery show() 유지 (3-7 · 3-8) */
        .form-table > tbody > tr > th { height: auto; padding: 14px 16px 0; border-bottom: 0; }
        .form-table > tbody > tr > td { height: auto; padding: 6px 16px 14px; }
        :is(.form-table, .form-card) :is(input[type=text], input[type=password], .addr), .field-wide { max-width: 100%; }
        :is(.form-table, .form-card) .addr, .field-wide { width: 100%; }
        .form-actions .pill { flex: 1 1 140px; }
        #pay_btn_row .pill { width: 100%; }
        .pay-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 6px 14px; }
        .pay-way { min-height: 60px; padding: 0 12px; gap: 10px; }
        .pay_bank .form-row__field { padding-block: 6px 14px; }
        .pay_bank .check-line { min-height: 32px; }
        .policy_checks { text-align: left; }
        .table--cards .acts .pill--ink { color: var(--red); font-weight: 700; border-left: 1px solid var(--hair); }
        .table--cards .colo__note { display: block; padding: 14px 16px; text-align: left; border-left: 0; }
        .doc { padding: 24px var(--inset); font-size: 15px; }
        .doc br { display: none; }
        .colo__title { margin-top: 48px; }
        .colo__rack { grid-template-columns: 1fr; }
        .detail { grid-template-columns: 1fr; gap: 24px; padding: 20px var(--inset); }
        .pds-item { padding: 18px 16px; } /* 테두리 없는 카드 — 안쪽 16 */
        .detail__box { align-items: stretch; gap: 16px; padding-top: 0; }   /* 표지는 가로 한 줄 판, 신청 단추는 그 아래 */
        .plan-cover { width: 100%; aspect-ratio: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 16px; align-items: center; padding: 18px 20px; }
        .plan-cover__icon { grid-row: 1 / 4; }
        .plan-cover__svc { margin-top: 0; }
        .plan-cover__name { margin-top: 0; font-size: 24px; }
        .plan-cover__code { margin-top: 0; }
        .detail__spec .spec-table th { width: 110px; }
        .folds { padding: 4px 18px; }
        .spec { grid-template-columns: 1fr; }
        .spec > div { display: flex; justify-content: space-between; gap: 12px; border-left: 0; border-top: 1px solid var(--hair); }
        .spec > div:first-child { border-top: 0; }
        .spec dd { margin-top: 0; text-align: right; }
    }
    @media (max-width: 400px) {
        .lead br { display: none; }
        .wallet__card b { font-size: 22px; white-space: nowrap; }
        .sec__head h2 { font-size: 26px; }
        /* 쪽 번호 — 첫 · 끝 쪽의 빈 자리(이전 · 다음 없음)를 접고 단추 사이 여백 0: 숫자 5 + 단추 1 이 320 에서 한 줄 */
        .content_main .page_btn_hide { display: none; }
        .content_main .page_btns, .content_main .page_btnn, .content_main .page_btn_prev, .content_main .page_btn_next { margin: 0; }
        /* 미니 주소록 — 번호 칸을 접어 휴대전화가 한 줄, 양끝은 화면 끝에서 12 */
        .abook_mini :is(th, td):first-child { display: none; }
        .abook_mini :is(th, td):nth-child(2) { padding-left: 12px; }
        .abook_mini :is(th, td):last-child { padding-right: 12px; }
        .abook_mini td { white-space: nowrap; }
        .abook_mini :is(th, td):not(:nth-child(2)):not(:last-child) { padding-inline: 3px; }
        .abook_mini .pill { padding: 0 12px; }
    }
    /* 389 이하 — 쪽 번호 7개(이전 · 숫자 5 · 다음 × 44)가 목록 패널 안에 안 들어간다: 현재 쪽 앞뒤 1개만 남겨 한 줄. 나머지 쪽은 이웃 번호 · 이전 · 다음으로 닿는다 */
    @media (max-width: 389px) {
        .content_main .page_btns:not(.page_btnn + .page_btns):not(:has(+ .page_btnn)) { display: none; }
        .pay-ways { grid-template-columns: 1fr; } /* 결제수단 두 칸이 좁아 고른 표시(오른쪽 위 체크)가 이름에 닿는다(360 · 320) — 한 줄에 하나 */
    }
}