:root {
  --selection-border: #808080;
  color-scheme: dark;
  --font-logo-en: "Syne", sans-serif;
  --font-logo-ko: "Apple SD Gothic Neo", "Noto Sans KR", "Pretendard Variable", Pretendard, sans-serif;
  --font-editorial-en: Cormorant, Georgia, "Times New Roman", serif;
  --font-editorial-ko: "Maru Buri", "Nanum Myeongjo", "Noto Serif KR", serif;
  --font-ui-en: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Instrument Sans", "Segoe UI", sans-serif;
  --font-ui-ko: "Apple SD Gothic Neo", "Noto Sans KR", "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-logo: var(--font-logo-en);
  --font-editorial: var(--font-editorial-en);
  --font-ui: var(--font-ui-en);
  /* Mirrors the live TIOR STUDIO SHOP GNB wordmark metrics. */
  --gnb-wordmark-size: 30px;
  --gnb-wordmark-size-compact: 22px;
  --gnb-wordmark-weight: 500;
  --gnb-wordmark-leading: .8;
  --gnb-wordmark-tracking: -.02em;
  /* [WEB-TRANSLATION] iOS Dynamic Type hierarchy mapped to CSS px; not Apple web tokens. */
  --type-large-title: 34px;
  --leading-large-title: 41px;
  --type-title-1: 28px;
  --leading-title-1: 34px;
  --type-title-2: 22px;
  --leading-title-2: 28px;
  --type-title-3: 20px;
  --leading-title-3: 25px;
  --type-body: 17px;
  --leading-body: 22px;
  --type-callout: 16px;
  --leading-callout: 21px;
  --type-subhead: 15px;
  --leading-subhead: 20px;
  --type-footnote: 13px;
  --leading-footnote: 18px;
  --type-caption-1: 12px;
  --leading-caption-1: 16px;
  --type-caption-2: 11px;
  --leading-caption-2: 13px;
  /* [WEB-TRANSLATION] Readable dense-card roles for desktop and mobile web. */
  --type-compact-body: 14px;
  --leading-compact-body: 20px;
  --type-compact-meta: 13px;
  --leading-compact-meta: 18px;
  /*
   * Semantic appearance palette. Components consume the aliases below while
   * Light/Dark only flip this compact achromatic set. Source media retains its
   * original pixels; status, focus, and transient UI remain grayscale.
   */
  --theme-canvas: #000;
  --theme-surface: var(--theme-canvas);
  --theme-surface-raised: var(--theme-canvas);
  --theme-ink: #f6f6f6;
  --theme-ink-inverse: #171717;
  --theme-ink-hover: #fff;
  --theme-muted: #9a9a9a;
  --theme-quiet: #858585;
  --theme-line: rgba(255, 255, 255, .16);
  --theme-line-strong: rgba(255, 255, 255, .34);
  --theme-action-border: rgba(246, 246, 246,.32);
  --theme-workspace-canvas: var(--theme-canvas);
  --theme-workspace-surface: var(--theme-canvas);
  --pricing-surface: var(--theme-surface);
  --pricing-surface-raised: var(--theme-surface-raised);
  --theme-action-disabled-border: color-mix(in srgb, var(--theme-ink-inverse) 26%, var(--theme-ink));
  --theme-action-disabled-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-ink-inverse) 12%, transparent);
  --theme-action-disabled-opacity: 1;
  --page-canvas: var(--theme-canvas);
  --black: var(--theme-canvas);
  --surface: var(--theme-surface);
  --surface-raised: var(--theme-surface-raised);
  --line: var(--theme-line);
  --line-strong: var(--theme-line-strong);
  --text: var(--theme-ink);
  --muted: var(--theme-muted);
  --quiet: var(--theme-quiet);
  --white: var(--theme-ink-hover);
  --max: 1290px;
  --page: clamp(18px, 5.2vw, 75px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --motion-direct: cubic-bezier(.2, .75, .2, 1);
  /* [STARTING-PRESET] Flat Apple-inspired geometry; color comes from semantic theme tokens. */
  --radius-capsule: 999px;
  --radius-icon: 50%;
  --radius-panel: 18px;
  --radius-panel-mobile: 16px;
  --radius-card: 18px;
  --radius-card-mobile: 16px;
  --control-radius: var(--radius-capsule);
  --focus-ring: #fff;
  --header-backdrop: rgba(0,0,0,.76);
  --header-backdrop-filter: blur(10px);
  --header-solid-fallback: var(--theme-canvas);
  --drawer-fill: var(--theme-canvas);
  --dialog-fill: var(--theme-surface-raised);
  --dialog-foreground: var(--theme-ink);
  --dialog-shadow: 0 24px 64px rgba(0,0,0,.44);
  --nav-muted: rgba(255, 255, 255, .95);
  --nav-foreground: rgba(255, 255, 255, .95);
  --nav-selection-fill: var(--theme-canvas);
  --nav-selection-highlight: rgba(255,255,255,.14);
  --body-strong: #d0d0d0;
  --body-soft: #b6b6b6;
  --detail-foreground: #e0e0e0;
  --card-fact-foreground: rgba(246, 246, 246, .58);
  --footer-link: #c7c7c7;
  --footer-copy: #a0a0a0;
  --footer-detail: #d0d0d0;
  --footer-quiet: #858585;
  --footer-bottom: #8e8e8e;
  --filter-tab-foreground: rgba(246, 246, 246, .6);
  --filter-tab-active: rgba(246, 246, 246, .86);
  --input-fill: var(--theme-surface-raised);
  --input-shadow: inset 0 0 0 1px var(--theme-line);
  --input-focus-shadow: 0 0 0 2px var(--focus-ring);
  --result-fill: var(--theme-canvas);
  --result-fill-hover: var(--theme-canvas);
  --result-rim: inset 0 1px 0 rgba(255,255,255,.075);
  --search-dialog-surface: var(--theme-surface-raised);
  --search-dialog-copy: var(--theme-ink);
  --search-dialog-shadow: 0 28px 80px rgba(0,0,0,.26);
  --search-dialog-control-foreground: var(--theme-ink);
  --search-dialog-control-muted: var(--theme-muted);
  --search-dialog-control-detail: var(--theme-quiet);
  --search-dialog-control-rim: inset 0 0 0 1px var(--theme-line);
  --typographic-media-fill: var(--theme-canvas);
  --typographic-dot: rgba(255,255,255,.16);
  --coming-soon-media-fill: var(--theme-canvas);
  --staging-fill: var(--theme-canvas);
  --disabled-action-fill: var(--theme-ink-hover);
  --disabled-action-foreground: var(--theme-canvas);
  --card-solid-fill: var(--theme-canvas);
  --contrast-control-fill: var(--theme-canvas);
  --contrast-card-fill: var(--theme-canvas);
  --solid-border: rgba(255,255,255,.3);
  --contrast-border: rgba(255,255,255,.72);
  --pricing-card-shadow: 0 18px 50px rgba(0,0,0,.28);
  --on-media: #fff;
  --on-media-shadow: 0 1px 2px rgba(0,0,0,.72), 0 0 7px rgba(0,0,0,.42);
  --media-control-fill: var(--theme-canvas);
  --media-control-foreground: var(--theme-ink);
  --media-control-border: var(--theme-line-strong);
  --action-radius: 14px;
  /* Rectangular CTAs: pure black/white inverse of the page in both themes. */
  --action-primary-border: var(--theme-line-strong);
  --action-primary-hover-border: var(--theme-ink);
  --action-primary-fill: var(--theme-ink-hover);
  --action-primary-foreground: var(--theme-canvas);
  --action-primary-hover-fill: var(--theme-ink-hover);
  --action-primary-disabled-border: var(--theme-action-disabled-border);
  --action-primary-disabled-fill: var(--theme-ink-hover);
  --action-primary-disabled-foreground: var(--theme-canvas);
  --action-primary-disabled-shadow: var(--theme-action-disabled-shadow);
  --action-primary-disabled-opacity: var(--theme-action-disabled-opacity);
  --action-secondary-fill: var(--theme-ink-hover);
  --action-secondary-foreground: var(--theme-canvas);
  --action-secondary-border: var(--theme-action-border);
  --media-radius: 18px;
  --media-radius-mobile: 16px;
}

:root[data-theme="dark"] { color-scheme: dark; }

:root[data-theme="light"] {
  color-scheme: light;
  --theme-canvas: #fff;
  --theme-surface: var(--theme-canvas);
  --theme-surface-raised: var(--theme-canvas);
  --theme-ink: #171717;
  --theme-ink-inverse: #fff;
  --theme-ink-hover: #000;
  --theme-muted: #626262;
  --theme-quiet: #636363;
  --theme-line: rgba(28, 28, 28, .14);
  --theme-line-strong: rgba(28, 28, 28, .32);
  --theme-action-border: rgba(23, 23, 23,.24);
  --theme-workspace-canvas: var(--theme-canvas);
  --theme-workspace-surface: var(--theme-canvas);
  --pricing-surface: #fff;
  --pricing-surface-raised: #fff;
  --theme-action-disabled-border: var(--theme-ink);
  --theme-action-disabled-shadow: none;
  --theme-action-disabled-opacity: 1;
  --focus-ring: #000;
  --header-backdrop: rgba(255,255,255,.78);
  --drawer-fill: var(--theme-canvas);
  --dialog-fill: var(--theme-surface-raised);
  --dialog-foreground: var(--theme-ink);
  --dialog-shadow: 0 24px 64px rgba(47, 47, 47,.18);
  --nav-muted: #171717;
  --nav-foreground: #171717;
  --body-strong: #424242;
  --body-soft: #5f5f5f;
  --detail-foreground: #353535;
  --card-fact-foreground: rgba(23, 23, 23, .6);
  --footer-link: #424242;
  --footer-copy: #5f5f5f;
  --footer-detail: #424242;
  --footer-quiet: #636363;
  --footer-bottom: #6a6a6a;
  --filter-tab-foreground: rgba(23, 23, 23, .6);
  --filter-tab-active: rgba(23, 23, 23, .86);
  --input-fill: var(--theme-surface-raised);
  --input-shadow: inset 0 0 0 1px var(--theme-line);
  --input-focus-shadow: 0 0 0 2px var(--focus-ring);
  --result-fill: var(--theme-canvas);
  --result-fill-hover: var(--theme-canvas);
  --result-rim: inset 0 1px 0 rgba(255,255,255,.78);
  --typographic-media-fill: var(--theme-canvas);
  --typographic-dot: rgba(32, 32, 32,.13);
  --staging-fill: var(--theme-canvas);
  --disabled-action-fill: var(--theme-ink-hover);
  --disabled-action-foreground: var(--theme-canvas);
  --card-solid-fill: var(--theme-canvas);
  --contrast-control-fill: var(--theme-canvas);
  --contrast-card-fill: var(--theme-canvas);
  --solid-border: rgba(255,255,255,.34);
  --contrast-border: rgba(255,255,255,.78);
  --pricing-card-shadow: 0 18px 50px rgba(47, 47, 47,.09);
}

