:root {
  color-scheme: light;
  /* 이정표(signpost) 팔레트 — 갈림길 표지판의 딥 그린을 시그니처로,
     사진이 살아나는 쿨 뉴트럴 캔버스와 진한 블루블랙 잉크를 깐다. */
  --color-canvas: #f6f7f9;
  --color-canvas-deep: #eceef2;
  --color-surface: #ffffff;
  --color-surface-soft: #f1f3f6;
  --color-surface-pressed: #e4e7ec;
  --color-text: #171b21;
  --color-text-secondary: #545d6a;
  --color-text-muted: #6d7683;
  --color-border-subtle: #e4e7ec;
  --color-border-control: #87909d;
  --color-brand-50: #eaf5f0;
  --color-brand-100: #d5ebe1;
  --color-brand-300: #57a684;
  --color-brand-500: #0e6e51;
  --color-brand-600: #0b5b43;
  --color-brand-700: #094a37;
  --color-success: #2f7d3f;
  --color-success-soft: #e4f3e7;
  --color-warning: #96650a;
  --color-warning-soft: #fdf0d2;
  --color-error: #ba2d1d;
  --color-error-soft: #fdeae6;
  --color-info: #1d5fc0;
  --color-scrim: rgba(23, 27, 33, 0.55);
  --font-sans: "Pretendard Variable", Pretendard, "SUIT Variable", SUIT, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --text-display: clamp(2rem, 5vw, 3rem);
  --text-h1: clamp(1.75rem, 3vw, 2.25rem);
  --text-h2: 1.375rem;
  --text-h3: 1.125rem;
  --text-body-lg: 1.0625rem;
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.8125rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-round: 999px;
  --control-min: 2.75rem;
  --control-lg: 3.25rem;
  --content-max: 70rem;
  --content-reading: 45rem;
  --nav-mobile: 4.75rem;
  --z-sticky: 10;
  --z-banner: 20;
  --z-toast: 40;
  --motion-micro: 120ms;
  --motion-standard: 220ms;
  --motion-signature: 420ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  /* 배경은 평평하게 둔다 — 사진과 잉크가 주인공이고, 장식 글로는 화면만 탁하게 만든다. */
  --surface-atmosphere: var(--color-canvas);
  --shadow-paper:
    0 1px 2px rgba(23, 27, 33, 0.04),
    0 8px 24px rgba(23, 27, 33, 0.06);
  --shadow-floating:
    0 0 0 1px rgba(23, 27, 33, 0.05),
    0 12px 32px rgba(23, 27, 33, 0.16),
    0 28px 64px rgba(23, 27, 33, 0.1);
  --shadow-hover: 0 8px 20px rgba(23, 27, 33, 0.1);

  /* Surfaces — semantic aliases over the color palette. */
  --surface-base: var(--color-canvas);
  --surface-raised: var(--color-surface);
  --surface-sunken: var(--color-canvas-deep);
  --surface-overlay: var(--color-surface);

  /* Borders — three strength levels. */
  --color-border-strong: #6a7381;

  /* Interaction states. */
  --state-hover-tint: rgba(23, 27, 33, 0.05);
  --state-pressed-tint: rgba(23, 27, 33, 0.1);
  --state-selected-tint: rgba(14, 110, 81, 0.1);
  /* 0.70은 비활성 컨트롤 라벨이 라이트/다크 모두에서 4.5:1을 넘기는 하한선이다.
     WCAG는 비활성 요소를 예외로 두지만, 실측에서 2.70:1까지 떨어져 읽히지 않았다. */
  --state-disabled-opacity: 0.7;
  --focus-ring-color: var(--color-text);
  --focus-ring-width: 0.1875rem;
  --focus-ring-offset: 0.1875rem;

  /* Korean text rhythm — Hangul needs looser leading than Latin.
     Negative tracking is reserved for headings; body and caption never use it. */
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --leading-display: 1.12;
  --tracking-display: -0.03em;
  --leading-heading: 1.3;
  --tracking-heading: -0.015em;
  --leading-body: 1.65;
  --tracking-body: var(--tracking-normal);
  --leading-caption: 1.5;
  --tracking-caption: var(--tracking-normal);
  --leading-control: 1.2;
  --tracking-control: var(--tracking-normal);

  /* Elevation. */
  --shadow-sunken:
    inset 0 1px 3px rgba(23, 27, 33, 0.08),
    inset 0 0 0 1px rgba(23, 27, 33, 0.04);
}

