/* =============================================
   FIT LIGHT — Web Design System
   데스크톱 우선, 900px 이하에서 모바일 레이아웃으로 전환
   ============================================= */

/* --- CSS Variables (mirrors colors.xml / dimens.xml) --- */
:root {
  /* Brand */
  --brand-blue: #0057FF;
  --brand-blue-dark: #0040CC;
  --brand-blue-light: #E6EEFF;

  /* Background */
  --bg-gray: #F8F9FA;
  --bg-input: #F2F3F5;
  --bg-page: #ECEDEF;
  --white: #FFFFFF;

  /* Text */
  --text-black: #111111;
  --text-dark: #666666;
  --text-light: #999999;
  --text-hint: #BBBBBB;

  /* 별칭 — 아래 규칙들이 쓰던 이름. 정의가 없어 선언 자체가 무효였다
     (특히 .pw-reset-input 의 border 는 통째로 사라져 테두리가 없었다) */
  --text-gray: var(--text-dark);
  --text-sub: var(--text-dark);
  --text-secondary: var(--text-dark);

  /* UI */
  --divider: #EEEEEE;
  --stroke: #E0E0E0;
  --border: #E0E0E0;
  --overlay: rgba(0,0,0,0.5);

  /* Status */
  --error: #FF3B30;
  --success: #34C759;

  /* Spacing (mirrors dimens.xml) */
  --screen-padding: 20px;
  --card-radius: 12px;
  --btn-radius: 10px;
  --section-gap: 28px;
  --item-spacing: 12px;

  /* Heights */
  --toolbar-h: 56px;
  --bottom-nav-h: 64px;
  /* 하단 탭바가 실제로 가리는 높이 = 탭바 + 홈 인디케이터 */
  --bottom-nav-total: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));

  /* Web layout */
  --container: 1240px;
  --container-narrow: 860px;
  --header-h: 68px;
  --gutter: 32px;
  --shadow-sm: 0 1px 3px rgba(17,24,39,0.06), 0 1px 2px rgba(17,24,39,0.04);
  --shadow-md: 0 4px 16px rgba(17,24,39,0.07);
  --shadow-lg: 0 12px 32px rgba(17,24,39,0.10);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* iOS 가로모드에서 본문 글자만 제멋대로 커지는 것(text inflation)을 막는다 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100%;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* 한국어는 어절 단위로 끊는다 — 좁은 폭에서 "사 / 이즈" 처럼 갈라지던 것을 막는다.
     한 어절이 줄보다 길면 break-word 가 빠져나갈 길을 준다
     (anywhere 는 min-content 폭까지 바꿔 flex/grid 배치를 흔들므로 쓰지 않는다) */
  word-break: keep-all;
  overflow-wrap: break-word;
  font-size: 14px;
  color: var(--text-black);
  background: var(--bg-gray);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { font-weight: 800; line-height: 1.25; }

input, button, textarea, select {
  font-family: inherit;
  outline: none;
  border: none;
  background: none;
  -webkit-appearance: none;
}

button { cursor: pointer; }
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* hidden 속성은 UA 스타일(display:none)이라 작성자 규칙의 display(flex·block 등)에 항상 진다.
   .settings-back-btn(display:flex)·.bo-sil-fallback(display:block) 두 번이나 "숨겼는데 보이는" 버그가 났다.
   속성으로 숨기는 모든 요소가 어떤 display 규칙과 겹쳐도 숨겨지도록 못 박는다. */
[hidden] { display: none !important; }

/* =============================================
   APP SHELL — 전체 폭 웹 레이아웃
   ============================================= */
#app {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-gray);
}

#page-container {
  flex: 1;
  width: 100%;
}

/* 전역 내비게이션이 없는 페이지(로그인 등)는 화면 중앙 정렬 */
#page-container.no-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
}

/* =============================================
   BOTTOM NAVIGATION
   ============================================= */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--bottom-nav-h);
  background: var(--white);
  border-top: 1px solid var(--divider);
  display: flex;
  align-items: stretch;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-nav.hidden { display: none !important; }

.bottom-nav .nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-light);
  /* 10px 은 고해상도 폰에서 읽히지 않는다 — 탭바 라벨의 최소선 */
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 0.2s;
  padding: 8px 0 6px;
  position: relative;
}

.bottom-nav .nav-item.active { color: var(--brand-blue); }

.nav-icon {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

.nav-badge-wrap { position: relative; display: inline-flex; align-items: center; }

.nav-badge {
  position: absolute;
  top: -10px;
  right: -14px;
  background: var(--error);
  color: white;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.nav-badge.hidden { display: none; }

/* =============================================
   COMMON HEADER / TOOLBAR
   ============================================= */
.toolbar {
  height: var(--toolbar-h);
  background: var(--white);
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 50;
}

.toolbar-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-black);
}

.toolbar-logo {
  flex: 1;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-black);
  letter-spacing: 0.01em;
}

.toolbar-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--text-black);
  transition: background 0.15s;
}
.toolbar-btn:active { background: var(--bg-input); }
.toolbar-btn svg { width: 22px; height: 22px; stroke: currentColor; }

/* Home toolbar has blue logo */
.home-toolbar .toolbar-logo { color: var(--brand-blue); text-align: left; padding-left: 12px; }

/* =============================================
   BUTTONS
   ============================================= */
.btn-primary {
  width: 100%;
  height: 52px;
  background: var(--brand-blue);
  color: white;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--btn-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.2s, transform 0.1s;
}
.btn-primary:active { background: var(--brand-blue-dark); transform: scale(0.99); }
.btn-primary:disabled { background: #B0C4FF; cursor: not-allowed; transform: none; }

.btn-outline {
  width: 100%;
  height: 52px;
  border: 1.5px solid var(--brand-blue);
  color: var(--brand-blue);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--btn-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.btn-outline:active { background: var(--brand-blue-light); }

.btn-dark {
  height: 56px;
  background: #1C1E22;
  color: white;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--btn-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
}
.btn-dark:active { background: #2d2f35; }

.btn-blue-lg {
  height: 58px;
  background: var(--brand-blue);
  color: white;
  font-size: 18px;
  font-weight: 700;
  border-radius: var(--btn-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.btn-blue-lg:active { background: var(--brand-blue-dark); }
.btn-blue-lg:disabled { background: #B0C4FF; cursor: not-allowed; }

/* =============================================
   INPUT FIELDS
   ============================================= */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.input-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}

.input-field {
  width: 100%;
  height: 52px;
  background: var(--bg-input);
  border: 1.5px solid transparent;
  border-radius: var(--btn-radius);
  padding: 0 16px;
  font-size: 15px;
  color: var(--text-black);
  transition: border-color 0.2s, background 0.2s;
}
.input-field::placeholder { color: var(--text-hint); }
.input-field:focus { border-color: var(--brand-blue); background: white; }
.input-field.error { border-color: var(--error); background: #FFF5F5; }

.error-msg {
  font-size: 12px;
  color: var(--error);
  display: none;
  margin-top: 2px;
}
.error-msg.visible { display: block; }

/* =============================================
   CARDS
   ============================================= */
.card {
  background: var(--white);
  border-radius: var(--card-radius);
  overflow: hidden;
}

.card-shadow {
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

/* =============================================
   CHIPS (Category filter)
   ============================================= */
.chips-scroll {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding: 0 16px 14px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chips-scroll::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  height: 34px;
  padding: 0 16px;
  border-radius: 17px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-input);
  color: var(--text-dark);
}
.chip.active { background: var(--brand-blue); color: white; }

/* =============================================
   SECTION DIVIDER
   ============================================= */
.section-divider {
  height: 8px;
  background: var(--bg-gray);
  flex-shrink: 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-black);
}

.section-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-blue);
  cursor: pointer;
}

/* =============================================
   PRODUCT CARD (Horizontal scroll list)
   ============================================= */
.products-hscroll {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 14px 12px 8px;
  scrollbar-width: none;
}
.products-hscroll::-webkit-scrollbar { display: none; }

.product-card {
  flex-shrink: 0;
  width: 160px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--divider);
  cursor: pointer;
  transition: transform 0.15s;
}
.product-card:active { transform: scale(0.97); }

.product-card-img {
  width: 160px;
  height: 180px;
  object-fit: cover;
  background: var(--bg-input);
  display: block;
}

.product-card-img-placeholder {
  width: 160px;
  height: 180px;
  background: linear-gradient(135deg, #E8ECF0 0%, #D0D5DE 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.product-card-info {
  padding: 10px 10px 8px;
}

.product-card-brand {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-black);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-black);
  margin-top: 4px;
}

.product-card-fit-btn {
  width: 100%;
  height: 30px;
  background: var(--brand-blue);
  color: white;
  font-size: 11px;
  font-weight: 700;
  border-radius: 0 0 12px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
}

/* =============================================
   PRODUCT GRID (2-column)
   ============================================= */
.products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 12px;
}

.product-grid-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--divider);
  cursor: pointer;
  transition: transform 0.15s;
}
.product-grid-item:active { transform: scale(0.97); }

.product-grid-img {
  width: 100%;
  aspect-ratio: 1 / 1.2;
  object-fit: cover;
  background: var(--bg-input);
  display: block;
}

.product-grid-img-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1.2;
  background: linear-gradient(135deg, #E8ECF0 0%, #D0D5DE 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-grid-info { padding: 10px; }

.product-grid-category {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-blue);
  background: var(--brand-blue-light);
  border-radius: 4px;
  padding: 2px 7px;
  margin-bottom: 5px;
}

.product-grid-brand {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-grid-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-black);
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-grid-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-black);
  margin-top: 5px;
}

/* =============================================
   BANNER (Hero)
   ============================================= */
.banner-section { padding: 16px; background: white; }

.banner-card {
  width: 100%;
  height: 340px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 50%, #1a1a2e 100%);
  cursor: pointer;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
}

.banner-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.banner-title {
  font-size: 26px;
  font-weight: 800;
  color: white;
  margin-top: 4px;
  line-height: 1.25;
}

.banner-cta {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 18px;
  color: white;
  font-size: 13px;
  font-weight: 700;
  margin-top: 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.banner-cta:active { background: rgba(255,255,255,0.3); }

/* Banner placeholder when no product image */
.banner-placeholder-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255,255,255,0.4);
}

/* =============================================
   SEARCH BAR
   ============================================= */
.search-wrap { padding: 16px; background: white; }

.search-bar {
  display: flex;
  align-items: center;
  height: 46px;
  background: var(--bg-input);
  border-radius: 23px;
  padding: 0 14px;
  gap: 8px;
}

.search-bar svg { width: 18px; height: 18px; stroke: var(--text-hint); flex-shrink: 0; }

.search-input {
  flex: 1;
  background: none;
  font-size: 14px;
  color: var(--text-black);
}
.search-input::placeholder { color: var(--text-hint); }

/* =============================================
   SPLASH SCREEN
   ============================================= */
