/* 더결 공통 스타일 — index + 서브페이지 공유. 폰트: Pretendard */
@font-face{font-family:'KoPub Dotum';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/KoPubWorldDotumLight.woff2') format('woff2')}
@font-face{font-family:'KoPub Dotum';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/KoPubWorldDotumMedium.woff2') format('woff2')}
@font-face{font-family:'KoPub Dotum';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/KoPubWorldDotumBold.woff2') format('woff2')}

:root{
  /* 전 사이트 공통 이징 토큰 — 모션은 여기 하나만 고친다 */
  --ease:cubic-bezier(.16,.84,.44,1);
  --bg:#fbf7f0;
  --beige:#d8c5af;
  --enzyme:#f5f1eb;
  --ink:#4a3a2d;
  --muted:#736153;
  --accent:#be8c68;
  --accent-soft:#d7c0a7;
  --tl-accent:#b99e80;
  --footer:#43362b;
  --hairline:rgba(74,58,45,.13);
  --gutter:clamp(20px, 3.9vw, 80px);
  --content:1680px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Pretendard','Noto Sans KR',sans-serif;background:var(--bg);color:var(--ink);font-weight:400;letter-spacing:-.01em;word-break:keep-all}
/* 한글 줄넘김을 어절 단위로 — 단어 중간에서 끊기지 않게, 제목은 균형 있게 */
h1,h2,h3,.title,.hero-copy h1,.cr-en{text-wrap:balance}
p{text-wrap:pretty}
img{display:block}
a{color:inherit;text-decoration:none}
.inner{max-width:var(--content);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

.eyebrow{font-size:clamp(11px,.9vw,13px);color:var(--accent);font-weight:500;letter-spacing:.18em;text-transform:uppercase}
/* 라벨류 타이포 정본 — 크기·두께·자간·행간을 한 곳에서 고정한다.
   이중 클래스(.eyebrow.eyebrow)로 특이도를 올린 이유: `.philo p`·`.proj-card .body>p` 같은
   섹션별 p 규칙이 (0,1,1)/(0,2,1)로 더 세서 라벨을 삼키던 문제(브랜드 eyebrow 27px 렌더) */
.eyebrow.eyebrow,.crumb.crumb,.kicker.kicker,.kl.kl,.pn.pn,.tn.tn,.vn.vn,.sn.sn{
  font-size:clamp(11px,.9vw,13px);font-weight:500;letter-spacing:.18em;line-height:1.5}
/* 본문 h3 두께·행간 통일(크기는 위계상 섹션별 유지) */
h3{font-weight:500;line-height:1.5}
.sec-head{text-align:center;max-width:780px;margin:0 auto;padding:0 var(--gutter)}
.sec-head .title{margin-top:26px}
.sec-desc{margin-top:26px;font-weight:400;color:var(--muted);line-height:1.8;font-size:clamp(14px,1.05vw,16px)}
/* 제목 2역할만 둔다: 일반 h2(진술문) / .title(섹션 제목) */
h2{font-weight:600;letter-spacing:-.01em;line-height:1.5}
.title.title{font-size:clamp(26px,2.5vw,38px);font-weight:600;letter-spacing:-.01em;line-height:1.39}
.btn-line{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(74,58,45,.2);border-radius:100px;font-size:15px;color:var(--ink);background:transparent;cursor:pointer;transition:background .25s var(--ease);padding:0 34px;height:50px}
.btn-line:hover{background:rgba(74,58,45,.06)}
/* 후기 '더보기' — 전 페이지 공통, 톤앤매너(언더라인 accent 텍스트). 모바일에서만 노출 */
.story-more{display:none;align-self:flex-start;margin-top:16px;padding:0 0 3px;background:none;border:0;border-bottom:1px solid rgba(190,140,104,.5);
  color:var(--accent);font-family:inherit;font-size:12.5px;font-weight:500;letter-spacing:.02em;cursor:pointer;transition:opacity .3s var(--ease),border-color .3s var(--ease)}
.story-more:hover{opacity:.7}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);z-index:50;transition:background .45s var(--ease),box-shadow .45s var(--ease)}
.nav .logo img{width:clamp(84px,6.6vw,100px);height:auto;transition:opacity .3s var(--ease)}
/* 로고가 상단에 붙어 보이던 문제 — 우측·하단으로 살짝 내림 */
.nav .logo{display:block;margin-left:clamp(6px,1.2vw,22px);transform:translateY(clamp(4px,.6vw,10px))}
.nav .logo .logo-dark{display:none}
.nav-menu{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:clamp(30px,3.4vw,56px)}
/* 데스크톱에선 우측 예약 버튼 하나만 — 가운데 메뉴의 예약 중복 제거(모바일 드로어에서만 노출) */
.nav-menu .m-reserve{display:none}
.nav-menu a{position:relative;font-size:clamp(15px,1.15vw,17px);font-weight:500;letter-spacing:.18em;color:rgba(255,255,255,.9);transition:color .35s var(--ease)}
.nav-menu a:hover{color:#fff}
/* 고급 언더라인 — 좌→우로 그려지고 벗어나면 우측으로 사라진다 */
.nav-menu a::after{content:'';position:absolute;left:0;bottom:-6px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav-menu a:hover::after{transform:scaleX(1)}
/* 예약 버튼 — 눌림감 있는 부드러운 반응 */
.nav .reserve:hover{transform:translateY(-1px)}
.nav .reserve:active{transform:translateY(0)}
.nav .reserve{display:inline-flex;align-items:center;justify-content:center;width:114px;height:44px;background:#fff;border-radius:100px;font-family:'Pretendard','Noto Sans KR',sans-serif;font-size:14px;color:var(--ink);font-weight:500;transition:opacity .25s var(--ease)}
.nav .reserve:hover{opacity:.85}
.nav.scrolled{background:rgba(251,247,240,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(74,58,45,.08)}
.nav.scrolled .logo .logo-light{display:none}
.nav.scrolled .logo .logo-dark{display:block}
.nav.scrolled .nav-menu a{color:rgba(74,58,45,.75)}
.nav.scrolled .nav-menu a:hover{color:var(--ink)}
.nav.scrolled .reserve{background:var(--ink);color:#fbf7f0}

/* ---------- subpage hero ---------- */
.page-hero{position:relative;min-height:clamp(420px,48vw,700px);background-color:#8d7460;background-size:cover;background-position:center;color:#fff;display:flex;align-items:center;overflow:hidden}
.page-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(46,36,28,.48),rgba(46,36,28,.04) 62%)}
.page-hero .inner{position:relative;z-index:1;width:100%;padding-top:70px}
.page-hero .crumb{color:rgba(255,255,255,.85)}
.page-hero h1{margin-top:18px;font-size:clamp(30px,3.2vw,46px);font-weight:600;letter-spacing:-.01em}
.page-hero .en{margin-top:clamp(28px,4.5vw,64px);font-size:clamp(13px,1.05vw,15px);color:rgba(255,255,255,.92)}
.page-hero .sub{margin-top:14px;font-size:clamp(13px,1vw,14.5px);font-weight:400;line-height:1.75;color:rgba(255,255,255,.85);max-width:540px}

/* ---------- footer ---------- */
.footer{background:var(--footer);color:rgba(251,247,240,.72);padding:clamp(40px,4vw,50px) 0 0}
.footer .cols{display:flex;flex-wrap:wrap;gap:40px}
.footer .brand{flex:1;min-width:260px}
.footer .brand img{width:50px;height:40px}
.footer .brand p{margin-top:23px;font-size:13.5px;font-weight:400;line-height:1.7;color:rgba(251,247,240,.55);max-width:360px}
.footer .cols-r{display:flex;gap:clamp(32px,4vw,80px);flex-wrap:wrap}
.footer h4{font-size:12px;font-weight:500;color:var(--tl-accent)}
.footer ul{list-style:none;margin-top:15px}
.footer li{font-size:13.5px;font-weight:400;line-height:1.93;white-space:nowrap}
.footer .divider{margin-top:clamp(40px,4.5vw,60px);border:0;border-top:1px solid rgba(251,247,240,.12)}
.footer .copy{margin-top:28px;padding-bottom:34px;font-size:12.5px;font-weight:400;color:rgba(251,247,240,.4)}

/* ---------- parallax (JS가 .px를 붙인다) ---------- */
@media (prefers-reduced-motion: no-preference){
  /* 위아래 4%씩 흘러도 빈 곳이 생기지 않도록 여유분을 준다 */
  .px{height:124%!important;top:-12%!important;will-change:transform}
}

/* ---------- scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0;transform:translateY(36px);transition:opacity 1.3s var(--ease),transform 1.3s var(--ease)}
  .rv.in{opacity:1;transform:none}
  .rv-img{overflow:hidden}
  .rv-img img{transform:scale(1.1);transition:transform 2s var(--ease)}
  .rv-img.in img{transform:scale(1)}
}

/* ---------- 모바일 메뉴 ---------- */
.nav-toggle{display:none;position:relative;z-index:2;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:1.5px;margin:5px auto;background:#fff;border-radius:2px;
  transition:transform .45s var(--ease),opacity .35s var(--ease),background .3s var(--ease)}
.nav.scrolled .nav-toggle span,.nav.open .nav-toggle span{background:var(--ink)}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:680px){
  .page-hero::after{background:linear-gradient(180deg,rgba(46,36,28,.38),rgba(46,36,28,.66))}
  .nav-toggle{display:block}
  .nav{padding:12px var(--gutter)}
  .nav .reserve{display:none}
  .nav-menu{position:fixed;top:0;right:0;bottom:auto;left:auto;height:100vh;height:100dvh;width:min(84vw,340px);
    flex-direction:column;justify-content:center;gap:clamp(22px,5vh,38px);
    padding:0 var(--gutter);background:var(--bg);
    transform:translateX(100%);transition:transform .55s var(--ease);
    box-shadow:-14px 0 40px rgba(74,58,45,.14)}
  .nav.open .nav-menu{transform:translateX(0)}
  .nav-menu a,.nav.scrolled .nav-menu a{font-size:19px;letter-spacing:.14em;color:var(--ink);padding:15px 0}
  /* 드로어(크림 배경)에선 흰색 호버 금지 — accent로 (데스크톱 히어로의 흰 호버가 새어들던 문제) */
  .nav-menu a:hover,.nav.scrolled .nav-menu a:hover{color:var(--accent)}
  .nav-menu a::after{display:none}
  .nav-menu .m-reserve,.nav.scrolled .nav-menu .m-reserve{display:inline-flex;align-items:center;justify-content:center;
    margin-top:14px;height:50px;padding:0 32px;border-radius:100px;background:var(--ink);color:#fbf7f0!important;font-size:15px;letter-spacing:0}
  .nav-menu .m-reserve::after{display:none}
  body.nav-lock{overflow:hidden}

  .footer .cols{flex-direction:column}
}