/* ============================================================
   self-web.css — V3 전환 효과 (디자인 변경 없음, 모션만 추가)
   - 페이지 진입 페이드인 / 이동 시 흰색 오버레이 페이드아웃
   - 모달 스무스 등장 (기존 .is-open 토글에 애니메이션만 부여)
   ============================================================ */

/* 페이지 진입: JS가 body에 클래스를 붙일 때만 동작 (JS 미동작 시 영향 없음) */
body.sw-page-in {
    animation: swPageIn .28s ease-out;
}
@keyframes swPageIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 페이지 이동 오버레이 (JS가 동적 생성) */
.sw-page-overlay {
    position: fixed;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
    z-index: 99999;
}
.sw-page-overlay.show {
    opacity: 1;
    pointer-events: all;
}

/* 모달 스무스 등장 — 퍼블리싱의 .is-open 토글 방식 그대로, 열릴 때 모션만
   (2026-07-15 사용자 피드백 "살살 나오게" — 지속시간·이동폭 강화) */
.modal-overlay {
    transition-duration: .3s; /* component.css의 .2s보다 부드럽게 */
}
.modal-wrap {
    transition: transform .36s cubic-bezier(0.16, 1, 0.3, 1), opacity .3s ease;
}
.modal-overlay.is-open {
    animation: swFadeIn .3s ease-out;
}
.modal-overlay.is-open .modal-wrap {
    animation: swModalUp .38s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes swFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes swModalUp {
    from { opacity: 0; transform: translateY(24px) scale(0.965); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── AJAX/페이지 로딩바 (2026-07-15) — self-web.js가 동적 생성 ── */
#sw-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #ef3739, #ff7a5c);
    box-shadow: 0 0 8px rgba(239, 55, 57, 0.45);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    pointer-events: none;
    z-index: 100000;
    transition: width .25s ease, opacity .3s ease;
}
#sw-loading-bar.show {
    opacity: 1;
}

/* 모바일 드로어도 동일한 감성 (기존 transition 유지되면 중복 무해) */
.mobile-drawer-overlay.is-open .mobile-drawer {
    animation: swDrawerIn .24s ease-out;
}
@keyframes swDrawerIn {
    from { transform: translateX(-16px); opacity: .6; }
    to   { transform: translateX(0); opacity: 1; }
}

/* 접근성: 모션 최소화 설정 시 비활성 */
@media (prefers-reduced-motion: reduce) {
    body.sw-page-in,
    .modal-overlay.is-open,
    .modal-overlay.is-open .modal-wrap,
    .mobile-drawer-overlay.is-open .mobile-drawer {
        animation: none;
    }
    .sw-page-overlay,
    #sw-loading-bar { transition: none; }
}

/* ── 문의 첨부 슬롯 보완 (2026-07-12): 이미지 미리보기 시 카메라 아이콘 숨김 + 일반 파일명 표시 ── */
.inquiry-upload-slot.is-filled .inquiry-camera,
.inquiry-upload-slot.is-filled .inquiry-camera::before,
.inquiry-upload-slot.is-filled .inquiry-camera::after {
    display: none;
    content: none;
}
.inquiry-upload-name {
    display: none;
    max-width: 100%;
    max-height: 100%;
    padding: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--black);
    text-align: center;
    word-break: break-all;
    overflow: hidden;
}
.inquiry-upload-slot.is-filled:not(.has-preview) .inquiry-upload-name {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

/* ── 내정보 이메일 행: 직접입력 칸 노출 시 찌그러지지 않게 줄바꿈 허용 (2026-07-12) ── */
.form-section-manager .manager-form__email,
.form-section-half .manager-form__email {
    flex-wrap: wrap;
    row-gap: 8px;
}

/* ── 공지 구분 뱃지 [AMZ044] (2026-07-12) ── */
.notice-type-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 12px;
    line-height: 1.6;
    white-space: nowrap;
    background: #f1f2f4;
    color: #555;
}
.notice-type-badge.notice-type-001 { background: #fdeaea; color: #ef3739; } /* 공지 */
.notice-type-badge.notice-type-002 { background: #e8f0fe; color: #2563eb; } /* 이벤트 */
.notice-type-badge.notice-type-003 { background: #f1f2f4; color: #555; }    /* 서비스 점검공지 */
.notice-type-badge.notice-type-004 { background: #e8f7ee; color: #16a34a; } /* 지원금 */

/* ── 내정보 이메일 직접입력: 별도 행 (2026-07-12 — 좁은 카드 폭 대응) ── */
/* margin-top 제거: 행 컨테이너 row-gap 8px와 중복돼 간격이 16px로 벌어지던 문제 (2026-08-18 피드백 M1-②) */
/* item.css `.myinfo-form .form-field .wrap-input{flex:1 1 0%}`(0,3,0)보다 우선하도록 동일 특이도 + 후순위 로드로 지정 */
.myinfo-email-custom,
.myinfo-form .form-field .myinfo-email-custom { flex: 0 0 100%; } /* shrink 금지 — 같은 줄로 끼어들지 않고 항상 별도 행 유지 */
.myinfo-form .myinfo-email-custom .form-control { width: 100% !important; } /* 별도 행 전체 폭 사용 — 인라인 227px 고정 해제 */

/* ── 내정보 이메일 "@" 미표시 보정 (2026-08-18 피드백 M1-①) ──
   로컬파트 input의 인라인 width:227px가 플렉스 축소된 래퍼(.manager-form__email-input, ~181px)를
   넘쳐 "@"와 도메인 셀렉트를 덮어 가리던 문제. 퍼블리싱 모바일 규칙(item.css 3266행
   `.myinfo-form .manager-form__email-input .form-control { width:100% !important }`)과 동일 방식으로
   데스크톱에서도 래퍼 폭에 맞춰 pub 의도 레이아웃([입력] @ [셀렉트])대로 "@"가 보이게 함 */
.myinfo-form .manager-form__email-input .form-control { width: 100% !important; }

/* ── 캠페인 등록 "+구매평" 선택 상태 표시 (2026-07-12 — is-active 스타일 누락 보완) ── */
.cch-add-btn.is-active {
    background: rgba(239, 55, 57, 0.8);
    border-color: rgba(239, 55, 57, 0.8);
    color: #fff;
}
.cch-add-btn.is-active .ico {
    filter: brightness(0) invert(1);
}

/* ── GNB [신규 캠페인 등록] 비활성 (피드백 E1, 2026-08-18 — 승인 업체 없을 때) ── */
.gnb-txt.is-disabled {
    opacity: 0.4;
    cursor: default;
}

/* ── 회원가입 인증완료 검정 버튼 (피드백 J3, 2026-08-18) ──
   인증 완료 시 disabled(회색+금지커서) 대신 pub component.css의 btn-black 클래스를 사용.
   tertiary hover 규칙(.btn-comm.tertiary:hover:not(:disabled), 0-4-0)이 검정 배경을 덮지 않도록
   pub의 .btn-comm.secondary.btn-black:not(:disabled):hover 패턴을 tertiary에 준용 */
.btn-comm.tertiary.btn-black { background-color: var(--black); color: var(--white); border-color: var(--black); }
.btn-comm.tertiary.btn-black:not(:disabled):hover { background-color: var(--black); color: var(--white); border-color: var(--black); opacity: 0.8; }

/* ── 재검수 p3 (20260819): 프로필 미업로드 기본 아바타 ──
   기본값이 test_img.png(샘플 사진)이던 것을 사람 외곽선 아이콘(ico_profile.svg)으로 교체 (app.ts profileImgUrl 폴백).
   외곽선 아이콘(63×56, 투명배경)이 원형 아바타 안에서 어색하지 않도록 내정보 프로필 영역(시안)과 동일하게
   회색(#E6E6E6) 원형 배경 + 축소 중앙 배치 (pub 대응 없음 — pub 환영카드는 데모 이미지 고정) */
.user-avatar img[src^="/img/ico_profile"] {
    position: static;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    object-fit: contain;
    padding: 15% 12%;
    background: #E6E6E6;
}

/* ── 내정보 프로필 실사진 원형 클립 (2026-10-11) ──
   .profile-image(82px 원형)에 overflow/맞춤 규칙이 없어 업로드 실사진이 네모로 삐져나오던 문제.
   기본 아이콘(ico_profile)은 기존 중앙 배치 유지, 실사진만 cover+원형 (pub 데모는 아이콘 고정이라 미노출 — pub 대응 없음) */
.myinfo-profile .profile-image {
    overflow: hidden;
}
.myinfo-profile .profile-image img:not([src^="/img/ico_profile"]) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ── 재검수 p13 (20260819): 업체 빈 목록 안내 문구 ──
   피그마 내 업체목록_260416 (노드 2726:98610) — 타이틀 ↓8px → 문구(16px/400) ↓24px → [내 업체 추가] 카드
   (pub 대응 없음 — pub storeList엔 빈 상태 마크업 없음) */
.store-list:has(.store-list__empty) .store-list__tit { margin-bottom: 8px; }
.store-list__empty { margin-bottom: 24px; color: var(--black); font-size: 16px; font-weight: 400; line-height: 1.45; letter-spacing: -0.4px; }
.store-list:has(.store-list__empty) .store-item__btn.store-add { margin-top: 0; }

/* ── 재검수 p29 (20260819): 충전 세금계산서 이메일 직접입력 겹침 ──
   .biz-tax .manager-form__email(item.css)이 줄바꿈 없는 flex라 별도 행(.myinfo-email-custom, flex-basis 100%)
   노출 시 항목들이 수축·겹침(셀렉트가 입력칸 위로 올라탐). 내정보(C-4)와 동일하게 줄바꿈 허용
   (pub 대응 없음 — pub bizCharge엔 직접입력 마크업 없음) */
.biz-tax .manager-form__email { flex-wrap: wrap; row-gap: 8px; }

/* ── 피드백 E5 (2026-08-18): 키워드 텍스트칩 입력 (keyword-chips.js) ──
   피그마 "inputbox/내업체추가 키워드": 입력박스 안 칩 + 콤마 + 커서. 칩/구분자 스타일은 pub item.css(.ckeyword-tag/.ckeyword-sep) 그대로 사용 */
.wrap-input--keyword .ckeyword-entry { flex: 1 1 80px; min-width: 80px; height: 24px; border: 0; outline: none; background: transparent; padding: 0; font-family: inherit; font-size: 14px; color: var(--black); letter-spacing: -0.35px; }
.wrap-input--keyword .ckeyword-entry::placeholder { color: var(--info); }
.wrap-input--keyword .ckeyword-tag { cursor: pointer; }

/* ── 3차 피드백 (2026-10-11): 환영카드/모바일 드로어 아바타 클릭 업로드 어포던스 ──
   아바타 클릭 → 프로필 이미지 변경 (self-web.js) — pub 마크업 변경 없이 커서만 부여 */
.user-chip .user-avatar,
.mobile-drawer__profile .user-avatar { cursor: pointer; }

/* ── 3차 피드백 s34 (2026-10-11): 플랜구독 유도 버튼 ──
   FREE 플랜 사용자에게만 노출(userPlan.DCD==='AMZ060.001'). PC 환영카드: 흰색 버튼 상시 + HOVER 시 검정.
   모바일: 상단바(mobile-gnb) 우측에 검정 버튼 상시 — 기존 광고상품 바로가기 대체(s34 "기존 광고 상품 삭제").
   시안: 90_dev_handoff > compon PC 228:23770 — 피그마 API 쿼터 소진으로 s34 슬라이드 캡처 실측 기반.
   pub 대응: pub/res/css/item.css 동일 블록(대표 반영: storeList.html·campaign.html·header.html) */
.plan-subscribe-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 999px; border: 1px solid #E5E5EC; background: var(--white); color: var(--black); font-size: 13px; font-weight: 500; letter-spacing: -0.325px; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .3s, color .3s, border-color .3s; flex-shrink: 0; }
.plan-subscribe-btn:hover { background: #111; border-color: #111; color: var(--white); }
.plan-subscribe-btn .ico-plan-diamond { width: 16px; height: 16px; }
.ico-plan-diamond { display: inline-block; flex-shrink: 0; background: url(../img/ico_plan_diamond.svg) no-repeat center / contain; }
.mobile-gnb__plan { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px; border: 0; background: #111; color: var(--white); font-size: 12px; font-weight: 500; letter-spacing: -0.3px; line-height: 1; white-space: nowrap; cursor: pointer; }
.mobile-gnb__plan .ico-plan-diamond { width: 14px; height: 14px; }

/* s34 보완 — component_pc 변경분 (2026-10-11): FREE 플랜구독 버튼 위 순환 말풍선.
   문구 6종(무제한 캠페인 운영이 가능한 + 보라 칩 5종)을 한 개씩 4초 간격 페이드 순환 — 사용자 지시 해석.
   ⚠ 피그마 쿼터 소진으로 component_pc 원본 미실측 — 리셋 후 색/크기/아이콘 대조 필요 */
.plan-subscribe-btn { position: relative; }
/* 피그마 tooltip_플랜구독 실측 (2026-10-11): 높이 39(꼬리 포함)·bg #F5F2FF·border 1px #DCD4FF·텍스트 PC/Caption C2 12px 500 #5F52B8·아이콘 24px */
.plan-subscribe-tip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; height: 33px; padding: 0 12px 0 8px; border-radius: 10px; background: #F5F2FF; border: 1px solid #DCD4FF; color: #5F52B8; font-size: 12px; font-weight: 500; letter-spacing: -0.3px; white-space: nowrap; pointer-events: none; opacity: 1; transition: opacity .25s ease; z-index: 3; }
.plan-subscribe-tip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #F5F2FF; }
.plan-subscribe-tip::before { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: #DCD4FF; } /* 꼬리 보더 */
.plan-subscribe-tip.is-fading { opacity: 0; }
.plan-subscribe-tip .tip-ico { width: 24px; height: 24px; flex-shrink: 0; }

/* ── 3차 피드백 s19 (2026-10-12): 위저드 "임시 저장 완료" 전용 모달 ──
   피그마 「임시저장 완료 모달_260323」(303:27038) 실측: 폭 520·radius 16·상단패딩 48·하단 32,
   제목 20px 600 + 녹색 체크 20px(#43A047) / 본문 15px 500 ↓18 / 서브 13px #A7A7A7 ↓12 /
   [확인] 102×36 #F25F61 radius 8 ↓31 / X 24px 우23·상29. 모바일(Popup_maxwidth_332) max-width 332.
   마크업은 self-web.js showTempSaveDone()이 동적 생성(1회). pub 대응: campaignAdd01/02.html 정적 반영 */
.tempsave-done-modal .modal-wrap {
    position: relative;
    width: 520px;
    border-radius: 16px;
    padding: 48px 32px 32px;
    gap: 0;
    text-align: center;
}
.tempsave-done__close {
    position: absolute;
    top: 29px;
    right: 23px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tempsave-done__close:hover { opacity: 0.6; }
.tempsave-done__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 20px;
    font-weight: 600;
    color: #111;
    letter-spacing: -0.5px;
    line-height: 1.4;
}
.ico-check-circle-green { background-image: url('../img/ico_check_circle_green.svg'); }
.tempsave-done__message {
    margin: 18px 0 0;
    font-size: 15px;
    font-weight: 500;
    color: #111;
    letter-spacing: -0.375px;
    line-height: 1.4;
}
.tempsave-done__sub {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 400;
    color: #A7A7A7;
    letter-spacing: -0.325px;
    line-height: 1.4;
}
.tempsave-done__confirm {
    margin: 31px auto 0;
    width: 102px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: #F25F61;
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    letter-spacing: -0.35px;
    cursor: pointer;
    transition: background 0.15s;
}
.tempsave-done__confirm:hover { background: var(--main); }
@media screen and (max-width: 768px) {
    .tempsave-done-modal .modal-wrap {
        width: calc(100% - 28px);
        max-width: 332px;
        padding: 48px 20px 32px;
    }
}

/* ── 내정보 비밀번호 변경 섹션 (2026-10-15 사용자 지시 — 시안 없음, 계정 정보 섹션 스타일 재사용) ──
   라벨 폭: 가장 긴 "새 비밀번호 확인" 기준 정렬 (form-section-manager의 min-width 패턴 준용).
   버튼 행은 빈 라벨로 입력 시작선에 맞춤 */
.form-section-passwd .form-label { min-width: 110px; }

/* ── 플랜 선택 모달 (4차 피드백 s12, 2026-10-25) ──
   시안: 피그마 「PLAN 업그레이드 유도 포인트 팝업_260928」(3255:104594) — API 쿼터로 PPT 캡처(image21) 실측.
   마크업은 self-web.js buildPlanSelectModal()이 동적 생성 */
.plan-select-modal .modal-wrap {
    position: relative;
    display: block;
    width: 1060px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    padding: 40px 60px 56px;
    border-radius: 14px;
}
.plan-select__close {
    position: absolute;
    right: 28px;
    top: 28px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
}
.plan-select__eyebrow {
    color: var(--main);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.plan-select__title {
    margin-top: 10px;
    color: var(--black);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.7px;
}
.plan-select__desc {
    margin-top: 10px;
    color: var(--info);
    font-size: 15px;
    letter-spacing: -0.375px;
}
.plan-select__cards {
    display: flex;
    align-items: flex-start;
    gap: 36px;
    margin-top: 36px;
}
.plan-card {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--line-gray);
    border-radius: 10px;
    background: var(--white);
    padding: 36px 28px 28px;
    text-align: center;
}
.plan-card--plus { border-color: var(--main); }
.plan-card__name {
    color: var(--sub);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.plan-card--plus .plan-card__name { color: var(--main); }
.plan-card__tagline {
    margin-top: 12px;
    color: var(--black);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.35px;
}
.plan-card__tagline strong { font-weight: 700; }
.plan-card__divider {
    height: 1px;
    background: var(--regular);
    margin: 22px 0;
}
.plan-card__price {
    color: var(--black);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.7px;
}
.plan-card__price--plus { color: var(--main); font-size: 24px; }
.plan-card__price--plus strong { font-size: 32px; font-weight: 800; }
.plan-card__price-origin {
    color: var(--disabled);
    font-size: 14px;
    text-decoration: line-through;
    margin-bottom: 8px;
}
.plan-card__price-sub {
    margin-top: 8px;
    color: var(--info);
    font-size: 13px;
    letter-spacing: -0.325px;
}
.plan-card__list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}
.plan-card__list li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--black);
    font-size: 14px;
    letter-spacing: -0.35px;
}
.plan-card__check {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Ccircle cx='9' cy='9' r='8.25' stroke='%23F58283' stroke-width='1.5'/%3E%3Cpath d='M5.5 9.2l2.3 2.3 4.7-4.7' stroke='%23F58283' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.plan-card__btn {
    width: 100%;
    height: 48px;
    margin-top: 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.375px;
    cursor: pointer;
    transition: opacity 0.15s, background 0.15s;
}
.plan-card__btn.is-current {
    background: var(--white);
    border: 1px solid var(--line-gray);
    color: var(--disabled);
    cursor: default;
}
.plan-card__btn--primary {
    background: var(--main);
    border: 1px solid var(--main);
    color: var(--white);
    font-weight: 700;
}
.plan-card__btn--primary:hover { background: var(--strong-hover); border-color: var(--strong-hover); }
.plan-card__btn--outline {
    background: var(--white);
    border: 1px solid var(--main);
    color: var(--main);
    font-weight: 500;
}
.plan-card__btn--outline:hover { background: var(--bg-lightRed); }
.plan-card__btn--outline .arr { margin-left: 2px; }
@media screen and (max-width: 768px) {
    .plan-select-modal { align-items: flex-end; }
    .plan-select-modal .modal-wrap {
        width: 100%;
        max-width: none;
        max-height: 86vh;
        border-radius: 14px 14px 0 0;
        padding: 32px 20px 40px;
    }
    .plan-select__title { font-size: 22px; }
    .plan-select__desc { font-size: 13px; }
    .plan-select__cards { flex-direction: column; gap: 16px; margin-top: 24px; }
    .plan-card { width: 100%; padding: 28px 20px 24px; }
}

/* ── 비밀번호 찾기/재설정 (2026-10-25 4차 s3 — 피그마 "10/20 비밀번호 찾기" 섹션 실측) ──
   레이아웃은 회원가입(signup-page/topbar) 재사용, 카드 이하는 전용 클래스(pwfind-*).
   PC: 카드 555px·패딩 16/48/32, 인풋 56px r10 #e5e5ec / MO(≤768): 카드 패딩 32/26, 인풋 48px */

/* 상단 바 — 회원가입(40px)보다 작은 32px 타이틀, 뒤로가기는 카드 좌측선(555/2=277px) 정렬 */
.pwfind-topbar { margin-bottom: 32px; }
.pwfind-topbar__back { left: calc(50% - 277px); }
.pwfind-topbar__title { font-size: 32px; letter-spacing: -.8px; }

/* 카드 */
.pwfind-card {
    width: 555px; max-width: 100%; box-sizing: border-box;
    padding: 16px 48px 32px;
    background: #fff; border-radius: 14px;
    box-shadow: 6px 6px 54px 0 rgba(0, 0, 0, .05);
    align-self: flex-start;
}
.pwfind-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; margin-bottom: 24px; }
.pwfind-head__img { width: 120px; height: 120px; object-fit: contain; }
.pwfind-head__title { color: #111; font-size: 24px; font-weight: 500; line-height: 34px; letter-spacing: -.6px; }
.pwfind-head__desc { color: #505050; font-size: 16px; font-weight: 400; line-height: 22px; letter-spacing: -.4px; }

/* 입력 */
.pwfind-fields { display: flex; flex-direction: column; gap: 16px; }
.pwfind-fields--reset { gap: 24px; }
.pwfind-field { display: flex; flex-direction: column; }
.pwfind-label { color: #111; font-size: 16px; font-weight: 500; line-height: 22px; letter-spacing: -.4px; margin-bottom: 12px; }
.pwfind-input {
    width: 100%; height: 56px; box-sizing: border-box;
    padding: 8px 16px;
    border: 1px solid #e5e5ec; border-radius: 10px; background: #fff;
    color: #111; font-size: 16px; font-weight: 400; letter-spacing: -.4px;
    outline: none; transition: border-color .15s;
}
.pwfind-input::placeholder { color: #767676; }
.pwfind-input:focus { border-color: #111; }
.pwfind-input--error { border-color: #d32f2f; }
.pwfind-input-wrap { position: relative; }
.pwfind-input-wrap .pwfind-input { padding-right: 48px; }
.pwfind-eye {
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.ico-eye-gray { background-image: url('../img/ico_eye_gray.svg'); }
.ico-eye-off-gray { background-image: url('../img/ico_eye_off_gray.svg'); }
.pwfind-helper { margin-top: 4px; color: #505050; font-size: 13px; font-weight: 400; line-height: 19px; letter-spacing: -.325px; }
.pwfind-helper--error { color: #d32f2f; }
.pwfind-error { margin-top: 4px; color: #d32f2f; font-size: 13px; font-weight: 400; line-height: 19px; letter-spacing: -.325px; }

/* 액션 */
.pwfind-actions { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.pwfind-actions--reset { margin-top: 40px; }
.pwfind-submit {
    width: 100%; height: 56px; border: 0; border-radius: 10px; cursor: pointer;
    background: #ef3739; color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -.4px; font-family: inherit;
    transition: background .15s;
}
.pwfind-submit:hover { background: #d92f31; }
.pwfind-submit:disabled { opacity: .6; cursor: default; }
.pwfind-inquiry { text-align: center; color: #767676; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -.35px; }
.pwfind-inquiry__link { color: #ef3739; text-decoration: underline; text-underline-offset: 2px; }
.pwfind-divider { width: 100%; height: 1px; background: #f1f1f5; }
.pwfind-backlogin { display: block; padding: 8px 24px; text-align: center; color: #767676; font-size: 16px; font-weight: 400; line-height: 22px; letter-spacing: -.4px; }
.pwfind-backlogin:hover { color: #111; }

/* 이메일 발송 안내 모달 (Popup_480) */
.pwfind-sent-modal .modal-wrap { width: 480px; padding-bottom: 40px; }
.pwfind-sent-modal .modal-header.pwfind-sent-header { height: 48px; padding-top: 0; }
.pwfind-sent-modal .modal-close { right: 20px; top: 16px; }
.pwfind-sent-modal .modal-body { align-items: center; }
.pwfind-sent__img { width: 104px; height: 104px; object-fit: contain; margin-bottom: 8px; }
.pwfind-sent__title { color: #111; font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -.5px; margin: 0; }
.pwfind-sent__desc { color: #505050; font-size: 16px; font-weight: 400; line-height: 22px; letter-spacing: -.4px; margin: 0; }
.pwfind-sent__footer { padding-top: 16px; }
.pwfind-sent__confirm { width: 100%; height: 56px; min-height: 56px; border-radius: 10px; font-size: 16px; font-weight: 600; }
.pwfind-sent__info {
    margin: 16px 0 0; display: flex; justify-content: center; align-items: flex-start; gap: 4px;
    color: #767676; font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -.35px; text-align: center;
}
.pwfind-sent__info .ico { margin-top: 2px; filter: var(--filter-disabled); }

/* 비밀번호 변경 완료 모달 (Popup_520 — 가입 완료 모달 구조 재사용) */
.pwreset-done-modal .modal-title-text { font-size: 20px; letter-spacing: -.5px; }
.pwreset-done__desc { color: #505050; font-size: 16px; font-weight: 400; line-height: 22px; letter-spacing: -.4px; margin: 0; }
.pwreset-done-modal .modal-footer { padding-top: 12px; }
.pwreset-done__btn { width: 280px; height: 48px; min-height: 48px; font-size: 15px; border-radius: 8px; }

/* 반응형 (모바일 이하 — 피그마 _MO_261019/16) */
@media (max-width: 768px) {
    .pwfind-topbar { margin-bottom: 0; }
    .pwfind-topbar__back { left: 16px; } /* PC 카드선 정렬(calc)이 item.css MO 규칙(left:16px)을 덮지 않게 재지정 */
    .pwfind-topbar__title { font-size: 18px; letter-spacing: -.45px; }
    .pwfind-card { width: 100%; padding: 32px 26px; align-self: stretch; }
    .pwfind-head { gap: 8px; margin-bottom: 16px; }
    .pwfind-head__img { width: 104px; height: 104px; }
    .pwfind-head__title { font-size: 16px; line-height: 22px; letter-spacing: -.4px; }
    .pwfind-head__desc { font-size: 14px; line-height: 20px; letter-spacing: -.35px; }
    .pwfind-fields, .pwfind-fields--reset { gap: 16px; }
    .pwfind-label { font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -.35px; margin-bottom: 4px; }
    .pwfind-input { height: 48px; padding: 8px 12px; font-size: 13px; letter-spacing: -.325px; }
    .pwfind-input-wrap .pwfind-input { padding-right: 40px; }
    .pwfind-eye { right: 12px; width: 20px; height: 20px; }
    .pwfind-eye .ico { width: 16px; height: 16px; }
    .pwfind-helper, .pwfind-error { font-size: 12px; line-height: 17px; letter-spacing: -.3px; }
    .pwfind-actions { margin-top: 24px; }
    .pwfind-actions--reset { margin-top: 32px; }
    .pwfind-submit { height: 48px; font-size: 15px; font-weight: 500; }
    .pwfind-inquiry { font-size: 13px; line-height: 19px; }
    .pwfind-backlogin { font-size: 14px; line-height: 20px; padding: 14px 24px; }

    .pwfind-sent-modal .modal-wrap { max-width: 332px; border-radius: 20px; padding-bottom: 32px; }
    .pwfind-sent-modal .modal-close { right: 16px; top: 16px; }
    .pwfind-sent__title { font-size: 16px; font-weight: 600; line-height: 22px; }
    .pwfind-sent__desc { font-size: 14px; line-height: 20px; }
    .pwfind-sent__confirm { height: 48px; min-height: 48px; border-radius: 8px; font-size: 15px; font-weight: 400; }
    .pwfind-sent__info { font-size: 13px; line-height: 19px; color: #505050; }

    .pwreset-done-modal .modal-wrap { max-width: 332px; border-radius: 20px; }
    .pwreset-done-modal .modal-title-text { font-size: 16px; font-weight: 600; }
    .pwreset-done__desc { font-size: 14px; line-height: 20px; }
    .pwreset-done__btn { width: 100%; height: 48px; }
}