/* ============================================================
   form.css — 공통 폼 컴포넌트 라이브러리
   미리 정의된 공통 form 요소
   ============================================================ */

/* ─────────────────────────────────────────
   1. CSS 변수 (form 전용)
───────────────────────────────────────── */
:root {
    --form-radius:       10px;
    --form-radius-sm:    6px;   /* 뱃지 / 미니툴팁 등 작은 표면 */
    --form-radius-lg:    16px;
    --form-border:       var(--grey-line-400);
    --form-border-focus: var(--primary-bg);
    --form-bg:           #fff;
    --form-text:         var(--base-text);
    --form-placeholder:  var(--grey-text-200);
    --form-disabled-bg:  var(--grey-bg-300);
    --form-disabled-text:var(--grey-text-200);
    --form-error:        var(--error-text);
    --form-success:      var(--primary-text);
    --form-font-size:    var(--font-size);
    --form-font-sm:      12px;  /* hint / error / 뱃지/모달 description */
    --form-font-xs:      10px;  /* 미니툴팁 */
    --form-line-height:  1.5;
    --form-padding-v:    12px;
    --form-padding-h:    16px;
    --form-gap:          14px;
    --form-weight-medium:    500;
    --form-weight-semibold:  600;

    /* ── 모션 — duration / easing ──
       마이크로 인터랙션 분산을 정리해 일관된 리듬 부여 */
    --form-duration-fast: 0.15s;  /* 작은 상태 토글 (체크 마크, 모달 닫기 색) */
    --form-duration-base: 0.2s;   /* 기본 hover/focus, 모달 항목 */
    --form-duration-slow: 0.3s;   /* 펼침/접힘 (큰 툴팁 등) */
    --form-ease:          ease;
    --form-ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── z-index 스택 ── */
    --form-z-overlay: 2;
    --form-z-modal:   3;

    /* ── 버튼 색상 토큰 ──
       전역 브랜드 색을 form 컴포넌트 레이어에서 한 번 감싸
       테마/다크모드/사이트별 오버라이드 시점을 단일화한다. */
    --form-btn-primary-bg:      var(--black-bg);
    --form-btn-primary-text:    #fff;
    --form-btn-secondary-bg:    var(--grey-bg-400);
    --form-btn-secondary-text:  var(--form-text);
    --form-btn-accent-bg:        var(--accent-text);
    --form-btn-accent-text:      #fff;

    /* 비활성 버튼 — opacity 대신 토큰으로 표현해 톤을 명시적으로 통제 */
    --form-btn-disabled-bg:      var(--grey-bg-400);
    --form-btn-disabled-text:    var(--grey-text-200);

    /* ── 컨트롤(체크박스/라디오/토글/range) 색상 토큰 ──
       checked / track / thumb 등 상태색을 한 곳에서 관리한다.
       기본은 primary, .f-accent 수정자가 붙으면 accent 토큰으로 재바인딩된다. */
    --form-control-bg:            var(--form-bg);
    --form-control-border:        var(--form-border);
    --form-control-checked-bg:    var(--primary-bg);
    --form-control-checked-border:var(--primary-bg);
    --form-control-check-mark:    #fff;   /* 체크 아이콘 색 */

    /* primary / accent 변형용 원천값 (수정자에서 참조) */
    --form-control-primary-bg:    var(--primary-bg);
    --form-control-primary-border:var(--primary-bg);
    --form-control-accent-bg:     var(--accent-bg);
    --form-control-accent-border: var(--accent-bg);

    --form-toggle-track-bg:       var(--form-border);
    --form-toggle-track-on-bg:    var(--primary-bg);
    --form-toggle-thumb-bg:       #fff;
    --form-toggle-primary-on-bg:  var(--primary-bg);
    --form-toggle-accent-on-bg:   var(--accent-bg);

    --form-range-track-bg:        var(--form-border);
    --form-range-thumb-bg:        var(--primary-bg);
    --form-range-primary-thumb-bg:var(--primary-bg);
    --form-range-accent-thumb-bg: var(--accent-bg);

    /* ── 보조 텍스트 / 그림자 ── */
    --form-hint-text:             var(--grey-text-400);
    --form-shadow-thumb:          0 1px 3px rgba(0,0,0,0.18);  /* toggle thumb */
    --form-shadow-thumb-lg:       0 1px 4px rgba(0,0,0,0.18);  /* range thumb */

    /* ── 모달 / 오버레이 ── */
    --form-modal-bg:              #fff;
    --form-modal-shadow:          0 16px 48px rgba(0,0,0,0.15);
    --form-modal-close-bg:        var(--black-bg);
    --form-modal-close-text:      #fff;
    --form-modal-item-hover-bg:   var(--grey-bg-300);
    --form-overlay-bg:            rgba(0,0,0,0.35);

    /* ── 뱃지 (모달 추천 표시 등) ── */
    --form-badge-bg:              var(--grey-bg-400);
    --form-badge-text:            var(--grey-text-500);

    /* ── 미니 툴팁 / 큰 툴팁 카드 ── */
    --form-tooltip-bg:            rgba(0,0,0,0.1);
    --form-tooltip-text:          var(--form-text);
    --form-tooltip-card-bg:       #fff;
    --form-tooltip-card-border:   var(--form-text);
}

