@charset "utf-8";

/* ============================================================
   ★★★  피씨, 모바일 공통 사용파일 ★★★
   ============================================================ */

/* ============================================================
   Common Design System - UI Components
   Figma: 00. Common Design System
   ============================================================ */

/* ----------------------------------------------------------
   1. Button
   ----------------------------------------------------------
   Type : Primary | Secondary | Tertiary
   Size : xlarge(60px) | large(48px) | medium(40px) | small(32px) | xsmall(28px)
   State: default | hover | pressed | disabled
   ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: var(--layout-radius-small);
  font-family: var(--typescale-font-family);
  letter-spacing: var(--typescale-letter-spacing);
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

/* -- Size -- */
.btn--xlarge  { min-width: 100px; height: 60px; padding: 0 16px; font-size: 20px; font-weight: 600; line-height: 30px; border-radius: 6px; }
.btn--large   { min-width: 90px;  height: 48px; padding: 0 16px; font-size: 16px; font-weight: 600; line-height: 24px; border-radius: 6px; }
.btn--medium  { min-width: 80px;  height: 40px; padding: 0 16px; font-size: 14px; font-weight: 600; line-height: 22px; }
.btn--small   { min-width: 64px;  height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500; line-height: 22px; }
.btn--xsmall  { min-width: 60px;  height: 28px; padding: 0 12px; font-size: 13px; font-weight: 400; line-height: 22px; }

/* -- Primary -- 260601_추가 : 수정 */
.btn--primary                { background-color: var(--color-button-primary-fill); color: var(--color-text-inverse); border-color: var(--color-button-primary-fill); }
.btn--primary:hover          { background-color: var(--color-button-primary-fill-hover); border-color: var(--color-button-primary-fill-hover); }
.btn--primary:active,
.btn--primary.is-pressed     { background-color: var(--color-button-primary-fill-pressed); border-color: var(--color-button-primary-fill-pressed); }
.btn--primary:disabled,
.btn--primary.is-disabled    { background-color: var(--color-background-disabled); color: var(--color-text-disabled); border-color: var(--color-background-disabled); cursor: default; }

/* -- Secondary -- 260601_추가 : 수정*/
.btn--secondary              { background-color: var(--color-button-secondary-fill); color: var(--color-text-subtle); border-color: var(--color-button-secondary-fill); }
.btn--secondary:hover        { background-color: var(--color-button-secondary-fill-hover); border-color: var(--color-button-secondary-fill-hover); }
.btn--secondary:active,
.btn--secondary.is-pressed   { background-color: var(--color-button-secondary-fill-pressed); border-color: var(--color-button-secondary-fill-pressed); }
.btn--secondary:disabled,
.btn--secondary.is-disabled  { background-color: var(--color-background-disabled); color: var(--color-text-disabled); border-color: var(--color-background-disabled); cursor: default; }

