/**
 * 폼 필드 공통 스타일
 * assets/css/form-fields.css
 *
 * Figma 폼 구조
 *   2112:284 text · 2112:281 radio · 2112:282 check · 2112:283 privacy
 *   2009:91 textarea · 2112:439 select · 2112:394 upload
 *
 * .form-skin — 로컬 --form* (레거시·기타 스킨 베이스)
 * .form-skin--fields — #cp-form-fields · QA 글쓰기 공통 디자인 (단일 출처)
 * .form-group — 필드 엔진
 *
 * ※ 스킨별 디자인은 각자 CSS만 수정
 *   - 모달 → auth.css (.form-skin--dialog)
 *   - 폼필드 · QA 글쓰기 → .form-skin--fields (이 파일)
 *   - 게시판 글쓰기(info/case/gallery) → board.css (.form-skin--board-write)
 *   - 문의 → contact-form.css / inquiry-form.css
 *
 * ※ 레이아웃 치수 = Figma px 고정 (html rem 스케일과 분리)
 */

/* ============================================
   Form skin — Figma 기본값
   ============================================ */
.form-skin {
    --formInpH: 60px;
    --formInpH2: 50px; /* select option */
    --formTextareaH: 166px;
    --formUploadH: 62px;
    --formUploadBtnW: 120px;
    --formUploadBtnH: 58px;
    --formRadius: 8px;
    --formBorder: #e0e0e0;
    --formBorderHover: #c4c4c4;
    --formPadX: 10px;
    --formLabelGap: 8px;
    --formError: #e74c3c;
    --formErrorBg: rgba(231, 76, 60, 0.06);
    --formSuccess: #27ae60;
    --formSuccessBg: rgba(39, 174, 96, 0.06);
    --formDisabledBg: #f5f5f5;
    --formCheckSize: 18px;
    --formCheckBorder: 1px;
    --formCheckMark: 12px;
}

/* ── Group A: #cp-form-fields · QA 글쓰기 — 디자인 단일 출처 ── */
.form-skin.form-skin--fields {
    --formInpH: max(7.2rem, 72px);
    --formInpH2: max(6.9rem, 69px);
    --formPadX: 1.6rem;
    --formRadius: 8px;
    --formBorder: #e0e0e0;
    --formBorderHover: #c4c4c4;
    --formCheckSize: 2rem;
    --formCheckBorder: 2px;
    --formCheckMark: 1.35rem;
}

.form-skin.form-skin--fields .form-group > label:not(.custom-checkbox):not(.custom-radio),
.form-skin.form-skin--fields .form-group-label {
    font-size: var(--txt);
    font-weight: 500;
}

.form-skin.form-skin--fields label.custom-checkbox,
.form-skin.form-skin--fields label.custom-radio {
    font-size: var(--txt);
    font-weight: 500;
    gap: 0.8rem;
}

.form-skin.form-skin--fields .form-group input[type="text"],
.form-skin.form-skin--fields .form-group input[type="email"],
.form-skin.form-skin--fields .form-group input[type="password"],
.form-skin.form-skin--fields .form-group input[type="tel"],
.form-skin.form-skin--fields .form-group select,
.form-skin.form-skin--fields .form-group textarea {
    font-size: var(--txt);
    font-weight: 400;
}

.form-skin.form-skin--fields .form-group input::placeholder,
.form-skin.form-skin--fields .form-group textarea::placeholder {
    font-size: var(--txt);
    font-weight: 400;
}

.form-skin.form-skin--fields .form-group input[type="text"]:not(:placeholder-shown),
.form-skin.form-skin--fields .form-group input[type="email"]:not(:placeholder-shown),
.form-skin.form-skin--fields .form-group input[type="password"]:not(:placeholder-shown),
.form-skin.form-skin--fields .form-group input[type="tel"]:not(:placeholder-shown),
.form-skin.form-skin--fields .form-group textarea:not(:placeholder-shown) {
    font-weight: 400;
}

/* ============================================
   1. form-group · label — gap 8 · txt/500
   ============================================ */
.form-group {
    margin-bottom: 24px;
}