/* ─────────────────────────────────────────
   2. 공통 리셋
───────────────────────────────────────── */
.f-field,
.f-input,
.f-textarea,
.f-select,
.f-btn {
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--form-font-size);
    line-height: var(--form-line-height);
    color: var(--form-text);
}

/* ─────────────────────────────────────────
   3. 폼 레이아웃
───────────────────────────────────────── */
.f-form {
    display: flex;
    flex-direction: column;
    gap: var(--form-gap);
}

/* 필드 래퍼 (label + input) */
.f-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 가로 배치 */
.f-field.f-inline {
    flex-direction: row;
    align-items: center;
}

/* label */
.f-label {
    font-size: 13px;
    font-weight: var(--form-weight-semibold);
    color: var(--form-text);
    letter-spacing: -0.02em;
}

.f-label .f-required {
    color: var(--form-error);
    margin-left: 2px;
}

/* hint / error 메시지 */
.f-hint {
    font-size: var(--form-font-sm);
    color: var(--form-hint-text);
    margin-top: 2px;
}

.f-error-msg {
    font-size: var(--form-font-sm);
    color: var(--form-error);
    margin-top: 2px;
    display: none;
}

.f-field.is-error .f-error-msg { display: block; }
.f-field.is-error .f-input,
.f-field.is-error .f-textarea,
.f-field.is-error .f-select {
    border-color: var(--form-error) !important;
}

/* ─────────────────────────────────────────
   3-1. 플로팅 라벨 (.f-field-floating)
   라벨이 input/textarea 의 가운데(placeholder 자리)에 있다가
   포커스/입력 시 상단으로 작아지며 이동.
   - .f-input / .f-textarea: placeholder=" " (공백 1자) 필요
     → :placeholder-shown 트리거에 사용
   - .f-select: 값이 늘 존재하므로 라벨은 항상 상단 표시
───────────────────────────────────────── */
.f-field-floating {
    position: relative;
    gap: 0;  /* 라벨이 절대위치라 .f-field 의 gap 무력화 */
}

/* 라벨 — 기본 상태(가운데, 회색 톤)
   포커스/활성/disabled 와 무관하게 항상 회색을 유지한다.
   에러 상태에서만 색을 덮어씀. */
.f-field-floating > .f-label {
    position: absolute;
    left: var(--form-padding-h);
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    font-size: var(--form-font-size);
    font-weight: 400;
    color: var(--grey-text-300);
    letter-spacing: -0.02em;
    pointer-events: none;
    background: transparent;
    transition:
        top var(--form-duration-fast) var(--form-ease),
        transform var(--form-duration-fast) var(--form-ease),
        font-size var(--form-duration-fast) var(--form-ease),
        font-weight var(--form-duration-fast) var(--form-ease);
}

