@import url("https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css");
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif&display=swap");

:root {
  --ink: #1b1916;
  --paper: #f6f3ea;
  --paper-deep: #eeeadd;
  --muted: #6e6b63;
  --rule: rgba(27, 25, 22, .25);
  --display: "Instrument Serif", Georgia, serif;
  --sans: "SUIT", "Noto Sans KR", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--ink); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
button:focus, button:focus-visible,
a:focus, a:focus-visible,
summary:focus, summary:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
body.is-modal-open { overflow: hidden; }

.site-shell { width: min(100%, 390px); margin: 0 auto; overflow: hidden; background: var(--paper); }

.hero { position: relative; height: 520px; color: #fff; }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.header { position: absolute; z-index: 1; top: 28px; left: 24px; right: 24px; display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.55); }
.brand-logo { width: 106px; height: 18px; object-fit: contain; object-position: left center; }
.language-switch { display: flex; gap: 8px; align-items: center; }
.language-switch__button { border: 0; padding: 0; background: transparent; color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .08em; cursor: pointer; opacity: .2; }
.language-switch__button.is-active { opacity: 1; }
.hero__scroll { position: absolute; z-index: 1; bottom: 0; left: 50%; width: 66px; height: 74px; padding: 32px 21px; border: 0; background: transparent; transform: translateX(-50%); cursor: pointer; opacity: .8; }
.hero__scroll svg { display: block; width: 24px; height: 10px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero__scroll svg { animation: arrow-float 2.8s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes arrow-float { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }

.collection { padding: 40px 24px 32px; background: var(--paper); }
.section-heading { width: 100%; margin-bottom: 24px; }
.section-heading h1, .section-heading h2 { margin: 0 0 6px; font-size: 20px; font-weight: 300; line-height: 1.25; letter-spacing: -.02em; }
.section-heading p { margin: 0; color: var(--muted); font-size: 10px; line-height: 17px; letter-spacing: -.02em; }
.product-list { display: grid; gap: 20px; margin-bottom: 24px; }
.product-card { display: flex; gap: 32px; width: 100%; height: 163px; padding: 20px 0 0; border: 0; border-top: 1px solid var(--rule); background: transparent; text-align: left; cursor: pointer; transition: opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.product-card:hover { opacity: .72; }
.product-card__copy { display: flex; flex: 1; min-width: 0; flex-direction: column; justify-content: space-between; padding: 4px; }
.product-card h2 { margin: 0; font-family: var(--display); font-size: 24px; font-weight: 400; line-height: 1; letter-spacing: .04em; }
.product-card p { margin: 0; font-size: 8px; line-height: 12px; letter-spacing: .04em; }
.product-card img { width: 118px; height: 142px; object-fit: cover; }
.cta { display: flex; width: 100%; min-height: 51px; align-items: center; justify-content: space-between; padding: 16px 18px; border-radius: 8px; background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 600; letter-spacing: -.02em; transition: transform .2s ease, opacity .2s ease; }
.cta:hover { opacity: .9; transform: translateY(-1px); }
.cta span:last-child { font-size: 16px; font-weight: 400; }

.quick-guide { padding: 32px 24px 40px; overflow: hidden; border-radius: 0 0 16px 16px; background: var(--paper-deep); }
.faq-list { margin-bottom: 24px; }
.faq-item { border-top: 1px solid var(--rule); }
.faq-item__question { display: flex; width: 100%; min-height: 51px; align-items: center; justify-content: space-between; padding: 16px 4px; border: 0; background: transparent; cursor: pointer; text-align: left; font-size: 11px; }
.faq-item__icon { position: relative; width: 15px; height: 15px; flex: none; }
.faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; top: 7px; left: 2px; width: 11px; height: 1px; background: currentColor; }
.faq-item__icon::after { transform: rotate(90deg); transition: transform .2s ease; }
.faq-item.is-open .faq-item__icon::after { transform: rotate(0); }
.faq-item__answer { height: 0; overflow: hidden; opacity: 0; transition: height .55s cubic-bezier(.22,1,.36,1), opacity .35s ease; }
.faq-item__answer p { margin: -2px 28px 18px 4px; color: var(--muted); font-size: 10px; line-height: 1.65; transform: translateY(-5px); transition: transform .45s cubic-bezier(.22,1,.36,1); }
.faq-item.is-open .faq-item__answer { opacity: 1; }
.faq-item.is-open .faq-item__answer p { transform: translateY(0); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.product-card:nth-child(2) { transition-delay: .08s; }
.product-card:nth-child(3) { transition-delay: .16s; }

.product-modal { position: fixed; z-index: 100; inset: 0; color: var(--ink); background: rgba(15,14,12,0); backdrop-filter: blur(0); transition: background-color .55s ease, backdrop-filter .55s ease; }
.product-modal[hidden] { display: none; }
.product-modal.is-open { background: rgba(15,14,12,.72); backdrop-filter: blur(5px); }
.product-modal__sheet { position: absolute; bottom: 0; left: 50%; width: min(100%,390px); height: calc(100svh - 48px); overflow: hidden; border-radius: 16px 16px 0 0; background: var(--paper); box-shadow: 0 -12px 48px rgba(15,14,12,.18); transform: translate3d(-50%,100%,0); transition: transform 1.05s cubic-bezier(.25,.1,.25,1); will-change: transform; }
.product-modal.is-open .product-modal__sheet { transform: translate3d(-50%,0,0); }
.product-modal.is-closing .product-modal__sheet { transform: translate3d(-50%,100%,0); }
.product-modal__scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
.product-modal__scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.product-modal__scroll-hint { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; height: 56px; pointer-events: none; opacity: 1; background: linear-gradient(to bottom, rgba(246,243,234,0), rgba(246,243,234,.72) 56%, var(--paper) 100%); transition: opacity .55s ease; }
.product-modal__sheet.is-scrolled .product-modal__scroll-hint { opacity: .68; }
.product-modal__sheet.is-at-bottom .product-modal__scroll-hint,
.product-modal__sheet:not(.has-overflow) .product-modal__scroll-hint { opacity: 0; }
.product-modal__header { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; height: 57px; padding: 0 24px; border-bottom: 1px solid var(--rule); background: rgba(246,243,234,.92); backdrop-filter: blur(12px); }
.product-modal__header p { margin: 0; font-size: 8px; letter-spacing: .08em; }
.product-modal__close { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.product-modal__close span { position: absolute; top: 13px; left: 5px; width: 18px; height: 1px; background: var(--ink); transform: rotate(45deg); }
.product-modal__close span:last-child { transform: rotate(-45deg); }
.product-modal__visual { height: 390px; background: #ebe7dc; }
.product-gallery { position: relative; width: 100%; height: 100%; overflow: hidden; }
.product-gallery__track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; cursor: grab; user-select: none; }
.product-gallery__track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.product-gallery__track.is-repositioning { scroll-snap-type: none; scroll-behavior: auto !important; }
.product-gallery__track::-webkit-scrollbar { display: none; }
.product-gallery__slide { width: 100%; height: 100%; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.product-gallery__slide img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; pointer-events: none; -webkit-user-drag: none; }
.product-gallery__nav { position: absolute; z-index: 2; top: 0; bottom: 0; width: 52px; padding: 0; border: 0; background: transparent; color: transparent; cursor: pointer; }
.product-gallery__nav--prev { left: 0; }
.product-gallery__nav--next { right: 0; }
.product-gallery__nav:disabled { pointer-events: none; }
.product-gallery__index { position: absolute; z-index: 2; right: 16px; bottom: 14px; left: 16px; display: flex; align-items: flex-end; justify-content: space-between; pointer-events: none; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.product-gallery__count { margin: 0; font-size: 8px; letter-spacing: .12em; }
.product-gallery__progress { display: flex; width: 90px; gap: 5px; }
.product-gallery__progress span { height: 1px; flex: 1; background: rgba(255,255,255,.38); transition: flex .5s cubic-bezier(.22,1,.36,1), background-color .4s ease; }
.product-gallery__progress span.is-active { flex: 1.9; background: rgba(255,255,255,.96); }
.product-modal__content { padding: 28px 24px 40px; }
.product-modal__title { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.product-modal__title h2 { margin: 0; font-family: var(--display); font-size: 36px; font-weight: 400; line-height: 1; letter-spacing: .04em; }
.product-modal__title p { margin: 0; text-align: right; white-space: pre-line; font-size: 8px; line-height: 12px; letter-spacing: .04em; }
.guide-section { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.guide-section h3 { margin: 0 0 16px; font-size: 12px; font-weight: 600; }
.guide-section dl { display: grid; grid-template-columns: 92px 1fr; gap: 10px 16px; margin: 0; font-size: 10px; line-height: 1.5; }
.guide-section dt { color: var(--muted); }
.guide-section dd { margin: 0; }
.guide-section ul { display: grid; gap: 8px; margin: 0; padding-left: 14px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.product-modal__note { margin: 20px 0 24px; color: var(--muted); font-size: 9px; line-height: 1.6; }

.footer { min-height: 275px; padding: 40px 24px 32px; background: var(--ink); color: var(--paper); }
.footer__statement { margin-bottom: 32px; }
.footer__display { margin: 0 0 16px !important; font-family: var(--display); font-size: 24px !important; line-height: .94 !important; letter-spacing: .015em !important; }
.footer__statement p:last-child { margin: 0; color: rgba(246,243,234,.75); font-size: 10px; line-height: 1.5; letter-spacing: -.02em; }
.footer__links { display: grid; gap: 12px; margin-bottom: 32px; font-size: 10px; font-weight: 600; }
.footer__links a { width: max-content; }
.footer__links a:hover { opacity: .6; }
.footer small { color: #a8a396; font-size: 8px; font-weight: 400; letter-spacing: .06em; }

@media (min-width: 391px) {
  body { padding: 24px 0; }
  .site-shell { box-shadow: 0 24px 64px rgba(0,0,0,.28); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .hero__scroll svg { animation: none; }
  .reveal { opacity: 1; transform: none; }
}