@charset "utf-8";
@import url('./root_semantic_layout.css');
@import url('./root_system_layout.css');

/* ==================== */
/* Typography */
/* ==================== */
body{font-family: var(--font-family);}
.text-h2{font-size: var(--text-h2); font-weight: var(--font-semibold);}
.text-h3{font-size: var(--text-h3); font-weight: var(--font-semibold);}
.text-h4{font-size: var(--text-h4); font-weight: var(--font-semibold);}
.text-h5{font-size: var(--text-h5); font-weight: var(--font-semibold);}
.text-h6{font-size: var(--text-h6); font-weight: var(--font-semibold);}
.title_bar { display: inline-flex; flex: 1; align-items: center; flex-wrap: wrap; gap: 0.5em;}
.title_bar::before { content: ''; display: block; width: 8px; height: 8px; background-color: var(--bg-brand); border-radius: var(--rounded-full);}

.text-5xl{font-size: var(--text-5xl);}
.text-4xl{font-size: var(--text-4xl);}
.text-3xl{font-size: var(--text-3xl);}
.text-2xl{font-size: var(--text-2xl);}
.text-xl{font-size: var(--text-xl);}
.text-lg{font-size: var(--text-lg);}
.text-md{font-size: var(--text-md);}
.text-base{font-size: var(--text-base);}
.text-sm{font-size: var(--text-sm);}
.text-xs{font-size: var(--text-xs);}
.text-2xs{font-size: var(--text-2xs);}

.text-desc{color: var(--text-tertiary);}

/* icon */
.icon_sm{display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); width: var(--space-md); height: var(--space-md);}
.icon_md{display: flex; align-items: center; justify-content: center; font-size: var(--text-base); width: var(--space-xl); height: var(--space-xl);}
.icon_lg{display: flex; align-items: center; justify-content: center; font-size: var(--text-lg); width: var(--space-2xl); height: var(--space-2xl);}
.icon_xl{display: flex; align-items: center; justify-content: center; font-size: var(--text-xl); width: var(--space-3xl); height: var(--space-3xl);}

