@charset "UTF-8";

/* ============================================================
   전통주 체험 프로그램 — 반응형 스타일
   style.css 다음에 불러올 것
   ------------------------------------------------------------
   1440 / 1200 / 1024 / 900 / 768 / 560 / 400  +  가로모드
   ============================================================ */

/* ---------- 노트북 (≤1440px) ---------- */
@media (max-width: 1440px){
  :root{ --gutter: clamp(18px, 3.2vw, 54px); }

  .photo{ height:min(100%, 560px); }
  .detail{ padding-right:clamp(0px, 1.4vw, 24px); }
}

/* ---------- 소형 데스크톱 (≤1200px) ---------- */
@media (max-width: 1200px){
  :root{
    --topbar-h: clamp(60px, 12vh, 108px);
    --gutter:   clamp(16px, 2.8vw, 40px);
  }

  .slide__inner{ column-gap:clamp(14px, 2.4vw, 34px); }
  .photo{ height:min(100%, 500px); }

  .block + .block{ margin-top:clamp(8px, 1.6vh, 18px); }
  .block__text,
  .block__list li{ font-size:clamp(14px, 1.26vw, 17px); line-height:1.64; }

  .deco-window{ width:clamp(220px, 32vw, 400px); }
  .d--corner-r{ width:clamp(150px, 20vw, 300px); }
}

/* ============================================================
   태블릿 이하 : 세로 배치로 전환 (≤1024px)
   ============================================================ */
