/* ReviewBom — shared tokens for every page: iteration 2, "soft spring".
   The classes are the design boards' own (.eb, .card, .btn …), so a board and
   its page read the same. Dither lives only in the small images under
   /static/spring/, each with a job — never as a band, seam or fill. */
:root { --ink: #1b1917; --paper: #fbfaf6; --mute: #4a463e; --soft: #6b665d;
        --line: #e7e2d6; --line2: #d8d1c2; --wash: #f3f0e8;
        --leaf: #17533f; --leaf-t: #e4efe8; --blossom: #ff6b78; --blossom-t: #ffe9eb; --bink: #b02a40;
        --coral: #e8475c; --sage: #8db3a0; --petal: #ffb3ba;
        /* older names the pages still use */
        --yel: #f5d547; --grn: #17533f; --red: #b02a40; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); word-break: keep-all;
       font-family: 'Noto Sans KR', 'Hanken Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--leaf); text-decoration: none; } a:hover { color: #0e3a2b; }
button, select, input, textarea { font-family: inherit; }
canvas, .px { image-rendering: pixelated; }
canvas { display: block; }
.jua { font-family: 'Jua', sans-serif; font-weight: 400; }
.hl { font-family: 'Jua', sans-serif; font-weight: 400; color: var(--coral); font-size: 1.08em; }
.obj { height: 1em; width: auto; vertical-align: -0.12em; image-rendering: pixelated; margin-left: 0.14em; }
.eb { font-family: 'IBM Plex Mono', 'Noto Sans KR', monospace; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
      font-weight: 500; color: var(--bink); }
.mono { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.h2 { margin: 0; font-weight: 800; font-size: 30px; line-height: 1.2; letter-spacing: -0.035em; }
.p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--mute); }
.btn { background: var(--blossom); color: var(--ink); min-height: 52px; padding: 0 22px; border-radius: 999px; font-size: 15.5px;
       font-weight: 700; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:hover { color: var(--ink); background: #ff7f8a; }
.btn.dark { background: var(--ink); color: var(--paper); }
.btn.dark:hover { background: #33302b; color: var(--paper); }
.btn:disabled { opacity: 0.45; cursor: default; }
.ghost { background: #fff; color: var(--ink); min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 700;
         border: 1px solid var(--line2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ghost:hover { border-color: var(--ink); color: var(--ink); }
.ghost:disabled { opacity: 0.5; cursor: default; }
.ko { font-family: 'Noto Sans KR', sans-serif; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; font-size: 12.5px;
       font-weight: 700; line-height: 1; white-space: nowrap; }
.praise { background: #e4efe8; color: var(--leaf); }
.needs { background: var(--blossom-t); color: var(--bink); }
.neutral { background: var(--wash); color: var(--mute); }
.wait { background: var(--yel); color: var(--ink); }
.mark { background-image: linear-gradient(transparent 58%, var(--yel) 58%); }
.in { border: 1px solid var(--line2); border-radius: 10px; min-height: 44px; padding: 10px 12px; font-family: inherit; font-size: 15px;
      background: #fff; color: var(--ink); width: 100%; }
textarea.in { line-height: 1.7; }
.in:focus { border-color: var(--leaf); }
.in:focus, textarea:focus, .ghost:focus-visible, .btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(255, 107, 120, 0.55); outline-offset: 2px; }
.fld { display: flex; flex-direction: column; gap: 7px; }
.fld label { font-size: 13.5px; font-weight: 700; }
.err { color: var(--bink); font-size: 13px; font-weight: 700; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 700; }
.dz { background-image: url(/static/spring/dz-habit.png); background-size: 100% 100%; image-rendering: pixelated; }
.dzu { background-image: url(/static/spring/dz-unknown.png); background-size: 100% 100%; image-rendering: pixelated; }
.track { position: relative; height: 8px; border-radius: 3px; background: var(--wash); overflow: hidden; }
[hidden] { display: none !important; }

/* the app shell: top bar + content, one column under 900px */
.bar { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px;
       border-bottom: 1px solid var(--line); background: var(--paper); gap: 20px; }
.logo { display: flex; align-items: center; gap: 9px; font-family: 'Jua', sans-serif; font-weight: 400; font-size: 22px;
        letter-spacing: -0.01em; color: var(--leaf); }
.logo:hover { color: var(--leaf); }
.wrap { max-width: 1360px; margin: 0 auto; padding: 36px 40px 64px; }
.cols { display: grid; grid-template-columns: minmax(0, 808fr) minmax(0, 440fr); gap: 32px; align-items: start; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--ink); color: var(--paper);
         padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; z-index: 50; }
@media (max-width: 900px) {
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-tap-highlight-color: transparent; }
  button, a, summary, label { touch-action: manipulation; }
  .in, textarea, select { font-size: 16px; }   /* under 16px, iOS zooms the page on focus */
  /* an app's top bar: slim, stays put, clear of the notch */
  .bar { position: sticky; top: 0; z-index: 30; flex-wrap: nowrap; min-height: 0; height: calc(52px + env(safe-area-inset-top));
         padding: env(safe-area-inset-top) 16px 0; }
  .bar .logo { min-height: 44px; }
  .langs a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 9px; }
  .wrap { padding: 24px 16px 48px; }
  .cols, .three { grid-template-columns: 1fr; }
}

/* The landing was drawn on a 1440 board; at 1000px and under, landing.html
   shows its own mobile layout (.mpage) instead. */
/* --gut keeps the content in a 1312px column (64px gutters at the 1440 board size). */
.page { display: flex; flex-direction: column; background: var(--paper);
        --gut: max(64px, calc((100% - 1312px) / 2)); }

/* the language switch, on every page that has one */
.langs { display: inline-flex; gap: 2px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; }
.langs a { padding: 6px 7px; border-radius: 6px; color: #6b665d; }
.langs a[aria-current] { color: var(--leaf); background: #e4efe8; font-weight: 700; }
html[lang="zh-Hans"] body { font-family: 'Noto Sans SC', 'Noto Sans KR', system-ui, sans-serif; }

/* the road address: typed, or picked from the Kakao search embedded below it */
.addr { display: flex; flex-direction: column; gap: 8px; }
.addr .find { display: flex; gap: 8px; }
.addr .find .in { flex: 1; min-width: 0; }
.addr .find .ghost { flex: none; }
.addr .pc { height: 440px; border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; }

/* Motion, site-wide: one vocabulary, three speeds (.12s press, .2s state, .32s
   arrival), all eased out, nothing loops. Pages keep their own named moments
   (landing decode, /app scrim). Under reduced motion all of it is off. */
@keyframes rb-in { from { opacity: 0; translate: 0 8px; } }
@keyframes rb-fade { from { opacity: 0; } }
a, .btn, .ghost, .tag, .in, select, textarea { transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, scale .12s; }
.btn:not(:disabled):active, .ghost:not(:disabled):active { scale: .97; }
/* arrivals: a card fades up when it is inserted or unhidden, a details drawer's
   body when it opens, a toast or dialog as it appears */
body:not([data-still]) .card { animation: rb-in .32s cubic-bezier(.2, .8, .3, 1) both; }
details[open] > :not(summary) { animation: rb-in .22s ease-out both; }
.toast:not([hidden]) { animation: rb-in .22s ease-out both; }
dialog[open], .m-sheet:not([hidden]) { animation: rb-in .22s ease-out both; }
dialog[open]::backdrop { animation: rb-fade .22s ease-out both; }
/* sections settle in as they scroll into view, where the browser can tie it to
   scroll; elsewhere they simply show */
@supports (animation-timeline: view()) {
  body:not([data-still]) main > section, body:not([data-still]) .page > section, body:not([data-still]) .sec {
    animation: rb-in linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}