@charset "UTF-8";

@font-face {
  font-family: "APL Sans";
  src: url("assets/NotoSansKR.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Type, color, space, and geometry are shared by both phones. */
  --font-family: "APL Sans", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-2xs: 10px;
  --font-xs: 12px;
  --font-sm: 14px;
  --font-md: 16px;
  --font-lg: 20px;
  --font-xl: 24px;
  --font-2xl: 28px;
  --font-clock: 48px;
  --font-base-2xs: var(--font-2xs);
  --font-base-xs: var(--font-xs);
  --font-base-sm: var(--font-sm);
  --font-base-md: var(--font-md);
  --font-base-lg: var(--font-lg);
  --font-base-xl: var(--font-xl);
  --font-base-2xl: var(--font-2xl);
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --line-tight: 1.25;
  --line-normal: 1.5;
  --line-relaxed: 1.75;
  --tracking-tight: -.03em;
  --tracking-normal: -.01em;

  --color-ink: #191919;
  --color-muted: #6a6a6a;
  --color-subtle: #999999;
  --color-line: #e6e6e6;
  --color-surface: #ffffff;
  --color-raised: #f5f5f5;
  --color-soft: #eeeeee;
  --color-canvas: #e7e7e7;
  --color-on-ink: #ffffff;
  --color-dark: #242424;
  --color-dark-raised: #343434;
  --color-dark-line: #484848;
  --color-dark-muted: #bdbdbd;
  --color-hover: #3b3b3b;
  --color-focus: #767676;
  --color-overlay: rgb(0 0 0 / 24%);
  --color-glass: rgb(255 255 255 / 34%);
  --color-glass-line: rgb(255 255 255 / 48%);
  --color-wallpaper-shade: rgb(0 0 0 / 10%);
  --color-camera-grid: rgb(255 255 255 / 20%);
  --color-photo-label: rgb(0 0 0 / 48%);
  --shadow-card: 0 4px 12px rgb(0 0 0 / 5%);
  --shadow-sheet: 0 -8px 32px rgb(0 0 0 / 8%);
  --shadow-toast: 0 4px 16px rgb(0 0 0 / 16%);
  --shadow-frame: inset 0 0 0 2px #434343, inset 0 0 0 4px #171717,
    0 24px 40px -24px rgb(0 0 0 / 44%), 0 4px 12px -4px rgb(0 0 0 / 25%);
  --shadow-white-text: 0 1px 4px rgb(0 0 0 / 24%);
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --line: var(--color-line);
  --soft: var(--color-raised);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-round: 50%;
  --border-width: 1px;
  --control-height: 48px;
  --touch-size: 44px;
  --icon-size: 24px;
  --icon-small: 20px;
  --icon-caption: 16px;
  --system-icon-size: 20px;
  --avatar-size: 48px;
  --avatar-large: 64px;
  --header-height: 64px;
  --page-gutter: var(--space-5);
  --row-height: 64px;

  --device-scale: 1;
  --phone-width: 358px;
  --phone-height: 780px;
  --phone-padding: var(--space-2);
  --phone-radius: 48px;
  --hardware-key-width: 4px;
  --hardware-key-height: 44px;
  --hardware-key-radius: 3px;
  --hardware-key-gap: 12px;
  --hardware-key-top: 108px;
  --screen-radius: 40px;
  --screen-width: calc(var(--phone-width) - 2 * var(--phone-padding));
  --screen-height: calc(var(--phone-height) - 2 * var(--phone-padding));
  --status-height: 40px;
  --system-nav-height: 48px;
  --os-height: calc(var(--screen-height) - var(--status-height) - var(--system-nav-height));
  --mirror-scale: .8;
  --mirror-source-height: calc(var(--os-height) + var(--system-nav-height));
  --mirror-width: calc(var(--screen-width) * var(--mirror-scale));
  --mirror-height: calc(var(--mirror-source-height) * var(--mirror-scale));
  --brightness-floor: .75;
  --brightness-range: .25;
  --phones-gap: 80px;
  --wallpaper-image: url("assets/wallpaper-flowers.jpg");
  --wallpaper-size: auto var(--screen-height);
  --duration-fast: 160ms;
  --duration-normal: 240ms;
  color-scheme: light;
  font-family: var(--font-family);
  font-size: var(--font-sm);
  font-weight: var(--weight-regular);
  line-height: var(--line-normal);
  letter-spacing: var(--tracking-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--color-canvas); color: var(--color-ink); }
button, input, textarea, select { font: inherit; letter-spacing: inherit; }
button {
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea, select { outline: none; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: var(--space-1);
}
button:disabled { opacity: .4; cursor: not-allowed; }
button:active:not(:disabled) { filter: brightness(.92); }
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 1; }
input[type="range"] { accent-color: var(--color-ink); }
svg {
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  vertical-align: middle;
}
.material-symbol { fill: currentColor; stroke: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; word-break: keep-all; overflow-wrap: anywhere; }
h1, h2, h3 { font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
h1 { font-size: var(--font-2xl); line-height: var(--line-tight); }
h2 { font-size: var(--font-xl); line-height: var(--line-tight); }
h3 { font-size: var(--font-md); line-height: var(--line-normal); }
p { font-size: var(--font-sm); line-height: var(--line-relaxed); }
small { font-size: var(--font-xs); line-height: var(--line-normal); }
strong { font-weight: var(--weight-semibold); }
form { margin: 0; }

.muted { color: var(--color-muted); }
.eyebrow { font-size: var(--font-xs); font-weight: var(--weight-medium); color: var(--color-muted); }
.small { font-size: var(--font-xs); }
.wide { width: 100%; }
.row { display: flex; align-items: center; gap: var(--space-3); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}