/* =============================================================
   조제전당 — Shared Stylesheet (모든 페이지 공통)
   브랜드 가이드 v1.0 기준 — 토큰만 수정하면 사이트 전체 변경
   -------------------------------------------------------------
   ▼ 반응형 최적화 (v1.1) — 2026.05
     · Breakpoint 정리: 561(태블릿 진입) · 768(미세 조정) · 1024(데스크탑)
     · 모든 미디어쿼리 mobile-first(min-width) 통일
     · 비표준 폰트 사이즈(14.5/15.5/11.5 등) → 4의 배수 정렬
     · 모바일 본문 16px 미만 금지, 터치 타겟 ≥44px 보장
   ============================================================= */

:root{
  /* Surfaces */
  --paper-0:#FFFEFA;
  --paper-50:#F8F5EE;
  --paper-100:#F4EFE6;
  --cream-200:#EAE3D4;
  /* Tans */
  --tan-300:#D8CBB7;
  --tan-400:#C9A57C;
  --tan-500:#B68A5C;
  /* Mocha → Ink */
  --mocha-500:#8C6B4A;
  --mocha-600:#6E6353;
  --mocha-700:#5C4A36;
  --ink-700:#4F4638;
  --ink-800:#3D332A;
  --ink-900:#2A1F18;
  /* Accents */
  --brick:#A8423A;
  --sage:#6E7A5C;
  /* Type */
  --f-display:'Gowun Batang',serif;
  --f-italic:'Fraunces',serif;
  --f-eyebrow:'Cormorant Garamond',serif;
  --f-body:'Pretendard',sans-serif;
  /* Spacing 4px base */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-6:24px;
  --s-8:32px;--s-12:48px;--s-16:64px;--s-24:96px;
  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:180ms;--t-base:240ms;--t-slow:500ms;
  /* Container */
  --maxw:1200px;
  --pad-x:max(20px, env(safe-area-inset-left));
}
@media(min-width:1024px){
  :root{--pad-x:max(32px, env(safe-area-inset-left))}
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  background:var(--paper-100);
  color:var(--ink-900);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* 한국어 줄바꿈: 어절(띄어쓰기) 단위로만 끊어 '됩니다'·'별도.' 같은 고아 글자 방지.
     긴 영문/URL은 overflow-wrap으로 안전하게 처리, text-wrap:pretty로 마지막 줄 보정 */
  word-break:keep-all;
  overflow-wrap:break-word;
  text-wrap:pretty;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
em,i,cite,address{font-style:normal}
:focus-visible{outline:2px solid var(--ink-900);outline-offset:4px}
::selection{background:var(--ink-900);color:var(--paper-100)}

/* =============================================================
   LAYOUT
   ============================================================= */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.wrap-narrow{max-width:880px;margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}

/* =============================================================
   HEADER · NAV
   ============================================================= */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(244,239,230,0.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-base) var(--ease),background var(--t-base) var(--ease);
}
.site-header.scrolled{border-color:var(--tan-300);background:rgba(244,239,230,0.98)}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  height:60px;
}
@media(min-width:561px){.nav-row{height:68px}}
@media(min-width:1024px){.nav-row{height:80px}}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:36px;width:auto}
@media(min-width:561px){.brand img{height:40px}}
.brand .desktop-mark{display:none}
@media(min-width:1024px){
  .brand .desktop-mark{display:block}
  .brand .mobile-mark{display:none}
  .brand img{height:48px}
}
.nav-list{display:none;gap:36px;list-style:none}
@media(min-width:1024px){.nav-list{display:flex}}
.nav-list a{
  font-size:14px;font-weight:500;color:var(--ink-800);
  letter-spacing:0.04em;padding:10px 4px;position:relative;
  transition:color var(--t-fast) var(--ease);
}
.nav-list a::after{
  content:'';position:absolute;left:4px;right:4px;bottom:4px;height:1px;background:var(--ink-900);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease);
}
.nav-list a:hover::after,.nav-list a[aria-current="page"]::after{transform:scaleX(1)}
.nav-list a[aria-current="page"]{color:var(--ink-900)}
.nav-cta{display:none}
@media(min-width:1024px){
  .nav-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;background:var(--ink-900);color:var(--paper-100);font-size:13px;font-weight:600;letter-spacing:0.06em;min-height:44px}
  .nav-cta:hover{transform:translateY(-1px)}
  .nav-cta::after{content:'→';font-family:var(--f-italic)}
}

