/* 소하우스바 — 레이아웃/컴포넌트. 색·폰트는 tokens.css 한 곳에서만 정의한다 */

/* ── 상단 내비 ─────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;
  padding:22px 44px;color:var(--ink);transition:background .3s,padding .3s,box-shadow .3s}
.nav.solid{background:rgba(244,244,244,.96);backdrop-filter:blur(10px);padding:14px 44px;box-shadow:0 1px 0 var(--line)}
.nav.onphoto{color:#fff}
.nav .logomark{width:126px;flex:none}
.nav menu{display:flex;gap:26px;font-size:13px;list-style:none}
.nav menu a:hover{color:var(--olive)}
.nav.onphoto menu a:hover{opacity:.7;color:inherit}
.navbtn{display:none;width:34px;height:34px;position:relative;z-index:3;background:none;border:0;cursor:pointer;color:var(--ink)}
.navbtn i{position:absolute;left:6px;right:6px;height:2px;background-color:currentColor;transition:.25s}
.navbtn i:nth-child(1){top:12px}.navbtn i:nth-child(2){bottom:12px}
.navbtn[aria-expanded="true"] i:nth-child(1){top:16px;transform:rotate(45deg)}
.navbtn[aria-expanded="true"] i:nth-child(2){bottom:16px;transform:rotate(-45deg)}

/* ── 히어로 ───────────────────────────────── */
/* 데스크톱: 확장된 캔버스 하나를 그대로 노출 — 합성이 아니라서 이음매가 없다 */
.hero{position:relative;overflow:hidden;background:var(--bg)}
.hero img{width:100%;height:auto;display:block}

/* ── 공통 섹션 ─────────────────────────────── */
.sec{padding:104px 0;border-bottom:1px solid var(--line)}
.sec.last{border-bottom:0}
.sec h2{margin-top:18px;font-weight:700;font-size:clamp(24px,3.6vw,40px);letter-spacing:-1.2px;margin-bottom:48px}
.band{padding:104px 0;border-bottom:1px solid var(--line)}
.band .slogan{color:var(--navy);width:min(280px,54vw);margin-bottom:34px}
.band h2{margin-top:18px;font-weight:400;font-size:clamp(22px,3.4vw,38px);line-height:1.55;letter-spacing:-1px;max-width:840px}
.band p{margin-top:26px;max-width:620px;font-size:14.5px;color:var(--body);line-height:2.15}
.band .dl{margin-top:32px;max-width:460px}

.alley img{width:100%;height:auto;display:block}
.quad{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;align-items:start}
.quad img{width:100%;height:auto;display:block}

.split{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);align-items:stretch}
.split .im{overflow:hidden;background:var(--surface);display:flex;align-items:center}
.split .im img{width:100%;height:auto;display:block}
.split .tx{display:flex;flex-direction:column;justify-content:center;padding:80px 6vw;background:var(--surface)}
.split h3{margin:18px 0 20px;font-weight:700;font-size:26px;line-height:1.5;letter-spacing:-.8px}
.split p{font-size:14.5px;color:var(--body);line-height:2.15}
.split .dl{margin-top:32px}

/* ── 정의형 목록 ───────────────────────────── */
.dl{border-top:1px solid var(--ink)}
.dl>div{display:grid;grid-template-columns:104px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.dl dt{color:var(--dim);font-size:13px;padding-top:2px}
.dl dd em{font-style:normal;display:block;font-size:13px;color:var(--dim);margin-top:5px;line-height:1.85}

/* ── 메뉴 ─────────────────────────────────── */
.sig{margin-bottom:2px}
.sig img{width:100%;height:auto;display:block}
.sig figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 2px 0}
.sig .t{font-size:19px;font-weight:700;letter-spacing:-.5px}
.sig .t em{display:block;font-style:normal;font-size:13px;font-weight:300;color:var(--dim);margin-top:6px}
.sig .p{font-size:15px;color:var(--body);white-space:nowrap}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px;margin:44px 0 48px;align-items:start}
.pair .ph{position:relative;width:100%;padding-top:150%;overflow:hidden;background:var(--line)}
.pair .ph img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.pair figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:16px 2px 0;font-size:14.5px;min-width:0}
.pair figcaption span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pair figcaption span:last-child{color:var(--dim);white-space:nowrap;flex-shrink:0}
.dwide img{width:100%;height:auto;display:block}
.dwide.spaced{margin-top:64px}
.dwide figcaption{padding:16px 2px 0;font-size:13.5px;color:var(--dim)}
.gh{margin-top:52px;font-size:16px;font-weight:700;letter-spacing:-.3px;padding-bottom:12px;border-bottom:1px solid var(--ink);display:flex;justify-content:space-between;align-items:baseline}
.gh span{font-weight:300;font-size:12.5px;color:var(--dim)}
.etc{margin-top:14px;font-size:13px;color:var(--dim)}
.mrow{display:flex;align-items:baseline;gap:16px;padding:17px 2px;border-bottom:1px solid var(--line)}
.mrow .n{font-size:15.5px}
.mrow .n em{font-style:normal;color:var(--dim);font-size:12.5px;margin-left:10px}
.mrow .ln{flex:1;border-bottom:1px dotted var(--line2);transform:translateY(-4px)}
.mrow .p{font-size:14px;color:var(--body);white-space:nowrap}
.mrow.wine{align-items:flex-start}
.mrow.wine .n{flex:1}
.mrow.wine .n em{display:block;margin:7px 0 0;line-height:1.85;max-width:620px}
.mrow.wine .ln{display:none}
.more{display:inline-block;margin-top:30px;font-size:13.5px;color:var(--olive);border-bottom:1px solid var(--olive);padding-bottom:3px}

