/*
 * NDS 컴포넌트 CSS 부분 추출본 (스코프 처리됨)
 * 원본: https://septem-nds.netlify.app/assets/css/main.css
 * 추출일: 2026-07-22
 * 포함 범위: 디자인 토큰 전체(:root 3종 - 컬러/타이포/스페이싱·라운드·섀도우·z-index, dark mode 포함)
 *           + badge, bottomsheet, btn, card, accordion(notice/line/box/gray),
 *             attached-thumb, attached-list, bullet, calendar-day, calendar-period,
 *             check(check-box/check-basic/check-survey), chip(chip-basic/chip-single/chip-accordion),
 *             divider, empty, infobox, input(input-box/input-line), label(label/label-icon),
 *             list(list-kv/list-card/list-page/list-account/list-continue/list-accordion),
 *             radio(radio-box-center/radio-box-left/radio-basic/radio-explain/radio-choose/radio-survey),
 *             select(select-field/select-card), switch(switch/switch-font), textarea,
 *             toast(+ @keyframes toast-in), tooltip(tooltip-card), indicator(indicator-number/indicator-dot)
 *           (여전히 부분 추출본일 수 있습니다 — 전체 카탈로그는 guide/index.html의 라이브 사이트 링크 참고)
 * 모든 컴포넌트 클래스 선택자는 .nds-scope 로 스코프 처리되어 있어, class="nds-scope"가 붙은 요소 내부에서만 적용됩니다.
 * 레거시 소스의 동일 이름 클래스(.btn, .card 등)에는 영향을 주지 않습니다.
 * 추가 컴포넌트가 필요하면 동일한 방식으로 이 파일 뒤에 추가하세요.
 */

:root {
  --primitive-base-0: #FFFFFF;
  --primitive-base-950: #212121;
  --primitive-gray-50: #FFFFFF;
  --primitive-gray-100: #F6F6F6;
  --primitive-gray-200: #F0F0F0;
  --primitive-gray-300: #E1E1E1;
  --primitive-gray-400: #D3D3D3;
  --primitive-gray-500: #B3B3B3;
  --primitive-gray-600: #707070;
  --primitive-gray-700: #555555;
  --primitive-gray-800: #333333;
  --primitive-gray-900: #111111;
  --primitive-gray-dark-50: #FFFFFF;
  --primitive-gray-dark-100: #E6E6E6;
  --primitive-gray-dark-200: #D0D0D0;
  --primitive-gray-dark-300: #B0B0B0;
  --primitive-gray-dark-400: #909090;
  --primitive-gray-dark-500: #707070;
  --primitive-gray-dark-600: #505050;
  --primitive-gray-dark-700: #404040;
  --primitive-gray-dark-800: #303030;
  --primitive-gray-dark-900: #212121;
  --primitive-gray-font-50: #FFFFFF;
  --primitive-gray-font-100: #F2F2F2;
  --primitive-gray-font-200: #D9D9D9;
  --primitive-gray-font-300: #BFBFBF;
  --primitive-gray-font-400: #A6A6A6;
  --primitive-gray-font-500: #929292;
  --primitive-gray-font-600: #767676;
  --primitive-gray-font-700: #505050;
  --primitive-gray-font-800: #343434;
  --primitive-gray-font-900: #121212;
  --primitive-gray-font-dark-50: #FFFFFF;
  --primitive-gray-font-dark-100: #F2F2F2;
  --primitive-gray-font-dark-200: #D9D9D9;
  --primitive-gray-font-dark-300: #BFBFBF;
  --primitive-gray-font-dark-400: #A6A6A6;
  --primitive-gray-font-dark-500: #929292;
  --primitive-gray-font-dark-600: #767676;
  --primitive-gray-font-dark-700: #505050;
  --primitive-gray-font-dark-800: #343434;
  --primitive-gray-font-dark-900: #121212;
  --primitive-blue-gray-50: #F3F5F8;
  --primitive-blue-gray-100: #EBEFF6;
  --primitive-blue-gray-200: #D9DFEB;
  --primitive-blue-gray-300: #BCC2CF;
  --primitive-blue-gray-400: #A2A8B2;
  --primitive-blue-gray-500: #828894;
  --primitive-blue-gray-600: #656A73;
  --primitive-blue-gray-700: #4F5359;
  --primitive-blue-gray-800: #383B40;
  --primitive-blue-gray-900: #212326;
  --primitive-blue-gray-dark-50: #F3F5F8;
  --primitive-blue-gray-dark-100: #EBEFF6;
  --primitive-blue-gray-dark-200: #D9DFEB;
  --primitive-blue-gray-dark-300: #BCC2CF;
  --primitive-blue-gray-dark-400: #A2A8B2;
  --primitive-blue-gray-dark-500: #838894;
  --primitive-blue-gray-dark-600: #656A73;
  --primitive-blue-gray-dark-700: #4F5359;
  --primitive-blue-gray-dark-800: #414448;
  --primitive-blue-gray-dark-900: #35383B;
  --primitive-red-50: #FFE5E5;
  --primitive-red-100: #FFB2B2;
  --primitive-red-200: #F2546D;
  --primitive-red-300: #E24949;
  --primitive-red-400: #DF3535;
  --primitive-red-500: #EC0C0C;
  --primitive-red-600: #D10F0F;
  --primitive-red-700: #800400;
  --primitive-red-800: #610000;
  --primitive-red-900: #400000;
  --primitive-orange-50: #FFF0E5;
  --primitive-orange-100: #FFD1B2;
  --primitive-orange-200: #FFB380;
  --primitive-orange-300: #FF944D;
  --primitive-orange-400: #FF7F29;
  --primitive-orange-500: #DA6F11;
  --primitive-orange-600: #D44B10;
  --primitive-orange-700: #803300;
  --primitive-orange-800: #4D1F00;
  --primitive-orange-900: #331400;
  --primitive-yellow-50: #FFFCE5;
  --primitive-yellow-100: #FFF9BF;
  --primitive-yellow-200: #FFF27F;
  --primitive-yellow-300: #FFEC40;
  --primitive-yellow-400: #FFE600;
  --primitive-yellow-500: #FFD103;
  --primitive-yellow-600: #D9AE02;
  --primitive-yellow-700: #997300;
  --primitive-yellow-800: #664400;
  --primitive-yellow-900: #331F00;
  --primitive-green-50: #DDF2E4;
  --primitive-green-100: #CBF2D6;
  --primitive-green-200: #ACE3BC;
  --primitive-green-300: #6DD189;
  --primitive-green-400: #3CDB61;
  --primitive-green-500: #19973C;
  --primitive-green-600: #12732E;
  --primitive-green-700: #0D5722;
  --primitive-green-800: #094018;
  --primitive-green-900: #062512;
  /* Dark-mode-only accent green used for point/brand text, border & primary button bg (Figma raw value, does not align to a 50-900 step) */
  --primitive-green-point-dark: #3CBD61;
  --primitive-light-blue-50: #E8FCFB;
  --primitive-light-blue-100: #BAF7F2;
  --primitive-light-blue-200: #8CF2E9;
  --primitive-light-blue-300: #5EEDE0;
  --primitive-light-blue-400: #30E8D8;
  --primitive-light-blue-500: #17CFBE;
  --primitive-light-blue-600: #12A396;
  --primitive-light-blue-700: #0D736A;
  --primitive-light-blue-800: #08453F;
  --primitive-light-blue-900: #052E2A;
  --primitive-sky-blue-50: #E8F8FF;
  --primitive-sky-blue-100: #D1F1FF;
  --primitive-sky-blue-200: #A8DCF2;
  --primitive-sky-blue-300: #7DCAEA;
  --primitive-sky-blue-400: #57B6DE;
  --primitive-sky-blue-500: #2B9AC9;
  --primitive-sky-blue-600: #187AA4;
  --primitive-sky-blue-700: #095778;
  --primitive-sky-blue-800: #023E58;
  --primitive-sky-blue-900: #012D40;
  --primitive-blue-50: #E5EFFF;
  --primitive-blue-100: #B2D0FF;
  --primitive-blue-200: #8FBBFF;
  --primitive-blue-300: #7AAEFF;
  --primitive-blue-400: #66A1FF;
  --primitive-blue-500: #2C6DD4;
  --primitive-blue-600: #2357A9;
  --primitive-blue-700: #003B99;
  --primitive-blue-800: #003385;
  --primitive-blue-900: #002259;
  --primitive-navy-50: #E6F2FF;
  --primitive-navy-100: #B3DAFF;
  --primitive-navy-200: #80C2FE;
  --primitive-navy-300: #3F8ED6;
  --primitive-navy-400: #1B91FE;
  --primitive-navy-500: #0177E4;
  --primitive-navy-600: #015AAC;
  --primitive-navy-700: #01427F;
  --primitive-navy-800: #00274C;
  --primitive-navy-900: #001B33;
  --primitive-cobalt-50: #E1DEFE;
  --primitive-cobalt-100: #C4BEFE;
  --primitive-cobalt-200: #A59EFE;
  --primitive-cobalt-300: #8E86FD;
  --primitive-cobalt-400: #7167FF;
  --primitive-cobalt-500: #685EFD;
  --primitive-cobalt-600: #4D44D9;
  --primitive-cobalt-700: #362FB6;
  --primitive-cobalt-800: #231D92;
  --primitive-cobalt-900: #0E0C5A;
  --primitive-purple-50: #FFEFF7;
  --primitive-purple-100: #F7DEEA;
  --primitive-purple-200: #F7CCE1;
  --primitive-purple-300: #EEB7D2;
  --primitive-purple-400: #E794BD;
  --primitive-purple-500: #D870A3;
  --primitive-purple-600: #AF4F7D;
  --primitive-purple-700: #92265A;
  --primitive-purple-800: #5A0D32;
  --primitive-purple-900: #38001B;
  --primitive-product1-50: #DAEAF6;
  --primitive-product1-100: #BEDAEF;
  --primitive-product1-200: #A4CDEC;
  --primitive-product1-300: #72B0DF;
  --primitive-product1-400: #428FC9;
  --primitive-product1-500: #2473AF;
  --primitive-product1-600: #114E7D;
  --primitive-product1-700: #083D64;
  --primitive-product1-800: #052B48;
  --primitive-product1-900: #031E33;
  --primitive-product2-50: #DCE4F5;
  --primitive-product2-100: #C8D4EF;
  --primitive-product2-200: #ACC0EC;
  --primitive-product2-300: #7896D8;
  --primitive-product2-400: #5076CB;
  --primitive-product2-500: #2F5ABA;
  --primitive-product2-600: #1A42A1;
  --primitive-product2-700: #0E2D78;
  --primitive-product2-800: #061B50;
  --primitive-product2-900: #031237;
  --primitive-product3-50: #E7E4F3;
  --primitive-product3-100: #D4CDF1;
  --primitive-product3-200: #BFB4E9;
  --primitive-product3-300: #A392E2;
  --primitive-product3-400: #7B65D1;
  --primitive-product3-500: #523AB1;
  --primitive-product3-600: #2E1788;
  --primitive-product3-700: #200C6B;
  --primitive-product3-800: #15064E;
  --primitive-product3-900: #0F0439;
  --primitive-product4-50: #F3E9F0;
  --primitive-product4-100: #F2D1E8;
  --primitive-product4-200: #EBB7DB;
  --primitive-product4-300: #DE8EC5;
  --primitive-product4-400: #CE66AD;
  --primitive-product4-500: #AF3C8B;
  --primitive-product4-600: #8A2069;
  --primitive-product4-700: #6E0E50;
  --primitive-product4-800: #4A0635;
  --primitive-product4-900: #300322;
  --primitive-product5-50: #F6EFE6;
  --primitive-product5-100: #F6E9CE;
  --primitive-product5-200: #ECC98D;
  --primitive-product5-300: #E5B851;
  --primitive-product5-400: #EEAE1A;
  --primitive-product5-500: #C88F0B;
  --primitive-product5-600: #A27409;
  --primitive-product5-700: #684C09;
  --primitive-product5-800: #4A3606;
  --primitive-product5-900: #332503;
  --primitive-product6-50: #E2EFE8;
  --primitive-product6-100: #C4EED7;
  --primitive-product6-200: #9FE2BE;
  --primitive-product6-300: #66D599;
  --primitive-product6-400: #39C479;
  --primitive-product6-500: #199A54;
  --primitive-product6-600: #0A753B;
  --primitive-product6-700: #054622;
  --primitive-product6-800: #064622;
  --primitive-product6-900: #022411;
  --primitive-plant1-50: #DCEEF8;
  --primitive-plant1-100: #C4E3F4;
  --primitive-plant1-200: #9DD1ED;
  --primitive-plant1-300: #73BDE6;
  --primitive-plant1-400: #51ABDD;
  --primitive-plant1-500: #2D9CDB;
  --primitive-plant1-600: #267DAE;
  --primitive-plant1-700: #1E6289;
  --primitive-plant1-800: #123F58;
  --primitive-plant1-900: #09212E;
  --primitive-plant2-50: #F4DBFF;
  --primitive-plant2-100: #EBDAFF;
  --primitive-plant2-200: #D1B3F6;
  --primitive-plant2-300: #B78BEE;
  --primitive-plant2-400: #9F62EB;
  --primitive-plant2-500: #9B51E0;
  --primitive-plant2-600: #6B29BE;
  --primitive-plant2-700: #4F1696;
  --primitive-plant2-800: #3D0E77;
  --primitive-plant2-900: #200443;
  --primitive-plant3-50: #FFF3E9;
  --primitive-plant3-100: #FEE8D4;
  --primitive-plant3-200: #FBCFA9;
  --primitive-plant3-300: #F9BA85;
  --primitive-plant3-400: #F7A763;
  --primitive-plant3-500: #F1974B;
  --primitive-plant3-600: #DB7C2D;
  --primitive-plant3-700: #B15911;
  --primitive-plant3-800: #7E3F0B;
  --primitive-plant3-900: #422004;
  /* Figma real token names ("Point-1/2/3") — kept as aliases of plant1/2/3 (same values) for future linking */
  --primitive-point1-50: #DCEEF8;
  --primitive-point1-100: #C4E3F4;
  --primitive-point1-200: #9DD1ED;
  --primitive-point1-300: #73BDE6;
  --primitive-point1-400: #51ABDD;
  --primitive-point1-500: #2D9CDB;
  --primitive-point1-600: #267DAE;
  --primitive-point1-700: #1E6289;
  --primitive-point1-800: #123F58;
  --primitive-point1-900: #09212E;
  --primitive-point2-50: #F4DBFF;
  --primitive-point2-100: #EBDAFF;
  --primitive-point2-200: #D1B3F6;
  --primitive-point2-300: #B78BEE;
  --primitive-point2-400: #9F62EB;
  --primitive-point2-500: #9B51E0;
  --primitive-point2-600: #6B29BE;
  --primitive-point2-700: #4F1696;
  --primitive-point2-800: #3D0E77;
  --primitive-point2-900: #200443;
  --primitive-point3-50: #FFF3E9;
  --primitive-point3-100: #FEE8D4;
  --primitive-point3-200: #FBCFA9;
  --primitive-point3-300: #F9BA85;
  --primitive-point3-400: #F7A763;
  --primitive-point3-500: #F1974B;
  --primitive-point3-600: #DB7C2D;
  --primitive-point3-700: #B15911;
  --primitive-point3-800: #7E3F0B;
  --primitive-point3-900: #422004;
  --color-font-1: var(--primitive-gray-font-900);
  --color-font-2: var(--primitive-gray-font-800);
  --color-font-3: var(--primitive-gray-font-700);
  --color-font-4: var(--primitive-gray-font-600);
  --color-font-5: var(--primitive-gray-font-500);
  --color-font-6: var(--primitive-gray-font-400);
  --color-font-7: var(--primitive-gray-font-300);
  --color-font-8: var(--primitive-gray-font-200);
  --color-font-9: var(--primitive-gray-font-100);
  --color-font-10: var(--primitive-gray-font-50);
  --color-font-visual: var(--primitive-blue-500);
  --color-font-error: var(--primitive-red-300);
  --color-font-point: var(--primitive-green-500);
  --color-font-positive: var(--primitive-blue-500);
  --color-font-negative: var(--primitive-red-500);
  --color-border-1: var(--primitive-gray-400);
  --color-border-2: var(--primitive-gray-300);
  --color-border-3: var(--primitive-gray-200);
  --color-border-4: var(--primitive-gray-100);
  --color-border-error: var(--primitive-red-300);
  --color-border-point: var(--primitive-green-500);
  --color-bg-default: var(--primitive-base-0);
  --color-bg-container: var(--primitive-gray-100);
  --color-bg-extra-bg: var(--primitive-gray-200);
  --color-bg-disabled: var(--primitive-gray-200);
  --color-bg-dimmed: rgba(0, 0, 0, 0.4);
  --color-icon-1: var(--primitive-gray-900);
  --color-icon-2: var(--primitive-gray-800);
  --color-icon-3: var(--primitive-gray-700);
  --color-icon-4: var(--primitive-gray-600);
  --color-icon-5: var(--primitive-gray-500);
  --color-icon-00: var(--primitive-base-0);
  --color-icon-point: var(--primitive-green-500);
  --color-icon-error: var(--primitive-red-500);
  --color-icon-visual: var(--primitive-blue-500);
  --color-comp-btn-primary-default-bg: var(--primitive-green-500);
  --color-comp-btn-primary-default-fg: var(--primitive-base-0);
  --color-comp-btn-primary-hovered-bg: var(--primitive-green-600);
  --color-comp-btn-primary-hovered-fg: var(--primitive-base-0);
  --color-comp-btn-primary-pressed-bg: var(--primitive-green-700);
  --color-comp-btn-primary-pressed-fg: var(--primitive-base-0);
  --color-comp-btn-primary-disabled-bg: var(--primitive-gray-200);
  --color-comp-btn-primary-disabled-fg: var(--primitive-gray-font-500);
  --color-comp-btn-secondary-default-bg: transparent;
  --color-comp-btn-secondary-default-fg: var(--primitive-green-500);
  --color-comp-btn-secondary-default-border: var(--primitive-green-500);
  --color-comp-btn-secondary-hovered-bg: var(--primitive-green-50);
  --color-comp-btn-secondary-hovered-fg: var(--primitive-green-500);
  --color-comp-btn-secondary-pressed-bg: var(--primitive-green-50);
  --color-comp-btn-secondary-pressed-fg: var(--primitive-green-700);
  --color-comp-btn-secondary-pressed-border: var(--primitive-green-700);
  --color-comp-btn-secondary-disabled-bg: transparent;
  --color-comp-btn-secondary-disabled-fg: var(--primitive-gray-font-500);
  --color-comp-btn-secondary-disabled-border:var(--primitive-gray-300);
  --color-comp-btn-tertiary-default-bg: var(--primitive-gray-50);
  --color-comp-btn-tertiary-default-fg: var(--primitive-gray-font-900);
  --color-comp-btn-tertiary-default-border: var(--primitive-gray-400);
  --color-comp-btn-tertiary-hovered-bg: var(--primitive-gray-100);
  --color-comp-btn-tertiary-hovered-fg: var(--primitive-gray-font-900);
  --color-comp-btn-tertiary-pressed-bg: var(--primitive-gray-100);
  --color-comp-btn-tertiary-pressed-fg: var(--primitive-gray-font-900);
  --color-comp-btn-tertiary-pressed-border: var(--primitive-gray-400);
  --color-comp-btn-tertiary-disabled-bg: var(--primitive-gray-50);
  --color-comp-btn-tertiary-disabled-fg: var(--primitive-gray-font-500);
  --color-comp-btn-tertiary-disabled-border: var(--primitive-gray-300);
  --color-comp-btn-icon-fg: var(--primitive-gray-800);
  --color-comp-btn-floating-default-bg: var(--primitive-base-0);
  --color-comp-btn-floating-default-fg: var(--primitive-cobalt-500);
  --color-comp-btn-floating-default-border: var(--primitive-cobalt-500);
  --color-comp-btn-floating-hovered-bg: var(--primitive-cobalt-50);
  --color-comp-file-default-bg: var(--primitive-gray-100);
  --color-comp-file-default-fg: var(--primitive-gray-font-700);
  --color-comp-file-border: var(--primitive-gray-300);
  --color-comp-file-disabled-bg: var(--primitive-gray-200);
  --color-comp-file-disabled-fg: var(--primitive-gray-font-500);
  --color-comp-input-baseline-border: var(--primitive-gray-700);
  --color-comp-input-filled-border: var(--primitive-gray-700);
  --color-comp-input-default-border: var(--primitive-gray-300);
  --color-comp-input-default-bg: var(--primitive-base-0);
  --color-comp-input-readonly-bg: var(--primitive-gray-100);
  --color-comp-input-readonly-border: var(--primitive-gray-300);
  --color-comp-input-hover-border: var(--primitive-gray-500);
  --color-comp-input-disabled-bg: var(--primitive-gray-100);
  --color-comp-input-disabled-border: var(--primitive-gray-300);
  --color-comp-input-disabled-fg: var(--primitive-gray-400);
  --color-comp-input-focus-border: var(--primitive-blue-500);
  --color-comp-input-error-border: var(--primitive-red-300);
  --color-comp-input-bad-data-border: var(--primitive-orange-500);
  --color-comp-select-inactive-bg: var(--primitive-base-0);
  --color-comp-select-inactive-border: var(--primitive-gray-300);
  --color-comp-select-filled-border: var(--primitive-gray-700);
  --color-comp-select-default-border: var(--primitive-gray-300);
  --color-comp-select-readonly-bg: var(--primitive-gray-100);
  --color-comp-select-hover-border: var(--primitive-gray-500);
  --color-comp-select-disabled-bg: var(--primitive-gray-100);
  --color-comp-select-disabled-fg: var(--primitive-gray-400);
  --color-comp-select-focus-border: var(--primitive-blue-500);
  --color-comp-select-error-border: var(--primitive-red-300);
  --color-comp-picker-calendar-select-bg: var(--primitive-green-500);
  --color-comp-picker-calendar-select-fg: var(--primitive-base-0);
  --color-comp-picker-disabled-fg: var(--primitive-gray-400);
  --color-comp-picker-default-fg: var(--primitive-gray-800);
  --color-comp-picker-today-border: var(--primitive-green-500);
  --color-comp-picker-today-fg: var(--primitive-green-500);
  --color-comp-picker-select-bg: var(--primitive-green-50);
  --color-comp-picker-select-fg: var(--primitive-green-500);
  --color-comp-picker-select-positive-bg: var(--primitive-blue-50);
  --color-comp-picker-select-negative-bg: var(--primitive-red-50);
  --color-comp-radio-basic-default-border: var(--primitive-gray-400);
  --color-comp-radio-basic-default-bg: var(--primitive-base-0);
  --color-comp-radio-basic-selected-border: var(--primitive-green-500);
  --color-comp-radio-basic-selected-bg: var(--primitive-green-500);
  --color-comp-radio-basic-selected-inner: var(--primitive-base-0);
  --color-comp-radio-basic-disabled-border: var(--primitive-gray-300);
  --color-comp-radio-basic-disabled-bg: var(--primitive-gray-100);
  --color-comp-radio-basic-disabled-over-fg: var(--primitive-gray-400);
  --color-comp-radio-basic-selected-disabled: var(--primitive-gray-400);
  --color-comp-radio-box-default-bg: var(--primitive-base-0);
  --color-comp-radio-box-default-border: var(--primitive-gray-200);
  --color-comp-radio-box-disabled-bg: var(--primitive-gray-100);
  --color-comp-radio-box-selected-bg: var(--primitive-green-50);
  --color-comp-radio-box-selected-border: var(--primitive-green-500);
  --color-comp-radio-ezpay-default-bg: var(--primitive-base-0);
  --color-comp-radio-ezpay-default-border: var(--primitive-gray-300);
  --color-comp-radio-ezpay-selected-bg: var(--primitive-green-50);
  --color-comp-radio-ezpay-selected-border: var(--primitive-green-500);
  --color-comp-radio-ezpay-disabled-bg: var(--primitive-gray-100);
  --color-comp-radio-survey-positive-border: var(--primitive-blue-500);
  --color-comp-radio-survey-positive-bg: var(--primitive-blue-50);
  --color-comp-radio-survey-negative-border: var(--primitive-red-500);
  --color-comp-radio-survey-negative-bg: var(--primitive-red-50);
  --color-comp-check-basic-default-border: var(--primitive-gray-400);
  --color-comp-check-basic-default-bg: var(--primitive-base-0);
  --color-comp-check-basic-selected-bg: var(--primitive-green-500);
  --color-comp-check-basic-selected-border: var(--primitive-green-500);
  --color-comp-check-basic-disabled-bg: var(--primitive-gray-100);
  --color-comp-check-basic-disabled-border: var(--primitive-gray-300);
  --color-comp-check-basic-disabled-selected: var(--primitive-gray-400);
  --color-comp-check-box-default-bg: var(--primitive-base-0);
  --color-comp-check-box-default-border: var(--primitive-gray-200);
  --color-comp-check-box-disabled-bg: var(--primitive-gray-100);
  --color-comp-check-box-selected-bg: var(--primitive-green-50);
  --color-comp-check-box-selected-border: var(--primitive-green-500);
  --color-comp-check-survey-positive-border: var(--primitive-blue-500);
  --color-comp-check-survey-positive-bg: var(--primitive-blue-50);
  --color-comp-check-survey-negative-border: var(--primitive-red-500);
  --color-comp-check-survey-negative-bg: var(--primitive-red-50);
  --color-comp-tab-blue-active-fg: var(--primitive-blue-500);
  --color-comp-tab-blue-active-border: var(--primitive-blue-500);
  --color-comp-tab-blue-default-fg: var(--primitive-gray-font-500);
  --color-comp-tab-bar-tag-fg: var(--primitive-gray-800);
  --color-comp-tab-chip-default-bg: var(--primitive-gray-100);
  --color-comp-tab-chip-default-fg: var(--primitive-gray-800);
  --color-comp-tab-chip-tag-bg: var(--primitive-green-50);
  --color-comp-tab-chip-tag-fg: var(--primitive-green-500);
  --color-comp-tab-chip-amber-bg: var(--primitive-orange-50);
  --color-comp-tab-chip-amber-fg: var(--primitive-orange-500);
  --color-comp-tab-strip-active-border: var(--primitive-gray-800);
  --color-comp-tab-strip-default-border: var(--primitive-gray-300);
  --color-comp-tab-bar-active-fg: var(--primitive-blue-500);
  --color-comp-tab-bar-default-fg: var(--primitive-gray-font-500);
  --color-comp-label-red: var(--primitive-red-400);
  --color-comp-label-orange: var(--primitive-orange-400);
  --color-comp-label-yellow: var(--primitive-yellow-600);
  --color-comp-label-lightblue: var(--primitive-light-blue-600);
  --color-comp-label-skyblue: var(--primitive-sky-blue-500);
  --color-comp-label-navy: var(--primitive-navy-500);
  --color-comp-label-cobalt: var(--primitive-cobalt-600);
  --color-comp-label-gray: var(--primitive-gray-600);
  --color-comp-label-green: var(--primitive-green-500);
  --color-comp-label-blue: var(--primitive-blue-500);
  --color-comp-step-active-bg: var(--primitive-green-500);
  --color-comp-step-active-fg: var(--primitive-base-0);
  --color-comp-step-point-bg: var(--primitive-base-0);
  --color-comp-step-point-border: var(--primitive-green-500);
  --color-comp-step-default-bg: var(--primitive-gray-200);
  --color-comp-step-default-fg: var(--primitive-gray-500);
  --color-comp-step-disabled-bg: var(--primitive-gray-100);
  --color-comp-step-line: var(--primitive-gray-200);
  --color-comp-progress-bg: var(--primitive-gray-200);
  --color-comp-progress-active-bg: var(--primitive-green-500);
  --color-comp-chip-active-bg: var(--primitive-green-500);
  --color-comp-chip-active-fg: var(--primitive-base-0);
  --color-comp-chip-active-border: var(--primitive-green-500);
  --color-comp-chip-default-bg: var(--primitive-gray-100);
  --color-comp-chip-default-fg: var(--primitive-gray-800);
  --color-comp-toast-default-bg: var(--primitive-gray-900);
  --color-comp-toast-default-fg: var(--primitive-base-0);
  --color-comp-toast-basic-bg: var(--primitive-base-0);
  --color-comp-toast-basic-fg: var(--primitive-gray-800);
  --color-comp-badge-red: var(--primitive-red-300);
  --color-comp-badge-fg: var(--primitive-base-0);
  --color-comp-switch-off-bg: var(--primitive-gray-300);
  --color-comp-switch-on-bg: var(--primitive-green-500);
  --color-comp-switch-inner-bg: var(--primitive-base-0);
  --color-comp-indicator-default-bg: var(--primitive-gray-200);
  --color-comp-indicator-active-bg: var(--primitive-gray-800);
  --color-comp-popover-default-bg: var(--primitive-base-0);
  --color-comp-popover-default-border: var(--primitive-gray-300);
  --color-comp-popover-point-bg: var(--primitive-gray-900);
  --color-text-primary: var(--color-font-2);
  --color-text-secondary: var(--color-font-3);
  --color-text-tertiary: var(--color-font-4);
  --color-text-disabled: var(--color-font-5);
  --color-text-inverse: var(--primitive-base-0);
  --color-text-brand: var(--color-font-point);
  --color-text-danger: var(--color-font-error);
  --color-text-info: var(--color-font-visual);
  --color-text-warning: var(--primitive-orange-500);
  --color-text-button-primary-default: var(--color-comp-btn-primary-default-fg);
  --color-text-button-primary-disabled: var(--color-comp-btn-primary-disabled-fg);
  --color-text-button-secondary-default: var(--color-comp-btn-secondary-default-fg);
  --color-text-button-secondary-disabled: var(--color-comp-btn-secondary-disabled-fg);
  --color-text-button-tertiary-default: var(--color-comp-btn-tertiary-default-fg);
  --color-text-button-tertiary-disabled: var(--color-comp-btn-tertiary-disabled-fg);
  --color-border-default: var(--color-border-2);
  --color-border-subtle: var(--color-border-1);
  --color-border-emphasis: var(--primitive-gray-800);
  --color-border-brand: var(--color-border-point);
  --color-border-danger: var(--color-border-error);
  --color-border-info: var(--primitive-blue-500);
  --color-border-focus: var(--primitive-blue-500);
  --color-border-button-primary-default: transparent;
  --color-border-button-secondary-default: var(--color-comp-btn-secondary-default-border);
  --color-border-button-secondary-disabled: var(--color-comp-btn-secondary-disabled-border);
  --color-border-button-tertiary-default: transparent;
  --color-border-input-default: var(--color-comp-input-default-border);
  --color-border-input-focus: var(--color-comp-input-focus-border);
  --color-border-input-error: var(--color-comp-input-error-border);
  --color-border-input-disabled: var(--color-comp-input-disabled-border);
  --color-bg-subtle: var(--primitive-gray-50);
  --color-bg-muted: var(--color-bg-container);
  --color-bg-emphasis: var(--primitive-gray-800);
  --color-bg-overlay: var(--color-bg-dimmed);
  --color-bg-button-primary-default: var(--color-comp-btn-primary-default-bg);
  --color-bg-button-primary-hover: var(--color-comp-btn-primary-hovered-bg);
  --color-bg-button-primary-pressed: var(--color-comp-btn-primary-pressed-bg);
  --color-bg-button-primary-disabled: var(--color-comp-btn-primary-disabled-bg);
  --color-bg-button-secondary-default: var(--color-comp-btn-secondary-default-bg);
  --color-bg-button-secondary-hover: var(--color-comp-btn-secondary-hovered-bg);
  --color-bg-button-secondary-pressed: var(--color-comp-btn-secondary-pressed-bg);
  --color-bg-button-secondary-disabled: var(--color-comp-btn-secondary-disabled-bg);
  --color-bg-button-tertiary-default: var(--color-comp-btn-tertiary-default-bg);
  --color-bg-button-tertiary-hover: var(--color-comp-btn-tertiary-hovered-bg);
  --color-bg-button-tertiary-pressed: var(--color-comp-btn-tertiary-pressed-bg);
  --color-bg-button-tertiary-disabled: var(--color-comp-btn-tertiary-disabled-bg);
  --color-bg-input-default: var(--color-comp-input-default-bg);
  --color-bg-input-filled: var(--color-comp-input-default-bg);
  --color-bg-input-disabled: var(--color-comp-input-disabled-bg);
  --color-bg-input-error: var(--color-comp-input-default-bg);
  --color-bg-badge-primary: var(--primitive-green-500);
  --color-bg-badge-secondary: var(--primitive-gray-200);
  --color-bg-badge-info: var(--primitive-blue-500);
  --color-bg-badge-danger: var(--primitive-red-500);
  --color-bg-badge-warning: var(--primitive-orange-500);
  --color-bg-chip-default: var(--color-comp-chip-default-bg);
  --color-bg-chip-selected: var(--primitive-green-50);
  --color-bg-chip-disabled: var(--primitive-gray-50);
  --color-bg-control-default: var(--primitive-base-0);
  --color-bg-control-selected: var(--primitive-green-500);
  --color-bg-control-disabled: var(--primitive-gray-200);
  --color-bg-toast-default: var(--color-comp-toast-default-bg);
  --color-bg-infobox-info: var(--primitive-blue-50);
  --color-bg-infobox-success: var(--primitive-green-50);
  --color-bg-infobox-warning: var(--primitive-orange-50);
  --color-bg-infobox-danger: var(--primitive-red-50);
  --color-icon-primary: var(--color-icon-2);
  --color-icon-secondary: var(--color-icon-3);
  --color-icon-tertiary: var(--color-icon-4);
  --color-icon-disabled: var(--color-icon-5);
  --color-icon-inverse: var(--color-icon-00);
  --color-icon-brand: var(--color-icon-point);
  --color-icon-danger: var(--color-icon-error);
  --color-icon-info: var(--color-icon-visual);
  --color-icon-gray900: var(--primitive-gray-900);
}

