/* ============================================================
   티티박스 레이아웃 시스템 — B2 클린 커머스
   기존 CSS 뒤에 로드. DOM은 그대로 두고 레이아웃만 재구성.
   ============================================================ */

:root {
  /* 기존 변수 재정의 — 마이페이지/서브 공통 */
  --max-width: 1496px; /* 콘텐츠 실폭 1440 + 좌우 28px 패딩. 소개페이지(.wrap 1440)와 정렬선 일치 */
  --sidebar-width: 260px;
  --color-accent: #006b4f;
  --color-accent-light: #eff8f4;
  --color-bg-page: #f8fbfa;
  --color-bg-subtle: #ffffff;
  --color-border: #dce9e3;
  --color-border-light: #e6f1ec;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --shadow-sm: 0 2px 10px rgba(19, 43, 35, .05);
  --shadow-md: 0 10px 30px rgba(19, 43, 35, .08);
  --shadow-lg: 0 24px 60px rgba(19, 43, 35, .12);

  --tt-blue: #006b4f;
  --tt-blue-deep: #00563f;
  --tt-blue-soft: #eff8f4;
  --tt-pink: #cc4d50;
  --tt-pink-soft: #fdeeee;
  --tt-mint: #00b56a;
  --tt-ink: #132b23;
  --tt-muted: #63746d;
  --tt-dim: #9aa1b2;
  --tt-bg: #f8fbfa;
  --tt-line: #dce9e3;
}

body { background: var(--tt-bg); }

/* ============================================================
   1. 페이지 히어로 밴드 — 서브페이지 공통 상단
   ============================================================ */
.tt-pagehero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--tt-bg) 100%);
  border-bottom: 1px solid var(--tt-line);
  padding: 44px 0 40px;
  margin-bottom: 28px;
}
.tt-pagehero::before,
.tt-pagehero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.tt-pagehero::before {
  width: 420px; height: 420px;
  background: rgba(0, 107, 79, .09);
  top: -220px; right: -80px;
}
.tt-pagehero::after {
  width: 320px; height: 320px;
  background: rgba(204, 77, 80, .06);
  bottom: -200px; left: -100px;
}
.tt-pagehero-inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}
.tt-pagehero .eyebrow {
  display: block;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; color: var(--tt-blue);
  margin-bottom: 9px;
}
.tt-pagehero h1 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800; letter-spacing: -.035em;
  color: var(--tt-ink); line-height: 1.15;
}
.tt-pagehero .lead {
  margin-top: 10px;
  font-size: 15px; color: var(--tt-muted);
  max-width: 40em;
}

/* ============================================================
   2. 마이페이지 — 카드 분리형 레이아웃
   기존: 하나의 큰 박스 안에 사이드바+본문
   변경: 히어로 밴드 + 스티키 사이드바 카드 + 본문 카드
   ============================================================ */
.section_mypage {
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--tt-bg);
}
.mypage_inner {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

/* 타이틀 → 히어로 밴드 */
.section_mypage div.title {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, var(--tt-bg) 100%);
  border-bottom: 1px solid var(--tt-line);
  padding: 44px 28px 40px;
  margin: 0 0 28px;
  text-align: left;
}
.section_mypage div.title::before {
  content: "MY PAGE";
  position: static;
  display: block;
  width: auto; height: auto;
  background: none;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; color: var(--tt-blue);
  margin: 0 auto 9px;
  max-width: calc(var(--max-width) - 56px);
}
.section_mypage div.title h1 {
  max-width: calc(var(--max-width) - 56px);
  margin: 0 auto;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800; letter-spacing: -.035em;
  color: var(--tt-ink); line-height: 1.15;
}
.section_mypage div.title span {
  display: block;
  max-width: calc(var(--max-width) - 56px);
  margin: 10px auto 0;
  font-size: 15px; color: var(--tt-muted);
}

/* 본문 그리드 */
.section_mypage .cont {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px 60px;
  min-height: 0;
}