/* ==================== */
/* Button    */
/* ==================== */
.btn_wrap{display: flex; flex-wrap: wrap; gap: var(--space-3xs);}
.btn_base{ font-weight: var(--font-semibold); line-height: var(--leading-base); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rounded-xs); padding: 0 var(--space-md); transition: all 0.2s; border: 1px solid transparent; margin: 0 !important; cursor: pointer; word-break: keep-all; text-decoration: none !important;}
input[type="button"].btn_base{ height: var(--height-sm);}
/* Size */
.btn_base.xs{
  height: var(--height-2xs); font-size: var(--text-xs); padding: 0 var(--space-xs);
  & i{ font-size: var(--text-2xs);}
}
.btn_base.sm{
  height: var(--height-xs); font-size: var(--text-xs); padding: 0 var(--space-xs);
  & i{ font-size: var(--text-xs);}
}
.btn_base.md{ 
  height: var(--height-sm); font-size: var(--text-xs); padding: 0 var(--space-md);
  & i{font-size: var(--text-base);}
}
.btn_base.lg{ 
  height: var(--height-md); font-size: var(--text-sm); padding: 0 var(--space-xl);
  & i{font-size: var(--text-lg);}
}
.btn_base.xl{
  height: var(--height-xl); font-size: var(--text-base); padding: 0 var(--space-3xl);
  & i{font-size: var(--text-xl);}
}
.btn_base.xxl{
  height: var(--height-2xl); font-size: var(--text-xl); padding: 0 3rem;
  & i{font-size: var(--text-xl);}
}
.btn_base.full{
  height: var(--height-xl);  width: 100%; font-size: var(--text-base); line-height: var(--leading-md); padding: var(--space-md);
  & i{font-size: var(--text-xl);}
}
/* btn icon gap */
.btn_base:has(i){gap: var(--space-3xs);}
.btn_base.lg:has(i){gap: var(--space-xs);}
.btn_base.xl:has(i){gap: var(--space-xs);}
/* icon only  */
.btn_base.icon_only{aspect-ratio: 1/1; padding: 0;}
/* Primary - 가장 중요한 액션 (CTA) */
.btn_base.primary{
  background-color: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-border);
  & i{color: inherit;}
  &:hover{background-color: var(--btn-primary-bg-hover);}
  &:active{background-color: var(--btn-primary-bg-pressed);}
}
/* Secondary - 보조 액션, outline 스타일 */
.btn_base.secondary{
  background-color: var(--btn-secondary-bg); border-color: var(--btn-secondary-border); color: var(--btn-secondary-text);
  & i{color: inherit;}
  &:hover{background-color: var(--btn-secondary-bg-hover);}
  &:active{background-color: var(--btn-secondary-bg-pressed);}
}
/* Tertiary - 세 번째 우선순위 */
.btn_base.tertiary{
  background-color: var(--btn-tertiary-bg); border-color: var(--btn-tertiary-border); color: var(--btn-tertiary-text);
  & i{color: inherit;}
  &:hover{background-color: var(--btn-tertiary-bg-hover);}
  &:active{background-color: var(--btn-tertiary-bg-pressed);}
}
/* Inverse - 반전 스타일 (어두운 배경) */
.btn_base.inverse{
  background-color: var(--btn-inverse-bg); color: var(--btn-inverse-text);
  & i{color: inherit;}
  &:hover{background-color: var(--btn-inverse-bg-hover);}
  &:active{background-color: var(--btn-inverse-bg-pressed);}
}
/* Neutral - 중립적인 액션 */
.btn_base.neutral{
  background-color: var(--btn-neutral-bg); color: var(--btn-neutral-text);
  & i{color: inherit;}
  &:hover{background-color: var(--btn-neutral-bg-hover);}
}
/* Subtle - 시각적 강조도가 낮은 버튼 */
.btn_base.subtle{
  background-color: var(--btn-subtle-bg); border-color: var(--btn-subtle-border); color: var(--btn-subtle-text);
  & i{color: inherit;}
  &:hover{background-color: var(--btn-subtle-bg-hover);}
  &:active{background-color: var(--btn-subtle-bg-pressed);}
}
/* Ghost - 보더/배경 없음 */
.btn_base.ghost{ 
  height: auto; background-color: var(--btn-ghost-bg); color: var(--btn-ghost-text); border: 0; padding: 0;
  & i{ color: inherit;}
  &:hover{ background-color: var(--btn-ghost-bg-hover); color: var(--btn-ghost-text-hover);}
  &:active{ color: var(--btn-ghost-text-pressed);}
  &.lg{ font-size: var(--text-base);}
  &.md{ font-size: var(--text-sm);}
  &.sm{ font-size: var(--text-xs);}
}
/* Link - 텍스트 링크 스타일 */
.btn_base.link{ 
  height: auto; line-height: var(--leading-lg); background-color: var(--btn-link-bg); color: var(--btn-link-text); padding: 0 !important;
  & i{ color: inherit;}
  & span{ position: relative;
    &::before{ content: ""; display: block; width: 100%; height: 1px; background-color: currentColor; position: absolute; bottom: 0; left: 0;}
  }
  &:hover{ color: var(--btn-link-text-hover);}
  &:active{ color: var(--btn-link-text-pressed);}
  &.visited:not(&:hover, &:active){
    color: var(--btn-link-visited-text);
    & span::before{background-color: currentColor;}
  }
  &.lg{font-size: var(--text-base);}
  &.md{font-size: var(--text-sm);}
  &.sm{ font-size: var(--text-xs); line-height: var(--leading-xs);}
}
/* Disabled */
.btn_base:disabled,
.btn_base:disabled:hover{ background-color: var(--disabled-bg); color: var(--disabled-text); border-color: var(--disabled-border); cursor: not-allowed;}
.btn_base.ghost:disabled{ background-color: transparent; color: var(--disabled-text);}
.btn_base.link.disabled{ 
  background-color: transparent; color: var(--disabled-text); border: none; cursor: not-allowed;
  & span::before{background-color: currentColor;}
}

/* ==================== */
/* Input Field    */
/* ==================== */
.input_field { 
  position: relative; width: 100%; margin-bottom: var(--space-lg);}
.input_label { 
  display: flex; flex-wrap: wrap; align-items: center; font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--input-label); margin-bottom: var(--space-xs);
  & .hint{font-size: var(--text-xs); font-weight: var(--font-medium); line-height: var(--leading-xl); display: block; width: 100%; color: var(--input-hint); margin-top: var(--space-3xs);}
}
.input_base {
  height: var(--height-sm); font-size: var(--text-xs); padding: 0 var(--space-md); border-radius: var(--rounded-xs); width: 100%; border: 1px solid var(--input-border);  outline: none; box-sizing: border-box; color: var(--input-text); background-color: var(--input-bg); transition: all 0.2s;
  &::placeholder { color: var(--input-placeholder); font-size: inherit; font-weight: var(--font-medium); text-decoration: none;}
  &:focus::placeholder { color: transparent;}
  &:focus { border: 1px solid var(--input-border-focus);}
  &:disabled { background-color: var(--disabled-bg); color: var(--disabled-text); cursor: not-allowed;}
  /* bottom_line 스타일 */
  &.bottom_line {
    background-color: transparent; border: 0; border-bottom: 1px solid var(--input-border); border-radius: 0; padding-left: 0; padding-right: 0;
    &:focus { border-bottom: 2px solid var(--input-border-focus);}
  }
}
/* Input 사이즈 */
.input_base.xs { height: var(--height-2xs); font-size: var(--text-xs); padding: 0 var(--space-xs);}
.input_base.sm { height: var(--height-xs); font-size: var(--text-xs); padding: 0 var(--space-xs);}
.input_base.md { height: var(--height-sm); font-size: var(--text-sm); }
.input_base.lg { height: var(--height-md); font-size: var(--text-base); padding: 0 var(--space-xl);}
.input_base.xl { height: var(--height-xl); font-size: var(--text-base); padding: 0 var(--space-xl);}
/* Field 정보 메시지 */
.field_message {
  display: none; align-items: baseline; gap: var(--space-3xs); font-size: var(--text-xs);  font-weight: var(--font-medium); color: var(--input-message); position: absolute; top: calc(100% + var(--space-3xs)); left: 0; width: 100%;
  & i {font-size: var(--text-sm); color: inherit;}
  &.error { color: var(--input-message-error);}
  &.success { color: var(--input-message-success);}
}
.input_field:has(.input_base:focus) .field_message { display: flex;} 
/* 인풋 안 아이콘 */
.input_with_icon{
  position: relative; display: flex; align-items: center; width: 100%;
   & .input_base{padding-right: 3em;}
  & i{position: absolute; top: 50%; right: var(--space-xl); transform: translateY(-50%); color: var(--icon-subtle);}
  & .input_base.sm{
    padding-right: var(--space-4xl);
    & + i{right: var(--space-xs);}
  }
  & .input_base.md{
    padding-right: 2.75em;
    & + i{right: var(--space-md);}
  }
}