[data-theme=dark] {
  --color-font-1: var(--primitive-gray-font-dark-50);
  --color-font-2: var(--primitive-gray-font-dark-100);
  --color-font-3: var(--primitive-gray-font-dark-200);
  --color-font-4: var(--primitive-gray-font-dark-300);
  --color-font-5: var(--primitive-gray-font-dark-400);
  --color-font-6: var(--primitive-gray-font-dark-500);
  --color-font-7: var(--primitive-gray-font-dark-600);
  --color-font-8: var(--primitive-gray-font-dark-700);
  --color-font-9: var(--primitive-gray-font-dark-800);
  --color-font-10: var(--primitive-gray-font-dark-900);
  --color-font-visual: var(--primitive-blue-300);
  --color-font-error: var(--primitive-red-300);
  --color-font-point: var(--primitive-green-point-dark);
  --color-font-positive: var(--primitive-blue-400);
  --color-font-negative: var(--primitive-red-200);
  --color-border-1: var(--primitive-gray-dark-500);
  --color-border-2: var(--primitive-gray-dark-600);
  --color-border-3: var(--primitive-gray-dark-700);
  --color-border-4: var(--primitive-gray-dark-800);
  --color-border-error: var(--primitive-red-300);
  --color-border-point: var(--primitive-green-point-dark);
  --color-bg-default: var(--primitive-gray-dark-900);
  --color-bg-container: var(--primitive-gray-dark-800);
  --color-bg-extra-bg: var(--primitive-gray-dark-700);
  --color-bg-disabled: var(--primitive-gray-dark-700);
  --color-bg-dimmed: rgba(0, 0, 0, 0.6);
  --color-icon-1: var(--primitive-gray-dark-50);
  --color-icon-2: var(--primitive-gray-dark-100);
  --color-icon-3: var(--primitive-gray-dark-200);
  --color-icon-4: var(--primitive-gray-dark-300);
  --color-icon-5: var(--primitive-gray-dark-400);
  --color-icon-00: var(--primitive-gray-dark-900);
  --color-icon-point: var(--primitive-green-400);
  --color-icon-error: var(--primitive-red-400);
  --color-icon-visual: var(--primitive-blue-300);
  --color-comp-btn-primary-default-bg: var(--primitive-green-point-dark);
  --color-comp-btn-primary-default-fg: var(--primitive-base-0);
  --color-comp-btn-primary-hovered-bg: var(--primitive-green-400);
  --color-comp-btn-primary-pressed-bg: var(--primitive-green-200);
  --color-comp-btn-primary-pressed-fg: var(--primitive-base-0);
  --color-comp-btn-primary-disabled-bg: var(--primitive-gray-dark-700);
  --color-comp-btn-primary-disabled-fg: var(--primitive-gray-font-dark-400);
  --color-comp-btn-secondary-default-bg: var(--primitive-gray-dark-900);
  --color-comp-btn-secondary-default-fg: var(--primitive-green-point-dark);
  --color-comp-btn-secondary-default-border: var(--primitive-green-point-dark);
  --color-comp-btn-secondary-hovered-bg: rgba(25, 151, 60, 0.15);
  --color-comp-btn-secondary-pressed-bg: var(--primitive-green-900);
  --color-comp-btn-secondary-pressed-fg: var(--primitive-green-200);
  --color-comp-btn-secondary-pressed-border: var(--primitive-green-200);
  --color-comp-btn-secondary-disabled-bg: var(--primitive-gray-dark-900);
  --color-comp-btn-secondary-disabled-fg: var(--primitive-gray-font-dark-400);
  --color-comp-btn-secondary-disabled-border:var(--primitive-gray-dark-600);
  --color-comp-btn-tertiary-default-bg: var(--primitive-gray-dark-900);
  --color-comp-btn-tertiary-default-fg: var(--primitive-base-0);
  --color-comp-btn-tertiary-default-border: var(--primitive-gray-dark-500);
  --color-comp-btn-tertiary-hovered-bg: var(--primitive-gray-dark-700);
  --color-comp-btn-tertiary-pressed-bg: var(--primitive-gray-dark-800);
  --color-comp-btn-tertiary-pressed-fg: var(--primitive-base-0);
  --color-comp-btn-tertiary-pressed-border: var(--primitive-gray-dark-500);
  --color-comp-btn-tertiary-disabled-bg: var(--primitive-gray-dark-900);
  --color-comp-btn-tertiary-disabled-fg: var(--primitive-gray-font-dark-400);
  --color-comp-btn-tertiary-disabled-border: var(--primitive-gray-dark-600);
  --color-comp-btn-floating-default-bg: var(--primitive-gray-dark-900);
  --color-comp-btn-floating-default-fg: var(--primitive-cobalt-500);
  --color-comp-btn-floating-default-border: var(--primitive-cobalt-500);
  --color-comp-file-default-fg: var(--primitive-gray-font-dark-200);
  --color-comp-file-border: var(--primitive-gray-dark-600);
  --color-comp-file-disabled-fg: var(--primitive-gray-font-dark-400);
  --color-comp-input-baseline-border: var(--primitive-gray-dark-300);
  --color-comp-input-default-bg: var(--primitive-gray-dark-800);
  --color-comp-input-default-border: var(--primitive-gray-dark-600);
  --color-comp-input-readonly-bg: var(--primitive-gray-dark-700);
  --color-comp-input-hover-border: var(--primitive-gray-dark-400);
  --color-comp-input-disabled-bg: var(--primitive-gray-dark-700);
  --color-comp-input-disabled-fg: var(--primitive-gray-dark-500);
  --color-comp-chip-active-bg: var(--primitive-green-600);
  --color-comp-chip-default-bg: var(--primitive-gray-dark-700);
  --color-comp-chip-default-fg: var(--primitive-gray-dark-100);
  --color-comp-toast-default-bg: var(--primitive-gray-dark-700);
  --color-comp-toast-basic-bg: var(--primitive-gray-dark-800);
  --color-comp-toast-basic-fg: var(--primitive-gray-dark-100);
  --color-comp-switch-off-bg: var(--primitive-gray-dark-600);
  --color-comp-switch-on-bg: var(--primitive-green-500);
  --color-text-primary: var(--color-font-2);
  --color-text-secondary: var(--color-font-3);
  --color-text-tertiary: var(--color-font-4);
  --color-text-disabled: var(--color-font-5);
  --color-text-inverse: var(--primitive-gray-dark-900);
  --color-text-brand: var(--color-font-point);
  --color-text-danger: var(--color-font-error);
  --color-text-info: var(--color-font-visual);
  --color-border-default: var(--color-border-2);
  --color-border-subtle: var(--color-border-1);
  --color-border-emphasis: var(--primitive-gray-dark-200);
  --color-border-brand: var(--color-border-point);
  --color-border-danger: var(--color-border-error);
  --color-bg-default: var(--primitive-gray-dark-900);
  --color-bg-subtle: var(--primitive-gray-dark-800);
  --color-bg-muted: var(--color-bg-container);
  --color-bg-emphasis: var(--primitive-gray-dark-100);
  --color-bg-overlay: var(--color-bg-dimmed);
  --color-bg-button-primary-default: var(--color-comp-btn-primary-default-bg);
  --color-bg-button-primary-hover: var(--color-comp-btn-primary-hovered-bg);
  --color-bg-button-primary-disabled: var(--color-comp-btn-primary-disabled-bg);
  --color-bg-button-secondary-default: var(--color-comp-btn-secondary-default-bg);
  --color-bg-button-secondary-hover: var(--color-comp-btn-secondary-hovered-bg);
  --color-bg-button-tertiary-default: var(--color-comp-btn-tertiary-default-bg);
  --color-bg-button-tertiary-hover: var(--color-comp-btn-tertiary-hovered-bg);
  --color-bg-button-tertiary-disabled: var(--color-comp-btn-tertiary-disabled-bg);
  --color-bg-input-default: var(--color-comp-input-default-bg);
  --color-bg-input-disabled: var(--color-comp-input-disabled-bg);
  --color-bg-chip-default: var(--color-comp-chip-default-bg);
  --color-bg-toast-default: var(--color-comp-toast-default-bg);
  --color-icon-primary: var(--color-icon-2);
  --color-icon-secondary: var(--color-icon-3);
  --color-icon-tertiary: var(--color-icon-4);
  --color-icon-disabled: var(--color-icon-5);
  --color-icon-inverse: var(--color-icon-00);
  --color-icon-brand: var(--color-icon-point);
  --color-icon-danger: var(--color-icon-error);
  --color-icon-info: var(--color-icon-visual);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --color-font-1: var(--primitive-gray-font-dark-50);
    --color-font-2: var(--primitive-gray-font-dark-100);
    --color-font-3: var(--primitive-gray-font-dark-200);
    --color-font-4: var(--primitive-gray-font-dark-300);
    --color-font-5: var(--primitive-gray-font-dark-400);
    --color-font-6: var(--primitive-gray-font-dark-500);
    --color-font-7: var(--primitive-gray-font-dark-600);
    --color-font-8: var(--primitive-gray-font-dark-700);
    --color-font-9: var(--primitive-gray-font-dark-800);
    --color-font-10: var(--primitive-gray-font-dark-900);
    --color-font-visual: var(--primitive-blue-300);
    --color-font-error: var(--primitive-red-300);
    --color-font-point: var(--primitive-green-point-dark);
    --color-font-positive: var(--primitive-blue-400);
    --color-font-negative: var(--primitive-red-200);
    --color-border-1: var(--primitive-gray-dark-500);
    --color-border-2: var(--primitive-gray-dark-600);
    --color-border-3: var(--primitive-gray-dark-700);
    --color-border-4: var(--primitive-gray-dark-800);
    --color-border-error: var(--primitive-red-300);
    --color-border-point: var(--primitive-green-point-dark);
    --color-bg-default: var(--primitive-gray-dark-900);
    --color-bg-container: var(--primitive-gray-dark-800);
    --color-bg-extra-bg: var(--primitive-gray-dark-700);
    --color-bg-disabled: var(--primitive-gray-dark-700);
    --color-bg-dimmed: rgba(0, 0, 0, 0.6);
    --color-icon-1: var(--primitive-gray-dark-50);
    --color-icon-2: var(--primitive-gray-dark-100);
    --color-icon-3: var(--primitive-gray-dark-200);
    --color-icon-4: var(--primitive-gray-dark-300);
    --color-icon-5: var(--primitive-gray-dark-400);
    --color-icon-00: var(--primitive-gray-dark-900);
    --color-icon-point: var(--primitive-green-400);
    --color-icon-error: var(--primitive-red-400);
    --color-icon-visual: var(--primitive-blue-300);
    --color-comp-btn-primary-default-bg: var(--primitive-green-point-dark);
    --color-comp-btn-primary-default-fg: var(--primitive-base-0);
    --color-comp-btn-primary-hovered-bg: var(--primitive-green-400);
    --color-comp-btn-primary-pressed-bg: var(--primitive-green-200);
    --color-comp-btn-primary-pressed-fg: var(--primitive-base-0);
    --color-comp-btn-primary-disabled-bg: var(--primitive-gray-dark-700);
    --color-comp-btn-primary-disabled-fg: var(--primitive-gray-font-dark-400);
    --color-comp-btn-secondary-default-bg: var(--primitive-gray-dark-900);
    --color-comp-btn-secondary-default-fg: var(--primitive-green-point-dark);
    --color-comp-btn-secondary-default-border: var(--primitive-green-point-dark);
    --color-comp-btn-secondary-hovered-bg: rgba(25, 151, 60, 0.15);
    --color-comp-btn-secondary-pressed-bg: var(--primitive-green-900);
    --color-comp-btn-secondary-pressed-fg: var(--primitive-green-200);
    --color-comp-btn-secondary-pressed-border: var(--primitive-green-200);
    --color-comp-btn-secondary-disabled-bg: var(--primitive-gray-dark-900);
    --color-comp-btn-secondary-disabled-fg: var(--primitive-gray-font-dark-400);
    --color-comp-btn-secondary-disabled-border:var(--primitive-gray-dark-600);
    --color-comp-btn-tertiary-default-bg: var(--primitive-gray-dark-900);
    --color-comp-btn-tertiary-default-fg: var(--primitive-base-0);
    --color-comp-btn-tertiary-default-border: var(--primitive-gray-dark-500);
    --color-comp-btn-tertiary-hovered-bg: var(--primitive-gray-dark-700);
    --color-comp-btn-tertiary-pressed-bg: var(--primitive-gray-dark-800);
    --color-comp-btn-tertiary-pressed-fg: var(--primitive-base-0);
    --color-comp-btn-tertiary-pressed-border: var(--primitive-gray-dark-500);
    --color-comp-btn-tertiary-disabled-bg: var(--primitive-gray-dark-900);
    --color-comp-btn-tertiary-disabled-fg: var(--primitive-gray-font-dark-400);
    --color-comp-btn-tertiary-disabled-border: var(--primitive-gray-dark-600);
    --color-comp-btn-floating-default-bg: var(--primitive-gray-dark-900);
    --color-comp-btn-floating-default-fg: var(--primitive-cobalt-500);
    --color-comp-btn-floating-default-border: var(--primitive-cobalt-500);
    --color-comp-file-default-fg: var(--primitive-gray-font-dark-200);
    --color-comp-file-border: var(--primitive-gray-dark-600);
    --color-comp-file-disabled-fg: var(--primitive-gray-font-dark-400);
    --color-comp-input-baseline-border: var(--primitive-gray-dark-300);
    --color-comp-input-default-bg: var(--primitive-gray-dark-800);
    --color-comp-input-default-border: var(--primitive-gray-dark-600);
    --color-comp-input-readonly-bg: var(--primitive-gray-dark-700);
    --color-comp-input-hover-border: var(--primitive-gray-dark-400);
    --color-comp-input-disabled-bg: var(--primitive-gray-dark-700);
    --color-comp-input-disabled-fg: var(--primitive-gray-dark-500);
    --color-comp-chip-active-bg: var(--primitive-green-600);
    --color-comp-chip-default-bg: var(--primitive-gray-dark-700);
    --color-comp-chip-default-fg: var(--primitive-gray-dark-100);
    --color-comp-toast-default-bg: var(--primitive-gray-dark-700);
    --color-comp-toast-basic-bg: var(--primitive-gray-dark-800);
    --color-comp-toast-basic-fg: var(--primitive-gray-dark-100);
    --color-comp-switch-off-bg: var(--primitive-gray-dark-600);
    --color-comp-switch-on-bg: var(--primitive-green-500);
    --color-text-primary: var(--color-font-2);
    --color-text-secondary: var(--color-font-3);
    --color-text-tertiary: var(--color-font-4);
    --color-text-disabled: var(--color-font-5);
    --color-text-inverse: var(--primitive-gray-dark-900);
    --color-text-brand: var(--color-font-point);
    --color-text-danger: var(--color-font-error);
    --color-text-info: var(--color-font-visual);
    --color-border-default: var(--color-border-2);
    --color-border-subtle: var(--color-border-1);
    --color-border-emphasis: var(--primitive-gray-dark-200);
    --color-border-brand: var(--color-border-point);
    --color-border-danger: var(--color-border-error);
    --color-bg-default: var(--primitive-gray-dark-900);
    --color-bg-subtle: var(--primitive-gray-dark-800);
    --color-bg-muted: var(--color-bg-container);
    --color-bg-emphasis: var(--primitive-gray-dark-100);
    --color-bg-overlay: var(--color-bg-dimmed);
    --color-bg-button-primary-default: var(--color-comp-btn-primary-default-bg);
    --color-bg-button-primary-hover: var(--color-comp-btn-primary-hovered-bg);
    --color-bg-button-primary-disabled: var(--color-comp-btn-primary-disabled-bg);
    --color-bg-button-secondary-default: var(--color-comp-btn-secondary-default-bg);
    --color-bg-button-secondary-hover: var(--color-comp-btn-secondary-hovered-bg);
    --color-bg-button-tertiary-default: var(--color-comp-btn-tertiary-default-bg);
    --color-bg-button-tertiary-hover: var(--color-comp-btn-tertiary-hovered-bg);
    --color-bg-button-tertiary-disabled: var(--color-comp-btn-tertiary-disabled-bg);
    --color-bg-input-default: var(--color-comp-input-default-bg);
    --color-bg-input-disabled: var(--color-comp-input-disabled-bg);
    --color-bg-chip-default: var(--color-comp-chip-default-bg);
    --color-bg-toast-default: var(--color-comp-toast-default-bg);
    --color-icon-primary: var(--color-icon-2);
    --color-icon-secondary: var(--color-icon-3);
    --color-icon-tertiary: var(--color-icon-4);
    --color-icon-disabled: var(--color-icon-5);
    --color-icon-inverse: var(--color-icon-00);
    --color-icon-brand: var(--color-icon-point);
    --color-icon-danger: var(--color-icon-error);
    --color-icon-info: var(--color-icon-visual);
  }
}

