@import url("../Common/Common.css");

/* 새로운 메인화면 페이지 강제 라이트모드 적용 */
body.force-light-page {
  background: url("../../assets/images/Main/main_background.svg");
  --color-primary-base: #007aff;
  --color-primary-logo: #007aff;
  --color-primary-light: #3396ff;
  --color-primary-hover: #0063cc;
  --color-primary-disabled: rgba(0, 122, 255, 0.3);
  --color-primary-soft: rgba(0, 122, 255, 0.1);
  --color-primary-text-base: #007aff;
  --color-primary-text-emphasis: #0063cc;
  --color-primary-text-hover: #0063cc;
  --color-primary-text-inverse: #007aff;
  --color-blue-base: #007aff;
  --color-blue-light: #3396ff;
  --color-blue-hover: #0063cc;
  --color-blue-disabled: rgba(0, 122, 255, 0.3);
  --color-blue-soft: rgba(0, 122, 255, 0.1);
  --color-blue-text-base: #007aff;
  --color-blue-text-hover: #0063cc;
  --color-blue-text-inverse: #007aff;
  --color-navy-base: #3864ff;
  --color-navy-light: #6183ff;
  --color-navy-hover: #2f53d6;
  --color-navy-disabled: rgba(56, 100, 255, 0.3);
  --color-navy-soft: rgba(56, 100, 255, 0.1);
  --color-navy-text-base: #3864ff;
  --color-navy-text-soft: #2643ad;
  --color-navy-text-hover: #2f53d6;
  --color-navy-text-inverse: #3864ff;
  --color-indigo-base: #5856d6;
  --color-indigo-light: #7978de;
  --color-indigo-hover: #3d3bc9;
  --color-indigo-disabled: rgba(88, 86, 214, 0.3);
  --color-indigo-soft: rgba(88, 86, 214, 0.1);
  --color-indigo-text-base: #5856d6;
  --color-indigo-text-soft: #282691;
  --color-indigo-text-hover: #3d3bc9;
  --color-indigo-text-inverse: #5856d6;
  --color-purple-base: #af52de;
  --color-purple-light: #c076e5;
  --color-purple-hover: #9627ce;
  --color-purple-disabled: rgba(175, 82, 222, 0.3);
  --color-purple-soft: rgba(175, 82, 222, 0.15);
  --color-purple-text-base: #af52de;
  --color-purple-text-soft: #711d9a;
  --color-purple-text-hover: #9627ce;
  --color-purple-text-inverse: #af52de;
  --color-lavendar-base: #7763ff;
  --color-red-base: #ff3b30;
  --color-red-light: #ff645c;
  --color-red-hover: #f50c00;
  --color-red-disabled: rgba(255, 59, 48, 0.3);
  --color-red-disabled-strong: rgba(255, 59, 48, 0.3);
  --color-red-soft: rgba(255, 59, 48, 0.1);
  --color-red-text-base: #ff3b30;
  --color-red-text-soft: #f50c00;
  --color-red-text-hover: #f50c00;
  --color-red-text-inverse: #ff3b30;
  --color-orange-base: #ff9500;
  --color-orange-light: #ffaa33;
  --color-orange-hover: #cc7700;
  --color-orange-disabled: rgba(255, 149, 0, 0.3);
  --color-orange-soft: rgba(255, 149, 0, 0.2);
  --color-orange-text-base: #995900;
  --color-orange-text-soft: #663c00;
  --color-orange-text-hover: #663c00;
  --color-orange-text-inverse: #995900;
  --color-yellow-base: #ffc402;
  --color-yellow-light: #ffcf33;
  --color-yellow-hover: #cc9c00;
  --color-yellow-disabled: rgba(255, 196, 2, 0.5);
  --color-yellow-soft: rgba(255, 196, 2, 0.2);
  --color-yellow-soft-hover: rgba(255, 196, 2, 0.25);
  --color-yellow-translucent: rgba(255, 196, 2, 0.07);
  --color-yellow-translucent-light: rgba(255, 196, 2, 0.03);
  --color-yellow-text-base: #997500;
  --color-yellow-text-soft: #664e00;
  --color-yellow-text-hover: #664e00;
  --color-yellow-text-inverse: #997500;
  --color-green-base: #7be000;
  --color-green-light: #98ff1a;
  --color-green-hover: #62b300;
  --color-green-disabled: rgba(123, 224, 0, 0.3);
  --color-green-soft: rgba(123, 224, 0, 0.2);
  --color-green-soft-hover: rgba(123, 224, 0, 0.15);
  --color-green-translucent: rgba(123, 224, 0, 0.05);
  --color-green-translucent-light: rgba(123, 224, 0, 0.03);
  --color-green-text-base: #498500;
  --color-green-text-soft: #325c00;
  --color-green-text-hover: #325c00;
  --color-green-text-inverse: #498500;
  --color-forest-base: #00891e;
  --color-forest-light: #00d62e;
  --color-forest-hover: #007018;
  --color-forest-disabled: rgba(0, 137, 30, 0.3);
  --color-forest-disabled-2: rgba(0, 137, 30, 0.3);
  --color-forest-soft: rgba(0, 137, 30, 0.15);
  --color-forest-soft-hover: rgba(0, 137, 30, 0.15);
  --color-forest-soft-transparent: rgba(0, 137, 30, 0.05);
  --color-forest-soft-transparent-light: rgba(0, 137, 30, 0.03);
  --color-forest-text-base: #005212;
  --color-forest-text-soft: #00380c;
  --color-forest-text-hover: #00380c;
  --color-forest-text-inverse: #005212;
  --color-mint-base: #36e8df;
  --color-mint-light: #36e8df;
  --color-mint-hover: #13a49d;
  --color-mint-disabled: rgba(24, 206, 197, 0.3);
  --color-mint-soft: rgba(24, 206, 197, 0.15);
  --color-mint-soft-hover: rgba(24, 206, 197, 0.15);
  --color-mint-soft-transparent: rgba(24, 206, 197, 0.05);
  --color-mint-soft-transparent-light: rgba(24, 206, 197, 0.03);
  --color-mint-text-base: #0e7b76;
  --color-mint-text-soft: #0a524f;
  --color-mint-text-hover: #0a524f;
  --color-mint-text-inverse: #0e7b76;
  --color-lime-base: #25f07c;
  --color-lime-light: #4ef396;
  --color-lime-hover: #0ecd61;
  --color-lime-disabled: rgba(37, 240, 124, 0.3);
  --color-lime-soft: rgba(37, 240, 124, 0.2);
  --color-lime-soft-hover: rgba(37, 240, 124, 0.15);
  --color-lime-soft-transparent: rgba(37, 240, 124, 0.05);
  --color-lime-soft-transparent-light: rgba(37, 240, 124, 0.03);
  --color-lime-text-base: #0b9d4a;
  --color-lime-text-soft: #076932;
  --color-lime-text-hover: #076932;
  --color-lime-text-inverse: #0b9d4a;
  --color-cyan-base: #61cdff;
  --color-cyan-light: #61cdff;
  --color-cyan-hover: #00abfa;
  --color-cyan-disabled: rgba(50, 173, 230, 0.3);
  --color-cyan-soft: rgba(50, 173, 230, 0.15);
  --color-cyan-soft-hover: rgba(50, 173, 230, 0.15);
  --color-cyan-soft-transparent: rgba(50, 173, 230, 0.05);
  --color-cyan-soft-transparent-light: rgba(50, 173, 230, 0.03);
  --color-cyan-text-base: #0081bd;
  --color-cyan-text-soft: #005780;
  --color-cyan-text-hover: #005780;
  --color-cyan-text-inverse: #0081bd;
  --color-gray-base: #9ba4ab;
  --color-gray-light: #afb6bb;
  --color-gray-hover: #6c7680;
  --color-gray-disabled: rgba(155, 164, 171, 0.3);
  --color-gray-disabled2: rgba(155, 164, 171, 0.3);
  --color-gray-pin: rgba(155, 164, 171, 0.65);
  --color-gray-soft: rgba(155, 164, 171, 0.2);
  --color-gray-soft-hover: rgba(155, 164, 171, 0.25);
  --color-gray-soft-transparent: rgba(155, 164, 171, 0.1);
  --color-gray-soft-transparent-light: rgba(155, 164, 171, 0.05);
  --color-gray-thumbnail: #fcfcfd;
  --color-gray-text-base: #6c7680;
  --color-gray-text-soft: #586269;
  --color-gray-text-hover: #586269;
  --color-gray-text-inverse: #6c7680;
  --color-charcoal-base: #6c7275;
  --color-charcoal-light: #888e91;
  --color-charcoal-hover: #565a5d;
  --color-charcoal-disabled: rgba(108, 114, 117, 0.3);
  --color-charcoal-soft: rgba(108, 114, 117, 0.15);
  --color-charcoal-soft-hover: rgba(108, 114, 117, 0.25);
  --color-charcoal-soft-transparent: rgba(108, 114, 117, 0.1);
  --color-charcoal-text-base: #6c7275;
  --color-charcoal-text-soft: #404345;
  --color-charcoal-text-hover: #565a5d;
  --color-charcoal-text-inverse: #6c7275;
  --color-black-base: #0e0f11;
  --color-black-light: #586269;
  --color-black-hover: #3d4348;
  --color-black-line-hover: #6c7680;
  --color-black-disabled: rgba(155, 164, 171, 0.4);
  --color-black-soft: rgba(0, 0, 0, 0.1);
  --color-black-soft-hover: rgba(0, 0, 0, 0.15);
  --color-black-soft-transparent: rgba(0, 0, 0, 0.05);
  --color-layout-line: #c2c8cc;
  --color-black-text-base: #0e0f11;
  --color-black-text-hover: #ecedef;
  --color-black-text-hover2: #3d4348;
  --color-black-text-disabled: rgba(255, 255, 255, 0.55);
  --color-black-text-inverse: #ffffff;
  --color-white-base: #ffffff;
  --color-white-light: #fcfcfd;
  --color-white-hover: #f4f5f6;
  --color-white-line-hover: #ecedef;
  --color-white-disabled: rgba(255, 255, 255, 0.2);
  --color-white-disabled2: rgba(255, 255, 255, 0.2);
  --color-white-soft: rgba(255, 255, 255, 0.15);
  --color-white-soft-hover: rgba(255, 255, 255, 0.15);
  --color-white-soft-transparent: rgba(255, 255, 255, 0.05);
  --color-white-text-base: #ffffff;
  --color-white-text-hover: #495157;
  --color-white-text-hover2: #ecedef;
  --color-white-text-disabled: rgba(255, 255, 255, 0.25);
  --color-white-text-disabled2: rgba(14, 15, 17, 0.55);
  --color-white-text-inverse: #0e0f11;
  --color-font-title: #0e0f11;
  --color-font-body: #1e2224;
  --color-font-white: #ffffff;
  --color-font-black: #0e0f11;
  --color-font-disabled: #afb6bb;
  --color-font-caption: #586269;
  --color-font-caption-light: #6c7680;
  --color-font-caption-icon: #ecedef;
  --color-button-outline-line: #afb6bb;
  --color-button-outline-bg: #ffffff;
  --color-layout-page: #ffffff;
  --color-layout-user: #f2f6fa;
  --color-layout-system: #ebf0f5;
  --color-layout-system-dark: #ebf0f5;
  --color-layout-content: #ffffff;
  --color-layout-graybox: rgba(155, 164, 171, 0.1);
  --color-input-text: #6c7680;
  --color-input-text-hover: #1e2224;
  --color-input-icon: #c2c8cc;
  --color-input-icon-disabled: #c2c8cc;
  --color-input-line: #9ba4ab;
  --color-input-state-success: #62b300;
  --color-input-state-error: #ff3b30;
  --color-input-text-disabled: #afb6bb;
  --color-input-text-disabled-user: #c2c8cc;
  --color-input-line-disabled: #afb6bb;
  --color-input-disabled: rgba(155, 164, 171, 0.15);
  --color-input-label-disabled: #6c7680;
  --color-input-base-text-disabled: rgba(155, 164, 171, 0.7);
  --color-input-base: #ffffff;
  --color-input-base-light: rgba(255, 255, 255, 0.95);
  --color-input-base-light-disabled: rgba(155, 164, 171, 0.1);
  --color-input-base-dark: rgba(155, 164, 171, 0.15);
  --color-input-base-dark-disabled: rgba(155, 164, 171, 0.2);

  /* Layout */
  --epic-semantic-layout-page: var(--epic-color-white);
  --epic-semantic-layout-page-light: var(--epic-color-white);
  --epic-semantic-layout-page-ui: var(--epic-color-white-ui);
  --epic-semantic-layout-page-light-ui: var(--epic-color-white-ui);
  --epic-semantic-layout-user: var(--epic-color-white-background-lv1);
  --epic-semantic-layout-user-secondary: var(--epic-color-white-background-lv1);
  --epic-semantic-layout-system: var(--epic-color-white-background-lv2);
  --epic-semantic-layout-system-indigo: var(--epic-color-system-indigo);
  --epic-semantic-layout-system-dark: var(--epic-color-white-background-lv2);
  --epic-semantic-layout-system-dark-strong: var(--epic-color-white-background-lv4);
  --epic-semantic-layout-content: var(--epic-color-white);
  --epic-semantic-layout-content-glass: color-mix(in srgb, var(--epic-color-white) 95%, transparent);
  --epic-semantic-layout-side-option: color-mix(in srgb, var(--epic-color-gray-950) 7%, transparent);
  --epic-semantic-layout-side-option-shadow: color-mix(in srgb, var(--epic-color-gray-950) 10%, transparent);
  --epic-semantic-layout-border: var(--epic-color-gray-300);
  --epic-semantic-layout-border-light: var(--epic-color-gray-100);
  --epic-semantic-layout-gray-box: color-mix(in srgb, var(--epic-color-gray-500) 5%, transparent);

  /* Text */
  --epic-semantic-text-title: var(--epic-color-gray-950);
  --epic-semantic-text-body: var(--epic-color-gray-900);
  --epic-semantic-text-white: var(--epic-color-white);
  --epic-semantic-text-black: var(--epic-color-gray-950);
  --epic-semantic-text-black-button: var(--epic-color-gray-950);
  --epic-semantic-text-disabled: var(--epic-color-gray-400);
  --epic-semantic-text-caption: var(--epic-color-gray-700);
  --epic-semantic-text-caption-light: var(--epic-color-gray-600);
  --epic-semantic-text-caption-light-icon: var(--epic-color-gray-100);

  /* Input */
  --epic-semantic-input-text: var(--epic-color-gray-600);
  --epic-semantic-input-text-hover: var(--epic-color-gray-900);
  --epic-semantic-input-text-disabled: var(--epic-color-gray-400);
  --epic-semantic-input-text-disabled-user: var(--epic-color-gray-300);
  --epic-semantic-input-label-disabled: var(--epic-color-gray-600);
  --epic-semantic-input-base-text-disabled: color-mix(in srgb, var(--epic-color-gray-500) 70%, transparent);
  --epic-semantic-input-line-icon-hover: var(--epic-color-brand-500);
  --epic-semantic-input-icon: var(--epic-color-gray-300);
  --epic-semantic-input-icon-disabled: var(--epic-color-gray-300);
  --epic-semantic-input-line: var(--epic-color-gray-500);
  --epic-semantic-input-underline: var(--epic-color-gray-750);
  --epic-semantic-input-line-disabled: var(--epic-color-gray-400);
  --epic-semantic-input-ok: var(--epic-color-green-600);
  --epic-semantic-input-error: var(--epic-color-red-500);
  --epic-semantic-input-disabled: color-mix(in srgb, var(--epic-color-gray-500) 15%, transparent);
  --epic-semantic-input-base: var(--epic-color-white);
  --epic-semantic-input-base-light: color-mix(in srgb, var(--epic-color-white) 95%, transparent);
  --epic-semantic-input-base-light-disabled: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-semantic-input-base-dark: color-mix(in srgb, var(--epic-color-gray-500) 15%, transparent);
  --epic-semantic-input-base-dark-disabled: color-mix(in srgb, var(--epic-color-gray-500) 20%, transparent);

  /* Button */
  --epic-semantic-button-outline-line: var(--epic-color-gray-400);
  --epic-semantic-button-outline-background: var(--epic-color-white);

  /* Shadow */
  --epic-semantic-shadow-lv0: transparent;
  --epic-semantic-shadow-lv1: color-mix(in srgb, var(--epic-color-gray-950) 3%, transparent);
  --epic-semantic-shadow-lv2: color-mix(in srgb, var(--epic-color-gray-950) 5%, transparent);
  --epic-semantic-shadow-lv3: color-mix(in srgb, var(--epic-color-gray-950) 7%, transparent);
  --epic-semantic-shadow-lv4: color-mix(in srgb, var(--epic-color-gray-950) 10%, transparent);

  /* Sidebar */
  --epic-semantic-sidebar-tree-line: var(--epic-color-gray-400);
  --epic-semantic-sidebar-tree-line-dark: var(--epic-color-gray-400);
  --epic-semantic-sidebar-tree-line-system: var(--epic-color-brand-300);
  --epic-semantic-sidebar-tooltip-background: var(--epic-color-white);
  --epic-semantic-sidebar-tab-background-disabled: var(--epic-color-white-background-lv3);
  --epic-semantic-sidebar-tab-background-disabled-hover: var(--epic-color-white-background-lv4);
  --epic-semantic-sidebar-tab-background: var(--epic-color-white);
  --epic-semantic-sidebar-layer-popup: color-mix(in srgb, var(--epic-color-gray-950) 50%, transparent);

  /* Card */
  --epic-semantic-card-top-01: color-mix(in srgb, var(--epic-color-white) 95%, transparent);
  --epic-semantic-card-bottom-02: color-mix(in srgb, var(--epic-color-white) 75%, transparent);
  --epic-semantic-card-content-text-overlay: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-semantic-card-content-hover-emphasis-top: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-semantic-card-content-hover-emphasis-bottom: color-mix(in srgb, var(--epic-color-gray-500) 3%, transparent);

  /* Menu bar */
  --epic-semantic-menubar-top-01: color-mix(in srgb, var(--epic-color-white) 95%, transparent);
  --epic-semantic-menubar-bottom-02: color-mix(in srgb, var(--epic-color-white) 75%, transparent);
  --epic-semantic-menubar-system-hover: color-mix(in srgb, var(--epic-color-white) 75%, transparent);
  --epic-semantic-menubar-desktop-menu-line: var(--epic-color-brand-200);
  --epic-semantic-menubar-content-glass-top: color-mix(in srgb, var(--epic-color-white) 45%, transparent);
  --epic-semantic-menubar-content-glass-bottom: color-mix(in srgb, var(--epic-color-white) 30%, transparent);

  /* Paging */
  --epic-semantic-paging-grid-background: color-mix(in srgb, var(--epic-color-brand-500) 5%, transparent);
  --epic-semantic-paging-grid-gray-background: color-mix(in srgb, var(--epic-color-gray-500) 25%, transparent);
  --epic-semantic-paging-grid-line: color-mix(in srgb, var(--epic-color-gray-500) 40%, transparent);
  --epic-semantic-paging-grid-input-background: color-mix(in srgb, var(--epic-color-white) 80%, transparent);
  --epic-semantic-paging-icon-background: color-mix(in srgb, var(--epic-color-gray-500) 20%, transparent);

  /* Table */
  --epic-semantic-table-accent-text: var(--epic-color-brand-500);
  --epic-semantic-table-header-background: color-mix(in srgb, var(--epic-color-brand-500) 5%, transparent);
  --epic-semantic-table-header-background-hover: color-mix(in srgb, var(--epic-color-brand-500) 7%, transparent);
  --epic-semantic-table-header-background-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 5%, transparent);
  --epic-semantic-table-header-background-hover-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 7%, transparent);
  --epic-semantic-table-header-gray-flat-background: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-semantic-table-header-gray-glass-background: color-mix(in srgb, var(--epic-color-gray-500) 15%, transparent);
  --epic-semantic-table-list-gray-background: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-semantic-table-hover-background: color-mix(in srgb, var(--epic-color-brand-500) 2%, transparent);
  --epic-semantic-table-hover-strong-background: color-mix(in srgb, var(--epic-color-brand-500) 5%, transparent);
  --epic-semantic-table-hover-strong-background-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 5%, transparent);
  --epic-semantic-table-hover-background-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 3%, transparent);
  --epic-semantic-table-line: var(--epic-color-gray-500);
  --epic-semantic-table-all-line: var(--epic-color-gray-300);
  --epic-semantic-table-icon: var(--epic-color-gray-500);
  --epic-semantic-table-header-column-line: var(--epic-color-brand-300);
  --epic-semantic-table-header-column-line-indigo: var(--epic-color-indigo-300);
  --epic-semantic-table-column-line: var(--epic-color-gray-400);
  --epic-semantic-table-hover-input-background: color-mix(in srgb, var(--epic-color-white) 85%, transparent);
  --epic-semantic-table-list-shadow-top: color-mix(in srgb, var(--epic-color-brand-500) 25%, transparent);
  --epic-semantic-table-list-shadow-bottom: transparent;
  --epic-semantic-table-list-shadow-top-indigo: color-mix(in srgb, var(--epic-color-indigo-500) 25%, transparent);
  --epic-semantic-table-list-shadow-bottom-indigo: transparent;
  --epic-semantic-table-list-gray-shadow-top: color-mix(in srgb, var(--epic-color-gray-500) 25%, transparent);
  --epic-semantic-table-list-gray-shadow-bottom: transparent;

  /* Menu card gradient */
  --epic-semantic-menu-card-gradient-top: transparent;
  --epic-semantic-menu-card-gradient-bottom: color-mix(in srgb, var(--epic-color-gray-500) 40%, transparent);

  --epic-color-gray-flat-base: var(--epic-color-gray-500);
  --epic-color-gray-flat-light: var(--epic-color-gray-400);
  --epic-color-gray-flat-hover: var(--epic-color-gray-600);
  --epic-color-gray-flat-disabled: color-mix(in srgb, var(--epic-color-gray-500) 30%, transparent);
  --epic-color-gray-flat-disabled-strong: color-mix(in srgb, var(--epic-color-gray-500) 30%, transparent);
  --epic-color-gray-flat-pin: color-mix(in srgb, var(--epic-color-gray-500) 65%, transparent);
  --epic-color-gray-flat-soft: color-mix(in srgb, var(--epic-color-gray-500) 20%, transparent);
  --epic-color-gray-flat-soft-hover: color-mix(in srgb, var(--epic-color-gray-500) 40%, transparent);
  --epic-color-gray-flat-soft-transparent: color-mix(in srgb, var(--epic-color-gray-500) 10%, transparent);
  --epic-color-gray-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-gray-500) 5%, transparent);
  --epic-color-gray-flat-thumbnail: var(--epic-color-gray-25);

  --epic-color-gray-font-base: var(--epic-color-gray-600);
  --epic-color-gray-font-soft-base: var(--epic-color-gray-700);
  --epic-color-gray-font-hover: var(--epic-color-gray-800);
  --epic-color-gray-font-inverse: var(--epic-color-gray-600);

  /* Black */
  --epic-color-black-flat-base: var(--epic-color-gray-950);
  --epic-color-black-flat-light: var(--epic-color-gray-700);
  --epic-color-black-flat-hover: var(--epic-color-gray-875);
  --epic-color-black-flat-line-hover: var(--epic-color-gray-600);
  --epic-color-black-flat-disabled: color-mix(in srgb, var(--epic-color-gray-500) 40%, transparent);
  --epic-color-black-flat-soft: color-mix(in srgb, var(--epic-color-black) 10%, transparent);
  --epic-color-black-flat-soft-hover: color-mix(in srgb, var(--epic-color-black) 15%, transparent);
  --epic-color-black-flat-soft-transparent: color-mix(in srgb, var(--epic-color-black) 5%, transparent);

  --epic-color-black-font-base: var(--epic-color-gray-950);
  --epic-color-black-font-hover: var(--epic-color-gray-100);
  --epic-color-black-font-hover-strong: var(--epic-color-gray-700);
  --epic-color-black-font-disabled: color-mix(in srgb, var(--epic-color-white) 55%, transparent);
  --epic-color-black-font-inverse: var(--epic-color-white);
  --epic-color-black-font-inverse-hover: color-mix(in srgb, var(--epic-color-white) 80%, transparent);

  /* White */
  --epic-color-white-flat-base: var(--epic-color-white);
  --epic-color-white-flat-light: var(--epic-color-gray-50);
  --epic-color-white-flat-hover: var(--epic-color-gray-875);
  --epic-color-white-flat-line-hover: var(--epic-color-gray-100);
  --epic-color-white-flat-disabled: color-mix(in srgb, var(--epic-color-white) 20%, transparent);
  --epic-color-white-flat-disabled-strong: color-mix(in srgb, var(--epic-color-white) 20%, transparent);
  --epic-color-white-flat-soft: color-mix(in srgb, var(--epic-color-white) 15%, transparent);
  --epic-color-white-flat-soft-hover: color-mix(in srgb, var(--epic-color-white) 15%, transparent);
  --epic-color-white-flat-soft-transparent: color-mix(in srgb, var(--epic-color-white) 5%, transparent);

  --epic-color-white-font-base: var(--epic-color-white);
  --epic-color-white-font-hover: var(--epic-color-gray-875);
  --epic-color-white-font-hover-strong: var(--epic-color-gray-50);
  --epic-color-white-font-disabled: color-mix(in srgb, var(--epic-color-white) 25%, transparent);
  --epic-color-white-font-disabled-strong: color-mix(in srgb, var(--epic-color-gray-950) 55%, transparent);
  --epic-color-white-font-inverse: var(--epic-color-gray-950);

  /* Brand */
  --epic-color-brand-flat-base: var(--epic-color-blue-500);
  --epic-color-brand-flat-logo: var(--epic-color-blue-500);
  --epic-color-brand-flat-light: var(--epic-color-blue-400);
  --epic-color-brand-flat-hover: var(--epic-color-blue-600);
  --epic-color-brand-flat-disabled: color-mix(in srgb, var(--epic-color-blue-500) 30%, transparent);
  --epic-color-brand-flat-soft: color-mix(in srgb, var(--epic-color-blue-500) 10%, transparent);
  --epic-color-brand-flat-soft-hover: color-mix(in srgb, var(--epic-color-blue-500) 15%, transparent);
  --epic-color-brand-flat-soft-transparent: color-mix(in srgb, var(--epic-color-blue-500) 5%, transparent);
  --epic-color-brand-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-blue-500) 3%, transparent);
  --epic-color-brand-flat-icon-duotone: color-mix(in srgb, var(--epic-color-blue-500) 35%, transparent);

  --epic-color-brand-font-base: var(--epic-color-blue-500);
  --epic-color-brand-font-soft-base: var(--epic-color-blue-600);
  --epic-color-brand-font-hover: var(--epic-color-blue-800);
  --epic-color-brand-font-inverse: var(--epic-color-blue-500);

  /* Blue */
  --epic-color-blue-flat-base: var(--epic-color-blue-500);
  --epic-color-blue-flat-light: var(--epic-color-blue-400);
  --epic-color-blue-flat-hover: var(--epic-color-blue-600);
  --epic-color-blue-flat-disabled: color-mix(in srgb, var(--epic-color-blue-500) 30%, transparent);
  --epic-color-blue-flat-soft: color-mix(in srgb, var(--epic-color-blue-500) 10%, transparent);
  --epic-color-blue-flat-soft-hover: color-mix(in srgb, var(--epic-color-blue-500) 15%, transparent);
  --epic-color-blue-flat-soft-transparent: color-mix(in srgb, var(--epic-color-blue-500) 5%, transparent);
  --epic-color-blue-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-blue-500) 3%, transparent);

  --epic-color-blue-font-base: var(--epic-color-blue-500);
  --epic-color-blue-font-soft: var(--epic-color-blue-600);
  --epic-color-blue-font-hover: var(--epic-color-blue-600);
  --epic-color-blue-font-inverse: var(--epic-color-blue-500);

  /* Green */
  --epic-color-green-flat-base: var(--epic-color-green-500);
  --epic-color-green-flat-light: var(--epic-color-green-400);
  --epic-color-green-flat-hover: #66cc00;
  --epic-color-green-flat-disabled: color-mix(in srgb, var(--epic-color-green-500) 30%, transparent);
  --epic-color-green-flat-soft: color-mix(in srgb, var(--epic-color-green-500) 20%, transparent);
  --epic-color-green-flat-soft-hover: color-mix(in srgb, var(--epic-color-green-500) 30%, transparent);
  --epic-color-green-flat-soft-transparent: color-mix(in srgb, var(--epic-color-green-500) 5%, transparent);
  --epic-color-green-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-green-500) 3%, transparent);

  --epic-color-green-font-base: var(--epic-color-green-700);
  --epic-color-green-font-soft-base: var(--epic-color-green-800);
  --epic-color-green-font-hover: var(--epic-color-green-900);
  --epic-color-green-font-inverse: var(--epic-color-green-700);

  /* Forest */
  --epic-color-forest-flat-base: var(--epic-color-forest-500);
  --epic-color-forest-flat-light: var(--epic-color-forest-400);
  --epic-color-forest-flat-hover: var(--epic-color-forest-600);
  --epic-color-forest-flat-disabled: color-mix(in srgb, var(--epic-color-forest-500) 30%, transparent);
  --epic-color-forest-flat-disabled-strong: color-mix(in srgb, var(--epic-color-forest-500) 30%, transparent);
  --epic-color-forest-flat-soft: color-mix(in srgb, var(--epic-color-forest-500) 15%, transparent);
  --epic-color-forest-flat-soft-hover: color-mix(in srgb, var(--epic-color-forest-500) 25%, transparent);
  --epic-color-forest-flat-soft-transparent: color-mix(in srgb, var(--epic-color-forest-500) 5%, transparent);
  --epic-color-forest-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-forest-500) 3%, transparent);

  --epic-color-forest-font-base: var(--epic-color-forest-500);
  --epic-color-forest-font-soft-base: var(--epic-color-forest-700);
  --epic-color-forest-font-hover: var(--epic-color-forest-800);
  --epic-color-forest-font-inverse: var(--epic-color-forest-500);

  /* Lime */
  --epic-color-lime-flat-base: var(--epic-color-lime-500);
  --epic-color-lime-flat-light: var(--epic-color-lime-400);
  --epic-color-lime-flat-hover: var(--epic-color-lime-600);
  --epic-color-lime-flat-disabled: color-mix(in srgb, var(--epic-color-lime-500) 30%, transparent);
  --epic-color-lime-flat-soft: color-mix(in srgb, var(--epic-color-lime-500) 20%, transparent);
  --epic-color-lime-flat-soft-hover: color-mix(in srgb, var(--epic-color-lime-500) 30%, transparent);
  --epic-color-lime-flat-soft-transparent: color-mix(in srgb, var(--epic-color-lime-500) 5%, transparent);
  --epic-color-lime-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-lime-500) 3%, transparent);

  --epic-color-lime-font-base: var(--epic-color-lime-700);
  --epic-color-lime-font-soft-base: var(--epic-color-lime-800);
  --epic-color-lime-font-hover: var(--epic-color-lime-900);
  --epic-color-lime-font-inverse: var(--epic-color-lime-700);

  /* Mint */
  --epic-color-mint-flat-base: var(--epic-color-mint-400);
  --epic-color-mint-flat-light: var(--epic-color-mint-400);
  --epic-color-mint-flat-hover: var(--epic-color-mint-500);
  --epic-color-mint-flat-disabled: color-mix(in srgb, var(--epic-color-mint-500) 30%, transparent);
  --epic-color-mint-flat-soft: color-mix(in srgb, var(--epic-color-mint-500) 15%, transparent);
  --epic-color-mint-flat-soft-hover: color-mix(in srgb, var(--epic-color-mint-500) 25%, transparent);
  --epic-color-mint-flat-soft-transparent: color-mix(in srgb, var(--epic-color-mint-500) 5%, transparent);
  --epic-color-mint-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-mint-500) 3%, transparent);

  --epic-color-mint-font-base: var(--epic-color-mint-700);
  --epic-color-mint-font-soft-base: var(--epic-color-mint-800);
  --epic-color-mint-font-hover: var(--epic-color-mint-900);
  --epic-color-mint-font-inverse: var(--epic-color-mint-700);

  /* Cyan */
  --epic-color-cyan-flat-base: var(--epic-color-cyan-400);
  --epic-color-cyan-flat-light: var(--epic-color-cyan-400);
  --epic-color-cyan-flat-hover: var(--epic-color-cyan-600);
  --epic-color-cyan-flat-disabled: color-mix(in srgb, var(--epic-color-cyan-500) 30%, transparent);
  --epic-color-cyan-flat-soft: color-mix(in srgb, var(--epic-color-cyan-500) 15%, transparent);
  --epic-color-cyan-flat-soft-hover: color-mix(in srgb, var(--epic-color-cyan-500) 25%, transparent);
  --epic-color-cyan-flat-soft-transparent: color-mix(in srgb, var(--epic-color-cyan-500) 5%, transparent);
  --epic-color-cyan-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-cyan-500) 3%, transparent);

  --epic-color-cyan-font-base: var(--epic-color-cyan-700);
  --epic-color-cyan-font-soft-base: var(--epic-color-cyan-800);
  --epic-color-cyan-font-hover: var(--epic-color-cyan-900);
  --epic-color-cyan-font-inverse: var(--epic-color-cyan-700);

  /* Navy */
  --epic-color-navy-flat-base: var(--epic-color-navy-500);
  --epic-color-navy-flat-light: var(--epic-color-navy-400);
  --epic-color-navy-flat-hover: var(--epic-color-navy-600);
  --epic-color-navy-flat-disabled: color-mix(in srgb, var(--epic-color-navy-500) 30%, transparent);
  --epic-color-navy-flat-soft: color-mix(in srgb, var(--epic-color-navy-500) 10%, transparent);
  --epic-color-navy-flat-soft-hover: color-mix(in srgb, var(--epic-color-navy-500) 15%, transparent);
  --epic-color-navy-flat-soft-transparent: color-mix(in srgb, var(--epic-color-navy-500) 5%, transparent);
  --epic-color-navy-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-navy-500) 3%, transparent);

  --epic-color-navy-font-base: var(--epic-color-navy-500);
  --epic-color-navy-font-soft-base: var(--epic-color-navy-700);
  --epic-color-navy-font-hover: var(--epic-color-navy-800);
  --epic-color-navy-font-inverse: var(--epic-color-navy-500);

  /* Indigo */
  --epic-color-indigo-flat-base: var(--epic-color-indigo-500);
  --epic-color-indigo-flat-button-line: var(--epic-color-indigo-500);
  --epic-color-indigo-flat-light: var(--epic-color-indigo-400);
  --epic-color-indigo-flat-hover: var(--epic-color-indigo-600);
  --epic-color-indigo-flat-disabled: color-mix(in srgb, var(--epic-color-indigo-500) 30%, transparent);
  --epic-color-indigo-flat-soft: color-mix(in srgb, var(--epic-color-indigo-500) 10%, transparent);
  --epic-color-indigo-flat-soft-hover: color-mix(in srgb, var(--epic-color-indigo-500) 15%, transparent);
  --epic-color-indigo-flat-soft-transparent: color-mix(in srgb, var(--epic-color-indigo-500) 5%, transparent);
  --epic-color-indigo-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-indigo-500) 3%, transparent);

  --epic-color-indigo-font-base: var(--epic-color-indigo-500);
  --epic-color-indigo-font-soft-base: var(--epic-color-indigo-700);
  --epic-color-indigo-font-hover: var(--epic-color-indigo-900);
  --epic-color-indigo-font-inverse: var(--epic-color-indigo-500);

  /* Purple */
  --epic-color-purple-flat-base: var(--epic-color-purple-500);
  --epic-color-purple-flat-light: var(--epic-color-purple-400);
  --epic-color-purple-flat-hover: var(--epic-color-purple-600);
  --epic-color-purple-flat-disabled: color-mix(in srgb, var(--epic-color-purple-500) 30%, transparent);
  --epic-color-purple-flat-soft: color-mix(in srgb, var(--epic-color-purple-500) 15%, transparent);
  --epic-color-purple-flat-soft-hover: color-mix(in srgb, var(--epic-color-purple-500) 25%, transparent);
  --epic-color-purple-flat-soft-transparent: color-mix(in srgb, var(--epic-color-purple-500) 5%, transparent);

  --epic-color-purple-font-base: var(--epic-color-purple-500);
  --epic-color-purple-font-soft-base: var(--epic-color-purple-700);
  --epic-color-purple-font-hover: var(--epic-color-purple-800);
  --epic-color-purple-font-inverse: var(--epic-color-purple-500);

  /* Lavendar */
  --epic-color-lavendar-flat-base: var(--epic-color-lavender-500);
  --epic-color-lavendar-flat-light: var(--epic-color-lavender-400);
  --epic-color-lavendar-flat-hover: var(--epic-color-lavender-600);
  --epic-color-lavendar-flat-disabled: color-mix(in srgb, var(--epic-color-lavender-500) 30%, transparent);
  --epic-color-lavendar-flat-soft: color-mix(in srgb, var(--epic-color-lavender-500) 10%, transparent);
  --epic-color-lavendar-flat-soft-hover: color-mix(in srgb, var(--epic-color-lavender-500) 15%, transparent);
  --epic-color-lavendar-flat-soft-transparent: color-mix(in srgb, var(--epic-color-lavender-500) 3%, transparent);

  --epic-color-lavendar-font-base: var(--epic-color-lavender-500);
  --epic-color-lavendar-font-soft-base: var(--epic-color-lavender-600);
  --epic-color-lavendar-font-hover: var(--epic-color-lavender-600);
  --epic-color-lavendar-font-inverse: var(--epic-color-lavender-500);

  /* Orange */
  --epic-color-orange-flat-base: var(--epic-color-orange-500);
  --epic-color-orange-flat-light: var(--epic-color-orange-400);
  --epic-color-orange-flat-hover: #f28900;
  --epic-color-orange-flat-disabled: color-mix(in srgb, var(--epic-color-orange-500) 30%, transparent);
  --epic-color-orange-flat-soft: color-mix(in srgb, var(--epic-color-orange-500) 20%, transparent);
  --epic-color-orange-flat-soft-hover: color-mix(in srgb, var(--epic-color-orange-500) 30%, transparent);
  --epic-color-orange-flat-soft-transparent: color-mix(in srgb, var(--epic-color-orange-500) 5%, transparent);
  --epic-color-orange-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-orange-500) 3%, transparent);

  --epic-color-orange-font-base: var(--epic-color-orange-700);
  --epic-color-orange-font-soft-base: var(--epic-color-orange-800);
  --epic-color-orange-font-hover: var(--epic-color-orange-800);
  --epic-color-orange-font-inverse: var(--epic-color-orange-700);

  /* Yellow */
  --epic-color-yellow-flat-base: var(--epic-color-yellow-500);
  --epic-color-yellow-flat-light: var(--epic-color-yellow-400);
  --epic-color-yellow-flat-hover: #f2ba02;
  --epic-color-yellow-flat-disabled: color-mix(in srgb, var(--epic-color-yellow-500) 50%, transparent);
  --epic-color-yellow-flat-soft: color-mix(in srgb, var(--epic-color-yellow-500) 20%, transparent);
  --epic-color-yellow-flat-soft-hover: color-mix(in srgb, var(--epic-color-yellow-500) 30%, transparent);
  --epic-color-yellow-flat-soft-transparent: color-mix(in srgb, var(--epic-color-yellow-500) 7%, transparent);
  --epic-color-yellow-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-yellow-500) 3%, transparent);

  --epic-color-yellow-font-base: var(--epic-color-yellow-700);
  --epic-color-yellow-font-soft-base: var(--epic-color-yellow-800);
  --epic-color-yellow-font-hover: var(--epic-color-yellow-900);
  --epic-color-yellow-font-inverse: var(--epic-color-yellow-700);

  /* Red */
  --epic-color-red-flat-base: var(--epic-color-red-500);
  --epic-color-red-flat-light: var(--epic-color-red-400);
  --epic-color-red-flat-hover: var(--epic-color-red-600);
  --epic-color-red-flat-disabled: color-mix(in srgb, var(--epic-color-red-500) 30%, transparent);
  --epic-color-red-flat-disabled-strong: color-mix(in srgb, var(--epic-color-red-500) 30%, transparent);
  --epic-color-red-flat-soft: color-mix(in srgb, var(--epic-color-red-500) 10%, transparent);
  --epic-color-red-flat-soft-hover: color-mix(in srgb, var(--epic-color-red-500) 15%, transparent);
  --epic-color-red-flat-soft-transparent: color-mix(in srgb, var(--epic-color-red-500) 5%, transparent);
  --epic-color-red-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-red-500) 3%, transparent);

  --epic-color-red-font-base: var(--epic-color-red-500);
  --epic-color-red-font-soft-base: var(--epic-color-red-600);
  --epic-color-red-font-hover: var(--epic-color-red-700);
  --epic-color-red-font-inverse: var(--epic-color-red-500);

  /* Charcoal */
  --epic-color-charcoal-flat-base: var(--epic-color-charcoal-500);
  --epic-color-charcoal-flat-light: var(--epic-color-charcoal-400);
  --epic-color-charcoal-flat-hover: var(--epic-color-charcoal-600);
  --epic-color-charcoal-flat-disabled: color-mix(in srgb, var(--epic-color-charcoal-500) 30%, transparent);
  --epic-color-charcoal-flat-soft: color-mix(in srgb, var(--epic-color-charcoal-500) 15%, transparent);
  --epic-color-charcoal-flat-soft-hover: color-mix(in srgb, var(--epic-color-charcoal-500) 25%, transparent);
  --epic-color-charcoal-flat-soft-transparent: color-mix(in srgb, var(--epic-color-charcoal-500) 10%, transparent);
  --epic-color-charcoal-flat-soft-transparent-light: color-mix(in srgb, var(--epic-color-charcoal-500) 7%, transparent);

  --epic-color-charcoal-font-base: var(--epic-color-charcoal-500);
  --epic-color-charcoal-font-soft-base: var(--epic-color-charcoal-700);
  --epic-color-charcoal-font-hover: var(--epic-color-charcoal-800);
  --epic-color-charcoal-font-inverse: var(--epic-color-charcoal-500);
}