.form-group > label:not(.custom-checkbox):not(.custom-radio),
.form-group-label {
    display: block;
    font-size: var(--txt);
    font-weight: 500;
    line-height: var(--txtLine);
    color: var(--txtBlack1);
    margin-bottom: var(--formLabelGap);
}

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

.form-optional {
    margin-left: 0.4rem;
    font-size: var(--tinyTxt);
    font-weight: 500;
    color: var(--txtGray2);
}

/* ============================================
   2. text · select · textarea — 2112:284 / 439 / 2009:91
   ============================================ */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0 var(--formPadX);
    border: 1px solid var(--formBorder);
    border-radius: var(--formRadius);
    font-size: var(--txt);
    font-weight: 500; /* Figma txt/500 — placeholder·입력값 동일 */
    font-family: inherit;
    color: var(--txtBlack1);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="tel"],
.form-group select {
    height: var(--formInpH);
}

.form-group textarea {
    height: var(--formTextareaH);
    min-height: var(--formTextareaH);
    padding: 14px var(--formPadX);
    resize: vertical;
    line-height: var(--txtLine);
}

.form-group input[type="text"]:not(:placeholder-shown),
.form-group input[type="email"]:not(:placeholder-shown),
.form-group input[type="password"]:not(:placeholder-shown),
.form-group input[type="tel"]:not(:placeholder-shown),
.form-group textarea:not(:placeholder-shown) {
    font-weight: 500;
}

.form-group select {
    cursor: pointer;
}

/* hover는 비포커스일 때만 — :not() 때문에 hover 특이도가 focus보다 높아
   포커스 중 마우스가 나가면 테두리가 갑자기 primary로 바뀌던 문제 방지 */
.form-group input:hover:not(:disabled):not(:read-only):not(:focus),
.form-group select:hover:not(:disabled):not(:focus),
.form-group textarea:hover:not(:disabled):not(:read-only):not(:focus) {
    border-color: var(--formBorderHover);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--txtGray3);
    font-weight: 500;
    line-height: var(--txtLine);
}

.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
    background: var(--formDisabledBg);
    color: var(--txtGray2);
    border-color: var(--formBorder);
    cursor: not-allowed;
}

.form-group input:disabled::placeholder {
    color: var(--txtGray2);
}

.form-group input:read-only,
.form-group textarea:read-only {
    background: var(--formDisabledBg);
    cursor: default;
}

.form-group input:read-only:focus,
.form-group textarea:read-only:focus {
    box-shadow: none;
    border-color: var(--formBorder);
}

.form-group.is-error input,
.form-group.is-error select,
.form-group.is-error textarea {
    border-color: var(--formError);
    background: var(--formErrorBg);
}

.form-group.is-error input:focus,
.form-group.is-error select:focus,
.form-group.is-error textarea:focus {
    border-color: var(--formError);
}

.form-group.is-error .form-help {
    color: var(--formError);
}

.form-group.is-success input,
.form-group.is-success select,
.form-group.is-success textarea {
    border-color: var(--formSuccess);
    background: var(--formSuccessBg);
}

.form-group.is-success .form-help {
    color: var(--formSuccess);
}

.form-help {
    display: block;
    font-size: var(--smTxt);
    font-weight: 400;
    line-height: var(--txtLine);
    color: var(--txtGray3);
    margin-top: 8px;
}

/* ============================================
   비밀번호 표시(눈) 토글 — form-ui.js가 JS로 주입
   · .form-group → .pw-toggle-wrap = 인풋 셸(flex) · 눈은 오른쪽 flex 자식
   · auth .auth-inp → auth.css (동일 패턴)
   ============================================ */
.pw-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--txtGray3);
    cursor: pointer;
    transition: color 0.2s ease;
}

.pw-toggle-btn svg {
    display: block;
    width: 20px;
    height: 20px;
}

.pw-toggle-btn:hover,
.pw-toggle-btn:focus-visible {
    color: var(--txtGray1);
}

/* 인풋과 같은 테두리·높이의 flex 셸 — 절대위치 금지(로그인 폼과 동일) */
.form-group .pw-toggle-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--formInpH);
    padding: 0 var(--formPadX);
    border: 1px solid var(--formBorder);
    border-radius: var(--formRadius);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* board/fields 스킨의 input border 규칙보다 특이도 높게 (이중 테두리 방지) */
