/* GENERATED by scripts/design/sync_tokens.mjs from frontend/shared/ui/tokens.css - do not edit this copy;
   edit the source and run the script (tests/frontend/v63c_parts.test.mjs refuses a stale copy). */
:root {
  --color-orange-900: #8f3207;
  --color-orange-700: #c4460b;
  --color-orange-500: #f4600f;
  --color-orange-gloss-top: #ff7b30;
  --color-orange-gloss-bottom: #e0480a;
  --color-orange-100: #ffe7d9;
  --color-orange-50: #fff5ee;
  --color-ink-900: #171717;
  --color-ink-700: #3f3b37;
  --color-ink-500: #6a655f;
  --color-ink-400: #6a655f;
  --color-line-border: #ddd6cd;
  --color-line-hair: #e9e4dd;
  --color-bg-beige: #f6f4f0;
  --color-bg-paper: #ffffff;
  --color-bg-cream: #fbf8f3;
  --color-bg-chip: #f3f0eb;
  --color-bg-dark: #1c1a18;
  --color-green: #1f7a4d;
  --color-yellow: #9a5b12;
  --color-red: #cc2f26;
  --color-plan-basic: #a39d95;
  --color-plan-plus: #f4600f;
  --color-plan-pro: #c4460b;
  --color-plan-premium: #171717;
  --color-orange-pressed-top: #e8550f;
  --color-orange-pressed-bottom: #b83e08;
  --color-red-50: #fdeeea;
  --color-disabled-ink: #a39d95;
  --color-control-line: #cfc8bf;
  --color-switch-off: #e3ded6;
  --color-track: #efeae3;
  --color-handle: #d9d3cb;
  --color-well: #ece7e0;
  --color-cell-line: #eeeae4;
  --color-cell-hint: #7d766e;
  --color-tile: #fdecdf;
  --color-plan-plus-back: #f79057;
  --color-plan-pro-back: #e3a68a;
  --color-plan-pro-mid: #d67e54;
  --color-plan-pro-ink: #9a3412;
  --color-plan-premium-back: #909090;
  --color-plan-premium-mid: #5d5d5d;
  --color-on-dark-muted: #b9b1a7;
  --color-on-dark-faint: #8a847c;
  --color-on-dark-line: rgba(255, 255, 255, 0.16);
  --color-toast: rgba(23, 23, 23, 0.92);
  --color-toast-action: #ff8a4c;
  --color-scrim: rgba(23, 23, 23, 0.45);
  --color-viewer: #0e0d0c;
  --color-kakao: #fee500;
  --color-kakao-ink: rgba(0, 0, 0, 0.85);
  --color-naver: #03c75a;
  --color-google-line: #747775;
  --color-google-ink: #1f1f1f;
  --color-orange-button-top: #cc4a0b;
  --color-orange-button-bottom: #b3400a;
  --gradient-orange: linear-gradient(180deg, var(--color-orange-button-top) 0%, var(--color-orange-button-bottom) 100%);
  --gradient-orange-bright: linear-gradient(180deg, var(--color-orange-gloss-top) 0%, var(--color-orange-gloss-bottom) 100%);
  --gradient-orange-pressed: linear-gradient(180deg, var(--color-orange-button-bottom) 0%, var(--color-orange-900) 100%);
  --shadow-gloss: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(158, 51, 5, 0.22);
  --shadow-gloss-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(158, 51, 5, 0.1);
  --shadow-segment: 0 1px 3px rgba(28, 26, 24, 0.1);
  --shadow-split: 0 1px 3px rgba(23, 23, 23, 0.08);
  --shadow-knob: 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-float: 0 8px 24px rgba(28, 26, 24, 0.14);
  --shadow-pill: 0 6px 18px rgba(28, 26, 24, 0.14);
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-orange-500);
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --radius-chip: 999px;
  --radius-small: 8px;
  --radius-segment: 9px;
  --radius-medium: 10px;
  --radius-button: 12px;
  --radius-tile: 14px;
  --radius-card: 16px;
  --radius-sheet: 20px;
  --grid-phone-margin: 20px;
  --grid-phone-gap: 12px;
  --grid-pc-content: 1200px;
  --grid-pc-column: 78px;
  --grid-pc-gap: 24px;
  --grid-pc-margin: max(40px, calc((100% - 1200px) / 2));
  --grid-side: 282px;
  --grid-main: 894px;
  --grid-public-card: 792px;
  --grid-public-inner: 712px;
  --grid-margin: var(--grid-phone-margin);
  --phone-margin: 20px;
  --rhythm-section: 48px;
  --rhythm-head: 16px;
  --rhythm-group: 24px;
  --touch-min: 44px;
  --control-lg: 48px;
  --control-md: 40px;
  --control-sm: 32px;
  --bar-app: 56px;
  --bar-site-pc: 72px;
  --bar-bottom: 64px;
  --bar-tabs: 53px;
  --strip-consent: 52px;
  --toast-height: 44px;
  --pill-install: 40px;
  --motion-sheet: 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --field-height: 36px;
  --field-radius: var(--radius-button);
  --field-pad-x: 14px;
  --field-name-gap: 6px;
  --field-gap: 12px;
  --field-fill: var(--color-bg-chip);
  --field-fill-typing: var(--color-bg-paper);
  --field-ring: inset 0 0 0 2px var(--color-orange-500);
  --field-ring-error: inset 0 0 0 1.5px var(--color-red);
  --field-hint: var(--color-ink-400);
  --font-sans: "Noto Sans KR", "Noto Sans KR Fallback", "Noto Sans KR Fallback Malgun", "CC Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", sans-serif;
  --font-number: "DM Sans", "DM Sans Fallback", "Noto Sans KR", "Noto Sans KR Fallback", "Noto Sans KR Fallback Malgun", "CC Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", sans-serif;
  --font-hand: "Nanum Pen Script", "Nanum Pen Script Fallback", cursive;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-member-page: "CC Pretendard", "CC Pretendard Fallback", "CC Pretendard Fallback Malgun", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", sans-serif;
  --text-display-size: 48px;   --text-display-line: 56px;   --text-display-weight: 900; --text-display-track: -0.03em;
  --text-headline-size: 28px;  --text-headline-line: 36px;  --text-headline-weight: 700; --text-headline-track: -0.02em;
  --text-title-size: 20px;     --text-title-line: 28px;     --text-title-weight: 700; --text-title-track: -0.01em;
  --text-subtitle-size: 16px;  --text-subtitle-line: 24px;  --text-subtitle-weight: 700; --text-subtitle-track: -0.005em;
  --text-appbar-size: 17px;    --text-appbar-line: 24px;    --text-appbar-weight: 700; --text-appbar-track: -0.01em;
  --text-lead-size: 16px;      --text-lead-line: 26px;      --text-lead-weight: 400;
  --text-body-size: 15px;      --text-body-line: 24px;      --text-body-weight: 400;
  --text-row-size: 15px;       --text-row-line: 22px;       --text-row-weight: 500;
  --text-caption-size: 13px;   --text-caption-line: 20px;   --text-caption-weight: 400;
  --text-small-size: 12px;     --text-small-line: 16px;     --text-small-weight: 500;
  --text-tab-size: 11px;       --text-tab-line: 14px;       --text-tab-weight: 500;
  --text-eyebrow-size: 13px;   --text-eyebrow-line: 20px;   --text-eyebrow-weight: 700;
  --text-button-lg-size: 16px; --text-button-lg-line: 24px; --text-button-lg-weight: 700; --text-button-track: -0.005em;
  --text-button-size: 15px;    --text-button-line: 22px;    --text-button-weight: 700;
  --text-button-sm-size: 13px; --text-button-sm-line: 18px; --text-button-sm-weight: 500;
  --text-label-size: 13px;     --text-label-line: 20px;     --text-label-weight: 500;
  --text-input-size: 16px;     --text-input-line: 24px;     --text-input-weight: 400;
  --text-price-size: 40px;     --text-price-line: 44px;     --text-price-weight: 700; --text-price-track: -0.02em;
  --text-number-size: 28px;    --text-number-line: 32px;    --text-number-weight: 700; --text-number-track: -0.02em;
  --text-number-row-size: 15px; --text-number-row-line: 22px; --text-number-row-weight: 600;
  --text-hand-size: 22px;      --text-hand-line: 26px;      --text-hand-weight: 400;
}
:root[data-phone-frame] {
  --phone-margin: 16px;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation;
  --phone-type-scale: .82;
  --phone-space-scale: .80;
  --text-display-size: 30px;  --text-display-line: 38px;
  --text-headline-size: 22px; --text-headline-line: 30px;
  --text-title-size: 18px;    --text-title-line: 26px;
  --text-lead-size: 15px;     --text-lead-line: 23px;
  --text-body-size: 15px;     --text-body-line: 23px;
  --text-price-size: 32px;    --text-price-line: 38px;
  --text-number-size: 24px;   --text-number-line: 30px;
  --text-hand-size: 19px;     --text-hand-line: 23px;
  --rhythm-section: 40px;     --rhythm-head: 12px;
  --text-caption-size: 14px;  --text-caption-line: 20px;
  --text-small-size: 13px;    --text-small-line: 18px;
  --text-tab-size: 13px;      --text-tab-line: 16px;
  --app-small: 13px;          --app-small-lh: 18px;
  --app-tab: 13px;            --app-tab-lh: 16px;
}
:root[data-phone-frame] :is(.cc-card, .public-card-body, .customer-public-page, .nc-sheet, .consent-sheet) { --phone-type-scale: 1; --phone-space-scale: 1; }
@media (max-width: 374px) {
  :root { --text-display-size: 42px; --text-display-line: 50px; }
}
@media (min-width: 781px) {
  :root {
    --grid-margin: var(--grid-pc-margin);
    --rhythm-section: 64px;
    --rhythm-head: 20px;
    --text-display-size: 40px;   --text-display-line: 50px;   --text-display-weight: 700;
    --text-headline-size: 26px;  --text-headline-line: 36px;
    --text-title-size: 20px;     --text-title-line: 28px;
    --text-subtitle-size: 17px;  --text-subtitle-line: 26px;
    --text-lead-size: 16px;      --text-lead-line: 26px;
    --text-body-size: 16px;      --text-body-line: 26px;
    --text-row-size: 16px;       --text-row-line: 24px;
    --text-caption-size: 14px;   --text-caption-line: 22px;
    --text-label-size: 14px;     --text-label-line: 22px;
    --text-number-row-size: 16px; --text-number-row-line: 24px;
    --text-hand-size: 26px;      --text-hand-line: 30px;
  }
}
@media (max-width: 1023px) and (min-width: 781px) {
  :root { --grid-pc-margin: 32px; }
}
@media (min-width: 1280px) {
  :root { --text-display-size: 40px; --text-display-line: 50px; }
  body:is(.site-body, .sx-server, .customer-body) { --grid-pc-margin: max(64px, calc((100% - 1200px) / 2)); --grid-margin: var(--grid-pc-margin); }
}
:root {
  --cc-font-sans: var(--font-number);
  --cc-font-kr: var(--font-sans);
  --cc-font-mono: var(--font-mono);
  --cc-bg: var(--color-bg-beige);
  --cc-paper: var(--color-bg-paper);
  --cc-text: var(--color-ink-900);
  --cc-text-2: var(--color-ink-700);
  --cc-muted: var(--color-ink-500);
  --cc-muted-2: var(--color-ink-400);
  --cc-inverse: var(--color-bg-paper);
  --cc-line-soft: var(--color-track);
  --cc-line-strong: var(--color-control-line);
  --cc-accent: var(--color-orange-500);
  --cc-accent-dark: var(--color-orange-700);
  --cc-accent-ink: var(--color-orange-700);
  --cc-accent-top: var(--color-orange-gloss-top);
  --cc-accent-bottom: var(--color-orange-gloss-bottom);
  --cc-accent-gloss: var(--gradient-orange);
  --cc-accent-glow: var(--shadow-gloss);
  --cc-danger: var(--color-red);
  --cc-danger-bg: var(--color-red-50);
  --cc-warning: var(--color-yellow);
  --cc-radius-sm: var(--radius-small);
  --cc-radius: var(--radius-medium);
  --cc-radius-lg: var(--radius-card);
  --cc-radius-xl: var(--radius-sheet);
  --cc-radius-pill: var(--radius-chip);
  --cc-control: var(--control-md);
  --cc-control-lg: var(--control-lg);
  --cc-space-1: var(--space-4);
  --cc-space-2: var(--space-8);
  --cc-space-3: var(--space-12);
  --cc-space-4: var(--space-16);
  --cc-space-5: var(--space-24);
  --cc-space-6: var(--space-32);
  --cc-space-7: var(--space-48);
  --cc-space-8: var(--space-64);
  --cc-border: var(--color-line-border);
  --cc-chip: var(--color-bg-chip);
  --cc-disabled-ink: var(--color-ink-400);
  --cc-placeholder: var(--color-ink-400);
  --cc-app-ink: var(--color-ink-900);
  --cc-app-grey: var(--color-ink-500);
  --cc-app-choice-ink: var(--color-ink-700);
  --cc-app-paper: var(--color-bg-paper);
  --cc-app-band: var(--color-bg-beige);
  --cc-scrim: var(--color-scrim);
  --cc-toast: var(--color-toast);
  --cc-tag-draft: var(--color-orange-700);
  --cc-tag-wait: var(--color-yellow);
  --cc-tag-off: var(--color-ink-500);
  --cc-tag-bad-bg: var(--color-red-50);
  --cc-tag-bad: var(--color-red);
  --app-bar: var(--bar-app);
  --app-button: var(--control-md);
  --app-button-sm: var(--control-sm);
  --app-choice: 36px;
  --app-filter: var(--control-sm);
  --app-consent: var(--strip-consent);
  --app-toast: var(--toast-height);
  --app-pill: var(--pill-install);
  --app-radius-button: var(--radius-medium);
  --app-radius-field: var(--radius-small);
  --app-sheet-in: var(--motion-sheet);
  --app-weight: 400;
  --app-weight-bold: 700;
  --con-accent: var(--color-orange-500);
  --con-accent-hover: var(--color-orange-gloss-bottom);
  --con-accent-ink: var(--color-orange-700);
  --con-accent-gloss: var(--gradient-orange);
  --con-accent-gloss-shadow: var(--shadow-gloss);
  --con-danger: var(--color-red);
  --con-card: var(--color-bg-paper);
}
:root {
  --cc-letter: -0.02em;
  --cc-letter-tight: -0.04em;
  --cc-accent-gloss-hover: linear-gradient(180deg, #f86f22 0%, #cc4007 100%);
  --cc-success-bg: #e7f2ec;
  --cc-warning-bg: #f9efdd;
  --cc-info: #2f5b86;
  --cc-info-bg: #e8eff6;
  --cc-radius-xs: 4px;
  --cc-shadow: 0 12px 32px rgba(23, 23, 23, 0.06);
  --cc-shadow-panel: 0 10px 28px rgba(23, 23, 23, 0.04);
  --cc-shadow-accent: 0 8px 16px rgba(239, 90, 34, 0.18);
  --cc-shadow-dialog: 0 24px 60px rgba(23, 23, 23, 0.18);
  --cc-container: 1160px;
  --cc-container-wide: 1480px;
  --cc-tag-live-bg: #e6f1ea;
  --cc-tag-live: #1f5b3f;
  --cc-tag-wait-bg: #f9efdd;
  --app-display: 18px;  --app-display-lh: 26px;
  --app-title: 17px;    --app-title-lh: 24px;
  --app-list: 15px;     --app-list-lh: 22px;
  --app-body: 14px;     --app-body-lh: 22px;
  --app-sub: 13px;      --app-sub-lh: 18px;
  --app-small: 12px;    --app-small-lh: 16px;
  --app-tab: 11px;      --app-tab-lh: 14px;
  --app-input: 16px;    --app-input-lh: 22px;
  --app-number: 22px;   --app-number-lh: 28px;
  --app-letter-wide: -0.02em;
  --app-letter: -0.01em;
  --app-gutter: 16px;
  --app-line-icon: 48px;
  --app-line-circle: 68px;
  --app-line-photo48: 76px;
  --app-line-photo: 92px;
  --app-field: 44px;
  --app-chip: 22px;
  --app-tag: 20px;
  --app-radius-sheet: 16px;
  --con-side: #1d2330;
  --con-side-hover: #272e3d;
  --con-side-line: #2d3443;
  --con-side-ink: #d3d7df;
  --con-side-muted: #8b93a3;
  --con-side-scroll: #3b4353;
  --con-accent-gloss-hover: linear-gradient(180deg, #f76a1e 0%, #cf3f06 100%);
  --con-page: #f3f4f6;
  --con-head: #f7f8fa;
  --con-hover: #f5f6f8;
  --con-line: #dcdfe4;
  --con-line-soft: #eceef1;
  --con-ink: #1b1f27;
  --con-ink-2: #3b414d;
  --con-muted: #687080;
  --con-faint: #9aa1ad;
  --con-radius: 4px;
  --con-radius-box: 6px;
  --con-control: 32px;
  --con-control-sm: 28px;
  --con-bar: 52px;
  --con-menu: 208px;
  --con-menu-row: 36px;
  --con-row: 42px;
  --cc-paper-warm: #fffaf6;
  --cc-paper-soft: #f4f1ec;
  --cc-soft: #f1eee8;
  --cc-input-bg: #fffeff;
  --cc-ink: #1f1d1b;
  --cc-line: #e8e3dc;
  --cc-line-input: #eee8e1;
  --cc-accent-legacy: #ef5a22;
  --cc-accent-legacy-dark: #d94d18;
  --cc-accent-shadow: rgba(244, 96, 15, 0.18);
  --cc-success: #1f6b45;
  --cc-neutral: #5c574f;
  --cc-neutral-bg: #efece7;
  --cc-focus-ring: 0 0 0 3px rgba(239, 90, 34, 0.3);
  --cc-tag-draft-bg: #fff3ec;
  --cc-tag-off-bg: #f1eee8;
  --con-accent-tint: #fff3ec;
  --server-muted: #6f6f6f;
  --server-line: #e8e8e8;
  --server-soft: #f6f6f4;
  --server-soft-2: #efefec;
  --server-danger: #b42318;
  --server-success: #197149;
  --server-radius-lg: 24px;
  --server-shadow: 0 16px 48px rgba(17, 17, 17, .08);
  --cc-hairline: #e4ded6;
  --cc-disabled-bg: #f1eee8;
  --cc-accent-tint: #fff3ec;
  --pi-font: "CC Pretendard", "CC Pretendard Fallback", "CC Pretendard Fallback Malgun", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", sans-serif;
  --pi-page: #f7f6f2;
  --pi-surface: #ffffff;
  --pi-surface-2: #f1efe9;
  --pi-accent-tint: #e7f0eb;
  --pi-ink: #17191a;
  --pi-ink-2: #3d413f;
  --pi-muted: #676b66;
  --pi-inverse: #ffffff;
  --pi-line: #e1dfd8;
  --pi-line-strong: #c4c1b8;
  --pi-control-border: #8f8c84;
  --pi-accent: #1d5c46;
  --pi-accent-hover: #164a38;
  --pi-accent-text: #1a5741;
  --pi-success: #1f5b3f;
  --pi-success-bg: #e6f1ea;
  --pi-warning: #8a5a1c;
  --pi-warning-bg: #f7eedf;
  --pi-danger: #a33a2c;
  --pi-danger-bg: #fbecea;
  --pi-neutral: #4f534e;
  --pi-neutral-bg: #ecebe5;
  --pi-focus: #2f7a5c;
  --pi-nav: #1c392f;
  --pi-nav-selected: #35584b;
  --pi-nav-muted: #d3dcd6;
  --pi-nav-label: #dfcba7;
  --pi-radius: 6px;
  --pi-radius-lg: 6px;
  --pi-shadow-dialog: 0 12px 40px rgba(23, 25, 26, .16);
  --pi-space-1: var(--space-4);
  --pi-space-2: var(--space-8);
  --pi-space-3: var(--space-12);
  --pi-space-4: var(--space-16);
  --pi-space-5: var(--space-24);
  --pi-space-6: var(--space-32);
  --pi-space-7: var(--space-48);
  --pi-space-8: var(--space-64);
  --pi-gutter: clamp(16px, 3vw, 32px);
  --pi-gutter-wide: clamp(16px, 3vw, 32px);
  --pi-column-gap: var(--space-32);
  --pi-max: var(--grid-pc-content);
  --pi-max-wide: 1280px;
  --pi-page-max: var(--pi-max);
  --pi-footer-link-gap: var(--space-20);
  --pi-footer-row-gap: var(--space-12);
  --pi-control: var(--touch-min);
  --pi-control-lg: var(--control-lg);
  --pi-text-sm: 14px;
  --pi-text-md: 16px;
  --pi-text-lg: 18px;
  --pi-text-xl: 20px;
  --pi-title-sm: 22px;
  --pi-title-md: 28px;
  --pi-title-lg: 36px;
  --pi-display: clamp(28px, 3vw, 40px);
  --pi-title-section: clamp(22px, 2vw, 30px);
  --pi-price: clamp(28px, 2.4vw, 34px);
  --pi-text-body: 17px;
  --pi-text-label: 16px;
  --pi-text-help: 15px;
  --pi-weight-title: 600;
  --pi-weight-strong: 600;
  --pi-leading: 1.6;
  --pi-leading-tight: 1.25;
  --pi-white: var(--pi-surface);
  --pi-paper: var(--pi-page);
  --pi-sand: var(--pi-surface-2);
  --pi-beige: #ebe6da;
  --pi-beige-deep: #cfc7b6;
  --pi-charcoal: var(--pi-ink-2);
  --pi-body: var(--pi-ink-2);
  --pi-action: var(--pi-accent);
  --pi-action-hover: var(--pi-accent-hover);
  --pi-action-soft: var(--pi-accent-tint);
}
.pi-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px; margin-block: calc(-1px * var(--phone-space-scale, 1)) calc(-1px * var(--phone-space-scale, 1));
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}