/* -- Tertiary -- */
.btn--tertiary               { background-color: #fff; color: #333; border-color: #4d4d4d; }
.btn--tertiary:hover         { background-color: #f5f5f5; }
.btn--tertiary:active,
.btn--tertiary.is-pressed    { background-color: #e5e5e5; }
.btn--tertiary:disabled,
.btn--tertiary.is-disabled   { background-color: var(--color-background-disabled); color: var(--color-text-disabled); border-color: #e5e5e5;  cursor: default; }

/* -- Icon inside button -- */
.btn .btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn--xlarge .btn__icon,
.btn--large  .btn__icon  { width: 20px; height: 20px; }
.btn--medium .btn__icon  { width: 16px; height: 16px; }
.btn--small  .btn__icon,
.btn--xsmall .btn__icon  { width: 14px; height: 14px; }

/* -- Floating Button -- */
/*   Size : md(40px) | sm(34px)
     State: normal(default) | hover | pressed             */
.btn--floating {
  height: 40px;
  padding: 0 16px;
  border-radius: var(--layout-radius-circle);
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--color-text-default);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}
.btn--floating.btn--floating_sm {
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 22px;
}

/* 260601_추가 s (모바일작업중_추가 / 피씨 공통 사용 가능)*/
.btn--floating .btn__icon                  { width: 16px; height: 16px; }
.btn--floating.btn--floating_sm .btn__icon { width: 14px; height: 14px; }
/* 260601_추가 e*/

.btn--floating:hover   { background-color: #fff; }
.btn--floating:active,
.btn--floating.is-pressed  { background-color: rgba(255, 255, 255, 0.5); }

/* -- Text Button -- */
.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--typescale-font-family);
  color: var(--color-text-default);
  letter-spacing: var(--typescale-letter-spacing);
  text-decoration: underline;
}
.btn-text--medium { font-size: 15px; line-height: 22px; font-weight: 500; }
.btn-text--small  { font-size: 13px; line-height: 22px; font-weight: 500; }
.btn-text .btn-text__icon { flex-shrink: 0; width: 16px; height: 16px; }

/* -- Full Width -- */
.btn--full { width: 100%; }


/* ----------------------------------------------------------
   2. Input
   ----------------------------------------------------------
   State: inactive | focused | active | error | disabled | readonly
   ---------------------------------------------------------- */

.input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.input__field {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--layout-radius-small);
  background-color: var(--color-input-surface);
  font-family: var(--typescale-font-family);
  font-size: var(--typescale-body-medium-size);
  font-weight: var(--typescale-body-medium-weight-emphasized);
  line-height: var(--typescale-body-medium-line-height);
  letter-spacing: var(--typescale-letter-spacing);
  color: var(--color-text-default);
  box-sizing: border-box;
  outline: none;
  overflow: hidden;
  transition: border-color 0.15s;
}

.input__field::placeholder {
  color: var(--color-text-tertiary);
  font-weight: var(--typescale-body-medium-weight);
}

.input__field:focus,
.input__field:focus-visible,
.input__field.is-focused {
  border-color: var(--color-input-border-active);
  /* 전역 :focus-visible outline 비활성화 (border-active 가 focus 신호 역할)
     !important 인 이유 : common.css 의 input:focus-visible 글로벌 규칙을 cascade 환경에서 확실히 누르기 위함 */
  outline: none !important;
}

.input__field.is-error,
.input--error .input__field {
  border-color: var(--color-input-border-error);
}

.input__field:disabled,
.input__field.is-disabled {
  background-color: var(--color-input-disabled-surface);
  border-color: var(--color-input-disabled-border);
  color: var(--color-text-disabled);
  cursor: default;
}

.input__field[readonly],
.input__field.is-readonly {
  background-color: var(--color-input-disabled-surface);
  border-color: var(--color-input-disabled-border);
  color: var(--color-text-default);
  cursor: default;
}

/* -- Input Textarea (.input__field 의 multi-line variant) -- */
.input__field--textarea {
  height: 160px;
  padding-top: 8px;
  padding-bottom: 8px;
  align-items: flex-start;
  overflow: auto;
  resize: vertical;
}

/* -- Input Message -- */
.input__message {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  font-family: var(--typescale-font-family);
  font-size: var(--typescale-caption-medium-size);
  font-weight: var(--typescale-caption-medium-weight);
  line-height: var(--typescale-caption-medium-line-height);
  letter-spacing: var(--typescale-letter-spacing);
  color: var(--color-text-secondary);
}

.input__message::before {
  content: '';
  display: inline-block;
  width: 2px;
  height: 2px;
  margin-top: 10px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

.input__message--error   { color: var(--color-text-error); }
.input__message--success { color: #00875a; }
.input__message--info    { color: var(--color-text-secondary); }

.input__messages {
  display: flex;
  flex-direction: column;
  gap: 4px;
}


/* ----------------------------------------------------------
   3. Select
   ----------------------------------------------------------
   State: inactive | active | disabled | readonly
   ---------------------------------------------------------- */

.select {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.select__field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--layout-radius-small);
  background-color: var(--color-input-surface);
  font-family: var(--typescale-font-family);
  font-size: var(--typescale-body-medium-size);
  line-height: var(--typescale-body-medium-line-height);
  letter-spacing: var(--typescale-letter-spacing);
  color: var(--color-text-tertiary);
  font-weight: var(--typescale-body-medium-weight);
  box-sizing: border-box;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.select__field.is-active {
  color: var(--color-text-default);
  font-weight: var(--typescale-body-medium-weight-emphasized);
}

/* 펼친 상태(.is-open) - Active 색상/weight/border
   닫힘: border #d9d9d9 + 텍스트 #999 + 화살표 #999
   펼침: border #4d4d4d + 텍스트 #000 Medium + 화살표 #000 */
.select__wrapper.is-open .select__field {
  border-color: var(--color-input-border-active);
  color: var(--color-text-default);
  font-weight: var(--typescale-body-medium-weight-emphasized);
}

.select__field:disabled,
.select__field.is-disabled {
  background-color: var(--color-input-disabled-surface);
  border-color: var(--color-input-disabled-border);
  color: var(--color-text-disabled);
  font-weight: var(--typescale-body-medium-weight-emphasized);
  cursor: default;
}

.select__field.is-readonly {
  background-color: var(--color-input-disabled-surface);
  border-color: var(--color-input-disabled-border);
  color: var(--color-text-default);
  font-weight: var(--typescale-body-medium-weight-emphasized);
  cursor: default;
}

/* -- Select Small (32px) -- */
.select__field--small {
  height: 32px;
  padding: 4px 12px;
  font-size: var(--typescale-caption-medium-size);
}

/* -- Custom arrow wrapper -- */
.select__wrapper {
  position: relative;
  display: flex;
  width: 100%;
}
.select__wrapper .select__field { flex: 1; padding-right: 40px; }
.select__wrapper .select__icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 화살표 아이콘 색 보정
   - 기본(Normal/Disabled): brightness(0) opacity(0.4) → 회색(#999) 효과
   - 검정(#000) 원본 노출 조건:
     · .select__wrapper.is-open (펼침 중)
     · .select__field.is-active (선택 완료된 상태)
     · .select__field.is-readonly (읽기 전용 상태)
   외부 SVG <img>는 부모 color 를 못 받으므로 filter 로 처리 */
.select__wrapper .select__icon img {
  filter: brightness(0) opacity(0.4);
  transition: filter 0.15s;
}

.select__wrapper.is-open .select__icon img,
.select__field.is-active ~ .select__icon img,
.select__field.is-readonly ~ .select__icon img {
  filter: none;
}

/* -- Select Message (same as Input) -- */
.select__message {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  font-family: var(--typescale-font-family);
  font-size: var(--typescale-caption-medium-size);
  font-weight: var(--typescale-caption-medium-weight);
  line-height: var(--typescale-caption-medium-line-height);
  letter-spacing: var(--typescale-letter-spacing);
  color: var(--color-text-secondary);
}
.select__message::before {
  content: '';
  display: inline-block;
  width: 2px;
  height: 2px;
  margin-top: 10px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

/* Small Select 용 아이콘 */
.select__icon--small {
  right: 10px;
  width: 12px;
  height: 12px;
}

/* Select Option (드롭다운 항목)
   State: Normal | Disabled | Button | Message
   Size : Medium(default) | Small */
.select__option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  border-top: 1px solid var(--color-background-secondary);
  background-color: var(--color-input-surface);
  font-family: var(--typescale-font-family);
  font-size: var(--typescale-body-medium-size);
  font-weight: var(--typescale-body-medium-weight);
  line-height: var(--typescale-body-medium-line-height);
  letter-spacing: var(--typescale-letter-spacing);
  color: var(--color-text-default);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.select__option--small {
  padding: 8px 12px;
  font-size: var(--typescale-body-xsmall-size);
  line-height: var(--typescale-body-xsmall-line-height);
}

.select__option:disabled,
.select__option.is-disabled {
  background-color: var(--color-input-disabled-surface);
  color: var(--color-text-disabled);
  cursor: default;
}

/* Message variant : 옵션명 + 안내 메시지 (2줄) */
.select__option--message {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
}

.select__option__msg {
  margin: 0;
  font-size: var(--typescale-caption-medium-size);
  font-weight: var(--typescale-caption-medium-weight);
  line-height: var(--typescale-caption-medium-line-height);
  color: var(--color-text-secondary);
}

/* Button variant : 우측에 보조 액션(재입고 알림 등) */
.select__option--button {
  justify-content: space-between;
  gap: 8px;
}

.select__option--button .select__option__name {
  flex: 1;
  color: var(--color-text-disabled);
}

.select__option__action {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  font-family: var(--typescale-font-family);
  font-size: var(--typescale-caption-medium-size);
  font-weight: var(--typescale-caption-medium-weight);
  line-height: var(--typescale-caption-medium-line-height);
  letter-spacing: var(--typescale-letter-spacing);
  color: var(--color-text-secondary);
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.select__option__action__icon {
  width: 12px;
  height: 12px;
}

/* Select Box (옵션 펼친 상태의 일체형 컨테이너)
   - 외각 border-active 1px 로 trigger + 옵션 리스트를 한 박스로 감쌈
   - 안의 .select__field 는 자체 border 무력화
   - 옵션 5개까지 노출, 6개 이상 스크롤 */
.select__box {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--color-select-border-active);
  border-radius: var(--layout-radius-small);
  background-color: var(--color-input-surface);
  overflow: hidden;
}

.select__box > .select__field {
  border: 0;
  border-radius: 0;
}

.select__box__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  max-height: 220px; /* 옵션 약 44px × 5 */
  overflow-y: auto;
}

.select__box--small .select__box__list {
  max-height: 190px; /* small 옵션 약 38px × 5 */
}

/* 커스텀 스크롤바
(.setup_modal__body 와 동일 스타일) */
.select__box__list::-webkit-scrollbar {
  width: 5px;
  background: transparent;
}

.select__box__list::-webkit-scrollbar-track {
  background: transparent;
  margin-top: 8px;
}

.select__box__list::-webkit-scrollbar-thumb {
  background: #e5e5e5;
  border-radius: 999px;
}

.select__box__list::-webkit-scrollbar-button,
.select__box__list::-webkit-scrollbar-corner {
  width: 0;
  height: 0;
  display: none;
}


/* ----------------------------------------------------------
   4. Checkbox
   ----------------------------------------------------------
   State: default | disabled | selected | selected-disabled
   ---------------------------------------------------------- */

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.checkbox__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.checkbox__control {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--layout-radius-xsmall);
  background-color: transparent;
  box-sizing: border-box;
  overflow: hidden;
  transition: background-color 0.15s, border-color 0.15s;
}

.checkbox__control::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid var(--color-icon-inverse);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.15s;
}

.checkbox__input:checked + .checkbox__control {
  background-color: var(--color-icon-default);
  border-color: var(--color-icon-default);
}
.checkbox__input:checked + .checkbox__control::after {
  opacity: 1;
}

.checkbox__input:disabled + .checkbox__control {
  background-color: var(--color-background-disabled);
  border-color: var(--color-border-disabled);
  cursor: default;
}

.checkbox__input:checked:disabled + .checkbox__control {
  background-color: var(--color-icon-disabled);
  border-color: var(--color-icon-disabled);
}

.checkbox__label {
  font-family: var(--typescale-font-family);
  font-size: var(--typescale-body-medium-size);
  font-weight: var(--typescale-body-medium-weight);
  line-height: var(--typescale-body-medium-line-height);
  letter-spacing: var(--typescale-letter-spacing);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.checkbox__input:checked ~ .checkbox__label { color: var(--color-text-default); }
.checkbox__input:disabled ~ .checkbox__label { color: var(--color-text-disabled); cursor: default; }
.checkbox.is-disabled { cursor: default; }


/* ----------------------------------------------------------
   5. Radio
   ----------------------------------------------------------
   State: default | disabled | selected | selected-disabled
   ---------------------------------------------------------- */

.radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.radio__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.radio__control {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--layout-radius-circle);
  background-color: transparent;
  box-sizing: border-box;
  overflow: hidden;
  transition: background-color 0.15s, border-color 0.15s;
}

.radio__control::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: var(--layout-radius-circle);
  background-color: var(--color-icon-inverse);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.15s;
}

.radio__input:checked + .radio__control {
  background-color: var(--color-icon-default);
  border-color: var(--color-icon-default);
}
.radio__input:checked + .radio__control::after { opacity: 1; }

.radio__input:disabled + .radio__control {
  background-color: var(--color-background-disabled);
  border-color: var(--color-border-disabled);
  cursor: default;
}

.radio__input:checked:disabled + .radio__control {
  background-color: var(--color-icon-disabled);
  border-color: var(--color-icon-disabled);
}
.radio__input:checked:disabled + .radio__control::after {
  background-color: var(--color-background-disabled);
}

.radio__label {
  font-family: var(--typescale-font-family);
  font-size: var(--typescale-body-medium-size);
  font-weight: var(--typescale-body-medium-weight);
  line-height: var(--typescale-body-medium-line-height);
  letter-spacing: var(--typescale-letter-spacing);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.radio__input:checked ~ .radio__label { color: var(--color-text-default); }
.radio__input:disabled ~ .radio__label { color: var(--color-text-disabled); cursor: default; }
.radio.is-disabled { cursor: default; }


/* ----------------------------------------------------------
   6. Chip
   ----------------------------------------------------------
   State    : unchecked (default) | checked (.is-selected)
   Disabled : <button disabled> 또는 .is-disabled
              → checked + disabled 는 active border 유지
   Icon     : <img class="chip__icon" ...> 텍스트 앞에 배치
   Markup:
     <button type="button" class="chip">옵션</button>
     <button type="button" class="chip is-selected">옵션</button>
     <button type="button" class="chip" disabled>옵션</button>
     <button type="button" class="chip is-selected" disabled>옵션</button>
     <button type="button" class="chip">
       <img class="chip__icon" src="ico_alarm_16.svg" alt="">옵션
     </button>
   ---------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 64px;
  height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--layout-radius-small);
  background-color: var(--color-select-surface);
  font-family: var(--typescale-font-family);
  font-size: var(--typescale-body-small-size);
  font-weight: var(--typescale-body-small-weight);
  line-height: var(--typescale-body-small-line-height);
  letter-spacing: var(--typescale-letter-spacing);
  color: var(--color-text-subtle);
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.chip:hover { border-color: var(--color-select-border-active); }

.chip.is-selected { border-color: var(--color-select-border-active); font-weight: var(--typescale-body-small-weight-emphasized); }

.chip__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* -- Disabled (unchecked) -- */
.chip:disabled,
.chip.is-disabled {
  background-color: var(--color-background-disabled);
  border-color: var(--color-border-disabled);
  color: var(--color-text-disabled);
  cursor: default;
}

/* -- Disabled + Checked (active border 유지, bg/text만 disabled 톤) -- */
.chip.is-selected:disabled,
.chip.is-selected.is-disabled {
  background-color: var(--color-background-disabled);
  border-color: var(--color-select-border-active);
  color: var(--color-text-disabled);
  cursor: default;
}


/* ----------------------------------------------------------
   7. Tab
   ----------------------------------------------------------
   Type : fixed (균등 분할) | flexible (콘텐츠 너비)
   Size : large(56px) | medium(44px)
   State: active | inactive
   ---------------------------------------------------------- */

.tab {
  display: flex;
  align-items: center;
  width: 100%;
  /* 260601_추가 : border-bottom*/
  border-bottom: 1px solid var(--color-border-secondary);
}

/* 260601_추가 :background-clip,border-bottom */
.tab__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background-color: #fff;
  background-clip: padding-box;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--typescale-font-family);
  font-weight: var(--typescale-body-medium-weight);
  letter-spacing: var(--typescale-letter-spacing);
  color: var(--color-text-secondary);
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  box-sizing: border-box;
  transition: color 0.15s, border-color 0.15s;
}

/*260601_추가  : border-bottom-color*/
.tab__item.is-active {
  font-weight: 600;
  color: var(--color-text-default);
  border-bottom-color: #4d4d4d;
}

/* -- Fixed (균등 분할) -- */
.tab--fixed .tab__item { flex: 1 0 0; }

/* -- Flexible (콘텐츠 너비) -- */
.tab--flexible .tab__item { flex: 0 0 auto; }

/* -- Size: Large -- */
.tab--large .tab__item { height: 56px; font-size: 16px; line-height: 24px; }

/* -- Size: Medium -- */
.tab--medium .tab__item { height: 44px; padding: 10px 12px; font-size: 14px; line-height: 22px; }


/* ----------------------------------------------------------
   8. Carousel
   ----------------------------------------------------------
   Variants:
     .carousel-indicator — 카운트형 (화살표 + 1/5 + 화살표)
     .carousel           — 내비게이션형 (화살표 + divider + 화살표)
   Type : Normal | Prev-Disabled | Next-Disabled
          → <button disabled> 로 처리
   ---------------------------------------------------------- */

/* -- Indicator (with count) -- */
.carousel-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.carousel-indicator__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-subtle);
  transition: opacity 0.15s;
}

