/* ==========================================================================
   TTBOX — 회원가입 폼 (signup / influencerMember / personalMember / memberUpgrade)
   기존 signup.css 를 "완전 대체"한다. 이 파일을 쓰는 뷰는 signup.css 를 로드하지 않는다.
   (signup.css 는 mallSignForm / *SignupModi / productSelect 가 아직 사용 중이므로 남겨둔다)

   JS 계약(public/js/signup.js) — 아래는 반드시 유지:
     .popup-wrap / .popup-wrap.active / body.noscroll
     .exit-box / .next-profile-btn / .next-login-btn
     .phone-cert-box (JS 가 display:flex|none 을 인라인으로 직접 지정)
     .phone-send-btn / .phone-cert-btn / #bankVerifyBtn.verified
     #birthdate-box / #openDate-box (jQuery show/hide → 초기 인라인 display:none)
     #checkbox-id / #checkbox-id2 / #checkbox-id3
   ========================================================================== */

.tsf{
  --f-ink:#0f1626;
  --f-ink-2:#395a4c;
  --f-muted:#767f92;
  --f-line:#e6eaf2;
  --f-line-2:#e6f1ec;
  --f-blue:#006b4f;
  --f-blue-d:#00563f;
  --f-blue-soft:#eff8f4;
  --f-bg:#f5f7fb;
  --f-red:#e5484d;
  --f-radius:20px;
  --f-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 30px rgba(16,24,40,.06);

  display:block;
  width:100%;
  background:var(--f-bg);
  padding:0 0 96px;
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Noto Sans KR',sans-serif;
  color:var(--f-ink);
  -webkit-font-smoothing:antialiased;
}

body.noscroll{ overflow:hidden; }

/* ==========================================================================
   1. 히어로 밴드
   ========================================================================== */