:root {
  --hero-gradient:
    radial-gradient(
      circle at 20% 30%,
      rgba(26, 85, 184, 0.35),
      transparent 55%
    ),
    radial-gradient(circle at 80% 10%, rgba(0, 122, 255, 0.3), transparent 50%),
    linear-gradient(135deg, #071a3d 0%, #0a2a5c 50%, #07315e 100%);
}

body {
  margin: 0;
  padding: 0;
  background: url("../../assets/images/Main/main_background.svg") no-repeat
    center top / cover;
  color: var(--epic-color-black-font-base);
  font-family: var(--epic-font-family-pretendard);
}

.main {
  display: flex;
  flex-direction: column;
  padding-bottom: 80px;
}

@media (prefers-color-scheme: dark) {
  body {
    background-image: url("../../assets/images/Main/main_background_dark.svg");
  }

  .main {
    background-image: none;
  }
}

.section {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section > * {
  width: 100%;
  max-width: 1216px;
}

.section-title {
  text-align: center;
  margin-bottom: 32px;
}

.section-title h2 {
  font-family: var(--epic-font-family-suite);
  font-size: 28px;
  line-height: 28px;
  font-weight: 600;
  margin: 0 0 12px;
}

.section-title h2.suite-heading3-medium {
  font-family: var(--epic-font-family-suite);
  font-size: var(--epic-typography-heading3-font-size);
  line-height: var(--epic-typography-heading3-line-height);
  font-weight: var(--epic-typo-weight-medium);
}

.section-title p {
  margin: 0;
  font-size: 18px;
  line-height: 18px;
  font-weight: 300;
  color: var(--epic-color-black-font-base);
}

.insight {
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative;
}

.insight::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1216px, 100%);
  height: 1px;
  background: var(--epic-semantic-layout-border);
}