.carousel-indicator__arrow:disabled {
  color: var(--color-text-disabled);
  cursor: default;
  opacity: 0.4;
}

.carousel-indicator__count {
  font-family: var(--typescale-font-family);
  font-size: 12px;
  line-height: 22px;
  color: var(--color-text-secondary);
}

/* -- Nav (with divider) -- */
/*   Markup:
     <div class="carousel">
       <button type="button" class="carousel__arrow" aria-label="이전">
         <img src="ico_arrow_left_16.svg" alt="">
       </button>
       <span class="carousel__divider" aria-hidden="true"></span>
       <button type="button" class="carousel__arrow" aria-label="다음">
         <img src="ico_arrow_right_16.svg" alt="">
       </button>
     </div>                                                    */
.carousel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.15s;
}

.carousel__arrow:disabled {
  cursor: default;
  opacity: 0.4;
}

.carousel__arrow img {
  width: 16px;
  height: 16px;
}

.carousel__divider {
  width: 1px;
  height: 12px;
  background-color: var(--color-border-default);
}


/* ----------------------------------------------------------
   9. Toast
   ----------------------------------------------------------
   Type : marketing | feedback
   ---------------------------------------------------------- */

/* -- Toast 공통 래퍼 -- */
.toast_wrap {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
  z-index: 9999;
}