/* ── 에피소드 (메인의 가로 스트립) ────────────── */
.film{display:flex;align-items:flex-start;gap:2px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x proximity}
.film a{flex:0 0 clamp(240px,30vw,360px);scroll-snap-align:start}
.film img{width:100%;aspect-ratio:4/5;object-fit:cover}
.film figcaption{padding:16px 2px 0}
.film .yr{font-size:12px;color:var(--dim);letter-spacing:1.5px}
.film h3{margin:8px 0 7px;font-weight:700;font-size:17px;letter-spacing:-.4px;transition:.25s}
.film a:hover h3{color:var(--olive)}
.film p{font-size:13px;color:var(--body);line-height:1.9}

/* ── 에피소드 목록 페이지 ───────────────────── */
.eplist{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 24px;align-items:start}
.eplist img{width:100%;aspect-ratio:4/5;object-fit:cover}
.eplist .yr{margin-top:16px;font-size:12px;color:var(--dim);letter-spacing:1.5px}
.eplist h2{margin:8px 0 8px;font-weight:700;font-size:19px;letter-spacing:-.5px;transition:.25s}
.eplist a:hover h2{color:var(--olive)}
.eplist p{font-size:13.5px;color:var(--body);line-height:1.95}

/* ── 에피소드 상세 ─────────────────────────── */
.ephead{padding:150px 0 60px;border-bottom:1px solid var(--line)}
.ephead h1{margin:16px 0 22px;font-weight:700;font-size:clamp(28px,4.6vw,50px);letter-spacing:-1.6px}
.ephead p{font-size:15px;color:var(--body);line-height:2.1;max-width:620px}
.stack{padding:64px 0 20px}
.stack figure{margin-bottom:64px}
.stack img{width:100%;height:auto;background:var(--line)}
.stack figcaption{margin-top:16px;font-size:13.5px;color:var(--dim);line-height:1.95;max-width:640px}
.stack video{width:100%;height:auto;display:block;background:#000}
.stack .wide{max-width:1200px;margin-left:auto;margin-right:auto}
.epnav{display:grid;grid-template-columns:1fr 1fr;gap:2px;border-top:1px solid var(--ink)}
.epnav a{padding:38px 30px;background:var(--surface);transition:.25s}
.epnav a:hover{background:var(--bg)}
.epnav a:hover strong{color:var(--olive)}
.epnav span{font-size:12px;color:var(--dim);letter-spacing:1.5px}
.epnav strong{display:block;margin-top:9px;font-weight:700;font-size:17px;letter-spacing:-.4px;transition:.25s}
.epnav a:last-child{text-align:right}

/* ── FAQ ──────────────────────────────────── */
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--ink)}
.faq summary{padding:22px 2px;font-size:15.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--dim)}
.faq details[open] summary::after{content:"−"}
.faq p{padding:0 2px 24px;font-size:14px;color:var(--body);line-height:2.05;max-width:760px}

/* ── 오시는 길 ─────────────────────────────── */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.ghost{display:inline-block;padding:15px 30px;border:1px solid var(--line2);color:var(--ink);font-size:13.5px}
.ghost:hover{border-color:var(--olive);color:var(--olive)}

/* ── 푸터 ─────────────────────────────────── */
footer{background:var(--navy);color:#fff;padding:64px 0 78px;font-size:13px}
footer .logomark{width:126px;margin-bottom:26px;opacity:.94}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer h4{font-size:12px;letter-spacing:2px;opacity:.6;margin-bottom:14px;font-weight:400}
footer li{list-style:none;margin-bottom:8px;opacity:.9}
footer a:hover{text-decoration:underline}
footer .fine{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);font-size:12px;opacity:.62;line-height:1.9}

/* ── 반응형 ───────────────────────────────── */
@media(max-width:900px){
  .nav{padding:16px 22px}.nav.solid{padding:12px 22px}
  .navbtn{display:block}
  .nav menu{position:fixed;inset:0 0 auto 0;top:0;z-index:2;padding:76px 22px 30px;flex-direction:column;gap:0;
    background:var(--bg);color:var(--ink);transform:translateY(-100%);transition:transform .32s;box-shadow:0 8px 24px rgba(0,0,0,.1)}
  .nav menu.open{transform:translateY(0)}
  .nav menu li{border-bottom:1px solid var(--line)}
  .nav menu a{display:block;padding:16px 2px;font-size:16px}
  .hero{height:100vh}
  .hero img{width:100%;height:100%;object-fit:cover;object-position:center 50%;transform:scale(1.1);transform-origin:center}
  .split,.visit,.eplist{grid-template-columns:1fr}
  .quad{grid-template-columns:1fr 1fr}

  .sec,.band{padding:68px 0}
  .ephead{padding:110px 0 44px}
  .stack figure{margin-bottom:40px}
  footer .cols{grid-template-columns:1fr;gap:28px}
  .epnav{grid-template-columns:1fr}.epnav a:last-child{text-align:left}
}