*, *::before, *::after {
  box-sizing: border-box;
}
*::file-selector-button,
*::-webkit-scrollbar,
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-corner,
*::-webkit-search-cancel-button {
  border-radius: inherit; corner-shape: squircle;
}
[hidden] { display: none !important; }
html { background: var(--page-canvas); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--page-canvas);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html:lang(ko) { --font-ui: var(--font-ui-ko); --font-editorial: var(--font-editorial-ko); --font-logo: var(--font-logo-ko); }
html:lang(ko) body { font-family: var(--font-ui-ko); }
html:lang(ko) .editorial-accent { font-family: var(--font-editorial-ko); font-style: normal; font-synthesis: none; }
a { color: inherit; text-decoration: none; }
button, input { color: inherit; font: inherit; }
button { border: 0; cursor: pointer; }
img { display: block; width: 100%; }
svg { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; z-index: 200; top: 10px; left: 10px; transform: translateY(-170%); opacity: 0; pointer-events: none; padding: 10px 14px; border-radius: var(--control-radius); background: var(--theme-canvas); color: var(--text); corner-shape: squircle; }
.skip-link:focus { transform: translateY(0); opacity: 1; pointer-events: auto; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.site-header {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 66px;
  padding: 0 clamp(20px, 3.5vw, 50px);
  background: var(--header-backdrop);
  -webkit-backdrop-filter: var(--header-backdrop-filter);
  backdrop-filter: var(--header-backdrop-filter);
  transition: background-color .25s ease;
}
.site-header.is-scrolled { background: var(--header-backdrop); }
.brand { display: inline-flex; width: max-content; align-items: center; font-family: var(--font-logo); font-size: 25px; font-weight: var(--gnb-wordmark-weight); letter-spacing: -.035em; line-height: 1; text-transform: none; }
.site-header .brand,
.mobile-drawer .brand { font-size: var(--gnb-wordmark-size); letter-spacing: var(--gnb-wordmark-tracking); line-height: var(--gnb-wordmark-leading); white-space: nowrap; }
.gnb-control-cluster { display: flex; align-items: center; gap: 6px; justify-self: center; }
.dock {
  position: relative;
  display: flex;
  width: max-content;
  height: 44px;
  min-height: 44px;
  align-items: center;
  gap: 2px;
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.dock__item { position: relative; display: flex; width: 44px; min-width: 44px; height: 44px; align-items: center; justify-content: center; overflow: visible; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--text); box-shadow: none; transition: color .2s ease, opacity .16s ease, transform .12s var(--motion-direct); }
.dock__item::after { position: absolute; right: auto; bottom: 4px; left: 50%; width: 19px; height: 1px; border-radius: 0; background: currentColor; content: ""; opacity: 0; transform: translateX(-50%) scaleX(0); transform-origin: center; transition: opacity .2s ease, transform .4s var(--motion-direct); }
.dock__item svg { width: 19px; height: 19px; }
.dock__item:hover, .dock__item:focus-visible, .dock__item[aria-current="page"] { color: var(--text); }
.dock__item:hover::after, .dock__item:focus-visible::after, .dock__item[aria-current="page"]::after { opacity: 1; transform: translateX(-50%) scaleX(1); }
.dock__item:active { transform: scale(.97); }
.menu-button { display: none; justify-self: end; width: 44px; height: 44px; place-items: center; }
.gnb-search-button,
.gnb-appearance-button { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 0; border-radius: 0; background: transparent; color: var(--text); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: color .16s ease-out, opacity .16s ease-out, transform .16s var(--motion-direct); }
.gnb-search-button svg,
.gnb-appearance-button svg { width: 20px; height: 20px; }
.gnb-search-button:hover,
.gnb-search-button:focus-visible,
.gnb-appearance-button:hover,
.gnb-appearance-button:focus-visible { color: var(--text); }
.gnb-search-button:active,
.gnb-appearance-button:active { opacity: .62; transform: scale(.94); }
.header-utility { display: flex; align-items: center; justify-self: end; gap: 18px; }
.header-shop,
.header-pricing,
.header-account { display: inline-flex; min-height: 44px; align-items: center; padding: 0 4px; border: 0; background: transparent; color: var(--body-strong); font-family: var(--font-ui); font-size: var(--type-footnote); font-weight: 500; font-style: normal; line-height: var(--leading-footnote); letter-spacing: .055em; white-space: nowrap; }
.header-account:disabled { cursor: wait; }
.header-shop span,
.header-pricing span,
.header-account span { position: relative; }
.header-shop span::after,
.header-pricing span::after,
.header-account span::after { position: absolute; right: 0; bottom: -4px; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: left center; transition: transform .4s var(--motion-direct); }
.header-shop:hover span::after,
.header-shop:focus-visible span::after,
.header-pricing:hover span::after,
.header-pricing:focus-visible span::after,
.header-pricing[aria-current="page"] span::after,
.header-account:hover span::after,
.header-account:focus-visible span::after { transform: scaleX(1); }
.header-shop:hover,
.header-shop:focus-visible,
.header-pricing:hover,
.header-pricing:focus-visible,
.header-account:hover,
.header-account:focus-visible { color: var(--text); }

/* Apple-inspired hierarchy and control geometry rendered as flat semantic UI. */
.hero-panel__arrow,
.menu-button,
.icon-button {
  --control-base-transform: none;
  position: relative;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  transform: var(--control-base-transform);
  transition: color .16s ease-out, opacity .16s ease-out, transform .16s var(--motion-direct);
}

.hero-panel__arrow {
  --control-base-transform: translateY(-50%);
  border-radius: var(--action-radius); corner-shape: squircle;
  background: var(--action-primary-fill);
  color: var(--action-primary-foreground);
}

/* A standalone icon is always a true circle, never a rounded-square button. */
[data-shape="icon"] {
  aspect-ratio: 1;
  padding-inline: 0;
  border-radius: var(--radius-icon); corner-shape: squircle;
}

@media (hover: hover) and (pointer: fine) {
  .hero-panel__arrow:hover { opacity: 1; }
  .menu-button:hover,
  .icon-button:hover { opacity: .72; }
}

.hero-panel__arrow:active,
.menu-button:active,
.icon-button:active { transform: var(--control-base-transform) scale(.98); }

.menu-button,
.gnb-search-button,
.gnb-appearance-button { border-radius: var(--radius-icon); corner-shape: squircle; }

#main-content { overflow: clip; }
.page-shell { width: min(var(--max), calc(100% - var(--page) * 2)); margin-inline: auto; }
.kicker { margin: 0 0 13px; color: var(--muted); font-size: var(--type-caption-1); font-weight: 500; line-height: var(--leading-caption-1); letter-spacing: .08em; text-transform: uppercase; }
.brand-name, .brand, .wordmark-kicker, .wordmark-text, .footer-wordmark { font-family: var(--font-logo); font-style: normal; font-synthesis: none; }
html:lang(ko) .brand-name,
html:lang(ko) .brand,
html:lang(ko) .wordmark-kicker,
html:lang(ko) .wordmark-text,
html:lang(ko) .footer-wordmark { font-family: var(--font-logo-ko); }
.wordmark-kicker { letter-spacing: -.025em; }
.studio-context-kicker { font-family: var(--font-logo); font-style: normal; font-synthesis: none; letter-spacing: -.025em; }

.home-page { position: relative; isolation: isolate; overflow: hidden; background: var(--page-canvas); }
.home-page > section { position: relative; z-index: 1; }
.home-hero { padding: 130px var(--page) 0; }
.home-hero__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; width: min(var(--max), 100%); min-height: 742px; margin-inline: auto; }
.home-hero__panel {
  position: relative;
  display: flex;
  min-height: 742px;
  align-items: center;
  overflow: visible;
  padding: 48px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.hero-dot-field {
  position: absolute;
  z-index: 0;
  inset: -24px;
  overflow: hidden;
  pointer-events: none;
}
.hero-dot-field::before {
  position: absolute;
  inset: -18px;
  background-image: radial-gradient(circle, rgba(155, 155, 155,.2) 0 .6px, rgba(211, 211, 211,.07) .68px, transparent 1px);
  background-position: center;
  background-size: 19px 19px;
  content: "";
  opacity: .5;
  animation: heroNeutralField 96s ease-in-out infinite;
}
.hero-dot-field::after {
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(circle at 20% 14%, rgba(138, 138, 138,.055) 0, rgba(107, 107, 107,.022) 24%, transparent 48%),
    radial-gradient(circle at 82% 46%, rgba(132, 132, 132,.038) 0, transparent 43%),
    radial-gradient(circle at 38% 86%, rgba(97, 97, 97,.035) 0, transparent 39%);
  content: "";
  opacity: .7;
  animation: heroNeutralGlow 112s ease-in-out infinite;
}
:root[data-theme="light"] .hero-dot-field::after { opacity: 0; animation: none; }
.hero-dot {
  position: absolute;
  z-index: 1;
  top: var(--hero-dot-top);
  left: var(--hero-dot-left);
  width: var(--hero-dot-size);
  height: var(--hero-dot-size);
  border-radius: 50%;
  background: rgba(177, 177, 177,var(--hero-dot-alpha));
  box-shadow: 0 0 5px rgba(114, 114, 114,.18);
  opacity: calc(.36 + var(--hero-dot-depth) * .38);
  animation: heroNeutralDot var(--hero-dot-duration) var(--hero-dot-delay) ease-in-out infinite;
}
@keyframes heroNeutralField {
  0%, 100% { transform: translate3d(-3px, 1px, 0) scale(1); }
  24% { transform: translate3d(4px, -5px, 0) scale(1.004); }
  51% { transform: translate3d(-2px, -1px, 0) scale(1.002); }
  77% { transform: translate3d(5px, 4px, 0) scale(1.006); }
}
@keyframes heroNeutralGlow {
  0%, 100% { transform: translate3d(-1.2%, .6%, 0) scale(1); opacity: .58; }
  29% { transform: translate3d(1.3%, -1%, 0) scale(1.025); opacity: .74; }
  57% { transform: translate3d(.4%, 1.2%, 0) scale(1.01); opacity: .66; }
  81% { transform: translate3d(-1%, -.3%, 0) scale(1.032); opacity: .72; }
}
@keyframes heroNeutralDot {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.94); }
  27% { transform: translate3d(var(--hero-dot-x1), var(--hero-dot-y1), 0) scale(1.03); }
  53% { transform: translate3d(var(--hero-dot-x2), var(--hero-dot-y2), 0) scale(.98); }
  79% { transform: translate3d(var(--hero-dot-x3), var(--hero-dot-y3), 0) scale(1.06); }
}
.home-hero__copy { position: relative; z-index: 2; max-width: 430px; }
@media (min-width: 821px) {
  .home-hero__inner > .hero-mosaic { grid-column: 1; grid-row: 1; }
  .home-hero__inner > .home-hero__panel { grid-column: 2; grid-row: 1; justify-content: flex-end; text-align: right; }
  .home-hero__panel .home-hero__copy > p { margin-left: auto; }
  .home-hero__panel .hero-actions { justify-content: flex-end; }
}
.home-hero__panel h1 { margin: 0; font-size: clamp(48px, 4.15vw, 60px); font-weight: 400; line-height: 1.02; letter-spacing: -.03em; }
.home-hero__panel h1 strong { font-weight: 600; }
.home-hero__panel h1 em { font-family: var(--font-editorial); font-size: 1.05em; font-weight: 400; font-style: italic; letter-spacing: -.02em; }
.home-hero__copy > p { max-width: 390px; margin: 25px 0 25px; color: var(--body-strong); font-size: var(--type-subhead); font-weight: 500; line-height: var(--leading-subhead); }
.home-hero__copy > p:not(.kicker) { line-height: 24px; }
.hero-cta { display: inline-flex; min-width: 150px; min-height: 48px; align-items: center; justify-content: center; gap: 18px; padding: 0 22px; border: 1px solid var(--action-primary-border); border-radius: var(--action-radius); corner-shape: squircle; background: var(--action-primary-fill); color: var(--action-primary-foreground); font-size: var(--type-compact-meta); font-weight: 600; line-height: var(--leading-compact-meta); letter-spacing: .07em; text-transform: uppercase; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color .16s ease-out, border-color .16s ease-out, opacity .16s ease-out, transform .16s var(--motion-direct); }
.hero-cta:hover { border-color: var(--action-primary-hover-border); background: var(--action-primary-hover-fill); color: var(--action-primary-foreground); }
.hero-cta:active { opacity: 1; transform: scale(.985); }
.hero-cta svg { width: 16px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.hero-link { min-height: 42px; padding: 13px 2px 10px; border-bottom: 1px solid var(--line-strong); color: var(--body-strong); font-size: var(--type-caption-1); font-weight: 600; line-height: var(--leading-caption-1); letter-spacing: .07em; }
.hero-link:hover { border-color: var(--nav-foreground); color: var(--nav-foreground); }
.hero-panel__arrow { --control-base-transform: translateY(-50%); position: absolute; z-index: 2; top: 50%; right: 48px; display: grid; width: 48px; height: 48px; place-items: center; border-radius: var(--action-radius); corner-shape: squircle; background: var(--action-primary-fill); color: var(--action-primary-foreground); }
.hero-panel__arrow svg { width: 36px; height: 36px; stroke-width: 1.5; }

.hero-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 400px 318px; gap: 24px 16px; min-height: 742px; }
.hero-mosaic figure { position: relative; min-height: 0; overflow: hidden; margin: 0; border: 0; border-radius: var(--media-radius); corner-shape: squircle; background: var(--typographic-media-fill); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero-mosaic__wide { grid-column: 1 / 3; }
.hero-mosaic figure > .hero-mosaic__link { position: absolute; z-index: auto; inset: 0; display: block; color: inherit; }
.hero-mosaic__link:focus-visible { outline-offset: -4px; }
.hero-mosaic img { display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; transition: transform .8s var(--ease), filter .4s ease; }
.hero-mosaic__wide img { object-position: center; }
.hero-mosaic figure:hover img { transform: scale(1.018); }
.hero-mosaic figure::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), transparent 50%, rgba(0,0,0,.06)); content: ""; pointer-events: none; }
.hero-mosaic__caption { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 28px 26px 24px; color: var(--on-media); text-shadow: var(--on-media-shadow); pointer-events: none; }
.hero-mosaic__caption strong { max-width: 94%; font-size: clamp(19px, 2.1vw, 29px); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.hero-mosaic__action { display: inline-flex; min-width: 96px; min-height: 48px; align-items: center; justify-content: center; align-self: flex-end; padding: 0 18px; border: 1px solid var(--action-primary-border); border-radius: var(--action-radius); corner-shape: squircle; background: var(--action-primary-fill); color: var(--action-primary-foreground); font-size: var(--type-compact-meta); font-weight: 600; line-height: var(--leading-compact-meta); letter-spacing: .07em; text-shadow: none; text-transform: uppercase; box-shadow: none; pointer-events: none; }
.hero-mosaic figure:not(.hero-mosaic__wide) .hero-mosaic__action { align-self: flex-start; margin-top: auto; }

.home-section { padding: 122px 0 30px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.section-head--center { display: flex; flex-direction: column; align-items: center; justify-content: initial; gap: 13px; margin-bottom: 58px; text-align: center; }
.section-head h2 { margin: 0; font-size: clamp(38px, 3.4vw, 49px); font-weight: 400; line-height: 1.08; letter-spacing: -.025em; }
.section-head h2 strong { font-weight: 600; }
.section-head h2 em { font-family: var(--font-editorial); font-size: 1.08em; font-weight: 400; font-style: italic; }
.section-head p { max-width: 610px; margin: 0; color: var(--muted); font-size: var(--type-subhead); line-height: var(--leading-subhead); }

.carousel-shell { position: relative; }
.carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 54px) / 4); gap: 18px; overflow-x: auto; padding: 2px 1px 15px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }
.carousel-controls { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.carousel-controls button { display: grid; width: 48px; height: 48px; place-items: center; padding: 0; border: 0; background: transparent; color: var(--body-soft); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: color .16s ease-out, opacity .16s ease-out, transform .16s var(--motion-direct); }
.carousel-controls button::before, .carousel-controls button::after { display: none; }
.carousel-controls button:hover, .carousel-controls button:focus-visible { color: var(--text); }
.carousel-controls button:active { opacity: .62; transform: scale(.94); }
.carousel-controls button svg { width: 23px; height: 23px; }
.carousel-controls button:first-child svg { transform: rotate(180deg); }
.section-link { display: flex; width: max-content; min-height: 44px; align-items: center; gap: 10px; margin: 26px 0 0 auto; border-bottom: 1px solid var(--line-strong); font-family: var(--font-logo); font-size: var(--type-caption-1); font-weight: 500; line-height: var(--leading-caption-1); letter-spacing: .025em; }
.section-link svg { width: 15px; }

.app-card { display: flex; min-width: 0; min-height: 610px; height: auto; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); corner-shape: squircle; background: var(--surface-raised); box-shadow: none; }
.app-card__media { position: relative; height: 300px; flex: 0 0 300px; overflow: hidden; margin: 0; background: var(--typographic-media-fill); }
.app-card__media img { height: 100%; object-fit: cover; }
.app-card__media > video[data-guide-preview-video] { width: 100%; height: 100%; padding: 0; object-fit: cover; object-position: center; background: var(--surface); }
.app-card[data-app-id="custom-flow"] .app-card__media img { translate: 0 20px; }
.app-card__media.is-contain { background: var(--surface); }
.app-card__media.is-contain img { padding: 30px; object-fit: contain; }
.app-card__preview { position: absolute; inset: 0; width: 100%; opacity: 1; pointer-events: none; transition: opacity .22s var(--motion-direct); }
.app-card__preview.is-contain { padding: 30px; background: var(--surface); object-fit: contain; }
.app-card__preview.is-page-capture { padding: 0; background: var(--surface); object-fit: contain; object-position: center; }
/* The plan is a white paper asset: its contain gutter must not follow Dark UI. */
.app-card[data-app-id="floor-plan"] .app-card__media,
.app-card[data-app-id="floor-plan"] .app-card__preview--after { background: #FFFFFF; }
.app-card__preview--after { opacity: 0; }
.app-card__compare-surface { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; touch-action: pan-x pan-y; -webkit-backdrop-filter: none; backdrop-filter: none; }
.app-card__compare-surface::before, .app-card__compare-surface::after { display: none; }
.app-card__compare-surface:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--focus-ring); }
.app-card[data-preview-state="after"] .app-card__preview--before { opacity: 0; }
.app-card[data-preview-state="after"] .app-card__preview--after { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .app-card__media:hover .app-card__preview--before { opacity: 0; }
  .app-card__media:hover .app-card__preview--after { opacity: 1; }
}
.placeholder-badge { position: absolute; z-index: 2; top: 14px; left: 14px; display: inline-flex; min-height: 30px; align-items: center; padding: 0 11px; border: 0; border-radius: var(--action-radius); corner-shape: squircle; background: var(--theme-canvas); color: var(--theme-ink); font-size: var(--type-caption-2); font-weight: 600; line-height: var(--leading-caption-2); letter-spacing: .07em; text-shadow: none; text-transform: uppercase; }
.app-card--typographic .app-card__media { display: grid; place-items: center; background-color: var(--typographic-media-fill); background-image: radial-gradient(var(--typographic-dot) .75px, transparent .9px); background-size: 15px 15px; }
.app-card--typographic .app-card__media::before { position: absolute; top: 18px; left: 18px; color: var(--muted); font-size: var(--type-caption-2); line-height: var(--leading-caption-2); letter-spacing: .1em; content: attr(data-number); }
.app-card--typographic .app-card__media strong { max-width: 82%; font-size: clamp(34px, 3vw, 47px); font-weight: 600; line-height: .95; letter-spacing: -.055em; text-align: center; }
.app-card__body { display: flex; min-height: 0; flex: 1; flex-direction: column; padding: 17px 17px 16px; }
.app-card__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.app-card__meta > span { display: inline-flex; min-height: 22px; align-items: center; padding: 0; color: var(--body-strong); font-family: var(--font-editorial); font-size: var(--type-compact-meta); font-weight: 400; font-style: italic; line-height: var(--leading-compact-meta); letter-spacing: .025em; text-transform: uppercase; }
.app-card__info { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; background: transparent; color: var(--body-soft); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.app-card__info::before, .app-card__info::after { display: none; }
.app-card__info:hover, .app-card__info:focus-visible { color: var(--text); }
.app-card__info svg { width: 20px; height: 20px; color: currentColor; stroke-width: 1.65; }
.app-card__body h3 { display: -webkit-box; min-height: 44px; margin: 0 0 8px; overflow: hidden; font-size: var(--type-body); font-weight: 600; letter-spacing: 0; line-height: var(--leading-body); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.app-card__body > p { display: -webkit-box; min-height: 60px; margin: 0 0 14px; overflow: hidden; color: var(--muted); font-size: var(--type-compact-body); line-height: var(--leading-compact-body); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.app-card__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.app-card__facts div { min-width: 0; padding-top: 9px; border-top: 1px solid var(--line); }
.app-card__facts dd { overflow: hidden; margin: 0; color: var(--card-fact-foreground); font-size: var(--type-caption-1); font-weight: 400; line-height: var(--leading-caption-1); text-overflow: ellipsis; white-space: nowrap; }
.app-card__action-surface { display: block; overflow: hidden; margin-top: auto; border-radius: var(--action-radius); corner-shape: squircle; background: transparent; }
.app-card__open { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--action-primary-border); border-radius: var(--action-radius); corner-shape: squircle; background: var(--action-primary-fill); color: var(--action-primary-foreground); font-size: var(--type-compact-meta); font-weight: 600; line-height: var(--leading-compact-meta); letter-spacing: .07em; text-transform: uppercase; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color .16s ease-out, border-color .16s ease-out, opacity .16s ease-out, transform .16s var(--motion-direct); }
.app-card__open:not(.is-disabled):hover { border-color: var(--action-primary-hover-border); background: var(--action-primary-hover-fill); color: var(--action-primary-foreground); }
.app-card__open:not(.is-disabled):active { opacity: 1; transform: scale(.985); }
.app-card__open svg { width: 15px; }
.app-card__open.is-disabled { border-color: var(--line); background: var(--theme-canvas); color: var(--theme-ink); box-shadow: none; cursor: not-allowed; text-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.app-card__body > p.app-card__quality { display: block; min-height: 18px; margin-bottom: 14px; overflow: visible; font-size: 12px; line-height: 18px; color: var(--muted); }
.primary-link.is-disabled { border-color: transparent; background: var(--disabled-action-fill); color: var(--disabled-action-foreground); box-shadow: none; cursor: not-allowed; text-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.app-card--coming-soon .app-card__media { display: grid; place-items: center; background: var(--coming-soon-media-fill); }
.coming-soon-media-label { color: var(--text); font-family: var(--font-logo); font-size: var(--type-subhead); font-weight: 600; line-height: var(--leading-subhead); letter-spacing: .06em; text-align: center; }
.app-card--coming-soon .app-card__meta > span { color: var(--body-soft); }

.home-section--gallery { padding-bottom: 150px; }
.home-section--gallery .section-head p { max-width: min(820px, 100%); }
.gallery-carousel { position: relative; }
.gallery-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 42px) / 4); gap: 14px; overflow-x: auto; padding: 2px 1px 14px; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-card { min-width: 0; scroll-snap-align: start; }
.gallery-card figure { position: relative; aspect-ratio: .82; overflow: hidden; margin: 0; border: 0; border-radius: var(--media-radius); corner-shape: squircle; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.gallery-card img { display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; transition: transform .8s var(--ease), filter .4s ease; }
.gallery-card:hover img, .gallery-card:focus-visible img { transform: scale(1.025); filter: brightness(.88); }
.gallery-card figcaption { position: absolute; right: auto; bottom: 13px; left: 50%; display: inline-block; width: max-content; max-width: calc(100% - 26px); min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; font-size: var(--type-caption-1); font-weight: 500; line-height: var(--leading-caption-1); letter-spacing: .045em; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.98), 0 0 7px rgba(0,0,0,.78); transform: translateX(-50%); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }

.catalog-hero { padding: 142px 0 58px; }
.catalog-hero__row { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.catalog-hero h1,
.tior-projects__header h1,
.workspace-page__head.account-page__head h1 { margin: 0; font-family: var(--font-ui); font-size: clamp(42px, 4.3vw, 62px); font-weight: 400; line-height: 1.04; letter-spacing: -.03em; }
.tior-projects__header h1,
.workspace-page__head.account-page__head h1 { font-weight: 600; }
.catalog-hero h1 strong { font-weight: 600; }
.catalog-hero h1 em { font-family: var(--font-editorial); font-size: 1.05em; font-weight: 400; font-style: italic; }

html:lang(ko) .home-hero__panel h1 em,
html:lang(ko) .section-head h2 em,
html:lang(ko) .catalog-hero h1 em,
html:lang(ko) .app-card__meta > span { font-style: normal; font-synthesis: none; }
.catalog-hero__description { max-width: min(980px, 100%); margin: 0; color: var(--muted); font-size: var(--type-footnote); line-height: var(--leading-footnote); white-space: nowrap; }
.catalog-tools { position: relative; z-index: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; background: transparent; }
.filter-tabs { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab { position: relative; min-height: 44px; padding: 0 11px; border: 0; border-radius: 0; background: transparent; color: var(--filter-tab-foreground); font-family: var(--font-ui); font-size: var(--type-caption-1); font-weight: 500; line-height: var(--leading-caption-1); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.filter-tab::after { position: absolute; right: 11px; bottom: 7px; left: 11px; height: 1px; background: currentColor; content: ""; opacity: 0; transform: scaleX(.4); transition: opacity .16s ease-out, transform .2s var(--motion-direct); }
.filter-tab:hover, .filter-tab:focus-visible { color: var(--filter-tab-active); }
.filter-tab[aria-pressed="true"] { background: transparent; color: var(--filter-tab-active); font-weight: 600; }
.filter-tab[aria-pressed="true"]::after { opacity: .58; transform: scaleX(1); }
.search-box { position: relative; width: min(280px, 34vw); flex: 0 0 auto; }
.search-box svg { position: absolute; top: 50%; left: 13px; width: 15px; transform: translateY(-50%); color: var(--muted); }
.search-box input { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-capsule); corner-shape: squircle; outline: 0; background: var(--input-fill); padding: 0 18px 0 42px; font-size: var(--type-compact-body); line-height: var(--leading-compact-body); box-shadow: none; }
.search-box input::placeholder { color: var(--muted); opacity: 1; }
.search-box input:focus { box-shadow: var(--input-focus-shadow); }
.catalog { padding-bottom: 130px; }
.catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.empty-state { grid-column: 1 / -1; padding: 90px 20px; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: center; }
.empty-state h2 { margin: 0 0 9px; font-size: 27px; font-weight: 600; }
.empty-state p { margin: 0; color: var(--muted); font-size: var(--type-compact-body); line-height: var(--leading-compact-body); }

.site-footer { margin-top: 120px; padding: 88px var(--page) 34px; background: var(--page-canvas); color: var(--text); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(2, minmax(150px, .65fr)); gap: 74px; width: min(var(--max), 100%); margin-inline: auto; padding-bottom: 80px; }
.site-footer__grid > div:not(.site-footer__brand) { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.site-footer__grid strong { margin-bottom: 7px; color: var(--text); font-size: 13px; font-weight: 500; letter-spacing: -.015em; text-transform: uppercase; }
.site-footer__grid a { position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--footer-link); font-size: var(--type-compact-meta); font-weight: 500; line-height: var(--leading-compact-meta); letter-spacing: .06em; }
.site-footer__grid > div:not(.site-footer__brand) > a { color: var(--footer-copy); font-size: var(--type-compact-meta); font-weight: 400; line-height: var(--leading-compact-meta); }
.site-footer__grid > div:not(.site-footer__brand) a::after,
.site-footer__brand > .site-footer__wordmark::after,
.site-footer__company a::after { position: absolute; right: 0; bottom: -3px; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: left center; transition: transform .4s var(--motion-direct); }
.site-footer__grid a:hover, .site-footer__grid a:focus-visible { color: var(--nav-foreground); }
.site-footer__grid > div:not(.site-footer__brand) a:hover::after,
.site-footer__grid > div:not(.site-footer__brand) a:focus-visible::after,
.site-footer__brand > .site-footer__wordmark:hover::after,
.site-footer__brand > .site-footer__wordmark:focus-visible::after,
.site-footer__company a:hover::after,
.site-footer__company a:focus-visible::after { transform: scaleX(1); }
.site-footer__grid svg { width: 12px; }
.site-footer__brand > .site-footer__wordmark { color: var(--text); font-size: 22px; font-weight: 500; letter-spacing: -.025em; line-height: 1; }
.site-footer__brand p { max-width: 625px; margin: 27px 0 32px; color: var(--footer-copy); font-size: var(--type-subhead); line-height: var(--leading-subhead); }
.site-footer__company { display: grid; max-width: 670px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 34px; margin: 0; }
.site-footer__company > div { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: baseline; gap: 12px; }
.site-footer__company dt { color: var(--footer-quiet); font-size: var(--type-caption-1); font-weight: 500; line-height: var(--leading-caption-1); letter-spacing: .06em; }
.site-footer__company dd { min-width: 0; margin: 0; color: var(--footer-detail); font-size: var(--type-caption-1); line-height: var(--leading-caption-1); }
.site-footer__company a { display: inline; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; }
.site-footer__bottom { display: flex; justify-content: space-between; gap: 20px; width: min(var(--max), 100%); margin-inline: auto; padding-top: 25px; color: var(--footer-bottom); font-family: var(--font-ui); font-size: var(--type-caption-1); line-height: var(--leading-caption-1); letter-spacing: .045em; text-transform: none; }
.site-footer__bottom span:last-child { text-transform: uppercase; }

.drawer-scrim { position: fixed; z-index: 90; inset: 0; background: rgba(0,0,0,.62); opacity: 0; transition: opacity .28s ease; }
.drawer-scrim.is-visible { opacity: 1; }
.mobile-drawer { position: fixed; z-index: 100; top: 0; right: 0; bottom: 0; width: min(88vw, 390px); padding: max(22px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom)); border-left: 1px solid var(--line); background: var(--drawer-fill); transform: translateX(102%); transition: transform .42s var(--ease); }
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.icon-button { display: grid; width: 44px; height: 44px; place-items: center; border-radius: var(--radius-icon); corner-shape: squircle; background: transparent; }
.mobile-drawer nav { display: flex; flex-direction: column; }
.mobile-drawer nav a { display: grid; grid-template-columns: 28px 1fr 24px; gap: 15px; align-items: center; min-height: 68px; border-bottom: 1px solid var(--line); font-size: 26px; font-weight: 500; }
.mobile-drawer nav a[aria-current="page"] { color: var(--nav-foreground); }
.mobile-drawer nav svg { width: 20px; }
.mobile-drawer nav .trailing { justify-self: end; }
.mobile-drawer > p { position: absolute; right: 22px; bottom: max(28px, env(safe-area-inset-bottom)); left: 22px; color: var(--muted); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); }

.app-dialog { width: min(960px, calc(100vw - 32px)); max-block-size: calc(100svh - 32px); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-panel); corner-shape: squircle; background: var(--dialog-fill); color: var(--dialog-foreground); padding: 0; box-shadow: var(--dialog-shadow); transform-origin: var(--dialog-origin-x, 50%) var(--dialog-origin-y, 50%); }
.app-dialog::before { display: none; content: none; }
.app-dialog { width: min(960px, calc(100vw - 32px), calc((100svh - 300px) * 16 / 9 + 80px)); min-width: min(340px, calc(100vw - 32px)); }
.app-dialog::backdrop { background: rgba(0,0,0,.64); }
.app-dialog[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); animation: dialogIn .34s var(--motion-direct) both; }
.app-dialog__visual, .app-dialog [data-dialog-start] { display: none !important; }
.app-dialog > * { position: relative; }
.app-dialog__close { position: absolute; z-index: 4; top: 16px; right: 16px; background: transparent; }
.app-dialog__visual { position: relative; min-height: min(560px, calc(100svh - 34px)); overflow: hidden; background: var(--typographic-media-fill) center / cover no-repeat; }
.app-dialog__visual.is-coming-soon { display: grid; place-items: center; background: var(--coming-soon-media-fill); }
.app-dialog__preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; pointer-events: none; transition: opacity .22s var(--motion-direct); }
.app-dialog__preview.is-contain { padding: clamp(28px, 5vw, 64px); background: var(--surface); object-fit: contain; }
.app-dialog__preview.is-page-capture { padding: 0; background: var(--surface); object-fit: contain; object-position: center; }
.app-dialog__preview--after { opacity: 0; }
.app-dialog .app-dialog__visual > video.app-dialog__preview[data-guide-preview-video] { width: 100%; height: 100%; object-fit: contain; object-position: center; background: var(--surface); }
.app-dialog__visual[data-preview-state="after"] .app-dialog__preview--before { opacity: 0; }
.app-dialog__visual[data-preview-state="after"] .app-dialog__preview--after { opacity: 1; }
.app-dialog__visual-actions { position: absolute; z-index: 2; bottom: 18px; left: 18px; }
.app-dialog__compare-toggle { display: inline-flex; min-width: 82px; min-height: 44px; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid var(--action-primary-border); border-radius: var(--action-radius); corner-shape: squircle; background: var(--action-primary-fill); color: var(--action-primary-foreground); font-size: var(--type-caption-1); font-weight: 600; line-height: var(--leading-caption-1); letter-spacing: .07em; text-transform: uppercase; transition: background-color .16s ease-out, border-color .16s ease-out, opacity .16s ease-out, transform .16s var(--motion-direct); }
.app-dialog__compare-toggle:active { opacity: 1; transform: scale(.985); }
.app-dialog__visual.is-typographic { display: grid; place-items: center; padding: 30px; background-color: var(--typographic-media-fill); background-image: radial-gradient(var(--typographic-dot) .75px, transparent .9px); background-size: 15px 15px; font-size: clamp(42px, 5vw, 68px); font-weight: 600; line-height: .92; letter-spacing: -.055em; text-align: center; }
.app-dialog__body { display: flex; min-height: 0; overflow-y: auto; overscroll-behavior: contain; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: clamp(24px, 3vw, 40px); }
.app-dialog__body h2 { margin: 0 44px 8px 0; font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: 0; }
.app-dialog__body > p { margin: 0 0 20px; color: var(--muted); font-size: var(--type-compact-body); line-height: var(--leading-compact-body); }
.app-dialog__guide { width: 100%; margin: 0; }
.app-dialog__tutorial { margin: 12px 0 16px; }
.app-dialog__tutorial video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--surface); border-radius: 8px; }
.app-dialog__tutorial p { margin: 8px 0 0; color: var(--muted); font-size: var(--type-caption-1); line-height: var(--leading-caption-1); }
.app-dialog__guide h3 { margin: 0 0 8px; color: var(--muted); font-family: var(--font-editorial); font-size: 22px; font-style: italic; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-transform: none; }
.app-dialog__body ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: app-guide-step; }
.app-dialog__body li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--detail-foreground); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); counter-increment: app-guide-step; }
.app-dialog__body li::before { color: var(--muted); content: counter(app-guide-step, decimal-leading-zero); font-variant-numeric: tabular-nums; }
.primary-link,
.secondary-link { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 13px; padding: 0 20px; border-radius: var(--action-radius); corner-shape: squircle; font-size: var(--type-caption-1); font-weight: 600; line-height: var(--leading-caption-1); letter-spacing: .07em; text-transform: uppercase; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color .16s ease-out, border-color .16s ease-out, color .16s ease-out, opacity .16s ease-out, transform .16s var(--motion-direct); }
.primary-link { border: 1px solid var(--action-primary-border); background: var(--action-primary-fill); color: var(--action-primary-foreground); }
.secondary-link { border: 1px solid var(--action-secondary-border); background: var(--action-secondary-fill); color: var(--action-secondary-foreground); }
.primary-link:hover { border-color: var(--action-primary-hover-border); background: var(--action-primary-hover-fill); color: var(--action-primary-foreground); }
.secondary-link:hover { border-color: var(--text); background: var(--action-secondary-fill); color: var(--action-secondary-foreground); }
.primary-link:active,
.secondary-link:active { opacity: 1; transform: scale(.985); }

