@charset "UTF-8";

/* 구글 filled(채워진) 아이콘 클래스 */
.material-symbols-outlined{font-size: var(--text-base);}
.material-symbols-outlined.filled {font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;}

/* ==================== */
/* Button               */
/* ==================== */
.btn_wrap{display: flex; flex-wrap: wrap; gap: var(--space-3xs);}
.btn_base{font-size: var(--text-base); font-weight: var(--font-semibold); line-height: 1.19em; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rounded-sm); padding: var(--space-md); transition: all 0.2s; border: 1px solid transparent; cursor: pointer; word-break: keep-all; text-decoration: none !important;}
input[type="button"].btn_base{height: auto !important;}
.btn_base:hover{background-color: transparent;}

/* size */
.btn_base.xs{font-size: var(--text-xs); padding: var(--space-2xs) var(--space-md);}
.btn_base.sm{font-size: var(--text-sm); padding: var(--space-xs); line-height: 1.35em;}
.btn_base.md{} /* 기본 사이즈 */
.btn_base.lg{font-size: var(--text-lg); line-height: 1.2em; padding: var(--space-lg) var(--space-md);}
.btn_base.xl{font-size: var(--text-3xl); font-weight: var(--font-semibold); }

.btn_base:has(span){gap: var(--space-xs);}
.btn_base.lg:has(span){gap: var(--space-md);}
.btn_base span:not(.icon_only span){line-height: 0.5em;}
.btn_base.icon_only{border-radius: var(--rounded-circle);}
.btn_base.icon_only span{font-weight: var(--font-semibold);}
.btn_base.sm.icon_only{padding: 0; width: 1.5em; aspect-ratio: 1/1;}
.btn_base.xs.icon_only{padding: var(--space-3xs);}

.btn_base.sm.icon_only span{font-size: var(--text-sm) !important;}
.btn_base.xs.icon_only span{font-size: var(--text-xs);}

.btn_base.sm span{font-size: var(--text-lg) !important;}
.btn_base.md span{font-size: var(--text-xl) !important;}
.btn_base.lg span{font-size: var(--text-xl) !important;}

/* Primary - 가장 중요한 액션 (CTA) --blue-500 */
.btn_base.primary{background-color: var(--btn-primary-bg); color: var(--btn-primary-text);}
.btn_base.primary span{color: var(--btn-primary-text);}
.btn_base.primary:hover{background-color: var(--btn-primary-bg-hover);}
.btn_base.primary:hover span{color: var(--btn-primary-text);}

/* Secondary - 보조 액션 --blue-300 */
.btn_base.secondary{background-color: var(--btn-secondary-bg); color: var(--btn-secondary-text);}
.btn_base.secondary span{color: var(--btn-secondary-text);}
.btn_base.secondary:hover{background-color: var(--btn-secondary-bg-hover);}
.btn_base.secondary:hover span{color: var(--btn-secondary-text);}

/* Tertiary - 세 번째 우선순위 --indigo-900 */
.btn_base.tertiary{background-color: var(--btn-tertiary-bg); color: var(--btn-tertiary-text);}
.btn_base.tertiary:hover{background-color: var(--btn-tertiary-bg-hover);}
.btn_base.tertiary:hover span{color: var(--btn-tertiary-text-hover);}

/* Neutral - 중립적인 액션 --gray-400 */
.btn_base.neutral{background-color: var(--btn-neutral-bg); color: var(--btn-neutral-text);}
.btn_base.neutral span,
.btn_base.neutral:hover span{color: var(--btn-neutral-text);}
.btn_base.neutral:hover{background-color: var(--btn-neutral-bg-hover);}

/* Ghost - 보더/배경 없음 */
.btn_base.ghost{background-color: var(--btn-ghost-bg); color: var(--btn-ghost-text); border: 0;}
.btn_base.ghost span{color: var(--btn-ghost-text);}
.btn_base.ghost:hover{ color: var(--btn-ghost-text-hover);}
.btn_base.ghost:hover span{color: var(--btn-ghost-text-hover);}
/* .btn_base.ghost:hover .material-symbols-outlined{text-decoration: none;} */
.btn_base.ghost.p-0{padding: 0;}

.btn_base.ghost.primary,
.btn_base.ghost.primary span{background-color: transparent; color: var(--secondary-900);}
.btn_base.ghost.xl{padding: var(--space-2xs);}