:root {
  --font-family-base: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --letter-spacing-tight: -0.03em;
  --letter-spacing-normal: -0.02em;
  --letter-spacing-wide: -0.01em;
  --type-display1-size: 36px;
  --type-display1-lh: 40px;
  --type-display1-ls: -0.02em;
  --type-display1-weight: var(--font-weight-semibold);
  --type-display2-size: 28px;
  --type-display2-lh: 38px;
  --type-display2-ls: -0.02em;
  --type-display2-weight: var(--font-weight-semibold);
  --type-picker1-size: 25px;
  --type-picker1-lh: 30px;
  --type-picker1-ls: 0em;
  --type-picker2-size: 20px;
  --type-picker2-lh: 24px;
  --type-picker2-ls: 0em;
  --type-keypad-size: 24px;
  --type-keypad-lh: 32px;
  --type-keypad-ls: 0em;
  --type-h1-size: 26px;
  --type-h1-lh: 38px;
  --type-h1-ls: -0.02em;
  --type-h2-size: 22px;
  --type-h2-lh: 32px;
  --type-h2-ls: -0.02em;
  --type-h3-size: 20px;
  --type-h3-lh: 28px;
  --type-h3-ls: -0.02em;
  --type-h4-size: 18px;
  --type-h4-lh: 26px;
  --type-h4-ls: -0.02em;
  --type-h5-size: 16px;
  --type-h5-lh: 24px;
  --type-h5-ls: -0.02em;
  --type-body1-size: 16px;
  --type-body1-lh: 24px;
  --type-body1-ls: -0.02em;
  --type-body2-size: 15px;
  --type-body2-lh: 24px;
  --type-body2-ls: -0.02em;
  --type-body2_1-size: 15px;
  --type-body2_1-lh: 20px;
  --type-body2_1-ls: -0.02em;
  --type-body3-size: 14px;
  --type-body3-lh: 22px;
  --type-body3-ls: -0.02em;
  --type-table1-size: 16px;
  --type-table1-lh: 24px;
  --type-table1-ls: -0.02em;
  --type-table2-size: 15px;
  --type-table2-lh: 24px;
  --type-table2-ls: -0.02em;
  --type-table3-size: 14px;
  --type-table3-lh: 22px;
  --type-table3-ls: -0.02em;
  --type-caption1-size: 13px;
  --type-caption1-lh: 20px;
  --type-caption1-ls: -0.02em;
  --type-caption2-size: 12px;
  --type-caption2-lh: 18px;
  --type-caption2-ls: -0.02em;
  --type-caption3-size: 10px;
  --type-caption3-lh: 15px;
  --type-caption3-ls: -0.02em;
}

:root {
  --spacing-0: 0px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-60: 60px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-88: 88px;
  --spacing-96: 96px;
  --spacing-104: 104px;
  --spacing-112: 112px;
  --spacing-120: 120px;
  --radius-0: 0;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-full: 999px;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.14);
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 600;
  --z-tooltip: 700;
  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;
  --transition-slow: 0.25s ease;
  --transition-slower: 0.35s ease;
}

/* [실측 확인된 충돌 1건] nhasset_myd_mb.css:417 `.nhasset .popBtnWrap .popBtn{background:#fff;height:94px;border:solid #fff;...}`
 * 이 규칙은 클래스 3개(.nhasset .popBtnWrap .popBtn) 조합이라 .nds-scope .btn--primary(클래스 2개)보다
 * 우선순위가 높아, 로드 순서와 무관하게 legacy가 이깁니다. 팝업 하단 버튼에 popBtn(기능 훅)을 유지하면서도
 * NDS 시각 스타일을 지키려면 아래처럼 .nds-scope로 한 단계 더 감싸 특이도를 4개로 올려 방어해야 합니다. */
.nds-scope .popBtn {
  border: none !important;
  box-shadow: none !important;
  border-width: 0 !important;
}
/* [주의] height는 auto !important로 퉁치면 안 됩니다 — .btn--lg 등의 height:56px(!important 없음)까지
   같이 씹어서 버튼이 27px로 찌그러지는 실제 버그가 있었습니다(2026-07-22 발견/수정).
   그래서 레거시 .popBtn{height:94px}를 이기려면 사이즈 클래스별로 정확한 값을 !important로 재지정합니다. */
.nds-scope .popBtn.btn--lg { height: 56px !important; }
.nds-scope .popBtn.btn--md { height: 48px !important; }
.nds-scope .popBtn.btn--rg { height: 42px !important; }
.nds-scope .popBtn.btn--sm { height: 36px !important; }
.nds-scope .popBtn.btn--xs { height: 30px !important; }
/* background도 같은 이유로 버튼 종류별로 !important를 붙여 확정합니다. */
.nds-scope .popBtn.btn--primary { background-color: #19973c !important; color: #ffffff !important; }
.nds-scope .popBtn.btn--secondary { background-color: transparent !important; }

/* 팝업 본문/버튼영역 좌우 여백. 레거시 .popCont/.popBtnWrap은 기본 여백이 0이라
   실제 NDS .bottomsheet__body/__footer와 동일한 값(12/24/32px)을 여기서 한 번만 정의한다.
   (이전에는 각 샘플 파일에 인라인 style로 중복 기재했었음 — 값이 어긋나는 사고가 있어 여기로 통합)
   [실측 확인된 충돌] .popCont의 padding-bottom은 레거시에서 특이도 5(class 5개 조합)로
   nhasset_myd_mb.css:410 `.nhasset.popWrap.slidePopConfirm .popInner .popCont{padding-bottom:32px}`
   /nhasset_com.css:901 `...{padding-bottom:40px}` 등 여러 값이 경합한다. 인라인 style일 때는
   항상 이겼지만 외부 CSS로 옮기면서 .nds-scope .popCont(특이도 2)가 밀려 버그가 재발했었다
   (2026-07-22 발견/수정) — 그래서 !important로 확정한다. */
.nds-scope .popCont { padding: var(--spacing-12) var(--spacing-24) 0 !important; }
.nds-scope .popBtnWrap { padding: var(--spacing-32) var(--spacing-24) calc(var(--spacing-32) + env(safe-area-inset-bottom)) !important; }

.nds-scope .badge {
  position: relative;
  display: inline-flex;
}

.nds-scope .badge__dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full, 999px);
  background-color: var(--color-comp-badge-red, #E24949);
}

.nds-scope .badge__count {
  position: absolute;
  top: -6px;
  right: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 2.5px 5.5px;
  border-radius: var(--radius-full, 999px);
  background-color: var(--color-comp-badge-red, #E24949);
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.22px;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}

.nds-scope .bottomsheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  pointer-events: none;
}

.nds-scope .bottomsheet--open {
  pointer-events: auto;
}

.nds-scope .bottomsheet__container {
  position: relative;
  background-color: var(--color-bg-default);
  border-radius: var(--radius-16) var(--radius-16) 0 0;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  opacity: 0;
  transition: transform var(--transition-slow), opacity var(--transition-slow);
  box-shadow: var(--shadow-xl);
  margin: 0 auto;
  max-width: 450px;
  min-width: 320px;
}

.nds-scope .bottomsheet--open .bottomsheet__container {
  transform: translateY(0);
  opacity: 1;
}