/* Hamburger — 44×44 minimum touch target */
.hamburger{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  width:48px;height:48px;gap:5px;
  -webkit-tap-highlight-color:transparent;
  position:relative;z-index:60;
  background:transparent;border:0;cursor:pointer;
  margin-right:-8px;
}
@media(min-width:1024px){.hamburger{display:none}}
.hamburger span{display:block;width:22px;height:1.5px;background:var(--ink-900);transition:transform var(--t-base) var(--ease),opacity var(--t-fast)}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobile drawer — 560 이하 한정 가독성 */
.mobile-drawer{
  position:fixed;
  top:60px;left:0;right:0;bottom:0;
  background:var(--paper-100);
  transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform var(--t-base) var(--ease),opacity var(--t-base) var(--ease),visibility 0s linear var(--t-base);
  z-index:45;padding:24px 24px 40px;display:flex;flex-direction:column;gap:0;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
@media(min-width:561px){.mobile-drawer{top:68px;padding:32px 32px 48px}}
.mobile-drawer.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;transition:transform var(--t-base) var(--ease),opacity var(--t-base) var(--ease),visibility 0s linear 0s}
.mobile-drawer a{
  font-family:var(--f-display);
  font-size:clamp(22px,5.5vw,28px);
  color:var(--ink-900);
  padding:18px 0;border-bottom:1px solid var(--tan-300);
  display:flex;justify-content:space-between;align-items:baseline;
  min-height:44px;
}
.mobile-drawer a .num{font-family:var(--f-italic);font-size:13px;color:var(--mocha-500);letter-spacing:0.18em}
.mobile-drawer .drawer-cta{
  margin-top:32px;padding:18px 24px;background:var(--ink-900);color:var(--paper-100);
  text-align:center;font-family:var(--f-body);font-size:15px;font-weight:600;letter-spacing:0.04em;
  display:flex;justify-content:center;align-items:center;gap:8px;border-bottom:none;
  min-height:52px;
}
.mobile-drawer .drawer-cta::after{content:'→';font-family:var(--f-italic)}
@media(min-width:1024px){.mobile-drawer{display:none}}
body.drawer-open{overflow:hidden}

/* =============================================================
   TYPE PRIMITIVES
   ============================================================= */
.eyebrow{
  font-family:var(--f-eyebrow);font-size:12px;
  letter-spacing:0.28em;text-transform:uppercase;color:var(--mocha-500);
}
@media(min-width:561px){.eyebrow{font-size:13px;letter-spacing:0.32em}}
@media(min-width:1024px){.eyebrow{font-size:14px}}
.eyebrow-rule{display:inline-flex;align-items:center;gap:14px}
.eyebrow-rule::before{content:'';width:24px;height:1px;background:var(--tan-400)}

.h-display{font-family:var(--f-display);font-weight:400;font-size:clamp(32px,6.8vw,64px);line-height:1.18;letter-spacing:-0.015em;color:var(--ink-900);text-wrap:pretty}
.h-display em{font-family:var(--f-italic);color:var(--mocha-500);font-weight:500}
.h1{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,4.6vw,40px);line-height:1.25;letter-spacing:-0.012em;color:var(--ink-900);text-wrap:pretty}
.h1 em{font-family:var(--f-italic);color:var(--mocha-500);font-weight:500}
.h2{font-family:var(--f-display);font-weight:400;font-size:clamp(22px,3.2vw,32px);line-height:1.3;color:var(--ink-900);text-wrap:pretty}
.h2 em{font-family:var(--f-italic);color:var(--mocha-500);font-weight:500}
.h3{font-family:var(--f-display);font-weight:700;font-size:20px;line-height:1.4;color:var(--ink-900)}
@media(min-width:1024px){.h3{font-size:22px}}
.h3 em{font-family:var(--f-italic);color:var(--mocha-500);font-weight:500}
.lead{font-size:clamp(16px,2vw,18px);line-height:1.8;color:var(--ink-800)}
.body{font-size:16px;line-height:1.8;color:var(--ink-800)}
.small{font-size:14px;line-height:1.7;color:var(--mocha-600)}
.cap{font-size:12px;line-height:1.5;color:var(--mocha-600);letter-spacing:0.04em}

