@charset "UTF-8";
/** 네이버 컬러 팔레트 (NEW 기준) */

:root {
  --sky-950: #061A2C;
  --sky-900: #08253F;
  --sky-800: #0A3968;
  --sky-700: #0C5299;
  --sky-600: #0A71CB;
  --sky-500: #00A6F4;
  --sky-400: #4AB5FB;
  --sky-300: #80CCFD;
  --sky-200: #ACDDFF;
  --sky-100: #D6EDFF;
  --sky-50: #EEF7FF;

  --gray-950: #030712;
  --gray-900: #101828;
  --gray-800: #1E2939;
  --gray-700: #364153;
  --gray-600: #4A5565;
  --gray-500: #6A7282;
  --gray-400: #99A1AF;
  --gray-300: #D1D5DC;
  --gray-200: #E5E7EB;
  --gray-100: #F3F4F6;
  --gray-50: #F9FAFB;

  --neutral-950: #0A0A0A;
  --neutral-900: #171717;
  --neutral-800: #262626;
  --neutral-700: #404040;
  --neutral-600: #525252;
  --neutral-500: #737373;
  --neutral-400: #A1A1A1;
  --neutral-300: #D4D4D4;
  --neutral-200: #E5E5E5;
  --neutral-100: #F5F5F5;
  --neutral-50: #FAFAFA;

  --green-950: #0F1F17;
  --green-900: #173327;
  --green-800: #234E39;
  --green-700: #2D6D4F;
  --green-600: #328662;
  --green-500: #35B879;
  --green-400: #6DCCA1;
  --green-300: #9BDFC0;
  --green-200: #C4EDD8;
  --green-100: #E6F7EE;
  --green-50: #F4FCF8;

  --blue-950: #142057;
  --blue-900: #19318F;
  --blue-800: #1734B6;
  --blue-700: #1440E1;
  --blue-600: #1B55F5;
  --blue-500: #2970FF;
  --blue-400: #599CFF;
  --blue-300: #8EC0FF;
  --blue-200: #BCD8FF;
  --blue-100: #D9E8FF;
  --blue-50: #EEF5FF;

  --red-950: #460809;
  --red-900: #82181A;
  --red-800: #9F0712;
  --red-700: #C10007;
  --red-600: #E7000B;
  --red-500: #FB2C36;
  --red-400: #FF6467;
  --red-300: #FFA2A2;
  --red-200: #FFC9C9;
  --red-100: #FFE2E2;
  --red-50: #FEF2F2;

  --yellow-950: #432004;
  --yellow-900: #733E0A;
  --yellow-800: #894B00;
  --yellow-700: #A65F00;
  --yellow-600: #D08700;
  --yellow-500: #F0B100;
  --yellow-400: #FDC700;
  --yellow-300: #FFDF20;
  --yellow-200: #FFF085;
  --yellow-100: #FEF9C2;
  --yellow-50: #FEFCE8;

  --white: #FFFFFF;
  --black: #000000;

  --brand-npay-green01: #E5FCEE;

  /* Coral */
  --coral-700: #E51D24;
  --coral-600: #F83B42;
  --coral-500: #FF5D63;
  --coral-100: #FFE1E2;
  --coral-50: #FFF1F2;

  /* Orange */
  --orange-500: #FF6900;
  --orange-100: #FFEDD4;
  --orange-50: #FFF7ED;

  /* Purple */
  --purple-700: #4F3AD2;
  --purple-600: #543FEC;
  --purple-500: #635DF7;
  --purple-100: #DFE4FF;
  --purple-50: #EDF0FF;

  /* Product grade */
  --smart-blue-500: #105AF7;
  --smart-blue-100: #D9EAFF;
  --select-purple-900: #5409B6;
  --select-purple-500: #8442FF;
  --select-purple-100: #EBE5FF;
  --signiture-black-900: #17160F;
  --signiture-black-100: #F5F6F0;

  --alpha-black-16: rgba(0, 0, 0, 0.16);
  --alpha-gray800-90: rgba(30, 41, 57, 0.90);
}

 /*Text Color Theme Variables */