@media (hover: hover) and (pointer: fine) {
  .app-dialog__compare-toggle:hover { border-color: var(--action-primary-hover-border); background: var(--action-primary-hover-fill); }
}

.global-search-dialog { width: min(680px, calc(100vw - 32px)); max-height: min(760px, calc(100svh - 32px)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-panel); corner-shape: squircle; background: var(--search-dialog-surface); color: var(--search-dialog-control-foreground); padding: 34px; box-shadow: var(--search-dialog-shadow); }
.global-search-dialog::backdrop { background: rgba(0,0,0,.64); }
.global-search-dialog[open] { display: block; animation: dialogIn .3s var(--motion-direct) both; }
.global-search-dialog > * { position: relative; z-index: 3; }
.global-search-dialog__close { position: absolute; z-index: 5; top: 18px; right: 18px; }
.global-search-dialog__head { padding-right: 58px; }
.global-search-dialog__head .kicker { color: var(--search-dialog-copy); }
.global-search-dialog__head h2 { margin: 0 0 9px; color: var(--search-dialog-copy); font-size: clamp(34px, 5vw, 48px); font-weight: 500; line-height: 1; letter-spacing: -.035em; }
.global-search-dialog__head > p:last-child { max-width: 470px; margin: 0; color: var(--search-dialog-copy); font-size: 13px; line-height: 1.55; }
.global-search-field { position: relative; display: block; margin-top: 28px; }
.global-search-field > svg { position: absolute; z-index: 3; top: 50%; left: 18px; width: 18px; height: 18px; color: var(--search-dialog-control-detail); transform: translateY(-50%); pointer-events: none; }
.global-search-field input { width: 100%; height: 52px; border: 1px solid var(--line); border-radius: var(--radius-capsule); corner-shape: squircle; outline: 0; padding: 0 20px 0 50px; background: var(--surface); color: var(--search-dialog-control-foreground); box-shadow: none; }
.global-search-field input::placeholder { color: var(--search-dialog-control-muted); opacity: 1; }
.global-search-field input:focus { box-shadow: none; }
.global-search-field:focus-within { box-shadow: var(--input-focus-shadow); }
.global-search-count { margin: 18px 4px 10px; color: var(--search-dialog-copy); font-size: var(--type-caption-1); font-weight: 600; line-height: var(--leading-caption-1); letter-spacing: .06em; text-transform: uppercase; }
.global-search-results { display: grid; gap: 8px; max-height: min(440px, 48svh); overflow-y: auto; padding: 1px 0 2px; scrollbar-width: none; -ms-overflow-style: none; }
.global-search-results::-webkit-scrollbar { display: none; width: 0; height: 0; }

