@charset "utf-8";

/*
 * Raonpick Front UI tokens
 * ADM UI 2.0과 동일한 시각 언어를 사용하는 프론트 canonical token layer.
 */
html {
  color-scheme: light;

  --rp-primary: #e11d70;
  --rp-primary-hover: #be185d;
  --rp-primary-soft: #fce7f1;
  --rp-primary-border: color-mix(in srgb, var(--rp-primary) 35%, var(--rp-border));
  --rp-primary-on-brand-soft: color-mix(in srgb, var(--rp-primary) 45%, var(--rp-on-brand));
  --rp-accent: #7c3aed;
  --rp-accent-soft: color-mix(in srgb, var(--rp-accent) 14%, var(--rp-surface));
  --rp-success: #0f9f6e;
  --rp-success-soft: color-mix(in srgb, var(--rp-success) 14%, var(--rp-surface));
  --rp-warning: #e8930c;
  --rp-warning-soft: color-mix(in srgb, var(--rp-warning) 14%, var(--rp-surface));
  --rp-warning-panel: color-mix(in srgb, var(--rp-warning) 16%, var(--rp-surface));
  --rp-warning-border: color-mix(in srgb, var(--rp-warning) 42%, var(--rp-border));
  --rp-danger: #e5484d;
  --rp-danger-soft: color-mix(in srgb, var(--rp-danger) 14%, var(--rp-surface));
  --rp-danger-on-brand-soft: color-mix(in srgb, var(--rp-danger) 65%, var(--rp-on-brand));
  --rp-info: #3182f6;
  --rp-link: #1a73e8;
  --rp-overlay: rgba(12, 15, 22, 0.68);
  --rp-on-brand: #ffffff;
  --rp-gold: #d99a12;
  --rp-secondary: #fe4f31;
  --rp-secondary-soft: color-mix(in srgb, var(--rp-secondary) 10%, var(--rp-surface));
  --rp-gradient-end: #fc4530;
  --rp-highlight: #ffe000;
  --rp-highlight-text: #471809;
  --rp-save-result-bg: #dff7e7;
  --rp-save-result-text: #157347;
  --rp-save-result-border: #9cdbb0;
  --rp-cyan: #1acce0;
  --rp-lilac: #8b78ff;
  --rp-lilac-strong: #6c63ff;
  --rp-success-bright: #0f9f6e;
  --rp-success-bright-text: #087f55;
  --rp-success-bright-soft: color-mix(in srgb, var(--rp-success-bright) 12%, var(--rp-surface));

  --rp-page: #f3f5f9;
  --rp-surface: #ffffff;
  --rp-surface-alt: #f8f9fc;
  --rp-surface-hover: #f1f3f7;
  --rp-border: #e3e7ee;
  --rp-border-strong: #d4dae4;
  --rp-text: #1d2433;
  --rp-text-muted: #778197;
  --rp-text-subtle: #606978;
  --rp-result-card-bg: #ffffff;
  --rp-result-card-fg: #1d2433;
  --rp-chrome: #151927;
  --rp-chrome-elevated: #202536;
  --rp-chrome-text: #9da6bb;
  --rp-chrome-title: #ffffff;
  --rp-chrome-border: color-mix(in srgb, var(--rp-on-brand) 8%, transparent);
  --rp-chrome-divider: color-mix(in srgb, var(--rp-on-brand) 15%, transparent);
  --rp-chrome-hover: color-mix(in srgb, var(--rp-on-brand) 7%, transparent);
  --rp-panel-dark: #1c1c1e;
  --rp-panel-dark-muted: #8a8a8f;
  --rp-panel-dark-subtle: #b8b8bd;
  --rp-panel-dark-text: #e8e8ea;
  --rp-panel-dark-text-soft: #d4d4d8;
  --rp-panel-dark-border: rgba(255, 255, 255, 0.06);
  --rp-panel-dark-divider: rgba(255, 255, 255, 0.05);
  --rp-panel-dark-hover: rgba(255, 255, 255, 0.025);
  --rp-panel-dark-overlay: rgba(0, 0, 0, 0.3);
  --rp-panel-dark-overlay-soft: rgba(0, 0, 0, 0.2);
  --rp-panel-dark-field: #e4e4e4;
  --rp-panel-dark-disabled: #9ca3af;
  --rp-panel-dark-help: #b8b8b8;

  --rp-chart-blue: #5184ec;
  --rp-chart-blue-dark: #336ca5;
  --rp-chart-navy: #042d56;
  --rp-chart-success: #18702e;
  --rp-chart-info: #1971c2;
  --rp-chart-info-soft: #e7f5ff;
  --rp-chart-yellow-start: #f9ce01;
  --rp-chart-yellow-end: #f3c904;
  --rp-backlink-accent: #c21f66;
  --rp-backlink-accent-bright: #ff4f93;
  --rp-backlink-accent-border: rgba(222, 37, 115, 0.5);
  --rp-backlink-accent-soft: rgba(222, 37, 115, 0.1);
  --rp-text-faint: #c8c8c8;
  --rp-surface-glass: color-mix(in srgb, var(--rp-surface) 88%, transparent);
  --rp-surface-glass-strong: color-mix(in srgb, var(--rp-surface) 60%, transparent);
  --rp-surface-wash: color-mix(in srgb, var(--rp-surface) 30%, transparent);
  --rp-surface-wash-strong: color-mix(in srgb, var(--rp-surface) 50%, transparent);
  --rp-reward-warning-start: color-mix(in srgb, var(--rp-warning) 18%, var(--rp-surface));
  --rp-reward-warning-end: color-mix(in srgb, var(--rp-warning) 28%, var(--rp-surface));
  --rp-reward-info-soft: color-mix(in srgb, var(--rp-info) 16%, var(--rp-surface));

  --rp-radius-xs: 2px;
  --rp-radius-compact: 3px;
  --rp-radius-field: 4px;
  --rp-radius-control: 5px;
  --rp-radius-button: 6px;
  --rp-radius-badge: 7px;
  --rp-radius-medium: 8px;
  --rp-radius-sm: 9px;
  --rp-radius-scrollbar: 13px;
  --rp-radius: 14px;
  --rp-radius-card: 15px;
  --rp-radius-card-lg: 16px;
  --rp-radius-lg: 20px;
  --rp-radius-xl: 24px;
  --rp-radius-hero: 28px;
  --rp-radius-dialog: 30px;
  --rp-radius-round: 50%;
  --rp-radius-pill: 999px;
  --rp-radius-bubble: 30px 30px 0 30px;
  --rp-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --rp-shadow: 0 10px 30px rgba(28, 39, 60, 0.07);
  --rp-shadow-lg: 0 24px 60px rgba(20, 27, 45, 0.14);
  --rp-input-shadow: 0 0 0 3px rgba(225, 29, 112, 0.14);
  --rp-shadow-sidebar: 8px 0 28px rgba(10, 14, 24, 0.16);
  --rp-shadow-float: 0 4px 24px rgba(0, 0, 0, 0.35);
  --rp-shadow-line: 0 0 5px rgba(30, 127, 163, 0.5);
  --rp-shadow-soft-glow: 0 0 10px rgba(227, 227, 227, 0.15);
  --rp-shadow-brand: 0 4px 14px rgba(222, 37, 115, 0.3);
  --rp-shadow-primary-nav: 0 8px 18px rgba(225, 29, 112, 0.2);
  --rp-shadow-primary-low: 0 8px 20px rgba(225, 29, 112, 0.22);
  --rp-shadow-primary-high: 0 12px 26px rgba(225, 29, 112, 0.28);
  --rp-shadow-brand-glow: 0 0 20px rgba(222, 37, 115, 0.3);
  --rp-shadow-brand-glow-soft: 0 0 20px rgba(222, 37, 115, 0.2);
  --rp-shadow-frame: 0 0 3px rgba(0, 0, 0, 0.3);
  --rp-shadow-frame-raised: 2px 3px 7px rgba(0, 0, 0, 0.3);
  --rp-shadow-frame-bottom: 0 17px 10px rgba(0, 0, 0, 0.7);
  --rp-shadow-modal-dark: 0 12px 48px rgba(0, 0, 0, 0.6);
  --rp-shadow-reward: 0 12px 30px rgba(8, 37, 77, 0.06);
  --rp-shadow-reward-low: 0 6px 18px rgba(11, 99, 206, 0.08);
  --rp-shadow-reward-high: 0 16px 34px rgba(11, 99, 206, 0.1);
  --rp-shadow-accent-low: 0 8px 20px rgba(124, 58, 237, 0.2);
  --rp-shadow-accent-high: 0 12px 26px rgba(124, 58, 237, 0.28);
  --rp-shadow-danger-glow: 0 0 5px rgba(255, 59, 59, 0.5);
  --rp-shadow-glow-start: 0 0 10px rgba(127, 85, 177, 0.5);
  --rp-shadow-glow-end: 0 0 20px rgba(48, 183, 186, 0.8);
  --rp-shadow-chat: 0 0 10px rgba(255, 90, 90, 0.15);
  --rp-transition: 0.18s ease;

  /* 타이포그래피 */
  --fw-100: 100;
  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;

  /* 반응형 간격 */
  --space-10: 10px;
  --space-15: 15px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-35: 35px;
  --space-40: 40px;
  --space-45: 45px;
  --space-50: 50px;
  --space-55: 55px;
  --space-60: 60px;
  --space-65: 65px;
  --space-70: 70px;
  --space-75: 75px;
  --space-80: 80px;
  --space-85: 85px;
  --space-90: 90px;
  --space-95: 95px;
  --space-100: 100px;
  --space-110: 110px;
  --space-120: 120px;
  --space-130: 130px;
  --space-140: 140px;
  --space-150: 150px;
  --space-160: 160px;
  --space-170: 170px;
  --space-180: 180px;
  --space-190: 190px;
  --space-200: 200px;

  /* 기존 common/new_common 변수 호환 레이어 */
  --white: var(--rp-surface);
  --black: var(--rp-chrome);
  --gray: var(--rp-border);
  --gray01: var(--rp-text-subtle);
  --gray02: var(--rp-text-muted);
  --gray03: var(--rp-surface-alt);
  --gray04: var(--rp-border-strong);
  --gray05: var(--rp-text-muted);
  --gray06: var(--rp-text-muted);
  --red01: var(--rp-primary);
  --red02: var(--rp-primary-soft);
  --red03: var(--rp-page);
  --orange01: var(--rp-secondary);
  --point01: var(--rp-primary);
  --point02: var(--rp-gradient-end);

  /* 기존 페이지에서 정의 없이 사용하던 semantic 변수 */
  --green01: var(--rp-success);
  --green02: color-mix(in srgb, var(--rp-success) 14%, var(--rp-surface));
  --green04: var(--rp-success);
  --pink01: var(--rp-primary);
  --pink02: var(--rp-primary-soft);
  --pink04: var(--rp-primary-hover);
  --purple01: var(--rp-accent);
  --purple02: color-mix(in srgb, var(--rp-accent) 14%, var(--rp-surface));
  --purple03: var(--rp-accent);
  --purple04: var(--rp-accent);
  --purple05: var(--rp-accent);
  --yellow01: var(--rp-warning);
  --yellow02: color-mix(in srgb, var(--rp-warning) 16%, var(--rp-surface));
  --bg-color01: var(--rp-page);
  --text-color02: var(--rp-text);
  --text-color03: var(--rp-text-muted);
  --transition: all var(--rp-transition);

  /* 분석·키워드 페이지 호환 토큰 */
  --bg: var(--rp-page);
  --surface: var(--rp-surface);
  --surface2: var(--rp-surface-alt);
  --border: var(--rp-border);
  --pink: var(--rp-primary);
  --pink2: var(--rp-primary-hover);
  --purple: var(--rp-accent);
  --blue: var(--rp-info);
  --green: var(--rp-success);
  --orange: var(--rp-warning);
  --yellow: var(--rp-warning);
  --red: var(--rp-danger);
  --text: var(--rp-text);
  --text2: var(--rp-text-muted);
  --text3: var(--rp-text-subtle);
  --gold: var(--rp-gold);
  --silver: #8c98a8;
  --bronze: #b87544;
  --kw-blue: var(--rp-info);
  --kw-text2: var(--rp-text-muted);

  /* 결제·요금제 페이지 호환 토큰 */
  --bg-color: var(--rp-page);
  --card-bg: var(--rp-surface);
  --card-border: var(--rp-border);
  --text-main: var(--rp-text);
  --text-muted: var(--rp-text-muted);
  --accent-red: var(--rp-primary);
  --accent-gold: var(--rp-gold);
  --accent-blue: var(--rp-info);
  --table-bg: var(--rp-surface);
  --table-border: var(--rp-border);
  --header-bg: var(--rp-surface-alt);
  --text-base: var(--rp-text-muted);
  --accent-gray: var(--rp-text-muted);

  /* 결제 체크박스 */
  --checkable-size: 20px;
  --checkable-input-top: 3px;
  --checkable-input-left: 5px;
  --checkable-input-width: 14px;
  --checkable-input-height: 10px;
  --checkable-input-svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.343 4.574l4.243 4.243 7.07-7.071' fill='transparent' stroke-width='2' stroke='%23FFF' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --checkable-label-text-padding: 8px;
  --indeterminate-checkable-input-top: 7px;
  --indeterminate-checkable-input-left: 5px;
  --indeterminate-checkable-input-width: 14px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --rp-primary: #f05291;
  --rp-primary-hover: #fb72a8;
  --rp-primary-soft: rgba(240, 82, 145, 0.14);
  --rp-primary-border: color-mix(in srgb, var(--rp-primary) 42%, var(--rp-border));
  --rp-primary-on-brand-soft: color-mix(in srgb, var(--rp-primary) 58%, var(--rp-on-brand));
  --rp-accent: #a78bfa;
  --rp-accent-soft: color-mix(in srgb, var(--rp-accent) 18%, var(--rp-surface));
  --rp-success: #32c48d;
  --rp-success-soft: color-mix(in srgb, var(--rp-success) 18%, var(--rp-surface));
  --rp-warning: #f5b642;
  --rp-warning-soft: color-mix(in srgb, var(--rp-warning) 18%, var(--rp-surface));
  --rp-warning-panel: color-mix(in srgb, var(--rp-warning) 20%, var(--rp-surface));
  --rp-warning-border: color-mix(in srgb, var(--rp-warning) 46%, var(--rp-border));
  --rp-danger: #ff6b70;
  --rp-danger-soft: color-mix(in srgb, var(--rp-danger) 18%, var(--rp-surface));
  --rp-danger-on-brand-soft: color-mix(in srgb, var(--rp-danger) 72%, var(--rp-on-brand));
  --rp-info: #66a6ff;
  --rp-link: #7ab2ff;
  --rp-overlay: rgba(0, 0, 0, 0.76);
  --rp-on-brand: #ffffff;
  --rp-gold: #efb83e;
  --rp-secondary: #ff745d;
  --rp-secondary-soft: color-mix(in srgb, var(--rp-secondary) 14%, var(--rp-surface));
  --rp-gradient-end: #ff6652;
  --rp-page: #11141b;
  --rp-surface: #1a1f2a;
  --rp-surface-alt: #222834;
  --rp-surface-hover: #29303d;
  --rp-border: #303846;
  --rp-border-strong: #414b5c;
  --rp-text: #f1f4f8;
  --rp-text-muted: #98a3b7;
  --rp-text-subtle: #b0bac8;
  --rp-result-card-bg: #252c3a;
  --rp-result-card-fg: #f1f4f8;
  --rp-chrome: #0c0f16;
  --rp-chrome-elevated: #181d29;
  --rp-chrome-text: #8e99ae;
  --rp-chrome-title: #ffffff;
  --rp-highlight: #f5d547;
  --rp-highlight-text: #211803;
  --rp-save-result-bg: #1d4d35;
  --rp-save-result-text: #b9f5ce;
  --rp-save-result-border: #4fbf79;
  --rp-cyan: #46dbe8;
  --rp-lilac: #a89cff;
  --rp-lilac-strong: #8d83ff;
  --rp-success-bright: #59d990;
  --rp-success-bright-text: #79e8ad;
  --rp-success-bright-soft: color-mix(in srgb, var(--rp-success-bright) 14%, transparent);
  --rp-panel-dark: #0f1218;
  --rp-panel-dark-muted: #929aaa;
  --rp-panel-dark-subtle: #b9c1cf;
  --rp-panel-dark-text: #edf1f7;
  --rp-panel-dark-text-soft: #d7dce5;
  --rp-panel-dark-border: rgba(255, 255, 255, 0.1);
  --rp-panel-dark-divider: rgba(255, 255, 255, 0.08);
  --rp-panel-dark-hover: rgba(255, 255, 255, 0.05);
  --rp-panel-dark-overlay: rgba(0, 0, 0, 0.42);
  --rp-panel-dark-overlay-soft: rgba(0, 0, 0, 0.3);
  --rp-panel-dark-field: #f0f2f5;
  --rp-panel-dark-disabled: #aab3c2;
  --rp-panel-dark-help: #c0c7d2;
  --rp-chrome-border: color-mix(in srgb, var(--rp-on-brand) 12%, transparent);
  --rp-chrome-divider: color-mix(in srgb, var(--rp-on-brand) 20%, transparent);
  --rp-chrome-hover: color-mix(in srgb, var(--rp-on-brand) 10%, transparent);
  --rp-chart-blue: #75a2ff;
  --rp-chart-blue-dark: #65a5e5;
  --rp-chart-navy: #b7d9ff;
  --rp-chart-success: #56c878;
  --rp-chart-info: #6bb7f0;
  --rp-chart-info-soft: #172b3e;
  --rp-chart-yellow-start: #f5d547;
  --rp-chart-yellow-end: #e8bd25;
  --rp-backlink-accent: #e5488d;
  --rp-backlink-accent-bright: #ff72ad;
  --rp-backlink-accent-border: rgba(229, 72, 141, 0.58);
  --rp-backlink-accent-soft: rgba(229, 72, 141, 0.16);
  --rp-text-faint: #aeb7c5;
  --rp-surface-glass: color-mix(in srgb, var(--rp-surface) 90%, transparent);
  --rp-surface-glass-strong: color-mix(in srgb, var(--rp-surface) 70%, transparent);
  --rp-surface-wash: color-mix(in srgb, var(--rp-surface) 36%, transparent);
  --rp-surface-wash-strong: color-mix(in srgb, var(--rp-surface) 58%, transparent);
  --rp-reward-warning-start: color-mix(in srgb, var(--rp-warning) 22%, var(--rp-surface));
  --rp-reward-warning-end: color-mix(in srgb, var(--rp-warning) 32%, var(--rp-surface));
  --rp-reward-info-soft: color-mix(in srgb, var(--rp-info) 20%, var(--rp-surface));
  --rp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --rp-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  --rp-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.36);
  --rp-input-shadow: 0 0 0 3px rgba(240, 82, 145, 0.22);
  --rp-shadow-sidebar: 8px 0 28px rgba(0, 0, 0, 0.32);
  --rp-shadow-float: 0 4px 24px rgba(0, 0, 0, 0.46);
  --rp-shadow-line: 0 0 5px rgba(70, 219, 232, 0.35);
  --rp-shadow-soft-glow: 0 0 10px rgba(255, 255, 255, 0.12);
  --rp-shadow-brand: 0 4px 14px rgba(240, 82, 145, 0.32);
  --rp-shadow-primary-nav: 0 8px 18px rgba(240, 82, 145, 0.24);
  --rp-shadow-primary-low: 0 8px 20px rgba(240, 82, 145, 0.26);
  --rp-shadow-primary-high: 0 12px 26px rgba(240, 82, 145, 0.32);
  --rp-shadow-brand-glow: 0 0 20px rgba(240, 82, 145, 0.32);
  --rp-shadow-brand-glow-soft: 0 0 20px rgba(240, 82, 145, 0.22);
  --rp-shadow-frame: 0 0 3px rgba(0, 0, 0, 0.42);
  --rp-shadow-frame-raised: 2px 3px 7px rgba(0, 0, 0, 0.42);
  --rp-shadow-frame-bottom: 0 17px 10px rgba(0, 0, 0, 0.78);
  --rp-shadow-modal-dark: 0 12px 48px rgba(0, 0, 0, 0.7);
  --rp-shadow-reward: 0 12px 30px rgba(0, 0, 0, 0.24);
  --rp-shadow-reward-low: 0 6px 18px rgba(49, 130, 246, 0.14);
  --rp-shadow-reward-high: 0 16px 34px rgba(49, 130, 246, 0.18);
  --rp-shadow-accent-low: 0 8px 20px rgba(167, 139, 250, 0.22);
  --rp-shadow-accent-high: 0 12px 26px rgba(167, 139, 250, 0.3);
  --rp-shadow-danger-glow: 0 0 5px rgba(255, 107, 112, 0.46);
  --rp-shadow-glow-start: 0 0 10px rgba(167, 139, 250, 0.46);
  --rp-shadow-glow-end: 0 0 20px rgba(50, 196, 141, 0.56);
  --rp-shadow-chat: 0 0 10px rgba(255, 107, 112, 0.18);
}

