@charset "utf-8";

/* ==================== */
/* Typography */
/* ==================== */
.text-h1{font-size: var(--text-h1); font-weight: var(--font-bold);}
.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);}


/* ==================== */
/* Button    */
/* ==================== */
.btn_wrap{display: flex; flex-wrap: wrap; gap: var(--space-md);}
.btn_base{ font-weight: var(--font-semibold); line-height: var(--leading-base); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: var(--rounded-full); 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; gap: var(--space-lg);}
input[type="button"].btn_base{ height: var(--height-sm);}
.btn_base.circle{border-radius: var(--rounded-circle);}
/* Size */
.btn_base.xs{
  height: var(--height-xs); font-size: var(--text-xs); padding: 0 var(--space-xs); /* 24px */
  & i{ font-size: var(--text-2xs);}
}
.btn_base.sm{
  height: 2rem; font-size: var(--text-xs); padding: 0 var(--space-xs); /* 32px */
  & i{ font-size: var(--text-xs);}
}
.btn_base.md{
  height: var(--height-md); font-size: var(--text-sm); padding: 0 var(--space-xl); /* 40px */
  & i{font-size: var(--text-base);}
}
.btn_base.lg{
  height: var(--height-xl); font-size: var(--text-md); padding: 0 2rem; /* 56px */
  & i{font-size: var(--text-lg);}
}
.btn_base.xl{
  height: var(--height-2xl); font-size: var(--text-base); padding: 0 var(--space-3xl);
  & 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; border-radius: var(--rounded-circle);}
/* 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);}
}
/* CTA - 흰 배경 + 브랜드 텍스트 (filled pill) */
.btn_base.cta{
  background-color: var(--btn-cta-bg); color: var(--btn-cta-text);
  & i{ color: inherit;}
  &:hover{ background-color: var(--btn-cta-bg-hover); color: var(--btn-cta-text-hover);}
  &:active{ color: var(--btn-cta-text-pressed);}
}
/* 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);}

/* ==================== */
/* Input Field    */
/* ==================== */
.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-xl); border-radius: var(--rounded-full) !important; width: 100%; border: 2px 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; 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 {
    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;} 
/* 인풋 안 아이콘 */
.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-default);}
  & .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);}
  }
}

/* ==================== */
/* Tab Content          */
/* ==================== */
.tab_wrap { display: flex; justify-content: center; margin-bottom: 3.125rem;}
.tab_list { 
  display: flex; flex-wrap: wrap; justify-content: center;
  .tab_item { background-color: var(--tab-bg); padding: 0 2.5rem;
    .inner { font-size: var(--text-md); font-weight: var(--font-bold); display: block; width: 100%; text-align: center; color: var(--tab-text); box-sizing: border-box; transition: all 0.2s;}
    &:hover .inner{ color: var(--tab-text-hover);}
  }
  /* Line */
  &.line {
    .tab_item {
      .inner { border-bottom: 2px solid var(--tab-line-border);}
      &.active .inner { color: var(--tab-text-active); border-bottom-color: var(--tab-line-border-active);}
    }
  }

}
/* Swiper 슬라이드 모드(초기화 시): flex 정렬 해제하여 가로 슬라이드 */
.swiper-initialized .tab_list { flex-wrap: nowrap; justify-content: flex-start; }
.swiper-initialized .tab_list .tab_item { flex: 0 0 auto; }

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