.toast_wrap.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* 260601_추가 s : Toast 위치
   피씨는 기본(.toast_wrap) bottom 40px,
   모바일은 --bottom-cta 부여하여 하단 CTA위에 표시 */
.toast_wrap.toast_wrap--bottom-cta { bottom: calc(60px + 20px); }
/* 260601_추가 e */

/* -- Marketing Toast -- */
.toast--marketing {
  display: flex;
  gap: 8px;
  width: 330px;
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.toast--marketing .toast__thumb {
  flex-shrink: 0;
  width: 60px;
  height: 83px;
  overflow: hidden;
}
.toast--marketing .toast__thumb img { width: 100%; height: 100%; object-fit: cover; }

.toast--marketing .toast__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.toast--marketing .toast__sub {
  font-family: var(--typescale-font-family);
  font-size: var(--typescale-caption-medium-size);
  font-weight: 500;
  line-height: var(--typescale-caption-medium-line-height);
  color: #fff;
}

.toast--marketing .toast__main {
  font-family: var(--typescale-font-family);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #e4541b;
}

/* -- Feedback Toast -- */
.toast--feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 330px;
  padding: 16px 20px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 8px;
}

.toast--feedback .toast__message {
  flex: 1;
  font-family: var(--typescale-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #fff;
  white-space: pre-line;
}

.toast--feedback .toast__action {
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--typescale-font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: #e4541b;
  cursor: pointer;
}


/* ----------------------------------------------------------
   10. Alert
   ---------------------------------------------------------- */

.alert {
  display: flex;
  flex-direction: column;
  /*260601_추가 : width 수정*/
  width: calc(100% - 30px);
  max-width: 400px;
  /**/
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.alert__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 8px;
}

.alert__title {
  font-family: var(--typescale-font-family);
  font-size: var(--typescale-body-xlarge-size);
  font-weight: var(--typescale-body-xlarge-weight-emphasized);
  line-height: var(--typescale-body-xlarge-line-height);
  letter-spacing: var(--typescale-letter-spacing);
  color: var(--color-text-default);
}

.alert__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.alert__body {
  padding: 8px 24px;
  font-family: var(--typescale-font-family);
  font-size: var(--typescale-body-medium-size);
  font-weight: var(--typescale-body-medium-weight);
  line-height: var(--typescale-body-medium-line-height);
  letter-spacing: var(--typescale-letter-spacing);
  color: var(--color-text-secondary);
}

.alert__footer {
  display: flex;
  gap: 8px;
  padding: 24px;
}
.alert__footer .btn { flex: 1; }


/* ----------------------------------------------------------
   11. Modal
   ----------------------------------------------------------
   Size : medium(480px) | small(400px)
   ---------------------------------------------------------- */

/*260601_추가 background-color 투명도 조절 0.5>0.3 */
/* 사파리 뷰포트 꽉차게 */
.modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.modal {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  max-height: 90vh;
}

.modal--medium { width: 480px; }
.modal--small  { width: 400px; }

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-secondary);
}

