/* ═══════════════════════════════════════════════════
   VACODE 공통 스타일 — 모든 페이지 공유
   폰트 · 컬러변수 · 리셋 · 헤더 · Lenis
   ※ 수정은 여기 한 곳에서. 페이지 고유 CSS는 각 html <style>.
   ═══════════════════════════════════════════════════ */

@import url('https://use.typekit.net/hqr1kic.css');
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Outfit:wght@300;400;500;600&display=swap');

@font-face{font-family:'Sweet';font-weight:300;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Light.woff2') format('woff2')}
@font-face{font-family:'Sweet';font-weight:400;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2') format('woff2')}
@font-face{font-family:'Sweet';font-weight:500;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Medium.woff2') format('woff2')}
@font-face{font-family:'Sweet';font-weight:600;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-SemiBold.woff2') format('woff2')}

:root{
  --serif:"the-seasons",serif; --accent:"amandine",serif;
  --sans:"Outfit","AvantGarde Bk BT",sans-serif; --kr:"Sweet",sans-serif;
  --cream:#FFFAF6; --ink:#1A1A1A; --green:#2E4438; --line:#EBE3D6;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{background:var(--cream);color:var(--ink);font-family:var(--kr);}

/* ── Lenis 스무스 스크롤 ── */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ── HEADER: 로고(좌) / 메뉴(중앙) / 검색(우), 스크롤시 접힘 ── */
header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:26px 56px;transition:transform .45s ease,background .4s ease,padding .4s ease;}
header.hide{transform:translateY(-100%)}
header .logo{display:block;line-height:0}
header .logo img{height:30px;display:block;filter:brightness(0) invert(1);transition:filter .4s}

header nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:60px}
header nav a{font-family:var(--sans);font-size:18px;font-weight:400;text-transform:uppercase;
  color:#fff;text-decoration:none;overflow:hidden;display:inline-block;height:1.25em;line-height:1.25em;transition:color .4s}
header nav a .hov{display:block;position:relative;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
header nav a .hov::after{content:attr(data-text);position:absolute;top:100%;left:0}
header nav a:hover .hov{transform:translateY(-100%)}
nav .m-search{display:none}

/* 검색 (avec식 언더라인 인풋 + 돋보기) */
.d-search{display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:4px;transition:border-color .4s}
.d-search input{background:none;border:0;outline:none;color:#fff;font-family:var(--sans);font-size:14px;letter-spacing:.06em;width:150px}
.d-search input::placeholder{color:rgba(255,255,255,.6);letter-spacing:.06em}
.d-search .s-icon{background:none;border:0;color:#fff;cursor:pointer;display:flex;padding:0}

header.solid{background:#fff;padding:26px 56px;box-shadow:0 1px 0 rgba(0,0,0,.06)}
header.solid .logo img{filter:none}
header.solid nav a{color:var(--ink)}
header.solid .d-search{border-color:rgba(0,0,0,.3)}
header.solid .d-search input{color:var(--ink)}
header.solid .d-search input::placeholder{color:rgba(0,0,0,.45)}
header.solid .d-search .s-icon{color:var(--ink)}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;z-index:60}
.burger span{width:26px;height:2px;background:#fff;transition:.3s}
header.solid .burger span,.burger.open span{background:var(--ink)}

/* ── 헤더 모바일 ── */
@media(max-width:768px){
  header{padding:18px 22px}
  header.solid{padding:18px 22px}
  header .logo img{height:22px}
  .d-search{display:none}
  .burger{display:flex}
  header nav{position:fixed;inset:0;left:auto;transform:translateX(100%);width:100%;background:var(--cream);
     flex-direction:column;justify-content:center;align-items:center;gap:34px;transition:transform .45s cubic-bezier(.7,0,.2,1)}
  header nav.open{transform:translateX(0)}
  header nav a{color:var(--ink);font-size:26px;letter-spacing:.1em;height:1.25em;line-height:1.25em}
  nav .m-search{display:flex;align-items:center;gap:10px;margin-top:14px;border-bottom:1px solid rgba(0,0,0,.28);padding-bottom:6px}
  nav .m-search input{background:none;border:0;outline:none;color:var(--ink);font-family:var(--sans);font-size:16px;width:200px;text-align:center}
  nav .m-search input::placeholder{color:rgba(0,0,0,.4)}
  nav .m-search .s-icon{background:none;border:0;color:var(--ink);display:flex}
}

/* ══ 지도 + 문의폼 섹션 (공통 · _main.html 1-4) ══ */
.contact{background:transparent;padding:150px 80px 130px}
.contact-head{margin:0 0 60px}
.contact-head .eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--green)}
.contact-head h2{font-family:var(--serif);font-size:54px;font-weight:400;color:var(--ink);margin-top:12px;letter-spacing:-.02em}
.c-sent{font-family:var(--kr);font-size:15px;color:var(--green);margin:0 0 30px;padding:16px 20px;background:rgba(46,68,56,.06);border-left:2px solid var(--green)}
.contact-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:60px}
.c-left{flex:0 1 700px}
.c-map{width:100%;aspect-ratio:4/3;border:0;background:#EDE7DC;display:block}
.c-info{margin-top:32px;display:flex;gap:56px}
.c-info .lb{font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#9a9284;margin-bottom:8px}
.c-info .vl{font-family:var(--kr);font-size:16px;color:var(--ink)}
.c-form{flex:0 1 820px;display:flex;flex-direction:column}
.c-field{display:flex;align-items:center;border-bottom:1px solid #4A4A4A;padding:26px 2px}
.c-field label{width:130px;flex:0 0 auto;font-family:var(--kr);font-size:16px;font-weight:500;letter-spacing:0;color:#111}
.c-field input,.c-field textarea{flex:1;border:0;background:none;outline:none;font-family:var(--kr);font-size:17px;color:#111;resize:none}
.c-field input::placeholder,.c-field textarea::placeholder{color:#A69E90}
.c-field.ta{align-items:flex-start}
.c-field.ta textarea{min-height:96px;padding-top:2px;line-height:1.6}
.c-submit{align-self:flex-start;margin-top:44px;background:var(--ink);color:#fff;border:0;cursor:pointer;font-family:var(--sans);font-size:14px;letter-spacing:.12em;text-transform:uppercase;padding:18px 42px;transition:background .3s}
.c-submit:hover{background:#000}

/* ══ 푸터 (공통 · 포폴식 · 마스크라이즈) ══ */
.footer{background:#fff;color:var(--ink);padding:90px 80px 46px;border-top:1px solid var(--ink);font-family:var(--sans)}
.footer-in{display:flex;justify-content:space-between;gap:80px;flex-wrap:wrap}
.f-logo{display:inline-block;line-height:0}.f-logo img{height:30px}
.f-tag{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#9a9284;margin-top:22px}
.f-sns{display:flex;gap:26px;margin-top:26px}
.f-sns a{font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .3s}
.f-sns a:hover{border-color:var(--ink)}
.f-company{font-family:var(--kr);font-size:14px;line-height:2.05;color:#6f685c;max-width:580px}
.f-company b{color:var(--ink);font-weight:400}
.footer-bottom{margin-top:64px;padding-top:26px;border-top:1px solid #ececec;font-family:var(--sans);font-size:12px;color:#9a9284;letter-spacing:.04em}
.footer .rvm{overflow:hidden}
.footer .rv{display:block;will-change:transform}

/* ══ 문의폼·푸터 공통 모바일 ══ */
@media(max-width:768px){
  .contact{padding:80px 22px}
  .contact-head h2{font-size:34px}
  .contact-grid{flex-direction:column;gap:50px}
  .c-left,.c-form{flex:1 1 auto;width:100%}
  .c-info{gap:36px;flex-wrap:wrap}
  .c-field label{width:88px;font-size:12px}
  .footer{padding:60px 22px 40px}
  .footer-in{flex-direction:column;gap:44px}
  .f-company{font-size:13px;line-height:2}
}