@media (max-width: 1024px){
  :root{
    --topbar-h: clamp(58px, 11vh, 96px);
    --frame-pad: clamp(8px, 1.2vh, 14px);
    --gutter: clamp(18px, 4vw, 40px);
    --dur: 760ms;
    --enter-tf: translate3d(0, 4%, 0) scale(.97);
    --leave-tf: translate3d(0, -4%, 0) scale(.97);
  }
  .slides{ perspective:none; }
  .slides.dir-prev{
    --enter-tf: translate3d(0, -4%, 0) scale(.97);
    --leave-tf: translate3d(0, 4%, 0) scale(.97);
  }

  /* 슬라이드 자체를 세로 스크롤 영역으로 */
  .slide{ overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
  .slide.is-leaving{ overflow:hidden; }

  .slide__inner{
    grid-template-columns:1fr;
    grid-template-rows:auto;      /* 내용 높이만큼만 — 빈 칸이 벌어지지 않게 */
    align-items:start;
    align-content:start;
    row-gap:clamp(18px, 3.4vh, 34px);
    padding:clamp(24px, 4vh, 44px) var(--gutter) clamp(56px, 9vh, 92px);
    height:auto;
    min-height:100%;
  }

  .visual{ height:auto; }
  .photo{ height:auto; width:100%; max-width:min(88vw, 640px); aspect-ratio:4/3; }

  .detail{ height:auto; justify-content:flex-start; padding-right:0; }
  .detail__body{ overflow:visible; padding-right:0; }
  .detail__title{ font-size:clamp(30px, 5.4vw, 48px); }
  .ornament{ width:clamp(180px, 42vw, 300px); }

  .block__title{ font-size:clamp(16px, 2.3vw, 19px); }
  .block__text,
  .block__list li{ font-size:clamp(15.5px, 2.1vw, 18px); line-height:1.74; }

  .btn-reserve{ min-width:clamp(180px, 44vw, 260px); }
  .btn-reserve--wide{ min-width:clamp(200px, 52vw, 300px); }

  /* 장식은 배경 수준으로만 유지 */
  .deco{ position:fixed; top:var(--topbar-h); }
  .slide.is-active .deco .d{ opacity:calc(var(--op, 1) * .5); }
  .deco-window{ opacity:.26; }
  .deco-wave{ opacity:.2; }
  .d--corner-l{
    width:clamp(84px, 19.6vw, 161px);
    --op:1;
  }
  .d--corner-r{ width:clamp(105px, 24vw, 200px); }
  #distill .d--corner-l{ width:clamp(84px, 18.2vw, 151px); }
  #tasting .d--corner-l{ width:clamp(84px, 18.2vw, 151px); }
  #distill .d--corner-r{ width:clamp(100px, 22vw, 190px); }
  .d--pine{
    left:clamp(-92px, -8vw, -46px);
    width:clamp(150px, 34vw, 280px);
    bottom:0;
  }
  .d--moon{ width:clamp(130px, 28vw, 240px); }

  /* 세로 스크롤 화면에서는 하단 장식선을 감춘다 */
  .rule-bottom{ display:none; }

  /* 오시는 길 */
  .slide__inner--location{
    grid-template-columns:1fr;
    padding-inline:var(--gutter);
    row-gap:clamp(20px, 3.6vh, 36px);
    align-content:center;         /* 주소와 지도를 붙여 가운데로 */
    align-content:safe center;
  }
  .address{ align-items:center; text-align:center; }
  .address .detail__title{ text-align:center; }
  .address .ornament{ margin-inline:auto; }
  .address__row{ justify-content:center; flex-wrap:wrap; gap:6px 14px; }
  .address__row dt{ min-width:0; font-weight:700; }
  .map-wrap{ height:auto; }
  .map-frame{ height:auto; width:100%; max-width:min(86vw, 460px); }
}

/* ---------- 태블릿 세로 (≤900px) ---------- */
@media (max-width: 900px){
  .navwrap{ overflow:hidden; }
  .navtrack{
    position:relative;
    inset:auto;
    width:100%;
    transform:none !important;
    transition:none;
    will-change:auto;
  }
  .navitem{
    flex:1 1 25%;
    width:25%;
    min-width:0;
    transition:color .25s ease, background-color .25s ease;
  }
  .navitem:first-child{ border-left:0; }
  .navitem.is-active{
    color:#fdf7e8;
    background:linear-gradient(180deg, #97804d 0%, var(--brown) 100%);
    box-shadow:0 8px 18px -14px rgba(70,52,20,.55);
  }
  .navitem.is-active .navitem__label{
    font-weight:700;
  }
  .navcard{ display:none; }
  .navitem__label{ font-size:clamp(10px, 1.9vw, 12.5px); letter-spacing:.1em; }
}

/* ============================================================
   모바일 (≤768px)
   ============================================================ */
@media (max-width: 768px){
  :root{
    --topbar-h: 76px;        /* 캐러셀 높이는 고정이어야 한다 */
    --nav-item-w: 96px;
    --nav-drop: 12px;
    --gutter: 32px;          /* 테두리와 본문 사이 여백 확보 */
  }

  .topbar{ padding:0 42px; }
  .nav-arrow{ width:42px; }
  .nav-arrow svg{ width:19px; }

  .navitem{ gap:5px; }
  .navitem__icon{ width:20px; height:20px; }
  .navitem__label{ font-size:10.5px; letter-spacing:.08em; }


  .slide__inner{
    padding:22px var(--gutter) 72px;
    row-gap:20px;
  }

  .photo{ height:auto; width:100%; max-width:100%; aspect-ratio:4/3; }
  .photo--cut{ --cut:16px; padding:4px; }

  .detail__title{ font-size:clamp(26px, 7.4vw, 36px); margin-bottom:14px; }
  .ornament{ width:min(70vw, 260px); }

  .block + .block{ margin-top:16px; }
  .block__title{ font-size:17px; }
  .block__text,
  .block__list li{ font-size:16.5px; line-height:1.78; }

  .detail__foot{ margin-top:24px; }
  .btn-reserve{ width:100%; min-width:0; padding:14px 20px; font-size:17px; }
  .btn-reserve--wide{ min-width:0; }

  .deco .d{ display:none; }
  .slide.is-active .deco .d{ opacity:calc(var(--op, 1) * .38); }
  .d--mountain,
  .d--moon,
  .d--pine,
  .d--corner-l,
  .d--corner-r{ display:block; }
  .deco-window{ opacity:.2; right:-30%; top:2%; width:78vw; }
  .deco-wave{ opacity:.16; }

  /* 오시는 길 */
  .address__list{ font-size:17px; line-height:1.85; }
  .address__row{ flex-direction:column; gap:2px; }
  .address__row dt{ font-size:15px; color:var(--gold-deep); }
  .map-frame{ height:auto; width:100%; max-width:100%; aspect-ratio:4/3; }
}

/* ---------- 소형 모바일 (≤560px) ---------- */
@media (max-width: 560px){
  :root{ --gutter: 26px; }
  :root{ --nav-item-w: 88px; }
  .detail__body{ grid-template-columns:1fr; }   /* 좁은 화면에서는 1단 */
  .block:first-child{ grid-column:auto; }
  .navitem__label{ font-size:10px; letter-spacing:.06em; }
  .slide__inner{ padding:18px var(--gutter) 66px; }
  .detail__title{ font-size:clamp(24px, 8vw, 32px); }
  .block__text,
  .block__list li{ font-size:16px; }
  .photo{ aspect-ratio:3/2; }
}

/* ---------- 초소형 (≤400px) ---------- */
@media (max-width: 400px){
  :root{ --gutter: 24px; }
  .topbar{ padding:0 36px; }
  .nav-arrow{ width:36px; }
  .nav-arrow svg{ width:17px; }
  :root{ --nav-item-w: 74px; }
  .navitem__icon{ width:18px; height:18px; }
  .slide__inner{ padding:16px var(--gutter) 60px; }
  .block__text,
  .block__list li{ font-size:15.5px; line-height:1.74; }
  .ornament{ width:min(78vw, 220px); }
}

/* ============================================================
   가로가 넓고 높이가 낮은 화면 (노트북 · 모바일 가로)
   ============================================================ */
@media (max-height: 620px) and (min-width: 1025px){
  :root{ --topbar-h: clamp(52px, 11vh, 74px); }
  .detail__title{ font-size:clamp(24px, 2.9vw, 40px); margin-bottom:8px; }
  .block + .block{ margin-top:8px; }
  .block__text,
  .block__list li{ line-height:1.55; }
  .detail__foot{ margin-top:10px; }
  .rule-bottom{ display:none; }
  .photo{ height:min(100%, 400px); }
}

@media (max-height: 520px) and (max-width: 1024px) and (orientation: landscape){
  .slide__inner{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    row-gap:0;
    column-gap:22px;
    padding:18px var(--gutter) 40px;
  }
  .photo{ height:auto; width:100%; max-width:100%; aspect-ratio:3/2; }
  .detail__title{ font-size:clamp(22px, 4.4vw, 30px); }
  .slide__inner--location{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .address{ align-items:flex-start; text-align:left; }
  .address .detail__title{ text-align:left; }
  .address .ornament{ margin-inline:0; }
  .address__row{ justify-content:flex-start; }
}

/* ---------- 고해상도 대형 화면 (≥1920px) ---------- */
@media (min-width: 1920px){
  :root{ --gutter: clamp(60px, 4.6vw, 110px); }
  .photo{ height:min(100%, 760px); }
  .detail{ max-width:1040px; }
  .slide__inner{ justify-content:center; }
}

/* ---------- 예약 팝업 (좁은 화면) ---------- */
@media (max-width: 640px){
  .modal__panel-frame{ width:100%; }
  .modal__panel{ padding:22px 16px 18px; }
  .modal__head{ padding-right:36px; }
  .modal__thumb{ width:54px; }
  .modal__title{ font-size:22px; }

  .spec{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 8px; }
  .spec__k{ font-size:12px; }
  .spec__v{ font-size:15px; }

  .book__grid{ grid-template-columns:1fr; }
  .times--two{ grid-template-columns:1fr 1fr; }

  .notice{ grid-template-columns:auto minmax(0,1fr); }
  .notice__text{ grid-template-columns:1fr; gap:5px; }
  .notice__img{ width:56px; }

  .modal__foot{ grid-template-columns:1fr 1fr; }
}

/* ---------- 인쇄 ---------- */
@media print{
  html,body{ overflow:visible; background:#fff; }
  .stage{ height:auto; }
  .topbar, .deco, .rule-bottom, .paper-frame{ display:none; }
  .slide{
    position:static;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    page-break-after:always;
  }
  .slide__inner{ height:auto; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* 소나무와 배경 산을 제외한 장식 이미지는 원본 농도로 표시 */
.slide.is-active .deco .d:not(.d--pine):not(.d--mountain){
  opacity:1;
}