.nds-scope .bottomsheet__handle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0 0;
  flex-shrink: 0;
  cursor: grab;
}

.nds-scope .bottomsheet__handle-bar {
  width: 36px;
  height: 4px;
  background-color: var(--color-border-default);
  border-radius: var(--radius-full);
}

.nds-scope .bottomsheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 24px 10px;
  flex-shrink: 0;
}

.nds-scope .bottomsheet__header--divider {
  border-bottom: 1px solid var(--color-border-subtle);
}

.nds-scope .bottomsheet__title {
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--color-font-1);
}

.nds-scope .bottomsheet__close {
  padding: 0;
  margin-top: 2px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  display: flex;
  align-items: center;
  color: var(--color-font-1);
  flex-shrink: 0;
}

.nds-scope .bottomsheet__close svg {
  width: 24px;
  height: 24px;
}

.nds-scope .bottomsheet__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-12) var(--spacing-24) 32px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.nds-scope .bottomsheet__body:has(+ .bottomsheet__footer),
.nds-scope .bottomsheet__body:has(+ .bottomsheet__cta) {
  padding-bottom: 0;
}

.nds-scope .bottomsheet__body::-webkit-scrollbar {
  display: none;
}

.nds-scope .bottomsheet__body p, .nds-scope .bottomsheet__body span, .nds-scope .bottomsheet__body div {
  font-size: var(--type-body2-size);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--type-body2-ls);
  color: var(--color-text-secondary);
  line-height: var(--type-body2-lh);
}

.nds-scope .bottomsheet--no-header .bottomsheet__body {
  padding-top: 22px;
}

.nds-scope .bottomsheet__footer {
  padding: var(--spacing-32) var(--spacing-24);
  padding-bottom: calc(var(--spacing-32) + env(safe-area-inset-bottom));
  flex-shrink: 0;
}

.nds-scope .bottomsheet__backdrop {
  position: absolute;
  inset: 0;
  background-color: #111111;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.nds-scope .bottomsheet--open .bottomsheet__backdrop {
  opacity: 0.3;
}

/* :: base/base-popup-display — 하단 "3일동안 열지 않기 / 닫기" 바 (with-header-display, none-header-display에서 사용) */
.nds-scope .bottomsheet__display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 24px;
  background-color: var(--color-bg-default);
  flex-shrink: 0;
}

.nds-scope .bottomsheet__display-left {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-font-3);
}

.nds-scope .bottomsheet__display-right {
  font-size: 14px;
  letter-spacing: -0.02em;
  color: var(--color-font-1);
  cursor: pointer;
}

/* :: base/base-bs-list — 바텀시트 선택형 리스트 (List/single, List/multi, List/currency) */
.nds-scope .bottomsheet-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.nds-scope .bottomsheet-list__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding: 16px 4px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 24px;
  color: var(--color-font-1);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.nds-scope .bottomsheet-list__item--selected {
  font-weight: 600;
  color: var(--color-font-point, #19973c);
}

.nds-scope .bottomsheet-list__item > span:first-child {
  flex: 1;
  min-width: 0;
}

.nds-scope .bottomsheet-list__check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-font-point, #19973c);
}

.nds-scope .bottomsheet-list__flag {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

/* :: button-cta/cta — 스크롤 콘텐츠 위에 겹치는 하단 고정 버튼 영역(위쪽은 배경색 그라데이션으로 살짝 페이드) */
.nds-scope .bottomsheet__cta {
  width: 100%;
  padding: 10px 24px 32px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, var(--color-bg-default) 40%);
  flex-shrink: 0;
}

/* :: tab-bar — 금융기관 선택 등에서 쓰는 세그먼트 탭 (예: 은행/증권사) */
.nds-scope .bottomsheet-tabbar {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 3px;
  border-radius: 12px;
  background-color: var(--color-bg-tab-bar, #f3f5f8);
  gap: 0;
}

.nds-scope .bottomsheet-tabbar__item {
  flex: 1;
  padding: 11px 12px;
  border-radius: 10px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 22px;
  text-align: center;
  color: var(--color-font-3);
  font-family: inherit;
}

.nds-scope .bottomsheet-tabbar__item--active {
  background-color: var(--color-bg-default);
  color: var(--color-font-1);
  font-weight: 500;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

/* :: Menu — 아이콘+라벨 2열 그리드 메뉴 (금융기관/계좌 선택 등에서 재사용) */
.nds-scope .bottomsheet-grid-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 28px;
  column-gap: 8px;
  width: 100%;
}

.nds-scope .bottomsheet-grid-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.nds-scope .bottomsheet-grid-menu__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
}

.nds-scope .bottomsheet-grid-menu__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nds-scope .bottomsheet-grid-menu__label {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 22px;
  color: var(--color-font-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* :: Account — 계좌 선택/등록 계열 (empty, list, accordion, direct 등에서 재사용) */
.nds-scope .bottomsheet-account-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px;
  width: 100%;
  box-sizing: border-box;
}

.nds-scope .bottomsheet-account-empty__text {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: var(--color-font-3);
  text-align: center;
  margin: 0;
}

.nds-scope .bottomsheet-account-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.nds-scope .bottomsheet-account-list__group-title {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  line-height: 22px;
  color: var(--color-font-1);
  margin: 0 0 12px;
}

.nds-scope .bottomsheet-account-list__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  position: relative;
}

.nds-scope .bottomsheet-account-list__logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
}

.nds-scope .bottomsheet-account-list__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.nds-scope .bottomsheet-account-list__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  line-height: 24px;
  color: var(--color-font-1);
}

.nds-scope .bottomsheet-account-list__number {
  font-size: 14px;
  letter-spacing: -0.02em;
  line-height: 22px;
  color: var(--color-font-4);
}

.nds-scope .bottomsheet-account-list__balance {
  font-size: 14px;
  letter-spacing: -0.02em;
  line-height: 22px;
  color: var(--color-font-3);
}

.nds-scope .bottomsheet-account-list__balance strong {
  font-weight: var(--font-weight-medium);
  color: var(--color-font-1);
}