.tsf-hero{
  background:linear-gradient(180deg,#fff 0%, #fbfcfe 100%);
  border-bottom:1px solid var(--f-line);
}
.tsf-hero__inner{
  max-width:1080px; margin:0 auto; padding:56px 24px 44px;
  text-align:center;
}
.tsf-eyebrow{
  display:inline-block;
  font-size:11.5px; font-weight:800; letter-spacing:.16em;
  color:var(--f-blue); margin-bottom:12px;
}
.tsf-hero h1{
  font-size:34px; font-weight:800; letter-spacing:-.045em; line-height:1.22;
  color:var(--f-ink); margin:0 0 10px; word-break:keep-all;
}
.tsf-hero__lead{
  font-size:14.5px; line-height:1.7; color:var(--f-muted);
  margin:0; word-break:keep-all;
}
.tsf-chips{
  list-style:none; padding:0;
  margin:22px 0 0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
.tsf-chips li{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:999px;
  background:#fff; border:1px solid var(--f-line);
  font-size:12.5px; font-weight:600; letter-spacing:-.015em;
  color:var(--f-ink-2);
}
.tsf-chips li::before{
  content:''; width:14px; height:14px; flex-shrink:0;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230b5cff" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') no-repeat center/11px;
}

/* ==========================================================================
   2. 레이아웃 (좌 스티키 사이드 + 우 폼)
   ========================================================================== */
.tsf-inner{ max-width:1080px; margin:0 auto; padding:0 24px; }

.tsf-layout{
  display:grid;
  grid-template-columns:252px minmax(0,1fr);
  gap:28px;
  align-items:start;
  padding-top:36px;
}
.tsf-layout--solo{ grid-template-columns:minmax(0,1fr); max-width:660px; margin:0 auto; }

/* ── 사이드 ── */
.tsf-side{ position:sticky; top:20px; display:grid; gap:14px; }
.tsf-side__card{
  background:#fff; border:1px solid var(--f-line);
  border-radius:16px; padding:20px 18px;
  box-shadow:var(--f-shadow);
}
.tsf-side__tit{
  margin:0 0 14px; font-size:12px; font-weight:800;
  letter-spacing:.06em; color:var(--f-muted);
}
.tsf-steps{ list-style:none; padding:0; margin:0; display:grid; gap:2px; }
.tsf-steps a{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; border-radius:10px;
  font-size:13.5px; font-weight:600; letter-spacing:-.02em;
  color:var(--f-ink-2); text-decoration:none;
  transition:background .16s, color .16s;
}
.tsf-steps a:hover{ background:var(--f-blue-soft); color:var(--f-blue); }
.tsf-steps b{
  flex-shrink:0;
  width:22px; height:22px; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
  background:#f2f4f8; color:var(--f-muted);
  font-size:11px; font-weight:800; letter-spacing:0;
}
.tsf-steps a:hover b{ background:#fff; color:var(--f-blue); }

.tsf-side__note{
  background:var(--f-blue-soft);
  border:1px solid #dff0e8;
  border-radius:16px; padding:18px;
  font-size:12.5px; line-height:1.75; color:var(--f-ink-2);
  word-break:keep-all;
}
.tsf-side__note strong{
  display:block; margin-bottom:6px;
  font-size:13px; font-weight:800; color:var(--f-blue-d); letter-spacing:-.02em;
}
.tsf-side__note ul{ list-style:none; padding:0; margin:0; display:grid; gap:5px; }
.tsf-side__note li{ position:relative; padding-left:11px; }
.tsf-side__note li::before{
  content:''; position:absolute; left:0; top:8px;
  width:4px; height:4px; border-radius:50%; background:#dff0e8;
}

/* ── 폼 본문 ── */
.tsf-main{ display:grid; gap:18px; min-width:0; }

/* ==========================================================================
   3. 섹션 카드
   ========================================================================== */
.tsf-card{
  background:#fff;
  border:1px solid var(--f-line);
  border-radius:var(--f-radius);
  padding:28px 30px 30px;
  box-shadow:var(--f-shadow);
  scroll-margin-top:20px;
}
.tsf-card__head{
  display:flex; align-items:flex-start; gap:13px;
  padding-bottom:20px; margin-bottom:24px;
  border-bottom:1px solid var(--f-line-2);
}
.tsf-num{
  flex-shrink:0;
  width:30px; height:30px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--f-blue-soft); color:var(--f-blue);
  font-size:12px; font-weight:800;
}
.tsf-card__head h2{
  margin:0 0 3px;
  font-size:17px; font-weight:800; letter-spacing:-.035em; color:var(--f-ink);
}
.tsf-card__head p{
  margin:0; font-size:12.5px; line-height:1.6;
  color:var(--f-muted); word-break:keep-all;
}
.tsf-optional{
  font-size:11.5px; font-weight:700; color:var(--f-muted);
  background:#f2f4f8; border-radius:6px;
  padding:2px 7px; margin-left:6px; vertical-align:2px;
}

/* 카드 안 안내 배너 */
.tsf-note{
  position:relative;
  margin:0 0 22px; padding:13px 16px 13px 42px;
  border-radius:12px;
  background:var(--f-blue-soft); border:1px solid #dff0e8;
  font-size:13px; line-height:1.65; color:var(--f-ink-2);
  word-break:keep-all;
}
.tsf-note::before{
  content:''; position:absolute; left:15px; top:14px;
  width:18px; height:18px; border-radius:50%;
  background:var(--f-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23fff'%3E%3Cpath d='M10 2a8 8 0 100 16 8 8 0 000-16zm.75 4.75a.75.75 0 00-1.5 0v.5a.75.75 0 001.5 0v-.5zM10 9a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 9z'/%3E%3C/svg%3E") no-repeat center/18px;
}
.tsf-note strong{ font-weight:800; color:var(--f-blue-d); }

/* ==========================================================================
   4. 필드
   ========================================================================== */
.tsf-fields{ display:grid; gap:20px; }
.tsf-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.tsf-f{ min-width:0; }

.tsf-l{
  display:block; margin-bottom:8px;
  font-size:13.5px; font-weight:700; letter-spacing:-.02em; color:var(--f-ink-2);
}
.tsf-l b{ color:var(--f-red); font-weight:700; margin-left:3px; }
.tsf-hint{
  font-size:12px; font-weight:500; color:#9aa2b3; margin-left:5px;
  letter-spacing:-.01em;
}
.tsf-help{
  margin:7px 0 0; font-size:12px; line-height:1.6; color:var(--f-muted);
  word-break:keep-all;
}

/* ★ 셀렉터에 태그를 함께 쓰는 이유 = 특정도 확보.
   ttbox_skin.css 의 `input[type="text"]`(0,1,1) 과 ttbox_mypage.css 의
   `.section_mypage input[type="text"]`(0,2,1) 이 클래스 하나(0,1,0)를 이겨버린다.
   `.tsf input.tsf-in`(0,2,1) 로 동률을 만든 뒤 뒤에 로드돼 이긴다. */
.tsf input.tsf-in,
.tsf select.tsf-sel{
  width:100%; box-sizing:border-box;
  height:48px; padding:0 15px;
  border:1px solid #d9dfea; border-radius:12px;
  background:#fff;
  font-family:inherit; font-size:14.5px; letter-spacing:-.02em; color:var(--f-ink);
  transition:border-color .16s, box-shadow .16s, background .16s;
}
.tsf input.tsf-in::placeholder{ color:#aeb5c2; font-weight:400; }
.tsf input.tsf-in:hover,
.tsf select.tsf-sel:hover{ border-color:#c2cbdb; }
.tsf input.tsf-in:focus,
.tsf select.tsf-sel:focus{
  outline:none; border-color:var(--f-blue);
  box-shadow:0 0 0 3px rgba(0, 107, 79,.12);
}
.tsf input.tsf-in[readonly]{
  background:#f4f6fa; color:#8b93a3; cursor:not-allowed; border-color:var(--f-line);
}
.tsf input.tsf-in[readonly]:hover,
.tsf input.tsf-in[readonly]:focus{ border-color:var(--f-line); box-shadow:none; }

.tsf select.tsf-sel{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding-right:42px;
  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 fill='none' stroke='%2339435a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px 8px;
}

/* 입력 + 버튼 한 줄 */
.tsf-inline{ display:flex; gap:8px; align-items:stretch; }
.tsf-inline input.tsf-in{ flex:1; min-width:0; }

/* 인증번호 행 — 초기 숨김. JS 가 display:flex 를 인라인으로 넣는다 */
.tsf .phone-cert-box{ display:none; margin-top:8px; }
.tsf input.tsf-in--cert{ border-color:var(--f-blue); background:#fbfcff; }

/* 보조 버튼(중복확인·인증요청·계좌인증) */
.tsf button.tsf-btn-sub{
  flex-shrink:0;
  height:48px; padding:0 18px;
  border:1px solid var(--f-blue); border-radius:12px;
  background:var(--f-blue); color:#fff;
  font-family:inherit; font-size:13.5px; font-weight:700; letter-spacing:-.02em;
  white-space:nowrap; cursor:pointer;
  transition:background .16s, border-color .16s, transform .12s;
}
.tsf button.tsf-btn-sub:hover{ background:var(--f-blue-d); border-color:var(--f-blue-d); }
.tsf button.tsf-btn-sub:active{ transform:translateY(1px); }
.tsf button.tsf-btn-sub:disabled{
  background:#eef0f5; border-color:#e2e6ee; color:#a4abba; cursor:default; transform:none;
}
.tsf button#bankVerifyBtn.verified{
  background:#e8f6ef; border-color:#bfe6d4; color:#00794c; cursor:default;
}
.tsf button#bankVerifyBtn.verified::before{
  content:''; display:inline-block; width:13px; height:13px; margin-right:5px;
  vertical-align:-2px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2300794c" stroke-width="3.6" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') no-repeat center/13px;
}

/* ==========================================================================
   5. 라디오 선택 카드 (계좌 명의)
   ========================================================================== */
.tsf-pick{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tsf-pick__item{
  display:flex; align-items:center; gap:11px;
  border:1px solid #d9dfea; border-radius:12px;
  padding:14px 16px; cursor:pointer;
  transition:border-color .16s, background .16s, box-shadow .16s;
}
.tsf-pick__item:hover{ border-color:#c2cbdb; }
.tsf-pick__item:has(input[type="radio"]:checked){
  border-color:var(--f-blue); background:var(--f-blue-soft);
  box-shadow:0 0 0 3px rgba(0, 107, 79,.10);
}
.tsf-pick__item input[type="radio"]{
  width:18px; height:18px; flex-shrink:0; cursor:pointer;
  accent-color:var(--f-blue);
}
.tsf-pick__text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tsf-pick__text strong{
  font-size:14px; font-weight:700; letter-spacing:-.02em; color:var(--f-ink);
}
.tsf-pick__text small{ font-size:11.5px; color:var(--f-muted); }

/* ==========================================================================
   6. 파일 업로드
   ========================================================================== */
.tsf input.tsf-file{
  width:100%; box-sizing:border-box;
  padding:14px 16px;
  border:1px dashed #ccd5e4; border-radius:12px;
  background:#fafbfe;
  font-family:inherit; font-size:13.5px; color:var(--f-ink-2);
  cursor:pointer;
  transition:border-color .16s, background .16s;
}
.tsf input.tsf-file:hover{ border-color:var(--f-blue); background:var(--f-blue-soft); }
.tsf-file::file-selector-button{
  margin-right:12px; padding:7px 14px;
  border:1px solid var(--f-line); border-radius:8px;
  background:#fff; color:var(--f-ink-2);
  font-family:inherit; font-size:12.5px; font-weight:700;
  cursor:pointer;
}
.tsf-file:hover::file-selector-button{ border-color:#dff0e8; color:var(--f-blue); }

/* ==========================================================================
   7. 약관 동의
   ========================================================================== */
.tsf-agree__all{
  display:flex; align-items:center; gap:10px;
  padding:15px 16px; margin-bottom:14px;
  border:1px solid #d9dfea; border-radius:12px;
  background:#fbfcfe;
  transition:border-color .16s, background .16s;
}
.tsf-agree__all:has(input[type="checkbox"]:checked){
  border-color:var(--f-blue); background:var(--f-blue-soft);
}
.tsf-agree__all label:last-of-type{
  font-size:14.5px; font-weight:700; letter-spacing:-.02em;
  color:var(--f-ink); cursor:pointer;
}
.tsf-agree__row{
  display:flex; align-items:center; gap:10px;
  padding:9px 4px;
}
.tsf-agree__row label:last-of-type{
  font-size:13.5px; color:var(--f-ink-2); cursor:pointer; letter-spacing:-.015em;
}
.tsf-agree__row label:last-of-type > span{ color:var(--f-blue); font-weight:700; }

/* 커스텀 체크박스 (기존 svg 자산 사용) */
.tsf-agree__all input[type="checkbox"],
.tsf-agree__row input[type="checkbox"]{ display:none; }
.tsf-agree__all label.checkbox-input,
.tsf-agree__row label.checkbox-input{
  display:inline-block; width:20px; height:20px; flex-shrink:0;
  background:url("/public/img/checkbox-no.svg") no-repeat center/100%;
  cursor:pointer;
}
.tsf-agree__all input[type="checkbox"]:checked + .checkbox-input,
.tsf-agree__row input[type="checkbox"]:checked + .checkbox-input{
  background-image:url("/public/img/checkbox-yes.svg");
}
.tsf-agree__row a{
  margin-left:8px; padding:3px 9px; border-radius:7px;
  background:#f2f4f8; color:var(--f-muted);
  font-size:11.5px; font-weight:700; text-decoration:none;
  transition:background .16s, color .16s;
}
.tsf-agree__row a:hover{ background:var(--f-blue-soft); color:var(--f-blue); }

/* ==========================================================================
   8. 제출 영역
   ========================================================================== */
.tsf-submit{
  background:#fff;
  border:1px solid var(--f-line);
  border-radius:var(--f-radius);
  padding:22px 30px 24px;
  box-shadow:var(--f-shadow);
  text-align:center;
}
.submit-btn{
  width:100%; height:56px;
  border:0; border-radius:14px;
  background:var(--f-blue); color:#fff;
  font-family:inherit; font-size:16px; font-weight:800; letter-spacing:-.025em;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(0, 107, 79,.24);
  transition:background .16s, transform .14s, box-shadow .16s;
}
.submit-btn:hover{ background:var(--f-blue-d); transform:translateY(-1px); }
.submit-btn:active{ transform:translateY(0); }
.tsf-submit__note{
  margin:13px 0 0; font-size:12.5px; line-height:1.65; color:var(--f-muted);
  word-break:keep-all;
}
.tsf-submit__note a{ color:var(--f-blue); font-weight:700; text-decoration:none; }
.tsf-submit__note a:hover{ text-decoration:underline; }

/* ==========================================================================
   9. 완료 팝업
   ========================================================================== */
.popup-wrap{
  display:none;
  position:fixed; inset:0;
  width:100%; height:100%;
  background:rgba(15,22,38,.45);
  backdrop-filter:blur(2px);
  z-index:10000;
}
.popup-wrap.active{ display:flex; align-items:center; justify-content:center; }
.popup-wrap > .popup-back{
  position:relative;
  width:min(420px, calc(100% - 40px));
  box-sizing:border-box;
  padding:34px 30px 26px;
  border-radius:22px;
  background:#fff;
  box-shadow:0 24px 64px rgba(15,22,38,.28);
  text-align:center;
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Noto Sans KR',sans-serif;
}
.popup-back > .exit-box{ display:flex; justify-content:flex-end; cursor:pointer; }
.popup-back > .check-box{ margin-bottom:16px; }
.popup-back > .check-box img{ width:56px; height:auto; }
.popup-wrap > .popup-back > p{
  margin:0 0 7px; font-size:14px; line-height:1.7;
  color:var(--f-muted); word-break:keep-all;
}
.popup-wrap > .popup-back > p:first-of-type{
  font-size:22px; font-weight:800; letter-spacing:-.04em;
  color:var(--f-ink); margin-bottom:10px;
}
.popup-wrap > .popup-back > p:last-of-type{ margin-bottom:24px; }
.popup-wrap > .popup-back > button{
  width:100%; height:52px; margin-top:8px;
  border:0; border-radius:13px;
  background:var(--f-blue); color:#fff;
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:-.02em;
  cursor:pointer;
  transition:background .16s;
}
.popup-wrap > .popup-back > button:hover{ background:var(--f-blue-d); }
.popup-wrap > .popup-back > button.next-login-btn{
  background:#fff; color:var(--f-ink-2); border:1px solid var(--f-line);
}
.popup-wrap > .popup-back > button.next-login-btn:hover{
  background:var(--f-blue-soft); color:var(--f-blue); border-color:#dff0e8;
}
/* 확인 버튼 하나뿐인 화면(회원전환)에서는 파란 단일 버튼으로 */
.popup-wrap > .popup-back > button.next-login-btn:only-of-type{
  background:var(--f-blue); color:#fff; border-color:var(--f-blue);
}
.popup-wrap > .popup-back > button.next-login-btn:only-of-type:hover{
  background:var(--f-blue-d); color:#fff;
}

/* ==========================================================================
   10. 마이페이지 셸(memberUpgrade) 안에서 쓸 때
   ========================================================================== */
.tsf--inpage{ background:transparent; padding-bottom:40px; }
.tsf--inpage .tsf-hero{
  background:#fff; border:1px solid var(--f-line);
  border-radius:var(--f-radius); box-shadow:var(--f-shadow);
}
.tsf--inpage .tsf-hero__inner{ padding:36px 24px 32px; }
.tsf--inpage .tsf-hero h1{ font-size:27px; }
/* 마이페이지 .cont 는 1440px 까지 퍼진다 → 폼은 가독 폭으로 다시 조인다 */
.tsf--inpage .tsf-inner{ padding:0; max-width:1080px; margin:0 auto; }
.tsf--inpage .tsf-layout{ padding-top:18px; }
.tsf--inpage .tsf-side{ top:16px; }

/* ==========================================================================
   11. 반응형
   ========================================================================== */
@media (max-width:1024px){
  .tsf-layout{ grid-template-columns:minmax(0,1fr); gap:18px; }
  .tsf-side{ position:static; grid-template-columns:1fr 1fr; display:grid; }
  .tsf-side__card{ display:none; }          /* 목차는 데스크톱에서만 */
  .tsf-side__note{ grid-column:1 / -1; }
}
@media (max-width:768px){
  .tsf{ padding-bottom:56px; }
  .tsf-inner{ padding:0 16px; }
  .tsf-hero__inner{ padding:34px 16px 28px; }
  .tsf-hero h1{ font-size:25px; }
  .tsf-hero__lead{ font-size:13.5px; }
  .tsf-chips{ margin-top:16px; }
  .tsf-chips li{ font-size:11.5px; padding:6px 11px; }
  .tsf-layout{ padding-top:20px; }
  .tsf-card{ padding:22px 18px 24px; border-radius:16px; }
  .tsf-card__head{ padding-bottom:16px; margin-bottom:20px; gap:11px; }
  .tsf-card__head h2{ font-size:15.5px; }
  .tsf-row{ grid-template-columns:1fr; gap:20px; }
  .tsf-pick{ grid-template-columns:1fr; }
  .tsf input.tsf-in, .tsf select.tsf-sel, .tsf button.tsf-btn-sub{ height:46px; font-size:14px; }
  .tsf button.tsf-btn-sub{ padding:0 13px; font-size:12.5px; }
  .tsf-submit{ padding:18px 18px 20px; border-radius:16px; }
  .tsf button.submit-btn{ height:52px; font-size:15px; }
  .tsf--inpage .tsf-hero__inner{ padding:26px 16px 24px; }
}