/* subtle - 보조 */
.btn_base.subtle{ background-color: var(--btn-subtle-bg); color: var(--btn-subtle-text); border: 0;}
.btn_base.subtle:hover{ color: var(--btn-subtle-hover-text);}

/* disabled - 비활성화 */
.btn_base:disabled,
.btn_base:disabled:hover{background-color: var(--disabled-bg); color: var(--disabled-text); cursor: not-allowed;}

/* ==================== */
/* Input Field          */
/* ==================== */
input::placeholder{color: var(--input-placeholder);}
input:focus::placeholder { color: transparent;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}

.input_field { position: relative; width: 100%; margin-bottom: var(--space-2xl);}
.input_label { display: inline-flex; font-size: var(--text-base); color: var(--input-label); margin-bottom: var(--space-md);}
.input_base { width: 100%;  border: 0; border-bottom: 0.15em solid var(--input-border); border-radius: 0; padding: 0 var(--space-sm); outline: none; box-sizing: border-box; font-size: var(--text-base); color: var(--input-text); background-color: var(--input-bg); transition: all 0.2s; height: var(--height-input-md); text-align: left;}
.input_base:disabled { background-color: var(--disabled-bg); border-color: var(--disabled-border); color: var(--disabled-text); cursor: not-allowed;}
.input_base:focus{border-color: var(--input-border-focus);}
/* Field 정보 메시지 */
.field_message { font-size: var(--text-xs); line-height: 1.25em; position: absolute; top: calc(100% + 0.125em); left: 0; width: 100%;}
.input_field:has(.input_base:focus) .field_message { display: block;}
.field_message.error { color: var(--error);}
.field_message.success { color: var(--success);}

.input_field.lg .input_base{font-size: var(--text-lg); height: var(--height-input-lg);}
.input_field.lg .input_label{font-size: var(--text-lg); font-weight: var(--font-semibold);}
/* 금액 관련 */
.money_input{text-align: right; font-weight: var(--font-semibold);}
.money_text{font-size: var(--text-lg); font-weight: var(--font-semibold); line-height: 1.2em; color: var(--text-default);}
/* input 라인 색상 */
.input_field.secondary .input_base{border-bottom-color: var(--input-secondary-border);}
.input_field.secondary .input_base:focus{border-bottom-color: var(--input-secondary-border-focus);}

/* visibility button (input 내부 버튼) */
.visibility_btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: var(--space-xs); display: flex; align-items: center; justify-content: center; color: var(--surface-600); transition: color 0.2s;}
.visibility_btn .material-symbols-outlined { font-size: var(--text-xl); line-height: 1em; color: var(--text-primary);}
.visibility_btn .material-symbols-outlined:first-child{color: var(--text-tertiary);}
.visibility_btn .material-symbols-outlined:last-child { display: none;}
.visibility_btn.active .material-symbols-outlined:first-child { display: none;}
.visibility_btn.active .material-symbols-outlined:last-child { display: block;}

/* 내부 버튼 */
.btn_in_input{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: var(--space-xs); display: flex; align-items: center; justify-content: center;} 
img.btn_in_input{width: 2.5em;}
.input_field.lg .btn_in_input span{font-size: var(--text-2xl);}
.input_base:has(~ .btn_in_input){padding-right: var(--space-4xl);}

/* 파일 업로드 */
.file_upload_area{position: relative; width: 100%; max-width: 8.56em; aspect-ratio: 3/4; flex-shrink: 0;}
.file_upload_area .preview_item{position: relative; width: 100%; height: 100%; background-color: var(--file-input-bg); border-radius: var(--rounded-sm); display: flex; align-items: center; justify-content: center;}
.file_upload_area .preview_item::before{content: "\e43e"; font-family: 'Material Symbols Outlined'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: var(--file-input-empty); font-size: 3em; font-weight: var(--font-medium);}
.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-default); background-color: rgba(255,255,255,0.5); border-radius: var(--rounded-sm);}
.file_upload_area .preview_item .preview::before{display: none;}
.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)::before{display: none;}
.file_upload_area .preview_item:has(.preview){ position: relative; width: 100%; height: 100%; border-radius: var(--rounded-sm); text-align: center; }

/* search 검색 영역 */
.search_field{position: relative;}
.search_field .btn_base{position: absolute; top: 50%; left: 0.25em; transform: translateY(-50%);}
.search_field .btn_base span{font-size: var(--text-3xl);}
.search_field .input_base{border: 1px solid var(--sch-input-border); background-color: var(--sch-input-bg); border-radius: var(--rounded-full); padding-left: 3em;}
.search_field .input_base:focus{border-color: var(--sch-input-border-focus); background-color: var(--sch-input-bg-focus);}

