@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/93a6e477e1480c92.woff2) format('woff2');
  unicode-range:
    u+0102-0103, u+0110-0111, u+0128-0129, u+0168-0169, u+01a0-01a1, u+01af-01b0, u+0300-0301,
    u+0303-0304, u+0308-0309, u+0323, u+0329, u+1ea0-1ef9, u+20ab;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/c7e0cf6c760983e7.woff2) format('woff2');
  unicode-range:
    u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329,
    u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f,
    u+a720-a7ff;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/9d5a263311222317.p.woff2) format('woff2');
  unicode-range:
    u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329,
    u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/be4f912c06e1e110.woff2) format('woff2');
  unicode-range: u+0460-052f, u+1c80-1c8a, u+20b4, u+2de0-2dff, u+a640-a69f, u+fe2e-fe2f;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/6961d055d00ff7ec.woff2) format('woff2');
  unicode-range: u+0301, u+0400-045f, u+0490-0491, u+04b0-04b1, u+2116;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/1dd116e7162c5f47.woff2) format('woff2');
  unicode-range:
    u+0302-0303, u+0305, u+0307-0308, u+0310, u+0312, u+0315, u+031a, u+0326-0327, u+032c,
    u+032f-0330, u+0332-0333, u+0338, u+033a, u+0346, u+034d, u+0391-03a1, u+03a3-03a9, u+03b1-03c9,
    u+03d1, u+03d5-03d6, u+03f0-03f1, u+03f4-03f5, u+2016-2017, u+2034-2038, u+203c, u+2040, u+2043,
    u+2047, u+2050, u+2057, u+205f, u+2070-2071, u+2074-208e, u+2090-209c, u+20d0-20dc, u+20e1,
    u+20e5-20ef, u+2100-2112, u+2114-2115, u+2117-2121, u+2123-214f, u+2190, u+2192, u+2194-21ae,
    u+21b0-21e5, u+21f1-21f2, u+21f4-2211, u+2213-2214, u+2216-22ff, u+2308-230b, u+2310, u+2319,
    u+231c-2321, u+2336-237a, u+237c, u+2395, u+239b-23b7, u+23d0, u+23dc-23e1, u+2474-2475, u+25af,
    u+25b3, u+25b7, u+25bd, u+25c1, u+25ca, u+25cc, u+25fb, u+266d-266f, u+27c0-27ff, u+2900-2aff,
    u+2b0e-2b11, u+2b30-2b4c, u+2bfe, u+3030, u+ff5b, u+ff5d, u+1d400-1d7ff, u+1ee??;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/25408a68d73c6c69.woff2) format('woff2');
  unicode-range:
    u+0001-000c, u+000e-001f, u+007f-009f, u+20dd-20e0, u+20e2-20e4, u+2150-218f, u+2190, u+2192,
    u+2194-2199, u+21af, u+21e6-21f0, u+21f3, u+2218-2219, u+2299, u+22c4-22c6, u+2300-243f,
    u+2440-244a, u+2460-24ff, u+25a0-27bf, u+28??, u+2921-2922, u+2981, u+29bf, u+29eb, u+2b??,
    u+4dc0-4dff, u+fff9-fffb, u+10140-1018e, u+10190-1019c, u+101a0, u+101d0-101fd, u+102e0-102fb,
    u+10e60-10e7e, u+1d2c0-1d2d3, u+1d2e0-1d37f, u+1f0??, u+1f100-1f1ad, u+1f1e6-1f1ff,
    u+1f30d-1f30f, u+1f315, u+1f31c, u+1f31e, u+1f320-1f32c, u+1f336, u+1f378, u+1f37d, u+1f382,
    u+1f393-1f39f, u+1f3a7-1f3a8, u+1f3ac-1f3af, u+1f3c2, u+1f3c4-1f3c6, u+1f3ca-1f3ce,
    u+1f3d4-1f3e0, u+1f3ed, u+1f3f1-1f3f3, u+1f3f5-1f3f7, u+1f408, u+1f415, u+1f41f, u+1f426,
    u+1f43f, u+1f441-1f442, u+1f444, u+1f446-1f449, u+1f44c-1f44e, u+1f453, u+1f46a, u+1f47d,
    u+1f4a3, u+1f4b0, u+1f4b3, u+1f4b9, u+1f4bb, u+1f4bf, u+1f4c8-1f4cb, u+1f4d6, u+1f4da, u+1f4df,
    u+1f4e3-1f4e6, u+1f4ea-1f4ed, u+1f4f7, u+1f4f9-1f4fb, u+1f4fd-1f4fe, u+1f503, u+1f507-1f50b,
    u+1f50d, u+1f512-1f513, u+1f53e-1f54a, u+1f54f-1f5fa, u+1f610, u+1f650-1f67f, u+1f687, u+1f68d,
    u+1f691, u+1f694, u+1f698, u+1f6ad, u+1f6b2, u+1f6b9-1f6ba, u+1f6bc, u+1f6c6-1f6cf,
    u+1f6d3-1f6d7, u+1f6e0-1f6ea, u+1f6f0-1f6f3, u+1f6f7-1f6fc, u+1f7??, u+1f800-1f80b,
    u+1f810-1f847, u+1f850-1f859, u+1f860-1f887, u+1f890-1f8ad, u+1f8b0-1f8bb, u+1f8c0-1f8c1,
    u+1f900-1f90b, u+1f93b, u+1f946, u+1f984, u+1f996, u+1f9e9, u+1fa00-1fa6f, u+1fa70-1fa7c,
    u+1fa80-1fa89, u+1fa8f-1fac6, u+1face-1fadc, u+1fadf-1fae9, u+1faf0-1faf8, u+1fb??;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/a2a4a14ada96f862.woff2) format('woff2');
  unicode-range:
    u+0102-0103, u+0110-0111, u+0128-0129, u+0168-0169, u+01a0-01a1, u+01af-01b0, u+0300-0301,
    u+0303-0304, u+0308-0309, u+0323, u+0329, u+1ea0-1ef9, u+20ab;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/c1b02c1a57568c67.woff2) format('woff2');
  unicode-range:
    u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329,
    u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f,
    u+a720-a7ff;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/cd87a8f174d93ac6.p.woff2) format('woff2');
  unicode-range:
    u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329,
    u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd;
}
:root {
  color-scheme: light;
  --paper: #fff4f7;
  --paper-deep: #f3e2ea;
  --surface: #fff9fb;
  --surface-solid: #fffefe;
  --ink: #17131c;
  --ink-soft: #4b414f;
  --muted: #746574;
  --line: #ddc8d3;
  --line-strong: #b99eae;
  --pink: #c91959;
  --pink-bright: #ff5d98;
  --pink-soft: #ffd2e1;
  --blue: #3046b8;
  --blue-bright: #5369e8;
  --blue-soft: #dbe0ff;
  --lime: #c9ef48;
  --lime-deep: #7d9f00;
  --orange: #c76810;
  --orange-soft: #ffd7ad;
  --night: #28213d;
  --danger: #a21818;
  --font-display: 'Bricolage Grotesque', 'Onest', 'Noto Sans KR', sans-serif;
  --font-ui: 'Onest', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --shell: min(1240px, calc(100vw - 48px));
  --hard-shadow: 7px 7px 0 var(--ink);
  --blue-shadow: 9px 9px 0 var(--blue);
  --section-pink: #ffd2e1;
  --section-proof: #fff9d8;
  --section-contact: #dbe0ff;
  --kbb-motion-fast: 200ms;
  --kbb-motion-medium: 340ms;
  --kbb-ease-expressive: cubic-bezier(0.2, 0.9, 0.25, 1.25);
}