.modal__title {
  font-family: var(--typescale-font-family);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--color-text-default);
}

.modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.modal__footer {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  border-top: 1px solid var(--color-border-secondary);
}
.modal__footer .btn { flex: 1; }


/* ----------------------------------------------------------
   12. Divider
   ---------------------------------------------------------- */

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-border-secondary);
  border: none;
  margin: 0;
}

.divider--thick {
  height: 8px;
  background-color: #f5f5f5;
}


/* ----------------------------------------------------------
   13. Badge / Label
   ---------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: var(--layout-radius-xsmall);
  font-family: var(--typescale-font-family);
  font-size: 12px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: var(--typescale-letter-spacing);
}

.badge--default { background-color: #f5f5f5; color: var(--color-text-subtle); }
.badge--point   { background-color: rgba(0, 0, 0, 0.80); color: #fff; }


/* -- Tag -- */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--layout-radius-xsmall);
  background-color: var(--color-background-secondary);
  color: var(--color-text-secondary);
  font-family: var(--typescale-font-family);
  font-size: var(--typescale-caption-small-size);
  font-weight: var(--typescale-caption-small-weight-emphasized);
  line-height: var(--typescale-caption-small-line-height);
  letter-spacing: var(--typescale-letter-spacing);
  white-space: nowrap;
}