/* Select */
select.input_base { appearance: none; background-image: url("../images/icon/icon_select_arrow.svg"); background-size: 1.5em; background-repeat: no-repeat; background-position: right 0.5em center; padding-right: var(--space-3xl); cursor: pointer;}

/* ==================== */
/* Checkbox & Radio     */
/* ==================== */
.check_field { position: relative; display: flex; align-items: anchor-center; gap: var(--space-xs);}
.check_label { cursor: pointer; font-size: var(--text-base); 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; width: 1.25em; height: 1.25em; 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_field input[type="checkbox"].check_base::before { content: "\e5ca"; font-family: 'Material Symbols Outlined'; font-size: var(--text-sm); line-height: 1em; font-weight: var(--font-medium); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: transparent; transition: color 0.2s;}
.check_field input[type="checkbox"].check_base:hover { border-color: var(--checkbox-checked-border);}
.check_field input[type="checkbox"].check_base:checked { background-color: var(--checkbox-checked-bg); border-color: var(--checkbox-checked-border);}
.check_field input[type="checkbox"].check_base:checked::before { color: var(--wh);}
.check_field input[type="checkbox"].check_base:disabled { background-color: var(--disabled-bg); border-color: var(--disabled-border); cursor: not-allowed; opacity: 0.6;}
.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; width: 1.25em; height: 1.25em; 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;}
.check_field input[type="radio"]::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: transparent; width: var(--space-sm); height: var(--space-sm); border-radius: var(--rounded-circle); transition: background-color 0.2s;}
.check_field input[type="radio"]:hover { border-color: var(--radio-checked-border);}
.check_field input[type="radio"]:checked { background-color: var(--radio-checked-bg); border-color: var(--radio-checked-border);}
.check_field input[type="radio"]:checked::before { background-color: var(--radio-bg);}
.check_field input[type="radio"]:disabled { background-color: var(--disabled-bg); border-color: var(--disabled-border); cursor: not-allowed; opacity: 0.6;}
.check_field:has(input[type="radio"]:disabled) .check_label { cursor: not-allowed; color: var(--disabled-text);}

/* ==================== */
/* Switch Toggle */
/* ==================== */
.check_field.switch { align-items: center;}
.switch_control { position: relative; display: inline-block; width: 2.5em; height: 1.25rem; 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; flex: 1;}
.chip_field input { position: absolute; opacity: 0; width: 0; height: 0;}
.chip_label { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-md) var(--space-xs); flex: 1; border: 1px solid transparent; border-radius: var(--rounded-sm); background-color: var(--chip-bg); color: var(--chip-text); font-size: var(--text-sm); line-height: 1em; cursor: pointer; transition: all 0.2s; -webkit-user-select: none; user-select: none;}
.chip_field input:checked ~ .chip_label { background-color: var(--chip-checked-bg); border-color: var(--chip-checked-border); color: var(--chip-checked-text);}
.chip_field input:disabled ~ .chip_label { background-color: var(--disabled-bg); border-color: var(--disabled-border); color: var(--disabled-text); cursor: not-allowed;}

.chip_field.secondary .chip_label{ background-color: var(--chip-secondary-bg); border-radius: var(--rounded-full); border: 1px solid var(--chip-secondary-border); color: var(--chip-secondary-text);}
.chip_field.secondary input:checked ~ .chip_label{background-color: var(--chip-secondary-checked-bg); border-color: var(--chip-secondary-checked-border); color: var(--chip-secondary-checked-text);}
.chip_field.tertiary .chip_label{ background-color: var(--chip-tertiary-bg); border: 1px solid var(--chip-tertiary-border); color: var(--chip-tertiary-text); justify-content: flex-start;}
.chip_field.tertiary input:checked ~ .chip_label{ background-color: var(--chip-tertiary-checked-bg); border-color: var(--chip-tertiary-checked-border); color: var(--chip-tertiary-checked-text);}
.chip_field.tertiary:has(.checked_icon) input:checked ~ .chip_label,
.chip_field.tertiary:has(.checked_icon) input:checked ~ .chip_label .money_text{color: var(--chip-tertiary-checked-text-opacity);}

