/* =====================================================================
   사용자 사이트 회원 영역 보조 CSS (shop-skin-sf2.css) — 앱 소유
   대상: S-11 ~ S-21 (로그인·비회원 주문조회, 회원가입 3단계, 아이디/비밀번호 찾기,
         SNS 계정 연동, 회원정보 수정, 회원 탈퇴)
   읽는 순서: ../vendor/css/* → assets/shop-skin.css → 이 파일 (회원 화면에서만)
   규칙(README 3장): comp-* 표준 클래스·변수 그대로. 표준·shop-skin.css 에 없는
         카페24 회원 화면 고유 모양만 comp-sf- 접두 보조 클래스로 둔다.
   Thymeleaf 전환 시 /static/css/shop-skin-sf2.css 로 두고 회원 화면 레이아웃에서만 읽는다.
   ===================================================================== */

/* ---------- 회원 화면 본문 ---------- */
.comp-sf-mb { padding: 20px 16px 28px; }
.comp-sf-body .comp-sf-mb-tit { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.comp-sf-body .comp-sf-mb-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.5; }
.comp-sf-mb .comp-input.comp-sf-full + .comp-input.comp-sf-full,
.comp-sf-mb .comp-input.comp-sf-full + .comp-sf-ipt-row { margin-top: 6px; }
.comp-sf-mb .comp-btn.large { height: 50px; font-size: 15px; }
.comp-sf-mb .comp-input:read-only:not(select) { background: var(--color-gray-50); }

/* 두 버튼 줄 ([취소] [■ 다음 ■]) — 표준 action-bar 를 사용자 사이트 폭으로 */
.comp-sf-mb .action-bar, .comp-modal .action-bar.comp-sf-btns {
  display: flex; gap: 6px; margin-top: 20px; padding: 0; border: 0; background: none; justify-content: stretch;
}
.comp-sf-mb .action-bar .comp-btn { flex: 1; height: 50px; font-size: 15px; }
.comp-sf-mb .action-bar .comp-btn.primary { flex: 1.4; }

