/* 무드스테이 — ZIGZAG public product tokens (oh-my-design.kr/design-systems/zigzag) */
:root {
  --canvas: #ffffff;
  --fg: #292b2b;
  --strong: #121212;
  --secondary: #606567;
  --muted: #878f91;
  --hairline: #ecedee;
  --black: #000000;
}
*, *::before, *::after { box-sizing: border-box; box-shadow: none; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.6;
  color: var(--fg);
  background: var(--canvas);
}
img { max-width: 100%; height: auto; display: block; border: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
h1, .product-heading {
  font-size: 32px;
  font-weight: 600;
  line-height: 44.8px;
  letter-spacing: normal;
  color: var(--strong);
  margin: 0 0 12px;
}
h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 44.8px;
  letter-spacing: normal;
  color: var(--strong);
  margin: 0 0 10px;
}
h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--strong);
  margin: 0 0 8px;
}
h4 {
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  color: var(--strong);
  margin: 0 0 10px;
}
p { margin: 0 0 12px; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: min(1100px, calc(100% - 40px)); margin: 0 auto; }

/* Header — white, hairline, dense catalog GNB */
.site-header {
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 40;
}
.gnb {
  display: flex;
  align-items: center;
  height: 56px;
  gap: 24px;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 22px; width: auto; }
.gnb-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 0;
}
.gnb-nav a {
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--muted);
  white-space: nowrap;
  padding: 0;
  border-radius: 0;
  background: transparent;
}
.gnb-nav a.is-on {
  font-weight: 600;
  color: var(--strong);
}
.gnb-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* Action CTA only — radius 24px */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 18px;
  border-radius: 24px;
  background: var(--strong);
  color: var(--canvas);
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
a.btn-cta { color: var(--canvas); }
.btn-text {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  color: var(--strong);
  border-bottom: 1px solid var(--strong);
  padding: 0 0 2px;
  border-radius: 0;
  background: transparent;
}

.btn-menu {
  display: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hairline);
  background: var(--canvas);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.btn-menu span,
.btn-menu span::before,
.btn-menu span::after {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--strong);
  position: absolute;
  left: 9px;
}
.btn-menu span { top: 17px; }
.btn-menu span::before { content: ""; top: -5px; }
.btn-menu span::after { content: ""; top: 5px; }

/* Intro — text led, not cinematic overlay */
.intro {
  padding: 36px 0 8px;
  border-bottom: 1px solid var(--hairline);
}
.intro .kicker {
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--muted);
  margin-bottom: 8px;
}
.intro p.lead {
  color: var(--fg);
  max-width: 720px;
}
.intro-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  margin-bottom: 8px;
}

/* Look carousel */
.look {
  padding: 20px 0 8px;
}
.look-frame {
  position: relative;
  background: var(--hairline);
  border-radius: 0;
  overflow: hidden;
}
.look-track {
  display: flex;
  width: 100%;
}
.look-slide {
  flex: 0 0 100%;
  min-width: 100%;
}
.look-slide img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  background: var(--hairline);
  border-radius: 0;
}
.look-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--canvas);
  color: var(--black);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.look-btn.is-off { color: rgba(16, 16, 16, 0.3); cursor: default; }
.look-prev { left: 12px; }
.look-next { right: 12px; }
.look-cap {
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--muted);
  margin-top: 8px;
}

/* Sections */
.sec { padding: 40px 0; }
.sec + .sec { border-top: 1px solid var(--hairline); }
.sec-head { margin-bottom: 20px; }
.sec-head p { color: var(--secondary); max-width: 720px; }

/* Product catalog cards — thumbnail + metadata as separate blocks */
.catalog {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 8px;
}
.product-card {
  background: transparent;
  border-radius: 0;
  padding: 0 0 8px;
}
.product-card-thumb {
  background: var(--hairline);
  border-radius: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.product-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.product-card-meta { padding: 10px 0 0; }
.product-card-meta .name {
  font-size: 16px;
  font-weight: 400;
  color: var(--fg);
  margin: 0 0 4px;
}
.product-card-meta .sub {
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--muted);
  margin: 0 0 6px;
}
.product-card-meta .price {
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  color: var(--strong);
  margin: 0;
}
.product-card-meta .price-sub {
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--muted);
  margin: 4px 0 0;
}