.chip_field.subtle .chip_label{ background-color: var(--chip-subtle-bg); color: var(--chip-subtle-text); border: 0; flex-direction: column; gap: var(--space-md);}
.chip_field.subtle input:checked ~ .chip_label{background-color: var(--chip-subtle-checked-bg); color: var( --chip-subtle-text);}

.chip_field.ghost .chip_label{ background-color: var(--chip-ghost-bg); color: var(--chip-ghost-text); justify-content: flex-start;}
.chip_field.ghost input:checked ~ .chip_label{background-color: var( --chip-ghost-checked-bg); color: var(--chip-ghost-text); text-decoration: none; border-color: var(--chip-ghost-border);}
.chip_field.ghost input:checked ~ .chip_label span{color: var(--chip-ghost-checked-text);}

.chip_field.sm .chip_label{font-size: var(--text-base); padding: var(--space-sm); line-height: 1.2em;}
.chip_field.md .chip_label{font-size: var(--text-base); padding: var(--space-xl); line-height: 1.2em;}
.chip_field.lg .chip_label{font-size: var(--text-lg); padding: var(--space-md); line-height: 1.25em;}
.chip_field.ghost.lg .chip_label{font-size: var(--text-lg); padding: var(--space-sm) !important;}
.chip_field.ghost.md .chip_label{font-size: var(--text-base);  padding: var(--space-3xs) var(--space-xs) !important;}
.chip_field.ghost.sm .chip_label{font-size: var(--text-sm); padding: var(--space-3xs) var(--space-xs) !important;}}
.chip_field.chip_box .chip_label{min-height: 5.72em; padding: var(--space-lg); gap: var(--space-lg); flex-direction: column;}

.chip_field .checked_icon{ display: none; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; width: 2.125em; height: 2.125em; border-radius: 50%; background-color: var(--bg-brand-strong);}
.chip_field .checked_icon span{font-size: var(--text-3xl); color: var(--text-inverse);}
.chip_field:has(input:checked) .checked_icon{ display: flex;}
/* ==================== */
/* Tooltip              */
/* ==================== */
.tooltip_field{font-size: var(--text-base); position: relative; display: inline-flex; align-items: center; gap: var(--space-3xs); vertical-align: middle;}
.tooltip_field .tooltip_btn{cursor: pointer; font-size: var(--text-xl); color: var(--text-tertiary);}
.tooltip_content { opacity: 0; font-size: var(--text-xs); line-height: 1.25em; font-weight: var(--font-semibold); width: max-content; max-width: 28.125em; padding: var(--space-3xs) var(--space-md); border-radius: var(--rounded-xs); border: 1px solid transparent; position: absolute; top: 50%; left: calc(100% + var(--space-3xs)); transform: translateY(-50%); z-index: -1; box-shadow: 0px 0.125em 1px 0px rgba(80,80,80,0.2); background-color: var(--bg-secondary); transition: all 0.3s;}
.tooltip_field .tooltip_btn:hover + .tooltip_content{opacity: 1; z-index: 1;}
.tooltip_field i{color: var(--icon-primary);}
.tooltip_field .tooltip_btn:hover{color: var(--text-brand-secondary);}
.tooltip_field .tooltip_content{ border-color: var(--border-brand);} 
.tooltip_field .tooltip_content.position_bottom{top: calc(100% + var(--space-3xs)); transform: translate(0); left: -650%;}
.tooltip_field.md .tooltip_content{padding: var(--space-md) var(--space-lg); font-size: var(--text-sm); line-height: 1.5em;}

/* ==================== */
/* badge                */
/* ==================== */
.badge_base { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rounded-full); border: 1px solid transparent; line-height: 1em; padding: 0.5em 0.8em; font-size: var(--text-xs); color: var(--badge-text); white-space: nowrap;}
/* Badge 사이즈 */
.badge_base.sm { font-size: var(--text-2xs); padding: 0.4em 0.7em; min-width: 5em;}
.badge_base.xs { font-size: var(--text-2xs); padding: 0.4em 0.7em; min-width: 4em;}
/* Badge 색상 */
.badge_base.success{background-color: var(--badge-success);}
.badge_base.pending{background-color: var(--badge-pending);}
.badge_base.processing{background-color: var(--badge-processing);}
.badge_base.error{background-color: var(--badge-error);}
.badge_base.neutral{ background-color: var(--badge-neutral);}

/* ==================== */