/* 파일 업로드 */
.file_upload_area{position: relative; width: 100%; max-width: 6.25rem; aspect-ratio: 1/1;}
.base_table .file_upload_area{aspect-ratio: 1/1; max-width: 100%;}
.file_upload_area .input_base{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid var(--border-primary); border-radius: var(--rounded-xs); color: transparent; z-index: 1; background-color: rgba(255,255,255,0.5); cursor: pointer; margin-top: 0 !important;}
.file_upload_area .input_base::after{content: "\e61e"; font-family: "Phosphor"; position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%); font-size: var(--text-4xl); color: var(--icon-subtle); font-weight: var(--font-medium);}
.file_upload_area .input_base::before{content: "UPLOAD"; font-size: var(--text-xs); font-weight: var(--font-semibold); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); padding-top: 4em; color: var(--text-tertiary);}
.file_upload_area .input_base:hover{border-color: var(--border-brand);}
.file_upload_area .input_base:hover::before,
.file_upload_area .input_base:hover::after{color: var(--icon-interactive);}
.file_upload_area .input_base::file-selector-button { display: none;}
.file_upload_area .preview_item .preview{position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-primary); background-color :rgba(255,255,255,0.5); border-radius :var(--rounded-xs);}
.file_upload_area .preview_item img{width: 92%; max-height: 92%; object-fit: contain; text-align: center;}
.file_upload_area .preview_item .btn_base{position: absolute; top: 0; right: 0; z-index: 1; }
.file_upload_area .preview_item:has(.preview){ position: relative; width: 100%; height: 100%; border-radius: var(--rounded-sm); text-align: center; }
.file_upload_area .preview_item:has(.preview) + .input_base{z-index: -1;}

/* Select */
select.input_base { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23565868' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75em center; padding-right: 2.5em !important; cursor: pointer;}
select.text_select{
  border: 0; background-color: transparent; width: fit-content; min-width: auto; background-image: url(../img/icon/caret-down.svg);
  &:hover{border: 0; background-color: var(--bg-primary);}
  &:focus{border: 0; background-color: var(--bg-secondary);}
  & option{background-color: var(--bg-default);}
}

/* Textarea */
textarea.input_base { display: block; height: auto; min-height: var(--height-4xl); padding: var(--space-xs); resize: vertical; line-height: var(--leading-lg); box-sizing: border-box; border-radius: var(--rounded-sm);}
.char_count{ position: absolute; top: calc(100% + var(--space-xs)); right: 0; font-size: var(--text-sm); color: var(--text-secondary); text-align: right;}
.char_count .count{color:  var(--text-danger);}

/* ==================== */
/* Checkbox & Radio    */
/* ==================== */
.check_field { position: relative; display: flex; align-items: anchor-center; gap: var(--space-xs, 0.5em);}
.check_label { cursor: pointer; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--input-label); flex: 1; -webkit-user-select: none; user-select: none;}
/* Checkbox */
.check_field input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; position: relative; height: var(--height-3xs); aspect-ratio: 1/1; vertical-align: middle; cursor: pointer; outline: none; background-color: var(--checkbox-bg); border: 1px solid var(--checkbox-border); padding: 0; border-radius: var(--rounded-xs); transition: all 0.2s;
  &.check_base {
    &::before { content: "\e182"; font-family: "Phosphor"; font-size: var(--text-xs); font-weight: bold; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: transparent; transition: color 0.2s;}
    &:hover { border-color: var(--checkbox-border-checked);}
    &:checked {
      background-color: var(--checkbox-bg-checked); border-color: var(--checkbox-border-checked);
      &::before { color: var(--wh);}
    }
    &:disabled {
      background-color: var(--disabled-bg); border-color: var(--disabled-border); cursor: not-allowed;
      &:checked::before { color: var(--disabled-text);}
    }
  }
}
.check_field:has(input[type="checkbox"].check_base:disabled) .check_label { cursor: not-allowed; color: var(--disabled-text);}
/* Radio Button */
.check_field input[type="radio"] {
  -webkit-appearance: none; appearance: none; position: relative; height: var(--height-3xs); aspect-ratio: 1/1; vertical-align: middle; cursor: pointer; outline: none; background-color: var(--checkbox-bg); border: 1px solid var(--checkbox-border); padding: 0; border-radius: var(--rounded-xs); transition: all 0.2s;
  &::before { content: "\e182"; font-family: "Phosphor"; font-size: var(--text-xs); font-weight: bold; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: transparent; transition: color 0.2s;}
  &:hover { border-color: var(--radio-border-checked);}
  &:checked {
       background-color: var(--checkbox-bg-checked); border-color: var(--checkbox-border-checked);
      &::before { color: var(--wh);}
  }
  &:disabled { 
    background-color: var(--disabled-bg); border-color: var(--disabled-border); cursor: not-allowed;
    &:checked::before { color: var(--disabled-text);}
  }
}
.check_field:has(input[type="radio"]:disabled) .check_label { cursor: not-allowed; color: var(--disabled-text);}

