/* Bagle web — Apple marketing-style visual language unified with subtwo.ai
   (apps/corp). Modern monochrome base; Bagle's purple (#8b5cf6) is preserved
   as a single accent and on the hero wordmark gradient — its signature.
   Mobile theme tokens (apps/mobile/src/constants/theme.ts) are no longer
   mirrored here: the web brand is intentionally distinct from the in-app
   surface colors. */

:root {
  --bg: #ffffff;
  --bg-alt: #f5f5f7;       /* Apple-style soft section bg */
  --surface: #f5f5f7;      /* alias used by older classes */
  --surface-dim: #ebebef;
  --border: #d2d2d7;
  --border-light: #e5e5ea;
  --text: #1d1d1f;
  --text-secondary: #515154;
  --text-tertiary: #86868b;
  --text-muted: #86868b;
  --primary: #8b5cf6;      /* Bagle purple — single accent */
  --primary-dark: #6d28d9;
  --pink: #ec4899;         /* hero gradient pair */
  --link: var(--primary);
  --link-hover: var(--primary-dark);
  --max-width: 760px;
  color-scheme: light;
  background: var(--bg);
}

:root[data-theme="dark"] {
  --bg: #000000;
  --bg-alt: #161617;
  --surface: #161617;
  --surface-dim: #1f1f22;
  --border: #2c2c2e;
  --border-light: #3a3a3c;
  --text: #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-tertiary: #86868b;
  --text-muted: #86868b;
  --primary: #a78bfa;
  --primary-dark: #8b5cf6;
  --pink: #f472b6;
  --link: var(--primary);
  --link-hover: var(--primary-dark);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #000000;
    --bg-alt: #161617;
    --surface: #161617;
    --surface-dim: #1f1f22;
    --border: #2c2c2e;
    --border-light: #3a3a3c;
    --text: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary: #86868b;
    --text-muted: #86868b;
    --primary: #a78bfa;
    --primary-dark: #8b5cf6;
    --pink: #f472b6;
    --link: var(--primary);
    --link-hover: var(--primary-dark);
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Inter", "Segoe UI", Roboto, Helvetica, Arial, "Apple SD Gothic Neo",
    "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Right padding reserves room for the fixed theme-toggle (top-right,
     ~36px wide + 14px right offset + 8px breathing) so the lang
     switcher never collides with it. Applied at all viewport widths
     because desktop is just as susceptible as mobile. */
  padding: 16px 64px 16px 24px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.site-header .brand {
  font-weight: 700;
  color: var(--text);
}

.site-header .lang {
  color: var(--text-muted);
}

.site-header .lang a[aria-current="true"] {
  color: var(--text);
  font-weight: 600;
}

.site-header .lang-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-dim) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23999' d='M0 0l5 6 5-6z'/></svg>")
    no-repeat right 8px center;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 24px 6px 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}

.site-header .lang-select:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.doc {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 96px 24px 96px;
}

/* 종전 버전 문서 상단 배너. 본문 시작 전에 "이건 현행이 아니다" 를 먼저
   읽히게 한다 — h1 위에 온다. */
.doc-archive-notice {
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 32px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.doc-archive-notice a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.doc h1 {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 32px;
}

.doc h2 {
  font-size: 22px;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 12px;
}

.doc h3 {
  font-size: 17px;
  font-weight: 700;
  margin-top: 28px;
  margin-bottom: 8px;
}

.doc p,
.doc ul,
.doc ol {
  margin: 12px 0;
}

.doc ul,
.doc ol {
  padding-left: 24px;
}

.doc li {
  margin: 4px 0;
}

.doc hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 32px 0;
}

.doc table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0;
  font-size: 14px;
}

.doc th,
.doc td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.doc th {
  background: var(--surface-dim);
  font-weight: 600;
}

.doc code {
  background: var(--surface-dim);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.doc strong {
  font-weight: 700;
}

.doc blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  background: var(--surface-dim);
  border-left: 3px solid var(--primary);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 14px;
}

.doc blockquote p {
  margin: 0;
}

.site-footer {
  text-align: center;
  padding: 24px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 13px;
}

/* Theme toggle (fixed top-right, present on every page) */
.theme-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-dim);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  z-index: 10;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.theme-toggle:hover {
  border-color: var(--link);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

/* Show one icon based on current theme. The icon shown is the destination
   the click will switch TO (sun = "switch to light"). */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: inline;
}

:root[data-theme="light"] .theme-toggle .icon-moon,
:root:not([data-theme]) .theme-toggle .icon-moon {
  display: inline;
}

/* Landing — Apple marketing-style: full-bleed sections, oversized type,
   generous breathing room. Hero wordmark keeps the purple→pink gradient
   as Bagle's signature; everything else is monochrome with purple as the
   single accent. */
.landing {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}