.insight .section-title {
  max-width: 526px;
  margin-left: auto;
  margin-right: auto;
}

.card {
  background: var(--epic-color-white);
  border: 1px solid var(--epic-color-gray-300);
  border-radius: 16px;
  padding: 24px;
  box-sizing: border-box;
}

.hero-section {
  background: var(--hero-gradient);
  background-image: url("../../assets/images/Main/background.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--epic-color-white);
  padding: 110px 24px 50px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-section > * {
  width: 100%;
  max-width: none;
}

.hero-inner {
  width: min(1216px, 100%);
  margin: 50px auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.hero-left {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero-heading {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hero-title {
  font-family: var(--epic-font-family-suite);
  font-size: 32px;
  font-weight: 600;
  line-height: 38px;
}

.hero-desc {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  padding: 0;
}

.hero-desc-break {
  display: none;
}

.hero-search {
  width: 100%;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  --hero-search-gradient: linear-gradient(
    103deg,
    #007aff 4.83%,
    #af52de 104.91%
  );
  --hero-search-hover-gradient: linear-gradient(
    103deg,
    #0063cc 4.83%,
    #9627ce 104.91%
  );
}

.hero-search i.icon {
  font-size: 20px;
}

.search-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  border-radius: 10px;
  border: 3px solid transparent;
  background:
    linear-gradient(var(--epic-color-white), var(--epic-color-white))
      padding-box,
    var(--hero-search-gradient) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  height: 44px;
  box-shadow: 0 18px 38px rgba(4, 22, 74, 0.4);
  box-sizing: border-box;
  overflow: hidden;
}

.search-field input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 18px;
  font-weight: 300;
  font-family: var(--epic-font-family-pretendard);
  color: var(--hero-search-input-color, #6c7680);
  font-style: normal;
  line-height: 18px;
  background: transparent;
}

.search-field input::placeholder {
  color: var(--hero-search-input-color, #6c7680);
}

.hero-search .semtle-btn--outline,
.hero-search .semtle-btn--ghost {
  border-width: 1.5px;
}

.hero-search .semtle-btn--outline,
.hero-search .semtle-btn--ghost {
  border-color: var(--epic-color-white);
  color: var(--epic-color-white);
}

.hero-search .semtle-btn--ghost:hover {
    color: var(--epic-color-white);
    background: var(--epic-color-white-flat-soft-hover);
}

.hero-search .semtle-btn--ghost {
  background: var(--epic-color-white-flat-soft-transparent);
}

.hero-search .semtle-btn--ai {
  --epic-btn-background: var(--hero-search-gradient);
  --epic-btn-foreground: var(--epic-color-white);
  border: none;
  box-shadow: 0 12px 20px rgba(4, 122, 255, 0.35);
}

.hero-search .semtle-btn--ai:hover {
  --epic-btn-background: var(--hero-search-hover-gradient);
}

.hero-search .hero-search-icon {
  font-size: 21px;
  background: var(--hero-search-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.hero-section .semtle-btn--outline {
  --epic-btn-border-color: var(--epic-color-white);
}

.hero-section .hero-ghost-match.semtle-btn--ghost {
  background: var(--epic-color-white-flat-soft-transparent);
  border-color: var(--epic-color-white);
  width: fit-content;
  min-width: 0;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 16px;
}

.hero-section .semtle-btn--ghost.semtle-btn--intent-white:hover {
  background: rgba(255, 255, 255, 0.15);
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 50px;
}

@media (min-width: 1300px) {
  .hero-stats {
    width: 100%;
    max-width: 1216px;
    margin-left: auto;
    margin-right: auto;
    gap: 16px;
    flex-wrap: nowrap;
  }
}

.hero-stat {
  height: 109px;
  min-width: 72px;
  width: 72px;
  flex: 0 1 72px;
  transition:
    width 0.2s ease,
    height 0.2s ease,
    transform 0.2s ease;
  user-select: none;
  cursor: default;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(50px);
  box-shadow:
    0 2px 2px rgba(14, 15, 17, 0.03),
    0 4px 6px rgba(14, 15, 17, 0.05),
    inset 0 0 15px rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 16px 0;
  color: var(--epic-color-white);
  box-sizing: border-box;
}

.hero-stat:hover {
  transform: translateY(2px) scale(1.083);
  transform-origin: bottom center;
}

.stat-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  min-height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon-img {
  width: 20px;
  height: 20px;
  display: block;
}

.stat-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.stat-value {
  font-family: var(--epic-font-family-montserrat);
  font-size: 22px;
  font-weight: 700;
  line-height: 20px;
}

.stat-label {
  font-size: 13px;
  line-height: 14px;
  font-weight: 300;
}

.insight-cards {
  display: flex;
  gap: 32px;
}

.insight-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 592px;
  min-height: 484px;
  background: var(--epic-semantic-layout-page);
  padding: 24px;
  border-radius: 16px;
  box-shadow: none;
  border: 1px solid var(--epic-semantic-layout-border);
}

.card-header h3 {
  margin: 0;
  font-family: var(--epic-font-family-suite);
  font-size: 20px;
  line-height: 20px;
  font-weight: 700;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
}

.card-header.between {
  justify-content: space-between;
  gap: 16px;
}

.ref-date-text {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
}

.insight-chip {
  background: rgba(0, 122, 255, 0.1);
  color: #0063cc;
  font-family: var(--epic-font-family-pretendard);
  font-weight: 600;
  font-size: 15px;
  line-height: 15px;
  padding: 8px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}

.media-placeholder {
  background: linear-gradient(135deg, #dde5f2, #f5f7fb);
  border: 1px solid var(--epic-semantic-layout-border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

.media-area {
  position: relative;
}

.media-slider {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
  will-change: transform;
}

.media-slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
}

.media-placeholder.large {
  height: 273px;
}

.media-placeholder.tall {
  height: 344px;
}

.media-placeholder.wide {
  height: 228px;
}

.media-placeholder.icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
}

.card-subtitle {
  font-family: var(--epic-font-family-pretendard);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--epic-color-black-font-base);
  margin: 0;
}

.mini-data-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.mini-data {
  display: flex;
  flex-direction: column;
  width: 124px;
}

.mini-top {
  background: var(--epic-color-blue-flat-base);
  color: var(--epic-color-white);
  font-size: 14px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
  padding: 8px 0px;
  height: 31px;
  border-radius: 8px 8px 0 0;
  box-sizing: border-box;
}

.mini-bottom {
  background: var(--epic-color-blue-flat-soft);
  color: var(--epic-color-black-font-base);
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  text-align: center;
  padding: 8px 0px;
  box-sizing: border-box;

  height: 36px;
  border-radius: 0 0 8px 8px;
}

.legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-bar {
  height: 9px;
  border-radius: 0px;
  background: linear-gradient(
    90deg,
    #0a1aa5 0%,
    #3d4c6f 12%,
    #577135 23%,
    #888c27 35%,
    #bda523 44%,
    #e7b432 55%,
    #de9a27 68%,
    #d4852e 77%,
    #cf5b28 88%,
    #d73317 100%
  );
}

.legend-scale {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 14px;
  color: var(--epic-color-black-font-base);
  font-weight: 400;
}

.example-image-note {
  margin-top: -8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--epic-color-black-font-base);
  text-align: right;
}

.main-content-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
  overflow: hidden;
  background: #eaf4f8;
  pointer-events: none;
}

.main-content-preview.is-ready {
  opacity: 1;
}

.main-content-preview__viewport {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--preview-virtual-size, 100%);
  height: var(--preview-virtual-size, 100%);
  transform: translate(-50%, -50%) scale(var(--preview-scale, 1));
  transform-origin: center center;
}

.main-content-preview__viewport .main-content-preview__ol-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.media-slide[data-preview-id] {
  background: #dff5f7;
}

.media-slide.is-preview-fallback > img {
  opacity: 1;
}

.main-content-preview--loading {
  background: #dff5f7;
}

.media-slide.is-preview-loading > img {
    opacity: 0;
}

.main-content-preview__canvas {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.main-content-preview__canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.main-content-preview__ol-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-content-preview__ol-map .ol-viewport {
  border-radius: 6px;
}

.main-content-preview__labels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.main-content-preview__label {
  font-family: Pretendard, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  fill: #111;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 2px;
  paint-order: stroke fill;
}

.main-content-preview-legend-slot {
  display: flex;
  align-items: center;
  min-height: 42px;
  width: 100%;
}

.main-content-preview__legend {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  align-items: center;
  width: 100%;
  padding: 0 6px;
  box-sizing: border-box;
}

.main-content-preview__legend-bar {
  grid-column: 1 / 2;
  height: 8px;
  border-radius: 0;
  background: linear-gradient(90deg, #5728ee 0%, #1878f3 28%, #18c7d2 52%, #53e3a6 72%, #f7e75f 88%, #ff3b2f 100%);
}

.main-content-preview__legend-scale {
  grid-column: 1 / 2;
  display: flex;
  justify-content: space-between;
  min-width: 0;
  color: #1d2939;
  font-size: 11px;
  line-height: 12px;
  font-weight: 600;
}

.main-content-preview__legend-unit {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
  color: #344054;
  font-size: 11px;
  line-height: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.circle-btn {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.circle-btn.prev {
  left: 8px;
}

.circle-btn.next {
  right: 8px;
}

.service {
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative;
}

.service::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1216px, 100%);
  height: 1px;
  background: var(--epic-semantic-layout-border);
}

.data-status {
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative;
}

.data-status::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1216px, 100%);
  height: 1px;
  background: var(--epic-semantic-layout-border);
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}

.service-card {
  background: var(--epic-semantic-layout-page);
  border: 1px solid var(--epic-semantic-layout-border);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 8px 20px rgba(14, 15, 17, 0.12),
    0 2px 6px rgba(14, 15, 17, 0.08);
}

.service-icon {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-icon img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.service-card h3 {
  margin: 0;
  font-family: var(--epic-font-family-suite);
  font-size: 18px;
  line-height: 24px;
  word-break: keep-all;
}

.service-card p {
  margin: 0;
  font-family: var(--epic-font-family-pretendard);
  font-size: 15px;
  font-style: normal;
  font-weight: 300;
  line-height: 20px;
  color: var(--epic-color-black-font-base);
  word-break: keep-all;
}

.data-status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.data-tabs {
  display: flex;
}

.data-tabs .data-tab {
  border-radius: 10px 0 0 10px;
}

.data-tabs .data-tab + .data-tab {
  border-radius: 0 10px 10px 0;
  margin-left: -1px;
}

.data-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.data-card-track {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  overflow-y: visible;
  padding-top: 8px;
  padding-bottom: 16px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: max(0px, calc((100vw - 1216px) / 2));
  padding-right: max(0px, calc((100vw - 1216px) / 2));
  scrollbar-width: none;
}

.data-card-track::-webkit-scrollbar {
  display: none;
}

.data-card {
  width: 280px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--epic-semantic-layout-page);
  border: 1px solid rgba(0, 122, 255, 0.3);
  padding: 24px;
  box-shadow:
    0 2px 2px rgba(14, 15, 17, 0.03),
    0 4px 6px rgba(14, 15, 17, 0.05);
  box-sizing: border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.data-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 8px 20px rgba(14, 15, 17, 0.12),
    0 2px 6px rgba(14, 15, 17, 0.08);
}

.data-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  border-bottom: 1px solid var(--epic-color-gray-600);
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.data-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(0, 122, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.data-icon img {
  width: 32px;
  height: 32px;
  display: block;
}

.data-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.metric-date {
  position: absolute;
  right: 0;
  bottom: 6px;
  margin-top: 0;
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  color: var(--epic-color-gray-800);
  white-space: nowrap;
  text-align: right;
}

.metric-value {
  font-family: var(--epic-font-family-montserrat);
  font-size: 28px;
  font-weight: 700;
  line-height: 28px;
}

.metric-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 32px;
  padding: 0 14px;
  border-radius: 32px;
  white-space: nowrap;
  font-size: 14px;
  line-height: 14px;
  font-weight: 300;
  color: var(--epic-color-black-font-base);
}

.data-card-body h4 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 20px;
  font-weight: 600;
  color: var(--epic-color-black-font-base);
}

.data-card-body p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: var(--epic-color-black-font-base);
  height: 40px;
  overflow: hidden;
}

.data-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 40px;
}

