@charset "utf-8";

/* ==================== */
/* Typography */
/* ==================== */
.text-h2{font-size: var(--text-h2); font-weight: var(--font-bold);}
.text-h3{font-size: var(--text-h3); font-weight: var(--font-bold);}
.text-h4{font-size: var(--text-h4); font-weight: var(--font-bold);}
.text-h5{font-size: var(--text-h5); font-weight: var(--font-bold);}
.text-h6{font-size: var(--text-h6); font-weight: var(--font-bold);}

.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{font-size: var(--text-sm); 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-medium); 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-xs); font-size: var(--text-xs); padding: 0 var(--space-md); border-radius: var(--rounded-xs);
  & i{ font-size: var(--text-2xs);}
}
.btn_base.sm{
  height: var(--height-sm); font-size: var(--text-sm); padding: 0 var(--space-lg);
  & i{ font-size: var(--text-xs);}
}
.btn_base.md{ 
  height: var(--height-md); font-size: var(--text-base); padding: 0 var(--space-md);
  & i{font-size: var(--text-base);}
}
.btn_base.lg{ 
  height: var(--height-lg); font-size: var(--text-md); padding: 0 var(--space-xl);
  & i{font-size: var(--text-lg);}
}
.btn_base.xl{
  height: var(--height-xl); font-size: var(--text-lg); padding: 0 var(--space-3xl); 
  & i{font-size: var(--text-xl);}
}
.btn_base.full{
  height: var(--height-lg);  width: 100%; font-size: var(--text-md); 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);
  & 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);}
  &:active{background-color: var(--btn-neutral-bg-pressed);}
}
/* 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-md); font-size: var(--text-base);}
.input_label { 
  display: flex; flex-wrap: wrap; align-items: center; font-size: var(--text-base); font-weight: var(--font-bold); color: var(--input-label); margin-bottom: var(--space-4xs);
  & .hint{font-size: var(--text-xs); font-weight: var(--font-medium); line-height: var(--leading-xl); display: block; width: 100%; color: var(--input-hint); }
}
.input_base {
  height: var(--height-sm); font-size: var(--text-xs); padding: 0 var(--space-sm); 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-color: var(--input-border-focus);}
  &:disabled { background-color: var(--disabled-bg); color: var(--disabled-text); cursor: not-allowed;}
  /* bottom_line 스타일 */
  &.bottom_line {
    border: 0; border-bottom: 1px solid var(--input-border); border-radius: 0;
    &:focus { border-color:var(--input-border-focus);}
  }
}
/* Input 사이즈 */
.input_base.sm { height: var(--height-sm); font-size: var(--text-xs);}
.input_base.md { height: var(--height-md); font-size: var(--text-sm);}
.input_base.lg { height: var(--height-lg); 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{font-size: var(--text-lg); position: absolute; top: 50%; right: var(--space-xl); transform: translateY(-50%); color: var(--icon-default);}
}

/* 파일 업로드 */
.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-3xl); padding: var(--space-sm); resize: vertical; line-height: var(--leading-lg); box-sizing: border-box; border-radius: var(--rounded-sm); font-size: var(--text-base);}
.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: 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: 1.8rem; aspect-ratio: 1/1; vertical-align: middle; cursor: pointer; outline: none; background-color: var(--radio-bg); border: 1px solid var(--radio-border); padding: 0; border-radius: var(--rounded-circle); transition: all 0.2s;
  &::before { content: "\e182"; font-family: "Phosphor"; font-size: var(--text-xs); position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; border-radius: var(--rounded-circle); padding-top: 1px; color: var(--radio-icon);}
  &:hover { border-color: var(--radio-border-checked);}
  &:checked {
    border-color: var(--radio-border-checked); background-color: var(--radio-bg-checked);
    &::before { color: var(--radio-icon-checked);}
  }
  &: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: 1.8rem; aspect-ratio: 1/1; vertical-align: middle; cursor: pointer; outline: none; background-color: var(--radio-bg); border: 1px solid var(--radio-border); padding: 0; border-radius: var(--rounded-circle); transition: all 0.2s;
  &::before { content: "\e182"; font-family: "Phosphor"; font-size: var(--text-xs); position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; border-radius: var(--rounded-circle); padding-top: 1px; color: var(--radio-icon);}
  &:hover { border-color: var(--radio-border-checked);}
  &:checked {
    border-color: var(--radio-border-checked); background-color: var(--radio-bg-checked);
    &::before { color: var(--radio-icon-checked);}
  }
  &: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.sm .check_base{
  height: 1.6rem;
  &::before{font-size: var(--text-2xs);}
}
.check_field.md .check_base{height: 2rem;
  &::before{font-size: var(--text-xs);}
}
.check_field.lg{
  & .check_base{height: 2.4rem;
   &::before{font-size: var(--text-sm);}
 }
 & .check_label{font-size: var(--text-base);}
}

