@charset "UTF-8";
/*
  Design Guidelines
  Version: 1.0
  Author: Jiyeol Park
  Company: ISTN
  Created: 2025-04-03
*/
/* ----------------------------- */
/* Variables Properties */
/* ----------------------------- */
/* import links */
@import url("/font/pretendard-fcab0c679bca4ecf6a9b4af9bec333b8.css");
/* ----------------------------- */
/* Breakpoints Properties */
/* ----------------------------- */
/* responsive mixin functions */
/* grid layouts */
/* grid basic */
/* inline 24px + 24px */
/* modal center breakpoints */
/* this is not include padding inline value */
/* layer breakpoints */
/* page breakpoints */
/* center-col-breakpoint 너비 생성 */
/* 각 center-col-breakpoint 지점 별 flex 전환 설정 */
@container pagecontainer (max-width: 120px) {
  .contents-area:has(.center-col-1) {
    display: flex !important;
  }
  .contents-area:has(.center-col-1) .center-container {
    width: 100%;
  }
}
@container pagecontainer (max-width: 216px) {
  .contents-area:has(.center-col-2) {
    display: flex !important;
  }
  .contents-area:has(.center-col-2) .center-container {
    width: 100%;
  }
}
@container pagecontainer (max-width: 312px) {
  .contents-area:has(.center-col-3) {
    display: flex !important;
  }
  .contents-area:has(.center-col-3) .center-container {
    width: 100%;
  }
}
@container pagecontainer (max-width: 408px) {
  .contents-area:has(.center-col-4) {
    display: flex !important;
  }
  .contents-area:has(.center-col-4) .center-container {
    width: 100%;
  }
}
@container pagecontainer (max-width: 504px) {
  .contents-area:has(.center-col-5) {
    display: flex !important;
  }
  .contents-area:has(.center-col-5) .center-container {
    width: 100%;
  }
}
@container pagecontainer (max-width: 600px) {
  .contents-area:has(.center-col-6) {
    display: flex !important;
  }
  .contents-area:has(.center-col-6) .center-container {
    width: 100%;
  }
}
@container pagecontainer (max-width: 696px) {
  .contents-area:has(.center-col-7) {
    display: flex !important;
  }
  .contents-area:has(.center-col-7) .center-container {
    width: 100%;
  }
}
@container pagecontainer (max-width: 792px) {
  .contents-area:has(.center-col-8) {
    display: flex !important;
  }
  .contents-area:has(.center-col-8) .center-container {
    width: 100%;
  }
}
@container pagecontainer (max-width: 888px) {
  .contents-area:has(.center-col-9) {
    display: flex !important;
  }
  .contents-area:has(.center-col-9) .center-container {
    width: 100%;
  }
}
@container pagecontainer (max-width: 984px) {
  .contents-area:has(.center-col-10) {
    display: flex !important;
  }
  .contents-area:has(.center-col-10) .center-container {
    width: 100%;
  }
}
@container pagecontainer (max-width: 1080px) {
  .contents-area:has(.center-col-11) {
    display: flex !important;
  }
  .contents-area:has(.center-col-11) .center-container {
    width: 100%;
  }
}
@container pagecontainer (max-width: 1176px) {
  .contents-area:has(.center-col-12) {
    display: flex !important;
  }
  .contents-area:has(.center-col-12) .center-container {
    width: 100%;
  }
}
:root {
  /* Color */
  /* Default */
  --white: #FFFFFF;
  --black: #000000;
  /* Neutral Solid */
  --neutral-solid-50: #FAFAFA;
  --neutral-solid-100: #F5F5F5;
  --neutral-solid-200: #E5E5E5;
  --neutral-solid-300: #D4D4D4;
  --neutral-solid-400: #A3A3A3;
  --neutral-solid-500: #737373;
  --neutral-solid-600: #525252;
  --neutral-solid-700: #404040;
  --neutral-solid-800: #262626;
  --neutral-solid-900: #171717;
  --neutral-solid-950: #0A0A0A;
  /* Neutral Opacity */
  --neutral-opacity-50: rgba(0, 0, 0, 0.02);
  --neutral-opacity-100: rgba(0, 0, 0, 0.04);
  --neutral-opacity-200: rgba(0, 0, 0, 0.10);
  --neutral-opacity-300: rgba(0, 0, 0, 0.17);
  --neutral-opacity-400: rgba(0, 0, 0, 0.36);
  --neutral-opacity-500: rgba(0, 0, 0, 0.55);
  --neutral-opacity-600: rgba(0, 0, 0, 0.68);
  --neutral-opacity-700: rgba(0, 0, 0, 0.75);
  --neutral-opacity-800: rgba(0, 0, 0, 0.85);
  --neutral-opacity-900: rgba(0, 0, 0, 0.91);
  --neutral-opacity-950: rgba(0, 0, 0, 0.96);
  /* Gray */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #030712;
  /* Slate */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;
  /* Blue */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --blue-950: #172554;
  /* Indigo */
  --indigo-50: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;
  --indigo-900: #312e81;
  --indigo-950: #1e1b4b;
  /* Sky */
  --sky-50: #f0f9ff;
  --sky-100: #dff2fe;
  --sky-200: #b8e6fe;
  --sky-300: #74d4ff;
  --sky-400: #00bcff;
  --sky-500: #00a6f4;
  --sky-600: #0084d1;
  --sky-700: #0069a8;
  --sky-800: #00598a;
  --sky-900: #024a70;
  --sky-950: #052f4a;
  /* Cyan */
  --cyan-50: #ecfeff;
  --cyan-100: #cefafe;
  --cyan-200: #a2f4fd;
  --cyan-300: #53eafd;
  --cyan-400: #00d3f2;
  --cyan-500: #00b8db;
  --cyan-600: #0092b8;
  --cyan-700: #007595;
  --cyan-800: #005f78;
  --cyan-900: #104e64;
  --cyan-950: #053345;
  /* Teal */
  --teal-50: #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-200: #99f6e4;
  --teal-300: #5eead4;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;
  --teal-800: #115e59;
  --teal-900: #134e4a;
  --teal-950: #042f2e;
  /* Green */
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;
  --green-950: #052e16;
  /* Yellow */
  --yellow-50: #fffbeb;
  --yellow-100: #fef3c7;
  --yellow-200: #fde68a;
  --yellow-300: #fcd34d;
  --yellow-400: #fbbf24;
  --yellow-500: #f59e0b;
  --yellow-600: #d97706;
  --yellow-700: #b45309;
  --yellow-800: #92400e;
  --yellow-900: #78350f;
  --yellow-950: #451a03;
  /* Red */
  --red-50: #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;
  --red-950: #450a0a;
  /* Special Color */
  /* Only For BravoICT */
  --bravo-primary: #944447;
  --bravo-secondary: #651C1E;
}

/* common root properties */
:root {
  /* Text */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */
  --text-5xl: 3rem; /* 48px */
  --text-6xl: 3.75rem; /* 60px */
  /* Font Weight */
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
  /* Icon */
  /* Icon size can vary regardless of guide depending on the component's dependence */
  --icon-xs: 1rem; /* 16px */
  --icon-sm: 1.25rem; /* 20px */
  --icon-md: 1.5rem; /* 24px */
  --icon-lg: 2rem; /* 32px */
  --icon-xl: 3rem; /* 48px */
  /* ScrollBar */
  /* ScrollBar Set width 6px, aria 14px, padding right 8px */
  --scrollbar-size: 0.875rem; /* 14px */
  /* Button */
  /* Button Size */
  --btn-xs-height: 1.5rem; /* 24px */
  --btn-sm-height: 1.75rem; /* 28px */
  --btn-md-height: 2.125rem; /* 34px */
  --btn-lg-height: 2.5rem; /* 40px */
  --btn-xl-height: 3.25rem; /* 52px */
  /* Button Radius */
  --btn-common-radius: 0.438rem; /* 그대로 유지 */
  --btn-xs-radius: 0.313rem; /* 5px */
  --btn-sm-radius: 0.375rem; /* 6px */
  --btn-md-radius: 0.438rem; /* 7px */
  --btn-lg-radius: 0.563rem; /* 9px */
  --btn-xl-radius: 0.75rem; /* 12px */
  /* Label */
  /* Label Size */
  --label-xs-height: 1.25rem; /* 20px */
  --label-sm-height: 1.375rem; /* 22px */
  --label-md-height: 1.625rem; /* 26px */
  --label-lg-height: 1.875rem; /* 30px */
  --label-xl-height: 2.125rem; /* 34px */
  /* Label Radius */
  --label-xs-radius: 0.188rem; /* 3px */
  --label-sm-radius: 0.25rem; /* 4px */
  --label-md-radius: 0.313rem; /* 5px */
  --label-lg-radius: 0.438rem; /* 7px */
  --label-xl-radius: 0.438rem; /* 7px */
  /* Label Text */
  --label-text-xs: 0.625rem; /* 10px */
  --label-text-sm: 0.688rem; /* 11px */
  --label-text-md: 0.75rem; /* 12px */
  --label-text-lg: 0.875rem; /* 14px */
  --label-text-xl: 1rem; /* 16px */
  /* Label Dot Size */
  --label-dot-xs-height: 0.25rem; /* 4px */
  --label-dot-sm-height: 0.25rem; /* 4px */
  --label-dot-md-height: 0.313rem; /* 5px */
  --label-dot-lg-height: 0.375rem; /* 6px */
  --label-dot-xl-height: 0.375rem; /* 6px */
  /* Tag */
  --tag-xs-height: 1.25rem; /* 20px */
  --tag-sm-height: 1.375rem; /* 22px */
  --tag-md-height: 1.625rem; /* 26px */
  --tag-lg-height: 1.875rem; /* 30px */
  --tag-xl-height: 2.125rem; /* 34px */
  /* Tag Radius */
  --tag-xs-radius: 0.188rem; /* 3px */
  --tag-sm-radius: 0.25rem; /* 4px */
  --tag-md-radius: 0.313rem; /* 5px */
  --tag-lg-radius: 0.438rem; /* 7px */
  --tag-xl-radius: 0.438rem; /* 7px */
  /* Tag Gap */
  --tag-xs-gap: 0.25rem; /* 4px */
  --tag-sm-gap: 0.375rem; /* 6px */
  --tag-md-gap: 0.5rem; /* 8px */
  --tag-lg-gap: 0.625rem; /* 10px */
  --tag-xl-gap: 0.75rem; /* 12px */
  /* Tag Button */
  /* Tag Button Size */
  --tag-btn-xs-height: 0.875rem; /* 14px */
  --tag-btn-sm-height: 1.125rem; /* 18px */
  --tag-btn-md-height: 1.375rem; /* 22px */
  --tag-btn-lg-height: 1.625rem; /* 26px */
  --tag-btn-xl-height: 1.875rem; /* 30px */
  /* Tag Button Radius */
  --tag-btn-xs-radius: 0.188rem; /* 3px */
  --tag-btn-sm-radius: 0.25rem; /* 4px */
  --tag-btn-md-radius: 0.313rem; /* 5px */
  --tag-btn-lg-radius: 0.313rem; /* 5px */
  --tag-btn-xl-radius: 0.313rem; /* 5px */
  /* Tab */
  /* tab radius */
  --tab-xs-radius: 0.313rem; /* 5px */
  --tab-sm-radius: 0.375rem; /* 6px */
  --tab-md-radius: 0.438rem; /* 7px */
  --tab-lg-radius: 0.563rem; /* 9px */
  --tab-xl-radius: 0.75rem; /* 12px */
  /* Only for BravoICT */
  /* Page tab */
  --pagetab-height: 2.813rem; /* 45px */
  --pagetab-padding-x: 2.5rem; /* 40px */
  --pagetab-padding-y: 0.625rem; /* 10px */
  /* Animation */
  --speed-fastest: 0.1s;
  --speed-fast: 0.125s;
  --speed-basic: 0.3s;
  --speed-slow: 0.5s;
  --speed-slowest: 0.7s;
  /* ----------------------------- */
  /* Grid System Responsive */
  /* ----------------------------- */
  /* 하단 내용 작업 중 */
  --gridsystem-desktop-total-columns: 12;
  --gridsystem-desktop-cols-12: span 12;
  --gridsystem-desktop-cols-10: span 10;
  --gridsystem-desktop-cols-8: span 8;
  --gridsystem-desktop-cols-6: span 6;
  --gridsystem-desktop-cols-4: span 4;
  --gridsystem-desktop-cols-2: span 2;
  --gridsystem-mobile-total-columns: 12;
  --gridsystem-mobile-cols-12: ;
  --gridsystem-mobile-cols-10: ;
  --gridsystem-mobile-cols-8: ;
  --gridsystem-mobile-cols-6: ;
  --gridsystem-mobile-cols-4: ;
  --gridsystem-mobile-cols-2: ;
  /* ----------------------------- */
  /* Responsive Break Points */
  /* ----------------------------- */
  /* It same setting as tailwind css values */
  --breakpoints-sm: 640px; /* Layouts */
  --breakpoints-md: 768px; /* Layouts */
  --breakpoints-lg: 1024px; /* Layouts */
  --breakpoints-xl: 1280px; /* Layouts */
  --breakpoints-2xl: 1536px; /* Layouts */
  /* ----------------------------- */
  /* Layout Responsive */
  /* ----------------------------- */
  /* Layout */
  /* HEADER */
  --header-height: 60px; /* Layouts */
  --header-padding: 24px; /* Layouts */
  /* GNB */
  --gnb-extend-width: 240px; /* Layouts */
  --gnb-extend-side-padding: 14px; /* Layouts */
  --gnb-extend-top-padding: 10px; /* Layouts */
  --gnb-compressed-width: 50px; /* Layouts */
  --gnb-compressed-side-padding: 3px; /* Layouts */
  --gnb-compressed-top-padding: 15px; /* Layouts */
  /* CONTENTS */
  /* desktop */
  --contents-desktop-max-width: 1200px; /* Layouts */
  --contents-desktop-padding: 24px; /* Layouts */
  --contents-desktop-column: 72px; /* Layouts */
  --contents-desktop-gap: 24px; /* Layouts */
  /* mobile */
  --contents-mobile-gap: 12px; /* Layouts */
  --contents-mobile-outer-padding: 10px; /* Layouts */
  --contents-mobile-inner-padding: 20px; /* Layouts */
  --contents-mobile-padding: calc(var(--contents-mobile-outer-padding) + var(--contents-mobile-inner-padding));
  /* Center */
  /* Center Radius */
  --center-radius: 0.938rem; /* 15px */
  /* Center Padding */
  --centerbody-padding: 2.5rem; /* 40px */
  /* Center Bottom Padding */
  --centerbottom-padding: 0.625rem; /* 10px */
  /* Document */
  /* Document Padding */
  --document-inline-padding: 6rem; /* 96px */
  --document-block-padding: 5.313rem; /* 85px */
  /* Layer */
  /* Layer Safe Padding */
  --layer-safe-padding: 1.563rem; /* 25px */
  /* Layer Padding */
  --layer-padding: 2.5rem; /* 40px */
  /* Layer Radius */
  --layer-radius: 0.438rem; /* 7px */
  /* LayerHeader Height */
  --layerheader-height-sm: 2.125rem; /* 34px */
  --layerheader-height-md: 2.75rem; /* 44px */
  --layerheader-height-lg: 3.375rem; /* 54px */
  /* LayerHeader Left Padding */
  --layerheader-padding-left-sm: 1.25rem; /* 20px */
  --layerheader-padding-left-md: 1.25rem; /* 20px */
  --layerheader-padding-left-lg: 1.25rem; /* 20px */
  /* LayerHeader Right Padding */
  --layerheader-padding-right-sm: 0.313rem; /* 5px */
  --layerheader-padding-right-md: 0.313rem; /* 5px */
  --layerheader-padding-right-lg: 0.313rem; /* 5px */
  /* LayerHeader Title Gap */
  --layerheader-title-gap: 0.438rem; /* 7px */
  /* Side */
  /* Thumbnail */
  --thumb-xs-size: 2.25rem; /* 36px */
  --thumb-sm-size: 2.25rem; /* 36px */
  --thumb-md-size: 2.25rem; /* 36px */
  --thumb-lg-size: 2.5rem; /* 36px */
  --thumb-xl-size: 2.25rem; /* 36px */
  /* Thumbnail Radius */
  --thumb-xs-radius: 0.313rem; /* 5px */
  --thumb-sm-radius: 0.313rem; /* 5px */
  --thumb-md-radius: 0.313rem; /* 5px */
  --thumb-lg-radius: 0.313rem; /* 5px */
  --thumb-xl-radius: 0.313rem; /* 5px */
  /* Menu List */
  --menulist-padding: 0.25rem; /* 4px */
  /* Menu Item */
  /* Menu Item Size */
  --menuitem-xs-height: 1.75rem; /* 28px */
  --menuitem-sm-height: 2rem; /* 32px */
  --menuitem-md-height: 2.25rem; /* 36px */
  --menuitem-lg-height: 2.5rem; /* 40px */
  --menuitem-xl-height: 3.25rem; /* 52px */
  /* Menu Item Radius */
  --menuitem-xs-radius: 0.313rem; /* 5px */
  --menuitem-sm-radius: 0.313rem; /* 5px */
  --menuitem-md-radius: 0.375rem; /* 6px */
  --menuitem-lg-radius: 0.438rem; /* 7px */
  --menuitem-xl-radius: 0.5rem; /* 8px */
  /* Tooltip */
  --tooltip-margin: 0.15rem; /* 2.4px */
  /* help */
  --help-margin: 0.25rem; /* 4px */
  /* ----------------------------- */
  /* Input */
  /* ----------------------------- */
  /* Input Basics */
  /* Input Size */
  /* width */
  --input-normal-width: 200px;
  /* height */
  --input-md-height: 2.125rem; /* 34px */
  /* Input Radius */
  --input-md-radius: 0.438rem; /* 7px */
  /* Switch Basics */
  /* Switch Size */
  /* width */
  --switch-sm-width: 2.375rem; /* 38px */
  --switch-md-width: 3.125rem; /* 50px */
  --switch-lg-width: 3.75rem; /* 60px */
  /* height */
  --switch-sm-height: 1.5rem; /* 24px */
  --switch-md-height: 2rem; /* 32px */
  --switch-lg-height: 2.375rem; /* 38px */
  /* gap */
  --switch-sm-gap: 0.188rem; /* 3px */
  --switch-md-gap: 0.188rem; /* 3px */
  --switch-lg-gap: 0.25rem; /* 4px */
  /* ----------------------------- */
  /* Callout */
  /* ----------------------------- */
  /* Callout Basics */
  --callout-radius: 0.438rem; /* 7px */
  /* Padding */
  --callout-padding: 0.938rem; /* 15px */
}

/* ----------------------------- */
/* z-index Properties */
/* ----------------------------- */
/*
  Design Guidelines
  Version: 1.0
  Author: Jiyeol Park
  Company: ISTN
  Created: 2025-04-03
*/
/*
  Design Guidelines
  Version: 1.0
  Author: Jiyeol Park
  Company: ISTN
  Created: 2025-04-03
*/
/* prepare for Dart Sass 2.0.0 syntax */
/* ----------------------------- */
/* Components Properties */
/* ----------------------------- */
/* Icon Properties */
/* naming rule : iconfilename */
/* icon sample : <i data-icon="download"></i> */
/* "data-icon" name is svg icon file name */
/* ".icon-asset" elements are statically represented, not controlled by CSS */
/* icon ratio fix (common) */
:is(button, div)[class*=btn-] img,
span[class*=label-] img,
ul[class*=menulist] img {
  width: auto;
  height: 100%;
  aspect-ratio: 1/1;
}

div:is([class*=-textselect], [class*=-icontextselect]) button:last-of-type svg {
  width: 100%;
}

/* icon size */
svg[class*=icon-] {
  width: auto;
}

svg.icon-xs {
  height: var(--icon-xs);
}

svg.icon-sm {
  height: var(--icon-sm);
}

svg.icon-md {
  height: var(--icon-md);
}

svg.icon-lg {
  height: var(--icon-lg);
}

svg.icon-xl {
  height: var(--icon-xl);
}

/* Separate Settings */
/* dropdown icon works */
button[class*=btn-][aria-expanded=false] .dropdown-icon {
  rotate: 0deg;
  transition: rotate var(--speed-basic) ease;
}

button[class*=btn-][aria-expanded=true] .dropdown-icon {
  rotate: -180deg;
  transition: rotate var(--speed-basic) ease;
}

/* ----------------------------- */
/* Button Properties */
/* ----------------------------- */
/* naming rule : btn-xs-mono-solid-text */
/* sample text : <button type="button" class="btn-xs-mono-solid-text">download</button> */
/* sample textselect : <button type="button" class="btn-xs-mono-solid-textselect">download</button> */
/* sample texticon : <button type="button" class="btn-xs-mono-solid-texticon">download</button> */
/* sample icon : <button type="button" class="btn-xs-mono-solid-icon"><i data-icon="download"></i></button> */
/* sample icontext : <button type="button" class="btn-xs-mono-solid-icontext"><i data-icon="download"></i>download</button> */
/* sample icontextselect : <button type="button" class="btn-xs-mono-solid-icontextselect"><i data-icon="download"></i>download</button> */
/* sample icontexticon : <button type="button" class="btn-xs-mono-solid-icontexticon">download</button> */
/* sample dots : <button type="button" class="btn-dots-mono"><button> */
/* dots must wrapping <div class="navigator-dots">dots</div> */
/* if want stretched -> btn-xs-mono-solid-text.stretched */
/* Button basic */
button[class*=btn-] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

button[class*=btn-] span {
  text-wrap: nowrap;
  word-break: keep-all;
}

button[class*=btn-], div[class*=btn-] button {
  font-family: "Pretendard";
  font-weight: var(--font-medium);
  transition: all var(--speed-fast) ease, box-shadow var(--speed-basic) ease;
}

/* Button Text Size */
button[class*=btn-xs-] {
  border-radius: var(--btn-xs-radius);
  gap: 0.188rem; /* 3px */
  padding-inline: 0.625rem; /* 10px */
  height: var(--btn-xs-height);
  font-size: var(--text-xs);
}

button[class*=btn-sm-] {
  border-radius: var(--btn-sm-radius);
  gap: 0.25rem; /* 4px */
  padding-inline: 0.75rem; /* 12px */
  height: var(--btn-sm-height);
  font-size: var(--text-xs);
}

button[class*=btn-md-] {
  border-radius: var(--btn-md-radius);
  gap: 0.313rem; /* 5px */
  padding-inline: 1rem; /* 16px */
  height: var(--btn-md-height);
  font-size: var(--text-sm);
}

button[class*=btn-lg-] {
  border-radius: var(--btn-lg-radius);
  gap: 0.375rem; /* 6px */
  padding-inline: 1.25rem; /* 20px */
  height: var(--btn-lg-height);
  font-size: var(--text-base);
}

button[class*=btn-xl-] {
  border-radius: var(--btn-xl-radius);
  gap: 0.438rem; /* 7px */
  padding-inline: 1.625rem; /* 26px */
  height: var(--btn-xl-height);
  font-size: var(--text-lg);
}

/* Button Combination Types */
div:is([class*=btn-xs-], [class*=btn-sm-], [class*=btn-md-], [class*=btn-lg-], [class*=btn-xl-]) {
  display: inline-flex;
  gap: 0;
}

div[class*=btn-xs-] button {
  height: var(--btn-xs-height);
  font-size: var(--text-xs);
}

div[class*=btn-sm-] button {
  height: var(--btn-sm-height);
  font-size: var(--text-xs);
}

div[class*=btn-md-] button {
  height: var(--btn-md-height);
  font-size: var(--text-sm);
}

div[class*=btn-lg-] button {
  height: var(--btn-lg-height);
  font-size: var(--text-base);
}

div[class*=btn-xl-] button {
  height: var(--btn-xl-height);
  font-size: var(--text-lg);
}

/* Button Types Structure */
button[class*=-icon][class*=btn-xs-] {
  padding: 0.25rem; /* 4px */
}

button[class*=-icon][class*=btn-sm-] {
  padding: 0.313rem; /* 5px */
}

button[class*=-icon][class*=btn-md-] {
  padding: 0.438rem; /* 7px */
}

button[class*=-icon][class*=btn-lg-] {
  padding: 0.438rem; /* 7px */
}

button[class*=-icon][class*=btn-xl-] {
  padding: 0.625rem; /* 10px */
}

button[class*=-icontext][class*=btn-xs-] {
  padding: 0.313rem 0.625rem 0.313rem 0.5rem; /* 5px 10px 5px 8px */
}

button[class*=-icontext][class*=btn-sm-] {
  padding: 0.375rem 0.75rem 0.375rem 0.625rem; /* 6px 12px 6px 10px */
}

button[class*=-icontext][class*=btn-md-] {
  padding: 0.5rem 0.875rem 0.5rem 0.75rem; /* 8px 14px 8px 12px */
}

button[class*=-icontext][class*=btn-lg-] {
  padding: 0.563rem 1.25rem 0.563rem 1rem; /* 9px 20px 9px 16px */
}

button[class*=-icontext][class*=btn-xl-] {
  padding: 0.813rem 1.625rem 0.813rem 1.25rem; /* 13px 26px 13px 20px */
}

button[class*=-texticon][class*=btn-xs-] {
  padding: 0.313rem 0.5rem 0.313rem 0.625rem; /* 5px 8px 5px 10px */
}

button[class*=-texticon][class*=btn-sm-] {
  padding: 0.375rem 0.625rem 0.375rem 0.75rem; /* 6px 10px 6px 12px */
}

button[class*=-texticon][class*=btn-md-] {
  padding: 0.5rem 0.75rem 0.5rem 0.875rem; /* 8px 12px 8px 14px */
}

button[class*=-texticon][class*=btn-lg-] {
  padding: 0.563rem 1rem 0.563rem 1.25rem; /* 9px 16px 9px 20px */
}

button[class*=-texticon][class*=btn-xl-] {
  padding: 0.813rem 1.25rem 0.813rem 1.625rem; /* 13px 20px 13px 26px */
}

button[class*=-icontexticon][class*=btn-xs-] {
  padding: 0.313rem 0.375rem; /* 5px 6px 5px 6px */
}

button[class*=-icontexticon][class*=btn-sm-] {
  padding: 0.375rem 0.5rem; /* 6px 8px 6px 8px */
}

button[class*=-icontexticon][class*=btn-md-] {
  padding: 0.5rem 0.625rem; /* 8px 10px 8px 10px */
}

button[class*=-icontexticon][class*=btn-lg-] {
  padding: 0.563rem 0.875rem; /* 9px 14px 9px 14px */
}

button[class*=-icontexticon][class*=btn-xl-] {
  padding: 0.813rem 1.125rem; /* 13px 18px 13px 18px */
}

div[class*=-textselect][class*=btn-xs-] button:first-of-type {
  padding-inline: 0.625rem; /* 10px */
  border-radius: var(--btn-xs-radius) 0 0 var(--btn-xs-radius);
}

div[class*=-textselect][class*=btn-sm-] button:first-of-type {
  padding-inline: 0.75rem; /* 12px */
  border-radius: var(--btn-sm-radius) 0 0 var(--btn-sm-radius);
}

div[class*=-textselect][class*=btn-md-] button:first-of-type {
  padding-inline: 1rem; /* 16px */
  border-radius: var(--btn-md-radius) 0 0 var(--btn-md-radius);
}