/* 라벨 자리 확보를 위해 컨트롤 패딩 재정의
   라벨(상단)과 입력값(하단) 사이 시각적 여백을 두기 위해
   상하 패딩을 넉넉히 잡는다.
   직계 자식뿐 아니라 .f-input-group 안에 중첩된 경우도 매칭. */
.f-field-floating > .f-input,
.f-field-floating > .f-textarea,
.f-field-floating > .f-select,
.f-field-floating > .f-input-group > .f-input,
.f-field-floating > .f-input-group > .f-textarea,
.f-field-floating > .f-input-group > .f-select {
    padding-top: 25px;
    padding-bottom: 10px;
}
.f-field-floating > .f-textarea,
.f-field-floating > .f-input-group > .f-textarea {
    padding-top: 29px;  /* textarea 는 라벨이 상단 고정 — 더 넉넉히 */
}

/* 라벨이 "위로 올라가는" 활성 상태 (색은 그대로 회색 유지):
   1) 어떤 컨트롤이든 포커스
   2) input/textarea 에 값이 있을 때 (:not(:placeholder-shown))
   3) select 가 존재 (값이 늘 있는 것으로 간주) */
.f-field-floating:focus-within > .f-label,
.f-field-floating:has(.f-input:not(:placeholder-shown)) > .f-label,
.f-field-floating:has(.f-textarea:not(:placeholder-shown)) > .f-label,
.f-field-floating:has(.f-select) > .f-label {
    top: 9px;
    transform: translateY(0);
    font-size: 11px;
    font-weight: var(--form-weight-medium);
}

/* textarea 는 라벨이 가운데가 아니라 상단 부근에서 시작 */
.f-field-floating:has(.f-textarea) > .f-label {
    top: 15px;
    transform: translateY(0);
}
.f-field-floating:focus-within:has(.f-textarea) > .f-label,
.f-field-floating:has(.f-textarea:not(:placeholder-shown)) > .f-label {
    top: 9px;
}

/* 에러 상태에서만 라벨 색 덮어쓰기 (포커스 여부 무관) */
.f-field-floating.is-error > .f-label {
    color: var(--form-error);
}


/* ─────────────────────────────────────────
   4. input / textarea / select 기본
───────────────────────────────────────── */
.f-input,
.f-textarea,
.f-select {
    width: 100%;
    padding: var(--form-padding-v) var(--form-padding-h);
    background: var(--form-bg);
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color var(--form-duration-fast) var(--form-ease), box-shadow var(--form-duration-fast) var(--form-ease);
}

.f-input::placeholder,
.f-textarea::placeholder {
    color: var(--form-placeholder);
}

.f-input:focus,
.f-textarea:focus,
.f-select:focus {
    border-color: var(--form-border-focus);
    /* inset box-shadow 로 보더 두께를 시각적으로 +1px 만큼 키운다.
       border-width 를 바꾸지 않으므로 CLS(layout shift) 없음. */
    box-shadow: inset 0 0 0 1px var(--form-border-focus);
}

.f-input:disabled,
.f-textarea:disabled,
.f-select:disabled {
    background: var(--form-disabled-bg);
    color: var(--form-disabled-text);
    cursor: not-allowed;
}

/* textarea */
.f-textarea {
    resize: vertical;
    min-height: 100px;
}

/* ─────────────────────────────────────────
   5. select (커스텀 화살표)
───────────────────────────────────────── */
.f-select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

/* ─────────────────────────────────────────
   6. 커스텀 체크박스 (공통)
   offer.css .selector-checkbox 에서 분리
───────────────────────────────────────── */
.f-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    /* f-mini-tooltip 의 positioning anchor */
    position: relative;
}

.f-checkbox input[type="checkbox"] {
    /* 시각적으로 숨기지만 포커스/클릭은 받도록 — display:none 으로 하면
       브라우저가 Tab focusable 트리에서 제외해 키보드 접근이 막힌다. */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    clip: rect(0 0 0 0);
}