.form-group .pw-toggle-wrap > input[type="password"],
.form-group .pw-toggle-wrap > input[type="text"],
.form-skin .form-group .pw-toggle-wrap > input[type="password"],
.form-skin .form-group .pw-toggle-wrap > input[type="text"] {
    flex: 1;
    min-width: 0;
    width: auto;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.form-group .pw-toggle-wrap > input:hover,
.form-group .pw-toggle-wrap > input:focus,
.form-group.is-error .pw-toggle-wrap > input,
.form-group.is-error .pw-toggle-wrap > input:focus,
.form-group.is-success .pw-toggle-wrap > input,
.form-skin .form-group .pw-toggle-wrap > input:hover,
.form-skin .form-group .pw-toggle-wrap > input:focus,
.form-skin .form-group.is-error .pw-toggle-wrap > input,
.form-skin .form-group.is-success .pw-toggle-wrap > input {
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
}

.form-group .pw-toggle-wrap .pw-toggle-btn {
    position: static;
    top: auto;
    right: auto;
    transform: none;
    flex-shrink: 0;
    margin-left: 8px;
}

.form-group .pw-toggle-wrap:hover:not(:focus-within):not(:has(input:disabled)):not(:has(input:read-only)) {
    border-color: var(--formBorderHover);
}

.form-group .pw-toggle-wrap:focus-within {
    border-color: var(--primary);
}

.form-group.is-error .pw-toggle-wrap {
    border-color: var(--formError);
    background: var(--formErrorBg);
}

.form-group.is-error .pw-toggle-wrap:focus-within {
    border-color: var(--formError);
}

.form-group.is-success .pw-toggle-wrap {
    border-color: var(--formSuccess);
    background: var(--formSuccessBg);
}

.form-group .pw-toggle-wrap:has(input:disabled),
.form-group .pw-toggle-wrap:has(input:read-only) {
    background: var(--formDisabledBg);
    border-color: var(--formBorder);
}

.form-group .pw-toggle-wrap:has(input:disabled) {
    cursor: not-allowed;
}

/* 자동완성 파란 배경 — 인풋만 칠해지지 않게 셸 전체로 */
.form-group .pw-toggle-wrap input:-webkit-autofill,
.form-group .pw-toggle-wrap input:-webkit-autofill:hover,
.form-group .pw-toggle-wrap input:-webkit-autofill:focus,
.form-group .pw-toggle-wrap input:autofill {
    -webkit-text-fill-color: var(--txtBlack1);
    -webkit-box-shadow: 0 0 0 1000px transparent inset;
    box-shadow: 0 0 0 1000px transparent inset;
    background-color: transparent;
    transition: background-color 9999s ease-in-out 0s;
}

.form-group .pw-toggle-wrap:has(input:-webkit-autofill),
.form-group .pw-toggle-wrap:has(input:autofill) {
    background: #e8f0fe;
}

/* ============================================
   3. radio · check · privacy — 2112:281 / 282 / 283
   check-box 18 · radio 원형 + dot 6 · check r4
   ============================================ */
.form-group label.custom-checkbox,
.form-group label.custom-radio,
.custom-checkbox,
.custom-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--txt);
    line-height: var(--txtLine);
    font-weight: 500;
    margin-bottom: 0;
    cursor: pointer;
    position: relative;
}

.form-group label.custom-checkbox {
    display: flex;
}

.custom-checkbox input[type="checkbox"],
.custom-radio input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.checkbox-visual {
    width: var(--formCheckSize);
    height: var(--formCheckSize);
    min-width: var(--formCheckSize);
    border: var(--formCheckBorder) solid var(--txtBlack1);
    background: #fff;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background 0.2s ease;
}

/* check-box — r4 */
.checkbox-visual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.checkbox-visual svg {
    display: block;
    width: var(--formCheckMark);
    height: var(--formCheckMark);
    fill: #fff;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.custom-checkbox input:checked + .checkbox-visual {
    background: var(--txtBlack1);
    border-color: var(--txtBlack1);
}

