@charset "UTF-8";

/* 구글 filled(채워진) 아이콘 클래스 */
.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-family: var(--font-family); font-weight: var(--font-semibold); line-height: var(--leading-base); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--rounded-sm); padding: 0 var(--space-md); transition: all 0.2s; border: 1px solid transparent; margin: 0; cursor: pointer; word-break: keep-all; text-decoration: none !important;}
input[type="button"].btn_base{ height: var(--height-sm);}
.btn_base.flex-1{flex: 1;}
/* Size */
.btn_base.xs{
  height: var(--height-2xs); font-size: var(--text-xs); padding: 0 var(--space-xs); border-radius: var( --rounded-2xs);
  & 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); border-radius: var(--rounded-sm);
  & i{font-size: var(--text-lg);}
}
.btn_base.xl{
  height: var(--height-xl); font-size: var(--text-base); padding: 0 var(--space-3xl); border-radius: var(--rounded-md);
  & 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);
  & 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);}
}
/* Outline - 흰 배경 + 보더 */
.btn_base.outline{
  background-color: var(--bg-secondary); border-color: var(--border-default); color: var(--secondary-900);
  & i{ color: inherit;}
  &:hover{ background-color: var(--bg-primary);}
}
/* 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 {
  font-family: var(--font-family); 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; font-family: var(--font-family);}
  &: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.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); border-radius: var(--rounded-sm);}
.input_base.xl { height: var(--height-xl); font-size: var(--text-base); padding: 0 var(--space-xl); border-radius: var(--rounded-md);}
/* 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-xs)); 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;} 


/* ==================== */
/* Modal & Bottom modal */
/* ==================== */
.modal_wrap{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); z-index: 100;}
.modal_wrap.active{ display: block;}
.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-xl); border-radius: var(--rounded-lg); width: 65%; max-width: 31.25em; min-height: 9.375em; letter-spacing: -0.5px;}
.modal_box .modal_text{font-size: var(--text-sm); line-height: 1.375em; padding-bottom: var(--space-xl); text-align: center; }
.modal_box .modal_text p + p{ margin-top: var(--space-lg);}
.modal_box .modal_text .modal_lead{ font-weight: var(--font-bold); color: var(--secondary-900);}
.modal_box .modal_text strong{ color: var(--secondary-900); font-weight: var(--font-bold);}
.modal_box .modal_text .point{ color: var(--text-brand); font-weight: var(--font-bold);}
.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;}