/* 모듈 — 페이지·섹션 단위 블록. 리셋·전역보다 세고, site가 이 위를 덮는다.
   리셋은 reset.css, 섹션 공통은 global.css로 갈라졌다(EN-042 단계 10). */
@layer base.modules {
  /* ── 히어로 섹션 ── */

  .hero {
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-lg);
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);
  }

  .hero-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-md);
  }

  .hero-title em {
    font-style: normal;
    color: var(--color-primary-text);
  }

  .hero-desc {
    font-size: var(--font-size-xl);
    color: var(--color-text-inverse);
    margin-bottom: var(--spacing-xl);
    line-height: var(--line-height-normal);
  }

  .hero .btn {
    margin-top: var(--spacing-md);
  }

  /* ── 스텝 흐름 ── */

  .steps {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    flex-wrap: wrap;
  }

  .step {
    flex: 1;
    min-width: 200px;
    max-width: 280px;
    text-align: center;
  }

  .step h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-sm);
  }

  .step p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  /* ── 비교 레이아웃 ── */

  .compare {
    padding: var(--spacing-3xl) var(--spacing-lg);
    max-width: 960px;
    margin: 0 auto;
  }

  .compare-heading {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    text-align: center;
    margin-bottom: var(--spacing-2xl);
  }

  .compare-block {
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
  }

  .compare-block--problem {
    background: #fef2f2;
    border: 1px solid #fecaca;
  }

  .compare-block--solution {
    background: var(--color-primary-light);
    border: 2px solid var(--color-primary);
  }

  .compare-block-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .compare-block--solution .compare-block-label {
    color: var(--color-primary-hover);
  }

  .compare-block-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
  }

  .compare-block-list {
    list-style: none;
    padding: 0;
  }

  .compare-block-list li {
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    padding-left: var(--spacing-md);
    position: relative;
  }

  .compare-block-list li::before {
    content: "·";
    position: absolute;
    left: 0;
    color: var(--color-text-muted);
  }

  .compare-block--solution .compare-block-list li::before {
    color: var(--color-primary-hover);
  }

  /* ── 스텝 타임라인 ── */

  .steps-section {
    padding: var(--spacing-3xl) var(--spacing-lg);
    background: var(--color-bg-subtle);
  }

  .steps-heading {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    color: var(--color-text);
  }

  .timeline {
    list-style: none;
    padding: 0;
    max-width: 560px;
    margin: 0 auto;
  }

  .timeline-item {
    display: flex;
    gap: var(--spacing-lg);
    position: relative;
    padding-bottom: var(--spacing-2xl);
  }

  .timeline-item:last-child {
    padding-bottom: 0;
  }

  .timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 36px;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
  }

  .timeline-marker {
    flex-shrink: 0;
    width: var(--size-36);
    height: var(--size-36);
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .timeline-body {
    padding-top: 6px;
  }

  .timeline-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-xs);
    color: var(--color-text);
  }

  .timeline-desc {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    line-height: var(--line-height-normal);
  }

  /* ── 가격 섹션 ── */

  .pricing {
    padding: var(--spacing-3xl) var(--spacing-lg);
    background: var(--color-bg);
  }

  .pricing-heading {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-bottom: var(--spacing-2xl);
  }

  .pricing-card {
    max-width: 560px;
    margin: 0 auto;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-glow);
  }

  .pricing-price {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-bottom: var(--spacing-xs);
  }

  .pricing-price-sub {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: var(--spacing-xl);
  }

  .pricing-highlights {
    list-style: none;
    padding: 0;
    margin-bottom: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .pricing-highlight-item {
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
  }

  .pricing-highlight-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xs);
  }

  .pricing-highlight-desc {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
  }

  .pricing-summary-title {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-sm);
  }

  .pricing-summary {
    list-style: none;
    padding: 0;
  }

  .pricing-summary li {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    padding: var(--spacing-xs) 0;
    padding-left: var(--spacing-md);
    position: relative;
  }

  .pricing-summary li::before {
    content: "·";
    position: absolute;
    left: 0;
  }

  /* ── 문의 폼 팝업 ── */

  .inquiry-popup {
    position: fixed;
    bottom: 120px;
    right: var(--spacing-lg);
    width: 340px;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-lg);
    display: none;
  }

  .inquiry-popup.active {
    display: block;
  }

  .inquiry-popup h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
  }

  .inquiry-popup .input,
  .inquiry-popup .textarea {
    margin-bottom: var(--spacing-sm);
  }

  .inquiry-popup .btn {
    width: 100%;
    margin-top: var(--spacing-sm);
  }

  /* ── FAB ── */

  .fab {
    position: fixed;
    bottom: 40px;
    right: 40px;
    display: flex;
    gap: 12px;
    width: max-content;
    z-index: 100;
    background: transparent;
  }

  .fab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    padding: 10px 20px;
    border-radius: var(--radius-full);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    border: none;
  }

  .fab-btn--primary {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
  }

  .fab-btn--outline {
    background: var(--color-bg);
    color: var(--color-accent);
    border: 1px solid var(--color-border);
  }

  /* ── 결제 폼 ── */

  .payment-form {
    max-width: var(--width-compact);
    margin: 0 auto;
    text-align: center;
  }

  .payment-form .input {
    margin-bottom: var(--spacing-sm);
  }

  .payment-form .btn {
    width: 100%;
    margin-top: var(--spacing-md);
  }

  /* ── 결과 페이지 ── */

  .centered-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: var(--spacing-2xl);
  }

  .centered-box .alert {
    max-width: 480px;
    text-align: center;
    font-size: var(--font-size-lg);
  }

  /* ── 모바일 ── */

  @media (max-width: 640px) {
    .hero-title {
      font-size: var(--font-size-2xl);
    }

    .hero-desc {
      font-size: var(--font-size-md);
    }

    .steps {
      flex-direction: column;
      align-items: center;
    }

    .compare-heading {
      font-size: var(--font-size-xl);
    }

    .inquiry-popup {
      width: calc(100% - var(--spacing-xl));
      right: var(--spacing-md);
    }
  }

  /* ── 장바구니 페이지 ── */

  .cart-page {
    max-width: 720px;
    margin: var(--spacing-xl) auto;
    padding: 0 var(--spacing-md);
  }

  .cart-page h1 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-md);
  }

  .cart-empty {
    color: var(--color-text-muted);
  }

  .cart-item {
    display: grid;
    grid-template-columns: var(--size-92) 1fr auto; /* 이미지 칸 폭 — 이커머스 표준 썸네일 규모 */
    grid-template-rows: auto auto auto; /* 1행: 삭제, 2행: 스테퍼, 3행: 소계 — 이미지·정보는 세 행에 걸쳐 중앙 정렬 */
    column-gap: var(--spacing-lg);
    row-gap: var(--spacing-xs);
    padding: var(--spacing-xl) 0;
  }

  .cart-items .cart-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .cart-items .cart-item:first-child {
    padding-top: 0;
  }

  .cart-item-image {
    grid-row: 1 / 4;
    width: var(--size-92);
    height: var(--size-92);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-subtle);
    flex-shrink: 0;
  }

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

  .cart-item-info {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    min-width: 0;
  }

  .cart-item-name {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
  }

  .cart-item-size,
  .cart-item-brand {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
  }

  .cart-item-variant {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
  }

  /* 삭제 — 이름 옆이 아니라 행 전체의 우상단 모서리(이커머스 통용 배치). */
  .cart-item-remove-form {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .cart-item-remove {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-xl);
    line-height: 1;
    cursor: pointer;
    padding: 0;
  }

  .cart-item-remove:hover {
    color: var(--color-text);
  }

  .cart-item-actions {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    align-items: center;
  }

  .cart-item-subtotal {
    grid-column: 3;
    grid-row: 3;
    justify-self: end;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
  }

  .cart-summary-card {
    padding-top: var(--spacing-lg);
    margin-top: var(--spacing-lg);
  }

  .cart-summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
  }

  .cart-summary-label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
  }

  .cart-total {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-3xl);
  }

  .cart-price-notice {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
  }

  /* 결제 CTA·카탈로그 이동 버튼 묶음 — .cart-summary-card(배송지·합계) 밖으로 분리했다
     (설계 논의 08-14, "summary card"라는 이름에 고지문·버튼까지 담기는 게 안 맞아서). */
  .cart-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);  /* 누락돼 있던 간격 — 두 버튼이 완전히 붙어 보이던 문제(2026-08-15) */
  }
  .cart-actions .btn {
    width: 100%;
  }

  @media (max-width: 480px) {
    .cart-item {
      grid-template-columns: var(--size-48) 1fr;
      grid-template-rows: auto auto auto auto; /* 1행: 이름+삭제, 2행: 용량·브랜드, 3행: 스테퍼, 4행: 소계 —
                                                    이미지·정보는 1~2행만 차지해 3~4행의 전체 폭 요소와 겹치지 않는다 */
    }

    .cart-item-image {
      grid-row: 1 / 3;
      width: var(--size-48);
      height: var(--size-48);
    }

    .cart-item-info {
      grid-row: 1 / 3;
    }

    .cart-item-remove-form {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
    }

    .cart-item-actions {
      grid-column: 1 / -1;
      grid-row: 3;
      justify-content: flex-start;
    }

    .cart-item-subtotal {
      grid-column: 1 / -1;
      grid-row: 4;
      justify-self: start;
    }
  }
}