.nds-scope .bottomsheet-account-list__error {
  font-size: 14px;
  letter-spacing: -0.02em;
  line-height: 22px;
  color: var(--color-font-error, #e24949);
}

.nds-scope .bottomsheet-account-list__check {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Accordion 변형 */
.nds-scope .bottomsheet-account-accordion {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.nds-scope .bottomsheet-account-accordion__head {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 0;
}

.nds-scope .bottomsheet-account-accordion__arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-icon-2, #767676);
}

.nds-scope .bottomsheet-account-accordion__sub {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding-left: 52px;
  box-sizing: border-box;
}

.nds-scope .bottomsheet-account-accordion__sub-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  font-size: 14px;
  letter-spacing: -0.02em;
  line-height: 22px;
  color: var(--color-font-3);
}

.nds-scope .bottomsheet-account-accordion__sub-row strong {
  font-weight: var(--font-weight-medium);
  color: var(--color-font-1);
}

.nds-scope .bottomsheet-account-accordion__flag {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
}

/* Picker/wheel — 년월일·요일·시분·기간 등 휠 피커 (열 개수는 마크업에서 자유롭게 구성) */
.nds-scope .bottomsheet-picker-wheel {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.nds-scope .bottomsheet-picker-wheel__row {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.nds-scope .bottomsheet-picker-wheel__cell {
  flex: 1 0 0;
  min-width: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 24px;
  color: var(--color-text-picker-default, #121212);
  background: none;
}

.nds-scope .bottomsheet-picker-wheel__cell--fixed {
  flex: none;
  width: 98px;
}

.nds-scope .bottomsheet-picker-wheel__cell--selected {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-picker-select, #19973c);
}

.nds-scope .bottomsheet-picker-wheel__cell--press {
  background-color: var(--color-bg-picker-press, #f6f6f6);
}

/* Picker/calendar — 날짜/년월/월일 캘린더 피커 */
.nds-scope .bottomsheet-picker-cal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.nds-scope .bottomsheet-picker-cal__control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nds-scope .bottomsheet-picker-cal__today {
  flex-shrink: 0;
  background-color: var(--color-bg-button-tertiary-default, #ffffff);
  border: 1px solid var(--color-comp-btn-tertiary-default-border, #d3d3d3);
  border-radius: 8px;
  padding: 5px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-text-button-tertiary-default, #121212);
  cursor: pointer;
}

.nds-scope .bottomsheet-picker-cal__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nds-scope .bottomsheet-picker-cal__nav-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-icon-2, #767676);
}

.nds-scope .bottomsheet-picker-cal__nav-btn svg {
  width: 12px;
  height: 12px;
}

.nds-scope .bottomsheet-picker-cal__nav-value {
  font-size: 25px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-picker-default, #121212);
  white-space: nowrap;
}

.nds-scope .bottomsheet-picker-cal__weekdays {
  display: flex;
  gap: 10px;
  width: 100%;
}

.nds-scope .bottomsheet-picker-cal__weekday {
  width: 36px;
  flex-shrink: 0;
  text-align: center;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-text-picker-week, #767676);
}

.nds-scope .bottomsheet-picker-cal__weekday--sun {
  color: var(--color-text-picker-sunday, #ec0c0c);
}

.nds-scope .bottomsheet-picker-cal__weekday--sat {
  color: var(--color-text-picker-saturday, #2c6dd4);
}

.nds-scope .bottomsheet-picker-cal__grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.nds-scope .bottomsheet-picker-cal__grid-row {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}

.nds-scope .bottomsheet-picker-cal__day {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  letter-spacing: -0.02em;
  color: var(--color-text-picker-default, #121212);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.nds-scope .bottomsheet-picker-cal__day--month {
  width: 42px;
  height: 42px;
  border-radius: 18px;
  font-size: 20px;
}

.nds-scope .bottomsheet-picker-cal__day--disabled {
  color: var(--color-text-picker-disabled, #929292);
  cursor: default;
}

.nds-scope .bottomsheet-picker-cal__day--sun {
  color: var(--color-text-picker-sunday, #ec0c0c);
}

.nds-scope .bottomsheet-picker-cal__day--sat {
  color: var(--color-text-picker-saturday, #2c6dd4);
}

.nds-scope .bottomsheet-picker-cal__day--from {
  background-color: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-line-1, #d3d3d3);
  color: var(--color-icon-1, #111111);
}

.nds-scope .bottomsheet-picker-cal__day--to {
  background-color: var(--color-comp-btn-primary-default-bg, #19973c);
  color: #ffffff;
}

/* Float — 화면 하단 고정 요약 바 (합계/데이터 표시 + CTA) */
.nds-scope .bottomsheet-float {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 12px 24px 22px;
  background-color: var(--color-bg-default);
  box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.nds-scope .bottomsheet-float__row {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.nds-scope .bottomsheet-float__title {
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 24px;
  color: var(--color-font-3);
}

.nds-scope .bottomsheet-float__value {
  flex: 1;
  text-align: right;
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 24px;
  color: var(--color-font-1);
}

/* Keypad — 계좌 직접입력 등에서 재사용 (task #45 Keypad 컴포넌트와 공유) */
.nds-scope .bottomsheet-keypad {
  display: flex;
  gap: 6px;
  width: 100%;
}

.nds-scope .bottomsheet-keypad__col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1;
}

.nds-scope .bottomsheet-keypad__key {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 24px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-font-1);
}

.nds-scope .bottomsheet-keypad__key svg {
  width: 24px;
  height: 24px;
}

.nds-scope .bottomsheet-keypad__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 12px;
  box-sizing: border-box;
  text-align: center;
}

.nds-scope .bottomsheet-keypad__price-amount {
  font-size: 28px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 38px;
  color: var(--color-font-5, #929292);
  margin: 0;
}

.nds-scope .bottomsheet-keypad__price-caption {
  font-size: 13px;
  letter-spacing: -0.02em;
  line-height: 20px;
  color: var(--color-font-5, #929292);
  margin: 0;
}

.nds-scope .bottomsheet-keypad__quick {
  display: flex;
  gap: 4px;
  width: 100%;
}

.nds-scope .bottomsheet-keypad__quick-btn {
  flex: 1;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-button-tertiary-default, #ffffff);
  border: 1px solid var(--color-comp-btn-tertiary-default-border, #d3d3d3);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-text-button-tertiary-default, #121212);
  cursor: pointer;
  padding: 0 4px;
}

/* Share / CS — 공유하기, 상담방법 선택 */
.nds-scope .bottomsheet-share-list {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.nds-scope .bottomsheet-share-list__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}

.nds-scope .bottomsheet-share-list__icon {
  width: 56px;
  height: 56px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.nds-scope .bottomsheet-share-list__icon svg {
  width: 32px;
  height: 32px;
}

.nds-scope .bottomsheet-share-list__label {
  font-size: 14px;
  letter-spacing: -0.02em;
  line-height: 22px;
  color: var(--color-font-3);
}

.nds-scope .bottomsheet-cs-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.nds-scope .bottomsheet-cs-list__row {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
}

.nds-scope .bottomsheet-cs-list__item {
  display: flex;
  flex: 1;
  gap: 12px;
  align-items: center;
  min-width: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.nds-scope .bottomsheet-cs-list__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 20px;
  border: 1px solid var(--color-border-2, #e1e1e1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-icon-2, #767676);
}

.nds-scope .bottomsheet-cs-list__icon svg {
  width: 24px;
  height: 24px;
}

.nds-scope .bottomsheet-cs-list__label {
  font-size: 14px;
  letter-spacing: -0.02em;
  line-height: 22px;
  color: var(--color-font-3);
}

.nds-scope .bottomsheet-option__label {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  line-height: 22px;
  color: var(--color-font-3);
  margin: 0 0 12px;
}

.nds-scope .btn {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.nds-scope .btn--lg {
  height: 56px;
  padding: 0 16px;
  font-size: 18px;
  border-radius: 12px;
  min-width: 78px;
}

.nds-scope .btn--md {
  height: 48px;
  padding: 0 16px;
  font-size: 16px;
  border-radius: 10px;
  min-width: 73px;
}

.nds-scope .btn--rg {
  height: 42px;
  padding: 0 16px;
  font-size: 15px;
  border-radius: 10px;
  min-width: 71px;
}

.nds-scope .btn--sm {
  height: 36px;
  padding: 0 12px;
  font-size: 14px;
  border-radius: 8px;
  min-width: 48px;
}

.nds-scope .btn--xs {
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 8px;
  min-width: 47px;
}

.nds-scope .btn--xs {
  font-weight: var(--font-weight-regular);
}

.nds-scope .btn--full {
  width: 100%;
}

.nds-scope .btn__icon {
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
}

.nds-scope .btn--primary {
  background-color: var(--color-comp-btn-primary-default-bg, #19973c);
  color: var(--color-comp-btn-primary-default-fg, #ffffff);
  border: none;
}

.nds-scope .btn--primary:not(:disabled):active, .nds-scope .btn--primary.is-pressed {
  background-color: var(--color-comp-btn-primary-pressed-bg, #0d5722);
  color: var(--color-comp-btn-primary-pressed-fg, #ffffff);
}

.nds-scope .btn--primary:disabled {
  background-color: var(--color-comp-btn-primary-disabled-bg, #f0f0f0);
  color: var(--color-comp-btn-primary-disabled-fg, #929292);
  cursor: not-allowed;
}

.nds-scope .btn--secondary {
  background-color: var(--color-comp-btn-secondary-default-bg, #ffffff);
  color: var(--color-comp-btn-secondary-default-fg, #19973c);
  border: 1px solid var(--color-comp-btn-secondary-default-border, #19973c);
}

.nds-scope .btn--secondary:not(:disabled):active, .nds-scope .btn--secondary.is-pressed {
  background-color: var(--color-comp-btn-secondary-pressed-bg, #ddf2e4);
  border-color: var(--color-comp-btn-secondary-pressed-border, #0d5722);
  color: var(--color-comp-btn-secondary-pressed-fg, #0d5722);
}

.nds-scope .btn--secondary:disabled {
  background-color: var(--color-comp-btn-secondary-disabled-bg, #ffffff);
  border-color: var(--color-comp-btn-secondary-disabled-border, #e1e1e1);
  color: var(--color-comp-btn-secondary-disabled-fg, #929292);
  cursor: not-allowed;
}

.nds-scope .btn--tertiary {
  background-color: var(--color-comp-btn-tertiary-default-bg, #ffffff);
  color: var(--color-comp-btn-tertiary-default-fg, #121212);
  border: 1px solid var(--color-comp-btn-tertiary-default-border, #d3d3d3);
}

.nds-scope .btn--tertiary:not(:disabled):active, .nds-scope .btn--tertiary.is-pressed {
  background-color: var(--color-comp-btn-tertiary-pressed-bg, #f6f6f6);
  border-color: var(--color-comp-btn-tertiary-pressed-border, #d3d3d3);
  color: var(--color-comp-btn-tertiary-pressed-fg, #121212);
}

.nds-scope .btn--tertiary:disabled {
  background-color: var(--color-comp-btn-tertiary-disabled-bg, #ffffff);
  border-color: var(--color-comp-btn-tertiary-disabled-border, #e1e1e1);
  color: var(--color-comp-btn-tertiary-disabled-fg, #929292);
  cursor: not-allowed;
}

.nds-scope .btn--text {
  background: none;
  border: none;
  color: var(--color-font-3, #505050);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  padding: 0;
  min-width: 0;
  height: auto;
  gap: 2px;
}

.nds-scope .btn--text:disabled {
  color: var(--color-font-5, #929292);
  cursor: not-allowed;
}

.nds-scope .btn--link {
  background: none;
  border: none;
  color: var(--color-font-3, #505050);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  padding: 0;
  min-width: 0;
  height: auto;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nds-scope .btn--link:disabled {
  color: var(--color-font-5, #929292);
  cursor: not-allowed;
}

.nds-scope .btn--text--center {
  justify-content: center;
  width: 100%;
}

.nds-scope .btn-icon {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 24px;
  background-color: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-2, #e1e1e1);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.nds-scope .btn-icon:not(:disabled):active, .nds-scope .btn-icon.is-pressed {
  background-color: var(--color-bg-container, #f6f6f6);
}

.nds-scope .btn-icon:disabled {
  background-color: var(--color-bg-extra-bg, #f0f0f0);
  cursor: not-allowed;
}

.nds-scope .btn-cta {
  display: flex;
  gap: 8px;
  padding: 10px 24px 32px;
  background: linear-gradient(to top, #ffffff 90%, rgba(255, 255, 255, 0) 100%);
}

.nds-scope .btn-cta--basic {
  padding-bottom: 32px;
}

.nds-scope .btn-cta--popup {
  padding-bottom: 20px;
  background: var(--color-bg-default, #ffffff);
}

.nds-scope .btn-cta--double {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding-bottom: 32px;
}

.nds-scope .btn-cta__item {
  flex: 1;
  min-width: 0;
}

.nds-scope .btn-cta__item--fixed {
  flex: none;
  width: 100px;
}

.nds-scope .btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 22px;
  letter-spacing: -0.02em;
  color: var(--color-text-button-etc, #505050);
}

.nds-scope .btn-arrow svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.nds-scope .btn-arrow__icon--hidden {
  visibility: hidden;
}

.nds-scope .btn-arrow--center {
  justify-content: center;
}

.nds-scope .btn-floating {
  position: relative;
  width: 56px;
  height: 56px;
}

.nds-scope .btn-floating__circle {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  position: absolute;
  left: 0;
  top: 2px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--color-comp-btn-floating-default-border, #685efd);
  background-color: var(--color-comp-btn-floating-default-bg, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  line-height: 15px;
  color: var(--color-comp-btn-floating-default-fg, #685efd);
  letter-spacing: -0.02em;
  cursor: pointer;
}

.nds-scope .btn-floating__close {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #121212;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nds-scope .btn-floating__close svg {
  width: 10px;
  height: 10px;
}

.nds-scope .btn-plusminus {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background-color: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-1, #d3d3d3);
  cursor: pointer;
  color: var(--color-font-1, #121212);
}

.nds-scope .btn-plusminus svg {
  width: 24px;
  height: 24px;
}

.nds-scope .btn-plusminus.is-active {
  color: var(--color-font-point, #19973c);
}

.nds-scope .card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 312px;
  padding: 20px;
  background-color: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-2, #e1e1e1);
  border-radius: 16px;
  box-sizing: border-box;
}

.nds-scope .card--gap-24 {
  gap: 24px;
}

.nds-scope .card--gap-32 {
  gap: 32px;
}

.nds-scope .card--radius-sm {
  border-radius: 12px;
}

.nds-scope .card--gray {
  background-color: var(--color-bg-container, #f6f6f6);
  border: none;
}

.nds-scope .card--end {
  align-items: flex-end;
}

.nds-scope .card--row {
  flex-direction: row;
  align-items: center;
}

.nds-scope .card__label-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 4px;
}

.nds-scope .card__label-row--between {
  justify-content: space-between;
}

.nds-scope .card__eyebrow {
  width: 100%;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-4, #767676);
}

.nds-scope .card__title {
  width: 100%;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.32px;
  line-height: 24px;
  color: var(--color-font-1, #121212);
}

.nds-scope .card__title--semibold {
  font-weight: var(--font-weight-semibold);
}

.nds-scope .card__subtitle {
  width: 100%;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-4, #767676);
}

.nds-scope .card__subtitle--dark {
  color: var(--color-font-3, #505050);
}

.nds-scope .card__date {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.26px;
  line-height: 20px;
  color: var(--color-font-3, #505050);
  white-space: nowrap;
}

.nds-scope .card__category {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-1, #121212);
}

.nds-scope .card__tooltip-text {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.24px;
  line-height: 18px;
  color: var(--color-font-4, #767676);
}

.nds-scope .card__tooltip-text svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.nds-scope .card__tag-list {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-4, #767676);
  white-space: nowrap;
}

.nds-scope .card__guide-text {
  width: 100%;
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.26px;
  line-height: 20px;
  color: var(--color-font-4, #767676);
}

.nds-scope .card__divider {
  flex-shrink: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-bg-extra-bg, #f0f0f0);
}

.nds-scope .card__divider--strong {
  background-color: #e1e1e1;
}

.nds-scope .card__close {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  position: absolute;
  top: 19px;
  right: 19px;
  width: 24px;
  height: 24px;
  background-color: var(--color-bg-default, #ffffff);
  color: var(--color-font-1, #121212);
  cursor: pointer;
}

.nds-scope .card__close svg {
  width: 24px;
  height: 24px;
  display: block;
}

.nds-scope .card__check {
  position: absolute;
  top: 19px;
  right: 19px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nds-scope .card__check--label {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  color: var(--color-font-4, #767676);
}

.nds-scope .card__radio {
  position: absolute;
  top: 19px;
  right: 19px;
}

.nds-scope .card__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-icon-5, #b3b3b3);
}

.nds-scope .card__arrow svg {
  width: 24px;
  height: 24px;
  display: block;
}

.nds-scope .card__arrow--sm {
  width: 16px;
  height: 16px;
}

.nds-scope .card__arrow--sm svg {
  width: 16px;
  height: 16px;
}

.nds-scope .card__button-row {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.nds-scope .card__button-row .btn {
  flex: 1;
}

.nds-scope .card__percent {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
  white-space: nowrap;
}

.nds-scope .card__percent__label {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  color: var(--color-font-3, #505050);
}

.nds-scope .card__percent__value {
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.4px;
  color: var(--color-font-1, #121212);
}

.nds-scope .card__percent__info {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  color: var(--color-font-4, #767676);
}

.nds-scope .card__icon-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.nds-scope .card__icon-title__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
}

.nds-scope .card__icon-title__icon img, .nds-scope .card__icon-title__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nds-scope .card__icon-title__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nds-scope .card__info-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.nds-scope .card__info-row__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 160px;
}

.nds-scope .card__info-row__data {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

.nds-scope .card__grip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.nds-scope .card__grip__name {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.32px;
  color: var(--color-font-1, #121212);
}

.nds-scope .card__grip__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nds-scope .card__grip__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-font-5, #929292);
  cursor: grab;
}

.nds-scope .card__grip__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.nds-scope .card__load-data {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 14px 20px;
  background-color: var(--color-bg-container, #f6f6f6);
  border-radius: 12px;
  box-sizing: border-box;
}

.nds-scope .card__load-data__label {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  color: var(--color-font-3, #505050);
}

.nds-scope .card__load-data__data {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-font-1, #121212);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-scope .card__input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.nds-scope .card__input-row__label {
  flex-shrink: 0;
  width: 78px;
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.3px;
  color: var(--color-font-3, #505050);
}

.nds-scope .card__input-row__field {
  flex: 1;
  min-width: 0;
}

.nds-scope .card__image {
  flex-shrink: 0;
  width: 100px;
  height: 58px;
  border-radius: 8px;
  overflow: hidden;
}

.nds-scope .card__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.nds-scope .card__account {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.nds-scope .card__account__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nds-scope .card__account__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.nds-scope .card__account__logo {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
  background-color: #004a37;
}

.nds-scope .card__account__logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.nds-scope .card__account__name-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.nds-scope .card__account__category {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  color: var(--color-font-1, #121212);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-scope .card__account__name {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.32px;
  color: var(--color-font-1, #121212);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-scope .card__account__sub {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  color: var(--color-font-4, #767676);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-scope .card__account__admin {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-font-4, #767676);
  cursor: pointer;
}

.nds-scope .card__account__admin svg {
  width: 24px;
  height: 24px;
  display: block;
}

.nds-scope .card__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  width: 100%;
}

.nds-scope .card__price__label {
  width: 100%;
  text-align: right;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-4, #767676);
}

.nds-scope .card__price__value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.4px;
  line-height: 28px;
  color: var(--color-font-1, #121212);
}

.nds-scope .card__price__value svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-font-4, #767676);
}

.nds-scope .card__message {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--color-bg-container, #f6f6f6);
  box-sizing: border-box;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  line-height: 22px;
  text-align: center;
  color: var(--color-font-error, #e24949);
}

.nds-scope .card__message--white {
  background: var(--color-bg-default, #ffffff);
}

.nds-scope .card__toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 0;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-3, #505050);
}

.nds-scope .card__toggle-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.nds-scope .card__amount-row {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.nds-scope .card__amount-row__label {
  width: 124px;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-3, #505050);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-scope .card__amount-row__value {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.36px;
  line-height: 26px;
  color: var(--color-font-1, #121212);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-scope .card__price2-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.nds-scope .card__price2-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 6px;
  flex-shrink: 0;
}

.nds-scope .card__price2-title__label {
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-3, #505050);
  white-space: nowrap;
}

.nds-scope .card__price2-title__sub {
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.24px;
  line-height: 18px;
  color: var(--color-font-4, #767676);
  white-space: nowrap;
}

.nds-scope .card__price2-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.nds-scope .card__price2-value__row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
}

.nds-scope .card__price2-value__unit {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-point, #19973c);
  white-space: nowrap;
}

.nds-scope .card__price2-value__amount {
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.44px;
  line-height: 32px;
  color: var(--color-font-point, #19973c);
  white-space: nowrap;
}

.nds-scope .card__price2-value__sub {
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-1, #121212);
  text-align: right;
}

.nds-scope .card__list-row--lg .card__list-row__data {
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.44px;
  line-height: 32px;
}

.nds-scope .card__2col {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.nds-scope .card__2col__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.nds-scope .card__2col__title {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-3, #505050);
  white-space: nowrap;
}

.nds-scope .card__2col__title svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-font-3, #505050);
}

.nds-scope .card__2col__data {
  width: 100%;
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.36px;
  line-height: 26px;
  color: var(--color-font-1, #121212);
}

.nds-scope .card__2col__divider {
  align-self: stretch;
  flex-shrink: 0;
  width: 1px;
  background: var(--color-bg-extra-bg, #f0f0f0);
}

.nds-scope .card__list-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.nds-scope .card__list-row {
  display: flex;
  gap: 4px;
  width: 100%;
}

.nds-scope .card__list-row__title {
  width: 108px;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  line-height: 24px;
  color: var(--color-font-3, #505050);
}

.nds-scope .card__list-row__data {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  line-height: 24px;
  color: var(--color-font-1, #121212);
}

.nds-scope .card--link {
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
}

.nds-scope .card__list-link-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 20px;
  box-sizing: border-box;
}

.nds-scope .card__arrow--top-right {
  position: absolute;
  top: 17px;
  right: 11px;
}

.nds-scope .card__date2-row {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-height: 24px;
}

.nds-scope .card__date2-row__day {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-font-3, #505050);
  white-space: nowrap;
}

.nds-scope .card__date2-row__sep {
  width: 1px;
  height: 11px;
  background: #e6e6e6;
  flex-shrink: 0;
}

.nds-scope .card__date2-row__category {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  white-space: nowrap;
}

.nds-scope .card__date2-row__text {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  white-space: nowrap;
  flex-shrink: 0;
}

.nds-scope .card__info-row__value {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  line-height: 24px;
  color: var(--color-font-1, #121212);
}

.nds-scope .card__accordion-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: var(--color-bg-container, #f6f6f6);
  border-radius: 12px;
}

.nds-scope .card__accordion-box__head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.nds-scope .card__accordion-box__title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  line-height: 22px;
  color: var(--color-font-1, #121212);
}

.nds-scope .card__accordion-box__arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-font-4, #767676);
}

.nds-scope .card__accordion-box__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 12px 16px;
  box-sizing: border-box;
}

.nds-scope .card__accordion-box__link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  padding: 0;
}

.nds-scope .card__accordion-box__link-text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  line-height: 22px;
  color: var(--color-font-1, #121212);
}

.nds-scope .card__accordion-box__link-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  color: var(--color-font-4, #767676);
}

.nds-scope .card__accordion-box__link-icons svg {
  width: 24px;
  height: 24px;
  display: block;
}

.nds-scope .card__main-data {
  display: flex;
  flex-direction: column;
  width: 100%;
  white-space: nowrap;
}

.nds-scope .card__main-data__title {
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-3, #505050);
}

.nds-scope .card__main-data__value {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  color: var(--color-font-1, #121212);
}

.nds-scope .card__main-data__value strong {
  font-weight: var(--font-weight-semibold);
  font-size: 26px;
  letter-spacing: -0.52px;
  line-height: 38px;
}

.nds-scope .card__main-data__value span {
  font-weight: var(--font-weight-medium);
  font-size: 18px;
  letter-spacing: -0.36px;
  line-height: 26px;
}

.nds-scope .card__vlist {
  display: flex;
  gap: 20px;
  width: 100%;
}

.nds-scope .card__vlist--sm {
  gap: 4px;
}

.nds-scope .card__vlist__col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.nds-scope .card__vlist__col--start { align-items: flex-start; text-align: left; }
.nds-scope .card__vlist__col--center { align-items: center; text-align: center; }
.nds-scope .card__vlist__col--end { align-items: flex-end; text-align: right; }

.nds-scope .card__vlist__title {
  width: 100%;
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-3, #505050);
}

.nds-scope .card__vlist__data {
  width: 100%;
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.36px;
  line-height: 26px;
  color: var(--color-font-1, #121212);
}

.nds-scope .card__vlist--sm .card__vlist__title {
  font-size: 14px;
  letter-spacing: -0.28px;
  line-height: 22px;
}

.nds-scope .card__vlist--sm .card__vlist__data {
  font-size: 15px;
  letter-spacing: -0.3px;
  line-height: 24px;
}

.nds-scope .card__tag-list__sep {
  flex-shrink: 0;
  width: 1px;
  height: 14px;
  background: #e6e6e6;
}

.nds-scope .card__compare-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nds-scope .card__compare-row__text {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-4, #767676);
  white-space: nowrap;
}

/* --- accordion --- */
.nds-scope .accordion-content {
  display: none;
}
.nds-scope .accordion-content.open {
  display: block;
}
.nds-scope .accordion-notice {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.nds-scope .accordion-notice__item {
  width: 100%;
}
.nds-scope .accordion-notice__item::before {
  content: "";
  display: block;
  width: 100%;
  height: 8px;
  background-color: #FFE1E1;
}
.nds-scope .accordion-notice__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  background-color: var(--color-bg-default, #ffffff);
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 16px 24px;
}
.nds-scope .accordion-notice__text {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.nds-scope .accordion-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-icon-1, #111111);
}
.nds-scope .accordion-notice__icon svg {
  width: 24px;
  height: 24px;
}
.nds-scope .accordion-notice__title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
  color: var(--color-font-1, #121212);
  line-height: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nds-scope .accordion-notice__arrow {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-icon-1, #111111);
  transition: transform 0.2s ease;
}
.nds-scope .accordion-notice__arrow svg {
  width: 24px;
  height: 24px;
}
.nds-scope .accordion-notice__trigger[aria-expanded=true] .accordion-notice__arrow {
  transform: rotate(180deg);
}
.nds-scope .accordion-notice__body {
  padding: 0 24px 16px 24px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-font-3, #505050);
  line-height: 1.6;
}
.nds-scope .accordion-line {
  width: 100%;
}
.nds-scope .accordion-line__item {
  position: relative;
  border-top: 1px solid #F0F0F0;
}
.nds-scope .accordion-line__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  padding: 20px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.nds-scope .accordion-line__title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
  line-height: 24px;
  color: var(--color-font-1, #121212);
}
.nds-scope .accordion-line__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-icon-1, #111111);
  transition: transform 0.2s ease;
}
.nds-scope .accordion-line__arrow svg {
  width: 24px;
  height: 24px;
}
.nds-scope .accordion-line__trigger[aria-expanded=true] .accordion-line__arrow {
  transform: rotate(180deg);
}
.nds-scope .accordion-line__body {
  padding: 0 0 20px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-font-3, #505050);
  line-height: 1.6;
}
.nds-scope .accordion-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nds-scope .accordion-box__item {
  border: 1px solid #E1E1E1;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--color-bg-default, #ffffff);
}
.nds-scope .accordion-box__trigger {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: 20px 16px 20px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 12px;
}
.nds-scope .accordion-box__title-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.nds-scope .accordion-box__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
  line-height: 24px;
  color: var(--color-font-1, #121212);
}
.nds-scope .accordion-box__title-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
.nds-scope .accordion-box__sub {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.26px;
  line-height: 20px;
  color: var(--color-font-3, #505050);
}
.nds-scope .accordion-box__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px 2px;
  border-radius: 4px;
  border: 1px solid #707070;
  background-color: transparent;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: -0.2px;
  line-height: 15px;
  color: var(--color-font-4, #767676);
  flex-shrink: 0;
  align-self: flex-start;
}
.nds-scope .accordion-box__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-icon-1, #111111);
  transition: transform 0.2s ease;
}
.nds-scope .accordion-box__arrow svg {
  width: 24px;
  height: 24px;
}
.nds-scope .accordion-box__trigger[aria-expanded=true] .accordion-box__arrow {
  transform: rotate(180deg);
}
.nds-scope .accordion-box__body {
  margin-top: 24px;
  padding: 0 16px 20px 20px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-3, #505050);
}
.nds-scope .accordion-box__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding: 0 16px 20px 20px;
}
.nds-scope .accordion-box__row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nds-scope .accordion-box__row-title {
  width: 108px;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-3, #505050);
}
.nds-scope .accordion-box__row-data {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-1, #121212);
  text-align: right;
}
.nds-scope .accordion-gray {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nds-scope .accordion-gray__item {
  border-radius: 12px;
  background-color: var(--color-bg-container, #f6f6f6);
  overflow: hidden;
}
.nds-scope .accordion-gray__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 12px;
}
.nds-scope .accordion-gray__title {
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-1, #121212);
}
.nds-scope .accordion-gray__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-icon-1, #111111);
  transition: transform 0.2s ease;
}
.nds-scope .accordion-gray__arrow svg {
  width: 24px;
  height: 24px;
}
.nds-scope .accordion-gray__trigger[aria-expanded=true] .accordion-gray__arrow {
  transform: rotate(180deg);
}
.nds-scope .accordion-gray__body {
  padding: 0 12px 16px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-3, #505050);
}
.nds-scope .accordion-gray__list {
  padding: 0 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nds-scope .accordion-gray__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nds-scope .accordion-gray__row-text {
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-1, #121212);
}
.nds-scope .accordion-gray__row-icons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.nds-scope .accordion-gray__row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-font-4, #767676);
  flex-shrink: 0;
}
.nds-scope .accordion-gray__row-icon svg {
  width: 16px;
  height: 16px;
}
.nds-scope .accordion-gray__row-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-font-4, #767676);
  flex-shrink: 0;
}
.nds-scope .accordion-gray__row-chevron svg {
  width: 16px;
  height: 16px;
}

/* --- attached-thumb --- */
.nds-scope .attached-thumb {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.nds-scope .attached-thumb__item {
  position: relative;
  width: 96px;
  height: 96px;
  border: 1px solid #E1E1E1;
  border-radius: 12px;
  background-color: var(--color-bg-default, #ffffff);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  box-sizing: border-box;
}
.nds-scope .attached-thumb__item--disabled .attached-thumb__icon {
  color: var(--color-font-5, #929292);
}
.nds-scope .attached-thumb__item--disabled .attached-thumb__count {
  color: var(--color-font-5, #929292);
}
.nds-scope .attached-thumb__item--filled {
  border: none;
}
.nds-scope .attached-thumb__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-font-3, #505050);
}
.nds-scope .attached-thumb__icon svg {
  width: 24px;
  height: 24px;
}
.nds-scope .attached-thumb__count {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.24px;
  color: var(--color-font-3, #505050);
  text-align: center;
  line-height: 18px;
}
.nds-scope .attached-thumb__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 12px;
}
.nds-scope .attached-thumb__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: rgba(17, 17, 17, 0.5);
  border: none;
  cursor: pointer;
  color: #ffffff;
  padding: 0;
  z-index: 1;
}
.nds-scope .attached-thumb__remove svg {
  width: 14px;
  height: 14px;
}

/* --- attached-list --- */
.nds-scope .attached-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nds-scope .attached-list__divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-bg-extra-bg, #f0f0f0);
}
.nds-scope .attached-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.nds-scope .attached-list__name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-1, #121212);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nds-scope .attached-list__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #b3b3b3;
  border: none;
  cursor: pointer;
  color: #ffffff;
  padding: 0;
  flex-shrink: 0;
}
.nds-scope .attached-list__remove svg {
  width: 12px;
  height: 12px;
}
.nds-scope .attached-list__remove:hover {
  background-color: #929292;
}

/* --- bullet --- */
.nds-scope .bullet {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  margin: 0;
  padding: 0;
}
.nds-scope .bullet__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  list-style: none;
}
.nds-scope .bullet__item::before {
  content: "";
  flex-shrink: 0;
  display: block;
  width: 4px;
  height: 4px;
  background-color: #707070;
  border-radius: var(--radius-full);
  margin-top: 10px;
}
.nds-scope .bullet__item--depth2 {
  gap: 4px;
  padding-left: 12px;
}
.nds-scope .bullet__item--depth2::before {
  width: 4px;
  height: 1px;
  border-radius: 0;
  margin-top: 11.5px;
}
.nds-scope .bullet--body .bullet__item {
  font-size: 15px;
  line-height: 24px;
  letter-spacing: -0.3px;
  color: var(--color-font-3, #505050);
}
.nds-scope .bullet--body .bullet__item::before {
  margin-top: 10px;
}
.nds-scope .bullet--body .bullet__item--depth2::before {
  margin-top: 11.5px;
}
.nds-scope .bullet--caption .bullet__item {
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.26px;
  color: var(--color-font-4, #767676);
}
.nds-scope .bullet--caption .bullet__item::before {
  width: 3px;
  height: 3px;
  margin-top: 9px;
}
.nds-scope .bullet--notice .bullet__item {
  font-size: 14px;
  line-height: 22px;
  letter-spacing: -0.28px;
  color: var(--color-font-3, #505050);
}
.nds-scope .bullet--notice .bullet__item::before {
  margin-top: 9px;
}
.nds-scope .bullet--notice .bullet__item--depth2::before {
  margin-top: 11.5px;
}

/* --- calendar-day --- */
.nds-scope .calendar-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 428px;
}
.nds-scope .calendar-day__label {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-3, #505050);
}
.nds-scope .calendar-day__field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  padding: 0 16px 0 20px;
  background: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-2, #e1e1e1);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color var(--transition-base);
}
.nds-scope .calendar-day__text {
  flex: 1;
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-5, #929292);
}
.nds-scope .calendar-day__text.is-filled {
  color: var(--color-font-1, #121212);
}
.nds-scope .calendar-day__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-icon-secondary);
}
.nds-scope .calendar-day__message {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-font-4, #767676);
}
.nds-scope .calendar-day--error .calendar-day__field {
  border-color: var(--color-border-error, #e24949);
}
.nds-scope .calendar-day--error .calendar-day__message {
  color: var(--color-font-error, #e24949);
}
.nds-scope .calendar-day--readonly .calendar-day__field {
  background: var(--color-bg-extra-bg, #f0f0f0);
  cursor: default;
}
.nds-scope .calendar-day--disabled .calendar-day__field {
  background: var(--color-bg-extra-bg, #f0f0f0);
  cursor: not-allowed;
}
.nds-scope .calendar-day--error .calendar-day__text,
.nds-scope .calendar-day--readonly .calendar-day__text,
.nds-scope .calendar-day--disabled .calendar-day__text {
  color: var(--color-font-1, #121212);
}

/* --- calendar-period --- */
.nds-scope .calendar-period {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 428px;
}
.nds-scope .calendar-period__label {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-3, #505050);
}
.nds-scope .calendar-period__field {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 54px;
  padding: 0 16px 0 20px;
  background: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-2, #e1e1e1);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color var(--transition-base);
}
.nds-scope .calendar-period__text {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-5, #929292);
}
.nds-scope .calendar-period__text.is-filled {
  color: var(--color-font-1, #121212);
}
.nds-scope .calendar-period__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--color-icon-secondary);
}
.nds-scope .calendar-period__sep {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--color-font-5, #929292);
  padding: 0 4px;
}
.nds-scope .calendar-period__message {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-font-4, #767676);
}
.nds-scope .calendar-period--error .calendar-period__field {
  border-color: var(--color-border-error, #e24949);
}
.nds-scope .calendar-period--error .calendar-period__message {
  color: var(--color-font-error, #e24949);
}
.nds-scope .calendar-period--readonly .calendar-period__field {
  background: var(--color-bg-extra-bg, #f0f0f0);
  cursor: default;
}
.nds-scope .calendar-period--disabled .calendar-period__field {
  background: var(--color-bg-extra-bg, #f0f0f0);
  cursor: not-allowed;
}
.nds-scope .calendar-period--error .calendar-period__text,
.nds-scope .calendar-period--readonly .calendar-period__text,
.nds-scope .calendar-period--disabled .calendar-period__text {
  color: var(--color-font-1, #121212);
}

/* --- check --- */
.nds-scope .check-box {
  position: relative;
  display: inline-flex;
}

.nds-scope .check-box__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nds-scope .check-box__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 13px 16px;
  border: 1px solid var(--color-border-1, #d3d3d3);
  border-radius: 10px;
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-3, #505050);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: border-color var(--transition-base), color var(--transition-base);
  white-space: nowrap;
}

.nds-scope .check-box__input:checked + .check-box__label {
  border-color: var(--color-border-point, #19973c);
  color: var(--color-font-point, #19973c);
}

.nds-scope .check-box__input:disabled + .check-box__label {
  opacity: 0.4;
  cursor: not-allowed;
}

.nds-scope .check-box--sm .check-box__label {
  min-width: 72px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.28px;
  line-height: 22px;
}

.nds-scope .check-basic {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.nds-scope .check-basic__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nds-scope .check-basic__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid #707070;
  background: var(--color-bg-default, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

.nds-scope .check-basic__icon::after {
  content: "";
  display: block;
  width: 9px;
  height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 7' fill='none'%3E%3Cpath d='M1 3.5L3.2 6L8 1' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.nds-scope .check-basic__label {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.3px;
  color: var(--color-font-1, #121212);
  line-height: 24px;
}

.nds-scope .check-basic__input:checked + .check-basic__icon {
  background: #19973c;
  border-color: var(--color-border-point, #19973c);
}

.nds-scope .check-basic__input:checked + .check-basic__icon::after {
  opacity: 1;
}

.nds-scope .check-basic__input:disabled + .check-basic__icon {
  background: var(--color-bg-container, #f6f6f6);
  border-color: var(--color-border-2, #e1e1e1);
  cursor: not-allowed;
}

.nds-scope .check-basic__input:disabled ~ .check-basic__label {
  color: var(--color-font-5, #929292);
}

.nds-scope .check-basic__input:checked:disabled + .check-basic__icon {
  background: #b3b3b3;
  border-color: #b3b3b3;
}

.nds-scope .check-basic__input:checked:disabled + .check-basic__icon::after {
  opacity: 1;
}

.nds-scope .check-basic__input:checked:disabled ~ .check-basic__label {
  color: var(--color-font-1, #121212);
}

.nds-scope .check-basic--xs .check-basic__icon {
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  color: var(--color-font-1, #121212);
}

.nds-scope .check-basic--xs .check-basic__icon::after {
  width: 13px;
  height: 10px;
  background: currentColor;
  background-image: none;
  opacity: 1;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10' fill='none'%3E%3Cpath d='M1.5 5L4.8 8.5L11.5 1.5' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 10' fill='none'%3E%3Cpath d='M1.5 5L4.8 8.5L11.5 1.5' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

.nds-scope .check-basic--xs .check-basic__label {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  line-height: 22px;
  letter-spacing: -0.28px;
}

.nds-scope .check-basic--xs .check-basic__input:checked + .check-basic__icon {
  background: none;
  border: none;
  color: var(--color-font-point, #19973c);
}

.nds-scope .check-basic--xs .check-basic__input:disabled + .check-basic__icon {
  background: none;
  border: none;
  color: #d3d3d3;
}

.nds-scope .check-basic--xs .check-basic__input:checked:disabled + .check-basic__icon {
  background: none;
  border: none;
  color: var(--color-icon-5, #b3b3b3);
}

.nds-scope .check-survey {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.nds-scope .check-survey__box {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 16px 16px 12px;
  border: 1px solid var(--color-border-1, #d3d3d3);
  border-radius: 10px;
  background: var(--color-bg-default, #ffffff);
  transition: border-color var(--transition-base);
}

.nds-scope .check-survey__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.nds-scope .check-survey__text {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-3, #505050);
}

.nds-scope .check-survey__message {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.26px;
}

.nds-scope .check-survey__notice {
  line-height: 20px;
  color: var(--color-font-4, #767676);
}

.nds-scope .check-survey__desc {
  line-height: 20px;
  color: var(--color-font-4, #767676);
}

.nds-scope .check-survey--selected .check-survey__box {
  border-color: var(--color-border-point, #19973c);
}

.nds-scope .check-survey--selected .check-survey__notice {
  color: var(--color-font-point, #19973c);
}

.nds-scope .check-survey--error .check-survey__box {
  border-color: var(--color-border-error, #e24949);
}

.nds-scope .check-survey--error .check-survey__notice {
  color: var(--color-font-error, #e24949);
}

/* --- chip --- */
.nds-scope .chip-basic {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 8px 0 12px;
  gap: 4px;
  background: var(--color-bg-container, #f6f6f6);
  border-radius: 6px;
  flex-shrink: 0;
}

.nds-scope .chip-basic__text {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.26px;
  line-height: 20px;
  color: var(--color-font-3, #505050);
  white-space: nowrap;
}

.nds-scope .chip-basic__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-font-5, #929292);
  flex-shrink: 0;
}

.nds-scope .chip-basic__close svg {
  width: 16px;
  height: 16px;
  display: block;
}

.nds-scope .chip-basic__close:hover {
  color: var(--color-font-3, #505050);
}

.nds-scope .chip-single {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 5px 12px;
  background: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-1, #d3d3d3);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.26px;
  line-height: 20px;
  color: var(--color-font-1, #121212);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background-color var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.nds-scope .chip-single--active {
  background: #111111;
  border-color: #111111;
  color: #ffffff;
  font-weight: var(--font-weight-medium);
}

.nds-scope .chip-accordion {
  position: relative;
  width: 100%;
}

.nds-scope .chip-accordion__chips {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  overflow: hidden;
}

.nds-scope .chip-accordion__toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 3px;
  background: var(--color-bg-container, #f6f6f6);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: var(--color-font-1, #121212);
}

.nds-scope .chip-accordion__toggle::before {
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  width: 24px;
  height: 30px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff);
  pointer-events: none;
}

.nds-scope .chip-accordion__toggle svg {
  width: 24px;
  height: 24px;
  display: block;
  transition: transform var(--transition-base);
}

.nds-scope .chip-accordion.is-open .chip-accordion__chips {
  flex-wrap: wrap;
  row-gap: 8px;
}

.nds-scope .chip-accordion.is-open .chip-accordion__toggle {
  position: static;
  margin-left: auto;
}

.nds-scope .chip-accordion.is-open .chip-accordion__toggle::before {
  display: none;
}

.nds-scope .chip-accordion.is-open .chip-accordion__toggle svg {
  transform: rotate(180deg);
}

/* --- controls --- */
.nds-scope .controls-stepper {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.nds-scope .controls-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-1, #d3d3d3);
  cursor: pointer;
  color: var(--color-font-1, #121212);
}

.nds-scope .controls-stepper__btn svg {
  width: 24px;
  height: 24px;
  display: block;
}

.nds-scope .controls-stepper__btn:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-right: none;
}

.nds-scope .controls-stepper__btn:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-left: none;
}

.nds-scope .controls-stepper__btn:disabled {
  background: var(--color-bg-extra-bg, #f0f0f0);
  color: #d3d3d3;
  cursor: not-allowed;
}

.nds-scope .controls-stepper__input {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 32px;
  padding: 0 4px;
  border-top: 1px solid #d3d3d3;
  border-bottom: 1px solid #d3d3d3;
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.32px;
  line-height: 24px;
  color: var(--color-font-1, #121212);
  text-align: center;
  background: none;
  -moz-appearance: textfield;
}

.nds-scope .controls-stepper__input::-webkit-outer-spin-button,
.nds-scope .controls-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.nds-scope .controls-controller {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  background: var(--color-bg-default, #ffffff);
  border: none;
  border-radius: 8px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
  color: var(--color-font-1, #121212);
}

.nds-scope .controls-controller svg {
  width: 24px;
  height: 24px;
  display: block;
}

.nds-scope .controls-controller:disabled {
  color: #d3d3d3;
  cursor: not-allowed;
}

/* --- divider --- */
.nds-scope .divider {
  display: block;
  width: 100%;
  border: none;
  margin: 0;
  flex-shrink: 0;
}

.nds-scope .divider--content {
  height: 8px;
  background-color: var(--color-bg-container, #f6f6f6);
}

.nds-scope .divider--page {
  height: 1px;
  background-color: var(--color-bg-container, #f6f6f6);
}

.nds-scope .divider--list1 {
  height: 1px;
  background-color: #e1e1e1;
}

.nds-scope .divider--list2 {
  height: 1px;
  background-color: var(--color-bg-extra-bg, #f0f0f0);
}

.nds-scope .divider--dash {
  height: 0;
  border-top: 1px dashed #f6f6f6;
}

/* --- empty --- */
.nds-scope .empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.nds-scope .empty__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nds-scope .empty__icon svg {
  width: 40px;
  height: 40px;
  display: block;
}

.nds-scope .empty__text {
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-3, #505050);
}

.nds-scope .empty--result {
  padding: 24px;
  gap: 16px;
}

.nds-scope .empty--result .empty__text {
  font-size: 14px;
  font-weight: 400;
}

.nds-scope .empty--page {
  padding: 48px 24px 24px;
  gap: 16px;
}

.nds-scope .empty--page .empty__text {
  font-size: 16px;
  font-weight: 400;
}

/* --- filter --- */
.nds-scope .filter-left {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 24px;
  background-color: var(--color-bg-default);
}

.nds-scope .filter-left__text {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nds-scope .filter-left__label {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  letter-spacing: -0.26px;
  color: var(--color-font-3, #505050);
  white-space: nowrap;
}

.nds-scope .filter-left__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-font-1, #121212);
}

.nds-scope .filter-left__tooltip {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nds-scope .filter-left__tooltip-text {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  line-height: 20px;
  letter-spacing: -0.26px;
  color: var(--color-font-1, #121212);
  white-space: nowrap;
}

.nds-scope .filter-left__tooltip-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-icon-4, #707070);
}

.nds-scope .filter-right {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 24px;
  background-color: var(--color-bg-default);
}

.nds-scope .filter-right__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 0 0;
  min-width: 0;
}

.nds-scope .filter-right__date {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  letter-spacing: -0.26px;
  color: var(--color-font-1, #121212);
}

.nds-scope .filter-right__sort {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  line-height: 20px;
  letter-spacing: -0.26px;
  color: var(--color-font-3, #505050);
}

.nds-scope .filter-right__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-font-1, #121212);
}

/* --- infobox --- */
.nds-scope .infobox {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 16px;
  border-radius: 16px;
  background-color: var(--color-bg-container, #f6f6f6);
}

.nds-scope .infobox__title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  line-height: 24px;
  color: var(--color-font-1, #121212);
}

.nds-scope .infobox__body {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-3, #505050);
}

.nds-scope .infobox__button {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 22px;
  letter-spacing: -0.28px;
  color: var(--color-font-3, #505050);
}

.nds-scope .infobox__button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* --- input --- */
.nds-scope .input-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 428px;
}

.nds-scope .input-box__label {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-3, #505050);
}

.nds-scope .input-box__field {
  position: relative;
  display: flex;
  align-items: center;
  height: 54px;
  padding: 0 16px 0 20px;
  background: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-2, #e1e1e1);
  border-radius: 12px;
  gap: 8px;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.nds-scope .input-box__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nds-scope .input-box__row > .input-box__field {
  flex: 1;
  min-width: 0;
}

.nds-scope .input-box__input {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  background: none;
  border: none;
  outline: none;
}

.nds-scope .input-box__input::-moz-placeholder {
  color: var(--color-font-5, #929292);
}

.nds-scope .input-box__input::placeholder {
  color: var(--color-font-5, #929292);
}

.nds-scope .input-box__input--right {
  text-align: right;
}

.nds-scope .input-box__input--center {
  text-align: center;
}

.nds-scope .input-box__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #b3b3b3;
  border: none;
  cursor: pointer;
  color: #ffffff;
  flex-shrink: 0;
  padding: 0;
}

.nds-scope .input-box__clear svg {
  width: 10px;
  height: 10px;
  display: block;
}

.nds-scope .input-box__unit {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  flex-shrink: 0;
  white-space: nowrap;
}

.nds-scope .input-box__prefix-sep {
  width: 1px;
  height: 20px;
  background: #e1e1e1;
  flex-shrink: 0;
}

.nds-scope .input-box__prefix-text {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  flex-shrink: 0;
  white-space: nowrap;
}

.nds-scope .input-box__plus {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  color: var(--color-font-5, #929292);
  flex-shrink: 0;
  line-height: 1;
}

.nds-scope .input-box__select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23767676' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2px center/10px;
  border: none;
  outline: none;
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  cursor: pointer;
  padding-right: 18px;
  flex-shrink: 0;
  min-width: 48px;
}

.nds-scope .input-box__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--color-border-1, #d3d3d3);
  border-radius: 8px;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-font-3, #505050);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background-color var(--transition-base);
}

.nds-scope .input-box__btn:hover {
  background: var(--color-bg-container, #f6f6f6);
}

.nds-scope .input-box__timer {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-font-error, #e24949);
  flex-shrink: 0;
  white-space: nowrap;
}

.nds-scope .input-box__sep {
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  color: var(--color-font-3, #505050);
  flex-shrink: 0;
}

.nds-scope .input-box__check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-font-point, #19973c);
}

.nds-scope .input-box__message {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-font-4, #767676);
}

.nds-scope .input-box__message--success {
  color: var(--color-font-point, #19973c);
}

.nds-scope .input-box--focus .input-box__field {
  border-color: var(--color-border-point, #19973c);
}

.nds-scope .input-box--error .input-box__field {
  border-color: var(--color-border-error, #e24949);
}

.nds-scope .input-box--error .input-box__message {
  color: var(--color-font-error, #e24949);
}

.nds-scope .input-box--success .input-box__field {
  border-color: var(--color-border-point, #19973c);
}

.nds-scope .input-box--success .input-box__message {
  color: var(--color-font-point, #19973c);
}

.nds-scope .input-box--readonly .input-box__field {
  background: var(--color-bg-extra-bg, #f0f0f0);
  cursor: default;
}

.nds-scope .input-box--disabled .input-box__field {
  background: var(--color-bg-extra-bg, #f0f0f0);
  cursor: not-allowed;
}

.nds-scope .input-line {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 428px;
}

.nds-scope .input-line__label {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-3, #505050);
}

.nds-scope .input-line__field {
  display: flex;
  align-items: center;
  height: 54px;
  padding: 14px 8px;
  background: var(--color-bg-default, #ffffff);
  border-bottom: 1px solid #e1e1e1;
  gap: 12px;
  box-sizing: border-box;
  transition: border-color var(--transition-base);
}

.nds-scope .input-line__row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.nds-scope .input-line__row > .input-line__field {
  flex: 1;
  min-width: 0;
}

.nds-scope .input-line__input {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  background: none;
  border: none;
  outline: none;
}

.nds-scope .input-line__input::-moz-placeholder {
  color: var(--color-font-5, #929292);
}

.nds-scope .input-line__input::placeholder {
  color: var(--color-font-5, #929292);
}

.nds-scope .input-line__input--right {
  text-align: right;
}

.nds-scope .input-line__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #b3b3b3;
  border: none;
  cursor: pointer;
  color: #ffffff;
  flex-shrink: 0;
  padding: 0;
}

.nds-scope .input-line__clear svg {
  width: 10px;
  height: 10px;
  display: block;
}

.nds-scope .input-line__unit {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  flex-shrink: 0;
}

.nds-scope .input-line__sep {
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  color: var(--color-font-3, #505050);
  flex-shrink: 0;
  padding-bottom: 10px;
}

.nds-scope .input-line__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  background: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-1, #d3d3d3);
  border-radius: 8px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background-color var(--transition-base);
}

.nds-scope .input-line__btn:hover {
  background: var(--color-bg-container, #f6f6f6);
}

.nds-scope .input-line__btn--secondary {
  border-color: var(--color-border-point, #19973c);
  color: var(--color-font-point, #19973c);
}

.nds-scope .input-line__btn--secondary:hover {
  background: var(--color-bg-default, #ffffff);
}

.nds-scope .input-line__select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23767676' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2px center/10px;
  border: none;
  outline: none;
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  cursor: pointer;
  padding-right: 18px;
  flex-shrink: 0;
  min-width: 48px;
}

.nds-scope .input-line__message {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-font-4, #767676);
}

.nds-scope .input-line--focus .input-line__field {
  border-color: var(--color-border-point, #19973c);
}

.nds-scope .input-line--error .input-line__field {
  border-color: var(--color-border-error, #e24949);
}

.nds-scope .input-line--error .input-line__message {
  color: var(--color-font-error, #e24949);
}

.nds-scope .input-box__ghost {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-5, #929292);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-scope .input-box__ghost--right {
  text-align: right;
}

.nds-scope .input-box__ghost--fixed {
  flex: none;
  width: 120px;
}

.nds-scope .input-line__ghost {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-5, #929292);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-scope .input-line__ghost--right {
  text-align: right;
}

.nds-scope .input-box__inline-select,
.nds-scope .input-line__inline-select {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-5, #929292);
  cursor: pointer;
}

.nds-scope .input-box__inline-select svg,
.nds-scope .input-line__inline-select svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.nds-scope .input-box__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-font-5, #929292);
}

.nds-scope .input-box__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nds-scope .input-box__btn--disabled,
.nds-scope .input-line__btn--disabled {
  color: var(--color-font-5, #929292);
  border-color: var(--color-border-2, #e1e1e1);
  cursor: not-allowed;
}

.nds-scope .input-box__btn--disabled:hover,
.nds-scope .input-line__btn--disabled:hover {
  background: var(--color-bg-default, #ffffff);
}

/* --- label --- */
.nds-scope .label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 4px;
  font-weight: var(--font-weight-regular);
  white-space: nowrap;
  vertical-align: middle;
}

.nds-scope .label--sm {
  padding: 3px 8px 2px;
  font-size: 10px;
  line-height: 15px;
  letter-spacing: -0.2px;
}

.nds-scope .label--lg {
  padding: 2px 8px;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.26px;
}

.nds-scope .label--line {
  background-color: transparent;
  border: 1px solid currentColor;
}

.nds-scope .label--fill {
  border: none;
}

.nds-scope .label--gray {
  color: var(--color-font-4, #767676);
}

.nds-scope .label--blue {
  color: #2c6dd4;
}

.nds-scope .label--green {
  color: var(--color-font-point, #19973c);
}

.nds-scope .label--lightblue {
  color: #12a396;
}

.nds-scope .label--navy {
  color: #015aac;
}

.nds-scope .label--orange {
  color: #d44b10;
}

.nds-scope .label--red {
  color: #d10f0f;
}

.nds-scope .label--skyblue {
  color: #2b9ac9;
}

.nds-scope .label--yellow {
  color: #da6f11;
}

.nds-scope .label--line.label--gray {
  border-color: #707070;
}

.nds-scope .label--grade1 {
  color: #d10f0f;
}

.nds-scope .label--grade2 {
  color: #d44b10;
}

.nds-scope .label--grade3 {
  color: #da6f11;
}

.nds-scope .label--grade4 {
  color: #12a396;
}

.nds-scope .label--grade5 {
  color: #2b9ac9;
}

.nds-scope .label--grade6 {
  color: #015aac;
}

.nds-scope .label--fill.label--gray {
  background-color: var(--color-bg-container, #f6f6f6);
  color: var(--color-font-2, #343434);
}

.nds-scope .label--fill.label--green {
  background-color: #19973c;
  color: #ffffff;
}

.nds-scope .label--fill.label--red {
  background-color: #d10f0f;
  color: #ffffff;
}

.nds-scope .label--fill.label--skyblue {
  background-color: #2b9ac9;
  color: #ffffff;
}

.nds-scope .label--fill.label--yellow {
  background-color: #ffd103;
  color: var(--color-font-1, #121212);
}

.nds-scope .label__arrow {
  flex-shrink: 0;
  width: 4px;
  height: 8px;
}

.nds-scope .label__arrow svg {
  width: 4px;
  height: 8px;
  display: block;
}

.nds-scope .label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 2.5px 6px;
  background: #4d44d9;
  border-radius: 4px;
  color: #ffffff;
}

.nds-scope .label-icon__content {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.nds-scope .label-icon__icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.nds-scope .label-icon__icon svg {
  width: 12px;
  height: 12px;
  display: block;
}

.nds-scope .label-icon__text {
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.2px;
  line-height: 15px;
  white-space: nowrap;
}

.nds-scope .label-icon__arrow {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}

.nds-scope .label-icon__arrow svg {
  width: 8px;
  height: 8px;
  display: block;
}

.nds-scope .label-text {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-3, #505050);
}

.nds-scope .label-text__tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-font-4, #767676);
}

.nds-scope .label-text__tooltip svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nds-scope .label-text__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #19973c;
  color: #ffffff;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
}

/* --- link --- */
.nds-scope .link-vertical {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100px;
  padding: 20px 8px 16px;
  background: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-2, #e1e1e1);
  border-radius: 10px;
  box-sizing: border-box;
}

.nds-scope .link-vertical__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--color-font-1, #121212);
}

.nds-scope .link-vertical__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nds-scope .link-vertical__title {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  line-height: 24px;
  color: var(--color-font-1, #121212);
  text-align: center;
}

.nds-scope .link-horizontal {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 16px 16px 16px 20px;
  background: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-2, #e1e1e1);
  border-radius: 10px;
  box-sizing: border-box;
  width: 100%;
  max-width: 312px;
}

.nds-scope .link-horizontal__title {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.nds-scope .link-horizontal__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-font-3, #505050);
}

.nds-scope .link-horizontal__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nds-scope .link-horizontal__text {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
}

.nds-scope .link-horizontal__arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-font-5, #929292);
}

.nds-scope .link-horizontal__arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nds-scope .link-mix {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-2, #e1e1e1);
  border-radius: 12px;
  width: 100%;
  max-width: 312px;
  box-sizing: border-box;
}

.nds-scope .link-mix__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.nds-scope .link-mix__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nds-scope .link-mix__text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.nds-scope .link-mix__title {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  line-height: 24px;
}

.nds-scope .link-mix__sub {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-font-4, #767676);
  line-height: 20px;
}

.nds-scope .link-none {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 312px;
}

.nds-scope .link-none__title {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  line-height: 26px;
}

.nds-scope .link-none__arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-font-5, #929292);
}

.nds-scope .link-none__arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nds-scope .link-category {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 16px 20px;
  background: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-2, #e1e1e1);
  border-radius: 10px;
  width: 100%;
  max-width: 312px;
  box-sizing: border-box;
}

.nds-scope .link-category__body {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.nds-scope .link-category__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-3, #f0f0f0);
  overflow: hidden;
}

.nds-scope .link-category__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nds-scope .link-category__text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.nds-scope .link-category__label {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-font-4, #767676);
  line-height: 22px;
}

.nds-scope .link-category__title {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  line-height: 24px;
}

.nds-scope .link-category__arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-font-5, #929292);
}

.nds-scope .link-category__arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nds-scope .link-category2 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 16px 20px;
  background: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-2, #e1e1e1);
  border-radius: 10px;
  width: 100%;
  max-width: 312px;
  box-sizing: border-box;
}

.nds-scope .link-category2__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  align-self: flex-start;
}

.nds-scope .link-category2__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nds-scope .link-category2__text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.nds-scope .link-category2__title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.nds-scope .link-category2__title {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  line-height: 24px;
}

.nds-scope .link-category2__arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-font-5, #929292);
}

.nds-scope .link-category2__arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nds-scope .link-category2__sub {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.nds-scope .link-category2__sub-text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-font-4, #767676);
  line-height: 22px;
}

.nds-scope .link-category2__sub-spacer {
  width: 24px;
  flex-shrink: 0;
}

.nds-scope .link-divide {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 16px 20px 20px;
  background: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-2, #e1e1e1);
  border-radius: 16px;
  width: 100%;
  max-width: 312px;
  box-sizing: border-box;
}

.nds-scope .link-divide__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.nds-scope .link-divide__text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.nds-scope .link-divide__title {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  line-height: 24px;
}

.nds-scope .link-divide__sub {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-font-4, #767676);
  line-height: 20px;
}

.nds-scope .link-divide__arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-font-5, #929292);
}

.nds-scope .link-divide__arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nds-scope .link-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  width: 100%;
  max-width: 312px;
}

.nds-scope .link-price__row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.nds-scope .link-price__name {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 2px 0;
}

.nds-scope .link-price__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 16px;
  background: var(--color-bg-container, #f6f6f6);
  overflow: hidden;
}

.nds-scope .link-price__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nds-scope .link-price__name-text {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.nds-scope .link-price__date {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-font-3, #505050);
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nds-scope .link-price__person {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  line-height: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nds-scope .link-price__sub {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-font-5, #929292);
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nds-scope .link-price__amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  width: 136px;
  flex-shrink: 0;
  text-align: right;
}

.nds-scope .link-price__label {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-font-3, #505050);
  line-height: 22px;
}

.nds-scope .link-price__value {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  line-height: 26px;
}

.nds-scope .link-price__balance {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-font-4, #767676);
  line-height: 22px;
}

.nds-scope .link-price__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  background: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-1, #d3d3d3);
  border-radius: 8px;
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  cursor: pointer;
  white-space: nowrap;
}

.nds-scope .link-product {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 296px;
}

.nds-scope .link-product__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.nds-scope .link-product__title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nds-scope .link-product__title {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  line-height: 26px;
}

.nds-scope .link-product__sub {
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-font-4, #767676);
  line-height: 24px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.nds-scope .link-product__rate {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 24px;
}

.nds-scope .link-product__rate--primary {
  font-weight: var(--font-weight-semibold);
  color: var(--color-font-point, #19973c);
}

.nds-scope .link-product__rate--secondary {
  font-weight: var(--font-weight-medium);
  color: var(--color-font-4, #767676);
}

.nds-scope .link-list {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 16px 20px;
  background: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-2, #e1e1e1);
  border-radius: 10px;
  width: 100%;
  max-width: 312px;
  box-sizing: border-box;
}

.nds-scope .link-list__text {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.nds-scope .link-list__label {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.02em;
  color: var(--color-font-4, #767676);
  white-space: nowrap;
}

.nds-scope .link-list__value {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.02em;
  color: var(--color-font-1, #121212);
  text-align: right;
}

.nds-scope .link-list__arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-font-5, #929292);
}

.nds-scope .link-list__arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- list --- */
.nds-scope .list-kv {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.nds-scope .list-kv__title {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  width: 108px;
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-3, #505050);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-scope .list-kv__tooltip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  width: 24px;
  height: 20px;
  color: var(--color-icon-4, #707070);
}

.nds-scope .list-kv__tooltip svg {
  width: 24px;
  height: 24px;
  display: block;
}

.nds-scope .list-kv__data {
  flex: 1;
  min-width: 0;
  text-align: right;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-1, #121212);
}

.nds-scope .list-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  background-color: var(--color-bg-default, #ffffff);
}

.nds-scope .list-card__title {
  width: 100%;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.32px;
  line-height: 24px;
  color: var(--color-font-1, #121212);
}

.nds-scope .list-card__rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.nds-scope .list-card--lg .list-kv__title {
  width: 108px;
  padding-top: 6px;
  align-self: stretch;
}

.nds-scope .list-card--lg .list-kv__data {
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.44px;
  line-height: 32px;
}

.nds-scope .list-card--sm .list-kv__title {
  width: 108px;
}

.nds-scope .list-card--xs .list-kv__title {
  width: 108px;
  font-size: 14px;
  letter-spacing: -0.28px;
  line-height: 22px;
}

.nds-scope .list-card--xs .list-kv__data {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  color: var(--color-font-3, #505050);
  letter-spacing: -0.28px;
  line-height: 22px;
}

.nds-scope .list-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.nds-scope .list-page__title {
  width: 100%;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.32px;
  line-height: 24px;
  color: var(--color-font-1, #121212);
}

.nds-scope .list-page__rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.nds-scope .list-page__divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-bg-extra-bg, #f0f0f0);
  flex-shrink: 0;
}

.nds-scope .list-page--lg .list-kv__title {
  width: 108px;
  padding-top: 6px;
  align-self: stretch;
}

.nds-scope .list-page--lg .list-kv__data {
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.44px;
  line-height: 32px;
}

.nds-scope .list-page--sm .list-kv__title {
  width: 124px;
}

.nds-scope .list-page--xs .list-kv__title {
  width: 124px;
  font-size: 14px;
  letter-spacing: -0.28px;
  line-height: 22px;
}

.nds-scope .list-page--xs .list-kv__data {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  color: var(--color-font-3, #505050);
  letter-spacing: -0.28px;
  line-height: 22px;
}

.nds-scope .list-kv--xs .list-kv__title {
  font-size: 14px;
  letter-spacing: -0.28px;
  line-height: 22px;
}

.nds-scope .list-kv--xs .list-kv__data {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  color: var(--color-font-3, #505050);
  letter-spacing: -0.28px;
  line-height: 22px;
}

.nds-scope .list-account {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.nds-scope .list-account__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: 40px;
  padding: 3px 0;
}

.nds-scope .list-account__logo img {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.nds-scope .list-account__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nds-scope .list-account__name {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.32px;
  line-height: 24px;
  color: var(--color-font-1, #121212);
}

.nds-scope .list-account__number {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-4, #767676);
}

.nds-scope .list-account__price {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-3, #505050);
}

.nds-scope .list-account__price strong {
  font-weight: var(--font-weight-medium);
  color: var(--color-font-1, #121212);
}

.nds-scope .list-account__btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-3, #505050);
  text-decoration: underline;
}

.nds-scope .list-account__fav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-icon-4, #707070);
}

.nds-scope .list-account__fav svg {
  width: 24px;
  height: 24px;
  display: block;
}

.nds-scope .list-account__fav--active {
  color: #f9a825;
}

.nds-scope .list-continue {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid var(--color-border-2, #e1e1e1);
  border-radius: 12px;
  padding: 13px 16px 13px 20px;
}

.nds-scope .list-continue__text {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-3, #505050);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nds-scope .list-continue__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
}

.nds-scope .list-continue__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  background: var(--color-bg-default, #ffffff);
  border: 1px solid #19973c;
  border-radius: 8px;
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.26px;
  line-height: 20px;
  color: var(--color-font-point, #19973c);
  cursor: pointer;
  white-space: nowrap;
}

.nds-scope .list-continue__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-icon-1, #111111);
}

.nds-scope .list-continue__close svg {
  width: 24px;
  height: 24px;
  display: block;
}

.nds-scope .list-accordion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.nds-scope .list-accordion__divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-bg-extra-bg, #f0f0f0);
  flex-shrink: 0;
}

.nds-scope .list-accordion__row {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.nds-scope .list-accordion__title {
  flex-shrink: 0;
  width: 124px;
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-3, #505050);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-scope .list-accordion__data {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.36px;
  line-height: 26px;
  color: var(--color-font-1, #121212);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-scope .list-accordion__toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-top: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-3, #505050);
}

.nds-scope .list-accordion__toggle svg {
  width: 16px;
  height: 16px;
  display: block;
  transition: transform var(--transition-base);
}

.nds-scope .list-accordion__toggle.is-open svg {
  transform: rotate(180deg);
}

/* --- load-data --- */
.nds-scope .load-data {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 312px;
}

.nds-scope .load-data__label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  min-height: 22px;
}

.nds-scope .load-data__label-btn {
  position: absolute;
  right: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-3, #505050);
}

.nds-scope .load-data__label-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.nds-scope .load-data__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  background: var(--color-bg-input-load-data, #f6f6f6);
  box-sizing: border-box;
  overflow: hidden;
}

.nds-scope .load-data__row {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 4px;
}

.nds-scope .load-data__row--top {
  align-items: flex-start;
}

.nds-scope .load-data__title {
  flex-shrink: 0;
  width: 120px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-3, #505050);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-scope .load-data__title-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  width: 120px;
  min-width: 0;
}

.nds-scope .load-data__title-main {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.36px;
  line-height: 26px;
  color: var(--color-font-1, #121212);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-scope .load-data__sub {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.26px;
  line-height: 20px;
  color: var(--color-font-3, #505050);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-scope .load-data__data {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.36px;
  line-height: 26px;
  color: var(--color-font-1, #121212);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nds-scope .load-data__text-btn {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 30px;
}

.nds-scope .load-data__text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-1, #121212);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-scope .load-data__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  background: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-1, #d3d3d3);
  border-radius: 8px;
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.26px;
  line-height: 20px;
  color: var(--color-font-1, #121212);
  cursor: pointer;
  white-space: nowrap;
}

.nds-scope .load-data__message {
  width: 100%;
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.26px;
  line-height: 20px;
  color: var(--color-font-4, #767676);
}

.nds-scope .load-data__bottom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-3, #505050);
}

.nds-scope .load-data__bottom-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* --- radio --- */
.nds-scope .radio-box-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nds-scope .radio-box-center__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nds-scope .radio-box-center__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 20px;
  min-width: 80px;
  border: 1px solid var(--color-border-1, #d3d3d3);
  border-radius: 10px;
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-3, #505050);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: border-color var(--transition-base), color var(--transition-base);
}

.nds-scope .radio-box-center__input:checked + .radio-box-center__label {
  border-color: var(--color-border-point, #19973c);
  color: var(--color-font-point, #19973c);
}

.nds-scope .radio-box-center__input:disabled + .radio-box-center__label {
  color: var(--color-font-5, #929292);
  cursor: not-allowed;
}

.nds-scope .radio-box-center--sm .radio-box-center__label {
  height: 36px;
  padding: 0 16px;
  font-size: 14px;
  letter-spacing: -0.28px;
  line-height: 22px;
  border-radius: 8px;
}

.nds-scope .radio-box-left {
  display: flex;
  align-items: center;
  width: 100%;
}

.nds-scope .radio-box-left__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nds-scope .radio-box-left__label {
  display: flex;
  align-items: center;
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border: 1px solid var(--color-border-1, #d3d3d3);
  border-radius: 10px;
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-3, #505050);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: border-color var(--transition-base), color var(--transition-base), background-color var(--transition-base);
}

.nds-scope .radio-box-left__input:checked + .radio-box-left__label {
  border-color: var(--color-border-point, #19973c);
  color: var(--color-font-point, #19973c);
}

.nds-scope .radio-box-left__input:disabled + .radio-box-left__label {
  background: var(--color-bg-extra-bg, #f0f0f0);
  cursor: not-allowed;
}

.nds-scope .radio-box-left--error .radio-box-left__label {
  border-color: var(--color-border-error, #e24949);
}

.nds-scope .radio-basic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.nds-scope .radio-basic__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nds-scope .radio-basic__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-border-1, #d3d3d3);
  background: var(--color-bg-default, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.nds-scope .radio-basic__icon::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d3d3d3;
  transition: background-color var(--transition-base);
}

.nds-scope .radio-basic__label {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.32px;
  line-height: 24px;
  color: var(--color-font-1, #121212);
}

.nds-scope .radio-basic__input:checked + .radio-basic__icon {
  border-color: var(--color-border-point, #19973c);
}

.nds-scope .radio-basic__input:checked + .radio-basic__icon::after {
  background: #19973c;
}

.nds-scope .radio-basic__input:disabled + .radio-basic__icon {
  border-color: var(--color-border-2, #e1e1e1);
  background: var(--color-bg-container, #f6f6f6);
  cursor: not-allowed;
}

.nds-scope .radio-basic__input:disabled + .radio-basic__icon::after {
  background: #e1e1e1;
}

.nds-scope .radio-basic__input:disabled ~ .radio-basic__label {
  color: var(--color-font-5, #929292);
}

.nds-scope .radio-basic__input:checked:disabled + .radio-basic__icon {
  border-color: #b3b3b3;
}

.nds-scope .radio-basic__input:checked:disabled + .radio-basic__icon::after {
  background: #b3b3b3;
}

.nds-scope .radio-basic--sm {
  gap: 6px;
}

.nds-scope .radio-basic--sm .radio-basic__icon {
  width: 24px;
  height: 24px;
}

.nds-scope .radio-basic--sm .radio-basic__icon::after {
  width: 10px;
  height: 10px;
}

.nds-scope .radio-basic--sm .radio-basic__label {
  font-size: 15px;
  letter-spacing: -0.3px;
  line-height: 24px;
}

.nds-scope .radio-explain {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.nds-scope .radio-explain__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nds-scope .radio-explain__label {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-border-1, #d3d3d3);
  border-radius: 10px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: border-color var(--transition-base);
}

.nds-scope .radio-explain__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-extra-bg, #f0f0f0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-font-4, #767676);
}

.nds-scope .radio-explain__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.nds-scope .radio-explain__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.nds-scope .radio-explain__title {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-1, #121212);
  transition: color var(--transition-base);
}

.nds-scope .radio-explain__sub {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.26px;
  line-height: 20px;
  color: var(--color-font-3, #505050);
}

.nds-scope .radio-explain__input:checked + .radio-explain__label {
  border-color: var(--color-border-point, #19973c);
}

.nds-scope .radio-explain__input:checked + .radio-explain__label .radio-explain__title {
  color: var(--color-font-point, #19973c);
}

.nds-scope .radio-explain--error .radio-explain__label {
  border-color: var(--color-border-error, #e24949);
}

.nds-scope .radio-explain__guide {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.26px;
  line-height: 20px;
  color: var(--color-font-4, #767676);
  margin-top: 4px;
}

.nds-scope .radio-explain__guide--error {
  color: var(--color-font-error, #e24949);
}

.nds-scope .radio-explain__guide--selected {
  color: var(--color-font-point, #19973c);
}

.nds-scope .radio-choose {
  display: inline-flex;
}

.nds-scope .radio-choose__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nds-scope .radio-choose__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 152px;
  padding: 16px;
  background-color: var(--color-bg-default, #ffffff);
  border: 1px solid var(--color-border-1, #d3d3d3);
  border-radius: 10px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-sizing: border-box;
  transition: border-color var(--transition-base);
}

.nds-scope .radio-choose__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--color-font-4, #767676);
}

.nds-scope .radio-choose__icon svg {
  width: 36px;
  height: 36px;
  display: block;
}

.nds-scope .radio-choose__text {
  width: 120px;
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-3, #505050);
  text-align: center;
}

.nds-scope .radio-choose__input:checked + .radio-choose__label {
  border-color: var(--color-border-point, #19973c);
}

.nds-scope .radio-choose__input:checked + .radio-choose__label .radio-choose__text {
  color: var(--color-font-point, #19973c);
}

.nds-scope .radio-survey {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nds-scope .radio-survey__options {
  display: flex;
  gap: 8px;
}

.nds-scope .radio-survey__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nds-scope .radio-survey__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 50px;
  min-width: 152px;
  border: 1px solid var(--color-border-1, #d3d3d3);
  border-radius: 10px;
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-3, #505050);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: border-color var(--transition-base), color var(--transition-base);
}

.nds-scope .radio-survey__input:checked + .radio-survey__label {
  border-color: var(--color-border-point, #19973c);
  color: var(--color-font-point, #19973c);
}

.nds-scope .radio-survey--error .radio-survey__label {
  border-color: var(--color-border-error, #e24949);
}

.nds-scope .radio-survey__guide {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.26px;
  line-height: 20px;
  color: var(--color-font-4, #767676);
}

.nds-scope .radio-survey__guide--error {
  color: var(--color-font-error, #e24949);
}

.nds-scope .radio-survey__guide--selected {
  color: var(--color-font-point, #19973c);
}

.nds-scope .radio-survey--icon .radio-survey__label {
  width: 100%;
  height: auto;
  min-width: 0;
  justify-content: flex-start;
  gap: 12px;
  padding: 16px 16px 16px 12px;
}

.nds-scope .radio-survey--icon .radio-survey__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--color-font-4, #767676);
}

.nds-scope .radio-survey--icon .radio-survey__icon svg {
  width: 36px;
  height: 36px;
  display: block;
}

.nds-scope .radio-survey--icon .radio-survey__text {
  flex: 1;
  text-align: left;
}

/* --- select --- */
.nds-scope .select-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.nds-scope .select-field__label {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-3, #505050);
}

.nds-scope .select-field__box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  padding: 14px 16px 14px 20px;
  border: 1px solid var(--color-border-2, #e1e1e1);
  border-radius: 12px;
  background-color: var(--color-bg-default, #ffffff);
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
  /* select-field__box는 실제 <button>으로 마크업합니다(키보드 포커스·Enter/Space 동작을 위해) */
  font: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

.nds-scope .select-field__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.nds-scope .select-field__text {
  font-size: 18px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.36px;
  line-height: 26px;
  color: var(--color-font-5, #929292);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nds-scope .select-field__sub {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-3, #505050);
}

.nds-scope .select-field__prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.nds-scope .select-field__prefix svg {
  width: 24px;
  height: 24px;
}

.nds-scope .select-field__chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-font-3, #505050);
  transition: transform 0.15s ease;
}

.nds-scope .select-field__chevron svg {
  width: 24px;
  height: 24px;
}

.nds-scope .select-field__chevron--up {
  transform: rotate(180deg);
}

.nds-scope .select-field__msg {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.26px;
  line-height: 20px;
  color: var(--color-font-4, #767676);
}

.nds-scope .select-field--filled .select-field__text, .nds-scope .select-field--error .select-field__text, .nds-scope .select-field--readonly .select-field__text, .nds-scope .select-field--disabled .select-field__text {
  color: var(--color-font-1, #121212);
}

.nds-scope .select-field--error .select-field__box {
  border-color: var(--color-border-error, #e24949);
}

.nds-scope .select-field--error .select-field__msg {
  color: var(--color-font-error, #e24949);
}

.nds-scope .select-field--readonly .select-field__box, .nds-scope .select-field--disabled .select-field__box {
  background-color: var(--color-bg-extra-bg, #f0f0f0);
  pointer-events: none;
}

.nds-scope .select-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  padding: 20px 16px 20px 20px;
  border: 1px solid var(--color-border-2, #e1e1e1);
  border-radius: 16px;
  background-color: var(--color-bg-default, #ffffff);
  box-sizing: border-box;
}

.nds-scope .select-card__select-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.nds-scope .select-card__select-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nds-scope .select-card__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  padding: 3px 8px 2px;
  background-color: var(--color-bg-container, #f6f6f6);
  border-radius: 4px;
  font-size: 10px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.2px;
  line-height: 15px;
  color: var(--color-font-2, #343434);
}

.nds-scope .select-card__logo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.nds-scope .select-card__logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}

.nds-scope .select-card__logo img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.nds-scope .select-card__name {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.32px;
  line-height: 24px;
  color: var(--color-font-1, #121212);
}

.nds-scope .select-card__number {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-4, #767676);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nds-scope .select-card__chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--color-font-3, #505050);
}

.nds-scope .select-card__chevron svg {
  width: 24px;
  height: 24px;
}

.nds-scope .select-card__info-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
}

.nds-scope .select-card__fill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  border: 1px solid var(--color-border-1, #d3d3d3);
  border-radius: 8px;
  background-color: var(--color-bg-default, #ffffff);
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.26px;
  line-height: 20px;
  color: var(--color-font-1, #121212);
  cursor: pointer;
  white-space: nowrap;
}

.nds-scope .select-card__price {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.nds-scope .select-card__price-label {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-4, #767676);
  text-align: right;
}

.nds-scope .select-card__price-value {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.4px;
  line-height: 28px;
  color: var(--color-font-1, #121212);
  text-align: right;
}

.nds-scope .select-card__price-value svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.nds-scope .select-card__list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nds-scope .select-card__list-title {
  font-size: 15px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-3, #505050);
}

.nds-scope .select-card__list-data {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.3px;
  line-height: 24px;
  color: var(--color-font-1, #121212);
}

.nds-scope .select-card__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-font-3, #505050);
  flex-shrink: 0;
  padding: 0;
}

.nds-scope .select-card__menu-btn svg {
  width: 24px;
  height: 24px;
}

.nds-scope .select-card--error {
  border-color: var(--color-border-error, #e24949);
}

.nds-scope .select-card--readonly, .nds-scope .select-card--disabled {
  background-color: var(--color-bg-extra-bg, #f0f0f0);
  pointer-events: none;
}

/* --- switch --- */
.nds-scope .switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.nds-scope .switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nds-scope .switch__track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background-color: #707070;
  opacity: 0.76;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  flex-shrink: 0;
}

.nds-scope .switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-bg-default, #ffffff);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.nds-scope .switch__input:checked + .switch__track {
  background-color: #19973c;
  opacity: 1;
}

.nds-scope .switch__input:checked + .switch__track::after {
  transform: translateX(18px);
}

.nds-scope .switch__input:disabled + .switch__track {
  opacity: 0.4;
  cursor: not-allowed;
}

.nds-scope .switch:has(.switch__input:disabled) {
  cursor: not-allowed;
}

.nds-scope .switch--lg .switch__track {
  width: 52px;
  height: 30px;
}

.nds-scope .switch--lg .switch__track::after {
  width: 26px;
  height: 26px;
}

.nds-scope .switch--lg .switch__input:checked + .switch__track::after {
  transform: translateX(22px);
}

.nds-scope .switch--sm .switch__track {
  width: 42px;
  height: 24px;
}

.nds-scope .switch--sm .switch__track::after {
  width: 20px;
  height: 20px;
}

.nds-scope .switch--sm .switch__input:checked + .switch__track::after {
  transform: translateX(18px);
}

.nds-scope .switch--xs .switch__track {
  width: 28px;
  height: 18px;
}

.nds-scope .switch--xs .switch__track::after {
  width: 14px;
  height: 14px;
}

.nds-scope .switch--xs .switch__input:checked + .switch__track::after {
  transform: translateX(10px);
}

.nds-scope .switch-font {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.nds-scope .switch-font__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nds-scope .switch-font__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 2px 6px 2px 2px;
  border-radius: 999px;
  background-color: #e1e1e1;
  transition: background-color 0.2s ease;
  gap: 4px;
}

.nds-scope .switch-font__thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-bg-default, #ffffff);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  order: 1;
  transition: transform 0.2s ease;
  position: relative;
}

.nds-scope .switch-font__text {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.26px;
  line-height: 20px;
  color: var(--color-font-3, #505050);
  text-align: center;
  white-space: nowrap;
  order: 2;
  transition: color 0.2s ease;
}

.nds-scope .switch-font__input:checked + .switch-font__track {
  background-color: #19973c;
  padding: 2px 2px 2px 6px;
}

.nds-scope .switch-font__input:checked + .switch-font__track .switch-font__thumb {
  order: 2;
}

.nds-scope .switch-font__input:checked + .switch-font__track .switch-font__text {
  color: #ffffff;
  order: 1;
}

.nds-scope .switch-font__input:disabled + .switch-font__track {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --- textarea --- */
.nds-scope .textarea {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.nds-scope .textarea__label {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-3, #505050);
}

.nds-scope .textarea__wrap {
  position: relative;
  width: 100%;
  height: 156px;
  border: 1px solid #E1E1E1;
  border-radius: 10px;
  background-color: var(--color-bg-default, #ffffff);
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

.nds-scope .textarea__field {
  display: block;
  width: 100%;
  height: 100%;
  padding: 20px;
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.32px;
  line-height: 24px;
  color: var(--color-font-1, #121212);
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  box-sizing: border-box;
  font-family: inherit;
}

.nds-scope .textarea__field::-moz-placeholder {
  font-weight: var(--font-weight-medium);
  color: var(--color-font-5, #929292);
}

.nds-scope .textarea__field::placeholder {
  font-weight: var(--font-weight-medium);
  color: var(--color-font-5, #929292);
}

.nds-scope .textarea__clear {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #b3b3b3;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #ffffff;
  font-size: 12px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}

.nds-scope .textarea__clear:hover {
  background-color: #929292;
}

.nds-scope .textarea__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nds-scope .textarea__msg {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.26px;
  line-height: 20px;
  color: var(--color-font-4, #767676);
}

.nds-scope .textarea__count {
  font-size: 13px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.26px;
  line-height: 20px;
  color: var(--color-font-1, #121212);
  white-space: nowrap;
  flex-shrink: 0;
}

.nds-scope .textarea__count-current {
  color: var(--color-font-point, #19973c);
}

.nds-scope .textarea__count-max {
  color: var(--color-font-1, #121212);
}

.nds-scope .textarea--focus .textarea__wrap, .nds-scope .textarea__wrap:focus-within {
  border-color: var(--color-border-point, #19973c);
}

.nds-scope .textarea--filled .textarea__wrap {
  border-color: var(--color-border-2, #e1e1e1);
}

.nds-scope .textarea--error .textarea__wrap {
  border-color: var(--color-border-error, #e24949);
}

.nds-scope .textarea--error .textarea__msg {
  color: var(--color-font-error, #e24949);
}

/* --- toast --- */
.nds-scope .toast-wrap {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: calc(100% - 48px);
  max-width: 480px;
}

.nds-scope .toast {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  background-color: #111111;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
  pointer-events: auto;
  box-sizing: border-box;
  animation: toast-in 0.2s ease;
}

.nds-scope .toast__text {
  flex: 1;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: #ffffff;
}

.nds-scope .toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-left: 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  padding: 0;
}

.nds-scope .toast__close svg {
  width: 16px;
  height: 16px;
}

.nds-scope .toast__close:hover {
  color: #ffffff;
}

/* keyframes referenced by .toast animation (not a class selector, kept unscoped) */
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- tooltip --- */
.nds-scope .tooltip-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #F0F0F0;
  border-radius: 16px;
  background-color: var(--color-bg-default, #ffffff);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
}

.nds-scope .tooltip-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.nds-scope .tooltip-card__title {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.32px;
  line-height: 24px;
  color: var(--color-font-1, #121212);
  flex: 1;
}

.nds-scope .tooltip-card__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-font-1, #121212);
  padding: 0;
}

.nds-scope .tooltip-card__close svg {
  width: 24px;
  height: 24px;
}

.nds-scope .tooltip-card__close:hover {
  color: var(--color-font-3, #505050);
}

.nds-scope .tooltip-card__sub {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-1, #121212);
}

.nds-scope .tooltip-card__body {
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-3, #505050);
}

.nds-scope .tooltip-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nds-scope .tooltip-card__item {
  position: relative;
  padding-left: 12px;
  font-size: 14px;
  font-weight: var(--font-weight-regular);
  letter-spacing: -0.28px;
  line-height: 22px;
  color: var(--color-font-3, #505050);
}

.nds-scope .tooltip-card__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #707070;
}

/* --- indicator --- */
/* [2026-07-23 재작업] 아래 indicator-number는 Figma 실제 디자인(node 124:19680, get_variable_defs로
   토큰값 확인)을 기준으로 다시 만든 버전입니다. 이전 버전은 코드 사이트(septem-nds.netlify.app)의
   구현을 그대로 옮긴 것이었는데, 그 사이트 코드가 Figma 디자인과 실제로 달랐습니다
   (①"1 2 3 4" 식 페이지 목록 vs Figma는 "1 | 3" 현재/전체 카운터, ②화살표가 텍스트 ‹›였는데
   Figma는 실제 chevron 아이콘, ③pause 버튼이 같은 pill 안에 있었는데 Figma는 별도의 원형 pill).
   Figma가 디자인 소스이므로 이쪽을 기준으로 정정합니다. */
.nds-scope .indicator-number {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nds-scope .indicator-number__paging {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 4px;
  border-radius: var(--border-radius-circle, 999px);
}

.nds-scope .indicator-number__paging::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #111111;
  opacity: 0.4;
  border-radius: var(--border-radius-circle, 999px);
}

.nds-scope .indicator-number__arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #ffffff;
}

.nds-scope .indicator-number__arrow svg {
  width: 16px;
  height: 16px;
}

.nds-scope .indicator-number__count {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 18px;
}

.nds-scope .indicator-number__current {
  color: var(--color-text-indicator-default, #ffffff);
}

.nds-scope .indicator-number__total {
  color: var(--color-text-indicator-default, #ffffff);
  opacity: 0.6;
}

.nds-scope .indicator-number__dash {
  width: 1px;
  height: 6px;
  background-color: var(--color-bg-default, #ffffff);
}

.nds-scope .indicator-number__control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--border-radius-circle, 999px);
  border: none;
  padding: 0;
  cursor: pointer;
  color: #ffffff;
}

.nds-scope .indicator-number__control::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #111111;
  opacity: 0.4;
  border-radius: var(--border-radius-circle, 999px);
}

.nds-scope .indicator-number__control svg {
  position: relative;
  width: 8px;
  height: 8px;
}

.nds-scope .indicator-dot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nds-scope .indicator-dot__item {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full, 999px);
  background-color: #d3d3d3;
  transition: background-color 0.2s, width 0.2s;
}

.nds-scope .indicator-dot__item--active {
  width: 16px;
  background-color: #19973c;
}

.nds-scope .indicator-dot__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-left: 4px;
  color: var(--color-icon-4, #707070);
}

.nds-scope .indicator-dot__control svg {
  width: 12px;
  height: 12px;
}

/* --- accessibility: focus-visible ---
   전체 컴포넌트 공통 포커스 링. 개별 컴포넌트에서 outline:none으로 지운 곳이
   많아(input-box/input-line/textarea 등), 동일 specificity(.nds-scope + 1클래스)의
   이 규칙을 파일 맨 뒤에 둬서 소스 순서로 항상 이기게 했습니다.
   마우스 클릭 시엔 안 뜨고 키보드 포커스일 때만 보이는 :focus-visible 사용. */
.nds-scope *:focus-visible {
  outline: 2px solid var(--color-border-point, #19973c);
  outline-offset: 2px;
}