div[class*=-textselect][class*=btn-lg-] button:first-of-type {
  padding-inline: 1.25rem; /* 20px */
  border-radius: var(--btn-lg-radius) 0 0 var(--btn-lg-radius);
}

div[class*=-textselect][class*=btn-xl-] button:first-of-type {
  padding-inline: 1.625rem; /* 26px */
  border-radius: var(--btn-xl-radius) 0 0 var(--btn-xl-radius);
}

div[class*=-icontextselect] button:first-of-type {
  display: flex;
  align-items: center;
}

div[class*=-icontextselect][class*=btn-xs-] button:first-of-type {
  gap: 0.188rem; /* 3px */
  padding: 0.313rem 0.625rem; /* 5px 10px */
  border-radius: var(--btn-xs-radius) 0 0 var(--btn-xs-radius);
}

div[class*=-icontextselect][class*=btn-sm-] button:first-of-type {
  gap: 0.25rem; /* 4px */
  padding: 0.375rem 0.75rem; /* 6px 12px */
  border-radius: var(--btn-sm-radius) 0 0 var(--btn-sm-radius);
}

div[class*=-icontextselect][class*=btn-md-] button:first-of-type {
  gap: 0.313rem; /* 5px */
  padding: 0.5rem 0.875rem; /* 8px 14px */
  border-radius: var(--btn-md-radius) 0 0 var(--btn-md-radius);
}

div[class*=-icontextselect][class*=btn-lg-] button:first-of-type {
  gap: 0.375rem; /* 6px */
  padding: 0.563rem 1.25rem; /* 9px 20px */
  border-radius: var(--btn-lg-radius) 0 0 var(--btn-lg-radius);
}

div[class*=-icontextselect][class*=btn-xl-] button:first-of-type {
  gap: 0.438rem; /* 7px */
  padding: 0.813rem 1.625rem; /* 13px 26px */
  border-radius: var(--btn-xl-radius) 0 0 var(--btn-xl-radius);
}

div:is([class*=-textselect], [class*=-icontextselect])[class*=btn-xs-] button:last-of-type {
  padding: 0;
  width: 0.875rem; /* 14px */
  border-radius: 0 var(--btn-xs-radius) var(--btn-xs-radius) 0;
}

div:is([class*=-textselect], [class*=-icontextselect])[class*=btn-sm-] button:last-of-type {
  padding: 0;
  width: 1rem; /* 16px */
  border-radius: 0 var(--btn-sm-radius) var(--btn-sm-radius) 0;
}

div:is([class*=-textselect], [class*=-icontextselect])[class*=btn-md-] button:last-of-type {
  padding: 0;
  width: 1.125rem; /* 18px */
  border-radius: 0 var(--btn-md-radius) var(--btn-md-radius) 0;
}

div:is([class*=-textselect], [class*=-icontextselect])[class*=btn-lg-] button:last-of-type {
  padding: 0;
  width: 1.375rem; /* 22px */
  border-radius: 0 var(--btn-lg-radius) var(--btn-lg-radius) 0;
}

div:is([class*=-textselect], [class*=-icontextselect])[class*=btn-xl-] button:last-of-type {
  padding: 0;
  width: 1.5rem; /* 24px */
  border-radius: 0 var(--btn-xl-radius) var(--btn-xl-radius) 0;
}

/* Button Color (Normal) */
/* default */
button[class*=btn-], div[class*=btn-] button {
  border: 0;
  outline: none;
  box-shadow: 0 0 0 0 transparent;
  transition: var(--speed-fast) ease;
}

/* variants */
button[class*=-mono-ghost], div[class*=-mono-ghost] button {
  background-color: transparent;
  color: var(--neutral-opacity-700);
}

button[class*=-mono-solid], div[class*=-mono-solid] button {
  background-color: var(--neutral-opacity-200);
  color: var(--neutral-opacity-700);
}

button[class*=-mono-outline], div[class*=-mono-outline] button {
  background-color: var(--white);
  color: var(--neutral-opacity-700);
  outline: 1px solid var(--neutral-opacity-300);
}

button[class*=-slate-ghost], div[class*=-slate-ghost] button {
  background-color: transparent;
  color: var(--slate-600);
}

button[class*=-slate-solid], div[class*=-slate-solid] button {
  background-color: var(--slate-600);
  color: var(--white);
}

button[class*=-slate-outline], div[class*=-slate-outline] button {
  background-color: var(--white);
  color: var(--slate-600);
  outline: 1px solid var(--slate-300);
}

button[class*=-blue-solid], div[class*=-blue-solid] button {
  background-color: var(--blue-600);
  color: white;
}

button[class*=-blue-outline], div[class*=-blue-outline] button {
  background-color: var(--white);
  color: var(--blue-600);
  outline: 1px solid var(--blue-300);
}

button[class*=-red-solid], div[class*=-red-solid] button {
  background-color: var(--red-600);
  color: white;
}

button[class*=-red-outline], div[class*=-red-outline] button {
  background-color: var(--white);
  color: var(--red-600);
  outline: 1px solid var(--red-300);
}

button[class*=-green-solid], div[class*=-green-solid] button {
  background-color: var(--green-600);
  color: white;
}

button[class*=-green-outline], div[class*=-green-outline] button {
  background-color: var(--white);
  color: var(--green-600);
  outline: 1px solid var(--green-300);
}

button[class*=-indigo-solid], div[class*=-indigo-solid] button {
  background-color: var(--indigo-600);
  color: white;
}

button[class*=-indigo-outline], div[class*=-indigo-outline] button {
  background-color: var(--white);
  color: var(--indigo-600);
  outline: 1px solid var(--indigo-300);
}

/* svg icon color variants*/
button[class*=-mono-ghost] svg, div[class*=-mono-ghost] button svg {
  fill: var(--neutral-opacity-700);
}

button[class*=-mono-solid] svg, div[class*=-mono-solid] button svg {
  fill: var(--neutral-opacity-700);
}

button[class*=-mono-outline] svg, div[class*=-mono-outline] button svg {
  fill: var(--neutral-opacity-700);
}

button[class*=-slate-ghost] svg, div[class*=-slate-ghost] button svg {
  fill: var(--slate-600);
}

button[class*=-slate-solid] svg, div[class*=-slate-solid] button svg {
  fill: var(--white);
}

button[class*=-slate-outline] svg, div[class*=-slate-outline] button svg {
  fill: var(--slate-600);
}

button[class*=-blue-solid] svg, div[class*=-blue-solid] button svg {
  fill: white;
}

button[class*=-blue-outline] svg, div[class*=-blue-outline] button svg {
  fill: var(--blue-600);
}

button[class*=-red-solid] svg, div[class*=-red-solid] button svg {
  fill: white;
}

button[class*=-red-outline] svg, div[class*=-red-outline] button svg {
  fill: var(--red-600);
}

button[class*=-green-solid] svg, div[class*=-green-solid] button svg {
  fill: white;
}

button[class*=-green-outline] svg, div[class*=-green-outline] button svg {
  fill: var(--green-600);
}

button[class*=-indigo-solid] svg, div[class*=-indigo-solid] button svg {
  fill: white;
}

button[class*=-indigo-outline] svg, div[class*=-indigo-outline] button svg {
  fill: var(--indigo-600);
}

/* Button onmouse Interactions */
/* hover */
button[class*=-mono-ghost]:hover, div[class*=-mono-ghost] button:hover {
  background-color: var(--neutral-opacity-100);
}

button[class*=-mono-solid]:hover, div[class*=-mono-solid] button:hover {
  background-color: var(--neutral-opacity-300);
}

button[class*=-mono-outline]:hover, div[class*=-mono-outline] button:hover {
  background-color: var(--neutral-opacity-100);
  outline: 1px solid var(--neutral-opacity-700);
}

button[class*=-slate-ghost]:hover, div[class*=-slate-ghost] button:hover {
  background-color: var(--slate-100);
}

button[class*=-slate-solid]:hover, div[class*=-slate-solid] button:hover {
  background-color: var(--slate-700);
}

button[class*=-slate-outline]:hover, div[class*=-slate-outline] button:hover {
  background-color: var(--slate-50);
  outline: 1px solid var(--slate-400);
}

button[class*=-blue-solid]:hover, div[class*=-blue-solid] button:hover {
  background-color: var(--blue-700);
}

button[class*=-blue-outline]:hover, div[class*=-blue-outline] button:hover {
  background-color: var(--blue-50);
  outline: 1px solid var(--blue-400);
}

button[class*=-red-solid]:hover, div[class*=-red-solid] button:hover {
  background-color: var(--red-700);
}

button[class*=-red-outline]:hover, div[class*=-red-outline] button:hover {
  background-color: var(--red-50);
  outline: 1px solid var(--red-400);
}

button[class*=-green-solid]:hover, div[class*=-green-solid] button:hover {
  background-color: var(--green-700);
}

button[class*=-green-outline]:hover, div[class*=-green-outline] button:hover {
  background-color: var(--green-50);
  outline: 1px solid var(--green-400);
}

button[class*=-indigo-solid]:hover, div[class*=-indigo-solid] button:hover {
  background-color: var(--indigo-700);
}

button[class*=-indigo-outline]:hover, div[class*=-indigo-outline] button:hover {
  background-color: var(--indigo-50);
  outline: 1px solid var(--indigo-400);
}

/* focus-visible */
button[class*=btn-]:focus-visible, div[class*=btn-] button:focus-visible {
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--neutral-solid-900);
}

button[class*=-mono-ghost]:focus-visible, div[class*=-mono-ghost] button:focus-visible {
  background-color: var(--neutral-opacity-100);
}

button[class*=-mono-solid]:focus-visible, div[class*=-mono-solid] button:focus-visible {
  background-color: var(--neutral-opacity-300);
}

button[class*=-mono-outline]:focus-visible, div[class*=-mono-outline] button:focus-visible {
  background-color: var(--neutral-opacity-100);
}

button[class*=-slate-ghost]:focus-visible, div[class*=-slate-ghost] button:focus-visible {
  background-color: var(--slate-100);
}

button[class*=-slate-solid]:focus-visible, div[class*=-slate-solid] button:focus-visible {
  background-color: var(--slate-700);
}

button[class*=-slate-outline]:focus-visible, div[class*=-slate-outline] button:focus-visible {
  background-color: var(--slate-50);
}

button[class*=-blue-solid]:focus-visible, div[class*=-blue-solid] button:focus-visible {
  background-color: var(--blue-700);
}

button[class*=-blue-outline]:focus-visible, div[class*=-blue-outline] button:focus-visible {
  background-color: var(--blue-50);
}

button[class*=-red-solid]:focus-visible, div[class*=-red-solid] button:focus-visible {
  background-color: var(--red-700);
}

button[class*=-red-outline]:focus-visible, div[class*=-red-outline] button:focus-visible {
  background-color: var(--red-50);
}

button[class*=-green-solid]:focus-visible, div[class*=-green-solid] button:focus-visible {
  background-color: var(--green-700);
}

button[class*=-green-outline]:focus-visible, div[class*=-green-outline] button:focus-visible {
  background-color: var(--green-50);
}

button[class*=-indigo-solid]:focus-visible, div[class*=-indigo-solid] button:focus-visible {
  background-color: var(--indigo-700);
}

button[class*=-indigo-outline]:focus-visible, div[class*=-indigo-outline] button:focus-visible {
  background-color: var(--indigo-50);
}

/* selected (only for button, no div) */
button[class*=-mono-ghost]:is([aria-expanded=true], [aria-selected=true], [aria-pressed=true]) {
  background-color: var(--neutral-opacity-200);
}

button[class*=-mono-solid]:is([aria-expanded=true], [aria-selected=true], [aria-pressed=true]) {
  background-color: var(--neutral-opacity-400);
  color: var(--neutral-opacity-900);
}

button[class*=-mono-outline]:is([aria-expanded=true], [aria-selected=true], [aria-pressed=true]) {
  background-color: var(--neutral-opacity-200);
  outline-color: var(--neutral-opacity-700);
}

button[class*=-slate-ghost]:is([aria-expanded=true], [aria-selected=true], [aria-pressed=true]) {
  background-color: var(--slate-200);
}

button[class*=-slate-solid]:is([aria-expanded=true], [aria-selected=true], [aria-pressed=true]) {
  background-color: var(--slate-900);
}

button[class*=-slate-outline]:is([aria-expanded=true], [aria-selected=true], [aria-pressed=true]) {
  background-color: var(--slate-200);
  outline-color: var(--slate-600);
}

button[class*=-blue-solid]:is([aria-expanded=true], [aria-selected=true], [aria-pressed=true]) {
  background-color: var(--blue-900);
}

button[class*=-blue-outline]:is([aria-expanded=true], [aria-selected=true], [aria-pressed=true]) {
  background-color: var(--blue-200);
  outline-color: var(--blue-600);
}

button[class*=-red-solid]:is([aria-expanded=true], [aria-selected=true], [aria-pressed=true]) {
  background-color: var(--red-900);
}

button[class*=-red-outline]:is([aria-expanded=true], [aria-selected=true], [aria-pressed=true]) {
  background-color: var(--red-200);
  outline-color: var(--red-600);
}

button[class*=-green-solid]:is([aria-expanded=true], [aria-selected=true], [aria-pressed=true]) {
  background-color: var(--green-900);
}

button[class*=-green-outline]:is([aria-expanded=true], [aria-selected=true], [aria-pressed=true]) {
  background-color: var(--green-200);
  outline-color: var(--green-600);
}

button[class*=-indigo-solid]:is([aria-expanded=true], [aria-selected=true], [aria-pressed=true]) {
  background-color: var(--indigo-900);
}

button[class*=-indigo-outline]:is([aria-expanded=true], [aria-selected=true], [aria-pressed=true]) {
  background-color: var(--indigo-200);
  outline-color: var(--indigo-600);
}

/* disabled */
button[class*=-mono-ghost]:disabled, div[class*=-mono-ghost] button:disabled {
  background-color: transparent;
  color: var(--neutral-opacity-400);
}

button[class*=-mono-solid]:disabled, div[class*=-mono-solid] button:disabled {
  background-color: var(--neutral-opacity-100);
  color: var(--neutral-opacity-400);
}

button[class*=-mono-ghost]:disabled svg, div[class*=-mono-ghost] button:disabled svg,
button[class*=-mono-solid]:disabled svg, div[class*=-mono-solid] button:disabled svg {
  fill: var(--neutral-opacity-400);
}

button[class*=-mono-outline]:disabled, div[class*=-mono-outline] button:disabled {
  background-color: transparent;
  color: var(--neutral-opacity-300);
  outline: var(--neutral-opacity-300);
}

button[class*=-mono-outline]:disabled svg, div[class*=-mono-outline] button:disabled svg {
  fill: var(--neutral-opacity-300);
}

button[class*=-slate-ghost]:disabled, div[class*=-slate-ghost] button:disabled {
  background-color: transparent;
  color: var(--slate-400);
}

button[class*=-slate-ghost]:disabled svg, div[class*=-slate-ghost] button:disabled svg {
  fill: var(--slate-400);
}

button[class*=-slate-solid]:disabled, div[class*=-slate-solid] button:disabled {
  background-color: var(--slate-50);
  color: var(--slate-300);
}

button[class*=-slate-solid]:disabled svg, div[class*=-slate-solid] button:disabled svg {
  fill: var(--slate-300);
}

button[class*=-slate-outline]:disabled, div[class*=-slate-outline] button:disabled {
  background-color: transparent;
  color: var(--slate-300);
  outline: var(--slate-300);
}

button[class*=-slate-outline]:disabled svg, div[class*=-slate-outline] button:disabled svg {
  fill: var(--slate-300);
}

button[class*=-blue-solid]:disabled, div[class*=-blue-solid] button:disabled {
  background-color: var(--blue-50);
  color: var(--blue-300);
}

button[class*=-blue-outline]:disabled, div[class*=-blue-outline] button:disabled {
  background-color: transparent;
  color: var(--blue-300);
  outline: var(--blue-300);
}

button[class*=-blue-solid]:disabled svg, div[class*=-blue-solid] button:disabled svg,
button[class*=-blue-outline]:disabled svg, div[class*=-blue-outline] button:disabled svg {
  fill: var(--blue-300);
}

button[class*=-red-solid]:disabled, div[class*=-red-solid] button:disabled {
  background-color: var(--red-50);
  color: var(--red-300);
}

button[class*=-red-outline]:disabled, div[class*=-red-outline] button:disabled {
  background-color: transparent;
  color: var(--red-300);
  outline: var(--red-300);
}

button[class*=-red-solid]:disabled svg, div[class*=-red-solid] button:disabled svg,
button[class*=-red-outline]:disabled svg, div[class*=-red-outline] button:disabled svg {
  fill: var(--red-300);
}

button[class*=-green-solid]:disabled, div[class*=-green-solid] button:disabled {
  background-color: var(--green-50);
  color: var(--green-300);
}

button[class*=-green-outline]:disabled, div[class*=-green-outline] button:disabled {
  background-color: transparent;
  color: var(--green-300);
  outline: var(--green-300);
}

button[class*=-green-solid]:disabled svg, div[class*=-green-solid] button:disabled svg,
button[class*=-green-outline]:disabled svg, div[class*=-green-outline] button:disabled svg {
  fill: var(--green-300);
}

button[class*=-indigo-solid]:disabled, div[class*=-indigo-solid] button:disabled {
  background-color: var(--indigo-50);
  color: var(--indigo-300);
}

button[class*=-indigo-outline]:disabled, div[class*=-indigo-outline] button:disabled {
  background-color: transparent;
  color: var(--indigo-300);
  outline: var(--indigo-300);
}

button[class*=-indigo-solid]:disabled svg, div[class*=-indigo-solid] button:disabled svg,
button[class*=-indigo-outline]:disabled svg, div[class*=-indigo-outline] button:disabled svg {
  fill: var(--indigo-300);
}

/* dots */
button[class*=btn-dots-] {
  width: 0.438rem; /* 7px */
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--neutral-opacity-200);
  border: 0;
  outline: none;
  box-shadow: 0 0 0 0 transparent;
  transition: var(--speed-fast) ease;
}

button[class*=btn-dots-]:hover {
  background-color: var(--neutral-opacity-300);
}

button[class*=btn-dots-]:focus-visible {
  z-index: 999;
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--neutral-solid-900);
}

/* dots color variants */
button[class*=btn-dots-][class*=-mono][aria-selected=true] {
  background-color: var(--neutral-opacity-400);
}

button[class*=btn-dots-][class*=-slate][aria-selected=true] {
  background-color: var(--slate-600);
}

button[class*=btn-dots-][class*=-blue][aria-selected=true] {
  background-color: var(--blue-600);
}

button[class*=btn-dots-][class*=-red][aria-selected=true] {
  background-color: var(--red-600);
}

button[class*=btn-dots-][class*=-green][aria-selected=true] {
  background-color: var(--green-600);
}

button[class*=btn-dots-][class*=-indigo][aria-selected=true] {
  background-color: var(--indigo-600);
}

/* dots list default */
.navigator-dots {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.438rem; /* 7px */
}

/* stretched */
button[class*=btn-].stretched {
  width: 100%;
}

/* ----------------------------- */
/* Tab Properties */
/* ----------------------------- */
/* naming rule : tab-md-mono-solid */
/* Tab switch sample code : <div role="tablist" class="tab-md-mono-normal"><button type="button" role="tab" id="tab-01" aria-controls="panel-01" aria-selected="false">one</button></div> */
/* Tab connected contents code : <div id="panel-01" aria-labelledby="tab-01"></div>  */
/* if want stretched -> tab-md-mono-solid.stretched */
/* do not use icon in tab */
/* Tab Basic */
div[class*=tab-] {
  display: flex;
  flex-direction: row;
}

div[class*=tab-] > button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  outline: transparent;
  font-family: "Pretendard";
  transition: all var(--speed-fast) ease, box-shadow var(--speed-basic) ease;
}

