/* ============================================================
   PPEOL DABANG — Mud Beach Roasters
   Design tokens
   Color   : Sunset Red #9E3E2A · Mudflat Grey #333333 · Sand Cream #E8E8C0
   Display : Playfair Display (EN) + Noto Serif KR (KR)
   Body    : Jost (EN) + Noto Sans KR (KR)
   Signature: 조수선(tideline) 스크롤 — 밀물/썰물처럼 콘텐츠가 드러남
============================================================ */

:root{
  --red: #9E3E2A;
  --red-bright: #c1502f;
  --grey: #333333;
  --cream: #E8E8C0;
  --cream-dim: #d8d8ac;
  --ink: #131211;
  --ink-2: #1b1a17;
  --ink-3: #24221e;
  --line: rgba(232,232,192,0.14);

  --display: 'Playfair Display', 'Noto Serif KR', serif;
  --body: 'Jost', 'Noto Sans KR', sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }

::selection{ background: var(--red); color: var(--cream); }

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--cream);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- 조수 진행 바 (tide progress) ---------- */
.tide-progress{
  position: fixed; top:0; left:0; right:0; height: 3px;
  background: rgba(255,255,255,0.06);
  z-index: 200;
}
.tide-progress__fill{
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--red), var(--cream));
  transition: width .1s linear;
}

/* ---------- NAV ---------- */
.nav{
  position: fixed; top: var(--announce-h, 0px); left:0; right:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px clamp(20px,5vw,56px);
  background: linear-gradient(to bottom, rgba(19,18,17,.85), transparent);
  transition: background .4s var(--ease), padding .4s var(--ease), top .35s var(--ease);
}
.nav.is-scrolled{
  background: rgba(19,18,17,.88);
  backdrop-filter: blur(10px);
  padding-top: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.nav__mark{ display:flex; align-items:center; z-index:2; }
.nav__links{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  display:flex; gap: clamp(18px,3vw,38px); z-index:1;
}
.nav__logo{ height: 136px; width:auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); transition: height .3s var(--ease); }
.nav.is-scrolled .nav__logo{ height: 104px; }
@media (max-width: 560px){
  .nav__logo{ height: 104px; }
  .nav.is-scrolled .nav__logo{ height: 84px; }
}
.nav__links a{
  font-family: var(--body); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream-dim); position:relative; padding-bottom: 4px;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background: var(--red-bright);
  transition: right .3s var(--ease);
}
.nav__links a:hover{ color: var(--cream); }
.nav__links a:hover::after{ right:0; }
.nav__ig{ color: var(--cream-dim); transition: color .3s; }
.nav__ig:hover{ color: var(--red-bright); }
@media (max-width: 720px){ .nav__links{ display:none; } }

/* ---------- HERO ---------- */
.hero{
  position: relative; height: 100svh; min-height: 560px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; }
.hero__img{
  width:100%; height:100%; object-fit: cover; object-position: center 62%;
  transform: scale(1.08);
  animation: heroZoom 18s ease-out forwards;
}
@keyframes heroZoom{ from{ transform: scale(1.14);} to{ transform: scale(1);} }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(19,18,17,.55) 0%, rgba(19,18,17,.25) 32%, rgba(19,18,17,.55) 72%, rgba(19,18,17,.96) 100%);
}
.hero__grain{
  position:absolute; inset:0; opacity:.05; mix-blend-mode: overlay; pointer-events:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero__content{
  position: relative; z-index: 2; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  padding: 0 20px;
  animation: heroRise 1.2s var(--ease) both .2s;
}
@keyframes heroRise{ from{ opacity:0; transform: translateY(22px);} to{ opacity:1; transform:none;} }
.hero__eyebrow{
  font-size: 12px; letter-spacing: .35em; text-transform: uppercase;
  color: var(--cream-dim); margin: 0 0 22px;
}
.hero__logo{ width: min(72vw, 460px); margin-bottom: 26px; filter: drop-shadow(0 8px 30px rgba(0,0,0,.5)); }
.hero__tagline{
  font-family: var(--display); font-weight: 600; font-size: clamp(19px, 3vw, 27px);
  line-height: 1.55; margin: 0 0 14px; color: var(--cream);
}
.hero__tagline-sub{ font-size: .74em; color: var(--red-bright); letter-spacing:.02em; }
.hero__slogan{
  width: min(60vw, 380px); margin: 4px auto 0; opacity: .95;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.35));
}
@media (max-width: 560px){ .hero__slogan{ width: min(78vw, 300px); } }
.hero__scroll{
  position:absolute; bottom: 34px; left:50%; transform: translateX(-50%);
  background:none; border:none; color: var(--cream-dim); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:10px; z-index:2;
}
.hero__scroll-line{ width:1px; height: 34px; background: var(--cream-dim); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background: var(--red-bright); animation: tideDrop 2.2s ease-in-out infinite;
}
@keyframes tideDrop{ 0%{ top:-100%;} 60%{ top:100%;} 100%{ top:100%; } }
.hero__scroll-text{ font-size: 10px; letter-spacing:.3em; }

/* ---------- TIDELINE divider (signature) ---------- */
.tideline{ position:relative; line-height:0; background: var(--ink); }
.tideline svg{ width:100%; height:60px; display:block; }
.tideline path{ fill: var(--ink-2); }