.splash-screen {
  position: fixed;
  inset: 0;
  background: var(--brand-blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.splash-logo {
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 800;
  color: white;
  letter-spacing: 0.05em;
}

.splash-tagline {
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  margin-top: 10px;
  font-weight: 500;
}

/* =============================================
   AUTH PAGES (Login / Register)
   ============================================= */
.auth-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--screen-padding);
  background: white;
}

.auth-logo {
  font-size: 24px;
  font-weight: 800;
  color: var(--brand-blue);
  letter-spacing: 0.04em;
  margin-top: 40px;
  margin-bottom: 32px;
}

.auth-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-black);
  line-height: 1.2;
  margin-bottom: 6px;
}

.auth-subtitle {
  font-size: 14px;
  color: var(--text-dark);
  margin-bottom: 32px;
}

.auth-form { display: flex; flex-direction: column; gap: 16px; }

/* --- 구글 로그인 --- */
.google-auth {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 4px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-hint);
  font-size: 12px;
  font-weight: 600;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--divider);
}

/* GIS 가 iframe 버튼을 이 안에 그린다 — 가운데 정렬만 담당 */
.google-btn-slot {
  display: flex;
  justify-content: center;
  min-height: 44px;
}
.google-btn-slot.is-busy {
  opacity: 0.55;
  pointer-events: none;
}

.auth-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
}

.auth-footer-text { font-size: 14px; color: var(--text-dark); }

.auth-footer-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-blue);
  cursor: pointer;
}

/* =============================================
   PHONE / OTP
   ============================================= */
.phone-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.phone-row .input-field {
  flex: 1;
  min-width: 0;
}

.btn-send-otp {
  flex-shrink: 0;
  padding: 0 14px;
  height: 52px;
  border-radius: var(--btn-radius);
  border: 1.5px solid var(--brand-blue);
  color: var(--brand-blue);
  font-size: 13px;
  font-weight: 600;
  background: white;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.btn-send-otp:active { background: var(--brand-blue-light); }
.btn-send-otp:disabled { border-color: var(--stroke); color: var(--text-hint); cursor: not-allowed; }

.otp-status-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  min-height: 18px;
}

.otp-timer {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-blue);
}

.otp-verified-msg {
  font-size: 13px;
  font-weight: 700;
  color: var(--success);
}

/* =============================================
   BODY DATA PAGE
   ============================================= */
.body-data-page {
  min-height: 100dvh;
  background: white;
  display: flex;
  flex-direction: column;
}

.body-data-content {
  flex: 1;
  padding: var(--screen-padding);
  overflow-y: auto;
}

.body-data-header {
  padding: 28px 0 24px;
}

.body-data-title { font-size: 24px; font-weight: 800; color: var(--text-black); }
.body-data-subtitle { font-size: 14px; color: var(--text-dark); margin-top: 6px; line-height: 1.5; }

.body-data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}

.body-data-actions {
  padding: var(--screen-padding);
  border-top: 1px solid var(--divider);
  background: white;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skip-btn {
  text-align: center;
  font-size: 14px;
  color: var(--text-dark);
  cursor: pointer;
  padding: 8px;
}

/* =============================================
   HOME PAGE
   ============================================= */
.home-page { background: var(--bg-gray); }

.home-section {
  background: white;
  padding-top: 20px;
  padding-bottom: 8px;
}

/* =============================================
   PRODUCT DETAIL PAGE
   ============================================= */
.product-detail-page {
  background: var(--bg-page);
  min-height: 100dvh;
}

.product-img-wrap {
  margin: 12px;
  border-radius: 0;
  overflow: hidden;
  position: relative;
  background: var(--bg-input);
}

.product-img-main {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
}

.product-img-placeholder {
  width: 100%;
  height: 460px;
  background: linear-gradient(135deg, #E8ECF0 0%, #D0D5DE 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-info-section {
  background: white;
  padding: 22px var(--screen-padding) 0;
}

.product-season {
  font-size: 13px;
  font-weight: 700;
  color: #626777;
  letter-spacing: 0.08em;
}

.product-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-black);
  margin-top: 14px;
  line-height: 1.3;
}

.product-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
}

.product-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-black);
}

.product-price-orig {
  font-size: 14px;
  color: #7A7F8C;
  text-decoration: line-through;
}

.product-info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 24px;
}

.product-info-card {
  background: var(--bg-gray);
  border-radius: 12px;
  padding: 18px;
}

.product-info-card-label {
  font-size: 12px;
  font-weight: 700;
  color: #626777;
  letter-spacing: 0.08em;
}

.product-info-card-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-black);
  margin-top: 10px;
}

.product-info-card-sub {
  font-size: 13px;
  color: #666D7A;
  margin-top: 4px;
}

.product-designer-notes-label {
  font-size: 14px;
  font-weight: 700;
  color: #5D6272;
  letter-spacing: 0.08em;
  margin-top: 28px;
}

.product-designer-notes {
  font-size: 15px;
  color: #363B47;
  margin-top: 14px;
  line-height: 1.6;
}

.size-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
}

.size-section-label {
  font-size: 14px;
  font-weight: 700;
  color: #5D6272;
  letter-spacing: 0.08em;
}

.size-guide-link {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-blue);
  cursor: pointer;
}

.size-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
  padding-bottom: 24px;
}

.size-btn {
  height: 56px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--stroke);
  color: var(--text-black);
  background: white;
  cursor: pointer;
  transition: all 0.2s;
}

.size-btn.selected {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  background: var(--brand-blue-light);
}

.size-buttons--free {
  grid-template-columns: 1fr;
}

.size-no-info {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-gray);
  padding: 14px 0 24px;
}

.size-specs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  margin-top: 4px;
  padding-bottom: 24px;
}

.size-spec-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: var(--bg-input);
  border-radius: 8px;
  padding: 10px 8px;
}

.size-spec-label {
  font-size: 11px;
  color: var(--text-gray);
  font-weight: 500;
}

.size-spec-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-black);
}

.product-detail-actions {
  background: white;
  padding: 14px;
  display: flex;
  gap: 10px;
  border-top: 1px solid var(--divider);
}

/* =============================================
   CART PAGE
   ============================================= */
.cart-page {
  background: #F4F6FB;
  min-height: 100dvh;
}

.cart-content { padding: 20px 18px 220px; }

.cart-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 4px;
}

.cart-count-badge {
  background: var(--brand-blue);
  color: white;
  font-size: 13px;
  font-weight: 700;
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 6px;
}

.cart-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-blue);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.cart-big-title {
  font-size: 40px;
  font-weight: 800;
  color: var(--text-black);
  line-height: 1.1;
}

.cart-items { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }

.cart-item-card {
  background: white;
  border-radius: 18px;
  padding: 14px;
  display: flex;
  gap: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.cart-item-img {
  width: 96px;
  height: 120px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-input);
}

.cart-item-img-placeholder {
  width: 96px;
  height: 120px;
  border-radius: 12px;
  background: linear-gradient(135deg, #E8ECF0 0%, #D0D5DE 100%);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cart-item-brand {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cart-item-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-black);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cart-item-size {
  font-size: 12px;
  color: var(--text-dark);
  margin-top: 4px;
}

.cart-item-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-black);
  margin-top: auto;
  padding-top: 6px;
}

.cart-item-qty-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.qty-btn {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--stroke);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-black);
  cursor: pointer;
}
.qty-btn:active { background: var(--bg-input); }

.qty-value {
  font-size: 14px;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
}

.cart-remove-btn {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-light);
  cursor: pointer;
  text-decoration: underline;
}

.cart-item-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.cart-action-buy {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  height: 34px;
  background: var(--bg-input);
  color: var(--text-dark);
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.cart-action-buy:active { opacity: 0.75; }

.cart-fit-btn {
  min-width: 0;
  white-space: nowrap;
  height: 36px;
  background: var(--brand-blue);
  color: white;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.cart-action-fit {
  flex: 2;
  margin-top: 0;
  width: auto;
}

.cart-empty {
  background: white;
  border-radius: 18px;
  padding: 40px 32px;
  text-align: center;
  color: #6D7382;
  font-size: 14px;
  margin-top: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.cart-fitting-cta {
  width: 100%;
  height: 52px;
  background: var(--brand-blue);
  color: white;
  font-size: 15px;
  font-weight: 700;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: 0.03em;
  margin-top: 4px;
}
.cart-fitting-cta:active { opacity: 0.85; }

.cart-summary-bar {
  background: white;
  padding: 18px 18px 28px;
  border-top: none;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.07);
}

.cart-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cart-summary-label {
  font-size: 15px;
  font-weight: 700;
  color: #4A4F5E;
}

.cart-summary-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-black);
}

.cart-summary-divider {
  height: 1px;
  background: var(--divider);
  margin: 12px 0;
}

.cart-total-label {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-black);
}

.cart-total-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--brand-blue);
}

/* =============================================
   FITTING PAGE
   ============================================= */
.fitting-page {
  background: #F4F6FB;
  min-height: 100dvh;
}

.fitting-content {
  padding: 14px 16px 100px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fitting-card {
  background: white;
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* 카드 안 구획 라벨.
   브랜드색 세로선을 걷어내고 이 스타일시트가 이미 쓰고 있는 2단 위계를 따른다.
   페이지 머리말(.page-eyebrow / .fd-eyebrow)만 브랜드 블루,
   카드 내부 라벨은 무채색 마이크로캡스(.result-card-label / .fd-section-title와 동일).
   같은 화면에 파란 머리말이 두 겹으로 겹치면 위계가 뒤집혀 보이기 때문이다.
   색은 --text-light(#999)가 아니라 --text-dark(#666)다.
   11px 굵은 대문자는 작아서 #999로는 흰 배경 대비가 2.9:1, AA에 못 미친다. */
.fitting-card-label,
.fitting-section-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fitting-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fitting-change-btn {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-blue);
  cursor: pointer;
}

.fitting-cta-card {
  background: white;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.fitting-coin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-blue-light);
  border-radius: 10px;
  padding: 10px 14px;
}

.fitting-coin-label {
  flex: 1;
  font-size: 13px;
  color: var(--text-dark);
}

.fitting-coin-label b { color: var(--brand-blue); }

.fitting-coin-balance {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-blue);
}

/* Selected item card */
.fitting-item-card {
  background: white;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.fitting-item-img {
  width: 110px;
  height: 126px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--bg-input);
  flex-shrink: 0;
}

.fitting-item-img-placeholder {
  width: 110px;
  height: 126px;
  border-radius: 10px;
  background: linear-gradient(135deg, #E8ECF0 0%, #D0D5DE 100%);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fitting-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.fitting-item-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-black);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fitting-item-option {
  font-size: 13px;
  color: #6E7484;
  margin-top: 6px;
}

.premium-tag {
  display: inline-block;
  background: #D1F2EB;
  color: #0D5142;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  margin-top: 10px;
}

/* Upload area */
.upload-frame {
  width: 100%;
  height: 260px;
  border: 2px dashed #C8CCD8;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: white;
  transition: border-color 0.2s;
}
.upload-frame:hover { border-color: var(--brand-blue); }

.upload-guide {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.upload-icon-circle {
  width: 96px;
  height: 96px;
  background: #F1F3F6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-icon-circle svg { width: 40px; height: 40px; stroke: var(--text-light); }

.upload-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-black);
  margin-top: 12px;
}

.upload-desc {
  font-size: 13px;
  color: #747B8A;
  margin-top: 6px;
  text-align: center;
  line-height: 1.6;
}

.upload-preview {
  position: absolute;
  inset: 0;
  object-fit: cover;
  display: none;
}

.upload-preview.visible { display: block; }

.upload-remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.upload-remove-btn.visible { display: flex; }
.upload-remove-btn svg { width: 16px; height: 16px; stroke: white; }

/* Coin required pill */
.coin-required-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #F0F2F7;
  border-radius: 20px;
  padding: 8px 16px;
  margin: 12px auto 0;
  width: fit-content;
}