/* 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-secondary); padding: var(--space-lg); border-radius: var(--rounded-lg); width: 64%; max-width: 31.25em; min-height: 9.375em;}
.modal_box .modal_title{font-size: var(--text-lg); font-weight: var(--font-semibold); line-height: 1.2em; padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-default);}
.modal_box .modal_text{font-size: var(--text-base); line-height: 1.375em; padding: var(--space-xl) 0; text-align: center; }
.modal_box .modal_btn{display: flex; align-items: baseline; gap: var(--space-md);}
.modal_box .modal_content{}
.modal_box .content_list_box{ display: flex; flex-direction: column; max-height: 32em; padding-top: var(--space-2xl); margin-bottom: var(--space-2xl); overflow: auto;}
.modal_box .modal_btn .btn_base{flex: 1;}

.modal_box.lg{width: 80%;}
.modal_box.full{width: 100%; height: 100%; border-radius: 0;}

/* 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; display: block;}
.modal_wrap.bottom.active .modal_box { bottom: 0;}

/* image modal */
.img_modal_wrap .modal_box{padding: 0; border-radius: var(--rounded-sm); overflow: hidden;}
.img_modal_wrap .modal_img{object-fit: cover; width: 100%; height: 100%;}
.img_modal_wrap .modal_img img{ display: block; object-fit: cover; width: 100%; height: 100%;}
.img_modal_wrap .modal_box .modal_btn{gap: 0; border-top: 1px solid var(--border-secondary);}
.img_modal_wrap .modal_box .modal_btn .btn_base + .btn_base{border-left: 1px solid var(--border-secondary);}


/* ==================== */
/* Tab Content          */
/* ==================== */
.tab_list{display: flex; flex-wrap: wrap; margin-bottom: -1px; background-color: var(--tab-primary);}
.tab_list .tab_item{ flex: 1; transition: all 0.2s; border-bottom: 0.18em solid var(--tab-base);}
.tab_list .tab_item .inner{ font-size: var(--text-sm); line-height: 1.35em; display: block; width: 100%; height: 100%; padding: var(--space-lg); text-align: center; color: var(--text-tertiary);}
.tab_list .tab_item.active{ color: var(--tab-text-active); border-color: var(--tab-active);}
.tab_list .tab_item.active .inner{ color: var(--tab-text-active);}
.tab_panel{display: none !important;}
.tab_panel.active{display: block !important;}
div.pop_wrap:has(.tab_panel){border: 0 !important; padding: 0;}

/* tab pill */
.tab_wrap_pill{background-color: var(--bg-primary);}
.tab_wrap_pill .tab_list + .tab_list{margin-top: var(--space-xl);}
.tab_wrap_pill .tab_list{ padding: var(--space-2xs); background-color: var(--tab-secondary); border-radius: var(--rounded-full);}
.tab_wrap_pill .tab_list .tab_item{border: 0;}
.tab_wrap_pill .tab_list .tab_item .inner{color: var(--tab-base); line-height: 1em; font-size: var(--text-base); padding: var(--space-md);}
.tab_wrap_pill .tab_list .tab_item.active{background-color: var(--tab-tertiary); border-radius: var(--rounded-full);}
.tab_wrap_pill .tab_list .tab_item:hover .inner,
.tab_wrap_pill .tab_list .tab_item:hover .inner{color: var(--tab-tertiary);}
.tab_wrap_pill .tab_list .tab_item.active .inner{ color: var(--tab-primary);}

/* ==================== */
/* accordion            */
/* ==================== */
.accordion_title{position: relative;}
.accordion_state{ display: flex; align-items: center; justify-content: center; font-size: var(--text-4xl); width: 100%; height: 100%; transition: transform 0.3s ease;}
.accordion_title:has( ~ .accordion_content.active) .accordion_state{transform: rotate(180deg);}
.accordion_header { display: flex; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm);}

.accordion_content{ display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.3s ease-out;}
.accordion_content.active{ grid-template-rows: 1fr; margin-top: var(--space-xl); transition: grid-template-rows 0.3s ease-in;}
.accordion_content > *{ min-height: 0;}