.check_field.lg {
  & .check_base{
    height: 1.875rem; 
  }
  input[type="checkbox"] {
    &::before{font-size: var(--text-md);}
  }
    input[type="radio"] {
    &::before{font-size: var(--text-md);}
  }
}

/* ==================== */
/* Switch Toggle */
/* ==================== */
.check_field.switch { align-items: center;}
.switch_control { position: relative; display: inline-block; width: 2.5em; height: var(--height-3xs); min-width: 2.5em;}
.switch_control input { display: none;}
.switch_track { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-radius: var(--rounded-full); background-color: var(--switch-bg); transition: background-color 0.2s ease-in; cursor: pointer;}
.switch_track::after { content: ""; position: absolute; right: calc(100% - 1em - 2px); top: 50%; transform: translateY(-50%); width: 1em; height: 1em; border-radius: var(--rounded-circle); background-color: var(--switch-thumb); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: all 0.2s;}
.switch_control input:checked ~ .switch_track { background-color: var(--switch-bg-checked);}
.switch_control input:checked ~ .switch_track::after { right: 3px;}
.switch_control input:disabled ~ .switch_track { cursor: not-allowed; background-color: var(--disabled-bg);}
.check_field.switch:has(input:disabled) .check_label { cursor: not-allowed; color: var(--disabled-text);}

/* ==================== */
/* Chips (Box Checkbox & Radio) */
/* ==================== */
.chip_field { position: relative; display: inline-flex;}
.chip_field input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0;}
.chip_label {font-size: var(--text-xs); font-weight: var(--font-bold); height: var(--height-sm); display: inline-flex; align-items: center; flex: 1; justify-content: center; gap: var(--space-xs); padding: 0; border: 1px solid var(--chip-border); border-radius: var(--rounded-sm); background-color: var(--chip-bg); color: var(--chip-text); cursor: pointer; transition: all 0.2s; -webkit-user-select: none; user-select: none;}
.chip_label:hover { color: var(--chip-text-hover); border-color: var(--chip-border-hover); background-color: var(--chip-bg-hover); }
.chip_field input[type="checkbox"]:checked ~ .chip_label { background-color: var(--chip-bg-checked); border-color: var(--chip-border-checked); color: var(--chip-text-checked);}
.chip_field input[type="checkbox"]:disabled ~ .chip_label { background-color: var(--disabled-bg); border-color: var(--disabled-border); color: var(--disabled-text); cursor: not-allowed;}

/* Radio Chip - 라디오 버튼 스타일 Chips */
.chip_field input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0;}
.chip_field input[type="radio"]:checked ~ .chip_label { background-color: var(--chip-bg-checked); border-color: var(--chip-border-checked); color: var(--chip-text-checked);}
.chip_field input[type="radio"]:disabled ~ .chip_label { background-color: var(--disabled-bg); border-color: var(--disabled-border); color: var(--disabled-text); cursor: not-allowed;}
/* Chip 크기 */
.chip_label.sm { height: var(--height-xs); font-size: var(--text-xs);}
.chip_label.md { height: var(--height-sm);}
.chip_label.lg { height: var(--height-md); padding: 0 var(--space-xl); }