.coin-required-pill svg { width: 14px; height: 14px; fill: #5A6070; }

.coin-required-text {
  font-size: 12px;
  font-weight: 700;
  color: #5A6070;
  letter-spacing: 0.04em;
}

/* Fitting library */
.fitting-library-scroll {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 12px 0 4px;
  scrollbar-width: none;
}
.fitting-library-scroll::-webkit-scrollbar { display: none; }

.fitting-library-item {
  flex-shrink: 0;
  width: 120px;
}

.fitting-library-img {
  width: 120px;
  height: 150px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--bg-input);
  display: block;
}

.fitting-library-img-placeholder {
  width: 120px;
  height: 150px;
  border-radius: 10px;
  background: linear-gradient(135deg, #E8ECF0 0%, #D0D5DE 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fitting-library-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-black);
  margin-top: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fitting-library-date {
  font-size: 10px;
  color: var(--text-light);
  margin-top: 2px;
}

.fitting-library-empty {
  font-size: 14px;
  color: #747B8A;
  margin-top: 12px;
  padding: 16px;
  background: white;
  border-radius: 10px;
}

/* =============================================
   FITTING WAITING PAGE
   진행 단계는 실제 요청 이벤트가 클래스로 반영한다.
     .active  진행 중 · .done 완료 · .error 실패
   ============================================= */
.fitting-waiting-page { background: transparent; }

.waiting-layout {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* --- 좌: 업로드 사진 미리보기 --- */
.waiting-preview {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-input);
  border: 1px solid var(--divider);
  box-shadow: var(--shadow-md);
}

.waiting-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.waiting-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 14px;
  color: var(--text-light);
}

/* 생성 중임을 알리는 스캔 라인 — 진행률이 아니라 '작동 중' 표시 */
.waiting-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 38%;
  background: linear-gradient(
    180deg,
    rgba(0, 87, 255, 0) 0%,
    rgba(0, 87, 255, 0.16) 45%,
    rgba(0, 87, 255, 0.34) 50%,
    rgba(0, 87, 255, 0.16) 55%,
    rgba(0, 87, 255, 0) 100%
  );
  animation: waiting-scan 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes waiting-scan {
  0%   { top: -38%; }
  100% { top: 100%; }
}

/* 실패하면 '작동 중' 표시를 멈춘다 */
.fitting-waiting-page.is-failed .waiting-scan { display: none; }
.fitting-waiting-page.is-failed .page-eyebrow { color: var(--error); }

.waiting-garment {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: var(--shadow-md);
}

.waiting-garment-img {
  width: 44px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg-input);
}

.waiting-garment-info { min-width: 0; flex: 1; }

.waiting-garment-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
}

.waiting-garment-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-black);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.waiting-garment-size {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--brand-blue-light);
  color: var(--brand-blue);
  font-size: 12px;
  font-weight: 800;
}

/* --- 우: 진행 상태 패널 --- */
.waiting-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.waiting-card {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 24px;
}

.waiting-card-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.waiting-status-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.waiting-status-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-black);
  margin-top: 6px;
  line-height: 1.4;
}

.waiting-elapsed {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--bg-input);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-dark);
  font-variant-numeric: tabular-nums;
}

/* 단계별 세그먼트 바 — 가짜 퍼센트 대신 단계 진행을 보여준다 */
.waiting-segments {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  margin-top: 20px;
}

.waiting-seg {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-input);
  overflow: hidden;
}

.waiting-seg-fill {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--brand-blue);
  transition: width 0.25s ease;
}

.waiting-seg.done .waiting-seg-fill { width: 100%; background: var(--success); }
.waiting-seg.error .waiting-seg-fill { width: 100%; background: var(--error); }

/* 서버가 진행률을 주지 않는 구간 */
.waiting-seg.indeterminate .waiting-seg-fill {
  width: 45%;
  transition: none;
  animation: waiting-slide 1.4s ease-in-out infinite;
}

@keyframes waiting-slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(230%); }
}

/* 단계 목록 */
.waiting-steps { margin-top: 22px; }

.waiting-step {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
}
.waiting-step + .waiting-step { border-top: 1px solid var(--divider); }

.waiting-step-icon {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 2px solid var(--stroke);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.waiting-step.active .waiting-step-icon {
  border-color: var(--brand-blue);
  border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}

.waiting-step.done .waiting-step-icon {
  border-color: var(--success);
  background: var(--success);
}
.waiting-step.done .waiting-step-icon::after {
  content: '';
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.waiting-step.error .waiting-step-icon {
  border-color: var(--error);
  background: var(--error);
}
.waiting-step.error .waiting-step-icon::after {
  content: '!';
  color: var(--white);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.waiting-step-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-light);
}
.waiting-step.active .waiting-step-label { color: var(--brand-blue); }
.waiting-step.done   .waiting-step-label { color: var(--text-black); }
.waiting-step.error  .waiting-step-label { color: var(--error); }

.waiting-step-detail {
  font-size: 12.5px;
  color: var(--text-light);
  line-height: 1.55;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.waiting-step.active .waiting-step-detail { color: var(--text-dark); }

/* 안내 · 취소 · 오류 */
.waiting-note {
  font-size: 12.5px;
  color: var(--text-light);
  line-height: 1.7;
}

.waiting-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.waiting-actions > button { flex: 1; width: auto; height: 44px; font-size: 14px; }

.waiting-error-card {
  border-color: #F7C9C5;
  background: #FFF7F6;
}

.waiting-error-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--error);
}

.waiting-error-msg {
  font-size: 13px;
  color: var(--text-dark);
  line-height: 1.6;
  margin-top: 8px;
  overflow-wrap: anywhere;
}

/* =============================================
   FITTING RESULT PAGE
   ============================================= */
.fitting-result-page {
  min-height: 100dvh;
  background: var(--bg-page);
}

.fitting-result-img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  display: block;
}

.fitting-result-img-placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, #E8ECF0 0%, #D0D5DE 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fitting-result-actions {
  background: white;
  padding: 14px;
  display: flex;
  gap: 10px;
  border-top: 1px solid var(--divider);
}

/* =============================================
   FITTING HISTORY PAGE
   ============================================= */
.fitting-history-page { background: var(--bg-page); min-height: 100dvh; }

.history-list { padding: 12px; display: flex; flex-direction: column; gap: 12px; }

.history-item-card {
  background: white;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  gap: 14px;
  padding: 14px;
  transition: box-shadow 0.15s;
}
.history-item-card[data-has-fit="1"]:active {
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}

.history-item-img {
  width: 88px;
  height: 110px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--bg-input);
  flex-shrink: 0;
}

.history-item-img-placeholder {
  width: 88px;
  height: 110px;
  border-radius: 10px;
  background: linear-gradient(135deg, #E8ECF0 0%, #D0D5DE 100%);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.history-item-info { flex: 1; display: flex; flex-direction: column; }

.history-item-brand {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.history-item-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-black);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.history-item-date {
  font-size: 12px;
  color: var(--text-light);
  margin-top: auto;
  padding-top: 6px;
}

.history-item-coin {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-light);
  margin-top: 4px;
}

.history-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dark);
  font-size: 15px;
  line-height: 1.6;
}

/* =============================================
   MYPAGE
   ============================================= */
.mypage { background: var(--bg-gray); min-height: 100dvh; }

.mypage-header {
  height: var(--toolbar-h);
  background: white;
  display: flex;
  align-items: center;
  padding: 0 var(--screen-padding);
  border-bottom: 1px solid var(--divider);
}

.mypage-header-title { font-size: 18px; font-weight: 700; color: var(--text-black); }

.mypage-profile-section {
  background: white;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--brand-blue-light);
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.profile-avatar svg { width: 36px; height: 36px; stroke: var(--text-light); }

.profile-info { flex: 1; }

.profile-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-black);
}

.profile-email {
  font-size: 13px;
  color: var(--text-dark);
  margin-top: 2px;
}

.member-tier-tag {
  display: inline-block;
  background: var(--brand-blue-light);
  color: var(--brand-blue);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  margin-top: 6px;
  letter-spacing: 0.05em;
}

/* Coin card */
.coin-card {
  margin: 16px;
  background: var(--brand-blue);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.coin-card-info { flex: 1; }

.coin-card-label {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.coin-card-balance-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
}

.coin-card-balance {
  font-size: 28px;
  font-weight: 800;
  color: white;
}

.coin-card-unit {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
}

.coin-card-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}

.coin-charge-btn {
  height: 40px;
  padding: 0 16px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  color: white;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.coin-charge-btn:active { background: rgba(255,255,255,0.3); }

/* Menu items */
.mypage-menu-section {
  background: white;
  margin-top: 16px;
}

.mypage-menu-item {
  display: flex;
  align-items: center;
  padding: 18px 20px;
  cursor: pointer;
  gap: 14px;
  transition: background 0.15s;
}
.mypage-menu-item:active { background: var(--bg-gray); }

.mypage-menu-icon {
  width: 20px;
  height: 20px;
  stroke: var(--text-dark);
  flex-shrink: 0;
}

.mypage-menu-text {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-black);
}

.mypage-menu-text.logout-text { color: var(--error); }

.mypage-menu-arrow {
  width: 18px;
  height: 18px;
  stroke: var(--text-light);
  flex-shrink: 0;
}

.mypage-menu-divider {
  height: 1px;
  background: var(--divider);
  margin: 0 20px;
}

/* 공지 새 항목 배지 */
.mp-notice-badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--error, #FF3B30);
  flex-shrink: 0;
  margin-right: 2px;
}

/* =============================================
   POPULAR PRODUCTS PAGE (Full list)
   ============================================= */
.popular-page { background: var(--bg-page); min-height: 100dvh; }