/* ---------- STORY ---------- */
.story{
  background: var(--ink-2);
  padding: clamp(70px,10vw,130px) clamp(20px,6vw,56px) clamp(90px,10vw,140px);
  display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px,6vw,80px);
  align-items:start;
}
.story__inner{ max-width: 620px; }
.story__label{ display:flex; flex-wrap:wrap; gap: 10px 18px; margin-bottom: 26px; }
.story__num{
  font-size: 11px; letter-spacing:.14em; text-transform: uppercase; color: var(--red-bright);
  border: 1px solid rgba(158,62,42,.45); padding: 5px 12px; border-radius: 999px;
}
.story__title{
  font-family: var(--display); font-weight:600; font-size: clamp(26px, 3.6vw, 42px);
  line-height:1.4; margin: 0 0 26px; color: var(--cream);
}
.story__text{
  font-size: 15.5px; line-height: 1.95; color: var(--cream-dim); font-weight:300;
  margin: 0 0 22px; max-width: 58ch;
}
.story__text--last{ margin-bottom: 40px; }
.story__palette{ display:flex; gap: 26px; flex-wrap:wrap; }
.swatch{ display:flex; flex-direction:column; gap:8px; }
.swatch__chip{ width:44px; height:44px; border-radius: 50%; display:block; box-shadow: 0 4px 16px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); }
.swatch__name{ font-size:12px; letter-spacing:.04em; color: var(--cream); }
.swatch__hex{ font-size:11px; color: var(--cream-dim); opacity:.7; }
.story__figure{ position:relative; border-radius: 4px; overflow:hidden; aspect-ratio: 4/5; position:sticky; top: 120px; }
.story__figure img{ width:100%; height:100%; object-fit:cover; }
.story__figure::after{
  content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 1px rgba(232,232,192,.08);
}
@media (max-width: 880px){
  .story{ grid-template-columns: 1fr; }
  .story__figure{ aspect-ratio: 16/10; order:-1; position:static; }
}

/* ---------- MENU ---------- */
.menu{
  background: var(--ink);
  padding: clamp(70px,9vw,120px) clamp(20px,6vw,56px);
  border-top: 1px solid var(--line);
}
.menu__head, .gallery__head{ text-align:center; max-width:640px; margin: 0 auto clamp(40px,6vw,70px); }
.menu__eyebrow{ font-size:12px; letter-spacing:.35em; color: var(--red-bright); text-transform:uppercase; margin:0 0 14px; }
.menu__title{ font-family: var(--display); font-weight:700; font-size: clamp(32px,5vw,54px); margin:0 0 12px; color: var(--cream); }
.menu__sub{ color: var(--cream-dim); font-size:14px; letter-spacing:.03em; margin:0; }

.menu__posters{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
  margin-bottom: clamp(50px,7vw,90px);
}
.poster-card{ border-radius: 3px; overflow:hidden; position:relative; aspect-ratio: 3/4; }
.poster-card--tall{ grid-row: span 1; }
.poster-card img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.poster-card:hover img{ transform: scale(1.06); }
.poster-card::after{ content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 1px rgba(232,232,192,.1); pointer-events:none; }
@media (max-width: 980px){ .menu__posters{ grid-template-columns: repeat(3, 1fr);} .poster-card:nth-child(5){ display:none; } }
@media (max-width: 620px){ .menu__posters{ grid-template-columns: repeat(2, 1fr);} }

.menu__list{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: clamp(30px,5vw,64px);
  max-width: 980px; margin: 0 auto; padding-top: clamp(40px,5vw,60px);
  border-top: 1px solid var(--line);
}
.menu__col h3{
  font-family: var(--display); font-size:16px; font-weight:600; color: var(--red-bright);
  letter-spacing:.02em; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.menu__col-sub{ margin-top: 76px; }
.menu__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 13px; }
.menu__col li{ display:flex; justify-content:space-between; gap: 10px; font-size: 13.5px; color: var(--cream-dim); }
.menu__col li span{ line-height:1.4; }
.menu__col li b{ font-weight:500; color: var(--cream); white-space:nowrap; }
.menu__col li.menu__row{ display:block; }

/* detailed rows w/ description */
.menu__rows{ gap: 20px !important; }
.menu__row-head{ display:flex; justify-content:space-between; align-items:baseline; gap: 14px; font-size: 14.5px; color: var(--cream); font-weight:400; }
.menu__row-head b{ font-weight:500; color: var(--cream); white-space:nowrap; }
.menu__row-sub{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; font-size:13px; color: var(--cream-dim); margin-top:6px; padding-left: 4px; }
.menu__row-sub b{ color: var(--cream); font-weight:500; }
.menu__row-desc{
  margin: 7px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--cream-dim); opacity:.72; font-weight:300;
  max-width: 46ch;
}
.menu__mini{ margin-top: 30px; }
.menu__mini h4{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--cream-dim); opacity:.8; margin:0 0 12px; font-weight:500; }
.menu__mini-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.menu__mini-list li{ display:flex; justify-content:space-between; gap:10px; font-size:13px; color: var(--cream-dim); }
.menu__mini-list li b{ color: var(--cream); font-weight:500; }
.menu__mini-note{ margin: 8px 0 0; font-size:12px; color: var(--cream-dim); opacity:.6; font-style:italic; }

.menu__note{ text-align:center; margin: clamp(40px,5vw,60px) 0 0; font-size:12px; color: var(--cream-dim); opacity:.7; letter-spacing:.02em; }
@media (max-width: 700px){ .menu__list{ grid-template-columns: 1fr; } }

/* ---------- GALLERY ---------- */
.gallery{ background: var(--ink-2); padding: clamp(70px,9vw,120px) clamp(20px,6vw,56px); border-top:1px solid var(--line); }
.gallery__grid{
  display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px;
  max-width: 1280px; margin: 0 auto;
}
.g-item{ margin:0; overflow:hidden; border-radius:3px; position:relative; }
.g-item img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.g-item:hover img{ transform: scale(1.07); }
.g-item--big{ grid-column: span 2; grid-row: span 2; }
.g-item--wide{ grid-column: span 2; }
@media (max-width: 880px){
  .gallery__grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows: 160px; }
  .g-item--big{ grid-column: span 2; grid-row: span 2; }
  .g-item--wide{ grid-column: span 2; }
}
@media (max-width: 520px){
  .gallery__grid{ grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .g-item--big, .g-item--wide{ grid-column: span 1; grid-row: span 1; }
}

/* ---------- VISIT ---------- */
.visit{ background: var(--ink); padding: clamp(70px,9vw,120px) clamp(20px,6vw,56px); border-top:1px solid var(--line); }
.visit__inner{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,80px);
  max-width: 1180px; margin:0 auto; align-items:stretch;
}
.visit__title{ font-family: var(--display); font-weight:700; font-size: clamp(30px,4vw,46px); margin: 6px 0 34px; color:var(--cream); }
.visit__info{ margin: 0 0 34px; display:flex; flex-direction:column; gap: 18px; }
.visit__info div{ display:flex; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.visit__info dt{ width: 92px; flex-shrink:0; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--red-bright); }
.visit__info dd{ margin:0; font-size:15px; color: var(--cream); font-weight:300; }
.visit__info dd a:hover{ color: var(--red-bright); }