/* ==================== */
/* Tooltip              */
/* ==================== */
.tooltip_field{font-size: var(--text-base); position: relative; display: inline-flex; align-items: center; gap: var(--space-3xs);}
.tooltip_field .tooltip_btn{cursor: pointer; font-size: var(--text-lg); color: var(--tooltip-icon);}
.tooltip_content { opacity: 0; pointer-events: none; font-size: var(--text-xs); line-height: var(--leading-lg); font-weight: var(--font-semibold); width: max-content; max-width: 28.125em; display: flex; align-items: center; padding: var(--space-2xs); border-radius: var(--rounded-xs); position: fixed; z-index: 9999; box-shadow: 0px 0.125em 1px 0px rgba(80,80,80,0.2); background-color: var(--tooltip-bg); border: 1px solid var(--tooltip-border); color: var(--tooltip-text); transition: opacity 0.3s;}
.tooltip_field .tooltip_btn:hover + .tooltip_content{opacity: 1; pointer-events: auto;}

/* ==================== */
/* Modal & Bottom modal */
/* ==================== */
.modal_wrap{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 100;}
.modal_box{ display: flex; flex-direction: column; justify-content: space-between; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: var(--bg-default); padding: var(--space-lg); border-radius: var(--rounded-md); width: 90%; max-width: 600px; min-width: 600px; min-height: var(--height-4xl); max-height: 90%; overflow-y: auto;}
.modal_header{height: var(--height-lg); display: flex; justify-content: space-between; align-items: center; padding: 0 var(--space-xl); border-radius: var(--rounded-md) var(--rounded-md) 0 0; color: var(--text-inverse); background-color: var(--bg-brand);}
.modal_box .modal_title{font-size: var(--text-md); font-weight: var(--font-semibold); line-height: var(--leading-xs); padding: var(--space-sm) 0 var(--space-xl); border-bottom: 1px solid var(--border-primary);}
.modal_box .modal_content_title{
  position: relative; font-size: var(--text-base); font-weight: var(--font-bold); line-height: var(--leading-xl); display: flex; gap: var(--space-xl); padding-bottom: var(--space-3xl);
  &::before{content: ""; display: block; width: 0.25rem; height: var(--leading-xl); background-color: var(--bg-brand); }
}
.modal_box .modal_text{font-size: var(--text-base); line-height: var(--leading-lg); padding: var(--space-2xl) 0 0; text-align: center; }
.modal_box .modal_btn{display: flex; align-items: baseline; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--border-tertiary);}
.modal_box .modal_btn:has(.btn_base){justify-content: center;}
/* .modal_box .modal_btn .btn_base{flex: 1;} */
.modal_box .modal_content{padding-bottom: var(--space-2xl);}
.modal_footer{padding: var(--space-xl); display: flex; align-items: center; justify-content: space-between;}

/* Bottom modal */
.modal_wrap.bottom{ transition: opacity 0.3s ease; opacity: 0;}
.modal_wrap.bottom .modal_box{top: auto; bottom: -100%; left: 50%; transform: translateX(-50%); width: 100%; max-width: 31.25em; border-radius: var(--rounded-xl) var(--rounded-xl) 0 0; transition: bottom 0.5s ease;}
.modal_wrap.bottom.active { opacity: 1;}
.modal_wrap.bottom.active .modal_box { bottom: 0;}

/* dialog_modal_wrap */
.dialog_modal_wrap .modal_box{
  padding: 0; max-width: 100%; width: 90%;
  & .modal_text{
    text-align: left;
    padding: 0 0 var(--space-3xl);
    &:last-child{padding-bottom: 0;}
  }
  & .modal_content{padding: var(--space-3xl);}
}
.modal_box.sm{max-width: 38.75rem;} /* 620px */
.modal_box.md{max-width: 47.5rem;} /* 760px */
.modal_box.lg{max-width: 50rem; padding: 1.875rem;} /* 920px */
  

#modal_estimate .base_table{border: 0;}
#modal_estimate .base_table th{background-color: var(--color-indigo-100);}
#modal_estimate ul li{position: relative; padding-left: var(--space-2xl);}
#modal_estimate ul li::after{content: ""; width: 0.3rem; height: 0.3rem; background-color: var(--color-indigo-900); border-radius: 50%; position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%);}
/* ==================== */
/* Tab Content          */
/* ==================== */
.tab_wrap { display: inline-block; }
.tab_list { 
  display: flex; flex-wrap: wrap;
  .tab_item { flex: 1; background-color: var(--tab-bg);
    .inner { font-weight: var(--font-bold); display: block; width: 100%; height: var(--height-sm); padding: 0 var(--space-md); text-align: center; color: var(--tab-text); box-sizing: border-box;}
    &:hover { background-color: var(--tab-bg-hover);}
  }
  /* Line */
  &.line {
    .tab_item { min-width: var(--tab-line-min-width);
      .inner { font-size: var(--text-xs); border-bottom: 2px solid var(--tab-line-border); line-height: calc(var(--height-sm) - 0.25rem);}
      &.active .inner { border-bottom-width: 0.25rem; border-bottom-color: var(--tab-line-border-active);}
    }
  }
  /* Fill */
  &.fill {
    .tab_item { min-width: var(--tab-fill-min-width); background-color: var(--tab-fill-bg); border-right: 1px solid var(--tab-fill-border);
      .inner { font-size: var(--text-sm); line-height: var(--height-sm);}
      &:first-child { border-radius: var(--rounded-xs) 0 0 var(--rounded-xs); }
      &:last-child { border-radius: 0 var(--rounded-xs) var(--rounded-xs) 0; border-right: 0; }
      &:hover { background-color: var(--tab-fill-bg-hover);}
      &.active { background-color: var(--tab-fill-bg-active);
        .inner { color: var(--tab-fill-text-active);}
      }
    }
  }
}
.tab_panel {
  display: none !important;
  &.active { display: block !important;
}
}