.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  line-height: 13px;
  font-weight: 300;
  color: #6c7680;
}

.meta-item .icon {
  font-size: 16px;
  color: #6c7680;
}

.data-card > .semtle-btn {
  --epic-btn-height: 32px;
  --epic-btn-padding: var(--epic-button-input-m-common-padding);
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
  padding: 0 12px;
  margin-top: 0;
  align-self: center;
}

.data-card .data-meta {
  margin-bottom: 24px;
}

.notice-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.notice {
  padding-top: 80px;
  position: relative;
}

.notice-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--epic-semantic-layout-page);
  border: 1px solid var(--epic-semantic-layout-border);
  border-radius: 16px;
  padding: 24px;
  box-sizing: border-box;
}

.notice::after {
  display: none;
}

.notice-tabs {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid var(--epic-semantic-layout-border);
}

.notice-tab {
  font-family: var(--epic-font-family-suite);
  font-size: 20px;
  line-height: 20px;
  font-weight: 400;
  padding-bottom: 16px;
  color: #6c7680;
}

.notice-tab.is-active {
  color: var(--epic-color-black-font-base);
  border-bottom: 3px solid var(--epic-color-blue-flat-base);
  font-weight: 700;
}

.notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notice-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--epic-semantic-layout-border);
  font-size: 14px;
}

.notice-list li:hover {
  cursor: pointer;
}

