/* 토큰 — 시안 BV 색 · 비율 · 반경 그대로. 색 값은 여기에만 둔다 */
@layer tokens {
    /* 프론트(방문자) 화면 — 시안 BV(글래스 롤) 토큰·비율·색 그대로. 색 값은 :root 토큰에만 둔다 */
    /* ── 토큰 ─────────────────────────────────────────────── */
    :root {
        --ink: #221b29;
        --text: #4a4253;
        --muted: #655d6e;
        --plum: #663a66;
        --plum-deep: #573c57;
        --red: #a4382e;
        --base: #f4f1f5;
        --white: #fff;
        --mesh-lilac: #e0d3f1;
        --mesh-apricot: #f9dcc9;
        --mesh-rose: #f3d3df;
        --mesh-mist: #d9dcef;
        --glass: rgba(255, 255, 255, .52);
        --glass-strong: rgba(255, 255, 255, .76);
        --glass-edge: rgba(255, 255, 255, .85);
        --glass-blur: blur(24px) saturate(160%);
        --hair: rgba(87, 60, 87, .11);
        --hair-strong: rgba(87, 60, 87, .22);
        --tile: rgba(255, 255, 255, .62);
        --shadow: 0 24px 50px -34px rgba(87, 60, 87, .24), 0 4px 14px -8px rgba(87, 60, 87, .09);   /* 입체감 한 단계 낮춤 (2026-10-13) */
        --shadow-soft: 0 10px 28px -22px rgba(87, 60, 87, .21), 0 2px 5px -2px rgba(87, 60, 87, .05);
        --grad-plum: linear-gradient(150deg, #bb7fbb 0%, #964a96 100%);
        --grad-red: linear-gradient(150deg, #cf7466 0%, #a4382e 100%);
        --grad-apricot: linear-gradient(150deg, #f0b08c 0%, #c96c4f 100%);
        --grad-lilac: linear-gradient(150deg, #b3a1de 0%, #7a63b2 100%);
        --grad-text: linear-gradient(100deg, #663a66 10%, #8b3f55 55%, #a4382e 100%);
        --grad-ink: linear-gradient(180deg, #fae6da 0%, #f7dfd0 100%);   /* 강조 단추 — 배경 메쉬의 살구빛. 글자는 --ink */
        --accent-shadow: rgba(201, 108, 79, .35);
        --grad-strong: linear-gradient(180deg, #6f4672 0%, #573c57 100%);   /* 확정 단추 — 확인 · 신청 · 결제 · 로그인. 흰 글자 대비 7.5 이상 */
        --grad-band: linear-gradient(150deg, #8f5a91 0%, #74496f 55%, #5f4262 100%);   /* 홈 서비스 띠 (2026-10-16) — 입금 카드(--grad-wallet)와 확정 단추(--grad-strong) 사이 명도. 글자 둘레 흰 글자 대비 5.7 이상 */
        --glow-band: radial-gradient(60% 85% at 8% 0%, rgba(187, 127, 187, .3), transparent 70%), radial-gradient(55% 80% at 94% 100%, rgba(240, 150, 120, .3), transparent 70%);   /* 띠 안의 빛 — 배경 메쉬(라일락 → 살구)와 같은 결 */
        --grad-wallet: linear-gradient(135deg, #b77fb8 0%, #9a559a 50%, #cc7a70 115%);   /* 배경 메쉬(라일락 → 살구)와 같은 결로, 끝 색을 벽돌 빨강에서 장밋빛 살구로 */
        --glow-hero: radial-gradient(closest-side at 36% 44%, rgba(176, 120, 196, .42), transparent), radial-gradient(closest-side at 72% 62%, rgba(240, 150, 120, .38), transparent);
        --glow-card: radial-gradient(closest-side, rgba(255, 255, 255, .26), transparent);
        /* 흰 유리 농도 */
        --white-25: rgba(255, 255, 255, .25);
        --white-28: rgba(255, 255, 255, .28);
        --white-35: rgba(255, 255, 255, .35);
        --white-50: rgba(255, 255, 255, .5);
        --white-55: rgba(255, 255, 255, .55);
        --white-60: rgba(255, 255, 255, .6);
        --white-66: rgba(255, 255, 255, .66);
        --white-70: rgba(255, 255, 255, .7);
        --white-72: rgba(255, 255, 255, .72);
        --white-80: rgba(255, 255, 255, .8);
        --white-82: rgba(255, 255, 255, .82);
        --white-85: rgba(255, 255, 255, .85);
        --white-88: rgba(255, 255, 255, .88);
        --white-90: rgba(255, 255, 255, .9);
        --white-95: rgba(255, 255, 255, .95);
        /* 자두색 그림자 · 선 농도 */
        --plum-05: rgba(87, 60, 87, .05);
        --plum-07: rgba(87, 60, 87, .07);
        --plum-08: rgba(87, 60, 87, .08);
        --plum-35: rgba(87, 60, 87, .35);
        --plum-40: rgba(87, 60, 87, .4);
        --plum-45: rgba(87, 60, 87, .45);
        --plum-50: rgba(87, 60, 87, .5);
        --plum-80: rgba(87, 60, 87, .8);
        --plum-85: rgba(87, 60, 87, .85);
        --plum-90: rgba(87, 60, 87, .9);
        --plum-tint: rgba(102, 58, 102, .05);
        --shade-22: rgba(60, 40, 70, .22);
        --shade-32: rgba(60, 40, 70, .32);
        --shade-45: rgba(60, 40, 70, .45);
        --scroll-thumb: rgba(60, 40, 70, .25);         /* 스크롤 막대 — 페이지(.scroll-bar) · 약관 · 처리방침 상자(.policy) 공용 */
        --scroll-thumb-hover: rgba(60, 40, 70, .4);    /* 오버 · 끌 때 */
        --photo-shadow: rgba(40, 24, 48, .55);
        --photo-bg: #d9d2dc;
        --red-halo: rgba(164, 56, 46, .14);
        --sheet: rgba(244, 240, 246, .88);
        /* 사용량 그래프 단계 (이전 색 이름 그대로 클래스로) */
        --graph-backup: #9a8f9f;
        --graph-db: #c3b8c6;
        --graph-limegreen: #4caf72;
        --graph-lightgreen: #8bc98f;
        --graph-yellow: #e6c447;
        --graph-orange: #e59a45;
        --graph-tomato: #e0705a;
        --graph-red: #c8372d;
        --ok: #287a44;   /* 흰 유리 위 글자 대비 4.5 이상 — #2f8a4f 는 4.1 (2026-10-16) */
        --msg-default: #655d6e;   /* 문의 안내문 글자 — /script.js focusout 인라인 값과 같다 (3-13). 입력 중 글자는 focus 인라인 #221b29(--ink) */
        --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .35 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        --sans: 'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
        --wrap: 1180px;
        --form-col: 920px;
        --gutter: 32px;
        --r-xl: 32px;
        --r-lg: 26px;
        --r-md: 18px;
        --r-photo: 20px;
        --r-input: 12px;
        --tap: 44px;
        --slide: 4s;
    }
    /* 1024 이하 — 무대는 위아래로 */
    @media (max-width: 1024px) {
        :root { --gutter: 24px; }
    }
    /* 768 이하 — 모바일: 그룹 리스트 문법, 터치 대상 44 (D12) */
    @media (max-width: 768px) {
        :root { --gutter: 16px; --r-xl: 26px; --r-lg: 22px; --r-photo: 16px; }
        /* 모바일 글자 시작선 하나 (⑫-2) — 유리 패널(테두리 1) 안쪽 15 = 표 카드(테두리 없음) 안쪽 16. 머리 패널 · 목록 · 문서 · 폼이 같은 x */
        :root { --inset: 15px; }
    }
}