/* ==================== */
/* Card                 */
/* ==================== */
.card_list{ display: flex; flex-direction: column; gap: var(--space-lg);}
.card_item{ background-color: var(--bg-default); box-shadow: var(--shadow-primary); border-radius: var(--rounded-md); transition: all 0.2s; border: 1px solid var(--border-primary);}
.card_link{ display: flex; flex-direction: column; padding: var(--space-md);}
.card_head{ display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--space-xs); margin-bottom: var(--space-xs); border-bottom: 1px solid var(--border-primary);}
.card_date{ font-size: var(--text-xs); color: var(--text-secondary); margin-left: auto;}
.card_body{ position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);}
.card_title{ font-size: var(--text-sm); color: var(--text-primary); flex: 1;}
.card_icon{ display: flex; align-items: center; justify-content: center; width: var(--space-2xl); height: var(--space-2xl); background-color: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--rounded-circle);}
.card_icon span{ font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-base); padding-left: var(--space-4xs);}
.card_footer{display: flex; flex-wrap: wrap; padding-top: var(--space-xl); margin-top: var(--space-xl); border-top: 1px solid var(--border-primary); gap: var(--space-xs);}

/* info */
.card_info{padding: var(--space-3xl);}
.card_info .card_head{flex-direction: column; align-items: flex-start; gap: var(--space-xl); padding-bottom: var(--space-xl); margin-bottom: var(--space-xl);}
.card_info .card_body{flex-direction: column; align-items: flex-start; word-break: keep-all;}


/* ==================== */
/* Table                */
/* ==================== */
.base_table_container { overflow-x: auto; width: 100%;}
.base_table_head{display: flex; align-items: center; justify-content: flex-end; padding-bottom: var(--space-xs); gap: var(--space-xs);}
.base_table { 
  width: 100%; border-collapse: collapse; overflow: hidden; background-color: var(--table-bg); table-layout: fixed; border-top: 2px solid var(--table-border-top);
   &.none_hover tr:hover td{background-color: transparent; color: inherit;}
}
.base_table th,
.base_table td { font-size: var(--text-sm); line-height: var(--leading-xl); border: 1px solid var(--table-border); padding: var(--table-spacing-sm) var(--table-spacing-md); text-align: left; vertical-align: middle;}
.base_table thead th { background-color: var(--table-bg-header); color: var(--text-primary); font-weight: var(--font-semibold); text-align: center; white-space: nowrap;}
.base_table tbody td { background-color: var(--table-bg); color: var(--table-text); font-weight: var(--font-medium); text-align: center;}
.base_table tbody tr:hover td { background-color: var(--table-bg-hover); color: var(--table-text-hover);}
.base_table tbody th { background-color: var(--table-bg-header); font-weight: var(--font-semibold); text-align: center;} 

.base_table_container .base_table.search_table tr:hover td{background-color: transparent; color: inherit;}
.base_table_container .base_table.search_table{min-width: auto !important;}
/* 반응형 */
@media screen and (max-width: 1399px) {
  .base_table_container { overflow-x: auto;}
  .base_table_container .base_table {min-width: 900px;}

}

/* 검색 폼 반응형 */
@media screen and (max-width: 900px) {
  .base_table_container .base_table.search_table,
  .base_table_container .base_table.search_table tbody { display: block; }
  .base_table_container .base_table.search_table colgroup { display: none; }
  .base_table_container .base_table.search_table tr {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--table-border);
  }
  .base_table_container .base_table.search_table th {
    width: 6em;
    flex-shrink: 0;
    border-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .base_table_container .base_table.search_table td {
    flex: 1;
    min-width: 12em;
    border-block: 0;
    padding-left: var(--table-spacing-sm);
  }
  .base_table_container .base_table.search_table td[colspan] {
    min-width: 0;
  }
  .base_table_container .base_table.search_table td { min-width: 0; flex-basis: calc(100% - 6em); }
}

@media screen and (max-width: 560px) {
}

/* ==================== */
/* Badge                */
/* ==================== */
.badge_base { height: var(--height-sm); aspect-ratio: 1/1; display: inline-flex; align-items: center; justify-content: center; font-weight: var(--font-medium); border-radius: var(--rounded-full); line-height: var(--leading-base); font-size: var(--text-xs); white-space: nowrap; color: var(--text-primary); border: 1px solid transparent;}
.badge_base.text{border-radius: var(--rounded-sm); aspect-ratio: inherit; }