/* ---------- 가입 진행 표시 ① 약관동의 ─ ② 정보입력 ─ ③ 가입완료 ---------- */
.comp-sf-step { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--color-gray-200); font-size: 12px; color: var(--text-secondary); }
.comp-sf-step li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; text-align: center; }
.comp-sf-step li + li::before { content: ""; position: absolute; top: 11px; right: 50%; width: 100%; border-top: 1px solid var(--color-gray-300); z-index: 0; }
.comp-sf-step li span { position: relative; z-index: 1; width: 23px; height: 23px; border-radius: 50%; border: 1px solid var(--color-gray-300); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.comp-sf-step li.active { color: var(--text-primary); font-weight: 700; }
.comp-sf-step li.active span { background: var(--color-primary-500); border-color: var(--color-primary-500); color: #fff; }
.comp-sf-step li.done span { border-color: var(--color-primary-500); color: var(--color-primary-500); }

/* ---------- 로그인 (S-11) ---------- */
.comp-sf-login-opt { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 14px; font-size: 13px; }
.comp-sf-secure { color: var(--text-secondary); font-size: 12px; }
.comp-sf-login-links { display: flex; justify-content: center; margin-top: 16px; font-size: 13px; }
.comp-sf-login-links a { padding: 0 12px; color: var(--text-secondary); }
.comp-sf-login-links a + a { border-left: 1px solid var(--color-gray-300); }
.comp-sf-body .comp-sf-sns-tit { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; font-size: 12px; color: var(--text-secondary); }
.comp-sf-sns-tit::before, .comp-sf-sns-tit::after { content: ""; flex: 1; border-top: 1px solid var(--color-gray-200); }
.comp-sf-body .comp-btn.comp-sf-sns { width: 100%; height: 46px; margin-top: 6px; border: 0; font-weight: 700; gap: 8px; }
.comp-sf-body .comp-btn.comp-sf-sns.comp-sf-kakao { background: #fee500; color: #191919; }
.comp-sf-body .comp-btn.comp-sf-sns.comp-sf-naver { background: #03c75a; color: #fff; }
.comp-sf-sns .comp-sf-sns-ico { font-weight: 900; }
.comp-sf-guest-buy { margin-top: 24px; padding: 16px; background: var(--color-gray-50); text-align: center; font-size: 13px; }
.comp-sf-guest-buy .comp-btn { margin-top: 10px; width: 100%; height: 46px; }
.comp-sf-captcha { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.comp-sf-captcha .comp-sf-captcha-img { flex: 0 0 110px; height: 38px; background: repeating-linear-gradient(45deg, #eee, #eee 4px, #ddd 4px, #ddd 8px); display: flex; align-items: center; justify-content: center; font: italic 700 18px/1 serif; letter-spacing: 3px; color: #555; }

/* ---------- 약관동의 (S-12) ---------- */
.comp-sf-agree-top { padding: 14px; border: 1px solid var(--color-gray-300); font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.comp-sf-agree-sec { padding: 14px 0; border-bottom: 1px solid var(--color-gray-200); }
.comp-sf-agree-sec .comp-sf-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.comp-sf-agree-sec .comp-sf-hd .comp-btn { flex: 0 0 auto; }
.comp-sf-terms-box { margin-top: 8px; height: 96px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--color-gray-200); background: var(--color-gray-50); font-size: 12px; line-height: 1.6; color: var(--text-secondary); white-space: pre-line; }
.comp-sf-agree-sub { display: flex; gap: 16px; margin: 8px 0 0 26px; font-size: 13px; }
.comp-sf-agree-sec .comp-helper-text { margin-left: 26px; }
.comp-sf-terms-full { white-space: pre-line; font-size: 13px; line-height: 1.7; max-height: 60vh; overflow-y: auto; }

/* ---------- 정보입력 (S-13) / 회원정보 수정 (S-20) ---------- */
.comp-sf-req-note { font-size: 12px; color: var(--text-secondary); font-weight: 400; }
.comp-sf-auth-btns { display: flex; gap: 6px; }
.comp-sf-auth-btns .comp-btn { flex: 1; height: 44px; }
.comp-sf-auth-done { margin-top: 8px; padding: 10px 12px; background: var(--color-gray-50); font-size: 13px; font-weight: 700; }
.comp-sf-auth-done::before { content: "✓ "; color: var(--color-success, #1a8f3c); }
.comp-sf-body .comp-helper-text.comp-sf-ok { color: var(--color-success, #1a8f3c); }
.comp-sf-tip-wrap { position: relative; display: inline-block; }
.comp-sf-tip-btn { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--color-gray-300); background: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.comp-sf-tip { position: absolute; z-index: 20; top: 26px; right: -10px; width: 240px; padding: 10px 12px; background: #fff; border: 1px solid var(--color-gray-300); box-shadow: 0 2px 8px rgba(0,0,0,.12); font-size: 12px; line-height: 1.6; font-weight: 400; color: var(--text-primary); }
.comp-sf-tip li::before { content: "· "; }
.comp-sf-pw-row { display: flex; align-items: center; gap: 6px; }
.comp-sf-pw-row .comp-input { flex: 1; }
.comp-sf-ro { display: inline-block; padding: 8px 0; font-size: 14px; }
.comp-sf-ro small { color: var(--text-secondary); font-size: 12px; margin-left: 4px; }
.comp-sf-notice-box { padding: 12px 14px; background: var(--color-gray-50); border: 1px solid var(--color-gray-200); font-size: 13px; line-height: 1.6; }
.comp-sf-notice-box + .comp-sf-notice-box { margin-top: 8px; }
.comp-sf-notice-box.comp-sf-warn { border-color: #f0c2c2; background: #fff6f6; color: var(--color-error); }
.comp-sf-notice-box .comp-btn { margin-top: 8px; }
.comp-sf-agree-row { padding: 10px 0; border-bottom: 1px solid var(--color-gray-200); font-size: 13px; }
.comp-sf-agree-row .comp-sf-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.comp-sf-body .comp-sf-agree-row .comp-sf-sum { margin: 4px 0 0 26px; font-size: 12px; color: var(--text-secondary); }
.comp-sf-body .comp-sf-withdraw-link { text-align: right; margin-top: 12px; }
.comp-sf-withdraw-link a { font-size: 13px; color: var(--text-secondary); text-decoration: underline; }

/* ---------- 결과 화면 (S-14 / S-16 / S-18-B) ---------- */
.comp-sf-result { text-align: center; padding: 26px 0 8px; }
.comp-sf-result .comp-sf-result-ico { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; border: 2px solid var(--color-primary-500); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.comp-sf-body .comp-sf-result h2 { font-size: 18px; font-weight: 700; }
.comp-sf-body .comp-sf-result p { margin-top: 6px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.comp-sf-result-tbl { margin-top: 18px; border-top: 2px solid var(--color-primary-500); }
.comp-sf-body .comp-sf-result-tbl.form-table th, .comp-sf-body .comp-sf-result-tbl.form-table td { padding: 12px 6px; border-bottom: 1px solid var(--color-gray-200); font-size: 13px; text-align: left; }
.comp-sf-body .comp-sf-result-tbl.form-table th { width: 92px; color: var(--text-secondary); }
.comp-sf-id-list { margin-top: 18px; border-top: 2px solid var(--color-primary-500); }
.comp-sf-id-list li { border-bottom: 1px solid var(--color-gray-200); }
.comp-sf-id-list label.comp-radio { display: flex; width: 100%; align-items: center; gap: 8px; padding: 14px 6px; font-size: 14px; }
.comp-sf-id-list .comp-sf-id { font-weight: 700; flex: 1; }
.comp-sf-id-list .comp-sf-date { font-size: 12px; color: var(--text-secondary); }
.comp-sf-id-list .badge { margin-left: 4px; }

/* ---------- 인증번호 (S-18) ---------- */
.comp-sf-code-row { display: flex; gap: 6px; align-items: center; }
.comp-sf-code-row .comp-input { flex: 1; }
.comp-sf-timer { min-width: 42px; font-size: 13px; font-weight: 700; color: var(--color-error); text-align: center; }

/* ---------- 법정대리인 동의 (S-13-P3) ---------- */
.comp-sf-gd-step { margin-top: 14px; }
.comp-sf-body .comp-sf-gd-step h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.comp-sf-gd-radios { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }

/* ---------- 우편번호 검색 레이어 (S-07-P2 같은 형태) ---------- */
.comp-sf-zip-list li { padding: 10px 0; border-bottom: 1px solid var(--color-gray-200); font-size: 13px; cursor: pointer; }
.comp-sf-zip-list li b { display: inline-block; min-width: 48px; }
.comp-sf-zip-list li:hover { background: var(--color-gray-50); }