.notice-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.notice-item-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding-right: 16px;
  font-family: var(--epic-font-family-pretendard);
  font-size: 14px;
  line-height: 20px;
  font-weight: 300;
  color: var(--epic-color-black-font-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-list li:hover .notice-item-title {
  color: var(--epic-color-blue-flat-base);
}

.notice-item-title .icon {
  font-size: 20px;
  color: #6c7680;
  flex-shrink: 0;
}

.notice-list .meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--epic-font-family-pretendard);
  font-size: 13px;
  line-height: 13px;
  font-weight: 300;
  color: #6c7680;
  white-space: nowrap;
}

.notice-list .meta .icon {
  font-size: 16px;
  color: #6c7680;
}

.related-card {
  background: var(--epic-color-blue-flat-soft-transparent);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.related-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.related-header h3 {
  margin: 0;
  font-family: var(--epic-font-family-suite);
  font-size: var(--epic-typography-heading6-font-size);
}

.related-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.related-site-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(0, 122, 255, 0.1);
  color: #0063cc;
  font-family: var(--epic-font-family-pretendard);
  font-size: 15px;
  line-height: 15px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 1299px) {
  .main {
    padding-bottom: 48px;
  }

  .section {
    padding: 0 16px;
    align-items: stretch;
  }

  .section-title {
    margin-bottom: 24px;
  }

  .section-title h2 {
    font-size: 20px;
    line-height: 24px;
  }

  .section-title p {
    font-size: 18px;
    line-height: 18px;
  }

  .hero-section {
    background-image: url("../../assets/images/Main/background_mobile.png");
  }

  .hero-inner {
    width: 100%;
    margin: 0;
    padding: 0 24px;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
  }

  .hero-left {
    max-width: 100%;
    align-items: center;
    text-align: center;
    gap: 32px;
  }

  .hero-heading {
    align-items: center;
    margin-top: 20px;
  }

  .hero-title {
    font-size: 32px;
    line-height: 38px;
  }

  .hero-subtitle {
    font-size: 20px;
    line-height: 20px;
  }

  .hero-desc {
    font-size: 15px;
    line-height: 22px;
  }

  .hero-desc-break {
    display: block;
  }

  .hero-search {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
  }

  .hero-search .semtle-btn {
    width: auto;
  }

  .hero-search .semtle-btn--ghost {
    display: none;
  }

  .search-field {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 11px 16px;
  }

  .hero-ai-btn {
    flex: 0 0 112px;
    height: 42px;
    padding: 0 12px;
  }

  .hero-section .hero-ghost-match {
    align-self: center;
    width: 188px;
    height: 42px;
    margin: 16px auto 0;
  }

  .hero-stats {
    display: grid;
    margin-top: 248px;
    width: 100%;
    max-width: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    justify-content: space-between;
  }

  .hero-stat {
    width: auto;
    min-width: 0;
    height: 112px;
    padding: 16px 0;
    transform: none;
  }

  .hero-stat:hover {
    transform: none;
  }

  .hero-stat:nth-last-child(-n + 2) {
    grid-column: span 2;
    width: auto;
    height: 72px;
    flex-direction: row;
    justify-content: center;
    text-align: center;
    padding: 16px;
    gap: 8px;
  }

  .hero-stat:nth-last-child(-n + 2) .stat-text {
    align-items: center;
  }

  .stat-value {
    font-size: 15px;
    line-height: 15px;
  }

  .stat-label {
    font-size: 12px;
    line-height: 12px;
  }

  .insight {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .insight::after {
    display: block;
    left: 24px;
    transform: none;
    width: calc(100% - 48px);
  }

  .insight .section-title {
    max-width: 361px;
  }

  .insight-cards {
    flex-direction: column;
    gap: 24px;
  }

  .insight-card {
    width: 100%;
    min-height: auto;
    padding: 24px;
    gap: 12px;
  }

  .media-placeholder.large {
    height: 157px;
  }

  .media-placeholder.tall {
    height: 198px;
  }

  .card-subtitle {
    font-size: 15px;
    line-height: 15px;
  }

  .card-header.between {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .card-header.between .insight-chip {
    order: 2;
    align-self: flex-start;
  }

  .insight-chip {
    font-size: 12px;
    line-height: 12px;
    padding: 6px 12px;
    height: 24px;
    box-sizing: border-box;
  }

  .mini-data-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
  }

  .mini-data {
    width: 100%;
  }

  .mini-top {
    font-size: 12px;
    line-height: 15px;
    height: 31px;
  }

  .mini-bottom {
    font-size: 12px;
    line-height: 17px;
    height: 33px;
  }

  .legend-scale {
    font-size: 12px;
    line-height: 12px;
  }

  .circle-btn {
    width: 42px;
    height: 42px;
  }

  .service {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .service::after {
    display: block;
    left: 24px;
    transform: none;
    width: calc(100% - 48px);
  }

  .data-status::after {
    left: 24px;
    transform: none;
    width: calc(100% - 48px);
  }

  .service-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .service-card {
    padding: 24px;
  }

  .service-icon {
    width: 56px;
    height: 56px;
  }

  .service-icon img {
    width: 56px;
    height: 56px;
  }

  .service-card h3 {
    font-size: 20px;
    line-height: 20px;
  }

  .service-card p {
    font-size: 15px;
    line-height: 20px;
  }

  .data-status {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .data-status::after {
    display: block;
    left: 24px;
    transform: none;
    width: calc(100% - 48px);
  }

  .data-status-header {
    flex-direction: row;
    gap: 12px;
    align-items: center;
  }

  .data-tabs .data-tab {
    min-width: 102px;
    height: 42px;
    padding: 0 12px;
  }

  .data-actions .semtle-btn--icon-only {
    display: none;
  }

  .data-actions .semtle-btn--subtle {
    height: 42px;
    padding: 0 12px;
  }

  .data-card-track {
    width: 100%;
    margin-left: 0;
    padding: 0;
    gap: 16px;
  }

  .data-card {
    width: 280px;
  }

  .data-card > .semtle-btn {
    --epic-btn-height: 42px;
    height: 42px;
    min-height: 42px;
  }

  .notice {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .notice::after {
    display: none;
  }

  .notice-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .related-card {
    padding: 16px;
  }

  .related-actions .semtle-btn--icon-only {
    height: 42px;
    width: 42px;
  }
}
.media-placeholder img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0;
}

.media-placeholder.top-crop img {
  object-position: top;
}

.related-data-pill {
    width: 260px;           /* 전체 길이 고정 */
    display: flex;
    align-items: center;
}

.related-data-pill__category {
    flex: 0 0 auto;         /* 내용 길이만큼 */
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.related-data-pill__keyword {
    white-space: nowrap;  /* 줄바꿈 금지 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.hero-stat, .mini-data {
	cursor: pointer;
}


.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.theme-toggle__track {
  position: relative;
  width: 44px;
  height: 22px;
  border-radius: 999px;
  background: #d8dee8;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.theme-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  transition: left 0.2s ease, background 0.2s ease;
}

.theme-toggle__label {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  line-height: 1;
}

.theme-toggle[aria-pressed="true"] .theme-toggle__track {
  background: #ffc402;
}

.theme-toggle[aria-pressed="true"] .theme-toggle__thumb {
  left: 24px;
}

.theme-toggle[aria-pressed="true"] .theme-toggle__label {
  color: #fff;
}

@charset "UTF-8";
:root { /*Color Plate*/
    --blue-50:rgb(229, 242, 255);
    --blue-100:#CCE5FF;
    --blue-200:#99CAFF;
    --blue-300:#66B0FF;
    --blue-400:#3396FF;
    --blue-500:#007AFF;
    --blue-600:#0063CC;
    --blue-700:#004A99;
    --blue-800:#003166;
    --blue-900:#001F40;
    --blue-950:#001226;
    --blue-2per:rgba(var(--gradient-blue1), 0.02);
    --blue-5per:rgba(var(--gradient-blue1), 0.05);
    --blue-10per:rgba(var(--gradient-blue1), 0.10);
    --blue-15per:rgba(var(--gradient-blue1), 0.15);
    --blue-20per:rgba(var(--gradient-blue1), 0.20);
    --blue-25per:rgba(var(--gradient-blue1), 0.25);
    --blue-30per:rgba(var(--gradient-blue1), 0.30);
    --blue-35per:rgba(var(--gradient-blue1), 0.35);
    --blue-40per:rgba(var(--gradient-blue1), 0.40);
    --blue-45per:rgba(var(--gradient-blue1), 0.45);
    --blue-50per:rgba(var(--gradient-blue1), 0.50);

    --navy-50:#EBEFFF;
    --navy-100:#D6DFFF;
    --navy-200:#ADBFFF;
    --navy-300:#8AA3FF;
    --navy-400:#6183FF;
    --navy-500:#3864FF;
    --navy-600:#2F53D6;
    --navy-700:#2643AD;
    --navy-800:#172867;
    --navy-900:#0C1638;
    --navy-950:#07102F;
    --navy-5per:rgba(56, 100, 255, 0.05);
    --navy-10per:rgba(56, 100, 255, 0.10);
    --navy-15per:rgba(56, 100, 255, 0.15);
    --navy-20per:rgba(56, 100, 255, 0.20);
    --navy-25per:rgba(56, 100, 255, 0.25);
    --navy-30per:rgba(56, 100, 255, 0.30);
    --navy-35per:rgba(56, 100, 255, 0.35);
    --navy-40per:rgba(56, 100, 255, 0.40);
    --navy-45per:rgba(56, 100, 255, 0.45);
    --navy-50per:rgba(56, 100, 255, 0.50);

    --indigo-50:#EFEFFB;
    --indigo-100:#DFDEF7;
    --indigo-200:#BEBDEF;
    --indigo-300:#9A98E6;
    --indigo-400:#7978DE;
    --indigo-500:#5856D6;
    --indigo-600:#3D3BC9;
    --indigo-700:#282691;
    --indigo-800:#1C1B67;
    --indigo-900:#100F39;
    --indigo-950:#0A0A22;
    --indigo-5per:rgba(88, 86, 214, 0.05);
    --indigo-10per:rgba(88, 86, 214, 0.10);
    --indigo-15per:rgba(88, 86, 214, 0.15);
    --indigo-20per:rgba(88, 86, 214, 0.20);
    --indigo-25per:rgba(88, 86, 214, 0.25);
    --indigo-30per:rgba(88, 86, 214, 0.30);
    --indigo-35per:rgba(88, 86, 214, 0.35);
    --indigo-40per:rgba(88, 86, 214, 0.40);
    --indigo-45per:rgba(88, 86, 214, 0.45);
    --indigo-50per:rgba(88, 86, 214, 0.50);

    --lavendar-50:#F2F0FF;
    --lavendar-100:#E4E0FF;
    --lavendar-200:#CAC2FF;
    --lavendar-300:#AFA3FF;
    --lavendar-400:#9585FF;
    --lavendar-500:#7763FF;
    --lavendar-600:#2F1E9C;
    --lavendar-700:#2F1E9C;
    --lavendar-800:#231675;
    --lavendar-900:#0F0930;
    --lavendar-950:#060414;
    --lavendar-5per:rgba(119, 99, 255, 0.05);
    --lavendar-10per:rgba(119, 99, 255, 0.10);
    --lavendar-15per:rgba(119, 99, 255, 0.15);
    --lavendar-20per:rgba(119, 99, 255, 0.20);
    --lavendar-25per:rgba(119, 99, 255, 0.25);
    --lavendar-30per:rgba(119, 99, 255, 0.30);
    --lavendar-35per:rgba(119, 99, 255, 0.35);
    --lavendar-40per:rgba(119, 99, 255, 0.40);
    --lavendar-45per:rgba(119, 99, 255, 0.45);
    --lavendar-50per:rgba(119, 99, 255, 0.50);

    --purple-50:#F7EEFC;
    --purple-100:#EFDDF8;
    --purple-200:#DFBAF2;
    --purple-300:#D098EB;
    --purple-400:#C076E5;
    --purple-500:#AF52DE;
    --purple-600:#9627CE;
    --purple-700:#711D9A;
    --purple-800:#4B1467;
    --purple-900:#260A33;
    --purple-950:#13051A;
    --purple-5per:rgba(175, 82, 222, 0.05);
    --purple-10per:rgba(175, 82, 222, 0.10);
    --purple-15per:rgba(175, 82, 222, 0.15);
    --purple-20per:rgba(175, 82, 222, 0.20);
    --purple-25per:rgba(175, 82, 222, 0.25);
    --purple-30per:rgba(175, 82, 222, 0.30);
    --purple-35per:rgba(175, 82, 222, 0.35);
    --purple-40per:rgba(175, 82, 222, 0.40);
    --purple-45per:rgba(175, 82, 222, 0.45);
    --purple-50per:rgba(175, 82, 222, 0.50);

    --red-50:#FFECEB;
    --red-100:#FFD8D6;
    --red-200:#FFB1AD;
    --red-300:#FF8B85;
    --red-400:#FF645C;
    --red-500:#FF3B30;
    --red-600:#F50C00;
    --red-700:#B80900;
    --red-800:#7A0600;
    --red-900:#3D0300;
    --red-950:#1F0200;
    --red-5per:rgba(255, 59, 48, 0.05);
    --red-10per:rgba(255, 59, 48, 0.10);
    --red-15per:rgba(255, 59, 48, 0.15);
    --red-20per:rgba(255, 59, 48, 0.20);
    --red-25per:rgba(255, 59, 48, 0.25);
    --red-30per:rgba(255, 59, 48, 0.30);
    --red-35per:rgba(255, 59, 48, 0.35);
    --red-40per:rgba(255, 59, 48, 0.40);
    --red-45per:rgba(255, 59, 48, 0.45);
    --red-50per:rgba(255, 59, 48, 0.50);

    --orange-50:#FFF4E5;
    --orange-100:#FFEACC;
    --orange-200:#FFD599;
    --orange-300:#FFBF66;
    --orange-400:#FFAA33;
    --orange-500:#FF9500;
    --orange-600:#CC7700;
    --orange-700:#995900;
    --orange-800:#663C00;
    --orange-900:#331E00;
    --orange-950:#190F00;
    --orange-5per:rgba(255, 149, 0, 0.05);
    --orange-10per:rgba(255, 149, 0, 0.10);
    --orange-15per:rgba(255, 149, 0, 0.15);
    --orange-20per:rgba(255, 149, 0, 0.20);
    --orange-25per:rgba(255, 149, 0, 0.25);
    --orange-30per:rgba(255, 149, 0, 0.30);
    --orange-35per:rgba(255, 149, 0, 0.35);
    --orange-40per:rgba(255, 149, 0, 0.40);
    --orange-45per:rgba(255, 149, 0, 0.45);
    --orange-50per:rgba(255, 149, 0, 0.50);


    --yellow-50:#FFF9E5;
    --yellow-100:#FFF2CC;
    --yellow-200:#FFE699;
    --yellow-300:#FFD966;
    --yellow-400:#FFCC33;
    --yellow-500:#FFC100;
    --yellow-600:#CC9900;
    --yellow-700:#997300;
    --yellow-800:#664D00;
    --yellow-900:#332600;
    --yellow-950:#191300;
    --yellow-5per:rgba(255, 193, 0, 0.05);
    --yellow-10per:rgba(255, 193, 0, 0.10);
    --yellow-15per:rgba(255, 193, 0, 0.15);
    --yellow-20per:rgba(255, 193, 0, 0.20);
    --yellow-25per:rgba(255, 193, 0, 0.25);
    --yellow-30per:rgba(255, 193, 0, 0.30);
    --yellow-35per:rgba(255, 193, 0, 0.35);
    --yellow-40per:rgba(255, 193, 0, 0.40);
    --yellow-45per:rgba(255, 193, 0, 0.45);
    --yellow-50per:rgba(255, 193, 0, 0.50);

    --green-50:#EBFAEF;
    --green-100:#D7F4DE;
    --green-200:#AEEABD;
    --green-300:#86DF9C;
    --green-400:#59D478;
    --green-500:#34C759;
    --green-600:#299E46;
    --green-700:#207936;
    --green-800:#155124;
    --green-900:#0B2812;
    --green-950:#051409;
    --green-5per:rgba(52, 199, 89, 0.05);
    --green-10per:rgba(52, 199, 89, 0.10);
    --green-15per:rgba(52, 199, 89, 0.15);
    --green-20per:rgba(52, 199, 89, 0.20);
    --green-25per:rgba(52, 199, 89, 0.25);
    --green-30per:rgba(52, 199, 89, 0.30);
    --green-35per:rgba(52, 199, 89, 0.35);
    --green-40per:rgba(52, 199, 89, 0.40);
    --green-45per:rgba(52, 199, 89, 0.45);
    --green-50per:rgba(52, 199, 89, 0.50);

    --forest-50:#E5FAEA;
    --forest-100:#CCF5D5;
    --forest-200:#99EBAB;
    --forest-300:#62E07D;
    --forest-400:#2FD553;
    --forest-500:#21A53E;
    --forest-600:#1A8431;
    --forest-700:#146224;
    --forest-800:#0E4419;
    --forest-900:#07220D;
    --forest-950:#031106;
    --forest-5per:rgba(33, 165, 62, 0.05);
    --forest-10per:rgba(33, 165, 62, 0.10);
    --forest-15per:rgba(33, 165, 62, 0.15);
    --forest-20per:rgba(33, 165, 62, 0.20);
    --forest-25per:rgba(33, 165, 62, 0.25);
    --forest-30per:rgba(33, 165, 62, 0.30);
    --forest-35per:rgba(33, 165, 62, 0.35);
    --forest-40per:rgba(33, 165, 62, 0.40);
    --forest-45per:rgba(33, 165, 62, 0.45);
    --forest-50per:rgba(33, 165, 62, 0.50);

    --mint-50:#E5FAF9;
    --mint-100:#CBF6F4;
    --mint-200:#97ECE8;
    --mint-300:#68E4DD;
    --mint-400:#34DAD2;
    --mint-500:#20B1AA;
    --mint-600:#1A8F89;
    --mint-700:#146C68;
    --mint-800:#0C4542;
    --mint-900:#062321;
    --mint-950:#031111;
    --mint-5per:rgba(32, 177, 170, 0.05);
    --mint-10per:rgba(32, 177, 170, 0.10);
    --mint-15per:rgba(32, 177, 170, 0.15);
    --mint-20per:rgba(32, 177, 170, 0.20);
    --mint-25per:rgba(32, 177, 170, 0.25);
    --mint-30per:rgba(32, 177, 170, 0.30);
    --mint-35per:rgba(32, 177, 170, 0.35);
    --mint-40per:rgba(32, 177, 170, 0.40);
    --mint-45per:rgba(32, 177, 170, 0.45);
    --mint-50per:rgba(32, 177, 170, 0.50);

    --teal-50:#EAF8FA;
    --teal-100:#D6F0F5;
    --teal-200:#A9E0EA;
    --teal-300:#80D2E0;
    --teal-400:#57C3D6;
    --teal-500:#30B0C7;
    --teal-600:#278EA0;
    --teal-700:#1D6A77;
    --teal-800:#13454E;
    --teal-900:#0A2429;
    --teal-950:#051215;
    --teal-5per:rgba(48, 176, 199, 0.05);
    --teal-10per:rgba(48, 176, 199, 0.10);
    --teal-15per:rgba(48, 176, 199, 0.15);
    --teal-20per:rgba(48, 176, 199, 0.20);
    --teal-25per:rgba(48, 176, 199, 0.25);
    --teal-30per:rgba(48, 176, 199, 0.30);
    --teal-35per:rgba(48, 176, 199, 0.35);
    --teal-40per:rgba(48, 176, 199, 0.40);
    --teal-45per:rgba(48, 176, 199, 0.45);
    --teal-50per:rgba(48, 176, 199, 0.50);

    --cyan-50:#E8F6FC;
    --cyan-100:#D6EFFA;
    --cyan-200:#ADDEF5;
    --cyan-300:#84CEF0;
    --cyan-400:#5BBEEB;
    --cyan-500:#32ADE6;
    --cyan-600:#1890C8;
    --cyan-700:#126C96;
    --cyan-800:#0C4864;
    --cyan-900:#062432;
    --cyan-950:#031017;
    --cyan-5per:rgba(50, 173, 230, 0.05);
    --cyan-10per:rgba(50, 173, 230, 0.10);
    --cyan-15per:rgba(50, 173, 230, 0.15);
    --cyan-20per:rgba(50, 173, 230, 0.20);
    --cyan-25per:rgba(50, 173, 230, 0.25);
    --cyan-30per:rgba(50, 173, 230, 0.30);
    --cyan-35per:rgba(50, 173, 230, 0.35);
    --cyan-40per:rgba(50, 173, 230, 0.40);
    --cyan-45per:rgba(50, 173, 230, 0.45);
    --cyan-50per:rgba(50, 173, 230, 0.50);

    --gray-50:#F4F5F6;
    --gray-100:#ECEDEF;
    --gray-200:#D8DCDE;
    --gray-300:#C2C8CC;
    --gray-400:#AFB6BB;
    --gray-500:#9BA4AB;
    --gray-600:#77838D;
    --gray-700:#586269;
    --gray-800:#3D4348;
    --gray-900:#1E2224;
    --gray-950:#0E0F11;
    --gray-5per:rgba(155, 164, 171, 0.05);
    --gray-10per:rgba(155, 164, 171, 0.10);
    --gray-15per:rgba(155, 164, 171, 0.15);
    --gray-20per:rgba(155, 164, 171, 0.20);
    --gray-25per:rgba(155, 164, 171, 0.25);
    --gray-30per:rgba(155, 164, 171, 0.30);
    --gray-35per:rgba(155, 164, 171, 0.35);
    --gray-40per:rgba(155, 164, 171, 0.40);
    --gray-45per:rgba(155, 164, 171, 0.45);
    --gray-50per:rgba(155, 164, 171, 0.50);

    --charcoal-50:#EFF0F0;
    --charcoal-100:#E2E3E4;
    --charcoal-200:#C5C8C9;
    --charcoal-300:#A5A9AC;
    --charcoal-400:#888E91;
    --charcoal-500:#6C7275;
    --charcoal-600:#565A5D;
    --charcoal-700:#404345;
    --charcoal-800:#2C2F30;
    --charcoal-900:#1C1D1F;
    --charcoal-950:#0A0B0B;
    --charcoal-5per:rgba(108, 114, 117, 0.05);
    --charcoal-10per:rgba(108, 114, 117, 0.10);
    --charcoal-15per:rgba(108, 114, 117, 0.15);
    --charcoal-20per:rgba(108, 114, 117, 0.20);
    --charcoal-25per:rgba(108, 114, 117, 0.25);
    --charcoal-30per:rgba(108, 114, 117, 0.30);
    --charcoal-35per:rgba(108, 114, 117, 0.35);
    --charcoal-40per:rgba(108, 114, 117, 0.40);
    --charcoal-45per:rgba(108, 114, 117, 0.45);
    --charcoal-50per:rgba(108, 114, 117, 0.50);


    --white-500:#fff;
    --white-600:#D8DCDE;
    --white-5per:rgba(255, 255, 255, 0.05);
    --white-10per:rgba(255, 255, 255, 0.10);
    --white-15per:rgba(255, 255, 255, 0.15);
    --white-20per:rgba(255, 255, 255, 0.20);
    --white-25per:rgba(255, 255, 255, 0.25);
    --white-30per:rgba(255, 255, 255, 0.30);
    --white-35per:rgba(255, 255, 255, 0.35);
    --white-40per:rgba(255, 255, 255, 0.40);
    --white-45per:rgba(255, 255, 255, 0.45);
    --white-50per:rgba(255, 255, 255, 0.50);

    --black-500:#000;
    --black-600:#3D4348;
    --black-5per:rgba(0, 0, 0, 0.05);
    --black-10per:rgba(0, 0, 0, 0.10);
    --black-15per:rgba(0, 0, 0, 0.15);
    --black-20per:rgba(0, 0, 0, 0.20);
    --black-25per:rgba(0, 0, 0, 0.25);
    --black-30per:rgba(0, 0, 0, 0.30);
    --black-35per:rgba(0, 0, 0, 0.35);
    --black-40per:rgba(0, 0, 0, 0.40);
    --black-45per:rgba(0, 0, 0, 0.45);
    --black-50per:rgba(0, 0, 0, 0.50);

    --page-surface-base:#fff;
    --page-surface-subtle:#fff;
    --page-surface-default:var(--gray-400);
    --page-surface-darker:var(--gray-200);
    --page-surface-disabled:var(--gray-30per);
    --page-border-default:var(--gray-400);
    --page-border-darker:var(--gray-500);
    --page-border-disabled:var(--gray-200);
    --page-text_icon-title:var(--gray-950);
    --page-text_icon-body:var(--gray-800);
    --page-text_icon-subtitle:var(--gray-800);
    --page-text_icon-negative:var(--gray-50);
    --page-text_icon-caption:var(--gray-700);
    --page-text_icon-whitetext:#FFF;
    --page-text_icon-disabled:var(--gray-500);

    --token-blue-surface-subtle:var(--blue-10per);
    --token-blue-surface-subtle_hover:var(--blue-15per);
    --token-blue-surface-subtle_disabled:var( --blue-5per);
    --token-blue-surface-lighter:var(--blue-400);
    --token-blue-surface-default:var(--blue-500);
    --token-blue-surface-darker:var(--blue-600);
    --token-blue-surface-disabled:var(--blue-30per);
    --token-blue-border-default:var(--blue-500);
    --token-blue-border-darker:var(--blue-600);
    --token-blue-text_icon-default:var(--blue-500);
    --token-blue-text_icon-hover:var(--blue-600);
    --token-blue-text_icon-negative:var(--blue-500);

    --token-navy-surface-subtle:var(--navy-10per);
    --token-navy-surface-subtle_hover:var(--navy-15per);
    --token-navy-surface-subtle_disabled:var( --navy-5per);
    --token-navy-surface-lighter:var(--navy-400);
    --token-navy-surface-default:var(--navy-500);
    --token-navy-surface-darker:var(--navy-600);
    --token-navy-surface-disabled:var(--navy-30per);
    --token-navy-border-default:var(--navy-500);
    --token-navy-border-darker:var(--navy-600);
    --token-navy-text_icon-default:var(--navy-500);
    --token-navy-text_icon-hover:var(--navy-600);
    --token-navy-text_icon-negative:var(--navy-500);

    --token-indigo-surface-subtle:var(--indigo-10per);
    --token-indigo-surface-subtle_hover:var(--indigo-15per);
    --token-indigo-surface-subtle_disabled:var( --indigo-5per);
    --token-indigo-surface-lighter:var(--indigo-400);
    --token-indigo-surface-default:var(--indigo-500);
    --token-indigo-surface-darker:var(--indigo-600);
    --token-indigo-surface-disabled:var(--indigo-30per);
    --token-indigo-border-default:var(--indigo-500);
    --token-indigo-border-darker:var(--indigo-600);
    --token-indigo-text_icon-default:var(--indigo-500);
    --token-indigo-text_icon-hover:var(--indigo-600);
    --token-indigo-text_icon-negative:var(--indigo-500);
    /*Elements Colour*/
    --Elements-Base:#FFFFFF;
    --Elements-Line:#B7B9C5;
    --Elements-Text:#9A9DAC;
    --Elements-Icon:#757884;
    --Elements-DisableBG:#F5F5F5;
    --Elements-LabelDisable:#828493;
    --Elements-TextDisable:#CCCED9;

    --dropShadow-elevation-le1:0px 3px 3px 0px rgba(0, 0, 0, 0.03), 0px 1px 0px 0px rgba(0, 0, 0, 0.03);
    --dropShadow-elevation-le2:0px 5px 5px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.03), 0px 1px 0px 0px rgba(0, 0, 0, 0.03);
    --dropShadow-elevation-le3:0px 10px 10px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
    --dropShadow-elevation-le4:0px 20px 40px 0px rgba(0, 0, 0, 0.15), 0px 15px 30px 0px rgba(0, 0, 0, 0.10), 0px 5px 10px 0px rgba(0, 0, 0, 0.10);
    --dropShadow-elevation-le5 :0px 20px 40px 0px rgba(0, 0, 0, 0.25), 0px 15px 30px 0px rgba(0, 0, 0, 0.15), 0px 5px 10px 0px rgba(0, 0, 0, 0.05);

    --dropShadow-elevation-subtle-le1:0px 3px 3px 0px rgba(0, 0, 0, 0.03), 0px 1px 0px 0px rgba(0, 0, 0, 0.03);
    --dropShadow-elevation-subtle-le2:0px 5px 5px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.03), 0px 1px 0px 0px rgba(0, 0, 0, 0.03);
    --dropShadow-elevation-subtle-le3:0px 8px 8px 0px rgba(0, 0, 0, 0.05), 0px 4px 4px 0px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(0, 0, 0, 0.03);
    --dropShadow-elevation-subtle-le4:0px 10px 10px 0px rgba(0, 0, 0, 0.05), 0px 6px 6px 0px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(0, 0, 0, 0.03);
    --dropShadow-elevation-subtle-le5 :0px 12px 12px 0px rgba(0, 0, 0, 0.06), 0px 8px 8px 0px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(0, 0, 0, 0.03);

    --dropShadow-elevation-default-le1:0px 10px 10px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
    --dropShadow-elevation-default-le2:0px 15px 30px 0px rgba(0, 0, 0, 0.15), 0px 5px 10px 0px rgba(0, 0, 0, 0.10), 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
    --dropShadow-elevation-default-le3:0px 15px 30px 0px rgba(0, 0, 0, 0.15), 0px 10px 20px 0px rgba(0, 0, 0, 0.10), 0px 3px 6px 0px rgba(0, 0, 0, 0.10);
    --dropShadow-elevation-default-le4:0px 20px 40px 0px rgba(0, 0, 0, 0.15), 0px 15px 30px 0px rgba(0, 0, 0, 0.10), 0px 5px 10px 0px rgba(0, 0, 0, 0.10);

    --dropShadow-elevation-strong-le1:0px 10px 10px 0px rgba(0, 0, 0, 0.15), 0px 4px 4px 0px rgba(0, 0, 0, 0.10), 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
    --dropShadow-elevation-strong-le2:0px 10px 20px 0px rgba(0, 0, 0, 0.20), 0px 5px 10px 0px rgba(0, 0, 0, 0.10), 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
    --dropShadow-elevation-strong-le3:0px 15px 30px 0px rgba(0, 0, 0, 0.20), 0px 10px 20px 0px rgba(0, 0, 0, 0.15), 0px 3px 6px 0px rgba(0, 0, 0, 0.10);
    --dropShadow-elevation-strong-le4:0px 20px 40px 0px rgba(0, 0, 0, 0.25), 0px 15px 30px 0px rgba(0, 0, 0, 0.15), 0px 5px 10px 0px rgba(0, 0, 0, 0.05);

    --gradient-blue1:0, 122, 255;
    --gradient-blue2:153, 202, 255;
    --gradient-blue3:214, 233, 254;
    --gradient-blue4:203, 228, 255;
    --gradient-blue5:102, 176, 255;
    --gradient-blue6:0, 99, 204;
    --gradient-blue-B001:linear-gradient(180deg, rgba(var(--gradient-blue1), 0.75) 0%, rgba(var(--gradient-blue1), 0.85) 100%);
    --gradient-blue-B002:linear-gradient(37deg, rgba(var(--gradient-blue2), 0.28) 34.78%, rgba(var(--gradient-blue4), 0.87) 87.06%), rgba(var(--gradient-blue5), 0.30);
    --gradient-blue-B003:linear-gradient(37deg, rgba(var(--gradient-blue3), 0.00) 34.78%, rgba(var(--gradient-blue2), 0.80) 87.06%),rgba(var(--gradient-blue1), 0.80);
    --gradient-blue-B004:linear-gradient(180deg, rgba(var(--gradient-blue1), 0.12) 0%, rgba(var(--gradient-blue1), 0.09) 100%);
    --gradient-blue-B005:linear-gradient(180deg, rgba(var(--gradient-blue6), 0.85) 0%, rgba(var(--gradient-blue6), 0.70) 100%);
    --gradient-blue-B006:linear-gradient(37deg, rgba(var(--gradient-blue2), 0.00) 34.78%, var(--blue-200) 87.06%), rgba(var(--gradient-blue5), 0.15);
    --gradient-blue-B007:linear-gradient(0deg, rgba(var(--gradient-blue1), 0.10) 0%, rgba(var(--gradient-blue1), 0.10) 100%),linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(204, 204, 204, 0.09) 20.17%, rgba(0, 0, 0, 0.00) 100%);
    --gradient-blue-B008:linear-gradient(180deg, rgba(var(--gradient-blue1), 0.20) 0%, rgba(var(--gradient-blue1), 0.15) 100%);
    --gradient-blue-B009:linear-gradient(180deg, rgba(var(--gradient-blue1), 0.32) 0%, rgba(var(--gradient-blue1), 0.24) 100%);
    --gradient-blue-B010:linear-gradient(37deg, rgba(var(--gradient-blue2), 0.00) 34.78%, rgba(var(--gradient-blue2), 0.13) 87.06%), rgba(var(--gradient-blue5), 0.05);
    --gradient-blue-B011:linear-gradient(0deg, rgba(var(--gradient-blue1), 0.10) 0%, rgba(var(--gradient-blue1), 0.10) 100%),linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(204, 204, 204, 0.02) 20.17%, rgba(0, 0, 0, 0.00) 100%);
    --gradient-blue-B012:linear-gradient(37deg, rgba(var(--gradient-blue3), 0.00) 34.78%, rgba(var(--gradient-blue2), 0.05) 87.06%), rgba(var(--gradient-blue1), 0.20);
    --gradient-blue-B013:linear-gradient(180deg, rgba(var(--gradient-blue1), 0.08) 0%, rgba(var(--gradient-blue1), 0.06) 100%);
    --gradient-blue-B014:linear-gradient(180deg, rgba(var(--gradient-blue1), 0.85) 0%, rgba(var(--gradient-blue1), 0.65) 100%);
    --gradient-blue-B015:linear-gradient(37deg, rgba(var(--gradient-blue2), 0.13) 34.78%, rgba(var(--gradient-blue4), 0.48) 87.06%), rgba(var(--gradient-blue5), 0.30);
    --gradient-blue-B016:linear-gradient(37deg, rgba(var(--gradient-blue3), 0.00) 34.78%, var(--blue-200) 87.06%), rgba(var(--gradient-blue1), 0.50);
    --gradient-blue-B017:linear-gradient(180deg, rgba(var(--gradient-blue1), 0.24) 0%, rgba(var(--gradient-blue1), 0.18) 100%);
    --gradient-blue-B018:linear-gradient(180deg, rgba(var(--gradient-blue6), 0.85) 0%, rgba(var(--gradient-blue6), 0.65) 100%);
    --gradient-blue-B019:linear-gradient(0deg, rgba(var(--gradient-blue1), 0.15) 0%, rgba(var(--gradient-blue1), 0.15) 100%),linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(204, 204, 204, 0.09) 20.17%, rgba(0, 0, 0, 0.00) 100%);
    --gradient-blue-B020:linear-gradient(180deg, rgba(var(--gradient-blue1), 0.32) 0%, rgba(var(--gradient-blue1), 0.24) 100%);

    --gradient-navy-N001:linear-gradient(180deg, rgba(56, 100, 255, 0.75) 0%, rgba(56, 100, 255, 0.85) 100%);
    --gradient-navy-N002:linear-gradient(37deg, rgba(173, 191, 255, 0.28) 34.78%, rgba(203, 215, 254, 0.87) 87.06%), rgba(138, 163, 255, 0.30);
    --gradient-navy-N003:linear-gradient(37deg, rgba(227, 233, 255, 0.00) 34.78%, rgba(173, 191, 255, 0.80) 87.06%),rgba(56, 100, 255, 0.80);
    --gradient-navy-N004:linear-gradient(180deg, rgba(56, 100, 255, 0.12) 0%, rgba(56, 100, 255, 0.09) 100%);
    --gradient-navy-N005:linear-gradient(180deg, rgba(47, 83, 214, 0.85) 0%, rgba(47, 83, 214, 0.70) 100%);
    --gradient-navy-N006:linear-gradient(37deg, rgba(173, 191, 255, 0.00) 34.78%, var(--navy-200) 87.06%), rgba(138, 163, 255, 0.15);
    --gradient-navy-N007:linear-gradient(0deg, rgba(56, 100, 255, 0.10) 0%, rgba(56, 100, 255, 0.10) 100%),linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(204, 204, 204, 0.09) 20.17%, rgba(0, 0, 0, 0.00) 100%);
    --gradient-navy-N008:linear-gradient(180deg, rgba(56, 100, 255, 0.20) 0%, rgba(56, 100, 255, 0.15) 100%);
    --gradient-navy-N009:linear-gradient(180deg, rgba(56, 100, 255, 0.32) 0%, rgba(56, 100, 255, 0.24) 100%);
    --gradient-navy-N010:linear-gradient(37deg, rgba(173, 191, 255, 0.00) 34.78%, rgba(173, 191, 255, 0.13) 87.06%), rgba(138, 163, 255, 0.05);
    --gradient-navy-N011:linear-gradient(0deg, rgba(56, 100, 255, 0.10) 0%, rgba(56, 100, 255, 0.10) 100%),linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(204, 204, 204, 0.02) 20.17%, rgba(0, 0, 0, 0.00) 100%);
    --gradient-navy-N012:linear-gradient(37deg, rgba(227, 233, 255, 0.00) 34.78%, rgba(173, 191, 255, 0.05) 87.06%), rgba(56, 100, 255, 0.20);
    --gradient-navy-N013:linear-gradient(180deg, rgba(56, 100, 255, 0.08) 0%, rgba(56, 100, 255, 0.06) 100%);
    --gradient-navy-N014:linear-gradient(180deg, rgba(56, 100, 255, 0.85) 0%, rgba(56, 100, 255, 0.65) 100%);
    --gradient-navy-N015:linear-gradient(37deg, rgba(173, 191, 255, 0.13) 34.78%, rgba(203, 215, 254, 0.48) 87.06%), rgba(138, 163, 255, 0.30);
    --gradient-navy-N016:linear-gradient(37deg, rgba(227, 233, 255, 0.00) 34.78%, var(--navy-200) 87.06%), rgba(56, 100, 255, 0.50);
    --gradient-navy-N017:linear-gradient(180deg, rgba(56, 100, 255, 0.24) 0%, rgba(56, 100, 255, 0.18) 100%);
    --gradient-navy-N018:linear-gradient(180deg, rgba(47, 83, 214, 0.85) 0%, rgba(47, 83, 214, 0.65) 100%);
    --gradient-navy-N019:linear-gradient(0deg, rgba(56, 100, 255, 0.15) 0%, rgba(56, 100, 255, 0.15) 100%),linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(204, 204, 204, 0.09) 20.17%, rgba(0, 0, 0, 0.00) 100%);
    --gradient-navy-N020:linear-gradient(180deg, rgba(56, 100, 255, 0.32) 0%, rgba(56, 100, 255, 0.24) 100%);

    --gradient-indigo-I001:linear-gradient(180deg, rgba(88, 86, 214, 0.75) 0%, rgba(88, 86, 214, 0.85) 100%);
    --gradient-indigo-I002:linear-gradient(37deg, rgba(190, 189, 239, 0.28) 34.78%, rgba(222, 222, 249, 0.87) 87.06%), rgba(154, 152, 230, 0.30);
    --gradient-indigo-I003:linear-gradient(37deg, rgba(235, 235, 255, 0.00) 34.78%, rgba(192, 191, 255, 0.80) 87.06%),rgba(88, 86, 214, 0.80);
    --gradient-indigo-I004:linear-gradient(180deg, rgba(88, 86, 214, 0.12) 0%, rgba(88, 86, 214, 0.09) 100%);
    --gradient-indigo-I005:linear-gradient(180deg, rgba(61, 59, 201, 0.85) 0%, rgba(61, 59, 201, 0.70) 100%);
    --gradient-indigo-I006:linear-gradient(37deg, rgba(190, 189, 239, 0.00) 34.78%, var(--indigo-200) 87.06%), rgba(154, 152, 230, 0.15);
    --gradient-indigo-I007:linear-gradient(0deg, rgba(88, 86, 214, 0.10) 0%, rgba(88, 86, 214, 0.10) 100%),linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(204, 204, 204, 0.09) 20.17%, rgba(0, 0, 0, 0.00) 100%);
    --gradient-indigo-I008:linear-gradient(180deg, rgba(88, 86, 214, 0.20) 0%, rgba(88, 86, 214, 0.15) 100%);
    --gradient-indigo-I009:linear-gradient(180deg, rgba(88, 86, 214, 0.32) 0%, rgba(88, 86, 214, 0.24) 100%);
    --gradient-indigo-I010:linear-gradient(37deg, rgba(190, 189, 239, 0.00) 34.78%, rgba(190, 189, 239, 0.13) 87.06%), rgba(154, 152, 230, 0.05);
    --gradient-indigo-I011:linear-gradient(0deg, rgba(88, 86, 214, 0.10) 0%, rgba(88, 86, 214, 0.10) 100%),linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(204, 204, 204, 0.02) 20.17%, rgba(0, 0, 0, 0.00) 100%);
    --gradient-indigo-I012:linear-gradient(37deg, rgba(223, 222, 247, 0.00) 34.78%, rgba(152, 148, 247, 0.05) 87.06%),rgba(88, 86, 214, 0.20);
    --gradient-indigo-I013:linear-gradient(180deg, rgba(88, 86, 214, 0.08) 0%, rgba(88, 86, 214, 0.06) 100%);
    --gradient-indigo-I014:linear-gradient(180deg, rgba(88, 86, 214, 0.85) 0%, rgba(88, 86, 214, 0.65) 100%);
    --gradient-indigo-I015:linear-gradient(37deg, rgba(140, 138, 230, 0.13) 34.78%, rgba(185, 184, 230, 0.48) 87.06%), rgba(154, 152, 230, 0.30);
    --gradient-indigo-I016:linear-gradient(37deg, rgba(88, 86, 214, 0.00) 34.78%, #B6B6D6 87.06%), rgba(88, 86, 214, 0.50);
    --gradient-indigo-I017:linear-gradient(180deg, rgba(88, 86, 214, 0.24) 0%, rgba(88, 86, 214, 0.18) 100%);
    --gradient-indigo-I017:linear-gradient(180deg, rgba(88, 86, 214, 0.24) 0%, rgba(88, 86, 214, 0.18) 100%);
    --gradient-indigo-I018:linear-gradient(180deg, rgba(61, 59, 201, 0.85) 0%, rgba(61, 59, 201, 0.65) 100%);
    --gradient-indigo-I019:linear-gradient(0deg, rgba(88, 86, 214, 0.15) 0%, rgba(88, 86, 214, 0.15) 100%),linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(204, 204, 204, 0.09) 20.17%, rgba(0, 0, 0, 0.00) 100%);
    --gradient-indigo-I020:linear-gradient(180deg, rgba(88, 86, 214, 0.32) 0%, rgba(88, 86, 214, 0.24) 100%);
}