/* ==================== */
/* Switch Toggle */
/* ==================== */
.check_field.switch { align-items: center;}
.switch_control { position: relative; display: inline-block; height: 2.6rem; width: 6rem;}
.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% - 2rem - 3px); top: 50%; transform: translateY(-50%); width: 2rem; height: 2em; 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-sm); font-weight: var(--font-bold); height: var(--height-sm); display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0 var(--space-md); border: 1px solid var(--chip-border); border-radius: var(--rounded-full); 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 { 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); }
.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); }
.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; z-index: -1; font-size: var(--text-xs); line-height: var(--leading-lg); font-weight: var(--font-semibold); width: max-content; max-width: 28.125em; height: var(--height-xs); display: flex; align-items: center; padding: 0 var(--space-xs); border-radius: var(--rounded-xs); position: absolute; top: 50%; left: calc(100% + var(--space-3xs)); transform: translateY(-50%); 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: all 0.3s;}
.tooltip_field .tooltip_btn:hover + .tooltip_content{opacity: 1; z-index: 1;}
.tooltip_field i{color: var(--tooltip-icon);}
.tooltip_field .tooltip_btn:hover{color: var(--tooltip-icon-hover);}

/* ==================== */
/* 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: 64%; max-width: 31.25em; min-height: var(--height-4xl);}
.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; 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-xl) 0; text-align: center; }
.modal_box .modal_btn{display: flex; align-items: baseline; gap: var(--space-md);}
.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);}
  &.sm{max-width: 38.75rem;} /* 620px */
  &.md{max-width: 47.5rem;} /* 760px */
  &.lg{max-width: 57.5rem;} /* 920px */
}

/* ==================== */
/* Tab                  */
/* ==================== */
/* Base */
.tab_base { display: flex; align-items: center; background-color: var(--tab-bg); }
.tab_base li a,
.tab_base li p { display: block; width: 100%; text-align: center; cursor: pointer; color: var(--tab-text); line-height: 1.43em; transition: all 0.2s; font-size: var(--text-sm);}
.tab_base li.active a,
.tab_base li.active p { color: var(--tab-text-active); font-weight: var(--font-bold); }

/* Line - 하단 라인 탭 */
.tab_base.line li { flex: 1; text-align: center; }
.tab_base.line li a,
.tab_base.line li p { padding: 1rem 1.5rem; background-color: transparent; border-bottom: 2px solid var(--tab-line-border); }
.tab_base.line li.active a,
.tab_base.line li.active p { background-color: transparent; border-bottom-color: var(--tab-line-border-active); color: var(--tab-text-active); font-weight: var(--font-bold); }

/* Scroll - 스크롤 가능한 서브 탭 (기본) */
.tab_base.scroll { border-bottom: 1px solid var(--tab-scroll-border); }
.tab_base.scroll li a,
.tab_base.scroll li p {padding: 1rem 1.5rem; }
.tab_base.scroll li.active a,
.tab_base.scroll li.active p{color: var(--tab-scroll-text-active);}


/* Fill - 채움 배경 탭 */
.tab_base.fill li { flex: 1; }
.tab_base.fill li a,
.tab_base.fill li p {font-weight: var(--font-bold); padding: 12px 0; background-color: var(--tab-fill-bg); text-align: center; max-height: 50%; cursor: pointer; }
.tab_base.fill li.active a,
.tab_base.fill li.active p { background-color: var(--tab-fill-bg-active); color: var(--tab-fill-text-active); }

/* Pill - 알약형 탭 */
.tab_base.pill { padding: 1rem 0.5rem; }
.tab_base.pill li { padding: 5px; flex: 1; }
.tab_base.pill li a,
.tab_base.pill li p { font-size: var(--text-xs); padding: 8px 2px; border-radius: 5rem; border: 1px solid var(--tab-pill-border); color: var(--tab-text); background-color: var(--tab-pill-bg);}
.tab_base.pill li.active a,
.tab_base.pill li.active p { background-color: var(--tab-pill-bg-active); color: var(--tab-pill-text-active); }

/* Tab Panel */
.tab_panel { display: none !important; }
.tab_panel.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 { width: 100%; border-collapse: collapse; overflow: hidden; background-color: var(--table-bg); table-layout: fixed; border-top: 2px solid var(--table-border-top);}
.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);}
.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;} 

/* 반응형 */
@media screen and (max-width: 1399px) {
  .base_table_container {
    overflow-x: auto;
  }
}

/* ==================== */
/* Badge                */
/* ==================== */
.badge_base { height: var(--height-xs); 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-full); aspect-ratio: inherit; }

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

/* 색상 */
/* 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);}
}

/* 로딩 스피너 */
.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);}
}