.landing .hero {
  width: 100%;
  background: var(--bg);
  padding: 200px 32px 140px;
  text-align: center;
}

.landing .hero h1 {
  font-size: clamp(72px, 13vw, 156px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.1;
  /* padding accommodates descenders ('g') and ascenders that get clipped
     by background-clip:text at line-height:1 with very large sizes. */
  padding: 0.06em 0;
  margin: 0 0 36px;
  background: linear-gradient(135deg, var(--primary), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.landing .hero .tagline {
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 auto 14px;
  color: var(--text);
  max-width: 760px;
}

.landing .hero .sub-tagline {
  font-size: clamp(17px, 1.8vw, 22px);
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto 44px;
  line-height: 1.5;
}

/* Welcome credits — purple/pink gradient pill. Used on pricing page (and
   was previously on landing too). Global so it works in both scopes. */
.welcome-credits {
  display: inline-block;
  padding: 10px 22px;
  margin: 0;
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.1),
    rgba(236, 72, 153, 0.1)
  );
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.landing .welcome-credits {
  margin: 0 0 36px;
}

.landing .store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  min-height: 56px;
}

/* App Store 배지 — Apple 공식 아트워크 (marketingtools.apple.com), 밝은 배경엔
   black / 어두운 배경엔 white. 테마는 <html data-theme> 를 JS 토글이 바꾸므로
   prefers-color-scheme (즉 <picture>) 는 토글을 따라오지 못한다 — 두 <img> 를
   CSS 로 교체한다. 아트워크 자체는 Apple 지침대로 변형하지 않는다. */
.landing .store-badge {
  display: inline-flex;
}

.landing .store-badge img {
  display: block;
  height: 40px;
  width: auto;
}

.landing .store-badge .store-badge-dark {
  display: none;
}

[data-theme="dark"] .landing .store-badge .store-badge-light {
  display: none;
}

[data-theme="dark"] .landing .store-badge .store-badge-dark {
  display: block;
}

/* Statement (between hero and features) — alt-bg full-bleed, large prose */
.landing .statement {
  width: 100%;
  background: var(--bg-alt);
  padding: 0;
}

.landing .statement-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 132px 32px;
  text-align: center;
}

.landing .statement p {
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
  margin: 0;
}

.landing .statement-soft {
  color: var(--text-muted);
  font-weight: 500;
}

/* Features — wrap the grid in a full-bleed band so the section background
   reaches edge-to-edge while cards stay constrained. */
.landing .features-band {
  width: 100%;
  background: var(--bg);
  padding: 132px 32px;
}

.landing .features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
}

.landing .feature {
  padding: 36px 32px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-alt);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.landing .feature:hover {
  border-color: var(--text-tertiary);
  transform: translateY(-1px);
}

.landing .feature h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--text);
}

.landing .feature p {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* Pricing page (/pricing/{locale}/).
   Wider than legal docs (760px) so 4 tier cards fit on a single row at
   desktop widths. Cards use auto-fit and gracefully fall back to 2 → 1
   columns on smaller viewports. */
.pricing-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 100px 24px 96px;
}

.pricing-page > .pricing-header {
  text-align: center;
  margin-bottom: 64px;
}

.pricing-page > .pricing-header h1 {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 14px;
}

.pricing-page > .pricing-header p {
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--text-secondary);
  margin: 0;
}

.pricing-page > .pricing-header .welcome-credits {
  margin-top: 22px;
  font-size: 14px;
  color: var(--text);
}

.pricing-page section {
  margin-bottom: 48px;
}

.pricing-page section > h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
}

.pricing-page section > p {
  color: var(--text-muted);
  margin: 0 0 20px;
  line-height: 1.6;
}

.pricing-page .pricing-note {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.pricing-page .section-note {
  margin: 16px 0 0;
  padding: 12px 16px;
  background: var(--surface);
  border-left: 3px solid var(--primary);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Tier cards (used on pricing page).
   Layout is forced to 1 / 2 / 4 columns — 3 columns is intentionally
   skipped because 3 leaves one tier visually orphaned on its own row.
   Default (mid widths) = 2; ≥ 900px = 4; ≤ 600px = 1 (media query below). */
.tier-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 900px) {
  .tier-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.tier-card {
  display: flex;
  flex-direction: column;
  padding: 24px 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-dim);
}

/* Tier-specific tints — palette mirrors mobile TIER_THEME so the same
   tier reads as "the same tier" across surfaces. rgba overlays so the
   tints work in both light and dark themes without separate variants. */
.tier-card.tier-hanger {
  border-color: rgba(107, 114, 128, 0.35);
  background: rgba(107, 114, 128, 0.05);
}
.tier-card.tier-hanger li::before,
.tier-card.tier-hanger .tier-icon {
  color: #6b7280;
}

.tier-card.tier-closet {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.05);
}
.tier-card.tier-closet li::before,
.tier-card.tier-closet .tier-icon,
.tier-card.tier-closet .tier-name {
  color: #2563eb;
}