/* Tab Part Text Size */
/* normal, onlytext */
div[class*=tab-xs]:is([class*=-normal], [class*=-nonbg]) button {
  border-radius: var(--tab-sm-radius);
  padding-inline: 0.625rem; /* 10px */
  height: 1.5rem; /* 24px */
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

div[class*=tab-sm]:is([class*=-normal], [class*=-nonbg]) button {
  border-radius: var(--tab-sm-radius);
  padding-inline: 0.75rem; /* 12px */
  height: 1.75rem; /* 28px */
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
}

div[class*=tab-md]:is([class*=-normal], [class*=-nonbg]) button {
  border-radius: var(--tab-md-radius);
  padding-inline: 1rem; /* 16px */
  height: 2.125rem; /* 34px */
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

div[class*=tab-lg]:is([class*=-normal], [class*=-nonbg]) button {
  border-radius: var(--tab-lg-radius);
  padding-inline: 1.25rem; /* 20px */
  height: 2.5rem; /* 40px */
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

div[class*=tab-xl]:is([class*=-normal], [class*=-nonbg]) button {
  border-radius: var(--tab-xl-radius);
  padding-inline: 1.625rem; /* 26px */
  height: 3.25rem; /* 52px */
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

/* underline */
div[class*=tab-xs][class*=-underline] button {
  padding-inline: 0.563rem; /* 9px */
  height: 2.875rem; /* 46px */
  font-size: var(--text-base);
  font-weight: var(--font-bold);
}

div[class*=tab-sm][class*=-underline] button {
  padding-inline: 0.625rem; /* 10px */
  height: 3.125rem; /* 50px */
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

div[class*=tab-md][class*=-underline] button {
  padding-inline: 0.688rem; /* 11px */
  height: 3.5rem; /* 56px */
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

div[class*=tab-lg][class*=-underline] button {
  padding-inline: 0.75rem; /* 12px */
  height: 4.125rem; /* 66px */
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
}

div[class*=tab-xl][class*=-underline] button {
  padding-inline: 1rem; /* 16px */
  height: 5rem; /* 80px */
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
}

/* onlytext */
div[class*=tab-xs][class*=-onlytext] button {
  border-radius: var(--tab-xs-radius);
  padding-inline: 0.563rem; /* 9px */
  height: 2.125rem; /* 34px */
  font-size: var(--text-base);
  font-weight: var(--font-bold);
}

div[class*=tab-sm][class*=-onlytext] button {
  border-radius: var(--tab-sm-radius);
  padding-inline: 0.625rem; /* 10px */
  height: 2.375rem; /* 38px */
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
}

div[class*=tab-md][class*=-onlytext] button {
  border-radius: var(--tab-md-radius);
  padding-inline: 0.688rem; /* 11px */
  height: 2.625rem; /* 42px */
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

div[class*=tab-lg][class*=-onlytext] button {
  border-radius: var(--tab-lg-radius);
  padding-inline: 0.75rem; /* 12px */
  height: 2.875rem; /* 46px */
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
}

div[class*=tab-xl][class*=-onlytext] button {
  border-radius: var(--tab-xl-radius);
  padding-inline: 1rem; /* 16px */
  height: 3.375rem; /* 54px */
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
}

/* Tab Color */
/* default */
div[class*=tab-] button[aria-selected=false] {
  background-color: transparent;
  color: var(--neutral-opacity-400);
}

div[class*=tab-]:not([class*=-normal]) button[aria-selected=false] {
  background-color: transparent;
  color: var(--neutral-opacity-300);
}

div[class*=tab-][class*=-underline] button[aria-selected=false] {
  border-bottom: 2px solid transparent;
}

/* hover */
div[class*=tab-] button[aria-selected=false]:hover {
  color: var(--neutral-opacity-600);
}

div[class*=tab-]:not([class*=-normal]) button[aria-selected=false]:hover {
  color: var(--neutral-opacity-400);
}

/* focus-visible */
div[class*=tab-] button[aria-selected]:focus-visible {
  background-color: var(--neutral-opacity-50);
  color: var(--neutral-opacity-600);
  z-index: 999;
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--neutral-solid-900);
}

/* selected color variants */
div[class*=tab-] button {
  box-shadow: none;
}

div[class*=tab-]:not([class*=-underline]) button[aria-selected=true] {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

div[class*=tab-]:is([class*=-mono-normal], [class*=-mono-nonbg]) button[aria-selected=true] {
  background-color: var(--white);
  color: var(--neutral-opacity-700);
}

div[class*=tab-][class*=-mono-underline] button[aria-selected=true] {
  color: var(--neutral-opacity-700);
  border-bottom: 2px solid var(--black);
}

div[class*=tab-][class*=-mono-onlytext] button[aria-selected=true] {
  color: var(--neutral-opacity-400);
}

div[class*=tab-]:is([class*=-slate-normal], [class*=-slate-nonbg]) button[aria-selected=true] {
  background-color: var(--slate-600);
  color: var(--white);
}

div[class*=tab-][class*=-slate-underline] button[aria-selected=true] {
  color: var(--slate-700);
  border-bottom: 2px solid var(--slate-700);
}

div[class*=tab-][class*=-slate-onlytext] button[aria-selected=true] {
  color: var(--slate-700);
}

div[class*=tab-]:is([class*=-blue-normal], [class*=-blue-nonbg]) button[aria-selected=true] {
  background-color: var(--blue-600);
  color: var(--white);
}

div[class*=tab-][class*=-blue-underline] button[aria-selected=true] {
  color: var(--blue-700);
  border-bottom: 2px solid var(--blue-700);
}

div[class*=tab-][class*=-blue-onlytext] button[aria-selected=true] {
  color: var(--blue-700);
}

div[class*=tab-]:is([class*=-red-normal], [class*=-red-nonbg]) button[aria-selected=true] {
  background-color: var(--red-600);
  color: var(--white);
}

div[class*=tab-][class*=-red-underline] button[aria-selected=true] {
  color: var(--red-700);
  border-bottom: 2px solid var(--red-700);
}

div[class*=tab-][class*=-red-onlytext] button[aria-selected=true] {
  color: var(--red-700);
}

div[class*=tab-]:is([class*=-green-normal], [class*=-green-nonbg]) button[aria-selected=true] {
  background-color: var(--green-600);
  color: var(--white);
}

div[class*=tab-][class*=-green-underline] button[aria-selected=true] {
  color: var(--green-700);
  border-bottom: 2px solid var(--green-700);
}

div[class*=tab-][class*=-green-onlytext] button[aria-selected=true] {
  color: var(--green-700);
}

div[class*=tab-]:is([class*=-indigo-normal], [class*=-indigo-nonbg]) button[aria-selected=true] {
  background-color: var(--indigo-600);
  color: var(--white);
}

div[class*=tab-][class*=-indigo-underline] button[aria-selected=true] {
  color: var(--indigo-700);
  border-bottom: 2px solid var(--indigo-700);
}

div[class*=tab-][class*=-indigo-onlytext] button[aria-selected=true] {
  color: var(--indigo-700);
}

/* Tab List Structure */
div[class*=tab][class*=-normal] {
  background-color: var(--neutral-solid-100);
  border-radius: 0.438rem; /* 7px */
  padding: 0.313rem; /* 5px */
}

div[class*=tab-xs][class*=-only-text] {
  gap: 0.5rem; /* 8px */
}

div[class*=tab-sm][class*=-only-text] {
  gap: 0.625rem; /* 10px */
}

div[class*=tab-md][class*=-only-text] {
  gap: 0.75rem; /* 12px */
}

div[class*=tab-lg][class*=-only-text] {
  gap: 0.938rem; /* 15px */
}

div[class*=tab-xl][class*=-only-text] {
  gap: 1.125rem; /* 18px */
}

/* Tab Stretched */
div[class*=tab-].stretched {
  width: 100%;
}

div[class*=tab-].stretched > button {
  flex: 1;
}

/* Pagetab */
/* This is only for BravoICT */
div.pagetab-container {
  flex-direction: column;
}

div.pagetab {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  width: 100%;
  padding-inline: var(--contents-desktop-padding);
  height: var(--pagetab-height);
  background-color: var(--neutral-solid-200);
  box-shadow: inset 0 -1px 0 0 var(--neutral-solid-300);
  overflow-x: auto;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

div.pagetab::-webkit-scrollbar {
  display: none;
}

div.pagetab > button {
  border: 1px solid transparent;
  padding-inline: var(--pagetab-padding-x);
  padding-block: var(--pagetab-padding-y);
  border-radius: 10px 10px 0 0;
  transition: all var(--speed-fast) ease, box-shadow var(--speed-basic) ease;
}

div.pagetab > button span {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--neutral-solid-500);
  line-height: 1.21;
  word-break: keep-all;
  width: max-content;
}

div.pagetab > button:hover span {
  color: var(--neutral-solid-700);
}

div.pagetab > button[role=tab]:focus-visible {
  background-color: transparent;
  z-index: 999;
  border: 1px solid transparent;
  outline: none;
  box-shadow: 0 0 0 2px var(--neutral-solid-900);
}

div.pagetab > button[role=tab]:focus-visible span {
  color: var(--neutral-solid-700);
}

div.pagetab > button[aria-selected=true] {
  border: 1px solid var(--neutral-solid-300);
  border-bottom: 1px solid transparent;
  background-color: var(--white);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

div.pagetab > button[aria-selected=true] span {
  font-weight: var(--font-bold);
  color: var(--neutral-solid-700);
}

div.pagetab > button[aria-selected=true][role=tab]:focus-visible {
  background-color: var(--white);
}

div.pagetab-bottom-block {
  background-color: var(--white);
  height: 10px;
}

/* stretch */
div.pagetab.stretch > button {
  width: 100%;
  justify-content: center;
}

/* Label Properties */
/* naming rule : label-md-mono-solid */
/* apply html examples : <span class="label-md-mono-solid">download</span> */
/* <b> is dot, <svg> is icon */
/* <b> tag and <svg> cannot be used together */
/* Label basic */
span[class*=label-] {
  display: inline-flex;
  align-items: center;
  font-family: "Pretendard";
  font-weight: var(--font-medium);
  text-wrap: nowrap;
}

/* Label Text Size */
span[class*=label-xs-] {
  border-radius: var(--label-xs-radius);
  padding: 0.25rem 0.313rem; /* 4px 5px */
  height: var(--label-xs-height);
  font-size: var(--label-text-xs);
}

span[class*=label-sm-] {
  border-radius: var(--label-sm-radius);
  padding: 0.25rem 0.438rem; /* 4px 7px */
  height: var(--label-sm-height);
  font-size: var(--label-text-sm);
}

span[class*=label-md-] {
  border-radius: var(--label-md-radius);
  padding: 0.313rem 0.5rem; /* 5px 8px */
  height: var(--label-md-height);
  font-size: var(--label-text-md);
}

span[class*=label-lg-] {
  border-radius: var(--label-lg-radius);
  padding: 0.375rem 0.563rem; /* 6px 9px */
  height: var(--label-lg-height);
  font-size: var(--label-text-lg);
}

span[class*=label-xl-] {
  border-radius: var(--label-xl-radius);
  padding: 0.375rem 0.625rem; /* 6px 10px */
  height: var(--label-xl-height);
  font-size: var(--label-text-xl);
}

span[class*=label-xs-]:has(svg) {
  gap: 0.125rem; /* 2px */
  padding: 0.188rem 0.375rem 0.188rem 0.25rem; /* 3px 6px 3px 4px */
}

span[class*=label-sm-]:has(svg) {
  gap: 0.188rem; /* 3px */
  padding: 0.25rem 0.438rem 0.25rem 0.313rem; /* 4px 7px 4px 5px */
}

span[class*=label-md-]:has(svg) {
  gap: 0.313rem; /* 5px */
  padding: 0.313rem 0.5rem 0.313rem 0.375rem; /* 5px 8px 5px 6px */
}

span[class*=label-lg-]:has(svg) {
  gap: 0.375rem; /* 6px */
  padding: 0.375rem 0.563rem 0.375rem 0.438rem; /* 6px 9px 6px 7px */
}

span[class*=label-xl-]:has(svg) {
  gap: 0.438rem; /* 7px */
  padding: 0.375rem 0.625rem 0.375rem 0.5rem; /* 6px 10px 6px 8px */
}

/* Label Dot Size */
span[class*=label] b {
  width: auto;
  aspect-ratio: 1/1;
}

span[class*=label-xs-] b {
  width: var(--label-dot-xs-height);
  border-radius: var(--label-dot-xs-height);
}

span[class*=label-sm-] b {
  width: var(--label-dot-sm-height);
  border-radius: var(--label-dot-sm-height);
}

span[class*=label-md-] b {
  width: var(--label-dot-md-height);
  border-radius: var(--label-dot-md-height);
}

span[class*=label-lg-] b {
  width: var(--label-dot-lg-height);
  border-radius: var(--label-dot-lg-height);
}

span[class*=label-xl-] b {
  width: var(--label-dot-xl-height);
  border-radius: var(--label-dot-xl-height);
}

span[class*=label-xs-]:has(b) {
  gap: 0.313rem; /* 5px */
  padding: 0.25rem 0.375rem; /* 4px 6px */
}

span[class*=label-sm-]:has(b) {
  gap: 0.313rem; /* 5px */
  padding: 0.25rem 0.438rem; /* 4px 7px */
}

span[class*=label-md-]:has(b) {
  gap: 0.375rem; /* 6px */
  padding: 0.313rem 0.5rem; /* 5px 8px */
}

span[class*=label-lg-]:has(b) {
  gap: 0.438rem; /* 7px */
  padding: 0.375rem 0.563rem; /* 6px 9px */
}

span[class*=label-xl-]:has(b) {
  gap: 0.563rem; /* 9px */
  padding: 0.375rem 0.625rem; /* 6px 10px */
}

/* Label Color Variants */
span[class*=label-][class*=-mono-solid] {
  background-color: var(--neutral-opacity-100);
  color: var(--neutral-opacity-600);
}

span[class*=label-][class*=-mono-outline] {
  background-color: transparent;
  outline: 1px solid var(--neutral-opacity-400);
  color: var(--neutral-opacity-600);
}

span[class*=label-][class*=-mono] svg {
  fill: var(--neutral-opacity-600);
}

span[class*=label-][class*=-mono] b {
  background-color: var(--neutral-opacity-600);
}

span[class*=label-][class*=-slate-solid] {
  background-color: var(--slate-100);
  color: var(--slate-600);
}

span[class*=label-][class*=-slate-outline] {
  background-color: transparent;
  outline: 1px solid var(--slate-400);
  color: var(--slate-600);
}

span[class*=label-][class*=-slate] svg {
  fill: var(--slate-600);
}

span[class*=label-][class*=-slate] b {
  background-color: var(--slate-600);
}

span[class*=label-][class*=-blue-solid] {
  background-color: var(--blue-100);
  color: var(--blue-600);
}

span[class*=label-][class*=-blue-outline] {
  background-color: transparent;
  outline: 1px solid var(--blue-400);
  color: var(--blue-600);
}

span[class*=label-][class*=-blue] svg {
  fill: var(--blue-600);
}

span[class*=label-][class*=-blue] b {
  background-color: var(--blue-600);
}

span[class*=label-][class*=-red-solid] {
  background-color: var(--red-100);
  color: var(--red-600);
}

span[class*=label-][class*=-red-outline] {
  background-color: transparent;
  outline: 1px solid var(--red-400);
  color: var(--red-600);
}

span[class*=label-][class*=-red] svg {
  fill: var(--red-600);
}

span[class*=label-][class*=-red] b {
  background-color: var(--red-600);
}

span[class*=label-][class*=-green-solid] {
  background-color: var(--green-100);
  color: var(--green-600);
}

span[class*=label-][class*=-green-outline] {
  background-color: transparent;
  outline: 1px solid var(--green-400);
  color: var(--green-600);
}

span[class*=label-][class*=-green] svg {
  fill: var(--green-600);
}

span[class*=label-][class*=-green] b {
  background-color: var(--green-600);
}

span[class*=label-][class*=-indigo-solid] {
  background-color: var(--indigo-100);
  color: var(--indigo-600);
}

span[class*=label-][class*=-indigo-outline] {
  background-color: transparent;
  outline: 1px solid var(--indigo-400);
  color: var(--indigo-600);
}

span[class*=label-][class*=-indigo] svg {
  fill: var(--indigo-600);
}

span[class*=label-][class*=-indigo] b {
  background-color: var(--indigo-600);
}

span[class*=label-][class*=-yellow-solid] {
  background-color: var(--yellow-100);
  color: var(--yellow-600);
}

span[class*=label-][class*=-yellow-outline] {
  background-color: transparent;
  outline: 1px solid var(--yellow-400);
  color: var(--yellow-600);
}

span[class*=label-][class*=-yellow] svg {
  fill: var(--yellow-600);
}

span[class*=label-][class*=-yellow] b {
  background-color: var(--yellow-600);
}

/* Tag Properties */
/* naming rule : tag-md-mono */
/* apply html examples : <span class="tag-md-mono">design<button type="button"><i data-icon="close"></i></button></span> */
/* Tag basic */
span[class*=tag-] {
  display: inline-flex;
  align-items: center;
  font-family: "Pretendard";
  font-weight: var(--font-semibold);
}

/* Tag Size */
span[class*=tag-][class*=-xs] {
  font-size: var(--text-xs);
  padding-left: 0.375rem; /* 6px */
  padding-right: 0.188rem; /* 3px */
  gap: var(--tag-xs-gap);
  height: var(--tag-xs-height);
  border-radius: var(--tag-xs-radius);
}

span[class*=tag-][class*=-sm] {
  font-size: var(--text-xs);
  padding-left: 0.5rem; /* 8px */
  padding-right: 0.188rem; /* 3px */
  gap: var(--tag-sm-gap);
  height: var(--tag-sm-height);
  border-radius: var(--tag-sm-radius);
}

span[class*=tag-][class*=-md] {
  font-size: var(--text-sm);
  padding-left: 0.625rem; /* 10px */
  padding-right: 0.188rem; /* 3px */
  gap: var(--tag-md-gap);
  height: var(--tag-md-height);
  border-radius: var(--tag-md-radius);
}

span[class*=tag-][class*=-lg] {
  font-size: var(--text-base);
  padding-left: 0.75rem; /* 12px */
  padding-right: 0.188rem; /* 3px */
  gap: var(--tag-lg-gap);
  height: var(--tag-lg-height);
  border-radius: var(--tag-lg-radius);
}

span[class*=tag-][class*=-xl] {
  font-size: var(--text-lg);
  padding-left: 0.875rem; /* 14px */
  padding-right: 0.313rem; /* 5px */
  gap: var(--tag-xl-gap);
  height: var(--tag-xl-height);
  border-radius: var(--tag-xl-radius);
}

/* Tag Color Variants */
span[class*=tag-][class*=-mono] {
  background-color: var(--neutral-opacity-100);
  color: var(--neutral-opacity-600);
  outline: 1px solid var(--neutral-opacity-300);
}

span[class*=tag-][class*=-slate] {
  background-color: var(--slate-100);
  color: var(--slate-600);
  outline: 1px solid var(--slate-300);
}

span[class*=tag-][class*=-blue] {
  background-color: var(--blue-100);
  color: var(--blue-600);
  outline: 1px solid var(--blue-300);
}

span[class*=tag-][class*=-red] {
  background-color: var(--red-100);
  color: var(--red-600);
  outline: 1px solid var(--red-300);
}

span[class*=tag-][class*=-green] {
  background-color: var(--green-100);
  color: var(--green-600);
  outline: 1px solid var(--green-300);
}

span[class*=tag-][class*=-indigo] {
  background-color: var(--indigo-100);
  color: var(--indigo-600);
  outline: 1px solid var(--indigo-300);
}

span[class*=tag-][class*=-yellow] {
  background-color: var(--yellow-100);
  color: var(--yellow-600);
  outline: 1px solid var(--yellow-300);
}

/* Tag Button */
span[class*=tag-] button {
  background-color: transparent;
  border: 0;
  outline: none;
  box-shadow: 0 0 0 0 transparent;
  transition: var(--speed-fast) ease;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* Tag Button Size */
span[class*=tag-xs] button {
  border-radius: var(--tag-xs-radius);
  padding: 0.063rem; /* 1px */
  height: var(--tag-btn-xs-height);
}

span[class*=tag-sm] button {
  border-radius: var(--tag-sm-radius);
  padding: 0.125rem; /* 2px */
  height: var(--tag-btn-sm-height);
}

span[class*=tag-md] button {
  border-radius: var(--tag-md-radius);
  padding: 0.188rem; /* 3px */
  height: var(--tag-btn-md-height);
}

span[class*=tag-lg] button {
  border-radius: var(--tag-lg-radius);
  padding: 0.25rem; /* 4px */
  height: var(--tag-btn-lg-height);
}

span[class*=tag-xl] button {
  border-radius: var(--tag-xl-radius);
  padding: 0.313rem; /* 5px */
  height: var(--tag-btn-xl-height);
}

/* Tag Button Color Variants */
span[class*=tag-][class*=-mono] svg {
  fill: var(--neutral-opacity-600);
}

span[class*=tag-][class*=-slate] svg {
  fill: var(--slate-600);
}

span[class*=tag-][class*=-blue] svg {
  fill: var(--blue-600);
}

span[class*=tag-][class*=-red] svg {
  fill: var(--red-600);
}

span[class*=tag-][class*=-green] svg {
  fill: var(--green-600);
}

span[class*=tag-][class*=-indigo] svg {
  fill: var(--indigo-600);
}

span[class*=tag-][class*=-yellow] svg {
  fill: var(--yellow-600);
}

/* Tag Button onmouse Interactions */
/* hover */
span[class*=tag-][class*=-mono] button:hover {
  background-color: var(--neutral-opacity-300);
}

span[class*=tag-][class*=-slate] button:hover {
  background-color: var(--slate-300);
}

span[class*=tag-][class*=-blue] button:hover {
  background-color: var(--blue-300);
}

span[class*=tag-][class*=-red] button:hover {
  background-color: var(--red-300);
}

span[class*=tag-][class*=-green] button:hover {
  background-color: var(--green-300);
}

span[class*=tag-][class*=-indigo] button:hover {
  background-color: var(--indigo-300);
}

span[class*=tag-][class*=-yellow] button:hover {
  background-color: var(--yellow-300);
}

/* focus-visible */
span[class*=tag-]:is([class*=-mono], [class*=-slate], [class*=-blue], [class*=-red], [class*=-green], [class*=-indigo], [class*=-yellow]) button:focus-visible {
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--neutral-solid-900);
}

/* Menu List Properties */
/* naming rule : ul.menulist-sm-mono */
/* apply html examples : */
/* Support Maximum 5 Depth Menu */
/* Menu List Container */
ul.menulist :is(a, button) {
  width: 100%;
  display: inline-flex;
  justify-content: space-between;
  transition: all var(--speed-fast) ease, box-shadow var(--speed-basic) ease;
  font-weight: var(--font-semibold);
  outline: transparent;
}

ul.menulist :is(a, button):has(> div:only-child) {
  justify-content: left;
}

/* Menu Item Extended Size Default */
ul.menulist :is(a, button) > div {
  flex-direction: row;
  align-items: center;
}

/* Menu Item Submenu Show/Hide */
:is(div, ul).closed {
  display: none;
}

/* GNB Basic Depth (depth-deco) Menulist Structure */
ul.menulist > li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 7px;
}

/* GNB 메뉴 작동 CSS 구조 */
/* 기본적으로 extended 시, 논모달 다 꺼져있음 */
nav.gnb[data-gnb-mode=extended] ul.menulist .non-modal {
  display: none;
}

/* menulist 전체에 aria-expanded true / false 스위칭 설정 적용 */
ul.menulist > li button[aria-expanded=false] + .depth-deco,
ul.menulist > li button[aria-expanded=false] + ul {
  display: none;
}

/* compressed structure */
/* 기본적으로 compressed 시, 논모달 다 꺼져있음 */
nav.gnb[data-gnb-mode=compressed] ul.menulist .non-modal {
  display: none;
}

nav.gnb[data-gnb-mode=compressed] ul.menulist button.submenu[aria-expanded=true] ~ div.non-modal {
  display: block;
}

/* #gnb[data-gnb-mode="compressed"] ul.menulist > li button.submenu[aria-expanded="true"] {display: block;} */
/* Menulist Depth Structure */
ul.menulist .depth-1 > li > :is(a, button) {
  padding-left: 1.375rem; /* 22px */
} /* Layouts */
ul.menulist .depth-2 > li > :is(a, button) {
  padding-left: 2.125rem; /* 34px */
} /* Layouts */
ul.menulist .depth-3 > li > :is(a, button) {
  padding-left: 2.875rem; /* 46px */
} /* Layouts */
ul.menulist .depth-4 > li > :is(a, button) {
  padding-left: 3.625rem; /* 58px */
} /* Layouts */
ul.menulist .depth-5 > li > :is(a, button) {
  padding-left: 4.375rem; /* 70px */
} /* Layouts */
/* Menu Item Properties */
/* naming rule : a.menuitem-text or button.menuitem-textdrop */
/* <button> is switch for the submenu */
/* <a> is linked page */
/* apply html examples : */
/* Menu Item Extended */
/* Menu Item Extended Basic */
/* Menu Item Extended Font Size */
ul.menulist :is(a, button)[class*=menuitem-xs] span:not([class*=label-]) {
  font-size: var(--text-sm);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: max-content;
}

ul.menulist :is(a, button)[class*=menuitem-sm] span:not([class*=label-]) {
  font-size: var(--text-sm);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: max-content;
}

ul.menulist :is(a, button)[class*=menuitem-md] span:not([class*=label-]) {
  font-size: var(--text-sm);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: max-content;
}

ul.menulist :is(a, button)[class*=menuitem-lg] span:not([class*=label-]) {
  font-size: var(--text-sm);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: max-content;
}

ul.menulist :is(a, button)[class*=menuitem-xl] span:not([class*=label-]) {
  font-size: var(--text-sm);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: max-content;
}

/* Menu Item Extended Size */
ul.menulist :is(a, button)[class*=menuitem-xs] {
  border-radius: var(--menuitem-xs-radius);
  padding: 0.375rem 0.625rem 0.375rem 0.625rem; /* 6px 10px 6px 10px */
  height: var(--menuitem-xs-height);
}

ul.menulist :is(a, button)[class*=menuitem-xs]:has(svg) > div {
  display: inline-flex;
  gap: 0.438rem; /* 7px */
  font-size: var(--text-sm);
  padding-right: 1.875rem; /* 15px */
}

ul.menulist :is(a, button)[class*=menuitem-sm] {
  border-radius: var(--menuitem-sm-radius);
  padding: 0.375rem 0.625rem 0.375rem 0.625rem; /* 6px 10px 6px 10px */
  height: var(--menuitem-sm-height);
}

ul.menulist :is(a, button)[class*=menuitem-sm]:has(svg) > div {
  display: inline-flex;
  gap: 0.625rem; /* 10px */
  font-size: var(--text-sm);
  padding-right: 1.875rem; /* 15px */
}

ul.menulist :is(a, button)[class*=menuitem-md] {
  border-radius: var(--menuitem-md-radius);
  padding: 0.5rem 0.625rem 0.5rem 0.75rem; /* 8px 10px 8px 12px */
  height: var(--menuitem-md-height);
}

ul.menulist :is(a, button)[class*=menuitem-md]:has(svg) > div {
  display: inline-flex;
  gap: 0.625rem; /* 10px */
  font-size: var(--text-sm);
  padding-right: 1.875rem; /* 15px */
}

ul.menulist :is(a, button)[class*=menuitem-lg] {
  border-radius: var(--menuitem-lg-radius);
  padding: 0.625rem 0.625rem 0.625rem 0.75rem; /* 10px 10px 10px 12px */
  height: var(--menuitem-lg-height);
}

ul.menulist :is(a, button)[class*=menuitem-lg]:has(svg) > div {
  display: inline-flex;
  gap: 0.75rem; /* 12px */
  font-size: var(--text-sm);
  padding-right: 1.875rem; /* 15px */
}

ul.menulist :is(a, button)[class*=menuitem-xl] {
  border-radius: var(--menuitem-xl-radius);
  padding: 1rem 0.75rem 1rem 0.938rem; /* 16px 12px 16px 15px */
  height: var(--menuitem-xl-height);
}

ul.menulist :is(a, button)[class*=menuitem-xl]:has(svg) > div {
  display: inline-flex;
  gap: 0.75rem; /* 12px */
  font-size: var(--text-sm);
  padding-right: 1.875rem; /* 15px */
}

/* Menu Item Extended Color Variants */
ul.menulist :is(a, button)[class*=menuitem-][class*=-mono] {
  background-color: transparent;
  color: var(--neutral-opacity-700);
}

ul.menulist :is(a, button)[class*=menuitem-][class*=-mono] svg {
  fill: var(--neutral-opacity-600);
}

ul.menulist :is(a, button)[class*=menuitem-][class*=-blue] {
  background-color: transparent;
  color: var(--neutral-opacity-700);
}

ul.menulist :is(a, button)[class*=menuitem-][class*=-blue] svg {
  fill: var(--slate-400);
}

ul.menulist :is(a, button)[class*=menuitem-][class*=-slate] {
  background-color: transparent;
  color: var(--neutral-opacity-700);
}

ul.menulist :is(a, button)[class*=menuitem-][class*=-slate] svg {
  fill: var(--slate-400);
}

ul.menulist :is(a, button)[class*=menuitem-][class*=-red] {
  background-color: transparent;
  color: var(--neutral-opacity-700);
}

ul.menulist :is(a, button)[class*=menuitem-][class*=-red] svg {
  fill: var(--red-400);
}

/* Menu Item Extended onmouse Interactions */
/* hover */
ul.menulist :is(a, button)[class*=menuitem-][class*=-mono]:hover {
  background-color: var(--neutral-opacity-100);
}

ul.menulist :is(a, button)[class*=menuitem-][class*=-blue]:hover {
  background-color: var(--blue-100);
}

ul.menulist :is(a, button)[class*=menuitem-][class*=-slate]:hover {
  background-color: var(--slate-100);
}

ul.menulist :is(a, button)[class*=menuitem-][class*=-red]:hover {
  background-color: var(--red-100);
}

/* focus-visible */
ul.menulist :is(a, button)[class*=menuitem-]:focus-visible {
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--neutral-solid-900);
}

ul.menulist :is(a, button)[class*=menuitem-][class*=-mono]:focus-visible {
  background-color: var(--neutral-opacity-100);
}

ul.menulist :is(a, button)[class*=menuitem-][class*=-blue]:focus-visible {
  background-color: var(--blue-100);
}

ul.menulist :is(a, button)[class*=menuitem-][class*=-slate]:focus-visible {
  background-color: var(--slate-100);
}

ul.menulist :is(a, button)[class*=menuitem-][class*=-red]:focus-visible {
  background-color: var(--red-100);
}

/* selected */
ul.menulist button[aria-expanded=true][class*=menuitem-][class*=-mono] {
  background-color: var(--neutral-opacity-300);
}

ul.menulist button[aria-expanded=true][class*=menuitem-][class*=-blue] {
  color: var(--blue-600);
}

ul.menulist :is(a.selected, button[aria-expanded=true])[class*=menuitem-][class*=-blue] svg {
  fill: var(--blue-600);
}

ul.menulist button[aria-expanded=true][class*=menuitem-][class*=-slate] {
  color: var(--slate-600);
  background-color: var(--slate-200);
}

ul.menulist :is(a.selected, button[aria-expanded=true])[class*=menuitem-][class*=-slate] svg {
  fill: var(--slate-600);
}

ul.menulist button[aria-expanded=true][class*=menuitem-][class*=-red] {
  color: var(--red-600);
  background-color: var(--red-200);
}

ul.menulist :is(a.selected, button[aria-expanded=true])[class*=menuitem-][class*=-red] svg {
  fill: var(--red-600);
}

ul.menulist a.selected[class*=menuitem-][class*=-mono] {
  background-color: var(--neutral-opacity-300);
}

ul.menulist a.selected[class*=menuitem-][class*=-blue] {
  color: var(--blue-600);
  background-color: var(--blue-100);
}

ul.menulist a.selected[class*=menuitem-][class*=-slate] {
  color: var(--slate-600);
  background-color: var(--slate-200);
}

ul.menulist a.selected[class*=menuitem-][class*=-red] {
  color: var(--red-600);
  background-color: var(--red-200);
}

/* disabled */
ul.menulist button[class*=menuitem-][class*=-mono]:disabled,
ul.menulist a[class*=menuitem-][class*=-mono].disabled {
  background-color: transparent;
  color: var(--neutral-opacity-400);
}

ul.menulist button[class*=menuitem-][class*=-mono]:disabled svg,
ul.menulist a[class*=menuitem-][class*=-mono].disabled svg {
  fill: var(--neutral-opacity-300);
}

ul.menulist button[class*=menuitem-][class*=-blue]:disabled,
ul.menulist a[class*=menuitem-][class*=-blue].disabled {
  background-color: transparent;
  color: var(--slate-400);
}

ul.menulist button[class*=menuitem-][class*=-blue]:disabled svg,
ul.menulist a[class*=menuitem-][class*=-blue].disabled svg {
  fill: var(--slate-300);
}

ul.menulist button[class*=menuitem-][class*=-slate]:disabled,
ul.menulist a[class*=menuitem-][class*=-slate].disabled {
  background-color: transparent;
  color: var(--slate-400);
}

ul.menulist button[class*=menuitem-][class*=-slate]:disabled svg,
ul.menulist a[class*=menuitem-][class*=-slate].disabled svg {
  fill: var(--red-400);
}

ul.menulist button[class*=menuitem-][class*=-red]:disabled,
ul.menulist a[class*=menuitem-][class*=-red].disabled {
  background-color: transparent;
  color: var(--red-400);
}

ul.menulist button[class*=menuitem-][class*=-red]:disabled svg,
ul.menulist a[class*=menuitem-][class*=-red].disabled svg {
  fill: var(--red-400);
}

/* disabled label (if item have label) */
/* if button is disabled, can't visible label when hover */
ul.menulist :is(a.disabled, button:disabled)[class*=menuitem-] span[class*=label-] {
  display: none;
}

/* disabled hover */
ul.menulist a.disabled[class*=menuitem-][class*=-mono]:hover {
  background-color: var(--neutral-opacity-50);
}

ul.menulist a.disabled[class*=menuitem-][class*=-blue]:hover {
  background-color: var(--blue-50);
}

ul.menulist a.disabled[class*=menuitem-][class*=-slate]:hover {
  background-color: var(--slate-50);
}

ul.menulist a.disabled[class*=menuitem-][class*=-red]:hover {
  background-color: var(--red-50);
}

/* disabled hover (if item have special-label) */
/* special-label only use no have icon */
ul.menulist a.disabled[class*=menuitem-] span.special-label {
  display: none;
}

ul.menulist a.disabled[class*=menuitem-]:hover span.special-label {
  display: inline-flex;
}

/* only span, svg */
/* Menu Item Other Interactions */
/* arrow rotate when accordion menu expanded */
ul.menulist button[aria-expanded=false] > svg {
  rotate: 0deg;
  transition: var(--speed-fastest) ease;
}

ul.menulist button[aria-expanded=true] > svg {
  rotate: 90deg;
  transition: var(--speed-fastest) ease;
}

/* Minilist Properties */
/* naming rule : ul.menulist.minilist-compressed */
/* minilist is just for list decorations */
/* apply html examples : */
ul.minilist-compressed {
  width: max-content;
  display: flex;
  border: 1px solid var(--slate-300);
  flex-direction: column;
  background-color: var(--white);
  padding: 0.3rem; /* 10px */
  border-radius: var(--layer-radius);
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
}

/* Thumbnail Properties */
/* naming rule : div.thumb */
/* apply html examples : <div class="thumb"><img src="" alt="썸네일 이미지"></div> */
.thumb {
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  border-radius: var(--thumb-md-radius);
  width: var(--thumb-md-size);
  height: var(--thumb-md-size);
  aspect-ratio: 1/1;
  flex-shrink: 0;
  background-color: var(--slate-100);
}
@media screen and (max-width: 768px) {
  .thumb {
    width: var(--thumb-lg-size);
    height: var(--thumb-lg-size);
  }
}

.thumb svg {
  fill: var(--slate-400);
}

.thumb-name {
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}

/* Tooltip Properties */
/* naming rule : span.tooltip- */
/* apply html examples : */
/* Tooltip Basic */
:is(a, button)[class*=tooltip-] {
  position: relative;
}

/* Tooltip Common Styles */
span.tooltip {
  position: absolute;
  background: var(--neutral-solid-500);
  color: var(--white);
  border: 1px solid var(--neutral-solid-600);
  padding: 0.313rem 0.75rem; /* 5px 12px */
  border-radius: var(--layer-radius);
  font-size: var(--text-sm) !important;
  font-weight: var(--font-medium);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}

/* Tooltip Show/Hide Status */
.show-tooltip .tooltip {
  opacity: 1;
  pointer-events: auto;
}

/* Tooltip Positions */
.tooltip-top .tooltip {
  bottom: calc(100% + var(--tooltip-margin));
  left: 50%;
  transform: translateX(-50%);
}

.tooltip-right .tooltip {
  top: 50%;
  left: calc(100% + var(--tooltip-margin));
  transform: translateY(-50%);
}

.tooltip-bottom .tooltip {
  top: calc(100% + var(--tooltip-margin));
  left: 50%;
  transform: translateX(-50%);
}

.tooltip-left .tooltip {
  top: 50%;
  right: calc(100% + var(--tooltip-margin));
  transform: translateY(-50%);
}

/* Help Properties */
/* naming rule : span.help- */
/* apply html examples : */
/* Help Basic */
div.help-container {
  position: relative;
}

/* Help Common Styles */
span.help {
  position: absolute;
  width: max(500px, 100%);
  background: var(--neutral-solid-500);
  color: var(--white);
  border: 1px solid var(--neutral-solid-600);
  padding: 0.75rem 0.938rem; /* 15px 15px */
  border-radius: var(--layer-radius);
  font-size: var(--text-sm) !important;
  font-weight: var(--font-regular);
  display: none;
  z-index: 9999;
}

/* Help Positions */
div.help-container:has(button.help-top) .help {
  bottom: calc(100% - var(--help-margin));
}

div.help-container:has(button.help-right) .help {
  left: calc(100% + var(--help-margin));
}

div.help-container:has(button.help-bottom) .help {
  top: calc(100% + var(--help-margin));
}

div.help-container:has(button.help-left) .help {
  right: calc(100% - var(--help-margin));
}

/* callout Properties */
/* naming rule : ul.menulist.minilist-compressed */
/* apply html examples : */
/* 추후 다른 컬러 및 onlytext 체계 만들어야 함 */
.callout-slate-icontext {
  width: 100%;
  background-color: var(--slate-50);
  outline: 1px solid var(--slate-200);
  border-radius: var(--callout-radius);
  padding: var(--callout-padding);
  display: grid;
  grid-template-columns: max-content;
  grid-column-gap: 10px;
  grid-row-gap: 7px;
}
.callout-slate-icontext .callout-title {
  text-align: left;
  grid-column: 2;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--slate-700);
}
.callout-slate-icontext .callout-word {
  text-align: left;
  grid-column: 2;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--slate-600);
}
.callout-slate-icontext li {
  list-style: disc inside;
}
.callout-slate-icontext li::marker {
  color: var(--slate-600);
}
.callout-slate-icontext svg {
  grid-column: 1;
  fill: var(--slate-700);
  margin-top: 2px;
}

.callout-red-icontext {
  width: 100%;
  background-color: var(--red-50);
  outline: 1px solid var(--red-200);
  border-radius: var(--callout-radius);
  padding: var(--callout-padding);
  display: grid;
  grid-template-columns: max-content;
  grid-column-gap: 10px;
  grid-row-gap: 7px;
}
.callout-red-icontext .callout-title {
  text-align: left;
  grid-column: 2;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--red-700);
}
.callout-red-icontext .callout-word {
  text-align: left;
  grid-column: 2;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--red-600);
}
.callout-red-icontext li {
  list-style: disc inside;
}
.callout-red-icontext li::marker {
  color: var(--red-600);
}
.callout-red-icontext svg {
  grid-column: 1;
  fill: var(--red-700);
  margin-top: 2px;
}

/* hint Properties */
/* naming rule : div. */
/* apply html examples : */
/* Input Properties */
/* naming rule : form.input */
/* apply html examples : */
/* 현재 input 단 건을 위한 작업만 진행된 상태이므로 추후 컴포넌트화 시켜야 함 */
.form-search {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* 아래는 샘플 임시 조치, input-md-outline-text 기준 */
.input-md-outline-text {
  height: var(--input-md-height);
  width: 100%;
  padding-block: 0.531rem;
  padding-left: 0.938rem;
  padding-right: 0.938rem;
  background-color: var(--white);
  outline: 1px solid var(--neutral-solid-300);
  border-radius: var(--input-md-radius);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: all var(--speed-fast) ease, box-shadow var(--speed-basic) ease, outline var(--speed-basic) ease;
  border: 1px solid transparent;
  outline-offset: 0;
}
.input-md-outline-text::placeholder {
  color: var(--neutral-solid-300);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.input-md-outline-text:hover:not([disabled], :focus) {
  outline-color: var(--neutral-solid-400);
}
.input-md-outline-text:focus {
  outline: 1px solid var(--blue-500);
}
.input-md-outline-text:focus-visible {
  outline: 1px solid var(--blue-500);
  background-color: var(--white);
  box-shadow: 0 0 0 2px var(--blue-200);
}
.input-md-outline-text:disabled {
  background-color: var(--neutral-solid-100);
  cursor: text;
}
.input-md-outline-text[readonly] {
  background-color: var(--neutral-solid-100);
}
.input-md-outline-text[readonly]:is(:hover, :focus, :focus-visible) {
  background-color: var(--neutral-solid-100);
  outline-color: var(--neutral-solid-400);
  box-shadow: none;
}

/* sheet top panel 내부의 input들만 최소너비 fix */
.sheet-top-panel input.input-md-outline-text {
  min-width: 150px;
}

.input-delete {
  display: none;
  opacity: 0;
}

input[readonly] + .input-delete {
  display: none;
}

@keyframes inputDeleteBtnShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
div.input-option-container {
  position: relative;
  flex: 1;
  /* input-delete */
  /* input-show */
}
div.input-option-container input {
  padding-right: 2.188rem;
  width: 100%;
}
div.input-option-container input:not([data-written]) + .input-delete {
  display: none;
}
div.input-option-container > .input-delete {
  display: inline-flex;
  opacity: 0;
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}
div.input-option-container > .input-delete:hover {
  opacity: 1;
}
div.input-option-container:is(:has(> input:not(:is([readonly], [disabled]))[data-written]:focus), :has(> input:not(:is([readonly], [disabled]))[data-written]:hover)) .input-delete {
  opacity: 1;
  animation: inputDeleteBtnShow var(--speed-fastest) ease-out;
}
div.input-option-container:has(input[readonly][data-written] + .input-delete) {
  display: flex;
  flex-direction: row;
  gap: 5px;
}
div.input-option-container input[readonly][data-written] + .input-delete {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.2;
}
div.input-option-container:hover input[readonly][data-written] + .input-delete {
  opacity: 1;
}
div.input-option-container:has([disabled]) .input-delete {
  display: none;
}
div.input-option-container > .input-show {
  display: inline-flex;
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
}
div.input-option-container > .input-show:hover {
  opacity: 1;
}
div.input-option-container:has(input[type=password]) .eye {
  display: block;
}
div.input-option-container:has(input[type=password]) .eye-off {
  display: none;
}
div.input-option-container:has(input[type=text]) .eye {
  display: none;
}
div.input-option-container:has(input[type=text]) .eye-off {
  display: block;
}
@media screen and (max-width: 768px) {
  div.input-option-container {
    width: 100%;
  }
}

/* selectbox */
div.selectbox-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
}

div.selectbox-container {
  position: relative;
}

span.selectbox-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

button.selectbox-md-outline-text {
  height: var(--input-md-height);
  position: relative;
  padding: 0.375rem 0.375rem 0.375rem 0.875rem;
  max-width: var(--input-normal-width);
  background-color: var(--white);
  outline: 1px solid var(--neutral-solid-300);
  border-radius: var(--input-md-radius);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: all var(--speed-fast) ease, box-shadow var(--speed-basic) ease, outline var(--speed-basic) ease;
  cursor: pointer;
  display: flex;
  align-items: center;
  text-wrap: nowrap;
  word-break: keep-all;
}
@media screen and (max-width: 1024px) {
  button.selectbox-md-outline-text {
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }
}

button.selectbox-md-outline-text svg {
  margin-left: 0.625rem;
  fill: var(--neutral-solid-600);
}

button.selectbox-md-outline-text button {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button.selectbox-md-outline-text:hover:not([disabled], :focus, [aria-expanded=true]) {
  outline-color: var(--neutral-solid-400);
}

button.selectbox-md-outline-text:focus-visible,
button.selectbox-md-outline-text[aria-expanded=true] {
  z-index: 999;
  outline-color: var(--blue-500);
  background-color: var(--white);
  box-shadow: 0 0 0 2px var(--blue-200);
}

button.selectbox-md-outline-text:disabled {
  background-color: var(--neutral-solid-100);
}

button.selectbox-md-outline-text[aria-expanded=false] svg {
  rotate: 0deg;
  transition: rotate var(--speed-basic) ease;
}

button.selectbox-md-outline-text[aria-expanded=true] svg {
  rotate: 180deg;
  transition: rotate var(--speed-basic) ease;
}

/* selectitem */
ul.selectitem {
  min-width: max-content;
  width: 100%;
  display: none;
  position: absolute;
  padding: 0.375rem;
  flex-direction: column;
  background-color: var(--white);
  border: 1px solid var(--neutral-solid-300);
  padding: 0.3rem;
  border-radius: var(--layer-radius);
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
  z-index: 999;
}

ul.selectitem li {
  padding-block: 0.375rem;
  padding-inline: 0.625rem;
  border-radius: var(--menuitem-sm-radius);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

ul.selectitem li:hover {
  background-color: var(--slate-100);
}

button.selectbox-md-outline-text[aria-expanded=true] + .selectitem {
  display: flex;
}

/* selectitem direction */
button[class*=selectbox-][data-selectbox-direction=top] + ul.selectitem {
  bottom: calc(100% + 5px);
  left: 0;
}

button[class*=selectbox-][data-selectbox-direction=bottom] + ul.selectitem {
  top: calc(100% + 5px);
  left: 0;
}

button[class*=selectbox-][data-selectbox-direction=left] + ul.selectitem {
  top: 0;
  right: calc(100% + 5px);
}

button[class*=selectbox-][data-selectbox-direction=right] + ul.selectitem {
  top: 0;
  left: calc(100% + 5px);
}

/* calendar(datepicker) */
input.calendar-input {
  height: var(--input-md-height);
  width: 100%;
  padding-block: 0.531rem;
  padding-left: 0.938rem;
  padding-right: 1.875rem;
  max-width: var(--input-normal-width);
  background-color: var(--white);
  outline: 1px solid var(--neutral-solid-300);
  border-radius: var(--input-md-radius);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: all var(--speed-fast) ease, box-shadow var(--speed-basic) ease, outline var(--speed-basic) ease;
  border: 1px solid transparent;
  display: block;
  box-sizing: border-box;
  white-space: nowrap;
  text-overflow: ellipsis;
}
input.calendar-input:hover {
  outline-color: var(--neutral-solid-400);
}
input.calendar-input:focus {
  outline-color: var(--blue-500);
}
input.calendar-input:focus-visible {
  z-index: 999;
  background-color: var(--white);
  box-shadow: 0 0 0 2px var(--blue-200);
}
input.calendar-input::placeholder {
  color: var(--neutral-solid-300);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 1024px) {
  input.calendar-input {
    max-width: none;
  }
}

div.calendar-fromto {
  display: flex;
  gap: 10px;
  align-items: center;
}
div.calendar-fromto:has(.calendar-month) {
  flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
  div.calendar-fromto:has(.calendar-textmonth) {
    flex-direction: column;
  }
}
@media screen and (max-width: 1024px) {
  div.calendar-fromto {
    width: 100%;
  }
}

div.calendar-from, div.calendar-to, div.calendar-item {
  position: relative;
  max-width: 130px;
}
@media screen and (max-width: 1024px) {
  div.calendar-from, div.calendar-to, div.calendar-item {
    max-width: none;
    width: 100%;
  }
}

div.calendar-month {
  display: inline-flex;
  width: 100%;
}
div.calendar-month > button {
  flex: 1;
  border-radius: 0;
  border-right: 1px solid var(--slate-500);
}
div.calendar-month > button:first-of-type {
  border-radius: 0.313rem 0 0 0.313rem;
}
div.calendar-month > button:last-of-type {
  border-radius: 0 0.313rem 0.313rem 0;
  border-right: 0;
}

div.calendar-textmonth {
  display: flex;
  flex-direction: row;
  align-items: center;
}
div.calendar-textmonth input {
  width: 50px;
  min-width: 0;
}
@media screen and (max-width: 768px) {
  div.calendar-textmonth {
    width: 100%;
  }
}

button.calendar-button {
  position: absolute;
  right: 0;
  background-image: none;
  top: 50%;
  transform: translateY(-50%);
  right: 4px;
}

div.calendar-option {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
div.calendar-option .calendar-fromto {
  justify-content: space-between;
}
div.calendar-option .calendar-fromto .calendar-from, div.calendar-option .calendar-fromto .calendar-to {
  max-width: none;
}
div.calendar-option .calendar-fromto .form-unit {
  margin: 0;
}
div.calendar-option:has(> .selectbox-container) {
  flex-direction: row;
  gap: 5px;
}

/* switch */
/* focus-visible 안되는 문제 확인할 것 */
/* common */
input.switch-input {
  position: absolute;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input.switch-input:checked + label.switch-label {
  background-color: var(--green-500);
}

input.switch-input:checked + label.switch-label:hover {
  background-color: var(--green-600);
}

label.switch-label {
  position: relative;
  cursor: pointer;
  display: inline-block;
  background: var(--neutral-solid-300);
  transition: var(--speed-basic) ease-out;
}

span.switch-slider {
  position: absolute;
  top: 50%;
  display: inline-block;
  aspect-ratio: 1/1;
  background-color: var(--white);
  transition: var(--speed-fast);
  transform: translateY(-50%);
  box-shadow: 3px 0 10px 0 rgba(0, 0, 0, 0.3);
}

div[class*=switch-] {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* size */
div.switch-sm .switch-label {
  width: var(--switch-sm-width);
  height: var(--switch-sm-height);
  border-radius: calc(var(--switch-sm-height) / 2);
}

div.switch-sm .switch-slider {
  left: var(--switch-sm-gap);
  width: calc(var(--switch-sm-height) - var(--switch-sm-gap) * 2);
  border-radius: calc(var(--switch-sm-height) / 2);
}

div.switch-sm .switch-input:checked + .switch-label .switch-slider {
  left: calc(var(--switch-sm-width) - var(--switch-sm-height) + var(--switch-sm-gap));
}

div.switch-md .switch-label {
  width: var(--switch-md-width);
  height: var(--switch-md-height);
  border-radius: calc(var(--switch-md-height) / 2);
}

div.switch-md .switch-slider {
  left: var(--switch-md-gap);
  width: calc(var(--switch-md-height) - var(--switch-md-gap) * 2);
  border-radius: calc(var(--switch-md-height) / 2);
}

div.switch-md .switch-input:checked + .switch-label .switch-slider {
  left: calc(var(--switch-md-width) - var(--switch-md-height) + var(--switch-md-gap));
}

div.switch-lg .switch-label {
  width: var(--switch-lg-width);
  height: var(--switch-lg-height);
  border-radius: calc(var(--switch-lg-height) / 2);
}

div.switch-lg .switch-slider {
  left: var(--switch-lg-gap);
  width: calc(var(--switch-lg-height) - var(--switch-lg-gap) * 2);
  border-radius: calc(var(--switch-lg-height) / 2);
}

div.switch-lg .switch-input:checked + .switch-label .switch-slider {
  left: calc(var(--switch-lg-width) - var(--switch-lg-height) + var(--switch-lg-gap));
}

/* text */
div[class*=switch-] .switch-text {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-wrap: nowrap;
}

/* Required Field */
/* apply html examples : <label class="required-field"> */
:is(label, span)[data-required] {
  gap: 10px;
}

:is(label, span)[data-required]::after {
  content: " ";
  display: inline-block;
  width: 5px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--red-500);
}

/* textarea */
body textarea {
  background-color: var(--white);
  padding-block: 0.531rem;
  padding-inline: 0.938rem;
  outline: 1px solid var(--neutral-solid-300);
  border-radius: 7px;
  color: var(--neutral-solid-700);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: all var(--speed-fast) ease, box-shadow var(--speed-basic) ease, outline var(--speed-basic) ease;
  resize: none;
}
body textarea::placeholder {
  color: var(--neutral-solid-300);
  font-size: var(--text-sm);
}
body textarea:hover {
  outline-color: var(--neutral-solid-400);
}
body textarea:focus {
  outline-color: var(--blue-500);
}
body textarea:focus-visible {
  outline: 1px solid var(--blue-500);
  box-shadow: 0 0 0 2px var(--blue-200);
}
body textarea[disabled] {
  background-color: var(--neutral-solid-300);
}

/* radio */
/* This is only for BravoICT */
div.radio-button-blue {
  display: flex;
  flex-direction: row;
  padding: 3px;
  border-radius: 7px;
  background-color: var(--neutral-opacity-100);
  border: 1px solid var(--neutral-solid-200);
}
div.radio-button-blue > input {
  display: none;
}
div.radio-button-blue > label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--neutral-opacity-400);
  border-radius: 7px;
  cursor: pointer;
  padding: 7px 16px;
  transition: all var(--speed-fast) ease, box-shadow var(--speed-basic) ease;
}
div.radio-button-blue > label:hover {
  background-color: var(--neutral-opacity-100);
}
div.radio-button-blue > label:focus-visible {
  outline-color: transparent;
  box-shadow: 0 0 0 2px var(--neutral-solid-900);
}
div.radio-button-blue > input:checked + label {
  background-color: var(--blue-600);
  color: var(--white);
}
div.radio-button-blue > input:checked + label:hover {
  background-color: var(--blue-700);
}

/* ----------------------------- */
/* All Components Responsive */
/* ----------------------------- */
@media screen and (max-width: 768px) {
  /* HEADER */
  /* 추후 풀어야 함 */
}
/* ----------------------------- */
/* Loading Bar */
/* ----------------------------- */
.loading-bar-container {
  position: absolute;
  z-index: 9999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding-inline: 50px;
  padding-block: 35px;
  background-color: var(--white);
  border-radius: var(--layer-radius);
  justify-content: center;
  align-items: center;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
  animation: loadingShow var(--speed-basic) ease-out;
}
.loading-bar-container .loading-bar-spinner {
  width: 64px;
  height: 64px;
  animation: spin 2000ms linear infinite;
  will-change: transform;
  filter: blur(0.0001px);
}
.loading-bar-container .loading-bar-spinner .loading-bar-path {
  stroke: #2563eb;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 90 150;
  stroke-dashoffset: 0;
  transform-origin: center;
  transform: rotate(-90deg);
  animation: dash 2300ms ease-in-out infinite;
  fill: none;
}
.loading-bar-container .loading-bar-text {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--neutral-solid-800);
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90 150;
    stroke-dashoffset: -124;
  }
}
@keyframes loadingShow {
  from {
    transform: translateY(calc(50% - 15px));
    opacity: 0;
  }
  to {
    transform: translateY(50%);
    opacity: 1;
  }
}
/* ----------------------------- */
/* Loading Cover */
/* ----------------------------- */
.layerbody:has(.loading-cover) {
  position: relative;
  overflow: hidden;
}
.layerbody:has(.loading-cover) .loading-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  top: 0;
  left: 0;
  z-index: 999;
  padding: 35px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}
.layerbody:has(.loading-cover) .loading-cover .loading-item {
  display: flex;
  flex-direction: row;
  gap: 20px;
  border-radius: 7px;
  opacity: 0;
  animation-name: loadingCoverAnimation;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0, 0, 0.1, 1);
  animation-fill-mode: forwards;
}
.layerbody:has(.loading-cover) .loading-cover .loading-item > * {
  transition: width 1s;
}
.layerbody:has(.loading-cover) .loading-cover .loading-item:has(.loading-row) {
  display: flex;
  flex-direction: row;
  gap: 20px;
  flex-wrap: nowrap;
}
.layerbody:has(.loading-cover) .loading-cover .loading-item:has(.loading-row) .loading-row {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 20px;
}
.layerbody:has(.loading-cover) .loading-cover .loading-item .loading-square {
  height: 34px;
  width: auto;
  aspect-ratio: 1/1;
  background: var(--neutral-solid-200);
  border-radius: 7px;
  animation-name: loadingFlickerBrightness;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.layerbody:has(.loading-cover) .loading-cover .loading-item .loading-block {
  height: 34px;
  width: 100%;
  background: var(--neutral-solid-200);
  border-radius: 7px;
  animation-name: loadingFlickerBrightness;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.layerbody:has(.loading-cover) .loading-cover .loading-item hr {
  width: 100%;
  border-top: 1px solid var(--neutral-solid-200);
  animation-name: loadingBreakline;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  will-change: width;
  transform-origin: left center;
}
.layerbody:has(.loading-cover) .loading-cover.closing {
  opacity: 0;
  transition: opacity var(--speed-fast) ease-out;
  will-change: opacity;
}

@container sidebar-container (max-width: 650px) {
  .loading-item:has(.loading-row + .loading-row) {
    flex-direction: column !important;
  }
}
.loading-item:nth-child(01) {
  animation-delay: 0.0666666667s;
}
.loading-item:nth-child(01) .loading-square, .loading-item:nth-child(01) .loading-block {
  animation-delay: 0.1666666667s;
}

.loading-item:nth-child(02) {
  animation-delay: 0.1333333333s;
}
.loading-item:nth-child(02) .loading-square, .loading-item:nth-child(02) .loading-block {
  animation-delay: 0.3333333333s;
}

.loading-item:nth-child(03) {
  animation-delay: 0.2s;
}
.loading-item:nth-child(03) .loading-square, .loading-item:nth-child(03) .loading-block {
  animation-delay: 0.5s;
}

.loading-item:nth-child(04) {
  animation-delay: 0.2666666667s;
}
.loading-item:nth-child(04) .loading-square, .loading-item:nth-child(04) .loading-block {
  animation-delay: 0.6666666667s;
}

.loading-item:nth-child(05) {
  animation-delay: 0.3333333333s;
}
.loading-item:nth-child(05) .loading-square, .loading-item:nth-child(05) .loading-block {
  animation-delay: 0.8333333333s;
}

.loading-item:nth-child(06) {
  animation-delay: 0.4s;
}
.loading-item:nth-child(06) .loading-square, .loading-item:nth-child(06) .loading-block {
  animation-delay: 1s;
}

.loading-item:nth-child(07) {
  animation-delay: 0.4666666667s;
}
.loading-item:nth-child(07) .loading-square, .loading-item:nth-child(07) .loading-block {
  animation-delay: 1.1666666667s;
}

.loading-item:nth-child(08) {
  animation-delay: 0.5333333333s;
}
.loading-item:nth-child(08) .loading-square, .loading-item:nth-child(08) .loading-block {
  animation-delay: 1.3333333333s;
}

.loading-item:nth-child(09) {
  animation-delay: 0.6s;
}
.loading-item:nth-child(09) .loading-square, .loading-item:nth-child(09) .loading-block {
  animation-delay: 1.5s;
}

.loading-item:nth-child(10) {
  animation-delay: 0.6666666667s;
}
.loading-item:nth-child(10) .loading-square, .loading-item:nth-child(10) .loading-block {
  animation-delay: 1.6666666667s;
}

.loading-item:nth-child(11) {
  animation-delay: 0.7333333333s;
}
.loading-item:nth-child(11) .loading-square, .loading-item:nth-child(11) .loading-block {
  animation-delay: 1.8333333333s;
}

.loading-item:nth-child(12) {
  animation-delay: 0.8s;
}
.loading-item:nth-child(12) .loading-square, .loading-item:nth-child(12) .loading-block {
  animation-delay: 2s;
}

.loading-item:nth-child(13) {
  animation-delay: 0.8666666667s;
}
.loading-item:nth-child(13) .loading-square, .loading-item:nth-child(13) .loading-block {
  animation-delay: 2.1666666667s;
}

.loading-item:nth-child(14) {
  animation-delay: 0.9333333333s;
}
.loading-item:nth-child(14) .loading-square, .loading-item:nth-child(14) .loading-block {
  animation-delay: 2.3333333333s;
}

.loading-item:nth-child(15) {
  animation-delay: 1s;
}
.loading-item:nth-child(15) .loading-square, .loading-item:nth-child(15) .loading-block {
  animation-delay: 2.5s;
}

.loading-item:nth-child(16) {
  animation-delay: 1.0666666667s;
}
.loading-item:nth-child(16) .loading-square, .loading-item:nth-child(16) .loading-block {
  animation-delay: 2.6666666667s;
}

.loading-item:nth-child(17) {
  animation-delay: 1.1333333333s;
}
.loading-item:nth-child(17) .loading-square, .loading-item:nth-child(17) .loading-block {
  animation-delay: 2.8333333333s;
}

.loading-item:nth-child(18) {
  animation-delay: 1.2s;
}
.loading-item:nth-child(18) .loading-square, .loading-item:nth-child(18) .loading-block {
  animation-delay: 3s;
}

.loading-item:nth-child(19) {
  animation-delay: 1.2666666667s;
}
.loading-item:nth-child(19) .loading-square, .loading-item:nth-child(19) .loading-block {
  animation-delay: 3.1666666667s;
}

.loading-item:nth-child(20) {
  animation-delay: 1.3333333333s;
}
.loading-item:nth-child(20) .loading-square, .loading-item:nth-child(20) .loading-block {
  animation-delay: 3.3333333333s;
}

.loading-item:nth-child(21) {
  animation-delay: 1.4s;
}
.loading-item:nth-child(21) .loading-square, .loading-item:nth-child(21) .loading-block {
  animation-delay: 3.5s;
}

.loading-item:nth-child(22) {
  animation-delay: 1.4666666667s;
}
.loading-item:nth-child(22) .loading-square, .loading-item:nth-child(22) .loading-block {
  animation-delay: 3.6666666667s;
}

.loading-item:nth-child(23) {
  animation-delay: 1.5333333333s;
}
.loading-item:nth-child(23) .loading-square, .loading-item:nth-child(23) .loading-block {
  animation-delay: 3.8333333333s;
}

.loading-item:nth-child(24) {
  animation-delay: 1.6s;
}
.loading-item:nth-child(24) .loading-square, .loading-item:nth-child(24) .loading-block {
  animation-delay: 4s;
}

.loading-item:nth-child(25) {
  animation-delay: 1.6666666667s;
}
.loading-item:nth-child(25) .loading-square, .loading-item:nth-child(25) .loading-block {
  animation-delay: 4.1666666667s;
}

.loading-item:nth-child(26) {
  animation-delay: 1.7333333333s;
}
.loading-item:nth-child(26) .loading-square, .loading-item:nth-child(26) .loading-block {
  animation-delay: 4.3333333333s;
}

.loading-item:nth-child(27) {
  animation-delay: 1.8s;
}
.loading-item:nth-child(27) .loading-square, .loading-item:nth-child(27) .loading-block {
  animation-delay: 4.5s;
}

.loading-item:nth-child(28) {
  animation-delay: 1.8666666667s;
}
.loading-item:nth-child(28) .loading-square, .loading-item:nth-child(28) .loading-block {
  animation-delay: 4.6666666667s;
}

.loading-item:nth-child(29) {
  animation-delay: 1.9333333333s;
}
.loading-item:nth-child(29) .loading-square, .loading-item:nth-child(29) .loading-block {
  animation-delay: 4.8333333333s;
}

.loading-item:nth-child(30) {
  animation-delay: 2s;
}
.loading-item:nth-child(30) .loading-square, .loading-item:nth-child(30) .loading-block {
  animation-delay: 5s;
}

.loading-item:nth-child(31) {
  animation-delay: 2.0666666667s;
}
.loading-item:nth-child(31) .loading-square, .loading-item:nth-child(31) .loading-block {
  animation-delay: 5.1666666667s;
}

.loading-item:nth-child(32) {
  animation-delay: 2.1333333333s;
}
.loading-item:nth-child(32) .loading-square, .loading-item:nth-child(32) .loading-block {
  animation-delay: 5.3333333333s;
}

.loading-item:nth-child(33) {
  animation-delay: 2.2s;
}
.loading-item:nth-child(33) .loading-square, .loading-item:nth-child(33) .loading-block {
  animation-delay: 5.5s;
}

.loading-item:nth-child(34) {
  animation-delay: 2.2666666667s;
}
.loading-item:nth-child(34) .loading-square, .loading-item:nth-child(34) .loading-block {
  animation-delay: 5.6666666667s;
}

.loading-item:nth-child(35) {
  animation-delay: 2.3333333333s;
}
.loading-item:nth-child(35) .loading-square, .loading-item:nth-child(35) .loading-block {
  animation-delay: 5.8333333333s;
}

.loading-item:nth-child(36) {
  animation-delay: 2.4s;
}
.loading-item:nth-child(36) .loading-square, .loading-item:nth-child(36) .loading-block {
  animation-delay: 6s;
}

.loading-item:nth-child(37) {
  animation-delay: 2.4666666667s;
}
.loading-item:nth-child(37) .loading-square, .loading-item:nth-child(37) .loading-block {
  animation-delay: 6.1666666667s;
}

.loading-item:nth-child(38) {
  animation-delay: 2.5333333333s;
}
.loading-item:nth-child(38) .loading-square, .loading-item:nth-child(38) .loading-block {
  animation-delay: 6.3333333333s;
}

.loading-item:nth-child(39) {
  animation-delay: 2.6s;
}
.loading-item:nth-child(39) .loading-square, .loading-item:nth-child(39) .loading-block {
  animation-delay: 6.5s;
}

.loading-item:nth-child(40) {
  animation-delay: 2.6666666667s;
}
.loading-item:nth-child(40) .loading-square, .loading-item:nth-child(40) .loading-block {
  animation-delay: 6.6666666667s;
}

.loading-item:nth-child(41) {
  animation-delay: 2.7333333333s;
}
.loading-item:nth-child(41) .loading-square, .loading-item:nth-child(41) .loading-block {
  animation-delay: 6.8333333333s;
}

.loading-item:nth-child(42) {
  animation-delay: 2.8s;
}
.loading-item:nth-child(42) .loading-square, .loading-item:nth-child(42) .loading-block {
  animation-delay: 7s;
}

.loading-item:nth-child(43) {
  animation-delay: 2.8666666667s;
}
.loading-item:nth-child(43) .loading-square, .loading-item:nth-child(43) .loading-block {
  animation-delay: 7.1666666667s;
}

.loading-item:nth-child(44) {
  animation-delay: 2.9333333333s;
}
.loading-item:nth-child(44) .loading-square, .loading-item:nth-child(44) .loading-block {
  animation-delay: 7.3333333333s;
}

.loading-item:nth-child(45) {
  animation-delay: 3s;
}
.loading-item:nth-child(45) .loading-square, .loading-item:nth-child(45) .loading-block {
  animation-delay: 7.5s;
}

.loading-item:nth-child(46) {
  animation-delay: 3.0666666667s;
}
.loading-item:nth-child(46) .loading-square, .loading-item:nth-child(46) .loading-block {
  animation-delay: 7.6666666667s;
}

.loading-item:nth-child(47) {
  animation-delay: 3.1333333333s;
}
.loading-item:nth-child(47) .loading-square, .loading-item:nth-child(47) .loading-block {
  animation-delay: 7.8333333333s;
}

.loading-item:nth-child(48) {
  animation-delay: 3.2s;
}
.loading-item:nth-child(48) .loading-square, .loading-item:nth-child(48) .loading-block {
  animation-delay: 8s;
}

.loading-item:nth-child(49) {
  animation-delay: 3.2666666667s;
}
.loading-item:nth-child(49) .loading-square, .loading-item:nth-child(49) .loading-block {
  animation-delay: 8.1666666667s;
}

.loading-item:nth-child(50) {
  animation-delay: 3.3333333333s;
}
.loading-item:nth-child(50) .loading-square, .loading-item:nth-child(50) .loading-block {
  animation-delay: 8.3333333333s;
}

@keyframes loadingCoverAnimation {
  from {
    transform: translateY(150px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes loadingFlickerBrightness {
  0% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(1.05);
  }
}
@keyframes loadingBreakline {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}
@keyframes loadingwidth {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
/* ----------------------------- */
/* Loading Cover */
/* ----------------------------- */
.sidepanel:has(.sidebar-sizebtn) {
  container: sidebar-container/inline-size;
}

@container sidebar-container (max-width: 650px) {
  .sidepanel .layerbody div.form-item, .sidepanel .layerbody div.form-left, .sidepanel .layerbody div.form-right, .sidepanel .layerbody div.form-full {
    flex-direction: column;
    align-items: start;
    grid-row-gap: 0;
    grid-column: 1/-1;
  }
}
.sidebar-sizebtn {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 60px;
  background-color: var(--white);
  border: 1px solid var(--neutral-solid-300);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 99999;
}
.sidebar-sizebtn:hover {
  cursor: w-resize;
}
.sidebar-sizebtn .dots {
  width: 3px;
  height: auto;
  aspect-ratio: 1/1;
  background-color: var(--neutral-solid-400);
  border-radius: 3px;
}
@media screen and (max-width: 1024px) {
  .sidebar-sizebtn {
    display: none;
  }
}

/* ----------------------------- */
/* Base Properties (All Pages Common) */
/* ----------------------------- */
* {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  -webkit-font-smoothing: antialiased; /* Mac/Webkit */
  -moz-osx-font-smoothing: grayscale; /* Firefox (macOS) */
  text-rendering: optimizeLegibility; /* 글자 연결성 향상 */
}

span {
  display: inline-block;
}

p, h4, h5, h6, span {
  transform: rotate(0.03deg);
}

svg.icon {
  fill: currentColor;
  width: auto;
  height: 100%;
  aspect-ratio: 1/1;
  flex: 0 0 auto;
  min-height: 0;
  min-width: 0;
  overflow: visible;
}

img {
  display: block;
  object-fit: contain;
}

a {
  outline-color: transparent;
}

hr {
  width: 100%;
}

html {
  font-size: 16px;
} /* all component size x1 apply in desktop */
body:has(:is(.wrap, [data-side-on], [data-modal-on])) {
  overflow: hidden;
}
body:has([data-layout-type=print-a4]) {
  overflow-y: hidden;
}

button {
  all: unset;
  display: inline-flex;
  -webkit-appearance: none;
  appearance: none;
  justify-content: flex-start;
  box-sizing: border-box;
  cursor: pointer;
}
button:hover {
  cursor: pointer;
}

input { /*width: 100%;*/ }
input[type=password] {
  -webkit-text-security: disc;
}
input[type=radio]:hover {
  cursor: pointer;
}
input:hover {
  cursor: text;
}

textarea {
  -moz-appearance: none; /* Firefox 기본 테마 제거 */
  appearance: none; /* 표준화된 초기화 */
  border: none;
  box-shadow: none;
  outline: none;
  background: none; /* 필요 시 */
}

a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--neutral-opacity-900);
  border-radius: var(--btn-common-radius);
  transition: box-shadow var(--speed-basic) ease;
}

body :is(h1, h2, h3, h4, h5, h6) {
  color: var(--neutral-solid-800);
  font-weight: var(--font-bold);
}

body h1 {
  font-size: var(--text-3xl);
}

body h2 {
  font-size: var(--text-2xl);
}

body h3 {
  font-size: var(--text-lg);
}

body h4 {
  font-size: var(--text-base);
}

body h5 {
  font-size: var(--text-sm);
}

body h6 {
  font-size: var(--text-xs);
}

/* 스핀버튼 제거 (크롬, 사파리, 엣지) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 스핀버튼 제거 (파이어폭스) */
input[type=number] {
  -moz-appearance: textfield;
}

/* call svg blink problem fix */
i[data-icon] {
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  vertical-align: middle;
}

/* iBsheet link hover poiner */
.link_hover:hover {
  color: var(--blue1) !important;
  text-decoration: underline;
  cursor: pointer;
}

/* ----------------------------- */
/* All Pages Responsive Properties */
/* ----------------------------- */
@media screen and (max-width: 768px) {
  html {
    font-size: 18px;
  } /* all component size x1.25 apply in mobile */
}
/* ----------------------------- */
/* ScrollBar Properties */
/* ----------------------------- */
/* .custom-scrollbar-gnb only for gnb */
/* ScrollBar gnb Basic */
.custom-scrollbar-gnb {
  overflow-x: hidden;
  overflow-y: auto; /*scrollbar-gutter: stable;*/
  scrollbar-color: initial;
}
@media screen and (max-width: 768px) {
  .custom-scrollbar-gnb {
    scrollbar-gutter: auto;
    overflow: visible;
  }
}

.custom-scrollbar-gnb[data-gnb-mode=compressed] {
  overflow: visible;
}

/* ScrollBar gnb WebKit Setting */
.custom-scrollbar-gnb::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

/* ScrollBar gnb Track (Background) */
.custom-scrollbar-gnb::-webkit-scrollbar-track {
  background: transparent;
}

/* ScrollBar gnb Thumb */
/* ScrollBar gnb Set width 6px */
/* Scroll Area(--scrollbar-size) width 14px - border 4 * 2 = thumb width 6px */
.custom-scrollbar-gnb::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 20px;
  border: 4px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s ease;
}

/* ScrollBar gnb container:hover */
.custom-scrollbar-gnb:hover::-webkit-scrollbar-thumb {
  background-color: var(--neutral-opacity-100);
}

/* ScrollBar gnb thumb:hover 시 */
.custom-scrollbar-gnb::-webkit-scrollbar-thumb:hover {
  background-color: var(--neutral-opacity-100);
}

/* ScrollBar gnb arrow delete */
.custom-scrollbar-gnb::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/* ScrollBar gnb Show Tooltip */
nav.gridsystem[data-gnb-mode=extended].custom-scrollbar-gnb:has(.show-tooltip) {
  overflow: visible;
  padding-right: 20px;
}

/* custom-scrollbar-contents only for contents */
/* ScrollBar contents Basic */
[data-custom-scrollbar=true] {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: initial;
}

/* ScrollBar contents WebKit Setting */
[data-custom-scrollbar=true]::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

/* ScrollBar contents Track (Background) */
[data-custom-scrollbar=true]::-webkit-scrollbar-track {
  background: transparent;
}

/* ScrollBar contents Thumb */
/* ScrollBar contents Set width 6px */
/* Scroll Area(--scrollbar-size) width 14px - border 4 * 2 = thumb width 6px */
[data-custom-scrollbar=true]::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0);
  border-radius: 20px;
  border: 4px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s ease;
}

/* ScrollBar contents container:hover */
[data-custom-scrollbar=true]::-webkit-scrollbar-thumb {
  background-color: var(--neutral-opacity-200);
}

/* ScrollBar contents thumb:hover 시 */
[data-custom-scrollbar=true]::-webkit-scrollbar-thumb:hover {
  background-color: var(--neutral-opacity-200);
}

/* ScrollBar contents arrow delete */
[data-custom-scrollbar=true]::-webkit-scrollbar-button {
  display: none;
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

/*
  Design Guidelines
  Version: 1.0
  Author: Jiyeol Park
  Company: ISTN
  Created: 2025-04-03
*/
/* ----------------------------- */
/* 임시 조치 CSS */
/* ----------------------------- */
.sub_visual {
  /*display: none;*/
}

div#calendar {
  position: relative;
  z-index: 0;
}

div.contents-main:has(section.mainStatistics) {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  div.contents-main:has(section.mainStatistics) {
    display: block;
  }
}

section.mainStatistics {
  max-width: 1000px;
  width: 100%;
}

@media screen and (max-width: 768px) {
  div.layout-container[data-mobile-header-mode=topbar] main.contents-container {
    height: 100dvh;
  }
}
div.personalMain {
  max-width: 900px !important;
  margin-top: 25px;
  align-items: center;
  justify-content: center;
}

div.setting-container {
  display: flex;
  flex-direction: row;
  height: 100%;
}
@media screen and (max-width: 768px) {
  div.setting-container {
    flex-direction: column;
  }
}

div.setting-left-area {
  width: 190px;
  padding-block: 30px;
  padding-left: 30px;
  flex-shrink: 0;
  border-right: 1px solid var(--neutral-opacity-200);
}
@media screen and (max-width: 768px) {
  div.setting-left-area {
    width: 100%;
    padding: 0;
  }
}

div.setting-right-area {
  flex: 1;
  overflow-y: auto;
  display: flex;
  justify-content: center;
}

div.setting-contents {
  padding-block: 30px;
  padding-left: 60px;
  padding-right: 30px;
  max-width: 1200px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  div.setting-contents {
    padding: 0;
  }
}

div.setting-paystub-title {
  display: flex;
  gap: 15px;
  align-items: center;
}
@media screen and (max-width: 768px) {
  div.setting-paystub-title {
    flex-direction: column;
    align-items: start;
    margin-top: 15px;
  }
}

div.setting-profile-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

div.setting-profile-edit-button-container.desktop {
  display: flex;
  gap: 5px;
}
@media screen and (max-width: 768px) {
  div.setting-profile-edit-button-container.desktop {
    display: none;
  }
}

div.setting-profile-edit-button-container.mobile {
  display: none;
  flex-direction: row;
  gap: 15px;
  padding: 10px;
  border-top: 1px solid var(--neutral-opacity-200);
}
@media screen and (max-width: 768px) {
  div.setting-profile-edit-button-container.mobile {
    display: flex;
  }
}

@media screen and (max-width: 768px) {
  div.setting-profile-edit-button-container:has(:nth-child(2)) > * {
    width: 50%;
  }
}

@media screen and (max-width: 768px) {
  .mobile-safe-padding {
    padding-inline: var(--contents-mobile-padding);
  }
}

/*
  Design Guidelines
  Version: 1.0
  Author: Jiyeol Park
  Company: ISTN
  Created: 2025-04-03
*/
/* ----------------------------- */
/* GNB Properties */
/* ----------------------------- */
/* connected server info styles */
/* extended */
#gnb-header .server_info {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--gray-500);
  top: 2px;
  left: 2px;
}