.tag--point {
  background-color: var(--color-background-point-subtle);
  color: var(--color-text-point);
}

.tag--blue {
  background-color: rgba(30, 78, 237, 0.05);
  color: var(--color-text-success);
}


/* ----------------------------------------------------------
   14. Accordion
   ----------------------------------------------------------
   Type  : line
   State : Close | Open (.is-open)
   View  : PC (default) | Mobile (.accordion--mobile)
   Markup:
     <div class="accordion is-open">
       <button type="button" class="accordion__header">
         <span class="accordion__title">제목</span>
         <img class="accordion__arrow" src="ico_arrow_up_24.svg" alt="">
       </button>
       <div class="accordion__body">...</div>
     </div>
   ---------------------------------------------------------- */

.accordion {
  display: flex;
  flex-direction: column;
}

.accordion__header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 20px 0;
  border: none;
  border-top: 1px solid var(--color-border-default);
  background: transparent;
  cursor: pointer;
  font-family: var(--typescale-font-family);
  letter-spacing: var(--typescale-letter-spacing);
}

.accordion.is-open > .accordion__header {
  border-top: 1px solid var(--color-border-subtle);
}

.accordion__title {
  flex: 1;
  text-align: left;
  color: var(--color-text-default);
  font-size: var(--typescale-body-xlarge-size);
  font-weight: var(--typescale-body-xlarge-weight-emphasized);
  line-height: var(--typescale-body-xlarge-line-height);
}