[data-theme='dark'] {
  color-scheme: dark;
  --paper: #1d1722;
  --paper-deep: #2a2130;
  --surface: #261e2c;
  --surface-solid: #312638;
  --ink: #fff4f7;
  --ink-soft: #eadde5;
  --muted: #c0aeb9;
  --line: #4e3d49;
  --line-strong: #79616f;
  --pink: #ff5d98;
  --pink-bright: #ff82ad;
  --pink-soft: #5a2439;
  --blue: #91a4ff;
  --blue-bright: #b5c0ff;
  --blue-soft: #29336b;
  --lime: #c9ef48;
  --lime-deep: #a9d21d;
  --orange: #f4a340;
  --orange-soft: #53371c;
  --night: #120e18;
  --danger: #ff9a9a;
  --hard-shadow: 7px 7px 0 #0e0b11;
  --blue-shadow: 9px 9px 0 #0e0b11;
  --section-pink: #4a2032;
  --section-proof: #302b17;
  --section-contact: #222a57;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 17px/1.8 var(--font-ui);
  overflow-wrap: anywhere;
  word-break: keep-all;
}
header,
main,
footer {
  max-width: 1160px;
  margin: auto;
  padding: 24px;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--ink);
}
a {
  color: var(--blue);
  text-underline-offset: 4px;
}
nav,
.actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.brand {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  text-decoration: none;
  color: var(--ink);
}
.brand span {
  display: inline-block;
  background: var(--lime);
  color: #17131c;
  transform: rotate(-2deg);
  border-radius: 14px;
  padding: 0 6px;
  margin-left: 4px;
}
.brand b {
  color: #c91959;
}
.hero {
  padding: 40px 0 25px;
}
.eyebrow {
  font: 600 13px var(--font-mono);
  letter-spacing: 2px;
}
h1 {
  max-width: 820px;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.2;
  letter-spacing: -1.5px;
}
h2 {
  font-size: 24px;
  line-height: 1.4;
}
.lead {
  max-width: 840px;
  font-size: 22px;
}
.offer {
  border-left: 5px solid var(--pink);
  padding: 14px 20px;
  background: var(--surface);
}
.offer strong {
  font-size: 26px;
  white-space: nowrap;
  margin-left: 18px;
}
button,
input {
  font: inherit;
}
button {
  min-height: 48px;
  padding: 10px 18px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.primary {
  background: var(--pink);
  color: white;
  box-shadow: 4px 4px 0 var(--ink);
  margin: 20px 0;
}
[data-theme='dark'] .primary {
  color: #17131c;
}
button:hover:not(:disabled) {
  transform: translateY(-1px);
}
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}
input[type='search'] {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-solid);
  color: var(--ink);
}
label {
  display: block;
}
.search {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.picker,
#preview-box,
#order {
  padding: 25px;
  border: 2px solid var(--line-strong);
  border-radius: 24px;
  background: var(--surface);
  margin-bottom: 25px;
}
.results {
  list-style: none;
  padding: 0;
  max-height: 380px;
  overflow: auto;
}
.results li {
  margin: 12px 0;
}
.results button {
  width: 100%;
  text-align: left;
  font-size: 15px;
}
.results small {
  display: block;
  color: var(--ink-soft);
}
.results [aria-pressed='true'] {
  border-color: var(--pink);
  border-width: 3px;
}
.picked {
  font-weight: 700;
  color: var(--blue);
}
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.stats strong {
  display: block;
  font-size: 32px;
  color: var(--blue);
}
.stats > div {
  flex: 1;
  min-width: 130px;
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 24px;
  font-size: 15px;
}
.consent input {
  margin-top: 8px;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.boundary,
details {
  padding: 24px;
  border-radius: 20px;
  background: var(--paper-deep);
  margin: 24px 0;
}
summary {
  cursor: pointer;
  min-height: 44px;
  font-weight: 700;
}
#status {
  font-weight: 600;
  color: var(--blue);
}
#availability {
  border: 1px solid var(--line-strong);
  padding: 12px;
  font-size: 15px;
}
footer {
  border-top: 1px solid var(--line);
  font-size: 14px;
}
#order-ref {
  font: 13px var(--font-mono);
}
[hidden] {
  display: none !important;
}
@media (max-width: 700px) {
  body {
    font-size: 16px;
  }
  header,
  main,
  footer {
    padding: 20px;
  }
  header {
    align-items: flex-start;
    gap: 18px;
    flex-direction: column;
  }
  .grid {
    grid-template-columns: 1fr;
  }
  .hero {
    padding-top: 20px;
  }
  .lead {
    font-size: 19px;
  }
  .picker,
  #preview-box,
  #order {
    padding: 18px;
  }
  .search {
    flex-direction: column;
  }
  .offer strong {
    display: block;
    margin: 8px 0;
  }
  .stats {
    gap: 12px;
  }
  h1 {
    letter-spacing: -1px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}