/* PAUSEPOSE / Black White Chrome — see ../design.md. */
@font-face {
  font-family: 'Pretendard';
  src: url('/homepage/design/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}
:root {
  --pp-paper: #ffffff;
  --pp-white: #ffffff;
  --pp-ink: #101112;
  --pp-muted: #65686d;
  --pp-line: #c6c9cd;
  --pp-wash: #f0f1f2;
  --pp-ready: #101112;
  --pp-ready-bg: #eeeeef;
  --pp-error: #9c403b;
  --pp-font: 'Pretendard', sans-serif;
  --pp-font-data: var(--pp-font);
  --pp-radius-control: 2px;
  --pp-radius-panel: 0px;
  --pp-space-1: 4px;
  --pp-space-2: 8px;
  --pp-space-3: 12px;
  --pp-space-4: 16px;
  --pp-space-6: 24px;
  --pp-space-8: 32px;
  --pp-motion: 180ms;
}
.pp-icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.pp-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:12px 20px; border:1px solid var(--pp-line); border-radius:var(--pp-radius-control); background:var(--pp-white); color:var(--pp-ink); font:600 14px/1.3 var(--pp-font); text-decoration:none; cursor:pointer; transition:background var(--pp-motion),color var(--pp-motion); }
.pp-button:hover { background:var(--pp-wash); }
.pp-button[aria-pressed=true],.pp-button-primary { background:var(--pp-ink); border-color:var(--pp-ink); color:var(--pp-white); }
.pp-button-primary:hover { background:#41433d; }
.pp-button:disabled { opacity:.4; cursor:default; }
.pp-button:focus-visible, .pp-design a:focus-visible { outline:2px solid var(--pp-ink); outline-offset:4px; }
.pp-status { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:var(--pp-radius-control); font:500 12px/1.2 var(--pp-font); color:var(--pp-ready); background:var(--pp-ready-bg); }
.pp-status::before { content:""; width:5px; height:5px; background:currentColor; border-radius:50%; }
@media(prefers-reduced-motion:reduce) { :root { --pp-motion:0ms; } }