/* compressed */
nav.gnb[data-gnb-mode=compressed] #gnb-header .server_info {
  position: relative;
  top: 0;
  left: 0;
}

/* GNB Common */
nav.gnb {
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1;
}

/* GNB Tooltip Show/Hide */
nav.gnb[data-gnb-mode=compressed] #gnb-switch:hover .tooltip,
nav.gnb[data-gnb-mode=compressed] #user-menu:hover[aria-expanded=false] .tooltip,
nav.gnb[data-gnb-mode=compressed] #notifications:hover[aria-expanded=false] .tooltip,
nav.gnb[data-gnb-mode=compressed] #add-new:hover .tooltip,
nav.gnb[data-gnb-mode=compressed] .devicemode-switch:hover .tooltip,
nav.gnb[data-gnb-mode=compressed] :is(a, button[aria-expanded=false]).submenu:hover .tooltip {
  opacity: 1;
}

/* GNB Common Notifications */
#notifications svg {
  fill: var(--yellow-400);
  display: none;
}

#notifications[data-icon-exception=true] svg.noti-new {
  display: block;
}

#notifications[data-icon-exception=false] svg.noti-none {
  display: block;
}

#notifications[data-icon-exception=false] span[class*=label-] {
  display: none;
}

@media screen and (max-width: 768px) {
  button#notifications {
    padding: 10px;
  }
  button#notifications > div {
    padding: 0;
  }
  button#notifications span {
    display: none;
  }
}
/* GNB Common Notifications empty */
.notifications-empty-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  animation: fadeIn var(--speed-basic) ease-in forwards;
}