.tier-card.tier-boutique {
  border-color: rgba(139, 92, 246, 0.45);
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.08), rgba(236, 72, 153, 0.04));
}
.tier-card.tier-boutique li::before,
.tier-card.tier-boutique .tier-icon,
.tier-card.tier-boutique .tier-name {
  color: #7c3aed;
}

.tier-card.tier-atelier {
  border-color: rgba(217, 119, 6, 0.45);
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.08), rgba(245, 158, 11, 0.04));
}
.tier-card.tier-atelier li::before,
.tier-card.tier-atelier .tier-icon,
.tier-card.tier-atelier .tier-name {
  color: #b45309;
}

/* Tier icon (inline SVG, mirrors mobile phosphor fill icons). currentColor
   so the icon picks up the per-tier .tier-icon color rule above. */
.tier-card .tier-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tier-card .tier-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.tier-card .tier-name {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
}

.tier-card .tier-price {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.tier-card .tier-price .price-period {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 4px;
}

.tier-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

.tier-card li {
  position: relative;
  padding: 5px 0 5px 22px;
  font-size: 14px;
  line-height: 1.5;
}

.tier-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 5px;
  color: var(--link);
  font-weight: 700;
}

/* Bagle product cards (3 packs) */
.bagle-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.bagle-product {
  text-align: center;
  padding: 24px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-dim);
}

.bagle-product .product-amount {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 6px;
}

.bagle-product .product-price {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}

.bagle-product .product-unit {
  font-size: 12px;
  color: var(--text-muted);
  margin: 8px 0 0;
}

/* Bagle usage list */
.bagle-usage {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
}

.bagle-usage li {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.bagle-usage li strong {
  font-weight: 500;
  color: var(--text);
}

.bagle-usage li span {
  color: var(--link);
  font-weight: 600;
}

/* Landing footer — full-bleed band with alt bg, top border separates from
   features section. Two variants:
   - Default (en/ja): minimal one-line, mirrors subtwo.ai
   - .landing-footer--full (ko): includes nav links + business info to meet
     Korean e-commerce disclosure requirements */
.landing-footer {
  width: 100%;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 40px 32px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* Embed mode (?embed=1) — in-app WebView/Linking 컨텍스트에서 lang switcher /
   사이트 nav / 테마 토글 제거. 사업자등록번호(.footer-business) + copyright
   (.footer-mark) 는 전자상거래법 §13 표시 의무 유지 위해 그대로. */
:root[data-embed] .theme-toggle,
:root[data-embed] .landing-footer .lang-switcher,
:root[data-embed] .landing-footer .footer-links {
  display: none;
}

.landing-footer .lang-switcher {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
}

.landing-footer .lang-switcher a {
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.landing-footer .lang-switcher a:hover {
  color: var(--text);
}

.landing-footer .lang-switcher a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

.landing-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}

.landing-footer .footer-links a {
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.landing-footer .footer-links a:hover {
  color: var(--text);
}

.landing-footer p {
  margin: 0;
}

.landing-footer .footer-mark {
  letter-spacing: 0.06em;
}

/* Korean full-variant: business info line above © */
.landing-footer .footer-business {
  margin: 4px 0 6px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Subtwo links inside business / © lines — inherit muted color, reveal on
   hover so the corporate link doesn't shout. */
.landing-footer .footer-business a,
.landing-footer .footer-mark a {
  color: inherit;
  transition: color 0.15s ease;
}

.landing-footer .footer-business a:hover,
.landing-footer .footer-mark a:hover {
  color: var(--text);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .doc {
    padding: 24px 16px 48px;
  }
  .doc h1 {
    font-size: 24px;
  }
  .doc h2 {
    font-size: 19px;
  }
  .doc table {
    font-size: 13px;
  }
  .landing {
    padding: 0;
  }
  .landing .hero {
    padding: 100px 24px 72px;
  }
  .landing .hero .sub-tagline {
    margin-bottom: 32px;
  }
  .landing .statement-inner {
    padding: 84px 24px;
  }
  .landing .features-band {
    padding: 84px 24px;
  }
  .landing .features {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .landing .feature {
    padding: 28px 24px;
  }
  .landing-footer {
    padding: 32px 24px;
  }
  .landing .pricing > h2 {
    font-size: 24px;
  }
  /* tier-cards / bagle-products are also used outside .landing
     (on /pricing/{locale}/), so keep these rules unscoped. */
  .tier-cards,
  .bagle-products {
    grid-template-columns: 1fr;
  }
  .pricing-page {
    padding: 24px 16px 48px;
  }
  .pricing-page > .pricing-header h1 {
    font-size: 24px;
  }
}