.hours{ width:100%; border-collapse: collapse; margin-bottom: 12px; }
.hours th, .hours td{ text-align:left; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight:300; font-size:14px; }
.hours th{ color: var(--cream); font-weight:500; width: 40%; }
.hours td{ color: var(--cream-dim); }
.hours__last{ text-align:right; font-size:12px; opacity:.7; }
.visit__caption{ font-size:12px; color: var(--cream-dim); opacity:.65; margin: 0 0 36px; }

.visit__btns{ display:flex; flex-wrap:wrap; gap: 14px; }
.visit__cta{
  display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
  border: 1px solid var(--cream-dim); color: var(--cream); padding: 14px 26px;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; border-radius: 999px;
  transition: all .35s var(--ease);
}
.visit__cta:hover{ background: var(--red); border-color: var(--red); color:#fff; gap: 16px; }
.visit__cta--call{ background: var(--red); border-color: var(--red); color:#fff; }
.visit__cta--call:hover{ background: var(--red-bright); border-color: var(--red-bright); gap:10px; }

.visit__map{
  position:relative; border-radius:4px; overflow:hidden; min-height: 340px;
  background: linear-gradient(160deg, #1e2a2c, #14201f 55%, #0f1a19);
  display:flex; align-items:center; justify-content:center;
}
.visit__map-grid{
  position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(232,232,192,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,232,192,.08) 1px, transparent 1px);
  background-size: 42px 42px;
}
.visit__pin{ position:relative; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.visit__pin-dot{
  width:18px; height:18px; border-radius:50%; background: var(--red-bright);
  box-shadow: 0 0 0 0 rgba(193,80,47,.55); animation: pinPulse 2.4s ease-out infinite;
}
@keyframes pinPulse{
  0%{ box-shadow: 0 0 0 0 rgba(193,80,47,.55); }
  70%{ box-shadow: 0 0 0 24px rgba(193,80,47,0); }
  100%{ box-shadow: 0 0 0 0 rgba(193,80,47,0); }
}
.visit__pin-label{ font-family: var(--display); font-size:15px; color: var(--cream); line-height:1.5; letter-spacing:.02em; }
@media (max-width: 880px){ .visit__inner{ grid-template-columns:1fr; } .visit__map{ min-height:260px; order:-1;} }

/* ---------- FOOTER ---------- */
.footer{
  background: var(--ink-2); border-top: 1px solid var(--line);
  padding: 18px 20px 20px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.footer__logo{ height:204px; opacity:.9; margin:-42px 0 -38px; }
.footer__addr{ font-size:13px; color: var(--cream-dim); margin:0; }
.footer__copy{ font-size:11px; color: var(--cream-dim); opacity:.5; margin:0; letter-spacing:.03em; }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- ART HOUSE ---------- */
.arthouse{ background: var(--ink); padding: clamp(70px,9vw,120px) clamp(20px,6vw,56px); border-top:1px solid var(--line); }
.arthouse__inner{
  display:grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: clamp(36px,6vw,72px);
  max-width: 1180px; margin: 0 auto; align-items:start;
}
.arthouse__carousel{
  position:relative; border-radius: 4px; overflow:hidden; aspect-ratio: 4/5; min-height: 380px;
  background: var(--ink-3); z-index:1;
}
.arthouse__track{ display:flex; width:100%; height:100%; transition: transform .55s var(--ease); }
.arthouse__slide{ flex: 0 0 100%; width:100%; height:100%; }
.arthouse__slide img, .arthouse__slide video{ width:100%; height:100%; object-fit:cover; display:block; }
.arthouse__arrow{
  position:absolute; top:50%; transform: translateY(-50%); z-index:3;
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(232,232,192,.35);
  background: rgba(19,18,17,.45); backdrop-filter: blur(4px);
  color: var(--cream); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: background .3s, border-color .3s;
}
.arthouse__arrow:hover{ background: var(--red); border-color: var(--red); }
.arthouse__arrow--prev{ left: 14px; }
.arthouse__arrow--next{ right: 14px; }
.arthouse__dots{ position:absolute; bottom: 16px; left:0; right:0; z-index:3; display:flex; justify-content:center; gap:8px; }
.arthouse__dots button{
  width:7px; height:7px; border-radius:50%; border:none; background: rgba(232,232,192,.4); cursor:pointer; padding:0;
  transition: background .3s, transform .3s;
}
.arthouse__dots button.is-active{ background: var(--red-bright); transform: scale(1.3); }

.arthouse__info{ display:flex; flex-direction:column; justify-content:flex-start; min-width:0; }
.arthouse__quote{
  font-size: 14.5px; line-height: 1.9; color: var(--cream-dim); font-weight:300;
  margin: 0 0 32px; padding: 26px 28px; border-left: 2px solid rgba(158,62,42,.5);
  background: rgba(232,232,192,.03);
}
.arthouse__meta-title{ font-size:14px; color: var(--cream); margin: 0 0 14px; font-weight:500; }
.arthouse__meta ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.arthouse__meta li{ font-size:13.5px; color: var(--cream-dim); line-height:1.6; }
.arthouse__meta li a:hover{ color: var(--red-bright); }
@media (max-width: 880px){
  .arthouse__inner{ grid-template-columns: 1fr; }
  .arthouse__carousel{ aspect-ratio: 4/3; min-height: 260px; margin-bottom: 8px; }
  .arthouse__info{ margin-top: 4px; }
}

/* ---------- VISIT: 주차 안내 ---------- */
.visit__parking{
  border: 1px solid var(--line); border-radius: 4px; padding: 22px 24px; margin-bottom: 30px;
}
.visit__parking-title{ font-family: var(--display); font-size:15px; color: var(--red-bright); margin:0 0 14px; font-weight:600; }
.visit__parking-list{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:8px; }
.visit__parking-list li{ font-size:13.5px; color: var(--cream-dim); font-weight:300; padding-left: 14px; position:relative; }
.visit__parking-list li::before{ content:"–"; position:absolute; left:0; color: var(--red-bright); }
.visit__parking-addr{ font-size:12.5px; color: var(--cream-dim); opacity:.75; margin:0; line-height:1.6; }

.br-mobile{ display:none; }
@media (max-width:560px){ .br-mobile{ display:inline; } }


/* ---------- Requested spacing refinements ---------- */
.menu__col-sub{ margin-top:76px; }
.footer{ padding-top:18px; padding-bottom:20px; gap:8px; }
.footer__logo{ height:204px; margin:-42px 0 -38px; }

@media (max-width:700px){
  .menu__col-sub{ margin-top:68px; }
}

@media (max-width:560px){
  .footer{ padding-top:14px; padding-bottom:18px; gap:7px; }
  .footer__logo{ height:190px; margin:-40px 0 -36px; }
  .footer__addr{ line-height:1.6; }
}


/* ============================================================
   FINAL LAYOUT FIX — 2026-08-02
   카테고리 간격 및 푸터 여백 수정
   기존 .menu__col h3 규칙보다 높은 우선순위를 사용합니다.
============================================================ */

/* 이전 메뉴 설명과 다음 카테고리가 확실히 분리되도록 적용 */
.menu__col h3.menu__col-sub{
  margin-top: 72px;
  margin-bottom: 18px;
}

/* 하단 로고 크기는 유지하고 푸터 전체의 위아래 공간만 축소 */
.footer{
  padding: 10px 20px 16px;
  gap: 5px;
}
.footer__logo{
  height: 204px;
  margin: -48px 0 -46px;
}
.footer__addr,
.footer__copy{
  margin: 0;
}

@media (max-width: 700px){
  .menu__col h3.menu__col-sub{
    margin-top: 62px;
  }
}

@media (max-width: 560px){
  .footer{
    padding: 8px 16px 14px;
    gap: 4px;
  }
  .footer__logo{
    height: 190px;
    margin: -45px 0 -43px;
  }
}


/* ============================================================
   MOBILE HEADER v2.1 — stable PC layout preserved
   Mobile order: logo | Instagram | menu
============================================================ */
.nav__actions{
  display:flex;
  align-items:center;
  gap:16px;
  z-index:3;
}
.nav__toggle,
.mobile-nav{ display:none; }

@media (max-width:720px){
  .nav{
    padding: 14px 16px 12px 10px;
    min-height: 82px;
    background: linear-gradient(to bottom, rgba(19,18,17,.78), rgba(19,18,17,.16), transparent);
  }
  .nav.is-scrolled{
    padding: 10px 16px 10px 10px;
    min-height: 68px;
  }
  .nav__mark{
    margin-left:0;
    flex:0 0 auto;
  }
  .nav__logo{
    height:124px;
    max-width:150px;
    object-fit:contain;
  }
  .nav.is-scrolled .nav__logo{
    height:96px;
  }
  .nav__actions{
    margin-left:auto;
    gap:12px;
  }
  .nav__ig{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 42px;
  }
  .nav__ig svg{
    width:25px;
    height:25px;
  }
  .nav__toggle{
    display:flex;
    width:44px;
    height:44px;
    padding:9px 6px;
    border:0;
    background:transparent;
    color:var(--cream);
    cursor:pointer;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    flex:0 0 44px;
  }
  .nav__toggle span{
    display:block;
    width:30px;
    height:2px;
    margin:0 auto;
    background:currentColor;
    transition:transform .3s var(--ease), opacity .25s ease;
  }
  .nav__toggle.is-active span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .nav__toggle.is-active span:nth-child(2){ opacity:0; }
  .nav__toggle.is-active span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

  .mobile-nav{
    position:absolute;
    top:100%;
    left:12px;
    right:12px;
    display:flex;
    flex-direction:column;
    padding:10px 18px 18px;
    background:rgba(19,18,17,.96);
    border:1px solid var(--line);
    border-radius:4px;
    backdrop-filter:blur(14px);
    transform:translateY(-10px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .3s ease, transform .3s var(--ease), visibility .3s;
  }
  .mobile-nav.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
  }
  .mobile-nav a{
    padding:15px 2px;
    border-bottom:1px solid var(--line);
    font-size:14px;
    letter-spacing:.08em;
    color:var(--cream);
  }
  .mobile-nav a:last-child{ border-bottom:0; }
}

@media (max-width:390px){
  .nav{ padding-left:7px; padding-right:10px; }
  .nav__logo{ height:114px; max-width:138px; }
  .nav.is-scrolled .nav__logo{ height:90px; }
  .nav__actions{ gap:8px; }
}

/* ============================================================
   MOBILE HEADER v2.2 — compact vertical spacing
   로고 크기는 유지하면서 헤더 위아래 공백만 축소
============================================================ */
@media (max-width:720px){
  .nav{
    height:76px;
    min-height:76px;
    padding:0 14px 0 4px;
    align-items:center;
  }
  .nav.is-scrolled{
    height:62px;
    min-height:62px;
    padding:0 14px 0 4px;
  }
  .nav__mark{
    height:76px;
    display:flex;
    align-items:center;
  }
  .nav.is-scrolled .nav__mark{
    height:62px;
  }
  .nav__logo{
    height:110px;
    max-width:145px;
    margin:-17px 0;
  }
  .nav.is-scrolled .nav__logo{
    height:94px;
    margin:-16px 0;
  }
  .nav__actions{
    height:100%;
    align-items:center;
    gap:10px;
  }
  .nav__ig{
    width:38px;
    height:38px;
    flex-basis:38px;
  }
  .nav__ig svg{
    width:24px;
    height:24px;
  }
  .nav__toggle{
    width:40px;
    height:40px;
    flex-basis:40px;
    padding:7px 4px;
  }
  .nav__toggle span{
    width:28px;
  }
  .mobile-nav{
    left:8px;
    right:8px;
  }
}

@media (max-width:390px){
  .nav,
  .nav.is-scrolled{
    padding-left:2px;
    padding-right:10px;
  }
  .nav__logo{
    height:104px;
    max-width:136px;
    margin:-14px 0;
  }
  .nav.is-scrolled .nav__logo{
    height:90px;
    margin:-14px 0;
  }
  .nav__actions{
    gap:7px;
  }
}

/* ============================================================
   MOBILE ART HOUSE v2.3 — portrait poster ratio
   기존 880px 구간의 4:3 규칙을 모바일에서 확실히 덮어씁니다.
============================================================ */
@media (max-width:720px){
  .arthouse{
    padding-top:64px;
  }
  .arthouse__carousel{
    width:100%;
    aspect-ratio:4 / 5;
    min-height:0;
    height:auto;
    margin:0 0 28px;
    background:var(--ink-3);
  }
  .arthouse__track,
  .arthouse__slide{
    height:100%;
  }
  .arthouse__slide img,
  .arthouse__slide video{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    background:var(--ink-3);
  }
  .arthouse__arrow{
    width:42px;
    height:42px;
  }
  .arthouse__arrow--prev{ left:12px; }
  .arthouse__arrow--next{ right:12px; }
  .arthouse__dots{ bottom:14px; }
  .arthouse__info{ margin-top:0; }
}

@media (max-width:390px){
  .arthouse__carousel{
    aspect-ratio:4 / 5;
    margin-bottom:24px;
  }
}

/* ============================================================
   DESKTOP STORY v2.4 — image left / copy right with wider gutters
   PC에서만 적용하며 모바일 레이아웃은 기존 설정을 유지합니다.
============================================================ */
@media (min-width: 881px){
  .story{
    grid-template-columns: minmax(360px, .9fr) minmax(480px, 1.1fr);
    gap: clamp(64px, 7vw, 120px);
    padding-left: clamp(72px, 9vw, 170px);
    padding-right: clamp(72px, 9vw, 170px);
    align-items:start;
  }
  .story__figure{
    grid-column:1;
    grid-row:1;
    width:100%;
    max-width:620px;
    justify-self:end;
    top:112px;
  }
  .story__inner{
    grid-column:2;
    grid-row:1;
    width:100%;
    max-width:680px;
    justify-self:start;
    padding-top:6px;
  }
  .story__title,
  .story__text{
    max-width:100%;
  }
}

@media (min-width: 881px) and (max-width: 1180px){
  .story{
    grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr);
    gap: clamp(42px, 5vw, 72px);
    padding-left: clamp(44px, 6vw, 72px);
    padding-right: clamp(44px, 6vw, 72px);
  }
}

/* ============================================================
   DESKTOP HEADER v2.5 — compact vertical spacing
   PC에서만 상단 메뉴바의 위아래 여백을 줄입니다.
============================================================ */
@media (min-width: 721px){
  .nav{
    min-height: 82px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(232,232,192,.09);
  }
  .nav.is-scrolled{
    min-height: 68px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-bottom-color: rgba(232,232,192,.10);
  }
  .nav__mark,
  .nav__actions,
  .nav__links{
    align-items: center;
  }
  .nav__logo{
    height: 112px;
    margin: -20px 0;
  }
  .nav.is-scrolled .nav__logo{
    height: 94px;
    margin: -16px 0;
  }
}

/* ============================================================
   DESKTOP HEADER v2.6 — remove divider line
   헤더와 히어로 사이에 보이던 border를 완전히 제거합니다.
============================================================ */
@media (min-width: 721px){
  .nav,
  .nav.is-scrolled{
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
}

/* ============================================================
   MOBILE STORY TEXT FIX — v2.7
   PC 레이아웃은 유지하고 모바일에서만 본문 강제 줄바꿈을 해제합니다.
============================================================ */
@media (max-width: 700px){
  .story__inner{
    width: 100%;
    max-width: none;
  }

  .story__title{
    font-size: clamp(27px, 7.4vw, 34px);
    line-height: 1.48;
    letter-spacing: -0.025em;
    word-break: keep-all;
    overflow-wrap: break-word;
    margin-bottom: 30px;
  }

  /* PC용 <br> 때문에 모바일에서 문장이 토막 나는 문제 방지 */
  .story__text br{
    display: none;
  }

  .story__text{
    max-width: none;
    font-size: clamp(15px, 4.1vw, 17px);
    line-height: 1.95;
    letter-spacing: -0.012em;
    word-break: keep-all;
    overflow-wrap: break-word;
    margin-bottom: 28px;
  }

  .story__text--last{
    margin-bottom: 38px;
  }
}

@media (max-width: 390px){
  .story__title{
    font-size: 26px;
  }

  .story__text{
    font-size: 15px;
    line-height: 1.9;
  }
}


/* ============================================================
   ART HOUSE TEXT v2.8 — responsive paragraph flow
   강제 줄바꿈 대신 문단 구조를 사용해 모바일에서 자연스럽게 정렬
============================================================ */
.arthouse__quote p{
  margin:0 0 1.55em;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.arthouse__quote p:last-child{ margin-bottom:0; }

@media (max-width:720px){
  .arthouse__quote{
    padding:24px 22px;
    font-size:14.5px;
    line-height:1.95;
  }
  .arthouse__quote p{
    margin-bottom:1.65em;
  }
  .arthouse__meta li{
    word-break:keep-all;
    overflow-wrap:break-word;
  }
}

@media (max-width:390px){
  .arthouse__quote{
    padding:22px 18px;
    font-size:14px;
    line-height:1.9;
  }
}

/* ============================================================
   ANNOUNCEMENT BAR — 대회 개최 안내 배너
============================================================ */
.announce-bar{
  position: fixed; top:0; left:0; right:0; z-index: 160;
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding: 11px 44px 11px 16px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red-bright) 100%);
  color: #fff; text-align:center;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.announce-bar.is-hidden{ transform: translateY(-100%); opacity:0; pointer-events:none; }
.announce-bar__text{
  margin:0; font-size: 12.5px; letter-spacing:.01em; line-height:1.5;
}
.announce-bar__text strong{ font-weight:600; }
.announce-bar__text a{
  text-decoration: underline; text-underline-offset:2px; font-weight:500; white-space:nowrap;
}
.announce-bar__text a:hover{ opacity:.85; }
.announce-bar__close{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; border:none; background: rgba(255,255,255,.18);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: background .25s;
}
.announce-bar__close:hover{ background: rgba(255,255,255,.32); }
@media (max-width: 640px){
  .announce-bar{ padding: 10px 40px 10px 12px; }
  .announce-bar__text{ font-size: 11.5px; }
}

/* ============================================================
   NOTICE MODAL — 공지 팝업
============================================================ */
.notice-modal{
  position: fixed; inset:0; z-index: 300;
  display:flex; align-items:center; justify-content:center; padding: 20px;
  opacity:0; visibility:hidden; transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.notice-modal.is-open{ opacity:1; visibility:visible; transition: opacity .35s var(--ease); }
.notice-modal__backdrop{
  position:absolute; inset:0; background: rgba(10,9,8,.72); backdrop-filter: blur(3px);
}
.notice-modal__panel{
  position:relative; width: min(420px, 100%); max-height: 86vh; overflow-y:auto;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 40px 32px 32px; text-align:center;
  transform: translateY(18px) scale(.98); transition: transform .4s var(--ease);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.notice-modal.is-open .notice-modal__panel{ transform: translateY(0) scale(1); }
.notice-modal__close{
  position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color: var(--cream-dim);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all .25s;
}
.notice-modal__close:hover{ background: var(--red); border-color:var(--red); color:#fff; }
.notice-modal__eyebrow{ font-size:11px; letter-spacing:.3em; color: var(--red-bright); margin:0 0 14px; }
.notice-modal__title{
  font-family: var(--display); font-weight:700; font-size: 21px; line-height:1.5;
  color: var(--cream); margin: 0 0 18px;
}
.notice-modal__body{
  font-size: 13.5px; line-height:1.85; color: var(--cream-dim); font-weight:300; margin: 0 0 28px;
}
.notice-modal__actions{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.notice-modal__cta{
  display:inline-flex; align-items:center; justify-content:center; width:100%;
  background: var(--red); color:#fff; padding: 13px 20px; border-radius: 999px;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; transition: background .3s;
}
.notice-modal__cta:hover{ background: var(--red-bright); }
.notice-modal__hide{
  display:flex; align-items:center; gap:8px; font-size:12.5px; color: var(--cream-dim); cursor:pointer;
}
.notice-modal__hide input{ accent-color: var(--red-bright); width:14px; height:14px; cursor:pointer; }

.notice-modal__panel--banner{
  width: min(420px, 92vw); max-height: 90vh; padding: 0 0 22px; text-align:center; overflow-y:auto;
}
.notice-modal__banner-img{
  display:block; width:100%; height:auto; border-radius: 6px 6px 0 0;
}
.notice-modal__panel--banner .notice-modal__actions{ padding: 20px 22px 0; }
.notice-modal__panel--banner .notice-modal__close{
  background: rgba(10,9,8,.55); border-color: rgba(255,255,255,.4); color:#fff;
  backdrop-filter: blur(3px); z-index:2;
}
.notice-modal__panel--banner .notice-modal__close:hover{ background: var(--red); border-color: var(--red); }

@media (max-width: 560px){
  .notice-modal__panel--banner .notice-modal__actions{ padding: 16px 18px 0; }
}


/* ============================================================
   BBB 2026 HOME BANNER — PC ONLY
   중앙 정렬 + 화면을 꽉 채우지 않도록 축소
============================================================ */
.bbb-home-banner{
  display:none !important;
}
.bbb-home-banner__img{
  display:block;
  width:min(84vw, 1440px);
  max-width:100%;
  height:auto;
  margin:0 auto;
  object-fit:contain;
}

/* 모바일에서는 홈 배너를 숨기고 공지 팝업은 그대로 표시 */
@media (max-width:720px){
  .bbb-home-banner{ display:none !important; }

  .notice-modal{
    display:flex;
    padding:12px;
  }
  .notice-modal__panel--banner{
    width:min(92vw, 430px);
    max-height:88dvh;
    padding-bottom:18px;
  }
  .notice-modal__banner-img{
    width:100%;
    height:auto;
    object-fit:contain;
  }
  .notice-modal__panel--banner .notice-modal__actions{
    padding:16px 16px 0;
  }
}

@media (min-width:721px) and (max-width:1200px){
  .bbb-home-banner__img{ width:min(88vw, 1180px); }
}


/* ---------- FILTER COFFEE LINEUP ---------- */
.filter-lineup{
  max-width: 980px;
  margin: 0 auto clamp(56px,7vw,88px);
  padding: clamp(34px,4vw,52px) clamp(24px,4vw,48px);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(232,232,192,.025);
}
.filter-lineup__head{
  text-align:center;
  margin-bottom: 34px;
}
.filter-lineup__head h3{
  margin:0;
  font-family: var(--display);
  font-size: clamp(30px,4.2vw,46px);
  line-height:1;
  letter-spacing:.02em;
  color:var(--cream);
}
.filter-lineup__sub{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:14px;
  color:var(--red-bright);
  font-size:12px;
  letter-spacing:.08em;
  font-weight:500;
}
.filter-lineup__sub::before,
.filter-lineup__sub::after{
  content:"";
  width:min(92px,18vw);
  height:1px;
  background:rgba(193,80,47,.8);
}
.filter-lineup__list{
  display:flex;
  flex-direction:column;
}
.filter-lineup__item{
  display:grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap:18px;
  padding:30px 0;
  border-top:1px dotted rgba(193,80,47,.62);
}
.filter-lineup__item:first-child{
  border-top:0;
  padding-top:0;
}
.filter-lineup__item:last-child{
  padding-bottom:0;
}
.filter-lineup__num{
  width:30px;
  height:30px;
  border:1px solid rgba(193,80,47,.78);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--red-bright);
  font-size:14px;
  line-height:1;
  margin-top:2px;
}
.filter-lineup__content{
  min-width:0;
}
.filter-lineup__content h4{
  margin:0 0 7px;
  font-family:var(--display);
  font-size:20px;
  line-height:1.2;
  color:var(--cream);
  font-weight:700;
}
.filter-lineup__ko{
  margin:0 0 8px;
  font-size:15px;
  line-height:1.45;
  color:var(--cream);
  font-weight:500;
}
.filter-lineup__desc{
  margin:0;
  font-size:13px;
  line-height:1.72;
  color:var(--cream-dim);
  font-weight:300;
}
.filter-lineup__origin{
  margin:13px 0 0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--cream-dim);
  opacity:.82;
  letter-spacing:.015em;
}

@media (max-width: 700px){
  .filter-lineup{
    margin-top: 4px;
    margin-bottom: 54px;
    padding: 30px 20px 32px;
  }
  .filter-lineup__head{
    margin-bottom:24px;
  }
  .filter-lineup__head h3{
    font-size:31px;
  }
  .filter-lineup__sub{
    gap:8px;
    font-size:10px;
    letter-spacing:.06em;
    white-space:nowrap;
  }
  .filter-lineup__item{
    grid-template-columns: 32px minmax(0,1fr);
    gap:12px;
    padding:25px 0;
  }
  .filter-lineup__num{
    width:28px;
    height:28px;
    font-size:13px;
  }
  .filter-lineup__content h4{
    font-size:17px;
    line-height:1.22;
    overflow-wrap:anywhere;
  }
  .filter-lineup__ko{
    font-size:14px;
    line-height:1.5;
  }
  .filter-lineup__desc{
    font-size:12.5px;
    line-height:1.7;
  }
  .filter-lineup__desc br{
    display:none;
  }
  .filter-lineup__origin{
    font-size:12px;
    overflow-wrap:anywhere;
  }

  /* 모바일 메뉴 텍스트가 가격 때문에 과하게 좁아지지 않도록 정리 */
  .menu__row-head{
    align-items:flex-start;
    gap:10px;
  }
  .menu__row-head span{
    min-width:0;
    overflow-wrap:anywhere;
  }
  .menu__row-desc br{
    display:none;
  }
  .menu__mini-list li{
    align-items:baseline;
  }
}


/* ---------- MOBILE MENU COPY / LINE BREAKS ---------- */
.mo-br{ display:none; }

@media (max-width:700px){
  .menu__col{
    min-width:0;
  }

  .menu__row{
    padding:14px 0;
  }

  .menu__row-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    column-gap:12px;
  }

  .menu__row-head span{
    min-width:0;
    line-height:1.48;
    word-break:keep-all;
    overflow-wrap:normal;
  }

  .menu__row-head b{
    white-space:nowrap;
    padding-top:1px;
  }

  .menu__row-desc{
    max-width:100%;
    margin-top:5px;
    padding-right:4px;
    font-size:12.5px;
    line-height:1.72;
    word-break:keep-all;
    overflow-wrap:break-word;
    text-wrap:pretty;
  }

  .menu__row-desc .mo-br,
  .menu__row-desc br.mo-br{
    display:block;
  }

  /* 기존 PC용 강제 줄바꿈은 모바일에서 제거하고, mo-br만 사용 */
  .menu__row-desc br:not(.mo-br){
    display:none;
  }

  .menu__mini{
    margin-top:18px;
  }

  .menu__mini-list li{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    column-gap:12px;
    align-items:baseline;
  }
}


/* ---------- BBB MOBILE BANNER VISIBILITY FIX ---------- */
/* 기본값: PC/태블릿에서는 모바일 배너 숨김 */
.bbb-mobile-banner{
  display:none !important;
}

/* 모바일에서만 표시 */
@media screen and (max-width:720px){
  .bbb-mobile-banner{
    display:block !important;
    width:100%;
    margin:0;
    padding:0;
    background:#f1ede5;
    line-height:0;
    overflow:hidden;
  }

  .bbb-mobile-banner__img{
    display:block;
    width:100%;
    max-width:none;
    height:auto;
    margin:0;
  }
}

/* PC용 BBB 배너는 모바일에서 숨김 */
@media screen and (max-width:720px){
  .bbb-home-banner{
    display:none !important;
  }
}


/* ---------- PC MENU COPY / LINE BREAKS ---------- */
.pc-br{ display:block; }

@media (min-width:701px){
  .menu__row-desc{
    max-width:34ch;
    line-height:1.7;
    word-break:keep-all;
    overflow-wrap:normal;
    text-wrap:pretty;
  }

  .menu__row-head{
    align-items:flex-start;
  }

  .menu__row-head span{
    max-width:calc(100% - 54px);
    line-height:1.45;
    word-break:keep-all;
  }

  .menu__row-head b{
    padding-top:1px;
  }

  .menu__row{
    padding-bottom:4px;
  }
}

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

/* ============================================================
   FLOATING SHOP BUTTON — 원두 구매 (스크롤 따라다니는 버튼)
============================================================ */
/* Desktop: nav shop pill button (next to 오시는 길) */
.nav__shop{
  background: var(--red); color:#fff !important; padding: 9px 18px !important; border-radius: 999px;
  display:inline-flex; align-items:center; justify-content:center; line-height:1.2;
  transition: background .3s var(--ease);
}
.nav__shop::after{ display:none; }
.nav__shop:hover{ background: var(--red-bright); color:#fff; }
@media (max-width: 720px){ .nav__shop{ display:none; } }

/* Mobile: fixed bottom bar shop button */
.float-shop{
  display:none;
}
@media (max-width: 720px){
  .float-shop{
    display:flex; align-items:center; justify-content:center; gap:10px;
    position: fixed; left:0; right:0; bottom:0; z-index: 140;
    background: var(--red); color:#fff;
    padding: 16px clamp(20px,6vw,56px);
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    font-size:14.5px; font-weight:500; letter-spacing:.02em;
    box-shadow: 0 -6px 24px rgba(0,0,0,.35);
    transition: background .3s var(--ease);
  }
  .float-shop:hover, .float-shop:active{ background: var(--red-bright); }
  .float-shop svg{ width:19px; height:19px; flex-shrink:0; }
  body{ padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   PAGE HERO — 서브페이지(오시는 길 등) 상단 헤더
============================================================ */
.page-hero{
  background: var(--ink); border-bottom: 1px solid var(--line);
  padding: clamp(150px,18vw,190px) clamp(20px,6vw,56px) clamp(50px,6vw,70px);
  text-align:center;
}
.page-hero__inner{ max-width: 640px; margin:0 auto; }
.page-hero__eyebrow{ font-size:12px; letter-spacing:.35em; color: var(--red-bright); text-transform:uppercase; margin:0 0 16px; }
.page-hero__title{ font-family: var(--display); font-weight:700; font-size: clamp(34px,5vw,54px); color: var(--cream); margin:0 0 14px; }
.page-hero__sub{ font-size:14.5px; color: var(--cream-dim); font-weight:300; margin:0; }

.visit--page{ padding-top: clamp(60px,8vw,100px); }
.nav__links a.is-active{ color: var(--cream); }
.nav__links a.is-active::after{ right:0; }


/* ============================================================
   ALIVE EXHIBITION — 2026-09-01
   PC / MOBILE responsive typography & exhibition metadata
============================================================ */
.arthouse__info--alive{ min-width:0; }
.arthouse__heading{ margin-bottom:10px !important; }
.arthouse__open{
  margin:0 0 24px;
  font-family:var(--display);
  font-size:clamp(20px,2vw,27px);
  line-height:1.35;
  font-weight:700;
  color:var(--cream);
  letter-spacing:-.01em;
}
.arthouse__quote--alive{
  margin-bottom:28px;
  padding:24px 26px;
  font-size:14px;
  line-height:1.85;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.arthouse__quote--alive p{ margin:0 0 17px; }
.arthouse__quote--alive p:last-child{ margin-bottom:0; }
.arthouse__meta--alive{
  display:flex;
  flex-direction:column;
  gap:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.arthouse__meta-row{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:14px;
  padding:11px 0;
  border-bottom:1px solid rgba(232,232,192,.08);
  align-items:start;
}
.arthouse__meta-row:last-child{ border-bottom:0; }
.arthouse__meta-label{
  color:var(--red-bright);
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  white-space:nowrap;
}
.arthouse__meta-value{
  min-width:0;
  color:var(--cream-dim);
  font-size:13.5px;
  line-height:1.65;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
.arthouse__meta-value a{
  color:var(--cream);
  text-decoration:underline;
  text-decoration-color:rgba(232,232,192,.32);
  text-underline-offset:3px;
  white-space:nowrap;
  transition:color .25s, text-decoration-color .25s;
}
.arthouse__meta-value a:hover{
  color:var(--red-bright);
  text-decoration-color:var(--red-bright);
}
.arthouse__closing{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-top:26px;
  padding:18px 20px;
  border:1px solid var(--line);
  background:rgba(232,232,192,.025);
}
.arthouse__closing-icon{ font-size:20px; line-height:1.4; }
.arthouse__closing div{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.arthouse__closing strong{ color:var(--cream); font-size:15px; line-height:1.5; }
.arthouse__closing span:not(.arthouse__closing-icon){ color:var(--cream-dim); font-size:12.5px; line-height:1.5; }

/* 포스터 원본 비율을 훼손하지 않고 전체가 보이도록 표시 */
.arthouse__slide img{
  object-fit:contain !important;
  object-position:center;
  background:var(--ink-3);
}

@media (max-width:880px){
  .arthouse__inner{ grid-template-columns:1fr; }
  .arthouse__carousel{
    width:min(100%,620px);
    justify-self:center;
    aspect-ratio:4 / 5;
    min-height:0;
    margin-bottom:12px;
  }
  .arthouse__info--alive{ width:100%; max-width:720px; justify-self:center; }
}

@media (max-width:720px){
  .arthouse__open{ margin-bottom:20px; font-size:22px; }
  .arthouse__quote--alive{
    padding:20px 18px;
    font-size:13.5px;
    line-height:1.82;
  }
  .arthouse__pc-break{ display:none; }
  .arthouse__meta-row{ grid-template-columns:52px minmax(0,1fr); gap:10px; padding:10px 0; }
  .arthouse__meta-value{ font-size:13px; }
  .arthouse__planner-sep{ display:none; }
  .arthouse__planner-next{ display:block; margin-top:2px; }
  .arthouse__closing{ margin-top:22px; padding:16px; }
}

@media (max-width:390px){
  .arthouse__quote--alive{ padding:18px 15px; font-size:13px; }
  .arthouse__meta-row{ grid-template-columns:46px minmax(0,1fr); gap:8px; }
  .arthouse__meta-label{ font-size:11.5px; }
  .arthouse__meta-value{ font-size:12.5px; }
  .arthouse__closing{ gap:10px; padding:14px; }
}