/* 파랑 (어업자원) */
.btn-blue-subtitle {background-color: var(--blue-10per); color:var(--blue-500);}
.btn-blue-subtitle:hover, .btn-blue-subtitle.hover {background-color: var(--blue-15per); color:var(--blue-600);}
.btn-blue-subtitle:disabled {background-color: var(--blue-5per); color:var(--blue-30per);}

/* 네이비 (어촌양식) */
.btn-navy-subtitle {background-color: var(--navy-10per); color:var(--navy-500);}
.btn-navy-subtitle:hover, .btn-navy-subtitle.hover {background-color: var(--navy-15per); color:var(--navy-600);}
.btn-navy-subtitle:disabled {background-color: var(--navy-5per); color:var(--navy-30per);}

/* 인디고 (해양산업) */
.btn-indigo-subtitle {background-color: var(--indigo-10per); color:var(--indigo-500);}
.btn-indigo-subtitle:hover, .btn-indigo-subtitle.hover {background-color: var(--indigo-15per); color:var(--indigo-600);}
.btn-indigo-subtitle:disabled {background-color: var(--indigo-5per); color:var(--indigo-30per);}

/* 보라 (해양환경) */
.btn-purple-subtitle {background-color: var(--purple-10per); color:var(--purple-500);}
.btn-purple-subtitle:hover, .btn-purple-subtitle.hover {background-color: var(--purple-15per); color:var(--purple-600);}
.btn-purple-subtitle:disabled {background-color: var(--purple-5per); color:var(--purple-30per);}