.global-media-dialog { width: min(1180px, calc(100vw - 32px)); max-width: none; height: min(780px, calc(100svh - 32px)); max-height: none; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-panel); corner-shape: squircle; background: var(--surface); padding: 0; box-shadow: var(--dialog-shadow); }
.global-media-dialog::backdrop { background: rgba(0,0,0,.64); }
.global-media-dialog[open] { display: grid; animation: dialogIn .3s var(--motion-direct) both; }
.global-media-dialog__close { position: absolute; z-index: 3; top: 16px; right: 16px; border: 0; background: var(--media-control-fill); color: var(--media-control-foreground); box-shadow: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.72)); }
.global-media-dialog__stage { position: relative; display: grid; min-width: 0; min-height: 0; place-items: center; overflow: hidden; background: var(--surface); }
.global-media-dialog__stage img,
.global-media-dialog__stage video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; }
.global-search-result { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; gap: 16px; align-items: center; min-height: 72px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--action-radius); corner-shape: squircle; background: transparent; color: var(--search-dialog-control-foreground); box-shadow: none; transition: transform .18s var(--motion-direct); }
.global-search-result:hover, .global-search-result:focus-visible { transform: translateY(-1px); }
.global-search-result.is-disabled { cursor: default; opacity: 1; }
.global-search-result.is-disabled > * { opacity: .68; }
.global-search-result.is-disabled:hover { transform: none; }
.global-search-result span { min-width: 0; }
.global-search-result strong, .global-search-result small { display: block; }
.global-search-result strong { margin-bottom: 4px; font-size: 14px; font-weight: 600; }
.global-search-result small { overflow: hidden; color: var(--search-dialog-control-muted); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); text-overflow: ellipsis; white-space: nowrap; }
.global-search-result em { color: var(--search-dialog-control-detail); font-family: var(--font-editorial); font-size: var(--type-compact-meta); font-style: italic; line-height: var(--leading-compact-meta); white-space: nowrap; }
.global-search-result svg { width: 16px; height: 16px; color: var(--search-dialog-control-detail); }
.global-search-result__status { color: var(--search-dialog-control-muted); font-size: var(--type-caption-1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.global-search-empty { display: flex; min-height: 150px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border-radius: var(--action-radius); corner-shape: squircle; background: var(--surface); color: var(--search-dialog-copy); text-align: center; }
.global-search-empty strong { font-size: 16px; }
.global-search-empty span { max-width: 380px; color: var(--search-dialog-control-muted); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: 98px 0 30px; color: var(--muted); font-size: var(--type-caption-1); font-weight: 600; line-height: var(--leading-caption-1); letter-spacing: .06em; text-transform: uppercase; }
.breadcrumb a { color: var(--detail-foreground); }
.breadcrumb a:hover { color: var(--nav-foreground); }
.app-shell { padding-bottom: 70px; }
.app-shell__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); min-height: 650px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.app-shell__visual { position: relative; min-height: 650px; overflow: hidden; border-right: 1px solid var(--line); background: var(--surface); }
.app-shell__visual img { height: 100%; object-fit: cover; }
.app-shell__visual img.is-contain { padding: clamp(32px, 7vw, 92px); background: var(--surface); object-fit: contain; }
.app-shell__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(34px, 5vw, 70px); }
.app-shell__body h1 { max-width: 560px; margin: 0 0 20px; font-size: clamp(38px, 4.2vw, 62px); font-weight: 500; line-height: .98; letter-spacing: -.035em; }
.app-shell__lead { max-width: 520px; margin: 0 0 28px; color: var(--body-soft); font-size: var(--type-subhead); line-height: var(--leading-subhead); }
.app-shell__facts { display: grid; width: 100%; margin: 0 0 30px; border-top: 1px solid var(--line); }
.app-shell__facts div { display: grid; grid-template-columns: minmax(130px, .55fr) 1fr; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.app-shell__facts dt { color: var(--muted); font-size: var(--type-caption-1); font-weight: 600; line-height: var(--leading-caption-1); letter-spacing: .06em; text-transform: uppercase; }
.app-shell__facts dd { margin: 0; color: var(--detail-foreground); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); }
.app-shell__body h2 { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.app-shell__body ul { width: 100%; margin: 0 0 31px; padding: 0; list-style: none; }
.app-shell__body li { padding: 9px 0 9px 18px; border-bottom: 1px solid var(--line); color: var(--body-soft); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); }
.app-shell__body li::before { display: inline-block; width: 4px; height: 4px; margin: 0 10px 2px -14px; background: var(--detail-foreground); content: ""; }
.app-shell__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.staging-note { margin: 18px 0 0; padding: 16px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--muted); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); text-align: center; }

