/* 바탕 — 요소 기본 모양 · 유리 재질 · 입력 칸 */
@layer base {
    html {
        -webkit-text-size-adjust: 100%;
        background:
            radial-gradient(60vw 50vw at 2% -6%, var(--mesh-lilac) 0%, transparent 62%),
            radial-gradient(50vw 44vw at 100% 0%, var(--mesh-apricot) 0%, transparent 60%),
            radial-gradient(56vw 48vw at 70% 46%, var(--mesh-rose) 0%, transparent 62%),
            radial-gradient(60vw 52vw at 0% 74%, var(--mesh-mist) 0%, transparent 60%),
            radial-gradient(54vw 44vw at 98% 98%, var(--mesh-apricot) 0%, transparent 60%),
            var(--base);
    }
    /* PC 스크롤바 — 페이지 · 약관 · 처리방침 상자의 브라우저 스크롤바는 숨기고 front.js 가 iOS 식 겹침 막대(.scroll-bar)를 그린다. 페이지는 칸이 없어 화면 폭이 늘 같다 */
    @media (hover: hover) and (pointer: fine) { html, .policy { scrollbar-width: none; } html::-webkit-scrollbar, .policy::-webkit-scrollbar { display: none; } }
    /* 아이폰식 스크롤바 (약관 · 처리방침 상자 .policy) — 트랙 없이 가는 알약 막대: 폭 22 칸에 테두리 투명 8.5 + padding-box → 막대 5, 가장자리에서 8.5 안쪽, 위아래 13 띄움. 색 · 굵기는 페이지 막대와 공용 토큰 --scroll-thumb
       PC 에서는 이 모양 대신 겹침 막대(.scroll-bar, layout.css)를 쓴다 — 여기는 휴대폰 · 막대 스크립트가 없을 때의 모양 */
    .policy::-webkit-scrollbar { width: 22px; }
    .policy::-webkit-scrollbar-track { margin: 13px 0; background: transparent; }
    .policy::-webkit-scrollbar-thumb { border: 8.5px solid transparent; border-radius: 999px; background: var(--scroll-thumb) padding-box; }   /* 막대 5 — 페이지 막대(.scroll-bar)와 같은 굵기 · 색 */   /* 네 테두리를 같게 — 다르면 안쪽 반경이 타원이 되어 끝이 뾰족해진다 */
    .policy::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }   /* 굵기는 5 그대로 — 색만 진하게 */
    .policy::-webkit-scrollbar-thumb:vertical { min-height: 48px; }   /* 짧은 약관 상자(140)에서 막대가 테두리 몫(18)보다 짧아져 사라지지 않게 */
    .policy::-webkit-scrollbar-button { display: none; height: 0; }
    .policy::-webkit-scrollbar-corner, .policy::-webkit-resizer { background: transparent; }   /* 오른쪽 아래 흰 네모 · 크기 조절 손잡이 테 */
    @supports not selector(::-webkit-scrollbar) { .policy { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; } }   /* 파이어폭스 — 크롬은 표준 속성이 있으면 위 모양을 무시한다 */
    body {
        margin: 0;
        min-height: 100vh;
        color: var(--text);
        font: 400 16px/1.7 var(--sans);
        letter-spacing: -0.01em;
        word-break: keep-all;
        overflow-x: clip;
        -webkit-font-smoothing: antialiased;
    }
    /* 미세 입자 — 유리가 평면 그라디언트처럼 보이지 않게 */
    body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .45; background-image: var(--noise); }
    a { color: inherit; text-decoration: none; }
    h1, h2, h3 { color: var(--ink); letter-spacing: -0.035em; }
    b, strong { color: var(--ink); }
    b, dd, time, .num { font-variant-numeric: tabular-nums; }
    :focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; border-radius: 12px; }
    /* 유리 재질 — 모든 패널 공용. 셸 · 컴포넌트가 배경을 덮어쓸 수 있게 먼저 둔다 (BV 순서) */
    .glass {
        background: var(--glass);
        -webkit-backdrop-filter: var(--glass-blur);
        backdrop-filter: var(--glass-blur);
        border: 1px solid var(--glass-edge);
        box-shadow: var(--shadow), inset 0 1px 0 var(--white-95);
    }
    /* 흰 바탕 옛 그림(상품 상자 · 인증 로고)이 든 판 — backdrop-filter 가 있으면 안의 mix-blend-mode 가 판 바탕과 섞이지 않는다(크롬 실측).
       이 판만 흐림을 끈다. 메쉬가 이미 부드러워 흐림 차이는 거의 보이지 않는다 */
    .glass:has(.blend-white) { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .blend-white { mix-blend-mode: multiply; }
    .page_h1 { display: inline; margin: 0; padding: 0; font-size: inherit; font-weight: inherit; }
    /* 입력 */
    input:not([type]), input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number], input[type=search], select, textarea {
        min-height: var(--tap);
        padding: 0 14px;
        border: 1px solid var(--hair-strong);
        border-radius: var(--r-input);
        background: var(--white-90);
        color: var(--ink);
        font-size: 15px;
        vertical-align: middle;
    }
    textarea { padding: 12px 14px; line-height: 1.6; }
    input:not([type=radio], [type=checkbox]):focus, select:focus, textarea:focus { outline: 2px solid var(--plum); outline-offset: 1px; } /* 라디오 · 체크박스는 마우스로 누른 뒤 네모 테두리가 남지 않게 — 키보드 초점(:focus-visible)만 */
    input::placeholder, textarea::placeholder { color: var(--muted); opacity: .7; }
    input[type=checkbox], input[type=radio] { width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: middle; accent-color: var(--plum); }
    input[readonly] { background: var(--tile); }
    .tel1 { width: 72px; }
    input.addr { width: 300px; max-width: 100%; margin-bottom: 4px; } /* 주소 입력칸만 — 주소록 목록의 주소 칸(td.addr)까지 300 으로 묶어 320 폭에서 표가 넘쳤다 */
    .policy { display: block; width: 100%; height: 140px; padding: 16px 18px; overflow: auto; border: 0; border-radius: var(--r-md); background: var(--white-60); box-shadow: inset 0 0 0 1px var(--white-90); font-size: 14px; line-height: 1.7; color: var(--text); resize: vertical; } /* 약관 상자 — 입력 카드와 같은 모양 */
    .policy_checks { margin: 12px 0 22px; text-align: right; }
}