/* =============================================
   COIN MODAL
   ============================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,0.5);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
}
.modal-overlay.hidden { display: none; }

.modal-container {
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  background: white;
  border-radius: 20px;
  padding: 28px 24px 24px;
  box-shadow: var(--shadow-lg);
}

.coin-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.coin-icon-circle {
  width: 52px;
  height: 52px;
  background: var(--brand-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.coin-modal-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-black);
}

.coin-modal-balance {
  font-size: 13px;
  color: var(--text-dark);
  margin-top: 2px;
}

.coin-packs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.coin-pack {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1.5px solid var(--stroke);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}
.coin-pack.selected { border-color: var(--brand-blue); background: var(--brand-blue-light); }

.coin-pack-left { display: flex; align-items: center; gap: 10px; flex: 1; }

.coin-pack-amount { font-size: 15px; font-weight: 700; color: var(--text-black); }

.coin-pack-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--text-dark);
}
.coin-pack-tag.popular { background: #FFF0E6; color: #E86225; }
.coin-pack-tag.best { background: var(--brand-blue-light); color: var(--brand-blue); }

.coin-pack-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin-right: 12px;
}
.coin-pack.selected .coin-pack-price { color: var(--brand-blue); }

.coin-pack-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--stroke);
  flex-shrink: 0;
  transition: all 0.2s;
  position: relative;
}
.coin-pack.selected .coin-pack-dot {
  border-color: var(--brand-blue);
  background: var(--brand-blue);
}
.coin-pack.selected .coin-pack-dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: white;
  border-radius: 50%;
}

.coin-modal-actions { display: flex; gap: 10px; }

/* =============================================
   TOAST NOTIFICATION
   ============================================= */
.toast {
  position: fixed;
  bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  /* 문구 길이에 맞춰 줄되 화면을 넘지 않는다 — nowrap 이던 탓에 긴 안내문은 양끝이 잘렸다 */
  width: max-content;
  max-width: min(520px, calc(100% - 2 * max(16px, env(safe-area-inset-left, 0px))));
  background: rgba(17,17,17,0.88);
  color: white;
  padding: 12px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  z-index: 300;
  pointer-events: none;
  transition: opacity 0.3s;
}
.toast.hidden { opacity: 0; pointer-events: none; }

/* =============================================
   LOADING STATE
   ============================================= */
.loading-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
  color: var(--text-light);
  font-size: 14px;
}

.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--brand-blue-light);
  border-top-color: var(--brand-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* =============================================
   UTILITIES
   ============================================= */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.py-20 { padding-top: 20px; padding-bottom: 20px; }

/* Fade-in animation for pages */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: fadeIn 0.22s ease-out; }

/* SVG icon fill */
.icon-fill { fill: currentColor; stroke: none; }

/* Safe area padding for iOS */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  }
}

/* =============================================
   SETTINGS PAGE
   ============================================= */
.settings-page { background: var(--bg-gray); min-height: 100dvh; }

.settings-header {
  display: flex;
  align-items: center;
  height: var(--toolbar-h);
  background: var(--white);
  padding: 0 16px;
  gap: 8px;
  border-bottom: 1px solid var(--divider);
  position: sticky;
  top: 0;
  z-index: 10;
}

.settings-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--text-black);
}

.settings-header-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-black);
}

.settings-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 20px 20px 8px;
}

.settings-menu-section {
  background: var(--white);
  border-radius: var(--card-radius);
  margin: 0 16px;
  overflow: hidden;
}

.settings-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  transition: background 0.12s;
}

.settings-menu-item:active { background: var(--bg-gray); }

.settings-account-item { cursor: default; }
.settings-account-item:active { background: var(--white); }

.settings-menu-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-dark);
}

.settings-menu-text {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-black);
}

.settings-menu-text.settings-withdraw-text { color: var(--error); }

.settings-menu-arrow {
  width: 16px;
  height: 16px;
  color: var(--text-hint);
}

.settings-menu-divider {
  height: 1px;
  background: var(--divider);
  margin: 0 20px;
}

.settings-account-value {
  font-size: 14px;
  color: var(--text-dark);
}

/* Withdraw Modal */
.settings-withdraw-modal {
  padding: 28px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-withdraw-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-black);
  text-align: center;
}

.settings-withdraw-modal-body {
  font-size: 14px;
  color: var(--text-dark);
  text-align: center;
  line-height: 1.6;
}

.settings-withdraw-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.settings-withdraw-modal-actions .btn-outline,
.settings-withdraw-modal-actions .btn-primary {
  flex: 1;
}

.settings-withdraw-confirm-btn { background: var(--error) !important; }
.settings-withdraw-confirm-btn:hover { background: #d92b21 !important; }

.pw-reset-desc {
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 16px;
  line-height: 1.6;
}
.pw-reset-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  background: var(--bg-input);
  box-sizing: border-box;
  margin-bottom: 10px;
  outline: none;
}
.pw-reset-input:focus { border-color: var(--brand-blue); background: white; }

/* =============================================
   NOTIFICATIONS PAGE
   ============================================= */
.notifications-page { background: var(--bg-gray); min-height: 100dvh; }

.notif-list {
  background: var(--white);
  margin: 16px;
  border-radius: var(--card-radius);
  overflow: hidden;
}

.notif-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
}

.notif-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.notif-icon-wrap svg { width: 20px; height: 20px; }

.notif-icon-fitting { background: var(--brand-blue-light); color: var(--brand-blue); }
.notif-icon-notice  { background: #FFF3CD; color: #B8860B; }
.notif-icon-coin    { background: #FFE8E8; color: var(--error); }

.notif-content { flex: 1; }

.notif-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-black);
  line-height: 1.4;
}

.notif-time {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 3px;
}

.notif-divider {
  height: 1px;
  background: var(--divider);
  margin: 0 20px;
}

.notif-item--unread {
  background: #F0F7FF;
}

.notif-body {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}

.notif-preview {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.notif-item--notice { cursor: pointer; }
.notif-item--notice:active { background: #E8F0FE; }

.notif-chevron {
  flex-shrink: 0;
  color: var(--text-light);
}

/* Notice detail modal */
.notice-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.notice-detail-overlay.hidden { display: none; }

.notice-detail-modal {
  background: #fff;
  width: 100%;
  max-width: 400px;
  border-radius: 16px;
  max-height: 75vh;
  max-height: 75dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.notice-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}

.notice-detail-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-black);
  flex: 1;
  margin-right: 12px;
  line-height: 1.4;
}

.notice-detail-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.notice-detail-date {
  font-size: 12px;
  color: var(--text-light);
  padding: 8px 20px 0;
  flex-shrink: 0;
}

.notice-detail-body {
  padding: 12px 20px 28px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
  color: #AAAAAA;
  font-size: 15px;
}

.notif-empty p {
  margin: 0;
}

.notif-loading {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.notif-skeleton {
  height: 56px;
  background: linear-gradient(90deg, #F0F0F0 25%, #E0E0E0 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =============================================
   NOTIFICATION BADGE DOT
   ============================================= */
.notif-btn-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notif-badge-dot {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--error);
  border: 1.5px solid var(--white);
}

.notif-badge-dot.visible { display: block; }

/* =============================================
   NOTICE PAGE
   ============================================= */
.notice-page { background: var(--bg-gray); min-height: 100dvh; }

.notice-list { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.notice-card {
  background: var(--white);
  border-radius: var(--card-radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notice-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.notice-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-black);
  flex: 1;
  line-height: 1.4;
}

.notice-card-date {
  font-size: 12px;
  color: var(--text-light);
  flex-shrink: 0;
  margin-top: 2px;
}

.notice-card-body {
  font-size: 13px;
  color: var(--text-dark);
  line-height: 1.7;
}

.notice-loading,
.notice-empty {
  text-align: center;
  padding: 48px 0;
  font-size: 14px;
  color: var(--text-light);
}

/* =============================================
   NOTIFICATION SETTINGS PAGE
   ============================================= */
.notif-settings-page { background: var(--bg-gray); min-height: 100dvh; }

.notif-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
}

.notif-settings-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-black);
}

.notif-settings-desc {
  font-size: 12px;
  color: var(--text-light);
  margin-top: 3px;
  line-height: 1.5;
}

/* Toggle Switch */
.notif-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

.notif-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.notif-switch-track {
  display: block;
  width: 48px;
  height: 28px;
  border-radius: 14px;
  background: #DDDDDD;
  transition: background 0.2s;
  position: relative;
}

.notif-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}

.notif-switch input:checked + .notif-switch-track {
  background: var(--brand-blue);
}

.notif-switch input:checked + .notif-switch-track::after {
  transform: translateX(20px);
}

/* =============================================
   INQUIRY PAGE
   ============================================= */
.inquiry-page { background: var(--bg-gray); min-height: 100dvh; }

.inquiry-form-section {
  background: var(--white);
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.inquiry-field { display: flex; flex-direction: column; gap: 6px; }

.inquiry-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}

.inquiry-select,
.inquiry-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--divider);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text-black);
  background: var(--bg-gray);
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
}

/* appearance:none 이라 iOS 에서는 화살표가 사라져 그냥 입력칸처럼 보였다.
   사이트의 다른 아이콘과 같은 선 굵기의 셰브론을 직접 그린다. */
.inquiry-select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px 16px;
}

.inquiry-select:focus,
.inquiry-input:focus { border-color: var(--brand-blue); background-color: var(--white); }

.inquiry-textarea {
  width: 100%;
  min-height: 120px;
  padding: 11px 14px;
  border: 1px solid var(--divider);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text-black);
  background: var(--bg-gray);
  outline: none;
  resize: none;
  box-sizing: border-box;
  line-height: 1.6;
  font-family: inherit;
}

.inquiry-textarea:focus { border-color: var(--brand-blue); background: var(--white); }

.inquiry-char-count {
  font-size: 11px;
  color: var(--text-light);
  text-align: right;
}

.inquiry-submit-btn { width: 100%; margin-top: 4px; }

/* History list */
.inquiry-history { padding: 0 16px 0; display: flex; flex-direction: column; gap: 10px; }

.inquiry-card {
  background: var(--white);
  border-radius: var(--card-radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inquiry-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.inquiry-card-category {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand-blue);
  background: rgba(0,112,243,0.08);
  padding: 2px 8px;
  border-radius: 20px;
}

.inquiry-card-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}

.inquiry-status-pending  { color: #FF9500; background: rgba(255,149,0,0.1); }
.inquiry-status-answered { color: #34C759; background: rgba(52,199,89,0.1); }

.inquiry-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-black);
}

.inquiry-card-content {
  font-size: 13px;
  color: var(--text-dark);
  line-height: 1.6;
}

/* 고객센터 답변.
   "특별한 블록"이라는 뜻밖에 없던 왼쪽 세로선 대신,
   보낸 사람(FL 모노그램 아바타) + 옅은 브랜드 톤 말풍선으로 발신자를 드러낸다.
   그리드 배치라 한 단어짜리 답변과 긴 답변이 같은 구조를 유지한다. */
.inquiry-answer {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  padding: 12px 14px;
  background: #F3F7FF;
  border: 1px solid rgba(0, 87, 255, 0.12);
  border-radius: var(--card-radius);
  /* 좌상단만 각지게 — 말풍선 꼬리 없이 '어디서 왔는지'를 암시한다 */
  border-top-left-radius: 4px;
}

/* 발신자 아바타. 워드마크(FIT LIGHT)에서 딴 모노그램이라 별도 이미지가 필요 없다 */
.inquiry-answer::before {
  content: 'FL';
  grid-column: 1;
  grid-row: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-blue);
  color: var(--white);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inquiry-answer-label {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-blue);
}