.pricing-page { min-height: 760px; padding-top: 130px; padding-bottom: 42px; }
.pricing-hero { max-width: 900px; margin-inline: auto; text-align: center; }
.pricing-hero .studio-context-kicker { margin-bottom: 22px; text-align: center; }
.pricing-hero h1 { margin: 0; font-size: clamp(54px, 7vw, 88px); font-weight: 400; line-height: .96; letter-spacing: -.045em; }
.pricing-hero h1 strong { font-weight: 600; }
.pricing-hero h1 em { font-family: var(--font-editorial); font-size: 1.08em; font-weight: 400; font-style: italic; }
.pricing-hero > p:not(.kicker, .pricing-welcome-note) { max-width: 680px; margin: 24px auto 0; color: var(--muted); font-size: var(--type-subhead); line-height: var(--leading-subhead); }
.pricing-tabs { display: flex; width: min(100%, 370px); align-items: center; gap: 3px; margin: 34px auto 0; padding: 3px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-raised); }
.pricing-tab { position: relative; z-index: 3; display: inline-flex; min-width: 0; min-height: 38px; flex: 1; align-items: center; justify-content: center; padding: 0 18px; border-radius: 10px; background: transparent; color: var(--muted); font: 500 13px/1.3 var(--font-ui); white-space: nowrap; cursor: pointer; transition: background-color .18s var(--motion-direct), color .18s ease; }
.pricing-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
:root[data-theme="dark"] .pricing-tab[aria-selected="true"] { background: color-mix(in srgb, var(--text) 12%, var(--surface)); }
.pricing-tab:hover { color: var(--text); }
.pricing-tab:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (pointer: coarse) { .pricing-tab { min-height: 44px; } }
@media (forced-colors: active) { .pricing-tab[aria-selected="true"] { outline: 1px solid Highlight; color: Highlight; } }
.pricing-welcome-note { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 7px 12px; margin: 22px auto 0; color: var(--muted); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); }
.pricing-welcome-note strong { color: var(--text); font-weight: 600; }
.pricing-panel { margin-top: 54px; }
.pricing-panel:focus { outline-offset: 8px; }
.pricing-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 18px; }
.pricing-plan-card { position: relative; display: flex; min-height: 610px; flex-direction: column; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-card); corner-shape: squircle; background: var(--pricing-surface-raised); box-shadow: var(--pricing-card-shadow); }
.pricing-plan-card--featured { border-color: var(--line-strong); }
.pricing-plan-card header { padding-right: 0; }
.pricing-plan-card__heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.pricing-plan-badge { display: inline-block; margin-left: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--muted); font-family: var(--font-editorial); font-size: var(--type-compact-meta); font-weight: 400; font-style: italic; font-synthesis: none; line-height: var(--leading-compact-meta); letter-spacing: .025em; text-transform: uppercase; white-space: nowrap; }
.pricing-plan-card header h2 { margin: 0; font-size: var(--type-title-2); font-weight: 600; line-height: var(--leading-title-2); }
.pricing-plan-card header p { min-height: 40px; margin: 7px 0 0; color: var(--muted); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); }
.pricing-plan-card__price { display: flex; align-items: baseline; gap: 7px; margin: 34px 0 0; }
.pricing-plan-card__price strong { font-size: clamp(54px, 5vw, 68px); font-weight: 600; line-height: .9; letter-spacing: -.045em; }
.pricing-plan-card__price span { color: var(--muted); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); }
.pricing-plan-card__credits { display: flex; align-items: baseline; gap: 8px; margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); }
.pricing-plan-card__credits strong { font-size: var(--type-title-1); font-weight: 600; line-height: var(--leading-title-1); }
.pricing-plan-card__credits span { color: var(--body-soft); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); }
.pricing-plan-card__allocation { margin: 8px 0 0; color: var(--text); font-size: var(--type-compact-meta); font-weight: 500; line-height: var(--leading-compact-meta); }
.pricing-plan-card__bonus { margin: 4px 0 0; color: var(--muted); font-size: var(--type-caption-1); line-height: var(--leading-caption-1); }
.pricing-plan-card ul { display: grid; gap: 12px; margin: 28px 0 32px; padding: 0; list-style: none; }
.pricing-plan-card li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: start; color: var(--body-strong); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); }
.pricing-plan-card li svg { width: 14px; height: 14px; margin-top: 2px; color: var(--muted); }
.pricing-plan-card__cta { width: 100%; min-height: 48px; justify-content: center; margin-top: auto; white-space: nowrap; }
.pricing-plan-card__cta[aria-busy="true"],
.pricing-topup-card__cta[aria-busy="true"] { cursor: wait; }
.pricing-plan-card__cta.has-error,
.pricing-topup-card__cta.has-error { box-shadow: 0 0 0 2px var(--line-strong); }
.pricing-plan-card.is-current { border-color: var(--line-strong); }
.pricing-availability { min-height: 36px; max-width: 760px; margin: 22px auto 0; color: var(--muted); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); text-align: center; }
.pricing-subscription-management { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; max-width: 760px; margin: 4px auto 0; text-align: center; }
.pricing-subscription-management[hidden] { display: none; }
.pricing-subscription-management [data-pricing-plan-change-action][hidden] { display: none; }
.pricing-subscription-management p { margin: 0; color: var(--muted); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); }
.pricing-subscription-management .secondary-link { min-height: 44px; }
.pricing-topup-card { display: grid; max-width: 940px; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); margin-inline: auto; padding: 40px; border: 1px solid var(--line); border-radius: var(--radius-card); corner-shape: squircle; background: var(--pricing-surface-raised); box-shadow: var(--pricing-card-shadow); }
.pricing-topup-card__summary { padding-right: 46px; }
.pricing-topup-card__summary h2 { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 0; }
.pricing-topup-card__summary h2 strong { font-size: clamp(56px, 6vw, 78px); font-weight: 600; line-height: .9; letter-spacing: -.05em; }
.pricing-topup-card__summary h2 span { color: var(--muted); font-size: var(--type-subhead); font-weight: 400; line-height: var(--leading-subhead); }
.pricing-topup-card__summary > p:not(.kicker) { max-width: 470px; margin: 22px 0 0; color: var(--body-soft); font-size: var(--type-compact-body); line-height: var(--leading-compact-body); }
.pricing-topup-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 34px 0 0; }
.pricing-topup-facts div { min-width: 0; }
.pricing-topup-facts dt { color: var(--muted); font-size: var(--type-caption-1); font-weight: 600; line-height: var(--leading-caption-1); letter-spacing: .06em; text-transform: uppercase; }
.pricing-topup-facts dd { margin: 8px 0 0; color: var(--text); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); }
.pricing-topup-card__purchase { min-width: 0; padding-left: 40px; border-left: 1px solid var(--line); }
.pricing-topup-card__purchase > label { display: block; margin-top: 18px; color: var(--body-strong); font-size: var(--type-compact-meta); font-weight: 600; line-height: var(--leading-compact-meta); }
.pricing-topup-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 54px; align-items: center; gap: 12px; margin-top: 8px; padding: 0 16px 0 0; border: 1px solid var(--line); border-radius: 999px; background: var(--input-fill); box-shadow: var(--input-shadow); }
.pricing-topup-input:focus-within { border-color: transparent; box-shadow: var(--input-focus-shadow); }
.pricing-topup-input input { width: 100%; min-width: 0; min-height: 52px; padding: 0 0 0 16px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: var(--type-title-3); font-weight: 600; line-height: var(--leading-title-3); }
.pricing-topup-input input:invalid { color: var(--text); }
.pricing-topup-input span { color: var(--muted); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); white-space: nowrap; }
.pricing-topup-help,
.pricing-topup-validation { margin: 8px 0 0; color: var(--muted); font-size: var(--type-caption-1); line-height: var(--leading-caption-1); }
.pricing-topup-validation { min-height: var(--leading-caption-1); color: var(--body-strong); }
.pricing-topup-total { display: flex; min-height: 62px; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.pricing-topup-total span { color: var(--body-soft); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); }
.pricing-topup-total strong { font-size: var(--type-title-1); font-weight: 600; line-height: var(--leading-title-1); }
.pricing-topup-card__cta { width: 100%; min-height: 48px; justify-content: center; margin-top: 18px; white-space: nowrap; }
.pricing-shop-benefit { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 7vw, 92px); margin-top: 96px; padding: clamp(36px, 5vw, 62px); border: 1px solid var(--line); border-radius: var(--radius-card); corner-shape: squircle; background: var(--pricing-surface); }
.pricing-shop-benefit__intro h2 { margin: 0; font-size: clamp(38px, 4.2vw, 58px); font-weight: 400; line-height: 1.02; letter-spacing: -.035em; }
.pricing-shop-benefit__intro h2 strong { font-weight: 600; }
.pricing-shop-benefit__intro h2 em { font-family: var(--font-editorial); font-size: 1.06em; font-weight: 400; font-style: italic; }
.pricing-shop-benefit__intro > p:last-child { max-width: 560px; margin: 25px 0 0; color: var(--body-soft); font-size: var(--type-subhead); line-height: var(--leading-subhead); }
.pricing-shop-benefit__detail { padding-left: clamp(32px, 5vw, 64px); border-left: 1px solid var(--line); }
.pricing-shop-benefit__detail h3 { max-width: 430px; margin: 0; font-size: var(--type-title-2); font-weight: 600; line-height: var(--leading-title-2); letter-spacing: -.02em; }
.pricing-shop-benefit__detail > p:not(.kicker, .pricing-benefit-status) { margin: 18px 0 0; color: var(--body-soft); font-size: var(--type-compact-body); line-height: var(--leading-compact-body); }
.pricing-benefit-status { display: grid; gap: 5px; margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.pricing-benefit-status strong { font-size: var(--type-compact-meta); font-weight: 600; line-height: var(--leading-compact-meta); }
.pricing-benefit-status span { color: var(--muted); font-size: var(--type-caption-1); line-height: var(--leading-caption-1); }
.pricing-shop-benefit__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }

