/* ===== styles.base.css ===== */
:root {
  --black: #050505;
  --panel: #191919;
  --ivory: #fdf1d8;
  --gold: #c7994f;
  --white: #fff;
  --muted: rgba(255, 255, 255, 0.75);
  --line: rgba(255, 255, 255, 0.25);
  --page-pad: clamp(28px, 8.333vw, 160px);
  --serif-ko: "Noto Serif KR", "Batang", serif;
  --serif-en: "Cormorant Infant", Georgia, serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--black);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--black);
  color: var(--white);
  font-family: var(--serif-ko);
  word-break: keep-all;
}

a,
button {
  color: inherit;
}

a {
  text-decoration: none;
}

button {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  transform: translateY(-150%);
  background: var(--ivory);
  color: var(--black);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(30px, 3.125vw, 60px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(16, 13, 10, 0.24);
  backdrop-filter: blur(8px);
}

.brand,
.header-actions {
  display: flex;
  align-items: center;
}

.brand {
  gap: 13px;
}

.brand-logo {
  width: 107px;
  height: 40px;
  object-fit: contain;
}

.stat-label,
.rail-current,
.rail-name,
.rail-links,
.private-viewing,
.object-spec small,
.craft-title span,
.craft-master-count span,
.master-timeline,
.detail-link small {
  font-family: var(--serif-en);
}

.header-actions {
  gap: 10px;
}

.private-viewing {
  min-height: 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border: 1px solid var(--gold);
  background: var(--gold);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.03em;
  transition: background-color 180ms ease, color 180ms ease;
}

.private-viewing:hover,
.private-viewing:focus-visible {
  background: var(--ivory);
  color: #2b2115;
  outline: none;
}

.side-rail {
  position: fixed;
  z-index: 90;
  top: 50%;
  left: 35px;
  width: 49px;
  height: 367px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 0;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(5px);
}

.rail-current {
  font-size: 14px;
  font-weight: 600;
}

.rail-name {
  height: 92px;
  margin-top: 7px;
  font-size: 16px;
  font-weight: 500;
  writing-mode: vertical-rl;
}

.rail-progress {
  width: 1px;
  height: 39px;
  margin: 9px 0 10px;
  background: var(--white);
}

.rail-links {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rail-links a {
  position: relative;
  color: rgba(255, 255, 255, 0.42);
  font-size: 14px;
  line-height: 1;
}

.rail-links a::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 7px;
  transform: translate(-50%, -50%);
  background: currentColor;
  content: "";
}

.rail-links a span {
  opacity: 0;
}

.rail-links a.is-active,
.rail-links a:hover,
.rail-links a:focus-visible {
  color: var(--white);
  outline: none;
}

.hero {
  position: relative;
  height: 993px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero-bg,
.hero-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-bg {
  object-fit: cover;
  object-position: center;
  opacity: 0.3;
}

.hero-shade {
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.03), rgba(5, 5, 5, 0.05) 70%, rgba(5, 5, 5, 0.32));
}

.hero-content {
  position: relative;
  z-index: 2;
  height: calc(100% - 90px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 86px var(--page-pad) 30px;
  text-align: center;
}

.hero-title-row {
  width: min(938px, 90vw);
  display: grid;
  grid-template-columns: 1fr 43px auto 43px 1fr;
  align-items: center;
  gap: 28px;
}

.hero-kicker {
  margin: 0;
  font-size: 30px;
  font-weight: 200;
  letter-spacing: -0.1em;
  line-height: 1.1;
  white-space: nowrap;
}

.hero-kicker:last-child {
  font-weight: 600;
}

.hero-rule {
  width: 43px;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
}

.hero h1 {
  width: 271px;
  margin: 0;
  line-height: 0;
}

.hero h1 img {
  display: block;
  width: 100%;
  height: auto;
  transform: translateY(-5px);
}

.hero-description {
  margin: 52px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 19px;
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 31px;
}

.hero-stats {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 90px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  background: rgba(217, 217, 217, 0.06);
}

.stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: clamp(28px, 7.24vw, 139px);
  border-right: 1px solid var(--line);
}

.stat:last-child {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  border-right: 0;
  background: rgba(199, 153, 79, 0.16);
}

.stat:last-child::after {
  font-size: 22px;
  content: "→";
}

.stat-label {
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.11em;
}

.stat-value {
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--serif-en);
  font-size: 30px;
  line-height: 1;
  white-space: nowrap;
}

.stat-value strong {
  color: var(--ivory);
  font-weight: 700;
}

.philosophy {
  position: relative;
  min-height: 1143px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.section-heading {
  margin: 0;
  font-size: 70px;
  font-weight: 500;
  letter-spacing: -0.09em;
  line-height: 1;
}

.philosophy-heading {
  position: absolute;
  top: 184px;
  left: var(--page-pad);
  width: 216px;
  line-height: 0;
}

.philosophy-heading img {
  display: block;
  width: 100%;
  height: auto;
}

.philosophy-subtitle {
  position: absolute;
  top: 278px;
  left: var(--page-pad);
  margin: 0;
  font-size: 53px;
  font-weight: 500;
  letter-spacing: -0.11em;
  line-height: 1.22;
}

.object-composition {
  position: absolute;
  top: 241px;
  left: 45.55%;
  width: 550px;
  height: 460px;
}

.lacquer-detail {
  position: absolute;
  top: 0;
  left: 150px;
  width: 391px;
  height: 442px;
  object-fit: cover;
}

.whisky-object {
  position: absolute;
  top: 55px;
  left: 60px;
  width: 323px;
  height: 398px;
  object-fit: cover;
  box-shadow: 10px -6px 4px rgba(0, 0, 0, 0.18);
}

.art-mark {
  position: absolute;
  top: 105px;
  left: 0;
  width: 118px;
  height: 148px;
  padding: 18px 17px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(11px);
}

.art-mark small {
  display: block;
  font-family: var(--serif-en);
  font-size: 13px;
  line-height: 1;
}

.art-mark-logo {
  display: block;
  width: 84px;
  height: auto;
  margin-top: 15px;
}

.art-mark em {
  display: block;
  margin-top: 20px;
  font-family: var(--serif-en);
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  text-align: right;
}

.philosophy-copy {
  position: absolute;
  top: 765px;
  left: 48.65%;
  width: min(540px, 43vw);
}

.philosophy-copy h3 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.09em;
  line-height: 1.55;
}

.philosophy-copy h3 span {
  font-weight: 200;
}

.philosophy-copy h3 .philosophy-lead {
  font-weight: 700;
}

.philosophy-copy h3 b {
  font-weight: 700;
}

.mobile-copy-break {
  display: none;
}

.philosophy-copy p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 23px;
}

.object-specs {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 98px;
  display: grid;
  grid-template-columns: 262px 1fr;
  padding: 0 min(25.57vw, 491px) 0 clamp(var(--page-pad), calc(74.43vw - 495px), 934px);
  border-top: 1px solid var(--line);
}

.object-spec {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.object-spec:first-child {
  padding-right: 30px;
}

.object-spec + .object-spec {
  padding-left: 30px;
  border-left: 1px solid var(--line);
}

.object-spec small {
  margin-bottom: 7px;
  font-family: var(--bodoni);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
}

.object-spec span {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.masters {
  position: relative;
  min-height: 944px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.masters-copy {
  position: absolute;
  z-index: 3;
  top: 206px;
  left: var(--page-pad);
  width: 560px;
}

.masters-copy h2 {
  margin: 0;
  font-size: 53px;
  font-weight: 500;
  letter-spacing: -0.1em;
  line-height: 1.4;
}

.masters-copy .vertical-rule {
  width: 1px;
  height: 107px;
  margin: 45px 0 35px 44px;
  background: rgba(255, 255, 255, 0.38);
}

.masters-copy .lead {
  margin: 0;
  font-size: 30px;
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 1.5;
}

.masters-copy .lead strong {
  font-weight: 700;
}

.masters-copy .body-copy {
  width: 488px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.75);
  leading-trim: both;
  text-edge: cap;
  font-family: "Noto Serif KR", serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 23px;
  letter-spacing: -0.48px;
}

.master-stage {
  position: absolute;
  top: 113px;
  left: 48.65%;
  width: max(51.35%, 986px);
  height: 730px;
}

.master-photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 519px;
  height: 698px;
  object-fit: cover;
}

.master-gradient {
  position: absolute;
  top: 0;
  left: 519px;
  width: 520px;
  height: 698px;
  background: linear-gradient(90deg, #e7e7e7 0%, #d0d0d0 35%, #232323 74%, #080808 100%);
}

.master-gradient::after {
  position: absolute;
  inset: 0 0 0 109px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.68));
  content: "";
}

.play-control {
  position: absolute;
  z-index: 2;
  top: 316px;
  left: -32px;
  width: 66px;
  height: 66px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform 180ms ease;
}

.play-control:hover,
.play-control:focus-visible {
  transform: scale(1.08);
  outline: 2px solid var(--ivory);
  outline-offset: 3px;
}

.play-control img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.master-caption {
  position: absolute;
  z-index: 3;
  top: 574px;
  left: 34px;
  width: 454px;
}

.master-name {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 13px;
  font-size: 23px;
  letter-spacing: -0.05em;
}

.master-name::after {
  order: 2;
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, 0.5);
  content: "";
}

.master-name strong {
  order: 3;
  color: var(--ivory);
  letter-spacing: 0.12em;
}

.detail-link {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  background: rgba(199, 153, 79, 0.42);
  font-size: 18px;
  letter-spacing: -0.05em;
}

.detail-link small {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.11em;
}

.master-timeline {
  position: absolute;
  bottom: 0;
  left: 6px;
  width: 508px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  font-size: 15px;
}

.timeline-track {
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: 10px;
  background: #262626;
}

.timeline-track::after {
  position: absolute;
  top: 1px;
  right: 13%;
  left: 0;
  height: 1px;
  background: var(--white);
  content: "";
}

.timeline-count span {
  opacity: 0.5;
}

.craft {
  position: relative;
}

/* Figma 250:6262 / 250:6263 : 위아래 모두 흰색 50% 선 */
.craft-bar {
  height: 71px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-pad);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid var(--line);
}

.craft-bar p {
  margin: 0;
}

.craft-title,
.craft-master-count {
  display: flex;
  align-items: center;
  font-family: var(--bodoni);
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.craft-title {
  gap: 12px;
}

.craft-title span,
.craft-master-count span {
  font-family: var(--bodoni);
  font-size: 15px;
}

.craft-title span {
  font-weight: 400;
}

.craft-title strong {
  font-weight: 400;
}

.craft-title strong,
.craft-master-count strong,
.craft-master-count em {
  font-family: var(--bodoni);
  font-size: 18px;
}

.craft-master-count {
  gap: 0;
}

.craft-master-count span,
.craft-master-count em {
  font-weight: 400;
}

.craft-master-count strong {
  margin-left: 7px;
  font-weight: 700;
}

.craft-master-count em {
  margin-left: 4px;
  color: rgba(255, 255, 255, 0.53);
  font-style: normal;
}

.craft-layout {
  min-height: 854px;
  display: grid;
  grid-template-columns: 60.16% 39.84%;
}

.craft-visual {
  position: relative;
  min-height: 854px;
  overflow: hidden;
}

.craft-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.carousel-controls {
  position: absolute;
  right: 6%;
  bottom: 50px;
  left: 52%;
  display: grid;
  grid-template-columns: 32px repeat(5, minmax(44px, 73px)) 32px;
  align-items: center;
  gap: 10px;
}

.carousel-controls button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.carousel-controls button:focus-visible {
  border-radius: 50%;
  outline: 2px solid var(--ivory);
  outline-offset: 3px;
}

.carousel-controls button img {
  width: 32px;
  height: 32px;
}

.thumb {
  height: 73px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.61);
  transition: border-color 160ms ease;
}

.thumb.is-active {
  border: 3px solid var(--white);
}

.craft-panel {
  min-height: 854px;
  padding: 70px clamp(50px, 6.25vw, 120px);
  background: var(--panel);
}

.maker-id {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 28px;
  border-bottom: 2px solid #fdf1d8;
}

.maker-id p {
  margin: 0;
}

.maker-id img {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  border-radius: 24px;
  object-fit: cover;
}

.maker-id strong,
.maker-id span {
  display: block;
}

.maker-id strong {
  color: var(--ivory);
  font-size: 33px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.1;
}

.maker-id span {
  margin-top: 8px;
  font-size: 21px;
  letter-spacing: -0.05em;
}

blockquote {
  margin: 53px 0 27px;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -0.08em;
  line-height: 1.7;
}

.craft-description,
.craft-closing {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.03em;
}

.craft-description {
  color: var(--muted);
  font-weight: 300;
  line-height: 25px;
}

.craft-closing {
  margin-top: 21px;
  font-weight: 500;
  line-height: 26px;
}

.craft-facts {
  margin: 54px 0 0;
  border-top: 2px solid #fdf1d8;
  border-bottom: 2px solid #fdf1d8;
}

.craft-facts div {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.craft-facts div:last-child {
  border-bottom: 0;
}

.craft-facts dt,
.craft-facts dd {
  margin: 0;
}

.craft-facts dt {
  color: var(--muted);
  font-size: 14px;
  font-weight: 300;
}

.craft-facts dd {
  font-size: 16px;
  font-weight: 600;
  text-align: right;
}

.afterglow {
  min-height: 976px;
  display: grid;
  place-items: center;
}

.afterglow::before {
  width: min(240px, 35vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199, 153, 79, 0.6), transparent);
  content: "";
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1280px) {
  :root { --page-pad: 80px; }
  .side-rail { left: 18px; }
  .hero-title-row { gap: 18px; }
  .hero-kicker { font-size: 24px; }
  .hero h1 { width: 246px; }
  .stat { padding-left: 48px; }
  .object-composition { left: 43%; transform: scale(0.88); transform-origin: top left; }
  .philosophy-copy { left: 52%; }

  .masters-copy { width: 500px; }
  .masters-copy h2 { font-size: 45px; }
  .master-stage { left: 53%; }
  .craft-panel { padding-right: 60px; padding-left: 60px; }
  .carousel-controls { left: 42%; }
}