/* ── 파트너 인증 화면 (partner_auth_layout.html) ── 가입·로그인·비밀번호 찾기 공통 카드.
   클래스명(signup-*)은 템플릿 주석대로 렌더 무변화 범위 밖의 개명이라 보류 — 그대로 둠. */
@layer base.modules {
  body.partner-signup {
    background: var(--color-bg-subtle);
    color: var(--color-text);
    font-family: var(--font-family);
  }

  .signup-locale {
    display: flex;
    justify-content: flex-end;
    max-width: 420px; /* 카드 폭 고정 — 간격 개념 아님, 리터럴 유지 */
    margin: var(--spacing-md) auto 0; /* 16px → --spacing-md (base 16px / site 12px) */
    padding: 0 var(--spacing-xs); /* 4px → --spacing-xs (base 4px / site 4px) */
  }

  .signup-card,
  .signup-card *,
  .auth-card,
  .auth-card * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .signup-card .step-list--dot {
    /* 위 * 리셋(margin:0)이 step-list--dot의 가운데 정렬용 margin-left/right:auto를
       덮어써 무효화한다 — 더 구체적인 셀렉터로 다시 선언해 되돌린다. */
    margin-left: auto;
    margin-right: auto;
  }

  .signup-card,
  .auth-card {
    width: calc(100% - 2 * var(--spacing-lg)); /* 좁은 화면에서 좌우 최소 여백 보장 */
    max-width: 420px; /* 카드 폭 고정 — 간격 개념 아님, 리터럴 유지 */
    margin: var(--spacing-2xl) auto var(--spacing-2xl); /* 44px/50px → --spacing-2xl (base 48px / site 24px), 동점 시 큰 쪽 */
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--signup-radius, 12px);
    padding: var(--spacing-xl) var(--spacing-lg); /* 30px→--spacing-xl(32/20), 26px→--spacing-lg(24/16) */
  }

  .signup-card .logo {
    text-align: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl); /* 22px → --font-size-xl (base 24px / site 18px), 동점 시 큰 쪽 */
    color: var(--color-primary-text);
  }

  .signup-card .logo span {
    color: var(--color-text);
  }

  .signup-card h1,
  .auth-card h1 {
    text-align: center;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-top: var(--spacing-md); /* 14px → --spacing-md (base 16px / site 12px) */
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.4px; /* 자간 미세조정 — 스케일 개념 아님, 리터럴 유지 */
  }

  .signup-steps__details-trigger {
    display: inline-block;
    margin-top: var(--spacing-sm); /* 8px → --spacing-sm */
    font-size: var(--font-size-sm); /* 13px → --font-size-sm */
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-text);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .signup-steps__details-list {
    list-style: none;
    margin: 0 0 var(--spacing-md);
    padding: 0;
  }

  .signup-steps__details-list li {
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
  }

  .signup-card .error {
    background: #fdecea; /* 오류 배너 전용 색 — 색상 토큰 스케일 밖, 리터럴 유지 */
    border: 1px solid #f5c6c0;
    border-radius: var(--radius-md); /* 8px → --radius-md (base 8px / site 12px) */
    color: #b3261e;
    font-size: var(--font-size-sm); /* 13px → --font-size-sm (base 14px / site 12px) */
    line-height: var(--line-height-normal);
    padding: var(--spacing-sm) var(--spacing-md); /* 10px→--spacing-sm(8/8), 12px→--spacing-md(16/12) */
    margin-bottom: var(--spacing-md); /* 14px → --spacing-md (base 16px / site 12px) */
  }

  .signup-card .error a {
    color: inherit;
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
  }

  .signup-card label,
  .auth-card label {
    display: block;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    margin: var(--spacing-md) 0 var(--spacing-sm); /* 12px→--spacing-md(16/12, 동점 큰 쪽), 6px→--spacing-sm(8/8) */
  }

  .signup-card label .opt {
    font-weight: var(--font-weight-normal);
    color: var(--color-text-muted);
  }

  .signup-card input[type="email"],
  .signup-card input[type="password"],
  .signup-card input[type="text"],
  .auth-card input[type="email"],
  .auth-card input[type="password"],
  .auth-card input[type="text"] {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md); /* 8px → --radius-md (base 8px / site 12px) */
    padding: var(--spacing-md); /* 12px → --spacing-md (base 16px / site 12px, 동점 큰 쪽) */
    font-size: var(--font-size-lg);
    font-family: inherit;
    background: var(--color-bg-subtle);
  }

  .signup-card .agree {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm); /* 8px → --spacing-sm (base 8px / site 8px) */
    margin: var(--spacing-md) 0 var(--spacing-sm); /* 18px→--spacing-md(16/12), 6px→--spacing-sm(8/8) */
    font-size: var(--font-size-sm); /* 13px → --font-size-sm (base 14px / site 12px) */
    line-height: var(--line-height-normal);
    color: var(--color-text);
  }

  .signup-card .agree a {
    color: var(--color-primary-text);
    text-decoration: underline;
  }

  /* consent-checkbox-item 컴포넌트(_consent_checkbox_item.html) 최소 스타일 — site 오버라이드
     (santa-here-global의 sh-consent-* 규칙)가 없는 사이트에서도 체크박스·레이블이 한 줄로
     붙고 링크가 눌리도록 하는 base 레벨 대응. .signup-card label의 굵게·block 규칙을
     여기서만 되돌린다(과거 .agree가 인라인 style로 하던 것과 동일한 목적). */
  .signup-card .sh-consent-item {
    margin: var(--spacing-md) 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-text);
  }

  .signup-card .sh-consent-head {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .signup-card .sh-consent-head label {
    display: inline;
    font-weight: var(--font-weight-normal);
    margin: 0;
  }

  .signup-card .sh-consent-links {
    margin: var(--spacing-xs) 0 0 calc(18px + var(--spacing-sm));
    font-size: var(--font-size-sm);
  }

  .signup-card .sh-consent-links a,
  .signup-card .sh-consent-summary a {
    color: var(--color-primary-text);
    text-decoration: underline;
  }

  .signup-card .btn-submit,
  .auth-card .btn-submit {
    display: block;
    width: 100%;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    font-size: var(--font-size-md); /* 15px → --font-size-md (base 16px / site 14px) */
    font-weight: var(--font-weight-bold);
    border: none;
    border-radius: var(--radius-md); /* 10px → --radius-md (base 8px / site 12px) */
    padding: var(--spacing-md) 0; /* 14px → --spacing-md (base 16px / site 12px) */
    margin-top: var(--spacing-md); /* 16px → --spacing-md (base 16px / site 12px) */
    cursor: pointer;
  }

  .signup-card .btn-submit:hover,
  .auth-card .btn-submit:hover {
    background: var(--color-primary-hover);
  }

  .signup-card .to-login,
  .auth-card .to-login {
    text-align: center;
    font-size: var(--font-size-sm); /* 13px → --font-size-sm (base 14px / site 12px) */
    color: var(--color-text-muted);
    margin-top: var(--spacing-md); /* 16px → --spacing-md (base 16px / site 12px) */
  }

  .signup-card .to-login a,
  .auth-card .to-login a {
    color: var(--color-primary-text);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
  }

  /* 완료 화면 */
  .signup-card.done {
    text-align: center;
  }

  .signup-card.done .big {
    font-size: var(--font-size-2xl); /* 34px → --font-size-2xl (base 32px / site 22px) */
  }

  .signup-card.done h1 {
    margin-top: var(--spacing-sm); /* 8px → --spacing-sm (base 8px / site 8px) */
  }

  .signup-card .link-copy {
    display: flex;
    gap: var(--spacing-sm); /* 8px → --spacing-sm (base 8px / site 8px) */
    margin: var(--spacing-lg) 0 var(--spacing-md); /* 20px→--spacing-lg(24/16, 동점 큰 쪽), 14px→--spacing-md(16/12) */
  }

  .signup-card .link-copy code {
    flex: 1;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md); /* 8px → --radius-md (base 8px / site 12px) */
    padding: var(--spacing-md); /* 12px → --spacing-md (base 16px / site 12px, 동점 큰 쪽) */
    font-size: var(--font-size-sm); /* 13px → --font-size-sm (base 14px / site 12px) */
    color: var(--color-primary-hover);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .signup-card .link-copy button {
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    border-radius: var(--radius-md); /* 8px → --radius-md (base 8px / site 12px) */
    padding: 0 var(--spacing-md); /* 16px → --spacing-md (base 16px / site 12px) */
    font-size: var(--font-size-sm); /* 13px → --font-size-sm (base 14px / site 12px) */
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    font-family: inherit;
  }

  .signup-card.done .hint {
    font-size: var(--font-size-sm); /* 13px → --font-size-sm (base 14px / site 12px) */
    color: var(--color-text-muted);
    line-height: 1.8; /* line-height 스케일(1.3/1.6)에 없는 값 — 리터럴 유지 */
  }

  .signup-card.done .hint strong {
    color: var(--color-primary-text);
  }

  .signup-card .btn-dash {
    display: inline-block;
    margin-top: var(--spacing-md); /* 18px → --spacing-md (base 16px / site 12px) */
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm); /* 14px → --font-size-sm (base 14px / site 12px) */
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-md); /* 10px → --radius-md (base 8px / site 12px) */
    padding: var(--spacing-md) var(--spacing-xl); /* 12px→--spacing-md(16/12, 동점 큰 쪽), 28px→--spacing-xl(32/20) */
    text-decoration: none;
  }
}