/* 다크 모드는 이 파일에 두지 않는다.
   앱인토스 심사 기준(consumer-ux-guide)은 "라이트 모드 전용 구현"을 요구하고, 토스 셸은 이
   파일을 그대로 가져다 쓴다. 그래서 다크 팔레트는 표준 웹 앱만 불러오는 public/dark-mode.css로
   분리했다. 여기에 되돌려 놓으면 토스 WebView가 사용자의 다크 설정을 따라가 심사에서 반려된다. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  min-width: 0;
  margin: 0;
  background: var(--surface-atmosphere);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  overflow-wrap: break-word;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
  cursor: pointer;
}

a {
  color: var(--color-info);
  text-underline-offset: 0.18em;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
}

.brand-mark {
  position: relative;
  display: grid;
  width: var(--control-lg);
  height: var(--control-lg);
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm);
  background: linear-gradient(145deg, var(--color-brand-300), var(--color-brand-500) 48%, var(--color-brand-700));
  color: var(--color-surface);
  box-shadow: var(--shadow-paper);
  isolation: isolate;
}

.brand-mark::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--space-3);
  background: var(--color-canvas);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  content: "";
}

.brand-mark .icon {
  width: var(--space-6);
  height: var(--space-6);
  transform: translateY(calc(var(--space-1) * -1));
}

.brand-copy {
  display: grid;
  gap: 0;
}

.brand-name {
  font-size: var(--text-h3);
  font-weight: 750;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-tight);
}

.brand-tagline {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  line-height: var(--leading-caption);
}

.vault-ribbon {
  display: inline-flex;
  min-height: var(--control-min);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-sm);
  background: var(--color-brand-100);
  color: var(--color-brand-700);
  font-size: var(--text-body-sm);
  font-weight: 700;
}

.vault-ribbon[data-state="saved"] {
  animation: ribbon-settle var(--motion-signature) var(--ease-spring) both;
}

.button,
.button-primary,
.button-secondary,
.button-danger,
.button-small,
.icon-button {
  display: inline-flex;
  min-height: var(--control-min);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-md);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: var(--tracking-control);
  line-height: var(--leading-control);
  transition:
    transform var(--motion-micro) var(--ease-out),
    background-color var(--motion-micro) var(--ease-out),
    color var(--motion-micro) var(--ease-out),
    border-color var(--motion-micro) var(--ease-out),
    box-shadow var(--motion-micro) var(--ease-out);
}

.button,
.button-primary,
.button-secondary,
.button-danger {
  padding: var(--space-3) var(--space-5);
}

.button-primary {
  border: 1px solid var(--color-brand-500);
  background: var(--color-brand-500);
  color: var(--color-surface);
}

.button-secondary,
.button {
  border: 1px solid var(--color-border-control);
  background: var(--color-surface);
  color: var(--color-text);
}

.button-quiet,
.button-small {
  min-height: var(--control-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  background: var(--color-brand-50);
  color: var(--color-brand-700);
  font-size: var(--text-body-sm);
}

.button-danger {
  border: 1px solid var(--color-error);
  background: var(--color-error-soft);
  color: var(--color-error);
}

.icon-button {
  width: var(--control-min);
  min-width: var(--control-min);
  padding: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
}

:where(.button, .button-primary, .button-secondary, .button-danger, .button-small, .icon-button):active:not(:disabled) {
  transform: scale(0.98);
}

:where(.button, .button-primary, .button-secondary, .button-danger, .button-small, .icon-button):disabled,
:where(.button, .button-primary, .button-secondary, .button-danger, .button-small, .icon-button)[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: var(--state-disabled-opacity);
  transform: none;
}

:where(.button, .button-primary, .button-secondary, .button-danger, .button-small)[aria-busy="true"]::before {
  width: var(--space-4);
  height: var(--space-4);
  border: 0.125rem solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: busy-spin 700ms linear infinite;
  content: "";
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field-label {
  color: var(--color-text);
  font-size: var(--text-body-sm);
  font-weight: 700;
}

.field-hint,
.field-error {
  margin: 0;
  font-size: var(--text-body-sm);
}

.field-hint {
  color: var(--color-text-secondary);
}

.field-error {
  color: var(--color-error);
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  min-height: var(--control-lg);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-body);
  transition:
    border-color var(--motion-micro) var(--ease-out),
    box-shadow var(--motion-micro) var(--ease-out),
    background-color var(--motion-micro) var(--ease-out);
}

textarea {
  min-height: calc(var(--control-lg) * 2);
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

:where(input, select, textarea):focus-visible {
  border-color: var(--focus-ring-color);
  box-shadow: 0 0 0 0.125rem var(--color-canvas);
}

:where(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--color-error);
  box-shadow: 0 0 0 0.0625rem var(--color-error);
}

:where(input, select, textarea):disabled {
  cursor: not-allowed;
  background: var(--color-surface-pressed);
  color: var(--color-text-secondary);
  opacity: 1;
}

.chip-row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-1) 0 var(--space-2);
  scrollbar-width: none;
}

.chip-row::-webkit-scrollbar {
  display: none;
}

.chip {
  display: inline-flex;
  min-height: var(--control-min);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-round);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  font-weight: 700;
  transition:
    transform var(--motion-micro) var(--ease-out),
    background-color var(--motion-micro) var(--ease-out),
    color var(--motion-micro) var(--ease-out);
}

.chip[aria-pressed="true"],
.chip.active {
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-surface);
  font-weight: 800;
  box-shadow: inset 0 0 0 1px var(--color-surface);
}

.chip[data-platform]:not([data-platform=""])[aria-pressed="true"]::before {
  content: '✓';
  font-size: var(--text-caption);
}

.status-panel {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-surface-soft);
  color: var(--color-text);
}

.status-panel[data-tone="error"] {
  background: var(--color-error-soft);
  color: var(--color-error);
}

.status-panel[data-tone="success"] {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.status-panel[data-tone="warning"] {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.status-panel-icon {
  display: grid;
  width: var(--control-min);
  height: var(--control-min);
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border-subtle);
}

.status-panel-title,
.status-panel-copy {
  margin: 0;
}

.status-panel-title {
  color: currentColor;
  font-size: var(--text-h3);
  font-weight: 750;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
}

.status-panel-copy {
  max-width: 38rem;
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-caption);
  line-height: var(--leading-caption);
}

.skeleton {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-pressed);
  animation: skeleton-pulse 1.4s ease-in-out infinite alternate;
}

.skeleton-card {
  display: grid;
  gap: var(--space-3);
}

.skeleton-media {
  aspect-ratio: 4 / 3;
}

.skeleton-line {
  height: var(--space-4);
}

.skeleton-line-short {
  width: 62%;
}

.toast,
.clipboard-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-text);
  color: var(--color-surface);
  box-shadow: var(--shadow-floating);
  font-size: var(--text-body-sm);
}

.toast-copy {
  min-width: 0;
  flex: 1;
}

.vault-card {
  position: relative;
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  text-align: left;
  text-decoration: none;
}

.vault-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--color-brand-100);
  box-shadow: var(--shadow-paper);
  isolation: isolate;
  transition:
    transform var(--motion-standard) var(--ease-out),
    box-shadow var(--motion-standard) var(--ease-out);
}

.vault-card-media::before {
  position: absolute;
  inset: var(--space-2) calc(var(--space-2) * -1) calc(var(--space-2) * -1) var(--space-2);
  z-index: -1;
  border-radius: var(--radius-lg);
  background: var(--color-canvas-deep);
  content: "";
}

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

.vault-card-fallback {
  display: grid;
  height: 100%;
  place-items: center;
  background:
    radial-gradient(circle at 28% 22%, var(--color-surface), transparent 32%),
    linear-gradient(145deg, var(--color-brand-100), var(--color-canvas-deep));
  color: var(--color-brand-700);
}

.vault-card-fallback .icon {
  width: var(--space-10);
  height: var(--space-10);
}

.vault-card-body {
  display: grid;
  gap: var(--space-1);
  padding: 0 var(--space-1) var(--space-2);
}

.vault-card-kicker,
.vault-card-title,
.vault-card-meta {
  margin: 0;
}

.vault-card-kicker {
  color: var(--color-brand-700);
  font-size: var(--text-caption);
  font-weight: 700;
}

.vault-card-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-body);
  font-weight: 750;
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-snug);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.vault-card-meta {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: calc(var(--control-min) + var(--space-5));
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text);
}

.row-item:last-child {
  border-bottom: 0;
}

.row-icon {
  display: grid;
  width: var(--control-min);
  height: var(--control-min);
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-brand-50);
  color: var(--color-brand-700);
}

.row-main {
  display: grid;
  min-width: 0;
}

.row-title,
.row-sub {
  margin: 0;
}

.row-title {
  overflow: hidden;
  font-size: var(--text-body-sm);
  font-weight: 750;
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-snug);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-sub {
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  line-height: var(--leading-caption);
}

.row-item.read .row-icon {
  background: var(--surface-sunken);
  color: var(--color-text-secondary);
}

.sheet {
  width: min(calc(100% - (var(--space-4) * 2)), 40rem);
  max-height: calc(100dvh - var(--space-8));
  margin: auto auto 0;
  overflow: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-floating);
}

.sheet::backdrop {
  background: var(--color-scrim);
}

.sheet-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
}

.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.sheet-title {
  margin: 0;
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
}

.app-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-2) max(var(--space-2), env(safe-area-inset-left, 0px)) calc(var(--space-2) + env(safe-area-inset-bottom, 0px)) max(var(--space-2), env(safe-area-inset-right, 0px));
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
}

.app-nav-link {
  position: relative;
  display: grid;
  min-height: calc(var(--control-min) + var(--space-2));
  place-items: center;
  gap: var(--space-1);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: 700;
  text-decoration: none;
}

.app-nav-link[aria-current="page"] {
  background: var(--color-brand-50);
  color: var(--color-brand-700);
}

.app-nav-link[aria-current="page"]::after {
  position: absolute;
  bottom: var(--space-1);
  width: var(--space-3);
  height: var(--space-1);
  border-radius: var(--radius-round);
  background: var(--color-brand-500);
  content: "";
}

.ds-page {
  min-height: 100dvh;
}

.ds-shell {
  width: min(100%, var(--content-max));
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-16);
}

.ds-header {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-4) 0 var(--space-10);
}

.ds-intro {
  max-width: var(--content-reading);
}

.ds-eyebrow,
.ds-title,
.ds-lede,
.ds-section-title,
.ds-section-copy {
  margin: 0;
}

.ds-eyebrow {
  color: var(--color-brand-700);
  font-size: var(--text-caption);
  font-weight: 750;
}

.ds-title {
  max-width: 13ch;
  margin-top: var(--space-2);
  font-size: var(--text-display);
  font-weight: 750;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  text-wrap: balance;
}

.ds-lede {
  max-width: 58ch;
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-body-lg);
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-relaxed);
  text-wrap: pretty;
}

.ds-section {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-border-subtle);
}

.ds-section-heading {
  display: grid;
  gap: var(--space-2);
  max-width: var(--content-reading);
}

.ds-section-title {
  font-size: var(--text-h1);
  font-weight: 750;
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
}

.ds-section-copy {
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-body);
}

.ds-grid,
.ds-color-grid,
.ds-component-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.ds-panel {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-paper);
}

.ds-panel-title {
  margin: 0;
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
}

.ds-demo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.ds-swatch {
  min-height: 8rem;
  display: grid;
  align-content: end;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
}

.ds-swatch strong,
.ds-swatch code {
  width: fit-content;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}

.ds-swatch code {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
}

.ds-swatch-paper { background: var(--color-canvas); }
.ds-swatch-sheet { background: var(--color-surface); }
.ds-swatch-ink { background: var(--color-text); }
.ds-swatch-ribbon { background: var(--color-brand-500); }
.ds-swatch-sage { background: var(--color-success); }

.ds-type-stack {
  display: grid;
  gap: var(--space-4);
}

.ds-type-stack p {
  margin: 0;
}

.ds-type-display { font-size: var(--text-display); font-weight: 750; letter-spacing: var(--tracking-display); line-height: var(--leading-display); }
.ds-type-h1 { font-size: var(--text-h1); font-weight: 750; letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); }
.ds-type-h2 { font-size: var(--text-h2); font-weight: 700; letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); }
.ds-type-body { font-size: var(--text-body); font-weight: 500; letter-spacing: var(--tracking-body); line-height: var(--leading-body); }
.ds-type-caption { color: var(--color-text-secondary); font-size: var(--text-caption); font-weight: 600; letter-spacing: var(--tracking-caption); line-height: var(--leading-caption); }

.ds-nav-preview {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--color-surface-soft);
  box-shadow: var(--shadow-floating);
}

.ds-nav-content {
  display: none;
  align-content: center;
  gap: var(--space-3);
  min-height: 18rem;
  padding: var(--space-8);
  background:
    radial-gradient(circle at 78% 18%, var(--color-brand-100), transparent 14rem),
    var(--color-surface-soft);
}

.ds-nav-content h3,
.ds-nav-content p {
  max-width: 34rem;
  margin: 0;
}

.ds-nav-content h3 {
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-heading);
}

.ds-nav-content p {
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-body);
}

@media (hover: hover) and (pointer: fine) {
  .button-primary:hover { background: var(--color-brand-600); border-color: var(--color-brand-600); }
  .button-secondary:hover,
  .button:hover,
  .icon-button:hover { background: var(--color-surface-soft); }
  .button-danger:hover { background: var(--color-surface); }
  .button-small:hover,
  .button-quiet:hover { background: var(--color-brand-100); }
  .chip:hover { background: var(--color-surface-soft); color: var(--color-text); }
  .vault-card:hover .vault-card-media { transform: translateY(calc(var(--space-1) * -1)); box-shadow: var(--shadow-hover); }
  .app-nav-link:hover { background: var(--color-surface-soft); color: var(--color-text); }
}

@media (min-width: 40rem) {
  .ds-shell {
    padding-right: var(--space-6);
    padding-left: var(--space-6);
  }

  .ds-header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .ds-grid,
  .ds-component-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ds-color-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sheet {
    margin: auto;
    border-radius: var(--radius-xl);
  }
}

@media (min-width: 64rem) {
  .ds-shell {
    padding-right: var(--space-8);
    padding-left: var(--space-8);
  }

  .ds-component-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ds-color-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .app-nav {
    grid-template-columns: 1fr;
    width: 5.5rem;
    padding: var(--space-3);
    border: 0;
  }

  .ds-nav-preview {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ds-nav-content {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    /* 지연도 함께 없앤다. 지속시간만 0으로 만들면 나중에 추가된 delay는 그대로 체감된다. */
    animation-delay: 0.01ms !important;
    transition-delay: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .brand-mark,
  .vault-ribbon,
  .status-panel,
  .row-icon,
  .app-nav-link[aria-current="page"] {
    border: 1px solid CanvasText;
  }
}

@keyframes busy-spin {
  to { transform: rotate(1turn); }
}

@keyframes skeleton-pulse {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

@keyframes ribbon-settle {
  from { opacity: 0; transform: translateY(calc(var(--space-3) * -1)); }
  to { opacity: 1; transform: translateY(0); }
}