.inquiry-answer-body {
  grid-column: 2;
  grid-row: 2;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-dark);
  line-height: 1.6;
  /* 붙여넣은 주문번호·URL이 좁은 화면에서 카드를 밀어내지 않도록 */
  overflow-wrap: anywhere;
}

.inquiry-card-date {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 2px;
}

/* =================================================================
   ██  WEB LAYOUT  ██
   앱(430px 고정) 레이아웃을 데스크톱 웹 레이아웃으로 전환하는 레이어.
   아래 규칙은 앞선 모바일 규칙을 의도적으로 덮어씁니다.
   ================================================================= */

/* -----------------------------------------------------------------
   1. 전역 헤더
   ----------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--divider);
}
.site-header.hidden { display: none !important; }

.header-inner {
  max-width: var(--container);
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--brand-blue);
  flex-shrink: 0;
  padding: 6px 0;
}
.brand:hover { opacity: 0.75; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.site-header .nav-item {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-dark);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.site-header .nav-item .nav-icon { width: 18px; height: 18px; }
.site-header .nav-item:hover { background: var(--bg-input); color: var(--text-black); }
.site-header .nav-item.active { background: var(--brand-blue-light); color: var(--brand-blue); font-weight: 700; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--text-black);
  transition: background 0.15s;
}
.icon-btn:hover { background: var(--bg-input); }
.icon-btn svg { width: 21px; height: 21px; stroke: currentColor; }
/* 현재 페이지에 해당하는 아이콘 버튼 강조 (마이페이지·장바구니) */
.icon-btn.active { color: var(--brand-blue); background: var(--brand-blue-light); }

/* 헤더 로그아웃 — 아이콘 버튼 옆의 조용한 텍스트 버튼 */
.hdr-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 13px;
  margin-left: 4px;
  border-radius: 9px;
  border: 1px solid var(--stroke);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hdr-logout-btn:hover {
  background: var(--bg-input);
  border-color: #D3D8E0;
  color: var(--text-black);
}
/* 아이콘은 라벨을 접는 좁은 화면 전용 — 넓은 화면에서는 텍스트만 남긴다 */
.hdr-logout-icon { display: none; width: 18px; height: 18px; stroke: currentColor; }

/* 헤더 로그인 — 로그아웃 상태에서 우측 클러스터가 비지 않도록 대신 서는 버튼 */
.hdr-login-btn {
  height: 36px;
  padding: 0 15px;
  margin-left: 4px;
  border-radius: 9px;
  background: var(--brand-blue);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  transition: background 0.15s;
}
.hdr-login-btn:hover { background: var(--brand-blue-dark); }

.icon-btn-badge {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--error);
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--white);
}
.icon-btn-badge.hidden { display: none; }

.site-header .notif-badge-dot { top: 8px; right: 9px; }

/* 하단 탭바는 모바일(<=900px)에서만 — 기본 규칙의 display:flex 를 덮어씀 */
.bottom-nav { display: none; }

/* flex 컬럼 안에서 늘어나지 않도록 */
.premium-tag { align-self: flex-start; }

/* -----------------------------------------------------------------
   2. 페이지 컨테이너
   ----------------------------------------------------------------- */
.home-page,
.popular-page,
.product-detail-page,
.cart-page,
.fitting-page,
.fitting-waiting-page,
.fitting-result-page,
.fitting-history-page,
.mypage {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) 80px;
  min-height: auto;
  background: transparent;
}

.settings-page,
.notice-page,
.notifications-page,
.notif-settings-page,
.inquiry-page {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--gutter) 80px;
  min-height: auto;
  background: transparent;
}

/* -----------------------------------------------------------------
   3. 페이지 헤드 (제목 · 뒤로가기)
   ----------------------------------------------------------------- */
.page-head { padding: 40px 0 24px; }

.page-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: 8px;
}

.page-title {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  color: var(--text-black);
  letter-spacing: -0.02em;
}

.page-desc {
  font-size: 15px;
  color: var(--text-dark);
  margin-top: 10px;
  line-height: 1.6;
  max-width: 60ch;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px 0 8px;
  margin-bottom: 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  transition: background 0.15s, color 0.15s;
}
.back-link svg { width: 16px; height: 16px; stroke: currentColor; }
.back-link:hover { background: var(--bg-input); color: var(--text-black); }

/* -----------------------------------------------------------------
   4. 홈 — 히어로 · 필터바 · 상품 그리드
   ----------------------------------------------------------------- */
.home-hero { padding: 28px 0 0; }

.banner-section { padding: 0; background: transparent; }

/* 서비스 소개 히어로 */
.hero-card {
  position: relative;
  overflow: hidden;
  min-height: clamp(280px, 38vw, 440px);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  background:
    radial-gradient(120% 140% at 88% 12%, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(135deg, #0B3FCB 0%, var(--brand-blue) 48%, #3D7BFF 100%);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 24px;
  padding: 44px 48px;
  color: #fff;
}

/* 은은한 격자 텍스처 */
.hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(90% 90% at 30% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(90% 90% at 30% 40%, #000 0%, transparent 78%);
}

.hero-copy { position: relative; z-index: 1; }

.hero-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

.hero-title {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-top: 12px;
}

.hero-sub {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.86);
  margin-top: 14px;
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 26px;
  border-radius: 24px;
  background: #fff;
  color: var(--brand-blue);
  font-size: 15px;
  font-weight: 800;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 18px rgba(0,0,0,0.16);
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.22); }

.hero-cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 22px;
  border-radius: 24px;
  border: 1.5px solid rgba(255,255,255,0.5);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: background 0.15s, border-color 0.15s;
}
.hero-cta-ghost:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.8); }

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 26px;
  list-style: none;
}

.hero-points li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
}

.hero-points li::before {
  content: '';
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.22)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 9px 9px no-repeat;
}

.hero-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-visual picture { display: contents; }
.hero-visual img {
  width: auto;
  max-width: 100%;
  /* 세로형 이미지 — 카드 높이에 맞춰 잡는다 */
  max-height: clamp(230px, 32vw, 380px);
  height: auto;
}

/* 필터바 */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}

.filter-bar .chips-scroll {
  padding: 0;
  flex-wrap: wrap;
  overflow: visible;
  flex: 1;
}

.filter-bar .search-bar {
  width: 300px;
  height: 42px;
  flex-shrink: 0;
  border: 1px solid var(--divider);
  background: var(--bg-gray);
}
.filter-bar .search-bar:focus-within {
  border-color: var(--brand-blue);
  background: var(--white);
}

.chip { transition: background 0.15s, color 0.15s; }
.chip:hover { background: #E3E6EB; }
.chip.active:hover { background: var(--brand-blue-dark); }

/* 섹션 */
.home-section {
  background: transparent;
  padding: 44px 0 0;
}

.section-divider { display: none; }

.section-header {
  padding: 0;
  margin-bottom: 18px;
  align-items: baseline;
}

.section-title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }

.section-link { font-size: 14px; }
.section-link:hover { text-decoration: underline; }

/* 상품 그리드 (가로 스크롤 → 그리드) */
.products-row,
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
  padding: 0;
}

.products-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card-skeleton {
  background: linear-gradient(90deg, #F0F0F0 25%, #E6E6E6 50%, #F0F0F0 75%);
  background-size: 200% 100%;
  border-radius: 14px;
  animation: shimmer 1.4s infinite;
}

/* 카드 공통 */
.product-card,
.product-grid-item {
  width: auto;
  flex-shrink: 1;
  border-radius: 14px;
  border: 1px solid var(--divider);
  background: var(--white);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
}
.product-card:hover,
.product-grid-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: #D8DCE3;
}
.product-card:active,
.product-grid-item:active { transform: translateY(-2px); }

.product-card-img,
.product-card-img-placeholder,
.product-grid-img,
.product-grid-img-placeholder {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.product-card-info,
.product-grid-info { padding: 14px 14px 10px; flex: 1; }

.product-card-name,
.product-grid-name { font-size: 14px; }

.product-card-price,
.product-grid-price { font-size: 15px; margin-top: 8px; }

.product-card-fit-btn {
  height: 38px;
  font-size: 12px;
  border-radius: 0 0 13px 13px;
  margin-top: 0;
}
.product-card:hover .product-card-fit-btn { background: var(--brand-blue-dark); }

/* -----------------------------------------------------------------
   5. 상품 상세 — 2단 (이미지 | 정보)
   ----------------------------------------------------------------- */
.pd-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0 20px;
}
.pd-topbar .back-link { margin-bottom: 0; }
.pd-topbar-actions { display: flex; gap: 4px; }