/* 아코디언 */
.accordion_container { display: flex; flex-direction: column; border: 1px solid var(--border-secondary); border-radius: var(--rounded-sm); filter: grayscale(1);}
.accordion_container + .accordion_container{margin-top: var(--space-2xl);}
.accordion_container .accordion_title { background-color: var(--bg-brand-subtle); border-radius: var(--rounded-sm) var(--rounded-sm) 0 0; position: relative;}
.accordion_container .accordion_header { background-color: var(--bg-brand-subtler);}
.accordion_container .accordion_content { background-color: var(--bg-brand-subtler); border-radius: 0 0 var(--rounded-sm) var(--rounded-sm); margin-top: 0;}
.accordion_container:has(.accordion_content.active){filter: grayscale(0);}
.accordion_container:not(:has(.accordion_content.active)) .accordion_header{color: var(--text-secondary);}

/* ==================== */
/* Card                 */
/* ==================== */
.card_list{ display: flex; flex-direction: column; gap: var(--space-lg);}
.card_item{ background-color: var(--bg-secondary); box-shadow: var(--shadow-primary); border-radius: var(--rounded-md); transition: all 0.2s; border: 1px solid var(--border-secondary);}
.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-default);}
.card_date{ font-size: var(--text-xs); color: var(--text-tertiary); 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-default); border-radius: var(--rounded-circle);}
.card_icon span{ font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1em; padding-left: var(--space-4xs);}
/* Receipt Card  (계산서) */
.receipt_card { background-color: var(--bg-primary); border: 1px solid var(--border-secondary); border-radius: var(--rounded-sm); padding: var(--space-2xl) var(--space-lg); display: flex; justify-content: flex-end; flex-wrap: wrap; }
.receipt_content { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3xs); flex-wrap: wrap;}
.receipt_count { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--text-default); margin-left: auto;}
.amount_summary { width: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-lg); margin-top: var(--space-sm); border-top: 1px dashed var(--border-primary); }
.amount_summary_label { display: flex; align-items: flex-start; gap: var(--space-2xs);}
.amount_summary_label img{padding-top: 1px;}
.amount_summary_value { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--text-primary);}

/* List (리스트) */
.list_base { display: flex; flex-direction: column;}
.list_item { width: 100%; border-bottom: 0.375em solid var(--bg-tertiary);}
.list_item .inner{display: flex; align-items: flex-start; justify-content: space-between; flex: 1; gap: var(--space-2xs); padding: var(--space-xs) var(--space-xl);}

/* ==================== */
/* Keypad               */
/* ==================== */
.keypad_display { margin-bottom: var(--space-lg);}
.keypad_input_field{border-bottom: 0.15em solid var(--input-border-focus); display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-lg) var(--space-sm) 0;}
.keypad_input_field .input_unit {font-size: var(--text-3xl); font-weight: var(--font-semibold);}
.keypad_input_field .input_base { border-bottom: 0; padding-right: 0; font-size: var(--text-3xl) !important; font-weight: var(--font-semibold); height: var(--height-input-sm); text-align: right;} 
.keypad_input_field .clear_btn{ background-color: var(--surface-500);}

.keypad_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); padding: var(--space-3xl) 0 var(--space-2xl);}
.keypad_btn { font-size: var(--text-4xl); font-weight: var(--font-semibold); line-height: 1.06em;  display: flex; align-items: center; justify-content: center; background-color: var(--surface-100); border: 0; border-radius: var(--rounded-sm); color: var(--text-primary); cursor: pointer; transition: all 0.1s; padding: var(--space-sm);}
.keypad_btn:hover,
.keypad_btn:focus { background-color: var(--primary-200);}
.keypad_btn:active { transform: scale(0.97);}
.keypad_btn.delete { background-color: var(--surface-100);}
.keypad_btn.delete span { font-size: var(--text-2xl);}
.keypad_btn.delete:hover,
.keypad_btn.delete:focus { background-color: var(--primary-200);}