/* 빨강 (해사안전) */
.btn-red-subtitle {background-color: var(--red-10per); color:var(--red-500);}
.btn-red-subtitle:hover, .btn-red-subtitle.hover {background-color: var(--red-15per); color:var(--red-600);}
.btn-red-subtitle:disabled {background-color: var(--red-5per); color:var(--red-30per);}

/* 주황 (해운물류) */
.btn-orange-subtitle {background-color: var(--orange-10per); color:var(--orange-500);}
.btn-orange-subtitle:hover, .btn-orange-subtitle.hover {background-color: var(--orange-15per); color:var(--orange-600);}
.btn-orange-subtitle:disabled {background-color: var(--orange-5per); color:var(--orange-30per);}

/* 초록 (항만운영) */
.btn-green-subtitle {background-color: var(--green-10per); color:var(--green-500);}
.btn-green-subtitle:hover, .btn-green-subtitle.hover {background-color: var(--green-15per); color:var(--green-600);}
.btn-green-subtitle:disabled {background-color: var(--green-5per); color:var(--green-30per);}

/* 시안 (항만건설) */
.btn-cyan-subtitle {background-color: var(--cyan-10per); color:var(--cyan-500);}
.btn-cyan-subtitle:hover, .btn-cyan-subtitle.hover {background-color: var(--cyan-15per); color:var(--cyan-600);}
.btn-cyan-subtitle:disabled {background-color: var(--cyan-5per); color:var(--cyan-30per);}

