/* ---- tokens ---- */
:root {
  --ink: #1b2430;
  --ink-soft: #3a4553;
  --muted: #4a5565;
  --line: #e3e7ee;
  --line-strong: #d5dbe5;
  --rail: #c9d0da;
  --string: #9aa4b2;
  --hook: #5b6676;
  --ground: #ffffff;
  --surface: #f2f4f8;
  --ghost: #f1f3f7;
  --blue: #2f6beb;
  --ok-bg: #eaf1fe;
  --ok-fg: #1e4fc2;
  --shot-bg: #f4f1ec;

  --sans: "Outfit", "Noto Sans KR", system-ui, sans-serif;
  --kr: "Noto Sans KR", "Outfit", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --topbar-h: 66px;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }

/* The logo artwork sits on white, so the page stays light. */
html { color-scheme: light; scroll-behavior: smooth; scroll-padding-top: var(--topbar-h); }
html[lang="en"] [lang="ko"],
html[lang="ko"] [lang="en"] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
html[lang="ko"] body { font-family: var(--kr); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

a { color: #2563eb; }
a:hover { color: var(--ink); }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- top bar ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.topbar-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px var(--gutter);
}
.topbar-nav { display: flex; flex-wrap: wrap; gap: 2px 20px; font-size: 14px; font-weight: 500; }
.topbar-nav a,
.topbar-link {
  color: var(--ink);
  text-decoration: none;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
}
.nav-no { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-right: 4px; }
.topbar-logo { display: block; width: 80px; height: 40px; overflow: hidden; }
.topbar-logo img { display: block; width: 112px; height: 112px; margin: -36px 0 0 -16px; }
.topbar-end { justify-self: end; display: flex; align-items: center; gap: 16px; }

.language-switch { display: flex; gap: 2px; padding: 3px; background: var(--surface); border-radius: 999px; }
.language-switch button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 700 12px var(--sans);
  padding: 0 12px;
  min-height: 36px;
  cursor: pointer;
}
.language-switch button[aria-pressed="true"] { background: var(--ink); color: #fff; }

.progress { height: 2px; background: #eef1f5; }
.progress-bar { height: 2px; background: var(--blue); transform-origin: 0 50%; transform: scaleX(0); }

/* ---- buttons / chips ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  border: 1.5px solid var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { color: #fff; background: #2a3646; }
.btn--line { background: #fff; color: var(--ink); }
.btn--line:hover { background: var(--surface); }
.btn--lg { min-height: 52px; padding: 0 24px; font-size: 15px; border-radius: 14px; }

.chip {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 8px;
  white-space: nowrap;
}
.chip--ok { background: var(--ok-bg); color: var(--ok-fg); }
.chip--outline { border: 1px solid var(--line-strong); color: var(--ink-soft); }

/* ---- a product rack ---- */
.rack {
  position: relative;
  min-height: calc(100vh - var(--topbar-h));
  min-height: calc(100svh - var(--topbar-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 0 40px;
  overflow: hidden;
}
.rack + .rack { border-top: 1px solid var(--line); }

.rack-index {
  position: absolute;
  right: var(--gutter);
  top: 16px;
  font-weight: 800;
  font-size: clamp(120px, 18vw, 260px);
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--ghost);
  pointer-events: none;
  user-select: none;
}

.rack-kicker {
  position: relative;
  margin: 0 0 18px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}

.rack-label {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 20px;
  padding: 0 16px 36px;
}
.rack-icon { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 10px 20px -10px rgba(27, 36, 48, .5); }
.rack-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rack-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.rack-name { margin: 0; font-family: var(--sans); font-weight: 800; font-size: 34px; letter-spacing: -.02em; line-height: 1.1; }
.rack-line { margin: 0; font-size: 15px; color: var(--muted); }
.rack-ctas { display: flex; flex-wrap: wrap; gap: 8px; }

.rack-hint { margin: 4px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.rack-cue {
  align-self: center;
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  color: var(--muted);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
}

/* ---- the rail ---- */
.rail-scroll { overflow-x: auto; padding: 0 var(--gutter) 24px; scrollbar-width: thin; }
.rail { position: relative; width: max-content; min-width: min(100%, 1104px); margin: 0 auto; padding-top: 6px; }
.rail-bar {
  position: absolute;
  inset: 6px 0 auto;
  height: 4px;
  border-radius: 2px;
  background: var(--rail);
  transform-origin: 0 50%;
}
.rail-bar::before,
.rail-bar::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 6px;
  height: 16px;
  border-radius: 3px;
  background: var(--string);
}
.rail-bar::before { left: -4px; }
.rail-bar::after { right: -4px; }

.hangers {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}
.hanger { flex-shrink: 0; transform-origin: 50% 0; }

.hanger-btn {
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: block;
  position: relative;
  transform-origin: 50% 0;
  transition: transform .5s var(--ease-out), opacity .45s, filter .45s;
}
.hanger-btn:focus-visible { outline-offset: 6px; border-radius: 26px; }

.hanger-sway {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 0;
  animation: sway calc(4.5s + var(--i) * .5s) ease-in-out calc(var(--i) * -.8s) infinite alternate;
}

/* hook + string + ring, drawn in CSS so every hanger shares one shape */
.hook {
  position: relative;
  display: block;
  width: 26px;
  height: calc(22px + var(--str) + 8px);
  margin-top: -2px;
  background:
    linear-gradient(var(--string), var(--string)) 12px 22px / 2px var(--str) no-repeat;
}
.hook::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 2px;
  width: 9px;
  height: 12px;
  border: 2.2px solid var(--hook);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 9px 0 0;
  box-sizing: border-box;
}
.hook::after {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--string);
  box-sizing: border-box;
}

/* a phone: dark bezel around a screenshot */
.frame--phone {
  display: block;
  width: 112px;
  height: 236px;
  margin-top: -3px;
  padding: 6px;
  border-radius: 24px;
  background: var(--ink);
  box-shadow: 0 16px 26px -14px rgba(27, 36, 48, .35);
  transition: box-shadow .45s;
}
.frame--phone img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 19px;
  object-fit: cover;
  object-position: top;
  background: var(--shot-bg);
}