/* ==================== */
/* Calendar (FullCalendar 커스텀)  */
/* ==================== */
.calendar_wrap { font-family: inherit;}
/* 헤더 */
.calendar_wrap.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky > *{position: static; border: 0;}
.calendar_wrap .fc-header-toolbar { margin-bottom: var(--space-2xl) !important; justify-content: center; gap: var(--space-xl);}
.fc-direction-ltr .fc-toolbar > * > :not(:first-child){margin-left: 0; line-height: 1em;}
.calendar_wrap.fc .fc-button:focus,
.calendar_wrap.fc .fc-button:active,
.calendar_wrap .fc-button:hover,
.calendar_wrap.fc .fc-button-primary:not(:disabled).fc-button-active:focus, 
.calendar_wrap.fc .fc-button-primary:not(:disabled):active:focus{box-shadow: none; background-color: transparent; border-color: transparent; color: var(--text-primary);}
.calendar_wrap.fc .fc-scrollgrid-section, 
.calendar_wrap.fc .fc-scrollgrid-section table, 
.calendar_wrap.fc .fc-scrollgrid-section > td{border: 0; width: 100% !important;}
.calendar_wrap .fc-button { font-weight: var(--font-semibold); font-size: var(--text-xl); padding: 0; background: none; border: none; box-shadow: none; color: var(--text-primary);}
.fc-monthTitle-button{min-width: 3.125em;}
.fc-yearTitle-button{min-width: 4.68em;}
.calendar_wrap .fc-toolbar-chunk{display: flex; align-items: center; justify-content: center;}
.calendar_wrap .fc-prev-button,
.calendar_wrap .fc-next-button,
.calendar_wrap .fc-prevYear-button,
.calendar_wrap .fc-nextYear-button { font-size: var(--text-lg);}
.calendar_wrap .fc-button .fc-icon{display: flex; align-items: center; justify-content: center; width: 1.125em; line-height: 1em; font-size: var(--text-base);}
.calendar_wrap .fc-icon-chevrons-left::before{content: "\e5e0";  font-family: 'Material Symbols Outlined';}
.calendar_wrap .fc-icon-chevrons-right::before{content: "\e5e1"; font-family: 'Material Symbols Outlined';}
.calendar_wrap .fc-icon-chevron-left::before{content: "\e5e0"; font-family: 'Material Symbols Outlined'; }
.calendar_wrap .fc-icon-chevron-right::before{content: "\e5e1"; font-family: 'Material Symbols Outlined';}
/* 요일 헤더 */
.calendar_wrap .fc-col-header-cell,
.calendar_wrap .fc-scrollgrid-sync-inner { border: 0 !important; border-color: transparent !important;}
.calendar_wrap .fc-col-header-cell-cushion { color: var(--text-primary);}
/* 일요일 */
.calendar_wrap .fc-day-sun .fc-col-header-cell-cushion,
.calendar_wrap .fc-day-sun .fc-daygrid-day-number {color: var(--orange-900);}
/* 토요일 */
.calendar_wrap .fc-day-sat .fc-col-header-cell-cushion,
.calendar_wrap .fc-day-sat .fc-daygrid-day-number { color: var(--text-brand);}
/* 날짜 셀 */
.calendar_wrap.fc .fc-daygrid-body-natural .fc-daygrid-day-events{margin: 0; min-height: 0;}
.calendar_wrap .fc-daygrid-day { border: none !important; background-color: transparent !important; cursor: pointer;}
.calendar_wrap .fc-daygrid-day-frame { padding: var(--space-xs); min-height: 2.5em;}
.calendar_wrap .fc-daygrid-day-number{ width: 2.125em; height: 2.125em; aspect-ratio: 1 / 1; border-radius: var(--rounded-circle); display: flex; align-items: center; justify-content: center;}
.calendar_wrap.fc .fc-daygrid-day-top{justify-content: center;}
/* 다른 달 날짜 */
/* .calendar_wrap .fc-day-other .fc-daygrid-day-number {color: transparent; display: none;}
/* 오늘 날짜 */
.calendar_wrap .fc-day-today .fc-daygrid-day-number {background-color: var(--secondary-100);}
/* 선택된 날짜 */
.calendar_wrap .fc-day.selected .fc-daygrid-day-number { background-color: var(--secondary-900) !important; color: var(--text-inverse)!important;}
/* 호버 효과 */
.calendar_wrap .fc-daygrid-day:hover .fc-daygrid-day-number {background-color: var(--sccondary-100) ;}
/* 테이블 보더 제거 */
.calendar_wrap .fc-theme-standard td,
.calendar_wrap .fc-theme-standard th,
.calendar_wrap .fc-scrollgrid { border: none !important;}
/* 스크롤 제거 */
.calendar_wrap .fc-scroller { overflow: hidden !important;}
/* daygrid body 높이 자동 조정 */
.calendar_wrap .fc-daygrid-body { width: 100% !important; height: auto !important;}


/* ==================== */
/* Spinner              */
/* ==================== */
.spinners_box{position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%;}
.spinners_box .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) translateZ(0); width: 0.5em; height: 0.5em; border-radius: var(--rounded-circle); text-indent: -9999em; animation: mulShdSpin 1.2s infinite ease;}
@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);}
}