@media (max-width: 1200px) {
  :root { --page-pad: 40px; }
  .site-header { height: 72px; padding: 0 24px; }
  .brand-logo { width: 90px; height: 34px; }
  .side-rail { display: none; }
  .hero { height: 850px; }
  .hero-content { height: calc(100% - 132px); padding-top: 72px; }
  .hero-title-row { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .hero-title-row .hero-rule { display: none; }
  .hero-kicker:first-child { order: 2; }
  .hero h1 { order: 1; width: clamp(210px, 32vw, 246px); }
  .hero-kicker:last-child { order: 3; }
  .hero-description { margin-top: 36px; }
  .hero-stats { height: 132px; grid-template-columns: 1fr 1fr; }
  .stat { padding-left: 32px; border-bottom: 1px solid var(--line); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(n + 3) { border-bottom: 0; }
  .stat-label { font-size: 12px; }
  .stat-value { font-size: 21px; }

  .philosophy { min-height: 0; display: flex; flex-direction: column; padding: 100px var(--page-pad) 0; }
  .philosophy-heading, .philosophy-subtitle, .object-composition, .philosophy-copy, .object-specs {
    position: relative; top: auto; right: auto; bottom: auto; left: auto;
  }
  .philosophy-heading { width: 179px; }
  .philosophy-subtitle { margin-top: 28px; font-size: 42px; }
  .object-composition { width: min(550px, 100%); height: 460px; margin: 60px 0 0; transform: none; }
  .philosophy-copy { width: 100%; margin: 42px 0 80px; }
  .object-specs { width: calc(100% + (var(--page-pad) * 2)); height: auto; min-height: 98px; grid-template-columns: 1fr 1fr; margin-left: calc(var(--page-pad) * -1); padding: 0 var(--page-pad); }

  .masters { min-height: 0; padding: 100px var(--page-pad) 0; }
  .masters-copy, .master-stage { position: relative; top: auto; left: auto; }
  .masters-copy { width: 100%; }
  .master-stage { width: calc(100% + var(--page-pad)); height: 730px; margin-top: 70px; }
  .craft-layout { grid-template-columns: 1fr; }
  .craft-visual { min-height: 620px; }
  .craft-panel { min-height: 0; padding: 90px var(--page-pad); }
  .carousel-controls { right: var(--page-pad); left: var(--page-pad); }
  .afterglow { min-height: 480px; }
}

@media (max-width: 620px) {
  :root { --page-pad: 22px; }
  .site-header { height: 64px; padding: 0 16px; }
  .private-viewing { min-height: 34px; padding: 0 11px; font-size: 11px; }
  .hero { height: 760px; }
  .hero-bg { object-position: 59% center; }
  .hero-content { height: calc(100% - 144px); padding-right: 18px; padding-left: 18px; }
  .hero-kicker { font-size: 17px; letter-spacing: -0.08em; }
  .hero h1 { width: min(72vw, 226px); }
  .hero-description { max-width: 320px; margin-top: 28px; font-size: 14px; line-height: 24px; }
  .hero-stats { height: 144px; }
  .stat { padding-left: 18px; }
  .stat-value { font-size: 18px; }
  .stat:last-child { gap: 8px; }

  .section-heading { font-size: 48px; }
  .philosophy-heading { width: 148px; }
  .philosophy-subtitle { font-size: 35px; line-height: 1.35; }
  .object-composition { height: 365px; margin-top: 52px; }
  .lacquer-detail { left: 25%; width: 75%; height: auto; }
  .whisky-object { top: 44px; left: 9%; width: 65%; height: auto; }
  .art-mark { top: 80px; width: 92px; height: 116px; padding: 13px; }
  .art-mark-logo { width: 66px; margin-top: 12px; }
  .art-mark em { margin-top: 12px; font-size: 12px; }
  .philosophy-copy h3 { font-size: 24px; line-height: 1.65; }
  .object-specs { grid-template-columns: 1fr; padding: 0 var(--page-pad); }
  .object-spec { min-height: 78px; }
  .object-spec + .object-spec { padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }

  .masters-copy h2 { font-size: 37px; }
  .masters-copy .vertical-rule { height: 72px; margin: 34px 0 28px 22px; }
  .masters-copy .lead { font-size: 23px; }
  .masters-copy .body-copy { width: 100%; font-size: 14px; }
  .master-stage { width: calc(100% + (var(--page-pad) * 2)); height: 615px; margin-left: calc(var(--page-pad) * -1); }
  .master-photo { width: 100%; height: 580px; }
  .master-gradient { left: 45%; width: 55%; height: 580px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.82)); }
  .master-gradient::after { display: none; }
  .play-control { top: 262px; left: 12px; width: 54px; height: 54px; }
  .master-caption { top: 430px; left: 22px; width: calc(100% - 44px); }
  .master-name { font-size: 18px; }
  .detail-link { padding: 0 15px; font-size: 15px; }
  .master-timeline { left: 22px; width: calc(100% - 44px); }

  .craft-bar { height: 62px; padding: 0 20px; }
  .craft-title { gap: 9px; }
  .craft-title strong, .craft-master-count strong, .craft-master-count em { font-size: 14px; }
  .craft-master-count span { display: none; }
  .craft-visual { min-height: 440px; }
  .carousel-controls { right: 14px; bottom: 22px; left: 14px; grid-template-columns: 28px repeat(5, 1fr) 28px; gap: 5px; }
  .carousel-controls button, .carousel-controls button img { width: 28px; height: 28px; }
  .thumb { height: 44px; }
  .craft-panel { padding-top: 72px; padding-bottom: 72px; }
  .maker-id { padding-bottom: 24px; }
  .maker-id img { width: 58px; height: 58px; flex-basis: 58px; border-radius: 20px; }
  .maker-id strong { font-size: 27px; }
  .maker-id span { font-size: 17px; }
  blockquote { margin-top: 42px; font-size: 21px; }
  .craft-facts dd { max-width: 70%; font-size: 14px; }
  .afterglow { min-height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}


/* ===== styles.object.css ===== */
.object-composition .lacquer-detail,
.object-composition .whisky-object {
  opacity: 0;
  will-change: opacity, transform;
}

/*
 * Figma 250:4547 / 250:4549 모두 모서리 라운딩이 없다(각진 사각형).
 * left 는 Figma 값이 193px 이지만, 위스키 뒤로 더 숨기려고 의도적으로 80px 당겼다.
 */
.object-composition .lacquer-detail {
  z-index: 1;
  top: 32px;
  left: 113px;
  width: 307px;
  height: 378px;
  border-radius: 0;
  transform: translateX(72px) rotate(0deg);
  transform-origin: center;
}

/* Figma 250:4549 object image surface. */
.object-composition .whisky-object {
  z-index: 2;
  padding: 1px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(
    141.04deg,
    rgba(255, 255, 255, 0) -5.59%,
    #fff 58.88%,
    rgba(102, 102, 102, 0.07) 102.55%
  );
  box-shadow: 10px -6px 4px 0 rgba(0, 0, 0, 0.18);
  transform: translateX(-72px);
}

.object-composition .art-mark {
  z-index: 3;
}

.philosophy.is-visible .object-composition .whisky-object {
  animation: whisky-object-enter 1s cubic-bezier(0.22, 1, 0.36, 1) 100ms forwards;
}

.philosophy.is-visible .object-composition .lacquer-detail {
  animation: lacquer-card-enter 1.45s cubic-bezier(0.22, 1, 0.36, 1) 100ms forwards;
}

@keyframes whisky-object-enter {
  from {
    opacity: 0;
    transform: translateX(-72px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes lacquer-card-enter {
  0% {
    opacity: 0;
    transform: translateX(72px) rotate(0deg);
  }

  58% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }

  72% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(14.37deg);
  }
}

@media (max-width: 620px) {
  .object-composition .lacquer-detail {
    top: 24px;
    left: 32%;
    width: 56%;
    height: auto;
  }

  .object-composition .whisky-object {
    top: 44px;
    left: 9%;
    width: 65%;
    height: auto;
  }

  .header-actions {
    min-width: 0;
  }

  .private-viewing {
    min-height: 34px;
    max-width: 170px;
    padding: 0 8px;
    overflow: hidden;
    font-size: 9px;
    white-space: nowrap;
  }

  .hero-description {
    font-size: 13px;
    line-height: 22px;
  }

  .hero-description br,
  .philosophy-copy h3 br,
  .philosophy-copy p br,
  .craft-description br,
  .craft-closing br {
    display: none;
  }

  .stat-value {
    font-size: 14px;
    line-height: 1.15;
    white-space: normal;
  }

  .stat:last-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .stat:last-child::after {
    position: absolute;
    right: 16px;
    font-size: 16px;
  }

  .detail-link {
    min-height: 50px;
    height: auto;
    gap: 12px;
    padding: 10px 15px;
  }

  .detail-link small {
    flex: 0 0 auto;
  }

  .craft-facts div {
    align-items: flex-start;
    padding: 13px 0;
  }

  .craft-facts dd {
    max-width: 68%;
  }

  .hero-description,
  .philosophy-copy,
  .philosophy-copy h3,
  .philosophy-copy h3 span,
  .philosophy-copy p,
  .masters-copy,
  .masters-copy h2,
  .masters-copy .lead,
  .masters-copy .body-copy,
  .detail-link,
  blockquote,
  .craft-panel,
  .craft-description,
  .craft-closing,
  .craft-facts dd {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    /* 한글은 어절 단위로 끊는다. break-all/anywhere는 "우주"를 "우/주"로 쪼갠다.
       넘칠 때만 끊도록 break-word를 안전장치로 둔다. */
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}

@media (prefers-reduced-motion: reduce) {
  .philosophy .object-composition .whisky-object {
    opacity: 1;
    transform: translateX(0);
    animation: none;
  }

  .philosophy .object-composition .lacquer-detail {
    opacity: 1;
    transform: translateX(0) rotate(14.37deg);
    animation: none;
  }
}


/* ===== styles.art-mark.css ===== */
.object-composition .calligraphy-media {
  position: absolute;
  z-index: 2;
  top: 280px;
  left: 347px;
  width: 110px;
  height: 130px;
  display: block;
  /* Figma 250:4550 라운딩 없음 */
  border-radius: 0;
  object-fit: cover;
  background: #0a0a0a;
  opacity: 0;
  transform: translateX(48px);
  will-change: opacity, transform;
}

.object-composition .art-mark {
  padding: 0;
}

.object-composition .art-mark::before {
  position: absolute;
  top: 123px;
  left: 17px;
  width: 32px;
  height: 1px;
  background: rgba(255, 255, 255, 0.72);
  content: "";
}

.object-composition .art-mark::after {
  position: absolute;
  top: 19px;
  left: 96px;
  width: 5px;
  height: 5px;
  background: url("assets/art-mark-arrow.svg") center / contain no-repeat;
  opacity: 1;
  content: "";
}

.object-composition .art-mark small,
.object-composition .art-mark-logo,
.object-composition .art-mark em {
  position: absolute;
  margin: 0;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.object-composition .art-mark small {
  left: 17px;
  font-family: var(--serif-en);
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
}

.object-composition .art-mark small:first-child {
  top: 19px;
  font-weight: 700;
}

.object-composition .art-mark small:nth-child(2) {
  top: 32px;
}

.object-composition .art-mark-logo {
  top: 59px;
  left: 17px;
  width: 84px;
  height: auto;
}

.object-composition .art-mark em {
  top: 119px;
  left: 60px;
  font-family: var(--serif-en);
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.philosophy.is-visible .object-composition .lacquer-detail {
  animation: lacquer-card-enter-immediate 1s cubic-bezier(0.22, 1, 0.36, 1) 100ms forwards;
}

.philosophy.is-visible .object-composition .calligraphy-media {
  animation: calligraphy-card-enter 1s cubic-bezier(0.22, 1, 0.36, 1) 100ms forwards;
}

@keyframes lacquer-card-enter-immediate {
  from {
    opacity: 0;
    transform: translateX(72px) rotate(0deg);
  }

  to {
    opacity: 1;
    transform: translateX(0) rotate(14.37deg);
  }
}

@keyframes calligraphy-card-enter {
  from {
    opacity: 0;
    transform: translateX(48px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 620px) {
  .object-composition .calligraphy-media {
    top: 58%;
    left: 63%;
    width: 20%;
    height: auto;
    aspect-ratio: 11 / 13;
  }

  .object-composition .art-mark::before {
    top: 96px;
    left: 13px;
    width: 25px;
  }

  .object-composition .art-mark::after {
    top: 15px;
    left: 75px;
    width: 4px;
    height: 4px;
  }

  .object-composition .art-mark small {
    left: 13px;
    font-size: 10px;
  }

  .object-composition .art-mark small:first-child {
    top: 15px;
  }

  .object-composition .art-mark small:nth-child(2) {
    top: 25px;
  }

  .object-composition .art-mark-logo {
    top: 46px;
    left: 13px;
    width: 66px;
  }

  .object-composition .art-mark em {
    top: 93px;
    left: 47px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .philosophy.is-visible .object-composition .lacquer-detail {
    opacity: 1;
    transform: translateX(0) rotate(14.37deg);
    animation: none;
  }

  .philosophy .object-composition .calligraphy-media {
    opacity: 1;
    transform: translateX(0);
    animation: none;
  }
}


/* ===== styles.lacquer-motion.css ===== */
/*
 * The lacquer card enters upright first, then turns clockwise.
 * Keeping the entrance and rotation in separate keyframe phases prevents
 * the card from looking tilted while it fades in.
 */
.philosophy.is-visible .object-composition .lacquer-detail {
  animation: lacquer-card-enter-45 1.45s cubic-bezier(0.22, 1, 0.36, 1) 100ms forwards;
}

@keyframes lacquer-card-enter-45 {
  0% {
    opacity: 0;
    transform: translateX(72px) rotate(0deg);
  }

  58% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }

  68% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(14.37deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .philosophy.is-visible .object-composition .lacquer-detail {
    opacity: 1;
    transform: translateX(0) rotate(14.37deg);
    animation: none;
  }
}


/* ===== styles.master-motion.css ===== */
/* Keep the rotated lacquer card tucked behind the front image. */
@keyframes lacquer-card-enter-45 {
  0% {
    opacity: 0;
    transform: translateX(72px) rotate(0deg);
  }

  58% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }

  68% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(14.37deg);
  }
}

.site-header {
  --scroll-progress: 0;
  position: fixed;
}

.site-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  transform: scaleX(var(--scroll-progress));
  transform-origin: left center;
  background: #fdf1d8;
  content: "";
  pointer-events: none;
  will-change: transform;
}

@media (min-width: 701px) {
  .site-header .private-viewing {
    width: 247px;
    height: 39px;
    min-height: 39px;
    padding: 14px;
    border: 0;
    font-family: "Libre Bodoni", Georgia, serif;
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.45px;
    white-space: nowrap;
    leading-trim: both;
    text-edge: cap;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

.master-slides-viewport {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 698px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.master-slides-viewport.is-dragging {
  cursor: grabbing;
}

.master-slides {
  width: 100%;
  height: 698px;
  display: flex;
  align-items: stretch;
  gap: 20px;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.master-slides.is-dragging {
  transition: none;
}

.master-slides .master-photo,
.master-slides .master-gradient,
.master-placeholder {
  position: relative;
  top: auto;
  left: auto;
  height: 698px;
  flex-shrink: 0;
}

.master-slides .master-photo {
  width: 519px;
  flex-basis: 519px;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.master-slides .master-gradient,
.master-placeholder {
  width: 520px;
  flex-basis: 520px;
}

.master-placeholder {
  background: #d9d9d9;
}

.master-stage .timeline-track::after {
  right: auto;
  width: 100%;
  transform: scaleX(var(--timeline-progress, 0));
  transform-origin: left center;
}

.carousel-controls button[data-direction="next"] img {
  transform: rotate(180deg);
}

@media (max-width: 620px) {
  .master-slides-viewport,
  .master-slides {
    height: 580px;
  }

  .master-slides .master-photo,
  .master-slides .master-gradient,
  .master-placeholder {
    width: 100%;
    height: 580px;
    flex-basis: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .philosophy.is-visible .object-composition .lacquer-detail {
    opacity: 1;
    transform: translateX(0) rotate(14.37deg);
    animation: none;
  }

  .master-slides {
    transition: none;
  }
}


/* ===== styles.typography.css ===== */
.masters-copy .body-copy {
  color: rgba(255, 255, 255, 0.75);
  leading-trim: both;
  text-edge: cap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  font-family: "Noto Serif KR", "Batang", serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 23px;
  letter-spacing: -0.48px;
}


/* ===== styles.css ===== */
.stat:last-child::after {
  width: 16.5px;
  height: 7.36396px;
  flex: 0 0 16.5px;
  background: url("assets/hero-philosophy-arrow.svg") center / 100% 100% no-repeat;
  content: "";
  animation: philosophy-arrow-nudge 1.4s ease-in-out infinite;
  will-change: transform;
}

.stat:last-child:hover::after,
.stat:last-child:focus-visible::after {
  animation-duration: 0.75s;
}

@keyframes philosophy-arrow-nudge {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stat:last-child::after {
    transform: none;
    animation: none;
  }
}


/* ===== styles.redesign.css ===== */
:root {
  --bodoni: "Libre Bodoni", "Cormorant Infant", Georgia, serif;
  --content-max: 1600px;
}

.side-rail {
  height: 439px;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.rail-current,
.rail-name,
.rail-progress {
  display: none;
}

.rail-links {
  position: absolute;
  top: 27px;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rail-links a {
  position: relative;
  flex: 0 0 36px;
  width: 100%;
  height: 36px;
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  transition:
    flex-basis 400ms ease,
    height 400ms ease,
    color 250ms ease;
}

.rail-links a.is-active {
  flex-basis: 160px;
  height: 160px;
}

.rail-links a span {
  display: block;
  opacity: 1;
}

.rail-links a::before {
  display: block;
  top: 19px;
  left: 50%;
  width: 1px;
  height: 7px;
  transform: translateX(-50%);
  transition:
    top 400ms ease,
    height 400ms ease,
    color 250ms ease;
}

.rail-links a.is-active::before {
  top: 111px;
  height: 39px;
  background: #fff;
}

.rail-links a::after {
  position: absolute;
  top: 58.5px;
  left: 50%;
  width: 85px;
  height: 10px;
  transform: translate(-50%, -50%) rotate(90deg);
  font-family: var(--serif-en);
  font-size: 16px;
  font-weight: 500;
  line-height: 10px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  content: attr(data-name);
  transition: opacity 200ms ease 100ms;
}

.rail-links a.is-active::after {
  opacity: 1;
}

.rail-links a:last-child::before {
  display: none;
}

.masters {
  min-height: 944px;
}

.masters-copy h2 span,
.masters-copy h2 strong {
  font-weight: 300;
}

.masters-copy h2 strong {
  font-weight: 700;
}

.masters-title-mobile,
.masters-body-mobile {
  display: none;
}

@media (min-width: 1441px) {
  .masters-copy {
    top: 267px;
    width: 578px;
  }

  .masters-copy .masters-title-desktop {
    width: 578px;
    font-size: 53px;
    font-weight: 500;
    line-height: 72px;
    letter-spacing: -5.83px;
    white-space: nowrap;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  .masters-title-desktop .masters-title-line {
    display: block;
  }

  .masters-title-desktop .masters-title-line-light {
    font-weight: 300;
  }

  .masters-title-desktop .masters-title-line-medium,
  .masters-title-desktop .masters-title-line-medium strong {
    font-weight: 500;
  }

  .masters-copy .vertical-rule {
    margin: 52px 0 28px 44px;
  }

  .masters-copy .lead {
    font-size: 30px;
    font-weight: 700;
    line-height: 27px;
    letter-spacing: -2.1px;
    white-space: nowrap;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  .masters-copy .body-copy.masters-body-desktop {
    width: 417px;
    margin-top: 37px;
    font-size: 22px;
    line-height: 31px;
    letter-spacing: -0.66px;
    white-space: nowrap;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  .masters-copy .master-thumb-nav {
    top: 472px;
  }
}

.masters-copy .vertical-rule {
  position: relative;
  background: transparent;
}

.masters-copy .vertical-rule img {
  display: block;
  width: 1px;
  height: 107px;
  max-width: none;
}

.master-thumb-nav {
  position: absolute;
  top: 573px;
  left: 0;
  display: flex;
  gap: 5px;
}

.master-thumb-nav button {
  width: 58px;
  height: 58px;
  padding: 0;
  overflow: hidden;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  opacity: 0.72;
}

.master-thumb-nav button.is-active {
  border: 2px solid var(--ivory);
  opacity: 1;
}

.master-thumb-nav img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.master-stage {
  top: 113px;
  height: 730px;
  overflow: visible;
}

.master-stage .master-slides-viewport {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 698px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

.master-stage .master-slides {
  width: max-content;
  height: 698px;
  display: flex;
  gap: 20px;
  transform: translate3d(0, 0, 0);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.master-stage .master-slides.is-dragging {
  transition: none;
}

.master-slide {
  width: 519px;
  height: 698px;
  flex: 0 0 519px;
  margin: 0;
  overflow: hidden;
  background: #d9d9d9;
  opacity: 0.4;
  transition: opacity 500ms ease;
}

.master-slide.is-active {
  opacity: 1;
}

.master-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.master-nav {
  position: absolute;
  z-index: 5;
  top: 322px;
  width: 54px;
  height: 54px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  cursor: pointer;
}

.master-nav img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.master-prev {
  left: -29px;
}

.master-next {
  left: 492px;
}

.master-nav:focus-visible {
  outline: 2px solid var(--ivory);
  outline-offset: 3px;
}

.master-caption {
  top: 574px;
}

.master-name span {
  order: 1;
}

.master-timeline {
  left: 7px;
}

.master-stage .timeline-track::after {
  width: 100%;
  transform: scaleX(var(--timeline-progress, 0));
  transform-origin: left center;
}

.discipline {
  position: relative;
  overflow: hidden;
}

.discipline .craft-layout {
  min-height: 854px;
  grid-template-columns: 60.16% 39.84%;
}

.discipline .craft-visual,
.discipline .craft-panel {
  min-height: 854px;
}

.discipline-hero {
  width: 100%;
  height: 854px;
  object-fit: cover;
  transition: opacity 220ms ease;
}

.discipline-hero.is-changing {
  opacity: 0.35;
}

.discipline-controls {
  position: absolute;
  right: 6%;
  bottom: 49px;
  left: 14.2%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.discipline-controls > button {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 50%;
  background: transparent;
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow:
    inset 5px -5px 10px rgba(255, 255, 255, 0.08),
    inset -5px 5px 10px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.discipline-controls > button img {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
}

.discipline-controls .gallery-prev {
  margin-left: auto;
}

.mini-timeline {
  width: 278px;
  height: 46px;
  flex: 0 0 278px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 60px;
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(7.5px);
  backdrop-filter: blur(7.5px);
  font-family: var(--bodoni);
  font-size: 15px;
}

.mini-timeline b,
.mini-timeline strong {
  font-weight: 700;
}

/*
 * 양옆 column 을 각각 2.5px / 2px 내렸으므로 트랙은 그 평균만큼 내려
 * 좌우 column 박스의 중심(25.25)에 맞춘다.
 */
.mini-timeline > span {
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.2);
  transform: translateY(2.25px);
}

.mini-timeline > span i {
  position: absolute;
  inset: 1px auto auto 0;
  width: 100%;
  height: 1px;
  transform: scaleX(var(--gallery-progress, 0));
  transform-origin: left;
  background: #fff;
}

/*
 * Figma 250:4813 / 250:4814 는 Cormorant Infant (TIME 만 Libre Bodoni).
 * 흐리게 처리는 opacity 가 아니라 color 알파로 해야 한다. em 에 opacity 를 주면
 * 자식인 01 도 같이 흐려져 흰색 100% 가 나오지 않는다.
 */
.mini-timeline em {
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--serif-en);
  font-style: normal;
  font-weight: 500;
}

.mini-timeline em strong {
  color: #fff;
  font-weight: 700;
}

/*
 * Figma 는 텍스트를 cap 박스 기준으로 놓는다(TIME cap top 18, pill 46px).
 * CSS 는 line-box 를 중앙 정렬하므로 폰트마다 어긋난다.
 * 두 글자를 baseline 30 에 맞춰 TIME cap top 이 18 이 되게 보정한다.
 */
.mini-timeline b {
  transform: translateY(2.5px);
}

.mini-timeline em {
  transform: translateY(2px);
}

.gallery-thumbs {
  display: flex;
  gap: 10px;
}

.gallery-thumbs button {
  width: 73px;
  height: 73px;
  flex: 0 0 73px;
  padding: 0;
  overflow: hidden;
  border: 3px solid transparent;
  background: transparent;
  cursor: pointer;
  opacity: 0.9;
}

.gallery-thumbs button.is-active {
  border-color: #fff;
  opacity: 1;
}

.gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter 220ms ease, opacity 220ms ease;
}

.gallery-thumbs button.is-active img {
  filter: grayscale(0);
  opacity: 1;
}

@media (min-width: 1600px) {
  .master-stage {
    top: 114px;
    left: 48.59375%;
  }

  .master-stage .master-slides {
    gap: 22px;
  }
}

.discipline .craft-panel {
  position: relative;
  padding-top: 70px;
}

.discipline .craft-panel > :not(.craft-video-link) {
  width: 100%;
  max-width: 460px;
}

.craft-facts div {
  box-sizing: border-box;
  padding-right: 15px;
  padding-left: 15px;
}

.craft-video-link {
  position: relative;
  z-index: 2;
  bottom: auto;
  left: auto;
  width: 100%;
  max-width: 460px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 40px;
  padding: 0 24px 0 19px;
  border: 1px solid #bdad90;
  border-image: linear-gradient(
      90deg,
      #bdad90 0%,
      rgba(189, 173, 144, 0) 50%,
      #bdad90 100%
    )
    1;
  background: rgba(199, 153, 79, 0.42);
  backdrop-filter: blur(4px);
  color: #fff;
  font: 500 17px/30px var(--serif-ko);
  letter-spacing: -0.51px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    border-color 180ms ease;
}

.craft-video-link:hover,
.craft-video-link:focus-visible {
  border-color: #fdf1d8;
  outline: 0;
  background: rgba(199, 153, 79, 0.58);
}

.craft-video-link > img:first-child {
  width: 19px;
  height: 14px;
  flex: 0 0 19px;
}

.craft-video-link-arrow {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  margin-left: auto;
}

/* PC craft-panel — Figma 250:4739, 250:4756, 250:4761, 250:4783 */
@media (min-width: 701px) {
  .discipline .craft-panel {
    padding-top: 70px;
  }

  .craft-panel .maker-id {
    box-sizing: border-box;
    height: 100px;
    align-items: flex-start;
    padding-bottom: 0;
  }

  .craft-panel .maker-id img {
    margin-top: 2px;
  }

  .craft-panel .maker-id p {
    margin-top: 9px;
  }

  .craft-panel .maker-id strong,
  .craft-panel .maker-id span,
  .craft-panel blockquote,
  .craft-panel .craft-description,
  .craft-panel .craft-facts dt,
  .craft-panel .craft-facts dd {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  .craft-panel .maker-id strong {
    font-size: 33px;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0;
  }

  .craft-panel .maker-id span {
    margin-top: 16px;
    font-size: 21px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -1.05px;
  }

  .craft-panel blockquote {
    margin: 58px 0 45px;
    font-size: 33px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -2.64px;
    white-space: nowrap;
  }

  #najeon .craft-panel blockquote.only-desktop {
    font-weight: 600;
  }

  .craft-panel .craft-description {
    font-size: 20px;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: -0.6px;
    white-space: nowrap;
  }

  .craft-panel .craft-facts {
    height: 150px;
    margin-top: 60px;
    border-top: 0;
    border-bottom: 0;
    box-shadow:
      inset 0 2px 0 #fdf1d8,
      inset 0 -2px 0 #fdf1d8;
  }

  .craft-panel .craft-facts div {
    height: 50px;
    min-height: 50px;
    padding-right: 33px;
    padding-left: 33px;
  }

  .craft-panel .craft-facts dt {
    font-size: 14px;
    font-weight: 300;
    line-height: 23px;
    letter-spacing: -0.42px;
  }

  .craft-panel .craft-facts dd {
    font-size: 16px;
    font-weight: 600;
    line-height: 23px;
    letter-spacing: -0.48px;
  }
}

.process-grid {
  width: min(calc(100% - 48px), var(--content-max));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
  margin: 0 auto;
  padding: 99px 0 94px;
}

.process-card img,
.process-placeholder {
  width: 100%;
  aspect-ratio: 510 / 402;
  display: block;
  object-fit: cover;
  background: #838383;
}

.process-placeholder--brewing-03 {
  background-image: url("assets/brewing-process-03.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.craft .process-card:nth-child(3) img {
  transform: scaleX(-1);
}

.process-label {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 45px 20px 0;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--bodoni);
  font-size: 17px;
  font-style: italic;
  line-height: 30px;
}

.process-label i {
  width: 27px;
  height: 1px;
  background: linear-gradient(90deg, #fff 0%, rgba(153, 153, 153, 0) 100%);
}

.process-label em {
  font-weight: 500;
}

.process-card h3 {
  margin: 8px 20px 0;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.08em;
  line-height: 1.25;
}

.process-card h3 b {
  color: var(--ivory);
}

.process-card > p:last-child {
  margin: 20px 20px 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 17px;
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 27px;
}

/* PC process-card — Figma 250:4609–250:4628 */
@media (min-width: 1201px) {
  .process-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 35px;
    padding-top: 99px;
    padding-bottom: 84px;
  }

  .process-label {
    height: 13px;
    gap: 11px;
    margin: 52px 20px 0;
    font-size: clamp(15px, 0.885417vw, 17px);
    line-height: 30px;
    letter-spacing: -0.51px;
  }

  .process-label > span,
  .process-label em,
  .process-card h3,
  .process-card > p:last-child {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  .process-label i {
    margin-left: 4px;
  }

  .process-card h3 {
    margin: 26px 20px 0;
    font-size: clamp(28px, 1.770833vw, 34px);
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.08em;
  }

  .process-card > p:last-child {
    margin: 37px 20px 0;
    font-size: clamp(17px, 1.09375vw, 21px);
    font-weight: 300;
    line-height: clamp(27px, 1.770833vw, 34px);
    letter-spacing: -0.05em;
  }

  /* Figma PC copy: the explicit <br> is the only allowed line break. */
  #brewing .process-card:nth-child(2) > p:last-child .only-desktop {
    white-space: nowrap;
  }
}

.motif-gallery {
  position: relative;
  overflow: hidden;
  padding: 0 0 170px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 17%, #000 83%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 17%, #000 83%, transparent 100%);
}

.motif-heading {
  width: min(calc(100% - 320px), var(--content-max));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  margin: 0 auto 28px;
}

.motif-heading span {
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.24) 0%,
    rgba(153, 153, 153, 0) 100%
  );
}

.motif-heading p {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--bodoni);
  font-size: 17px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.motif-track {
  width: max-content;
  display: flex;
  gap: 0;
}

.motif-track-viewport {
  width: 100%;
  overflow: hidden;
  scrollbar-width: none;
}

.motif-track-viewport::-webkit-scrollbar {
  display: none;
}

.motif-track-viewport .motif-track {
  margin: 0;
  padding: 0;
}

.motif-track > :is(img, video, .motif-video-frame) {
  display: block;
  width: 390px;
  height: 226px;
  flex: 0 0 390px;
  margin-right: 13px;
  object-fit: cover;
  background: #0a0a0a;
}

.motif-video-frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.motif-video-frame > video {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

.object-showcase {
  min-height: 1127px;
  border-bottom: 0;
}

.object-showcase-inner {
  width: min(calc(100% - 96px), 1340px);
  min-height: 1127px;
  display: grid;
  grid-template-columns: 746px 499px;
  gap: 96px;
  align-items: start;
  margin: 0 auto;
}

.object-visual {
  position: relative;
  height: 963px;
  overflow: hidden;
  background: #050505;
  opacity: 1;
  transition: opacity 300ms ease-in-out;
  will-change: opacity;
}

.object-visual.is-changing {
  opacity: 0;
}

.object-visual img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.object-visual img.is-active {
  z-index: 1;
  opacity: 1;
}

.object-copy {
  padding-top: 36px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--bodoni);
  font-size: 17px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.26em;
}

.eyebrow::after {
  width: 27px;
  height: 1px;
  background: linear-gradient(90deg, #fff 0%, rgba(153, 153, 153, 0) 100%);
  content: "";
}

@media (min-width: 1201px) {
  /* Figma 286:547: THE OBJECT starts 20px inside the object-copy baseline. */
  .object-copy > .eyebrow {
    padding-left: 20px;
  }

  /*
   * Figma 286:549–552:
   * eyebrow cap bottom → title cap top 28px,
   * second title cap bottom → divider 57px.
   */
  .object-copy > .eyebrow > span,
  .object-copy > h2 {
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
  }

  .object-showcase .object-copy > h2 {
    margin: 28px 0 57px;
  }
}

.object-copy h2 {
  margin: 24px 0 25px;
  font-size: 53px;
  font-weight: 400;
  letter-spacing: -0.11em;
  line-height: 1.28;
}

.object-copy h2 span {
  display: block;
}

.object-copy h2 strong {
  font-weight: 700;
}

.object-copy hr {
  height: 1px;
  margin: 0;
  border: 0;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fff 55.29%,
    rgba(255, 255, 255, 0) 100%
  );
}

.object-switch {
  width: 316px;
  height: 76px;
  display: grid;
  grid-template-columns: 129px 1fr;
  gap: 10px;
  margin: 38px 0 42px;
  padding: 10px;
  border-radius: 9px;
  background: #191919;
}

.object-switch button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: rgba(255, 255, 255, 0.1);
  font-family: var(--bodoni);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.24em;
  cursor: pointer;
}

.object-switch button.is-active {
  border: 1px solid #fff;
  background: linear-gradient(#f7f7f7, #b9b9b9);
  color: #303030;
  box-shadow: 0 17px 47px rgba(0, 0, 0, 0.38);
}

.object-switch button.is-active span {
  display: inline-block;
  transform: translateY(2px);
  background: linear-gradient(180deg, #111 0%, #000 6%, #000 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  leading-trim: both;
  text-edge: cap;
  text-shadow: 0 3px 3px rgba(80, 80, 80, 0.55);
  font-family: "Libre Bodoni";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 90px;
  letter-spacing: 4.8px;
}

@supports not (leading-trim: both) {
  .object-switch button.is-active span {
    line-height: 1;
  }
}

.object-mode-copy {
  position: relative;
}

.object-mode-copy .eyebrow {
  display: inline-flex;
}

.mode-name {
  display: inline-block;
  margin: 0 0 0 8px;
  font-size: 16px;
  font-weight: 300;
}

.mode-description {
  margin: 20px 0 0;
  font-size: 23px;
  letter-spacing: -0.07em;
  line-height: 36px;
}

.object-thumbs {
  display: flex;
  gap: 10px;
  margin: 26px 0 38px;
}

.object-thumbs button {
  width: 74px;
  height: 74px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
}

.object-thumbs button.is-active {
  border-color: #fff;
}

.object-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.object-essence {
  padding-top: 38px;
}

.object-essence h3 {
  margin: 22px 0 20px;
  font-size: 34px;
  letter-spacing: -0.07em;
}

.object-essence > p:last-child {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 17px;
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 27px;
}

.viewing {
  position: relative;
  min-height: 1725px;
  overflow: hidden;
  background: #050505 url("assets/rarity-bg.webp") center top / 100% auto no-repeat;
}

.viewing-overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1514px;
  background: linear-gradient(177.624deg, rgba(0, 0, 0, 0.53) 3.36%, rgba(0, 0, 0, 0) 98.38%);
}

.rarity,
.viewing-contact,
.site-footer {
  position: relative;
  z-index: 1;
}

.rarity {
  width: min(calc(100% - 96px), 1302px);
  margin: 0 auto;
  padding-top: 296px;
  text-align: center;
}

.rarity-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--bodoni);
  font-size: 28px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.rarity-kicker strong {
  display: flex;
  align-items: center;
  margin-left: 13px;
  color: #fff;
}

.rarity-kicker strong::before {
  width: 1px;
  height: 14px;
  margin-right: 13px;
  background: rgba(255, 255, 255, 0.5);
  content: "";
}

.rarity h2 {
  margin: 9px 0 0;
  font-size: 53px;
  font-weight: 400;
  letter-spacing: -0.11em;
  line-height: 72px;
}

.rarity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 130px;
  text-align: left;
}

.rarity-grid article {
  min-height: 193px;
  padding: 45px 52px 30px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.rarity-grid p {
  margin: 0 0 13px;
  font-family: var(--bodoni);
  font-style: italic;
  line-height: 36px;
}

.rarity-grid strong {
  font-size: 34px;
  letter-spacing: 0.03em;
}

.rarity-grid em {
  margin-left: 8px;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.03em;
}

.rarity-grid span {
  color: rgba(255, 255, 255, 0.75);
  font-size: 17px;
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 27px;
  white-space: nowrap;
}

.viewing-contact {
  width: min(calc(100% - 96px), 1198px);
  display: grid;
  grid-template-columns: 1fr 587px;
  gap: 84px;
  margin: 150px auto 0;
}

.viewing-intro {
  padding-top: 38px;
}

.mini-brand,
.footer-brand {
  display: flex;
  align-items: center;
}

.mini-brand img {
  width: 125px;
  height: auto;
}

.footer-brand img {
  width: 139px;
  height: auto;
}

.viewing-intro h2 {
  margin: 30px 0 40px;
  font-size: 53px;
  font-weight: 400;
  letter-spacing: -0.11em;
  line-height: 67px;
}

.viewing-intro h2 strong {
  font-weight: 700;
}

.viewing-intro > p {
  margin: 0 0 30px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 17px;
  font-weight: 300;
  line-height: 27px;
}

/*
 * Figma 187:440. 컨테이너 기준 좌표:
 * dot 18 / 무극 전시회 41 / divider 135 / 주소 145 / arrow 283~292.5
 */
.showroom-link {
  width: 311px;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  overflow: hidden;
  border-radius: 4px;
  background: #161616;
  cursor: default;
}

/* 검은 원반 위의 초록 상태 점 (187:444 + 187:445) */
.showroom-status {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border-radius: 50%;
  background: #000;
}

.showroom-status::after {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: linear-gradient(180deg, #25e43e, #1a9d00);
  box-shadow: 0 0 8px rgba(34, 208, 44, 0.61);
  content: "";
}

.showroom-link strong {
  margin-left: 9px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 27px;
  opacity: 0.75;
}

.showroom-divider {
  width: 1px;
  height: 12px;
  flex: 0 0 1px;
  margin-left: 11px;
  background: #8b8b8b;
}

.showroom-address {
  margin-left: 9px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 27px;
  opacity: 0.75;
}

.showroom-arrow {
  width: 9.5px;
  height: 7.364px;
  margin-left: auto;
}

.viewing-form {
  padding-top: 2px;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 37px;
  margin-bottom: 31px;
}

.viewing-form label {
  display: flex;
  align-items: center;
}

.field-row label {
  height: 42px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  transition: border-color 200ms ease;
}

.field-row input {
  transform: translateY(-2px);
}

.field-row label:focus-within {
  border-bottom-color: #fdf1d8;
}

.field-row label > span {
  position: relative;
  min-width: 0;
  flex: 0 0 86px;
  padding-left: 10px;
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--bodoni);
  font-size: 13px;
  font-style: italic;
  letter-spacing: -0.05em;
}

.field-row label:nth-child(2) > span {
  flex-basis: 75px;
}

.field-row label > span::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 9px;
  background: rgba(255, 255, 255, 0.3);
  content: "";
  transform: translateY(-50%);
}

.viewing-form input {
  min-width: 0;
  padding-left: 13px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  font: 300 17px/27px var(--serif-ko);
  letter-spacing: -0.05em;
}

.viewing-form input {
  width: 100%;
}

.viewing-form ::placeholder {
  color: rgba(255, 255, 255, 0.34);
}

.viewing-form fieldset {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 31px;
  margin: 0 0 23px;
  padding: 0;
  border: 0;
}

.viewing-form legend {
  float: left;
  position: relative;
  flex: 0 0 96px;
  min-width: 96px;
  height: 31px;
  margin-right: 12px;
  padding: 2px 0 2px 10px;
  color: rgba(255, 255, 255, 0.34);
  font-size: 17px;
  line-height: 27px;
}

.viewing-form legend::after {
  position: absolute;
  top: 11px;
  right: 0;
  width: 1px;
  height: 9px;
  background: rgba(255, 255, 255, 0.3);
  content: "";
}

/*
 * user-select: none 이 없으면 글자 위에서 조금만 끌려도 텍스트 선택으로 처리돼
 * label 클릭이 무효화되고 라디오가 선택/포커스되지 않는다.
 */
.viewing-form fieldset label {
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/*
 * 라디오는 화면에서만 감추고 포커스는 살려둔다.
 * 이전에는 position:absolute + opacity:0 이라 .viewing-form input{width:100%}까지 받아
 * 62x13 투명 박스가 칩 글자 위에 겹쳐 있었다.
 */
.viewing-form fieldset input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* outline:0 때문에 포커스 위치가 보이지 않았다. 표시는 보이는 칩에 준다. */
.viewing-form fieldset input:focus-visible + span {
  outline: 2px solid var(--ivory);
  outline-offset: 2px;
}

.viewing-form fieldset span {
  width: 62px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #3c3c3c;
  color: #848484;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 27px;
  cursor: pointer;
}

.viewing-form fieldset input:checked + span {
  background: #fff;
  color: #000;
  font-weight: 700;
}

/* Figma 187:465 + 187:466. 박스 587x162, placeholder는 박스 기준 27,27.
   상단 16 = 27 − 테두리 1 − cap-height 보정 10.
   input은 콘텐츠 박스 안에서 세로 중앙 정렬되므로, 하단 여백으로 콘텐츠 박스를
   한 줄(162 − 2 − 16 − 117 = 27)로 좁혀 텍스트를 상단에 고정한다. */
.viewing-form .viewing-message {
  width: 100%;
  height: 162px;
  display: block;
  padding: 16px 26px 117px;
  border: 1px solid transparent;
  background:
    linear-gradient(#1f1f1f, #1f1f1f) padding-box,
    linear-gradient(
        135deg,
        #656565 0%,
        #0f0f0f 13.64%,
        #1c1c1c 43.88%,
        #000 50%,
        #1c1c1c 86.36%,
        #6b6b6b 96%,
        #656565 100%
      )
      border-box;
}

.submit-viewing {
  width: 100%;
  height: 47px;
  margin-top: 18px;
  border: 0;
  background: #fff;
  color: #111;
  font-family: var(--serif-ko);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 27px;
  cursor: pointer;
}

.form-status {
  position: fixed;
  z-index: 1200;
  top: auto;
  bottom: 40px;
  left: 50%;
  min-width: 280px;
  max-width: calc(100% - 40px);
  min-height: 48px;
  margin: 0;
  padding: 13px 20px;
  visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 4px;
  background: rgba(53, 51, 49, 0.97);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, 12px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 180ms ease;
}

.form-status.is-visible {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
}

.form-status.is-error {
  border-color: rgba(253, 241, 216, 0.78);
}

.form-status.is-success {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(53, 51, 49, 0.97);
}

/*
 * Figma 187:469(배경) + 187:470(콘텐츠). 아래 값은 모두 footer 상단 기준 좌표다.
 * 콘텐츠 47 / divider 127 / 2행 cap 155 / 바닥 217
 * Figma는 텍스트를 cap-height 기준으로, CSS는 line-box 기준으로 배치하므로
 * 텍스트에만 --footer-cap-fix 만큼 보정한다. 로고는 박스 기준이라 보정하지 않는다.
 */
.site-footer {
  --footer-cap-fix: -3px;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 217px;
  padding: 47px var(--page-pad) 0;
  background: #171717;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: -0.05em;
  line-height: 21px;
}

@media (min-width: 1201px) {
  .viewing .site-footer {
    top: 1514px;
    bottom: auto;
  }
}

.footer-top {
  display: flex;
  align-items: flex-start;
}

.footer-top .footer-brand {
  align-items: flex-start;
  margin-right: auto;
}


.footer-desk {
  margin: var(--footer-cap-fix) 0 0;
}

.footer-notice {
  margin: var(--footer-cap-fix) 0 0 40px;
}

/* divider 127 = 1행 하단 92 + 35, 그 아래 21px 지점에서 2행 cap이 155에 온다 */
.footer-bottom {
  display: flex;
  align-items: baseline;
  margin-top: 35px;
  padding-top: 21px;
  border-top: 1px solid #444;
}

/* Figma는 2행 각 항목을 절대 배치한다(© 0 / tagline 268 / protocol 우측 정렬) */
.footer-copyright {
  width: 268px;
  flex: 0 0 268px;
  margin: 0;
}

.footer-tagline {
  margin: 0;
}

.footer-protocol {
  margin: 0 0 0 auto;
}

@media (max-width: 1440px) {
  .master-stage {
    left: 51%;
  }

  .discipline-controls {
    left: 6%;
  }

  .mini-timeline {
    width: 230px;
    flex-basis: 230px;
  }

  .gallery-thumbs {
    gap: 6px;
  }

  .gallery-thumbs button {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }

  .object-showcase-inner {
    grid-template-columns: minmax(520px, 746px) minmax(430px, 499px);
    gap: 5vw;
  }

  .site-footer {
    padding-right: 70px;
    padding-left: 70px;
  }
}

@media (max-width: 1200px) {
  .masters {
    min-height: 0;
    padding-bottom: 0;
  }

  .masters-copy,
  .master-stage {
    position: relative;
    top: auto;
    left: auto;
  }

  .masters-copy {
    width: 100%;
  }

  .master-thumb-nav {
    position: static;
    margin-top: 28px;
  }

  .master-stage {
    width: calc(100% + var(--page-pad));
    height: 730px;
    margin-top: 60px;
  }

  .master-slide {
    width: min(519px, 74vw);
    flex-basis: min(519px, 74vw);
  }

  .master-next {
    left: calc(min(519px, 74vw) - 27px);
  }

  .discipline .craft-layout {
    grid-template-columns: 1fr;
  }

  .discipline .craft-visual,
  .discipline .craft-panel {
    min-height: 0;
  }

  .discipline-hero {
    height: min(78vw, 760px);
  }

  .discipline .craft-panel {
    padding: 84px var(--page-pad);
  }

  .process-grid {
    grid-template-columns: 1fr;
    gap: 80px;
    padding-right: var(--page-pad);
    padding-left: var(--page-pad);
  }

  .process-card {
    max-width: 760px;
    margin: 0 auto;
  }

  .motif-heading {
    width: calc(100% - (var(--page-pad) * 2));
  }

  .motif-gallery {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .object-showcase {
    padding: 90px var(--page-pad);
  }

  .object-showcase-inner {
    width: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 70px;
  }

  .object-visual {
    width: min(746px, 100%);
    height: auto;
    aspect-ratio: 746 / 963;
    margin: 0 auto;
  }

  .object-copy {
    width: min(640px, 100%);
    margin: 0 auto;
    padding-top: 0;
  }

  .viewing {
    min-height: 0;
    padding-bottom: 217px;
  }

  .viewing-overlay {
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
  }

  .rarity {
    padding-top: 190px;
  }

  .rarity-grid {
    grid-template-columns: 1fr;
    max-width: 680px;
    margin-right: auto;
    margin-left: auto;
  }

  .viewing-contact {
    grid-template-columns: 1fr;
    margin-bottom: 120px;
  }

  .viewing-intro,
  .viewing-form {
    max-width: 650px;
    margin: 0 auto;
  }

  .viewing-intro {
    padding-top: 0;
  }

  .viewing-form {
    width: 100%;
  }

  .site-footer {
    height: auto;
    padding: 40px var(--page-pad);
  }

  .footer-top {
    flex-wrap: wrap;
    gap: 24px 40px;
  }

  .footer-top .footer-brand {
    flex-basis: 100%;
    margin-right: 0;
  }

  .footer-notice {
    margin-left: 0;
  }

  .footer-bottom {
    flex-wrap: wrap;
    gap: 8px 40px;
    margin-top: 28px;
    padding-top: 20px;
  }

  .footer-copyright {
    width: auto;
    flex-basis: auto;
  }

  .footer-protocol {
    margin-left: 0;
  }
}

@media (max-width: 620px) {
  .masters-copy .vertical-rule img {
    height: 72px;
  }
}

.stat-detail {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.stat-index {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--serif-en);
  font-size: 20px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 2.2px;
  line-height: 1;
}

.stat-current {
  color: #fff;
}

@media (min-width: 701px) {
  .hero-stats .stat {
    padding-left: clamp(28px, 3.90625vw, 75px);
  }

  .hero-stats .stat:first-child {
    padding-left: clamp(28px, 7.2396vw, 139px);
  }

  .hero-stats .stat:last-child {
    gap: 0;
  }

  .hero-stats .stat-index {
    margin-right: 20px;
  }

  .hero-stats .stat:last-child::after {
    margin-left: 23px;
  }
}

@media (max-width: 700px) {
  .side-rail {
    display: none;
  }

  .hero-stats {
    right: 14px;
    bottom: 14px;
    left: 14px;
    width: auto;
    height: 152px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    background: rgba(5, 5, 5, 0.34);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
  }

  .hero-content {
    height: calc(100% - 166px);
  }

  .stat {
    min-width: 0;
    min-height: 75px;
    padding: 13px 14px;
  }

  .stat-label {
    margin-bottom: 6px;
    font-size: 11px;
    line-height: 1;
  }

  .stat-value {
    overflow: hidden;
    font-size: 16px;
    line-height: 1.15;
    text-overflow: ellipsis;
  }

  .stat:last-child {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding-right: 42px;
  }

  .stat:last-child .stat-index {
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: 0.11em;
  }

  .stat:last-child .stat-detail .stat-label {
    display: none;
  }

  .stat:last-child::after {
    position: absolute;
    top: calc(50% - 4px);
    right: 14px;
  }

  .masters {
    padding-top: 90px;
  }

  .masters-copy h2 {
    font-size: 37px;
  }

  .masters-copy .lead {
    font-size: 22px;
  }

  .master-stage {
    width: calc(100% + (var(--page-pad) * 2));
    height: 615px;
    margin-left: calc(var(--page-pad) * -1);
  }

  .master-stage .master-slides-viewport,
  .master-stage .master-slides,
  .master-slide {
    height: 580px;
  }

  .master-slide {
    width: 100vw;
    flex-basis: 100vw;
  }

  .master-next {
    right: 12px;
    left: auto;
  }

  .master-prev {
    left: 12px;
  }

  .master-nav {
    top: 263px;
  }

  .master-caption {
    top: 433px;
    left: 22px;
    width: calc(100% - 44px);
  }

  .master-timeline {
    left: 22px;
    width: calc(100% - 44px);
  }

  .discipline-controls {
    right: 14px;
    bottom: 18px;
    left: 14px;
    gap: 5px;
  }

  .mini-timeline {
    display: none;
  }

  .discipline-controls .gallery-prev {
    margin-left: 0;
  }

  .gallery-thumbs {
    min-width: 0;
    flex: 1;
  }

  .gallery-thumbs button {
    width: calc((100% - 16px) / 5);
    height: auto;
    flex: 1 1 0;
    aspect-ratio: 1;
  }

  .discipline-hero {
    height: 440px;
  }

  .discipline .craft-panel {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .process-grid {
    width: 100%;
    gap: 65px;
    padding: 70px var(--page-pad) 80px;
  }

  .process-label {
    margin-top: 28px;
  }

  .process-card h3 {
    font-size: 28px;
  }

  .process-card > p:last-child {
    font-size: 15px;
    line-height: 25px;
  }

  .motif-gallery {
    padding-bottom: 78px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  }

  .motif-heading {
    width: calc(100% - 44px);
    gap: 10px;
    margin-bottom: 22px;
  }

  .motif-heading p {
    font-size: 13px;
    white-space: nowrap;
  }

  .motif-track > :is(img, video, .motif-video-frame) {
    width: min(78vw, 304px);
    height: auto;
    flex-basis: min(78vw, 304px);
    aspect-ratio: 390 / 226;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  }

  .object-showcase {
    padding-top: 70px;
    padding-bottom: 80px;
  }

  .object-copy h2 {
    font-size: 38px;
  }

  .object-switch {
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }

  .mode-description {
    font-size: 18px;
    line-height: 31px;
  }

  .object-essence h3 {
    font-size: 27px;
  }

  .rarity {
    width: calc(100% - 44px);
    padding-top: 120px;
  }

  .rarity h2 {
    font-size: 39px;
    line-height: 56px;
  }

  .rarity-grid {
    margin-top: 80px;
  }

  .rarity-grid article {
    min-height: 170px;
    padding: 35px 28px;
  }

  .rarity-grid span {
    white-space: normal;
  }

  .viewing-contact {
    width: calc(100% - 44px);
    margin-top: 100px;
  }

  .viewing-intro h2 {
    font-size: 38px;
    line-height: 54px;
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .viewing-form fieldset {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px 7px;
    height: auto;
  }

  .viewing-form legend {
    flex: 0 0 100%;
    min-width: 100%;
    width: 100%;
    height: 31px;
    margin-right: 0;
  }

  .viewing-form fieldset label {
    min-width: 0;
    flex: 1 1 calc((100% - 21px) / 4);
  }

  .viewing-form fieldset span {
    width: 100%;
  }

  .site-footer {
    position: relative;
    height: auto;
    margin-top: 100px;
    padding-top: 44px;
    padding-bottom: 44px;
  }

  .footer-top,
  .footer-bottom {
    flex-direction: column;
    gap: 20px;
  }

  .footer-bottom {
    gap: 8px;
  }

  .viewing {
    padding-bottom: 0;
    background-color: #050505;
    background-image: url(assets/rarity-bg.webp);
    background-position: 54% top;
    background-size: auto 1100px;
    background-repeat: no-repeat;
  }

  .viewing-overlay {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    height: 1100px;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.28) 0%,
      rgba(0, 0, 0, 0.16) 40%,
      rgba(5, 5, 5, 0.72) 76%,
      #050505 100%
    );
  }
}

/* Figma master cards: 229:104, 229:118, 229:132 */
.master-stage .master-slides {
  will-change: transform;
}

.master-stage .master-slides.is-loop-resetting {
  transition: none;
}

.master-slide {
  position: relative;
  box-sizing: border-box;
  border: 1px solid #000;
}

.master-slide::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.1) 64.971%,
    rgba(0, 0, 0, 0.44) 84.675%,
    rgba(0, 0, 0, 0.62) 100%
  );
  content: "";
}

.detail-link {
  box-sizing: border-box;
  border: 1px solid #bdad90;
  border-image: linear-gradient(
      90deg,
      #bdad90 0%,
      rgba(189, 173, 144, 0) 50%,
      #bdad90 100%
    )
    1;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.detail-link-arrow {
  width: 11.5px;
  height: 7.364px;
  display: block;
  flex: 0 0 11.5px;
  background: url("assets/master-detail-arrow.svg") center / 100% 100% no-repeat;
}

.detail-link small {
  gap: 7px;
}

/* Hero copy sequence: the logo remains visible while the supporting copy reveals in order. */
.hero-content {
  justify-content: flex-end;
  padding-bottom: 280px;
}

.hero-kicker,
.hero-rule,
.hero-description {
  opacity: 0;
}

.hero-kicker:first-child {
  animation: hero-copy-reveal 700ms cubic-bezier(0.22, 1, 0.36, 1) 350ms forwards;
}

.hero-rule {
  transform: scaleX(0);
  animation: hero-rule-reveal 600ms cubic-bezier(0.22, 1, 0.36, 1) 950ms forwards;
}

.hero-kicker + .hero-rule {
  transform-origin: right center;
}

.hero h1 + .hero-rule {
  transform-origin: left center;
}

.hero-kicker:last-child {
  animation: hero-copy-reveal 700ms cubic-bezier(0.22, 1, 0.36, 1) 1450ms forwards;
}

.hero-description {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  animation: hero-description-reveal 800ms ease 2050ms forwards;
}

.hero-description.only-desktop {
  width: 600px;
  max-width: 100%;
  letter-spacing: 0;
  white-space: nowrap;
}

@keyframes hero-copy-reveal {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes hero-rule-reveal {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes hero-description-reveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-logo-reveal-mobile {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(-5px);
  }
}

@media (max-width: 700px) {
  .hero-title-row h1 img {
    opacity: 0;
    animation: hero-logo-reveal-mobile 700ms cubic-bezier(0.22, 1, 0.36, 1)
      1350ms forwards;
  }
}

@media (max-width: 1200px) {
  .hero-kicker:last-child {
    animation-delay: 1050ms;
  }

  .hero-description {
    animation-delay: 1650ms;
  }
}

/*
 * Section 04 scroll stacking over Section 03:
 * each section scrolls normally, pins only when its final viewport is reached,
 * and the following section paints over it.
 */
.craft-stack {
  position: relative;
}

@media (min-width: 0px) {
  #masters {
    position: sticky;
    top: var(--section-stack-top, 0px);
    background: var(--black);
    transform: translateZ(0);
    will-change: transform;
  }

  #masters {
    z-index: 10;
  }

  #najeon {
    z-index: 11;
    background: var(--black);
    isolation: isolate;
  }

  #ceramics {
    z-index: 12;
  }

  #brewing {
    position: relative;
    z-index: 13;
    background: var(--black);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title-row h1 img {
    opacity: 1;
    filter: none;
    animation: none;
  }

  .hero-kicker,
  .hero-rule,
  .hero-description {
    opacity: 1;
    filter: none;
    animation: none;
    transform: none;
  }

  #masters {
    position: relative;
    top: auto;
    transform: none;
    will-change: auto;
  }

  .master-stage .master-slides,
  .discipline-hero,
  .object-visual,
  .object-visual img {
    transition: none;
  }

  .motif-gallery {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: none;
  }

  .motif-gallery::-webkit-scrollbar {
    display: none;
  }

  .motif-track-viewport {
    overflow-x: auto;
  }

  .motif-track .is-scroll-copy {
    display: none;
  }
}

/* Second-round design: 9-section navigation and revised entrance stats. */
.side-rail {
  height: 475px;
}

.stat-action-label {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--serif-en);
  font-size: 17px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.11em;
  white-space: nowrap;
}

@media (min-width: 701px) {
  .hero-stats {
    height: 90px;
    grid-template-columns:
      clamp(160px, 26.0417vw, 500px)
      clamp(200px, 26.0417vw, 500px)
      minmax(0, 1fr);
  }

  .hero-stats .stat,
  .hero-stats .stat:first-child {
    padding-left: clamp(16px, calc(-15px + 4.43vw), 70px);
    border-bottom: 0;
  }

  .hero-stats .stat:nth-child(2) {
    border-right: 1px solid var(--line);
  }

  .hero-stats .stat:last-child {
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding-right: clamp(16px, calc(-15px + 4.43vw), 70px);
  }

  .hero-stats .stat-index {
    margin-right: clamp(8px, calc(1.68px + 0.902vw), 19px);
  }

  .hero-stats .stat:last-child::after {
    margin-left: clamp(8px, calc(5.12px + 0.41vw), 13px);
  }
}
/* Section 08 — NINETY NINE */
.rarity-section {
  position: relative;
  height: 1470px;
  min-height: 1470px;
  overflow: hidden;
  border-bottom: 0;
  background-color: #000;
  background-image: none;
  background-position: center top;
  background-size: 1920px 1470px;
  background-repeat: no-repeat;
}

.rarity-section.assets-ready {
  background-image: url("assets/rarity-bg-desktop.webp");
}

.rarity-section::before {
  display: none;
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 664px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.4) 27.4038%,
    rgba(255, 255, 255, 0) 100%
  );
  content: "";
}

.rarity-layout {
  position: relative;
  width: min(100%, 1920px);
  height: 1470px;
  min-height: 1470px;
  margin: 0 auto;
}

.rarity-section .rarity {
  position: absolute;
  z-index: 2;
  top: 233px;
  left: calc(50% - 670px);
  width: 526px;
  height: 380px;
  margin: 0;
  padding: 0;
  text-align: left;
}

.rarity-section .rarity-kicker {
  justify-content: flex-start;
  font-size: 28px;
  line-height: 21px;
}

.rarity-section .rarity h2 {
  /* Figma visible gap is 54px; subtract the title font's 8px top leading. */
  margin: 46px 0 0;
  font-size: 64px;
  line-height: 72px;
  letter-spacing: -7.04px;
}

.rarity-section .rarity h2 span {
  display: block;
  position: relative;
  width: max-content;
}

.rarity-section .rarity h2 span:last-child {
  margin-top: 22px;
  margin-left: 170px;
}

.rarity-section .rarity h2 span:last-child::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: -153px;
  width: 139px;
  height: 1px;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  transform: translateY(-50%);
}

.rarity-description {
  position: absolute;
  top: 279px;
  left: 14px;
  margin: 0;
  color: #fff;
  font-family: var(--serif-kr);
  font-size: 23px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -1.61px;
  white-space: nowrap;
}

.rarity-media {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rarity-video {
  position: absolute;
  z-index: 1;
  display: block;
  border: 0;
  background: #050505;
  object-fit: cover;
}

.rarity-video--primary {
  top: 200px;
  left: calc(50% + 59px);
  width: 644px;
  height: 846px;
}

.rarity-video--secondary {
  top: 709px;
  left: calc(50% - 656px);
  width: 432px;
  height: 544px;
}

.rarity-plaque {
  position: absolute;
  z-index: 2;
  top: 889px;
  left: calc(50% + 627px);
  width: 173px;
  height: 230.178px;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(16.127px);
  backdrop-filter: blur(16.127px);
  color: #fff;
  font-family: var(--bodoni);
}

.rarity-plaque span {
  position: absolute;
  top: 29.322px;
  left: 24.924px;
  display: block;
  font-size: 19.059px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.rarity-plaque b {
  position: absolute;
  top: 134.881px;
  left: 35.187px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  transform: rotate(90deg);
  transform-origin: top left;
}

.rarity-plaque-mark {
  position: absolute;
  top: 92.364px;
  left: 76.238px;
  width: 76.475px;
  height: 112.89px;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .rarity-video {
    animation: none;
  }
}

/* Legacy rarity cards are intentionally absent in the updated section. */
.rarity-section .rarity-grid {
  display: none;
}

.rarity-section .rarity-copy {
  font-size: 17px;
  display: none;
}

/* Section 09 starts with the new 1920×700 Figma background. */
.viewing {
  min-height: 917px;
  background-color: #050505;
  background-image: none;
  background-position: center top;
  background-size: 1920px 700px;
  background-repeat: no-repeat;
}

.viewing.assets-ready {
  background-image: url("assets/viewing-bg-v2.webp");
}

.viewing-overlay {
  display: none;
}

@media (min-width: 1201px) {
  /*
   * Figma 250:4463 / section 09 (1920 × 700)
   * contact x 361, y 166 / form x 972 / intro children y 204, 285, 434, 508.
   * 제목의 leading-trim 유무에 따라 아래 요소가 밀리지 않도록 PC에서는
   * 각 요소를 원본 좌표에 직접 고정한다.
   */
  .viewing-contact {
    position: absolute;
    top: 166px;
    left: 50%;
    width: min(calc(100% - 96px), 1198px);
    margin: 0;
    transform: translateX(-50%);
  }

  .viewing-intro {
    position: relative;
    min-height: 552px;
    padding-top: 0;
  }

  .viewing-intro .mini-brand {
    position: absolute;
    top: 38px;
    left: 0;
  }

  .viewing-intro h2 {
    position: absolute;
    top: 119px;
    left: 0;
    width: 449px;
    margin: 0;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
    white-space: nowrap;
  }

  .viewing-intro > .only-desktop {
    position: absolute;
    top: 268px;
    left: 0;
    width: 440px;
    margin: 0;
    white-space: nowrap;
  }

  .viewing-intro .showroom-link {
    position: absolute;
    top: 342px;
    left: 0;
  }

  .viewing .site-footer {
    top: 700px;
  }
}

@media (max-width: 1200px) {
  .rarity-section {
    width: 100%;
    height: 1136px;
    min-height: 1136px;
    padding: 0;
    background-position: center top;
    background-size: 375px 1136px;
  }

  .rarity-section.assets-ready {
    background-image: url("assets/rarity-bg-mobile.webp");
  }

  .rarity-section::before {
    right: 0;
    left: auto;
    width: 171px;
    background: linear-gradient(
      270deg,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.4) 27.4038%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .rarity-layout {
    width: 100%;
    max-width: none;
    height: 1136px;
    min-height: 1136px;
  }

  .rarity-section .rarity {
    position: absolute;
    top: 73px;
    left: 16px;
    width: 343px;
    height: 210px;
    margin: 0;
  }

  .rarity-section .rarity-kicker {
    font-size: 16px;
    line-height: 12px;
  }

  .rarity-kicker strong {
    margin-left: 10px;
    font-size: 16px;
  }

  .rarity-kicker strong::before {
    height: 12px;
    margin-right: 8px;
  }

  .rarity-section .rarity h2 {
    margin: 28px 0 0;
    font-size: 34px;
    line-height: 37.095px;
    letter-spacing: -3.74px;
  }

  .rarity-section .rarity h2 span:last-child {
    margin-top: 10.335px;
    margin-left: 85.623px;
  }

  .rarity-section .rarity h2 span:last-child::before {
    top: 50%;
    left: -85.614px;
    width: 71.614px;
    transform: translateY(-50%);
  }

  .rarity-description {
    top: 144px;
    left: 0;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -1.12px;
  }

  .rarity-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }

  .rarity-video--primary {
    top: 325px;
    left: 16px;
    width: 300px;
    height: 394px;
  }

  .rarity-video--secondary {
    top: 740px;
    left: 95px;
    width: 264px;
    height: 332px;
  }

  .rarity-plaque {
    top: 350px;
    right: auto;
    left: 258.287px;
    width: 100.713px;
    height: 134px;
    padding: 0;
    -webkit-backdrop-filter: blur(9.389px);
    backdrop-filter: blur(9.389px);
  }

  .rarity-plaque span {
    top: 17.07px;
    left: 14.51px;
    font-size: 11px;
    line-height: 11.949px;
  }

  .rarity-plaque b {
    top: 75px;
    left: 20.484px;
    font-size: 8px;
  }

  .rarity-plaque-mark {
    top: 53.771px;
    left: 44.383px;
    width: 44.521px;
    height: 65.72px;
  }

  .viewing {
    min-height: 0;
    padding-bottom: 217px;
    background-position: center top;
    background-size: auto 700px;
  }

  .viewing-contact {
    margin-top: 120px;
  }

  .craft-video-link {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
    margin-top: 40px;
  }
}

/* Wide-mobile/tablet bridge: keep the reading order while using the wider canvas. */
@media (min-width: 376px) and (max-width: 1650px) {
  .rarity-section {
    --rarity-edge: clamp(16px, calc(8vw - 14px), 64px);
    --rarity-copy-top: clamp(73px, calc(2.15385vw + 64.923px), 80px);
    --rarity-primary-top: clamp(325px, calc(26.15385vw + 226.923px), 410px);
    --rarity-primary-width: clamp(300px, calc(36.9231vw + 161.538px), 520px);
    --rarity-primary-height: clamp(394px, calc(48.48vw + 212.3px), 682.73px);
    --rarity-secondary-width: clamp(264px, calc(17.8462vw + 197.077px), 390px);
    --rarity-secondary-height: clamp(332px, calc(22.6097vw + 247.214px), 491.1px);
    --rarity-video-gap: clamp(21px, calc(2.15385vw + 12.923px), 28px);
    --rarity-bottom-space: clamp(40px, calc(-7.38462vw + 91.692px), 64px);
    --rarity-plaque-top: clamp(350px, calc(28.3077vw + 243.846px), 442px);
    --rarity-plaque-width: clamp(100.713px, calc(9.0114vw + 66.92px), 130px);
    --rarity-plaque-height: clamp(134px, calc(12vw + 89px), 173px);
    --rarity-plaque-overlap: clamp(58.287px, calc(4.21938vw + 42.464px), 72px);
    --rarity-title-line-width: clamp(
      71.614px,
      max(calc(3.8111vw + 57.322px), 12vw),
      123px
    );
    height: calc(
      var(--rarity-primary-top) + var(--rarity-primary-height) + var(--rarity-video-gap) +
        var(--rarity-secondary-height) + var(--rarity-bottom-space)
    );
    min-height: 0;
    background-position: center top;
    background-size: cover;
  }

  .rarity-section.assets-ready {
    background-image: url("assets/rarity-bg-desktop.webp");
  }

  .rarity-section::before {
    right: auto;
    left: 0;
    width: min(55vw, 500px);
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.4) 27.4038%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .rarity-layout {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
  }

  .rarity-section .rarity {
    top: var(--rarity-copy-top);
    left: var(--rarity-edge);
    width: calc(100% - var(--rarity-edge) - var(--rarity-edge));
    height: clamp(210px, calc(15.3846vw + 152.308px), 260px);
  }

  .rarity-section .rarity-kicker {
    font-size: clamp(16px, calc(1.23077vw + 11.385px), 20px);
    line-height: clamp(12px, calc(1.23077vw + 7.385px), 16px);
  }

  .rarity-kicker strong {
    margin-left: clamp(10px, calc(0.30769vw + 8.846px), 11px);
    font-size: clamp(16px, calc(1.23077vw + 11.385px), 20px);
  }

  .rarity-kicker strong::before {
    height: clamp(12px, calc(0.61538vw + 9.692px), 14px);
    margin-right: clamp(8px, calc(0.61538vw + 5.692px), 10px);
  }

  .rarity-section .rarity h2 {
    margin-top: clamp(28px, calc(3.07692vw + 16.462px), 38px);
    font-size: clamp(34px, max(calc(1.23077vw + 29.385px), 5vw), 54px);
    line-height: clamp(37.095px, max(calc(2.03231vw + 29.474px), 5.75vw), 62.1px);
    letter-spacing: -0.1em;
  }

  .rarity-section .rarity h2 span:last-child {
    margin-top: clamp(10.335px, calc(0.51231vw + 8.414px), 12px);
    margin-left: clamp(
      85.623px,
      max(calc(8.116vw + 55.188px), 16vw),
      164px
    );
  }

  .rarity-section .rarity h2 span:last-child::before {
    top: 50%;
    left: calc(0px - var(--rarity-title-line-width) - 14px);
    width: var(--rarity-title-line-width);
    transform: translateY(-50%);
  }

  .rarity-description {
    top: clamp(144px, calc(18.4615vw + 74.769px), 204px);
    left: 0;
    font-size: clamp(16px, calc(0.61538vw + 13.692px), 18px);
    line-height: clamp(26px, calc(1.23077vw + 21.385px), 30px);
    letter-spacing: -0.07em;
  }

  .rarity-video--primary {
    top: var(--rarity-primary-top);
    right: auto;
    left: var(--rarity-edge);
    width: var(--rarity-primary-width);
    height: auto;
    aspect-ratio: 644 / 846;
  }

  .rarity-video--secondary {
    top: calc(
      var(--rarity-primary-top) + var(--rarity-primary-height) + var(--rarity-video-gap)
    );
    right: var(--rarity-edge);
    left: auto;
    width: var(--rarity-secondary-width);
    height: auto;
    aspect-ratio: 432 / 544;
  }

  .rarity-plaque {
    top: var(--rarity-plaque-top);
    right: auto;
    left: calc(
      var(--rarity-edge) + var(--rarity-primary-width) - var(--rarity-plaque-overlap)
    );
    width: var(--rarity-plaque-width);
    height: var(--rarity-plaque-height);
    -webkit-backdrop-filter: blur(clamp(9.389px, calc(0.80338vw + 6.376px), 12px));
    backdrop-filter: blur(clamp(9.389px, calc(0.80338vw + 6.376px), 12px));
  }

  .rarity-plaque span {
    top: clamp(17.07px, calc(1.51692vw + 11.381px), 22px);
    left: clamp(14.51px, calc(1.38154vw + 9.329px), 19px);
    font-size: clamp(11px, calc(0.92308vw + 7.538px), 14px);
    line-height: clamp(11.949px, calc(0.93877vw + 8.429px), 15px);
  }

  .rarity-plaque b {
    top: clamp(75px, calc(8vw + 45px), 101px);
    left: clamp(20.484px, calc(1.69723vw + 14.119px), 26px);
    font-size: clamp(8px, calc(0.61538vw + 5.692px), 10px);
  }

  .rarity-plaque-mark {
    top: clamp(53.771px, calc(4.68585vw + 36.199px), 69px);
    left: clamp(44.383px, calc(3.88215vw + 29.825px), 57px);
    width: clamp(44.521px, calc(3.99354vw + 29.545px), 57.5px);
    height: clamp(65.72px, calc(5.87077vw + 43.705px), 84.8px);
  }
}

@media (min-width: 376px) and (max-width: 700px) {
  .rarity-section.assets-ready {
    background-image: url("assets/rarity-bg-mobile.webp");
  }
}

@media (max-width: 700px) {
  .hero-stats .stat:last-child {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
  }

  .hero-stats .stat:last-child .stat-index {
    margin-right: 10px;
    margin-bottom: 0;
  }

  .stat-action-label {
    margin-left: auto;
    font-size: 11px;
  }

  .viewing-contact {
    margin-top: 80px;
  }

  .craft-video-link {
    height: 54px;
    padding-right: 18px;
    padding-left: 16px;
    font-size: 14px;
    letter-spacing: -0.42px;
  }
}
.only-mobile {
  display: none !important;
}


/* ===== styles.mobile.css ===== */
/* Mobile composition matched to Figma frame 250:6170 (375 px). */
@media (max-width: 700px) {
  .only-desktop {
    display: none !important;
  }

  .only-mobile {
    display: revert !important;
  }

  :root {
    --page-pad: 16px;
  }

  html,
  body {
    width: 100%;
    min-width: 320px;
  }

  .site-header {
    height: 56px;
    padding: 0 16px;
    border-bottom-color: rgba(255, 255, 255, 0.12);
    background: rgba(5, 5, 5, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .brand-logo {
    width: 73px;
    height: auto;
  }

  .header-actions {
    gap: 8px;
  }

  .site-header .private-viewing {
    flex: 0 0 134px;
    width: 134px;
    max-width: 134px;
    height: 30px;
    min-height: 30px;
    padding: 0 8px;
    font-family: "Libre Bodoni", Georgia, serif;
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.39px;
    white-space: nowrap;
  }

  .hero {
    width: 100%;
    height: 775px;
    min-height: 775px;
  }

  .hero-bg {
    object-position: center top;
  }

  .hero-shade {
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.08), rgba(5, 5, 5, 0.04) 58%, rgba(5, 5, 5, 0.42));
  }

  .hero-content {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
  }

  .hero-title-row {
    position: absolute;
    inset: 0;
    width: 100%;
    display: block;
  }

  .hero-kicker {
    position: absolute;
    left: 0;
    width: 100%;
    margin: 0;
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.1em;
    text-align: center;
  }

  .hero-kicker:first-child {
    top: 137px;
  }

  .hero-kicker:last-child {
    top: 164px;
  }

  .hero-title-row h1 {
    position: absolute;
    top: 243px;
    left: 50%;
    width: 169px;
    margin: 0;
    transform: translateX(-50%);
  }

  .hero-title-row h1 img {
    width: 100%;
    transform: translateY(-5px);
  }

  .hero-title-row > .hero-rule:first-of-type {
    position: absolute;
    top: 197px;
    left: 50%;
    width: 1px;
    height: 30px;
    display: block;
    background: linear-gradient(
      180deg,
      #fff 0%,
      rgba(255, 255, 255, 0) 100%
    );
    transform-origin: center top;
    animation: hero-mobile-rule-reveal 600ms cubic-bezier(0.22, 1, 0.36, 1) 950ms forwards;
  }

  .hero-title-row > .hero-rule:last-of-type {
    display: none;
  }

  @keyframes hero-mobile-rule-reveal {
    from {
      opacity: 0;
      transform: scaleY(0);
    }

    to {
      opacity: 1;
      transform: scaleY(1);
    }
  }

  .hero-description {
    position: absolute;
    top: 335px;
    left: 50%;
    width: 248px;
    max-width: none;
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: 21px;
    letter-spacing: -0.04em;
    white-space: nowrap;
    transform: translateX(-50%);
    animation-name: hero-description-reveal-mobile;
  }

  @keyframes hero-description-reveal-mobile {
    from {
      opacity: 0;
      transform: translate(-50%, 8px);
    }

    to {
      opacity: 1;
      transform: translate(-50%, 0);
    }
  }

  .hero-stats {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 187px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 63px 62px 62px;
    overflow: visible;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 0;
    background: rgba(217, 217, 217, 0.06);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: none;
  }

  .hero-stats .stat,
  .hero-stats .stat:first-child,
  .hero-stats .stat:last-child {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 20px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 0;
    background: transparent;
  }

  .hero-stats .stat:first-child {
    position: relative;
    border-bottom: 0;
  }

  .hero-stats .stat:first-child::after {
    position: absolute;
    right: 16px;
    bottom: 0;
    left: 16px;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    content: "";
    pointer-events: none;
  }

  .hero-stats .stat:not(:last-child) .stat-label {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-family: "Libre Bodoni", var(--serif-en);
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.54px;
    leading-trim: both;
    text-edge: cap;
  }

  .hero-stats .stat:not(:last-child) .stat-value {
    overflow: visible;
    color: #fdf1d8;
    font-family: "Libre Bodoni", var(--serif-en);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: right;
    text-overflow: clip;
    white-space: nowrap;
    leading-trim: both;
    text-edge: cap;
  }

  .hero-stats .stat:not(:last-child) .stat-value strong {
    font-size: 18px;
    font-weight: 600;
  }

  .hero-stats .stat:not(:last-child) .stat-unit {
    color: rgba(255, 255, 255, 0.7);
    font-family: "Libre Bodoni", var(--serif-en);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    leading-trim: both;
    text-edge: cap;
  }

  .hero-stats .stat:last-child {
    grid-column: auto;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    gap: 0;
    justify-content: initial;
    padding-right: 26px;
    border: 1px solid transparent;
    border-image: linear-gradient(
        90deg,
        #7b6655 0%,
        rgba(123, 102, 85, 0) 50%,
        #7b6655 100%
      )
      1;
    background: rgba(199, 153, 79, 0.16);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }

  .hero-stats .stat:last-child .stat-index {
    grid-row: 1;
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-family: "Libre Bodoni", var(--serif-en);
    font-size: 12px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.32px;
    leading-trim: both;
    text-edge: cap;
  }

  .hero-stats .stat:last-child .stat-action-label {
    grid-row: 1;
    grid-column: 2;
    margin: 0 0 0 6px;
    color: rgba(255, 255, 255, 0.68);
    font-family: "Libre Bodoni", var(--serif-en);
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.54px;
    leading-trim: both;
    text-edge: cap;
  }

  .hero-stats .stat:last-child .stat-value {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
    margin-right: 0;
    color: #fdf1d8;
    font-family: "Libre Bodoni", var(--serif-en);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: right;
    leading-trim: both;
    text-edge: cap;
  }

  .hero-stats .stat:last-child .stat-value strong {
    font-size: 18px;
    font-weight: 600;
  }

  .hero-stats .stat:last-child::after {
    position: static;
    width: 13px;
    height: 8px;
    display: block;
    grid-row: 1;
    grid-column: 4;
    margin: 0 0 0 9px;
    background: url("assets/hero-philosophy-arrow-mobile.svg") center / 13px 8px no-repeat;
    content: "";
  }

  .philosophy {
    width: 100%;
    height: 1007px;
    min-height: 1007px;
    display: block;
    padding: 0;
  }

  .philosophy-heading {
    position: absolute;
    top: 67px;
    left: 16px;
    width: 161px;
    text-align: left;
    transform: none;
  }

  .philosophy-subtitle {
    position: absolute;
    top: 147px;
    left: 16px;
    margin: 0;
    width: 163px;
    font-size: 26px;
    font-weight: 400;
    line-height: 35px;
    letter-spacing: -0.11em;
    text-align: left;
    transform: none;
  }

  .object-composition {
    position: absolute;
    top: 248px;
    left: 50%;
    width: min(375px, 100%);
    height: 373px;
    margin: 0;
    transform: translateX(-50%);
  }

  .object-composition .lacquer-detail {
    top: 0;
    left: 97.828px;
    width: 252.285px;
    height: 311.031px;
    transform-origin: 0 0;
  }

  .philosophy.is-visible .object-composition .lacquer-detail {
    animation-name: lacquer-card-enter-mobile;
  }

  @keyframes lacquer-card-enter-mobile {
    0% {
      opacity: 0;
      transform: translateX(48px) rotate(0deg);
    }

    58%,
    72% {
      opacity: 1;
      transform: translateX(0) rotate(0deg);
    }

    100% {
      opacity: 1;
      transform: translateX(0) rotate(7.093deg);
    }
  }

  .object-composition .whisky-object {
    top: 20px;
    left: 51px;
    width: 266px;
    height: 327px;
    padding: 0.822px;
  }

  .object-composition .calligraphy-media {
    top: 267px;
    right: 16px;
    left: auto;
    width: 90px;
    height: 106px;
    object-fit: cover;
  }

  .object-composition .art-mark {
    top: 58px;
    left: 16px;
    width: 98px;
    height: 120px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(9.045px);
    backdrop-filter: blur(9.045px);
  }

  .object-composition .art-mark::before {
    top: 101px;
    left: 14px;
    width: 23px;
    height: 1px;
  }

  .object-composition .art-mark::after {
    top: 15.589px;
    left: 79.588px;
    width: 5px;
    height: 5px;
    opacity: 1;
  }

  .object-composition .art-mark small {
    left: 15px;
    font-family: "Libre Bodoni", Georgia, serif;
    font-size: 10px;
    font-weight: 400;
    line-height: normal;
  }

  .object-composition .art-mark small:first-child {
    top: 15.289px;
    font-weight: 400;
  }

  .object-composition .art-mark small:nth-child(2) {
    top: 25.289px;
  }

  .object-composition .art-mark-logo {
    top: 49.616px;
    left: 14px;
    width: 70px;
    height: 26.156px;
    margin: 0;
  }

  .object-composition .art-mark em {
    top: 98.193px;
    left: 43px;
    margin: 0;
    font-family: "Libre Bodoni", Georgia, serif;
    font-size: 11px;
  }

  .philosophy-copy {
    position: absolute;
    top: 654px;
    left: 50%;
    width: 343px;
    max-width: calc(100% - 32px);
    margin: 0;
    transform: translateX(-50%);
  }

  .philosophy-copy h3 {
    position: relative;
    width: 100%;
    height: 129px;
    margin: 0;
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
  }

  .philosophy-copy h3 > .philosophy-lead {
    position: absolute;
    top: 0;
    left: 0;
    width: 236px;
    color: #fff;
    font-family: "Noto Serif KR", serif;
    font-size: 21px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -1.89px;
    white-space: nowrap;
  }

  .philosophy-copy .philosophy-message {
    position: absolute;
    top: 64px;
    left: 0;
    width: 255px;
    color: #fff;
    font-family: "Noto Serif KR", serif;
    font-size: 19px;
    font-weight: 200;
    line-height: 26px;
    letter-spacing: -0.57px;
    white-space: nowrap;
  }

  .philosophy-copy .philosophy-message b {
    font-weight: 700;
  }

  .philosophy-copy p {
    position: absolute;
    top: 163px;
    left: 0;
    width: 241px;
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    font-weight: 300;
    line-height: 23px;
    letter-spacing: -0.45px;
    white-space: nowrap;
  }

  .hero-description br,
  .philosophy-copy h3 br,
  .philosophy-copy p br,
  .craft-description br {
    display: block;
  }

  .object-specs {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 108px;
    margin-left: 0;
    height: 108px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 54px);
    padding: 0;
  }

  .object-spec {
    min-width: 0;
    min-height: 0;
    height: 54px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px !important;
  }

  .object-spec + .object-spec {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .object-spec small {
    margin: 0;
    font-size: 13px;
  }

  .object-spec span {
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
  }

  .masters {
    width: 100%;
    height: 845px;
    min-height: 845px;
    padding: 0;
  }

  .masters-copy {
    position: absolute;
    top: 63px;
    left: 16px;
    width: 343px;
  }

  .masters-title-desktop,
  .masters-body-desktop {
    display: none;
  }

  .masters-title-mobile,
  .masters-body-mobile {
    display: block;
  }

  .masters-copy h2 {
    width: 100%;
    height: auto;
    margin: 0;
    font-size: 30px;
    font-weight: 500;
    line-height: 45px;
    letter-spacing: -0.11em;
    white-space: nowrap;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  .masters-copy h2 span,
  .masters-copy h2 strong {
    font-weight: 500;
  }

  .masters-copy .vertical-rule {
    position: relative;
    top: auto;
    left: auto;
    width: 1px;
    height: 50px;
    margin: 23px 0 10px 12px;
  }

  .masters-copy .vertical-rule img {
    width: 1px;
    height: 50px;
  }

  .masters-copy .lead {
    position: static;
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 27px;
    letter-spacing: -0.07em;
    white-space: nowrap;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  .masters-copy .body-copy {
    position: static;
    width: 343px;
    margin: 20px 0 0;
    font-size: 15px;
    font-weight: 300;
    line-height: 22px;
    letter-spacing: -0.03em;
    white-space: nowrap;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }

  .masters-extra-copy,
  .master-thumb-nav {
    display: none;
  }

  .master-stage {
    position: absolute;
    top: 307px;
    left: 16px;
    width: calc(100% - 16px);
    height: 448px;
    margin: 0;
  }

  .master-stage .master-slides-viewport,
  .master-stage .master-slides,
  .master-slide {
    height: 390px;
  }

  .master-stage .master-slides-viewport {
    width: 100%;
  }

  .master-stage .master-slides {
    gap: 10px;
  }

  .master-slide {
    width: 290px;
    flex-basis: 290px;
  }

  .master-slide::after {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.1) 64.971%,
      rgba(0, 0, 0, 0.44) 78.983%,
      rgba(0, 0, 0, 0.62) 100%
    );
  }

  .master-caption {
    z-index: 4;
    top: 307px;
    left: 20px;
    width: 254px;
  }

  .master-name {
    gap: 0;
    margin-bottom: 7px;
    font-size: 15px;
    line-height: 18px;
  }

  .master-name span {
    font-weight: 500;
    letter-spacing: -0.75px;
  }

  .master-name::after {
    margin-right: 7px;
    margin-left: 10px;
  }

  .master-name strong {
    font-weight: 700;
    letter-spacing: 0;
  }

  .detail-link {
    position: relative;
    left: -2px;
    width: 254px;
    max-width: 254px;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding: 0 20px 0 15px;
    flex-wrap: nowrap;
    overflow: hidden;
    background: rgba(199, 153, 79, 0.42);
    font-size: 14px;
    white-space: nowrap;
  }

  .detail-link > span {
    min-width: 0;
    font-weight: 500;
    letter-spacing: -0.7px;
    line-height: normal;
    white-space: nowrap;
  }

  .detail-link small {
    gap: 12px;
    font-size: 0;
  }

  .detail-link small .detail-link-arrow {
    width: 11.5px;
    height: 7.364px;
    display: block;
    flex: 0 0 11.5px;
    background: url("assets/master-detail-arrow.svg") center / 100% 100% no-repeat;
  }

  .master-timeline {
    top: 405px;
    left: 0;
    width: calc(100% - 104px);
    height: 32px;
    grid-template-columns: 33px minmax(0, 1fr) 42px;
    gap: 10px;
  }

  .master-timeline > span:first-child {
    font-family: "Libre Bodoni", var(--serif-en);
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
  }

  .master-timeline .timeline-count {
    font-family: "Libre Bodoni", var(--serif-en);
    font-size: 14px;
    line-height: normal;
    text-align: right;
    white-space: nowrap;
  }

  .master-timeline .timeline-count strong {
    font-weight: 700;
  }

  .master-timeline .timeline-count span {
    font-weight: 400;
    opacity: 0.5;
  }

  .master-nav {
    top: 405px;
    width: 32px;
    height: 32px;
  }

  .master-nav picture,
  .master-nav img {
    display: block;
    width: 32px;
    height: 32px;
  }

  .master-prev {
    right: 56px;
    left: auto;
  }

  .master-next {
    right: 16px;
    left: auto;
  }

  .discipline {
    width: 100%;
    height: 2832px;
    min-height: 2832px;
  }

  .craft-bar {
    height: 49px;
    min-height: 49px;
    padding: 0 16px;
  }

  .craft-title,
  .craft-master-count {
    gap: 8px;
  }

  .craft-title {
    gap: 7px;
  }

  #ceramics .craft-title,
  #brewing .craft-title {
    gap: 5px;
  }

  .craft-master-count {
    gap: 0;
  }

  .craft-title span,
  .craft-master-count span {
    display: inline;
    font-family: var(--bodoni);
    font-size: 13px;
  }

  .craft-title span {
    font-weight: 400;
  }

  .craft-title strong {
    font-weight: 400;
  }

  .craft-title strong {
    font-family: var(--bodoni);
    font-size: 16px;
  }

  .craft-master-count strong,
  .craft-master-count em {
    font-family: var(--bodoni);
    font-size: 16px;
  }

  .craft-master-count span,
  .craft-master-count em {
    font-weight: 400;
  }

  .craft-master-count strong {
    font-weight: 700;
    margin-left: 9px;
  }

  .craft-master-count em {
    margin-left: 4px;
  }

  .discipline .craft-layout {
    height: 1140px;
    min-height: 1140px;
    display: flex;
    flex-direction: column;
  }

  .discipline .craft-panel {
    position: relative;
    order: 1;
    width: 100%;
    height: 602px;
    min-height: 602px;
    padding: 0;
  }

  .discipline .craft-panel > :not(.craft-video-link) {
    width: auto;
    max-width: none;
  }

  .craft-panel .maker-id {
    position: absolute;
    top: 48px;
    right: 16px;
    left: 20px;
    height: 90px;
    padding: 0 0 28px;
    border-bottom: 0;
  }

  .craft-panel .maker-id::after {
    position: absolute;
    right: 1px;
    bottom: 0;
    left: -4px;
    height: 2px;
    background: #fdf1d8;
    content: "";
  }

  .maker-id img {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
    border-radius: 20px;
  }

  .maker-id strong {
    font-size: 24px;
    line-height: 1;
  }

  .maker-id span {
    margin-top: 7px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.75px;
  }

  .craft-panel blockquote {
    position: absolute;
    top: 173px;
    right: 16px;
    left: 20px;
    margin: 0;
    font-size: 21px;
    line-height: 31px;
    letter-spacing: -0.08em;
    white-space: nowrap;
  }

  .craft-panel blockquote br {
    display: block;
  }

  #najeon .craft-panel blockquote {
    font-weight: 600;
  }

  #ceramics .craft-panel blockquote,
  #brewing .craft-panel blockquote {
    font-weight: 400;
  }

  .craft-panel .craft-description {
    position: absolute;
    top: 244px;
    right: 16px;
    left: 20px;
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.03em;
  }

  .craft-panel .craft-description.only-mobile br {
    display: initial;
  }

  .craft-panel .craft-facts {
    position: absolute;
    top: 335px;
    right: 16px;
    left: 16px;
    height: 153px;
    margin: 0;
  }

  .craft-facts div {
    min-height: 49px;
    height: 49px;
    align-items: center;
    padding: 0 15px;
  }

  .craft-facts dt {
    font-size: 13px;
    font-weight: 300;
    line-height: 23px;
    letter-spacing: -0.39px;
  }

  .craft-facts dd {
    max-width: 70%;
    font-size: 15px;
    font-weight: 600;
    line-height: 23px;
    letter-spacing: -0.45px;
    text-align: right;
    white-space: nowrap;
  }

  .craft-panel .craft-video-link {
    position: absolute;
    top: 514px;
    left: 16px;
    width: calc(100% - 32px);
    max-width: none;
    height: 48px;
    margin: 0;
    gap: 7px;
    padding: 0 19px 0 17px;
    font-size: 14px;
    line-height: 1;
  }

  .craft-panel .craft-video-link > img:first-child {
    width: 18px;
    height: 13px;
    flex-basis: 18px;
  }

  .craft-panel .craft-video-link-arrow {
    width: 9px;
    height: 7.36396px;
    flex-basis: 9px;
  }

  .discipline .craft-visual {
    order: 2;
    width: 100%;
    height: 538px;
    min-height: 538px;
  }

  .discipline .craft-visual > .discipline-hero {
    width: 100%;
    height: 376px;
    object-position: 55% 50%;
  }

  #brewing .craft-visual > .discipline-hero {
    object-position: 83% 48%;
  }

  .discipline-controls {
    top: 376px;
    right: 0;
    bottom: auto;
    left: 0;
    height: 162px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px 32px;
    grid-template-rows: 62px 32px;
    gap: 22px 8px;
    padding: 16px 16px 30px;
    box-sizing: border-box;
    background: var(--panel);
  }

  .gallery-thumbs {
    grid-row: 1;
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    gap: 8px;
  }

  .gallery-thumbs button {
    width: calc((100% - 32px) / 5);
    height: 62px;
    flex: 0 0 calc((100% - 32px) / 5);
    padding: 0;
    border: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    aspect-ratio: auto;
    opacity: 1;
    transform: none !important;
  }

  #ceramics .gallery-thumbs button {
    width: calc((100% - 24px) / 4);
    flex-basis: calc((100% - 24px) / 4);
  }

  .gallery-thumbs button.is-active {
    border-color: #fff;
  }

  .gallery-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 180ms ease, opacity 180ms ease;
    transform: none !important;
  }

  .gallery-thumbs button:not(.is-active) img {
    filter: grayscale(1);
    opacity: 0.9;
  }

  .gallery-thumbs button.is-active img {
    filter: none;
    opacity: 1;
  }

  #brewing .gallery-thumbs button:first-child img {
    object-position: 83% 48%;
  }

  .mini-timeline {
    grid-row: 2;
    grid-column: 1;
    width: calc(100% - 8px);
    height: 32px;
    display: grid;
    grid-template-columns: 33px minmax(0, 1fr) auto;
    align-items: center;
    align-self: center;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .mini-timeline b {
    align-self: center;
    justify-self: start;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    transform: translateY(1px);
  }

  .mini-timeline em {
    align-self: center;
    justify-self: end;
    font-family: var(--bodoni);
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    transform: translateY(1px);
  }

  .mini-timeline em strong {
    margin-right: 4px;
    font-weight: 700;
  }

  .mini-timeline > span {
    align-self: center;
    background: #262626;
    transform: none;
  }

  .discipline-controls .gallery-prev,
  .discipline-controls .gallery-next {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    align-self: center;
    margin: 0;
  }

  .discipline-controls .gallery-prev img,
  .discipline-controls .gallery-next img {
    display: block;
  }

  .discipline-controls .gallery-prev {
    grid-row: 2;
    grid-column: 2;
  }

  .discipline-controls .gallery-next {
    grid-row: 2;
    grid-column: 3;
  }

  .process-grid {
    width: 100%;
    height: 1405px;
    display: block;
    margin: 0;
    padding: 60px 16px 39px;
  }

  .process-card {
    width: 100%;
    margin: 0;
  }

  #najeon .process-card:nth-child(1),
  #ceramics .process-card:nth-child(1) {
    height: 450px;
  }

  #najeon .process-card:nth-child(2),
  #ceramics .process-card:nth-child(2),
  #brewing .process-card:nth-child(1) {
    height: 448px;
  }

  #brewing .process-card:nth-child(2) {
    height: 450px;
  }

  .process-card img,
  .process-placeholder {
    width: 100%;
    height: 270px;
    aspect-ratio: auto;
  }

  #najeon .process-card:first-child img,
  #najeon .process-card:first-child .process-placeholder,
  #brewing .process-card:nth-child(2) img,
  #brewing .process-card:nth-child(2) .process-placeholder {
    height: 272px;
  }

  #brewing .process-card:nth-child(2) img,
  #brewing .process-card:nth-child(2) .process-placeholder {
    width: calc(100% + 3px);
    max-width: none;
  }

  .process-label {
    height: 12px;
    gap: 0;
    margin: 26px 4px 0;
    font-size: 13px;
    line-height: 12px;
    letter-spacing: -0.39px;
  }

  #ceramics .process-card:first-child .process-label,
  #brewing .process-card:first-child .process-label {
    margin-top: 28px;
  }

  .process-label i {
    width: 22px;
    flex: 0 0 22px;
    margin-left: 7px;
    transform: translateY(-1px);
  }

  .process-label > span {
    transform: translateY(-1px);
  }

  .process-label em {
    margin-left: 5px;
  }

  .process-card h3 {
    margin: 10px 4px 0;
    font-size: 23px;
    line-height: 30px;
  }

  .process-card > p:last-child {
    margin: 10px 4px 0;
    font-size: 15px;
    line-height: 22px;
  }

  .motif-gallery {
    height: 238px;
    padding: 0 0 60px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .motif-heading {
    width: calc(100% - 32px);
    min-height: 17px;
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 auto 20px;
  }

  .motif-heading span:first-child {
    display: none;
  }

  .motif-heading span:last-child {
    min-width: 0;
    flex: 1;
    transform: translateY(-2px);
  }

  .motif-heading p {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 17px;
  }

  .motif-track > :is(img, video, .motif-video-frame) {
    width: 254px;
    height: 147px;
    flex-basis: 254px;
    margin-right: 8px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: auto;
  }

  .motif-track-viewport .motif-track {
    padding-left: 16px;
  }

  .object-showcase {
    width: 100%;
    /* CLOSED 문구가 더 길어 줄 수가 늘어난다. 내용에 따라 늘어나야 한다. */
    height: auto;
    min-height: 982px;
    padding: 0;
  }

  .object-showcase-inner {
    --object-visual-height: 111.2vw;
    position: relative;
    width: 100%;
    height: auto;
    min-height: calc(565px + var(--object-visual-height));
    display: block;
    margin: 0;
    /* 첫 흐름 요소(.object-mode-copy)의 시작 좌표.
       margin-top 으로 주면 부모 밖으로 collapse 된다. */
    padding-top: calc(131px + var(--object-visual-height));
    container-type: inline-size;
  }

  @supports (height: 1cqw) {
    .object-showcase-inner {
      --object-visual-height: 111.2cqw;
    }
  }

  .object-copy {
    display: contents;
    padding: 0;
  }

  /*
   * Figma 250:6519. 데스크톱은 오른쪽 27px 선 하나지만 모바일은 양옆에
   * 57px 그라디언트 선이 10px 간격으로 붙는다. 두 선 모두 글자 쪽이 흰색이고
   * 바깥으로 사라진다(Figma 는 왼쪽 선을 180도 뒤집어 같은 효과를 낸다).
   */
  .object-copy > .eyebrow {
    position: absolute;
    z-index: 4;
    top: 42px;
    left: 50%;
    /* 절대배치라 사용 가능 폭이 잘려 flex 아이템이 압축된다 */
    width: max-content;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    transform: translateX(-50%);
  }

  .object-copy > .eyebrow::before,
  .object-copy > .eyebrow::after {
    width: 57px;
    height: 1px;
    flex: none;
    /* align-items:center 는 line box 중앙이라 글자 cap 중앙보다 아래로 놓인다.
       0.5px 단위로 옮기면 선이 두 행에 걸쳐 흐려지므로 1px 로 맞춘다. */
    transform: translateY(-1px);
    content: "";
  }

  .object-copy > .eyebrow::before {
    background: linear-gradient(90deg, rgba(153, 153, 153, 0) 0%, #fff 100%);
  }

  .object-copy > .eyebrow::after {
    background: linear-gradient(90deg, #fff 0%, rgba(153, 153, 153, 0) 100%);
  }

  .object-copy > h2 {
    position: absolute;
    z-index: 4;
    /* Figma 250:6523 cap top 38 */
    top: 73.5px;
    left: 0;
    width: 100%;
    margin: 0;
    font-size: 30px;
    line-height: 41px;
    letter-spacing: -0.11em;
    text-align: center;
  }

  .object-visual {
    position: absolute;
    top: 117px;
    left: 0;
    width: 100%;
    height: var(--object-visual-height);
    aspect-ratio: 750 / 834;
  }

  .object-copy > hr:first-of-type {
    display: none;
  }

  .object-switch {
    position: absolute;
    z-index: 4;
    top: calc(69px + var(--object-visual-height));
    left: 16px;
    width: 224px;
    height: 48px;
    /* Figma 286:1270 : 6 + 104 + 4 + 104 + 6 = 224 */
    grid-template-columns: 104px 104px;
    gap: 4px;
    margin: 0;
    padding: 6px;
  }

  /*
   * Figma 286:1270. 데스크톱과 radius/테두리/그림자 수치가 다르고,
   * 글자가 단색이 아니라 그라디언트 + text-shadow 로 눌린 질감을 낸다.
   * background-clip 을 레이어별로 줘서 마크업 변경 없이 글자와 pill 을 분리한다.
   */
  .object-switch {
    border-radius: 5.684px;
  }

  .object-switch button,
  .object-switch button.is-active span {
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.24em;
  }

  .object-switch button {
    border-radius: 3.158px;
    color: #fff;
    opacity: 0.1;
    text-shadow: 0 1.895px 1.895px #855e21;
  }

  /* 활성 글자는 PC와 동일한 #676767 -> #000 그라디언트를 사용한다. */
  .object-switch button.is-active {
    border-width: 0.632px;
    background-image: linear-gradient(180deg, #f7f7f7 0%, #b9b9b9 100%);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #030303;
    opacity: 1;
    box-shadow: 0 10.737px 29.684px rgba(0, 0, 0, 0.38);
    text-shadow: 0 1.895px 1.895px #999;
  }

  /*
   * 여기부터는 흐름 배치다. 절대 top 으로 고정하면 CLOSED 문구가 길어질 때
   * 아래 구분선/THE ESSENCE 와 겹친다. 첫 흐름 요소라 margin-top 이 곧 시작 좌표다.
   */
  .object-mode-copy {
    position: static;
    /* Figma 250:6531 cap top 519 (시작 좌표는 부모 padding-top) */
    width: calc(100% - 32px);
    margin: 0 16px;
  }

  .object-mode-copy .eyebrow {
    font-size: 13px;
  }

  /* THE OBJECT 와 같은 이유로 1px 아래에 놓인다(line box 중앙 vs cap 중앙) */
  .object-mode-copy .eyebrow::after,
  .object-essence .eyebrow::after {
    transform: translateY(-1px);
  }

  /* Figma 250:6531: 선 끝 -> 이름 8px */
  .mode-name {
    margin-left: 8px;
    font-size: 14px;
    line-height: 36px;
    letter-spacing: -0.07em;
  }

  /* Figma: eyebrow cap 519 -> desc cap 550 = 31 */
  .mode-description {
    margin-top: 3px;
    font-size: 16px;
    line-height: 25px;
    letter-spacing: -0.07em;
  }

  .object-thumbs {
    gap: 6px;
    margin: 18px 0 0;
  }

  .object-thumbs button {
    width: 58px;
    height: 58px;
  }

  /* Figma 250:6549 는 알파 0.8 로 시작한다(데스크톱 250:4731 은 1.0) */
  .object-copy hr {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0.8) 55.29%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .object-copy > hr:last-of-type {
    position: static;
    width: calc(100% - 32px);
    margin: 30px 16px 0;
  }

  .object-essence {
    position: static;
    width: calc(100% - 32px);
    margin: 31px 16px 0;
    padding: 0;
  }

  .object-essence .eyebrow {
    font-size: 13px;
  }

  /* Figma 250:6553 cap top 783 (eyebrow cap 758 + 25) */
  .object-essence h3 {
    margin: 5.5px 0 13px;
    font-size: 22px;
    line-height: 28px;
  }

  .object-essence > p:last-child {
    font-size: 14px;
    line-height: 21px;
  }

  .viewing {
    width: 100%;
    /* 내용이 길어지면 늘어나야 한다(작은 화면에서 문구가 여러 줄이 된다) */
    height: auto;
    min-height: 1319px;
    padding: 0;
    /* Figma 250:6174 s9-bg 는 모바일 전용 에셋이다(데스크톱 1920x700 과 다른 그림).
       375 기준 375x300 이고, 화면 폭에 맞춰 같은 비율로 늘어난다. */
    background-color: #050505;
    background-image: none;
    background-position: center top;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  .viewing.assets-ready {
    background-image: url("assets/viewing-bg-mobile.webp");
  }

  /* 배경 이미지와 같은 비율로 늘어나야 덮는 범위가 어긋나지 않는다 */
  .viewing-overlay {
    display: block;
    top: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 375 / 300;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(5, 5, 5, 0.28));
  }

  /*
   * Figma 좌표를 절대 top 으로 박으면 문구가 줄바꿈될 때 아래 요소가 밀리지 않고 겹친다.
   * 375 기준 좌표는 그대로 나오되 좁은 화면에서는 밀리도록 흐름 배치로 둔다.
   */
  .viewing-contact {
    position: static;
    width: 100%;
    display: block;
    margin: 0;
    padding-top: 78px;
  }

  .viewing-intro {
    padding: 0;
  }

  .mini-brand {
    position: static;
    margin-left: 16px;
  }

  .mini-brand img {
    width: 93px;
  }

  .viewing-intro h2 {
    position: static;
    width: 300px;
    max-width: calc(100% - 32px);
    margin: 20px 16px 0;
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -0.11em;
    color: #fff;
  }

  .viewing-intro h2 strong {
    color: inherit;
  }

  .viewing-intro > p {
    position: static;
    width: calc(100% - 32px);
    margin: 7px 16px 0;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.05em;
  }

  .viewing-intro > p br {
    display: block;
  }

  .showroom-link {
    position: static;
    width: 276px;
    max-width: calc(100% - 32px);
    margin: 16px 0 0 16px;
    height: 43px;
    padding: 0 13px;
  }

  .showroom-link strong {
    font-size: 14px;
  }

  .showroom-address {
    font-size: 11px;
  }

  .viewing-form {
    position: relative;
    width: calc(100% - 32px);
    margin: 33px 16px 0;
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .field-row {
    display: contents;
    margin: 0;
  }

  /* Figma 밑줄 간격 66/65/65, 텍스트 아래~밑줄 17 */
  .field-row label {
    width: 100%;
    height: 65px;
    flex: none;
    padding-top: 24px;
  }

  .field-row:first-of-type label:first-child {
    height: 66px;
  }

  .field-row label > span,
  .field-row label:nth-child(2) > span {
    flex-basis: 84px;
    padding-left: 10px;
    font-size: 13px;
    /* Figma 250:6564 Libre Bodoni Medium Italic */
    font-weight: 500;
  }

  .viewing-form input {
    /* Figma: 세로 divider(100) -> 값(114) = 14 */
    padding-left: 14px;
    font-size: 15px;
    line-height: 27px;
    letter-spacing: -0.05em;
  }

  /* Figma: 마지막 밑줄 뒤 32, 라벨~칩 28, 칩 뒤 32 */
  .viewing-form fieldset {
    width: 100%;
    height: 96px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 6px 7px;
    margin: 26px 0 0;
  }

  .viewing-form legend {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    height: 29px;
    margin: 0;
    /* Figma 250:6587 은 좌측 16(=폼 기준 0), Light */
    padding: 0;
    font-size: 15px;
    font-weight: 300;
    line-height: 27px;
  }

  .viewing-form legend::after {
    display: none;
  }

  .viewing-form fieldset label {
    flex: 0 0 60px;
    height: 29px;
  }

  .viewing-form fieldset span {
    width: 60px;
    height: 29px;
    font-size: 15px;
    line-height: 29px;
  }

  /* Figma 250:6590 placeholder 는 박스 기준 21,22 */
  .viewing-form .viewing-message {
    width: 100%;
    height: 162px;
    padding: 14px 20px 119px;
  }

  .submit-viewing {
    height: 47px;
    margin-top: 11px;
    font-size: 15px;
  }

  /* submit(폼 기준 602) 위에 겹쳐 있었다 */
  .form-status {
    position: fixed;
    top: auto;
    right: auto;
    bottom: 24px;
    left: 50%;
    width: calc(100% - 32px);
    max-width: 420px;
  }

  .viewing .site-footer {
    position: static;
    width: 100%;
    height: 305px;
    /* Figma: submit 하단 -> footer 55 */
    margin: 55px 0 0;
    padding: 37px 16px 0;
  }

  .footer-top,
  .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-top {
    gap: 14px;
  }

  .footer-brand img {
    width: 105px;
  }

  .footer-desk,
  .footer-notice,
  .footer-bottom p {
    margin: 0;
    font-size: 12px;
    line-height: 19px;
    letter-spacing: -0.05em;
  }

  .footer-bottom {
    gap: 4px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
}

@media (max-width: 359px) {
  .private-viewing {
    width: 118px;
    font-size: 10px;
  }

  .object-spec span,
  .craft-panel .craft-description,
  .rarity-section .rarity-grid span {
    font-size: 12px;
  }

  .craft-panel blockquote {
    font-size: 18px;
    line-height: 27px;
    letter-spacing: -1.44px;
  }

  .craft-panel .craft-video-link {
    gap: 6px;
    padding-right: 14px;
    padding-left: 14px;
    font-size: 12px;
  }
}

/* PC: separate the closing emphasis from the preceding Korean copy. */
@media (min-width: 701px) {
  .philosophy-copy .philosophy-message b {
    margin-left: 0.2em;
  }
}

/* PC: fade motif heading rules outward from the centered label. */
@media (min-width: 701px) {
  .motif-heading span {
    transform: translateY(-2px);
  }

  .motif-heading span:first-child {
    background: linear-gradient(
      90deg,
      rgba(153, 153, 153, 0) 0%,
      rgba(255, 255, 255, 0.24) 100%
    );
  }
}
/* Responsive PC craft copy: keep Figma typography and let the available width set line breaks. */
@media (min-width: 1201px) {
  .craft-panel blockquote,
  .craft-panel .craft-description {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }
}

@media (min-width: 1201px) and (max-width: 1919px) {
  .craft-panel blockquote br,
  .craft-panel .craft-description br {
    display: none;
  }
}
/* Global text fade-up and staggered process cards. */
.text-fade-up {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
    translate 800ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, translate;
}

.text-fade-up.is-text-visible {
  opacity: 1;
  translate: 0 0;
}

.process-grid.process-fade-up .process-card {
  opacity: 0;
  translate: 0 34px;
  transition:
    opacity 850ms cubic-bezier(0.22, 1, 0.36, 1),
    translate 850ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, translate;
}

.process-grid.process-fade-up.is-process-visible .process-card {
  opacity: 1;
  translate: 0 0;
}

.process-grid.process-fade-up.is-process-visible .process-card:nth-child(1) {
  transition-delay: 0ms;
}

.process-grid.process-fade-up.is-process-visible .process-card:nth-child(2) {
  transition-delay: 180ms;
}

.process-grid.process-fade-up.is-process-visible .process-card:nth-child(3) {
  transition-delay: 360ms;
}

@media (prefers-reduced-motion: reduce) {
  .text-fade-up,
  .process-grid.process-fade-up .process-card {
    opacity: 1;
    translate: none;
    transition: none;
  }
}
/* Section 08 copy sequence: title, horizontal rule, subtitle, description. */
.rarity-title-second {
  display: block;
  font-style: normal;
}
.rarity-section.rarity-copy-sequence .rarity h2 span:first-child,
.rarity-section.rarity-copy-sequence .rarity-title-second,
.rarity-section.rarity-copy-sequence .rarity-description {
  opacity: 0;
  translate: 0 26px;
  transition:
    opacity 750ms cubic-bezier(0.22, 1, 0.36, 1),
    translate 750ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, translate;
}

.rarity-section.rarity-copy-sequence .rarity h2 span:last-child::before {
  opacity: 0;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  transition:
    opacity 450ms ease,
    transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.rarity-section.rarity-copy-sequence.is-rarity-copy-visible
  .rarity h2 span:first-child {
  opacity: 1;
  translate: 0 0;
  transition-delay: 0ms;
}

.rarity-section.rarity-copy-sequence.is-rarity-copy-visible
  .rarity h2 span:last-child::before {
  opacity: 1;
  transform: translateY(-50%) scaleX(1);
  transition-delay: 400ms;
}

.rarity-section.rarity-copy-sequence.is-rarity-copy-visible
  .rarity-title-second {
  opacity: 1;
  translate: 0 0;
  transition-delay: 650ms;
}

.rarity-section.rarity-copy-sequence.is-rarity-copy-visible
  .rarity-description {
  opacity: 1;
  translate: 0 0;
  transition-delay: 900ms;
}

@media (prefers-reduced-motion: reduce) {
  .rarity-section.rarity-copy-sequence .rarity h2 span:first-child,
  .rarity-section.rarity-copy-sequence .rarity-title-second,
  .rarity-section.rarity-copy-sequence .rarity-description {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .rarity-section.rarity-copy-sequence .rarity h2 span:last-child::before {
    opacity: 1;
    transform: translateY(-50%) scaleX(1);
    transition: none;
  }
}
/* Object visual: first viewport entrance fade. */
.object-showcase:not(.is-visible) .object-visual {
  opacity: 0;
}

.object-showcase.is-visible .object-visual {
  animation: object-visual-first-reveal 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes object-visual-first-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .object-showcase:not(.is-visible) .object-visual {
    opacity: 1;
  }

  .object-showcase.is-visible .object-visual {
    animation: none;
  }
}