.hanger-title { margin-top: 16px; font-weight: 700; font-size: 14px; }
.hanger-no { margin-top: 2px; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* hover / focus: the picked piece comes forward, the rest step back */
.hanger-btn:hover,
.hanger-btn:focus-visible { transform: translateY(18px) scale(1.08); z-index: 3; }
.hanger-btn:hover .hanger-sway,
.hanger-btn:focus-visible .hanger-sway { animation: swing 1.1s ease-out; }
.hanger-btn:hover .frame--phone,
.hanger-btn:focus-visible .frame--phone { box-shadow: 0 34px 44px -18px rgba(27, 36, 48, .5); }
.hangers:has(.hanger-btn:hover) .hanger-btn:not(:hover),
.hangers:has(.hanger-btn:focus-visible) .hanger-btn:not(:focus-visible) {
  opacity: .45;
  filter: blur(1.5px) grayscale(.4);
}

/* first rack: the pieces drop onto the rail on load */
.rack--first .hanger { animation: hangIn .9s var(--ease-out) calc(.15s + var(--i) * .08s) both; }
.rack--first .rack-label,
.rack--first .rack-kicker { animation: rise .7s var(--ease-out) both; }

/* ---- next rail / contact ---- */
.next { border-top: 1px solid var(--line); padding: 96px var(--gutter) 80px; }
.next-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 40px;
  align-items: center;
  justify-content: space-between;
}
.next-copy { display: flex; flex-direction: column; gap: 12px; flex: 1 1 360px; min-width: 0; }
.next-kicker { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.next h2 { margin: 0; font-family: var(--kr); font-weight: 900; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.03em; line-height: 1.2; }
.next p { margin: 0; font-size: 16px; color: var(--muted); }
.next-links { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- footer ---- */
.foot {
  border-top: 1px solid var(--line);
  padding: 20px var(--gutter) 28px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--ink); }

/* ---- detail overlay ---- */
.detail {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px var(--gutter) 32px;
  overflow-y: auto;
}
.detail[hidden] { display: none; }
.detail-backdrop {
  position: fixed;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  cursor: zoom-out;
}
.detail-body {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px 72px;
  max-width: 980px;
  width: 100%;
  pointer-events: none;
}
.detail-stage { display: flex; flex-direction: column; align-items: center; }
.detail-string { width: 2px; height: 40px; background: var(--string); }
.detail-string::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: 38px 0 0 -5px;
  border-radius: 50%;
  border: 2px solid var(--string);
  box-sizing: border-box;
  background: var(--ground);
}
.frame--big {
  width: 248px;
  height: 528px;
  margin-top: 7px;
  padding: 10px;
  border-radius: 44px;
  box-shadow: 0 40px 60px -24px rgba(27, 36, 48, .5);
}
.frame--big img { border-radius: 35px; }
.detail-panel {
  flex: 1 1 300px;
  max-width: 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  pointer-events: auto;
}
.detail-product { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; }
.detail-product img { border-radius: 8px; }
.detail-no { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--muted); }
.detail-panel h2 { margin: 0; font-family: var(--kr); font-weight: 900; font-size: 38px; letter-spacing: -.03em; line-height: 1.15; }
.tabs { display: flex; gap: 6px; }
.tabs button {
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  min-height: 40px;
  padding: 0 18px;
  background: #fff;
  color: var(--ink);
  font: 700 13px var(--sans);
  cursor: pointer;
}
html[lang="ko"] .tabs button { font-family: var(--kr); }
.tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.detail-desc { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }
.detail-info { margin: 0; border-top: 1px solid var(--line); }
.detail-info div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.detail-info dt { margin: 0; }
.detail-info dd { margin: 0; text-align: right; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.detail-ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.detail-ctas .btn { min-height: 52px; border-radius: 14px; font-size: 15px; white-space: normal; text-align: center; }
.detail-nav { display: flex; justify-content: space-between; }
.detail-nav button {
  border: 0;
  background: none;
  min-height: 44px;
  padding: 0 4px;
  cursor: pointer;
  font: 700 13px var(--sans);
  color: var(--ink);
}
html[lang="ko"] .detail-nav button { font-family: var(--kr); }
.detail-close {
  position: fixed;
  top: 16px;
  right: var(--gutter);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.detail.is-entering .detail-stage { animation: dropIn .6s cubic-bezier(.2, .9, .25, 1.15) both; }
.detail.is-entering .detail-panel { animation: rise .5s .15s var(--ease-out) both; }
body.is-locked { overflow: hidden; }

/* ---- motion ---- */
@keyframes sway { from { transform: rotate(-1.1deg); } to { transform: rotate(1.1deg); } }
@keyframes swing {
  0% { transform: rotate(0); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(-3deg); }
  75% { transform: rotate(1.5deg); }
  100% { transform: rotate(0); }
}
@keyframes hangIn {
  from { opacity: 0; transform: translateY(-160px) rotate(-8deg); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-48px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: translateY(70px); } to { transform: translateY(-70px); } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Scroll-driven motion for racks below the first. Browsers without scroll timelines show the
   finished state. */
@supports (animation-timeline: view()) {
  .rack:not(.rack--first) .hanger {
    animation: hangIn linear both;
    animation-timeline: view();
    animation-range: entry calc(5% + var(--i) * 7%) cover calc(33% + var(--i) * 7%);
  }
  .rack:not(.rack--first) .rail-bar {
    animation: draw linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 40%;
  }
  .rack:not(.rack--first) .rack-label,
  .sd-rise {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  .rack-index {
    animation: drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  .progress-bar {
    animation: draw linear both;
    animation-timeline: scroll(root);
  }
}
@supports not (animation-timeline: view()) {
  .progress { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hanger-btn:hover,
  .hanger-btn:focus-visible { transform: none; }
}

/* ---- narrow screens ---- */
@media (max-width: 640px) {
  :root { --topbar-h: 62px; }
  .topbar-inner { grid-template-columns: auto minmax(0, 1fr); }
  .topbar-nav { display: none; }
  .topbar-logo { justify-self: start; }
  .rack { min-height: 0; padding: 40px 0 32px; }
  .rack-label { flex-direction: column; text-align: center; }
  .rack-name-row { justify-content: center; }
  .hangers { gap: 24px; padding: 0 16px; }
  .detail { align-items: flex-start; }
  .frame--big { width: 200px; height: 426px; padding: 8px; border-radius: 36px; }
  .frame--big img { border-radius: 29px; }
  .detail-panel h2 { font-size: 30px; }
}