/* Badge 사이즈 */
.badge_base.dotted {height: 0.38rem; border: 0;}
.badge_base.xs {height: var(--height-2xs); font-size: var(--text-xs);}
.badge_base.sm {height: var(--height-xs); font-size: var(--text-xs);}
.badge_base.lg { height: var(--height-md); font-size: var(--text-sm);}
.badge_base.text.xs { padding: 0 var(--space-xs);}
.badge_base.text.sm { padding: 0 var(--space-xs);}
.badge_base.text.md {padding: 0 var(--space-md);}
.badge_base.text.lg {padding: 0 var(--space-md);}

/* 색상 */
/* Primary (Brand) */
.badge_base.primary {
  background-color: var(--badge-primary-solid); color: var(--badge-primary-solid-text);
  &.out_line { background-color: var(--badge-primary-outline-bg); border-color: var(--badge-primary-outline); color: var(--badge-primary-outline-text); }
  &.pastel { background-color: var(--badge-primary-pastel); border-color: transparent; color: var(--badge-primary-pastel-text); }
}
/* Tertiary (Gray) */
.badge_base.tertiary {
  background-color: var(--badge-gray-solid); color: var(--badge-gray-solid-text);
  &.out_line { background-color: var(--badge-gray-outline-bg); border-color: var(--badge-gray-outline); color: var(--badge-gray-outline-text); }
  &.pastel { background-color: var(--badge-gray-pastel); border-color: transparent; color: var(--badge-gray-pastel-text); }
}
/* Success (Green) */
.badge_base.green,
.badge_base.success {
  background-color: var(--badge-green-solid); color: var(--badge-green-solid-text);
  &.out_line { background-color: var(--badge-green-outline-bg); border-color: var(--badge-green-outline); color: var(--badge-green-outline-text); }
  &.pastel { background-color: var(--badge-green-pastel); border-color: transparent; color: var(--badge-green-pastel-text); }
}
/* Danger (Red) */
.badge_base.red,
.badge_base.danger {
  background-color: var(--badge-red-solid); color: var(--badge-red-solid-text);
  &.out_line { background-color: var(--badge-red-outline-bg); border-color: var(--badge-red-outline); color: var(--badge-red-outline-text); }
  &.pastel { background-color: var(--badge-red-pastel); border-color: transparent; color: var(--badge-red-pastel-text); }
}
/* Warning (Yellow) */
.badge_base.yellow,
.badge_base.warning {
  background-color: var(--badge-yellow-solid); color: var(--badge-yellow-solid-text);
  &.out_line { background-color: var(--badge-yellow-outline-bg); border-color: var(--badge-yellow-outline); color: var(--badge-yellow-outline-text); }
  &.pastel { background-color: var(--badge-yellow-pastel); border-color: transparent; color: var(--badge-yellow-pastel-text); }
}
/* Information (Blue) */
.badge_base.blue,
.badge_base.info {
  background-color: var(--badge-blue-solid); color: var(--badge-blue-solid-text);
  &.out_line { background-color: var(--badge-blue-outline-bg); border-color: var(--badge-blue-outline); color: var(--badge-blue-outline-text); }
  &.pastel { background-color: var(--badge-blue-pastel); border-color: transparent; color: var(--badge-blue-pastel-text); }
}
/* Disabled */
.badge_base.disabled { background-color: var(--disabled-bg); color: var(--disabled-text); border-color: var(--disabled-border);}

/* ==================== */
/* Tag                  */
/* ==================== */
.tag_base{ 
  font-size: var(--text-xs); font-weight: var(--font-bold); height: var(--height-xs); display: inline-flex; align-items: center; gap: var(--space-3xs); color: var(--tag-text); background-color: var(--tag-bg); border: 1px solid var(--tag-border); border-radius: var(--rounded-full); padding: 0 var(--space-xs);
  &.md{ height: var(--height-sm); font-size: var(--text-sm); padding: 0 var(--space-md);}
  & i{cursor: pointer;}
  &:hover{background-color: var(--tag-bg-hover);}
  &:active{background-color: var(--tag-bg-active);}
  &.disabled{color: var(--disabled-text); background-color: var(--disabled-bg); border-color: var(--disabled-border);}
}

/* ==================== */
/* Pagination           */
/* ==================== */
.pagination_base { display: flex; justify-content: center; align-items: center; gap: var(--space-3xs); padding: var(--space-lg) 0;}
.pagination_base .page_btn { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; cursor: pointer; font-size: var(--text-xs); color: var(--surface-500);
  &:hover {
    color: var(--text-brand);
  }
}
.pagination_base .page_num { font-size: var(--text-sm); color: var(--text-tertiary); cursor: pointer; width: 1.5rem; height: 1.5rem; text-align: center;
  &.active {
    color: var(--text-brand);
    font-weight: var(--font-bold);
    text-decoration: underline;
  }
}