.custom-checkbox input:checked + .checkbox-visual svg {
    opacity: 1;
}

.custom-checkbox input:focus-visible + .checkbox-visual,
.custom-radio input:focus-visible + .radio-ico {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 50%;
}

.custom-checkbox input:disabled + .checkbox-visual {
    background: var(--formDisabledBg);
    border-color: var(--formBorder);
    cursor: not-allowed;
}

.custom-radio input:disabled + .radio-ico {
    color: var(--txtGray2);
    opacity: 0.55;
    cursor: not-allowed;
}

.custom-checkbox input:disabled:checked + .checkbox-visual {
    background: var(--txtGray2);
    border-color: var(--txtGray2);
}

.custom-checkbox input:disabled:checked + .checkbox-visual svg {
    opacity: 1;
}

.custom-checkbox:has(input:disabled),
.custom-radio:has(input:disabled) {
    cursor: not-allowed;
}

/* radio — SVG off(빈 원) / on(선택) · .ico 패턴 */
.radio-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    width: var(--formCheckSize);
    height: var(--formCheckSize);
    color: var(--txtBlack1);
}

.radio-ico svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.radio-ico .on {
    opacity: 0;
    visibility: hidden;
}

.radio-ico .off {
    opacity: 1;
    visibility: visible;
}

.custom-radio input:checked + .radio-ico .on {
    opacity: 1;
    visibility: visible;
}

.custom-radio input:checked + .radio-ico .off {
    opacity: 0;
    visibility: hidden;
}

.checkbox-label,
.radio-label {
    font-size: inherit;
    line-height: inherit;
    color: var(--txtBlack1);
}

.radio-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 0;
}

/* ============================================
   4. upload — 2112:394 file-box · upload-btn
   ============================================ */
.form-group input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px dashed var(--formBorder);
    border-radius: var(--formRadius);
    font-size: var(--txt);
    cursor: pointer;
    background: #fafafa;
    transition: border-color 0.2s ease;
}

.form-group input[type="file"]:hover {
    border-color: var(--primary);
}

.auth-btn-submit:disabled,
.btn:disabled {
    background: var(--formDisabledBg);
    color: var(--txtGray2);
    cursor: not-allowed;
}

.form-group--submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.form-group--submit .form-help {
    flex: 1 1 100%;
    margin-top: 0;
}

.form-submit-actions {
    margin-top: 20px;
}

/* ============================================
   5. 쇼케이스 · file-box
   ============================================ */
.form-fields-showcase {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}

.form-fields-states {
    max-width: 500px;
    width: 100%;
    margin: 40px auto 0;
    padding-top: 30px;
    border-top: 1px solid var(--formBorder);
}

.form-file-box,
.file-box {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.form-group .form-file-box__name {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    height: var(--formUploadH);
}

.form-file-box__btn,
.upload-btn {
    flex: 0 0 var(--formUploadBtnW);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--formUploadBtnW);
    min-width: var(--formUploadBtnW);
    height: var(--formUploadBtnH);
    min-height: var(--formUploadBtnH);
    padding: 0 10px;
    border: 1px solid var(--primary);
    border-radius: var(--formRadius);
    background: var(--primary);
    font-size: var(--txt);
    font-weight: 500;
    line-height: var(--txtLine);
    color: #fff;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.form-file-box__btn:hover,
.upload-btn:hover {
    border-color: var(--primaryLight);
    background: var(--primaryLight);
}

.form-file-box__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media screen and (max-width: 1240px) {
    .form-skin.form-skin--fields {
        --formInpH: 60px;
        --formInpH2: 56px;
    }
}

@media screen and (max-width: 768px) {
    .form-file-box,
    .file-box {
        flex-direction: column;
        align-items: stretch;
    }

    .form-file-box__btn,
    .upload-btn {
        flex-basis: auto;
        width: 100%;
        min-width: 0;
    }

    .form-fields-showcase,
    .form-fields-states {
        max-width: 100%;
    }

    .form-skin.form-skin--fields {
        --formInpH: max(4.8rem, 48px);
        --formInpH2: max(4.6rem, 46px);
        --formCheckSize: 2.2rem;
        --formCheckMark: 1.45rem;
    }
}