/* ============================================
   BIG FOREST — Main Banner (full-screen hero)
   Reference: savor.it
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  /* Option B: one page-wide cream backdrop. The story/arch stages below are
     transparent and overlap, so the paintings, text and rising goods all share
     this single continuous background instead of separate cream blocks. */
  background: #f3f4f1;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Hero / full screen ---------- */
.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #0c0c0c;   /* hero stays dark, regardless of the cream page bg */
}

/* ---------- Slideshow ---------- */
.slideshow {
  position: absolute;
  inset: 0;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

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

/* Blurred backdrop — fills the empty space so there are no black bars */
.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(20px) brightness(0.7);
  transform: scale(1.15); /* hide blurred edges */
}

/* Sharp painting — scaled up to fill more (top/bottom may crop slightly) */
.slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* keep the painting from distorting */
  object-position: center 32%; /* focus on the frames (upper area), not the sofa */
  transform: scale(1.6); /* zoom in so the frames fill the screen */
}

/* ---------- Overlay ---------- */
.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.1) 30%,
    rgba(0, 0, 0, 0.15) 60%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
}

/* ---------- Top bar ---------- */
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 38px 56px;
}

/* "BIG FOREST" — savor-style elegant high-contrast serif (Roslindale look-alike) */
.logo {
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 500;
  font-size: clamp(38px, 5vw, 72px); /* much bigger */
  line-height: 1;
  letter-spacing: 0.01em;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

/* Top-right nav */
.nav {
  display: flex;
  gap: 40px;
}

.nav a {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.25s ease;
}

.nav a:hover {
  opacity: 0.6;
}

/* ---------- Top-right auth area (Kakao login) ---------- */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 32px;
}
.auth-box { display: flex; align-items: center; }

/* Kakao login button */
.kakao-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fee500;
  color: #3c1e1e;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 8px;
  white-space: nowrap;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.kakao-btn:hover { filter: brightness(0.96); }
.kakao-btn:active { transform: translateY(1px); }
/* little KakaoTalk-style speech bubble */
.k-bubble {
  position: relative;
  width: 18px;
  height: 16px;
  background: #3c1e1e;
  border-radius: 50% / 46%;
  flex: 0 0 auto;
}
.k-bubble::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: -3px;
  width: 5px;
  height: 6px;
  background: #3c1e1e;
  border-radius: 0 0 60% 10%;
  transform: rotate(8deg);
}

/* logged-in: avatar + nickname + logout */
.auth-user { display: inline-flex; align-items: center; gap: 9px; }
.auth-user img {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.6);
}
.auth-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 500; font-size: 13px; letter-spacing: 0.02em;
  color: #fff; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-logout {
  margin-left: 12px;
  font-family: "Montserrat", sans-serif;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: none; border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.auth-logout:hover { background: rgba(255, 255, 255, 0.9); color: #111; }

/* post-login toast */
.auth-toast {
  position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 12px);
  background: #252d2b; color: #f3f4f1;
  font-family: "Montserrat", sans-serif; font-size: 13px; letter-spacing: 0.02em;
  padding: 13px 24px; border-radius: 30px; z-index: 9999;
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease;
}
.auth-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Bottom bar ---------- */
.bottombar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 56px 50px;
}

/* Bottom-left tagline — large display headline (bigger than the top logo) */
.bottom-left {
  max-width: 60%;
}

.bottom-left .tagline {
  font-family: "Playfair Display", "Georgia", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(46px, 7vw, 110px); /* much larger than the top logo */
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: #fff;
}

/* Bottom-right statement + button */
.bottom-right {
  text-align: right;
}

.bottom-right .statement {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 18px;
}

/* "Watch - Paintings" box (네모) */
.watch-btn {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 13px 26px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  transition: background 0.3s ease, color 0.3s ease;
}

.watch-btn:hover {
  background: #fff;
  color: #111;
}

/* ============================================
   Paintings grid (main page)
   ============================================ */
.gallery-strip {
  width: 100%;
  background: #f3f4f1;    /* soft pale yellow */
  padding: 56px 0 70px;
}