/* 사이드바 → 스티키 카드 */
.section_mypage .menu__cont {
  width: auto;
  background: #fff;
  border: 1px solid var(--tt-line);
  border-right: 1px solid var(--tt-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 12px;
  position: sticky;
  top: 84px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.section_mypage .menu__cont::-webkit-scrollbar { width: 6px; }
.section_mypage .menu__cont::-webkit-scrollbar-thumb { background: #dfe3ee; border-radius: 99px; }

/* 메뉴 아이템 → pill */
.section_mypage .menu_bar > li { margin-bottom: 2px; }
.section_mypage .menu_bar > li > p,
.section_mypage .menu_bar > li > button {
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tt-muted);
}
.section_mypage .menu_bar > li > p:hover,
.section_mypage .menu_bar > li > button:hover {
  background: var(--tt-blue-soft);
  color: var(--tt-blue);
}
.section_mypage .menu_bar > li.on > p,
.section_mypage .menu_bar > li.on > button {
  background: var(--tt-blue-soft);
  color: var(--tt-blue);
  font-weight: 700;
}
/* 기존 좌측 세로 인디케이터 제거(카드형에선 불필요) */
.section_mypage .menu_bar > li.on > p::before,
.section_mypage .menu_bar > li.on > button::before { display: none; }

.section_mypage .lnb__list { padding: 2px 0 6px; }
.section_mypage .lnb__list li a {
  display: block;
  padding: 8px 14px 8px 26px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--tt-dim);
  transition: background .15s, color .15s;
}
.section_mypage .lnb__list li a:hover {
  background: var(--tt-bg);
  color: var(--tt-ink);
}
.section_mypage .lnb__list li a.active {
  background: var(--tt-blue-soft);
  color: var(--tt-blue);
  font-weight: 700;
}

/* 본문 영역 */
.section_mypage .cont > .container,
.section_mypage .cont > *:not(.menu__cont) {
  min-width: 0;
}

/* 본문 섹션 카드 통일 */
.mh-sec, .tt-notice {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--tt-line) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ============================================================
   3. 서브 콘텐츠 공통 (상품목록·주문·정산 등)
   ============================================================ */
.section_mypage .cont .container { padding: 0; }

/* 페이지 내 타이틀(브레드크럼 + h2) */
.section_mypage .container > .page_title,
.section_mypage .container h2:first-of-type {
  letter-spacing: -.03em;
  font-weight: 800;
}

/* 테이블 카드화 */
.section_mypage table {
  border-radius: 14px;
  overflow: hidden;
}
.section_mypage thead th {
  background: var(--tt-bg);
  color: var(--tt-muted);
  font-weight: 700;
  font-size: 13px;
  border-bottom: 1px solid var(--tt-line);
}
.section_mypage tbody td { border-bottom: 1px solid var(--tt-line); }
.section_mypage tbody tr:hover { background: #fbfcff; }

/* ============================================================
   4. 로그인 / 회원가입 — 중앙 카드 (기존 세로 스택 구조 유지)
   ============================================================ */
body.tt-auth-page,
body:has(> main > .login-wrap) {
  background: var(--tt-bg);
}
body .login-wrap {
  max-width: 520px;
  border-radius: 24px;
  border: 1px solid var(--tt-line);
  box-shadow: var(--shadow-lg);
  padding: 0 40px 40px;
  overflow: hidden;
}
/* 카드 상단 브랜드 배너 — 좌우 패딩을 상쇄해 풀블리드 */
body .login-wrap .login_banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, var(--tt-blue) 0%, #0c8d68 92%);
  color: #fff;
  margin: 0 -40px 32px;
  padding: 40px 36px 34px;
  border-radius: 0;
  text-align: center;
}
body .login-wrap .login_banner::after {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  right: -110px; bottom: -130px;
}
body .login-wrap .login_banner h1 {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  position: relative;
}
body .login-wrap .login_banner .login_sub_text {
  color: rgba(255, 255, 255, .82);
  font-size: 13.5px;
  margin-top: 8px;
  position: relative;
}
body .login-wrap .login_banner .cc-stack { position: relative; margin-top: 20px; }
body .login-wrap .login_banner .consult-card {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  border-left: 4px solid #fff;
  backdrop-filter: blur(6px);
  box-shadow: none;
}
body .login-wrap .login_banner .consult-card .cc-tx strong { color: #fff; }
body .login-wrap .login_banner .consult-card .cc-tx span { color: rgba(255, 255, 255, .78); }
body .login-wrap .login_banner .consult-card .cc-ic { background: rgba(255, 255, 255, .18); }
body .login-wrap .login_banner .consult-card .cc-go { color: #fff; }
body .login-wrap .login_banner #introBtn {
  background: #fff !important;
  color: var(--tt-blue) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18) !important;
}

/* 로그인 버튼 */
body .login-wrap button[id*="login"],
body .login-wrap .login-btn,
body .login-wrap .btn_login {
  border-radius: 13px;
  font-weight: 700;
  font-size: 15.5px;
  padding: 15px 0;
  transition: background .15s, transform .15s, box-shadow .15s;
}
body .login-wrap button[id*="login"]:hover,
body .login-wrap .login-btn:hover,
body .login-wrap .btn_login:hover {
  background: var(--tt-blue-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 107, 79, .3);
}

body .login-wrap input[type="text"],
body .login-wrap input[type="password"],
body .signup input[type="text"],
body .signup input[type="password"] {
  border-radius: 12px;
  border: 1px solid var(--tt-line);
  padding: 14px 16px;
  font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
body .login-wrap input:focus,
body .signup input:focus {
  border-color: var(--tt-blue);
  box-shadow: 0 0 0 3px rgba(0, 107, 79, .1);
  outline: none;
}

@media (max-width: 560px) {
  body .login-wrap { border-radius: 18px; }
  body .login-wrap .login_banner { padding: 32px 22px 28px; }
  body .login-wrap > *:not(.login_banner) { padding-left: 24px; padding-right: 24px; }
}

/* ============================================================
   4-B. 회원가입 / 가입유형 선택 / 약관 등 폼 서브페이지
   ============================================================ */
body .join-wrap,
body .signup-wrap,
body .form-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px 28px 72px;
}
/* 페이지 타이틀 → 히어로 톤 (굵은 밑줄 제거) */
body .join-wrap > h1,
body .signup-wrap > h1,
body main > h1 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--tt-ink);
  text-align: center;
  border: 0;
  padding-bottom: 0;
  margin-bottom: 8px;
}
body .join-wrap > h1::after,
body .signup-wrap > h1::after,
body main > h1::after { display: none; }
body .join-wrap > h1::before {
  content: "SIGN UP";
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--tt-blue);
  margin-bottom: 10px;
}
/* 카드 그리드 */
body .plan-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
  max-width: 980px;
  margin: 36px auto 0;
}
body .plan-container .plan {
  width: auto;
  max-width: none;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--tt-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 32px 30px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
body .plan-container .plan .cir {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  font-size: 14px;
  line-height: 1.45;
}
body .plan-container .plan:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #c5d8ce;
}
body .plan-container .plan h2 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--tt-ink);
}
body .plan-container .plan ul li,
body .plan-container .plan .cir {
  color: var(--tt-muted);
}
body .plan-container .plan > a {
  display: block;
  text-align: center;
  background: var(--tt-blue);
  color: #fff;
  border-radius: 13px;
  padding: 14px 0;
  font-weight: 700;
  font-size: 15px;
  margin-top: 22px;
  transition: background .15s, transform .15s, box-shadow .15s;
}
body .plan-container .plan > a:hover {
  background: var(--tt-blue-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 107, 79, .28);
}