/* 로딩 스피너 */
.spinners_box{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1000; background-color: var(--bg-default); border: 1px solid var(--border-brand); border-radius: var(--rounded-md); padding: var(--space-3xl); display: flex;  flex-direction: column; align-items: center; text-align: center;}
.spinners_box .loader { width: 0.5em; height: 0.5em; border-radius: var(--rounded-circle); position: relative; text-indent: -9999em; animation: mulShdSpin 1.2s infinite ease; transform: translateZ(0); margin: 1.5em 0;}
.spinners_box .text{ font-weight: var(--font-semibold); padding: var(--space-xl) 0 var(--space-md); color: var(--text-brand);}
.spinners_box .desc{font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-secondary);}
@keyframes mulShdSpin {
  0%, 100% { box-shadow: 0em -1.35em 0em 0em var(--spinner-brand-bg), 0.9em -0.9em 0 0em var(--spinner-bg), 1.3em 0em 0 0em var(--spinner-bg), 0.85em 0.85em 0 0em var(--spinner-bg), 0em 1.3em 0 0em var(--spinner-bg), -0.9em 0.9em 0 0em var(--spinner-bg), -1.35em 0em 0 0em var(--spinner-bg), -0.9em -0.9em 0 0em var(--spinner-bg);}
  12.5% {box-shadow: 0em -1.35em 0em 0em var(--spinner-bg), 0.9em -0.9em 0 0em var(--spinner-brand-bg), 1.3em 0em 0 0em var(--spinner-bg), 0.85em 0.85em 0 0em var(--spinner-bg), 0em 1.3em 0 0em var(--spinner-bg), -0.9em 0.9em 0 0em var(--spinner-bg), -1.35em 0em 0 0em var(--spinner-bg), -0.9em -0.9em 0 0em var(--spinner-bg);}
  25% {box-shadow: 0em -1.35em 0em 0em var(--spinner-bg), 0.9em -0.9em 0 0em var(--spinner-bg), 1.3em 0em 0 0em var(--spinner-brand-bg), 0.85em 0.85em 0 0em var(--spinner-bg), 0em 1.3em 0 0em var(--spinner-bg), -0.9em 0.9em 0 0em var(--spinner-bg), -1.35em 0em 0 0em var(--spinner-bg), -0.9em -0.9em 0 0em var(--spinner-bg);}
  37.5% {box-shadow: 0em -1.35em 0em 0em var(--spinner-bg), 0.9em -0.9em 0 0em var(--spinner-bg), 1.3em 0em 0 0em var(--spinner-bg), 0.85em 0.85em 0 0em var(--spinner-brand-bg), 0em 1.3em 0 0em var(--spinner-bg), -0.9em 0.9em 0 0em var(--spinner-bg), -1.35em 0em 0 0em var(--spinner-bg), -0.9em -0.9em 0 0em var(--spinner-bg);}
  50% {box-shadow: 0em -1.35em 0em 0em var(--spinner-bg), 0.9em -0.9em 0 0em var(--spinner-bg), 1.3em 0em 0 0em var(--spinner-bg), 0.85em 0.85em 0 0em var(--spinner-bg), 0em 1.3em 0 0em var(--spinner-brand-bg), -0.9em 0.9em 0 0em var(--spinner-bg), -1.35em 0em 0 0em var(--spinner-bg), -0.9em -0.9em 0 0em var(--spinner-bg);}
  62.5% {box-shadow: 0em -1.35em 0em 0em var(--spinner-bg), 0.9em -0.9em 0 0em var(--spinner-bg), 1.3em 0em 0 0em var(--spinner-bg), 0.85em 0.85em 0 0em var(--spinner-bg), 0em 1.3em 0 0em var(--spinner-bg), -0.9em 0.9em 0 0em var(--spinner-brand-bg), -1.35em 0em 0 0em var(--spinner-bg), -0.9em -0.9em 0 0em var(--spinner-bg);}
  75% {box-shadow: 0em -1.35em 0em 0em var(--spinner-bg), 0.9em -0.9em 0 0em var(--spinner-bg), 1.3em 0em 0 0em var(--spinner-bg),0.85em 0.85em 0 0em var(--spinner-bg),0em 1.3em 0 0em var(--spinner-bg), -0.9em 0.9em 0 0em var(--spinner-bg), -1.35em 0em 0 0em var(--spinner-brand-bg), -0.9em -0.9em 0 0em var(--spinner-bg);}
  87.5% {box-shadow: 0em -1.35em 0em 0em var(--spinner-bg), 0.9em -0.9em 0 0em var(--spinner-bg), 1.3em 0em 0 0em var(--spinner-bg), 0.85em 0.85em 0 0em var(--spinner-bg), 0em 1.3em 0 0em var(--spinner-bg), -0.9em 0.9em 0 0em var(--spinner-bg), -1.35em 0em 0 0em var(--spinner-bg), -0.9em -0.9em 0 0em var(--spinner-brand-bg);}
}