/* small clickable header above the strip → opens the full Gallery page */
.strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  width: min(1200px, 88vw);
  margin: 0 auto 34px;
  padding: 0 4px 16px;
  border-bottom: 1px solid rgba(74, 53, 38, 0.18);
  text-decoration: none;
}
.strip-label {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: clamp(14px, 1.6vw, 22px);
  color: #56635f;                 /* deep navy — matches STORY / ABOUT labels */
}
.strip-view {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(11px, 1.1vw, 13px);
  color: #252d2b;
  transition: opacity 0.25s ease, letter-spacing 0.25s ease;
}
.strip-head:hover .strip-view { opacity: 0.6; letter-spacing: 0.2em; }

/* Four works only — one tidy row on desktop, 2x2 on a phone.
   No 3-column step: with 4 tiles it would strand one on its own row.
   The full set of 12 lives on gallery.html. */
.art-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  width: min(1200px, 88vw);
  margin: 0 auto;
}
@media (max-width: 980px) { .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 600px) { .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

.art-card {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  text-decoration: none;
  aspect-ratio: 4 / 5;       /* uniform tiles; the painting is cropped to fit */
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(74, 53, 38, 0.12);
  /* reveal-on-scroll initial state */
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.2,1),
              transform 0.8s cubic-bezier(.2,.7,.2,1),
              box-shadow 0.4s ease;
}
.art-card.in { opacity: 1; transform: none; }
.art-card:hover { box-shadow: 0 20px 44px rgba(74, 53, 38, 0.22); }

.art-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(.2,.7,.2,1);
}
.art-card:hover img { transform: scale(1.045); }

/* number + view cue, always visible */
.art-cap {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(to top, rgba(20,16,12,0.7), transparent);
  pointer-events: none;
}
.art-cap .num {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 18px;
  color: #fff;
  letter-spacing: 0.02em;
}
.art-cap .view {
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}

/* ============================================
   Scroll story: blue-only -> zoom out to the full photo
   ============================================ */
.story {
  position: relative;
  height: 230vh;          /* scroll room for a slow, gentle zoom-out */
  background: transparent; /* show the page-wide cream backdrop (Option B) */
}

/* a touch smaller so the two-line title tucks into the painting's lower
   white margin instead of covering the drawing (square alley painting) */
.story--slow .story-title {
  font-size: clamp(34px, 4.4vw, 80px);
}

.story-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: transparent; /* cream comes from the page now (Option B) */
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-art {
  height: 100vh;          /* at scale 1 = whole photo height fills the screen */
  width: auto;
  max-width: 100vw;
  display: block;
  /* zoom focuses on the blue sea; JS scales from big (blue only) down small */
  transform-origin: 50% 62%;
  transform: scale(5.5);
  will-change: transform;
}

/* Title (bottom-left) + CTA (bottom-right), fade in as the photo is revealed */
.story-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;            /* above the cover layer */
  padding: 0 56px 54px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  opacity: 0;             /* JS fades this in on scroll */
  pointer-events: none;
}

.story-title {
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 600;
  font-size: clamp(40px, 6vw, 104px);
  line-height: 0.98;
  color: #252d2b;          /* dark brown */
  max-width: 70%;
}

/* second line starts indented so it begins near the image (savor style) */
.story-title .line2 {
  display: inline-block;
  margin-left: 2em;
}

.story-cta {
  text-align: right;
}

.story-sub {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 0.06em;
  color: #252d2b;          /* dark brown, a bit stronger */
  margin-bottom: 16px;
}

.story-btn {
  display: inline-block;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #252d2b;
  text-decoration: none;
  padding: 13px 26px;
  border: 1px solid #252d2b;
  pointer-events: auto;
  transition: background 0.3s ease, color 0.3s ease;
}

.story-btn:hover {
  background: #252d2b;
  color: #f3f4f1;
}

/* ============================================
   Collection (savor arch conveyor): photos travel along an arch on scroll
   ============================================ */
.arch {
  position: relative;
  height: 220vh;             /* scroll room for the chain to flow up (slower) */
  background: transparent;   /* page-wide cream shows through (Option B) */
  /* No section overlap: original spacing restored. The transparent stages keep
     the collection text readable over the moving goods, but the painting above
     no longer bleeds into this section. */
}