/* =============================================================
   COMPONENTS
   ============================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;font-family:var(--f-body);font-size:15px;font-weight:600;
  letter-spacing:0.04em;border:none;cursor:pointer;text-decoration:none;
  transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),background var(--t-base) var(--ease),color var(--t-base) var(--ease);
  min-height:48px;
}
@media(min-width:1024px){.btn{padding:14px 24px}}
.btn .ar{font-family:var(--f-italic);font-size:18px;line-height:1}
.btn-primary{background:var(--ink-900);color:var(--paper-100)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(42,31,24,0.45)}
.btn-secondary{background:transparent;color:var(--ink-900);border:1.4px solid var(--ink-900)}
.btn-secondary:hover{background:var(--ink-900);color:var(--paper-100)}
.btn-accent{background:var(--brick);color:var(--paper-100)}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(168,66,58,0.45)}
.btn-ghost{background:transparent;color:var(--ink-900);padding:10px 0;min-height:auto;font-size:14px;letter-spacing:0.06em}
@media(min-width:1024px){.btn-ghost{font-size:15px}}
.btn-ghost::after{content:'→';font-family:var(--f-italic);margin-left:8px;transition:transform var(--t-base) var(--ease);display:inline-block}
.btn-ghost:hover::after{transform:translateX(4px)}
.btn-block{width:100%}

.tag{
  display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  font-size:11px;letter-spacing:0.16em;font-weight:600;text-transform:uppercase;
}
.tag-tan{background:var(--cream-200);color:var(--mocha-700);border:1px solid var(--tan-300)}
.tag-ink{background:var(--ink-900);color:var(--paper-100)}
.tag-sage{background:transparent;color:var(--sage);border:1px solid var(--sage)}
.tag-brick{background:transparent;color:var(--brick);border:1px solid var(--brick)}

.card{
  background:var(--paper-0);border:1px solid var(--tan-300);
  padding:var(--s-4);transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
@media(min-width:1024px){.card{padding:var(--s-6)}}
.card-link:hover{transform:translateY(-3px);box-shadow:0 18px 32px -16px rgba(42,31,24,0.25);border-color:var(--mocha-500)}

.input{
  width:100%;padding:14px 16px;background:var(--paper-0);
  border:1px solid var(--tan-400);font-family:var(--f-body);font-size:16px;
  color:var(--ink-900);min-height:48px;
}
.input:focus{outline:2px solid var(--ink-900);outline-offset:2px;border-color:var(--ink-900)}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer{
  background:var(--ink-900);color:var(--paper-100);
  padding:40px 0 24px;margin-top:48px;
}
/* 모바일: brand 전체 너비 + foot-col 4개를 2x2 그리드로 */
.site-footer .wrap{display:grid;gap:28px 20px;grid-template-columns:1fr 1fr}
.site-footer .foot-brand{grid-column:1 / -1}
.site-footer .foot-brand svg{width:160px;height:auto;display:block}

/* 561+ : 동일 2x2 유지 + 패딩만 키움 */
@media(min-width:561px){
  .site-footer{padding:56px 0 32px;margin-top:72px}
  .site-footer .wrap{gap:32px 28px}
  .site-footer .foot-brand svg{width:180px}
}
/* 1024+ : brand 위 전체 너비 + foot-col 4개를 한 줄로 */
@media(min-width:1024px){
  .site-footer{padding:72px 0 40px;margin-top:96px}
  .site-footer .wrap{grid-template-columns:repeat(4,1fr);gap:48px 40px}
  .site-footer .foot-brand{grid-column:1 / -1}
  .site-footer .foot-brand svg{width:200px}
  .site-footer .foot-brand p{max-width:520px}
}

.foot-brand .eyebrow{color:var(--tan-400)}
.foot-brand p{margin-top:12px;color:#D8CBB7;font-size:13px;line-height:1.7;max-width:340px}
@media(min-width:1024px){.foot-brand p{margin-top:14px;font-size:14px;line-height:1.8}}
.foot-col h4{font-family:var(--f-italic);font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--tan-400);margin-bottom:12px;font-weight:500}
@media(min-width:1024px){.foot-col h4{font-size:13px;letter-spacing:0.2em;margin-bottom:14px}}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:6px;padding:0;margin:0}
@media(min-width:1024px){.foot-col ul{gap:8px}}
.foot-col a{color:#D8CBB7;font-size:13px;transition:color var(--t-fast) var(--ease);display:inline-block;padding:2px 0;min-height:32px}
@media(min-width:1024px){.foot-col a{font-size:14px}}
.foot-col a:hover{color:var(--paper-100)}
/* foot-base — 카피라이트 영역
   · 모바일/태블릿(<1024px): column (위아래 배치) — 폭이 좁아 가로면 깨지므로
   · PC(≥1024px): row (좌우 배치) — 원래 의도된 디자인 */
.site-footer .wrap.foot-base{
  margin-top:32px;padding-top:20px;
  border-top:1px solid rgba(216,203,183,0.2);
  display:flex;flex-direction:column;gap:6px;
  font-size:12px;color:#A89D8C;letter-spacing:0;line-height:1.6;
}
@media(min-width:561px){
  .site-footer .wrap.foot-base{letter-spacing:0.02em;gap:8px}
}
@media(min-width:1024px){
  .site-footer .wrap.foot-base{
    margin-top:48px;padding-top:24px;
    flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;
    gap:16px;letter-spacing:0.04em;
  }
}

/* =============================================================
   SCROLL-TRIGGER ANIMATION
   ============================================================= */
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-stagger > *{opacity:0;transform:translateY(12px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.reveal-stagger.in > *{opacity:1;transform:none}
.reveal-stagger.in > *:nth-child(1){transition-delay:0ms}
.reveal-stagger.in > *:nth-child(2){transition-delay:80ms}
.reveal-stagger.in > *:nth-child(3){transition-delay:160ms}
.reveal-stagger.in > *:nth-child(4){transition-delay:240ms}
.reveal-stagger.in > *:nth-child(5){transition-delay:320ms}
.reveal-stagger.in > *:nth-child(6){transition-delay:400ms}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger > *{opacity:1;transform:none;transition:none}
  *{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
}

/* =============================================================
   UTILITIES
   ============================================================= */
.divider{height:1px;background:var(--tan-300);width:100%}
.divider-ink{height:1px;background:var(--ink-900);width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}