/* Studio: an indigo route drawn across pale celadon paper. Left-aligned editorial grid, one moving line. */
:root {
  --bg: #edf0ea;          /* celadon paper */
  --surface: #f6f8f3;
  --fg: #1e2638;          /* indigo ink */
  --muted: #586174;
  --line: #ccd3c9;
  --accent: #2f4a7a;      /* 쪽빛 route */
  --brass: #9a7330;       /* stop markers */
  --font-display: "Hahmlet Variable", "Hahmlet", "Noto Serif KR", serif;
  --font-body: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --font-brand: var(--font-display);
  /* product identities stay constant in both themes */
  --world-sky: #cde8f2; --world-cream: #fcf6e3; --world-ink: #2c3a30; --world-sage: #69836d;
  --crimson-night: #120f16; --crimson-pearl: #ece6dc; --crimson-red: #b8312f; --crimson-muted: #a79f95;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121826; --surface: #182031; --fg: #e3e7ee; --muted: #9aa3b5; --line: #2a3448; --accent: #9db4e0; --brass: #d0ab62;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121826; --surface: #182031; --fg: #e3e7ee; --muted: #9aa3b5; --line: #2a3448; --accent: #9db4e0; --brass: #d0ab62;
  color-scheme: dark;
}

.section-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.25; letter-spacing: -.015em; }
.section-lead { color: var(--muted); }
.section-head { display: grid; gap: .6rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }

/* ---------- hero */
.hero { padding-block: clamp(3.5rem, 11vw, 9rem) clamp(2.5rem, 6vw, 4.5rem); }
.hero-title {
  font-family: var(--font-display); font-weight: 300; letter-spacing: -.035em; line-height: 1.12;
  font-size: clamp(2.5rem, 7.6vw, 6.1rem); display: grid;
}
.hero-line + .hero-line { padding-left: clamp(1.25rem, 9vw, 7.5rem); }
.hero-route { width: 100%; height: clamp(70px, 14vw, 170px); margin-top: clamp(.5rem, 2vw, 1.5rem); overflow: visible; }
.route-path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1600; stroke-dashoffset: 0; }
.route-stop { fill: var(--bg); stroke: var(--brass); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .js .route-path { animation: draw-route 2.6s cubic-bezier(.45, .05, .2, 1) .2s both; }
  .js .route-stop { animation: stop-in .5s ease-out both; }
  .js .route-stop:nth-of-type(1) { animation-delay: .9s; }
  .js .route-stop:nth-of-type(2) { animation-delay: 1.5s; }
  .js .route-stop:nth-of-type(3) { animation-delay: 2.2s; }
}
@keyframes draw-route { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
@keyframes stop-in { from { opacity: 0; } to { opacity: 1; } }
.hero-lead { max-width: 34em; margin-top: clamp(1rem, 3vw, 2rem); font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--muted); }

/* ---------- about */
.about { padding-block: clamp(3rem, 8vw, 6rem); border-top: 1px solid var(--line); }
.about-grid { display: grid; gap: 1.5rem clamp(2rem, 6vw, 5rem); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.about-body { display: grid; gap: 1.1rem; max-width: 36em; }
.route-list {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem;
  margin-top: clamp(2.75rem, 7vw, 4.5rem); padding-top: 2.1rem;
}
.route-list::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; border-top: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.route-item { position: relative; display: grid; gap: .35rem; min-width: 0; }
.route-dot { position: absolute; top: calc(-2.1rem + 1px); left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2.5px solid var(--brass); }
.route-name { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 400; line-height: 1.2; }
.route-text { color: var(--muted); font-size: .95rem; line-height: 1.6; }
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .route-list { grid-template-columns: 1fr; padding-top: 0; padding-left: 2rem; gap: 1.6rem; }
  .route-list::before { top: 0; bottom: 0; left: 6px; right: auto; border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
  .route-dot { top: .45rem; left: -2rem; }
}

/* ---------- products */
.products { padding-block: clamp(3rem, 8vw, 6rem); border-top: 1px solid var(--line); }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (max-width: 880px) { .product-grid { grid-template-columns: 1fr; } }
.product { border-radius: 20px; overflow: hidden; min-width: 0; }
.product-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.product-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.product-art img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.product-text { display: grid; gap: .55rem; padding: clamp(1.25rem, 3vw, 2rem); flex: 1; align-content: start; }
.product-kind { font-size: .85rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.product-status { border: 1px solid currentColor; border-radius: 999px; padding: 0 .55rem; font-size: .75rem; opacity: .9; }
.product-name { font-family: var(--font-display); font-weight: 450; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: -.02em; }
.product-line { font-size: 1.08rem; }
.product-desc { font-size: .98rem; opacity: .85; max-width: 32em; }
.product-cta { margin-top: .6rem; font-size: .95rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.product-link:hover .product-art img, .product-link:focus-visible .product-art img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) { .product-art img { transition: none; } }

.product-boboo-world { background: var(--world-cream); color: var(--world-ink); }
.product-boboo-world .product-art { background: linear-gradient(180deg, var(--world-sky), var(--world-cream)); }
.product-boboo-world .art-forest { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.product-boboo-world .product-kind, .product-boboo-world .product-cta { color: var(--world-sage); }

.product-crimson-moon { background: var(--crimson-night); color: var(--crimson-pearl); }
.product-crimson-moon .art-lake { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.product-crimson-moon .product-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--crimson-night)); }
.product-crimson-moon .product-kind { color: var(--crimson-muted); }
.product-crimson-moon .product-status { color: #d98a6a; }
.product-crimson-moon .product-name { letter-spacing: .06em; }

/* ---------- how we work */
.how { padding-block: clamp(3rem, 8vw, 6rem); border-top: 1px solid var(--line); }
.how-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem clamp(2rem, 6vw, 5rem); }
.how-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 3vw, 2.5rem); }
.how-list li { display: grid; gap: .4rem; padding-top: 1rem; border-top: 2px solid var(--accent); min-width: 0; }
.how-title { font-size: 1.1rem; font-weight: 650; line-height: 1.4; }
.how-list p { color: var(--muted); font-size: .97rem; }
@media (max-width: 860px) { .how-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .how-list { grid-template-columns: 1fr; } }

/* ---------- contact */
.contact { padding-block: clamp(3rem, 8vw, 6rem) 0; border-top: 1px solid var(--line); }
.contact-text { margin-top: .8rem; color: var(--muted); }
.contact-list { display: grid; gap: 1.5rem; margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.contact-row { display: grid; gap: .25rem; }
.contact-row dt { font-size: .88rem; color: var(--muted); }
.contact-row dd { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.contact-email {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(1.55rem, 4.6vw, 3rem); line-height: 1.2;
  letter-spacing: -.02em; text-decoration: none; overflow-wrap: anywhere;
  background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: .1em;
}
.contact-email:hover { color: var(--accent); }