.notifications-empty-container svg {
  fill: var(--neutral-opacity-300);
}

.notifications-empty-container span {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--neutral-opacity-300);
}

/* GNB Common Notifications not have new items, announce polite */
.layerbody:has(.notifications-list > li) .notifications-empty-container {
  display: none;
}

.notifications-container .layerbody:not(:has(.notifications-list > li)) {
  align-items: center;
  display: flex;
  justify-content: center;
  scrollbar-gutter: auto;
}

/* GNB Extended / Compressed Switch */
@media screen and (max-width: 768px) {
  #gnb-switch {
    display: none;
  }
}

#gnb-switch :is(.close, .open) {
  display: none;
}

nav.gnb[data-gnb-mode=extended] #gnb-switch .close {
  display: inline-flex;
}

nav.gnb[data-gnb-mode=compressed] #gnb-switch .open {
  display: inline-flex;
}

/* GNB Extended */
/* GNB Extended header */
#gnb-header {
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: center;
  transition: 0.5s;
}
@media screen and (max-width: 768px) {
  #gnb-header {
    width: auto;
  }
}

.gnb-logo {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gnb-logo img {
  height: 100%;
  width: auto;
}

/* GNB Extended User */
#gnb-user-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gnb-user-area {
  display: flex;
  position: relative;
  justify-content: space-between;
  gap: 5px;
  align-items: center;
  padding: var(--menulist-padding);
  width: 100%;
}

@media screen and (max-width: 768px) {
  .gnb-user-area .gnb-user {
    display: none;
  }
  .gnb-user-area #user-menu > svg {
    display: none;
  }
}
.gnb-user {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
@media screen and (max-width: 768px) {
  .gnb-user {
    display: none;
  }
}

.gnb-user-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

/* GNB Extended Thumbnail */
nav.gnb[data-gnb-mode=extended] #gnb-user-container button[aria-expanded] .thumb {
  display: none;
}

/* GNB Extended user menu */
.user-menu {
  position: absolute;
  z-index: 9;
}

#user-menu[aria-expanded=false] ~ .user-menu {
  display: none;
}

@media screen and (max-width: 768px) {
  #user-menu {
    padding: 0;
  }
}
nav.gnb[data-gnb-mode=extended] #gnb-user-container .user-menu {
  top: 100%;
  right: 5px;
}

@media screen and (max-width: 768px) {
  nav.gnb[data-gnb-mode=extended] #gnb-user-container .user-menu {
    top: calc(100% + 5px);
    right: 0;
  }
}
nav.gnb[data-gnb-mode=compressed] #gnb-user-container .user-menu {
  top: 0;
  left: calc(100% + 7px);
}

/* GNB Extended Notifications */
.notifications {
  width: 320px;
}

/* if notifications aria extended is true, .notifications visible */
#notifications[aria-expanded=true] ~ .notifications {
  display: block;
}

.notifications-container:has(#notifications) .notifications :is(a, button) {
  width: auto;
}

.notifications-container:has(#notifications) button[aria-expanded=false]:hover {
  background-color: var(--yellow-50);
}

.notifications-container:has(#notifications) button[aria-expanded=true] {
  background-color: var(--yellow-100);
}

.notifications-container:has(#notifications) .layerbody {
  padding: 10px;
  padding-right: calc(10px - var(--scrollbar-size));
  min-height: 250px;
  max-height: 600px;
  overflow-y: auto;
}

.notifications-container:has(#notifications) .notifications-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notifications-container:has(#notifications) .notifications-list > li {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: var(--yellow-50);
  border-radius: var(--layer-radius);
  padding: 15px;
  transition: var(--speed-basic) ease-out;
}

.notifications-container:has(#notifications) .notifications-list > li a:hover {
  text-decoration: underline;
}

.notifications-container:has(#notifications) .notifications-list > li.read {
  background-color: var(--slate-50);
}

.notifications-container:has(#notifications) .notifications-list > li.read button:has(.check) {
  display: none;
}

.notifications-form {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.notifications-header-btn-container {
  flex-shrink: 0;
}

.notifications-link-text {
  font-size: var(--text-sm);
  margin-top: 7px;
  font-weight: var(--font-medium);
  color: var(--neutral-solid-700);
  min-height: 45px;
}

.notifications-date {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--neutral-opacity-400);
}

/* GNB Extended Notifications Position */
.notifications-container button[aria-expanded] {
  anchor-name: --notifications;
}

.notifications {
  position: absolute;
  top: calc(anchor(--notifications top) - 5px);
  left: calc(anchor(--notifications right) + 15px);
}

/* GNB Extended User Details */
.gnb-user-info-namebox {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--neutral-solid-800);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.gnb-user-info-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gnb-user-info-label {
  flex-shrink: 0;
}

.gnb-user-info-email {
  color: var(--neutral-solid-400);
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* GNB Menu List - Extended Properties */
.gnb-menu.menulist > li:has(> .submenu[aria-expanded=true]) {
  background-color: var(--neutral-solid-50);
}

.gnb-menu.menulist .depth-deco {
  display: flex;
  flex-direction: column;
  border-left: 0.5px solid var(--neutral-solid-200);
  margin-left: 20px;
  padding-left: 15px;
}

.gnb-menu > li {
  padding: 4px;
}

@media screen and (max-width: 768px) {
  .gnb-menu > li {
    padding: 0;
  }
  .gnb-menu.menulist .depth-deco {
    margin-left: 26px;
    padding: 5px 5px 5px 15px;
  }
}
/* GNB Compressed */
/* GNB Compressed Common */
nav.gnb[data-gnb-mode=compressed].custom-scrollbar {
  scrollbar-gutter: auto;
}

/* GNB Compressed header */
nav.gnb[data-gnb-mode=compressed] #gnb-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

nav.gnb[data-gnb-mode=compressed] #gnb-header .gnb-logo {
  display: none;
}

/* GNB Compressed User Container */
nav.gnb[data-gnb-mode=compressed] #gnb-user-container {
  align-items: center;
}

/* GNB Compressed User */
nav.gnb[data-gnb-mode=compressed] #gnb-user-container .gnb-user-area {
  display: block;
  padding: 0;
  width: auto;
}

nav.gnb[data-gnb-mode=compressed] #gnb-user-container .gnb-user {
  display: none;
}

nav.gnb[data-gnb-mode=compressed] #gnb-user-container .gnb-user-area button[aria-expanded] {
  display: block;
  height: auto;
}

@media screen and (max-width: 768px) {
  #gnb-user-container .gnb-user-area button[aria-expanded] {
    height: auto;
  }
}
/* GNB Compressed Thumbnail */
nav.gnb[data-gnb-mode=compressed] #gnb-user-container button[aria-expanded] .thumb {
  display: flex;
}

nav.gnb[data-gnb-mode=compressed] #gnb-user-container button[aria-expanded] > svg {
  display: none;
}

/* GNB Compressed Notifications */
.notifications-container:has(#notifications) > li {
  background-color: transparent;
}

nav.gnb[data-gnb-mode=compressed] .notifications-container button[aria-expanded] {
  width: 100%;
}

nav.gnb[data-gnb-mode=compressed] #gnb-user-container button[aria-expanded] span:not(.tooltip, .thumb-name) {
  display: none;
}

nav.gnb[data-gnb-mode=compressed] #gnb-user-container button[aria-expanded] div {
  padding: 0;
}

/* GNB Compressed add-new */
nav.gnb[data-gnb-mode=compressed] #add-new {
  height: auto;
  padding: 7px;
}

nav.gnb[data-gnb-mode=compressed] #add-new span {
  display: none;
}

/* GNB Compressed MenuList */
nav.gnb[data-gnb-mode=compressed] .gnb-menu {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

nav.gnb[data-gnb-mode=compressed] .gnb-menu .depth-deco {
  display: none;
}

/* GNB Compressed MenuItem */
nav.gnb[data-gnb-mode=compressed] .gnb-menu :is(a, button).submenu,
nav.gnb[data-gnb-mode=compressed] .notifications-container > li > button {
  padding: 7px;
  width: 34px;
  height: 34px;
}

nav.gnb[data-gnb-mode=compressed] .gnb-menu :is(a, button)[class*=menuitem-] > div {
  padding: 0;
}

nav.gnb[data-gnb-mode=compressed] .gnb-menu :is(a, button).submenu > div > span {
  display: none;
}

nav.gnb[data-gnb-mode=compressed] .gnb-menu > li {
  align-items: center;
}
nav.gnb[data-gnb-mode=compressed] .gnb-menu > li > button.submenu > svg {
  display: none;
}
nav.gnb[data-gnb-mode=compressed] .gnb-menu > li:has(.selected) > button.submenu > div > svg.icon {
  fill: var(--blue-600);
}

/* add new */
@media screen and (max-width: 768px) {
  #add-new {
    display: none;
  }
}
/* GNB Mobile */
/* GNB Mobile Menu Basic */
.mobile-menu-title-container {
  padding-block: 15px;
  padding-inline: var(--contents-mobile-padding);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.mobile-menu-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--black);
}

#mobile-menu-btn {
  display: none;
}

.gnb-menu-container {
  transition: opacity var(--speed-basic);
}

.gnb-menu-container[data-mobile-open=false] .mobile-menu-title-container {
  display: none;
}

.gnb-menu-container[data-mobile-open=true] .mobile-menu-title-container {
  display: flex;
}

/* logout button hide */
#gnb-main-menu > li:has(.log-out) {
  display: none;
}