/* ── 카탈로그 페이지 (catalog.html) ── 사이트가 자체 카탈로그를 두지 않을 때의 기본형. */
@layer base.modules {
  .catalog-grid {
    max-width: 1080px; /* 페이지 폭 상한 — 간격 개념 아님, 리터럴 유지 */
    margin: var(--spacing-xl) auto;
    padding: 0 var(--spacing-md);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }

  @media (min-width: 768px) {
    .catalog-grid { grid-template-columns: repeat(3, 1fr); }
  }

  .catalog-card {
    display: block;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
  }

  .catalog-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: var(--color-bg-subtle);
  }

  .catalog-card .card-body { padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md); }
  .catalog-card .name { font-size: var(--font-size-sm); line-height: var(--line-height-tight); }
  .catalog-card .volume,
  .catalog-card .brand { font-size: 12px; color: var(--color-text-muted); }
  .catalog-card .price { margin-top: var(--spacing-xs); font-weight: var(--font-weight-bold); }

  .catalog-card .card-badge {
    display: inline-block;
    margin-bottom: var(--spacing-xs);
    font-size: 11px; /* 배지 글자 — base 최소 단계(14px)보다 작아 태울 자리가 없다 */
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-text);
  }
}

/* ── 상품 상세 페이지 (product_landing.html) ── 사이트가 자체 상세를 두지 않을 때의 기본형. */
@layer base.modules {
  .product-hero {
    max-width: 560px; /* 본문 단 폭 — 간격 개념 아님, 리터럴 유지 */
    margin: var(--spacing-xl) auto;
    padding: 0 var(--spacing-md);
    text-align: center;
  }

  .product-hero img {
    width: 100%;
    border-radius: var(--radius-md);
    background: var(--color-bg-subtle);
  }

  .product-hero h1 {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-tight);
  }

  .product-hero .volume,
  .product-hero .brand {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  .product-hero .price {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
  }

  .product-hero .buy,
  .product-hero .soldout {
    display: inline-block;
    margin-top: var(--spacing-lg);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-md);
    padding: 14px 40px; /* 버튼 몸집 — 간격 리듬이 아니라 타격 면적, 리터럴 유지 */
  }

  .product-hero .buy {
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    text-decoration: none;
  }

  .product-hero .soldout {
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
  }

  .product-hero .add-to-cart { display: inline-block; margin: var(--spacing-sm) 0 0 var(--spacing-sm); }

  .product-hero .add-to-cart-btn {
    background: var(--color-bg-subtle);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    cursor: pointer;
  }

  .detail-blocks {
    max-width: 560px; /* 본문 단 폭 — 위와 동일 */
    margin: 0 auto;
    padding: 0 var(--spacing-md);
  }

  .detail-block-image { width: 100%; display: block; }
  .detail-block-text { margin: var(--spacing-lg) 0; text-align: center; }
  .detail-block-text h2 { font-size: var(--font-size-lg); }
}