/* =========================================================
   SCENE LAB (theme/27) - 보조 CSS
   Tailwind4 browser CDN 한계 보정 + full-bleed + slider + grid(minmax)
   본문 레이아웃은 Tailwind utility 중심, 여기는 예외 보조만.
   ========================================================= */

:root{
  --gold:#B8956A;
  --gold-dark:#a47f55;
  --cream:#F6F5F2;
  --ink:#1A1A1A;
}

html{ scroll-behavior:smooth; }
body{ overflow-x:hidden; }
*{ min-width:0; }

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

/* ---------- Header 상태 ---------- */
#header .nav-text,
#header .logo-text{ color:#fff; }
#header.scrolled{
  background:rgba(255,255,255,.96);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
  backdrop-filter:saturate(180%) blur(6px);
}
#header.scrolled .nav-text,
#header.scrolled .logo-text{ color:var(--ink); }
#header.scrolled .logo-text .text-\[\#B8956A\]{ color:var(--gold); }

/* ---------- Hero swiper ---------- */
/* Swiper 번들 CSS .swiper{position:relative}가 .absolute를 덮는 함정 → 특이성 강제 고정 */
#hero .hero-swiper{ position:absolute; inset:0; }
.hero-swiper, .hero-swiper .swiper-wrapper, .hero-swiper .swiper-slide{ height:100%; }
.hero-swiper .swiper-slide{ display:block; }
.hero-slide{
  background-size:cover;
  background-position:center;
}
.hero-pagination .swiper-pagination-bullet{
  width:28px; height:3px; border-radius:0;
  background:rgba(255,255,255,.4); opacity:1; transition:background .3s;
}
.hero-pagination .swiper-pagination-bullet-active{ background:#fff; }

/* ---------- Category grids (minmax 명시) ---------- */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}
.icon-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}
.icon-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:#fff; border:1px solid #ECE8E1; border-radius:6px;
  padding:22px 10px; text-align:center;
  font-size:.875rem; color:#3A3A3A; transition:all .25s;
}
.icon-tile i{ font-size:22px; color:var(--gold); }
.icon-tile:hover{ background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-3px); }
.icon-tile:hover i{ color:var(--gold); }

@media (min-width:768px){
  .cat-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
  .icon-grid{ grid-template-columns:repeat(7, minmax(0,1fr)); }
}