.arch-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: transparent;   /* transparent so the painting shows beneath the goods */
}

/* each photo is placed along the arch by JS (transform) */
.arch-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 13vw;
  height: auto;
  opacity: 0;
  will-change: transform, opacity;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}

/* text + box on the right (JS fades it in) */
.arch-text {
  position: absolute;
  right: 7vw;
  top: 52%;
  transform: translateY(-50%);
  z-index: 6;
  text-align: right;
  /* wide enough that the 2nd line ("by the Serenity of the Sea", etc.) stays on
     one line instead of wrapping to a 3rd line. Right-aligned, so it only uses
     as much width as the text itself — it won't cover the rising photos. */
  max-width: 46vw;
  opacity: 0;
  pointer-events: none;
}

/* alley collection: text sits higher */
#goods3 .arch-text {
  top: 38%;
}

/* left-positioned variant (2nd collection) */
.arch-text--left {
  right: auto;
  left: 3vw;
  max-width: 34vw;
  text-align: left;
}

.arch-text .collection-phrase {
  font-size: clamp(20px, 2.6vw, 42px);
  margin-bottom: 22px;
  white-space: nowrap;   /* keep each <br/> line intact — never wrap to a 3rd line */
}

.arch-text .collection-btn {
  pointer-events: auto;
}

.collection-phrase {
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 500;
  font-size: clamp(28px, 4vw, 60px);
  line-height: 1.2;
  color: #252d2b;
  margin-bottom: 26px;
}

.collection-btn {
  display: inline-block;
  pointer-events: auto;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #252d2b;
  text-decoration: none;
  padding: 13px 26px;
  border: 1px solid #252d2b;
  transition: background 0.3s ease, color 0.3s ease;
}

.collection-btn:hover {
  background: #252d2b;
  color: #f3f4f1;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .topbar {
    padding: 24px 22px;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }
  .nav {
    gap: 22px;
    flex-wrap: wrap;
  }
  .topbar-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .logo {
    font-size: 24px;
  }
  .bottombar {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    padding: 0 22px 34px;
  }
  .bottom-right {
    text-align: left;
  }
  .bottom-left {
    max-width: 100%;
  }
  /* tiles are ~160px wide at 2-up, so the caption has to come down with them */
  .art-card { border-radius: 12px; }
  .art-cap { padding: 8px 10px; }
  .art-cap .num { font-size: 13px; }
  .art-cap .view { font-size: 9px; letter-spacing: 0.14em; }
  /* collection: bigger photos on mobile (JS also scales the width up) */
  .arch-img {
    width: 31vw;
  }
  .arch-text {
    right: 4vw;
    max-width: 92vw;       /* wide enough for the 2nd line to stay on one line */
  }
  .arch-text--left {
    left: 4vw;
    max-width: 92vw;
  }
  .arch-text .collection-phrase {
    /* slightly smaller so "by the Serenity of the Sea" fits one line on phones */
    font-size: clamp(17px, 5.2vw, 30px);
    white-space: nowrap;   /* keep it two lines on mobile too (Sea/Scenes stay up) */
  }

  /* story: smaller title, tighter padding, stack the sub/button below */
  .story-overlay {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 0 22px 30px;
  }
  .story-title {
    max-width: 100%;
    font-size: clamp(30px, 9vw, 54px);
  }
  .story-title .line2 {
    margin-left: 1em;
  }
  .story--slow .story-title {
    font-size: clamp(28px, 8vw, 48px);
  }
  .story-cta {
    text-align: left;
  }
}

/* ===== Story film (the living-paintings mini-film, embedded from story-all.html) ===== */
.story-film {
  width: 100%;
  height: 100vh;
  background: #f3f4f1;       /* matches the film's own margin colour for a seamless join */
}
.story-film iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 768px) {
  /* on phones the square fills the width; give it a comfortable height, not the whole screen */
  .story-film { height: auto; aspect-ratio: 1 / 1; }
}