.text-primary        { color: var(--gray-900, #101828); }
.text-primary_on-btn { color: var(--white, #FFFFFF); }
.text-secondary      { color: var(--gray-700, #364153); }
.text-tertiary       { color: var(--gray-500, #6A7282); }
.text-quaternary     { color: var(--gray-400, #98A2B3); }
.text-disable        { color: var(--gray-300, #D0D5DD); }
.text-placeholder    { color: var(--gray-400, #98A2B3); }
.text-placeholder_disable { color: var(--gray-500, #667085); }
.text-placeholder_active  { color: var(--gray-800, #1D2939); }
.text-success        { color: var(--green-700, #1A784E); }
.text-info           { color: var(--blue-500, #2970FF); }
.text-error          { color: var(--red-600, #D92D20); }
.text-critic         { color: var(--red-500, #F04438); }
.text-accent_on-btn  { color: var(--sky-500, #00A6F4); }
.text-grade-smart    { color: var(--smart-blue-500, #105AF7); }
.text-grade-select   { color: var(--select-purple-900, #5409B6); }
.text-grade-signiture { color: var(--signiture-black-900, #17160F); }
.text-benefit         { color: var(--coral-500, #FF5D63); }

/* Background Color Theme Variables */
.bg-base            { background-color: var(--white, #FFFFFF); }
.bg-base-neutral    { background-color: var(--neutral-100, #F4F4F4); }
.bg-base-gray       { background-color: var(--gray-100, #F2F4F7); }
.bg-base-gray_low   { background-color: var(--gray-50, #FCFCFD); }
.bg-btn-primary     { background-color: var(--sky-500, #23AAEE); }
.bg-btn-primary_hover { background-color: var(--sky-700, #0079B9); }
.bg-btn-primary-low { background-color: var(--sky-50, #EEF7FF); }
.bg-btn-secondary   { background-color: var(--gray-900, #101828); }
.bg-btn-secondary-low { background-color: var(--alpha-black-16, #E4E7EC); }
.bg-btn_disable     { background-color: var(--gray-300, #D0D5DD); }
.bg-primary         { background-color: var(--gray-900, #101828); }
.bg-input_disable   { background-color: var(--gray-100, #F2F4F7)!important; }
.bg-info            { background-color: var(--blue-700, #1440E1); }
.bg-info-lowest     { background-color: var(--blue-100, #D9E8FF); }
.bg-success         { background-color: var(--green-700, #1A784E); }
.bg-success-lowest  { background-color: var(--green-100, #DFF5E6); }
.bg-critic          { background-color: var(--red-500, #F04438); }
.bg-critic-lowest   { background-color: var(--red-100, #FEE4E2); }
.bg-skeleton        { background-color: var(--neutral-200, #E3E3E3); }
.bg-seperator       { background-color: var(--gray-400, #99A1AF); }
.bg-ftschedule      { background-color: var(--sky-500, #23AAEE); }
.bg-toast           { background-color: var(--alpha-gray800-90, rgba(29,41,57,0.90)); }
.bg-npay            { background-color: var(--brand-npay-green01, #E5FCEE); }
.bg-seletion_selected { background-color: var(--gray-50, #FCFCFD); }
.bg-adaptive          { background-color: var(--coral-500, #FF5D63); }
.bg-adaptive-lowest   { background-color: var(--coral-100, #FFE1E2); }
.bg-notice            { background-color: var(--orange-500, #FF6900); }
.bg-notice-lowest     { background-color: var(--orange-100, #FFEDD4); }
.bg-support-high      { background-color: var(--purple-700, #4F3AD2); }
.bg-support-lowest    { background-color: var(--purple-100, #DFE4FF); }
.bg-grade-smart       { background-color: var(--smart-blue-100, #D9EAFF); }
.bg-grade-select      { background-color: var(--select-purple-100, #EBE5FF); }
.bg-grade-signiture   { background-color: var(--signiture-black-100, #F5F6F0); }

.bg-btn-primary-low { background-color: var(--sky-50, #EEF7FF); }
.bg-btn-transparant { background-color: transparent; }
.bg-critic-subtle     { background-color: var(--red-50, #FEF2F2);}

/* Border Color Theme Variables */
.border-highest         { border: 1px solid var(--gray-900, #101828); }
.border                 { border: 1px solid var(--gray-300, #D0D5DD); }
.border-low             { border: 1px solid var(--gray-200, #E4E7EC); }
.border-btn-low         { border: 1px solid var(--gray-200, #E5E7EB); }
.border-tab             { border: 1px solid var(--gray-900, #101828); }
.border-input           { border: 1px solid var(--gray-300, #D1D5DC); }
.border-input_focus     { border: 1px solid var(--gray-900, #101828); }
.border-input_error     { border: 1px solid var(--red-600, #D92D20)!important; }
.border-success-low     { border: 1px solid var(--green-300, #9BDFC0); }
.border-info-low        { border: 1px solid var(--blue-300, #8EC0FF); }
.border-critic-low      { border: 1px solid var(--red-300, #FFA2A2); }
.border-ftschedule      { border: 1px solid var(--sky-500, #23AAEE); }
.border-ftschedule_ot   { border: 1px solid var(--white, #FFFFFF); }
.border-ftschedule_disable { border: 1px solid var(--sky-300, #90D8FF); }
.border-btn-lowest_sky  { border: 1px solid var(--sky-100, #D6EDFF); }
.border-btn-transparant { border: 1px solid transparent; }
.border-seletion        { border: 1px solid var(--gray-300, #D1D5DC); }
.border-seletion_selected { border: 1px solid var(--gray-900, #101828); }

/* Icon Color Theme Variables */
.icon-white             { color: var(--white, #FFFFFF); }
.icon-primary           { color: var(--gray-900, #101828); }
.icon-primary_on-brand  { color: var(--white, #FFFFFF); }
.icon-secondary         { color: var(--gray-700, #344054); }
.icon-tertiary          { color: var(--gray-500, #667085); }
.icon-quaternary        { color: var(--gray-300, #D0D5DD); }
.icon-brand             { color: var(--sky-500, #00A6F4); }