@media screen and (max-width: 1300px) {
  html {
    --space-50: 40px;
    --space-60: 50px;
    --space-70: 60px;
    --space-80: 70px;
    --space-90: 80px;
    --space-100: 90px;
    --space-110: 100px;
    --space-120: 110px;
    --space-130: 120px;
    --space-140: 130px;
    --space-150: 140px;
    --space-160: 150px;
    --space-170: 160px;
    --space-180: 170px;
    --space-190: 180px;
    --space-200: 190px;
  }
}

@media screen and (max-width: 1100px) {
  html {
    --space-20: 15px;
    --space-30: 20px;
    --space-35: 25px;
    --space-40: 30px;
    --space-45: 35px;
    --space-50: 40px;
    --space-60: 50px;
    --space-70: 55px;
    --space-80: 60px;
    --space-130: 115px;
    --space-140: 120px;
    --space-150: 125px;
    --space-160: 135px;
    --space-170: 140px;
    --space-180: 150px;
    --space-190: 160px;
    --space-200: 170px;
  }
}

@media screen and (max-width: 900px) {
  html {
    --space-50: 35px;
    --space-60: 45px;
    --space-70: 50px;
    --space-80: 55px;
    --space-90: 70px;
    --space-100: 80px;
    --space-110: 90px;
    --space-120: 95px;
    --space-130: 100px;
    --space-140: 105px;
    --space-150: 110px;
    --space-160: 115px;
    --space-170: 120px;
    --space-180: 125px;
    --space-190: 130px;
  }
}

@media screen and (max-width: 767px) {
  html {
    --space-15: 7px;
    --space-20: 10px;
    --space-25: 12px;
    --space-30: 15px;
    --space-35: 20px;
    --space-40: 25px;
    --space-50: 30px;
    --space-60: 40px;
    --space-70: 45px;
    --space-80: 50px;
    --space-90: 60px;
    --space-100: 65px;
    --space-110: 70px;
    --space-120: 75px;
    --space-130: 80px;
    --space-140: 85px;
    --space-150: 90px;
    --space-160: 95px;
    --space-170: 100px;
    --space-180: 105px;
    --space-190: 110px;
    --space-200: 115px;
  }
}

@media screen and (max-width: 320px) {
  html {
    --space-90: 50px;
    --space-100: 55px;
    --space-110: 55px;
    --space-120: 60px;
    --space-130: 65px;
    --space-140: 70px;
    --space-150: 75px;
    --space-160: 80px;
    --space-170: 85px;
    --space-180: 90px;
    --space-190: 95px;
  }
}