@media screen and (max-width: 768px) {
  #mobile-menu-btn {
    display: inline-flex;
  }
  /* GNB Mobile Menu List */
  .gnb-menu-container[data-mobile-open=false] {
    display: none;
  }
  .gnb-menu-container[data-mobile-open=true] {
    display: flex;
    flex-direction: column;
    position: fixed;
    background-color: var(--white);
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #gnb-main-menu {
    display: flex;
    overflow-y: auto;
    overflow-x: hidden;
    flex-direction: column;
    gap: 5px;
    padding-inline: var(--contents-mobile-outer-padding);
  }
  .notifications-container:has(#notifications) .layerbody {
    max-height: calc(100% - 55px);
  }
  .notifications {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    position: fixed;
    top: 0;
    left: 0;
    margin: 5px;
  }
  /* logout button show */
  #gnb-main-menu > li:has(.log-out) {
    display: block;
  }
}
/* GNB PC Mobile Switch Icon */
.devicemode-switch svg {
  display: none;
}

body.pcDevice .devicemode-switch .icon-mobilephone {
  display: block;
}

body.mobileDevice .devicemode-switch .icon-desktop {
  display: block;
}

/* GNB subMenu Properties */
/* GNB submenu is only for layer menus (compressed menus) */
/* GNB subMenu Basic */
div.submenu-layer {
  width: 280px;
} /*임시로 fixed로 지정함, 추후 각 메뉴에 align 될 수 있게 작업*/
/* GNB subMenu Position */
li:has(> button.submenu) {
  position: relative;
}

.submenu-layer {
  position: absolute;
  top: -2px;
  left: calc(100% + 10px);
}

/* GNB subMenu text break */
/* extended menus */
nav.gnb[data-gnb-mode=extended] ul#gnb-main-menu > li > :is(a, button)[class*=menuitem-] > div,
nav.gnb[data-gnb-mode=extended] ul#gnb-main-menu ul.depth-deco :is(a, button)[class*=menuitem-] > div {
  overflow: hidden;
}

nav.gnb[data-gnb-mode=extended] ul#gnb-main-menu > li > :is(a, button)[class*=menuitem-] > div span,
nav.gnb[data-gnb-mode=extended] ul#gnb-main-menu ul.depth-deco :is(a, button)[class*=menuitem-] > div span {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: max-content;
}

nav.gnb[data-gnb-mode=extended] ul#gnb-main-menu > li > :is(a, button)[class*=menuitem-] > svg,
nav.gnb[data-gnb-mode=extended] ul#gnb-main-menu ul.depth-deco :is(a, button)[class*=menuitem-] > svg {
  flex-shrink: 0;
}

/* compressed menus */
div.submenu-layer .menulist :is(a, button)[class*=menuitem-] > div {
  overflow: hidden;
}

div.submenu-layer .menulist :is(a, button)[class*=menuitem-] > svg {
  flex-shrink: 0;
}

/*
  Design Guidelines
  Version: 1.0
  Author: Jiyeol Park
  Company: ISTN
  Created: 2025-04-03
*/
/* ----------------------------- */
/* Grid System Properties */
/* ----------------------------- */
/* The Grid System provides consistent margins and columns of layout */
/* naming rule : nav.gridsystem.extended */
/* layout-container */
div.layout-container {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  div.layout-container {
    flex-direction: column;
    height: 100dvh;
  }
}

/* when mobile, layout-container mode switching */
@media screen and (max-width: 768px) {
  div.layout-container[data-mobile-header-mode=topbar] nav.gnb {
    display: none;
  }
  div.layout-container[data-mobile-header-mode=nav] header.topbar {
    display: none;
  }
}
/* footer hidden */
div.layout-container footer {
  display: none;
}

/* GNB */
/* GNB gridsystem not apply column system */
nav.gnb.gridsystem {
  height: 100dvh;
  border-right: 1px solid var(--neutral-opacity-200);
}
@media screen and (max-width: 768px) {
  nav.gnb.gridsystem {
    border-right: none;
  }
}

nav.gnb.gridsystem[data-gnb-mode=extended] {
  width: var(--gnb-extend-width);
  padding-block: var(--gnb-extend-top-padding);
  padding-inline: var(--gnb-extend-side-padding); /*padding-right: calc(var(--gnb-extend-side-padding) - var(--scrollbar-size));*/
}

nav.gnb.gridsystem[data-gnb-mode=compressed] {
  width: var(--gnb-compressed-width);
  padding: var(--gnb-compressed-top-padding) var(--gnb-compressed-side-padding);
}

@media screen and (max-width: 768px) {
  nav#gnb.gridsystem {
    height: auto;
    min-height: 75px;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    padding-inline: var(--contents-mobile-padding);
    padding-block: 0;
    border-bottom: 1px solid var(--neutral-solid-200);
  }
  nav.gnb:is([data-gnb-mode=extended], [data-gnb-mode=compressed]) #gnb-user-container {
    flex-direction: row;
    gap: 5px;
    align-items: center;
  }
  nav.gnb:is([data-gnb-mode=extended], [data-gnb-mode=compressed]) #gnb-user-container button[aria-expanded]#user-menu {
    display: none;
  }
  nav.gnb:is([data-gnb-mode=extended], [data-gnb-mode=compressed]) .gnb-user-area {
    padding: 0;
  }
}
/* CONTENTS */
/* CONTENTS width */
div.layout-container:has(nav.gnb.gridsystem[data-gnb-mode=extended]) .contents-container {
  width: calc(100% - var(--gnb-extend-width));
}

div.layout-container:has(nav.gnb.gridsystem[data-gnb-mode=compressed]) .contents-container {
  width: calc(100% - var(--gnb-compressed-width));
}

@media screen and (max-width: 768px) {
  div.layout-container:has(:is(nav.gnb.gridsystem[data-gnb-mode=extended], nav.gridsystem[data-gnb-mode=compressed])) div.wrap main.contents {
    width: 100%;
  }
}
.contents-container {
  display: flex;
  height: 100dvh;
  overflow-y: hidden;
  flex-direction: column;
  transition: width var(--speed-basic) ease-out;
}

@media screen and (max-width: 768px) {
  div.layout-container:has(nav.gnb.gridsystem[data-gnb-mode=extended]) .contents-container {
    width: 100%;
  }
  div.layout-container[data-mobile-header-mode=topbar] .contents-container {
    height: 100dvh;
  }
}
/* HEADER */
header.gridsystem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-height);
  width: 100%;
  border-bottom: 1px solid var(--neutral-solid-200);
  padding-inline: var(--header-padding);
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  header.gridsystem {
    position: relative;
    padding-inline: var(--contents-mobile-outer-padding);
  }
}

/* MAIN */
main > section.contents-area {
  flex: 1;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  main > section.contents-area {
    overflow-y: auto;
  }
}

/* MAIN align center */
.gridsystem-center {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(12, var(--contents-desktop-column));
  column-gap: var(--contents-desktop-gap);
  margin: 0 auto;
  padding-inline: var(--contents-desktop-padding);
}

/* MAIN align stretch */
.gridsystem-stretch {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--contents-desktop-gap);
  width: 100%;
  padding-inline: var(--contents-desktop-padding);
}

/* CONTENTS */
.contents-area {
  overflow-y: auto;
}

.contents-main {
  height: 100%;
}

/* cols */
/* center */
/* Desktop */
.center-col-1 {
  grid-column-start: 6;
  grid-column-end: span 1;
}

.center-col-2 {
  grid-column-start: 6;
  grid-column-end: span 2;
}

.center-col-3 {
  grid-column-start: 5;
  grid-column-end: span 3;
}

.center-col-4 {
  grid-column-start: 5;
  grid-column-end: span 4;
}

.center-col-5 {
  grid-column-start: 4;
  grid-column-end: span 5;
}

.center-col-6 {
  grid-column-start: 4;
  grid-column-end: span 6;
}

.center-col-7 {
  grid-column-start: 3;
  grid-column-end: span 7;
}

.center-col-8 {
  grid-column-start: 3;
  grid-column-end: span 8;
}

.center-col-9 {
  grid-column-start: 2;
  grid-column-end: span 9;
}

.center-col-10 {
  grid-column-start: 2;
  grid-column-end: span 10;
}

.center-col-11 {
  grid-column-start: 1;
  grid-column-end: span 11;
}

.center-col-12 {
  grid-column-start: 1;
  grid-column-end: span 12;
}

/* mobile */
@media screen and (max-width: 768px) {
  .center-col-1,
  .center-col-2,
  .center-col-3,
  .center-col-4,
  .center-col-5,
  .center-col-6,
  .center-col-7,
  .center-col-8,
  .center-col-9,
  .center-col-10,
  .center-col-11,
  .center-col-12 {
    grid-column-start: 1;
    grid-column-end: span 6;
  }
}
/* Switching width thresholds */
/* modal */
@media screen and (max-width: 792px) {
  div.modal.gridsystem:has(.center-col-8) {
    display: flex;
  }
  div.modal.gridsystem:has(.center-col-8) div[class*=layer-] {
    width: 100%;
  }
}
@media screen and (max-width: 888px) {
  div.modal.gridsystem:has(.center-col-9) {
    display: flex;
  }
  div.modal.gridsystem:has(.center-col-9) div[class*=layer-] {
    width: 100%;
  }
}
@media screen and (max-width: 984px) {
  div.modal.gridsystem:has(.center-col-10) {
    display: flex;
  }
  div.modal.gridsystem:has(.center-col-10) div[class*=layer-] {
    width: 100%;
  }
}
@media screen and (max-width: 1080px) {
  div.modal.gridsystem:has(.center-col-11) {
    display: flex;
  }
  div.modal.gridsystem:has(.center-col-11) div[class*=layer-] {
    width: 100%;
  }
}
@media screen and (max-width: 1176px) {
  div.modal.gridsystem:has(.center-col-12) {
    display: flex;
  }
  div.modal.gridsystem:has(.center-col-12) div[class*=layer-] {
    width: 100%;
  }
}
/* ----------------------------- */
/* Layout Properties */
/* ----------------------------- */
/* global dim */
#global-dim {
  display: none;
  opacity: 0;
  position: fixed;
  z-index: 100;
  background-color: var(--neutral-opacity-500);
  width: 100%;
  height: 100dvh;
  transition: opacity var(--speed-slowest) cubic-bezier(0.16, 1, 0.3, 1), display 0s var(--speed-slowest) allow-discrete;
  transition-behavior: allow-discrete;
  transform: translateZ(0);
}

/* global dim working */
body:has([data-modal-on=true]) #global-dim {
  display: block;
  opacity: 1;
  transition: opacity var(--speed-basic) ease, display 0s allow-discrete;
  transition-behavior: allow-discrete;
  transform: translateZ(0);
}
@starting-style {
  body:has([data-modal-on=true]) #global-dim {
    opacity: 0;
  }
}

/* modal */
.modal {
  position: absolute;
  z-index: 101;
  width: 100%;
  min-height: 100dvh;
}

.modal.gridsystem {
  display: grid;
  justify-content: center; /*align-items: center;*/
  grid-template-columns: repeat(12, var(--contents-desktop-column));
  column-gap: var(--contents-desktop-gap);
  margin: 0 auto;
  padding-inline: var(--contents-desktop-padding);
  animation: modalShow 0.25s ease-out;
  transition: filter var(--speed-fast);
  filter: brightness(1);
  padding-block: var(--layer-safe-padding);
}
@media screen and (max-width: 768px) {
  .modal.gridsystem {
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 12px;
    padding: var(--contents-mobile-outer-padding);
  }
}

/* alert */
/* Alert은 명칭 구분을 위해 Alert 뒤에 wrapper를 붙임 */
.alert-wrapper {
  position: absolute;
  top: 0;
  z-index: 111;
  width: 100vw;
  min-height: 100dvh;
}

.alert-wrapper.gridsystem {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  padding-inline: var(--contents-desktop-padding);
  animation: modalShow var(--speed-basic) ease-out;
  transition: filter var(--speed-fast);
  filter: brightness(1);
  padding-block: var(--layer-safe-padding);
}

@keyframes modalShow {
  from {
    transform: translateY(-15px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.modal.gridsystem[data-modal-on=false] {
  display: none;
}

/* 최상단 modal 제외하고 나머지는 dim 처리 */
/* 자신 이후에 같은 선택자가 없으면 => 마지막임 */
div[data-modal-index]:not(:has(~ div[data-modal-index])) div:is([class*=layer-], [class*=alert-]) {
  filter: none;
}
div[data-modal-index]:not(:has(~ div[data-modal-index])) .popup-layer {
  overflow-y: auto;
}

/* 이후에 같은 선택자가 있으면 => 마지막이 아님 */
div[data-modal-index]:has(~ div[data-modal-index]) div:is([class*=layer-], [class*=alert-]) {
  filter: brightness(0.5);
}

/* 모달에서, 상세 클릭 후 사이드 출력 시 최상위 모달은 brightness 유지 */
div[data-modal-index]:has(+ div[data-modal-index] div.sidepanel) div[class*=layer-] {
  filter: brightness(1);
}

.modal [class*=layer-] {
  transition: filter var(--speed-basic);
}

/* side */
.sidepanel-position {
  max-width: max-content;
  right: 0;
  padding: 15px;
  animation: sidePanelShow var(--speed-basic) ease-out;
}
@media screen and (max-width: 768px) {
  .sidepanel-position {
    max-width: none;
  }
}

@keyframes sidePanelShow {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.sidepanel {
  width: min(var(--panel-width, 600px), 100vw - 30px);
}
@media screen and (max-width: 768px) {
  .sidepanel {
    width: 100%;
  }
}

.sidepanel div[class*=layer-] {
  height: calc(100dvh - 30px);
}

[class*=paragraph-][data-view-page] {
  grid-row-gap: 7px;
}

/* Full Popup */
/*
  Design Guidelines
  Version: 1.0
  Author: Jiyeol Park
  Company: ISTN
  Created: 2025-04-03
*/
/* ----------------------------- */
/* Header Properties */
/* ----------------------------- */
/* HEADER Basics */
.header-title-text {
  color: var(--black);
  font-size: var(--text-lg);
  font-weight: var(--font-extrabold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 768px) {
  .header-title-text {
    font-size: var(--text-base);
  }
}

.header-title {
  display: flex;
  flex: 1;
  min-width: 0;
}
@media screen and (max-width: 768px) {
  .header-title {
    justify-content: center;
  }
}

.header-guide {
  min-width: var(--btn-lg-height);
}

.header-guide .guide-mobile {
  display: none;
}

@media screen and (max-width: 768px) {
  .header-guide .guide-pc {
    display: none;
  }
  .header-guide .guide-mobile {
    display: flex;
  }
}
.header-title, .header-guide {
  display: flex;
  align-items: center;
  gap: 10px;
}

#header-prev {
  display: none;
}
@media screen and (max-width: 768px) {
  #header-prev {
    display: flex;
  }
}

/* HEADER Setting Dropdown menu position */
.header-setting {
  position: relative;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .header-setting {
    position: static;
  }
}

div.header-left ul.header-setting-dropdown, div.header-right ul.header-setting-dropdown {
  position: absolute;
  top: calc(100% + 5px);
  z-index: 9;
}
div.header-left ul.header-setting-dropdown {
  left: 0;
}
div.header-right ul.header-setting-dropdown {
  right: 0;
}

/* HEADER Setting Dropdown menu */
ul.header-setting-dropdown {
  position: absolute;
  z-index: 9;
  top: calc(100% + 5px);
}
@media screen and (max-width: 768px) {
  ul.header-setting-dropdown {
    top: calc(100% - 5px);
    left: var(--contents-mobile-outer-padding);
    width: calc(100% - var(--contents-mobile-outer-padding) * 2);
  }
}

/* HEADER Setting Dropdown menu tooltip */
@media screen and (min-width: 1024px) {
  button[aria-controls=header-setting-dropdown][aria-expanded=true] ~ ul.header-setting-dropdown a:hover span.tooltip {
    opacity: 1;
    transition: opacity var(--speed-basic);
  }
}
/* HEADER Setting Button Toggle */
button[aria-controls=header-setting-dropdown][aria-expanded=false] ~ ul.header-setting-dropdown {
  display: none;
}

/* HEADER Help Button */
div.help-container:has(button[class*=help-][aria-pressed=true]) .help {
  display: inline-block;
  animation: HelpTransition var(--speed-basic) ease;
}

@keyframes HelpTransition {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media screen and (max-width: 768px) {
  .help-container {
    display: none;
  }
}
/* HEADER Subtitle */
.header-subtitle {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--neutral-opacity-400);
}
@media screen and (max-width: 768px) {
  .header-subtitle {
    display: none;
  }
}

/* HEADER Unit */
.header-unit {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--neutral-opacity-600);
}
@media screen and (max-width: 768px) {
  .header-unit {
    display: none;
  }
}

/* Other Animations & Interactions */
/* when gnb switching from compressed to extended mode, animations */
nav.gnb {
  transition: width var(--speed-basic) ease-out;
}

nav.gnb[data-gnb-mode=compressed] > * {
  opacity: 1;
  animation: gnbExtendedToCompressed var(--speed-fastest) ease-out backwards;
  animation-delay: var(--speed-basic);
}

@keyframes gnbExtendedToCompressed {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
nav.gnb[data-gnb-mode=extended] > * {
  opacity: 1;
  animation: gnbCompressedToExtended var(--speed-fastest) ease-out backwards;
  animation-delay: var(--speed-basic);
}

@keyframes gnbCompressedToExtended {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* stop animation when switching gnb mode */
.no-anim #gnb,
.no-anim #gnb-header,
.no-anim #gnb-user-container,
.no-anim .gnb-menu,
.no-amim main.sub_contents {
  transition: none !important;
}

/* when gnb main menu expand submenu, animations  */
/* only for desktop mode */
@media screen and (min-width: 1024px) {
  #gnb-main-menu .submenu[aria-expanded=true] + ul.depth-deco {
    opacity: 1;
    animation: gnbMenuExpand var(--speed-basic) ease-out backwards;
  }
  @keyframes gnbMenuExpand {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}
/* when notification expanded, gnb menu opacity (only for extended mode) */
nav.gnb[data-gnb-mode=extended]:has(#notifications[aria-expanded=true]) .gnb-menu-container {
  transition: opacity var(--speed-basic);
  opacity: 0.3;
}

/* HOME nav & header settings */
@media screen and (max-width: 768px) {
  main:has(.home) header {
    display: none;
  }
}
/* NOT HOME nav & header settings */
/*
  Design Guidelines
  Version: 1.0
  Author: Jiyeol Park
  Company: ISTN
  Created: 2025-04-03
*/
/* Popup Basic */
.popup-layer {
  overflow-y: hidden;
}

/* ----------------------------- */
/* Layer Properties */
/* ----------------------------- */
/* naming rule : div.layer-color */
/* apply html examples : <div class="layer-slate"></div> */
/* Layer Basic */
div[class*=layer-] {
  overflow: hidden;
  background-color: var(--white);
  border-radius: var(--layer-radius);
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
  z-index: 99;
  border: 1px solid var(--neutral-solid-300);
  display: flex;
  flex-direction: column;
  height: max-content;
  margin: auto 0;
}

/* Layer Color */
div[class*=layer-][class*=-slate] {
  border: 1px solid var(--slate-300);
}

div[class*=layer-][class*=-mono] {
  border: 1px solid var(--neutral-solid-300);
}

/* Layer Header */
/* Layer Header Basic */
div[class*=layerheader-] {
  align-items: center;
}

div[class*=layerheader-]:is([class*=-sm], [class*=-md], [class*=-lg]) {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* Layer Header Size */
div[class*=layerheader-][class*=-sm] {
  height: var(--layerheader-height-sm);
  padding-left: var(--layerheader-padding-left-sm);
  padding-right: var(--layerheader-padding-right-sm);
}

div[class*=layerheader-][class*=-md] {
  height: var(--layerheader-height-md);
  padding-left: var(--layerheader-padding-left-md);
  padding-right: var(--layerheader-padding-right-md);
}

div[class*=layerheader-][class*=-lg] {
  height: var(--layerheader-height-lg);
  padding-left: var(--layerheader-padding-left-lg);
  padding-right: var(--layerheader-padding-right-lg);
}

/* Layer Header Title */
div.layerheader-title {
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

div[class*=layerheader-][class*=-sm] .layerheader-title,
div[class*=layerheader-][class*=-md] .layerheader-title,
div[class*=layerheader-][class*=-lg] .layerheader-title {
  gap: var(--layerheader-title-gap);
}

/* Layer Header Title Icon Size */
div[class*=layerheader-][class*=-sm] svg,
div[class*=layerheader-][class*=-md] svg,
div[class*=layerheader-][class*=-lg] svg {
  height: var(--icon-sm);
}

/* Layer Header Title Color Variants */
div[class*=layer-][class*=-mono] {
  color: var(--neutral-solid-700);
}

div[class*=layer-][class*=-mono] > [class*=layerheader-] {
  background-color: var(--neutral-solid-100);
  border-bottom: 1px solid var(--neutral-solid-300);
}

div[class*=layer-][class*=-mono] .layerheader-title svg {
  fill: var(--neutral-solid-600);
}

div[class*=layer-][class*=-slate] {
  color: var(--slate-700);
}

div[class*=layer-][class*=-slate] > [class*=layerheader-] {
  background-color: var(--slate-100);
  border-bottom: 1px solid var(--slate-300);
}

div[class*=layer-][class*=-slate] .layerheader-title svg {
  fill: var(--slate-600);
}

/* Layer button group */
div[class*=layer-] .layerbtngroup-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  border-radius: 7px;
  padding: 7px;
}
@media screen and (max-width: 768px) {
  div[class*=layer-] .layerbtngroup-section {
    width: 100%;
    justify-content: space-between;
    overflow-x: auto;
  }
}
div[class*=layer-] .layerbtngroup-section .layerbtngroup-section-left, div[class*=layer-] .layerbtngroup-section .layerbtngroup-section-right {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
}

/* Layer Body */
.layerbody {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--layer-padding);
  padding-top: calc(var(--layer-padding) / 2);
}
@media screen and (max-width: 768px) {
  .layerbody {
    padding: var(--contents-mobile-inner-padding);
    padding-top: calc(var(--contents-mobile-inner-padding) / 2);
  }
}

/* Layer Body Exceptions Settings */
.layerbody:has(.menulist) {
  padding: 0.625rem; /* 10px */
}

/* Forms */
/* Form supports only div directions */
div.layerform-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  text-align: left;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--black);
}

div.layerform-inline {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 25px;
  text-align: left;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--black);
}

div.layertitle {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  padding: var(--layer-padding);
  padding-bottom: calc(var(--layer-padding) / 2);
  padding-right: 40px;
}
@media screen and (max-width: 768px) {
  div.layertitle {
    padding-top: calc(var(--layer-padding) / 3 * 2);
    padding-inline: var(--contents-mobile-inner-padding);
    padding-bottom: calc(var(--layer-padding) / 4);
    flex-direction: row;
    align-items: center;
  }
  div.layertitle:has(.layerbtngroup-section) {
    flex-direction: column;
    gap: 10px;
    align-items: start;
  }
}
div.layertitle:has(.layerbtngroup-section) {
  justify-content: space-between;
  gap: 30px;
}
@media screen and (max-width: 768px) {
  div.layertitle:has(> .layertitle-container) {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
}
@media screen and (max-width: 768px) {
  div.layertitle:has(> .layertitle-container) .layerbtngroup-section {
    overflow: hidden;
  }
}
div.layertitle .layertitle-title {
  text-wrap: balance;
  word-break: keep-all;
}
div.layertitle > .layertitle-date {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--neutral-solid-400);
}
@media screen and (max-width: 768px) {
  div.layertitle > .layertitle-date {
    display: none;
  }
}
div.layertitle > .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}
@media screen and (max-width: 768px) {
  div.layertitle > .close-btn {
    position: static;
    margin: auto 0 auto auto;
  }
}

.layertitle-container {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
}

.layertitle-revision {
  position: relative;
}
@media screen and (max-width: 768px) {
  .layertitle-revision {
    position: static;
  }
}

.layerbody:has(> div.layerform-inline) {
  padding: 25px 15px 50px 30px;
}

.layerbody:has(> div.layerform-block) {
  padding: 30px;
}

.layerbody:has(> div.layerform-address) {
  padding: 30px;
}
@media screen and (max-width: 768px) {
  .layerbody:has(> div.layerform-address) {
    padding: var(--contents-mobile-inner-padding);
  }
}

/* Layer Body Textbox Settings */
div.layerbody-textbox {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Layer Sticker default size */
img.layerform-sticker {
  max-width: 60px;
}

/* Layer Header Button Area Setting */
div.layerheader-btn {
  display: flex;
  flex-direction: row;
  gap: 0.625rem; /* 10px */
}

/* Layer Bottom */
div.layerbottom {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  border-top: 1px solid var(--neutral-solid-300);
  background-color: var(--neutral-opacity-50);
  padding: 0.625rem; /* 10px */
}

div.layerbottom > div {
  gap: 0.312rem;
  display: flex; /* 5px */
}

/* Layer Bottom 하위 버튼만 너비 변경 */
div:is(.layerbottom, .centerbottom) button {
  padding-inline: 1.5rem;
}

/* Layer Bottom align */
/* basic align : right, 2 groups : space-between */
/* when layerbottom has only 1 btn groups */
div.layerbottom:has(> div:nth-of-type(1)):not(:has(> div:nth-of-type(2))) {
  justify-content: end;
}

/* when layerbottom has 2 btn groups */
div.layerbottom:has(> div:nth-of-type(2)) {
  justify-content: space-between;
}

/* ----------------------------- */
/* Modal Properties */
/* ----------------------------- */
/* Modal Variations */
/* layer-schedule-alert */
#layer-schedule-alert .layerform-block {
  gap: 30px;
  align-items: center;
}

#layer-schedule-alert .layerform-sticker {
  max-width: 80px;
}

#layer-schedule-alert .layerbody-textbox {
  gap: 5px;
}

#layer-schedule-alert .layerbody-textbox p {
  text-align: center;
}

#layer-schedule-alert .layerbody-textbox p:first-of-type {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
}

#layer-schedule-alert .layerbody-textbox p:last-of-type {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--neutral-opacity-400);
}

/* ----------------------------- */
/* Alert Properties */
/* ----------------------------- */
/* Alert은 명칭 구분을 위해 Alert 뒤에 wrapper를 붙임 */
/* Alert Basic */
.alert-container {
  overflow: hidden;
  max-width: 450px;
  height: max-content;
  background-color: var(--white);
  border-radius: var(--layer-radius);
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--neutral-solid-300);
}