.pd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.product-img-wrap {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-input);
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.product-img-main,
.product-img-placeholder {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.product-info-section { padding: 4px 0 0; background: transparent; }

.product-name { font-size: 30px; margin-top: 10px; }

.product-brand-line {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  margin-top: 10px;
}

.product-price { font-size: 26px; }
.product-price-row { margin-top: 18px; }

.size-section-header { margin-top: 36px; }
.size-buttons { grid-template-columns: repeat(4, 1fr); padding-bottom: 16px; }
.size-btn:hover { border-color: var(--brand-blue); color: var(--brand-blue); }

.size-specs { padding-bottom: 8px; }

.product-detail-actions {
  background: transparent;
  border-top: none;
  padding: 24px 0 0;
  gap: 12px;
}
.product-detail-actions .btn-dark { flex: 1; }
.product-detail-actions .btn-primary { flex: 1; height: 56px; }

.btn-icon-square {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  background: var(--bg-input);
  border-radius: var(--btn-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dark);
  transition: background 0.15s;
}
.btn-icon-square:hover { background: #E3E6EB; }

.product-designer-notes-label { margin-top: 40px; }

.btn-primary:hover:not(:disabled) { background: var(--brand-blue-dark); }
.btn-outline:hover { background: var(--brand-blue-light); }
.btn-dark:hover { background: #2d2f35; }
.btn-blue-lg:hover:not(:disabled) { background: var(--brand-blue-dark); }

/* -----------------------------------------------------------------
   6. 장바구니 — 목록 | 주문 요약
   ----------------------------------------------------------------- */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  align-items: start;
}

.cart-content { padding: 0; }

.cart-header-row {
  align-items: center;
  gap: 14px;
  justify-content: flex-start;
  margin-bottom: 0;
}
.cart-count-badge { margin-bottom: 0; }
.cart-big-title { display: none; }

.cart-items { margin-top: 0; gap: 14px; }

.cart-item-card {
  border-radius: 16px;
  border: 1px solid var(--divider);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  gap: 18px;
  transition: box-shadow 0.18s, border-color 0.18s;
}
.cart-item-card:hover { box-shadow: var(--shadow-md); border-color: #D8DCE3; }

.cart-item-img,
.cart-item-img-placeholder { width: 112px; height: 140px; }

.cart-item-name { font-size: 15px; }

.cart-item-actions { max-width: 320px; }

.qty-btn:hover { background: var(--bg-input); }
.cart-remove-btn:hover { color: var(--error); }
.cart-action-buy:hover { background: #E3E6EB; }
.cart-fit-btn:hover { background: var(--brand-blue-dark); }

/* 주문 요약 패널 */
.cart-summary-bar {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 24px;
}

.cart-summary-title {
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 18px;
}

.cart-summary-row + .cart-summary-row { margin-top: 10px; }

.cart-fitting-cta { border-radius: 12px; }
.cart-fitting-cta:hover { background: var(--brand-blue-dark); }

.cart-summary-note {
  font-size: 12px;
  color: var(--text-light);
  line-height: 1.6;
  margin-top: 14px;
  text-align: center;
}

.cart-empty { border: 1px solid var(--divider); box-shadow: none; }

/* -----------------------------------------------------------------
   7. 가상 피팅 — 업로드 | 상품·시작
   ----------------------------------------------------------------- */
.fitting-content { padding: 0; }

.fitting-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 28px;
  align-items: start;
}

.fitting-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.fitting-card,
.fitting-cta-card {
  border: 1px solid var(--divider);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 24px;
}

.fitting-upload-card .upload-frame {
  height: clamp(380px, 46vw, 560px);
  border-radius: 16px;
  margin-top: 18px;
}

.fitting-item-card { padding: 0; border-radius: 12px; }
.fitting-item-img,
.fitting-item-img-placeholder { width: 100px; height: 124px; }
.fitting-item-name { font-size: 16px; }

.fitting-change-btn:hover { text-decoration: underline; }

.fitting-library-card { margin-top: 28px; }

.fitting-library-scroll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
  overflow: visible;
  padding: 16px 0 0;
}
.fitting-library-item {
  width: auto;
  min-width: 0;
  text-align: left;
  align-self: start;
  border-radius: 12px;
}
.fitting-library-item:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 5px; }
.fitting-library-detail { display: block; margin-top: 10px; font-size: 12px; font-weight: 700; color: var(--brand-blue); }
.saved-fit-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.saved-fit-chip { padding: 3px 8px; border-radius: 6px; background: var(--bg-gray); color: var(--text-dark); font-size: 11px; font-weight: 700; }
.saved-fit-chip.recommended { background: var(--brand-blue-light); color: var(--brand-blue); }
.saved-fit-score { font-size: 12px; font-weight: 700; color: var(--text-dark); }
.saved-fit-empty { font-size: 11px; color: var(--text-light); }
.fd-snapshot-note { font-size: 12px; line-height: 1.6; color: var(--text-light); }
.fd-saved-fit .result-card { margin-top: 16px; padding: 16px; }
.fd-info-col { min-width: 0; }
.fitting-library-img,
.fitting-library-img-placeholder {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
}
.fitting-library-empty { background: var(--bg-gray); }

/* 대기 화면 — 사진 미리보기 | 진행 상태 패널 */
.fitting-waiting-page { max-width: 1060px; }   /* 제목과 본문 좌측선을 맞춘다 */
.waiting-layout {
  grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
  gap: 36px;
}

/* -----------------------------------------------------------------
   8. 피팅 결과 — 이미지 | 정보·리포트
   ----------------------------------------------------------------- */
.result-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 40px;
  align-items: start;
}

.result-img-col {
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-input);
  box-shadow: var(--shadow-md);
}

.result-info-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.result-card {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 22px;
  margin-top: 0;
}

.result-card-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 핏 리포트 주의사항.
   앰버 세로선은 '경고'가 아니라 그냥 '표시'였다.
   여기서는 제목 + 경고 아이콘으로 무슨 종류의 글인지 먼저 말하고,
   본문은 점 불릿으로 목록임을 드러낸다. 답변 말풍선과 절대 헷갈리지 않는 색이다. */
.fit-notes {
  margin-top: 12px;
  padding: 12px 14px;
  background: #FFFBF0;
  border: 1px solid #F0DCA8;
  border-radius: 10px;
}

.fit-notes-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #8A5A00;
  margin-bottom: 7px;
}

.fit-notes-title::before {
  content: '';
  flex: none;
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A5A00' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}

.fit-note {
  position: relative;
  padding-left: 11px;
  font-size: 12px;
  line-height: 1.65;
  color: #6B5836;
  overflow-wrap: anywhere;
}

.fit-note + .fit-note { margin-top: 5px; }

.fit-note::before {
  content: '';
  position: absolute;
  left: 1px;
  top: 0.62em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #C08A1E;
}

.result-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
}

.result-item-name { font-size: 19px; font-weight: 700; color: var(--text-black); }
.result-item-brand { font-size: 13px; color: var(--text-dark); margin-top: 3px; }

.result-buy-btn {
  height: 38px;
  padding: 0 16px;
  background: var(--brand-blue-light);
  color: var(--brand-blue);
  font-size: 13px;
  font-weight: 700;
  border-radius: 9px;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s;
}
.result-buy-btn:hover { background: #D5E2FF; }

.result-coin-note { font-size: 12px; color: var(--text-light); margin-top: 14px; }

.fitting-result-actions {
  background: transparent;
  border-top: none;
  padding: 0;
  gap: 12px;
}
.fitting-result-actions .btn-outline,
.fitting-result-actions .btn-primary { flex: 1; }

/* -----------------------------------------------------------------
   9. 피팅 히스토리
   ----------------------------------------------------------------- */
.history-list {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
}

.history-item-card {
  border: 1px solid var(--divider);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 18px;
  transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
}
.history-item-card[data-has-fit="1"]:hover {
  box-shadow: var(--shadow-md);
  border-color: #D8DCE3;
  transform: translateY(-2px);
}

.history-item-img,
.history-item-img-placeholder { width: 96px; height: 122px; }

.history-empty, .loading-overlay { grid-column: 1 / -1; }

/* -----------------------------------------------------------------
   10. 마이페이지 — 프로필 | 메뉴
   ----------------------------------------------------------------- */
.mypage-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.mypage-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.mypage-main { display: flex; flex-direction: column; gap: 10px; }

.mypage-header { display: none; }

.mypage-profile-section {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--divider);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.profile-avatar { width: 72px; height: 72px; }

.coin-card { margin: 0; border-radius: 16px; box-shadow: var(--shadow-sm); }
.coin-charge-btn:hover { background: rgba(255,255,255,0.32); }

.mypage-group-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 18px 0 4px;
}
.mypage-main > .mypage-group-title:first-child { margin-top: 0; }

.mypage-menu-section {
  margin-top: 0;
  border: 1px solid var(--divider);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.mypage-menu-item { padding: 18px 24px; }
.mypage-menu-item:hover { background: var(--bg-gray); }
.mypage-menu-text { font-size: 15px; }

/* -----------------------------------------------------------------
   11. 설정 · 공지 · 알림 · 문의 (좁은 컨테이너)
   ----------------------------------------------------------------- */
.settings-header {
  position: static;
  height: auto;
  background: transparent;
  border-bottom: none;
  padding: 40px 0 24px;
  gap: 10px;
}

.settings-back-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  transition: background 0.15s;
}
.settings-back-btn:hover { background: var(--bg-input); }

.settings-header-title {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.settings-section-label { padding: 24px 0 10px; }

.settings-menu-section,
.notif-list,
.notice-list {
  margin: 0;
  border: 1px solid var(--divider);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  background: var(--white);
  overflow: hidden;
}

.notice-list {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.notice-card { border-radius: 0; padding: 22px 24px; }
.notice-card + .notice-card { border-top: 1px solid var(--divider); }

.settings-menu-item:hover { background: var(--bg-gray); }
.notif-item--notice:hover { background: #E8F0FE; }

.inquiry-form-section {
  padding: 24px;
  border: 1px solid var(--divider);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
}
.inquiry-history { padding: 0; gap: 12px; }
.inquiry-card { border: 1px solid var(--divider); box-shadow: var(--shadow-sm); }
/* 폭이 넉넉할 때만 답변을 한 단 들여쓴다 (좁은 화면 규칙은 max-width:900px에서 되돌림) */
.inquiry-answer { margin-left: 28px; padding: 14px 16px; }
.inquiry-submit-btn { max-width: 240px; align-self: flex-end; }

.notif-settings-page .settings-menu-section { margin: 0; }
.notif-preview { max-width: none; }

/* -----------------------------------------------------------------
   12. 로그인 · 회원가입 · 신체정보 (중앙 카드)
   ----------------------------------------------------------------- */
.auth-page,
.body-data-page {
  width: 100%;
  max-width: 460px;
  min-height: auto;
  margin: 40px auto;
  padding: 44px 40px 40px;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.auth-logo { margin-top: 0; margin-bottom: 28px; font-size: 26px; }
.auth-title { font-size: 28px; }

.auth-footer-link:hover { text-decoration: underline; }

.body-data-page { max-width: 560px; }
.body-data-content { padding: 0; overflow: visible; }
.body-data-header { padding: 0 0 24px; }
.body-data-actions { padding: 24px 0 0; }

.input-field:hover { background: #EBEDF0; }
.input-field:focus { background: white; }

/* -----------------------------------------------------------------
   13. 전역 푸터
   ----------------------------------------------------------------- */
.site-footer {
  margin-top: auto;
  background: var(--white);
  border-top: 1px solid var(--divider);
}
.site-footer.hidden { display: none !important; }

.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px var(--gutter) 40px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer-logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--brand-blue);
}

.footer-desc {
  font-size: 13px;
  color: var(--text-dark);
  line-height: 1.8;
  margin-top: 14px;
  max-width: 40ch;
}

.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

.footer-col-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-black);
  margin-bottom: 4px;
}

.footer-link {
  font-size: 13px;
  color: var(--text-dark);
  background: none;
  padding: 0;
  text-align: left;
  transition: color 0.15s;
}
.footer-link:hover { color: var(--brand-blue); }

.footer-bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px var(--gutter) 28px;
  border-top: 1px solid var(--divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  color: var(--text-light);
}

/* -----------------------------------------------------------------
   14. 반응형
   ----------------------------------------------------------------- */

/* 태블릿 */
@media (max-width: 1100px) {
  :root { --gutter: 24px; }

  .pd-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
  .cart-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
  .fitting-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; }
  .result-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; }
  .waiting-layout { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 26px; }
  .mypage-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 24px; }
  .products-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-card { padding: 36px 32px; gap: 16px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
  .site-header .nav-item span { display: none; }
  .site-header .nav-item { padding: 0 12px; }
  .site-header .nav-item .nav-icon { width: 20px; height: 20px; }
}

