/*
  [생성일] 2026-08-24
  [경위] 해맑은목장 아임웹 자사몰 리뉴얼 제안 시안 - 공통 스타일
  [변경이력]
    - 2026-08-24: 최초 생성 (Forest 팔레트 토큰, 홈·정기구독·상품상세 공통)

  [디자인 토큰 체계]
    색  : Forest = 딥그린 + 본화이트 + 앰버 강조 1색
          현행 브랜드의 딥그린을 계승하고, 크림 대신 차가운 본화이트를 써서
          산양유의 흰색이 사진에서 죽지 않게 한다.
    서체: 제목 SUIT / 본문 Pretendard (둘 다 fallback 필수)
    모션: transform·opacity만. prefers-reduced-motion 존중.
*/

/* ===== 1. 토큰 ===== */
:root{
  /* 색 */
  --ink:#16211B;            /* 본문 글자 (순수 검정 아님, 녹색 기미) */
  --ink-2:#3D4C44;          /* 보조 글자 */
  --muted:#6B7A71;          /* 흐린 글자 */
  --forest:#1E4034;         /* 주 강조 - 브랜드 딥그린 계승 */
  --forest-deep:#122A21;    /* 다크 섹션 배경 */
  --forest-soft:#E8EDE7;    /* 연한 녹색 면 */
  --bone:#F4F6F3;           /* 기본 배경 (차가운 오프화이트) */
  --bone-2:#EAEDE8;         /* 섹션 구분 면 */
  --white:#FFFFFF;
  --amber:#D9932B;          /* 강조 1색 - 정기구독·할인에만 */
  --amber-soft:#F6EBD8;
  --line:rgba(22,33,27,.12);
  --line-strong:rgba(22,33,27,.22);
  --line-dark:rgba(255,255,255,.16);

  /* 간격 */
  --gap-1:4px;  --gap-2:8px;  --gap-3:12px; --gap-4:16px;
  --gap-5:24px; --gap-6:32px; --gap-7:48px; --gap-8:64px;
  --gap-9:96px; --gap-10:128px;

  /* 글자 크기 */
  --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-md:18px;
  --fs-lg:22px; --fs-xl:28px; --fs-2xl:36px; --fs-3xl:46px; --fs-4xl:58px;

  /* 모양 - 한 가지 반경 체계로 통일 (2026-08-24 개편)
     규칙: 버튼·입력·면 요소는 전부 직각(0). 상세페이지(IWA식)와 같은 체계다.
     알약(r-pill)은 작은 뱃지·칩과 아이콘 버튼·플로팅 상담 버튼에만 쓴다. */
  --r-sm:0; --r-md:0; --r-lg:0; --r-pill:999px;

  /* 그림자 - 배경 색조를 띤 그림자만 */
  --sh-1:0 1px 2px rgba(22,33,27,.05);
  --sh-2:0 10px 30px rgba(22,33,27,.08);
  --sh-3:0 20px 50px rgba(22,33,27,.12);

  --nav-h:68px;
  --maxw:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ===== 2. 기본 ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
              "Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  font-size:var(--fs-base); line-height:1.7; letter-spacing:-.01em;
  word-break:keep-all;          /* 한글이 단어 단위로만 끊기게 (모바일 필수) */
  overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:SUIT,"Pretendard Variable",Pretendard,-apple-system,
              "Malgun Gothic","맑은 고딕",sans-serif;
  margin:0; line-height:1.22; letter-spacing:-.035em; font-weight:800;
  word-break:keep-all;
}
p{margin:0}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
ul,ol{margin:0; padding:0; list-style:none}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ===== 3. 공지바 ===== */
.notice{
  background:var(--forest-deep); color:#DCE7DF;
  font-size:var(--fs-xs); letter-spacing:.01em;
  text-align:center; padding:9px 16px;
}
.notice b{color:#fff; font-weight:700}

/* ===== 4. 헤더 ===== */
.hd{
  position:sticky; top:0; z-index:50;
  background:rgba(244,246,243,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hd-in{
  max-width:var(--maxw); margin:0 auto; padding:0 24px;
  height:var(--nav-h); display:flex; align-items:center; gap:var(--gap-6);
}
.logo{
  font-family:SUIT,Pretendard,sans-serif; font-weight:800;
  font-size:19px; letter-spacing:-.045em; color:var(--forest);
  display:flex; align-items:center; gap:8px; flex:0 0 auto;
}
.logo-mark{
  width:26px; height:26px; border-radius:var(--r-pill);
  background:var(--forest); color:#fff;
  display:grid; place-items:center; font-size:13px; font-weight:800;
  letter-spacing:0;
}
.nav{display:flex; gap:var(--gap-6); margin-left:var(--gap-4); flex:1 1 auto}
.nav a{
  font-size:var(--fs-sm); font-weight:600; color:var(--ink-2);
  padding:6px 0; position:relative; white-space:nowrap;
  transition:color .2s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--forest); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav a:hover{color:var(--forest)}
.nav a:hover::after{transform:scaleX(1)}
.hd-act{display:flex; align-items:center; gap:var(--gap-4); flex:0 0 auto}
.icon-btn{
  width:36px; height:36px; border-radius:var(--r-pill);
  display:grid; place-items:center; color:var(--ink-2);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.icon-btn:hover{background:var(--bone-2); color:var(--forest)}
.icon-btn svg{width:19px; height:19px}
.burger{display:none}

/* 모바일 서랍 */
.drawer{
  position:fixed; inset:0; z-index:60; visibility:hidden;
}
.drawer-bg{
  position:absolute; inset:0; background:rgba(18,42,33,.45);
  opacity:0; transition:opacity .3s var(--ease);
}
.drawer-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(84vw,320px);
  background:var(--bone); padding:22px;
  transform:translateX(100%); transition:transform .34s var(--ease);
  display:flex; flex-direction:column; gap:var(--gap-4);
  box-shadow:var(--sh-3);
}
.drawer.open{visibility:visible}
.drawer.open .drawer-bg{opacity:1}
.drawer.open .drawer-panel{transform:translateX(0)}
.drawer-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--gap-2)}
.drawer-nav a{
  display:block; padding:14px 2px; font-size:var(--fs-md); font-weight:700;
  border-bottom:1px solid var(--line);
}
.drawer-foot{margin-top:auto; font-size:var(--fs-sm); color:var(--muted)}

/* ===== 5. 버튼 ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 28px; border-radius:0;   /* 직각 - 상세페이지와 같은 체계 */
  font-weight:700; font-size:var(--fs-sm); letter-spacing:-.01em;
  white-space:nowrap; transition:transform .18s var(--ease), background .2s var(--ease),
              box-shadow .2s var(--ease), color .2s var(--ease);
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--forest); color:#fff; box-shadow:var(--sh-1)}
.btn-primary:hover{background:#173328; box-shadow:var(--sh-2)}
.btn-amber{background:var(--amber); color:#2A1B06}
.btn-amber:hover{background:#C7841F}
.btn-ghost{
  background:rgba(255,255,255,.9); color:var(--forest);
  border:1px solid var(--line-strong);
}
.btn-ghost:hover{background:#fff; border-color:var(--forest)}
.btn-onDark{background:#fff; color:var(--forest-deep)}
.btn-onDark:hover{background:#EDF2EE}
.btn-lineDark{background:transparent; color:#fff; border:1px solid var(--line-dark)}
.btn-lineDark:hover{border-color:rgba(255,255,255,.5)}
.btn-lg{padding:17px 34px; font-size:var(--fs-base)}
.btn-sm{padding:11px 20px; font-size:var(--fs-xs)}
.btn-block{display:flex; width:100%}

/* ===== 6. 섹션 공통 ===== */
.sec{padding:var(--gap-9) 0}
.sec-tight{padding:var(--gap-8) 0}
.sec-bone2{background:var(--bone-2)}
.sec-dark{background:var(--forest-deep); color:#E6EEE8}
.sec-dark h2,.sec-dark h3{color:#fff}

.eyebrow{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--forest); opacity:.75;
  margin-bottom:var(--gap-3);
}
.sec-dark .eyebrow{color:#9DC4AE; opacity:1}
.h2{font-size:var(--fs-3xl)}
.h3{font-size:var(--fs-xl)}
.lead{
  margin-top:var(--gap-4); color:var(--ink-2);
  font-size:var(--fs-md); max-width:60ch; line-height:1.8;
}
.sec-dark .lead{color:#BFD4C7}

/* ===== 7. 모션 (등장) =====
   .js-anim 은 스크립트가 정상 실행됐을 때만 <html>에 붙는다.
   스크립트가 막히거나 실패해도 글이 그대로 보이게 하기 위한 안전장치다. */
.js-anim .rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js-anim .rv.in{opacity:1; transform:none}
.rv-d1{transition-delay:.07s} .rv-d2{transition-delay:.14s}
.rv-d3{transition-delay:.21s} .rv-d4{transition-delay:.28s}

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

/* ===== 8. 토스트 ===== */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px);
  background:var(--forest-deep); color:#fff;
  padding:13px 22px; border-radius:var(--r-pill);
  font-size:var(--fs-sm); font-weight:600; box-shadow:var(--sh-3);
  opacity:0; pointer-events:none; z-index:80;
  transition:opacity .28s var(--ease), transform .28s var(--ease);
  max-width:calc(100vw - 32px); text-align:center;
}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* ===== 9. 푸터 ===== */
.ft{background:var(--forest-deep); color:#B7CCBF; padding:var(--gap-8) 0 var(--gap-6)}
.ft-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--gap-6);
  padding-bottom:var(--gap-7); border-bottom:1px solid var(--line-dark);
}
.ft h4{font-size:var(--fs-sm); color:#fff; margin-bottom:var(--gap-4); letter-spacing:-.01em}
.ft li{margin-bottom:10px; font-size:var(--fs-sm)}
.ft li a:hover{color:#fff}
.ft-brand .logo{color:#fff; margin-bottom:var(--gap-4)}
.ft-brand .logo-mark{background:#fff; color:var(--forest-deep)}
.ft-desc{font-size:var(--fs-sm); line-height:1.75; max-width:34ch}
.ft-sns{display:flex; gap:10px; margin-top:var(--gap-5)}
.ft-sns a{
  width:38px; height:38px; border-radius:var(--r-pill);
  border:1px solid var(--line-dark); display:grid; place-items:center;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.ft-sns a:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.4)}
.ft-sns svg{width:17px; height:17px}
.ft-biz{
  padding-top:var(--gap-5); font-size:var(--fs-xs); line-height:1.9;
  color:#8FA898;
}
.ft-biz span{margin-right:14px; display:inline-block}

/* ===== 10. 반응형 ===== */
@media (max-width:1024px){
  :root{--fs-3xl:38px; --fs-4xl:46px; --fs-2xl:30px}
  .ft-grid{grid-template-columns:1fr 1fr; gap:var(--gap-6)}
  .ft-brand{grid-column:1/-1}
}
@media (max-width:768px){
  :root{
    --fs-3xl:30px; --fs-4xl:34px; --fs-2xl:25px; --fs-xl:21px;
    --gap-9:64px; --gap-10:80px;
  }
  .wrap,.hd-in{padding:0 18px}
  .nav{display:none}
  .burger{display:grid}
  .sec{padding:var(--gap-8) 0}
  .lead{font-size:var(--fs-base)}
}
@media (max-width:420px){
  .wrap,.hd-in{padding:0 15px}
  :root{--fs-3xl:26px; --fs-4xl:30px}
}

/* ===== 11. 유틸 ===== */
.hide-sm{}
@media (max-width:900px){ .hide-sm{display:none!important} }