/* Shared by every page. Direction "The page is the object" (seed 990815287), palette Frost and slate.
   Type: Noto Serif KR stands in Literata's role because Literata has no Hangul. One family only. */

:root {
  --bg: #f7f9fa;
  --surface: #ecf0f2;
  --ink: #1f3038;
  --muted: #5d6b72;
  --accent: #0d7480;
  --accent-ink: #ffffff;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(2.5rem, 7vw, 6rem);

  --radius: 0;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;

  --gutter: clamp(16px, 4vw, 32px);
  --target: 48px;
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--ink);
  color: var(--bg);
  font-family: "Noto Serif KR", "Batang", "AppleMyungjo", "Noto Serif CJK KR", "Source Han Serif K", serif;
  font-weight: 400;
  font-size: var(--step-body);
  line-height: 1.6;
  letter-spacing: 0;
  font-kerning: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
p,
legend,
label,
li {
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0;
}

h1 {
  font-size: var(--step-display);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--step-head);
  letter-spacing: -0.02em;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Code is the one place monospace is allowed. */
pre,
code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  word-break: normal;
  overflow-wrap: normal;
}

/* Form controls inherit the text face and stay at 16px or more. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* The one button on the site: flat accent fill, square body, top corners cut like a folder tab. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover {
    background-color: #0a5f69;
  }
}

.button:active {
  transform: scale(0.98);
}

/* The ring sits inside the clip so the cut corners cannot hide it. */
.button:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: -7px;
}

.text-link {
  font-weight: 600;
}

/* Load and error states */
.loading {
  padding: 48px var(--gutter);
  color: var(--bg);
}

.error-panel {
  max-width: 34rem;
  margin: 12svh auto 0;
  padding: 32px;
  background: var(--bg);
  color: var(--ink);
}

.error-message {
  font-size: var(--step-lead);
  line-height: 1.4;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 24px;
}

/* Top row shared by the pages: wordmark only. */
.topbar {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0 var(--gutter);
}

.wordmark {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bg);
  text-decoration: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nums {
  font-variant-numeric: tabular-nums;
}

/* ===== Motion layer, shared =====
   The hidden state exists only under html.js (js/boot.js) and only when travel is allowed, so
   without scripts or under reduced motion every word is simply there. js/motion.js adds .is-in,
   which plays the entrance once. The entrance is an animation with fill-mode backwards (not a
   transition) on the independent translate property, so an element's own transform and
   transitions (hover, press) keep working afterwards. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    translate: 0 24px;
  }

  .js [data-reveal].is-in {
    opacity: 1;
    translate: none;
    animation: reveal-in var(--t-reveal) var(--ease-out) backwards;
    animation-delay: calc(min(var(--i, 0), 14) * 70ms);
  }

  /* First-screen elements show themselves after 4s even if no script ever runs. */
  .js [data-reveal="load"]:not(.is-in) {
    animation: reveal-failsafe 1ms linear 4s forwards;
  }
}

@keyframes reveal-in {
  from {
    opacity: 0;
    translate: 0 24px;
  }
}

@keyframes reveal-failsafe {
  to {
    opacity: 1;
    translate: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }

  .button:active {
    transform: none;
  }
}