/* 모바일 — 단일 컬럼 + 하단 탭바 */
@media (max-width: 900px) {
  :root { --gutter: 16px; }

  /* 헤더는 브랜드 + 액션만, 내비게이션은 하단 탭바가 담당 */
  .header-inner { height: 56px; gap: 12px; }
  .main-nav { display: none; }
  .header-actions { margin-left: auto; }
  .brand { font-size: 19px; }

  /* 마이페이지는 하단 탭바가 담당 — 헤더에서는 감춘다 */
  #hdr-mypage-btn { display: none; }
  .hdr-logout-btn { height: 32px; padding: 0 10px; font-size: 12px; }
  .hdr-login-btn { height: 32px; padding: 0 12px; font-size: 12px; }

  .bottom-nav { display: flex; }
  .bottom-nav.hidden { display: none !important; }

  /* 하단 탭바 + 홈 인디케이터가 가리는 만큼 여백 */
  .site-footer { padding-bottom: var(--bottom-nav-total); }
  /* 전역 헤더가 없는 화면이므로 헤더 높이를 빼지 않는다 */
  #page-container.no-nav { min-height: 100dvh; }

  .page-head { padding: 24px 0 18px; }

  .pd-layout,
  .cart-layout,
  .fitting-layout,
  .waiting-layout,
  .result-layout,
  .mypage-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  .product-img-wrap,
  .cart-summary-bar,
  .fitting-side,
  .waiting-panel,
  .result-info-col,
  .mypage-side { position: static; top: auto; }

  /* 모바일에선 진행 상태 패널이 먼저 보이도록 */
  .waiting-layout { display: flex; flex-direction: column; }
  .waiting-panel { order: -1; }
  .waiting-preview { max-height: none; }

  .products-row,
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }

  .history-list { grid-template-columns: minmax(0, 1fr); }

  .filter-bar { gap: 12px; padding: 12px; }
  .filter-bar .search-bar { width: 100%; }
  /* 카드 모서리까지 흘려보내 '옆으로 더 있다'가 보이게 한다 */
  .filter-bar .chips-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 0;
    width: calc(100% + 24px);
    margin: 0 -12px;
    padding: 0 12px;
    scroll-padding-left: 12px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .home-hero { padding: 18px 0 0; }
  .hero-card {
    grid-template-columns: minmax(0, 1fr);
    padding: 32px 24px;
    min-height: 0;
  }
  .hero-visual { display: none; }
  .hero-sub { font-size: 14px; }
  .hero-actions { margin-top: 20px; }
  .hero-cta, .hero-cta-ghost { flex: 1 1 auto; justify-content: center; height: 46px; }
  .hero-points { gap: 8px 16px; margin-top: 20px; }
  .home-section { padding-top: 32px; }

  .auth-page,
  .body-data-page {
    width: 100%;
    margin: 0 auto;
    padding: 32px 24px calc(32px + env(safe-area-inset-bottom, 0px));
    border-radius: 0;
    box-shadow: none;
    /* 100vh 는 주소창 높이를 포함해 화면보다 커진다 */
    min-height: 100dvh;
  }

  .fitting-upload-card .upload-frame { height: 300px; }

  .product-name { font-size: 24px; }

  .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; padding: 36px var(--gutter) 24px; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* 폰에서는 들여쓰기를 걷어내 본문 폭을 지킨다 */
  .inquiry-answer { margin-left: 0; padding: 12px 14px; }

  .toast { bottom: calc(var(--bottom-nav-total) + 16px); }

  /* 입력 글꼴 16px — 그 아래면 iOS Safari 가 포커스할 때 화면을 확대해 버리고
     되돌아오지 않는다. 확대된 채로 남는 것이 '화면이 깨진' 것처럼 보이는 주된 원인. */
  .input-field,
  .search-input,
  .inquiry-input,
  .inquiry-select,
  .inquiry-textarea,
  .pw-reset-input { font-size: 16px; }

  /* 노치가 있는 기기의 가로모드 — 본문이 노치 아래로 들어가지 않게 한다 */
  .home-page,
  .popular-page,
  .product-detail-page,
  .cart-page,
  .fitting-page,
  .fitting-waiting-page,
  .fitting-result-page,
  .fitting-history-page,
  .mypage,
  .settings-page,
  .notice-page,
  .notifications-page,
  .notif-settings-page,
  .inquiry-page {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .header-inner,
  .footer-inner,
  .footer-bottom {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .bottom-nav {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }

  /* 손가락으로 누를 크기 — 19px 짜리 텍스트 링크와 32px 아이콘은 빗나간다 */
  .footer-col { gap: 0; }
  .footer-link {
    display: flex;
    align-items: center;
    min-height: 40px;
  }
  .back-link { height: 40px; margin-bottom: 12px; }
  .settings-back-btn { width: 40px; height: 40px; margin-left: -8px; }
  .qty-btn { width: 34px; height: 34px; }
  .inquiry-submit-btn { max-width: none; align-self: stretch; }
  .cart-remove-btn { padding: 8px 0 8px 12px; }
}

@media (max-width: 480px) {
  /* 좁은 폰에서는 로그아웃 라벨을 접고 아이콘만 — 브랜드가 밀려나지 않게 한다.
     (aria-label/title 이 남아 있어 이름은 계속 읽힌다)
     텍스트 라벨을 감싸던 테두리를 아이콘 전용 상태까지 그대로 끌고 와서 생긴 버그:
     40px 박스에 여백 없이 딱 붙은 테두리 + 좌우로 넓게 뻗은 화살표 글리프라
     옆 아이콘(벨·장바구니, 21px·테두리 없음)보다 훨씬 커 보였다.
     같은 줄의 다른 아이콘 버튼과 같은 시각 언어로 맞춘다: 테두리 제거, 아이콘 21px로. */
  .hdr-logout-label { display: none; }
  .hdr-logout-icon { display: block; width: 21px; height: 21px; }
  .hdr-logout-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    margin-left: 2px;
    border: none;
    border-radius: 10px;
    /* 텍스트 필용 --text-dark(#666)가 남아 있으면 옆 아이콘(--text-black, .icon-btn)보다
       한 단계 옅어 보인다 — 크기·테두리를 맞춰도 색이 다르면 여전히 눈에 걸린다 */
    color: var(--text-black);
  }
  .hdr-logout-btn:hover { background: var(--bg-input); }

  .products-row,
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .size-buttons { grid-template-columns: repeat(2, 1fr); }
  .cart-item-card { padding: 14px; gap: 12px; }
  .cart-item-img,
  .cart-item-img-placeholder { width: 78px; height: 98px; }
  .cart-item-qty-row { gap: 6px; }
  .qty-btn { width: 30px; height: 30px; }
  /* 두 버튼을 같은 폭으로 — 1:2 로는 "구매하기"가 들어가지 않는다 */
  .cart-action-fit { flex: 1; }
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-container {
    max-width: none;
    border-radius: 20px 20px 0 0;
    max-height: calc(100dvh - 24px);
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .product-detail-actions { flex-wrap: wrap; }
  .product-detail-actions .btn-dark { flex: 1 1 100%; }
}

/* -----------------------------------------------------------------
   15. 피팅 히스토리 — 상세 모달
   ----------------------------------------------------------------- */
.history-item-card {
  cursor: pointer;
  align-items: stretch;
  position: relative;
}
.history-item-card:hover {
  box-shadow: var(--shadow-md);
  border-color: #D8DCE3;
  transform: translateY(-2px);
}
.history-item-card:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

.history-item-more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  align-self: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
  transition: color 0.15s;
}
.history-item-more svg { width: 14px; height: 14px; stroke: currentColor; }
.history-item-card:hover .history-item-more { color: var(--brand-blue); }

/* 오버레이 */
.fd-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(17,24,39,0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  animation: fdFade 0.16s ease-out;
}

@keyframes fdFade { from { opacity: 0; } to { opacity: 1; } }

.fd-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 940px;
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: fdRise 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes fdRise {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

.fd-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.9);
  color: var(--text-black);
  box-shadow: var(--shadow-sm);
  transition: background 0.15s;
}
.fd-close:hover { background: var(--bg-input); }
.fd-close svg { width: 17px; height: 17px; stroke: currentColor; }

.fd-body {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
  min-height: 0;
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  /* One scroll owner: wheel/touch works over the photo as well as the report. */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* 좌: 결과 이미지 */
.fd-image-col {
  position: sticky;
  top: 0;
  align-self: start;
  background: #E9ECF1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.fd-image {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
  object-fit: contain;
  display: block;
}

.fd-image-placeholder {
  width: 100%;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-light);
  font-size: 13px;
  background: linear-gradient(135deg, #E8ECF0 0%, #D0D5DE 100%);
}

/* 우: 정보 */
.fd-info-col {
  padding: 32px 32px 28px;
  overflow: visible;
  min-height: 0;
}

.fd-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue);
}

.fd-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 8px;
  line-height: 1.3;
}

.fd-brand {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  margin-top: 6px;
}

.fd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--bg-gray);
  border-radius: 12px;
}
.fd-meta dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-dark);
  text-transform: uppercase;
}
.fd-meta dd {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-black);
  margin-top: 4px;
}

.fd-section { margin-top: 26px; }

.fd-section-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin-bottom: 12px;
}

.fd-fit-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.fd-size-chip {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-blue);
  background: var(--brand-blue-light);
  border-radius: 20px;
  padding: 3px 10px;
}

.fd-fit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--divider);
}
.fd-fit-row:last-of-type { border-bottom: none; }

.fd-fit-part { font-size: 14px; color: var(--text-black); }

.fd-fit-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

/* 핏 추천 한마디 — 조언이라는 뜻이 드러나야 한다.
   바로 아래 .fd-empty-note("내용 없음")와 똑같은 회색 박스였던 탓에
   두 블록이 같은 말을 하는 것처럼 보였다. 여기만 브랜드 톤 + 전구 아이콘을 준다.
   아이콘은 이모지가 아니라 SVG(사이트의 다른 아이콘과 같은 선 굵기)다. */
.fd-reco {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  padding: 13px 15px;
  background: #F3F7FF;
  border: 1px solid rgba(0, 87, 255, 0.12);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-black);
}

.fd-reco::before {
  content: '';
  width: 16px;
  height: 16px;
  margin-top: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230057FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1.38.56 2.63 1.5 3.5.76.76 1.23 1.52 1.41 2.5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.fd-empty-note {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dark);
  padding: 14px 16px;
  background: var(--bg-gray);
  border-radius: 10px;
}

.fd-actions {
  display: flex;
  gap: 10px;
  margin-top: 28px;
}
.fd-actions .btn-outline,
.fd-actions .btn-primary { flex: 1; height: 48px; }
.fd-actions .fd-save-btn { text-decoration: none; }

@media (max-width: 900px) {
  .fd-overlay { padding: 0; align-items: stretch; height: 100dvh; }
  .fd-dialog {
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
  }
  .fd-body {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
    flex: 1;
  }
  /* 이미지 비율 그대로, 높이만 제한 — 세로 여백이 생기지 않도록 */
  .fd-image-col { position: static; align-items: flex-start; }
  .fd-image {
    width: 100%;
    height: auto;
    max-height: 52vh;
    object-fit: contain;
  }
  .fd-image-placeholder { min-height: 220px; }
  .fd-info-col { padding: 24px 20px calc(32px + env(safe-area-inset-bottom, 0px)); overflow: visible; }
  .fd-title { font-size: 20px; }
  .fd-actions { flex-direction: column; }
  .fd-actions .btn-outline,
  .fd-actions .btn-primary { flex: none; min-height: 48px; }
}