.f-checkbox .f-checkbox-box {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--form-control-border);
    border-radius: 5px;
    background: var(--form-control-bg);
    transition: background var(--form-duration-fast) var(--form-ease), border-color var(--form-duration-fast) var(--form-ease);
}

.f-checkbox .f-checkbox-box::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid var(--form-control-check-mark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity var(--form-duration-fast) var(--form-ease);
}

.f-checkbox input:checked ~ .f-checkbox-box {
    background: var(--form-control-checked-bg);
    border-color: var(--form-control-checked-border);
}

.f-checkbox input:checked ~ .f-checkbox-box::after {
    opacity: 1;
}

/* 키보드 포커스 표시 — 마우스 클릭 시에는 나타나지 않음(:focus-visible).
   outline 은 layout box 에 영향이 없어 CLS 가 발생하지 않음. */
.f-checkbox input:focus ~ .f-checkbox-box,
.f-checkbox input:focus-visible ~ .f-checkbox-box {
    outline: 2px solid var(--form-control-checked-border);
    outline-offset: 2px;
}

.f-checkbox .f-checkbox-label {
    font-size: var(--form-font-size);
    color: var(--form-text);
    line-height: 1.4;
}

/* 크기 변형 */
.f-checkbox.f-sm .f-checkbox-box  { width: 14px; height: 14px; border-radius: 3px; }
.f-checkbox.f-sm .f-checkbox-box::after { top: 1px; left: 4px; width: 4px; height: 7px; border-width: 0 1.5px 1.5px 0; }
.f-checkbox.f-sm .f-checkbox-label{ font-size: var(--form-font-sm);}
.f-checkbox.f-lg .f-checkbox-box  { width: 22px; height: 22px; border-radius: 6px; }
.f-checkbox.f-lg .f-checkbox-box::after { top: 3px; left: 7px; width: 7px; height: 11px; border-width: 0 2.5px 2.5px 0; }
.f-checkbox.f-lg .f-checkbox-label{ font-size: var(--form-font-size);}

/* ─────────────────────────────────────────
   7. 커스텀 라디오 버튼
───────────────────────────────────────── */
.f-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.f-radio input[type="radio"] {
    /* 시각적으로 숨기지만 포커스/클릭은 받도록 (Tab 키보드 접근 보장) */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    clip: rect(0 0 0 0);
}

.f-radio .f-radio-box {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--form-control-border);
    border-radius: 50%;
    background: var(--form-control-bg);
    transition: border-color var(--form-duration-fast) var(--form-ease), box-shadow var(--form-duration-fast) var(--form-ease);
}

.f-radio input:checked ~ .f-radio-box {
    border-color: var(--form-control-checked-border);
    box-shadow: inset 0 0 0 4px var(--form-control-checked-bg);
}

/* 키보드 포커스 표시 (CLS 없는 outline 방식) */
.f-radio input:focus ~ .f-radio-box,
.f-radio input:focus-visible ~ .f-radio-box {
    outline: 2px solid var(--form-control-checked-border);
    outline-offset: 2px;
}

.f-radio .f-radio-label {
    font-size: 14px;
    font-weight: var(--form-weight-medium);
    color: var(--form-text);
    line-height: 1.4;
}

/* ─────────────────────────────────────────
   8. 토글 스위치
───────────────────────────────────────── */
.f-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.f-toggle input[type="checkbox"] {
    /* 시각적으로 숨기지만 포커스/클릭은 받도록 (Tab 키보드 접근 보장) */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    clip: rect(0 0 0 0);
}

.f-toggle .f-toggle-track {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--form-toggle-track-bg);
    border-radius: 12px;
    flex-shrink: 0;
    transition: background var(--form-duration-base) var(--form-ease);
}

.f-toggle .f-toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--form-toggle-thumb-bg);
    border-radius: 50%;
    box-shadow: var(--form-shadow-thumb);
    transition: transform var(--form-duration-base) var(--form-ease-bounce);
}