.workspace-page { min-height: 680px; padding-top: 138px; padding-bottom: 70px; }
.workspace-page .breadcrumb { padding-top: 0; }
.workspace-page__head { display: grid; grid-template-columns: minmax(0, .85fr) minmax(380px, 1.15fr); gap: 30px; align-items: end; padding-bottom: 42px; border-bottom: 1px solid var(--line); }
.workspace-page__head .kicker { grid-column: 1 / -1; margin-bottom: -10px; }
.workspace-page__head > .studio-context-kicker { text-align: center; }
.workspace-page__head h1 { margin: 0; font-size: clamp(48px, 6vw, 82px); font-weight: 500; letter-spacing: -.045em; line-height: .92; }
.workspace-page__head > p:last-child { max-width: 610px; margin: 0; color: var(--muted); font-size: var(--type-subhead); line-height: var(--leading-subhead); }
.workspace-page__head.account-page__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.account-page__head .kicker { margin: 0; }
.workspace-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); overflow: visible; margin: 0; padding: 30px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.workspace-metrics div { min-height: 0; padding: 0; border: 0; }
.workspace-metrics dt { color: var(--muted); font-size: var(--type-caption-1); font-weight: 600; line-height: var(--leading-caption-1); letter-spacing: .06em; text-transform: uppercase; }
.workspace-metrics dd { margin: 13px 0 0; font-size: 31px; font-weight: 500; }
.workspace-empty { display: flex; min-height: 370px; flex-direction: column; align-items: center; justify-content: center; margin-top: 18px; padding: 48px 20px; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: center; }
.workspace-empty > svg { width: 34px; height: 34px; margin-bottom: 22px; color: #777; }
.workspace-empty h1, .workspace-empty h2 { margin: 0 0 10px; font-size: 31px; font-weight: 500; letter-spacing: -.025em; }
.workspace-empty > p { max-width: 550px; margin: 0 0 27px; color: var(--muted); font-size: var(--type-compact-body); line-height: var(--leading-compact-body); }
.workspace-empty > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.account-panel { display: flex; min-height: 145px; align-items: center; justify-content: space-between; gap: 24px; margin-top: 18px; padding: 26px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.account-panel__state { display: block; }
.account-panel [data-account-action] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.account-panel h2 { margin: 0 0 6px; font-size: 20px; font-weight: 500; }
.account-panel p:not(.kicker) { margin: 0; color: var(--muted); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); }
.account-metrics { text-align: center; }
.account-credits-note { margin: 0; text-align: center; color: var(--muted); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); }
.account-subscriptions { margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); }
.account-subscriptions[hidden], .account-subscriptions [hidden] { display: none; }
.account-subscriptions header { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.account-subscriptions__manage { --workspace-detail-editorial-weight: 500; }
.account-subscriptions h2 { margin: 0; font-size: var(--type-title-2); line-height: var(--leading-title-2); font-weight: 600; }
.account-subscriptions p { color: var(--muted); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); }
.account-subscriptions [data-subscription-status]:empty { display: none; }
.account-subscriptions ul { list-style: none; margin: 12px 0 0; padding: 0; }
.account-subscriptions li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding: 8px 0; color: var(--text); font-size: var(--type-compact-body); line-height: var(--leading-compact-body); }
.account-subscriptions li span { overflow-wrap: anywhere; min-width: 0; flex: 1; }
.account-subscriptions__dates { display: block; margin-top: 3px; color: var(--muted); font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); }
.account-subscriptions li .account-subscriptions__state { font-family: var(--font-logo-en); font-style: normal; font-weight: 500; font-size: var(--type-body); white-space: nowrap; }
.account-coupons { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); margin: 28px 0 54px; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.account-coupons[hidden] { display: none; }
.account-coupons h2 { margin: 0; font-size: var(--type-title-2); font-weight: 600; line-height: var(--leading-title-2); }
.account-coupons header > p:last-child { max-width: 480px; margin: 12px 0 0; color: var(--body-soft); font-size: var(--type-compact-body); line-height: var(--leading-compact-body); }
.account-coupons__list { display: grid; align-content: start; gap: 0; }
.account-coupon { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.account-coupon:last-child { border-bottom: 0; }
.account-coupon > div { display: grid; min-width: 0; gap: 3px; }
.account-coupon strong { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: var(--type-compact-body); font-weight: 500; }
.account-coupon span { color: var(--muted); font-size: var(--type-caption-1); }
.account-coupon .secondary-link { flex: 0 0 auto; margin: 0; }
.account-coupon .account-coupon__redeemed:disabled {
  background: #FFFFFF; color: #000000; border-color: var(--line);
  opacity: 1; cursor: default; pointer-events: none; box-shadow: none; transform: none;
}

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes dialogIn { from { transform: translate3d(var(--dialog-shift-x, 0), var(--dialog-shift-y, 12px), 0) scale(.95); } to { transform: translate3d(0, 0, 0) scale(1); } }

@media (max-width: 1100px) {
  :root { --page: 34px; }
  .home-hero__inner { gap: 18px; min-height: 640px; }
  .home-hero__panel, .hero-mosaic { min-height: 640px; }
  .hero-mosaic { grid-template-rows: 346px 276px; gap: 18px 12px; }
  .home-hero__panel { padding: 36px; }
  .hero-panel__arrow { right: 32px; }
  .carousel-track { grid-auto-columns: calc((100% - 36px) / 3); }
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-shell__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1099px) {
  .site-header .brand,
  .mobile-drawer .brand { font-size: var(--gnb-wordmark-size-compact); }
}

@media (max-width: 959px) {
  .site-header { grid-template-columns: 1fr auto auto; }
  .dock { display: none; }
  .header-utility { display: none; }
  .menu-button { display: grid; }
}

@media (max-width: 820px) {
  :root { --page: 22px; }
  .home-hero__inner { grid-template-columns: 1fr; }
  .home-hero__panel { min-height: 500px; }
  .hero-mosaic { min-height: 620px; }
  .carousel-track { grid-auto-columns: calc((100% - 18px) / 2); }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-track { grid-auto-columns: calc((100% - 14px) / 2); }
  .app-shell__grid { grid-template-columns: 1fr; }
  .app-shell__visual { min-height: 480px; border-right: 0; border-bottom: 1px solid var(--line); }
  .workspace-page__head { grid-template-columns: 1fr; }
  .pricing-plan-grid { grid-template-columns: 1fr; }
  .pricing-plan-card { min-height: 0; }
  .pricing-topup-card { grid-template-columns: 1fr; }
  .pricing-topup-card__summary { padding-right: 0; }
  .pricing-topup-card__purchase { margin-top: 36px; padding: 34px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .pricing-shop-benefit { grid-template-columns: 1fr; }
  .pricing-shop-benefit__detail { padding: 36px 0 0; border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 720px) {
  :root { --page: 16px; }
  .site-header { grid-template-columns: 1fr auto auto; gap: 8px; height: 68px; padding-inline: 16px; }
  .gnb-control-cluster { gap: 4px; }
  .gnb-search-button,
  .gnb-appearance-button { width: 44px; height: 44px; flex-basis: 44px; }
  .home-hero { padding: 87px 14px 0; }
  .home-hero__panel { min-height: 402px; padding: 34px 30px; }
  .home-hero__copy { align-self: center; }
  .home-hero__panel h1 { font-size: clamp(42px, 12.8vw, 54px); }
  .home-hero__copy > p { max-width: 310px; margin: 21px 0 23px; font-size: var(--type-subhead); line-height: var(--leading-subhead); }
  .hero-cta { width: min(100%, 285px); }
  .hero-panel__arrow { top: 48%; right: 28px; width: 39px; height: 39px; }
  .hero-panel__arrow svg { width: 28px; height: 28px; }
  .hero-mosaic { display: flex; min-height: 0; flex-direction: column; gap: 12px; margin-top: 12px; }
  .hero-mosaic figure, .hero-mosaic__wide { width: 100%; height: 315px; flex: 0 0 315px; border-radius: var(--media-radius-mobile); corner-shape: squircle; }
  .hero-mosaic__wide { height: 392px; flex-basis: 392px; }
  .hero-mosaic__caption { padding: 25px 22px 20px; }
  .hero-mosaic__caption strong { font-size: 23px; }
  .home-section { padding-top: 110px; }
  .section-head--center { margin-bottom: 34px; }
  .section-head h2 { font-size: 36px; }
  .section-head p { max-width: 340px; font-size: var(--type-compact-body); line-height: var(--leading-compact-body); }
  .home-section--gallery .section-head p { max-width: 340px; }
  .search-box input, .global-search-field input { font-size: 16px; }
  .app-card__meta > span { font-size: 14px; line-height: 20px; }
  .app-card__body h3 { font-size: 18px; line-height: 23px; }
  .app-card__body > p { min-height: 63px; font-size: var(--type-subhead); line-height: var(--leading-callout); }
  .app-card__facts dd, .app-card__open { font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); }
  .carousel-track { grid-auto-columns: calc(100vw - 36px); gap: 12px; margin-right: -16px; padding-right: 16px; }
  .app-card { min-height: 650px; height: auto; border-radius: var(--radius-card-mobile); corner-shape: squircle; }
  .app-card__media { height: 300px; flex-basis: 300px; }
  .carousel-controls { margin-top: 10px; }
  .gallery-track { grid-auto-columns: min(78vw, 390px); gap: 12px; margin-right: -16px; padding-right: 16px; }
  .catalog-hero { padding: 126px 0 42px; }
  .catalog-hero h1,
  .tior-projects__header h1,
  .workspace-page__head.account-page__head h1 { font-size: 40px; }
  .catalog-hero__description { max-width: 430px; white-space: normal; }
  .catalog-tools { display: block; padding: 12px 0; }
  .filter-tabs { margin-bottom: 10px; }
  .search-box { width: 100%; }
  .catalog-grid { grid-template-columns: 1fr; gap: 12px; }
  .catalog { padding-bottom: 90px; }
  .site-footer { margin-top: 80px; padding: 82px 22px 28px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 48px 26px; padding-bottom: 55px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__company { max-width: none; }
  .site-footer__bottom { display: block; line-height: 1.9; }
  .site-footer__bottom span { display: block; }
  .app-dialog { border-radius: var(--radius-panel-mobile); corner-shape: squircle; }
  .global-search-dialog { width: calc(100vw - 24px); max-height: calc(100svh - 24px); padding: 27px 18px 22px; border-radius: var(--radius-panel-mobile); corner-shape: squircle; }
  .global-search-dialog__close { top: 12px; right: 12px; }
  .global-search-dialog__head { padding-right: 48px; }
  .global-search-dialog__head h2 { font-size: 36px; }
  .global-search-result { grid-template-columns: minmax(0, 1fr) 18px; gap: 10px; }
  .global-search-result em { display: none; }
  .app-dialog[open] { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
  .app-dialog__visual { min-height: 0; }
  .app-dialog__close { top: 12px; right: 12px; width: 44px; height: 44px; border: 1px solid var(--media-control-border); background: var(--media-control-fill); color: var(--media-control-foreground); box-shadow: none; }
  .app-dialog__body { overflow-y: auto; padding: 28px 24px 32px; }
  .app-dialog__body h2 { font-size: 24px; }
  .app-dialog__body ol { grid-template-columns: 1fr; gap: 0; }
  .breadcrumb { padding-top: 96px; }
  .app-shell__visual { min-height: 360px; }
  .app-shell__body { padding: 30px 22px 34px; }
  .app-shell__body h1 { font-size: 39px; }
  .app-shell__facts div { grid-template-columns: 1fr; gap: 6px; }
  .workspace-page { padding-top: 118px; }
  .workspace-metrics { grid-template-columns: 1fr; border-right: 0; }
  .workspace-metrics div { min-height: 90px; border: 0; }
  .account-metrics { gap: 24px; }
  .account-metrics div { min-height: 0; }
  .account-panel { align-items: stretch; flex-direction: column; }
  .account-coupons { grid-template-columns: 1fr; }
  .pricing-page { padding-top: 112px; padding-bottom: 28px; }
  .pricing-hero .studio-context-kicker { margin-bottom: 17px; }
  .pricing-hero h1 { font-size: 46px; line-height: 1; }
  .pricing-hero > p:not(.kicker, .pricing-welcome-note) { max-width: 350px; margin-top: 20px; font-size: var(--type-compact-body); line-height: var(--leading-compact-body); }
  .pricing-tabs { width: 100%; margin-top: 28px; }
  .pricing-tab { padding-inline: 10px; }
  .pricing-welcome-note { align-items: center; flex-direction: column; gap: 3px; }
  .pricing-panel { margin-top: 38px; }
  .pricing-plan-grid { gap: 12px; }
  .pricing-plan-card { padding: 28px 24px 24px; border-radius: var(--radius-card-mobile); corner-shape: squircle; }
  .pricing-plan-card header { padding-right: 0; }
  .pricing-plan-card__price strong { font-size: 58px; }
  .pricing-plan-card__credits { margin-top: 28px; padding-top: 22px; }
  .pricing-topup-card { padding: 30px 24px 24px; border-radius: var(--radius-card-mobile); corner-shape: squircle; }
  .pricing-topup-card__summary h2 strong { font-size: 60px; }
  .pricing-topup-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-topup-facts div:last-child { grid-column: 1 / -1; }
  .pricing-topup-input { min-height: 58px; }
  .pricing-topup-input input { min-height: 56px; font-size: var(--type-title-2); line-height: var(--leading-title-2); }
  .pricing-topup-help,
  .pricing-topup-validation { font-size: var(--type-compact-meta); line-height: var(--leading-compact-meta); }
  .pricing-shop-benefit { gap: 0; margin-top: 72px; padding: 32px 24px; border-radius: var(--radius-card-mobile); corner-shape: squircle; }
  .pricing-shop-benefit__intro h2 { font-size: 40px; }
  .pricing-shop-benefit__actions { flex-direction: column; }
  .pricing-shop-benefit__actions .primary-link,
  .pricing-shop-benefit__actions .secondary-link { width: 100%; justify-content: center; }
  .account-coupon { align-items: stretch; flex-direction: column; }
  .account-coupon .secondary-link { width: 100%; justify-content: center; }
  .mobile-drawer { overflow-y: auto; }
  .mobile-drawer nav a { min-height: 58px; font-size: 21px; }
  .mobile-drawer > p { position: static; margin: 32px 0 0; }
}

@media (max-width: 420px) {
  .home-hero__panel { padding-inline: 24px; }
  .hero-panel__arrow { right: 20px; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__brand { grid-column: auto; }
  .site-footer__company { grid-template-columns: 1fr; gap: 13px; }
}

@media (prefers-contrast: more) {
  .site-header { background: var(--header-solid-fallback); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .app-card,
  .app-dialog,
  .global-search-dialog,
  .search-box input,
  .global-search-field input { border-color: var(--contrast-border); }
  .app-card,
  .app-dialog,
  .global-search-dialog { background: var(--contrast-card-fill); }
}

@media (forced-colors: active) {
  .site-header { background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero-cta,
  .hero-mosaic__action,
  .app-card__open:not(.is-disabled),
  .primary-link,
  .secondary-link,
  .hero-panel__arrow,
  .menu-button,
  .icon-button {
    border: 1px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
  }

  .app-card,
  .app-dialog,
  .global-search-dialog,
  .search-box input,
  .global-search-field input { border: 1px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
  .pricing-topup-input { border: 1px solid CanvasText; background: Field; color: FieldText; box-shadow: none; }
  .pricing-topup-input input { background: Field; color: FieldText; }
  .pricing-plan-card,
  .pricing-topup-card,
  .pricing-shop-benefit { border: 1px solid CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }

  .carousel-controls button,
  .app-card__info,
  .app-card__compare-surface { color: ButtonText; }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header { background: var(--header-solid-fallback); }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--header-solid-fallback); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media print {
  .hero-cta,
  .hero-mosaic__action,
  .app-card__open:not(.is-disabled),
  .primary-link,
  .secondary-link,
  .hero-panel__arrow,
  .menu-button,
  .icon-button { border: 1px solid #333; background: Canvas; color: CanvasText; box-shadow: none; }

  .app-card,
  .app-dialog,
  .global-search-dialog,
  .search-box input,
  .global-search-field input { border: 1px solid #333; background: Canvas; color: CanvasText; box-shadow: none; }
  .pricing-topup-input { border: 1px solid #333; background: Canvas; color: CanvasText; box-shadow: none; }
  .pricing-topup-input input { background: Canvas; color: CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-dot-field { transform: none !important; transition: none !important; }
  .hero-dot-field::before,
  .hero-dot-field::after,
  .hero-dot { animation: none !important; }
  .hero-dot-field::after { opacity: .55; }
  .app-card__preview,
  .app-dialog__preview { transition: none !important; }
}