/* ============================================================
   4-C. 일반 서브페이지 (가이드·약관·안내 등)
   ============================================================ */
body .sub_wrap,
body .content_wrap,
body .guide-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 28px 72px;
}

/* ============================================================
   5. 반응형
   ============================================================ */
@media (max-width: 1024px) {
  .section_mypage .cont {
    grid-template-columns: 1fr;
    padding: 0 20px 48px;
  }
  .section_mypage .menu__cont {
    position: static;
    max-height: none;
  }
  .section_mypage div.title { padding: 32px 20px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   6. 마이페이지 본문 카드 — 서브페이지 공통 마감
   ============================================================ */
/* 본문 최상단 타이틀 블록 카드화 */
.section_mypage .cont .container > *:first-child { margin-top: 0; }

/* 흰 배경 위 흰 카드가 겹쳐 경계가 사라지는 문제 방지 */
.section_mypage .cont .container {
  background: transparent;
}

/* 상품목록 등 상단 요약 박스 */
.section_mypage .cont .container .summary_box,
.section_mypage .cont .container .total_box {
  border-radius: 14px;
  border: 1px solid var(--tt-line);
  background: #fff;
}

/* 탭 칩 (위탁상품관/대량거래관 등) */
.section_mypage .tab_chip,
.section_mypage .scope-tab a,
.section_mypage .scope-tab button {
  border-radius: 99px;
  font-weight: 700;
}

/* 검색 인풋 그룹 */
.section_mypage .search_box input,
.section_mypage input[type="search"] {
  border-radius: 11px;
}