/* ===== About (artist statement) ===== */
.about {
  background: #f3f4f1;
  color: #252d2b;
  padding: clamp(84px, 14vh, 156px) 8vw;
  text-align: center;
}
.about-inner { max-width: 720px; margin: 0 auto; }
.about-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #767d78;
}
.about-lead {
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 600;
  font-size: clamp(30px, 5vw, 60px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #252d2b;
  margin: 26px 0 14px;
  word-break: keep-all;
}
.about-en2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5c6764;
  margin-bottom: 30px;
}
.about-desc {
  font-family: "Nanum Myeongjo", serif;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 2;
  color: #2f3733;
  word-break: keep-all;
  margin-bottom: 42px;
}
.about-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #252d2b;
  text-decoration: none;
  border-bottom: 1.5px solid #252d2b;
  padding-bottom: 6px;
}
.about-more span { transition: transform 0.3s ease; }
.about-more:hover span { transform: translateX(5px); }
@media (max-width: 768px) {
  .about { padding: 9vh 7vw 11vh; }
}

/* ===== Contact ===== */
.contact {
  background: #f3f4f1;
  color: #252d2b;
  padding: clamp(84px, 14vh, 150px) 8vw;
}
.contact-inner { max-width: 860px; margin: 0 auto; }
.contact-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #767d78;
}
.contact-lead {
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 600;
  font-size: clamp(30px, 5vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #252d2b;
  margin: 22px 0 14px;
  word-break: keep-all;
}
.contact-desc {
  font-family: "Nanum Myeongjo", serif;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.95;
  color: #2f3733;
  word-break: keep-all;
  margin-bottom: 48px;
}
.channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  background: #ffffff;
  border: 1px solid rgba(37, 45, 43, 0.12);
  border-radius: 12px;
  text-decoration: none;
  color: #252d2b;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.channel:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(37, 45, 43, 0.1);
  border-color: rgba(37, 45, 43, 0.32);
}
.ch-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ch-label {
  font-family: "Nanum Myeongjo", serif;
  font-weight: 700;
  font-size: 18px;
  color: #252d2b;
}
.ch-sub {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #767d78;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ch-arrow {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  color: #767d78;
  flex-shrink: 0;
  transition: transform 0.25s ease, color 0.25s ease;
}
.channel:hover .ch-arrow { transform: translateX(5px); color: #252d2b; }

@media (max-width: 768px) {
  .contact { padding: 9vh 7vw 11vh; }
  .channels { grid-template-columns: 1fr; }
}

/* ===== Footer ===== */
.site-footer {
  background: #f3f4f1;
  color: #252d2b;
  padding: 6vh 7vw 6vh;
}
.footer-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 6vw;
  align-items: center;
}
.footer-logo {
  font-family: "Playfair Display", "Georgia", serif;
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 40px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #252d2b;
}
.footer-main {
  border-top: 1px solid rgba(74, 53, 38, 0.2);
  padding-top: 34px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}
.footer-info p {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: #252d2b;
  margin-bottom: 18px;
  word-break: keep-all;
}
.footer-info strong { font-weight: 600; }
.footer-info .bar,
.footer-links .bar { color: rgba(74, 53, 38, 0.4); margin: 0 12px; }
.biz-link { color: #252d2b; text-decoration: underline; white-space: nowrap; }
.footer-links {
  white-space: nowrap;
}
.footer-links a {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: #252d2b;
  text-decoration: none;
}
.footer-links a:hover { text-decoration: underline; }
.footer-copy {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #252d2b;
  margin-top: 16px;
}
@media (max-width: 768px) {
  .footer-grid { display: block; }
  .footer-logo { margin-bottom: 26px; }
  .footer-top { flex-direction: column; gap: 22px; }
  .footer-info p { font-size: 13px; }
}

/* ============================================
   Product showcase — full-bleed, one product at a time.
   Image fills the frame (no white border); text sits over it.
   ============================================ */
.product {
  position: relative;
  width: 100%;
  background: #f3f4f1;
}
.pshow-stage {
  position: relative;
  width: 100%;
  height: 86vh;              /* big spotlight; mobile → full screen (below) */
  overflow: hidden;
  background: #eceae2;
}
.pshow-slides { position: absolute; inset: 0; }
.pshow-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease-in-out;   /* crossfade like the hero */
}
.pshow-slide.is-active { opacity: 1; }
/* blurred backdrop fills the frame (like the hero) so there's no empty border */
.pshow-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(30px) brightness(0.82);
  transform: scale(1.18);     /* hide the blurred edges */
}
/* the sharp product — shown whole (uncropped) on top of the blurred backdrop */
.pshow-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform-origin: center;
}
/* per-product "zoom" (e.g., bookmark / drawstring pouch): show the product bigger
   with only a light blur — scale is set inline from PRODUCTS[].zoom */