.f-toggle input:checked ~ .f-toggle-track {
    background: var(--form-toggle-track-on-bg);
}

.f-toggle input:checked ~ .f-toggle-track::after {
    transform: translateX(20px);
}

/* 키보드 포커스 표시 (CLS 없는 outline 방식) */
.f-toggle input:focus ~ .f-toggle-track,
.f-toggle input:focus-visible ~ .f-toggle-track {
    outline: 2px solid var(--form-toggle-track-on-bg);
    outline-offset: 2px;
}

.f-toggle .f-toggle-label {
    font-size: 14px;
    font-weight: var(--form-weight-medium);
    color: var(--form-text);
    line-height: 1.4;
}

/* ─────────────────────────────────────────
   9. range slider
───────────────────────────────────────── */
.f-range {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--form-range-track-bg);
    outline: none;
    cursor: pointer;
}

.f-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--form-range-thumb-bg);
    box-shadow: var(--form-shadow-thumb-lg);
    transition: box-shadow var(--form-duration-fast) var(--form-ease);
}

.f-range::-webkit-slider-thumb:hover {
    box-shadow: var(--form-shadow-thumb-lg);
}

.f-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: var(--form-range-thumb-bg);
    box-shadow: var(--form-shadow-thumb-lg);
    cursor: pointer;
}

/* ─────────────────────────────────────────
   9-1. 컬러 변형 수정자 (.f-primary / .f-accent)
       토큰만 로컬 재바인딩하여 색을 갈아끼운다.
       기본(modifier 없음)은 primary와 동일하다.
───────────────────────────────────────── */
/* primary (명시적으로 붙이고 싶을 때 사용) */
.f-checkbox.f-primary,
.f-radio.f-primary {
    --form-control-checked-bg:     var(--form-control-primary-bg);
    --form-control-checked-border: var(--form-control-primary-border);
}
.f-toggle.f-primary {
    --form-toggle-track-on-bg:     var(--form-toggle-primary-on-bg);
}
.f-range.f-primary {
    --form-range-thumb-bg:         var(--form-range-primary-thumb-bg);
}

/* accent */
.f-checkbox.f-accent,
.f-radio.f-accent {
    --form-control-checked-bg:     var(--form-control-accent-bg);
    --form-control-checked-border: var(--form-control-accent-border);
}
.f-toggle.f-accent {
    --form-toggle-track-on-bg:     var(--form-toggle-accent-on-bg);
}
.f-range.f-accent {
    --form-range-thumb-bg:         var(--form-range-accent-thumb-bg);
}

/* input / textarea / select 도 동일 패턴으로 focus 색을 재바인딩 */
.f-input.f-primary,
.f-textarea.f-primary,
.f-select.f-primary {
    --form-border-focus: var(--primary-bg);
}
.f-input.f-accent,
.f-textarea.f-accent,
.f-select.f-accent {
    --form-border-focus: var(--accent-bg);
}

/* f-selector-modal 도 동일 패턴 — 항목 라디오 dot(.is-active::before)이
   --form-control-checked-bg/border 를 참조하므로, 모달 자체에 modifier 를
   붙이면 토큰만 로컬 재바인딩되어 톤이 바뀐다. */
dialog.f-selector-modal.f-primary {
    --form-control-checked-bg:     var(--form-control-primary-bg);
    --form-control-checked-border: var(--form-control-primary-border);
}
dialog.f-selector-modal.f-accent {
    --form-control-checked-bg:     var(--form-control-accent-bg);
    --form-control-checked-border: var(--form-control-accent-border);
}

/* ─────────────────────────────────────────
   10. 버튼
───────────────────────────────────────── */
.f-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    border: none;
    border-radius: var(--form-radius);
    font-weight: var(--form-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--form-duration-fast) var(--form-ease), color var(--form-duration-fast) var(--form-ease), transform var(--form-duration-fast) var(--form-ease);
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}

