:root {
  font-family: Inter, "Noto Sans KR", system-ui, sans-serif;
  color: #f3efe5;
  background: #1b1e1b;
  line-height: 1.5;
  --museum-ink: #f3efe5;
  --museum-muted: #c7c2b8;
  --museum-deep: #191c19;
  --museum-wall: #222622;
  --museum-rule: rgb(243 239 229 / 22%);
  --museum-brass: #d0ae69;
  --museum-focus: #f2c873;
  --museum-shadow: 0 1.2rem 3rem rgb(0 0 0 / 38%);
}
* { box-sizing: border-box; }
html { background: var(--museum-deep); scroll-behavior: smooth; }
body {
  min-width: 0;
  min-height: 100svh;
  margin: 0;
  background: radial-gradient(circle at 56% 38%, rgb(214 192 151 / 10%), transparent 34%), linear-gradient(115deg, #181b18 0%, #222522 54%, #191c19 100%);
}
a { color: inherit; }
button, input { font: inherit; }
.museum-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gallery-skip { position: fixed; z-index: 50; top: -5rem; left: 1rem; padding: 0.75rem 1rem; color: #171a17; background: #f3efe5; border: 1px solid #171a17; }
.gallery-skip:focus { top: 1rem; }
.museum-gallery {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  height: 100svh;
  min-width: 0;
  min-height: 0;
  grid-template-columns: 180px minmax(0, 1fr) 84px;
  grid-template-areas: "placard exhibition rail";
  align-items: stretch;
  gap: 10px;
  padding: 12px;
  overflow: hidden;
}
.museum-gallery::before { position: absolute; z-index: -1; inset: 4% 8% 2% 20%; background: radial-gradient(ellipse at 52% 42%, rgb(238 219 181 / 8%), transparent 64%); content: ""; pointer-events: none; }
.museum-placard {
  display: flex;
  grid-area: placard;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 1.2rem 1rem 1rem;
  overflow: hidden;
  color: var(--museum-ink);
  background: linear-gradient(180deg, rgb(255 255 255 / 4%), transparent 44%);
  border-left: 1px solid var(--museum-brass);
  box-shadow: inset 0 1px rgb(255 255 255 / 8%);
}
.museum-identity { display: grid; gap: 0.1rem; margin: 0; color: var(--museum-muted); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.5; }
.museum-current-number { margin: clamp(2rem, 7vh, 4rem) 0 0; font-family: Georgia, "Noto Serif KR", serif; font-size: clamp(2.6rem, 4vw, 4.1rem); font-weight: 400; letter-spacing: -0.06em; line-height: 0.9; }
.museum-placard h2 { margin: 1.15rem 0 0.42rem; font-family: Georgia, "Noto Serif KR", serif; font-size: clamp(1.35rem, 1.65vw, 1.8rem); font-weight: 400; letter-spacing: -0.045em; line-height: 1.12; word-break: keep-all; }
.museum-product-name { margin: 0 0 1.25rem; color: var(--museum-brass); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.055em; }
.museum-placard [data-gallery-description] { margin: 0; color: var(--museum-muted); font-size: 0.77rem; line-height: 1.7; word-break: keep-all; }
.museum-recommended-label { margin: 2rem 0 0.55rem; color: var(--museum-muted); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.13em; }
.museum-recommended { display: flex; flex-wrap: wrap; gap: 0.18rem 0.38rem; padding: 0; margin: 0; list-style: none; color: #e0c58e; font-size: 0.67rem; line-height: 1.65; }
.museum-recommended li { white-space: nowrap; }
.museum-collection-progress { display: grid; min-height: 7.4rem; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 0.4rem; margin-top: auto; padding-top: 1rem; color: var(--museum-muted); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; }
.museum-progress-track { position: relative; width: 1px; min-height: 4.4rem; background: var(--museum-rule); }
.museum-progress-track::before { position: absolute; top: 0; left: 0; width: 1px; height: var(--museum-progress, 0%); background: var(--museum-brass); content: ""; transition: height 220ms ease; }
.museum-progress-track i { position: absolute; top: var(--museum-progress, 0%); left: 50%; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--museum-brass); box-shadow: 0 0 0 3px rgb(208 174 105 / 14%); transform: translate(-50%, -50%); transition: top 220ms ease; }
.museum-exhibition { display: grid; min-width: 0; min-height: 0; grid-area: exhibition; grid-template-rows: minmax(0, 1fr) auto; gap: 0.45rem; }
.museum-frame-stage { position: relative; display: grid; min-width: 0; min-height: 0; padding: 0; place-items: center; background: transparent; border: 1px solid rgb(244 239 226 / 28%); box-shadow: 0 0 0 1px rgb(0 0 0 / 46%), var(--museum-shadow); }
.museum-frame { width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; background: #fff; transition: width 240ms ease; }
.museum-gallery[data-device="mobile"] .museum-frame { width: min(390px, 100%); }
.museum-frame iframe:not([hidden]) { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.museum-frame iframe[hidden] { display: none; }
.museum-control-shelf { display: grid; min-width: 0; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 48px; }
.museum-full-view { z-index: 5; display: grid; width: 44px; height: 44px; place-self: center end; place-items: center; color: #f6f1e7; background: rgb(24 27 24 / 72%); border: 1px solid rgb(255 255 255 / 34%); border-radius: 50%; box-shadow: 0 0.45rem 1.2rem rgb(0 0 0 / 24%); backdrop-filter: blur(12px); }
.museum-full-view svg, .museum-device-controls svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.museum-full-view:hover, .museum-full-view:focus-visible { color: #171a17; background: var(--museum-brass); }
.museum-device-controls { z-index: 6; display: flex; grid-column: 2; padding: 0.22rem; gap: 0.12rem; background: rgb(25 28 25 / 68%); border: 1px solid rgb(255 255 255 / 28%); border-radius: 999px; box-shadow: 0 0.65rem 1.6rem rgb(0 0 0 / 28%); backdrop-filter: blur(14px); }
.museum-device-controls button { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; color: #d7d2c8; background: transparent; border: 1px solid transparent; border-radius: 50%; cursor: pointer; }
.museum-device-controls button:hover, .museum-device-controls button:focus-visible { color: #fff8e9; background: rgb(255 255 255 / 10%); }
.museum-device-controls button[aria-pressed="true"] { color: #1a1d1a; background: #e6d2a8; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 52%); }
.museum-artwork-rail { grid-area: rail; min-width: 0; min-height: 0; padding: 0.18rem; overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(180deg, rgb(255 255 255 / 5%), transparent 46%); border-block: 1px solid var(--museum-rule); box-shadow: inset 0 1px rgb(255 255 255 / 5%); scrollbar-color: var(--museum-brass) transparent; scrollbar-width: thin; }
.museum-artwork-list { display: grid; gap: 0.2rem; }
.museum-artwork { display: grid; min-width: 0; min-height: 0; grid-template-columns: 1rem minmax(0, 1fr); align-items: center; gap: 0.18rem; margin: 0; padding: 0.2rem; }
.museum-artwork-number { color: var(--museum-muted); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.08em; text-align: center; }
.museum-artwork-preview { position: relative; display: block; min-width: 0; overflow: hidden; background: #3a3d39; border: 1px solid transparent; transform-origin: center; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; }
.museum-artwork-preview img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; opacity: 1; transition: filter 220ms ease, opacity 220ms ease; }
.museum-artwork-label { position: absolute; inset: auto 0 0; display: grid; min-height: 2rem; padding: 0.18rem 0.2rem; place-items: center; color: #f3efe5; background: rgb(20 23 20 / 84%); font-size: clamp(0.48rem, 0.65vw, 0.6rem); font-weight: 700; letter-spacing: 0.04em; text-align: center; opacity: 0; backdrop-filter: blur(5px); transition: opacity 200ms ease; }
@media (hover: hover) { .museum-artwork-preview:hover { transform: perspective(16rem) rotateY(-6deg); } }
.museum-artwork-preview:hover img, .museum-artwork-preview:focus-visible img { filter: brightness(0.68) contrast(1.04); opacity: 0.82; }
.museum-artwork-preview:hover .museum-artwork-label, .museum-artwork-preview:focus-visible .museum-artwork-label { opacity: 1; }
.museum-artwork-preview[aria-current="true"] { border-color: var(--museum-brass); box-shadow: 0 0 0 1px rgb(208 174 105 / 34%), inset 3px 0 var(--museum-brass); }
.museum-artwork:has(.museum-artwork-preview[aria-current="true"]) .museum-artwork-number { color: var(--museum-brass); }
:focus-visible { outline: 3px solid var(--museum-focus); outline-offset: 3px; }
.museum-nojs-index { padding: 1rem; color: #171a17; background: #f4f0e6; }
.museum-nojs-index img { width: min(20rem, 100%); height: auto; }
@media (min-width: 981px) {
  html, body { width: 100%; height: 100%; overflow: hidden; }
  html:has(.museum-nojs-index), body:has(.museum-nojs-index) { height: auto; overflow: auto; }
  body:has(.museum-nojs-index) .gallery-skip,
  body:has(.museum-nojs-index) .museum-gallery { display: none; }
}
@media (max-width: 980px) {
  .museum-gallery { height: auto; min-height: 100svh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "placard" "exhibition" "rail"; gap: 0.65rem; padding: 0.75rem; overflow: visible; }
  .museum-placard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "identity identity progress" "number title progress" "number product progress" "description description progress" "label recommendations progress"; column-gap: 0.85rem; padding: 0.75rem 0.9rem; background: linear-gradient(180deg, rgb(255 255 255 / 5%), transparent 52%); border-left: 0; border-top: 1px solid var(--museum-brass); }
  .museum-identity { grid-area: identity; grid-auto-flow: column; justify-content: start; gap: 0.6rem; }
  .museum-current-number { grid-area: number; align-self: start; margin: 0.7rem 0 0; font-size: 2.3rem; }
  .museum-placard h2 { grid-area: title; margin: 0.7rem 0 0.15rem; font-size: 1.45rem; }
  .museum-product-name { grid-area: product; margin: 0 0 0.5rem; }
  .museum-placard [data-gallery-description] { grid-area: description; font-size: 0.75rem; }
  .museum-recommended-label { grid-area: label; margin: 0.6rem 0 0; }
  .museum-recommended { grid-area: recommendations; align-self: end; margin-top: 0.45rem; }
  .museum-collection-progress { grid-area: progress; min-width: 3rem; min-height: 6.5rem; margin: 0; padding: 0; }
  .museum-frame { height: min(68vh, 44rem); min-height: 32rem; }
  .museum-artwork-rail { max-width: 100%; padding: 0.28rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; }
  .museum-artwork-list { grid-auto-flow: column; grid-auto-columns: 5.8rem; scroll-snap-type: x proximity; }
  .museum-artwork { grid-template-columns: minmax(0, 1fr); gap: 0.18rem; scroll-snap-align: start; }
  .museum-artwork-number { order: 2; text-align: left; }
}
@media (max-width: 560px) {
  .museum-gallery { gap: 0.5rem; padding: 0.5rem; }
  .museum-placard { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "identity identity" "number title" "number product" "description description" "recommendations recommendations"; column-gap: 0.7rem; padding: 0.65rem 0.72rem; }
  .museum-identity { font-size: 0.52rem; }
  .museum-current-number { margin-top: 0.48rem; font-size: 1.9rem; }
  .museum-placard h2 { margin-top: 0.48rem; font-size: 1.22rem; }
  .museum-product-name { margin-bottom: 0.35rem; font-size: 0.58rem; }
  .museum-placard [data-gallery-description] { font-size: 0.71rem; line-height: 1.5; }
  .museum-recommended-label, .museum-collection-progress { display: none; }
  .museum-recommended { margin-top: 0.45rem; font-size: 0.62rem; }
  .museum-recommended li:nth-child(n + 4) { display: none; }
  .museum-frame { height: 34rem; min-height: 0; }
  .museum-artwork-list { grid-auto-columns: 5.2rem; }
  .museum-artwork-label { font-size: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .museum-frame, .museum-artwork-preview, .museum-artwork-preview img, .museum-progress-track::before, .museum-progress-track i { transition: none; }
  .museum-artwork-preview:hover, .museum-artwork-preview:focus-visible { transform: none; }
  .museum-artwork-label { transition: opacity 180ms linear; }
}