/* 차콜 (공통행정 / default) */
.btn-charcoal-subtitle {background-color: var(--charcoal-10per); color:var(--charcoal-500);}
.btn-charcoal-subtitle:hover, .btn-charcoal-subtitle.hover {background-color: var(--charcoal-15per); color:var(--charcoal-600);}
.btn-charcoal-subtitle:disabled {background-color: var(--charcoal-5per); color:var(--charcoal-30per);}

.advanced-search-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  padding: 24px 16px;
  overflow-y: auto;
  box-sizing: border-box;
}

.advanced-search-modal[hidden] {
  display: none;
}

.advanced-search-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 15, 17, 0.32);
}

.advanced-search-modal__dialog {
  position: relative;
  width: min(732px, 100%);
  max-height: calc(100vh - 48px);
  margin: 48px auto;
  padding: 32px 40px;
  border-radius: 16px;
  border: 1px solid var(--epic-semantic-layout-border);
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 0 24px rgba(14, 15, 17, 0.07),
    0 0 56px rgba(14, 15, 17, 0.07),
    0 0 72px rgba(14, 15, 17, 0.07);
  overflow-y: auto;
  box-sizing: border-box;
}

.advanced-search-modal__header,
.advanced-search-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.advanced-search-modal__header {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--epic-color-gray-500);
}

.advanced-search-modal__title {
  margin: 0;
  font-family: var(--epic-font-family-suite);
  font-size: 24px;
  line-height: 24px;
  font-weight: 500;
  color: var(--epic-color-black-font-base);
}

.advanced-search-modal__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--epic-color-black-font-base);
  font-size: 20px;
  cursor: pointer;
}

.advanced-search-modal__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 32px;
}

.advanced-search-surface {
  position: relative;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(155, 164, 171, 0.3);
  box-sizing: border-box;
}

.advanced-search-surface--accent {
  border-color: rgba(0, 122, 255, 0.3);
  background: rgba(0, 122, 255, 0.05);
}

.advanced-search-surface--muted,
.advanced-search-panel {
  background: rgba(155, 164, 171, 0.1);
}

.advanced-search-search-grid {
  display: grid;
  grid-template-columns: 179px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.advanced-search-section__title,
.advanced-search-panel__label {
  display: block;
  margin: 0 0 10px;
  font-family: var(--epic-font-family-pretendard);
  font-size: 18px;
  line-height: 18px;
  font-weight: 500;
  color: var(--epic-color-black-font-base);
}

.advanced-search-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.advanced-search-check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 24px;
}

.advanced-search-check {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 80px;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  font-family: var(--epic-font-family-pretendard);
  font-size: 16px;
  line-height: 16px;
  font-weight: 300;
  color: var(--epic-color-gray-700);
  text-align: left;
  cursor: pointer;
}

.advanced-search-check--all {
  width: 100%;
  margin-bottom: 4px;
}

.advanced-search-check span {
  white-space: nowrap;
  overflow: visible;
}

.advanced-search-check i {
  font-size: 20px;
  color: var(--epic-color-gray-700);
}

.advanced-search-check.is-selected {
  font-weight: 600;
  color: var(--epic-color-black-font-base);
}

.advanced-search-check.is-selected i {
  color: var(--epic-color-blue-flat-base);
}

.advanced-search-field {
  position: relative;
}

.advanced-search-field + .advanced-search-field {
  margin-top: 24px;
}

.advanced-search-select,
.advanced-search-keyword,
.advanced-search-date-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1.2px solid var(--epic-color-gray-500);
  background: var(--epic-color-white-flat-base);
  box-sizing: border-box;
  font-family: var(--epic-font-family-pretendard);
  font-size: 15px;
  line-height: 15px;
  font-weight: 300;
  color: var(--epic-color-gray-700);
  text-align: left;
  cursor: pointer;
  outline: none;
}

.advanced-search-select i,
.advanced-search-keyword i,
.advanced-search-date-input i {
  font-size: 18px;
  color: var(--epic-color-gray-700);
  flex-shrink: 0;
}

.advanced-search-keyword {
  gap: 12px;
  cursor: text;
}

.advanced-search-keyword__input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  outline: 0;
  font: inherit;
  color: var(--epic-color-gray-700);
}

.advanced-search-keyword__input::placeholder {
  color: var(--epic-color-gray-700);
  opacity: 1;
}

.advanced-search-field.is-open .advanced-search-select,
.advanced-search-keyword:focus-within,
.advanced-search-date-input.is-open {
  border-color: var(--epic-color-blue-flat-base);
  color: var(--epic-color-black-font-base);
}

.advanced-search-select__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--epic-color-gray-400);
  background: var(--epic-color-white-flat-base);
  box-shadow:
    0 4px 8px var(--epic-semantic-shadow-lv1),
    0 8px 16px var(--epic-semantic-shadow-lv2);
  box-sizing: border-box;
}

.advanced-search-select__menu[hidden] {
  display: none;
}

.advanced-search-field--date-type .advanced-search-select__menu {
  top: calc(100% + 8px);
  bottom: auto;
  max-height: 132px;
  overflow-y: auto;
}

.advanced-search-select__option {
  width: 100%;
  padding: 10px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: var(--epic-font-family-pretendard);
  font-size: 15px;
  line-height: 15px;
  font-weight: 300;
  color: var(--epic-color-black-font-base);
  text-align: left;
  cursor: pointer;
  outline: none;
}

.advanced-search-select__option:hover {
  background: rgba(0, 122, 255, 0.08);
}

.advanced-search-date-range {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 180px) minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 2px;
}

.advanced-search-date-range > .advanced-search-field--date-type {
  margin-right: 10px;
}

.advanced-search-date-range__dash {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 16px;
  color: var(--epic-color-gray-700);
}

.advanced-search-date-input__value {
  pointer-events: none;
}

.advanced-search-calendar {
  position: absolute;
  bottom: calc(100% - 4px);
  right: 0;
  z-index: 30;
  width: min(345px, 100%);
  padding: 20px 22px;
  border-radius: 12px;
  border: 2px solid var(--epic-color-blue-flat-base);
  background: var(--epic-color-white-flat-base);
  box-shadow:
    0 0 24px rgba(14, 15, 17, 0.07),
    0 0 56px rgba(14, 15, 17, 0.07);
  box-sizing: border-box;
}

.advanced-search-calendar[hidden] {
  display: none;
}

.advanced-search-calendar__header,
.advanced-search-calendar__footer,
.advanced-search-calendar__weekdays,
.advanced-search-calendar__days {
  display: grid;
}

.advanced-search-calendar__header {
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--epic-color-gray-400);
}

.advanced-search-calendar__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.advanced-search-calendar__nav:last-child {
  justify-content: flex-end;
}

.advanced-search-calendar__nav-btn,
.advanced-search-calendar__current-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--epic-color-black-font-base);
  cursor: pointer;
}

.advanced-search-calendar__nav-btn {
  width: 24px;
  height: 24px;
  font-size: 16px;
}

.advanced-search-calendar__current {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.advanced-search-calendar__current-btn {
  gap: 4px;
  font-family: var(--epic-font-family-pretendard);
  font-size: 15px;
  line-height: 15px;
  font-weight: 700;
}

.advanced-search-calendar__current-btn i {
  font-size: 12px;
  color: var(--epic-color-blue-flat-base);
}

.advanced-search-calendar__weekdays {
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  padding: 14px 0 10px;
}

.advanced-search-calendar__weekdays span {
  text-align: center;
  font-family: var(--epic-font-family-pretendard);
  font-size: 13px;
  line-height: 13px;
  font-weight: 400;
  color: var(--epic-color-black-font-base);
}

.advanced-search-calendar__weekdays span:first-child {
  color: #ff5b4d;
}

.advanced-search-calendar__weekdays span:last-child {
  color: var(--epic-color-blue-flat-base);
}

.advanced-search-calendar__days {
  grid-template-columns: repeat(7, 1fr);
  gap: 4px 0;
}

.advanced-search-calendar__day {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--epic-font-family-pretendard);
  font-size: 13px;
  line-height: 13px;
  font-weight: 400;
  color: var(--epic-color-black-font-base);
  cursor: pointer;
}

.advanced-search-calendar__day::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgba(0, 122, 255, 0.08);
}

.advanced-search-calendar__day.is-outside {
  color: var(--epic-color-gray-400);
}

.advanced-search-calendar__day.is-in-range {
  background: rgba(0, 122, 255, 0.08);
}

.advanced-search-calendar__day.is-range-start::before,
.advanced-search-calendar__day.is-range-end::before {
  opacity: 1;
}

.advanced-search-calendar__day.is-range-start::before {
  left: 50%;
}

.advanced-search-calendar__day.is-range-end::before {
  right: 50%;
}

.advanced-search-calendar__day.is-range-start.is-range-end::before {
  left: 0;
  right: 0;
}

.advanced-search-calendar__day-number {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
}

.advanced-search-calendar__day.is-selected .advanced-search-calendar__day-number {
  background: var(--epic-color-blue-flat-base);
  color: var(--epic-color-white);
  font-weight: 700;
}

.advanced-search-calendar__footer {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding-top: 12px;
  margin-top: 14px;
  border-top: 1px solid var(--epic-color-gray-400);
}

.advanced-search-calendar__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  font-family: var(--epic-font-family-pretendard);
  font-size: 12px;
  line-height: 12px;
  font-weight: 700;
  cursor: pointer;
  justify-self: start;
}

.advanced-search-calendar__action--ghost {
  background: rgba(0, 0, 0, 0.1);
  color: var(--epic-color-black-font-base);
}

.advanced-search-calendar__action--fill {
  justify-self: end;
  background: var(--epic-color-black-flat-base);
  color: var(--epic-color-white);
}

.advanced-search-modal__footer {
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--epic-color-gray-500);
}

.advanced-search-modal__footer-btn {
  min-width: 124px;
}

.advanced-search-modal__footer-btn--close {
  width: 90px;
  min-width: 90px;
  border: 0;
  background: rgba(0, 122, 255, 0.1);
  color: #0063cc;
  box-shadow: none;
}

.advanced-search-modal__footer-btn--close .semtle-btn__icon {
  color: currentColor;
}

.advanced-search-modal__footer-btn--close:hover:not(:disabled) {
  background: rgba(0, 122, 255, 0.14);
  border: 0;
  color: #0063cc;
}

body.modal-open {
  overflow: hidden;
}

.main-alert {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(14, 15, 17, 0.55);
  box-sizing: border-box;
}

.main-alert.is-open {
  display: flex;
}

.main-alert__box {
  width: min(360px, 100%);
  padding: 28px 28px 24px;
  border-radius: 16px;
  background: var(--epic-semantic-layout-page);
  box-shadow: 0 16px 36px rgba(14, 15, 17, 0.2);
  box-sizing: border-box;
  text-align: center;
}

.main-alert__message {
  margin: 0 0 22px;
  color: var(--epic-color-black-font-base);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

.main-alert__button {
  min-width: 76px;
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--epic-color-blue-flat-base);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 900px) {
  .advanced-search-modal__dialog {
    width: min(732px, 100%);
    margin: 16px auto;
    padding: 24px 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }

  .advanced-search-search-grid,
  .advanced-search-date-range {
    grid-template-columns: 1fr;
  }

  .advanced-search-check-list {
    gap: 16px 20px;
  }

  .advanced-search-date-range > .advanced-search-field--date-type {
    margin-right: 0;
  }

  .advanced-search-date-range__dash {
    display: none;
  }

  .advanced-search-calendar {
    position: static;
    width: 100%;
    margin-top: 12px;
  }
}

.insight-chip {
    text-decoration: none;
    cursor: pointer;
}

.media-slide {
    cursor: pointer;
}