.f-btn:active { transform: scale(0.97); }

/* 비활성: 모든 변형(.f-btn-primary/secondary/accent)에 공통 적용.
   opacity 가 아니라 색 토큰을 직접 덮어써서 톤을 명시적으로 통제한다. */
.f-btn:disabled,
.f-btn[aria-disabled="true"] {
    background: var(--form-btn-disabled-bg);
    color: var(--form-btn-disabled-text);
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

/* 변형 */
.f-btn-primary {
    background: var(--form-btn-primary-bg);
    color: var(--form-btn-primary-text);
}

.f-btn-secondary {
    background: var(--form-btn-secondary-bg);
    color: var(--form-btn-secondary-text);
}


.f-btn-accent {
    background: var(--form-btn-accent-bg);
    color: var(--form-btn-accent-text);
}

/* 크기 변형 */
.f-btn.f-sm { padding: 7px 14px; font-size: 13px; border-radius: 8px; }
.f-btn.f-lg { padding: 16px 32px; font-size: 17px; border-radius: 14px; }
/* .f-field-floating 의 input 높이(약 60px)와 정확히 맞춰지는 변형.
   인풋 그룹에서 floating input 옆에 나란히 둘 때 사용.
   상하 패딩은 input 높이 매칭에 결정적이므로 고정,
   좌우는 좁은 화면 가독성을 위해 clamp 로 축소되도록 한다. */
.f-btn.f-floating {
    padding: 22px clamp(16px, 4vw, 28px);
    font-size: var(--form-font-size);
    line-height: 1;
}
.f-btn.f-full { width: 100%; }

/* ─────────────────────────────────────────
   11. 인풋 그룹 (input + 버튼 나란히)
───────────────────────────────────────── */
.f-input-group {
    display: flex;
    gap: 0;
}

.f-input-group .f-input {
    border-radius: var(--form-radius) 0 0 var(--form-radius);
    border-right: none;
    flex: 1;
    min-width: 0;  /* flex item 의 본문 길이가 컨테이너를 밀어내는 것을 방지 */
}

.f-input-group .f-btn {
    border-radius: 0 var(--form-radius) var(--form-radius) 0;
    flex-shrink: 0;
}

/* .f-selector-checkbox 는 .f-checkbox 스타일을 그대로 사용 */

/* ─────────────────────────────────────────
   12. .f-options — selector 데이터 컨테이너 (항상 숨김)
───────────────────────────────────────── */
.f-options {
    display: none !important;
}

/* ─────────────────────────────────────────
   13. f-selector-modal / overlay
───────────────────────────────────────── */
dialog.f-selector-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 16px;
    z-index: var(--form-z-modal);
    background: var(--form-modal-bg);
    border: none;
    border-radius: var(--form-radius-lg);
    box-shadow: var(--form-modal-shadow);
    max-width: 500px;
    /* 좁은 화면(≤360px)에선 좌우 여백을 줄여 모달 가독 폭 확보.
       calc 의 빼는 값이 4vw~40px 사이에서 흐르도록 clamp 사용. */
    width: calc(100% - clamp(20px, 8vw, 40px));
    box-sizing: border-box;
    animation: selectorModalIn 0.25s var(--form-ease-bounce);
}

dialog.f-selector-modal .f-selector-modal-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 34px;
    height: 34px;
    border: none;
    background: var(--form-modal-close-bg);
    font-size: 28px;
    line-height: 1;
    color: var(--form-modal-close-text);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background var(--form-duration-fast), color var(--form-duration-fast);
    padding: 0;
}

dialog.f-selector-modal::backdrop { display: none; }

dialog.f-selector-modal ul.f-selector-modal-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

dialog.f-selector-modal ul.f-selector-modal-list > li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(12px, 4vw, 18px);
    padding: clamp(12px, 4vw, 18px);
    border-radius: 12px;
    cursor: pointer;
    transition: background var(--form-duration-base), border-color var(--form-duration-base);
}