/* =================================================================
   16. 체형 온보딩 (body-onboarding)
   브랜드·사이즈 역산 → 실루엣·슬라이더 미세조정.
   기존 토큰만 쓰고 새 색을 만들지 않는다.
   ================================================================= */
.bo-page {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter) 80px;
  /* #page-container.no-nav 는 align-items:center 다. 내용이 화면보다 길면
     위쪽이 컨테이너 밖으로 밀려 스크롤로도 닿지 않는다 — 중앙정렬에서 빠진다. */
  align-self: stretch;
}

.bo-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0 8px;
}

.bo-skip {
  /* 뒤로가기가 숨는 가입 플로우에서도 오른쪽에 남는다 (topbar 는 space-between) */
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  padding: 8px 4px;
  transition: color 0.15s;
}
.bo-skip:hover { color: var(--text-black); }

/* --- 단계 표시 --- */
.bo-steps {
  display: flex;
  gap: 10px;
  margin: 8px 0 28px;
}

.bo-step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  border-top: 2px solid var(--stroke);
  color: var(--text-light);
  transition: color 0.2s, border-color 0.2s;
}
.bo-step.active,
.bo-step.done { border-top-color: var(--brand-blue); color: var(--brand-blue); }

.bo-step-num {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-input);
  color: var(--text-light);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}
.bo-step.active .bo-step-num,
.bo-step.done .bo-step-num { background: var(--brand-blue); color: var(--white); }

.bo-step-label { font-size: 13px; font-weight: 700; }

/* --- 타이포 --- */
.bo-title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.bo-lead {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-dark);
  margin-top: 10px;
  max-width: 52ch;
}
.bo-lead b { color: var(--text-black); font-weight: 700; }

.bo-note {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dark);
  margin-top: 10px;
  padding: 11px 13px;
  background: var(--bg-gray);
  border-radius: 10px;
}

/* --- 카드 --- */
.bo-card {
  margin-top: 22px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.bo-field + .bo-field { margin-top: 24px; }

.bo-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.bo-select {
  width: 100%;
  height: 48px;
  padding: 0 38px 0 14px;
  border: 1.5px solid var(--stroke);
  border-radius: var(--btn-radius);
  background-color: var(--white);
  font-size: 15px;
  color: var(--text-black);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px 16px;
  transition: border-color 0.15s;
}
.bo-select:focus { border-color: var(--brand-blue); }

/* --- 칩(카테고리 · 사이즈) --- */
.bo-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.bo-chip {
  height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1.5px solid var(--stroke);
  background: var(--white);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bo-chip:hover { border-color: #C9CFD8; color: var(--text-black); }
.bo-chip.selected {
  border-color: var(--brand-blue);
  background: var(--brand-blue-light);
  color: var(--brand-blue);
}
.bo-chip--size { min-width: 58px; padding: 0 12px; font-variant-numeric: tabular-nums; }

/* --- 핏 라디오 카드 --- */
.bo-fit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.bo-fit-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--stroke);
  background: var(--white);
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.bo-fit-card:hover { border-color: #C9CFD8; }
.bo-fit-card.selected { border-color: var(--brand-blue); background: var(--brand-blue-light); }

.bo-fit-name { font-size: 15px; font-weight: 800; color: var(--text-black); }
.bo-fit-card.selected .bo-fit-name { color: var(--brand-blue); }
.bo-fit-desc { font-size: 12px; line-height: 1.5; color: var(--text-dark); }

/* 성별 — 사이즈표·실루엣 목록이 여기서 갈리므로 맨 앞에 둔다. 카드 자체는 .bo-fit-card 재사용 */
.bo-gender-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.bo-gender-grid .bo-fit-card { align-items: center; text-align: center; }

/* --- 실루엣 카드 --- */
.bo-silhouette-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.bo-sil-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 16px 10px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--stroke);
  background: var(--white);
  transition: border-color 0.15s, background 0.15s;
}
.bo-sil-card:hover { border-color: #C9CFD8; }
.bo-sil-card.selected { border-color: var(--brand-blue); background: var(--brand-blue-light); }

.bo-sil-figure {
  display: block;
  height: 86px;
}
/* 실제 이미지가 준비되면 이걸 쓴다 — object-fit:contain 이라 세로 긴 인물 사진도 잘린 채 보이지 않는다 */
.bo-sil-img { display: block; height: 100%; width: auto; margin: 0 auto; object-fit: contain; }

.bo-sil-name { font-size: 13px; font-weight: 800; color: var(--text-black); margin-top: 8px; }
.bo-sil-card.selected .bo-sil-name { color: var(--brand-blue); }
.bo-sil-desc { font-size: 11.5px; line-height: 1.45; color: var(--text-dark); text-align: center; }

/* --- 신체 치수 조정 --- */
.bo-tune-heading { margin-bottom: 24px; }
.bo-tune-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--text-black); }

.bo-slider-group { display: flex; flex-direction: column; gap: 22px; }

.bo-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.bo-slider-label-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bo-slider-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-black);
  cursor: pointer;
}

.bo-hint-btn {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-input);
  color: var(--text-dark);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.bo-hint-btn:hover,
.bo-hint-btn.open { background: var(--brand-blue); color: var(--white); }
/* 보이는 원은 18px 그대로 두고 누를 수 있는 범위만 넓힌다 */
.bo-hint-btn::after { content: ''; position: absolute; inset: -11px; }

.bo-slider-readout { display: inline-flex; align-items: baseline; gap: 8px; }

.bo-slider-value {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-black);
  font-variant-numeric: tabular-nums;
}
.bo-unit { font-size: 12px; font-weight: 700; color: var(--text-light); margin-left: 2px; }

.bo-slider-delta {
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bo-slider-delta.up { color: var(--brand-blue); }
.bo-slider-delta.down { color: #E8722B; }

.bo-hint {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-dark);
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--bg-gray);
  border-radius: 8px;
}

/* 트랙·썸은 브라우저 기본값이 디자인을 무시하므로 직접 그린다 */
.bo-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
.bo-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-input);
}
.bo-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-input);
}
.bo-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--brand-blue);
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s;
}
.bo-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--brand-blue);
  box-shadow: var(--shadow-sm);
}
.bo-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.bo-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.bo-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

/* --- 하단 액션 --- */
.bo-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}
.bo-actions .btn-primary { max-width: 360px; }

.bo-textlink {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 4px;
  transition: color 0.15s;
}
.bo-textlink:hover { color: var(--brand-blue); }

@media (max-width: 900px) {
  .bo-page { padding-bottom: calc(var(--bottom-nav-total) + 24px); }
  .bo-card { padding: 20px 16px; }
  .bo-actions .btn-primary { max-width: none; }
}

@media (max-width: 560px) {
  .bo-fit-grid { grid-template-columns: minmax(0, 1fr); }
  .bo-fit-card { flex-direction: row; align-items: baseline; gap: 10px; }
  .bo-silhouette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-step-label { font-size: 12px; }
}
/* Photo capture and local retouching */
.photo-source-actions { display: flex; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.photo-source-btn { border: 1px solid #dbe2ed; border-radius: 10px; padding: 11px 15px; background: #fff; color: #28354b; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.photo-source-actions .photo-source-btn { flex: 1; }
.photo-source-btn.camera { color: #fff; background: var(--brand-blue, #0057ff); border-color: transparent; }
.photo-edit-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; line-height: 1.6; color: #657085; }
.photo-edit-row span { flex: 1; }
.photo-studio { width: min(1040px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid #e4e8ef; border-radius: 22px; color: #223047; background: #fff; box-shadow: 0 24px 100px #10204040; overflow: auto; }
.photo-studio::backdrop { background: #101827b8; }
.photo-studio [hidden] { display: none !important; }
.photo-studio button, .photo-studio select, .photo-studio input { font: inherit; }
.photo-studio button { cursor: pointer; }
.photo-studio button:disabled { opacity: .45; cursor: wait; }
.photo-studio button:focus-visible, .photo-source-btn:focus-visible, .photo-studio select:focus-visible, .photo-studio input:focus-visible { outline: 3px solid #83b2ff; outline-offset: 3px; }
.ps-header { display: flex; justify-content: space-between; align-items: center; padding: 22px 26px; border-bottom: 1px solid #edf0f5; }
.ps-eyebrow { font-size: 10px; letter-spacing: .18em; color: #5a78a3; font-weight: 700; }
.ps-header h2 { margin: 6px 0 0; font-size: 22px; font-weight: 700; }
.ps-close { width: 40px; height: 40px; border: 0; border-radius: 50%; font-size: 28px !important; background: #f3f5f8; color: #526074; }
.ps-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 26px; padding: 24px 26px; }
.ps-preview-wrap, .ps-controls { min-width: 0; }
.ps-preview { position: relative; height: min(56vh, 540px); min-height: 240px; background: #edf0f4; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ps-preview video, .ps-preview canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.ps-placeholder { position: absolute; padding: 24px; text-align: center; color: #64748b; font-size: 14px; }
.ps-countdown { position: absolute; inset: 0; display: grid; place-items: center; background: #0003; font-size: 90px; color: white; font-weight: 700; text-shadow: 0 2px 20px #0008; }
.ps-status { font-size: 12px; line-height: 1.7; color: #315f9a; margin: 12px 0 6px; overflow-wrap: anywhere; }
.ps-framing, .ps-hint { font-size: 12px; line-height: 1.7; color: #738096; margin: 6px 0 16px; }
.ps-controls section > label:not(.ps-original) { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin: 12px 0 8px; }
.ps-controls select { width: 100%; padding: 11px; background: #f8faff; border: 1px solid #dce3ee; border-radius: 9px; color: #26364e; }
.ps-primary, .ps-secondary { width: 100%; padding: 12px 10px; border-radius: 10px; font-size: 13px !important; font-weight: 600 !important; margin-top: 10px; }
.ps-primary { border: 1px solid transparent; background: #0057ff; color: white; }
.ps-secondary { border: 1px solid #dde4ef; background: #fff; color: #40516b; }
.ps-section-title { font-size: 16px; font-weight: 700; }
.ps-controls input[type=range] { display: block; width: 100%; -webkit-appearance: auto; appearance: auto; accent-color: #0057ff; height: 20px; }
.ps-slider-label output { color: #6e829f; font-weight: 400; }
.ps-original { display: flex; gap: 8px; align-items: center; font-size: 12px; margin: 18px 0 5px; }
.ps-original input { -webkit-appearance: auto; appearance: auto; width: 16px; height: 16px; flex-shrink: 0; accent-color: #0057ff; }
.ps-button-row { display: flex; gap: 8px; }
.ps-help { margin-top: 18px; font-size: 12px; color: #687990; line-height: 1.7; }
.ps-help summary { cursor: pointer; font-weight: 600; }
.ps-help p { margin: 10px 0 0; }
@media (max-width: 680px) {
  .photo-studio { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 16px; }
  .ps-header { padding: 16px; }
  .ps-header h2 { font-size: 19px; }
  .ps-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; }
  .ps-preview { height: 36vh; min-height: 210px; }
}