/* ---------- Filter tabs ---------- */
.filter-tab{
  font-size:.8125rem; padding:8px 18px; border-radius:999px;
  border:1px solid #DDD7CD; color:#6B6B6B; background:#fff;
  transition:all .2s; cursor:pointer; white-space:nowrap;
}
.filter-tab:hover{ border-color:var(--gold); color:var(--gold); }
.filter-tab.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ---------- Product grid ---------- */
.prod-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}
@media (min-width:768px){ .prod-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; } }
@media (min-width:1024px){ .prod-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

.prod-card{
  background:#fff; border:1px solid #ECE8E1; border-radius:6px; overflow:hidden;
  transition:box-shadow .3s, transform .3s; position:relative; min-width:0;
}
.prod-card:hover{ box-shadow:0 16px 36px rgba(0,0,0,.10); transform:translateY(-4px); }
.prod-thumb{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#F3F1EC; }
.prod-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s; }
.prod-card:hover .prod-thumb img{ transform:scale(1.07); }
.prod-tag{
  position:absolute; left:10px; top:10px;
  font-family:'Cormorant Garamond',serif; font-size:11px; font-weight:600; letter-spacing:.12em;
  color:#6B6B6B; background:rgba(255,255,255,.9); padding:3px 8px; border-radius:3px;
}
.prod-tag.is-new{ color:#fff; background:var(--ink); }
.prod-wish{
  position:absolute; right:10px; top:10px; width:30px; height:30px; border-radius:999px;
  background:rgba(255,255,255,.9); color:#9A9A9A; display:flex; align-items:center; justify-content:center;
  font-size:13px; transition:all .2s;
}
.prod-wish:hover{ color:#E15B5B; }
.prod-wish.on{ color:#E15B5B; }
.prod-body{ padding:14px 14px 16px; }
.prod-cat{ font-size:11px; letter-spacing:.1em; color:#A99B82; text-transform:uppercase; }
.prod-name{ font-size:.9375rem; font-weight:600; margin-top:4px; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.prod-price{ font-size:.8125rem; color:#6B6B6B; margin-top:8px; }
.prod-price b{ color:var(--ink); font-weight:700; }

/* ---------- How it works (steps) ---------- */
.step-grid{
  display:grid;
  grid-template-columns:repeat(1, minmax(0,1fr));
  gap:44px 24px;
}
@media (min-width:480px){ .step-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px){ .step-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.step-item{ position:relative; text-align:center; }
.step-num{
  display:block; font-family:'Cormorant Garamond',serif; font-size:46px; font-weight:600;
  color:var(--gold); letter-spacing:.05em; margin-bottom:18px;
}
.step-line{
  display:none; position:absolute; top:30px; left:62%; width:76%; height:1px;
  border-top:1px dashed rgba(255,255,255,.22);
}
@media (min-width:1024px){ .step-line{ display:block; } }
.step-icon{
  width:58px; height:58px; border-radius:999px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  display:inline-flex; align-items:center; justify-content:center; color:var(--gold); font-size:19px;
  margin-bottom:18px;
}
.step-title{ font-size:1.0625rem; font-weight:700; margin-bottom:10px; }
.step-desc{ font-size:.875rem; line-height:1.7; color:rgba(255,255,255,.5); }

/* ---------- Rental guide cards ---------- */
.guide-grid{
  display:grid;
  grid-template-columns:repeat(1, minmax(0,1fr));
  gap:18px;
}
@media (min-width:640px){ .guide-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px){ .guide-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.guide-card{
  background:#fff; border:1px solid #ECE8E1; border-radius:6px; padding:34px 30px;
  transition:box-shadow .3s, transform .3s;
}
.guide-card:hover{ box-shadow:0 14px 34px rgba(0,0,0,.07); transform:translateY(-3px); }
.guide-icon{
  width:52px; height:52px; border-radius:999px; background:#F3EFE8;
  display:inline-flex; align-items:center; justify-content:center; color:var(--gold); font-size:19px;
  margin-bottom:20px;
}
.guide-title{ font-size:1.0625rem; font-weight:700; margin-bottom:12px; }
.guide-desc{ font-size:.875rem; line-height:1.75; color:#6B6B6B; }

/* ---------- Contact form ---------- */
.form-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:18px;
}
@media (max-width:479px){ .form-row{ grid-template-columns:minmax(0,1fr); } }
.form-label{ display:block; font-size:.8125rem; font-weight:600; color:var(--ink); margin-bottom:8px; }
.form-input{
  width:100%; height:52px; padding:0 16px; font-size:.9375rem;
  background:#F7F5F1; border:1px solid #E4DFD6; border-radius:4px; color:var(--ink);
  transition:border-color .2s, background .2s;
}
textarea.form-input{ height:auto; padding:14px 16px; line-height:1.6; }
.form-input::placeholder{ color:#A8A29A; }
.form-input:focus{ outline:none; border-color:var(--gold); background:#fff; }
select.form-input{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23999' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; }

/* ---------- About ---------- */
.about-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:44px;
}
@media (min-width:1024px){ .about-grid{ grid-template-columns:0.85fr 1fr; gap:70px; } }

/* ---------- Notice / FAQ board ---------- */
.board-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
}
@media (min-width:1024px){ .board-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:40px; } }
.board-card{ background:#fff; border:1px solid #ECE8E1; border-radius:6px; padding:34px 32px; }
.board-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0; border-bottom:1px solid #EFECE5; transition:color .2s;
}
.board-row span{ font-size:.9375rem; color:#3A3A3A; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-row time{ font-size:.8125rem; color:#A99B82; flex-shrink:0; }
.board-row:hover span{ color:var(--gold); }
.board-card li:last-child .board-row{ border-bottom:0; }

/* FAQ accordion */
.faq-item{ border-bottom:1px solid #EFECE5; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0; font-size:.9375rem; color:#3A3A3A; text-align:left; cursor:pointer; transition:color .2s;
}
.faq-q:hover{ color:var(--gold); }
.faq-ic{ color:#B0A98F; font-size:13px; transition:transform .3s; flex-shrink:0; }
.faq-item.open .faq-q{ color:var(--gold); }
.faq-item.open .faq-ic{ transform:rotate(45deg); color:var(--gold); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a p{ padding:0 0 18px; font-size:.875rem; line-height:1.7; color:#6B6B6B; }

/* ---------- Footer ---------- */
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:36px;
}
@media (min-width:640px){ .footer-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:30px; } }
.footer-col h4{ font-family:'Cormorant Garamond',serif; font-size:13px; font-weight:700;
  letter-spacing:.18em; color:var(--gold); margin-bottom:20px; }
.footer-col ul li{ margin-bottom:13px; }
.footer-col ul a{ font-size:.875rem; color:rgba(255,255,255,.55); transition:color .2s; }
.footer-col ul a:hover{ color:#fff; }

/* ---------- TOP button ---------- */
#topBtn.show{ opacity:1; visibility:visible; }

/* ---------- Mobile menu open states ---------- */
/* Tailwind4 translate-x-full은 translate 속성이라 transform 오버라이드가 안 먹음 → CSS로 직접 제어 */
.menu-panel{ transform:translateX(100%); transition:transform .3s ease; }
#mobileMenu.open .menu-overlay{ opacity:1; }
#mobileMenu.open .menu-panel{ transform:translateX(0); }
body.menu-lock{ overflow:hidden; }
#hamburger.active .hb-line:nth-child(1){ transform:translateY(7px) rotate(45deg); }
#hamburger.active .hb-line:nth-child(2){ opacity:0; }
#hamburger.active .hb-line:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* flatpickr accent */
.flatpickr-day.selected,
.flatpickr-day.selected:hover{ background:var(--gold); border-color:var(--gold); }
.flatpickr-day:hover{ background:#F3EFE8; }

/* ---------- Footer family-site select (실동작) ---------- */
.family-wrap{ position:relative; max-width:300px; }
.family-select{
  appearance:none; -webkit-appearance:none;
  width:100%; height:46px; padding:0 40px 0 16px;
  font-size:.8125rem; letter-spacing:.04em; color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.18); border-radius:4px;
  cursor:pointer; transition:border-color .2s, background .2s;
}
.family-select:hover{ border-color:var(--gold); background:rgba(255,255,255,.07); }
.family-select:focus{ outline:none; border-color:var(--gold); }
.family-select option{ color:#1A1A1A; background:#fff; }
.family-caret{
  position:absolute; right:15px; top:50%; transform:translateY(-50%);
  font-size:12px; color:rgba(255,255,255,.45); pointer-events:none;
}

/* ---------- Entry Popup (PC·Mobile) ---------- */
.popup-wrap{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:20px; }
.popup-wrap[hidden]{ display:none; }
.popup-dim{ position:absolute; inset:0; background:rgba(15,15,14,.62); opacity:0; transition:opacity .3s; }
.popup-wrap.show .popup-dim{ opacity:1; }
.popup-card{
  position:relative; width:100%; max-width:400px; max-height:calc(100svh - 40px);
  overflow-y:auto; background:#fff; border-radius:10px;
  box-shadow:0 30px 70px rgba(0,0,0,.4);
  transform:translateY(18px) scale(.98); opacity:0; transition:transform .35s ease, opacity .35s ease;
}
.popup-wrap.show .popup-card{ transform:translateY(0) scale(1); opacity:1; }
.popup-x{
  position:absolute; top:12px; right:12px; z-index:2;
  width:38px; height:38px; border-radius:999px;
  background:rgba(0,0,0,.35); color:#fff; font-size:18px;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.popup-x:hover{ background:rgba(0,0,0,.6); }
.popup-media{
  position:relative; aspect-ratio:16/10; background-size:cover; background-position:center; background-color:#EDE8E0;
}
.popup-badge{
  position:absolute; left:16px; top:16px;
  font-family:'Cormorant Garamond',serif; font-size:12px; font-weight:700; letter-spacing:.16em;
  color:#fff; background:var(--gold); padding:5px 12px; border-radius:3px;
}
.popup-body{ padding:26px 26px 20px; text-align:center; }
.popup-eyebrow{ font-size:11px; letter-spacing:.34em; font-weight:600; color:var(--gold); margin-bottom:12px; }
.popup-title{ font-family:'Noto Sans KR',sans-serif; font-size:1.5rem; font-weight:700; line-height:1.35; color:var(--ink); }
.popup-title em{ font-style:normal; color:var(--gold); }
.popup-text{ margin-top:14px; font-size:.875rem; line-height:1.7; color:#6B6B6B; }
.popup-text b{ color:var(--ink); font-weight:700; }
.popup-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  margin-top:20px; padding:0 26px; height:48px;
  background:var(--gold); color:#fff; font-size:.9375rem; font-weight:600; border-radius:4px;
  transition:background .2s, transform .15s;
}
.popup-cta:hover{ background:var(--gold-dark); }
.popup-cta:active{ transform:scale(.98); }
.popup-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 22px; border-top:1px solid #EFECE5; background:#FAF8F4;
}
.popup-hide{ display:flex; align-items:center; gap:8px; font-size:.8125rem; color:#6B6B6B; cursor:pointer; }
.popup-hide input{ width:16px; height:16px; accent-color:var(--gold); }
.popup-close-text{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.8125rem; color:#9A938A; transition:color .2s; cursor:pointer;
}
.popup-close-text:hover{ color:var(--ink); }
@media (max-width:380px){
  .popup-body{ padding:22px 20px 16px; }
  .popup-title{ font-size:1.3125rem; }
  .popup-foot{ padding:12px 16px; }
  .popup-hide, .popup-close-text{ font-size:.75rem; }
}