/* Split layout */
.split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: start;
}
.split-photo {
  background: var(--hairline);
  border-radius: 0;
}
.split-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0;
}
.room-hero-photo {
  background: var(--hairline);
  border-radius: 0;
  margin-bottom: 24px;
}
.room-hero-photo img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: 0;
}

/* Spec tables */
table.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
table.spec th,
table.spec td {
  text-align: left;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  font-weight: 400;
}
table.spec th {
  width: 140px;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--muted);
}
table.spec td { color: var(--fg); }
table.spec thead th {
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

/* Product-detail tabs — text weight, not filled pill */
.tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--hairline);
  margin: 8px 0 24px;
}
.tab {
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 4px 17.5px;
  cursor: pointer;
}
.tab.is-on {
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  color: var(--strong);
}
.panel { display: none; }
.panel.is-on { display: block; }

.amenity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
.amenity li {
  font-size: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--fg);
}
.prose p { color: var(--fg); max-width: 720px; }
.note {
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--muted);
}

.crumb {
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--muted);
  margin-bottom: 8px;
}
.crumb span { color: var(--secondary); }

.room-lnb {
  border-bottom: 1px solid var(--hairline);
}
.room-lnb .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 0;
}
.room-lnb a {
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--muted);
}
.room-lnb a.is-on {
  font-weight: 600;
  color: var(--strong);
}

/* Guide blocks */
.guide-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}
.guide-list h3 { margin-bottom: 6px; }
.guide-list p { margin: 0; color: var(--fg); }

.map-frame {
  background: var(--hairline);
  border-radius: 0;
  height: 360px;
  overflow: hidden;
}
.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Form */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 12px;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--secondary);
}
.field input,
.field select,
.field textarea {
  border: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--canvas);
  color: var(--fg);
  font-size: 16px;
  font-weight: 400;
  padding: 10px 12px;
  outline: none;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--strong);
}
.field textarea { min-height: 120px; resize: vertical; }
.form-ok {
  display: none;
  border: 1px solid var(--hairline);
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--strong);
  background: var(--canvas);
  border-radius: 0;
}
.form-ok.show { display: block; }
.form-note {
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--muted);
  margin: 12px 0 0;
}
.side-box {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 16px 0;
  margin-bottom: 16px;
}
.side-box li {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  font-size: 16px;
}
.side-box li span {
  width: 72px;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--muted);
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--hairline);
  background: var(--canvas);
  padding: 40px 0 24px;
  margin-top: 8px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px 24px;
}
.footer-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--strong);
  margin-bottom: 10px;
}
.site-footer p,
.site-footer li {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--secondary);
}
.site-footer a { color: var(--secondary); }
.site-footer a:hover { color: var(--strong); }
.footer-bot {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}
.footer-bot p {
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--muted);
  margin: 0;
}

.actions { display: flex; align-items: center; gap: 16px; margin-top: 20px; }

@media (max-width: 960px) {
  .catalog { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .look-slide img { height: 280px; }
}
@media (max-width: 760px) {
  .gnb { height: 52px; gap: 12px; }
  .gnb-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 52px;
    background: var(--canvas);
    border-bottom: 1px solid var(--hairline);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 20px 16px;
    gap: 0;
  }
  .gnb-nav.open { display: flex; }
  .gnb-nav a {
    padding: 12px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .btn-menu { display: block; }
  .gnb-end .btn-cta { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .amenity { grid-template-columns: 1fr; }
  h1, h2, .product-heading { font-size: 32px; line-height: 44.8px; }
}
@media (max-width: 520px) {
  .wrap { width: calc(100% - 32px); }
  .catalog { grid-template-columns: repeat(2, 1fr); gap: 12px 6px; }
  .footer-grid { grid-template-columns: 1fr; }
}