dialog.f-selector-modal ul.f-selector-modal-list > li::before {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--form-control-border);
    box-sizing: border-box;
    transition: border-color var(--form-duration-base), box-shadow var(--form-duration-base);
}

dialog.f-selector-modal ul.f-selector-modal-list > li.is-active::before {
    border-color: var(--form-control-checked-border);
    box-shadow: inset 0 0 0 4px var(--form-control-checked-bg);
}

dialog.f-selector-modal ul.f-selector-modal-list > li .text {
    display: flex;
    flex-direction: column;
}

@media (hover: hover) {
    dialog.f-selector-modal ul.f-selector-modal-list > li:hover { background: var(--form-modal-item-hover-bg); }
}

dialog.f-selector-modal ul.f-selector-modal-list > li .name {
    display: flex;
    align-items: center;
    font-weight: var(--form-weight-semibold);
    line-height: 1.4;
    gap: 6px;
}

dialog.f-selector-modal ul.f-selector-modal-list > li .name.recommended::after {
    content: '추천';
    border-radius: var(--form-radius-sm);
    background: var(--form-badge-bg);
    font-size: 11px;
    font-weight: 400;
    padding: 4px 8px;
    white-space: nowrap;
    color: var(--form-badge-text);
    line-height: 1;
}

dialog.f-selector-modal ul.f-selector-modal-list > li .description {
    font-size: 14px;
    line-height: 1.3;
    margin-top: 4px;
}

.f-selector-modal-overlay {
    display: none;
    position: fixed;
    max-width: 100% !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--form-overlay-bg);
    z-index: var(--form-z-overlay);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.f-selector-modal-overlay.is-open {
    display: block;
    animation: overlayFadeIn var(--form-duration-base) var(--form-ease);
}

/* ─────────────────────────────────────────
   14. f-mini-tooltip / f-selector-tooltip
───────────────────────────────────────── */
.f-mini-tooltip {
    position: absolute;
    top: -28px;
    right: 0;
    padding: 4px 8px;
    background: var(--form-tooltip-bg);
    color: var(--form-tooltip-text);
    font-size: var(--form-font-xs);
    font-weight: var(--form-weight-medium);
    line-height: 1.4;
    border-radius: var(--form-radius-sm);
    white-space: nowrap;
    pointer-events: none;
}

.f-mini-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    border: 6px solid transparent;
    border-top-color: var(--form-tooltip-bg);
}

.f-selector-tooltip {
    max-width: 500px;
    margin: 0 auto 16px;
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    transition: max-height var(--form-duration-slow) var(--form-ease), opacity var(--form-duration-slow) var(--form-ease), margin var(--form-duration-slow) var(--form-ease);
}

.f-selector-tooltip[hidden] {
    display: block;
    max-height: 0;
    opacity: 0;
    margin: 0 auto;
    pointer-events: none;
}

.f-selector-tooltip.is-open {
    max-height: 200px;
    opacity: 1;
}

.f-selector-tooltip p {
    background: var(--form-tooltip-card-bg);
    border-radius: 12px;
    font-size: var(--form-font-sm);
    line-height: 1.6;
    border: 1px solid var(--form-tooltip-card-border);
    padding: 20px clamp(22px, 4vw, 32px);
}

/* ─────────────────────────────────────────
   15. f-selector-active 버튼
───────────────────────────────────────── */
button.f-selector-active {
    align-items: center;
    display: inline-flex;
    gap: 4px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    background: none;
    border: none;
}

button.f-selector-active::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    border-radius: 0 0 1.5px 0;
    transform: rotate(45deg);
    margin-left: 4px;
    margin-top: -4px;
}

/* ─────────────────────────────────────────
   16. 공통 폼 유효성 상태 색상
───────────────────────────────────────── */
.f-input.is-valid,
.f-textarea.is-valid,
.f-select.is-valid {
    border-color: var(--form-success);
}

.f-input.is-invalid,
.f-textarea.is-invalid,
.f-select.is-invalid {
    border-color: var(--form-error);
}