.alert-message {
  padding: var(--layer-padding);
  padding-bottom: calc(var(--layer-padding) / 2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.alert-message .alert-icon {
  display: flex;
  justify-content: center;
}
.alert-message .alert-icon img {
  width: 50px;
  aspect-ratio: 1/1;
}
.alert-message .alert-title {
  text-align: center;
}
.alert-message .alert-word {
  text-align: center;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--neutral-solid-800);
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.alert-message:has(.alert-focusbox) {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.alert-message > .alert-focusbox {
  min-width: 300px;
  width: 100%;
  background-color: var(--slate-50);
  outline: 1px solid var(--slate-200);
  border-radius: var(--callout-radius);
  padding: var(--callout-padding);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--slate-700);
}

.alert-bottom {
  padding: 0.625rem;
  display: flex;
  flex-direction: row;
  gap: 0.312rem;
}
.alert-bottom > button {
  width: 100%;
}

/* Alert Sticker */
.alert-container:has(.alert-sticker-form) {
  width: 100%;
}
.alert-container:has(.alert-sticker-form) .alert-message {
  padding: 30px;
}
.alert-container:has(.alert-sticker-form) .alert-sticker-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.alert-container:has(.alert-sticker-form) .alert-sticker-form svg, .alert-container:has(.alert-sticker-form) .alert-sticker-form img {
  width: 80px;
  aspect-ratio: 1/1;
}
.alert-container:has(.alert-sticker-form) .alert-sticker-form .alert-sticker-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: center;
}
.alert-container:has(.alert-sticker-form) .alert-sticker-form .alert-sticker-text h3 {
  color: var(--black);
}
.alert-container:has(.alert-sticker-form) .alert-sticker-form .alert-sticker-text span {
  font-weight: var(--font-semibold);
  color: var(--neutral-opacity-400);
}

/*
  Design Guidelines
  Version: 1.0
  Author: Jiyeol Park
  Company: ISTN
  Created: 2025-04-03
*/
main.contents-container {
  /* Only for Center Type Layout */
  /* Only for Document Type Layout */
  /* Only for Sheet Type Layout */
  /* Only for Sheet Type Layout */
  /* Only for print-a4 Type Layout */
}
main.contents-container[data-layout-type=center] {
  container: pagecontainer/inline-size;
  /* when centerbottom has 2 btn groups */
}
main.contents-container[data-layout-type=center] section.contents-area {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(12, var(--contents-desktop-column));
  column-gap: var(--contents-desktop-gap);
  padding: var(--contents-desktop-padding);
  background-color: var(--neutral-solid-100);
}
@media screen and (max-width: 768px) {
  main.contents-container[data-layout-type=center] section.contents-area {
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--contents-mobile-gap);
    padding: var(--contents-mobile-outer-padding);
  }
}
main.contents-container[data-layout-type=center] .centertitle {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: var(--layer-padding);
  padding-bottom: calc(var(--layer-padding) / 2);
  background-color: var(--white);
}
@media screen and (max-width: 768px) {
  main.contents-container[data-layout-type=center] .centertitle {
    padding-top: var(--layer-padding);
    padding-inline: var(--contents-mobile-inner-padding);
    padding-bottom: calc(var(--layer-padding) / 4);
  }
}
main.contents-container[data-layout-type=center] .center-container {
  display: flex;
  height: max-content;
  flex-direction: column;
  box-shadow: 0px 5px 25px 0px var(--neutral-opacity-200);
  border-radius: var(--center-radius);
  overflow: hidden;
  outline: 1px solid var(--neutral-solid-200);
  margin: auto 0;
}
main.contents-container[data-layout-type=center] .centerbody {
  background-color: var(--white);
  padding: var(--centerbody-padding);
  /* 견적서 페이지 임시조치 */
}
@media screen and (max-width: 768px) {
  main.contents-container[data-layout-type=center] .centerbody {
    padding: var(--contents-mobile-inner-padding);
  }
}
main.contents-container[data-layout-type=center] .centerbody:has(.estimate_test) {
  padding: 0;
}
main.contents-container[data-layout-type=center] div.centerbottom {
  display: flex;
  flex-direction: row;
  background-color: var(--neutral-solid-50);
  border-top: 1px solid var(--neutral-solid-300);
  padding: var(--centerbottom-padding);
}
main.contents-container[data-layout-type=center] div.centerbottom:has(> div:nth-of-type(1)):not(:has(> div:nth-of-type(2))) {
  justify-content: end;
}
main.contents-container[data-layout-type=center] div.centerbottom:has(> div:nth-of-type(2)) {
  justify-content: space-between;
}
main.contents-container:has(> .pagetab-container)[data-layout-type=center] .contents-area {
  background-color: var(--white);
}
main.contents-container[data-layout-type=document] {
  /* when centerbottom has 2 btn groups */
}
main.contents-container[data-layout-type=document] section.contents-area {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(12, var(--contents-desktop-column));
  column-gap: var(--contents-desktop-gap);
  padding: var(--contents-desktop-padding);
}
main.contents-container[data-layout-type=document] .centertitle {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding-inline: var(--document-inline-padding);
  padding-top: var(--document-block-padding);
  padding-bottom: calc(var(--document-block-padding) / 4);
  background-color: var(--white);
}
main.contents-container[data-layout-type=document] .center-container {
  display: flex;
  height: max-content;
  flex-direction: column;
  box-shadow: 0px 5px 25px 0px var(--neutral-opacity-200);
  border-radius: var(--center-radius);
  overflow: hidden;
  outline: 1px solid var(--neutral-solid-200);
  margin: auto 0;
}
main.contents-container[data-layout-type=document] .centerbody {
  background-color: var(--white);
  padding-inline: var(--document-inline-padding);
  padding-top: calc(var(--document-block-padding) / 4);
  padding-bottom: var(--document-block-padding);
  /* 견적서 페이지 임시조치 */
}
main.contents-container[data-layout-type=document] .centerbody:has(.estimate_test) {
  padding: 0;
}
main.contents-container[data-layout-type=document] div.centerbottom {
  display: flex;
  flex-direction: row;
  background-color: var(--neutral-solid-50);
  border-top: 1px solid var(--neutral-solid-300);
  padding: var(--centerbottom-padding);
}
main.contents-container[data-layout-type=document] div.centerbottom:has(> div:nth-of-type(1)):not(:has(> div:nth-of-type(2))) {
  justify-content: end;
}
main.contents-container[data-layout-type=document] div.centerbottom:has(> div:nth-of-type(2)) {
  justify-content: space-between;
}
main.contents-container:has(> .pagetab-container)[data-layout-type=center] .contents-area {
  background-color: var(--white);
}
main.contents-container[data-layout-type=sheet] .sheet-top-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: var(--contents-desktop-padding);
  padding-block: 10px;
  gap: 15px;
}
main.contents-container[data-layout-type=sheet] .sheet-top-panel:has(.sheet-section-panel) {
  flex-direction: column;
  gap: 15px;
}
@media screen and (max-width: 1024px) {
  main.contents-container[data-layout-type=sheet] .sheet-top-panel {
    padding-inline: var(--contents-mobile-outer-padding);
    flex-direction: column;
    gap: 10px;
  }
  main.contents-container[data-layout-type=sheet] .sheet-top-panel:has(.add-new) {
    align-items: end;
  }
}
main.contents-container[data-layout-type=sheet] .sheet-top-panel:has(> *:only-child) {
  justify-content: end;
}
main.contents-container[data-layout-type=sheet] .sheet-left-panel, main.contents-container[data-layout-type=sheet] .sheet-right-panel {
  display: flex;
  align-items: center;
  gap: 15px;
}
@media screen and (max-width: 1024px) {
  main.contents-container[data-layout-type=sheet] .sheet-left-panel, main.contents-container[data-layout-type=sheet] .sheet-right-panel {
    flex-direction: column;
    width: 100%;
  }
}
main.contents-container[data-layout-type=sheet] .sheet-left-panel {
  position: relative;
}
@media screen and (max-width: 1024px) {
  main.contents-container[data-layout-type=sheet] .sheet-left-panel {
    justify-content: center;
    align-items: start;
  }
}
@media screen and (max-width: 1024px) {
  main.contents-container[data-layout-type=sheet] .sheet-left-panel .sheet-block:has(.sheet-select-count) {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  main.contents-container[data-layout-type=sheet] .sheet-right-panel .sheet-block {
    align-items: end;
  }
  main.contents-container[data-layout-type=sheet] .sheet-right-panel .sheet-block:has(.add-new) {
    flex-direction: row-reverse;
    justify-content: end;
  }
}
@media screen and (max-width: 1024px) {
  main.contents-container[data-layout-type=sheet] .sheet-right-panel {
    align-items: end;
  }
  main.contents-container[data-layout-type=sheet] .sheet-right-panel:has(.switch-sm) {
    flex-direction: row;
    justify-content: end;
    align-items: center;
  }
  main.contents-container[data-layout-type=sheet] .sheet-right-panel:has(.switch-sm) .sheet-block {
    width: max-content;
  }
}
main.contents-container[data-layout-type=sheet] .sheet-block {
  display: flex;
  align-items: center;
  gap: 5px;
}
@media screen and (max-width: 1024px) {
  main.contents-container[data-layout-type=sheet] .sheet-block {
    flex-direction: column;
    width: 100%;
  }
}
main.contents-container[data-layout-type=sheet] .sheet-block:has(.input-option-container) {
  flex-direction: row;
}
@media screen and (max-width: 1024px) {
  main.contents-container[data-layout-type=sheet] .sheet-block.search-hiddenable-options {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  main.contents-container[data-layout-type=sheet] .sheet-block.install-hiddenable-options {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  main.contents-container[data-layout-type=sheet] .sheet-block .selectbox-container {
    width: 100%;
  }
}
@media screen and (max-width: 1024px) {
  main.contents-container[data-layout-type=sheet] .sheet-block .selectbox-container:has([name*=useYn i]) {
    width: auto;
  }
}
main.contents-container[data-layout-type=sheet] span.sheet-select-count {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--neutral-solid-400);
  word-break: keep-all;
  text-wrap: nowrap;
}
main.contents-container[data-layout-type=sheet] .sheet-left-panel .sheet-select-count {
  text-align: left;
}
main.contents-container[data-layout-type=sheet] .sheet-right-panel .sheet-select-count {
  text-align: right;
}
main.contents-container[data-layout-type=sheet] .sheet-section-panel {
  width: 100%;
  background-color: var(--neutral-solid-100);
  padding-inline: 25px;
  padding-block: 15px;
  border-radius: 7px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 15px;
  column-gap: 30px;
}
@media screen and (max-width: 1024px) {
  main.contents-container[data-layout-type=sheet] .sheet-section-panel {
    flex-direction: column;
    gap: 10px;
    padding-inline: 15px;
  }
}
main.contents-container[data-layout-type=sheet] .sheet-button-panel {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
main.contents-container[data-layout-type=home] {
  container: pagecontainer/inline-size;
}
main.contents-container[data-layout-type=home] section.contents-area {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(12, var(--contents-desktop-column));
  column-gap: var(--contents-desktop-gap);
  padding: var(--contents-desktop-padding);
  background-color: var(--neutral-solid-100);
  overflow-y: auto;
}
@media screen and (max-width: 768px) {
  main.contents-container[data-layout-type=home] section.contents-area {
    grid-template-columns: repeat(6, 1fr);
    column-gap: var(--contents-mobile-gap);
    padding: var(--contents-mobile-outer-padding);
  }
}
main.contents-container[data-layout-type=print-a4] {
  width: 100%;
  /* Only for fit size */
  /* when centerbottom has 2 btn groups */
}
main.contents-container[data-layout-type=print-a4] section.contents-area {
  padding: var(--contents-desktop-padding);
  background-color: var(--neutral-solid-500);
}
main.contents-container[data-layout-type=print-a4] .centertitle {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-inline: var(--document-inline-padding);
  padding-top: var(--document-block-padding);
  padding-bottom: calc(var(--document-block-padding) / 4);
  background-color: var(--white);
}
main.contents-container[data-layout-type=print-a4] .centertitle .estimate-date {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--neutral-solid-500);
}
main.contents-container[data-layout-type=print-a4] .center-container {
  display: flex;
  height: max-content;
  flex-direction: column;
  box-shadow: 0px 5px 25px 0px var(--neutral-opacity-600);
  overflow: hidden;
  outline: 1px solid var(--neutral-solid-200);
  background-color: var(--white);
  aspect-ratio: 210/297;
  max-height: 100%;
  margin: 0 auto;
  container-type: size;
}
main.contents-container[data-layout-type=print-a4] .centerbody {
  display: flex;
  flex-direction: column;
  gap: 55px;
  background-color: var(--white);
  padding-inline: var(--document-inline-padding);
  padding-top: calc(var(--document-block-padding) / 4);
  padding-bottom: var(--document-block-padding);
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] {
  /* 견적서 뷰 차트 */
  /* 자사 제품군 */
  /* 기타 사항 */
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-left, main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-right, main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-full, main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-item {
  gap: 20px;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-subtitle {
  max-width: 96px;
  min-height: auto;
  font-weight: var(--font-bold);
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-text {
  min-height: auto;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-estimate {
  border-radius: 0;
  table-layout: fixed;
  /* column width */
  /*& thead th:nth-child(1),
  tbody th:nth-child(1) {
    width: 18.16%;
  }
  & thead th:nth-child(2),
  tbody th:nth-child(2),
  thead th:nth-child(3),
  tbody th:nth-child(3),
  thead th:nth-child(4),
  tbody th:nth-child(4) {
    width: 16.03%;
  }*/
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-estimate thead .target-wrapper {
  display: flex;
  flex-direction: row;
  gap: 0.156cqh;
  align-items: center;
  justify-content: center;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-estimate thead .target-container {
  display: flex;
  flex-direction: row;
  gap: 0.104cqh;
  align-items: center;
  justify-content: center;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-estimate thead .target-symbol {
  display: inline-flex;
  width: 0.781cqh;
  height: 0.781cqh;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--white);
  color: var(--bravo-primary);
  font-weight: var(--font-bold);
  font-size: 0.729cqh;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-estimate thead .target-calc {
  color: var(--white);
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-estimate thead .target-bg-normal {
  background-color: var(--bravo-primary);
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-estimate thead .target-bg-deep {
  background-color: var(--bravo-secondary);
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-estimate thead th {
  width: auto;
  font-size: 0.729cqh;
  font-weight: var(--font-semibold);
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-estimate tbody tr {
  height: 45px;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-estimate tbody th, main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-estimate tbody td {
  border-color: var(--neutral-solid-200);
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-estimate tbody td {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--neutral-solid-800);
  text-align: right;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-estimate tbody td:last-of-type {
  text-align: left;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-estimate tbody tr:last-of-type th {
  background-color: var(--neutral-solid-100);
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-estimate tbody .estimate-etc-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-inline: 25px;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-estimate tbody .estimate-etc-wrapper span {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--neutral-solid-800);
  white-space: pre;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .form-estimate tbody .estimate-etc-wrapper span:first-of-type {
  color: var(--bravo-primary);
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .stamp-position {
  position: absolute;
  aspect-ratio: 1/1;
  width: 90px;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .estimate-product-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  outline: 1px solid var(--neutral-solid-200);
  padding: 20px 30px;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .estimate-product-list .estimate-product-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .estimate-product-list .estimate-product-item .estimate-product-thumb {
  display: flex;
  justify-content: center;
  aspect-ratio: 1/1;
  max-width: 130px;
  padding: 15px;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .estimate-product-list .estimate-product-item .estimate-product-thumb img {
  object-fit: contain;
  display: block;
  height: 100%;
  object-position: center;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .estimate-product-list .estimate-product-item .estimate-product-text {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .estimate-product-list .estimate-product-item .estimate-product-text .estimate-product-name {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--neutral-solid-800);
  text-align: center;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .estimate-product-list .estimate-product-item .estimate-product-text .estimate-product-size {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--neutral-solid-700);
  text-align: center;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .estimate-others {
  list-style: disc inside;
  padding: 15px;
  background-color: var(--neutral-solid-100);
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .estimate-others ul, main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .estimate-others ol {
  list-style: inside;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .estimate-others li :is(span, p) {
  display: inline-block;
}
main.contents-container[data-layout-type=print-a4] .centerbody [class*=paragraph-] .estimate-others li {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--neutral-solid-700);
}
main.contents-container[data-layout-type=print-a4] .centerbody .paragraph-2 {
  grid-column-gap: 24px;
  grid-row-gap: 10px;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] {
  /* Only for Preview size */
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area {
  position: relative;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container {
  /* 두 장 이상 시 처리 */
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centertitle {
  padding-inline: 6.158cqh;
  padding-top: 5.452cqh;
  padding-bottom: 1.363cqh;
  gap: 0.321cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centertitle .centertitle-topline h1 {
  font-size: 1.924cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centertitle .centertitle-topline .logo-group {
  gap: 2.566cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centertitle .centertitle-topline .logo-group img:first-of-type {
  height: 2.245cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centertitle .centertitle-topline .logo-group img:last-of-type {
  height: 2.566cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centertitle .estimate-date {
  font-size: 1.026cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody {
  flex: 1;
  justify-content: space-between;
  padding-inline: 6.158cqh;
  padding-top: 1.363cqh;
  padding-bottom: 5.452cqh;
  gap: 0;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] {
  grid-column-gap: 1.539cqh;
  grid-row-gap: 0.449cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] h4 {
  margin-top: 0.641cqh;
  margin-bottom: 0.321cqh;
  font-size: 1.026cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-left, main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-right, main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-full, main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-item {
  gap: 1.283cqh;
  flex-direction: row;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-left {
  grid-column: 1;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-right {
  grid-column: 2;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-full {
  grid-column: 1/-1;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-subtitle {
  max-width: 6.158cqh;
  font-size: 0.898cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-text {
  font-size: 0.898cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-estimate {
  height: 2.245cqh;
  font-size: 0.898cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-estimate th, main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-estimate td {
  padding-inline: 0.641cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-estimate thead {
  height: 2.245cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-estimate thead th {
  font-size: 0.898cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-estimate tbody th:nth-child(1) {
  font-size: 0.898cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-estimate tbody tr {
  height: 2.886cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-estimate tbody td {
  font-size: 0.898cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-estimate .estimate-etc-wrapper {
  padding-inline: 1.604cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-estimate .estimate-etc-wrapper span {
  font-size: 0.898cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .estimate-product-list {
  padding: 1.283cqh 1.924cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .estimate-product-list .estimate-product-item {
  gap: 0.321cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .estimate-product-list .estimate-product-item .estimate-product-thumb {
  max-width: 8.339cqh;
  padding: 0.962cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .estimate-product-list .estimate-product-item .estimate-product-text {
  gap: 0.962cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .estimate-product-list .estimate-product-item .estimate-product-text .estimate-product-name {
  font-size: 1.026cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .estimate-product-list .estimate-product-item .estimate-product-text .estimate-product-size {
  font-size: 0.77cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .estimate-others {
  padding: 0.962cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .estimate-others * {
  font-size: 0.77cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .stamp-position {
  left: 10.135cqh;
  bottom: 0;
  width: 3.207cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container .centerbody [class*=paragraph-] .form-unit {
  font-size: 0.898cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container.zoom-up {
  max-height: none;
  width: 1200px;
}
@media screen and (max-width: 768px) {
  main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container.zoom-up {
    width: 1000px;
  }
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container.center-container:not(:first-of-type) {
  margin-top: 25px;
}
main.contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container.center-container:not(:first-of-type) .centerbody {
  padding-top: 5.452cqh;
}
main.contents-container[data-layout-type=print-a4][data-document-fit].print-preview {
  height: auto;
}
main.contents-container[data-layout-type=print-a4][data-document-fit].print-preview .contents-area {
  background-color: var(--neutral-solid-200);
}
main.contents-container[data-layout-type=print-a4][data-document-fit].print-preview .contents-area .center-container {
  max-height: none;
  width: 100%;
  max-width: 900px;
  box-shadow: 0px 5px 25px 0px var(--neutral-opacity-300);
}
main.contents-container[data-layout-type=print-a4] .zoom-button {
  position: fixed;
  right: 30px;
  bottom: 100px;
  width: 50px;
  padding: 10px;
  border-radius: 7px;
  outline: 1px solid var(--neutral-solid-300);
  background-color: var(--white);
  transition: var(--speed-basic);
}
main.contents-container[data-layout-type=print-a4] .zoom-button:hover {
  background-color: var(--neutral-solid-100);
  transition: var(--speed-basic);
}
main.contents-container[data-layout-type=print-a4] .zoom-button > :last-of-type {
  display: none;
}
main.contents-container[data-layout-type=print-a4]:has(.zoom-up) .contents-area {
  overflow: auto;
}
main.contents-container[data-layout-type=print-a4]:has(.zoom-up) .contents-area .zoom-button > :first-of-type {
  display: none;
}
main.contents-container[data-layout-type=print-a4]:has(.zoom-up) .contents-area .zoom-button > :last-of-type {
  display: block;
}
main.contents-container[data-layout-type=print-a4] div.centerbottom {
  display: flex;
  flex-direction: row;
  background-color: var(--neutral-solid-50);
  border-top: 1px solid var(--neutral-solid-300);
  padding: var(--centerbottom-padding);
}
main.contents-container[data-layout-type=print-a4] div.centerbottom:has(> div:nth-of-type(1)):not(:has(> div:nth-of-type(2))) {
  justify-content: end;
}
main.contents-container[data-layout-type=print-a4] div.centerbottom:has(> div:nth-of-type(2)) {
  justify-content: space-between;
}
main.contents-container[data-layout-type=print-a4] .centertitle-topline {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
}
main.contents-container[data-layout-type=print-a4] .centertitle-topline .logo-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40px;
}
main.contents-container[data-layout-type=print-a4] .centertitle-topline .logo-group :first-of-type {
  width: auto;
  height: 35px;
}
main.contents-container[data-layout-type=print-a4] .centertitle-topline .logo-group :last-of-type {
  width: auto;
  height: 40px;
}
main.contents-container:has(> .pagetab-container)[data-layout-type=center] .contents-area {
  background-color: var(--white);
}

@media screen and (max-width: 768px) {
  div.search-hiddenable-options {
    display: none;
  }
}

button.responsive-search-switch, button.responsive-install-switch {
  display: none;
}
@media screen and (max-width: 1024px) {
  button.responsive-search-switch, button.responsive-install-switch {
    display: inline-flex;
  }
}

.install-hiddenable-options {
  display: flex;
}
@media screen and (max-width: 1024px) {
  .install-hiddenable-options {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    z-index: 999;
    background: var(--white);
    border: 1px solid var(--neutral-solid-300);
    padding: 5px;
    border-radius: 7px;
  }
}
.install-hiddenable-options button {
  width: 100%;
}

/* a4 document In mobile */
@media screen and (max-width: 768px) {
  body {
    overflow-y: hidden;
  }
}
/* Document Print */
/* Only for Print */
@page {
  size: A4;
  margin: 0;
}
@media print {
  /* Only for estimate print */
  .contents-container[data-layout-type=print-a4][data-document-fit] header {
    display: none;
  }
  .contents-container[data-layout-type=print-a4][data-document-fit] .centerbottom {
    display: none;
  }
  .contents-container[data-layout-type=print-a4][data-document-fit] .contents-area {
    padding: 0;
  }
  .contents-container[data-layout-type=print-a4][data-document-fit] .contents-area .center-container {
    box-shadow: 0;
    outline: 0;
  }
  .contents-container[data-layout-type=print-a4][data-document-fit] .zoom-button {
    display: none;
  }
}
/* Paragraph */
/* 1 row */
.paragraph-1 {
  grid-template-columns: repeat(1, 1fr);
}

/* 2 row */
.paragraph-2 {
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 36px;
}

/* 3 row */
.paragraph-3 {
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 24px;
}

/* common */
[class*=paragraph-] {
  display: grid;
  grid-row-gap: 15px;
  align-items: start;
}
[class*=paragraph-] textarea {
  width: 100%;
  height: 100px;
}
[class*=paragraph-] > hr {
  grid-column: 1/-1;
  width: 100%;
}
[class*=paragraph-] .form-address {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 5px;
}
[class*=paragraph-] .form-address > .form-address-top input[name=postNo] {
  width: 100%;
  max-width: 80px;
}
[class*=paragraph-] .form-address input {
  max-width: none;
}
[class*=paragraph-] .form-attach {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
[class*=paragraph-] .form-attach .form-attach-inline {
  position: relative;
  display: none;
}
[class*=paragraph-] .form-attach .form-attach-inline button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 5px;
}
[class*=paragraph-] .form-attach .form-attach-inline input[type=text] {
  max-width: none;
  text-overflow: ellipsis;
  padding-right: 30px;
}
[class*=paragraph-] .form-attach .form-attach-inline input[type=text][data-written] {
  background-color: var(--blue-50);
  outline: 1px solid var(--slate-300);
}
[class*=paragraph-] .form-attach .form-attach-inline input[type=text][data-written]:hover {
  outline: 1px solid var(--slate-400);
}
[class*=paragraph-] h4 {
  margin-top: 10px;
  margin-bottom: 5px;
  flex: 1;
  grid-column: 1/-1;
}
[class*=paragraph-] > section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
[class*=paragraph-] #tab-container {
  margin-top: 35px;
}
[class*=paragraph-] strong {
  font-weight: var(--font-bold);
}
[class*=paragraph-][data-view-page] .form-left, [class*=paragraph-][data-view-page] .form-right {
  grid-row-gap: 7px;
}
@media screen and (max-width: 768px) {
  [class*=paragraph-][data-view-page] .form-left, [class*=paragraph-][data-view-page] .form-right {
    grid-row-gap: 0;
  }
}
[class*=paragraph-] .form-textarea ul, [class*=paragraph-] .form-textarea ol {
  list-style: inside;
}
[class*=paragraph-] .form-textarea li :is(span, p) {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  [class*=paragraph-] div.form-item, [class*=paragraph-] div.form-left, [class*=paragraph-] div.form-right, [class*=paragraph-] div.form-full {
    flex-direction: column;
    align-items: start;
    grid-row-gap: 0;
    grid-column: 1/-1;
  }
  [class*=paragraph-] div.form-item.form-searchoption, [class*=paragraph-] div.form-left.form-searchoption, [class*=paragraph-] div.form-right.form-searchoption, [class*=paragraph-] div.form-full.form-searchoption {
    grid-row-gap: 7px;
  }
  [class*=paragraph-] div.form-item:has(> .form-item), [class*=paragraph-] div.form-left:has(> .form-item), [class*=paragraph-] div.form-right:has(> .form-item), [class*=paragraph-] div.form-full:has(> .form-item) {
    grid-row-gap: 7px;
  }
  [class*=paragraph-] div.form-item.empty-notice, [class*=paragraph-] div.form-left.empty-notice, [class*=paragraph-] div.form-right.empty-notice, [class*=paragraph-] div.form-full.empty-notice {
    align-items: center;
  }
}

/* Only for Order Preview Page Layout */
.orderpreview-stamp {
  width: 3.538cqh;
  position: absolute;
  right: 0.393cqh;
  top: 3.538cqh;
}

.orderpreview-form {
  display: flex;
  flex-direction: column;
  gap: 1.179cqh;
  height: 100%;
  position: relative;
}
.orderpreview-form h4 {
  font-size: 1.258cqh;
}

.orderpreview-title {
  display: flex;
  flex-direction: row;
  gap: 0.943cqh;
}
.orderpreview-title h4 {
  flex: 1;
}

.orderpreview-top {
  font-size: 1.101cqh;
}
.orderpreview-top th {
  width: 9.513cqh;
  background-color: var(--slate-50);
  font-weight: var(--font-semibold);
}
.orderpreview-top td {
  width: 17.767cqh;
  text-wrap: balance;
}
.orderpreview-top th, .orderpreview-top td {
  text-align: left;
  border: 0.079cqh solid var(--slate-400);
  padding: 0.314cqh;
}
.orderpreview-top td[rowspan="6"] {
  width: 0.943cqh;
  background-color: transparent;
  border-top: 0;
  border-bottom: 0;
}

.orderpreview-amount {
  display: flex;
  flex-direction: row;
  font-size: 1.101cqh;
  border: 0.236cqh solid var(--black);
}
.orderpreview-amount > * {
  padding: 0.629cqh;
  color: var(--black);
}
.orderpreview-amount .orderpreview-amount-left {
  font-weight: var(--font-semibold);
  border-right: 0.236cqh solid var(--black);
}
.orderpreview-amount .orderpreview-amount-right {
  font-weight: var(--font-bold);
  text-align: right;
  flex: 1;
}

.orderpreview-body {
  border: 0.079cqh solid var(--slate-400);
  flex: 1;
}
.orderpreview-body th {
  font-weight: var(--font-semibold);
  background-color: var(--slate-50);
  border-right: 0.079cqh solid var(--slate-400);
  height: 2.358cqh;
}
.orderpreview-body th:nth-of-type(1) {
  width: 5.503cqh;
}
.orderpreview-body th:nth-of-type(3) {
  width: 7.075cqh;
}
.orderpreview-body th:nth-of-type(3) span {
  font-size: 0.786cqh;
}
.orderpreview-body th:nth-of-type(4) {
  width: 8.648cqh;
}
.orderpreview-body th:nth-of-type(5) {
  width: 8.648cqh;
}
.orderpreview-body th:last-of-type {
  width: 8.648cqh;
  border-right: 0;
}
.orderpreview-body tr {
  border-bottom: 0.079cqh solid var(--neutral-solid-200);
}
.orderpreview-body tr:first-of-type {
  border-bottom: 0.079cqh solid var(--slate-400);
}
.orderpreview-body td {
  border-right: 0.079cqh solid var(--neutral-solid-200);
  height: 2.358cqh;
}
.orderpreview-body td:nth-of-type(1) {
  text-align: center;
}
.orderpreview-body td:nth-of-type(2) {
  text-align: left;
}
.orderpreview-body td:nth-of-type(3) {
  text-align: right;
}
.orderpreview-body td:nth-of-type(4) {
  text-align: right;
}
.orderpreview-body td:nth-of-type(5) {
  text-align: right;
}
.orderpreview-body td:last-of-type {
  text-align: right;
  border-right: 0;
}
.orderpreview-body th, .orderpreview-body td {
  font-size: 1.101cqh;
  padding-inline: 0.629cqh;
  padding-block: 0.314cqh;
}
.orderpreview-body tr:nth-of-type(2n) {
  background-color: var(--neutral-opacity-50);
}

.orderpreview-product-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border: 0.079cqh solid var(--slate-400);
  height: 13.758cqh;
  padding: 1.179cqh 1.965cqh;
}
.orderpreview-product-list .orderpreview-product-item {
  display: flex;
  flex-direction: column;
  gap: 0.321cqh;
  justify-content: space-between;
}
.orderpreview-product-list .orderpreview-product-item .orderpreview-product-thumb {
  max-width: 8.255cqh;
  padding: 0.943cqh;
  display: flex;
  justify-content: center;
  aspect-ratio: 1/1;
}
.orderpreview-product-list .orderpreview-product-item .orderpreview-product-thumb img {
  object-fit: contain;
}
.orderpreview-product-list .orderpreview-product-item .orderpreview-product-text {
  gap: 0.236cqh;
  display: flex;
  flex-direction: column;
}
.orderpreview-product-list .orderpreview-product-item .orderpreview-product-text .orderpreview-product-name {
  font-size: 1.101cqh;
  font-weight: var(--font-bold);
  color: var(--neutral-solid-800);
  text-align: center;
}
.orderpreview-product-list .orderpreview-product-item .orderpreview-product-text .orderpreview-product-size {
  font-size: 0.786cqh;
  font-weight: var(--font-semibold);
  color: var(--neutral-solid-700);
  text-align: center;
  min-height: 1.179cqh;
}

.orderpreview-etc {
  border: 0.079cqh solid var(--slate-400);
  padding: 1.179cqh 1.965cqh;
}
.orderpreview-etc p {
  font-size: 1.101cqh;
}

.orderpreview-bottom {
  border: 0.079cqh solid var(--slate-400);
}
.orderpreview-bottom td {
  border-right: 0.079cqh solid var(--slate-400);
  font-size: 1.101cqh;
  padding-inline: 0.629cqh;
  padding-block: 0.314cqh;
  height: 3.538cqh;
}
.orderpreview-bottom td:last-of-type {
  border-right: 0;
  font-weight: var(--font-semibold);
}
.orderpreview-bottom td:nth-of-type(2n-1) {
  font-weight: var(--font-semibold);
  background-color: var(--slate-50);
}
.orderpreview-bottom td:nth-of-type(1) {
  width: 5.503cqh;
}
.orderpreview-bottom td:nth-of-type(3) {
  width: 7.075cqh;
}
.orderpreview-bottom td:nth-of-type(5) {
  width: 5.503cqh;
}
.orderpreview-bottom td:nth-of-type(7) {
  width: 5.503cqh;
}

@media print {
  /* Only for orderpreview print */
  body:has(#orderpreview-print) .modal.gridsystem {
    display: block;
    padding: 0;
  }
  body:has(#orderpreview-print) .layer-mono {
    border: 0;
  }
  body:has(#orderpreview-print) .layout-container {
    display: none;
  }
  body:has(#orderpreview-print) .layertitle {
    display: none;
  }
  body:has(#orderpreview-print) .layerbottom {
    display: none;
  }
  body:has(#orderpreview-print) .contents-container {
    padding: 0;
    max-width: none;
  }
  body:has(#orderpreview-print) .contents-container .contents-area {
    padding: 0;
  }
  body:has(#orderpreview-print) .contents-container .contents-area .center-container {
    margin: 0;
    max-width: none;
  }
}
/* form items */
.form-item {
  grid-column: 1/-1;
  width: 100%;
}
.form-item:has(.form-sheet) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-left {
  grid-column: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.form-right {
  grid-column: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.form-right:has(.stamp-position) {
  position: relative;
}

.form-full {
  grid-column: 1/-1;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.form-full:is(hr) {
  margin-block: 15px;
}
.form-full:has(> :is(.item-add, .form-total)) {
  justify-content: end;
}
.form-full:has(> .input-option-container):has(> button) {
  gap: 5px;
}
.form-full:has(> button:nth-of-type(n+2)) {
  gap: 5px;
}
@media screen and (max-width: 768px) {
  .form-full:has(button.add-new) {
    flex-direction: row;
    justify-content: end;
  }
}
.form-full:has(> .form-unit) {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.form-full:has(> .form-unit) h4 {
  margin: 0;
}
.form-full:has(> h3.form-total) {
  align-items: end;
}
.form-full:has(> .input-option-container):not(:has(> .form-subtitle)) {
  flex-direction: row;
}
.form-full:has(> .form-estimate) {
  overflow-x: auto;
  outline: 1px solid var(--neutral-solid-300);
  border-radius: 7px;
}
.form-full:has(> .form-estimate) .form-estimate {
  min-width: 960px;
  outline: none;
}
.form-full:has(> .form-estimate) .form-estimate .target-wrapper {
  display: flex;
  flex-direction: row;
  gap: 3px;
  align-items: center;
  justify-content: center;
}
.form-full:has(> .form-estimate) .form-estimate .target-container {
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: center;
  justify-content: center;
}
.form-full:has(> .form-estimate) .form-estimate .target-symbol {
  display: inline-flex;
  width: 15px;
  height: 15px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--white);
  color: var(--bravo-primary);
  font-weight: var(--font-bold);
  font-size: var(--text-xs);
}
.form-full:has(> .form-estimate) .form-estimate .target-calc {
  color: var(--white);
}
.form-full:has(> .form-estimate) .form-estimate .target-bg-normal {
  background-color: var(--bravo-primary);
}
.form-full:has(> .form-estimate) .form-estimate .target-bg-deep {
  background-color: var(--bravo-secondary);
}
.form-full:has(> .form-estimate) .form-estimate th {
  width: auto;
}

.form-left, .form-right, .form-full, .form-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
}
.form-left .form-subtitle, .form-right .form-subtitle, .form-full .form-subtitle, .form-item .form-subtitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  max-width: 144px;
  flex-shrink: 0;
}

.form-left:has(> .form-item), .form-right:has(> .form-item) {
  display: grid;
  grid-column-gap: 24px;
  grid-row-gap: 15px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
}
.form-left > .form-left, .form-left > .form-right, .form-right > .form-left, .form-right > .form-right {
  flex-direction: column;
  align-items: start;
  gap: 15px;
}

.form-button {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  width: 100%;
}
.form-button > input {
  flex: 1;
}
.form-button button {
  flex-shrink: 0;
}

.form-text {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--neutral-solid-700);
  min-height: 34px;
  display: flex;
  align-items: center;
  flex: 1;
}
.form-text:has(span) {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 3px;
  justify-content: center;
}
.form-text span {
  text-wrap: pretty;
}

a.form-text {
  color: var(--blue-600);
  cursor: pointer;
}
a.form-text:hover {
  text-decoration: underline;
}

.form-display {
  height: var(--input-md-height);
  width: 100%;
  padding-block: 0.531rem;
  padding-inline: 0.938rem;
  background-color: var(--neutral-solid-100);
  border-radius: var(--input-md-radius);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: 1px solid var(--neutral-solid-200);
  line-height: normal;
}

.form-textbutton {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}
@media screen and (max-width: 768px) {
  .form-textbutton:has(.event-same-mail) {
    flex-direction: column;
    align-items: start;
  }
}

.sidepanel-position [class*=paragraph-]:has(> .form-sheet) {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.sidepanel-position [class*=paragraph-]:has(> .form-sheet) .form-full:has(> .input-option-container) {
  width: 100%;
}

.form-sheet {
  border-radius: 7px;
  outline: 1px solid var(--neutral-solid-200);
  overflow: hidden;
}

.form-hidden {
  display: none !important;
}

/* form special */
.form-coporate-no {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
}
.form-coporate-no > input:first-of-type {
  width: 60px;
  min-width: 0;
}
.form-coporate-no > input:nth-of-type(2) {
  width: 50px;
  min-width: 0;
}
.form-coporate-no > input:nth-of-type(3) {
  width: 75px;
  min-width: 0;
}
@media screen and (max-width: 768px) {
  .form-coporate-no > input:first-of-type {
    width: 65px;
  }
  .form-coporate-no > input:nth-of-type(2) {
    width: 55px;
  }
  .form-coporate-no > input:nth-of-type(3) {
    width: 85px;
  }
}

.form-cols {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-rows {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
.form-rows > .form-text {
  flex: none;
}

.form-title {
  width: 100%;
  display: flex;
  flex-direction: row;
  grid-column: 1/-1;
  align-items: center;
}
.form-title:has(h4) {
  margin-top: 10px;
  margin-bottom: 5px;
}
.form-title:has(h4) h4 {
  margin: 0;
}

.form-subtitle {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--neutral-solid-500);
  min-height: 34px;
}

.form-total {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--black);
  word-break: keep-all;
  text-wrap: nowrap;
  margin-bottom: 35px;
}
@media screen and (max-width: 768px) {
  .form-total {
    text-wrap: wrap;
    text-align: right;
  }
}

.form-unit {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--neutral-solid-700);
  margin-left: 5px;
  text-wrap: nowrap;
}

.form-note {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--neutral-solid-400);
  margin-top: 10px;
}

.form-validate {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.form-validate .invalid-feedback {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--red-600);
}

.form-textarea {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: end;
  gap: 5px;
}
.form-textarea .textarea-count {
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  color: var(--neutral-solid-400);
}
.form-textarea .textarea-others {
  height: 250px;
}

.form-searchoption {
  flex-wrap: wrap;
  background-color: var(--neutral-solid-100);
  padding: 15px;
  gap: 5px;
  border-radius: 7px;
  border: 1px solid var(--neutral-solid-200);
}
@media screen and (max-width: 768px) {
  .form-searchoption .selectbox-container {
    width: 100%;
  }
}

.form-count {
  width: 55px;
  text-align: right;
}

.form-image {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.form-image .form-image-preview {
  width: 100%;
  height: max-content;
  padding: 15px;
  background-color: var(--white);
  outline: 1px solid var(--neutral-solid-200);
  border-radius: var(--input-md-radius);
}
.form-image .form-image-preview img {
  width: auto;
  height: 100%;
  margin: 0 auto;
  max-height: 200px;
}
.form-image .form-image-preview:not(:has(img)) {
  display: none;
}
.form-image.upload-stamp {
  flex: 1;
}
.form-image.upload-stamp .form-image-preview img {
  max-height: 100px;
}
.form-image.upload-stamp .form-attach-inline {
  flex: 1;
}

.form-month {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.form-month input {
  max-width: 50px;
}
.form-month .form-unit {
  margin: 0;
}

.form-product-select {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Only form estimate sheet */
.form-estimate {
  width: 100%;
  grid-column: 1/-1;
  outline: 1px solid var(--neutral-solid-300);
  border-radius: var(--layer-radius);
  overflow: hidden;
  table-layout: fixed;
  /* column width */
}
.form-estimate th, .form-estimate td {
  padding-inline: 10px;
}
.form-estimate thead {
  background-color: var(--bravo-primary);
  height: 35px;
  font-size: var(--text-sm);
  color: var(--white);
  font-weight: var(--font-bold);
  text-wrap: nowrap;
}
.form-estimate tbody tr {
  height: 60px;
}
.form-estimate tbody tr td > .input-md-outline-text {
  text-align: right;
}
.form-estimate thead th {
  border-left: 1px solid var(--neutral-solid-300);
}
.form-estimate thead th:first-of-type {
  border-left: none;
}
.form-estimate tbody th,
.form-estimate tbody td {
  border-left: 1px solid var(--neutral-solid-100);
  border-bottom: 1px solid var(--neutral-solid-100);
}
.form-estimate tbody tr:last-child th,
.form-estimate tbody tr:last-child td {
  border-bottom: none;
}
.form-estimate tbody th:first-child,
.form-estimate tbody td:first-child {
  border-left: none;
}
.form-estimate thead th:nth-child(1),
.form-estimate tbody th:nth-child(1) {
  width: 13.888%;
}
.form-estimate tbody th:nth-child(1) {
  font-size: var(--text-sm);
  color: var(--neutral-solid-800);
  font-weight: var(--font-bold);
  text-wrap: nowrap;
}
.form-estimate thead th:nth-child(2),
.form-estimate tbody th:nth-child(2),
.form-estimate thead th:nth-child(3),
.form-estimate tbody th:nth-child(3),
.form-estimate thead th:nth-child(4),
.form-estimate tbody th:nth-child(4) {
  width: 14.957%;
}

/* revision layer */
.revision-container.open {
  display: block;
}

.revision-container {
  display: none;
  position: absolute;
  left: calc(100% + 5px);
  top: -5px;
  width: 320px;
  border: 1px solid var(--neutral-solid-300);
  border-radius: var(--layer-radius);
  background-color: var(--white);
  overflow: hidden;
  z-index: 9999;
}
@media screen and (max-width: 768px) {
  .revision-container {
    left: 5px;
    top: calc(100% - 15px);
    width: calc(100% - 10px);
  }
}

.revision-title {
  padding: 5px 5px 5px 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: var(--neutral-solid-100);
  border-bottom: 1px solid var(--neutral-solid-300);
}

.revision-title-text {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--neutral-solid-700);
}

.revision-list {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  max-height: 320px;
}

.revision-item {
  padding: 15px;
  display: flex;
  flex-direction: row;
  background-color: var(--neutral-solid-50);
  justify-content: space-between;
  align-items: center;
  border-radius: var(--layer-radius);
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .revision-item {
    justify-content: start;
  }
}

.revision-item-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 200px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .revision-item-text {
    max-width: none;
  }
}

.revision-item-number {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--neutral-solid-700);
}
.revision-item-number:hover {
  text-decoration: underline;
}

.revision-item-date {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--neutral-solid-500);
}

/* Common Pages */
/* login */
.login-layer {
  display: flex;
  flex-direction: column;
  background-color: var(--white);
  border-radius: 15px;
  outline: 1px solid var(--neutral-solid-200);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}
.login-layer .login-header {
  padding: 40px 0 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-layer .login-header .login-logo img {
  height: 70px;
}
.login-layer .login-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.login-layer .login-body .login-body-id, .login-layer .login-body .login-body-pw {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.login-layer .login-body .login-subtitle, .login-layer .login-body .switch-text {
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  color: var(--neutral-solid-600);
}
.login-layer .login-bottom {
  padding: 20px;
  display: flex;
}
.login-layer .login-bottom button {
  flex: 1;
}

/* Special Settings */
/* tab_container */
#tab-container {
  flex-direction: column;
}
#tab-container > * {
  width: 100%;
}
#tab-container .pagetab {
  border-radius: 7px;
}
#tab-container .role-list {
  overflow-x: auto;
}
#tab-container .role-list .role-list-header {
  display: grid;
  grid-template-columns: 1fr 500px;
  color: rgb(148, 163, 184, var(--tw-text-opacity, 1));
  font-size: 13px;
  border-width: 1px;
  border-radius: 8px 8px 0 0;
  align-items: center;
  margin-top: 10px;
}
#tab-container .role-list .role-list-header, #tab-container .role-list .role-list-body {
  min-width: 700px;
}

/* 발주서 내 제품지정에서 항목이 하나도 없는 경우 */
.empty-notice {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 300px;
  background-color: var(--neutral-solid-50);
  border-radius: 7px;
}
.empty-notice img {
  width: 120px;
  filter: brightness(0.98);
}
.empty-notice p {
  text-align: center;
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  color: var(--neutral-solid-500);
}

[class*=paragraph-] .form-product-select:not(:has(> :not(.form-hidden))) ~ .empty-notice {
  display: flex;
}

/* only for SBE007P1 */
@media screen and (max-width: 768px) {
  #SBE007P1_dataForm .paragraph-2 :nth-child(9) {
    grid-row: 8;
  }
}

/* only for PRD002M_buttonset */
.contents-area:has(.pagetab .tabLink[aria-selected=true][data-tab="1"]) .PRD002M_buttonset {
  display: none;
}

.PRD002M_buttonset {
  position: relative;
}
.PRD002M_buttonset ul.menulist {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  z-index: 99;
}
.PRD002M_buttonset.open ul.menulist {
  display: flex;
}

/* Home (dashboard) */
.home-dashboard {
  display: flex;
  flex-direction: column;
  padding: 24px;
  margin-top: 25px;
  background-color: var(--white);
  border: 1px solid var(--neutral-solid-200);
  border-radius: 15px;
}
.home-dashboard:has(> .home-dashboard-item:nth-of-type(2)) {
  gap: 24px;
}
@media screen and (max-width: 1024px) {
  .home-dashboard {
    margin-top: 10px;
    padding: var(--contents-mobile-inner-padding);
  }
}

.home-dashboard-item {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 36px;
}
@media screen and (max-width: 1024px) {
  .home-header {
    flex-direction: column;
    margin-top: 5px;
    gap: 10px;
    padding-inline: var(--contents-mobile-inner-padding);
  }
}

.home-welcome {
  color: var(--neutral-solid-800);
}

.home-header-right {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
}
@media screen and (max-width: 1024px) {
  .home-header-right {
    flex-direction: column-reverse;
    align-items: start;
    gap: 25px;
  }
}

.home-refresh-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.home-refresh-label-text-container {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
}
.home-refresh-label-text-container .home-refresh-label-container {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
}
.home-refresh-label-text-container .home-refresh-label-container .home-refresh-label {
  color: var(--netural-solid-600);
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  margin-right: 20px;
}
@media screen and (max-width: 1024px) {
  .home-refresh-label-text-container {
    flex-direction: column;
    align-items: start;
    gap: 5px;
  }
  .home-refresh-label-text-container #refreshCountdown {
    display: none;
  }
}

.home-dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.home-title-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
}
.home-title-container:has(> .selectbox-wrapper) {
  justify-content: space-between;
}
@media screen and (max-width: 1024px) {
  .home-title-container {
    justify-content: space-between;
    flex-direction: column;
    align-items: start;
    gap: 10px;
  }
}

.home-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}
.home-title > h2 {
  font-size: var(--text-xl);
}

.home-title-date {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

.home-title-icon {
  width: 36px;
  height: auto;
  aspect-ratio: 1/1;
}

.home-table-rows {
  display: flex;
  flex-direction: row;
  gap: 36px;
}
@media screen and (max-width: 1024px) {
  .home-table-rows {
    flex-direction: column;
  }
}

.home-daymonth {
  width: 100%;
  max-width: 350px;
  min-height: 275px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  container: daymonthContainer/size;
}
@media screen and (max-width: 1024px) {
  .home-daymonth {
    max-width: none;
    container: none;
  }
}

.home-daymonth-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  flex-basis: 0;
}
.home-daymonth-header > span {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border-radius: 7px;
  flex: 1;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.home-daymonth-header > span:first-of-type {
  background-color: var(--blue-50);
  color: var(--blue-600);
}
.home-daymonth-header > span:last-of-type {
  background-color: var(--indigo-50);
  color: var(--indigo-600);
}

.home-daymonth-item {
  display: flex;
  flex-direction: column;
  padding-block: 10px;
  border-bottom: 1px solid var(--neutral-solid-200);
  flex: 1;
}
.home-daymonth-item:last-of-type {
  border-bottom: 0;
}

.home-daymonth-subtitle {
  color: var(--neutral-solid-500);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}

.home-daymonth-data {
  display: flex;
  flex-direction: row;
  gap: 5px;
  flex: 1;
  align-items: end;
}
.home-daymonth-data > span {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  width: 100%;
  text-align: right;
  transition: var(--speed-basic);
}
.home-daymonth-data > span:first-of-type {
  color: var(--blue-600);
}
.home-daymonth-data > span:last-of-type {
  color: var(--indigo-600);
}

/* 목록이 늘어나면 좌측 텍스트 크기 커짐 */
@container daymonthContainer (min-height: 395px) {
  .home-daymonth-data > span {
    font-size: var(--text-4xl);
    transition: var(--speed-basic);
  }
}
.home-table-scroll-container {
  flex: 1;
  overflow-x: auto;
}
.home-table-scroll-container:not(:has(tbody tr)) {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.home-table-scroll-container:not(:has(tbody tr)) .home-table-nohavecover {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  border-radius: var(--layer-radius);
  background-color: var(--neutral-solid-50);
  justify-content: center;
  align-items: center;
}
.home-table-scroll-container:not(:has(tbody tr)) .home-table-nohavecover > img {
  filter: grayscale(1) brightness(1.5) contrast(0.9);
  max-width: 100px;
}
.home-table-scroll-container:not(:has(tbody tr)) .home-table-nohavecover > span {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--neutral-solid-400);
}
@media screen and (max-width: 1024px) {
  .home-table-scroll-container:not(:has(tbody tr)) .home-table-nohavecover {
    min-height: 200px;
  }
}

.home-table-nohavecover {
  display: none;
}

.home-table {
  table-layout: fixed;
}
.home-table thead tr {
  height: 35px;
}
.home-table thead tr th {
  color: var(--neutral-solid-700);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  background-color: var(--neutral-solid-100);
  padding-inline: 10px;
  text-align: right;
}
.home-table thead tr th:first-child {
  width: 140px;
  border-top-left-radius: var(--layer-radius);
  border-bottom-left-radius: var(--layer-radius);
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .home-table thead tr th:first-child {
    width: 90px;
    text-align: left;
  }
}
.home-table thead tr th:last-child {
  border-top-right-radius: var(--layer-radius);
  border-bottom-right-radius: var(--layer-radius);
}
.home-table tbody tr {
  border-bottom: 1px solid var(--neutral-solid-200);
  height: 40px;
}
.home-table tbody tr td {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  padding-inline: 10px;
  text-align: right;
}
.home-table tbody tr td:first-of-type {
  font-weight: var(--font-bold);
  padding-inline: 10px;
  text-align: center;
}
@media screen and (max-width: 1024px) {
  .home-table tbody tr td:first-of-type {
    text-align: left;
  }
}
.home-table tbody tr td.td-total {
  color: var(--neutral-solid-800);
  font-weight: var(--font-semibold);
}
.home-table tbody tr:last-of-type {
  border-bottom: 0;
}
@media screen and (max-width: 1024px) {
  .home-table {
    min-width: 500px;
  }
}

@media screen and (max-width: 1024px) {
  #main_dashboard2 .home-table {
    min-width: 800px;
  }
}

.home-table-doublehead {
  border-collapse: separate;
  border-spacing: 5px;
  table-layout: fixed;
}
.home-table-doublehead thead th {
  background-color: var(--neutral-solid-100);
  font-size: var(--text-sm);
  color: var(--neutral-solid-600);
  font-weight: var(--font-semibold);
  height: 35px;
  border-radius: var(--layer-radius);
  padding-inline: 10px;
}
.home-table-doublehead thead th.th-warehouse {
  width: 100px;
}
.home-table-doublehead thead th.th-device {
  background-color: var(--blue-50);
  color: var(--blue-700);
}
.home-table-doublehead thead th.th-router {
  background-color: var(--indigo-50);
  color: var(--indigo-700);
}
.home-table-doublehead thead th.th-communication {
  background-color: var(--teal-50);
  color: var(--teal-700);
}
.home-table-doublehead thead th.th-big-total {
  width: 80px;
  color: var(--neutral-solid-800);
  font-weight: var(--font-bold);
}
.home-table-doublehead thead th .th-small-total {
  color: var(--neutral-solid-800);
  font-weight: var(--font-semibold);
}
.home-table-doublehead thead th .th-rows {
  display: flex;
  flex-direction: row;
  gap: 25px;
}
.home-table-doublehead thead th .th-rows > span {
  flex: 1;
  text-align: right;
}
.home-table-doublehead thead th .th-rows > span:last-of-type {
  flex: none;
  width: 55px;
}
.home-table-doublehead tbody tr {
  height: 40px;
  box-shadow: inset 0 -1px 0 var(--neutral-solid-200);
}
.home-table-doublehead tbody tr td {
  font-size: var(--text-sm);
  color: var(--neutral-solid-600);
  font-weight: var(--font-medium);
  text-align: right;
  padding-inline: 10px;
}
.home-table-doublehead tbody tr td.td-warehouse {
  color: var(--neutral-solid-700);
  font-weight: var(--font-bold);
  text-align: center;
}
.home-table-doublehead tbody tr td.td-total {
  color: var(--neutral-solid-800);
  font-weight: var(--font-semibold);
}
.home-table-doublehead tbody tr:last-of-type {
  box-shadow: none;
}
@media screen and (max-width: 1024px) {
  .home-table-doublehead {
    width: 1200px;
  }
}

/* 홈 예외사항 */
/* 현재 제품 종류별 보유 수량에서 제품 종류가 단말기 일 경우에만, 만기 경과 미 회수 나타나기 */
.home-dashboard-item:not(:has(#main_searchTypeParam1[value=T])) .home-table thead th:nth-of-type(5), .home-dashboard-item:not(:has(#main_searchTypeParam1[value=T])) .home-table tbody td:nth-of-type(5) {
  display: none;
}

/* SMT002P4 예외사항 */
/* 상단 여백 좁아짐으로 인해, 레이아웃 깨짐 완화 */
@media screen and (max-width: 768px) {
  #SMT002P4 .btn-lg-mono-ghost-icon.close-btn.jf_popupOneClose {
    display: none;
  }
}

/*
  Design Guidelines
  Version: 1.0
  Author: Jiyeol Park
  Company: ISTN
  Created: 2025-04-03
*/

/*# sourceMappingURL=style.css.map */