.accordion__arrow {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.accordion:not(.is-open) > .accordion__header .accordion__arrow {
  transform: rotate(180deg);
}

.accordion__body {
  padding: 24px 0 48px;
}

.accordion:not(.is-open) > .accordion__body {
  display: none;
}

/* -- View: Mobile -- */
.accordion--mobile > .accordion__header {
  padding: 16px 15px;
}

.accordion--mobile .accordion__title {
  font-size: var(--typescale-body-large-size);
  font-weight: 600;
  line-height: var(--typescale-body-large-line-height);
}

.accordion--mobile .accordion__arrow {
  width: 16px;
  height: 16px;
}


/* ----------------------------------------------------------
   15. Stepper
   ----------------------------------------------------------
   Size : Large (default) | Medium (.stepper--medium)
   Type : min | 2ea_more | max → <button disabled> 로 처리
   Markup:
     <div class="stepper">
       <button type="button" class="stepper__btn" aria-label="감소">
         <img src="ico_minus_16.svg" alt="">
       </button>
       <span class="stepper__num">1</span>
       <button type="button" class="stepper__btn" aria-label="증가">
         <img src="ico_plus_16.svg" alt="">
       </button>
     </div>
   ---------------------------------------------------------- */

.stepper {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 4px 8px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--layout-radius-small);
  background-color: var(--color-input-surface);
}

.stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.stepper__btn:disabled,
.stepper__btn.is-disabled {
  cursor: default;
  opacity: 0.3;
}

.stepper__num {
  width: 24px;
  text-align: center;
  color: var(--color-text-default);
  font-family: var(--typescale-font-family);
  font-size: var(--typescale-body-large-size);
  font-weight: var(--typescale-body-large-weight);
  line-height: var(--typescale-body-large-line-height);
  letter-spacing: var(--typescale-letter-spacing);
}

/* -- Size: Medium -- */
.stepper--medium {
  gap: 12px;
}

.stepper--medium .stepper__btn {
  width: 12px;
  height: 12px;
}

.stepper--medium .stepper__num {
  font-size: var(--typescale-body-small-size);
  font-weight: var(--typescale-body-small-weight);
  line-height: var(--typescale-body-small-line-height);
}


/* ----------------------------------------------------------
   16. Table
   ----------------------------------------------------------
   Type  : <th> (헤더, bg-secondary + Medium weight)
         : <td> (데이터, Regular + secondary color)
   Align : Left (default) | .is-center | .is-right  (cell-level)
   Style : Normal (default) | .is-strong            (td 텍스트를 default 색상으로 강조)
   Markup:
     <table class="table">
       <thead>
         <tr>
           <th>구분</th>
           <th class="is-center">항목</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td class="is-strong">강조 데이터</td>
           <td class="is-center">일반</td>
         </tr>
       </tbody>
     </table>

   참고 : 각 행의 마지막 셀은 우측 border 자동 제거,
          마지막 행은 하단 border 자동 추가 (외곽 마감).
   ---------------------------------------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.table th,
.table td {
  min-height: 40px;
  padding: 9px 8px;
  border-top: 1px solid var(--color-border-secondary);
  border-right: 1px solid var(--color-border-secondary);
  font-family: var(--typescale-font-family);
  font-size: var(--typescale-body-small-size);
  line-height: var(--typescale-body-small-line-height);
  letter-spacing: var(--typescale-letter-spacing);
  text-align: left;
  vertical-align: middle;
}

.table th {
  background-color: var(--color-background-secondary);
  font-weight: var(--typescale-body-small-weight-emphasized);
  color: var(--color-text-default);
}

.table td {
  font-weight: var(--typescale-body-small-weight);
  color: var(--color-text-secondary);
}

/* -- Style: Strong (td 강조 — 텍스트를 default 색상으로) -- */
.table td.is-strong {
  color: var(--color-text-default);
}

/* -- Align 모디파이어 (cell-level) -- */
.table .is-center { text-align: center; }
.table .is-right  { text-align: right;  }

/* 각 행의 마지막 셀은 우측 border 제거 (외곽 마감) */
.table tr > :last-child {
  border-right: none;
}

/* Row-header 테이블 (th scope="row" 가 왼쪽 라벨로 쓰이는 경우)
   → 뒤따르는 td 들은 수직 구분선을 넣지 않음.
     결과: [라벨th] | [데이터td td td]  (th 우측 선 1개만 남음) */
.table th[scope="row"] ~ td {
  border-right: none;
}

/* 마지막 행 하단 border 추가 (외곽 마감)
   ※ `.table tr:last-child` 로 쓰면 <thead> 내부 단일 <tr> 에도 매칭되어
     th 의 border-bottom 과 첫 td 의 border-top 이 같은 자리에 중복 렌더됨.
     → tbody/tfoot 안 마지막 tr 로 스코프 좁혀야 함. */
.table tbody tr:last-child th,
.table tbody tr:last-child td,
.table tfoot tr:last-child th,
.table tfoot tr:last-child td {
  border-bottom: 1px solid var(--color-border-secondary);
}


/* ----------------------------------------------------------
   17. State Utility
   ---------------------------------------------------------- */

.is-active {}
.is-disabled { cursor: default !important; }
.is-open {}
.is-hidden { display: none !important; }