.pshow-slide.is-zoom .pshow-bg { filter: blur(12px) brightness(0.9); }

/* zoom 없는 상품(노트·수첩·엽서·데님): 사진이 프레임을 꽉 채움(cover), 블러 배경 없음 */
.pshow-slide:not(.is-zoom) .pshow-fg { object-fit: cover; }
.pshow-slide:not(.is-zoom) .pshow-bg { display: none; }

/* gradient scrim so the overlaid text stays legible on light photos */
.pshow-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,0) 52%,
    rgba(0,0,0,0.62) 100%);
}

/* top bar over the image: "Product" (left) + "View all products" (right) */
.pshow-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 34px 56px;
  pointer-events: none;            /* clicks pass through except on the link */
}
.pshow-label, .pshow-viewall {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}
/* top-left "Product" — matches the Gallery label (Montserrat 600, navy) */
.pshow-label {
  font-weight: 600;
  font-size: clamp(14px, 1.6vw, 22px);
  letter-spacing: 0.18em;
  color: #56635f;
  /* soft light glow → stays readable on darker photos; invisible on light ones */
  text-shadow: 0 1px 10px rgba(255,255,255,0.55);
}
.pshow-viewall {
  pointer-events: auto;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  opacity: 0.92;
  white-space: nowrap;
}
.pshow-viewall:hover { opacity: 0.65; }

/* prev / next arrows */
.pshow-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.6);
  color: #fff; font-family: "Georgia", serif; font-size: 22px; line-height: 1;
  cursor: pointer; transition: background 0.2s ease;
}
.pshow-arrow:hover { background: rgba(255,255,255,0.32); }
.pshow-prev { left: 24px; }
.pshow-next { right: 24px; }

/* caption OVER the image (bottom) */
.pshow-caption {
  position: absolute; left: 56px; right: 56px; bottom: 58px; z-index: 4;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.pshow-index {
  display: block;
  font-family: "Montserrat", sans-serif; font-size: 12px;
  letter-spacing: 0.24em; color: rgba(255,255,255,0.85); margin-bottom: 12px;
}
.pshow-name {
  font-family: "Montserrat", sans-serif; font-weight: 400;
  font-size: clamp(24px, 3vw, 42px); letter-spacing: 0.02em; color: #fff;
}
.pshow-btn {
  flex: 0 0 auto;
  font-family: "Montserrat", sans-serif; font-weight: 500; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff; text-decoration: none;
  padding: 13px 30px; border: 1px solid rgba(255,255,255,0.85);
  transition: background 0.3s ease, color 0.3s ease;
}
.pshow-btn:hover { background: #fff; color: #252d2b; }

/* dots (over the image) */
.pshow-dots {
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 4;
  display: flex; justify-content: center; gap: 10px;
}
.pdot {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  background: rgba(255,255,255,0.45); border: 0; cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pdot.is-active { background: #fff; transform: scale(1.3); }

@media (max-width: 768px) {
  .pshow-stage { height: 100vh; }        /* full screen on mobile */
  .pshow-top { padding: 20px 22px; }
  .pshow-label { font-size: 12px; letter-spacing: 0.12em; }
  .pshow-viewall { font-size: 11px; letter-spacing: 0.08em; }
  .vw-word { display: none; }   /* 모바일: "View all products →" → "View all →" 로 축약 */
  .pshow-caption { left: 22px; right: 22px; bottom: 96px; flex-direction: column; align-items: flex-start; gap: 18px; }
  .pshow-arrow { width: 40px; height: 40px; font-size: 18px; }
  .pshow-prev { left: 10px; }
  .pshow-next { right: 10px; }
  .pshow-dots { bottom: 40px; }
}