/* ==========================================================================
   TTBOX — 회원가입 유형 선택 (signupTypeChoice)
   기존 signup.css / planView.css 의 .plan 구조를 대체한다.
   b2bSubHead(사이트 공통 셸) 위에서 .tts 스코프로만 동작.
   ========================================================================== */

.tts{
  --ts-ink:#0f1626;
  --ts-ink-2:#395a4c;
  --ts-muted:#767f92;
  --ts-line:#e6eaf2;
  --ts-blue:#006b4f;
  --ts-blue-d:#00563f;
  --ts-blue-soft:#eff8f4;
  display:block;
  background:#f5f7fb;
  padding:0 0 100px;
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Noto Sans KR',sans-serif;
  color:var(--ts-ink);
}
.tts-inner{ max-width:1000px; margin:0 auto; padding:0 24px; }

/* 헤더 */
.tts-head{ padding:64px 0 40px; text-align:center; }
.tts-eyebrow{
  display:inline-block;
  font-size:11.5px; font-weight:800; letter-spacing:.16em;
  color:var(--ts-blue); margin-bottom:12px;
}
.tts-head h1{
  font-size:34px; font-weight:800; letter-spacing:-.045em; line-height:1.22;
  color:var(--ts-ink); margin:0 0 10px; word-break:keep-all;
}
.tts-head p{
  font-size:14.5px; color:var(--ts-muted); line-height:1.7; margin:0;
  word-break:keep-all;
}

/* 카드 */
.tts-cards{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  align-items:stretch;
}
.tts-card{
  position:relative;
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--ts-line);
  border-radius:22px;
  padding:32px 30px 28px;
  box-shadow:0 1px 2px rgba(16,24,40,.04), 0 10px 30px rgba(16,24,40,.06);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
.tts-card:hover{
  transform:translateY(-3px);
  border-color:#dff0e8;
  box-shadow:0 2px 4px rgba(16,24,40,.05), 0 20px 44px rgba(0, 107, 79,.13);
}
.tts-card--primary{ border-color:#dff0e8; }
.tts-card--primary::before{
  content:'';
  position:absolute; left:0; right:0; top:0; height:4px;
  border-radius:22px 22px 0 0;
  background:linear-gradient(90deg,var(--ts-blue),#6cb79b);
}
.tts-tag{
  display:inline-block; align-self:flex-start;
  padding:5px 12px; border-radius:999px;
  background:var(--ts-blue-soft); color:var(--ts-blue);
  font-size:11.5px; font-weight:800; letter-spacing:-.01em;
  margin-bottom:14px;
}
.tts-card h2{
  font-size:23px; font-weight:800; letter-spacing:-.04em; line-height:1.25;
  color:var(--ts-ink); margin:0 0 8px;
}
.tts-card__lead{
  font-size:13.5px; line-height:1.7; color:var(--ts-muted);
  margin:0 0 22px; word-break:keep-all;
}

/* 기능 목록 */
.tts-feat{ list-style:none; padding:0; margin:0 0 26px; display:grid; gap:10px; }
.tts-feat li{
  position:relative; padding-left:25px;
  font-size:13.5px; font-weight:500; letter-spacing:-.015em;
  color:var(--ts-ink-2); line-height:1.5;
}
.tts-feat li::before{
  content:''; position:absolute; left:0; top:2px;
  width:17px; height:17px; border-radius:50%;
  background:var(--ts-blue-soft)
    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/9.5px;
}

/* CTA */
.tts-go{
  margin-top:auto;
  display:flex; align-items:center; justify-content:center;
  height:52px; border-radius:14px;
  background:var(--ts-blue); color:#fff;
  font-size:15px; font-weight:700; letter-spacing:-.02em;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(0, 107, 79,.26);
  transition:background .18s, transform .18s, box-shadow .18s;
}
.tts-go:hover{ background:var(--ts-blue-d); transform:translateY(-1px); }
.tts-go--ghost{
  background:#fff; color:var(--ts-ink); border:1px solid var(--ts-line);
  box-shadow:none;
}
.tts-go--ghost:hover{
  background:var(--ts-blue-soft); color:var(--ts-blue); border-color:#dff0e8;
}
.tts-req{
  margin:11px 0 0; text-align:center;
  font-size:12px; color:#9aa2b3; letter-spacing:-.01em;
}

.tts-foot{
  margin:36px 0 0; text-align:center;
  font-size:13.5px; color:var(--ts-muted);
}
.tts-foot a{ color:var(--ts-blue); font-weight:700; text-decoration:none; }
.tts-foot a:hover{ text-decoration:underline; }

@media (max-width:768px){
  .tts{ padding-bottom:64px; }
  .tts-inner{ padding:0 16px; }
  .tts-head{ padding:36px 0 26px; }
  .tts-head h1{ font-size:25px; }
  .tts-cards{ grid-template-columns:1fr; gap:14px; }
  .tts-card{ padding:26px 22px 24px; border-radius:18px; }
  .tts-card h2{ font-size:20px; }
}