/*
  [생성일] 2026-08-24
  [경위] 해맑은목장 제안 시안 - 홈(index.html) 전용 스타일
  [변경이력]
    - 2026-08-24: 최초 생성
*/

/* ===== 히어로 : 풀블리드 사진 + 좌측 글 ===== */
.hero{
  position:relative; min-height:min(86vh,700px);
  display:flex; align-items:flex-end;
  overflow:hidden; background:var(--forest-deep);
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 62%;
}
/* 스크림 - 사진 위 글자가 반드시 읽히도록 (현행 사이트의 가장 큰 결함) */
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(10,26,19,.82) 0%, rgba(10,26,19,.62) 34%,
                            rgba(10,26,19,.18) 62%, rgba(10,26,19,.05) 100%),
    linear-gradient(to top, rgba(10,26,19,.55) 0%, rgba(10,26,19,0) 42%);
}
.hero-in{
  position:relative; z-index:2; width:100%;
  max-width:var(--maxw); margin:0 auto; padding:0 24px var(--gap-9);
}
.hero-copy{max-width:660px; color:#fff}
.hero h1{
  font-size:clamp(32px,5.2vw,60px); color:#fff;
  letter-spacing:-.04em; line-height:1.16;
  text-shadow:0 2px 24px rgba(8,20,14,.4);
}
.hero h1 em{font-style:normal; color:#F2C87E}
.hero-sub{
  margin-top:var(--gap-5); font-size:clamp(15px,1.6vw,19px);
  color:#DCE8DF; line-height:1.75; max-width:46ch;
  text-shadow:0 1px 12px rgba(8,20,14,.45);
}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--gap-3); margin-top:var(--gap-7)}

/* ===== 신뢰 숫자 띠 ===== */
.facts{background:var(--white); border-bottom:1px solid var(--line)}
.facts-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
}
.fact{
  padding:var(--gap-7) var(--gap-5); text-align:center;
  border-right:1px solid var(--line);
}
.fact:last-child{border-right:0}
.fact-n{
  font-family:SUIT,Pretendard,sans-serif; font-weight:800;
  font-size:clamp(28px,3.4vw,40px); color:var(--forest);
  letter-spacing:-.045em; line-height:1.1;
}
.fact-n small{font-size:.52em; font-weight:700; margin-left:3px; letter-spacing:-.02em}
.fact-t{margin-top:8px; font-size:var(--fs-sm); color:var(--muted); font-weight:600}

/* ===== 브랜드 소개 : 좌 사진 / 우 글 ===== */
.story{display:grid; grid-template-columns:1.02fr .98fr; gap:var(--gap-9); align-items:center}
.story-figure{position:relative}
.story-figure img{
  width:100%; aspect-ratio:4/3.4; object-fit:cover;
  border-radius:var(--r-lg);
}
.story-badge{
  position:absolute; left:-18px; bottom:26px;
  background:var(--white); border-radius:var(--r-md);
  padding:16px 22px; box-shadow:var(--sh-2); max-width:240px;
}
.story-badge b{
  display:block; font-family:SUIT,sans-serif; font-size:var(--fs-lg);
  color:var(--forest); letter-spacing:-.04em; line-height:1.2;
}
.story-badge span{font-size:var(--fs-xs); color:var(--muted); font-weight:600}
.story-list{margin-top:var(--gap-6); display:grid; gap:var(--gap-4)}
.story-list li{
  display:grid; grid-template-columns:26px 1fr; gap:14px;
  align-items:start; font-size:var(--fs-base); color:var(--ink-2); line-height:1.7;
}
.story-list b{color:var(--ink); font-weight:700}
.tick{
  width:26px; height:26px; border-radius:var(--r-pill);
  background:var(--forest-soft); color:var(--forest);
  display:grid; place-items:center; margin-top:2px;
}
.tick svg{width:14px; height:14px}

/* ===== 자연순환 4단계 =====
   흰 박스 4개 → 괘선 4단 (상세페이지 "목장에서 오는 순서"와 같은 언어).
   순번은 실제 순환 순서라서 남긴다. */
.cycle{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:var(--gap-7);
  border-top:1px solid var(--ink); border-bottom:1px solid var(--line);
  counter-reset:cy;
}
.cy{padding:26px 22px 30px}
.cy + .cy{border-left:1px solid var(--line)}
.cy::before{
  counter-increment:cy; content:counter(cy);
  font-family:SUIT,sans-serif; font-weight:800; font-size:var(--fs-xs);
  color:var(--forest); display:block; margin-bottom:var(--gap-3);
}
.cy h4{font-size:var(--fs-md); margin-bottom:8px; letter-spacing:-.03em}
.cy p{font-size:var(--fs-sm); color:var(--muted); line-height:1.7}

/* ===== 상품 ===== */
.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--gap-5); flex-wrap:wrap; margin-bottom:var(--gap-7);
}
.link-more{
  font-size:var(--fs-sm); font-weight:700; color:var(--forest);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.link-more svg{width:15px; height:15px; transition:transform .25s var(--ease)}
.link-more:hover svg{transform:translateX(3px)}

/* 와이드 추천 - 박스를 벗기고 비대칭 분할로 */
.feat{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,4.5vw,64px); align-items:center;
  padding-bottom:var(--gap-7); margin-bottom:var(--gap-7);
  border-bottom:1px solid var(--line);
}
.feat-img{position:relative; overflow:hidden; background:var(--bone-2)}
.feat-img img{
  width:100%; height:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform .6s var(--ease);
}
.feat:hover .feat-img img{transform:scale(1.04)}
.feat-body{display:flex; flex-direction:column; justify-content:center}
.tag{
  display:inline-flex; align-items:center; align-self:flex-start;
  padding:6px 13px; border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:-.01em;
  background:var(--amber-soft); color:#8A5B12; margin-bottom:var(--gap-4);
}
.feat-body h3{font-size:var(--fs-2xl); letter-spacing:-.04em}
.feat-body p{margin-top:var(--gap-4); color:var(--ink-2); line-height:1.75; max-width:44ch}
.feat-price{
  margin-top:var(--gap-6); display:flex; align-items:baseline; gap:10px;
  font-family:SUIT,sans-serif;
}
.feat-price b{font-size:var(--fs-xl); font-weight:800; letter-spacing:-.04em}
.feat-price span{font-size:var(--fs-sm); color:var(--muted); font-weight:600}
.feat-act{display:flex; gap:var(--gap-3); margin-top:var(--gap-5); flex-wrap:wrap}

/* 상품 그리드 - 카드 상자를 벗기고 사진 + 글 + 괘선만 */
.prods{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.6vw,36px)}
.prod{display:flex; flex-direction:column}
.prod-img{position:relative; overflow:hidden; background:var(--bone-2); display:block}
.prod-img img{width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .6s var(--ease)}
.prod:hover .prod-img img{transform:scale(1.05)}
.prod-body{padding:16px 0 0; display:flex; flex-direction:column; flex:1}
.prod-name{
  font-size:var(--fs-base); font-weight:700; letter-spacing:-.025em;
  line-height:1.45; min-height:2.9em;
}
.prod-name:hover{color:var(--forest)}
.prod-meta{margin-top:5px; font-size:var(--fs-xs); color:var(--muted)}
.prod-price{
  margin-top:var(--gap-3); font-family:SUIT,sans-serif;
  font-size:var(--fs-lg); font-weight:800; letter-spacing:-.04em;
}
.prod-cart{
  margin-top:var(--gap-4); padding:12px 0 0;
  border-top:1px solid var(--line); color:var(--forest);
  font-size:var(--fs-sm); font-weight:700; text-align:left; display:block;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.prod-cart:hover{color:var(--forest-deep); border-top-color:var(--forest)}

/* ===== 정기구독 (다크) ===== */
.sub-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--gap-9); align-items:center}
.sub-img{border-radius:var(--r-lg); overflow:hidden}
.sub-img img{width:100%; aspect-ratio:4/3.2; object-fit:cover}
/* 혜택 - 유리 박스 3개 → 괘선 목록 */
.sub-benefits{margin-top:var(--gap-6); border-top:1px solid var(--line-dark)}
.sub-b{padding:16px 0; border-bottom:1px solid var(--line-dark)}
.sub-b b{display:block; font-size:var(--fs-base); color:#fff; letter-spacing:-.02em}
.sub-b span{display:block; margin-top:3px; font-size:var(--fs-sm); color:#A9C2B3}

/* 가격 - 박스 대신 굵은 윗선 하나 */
.sub-price{
  margin-top:var(--gap-6); padding-top:var(--gap-5);
  border-top:1px solid rgba(255,255,255,.55);
}
.sub-price-row{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.sub-off{
  background:var(--amber); color:#2A1B06; font-weight:800;
  font-size:var(--fs-xs); padding:5px 11px; border-radius:var(--r-pill);
  font-family:SUIT,sans-serif;
}
.sub-was{font-size:var(--fs-base); color:#8FA898; text-decoration:line-through}
.sub-now{
  font-family:SUIT,sans-serif; font-weight:800; color:#fff;
  font-size:var(--fs-2xl); letter-spacing:-.045em;
}
.sub-note{margin-top:10px; font-size:var(--fs-xs); color:#8FA898}

/* 프로세스 4단계 */
.flow{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap-5);
  margin-top:var(--gap-8); padding-top:var(--gap-8);
  border-top:1px solid var(--line-dark);
}
.fl{position:relative; padding-left:0}
.fl-n{
  font-family:SUIT,sans-serif; font-weight:800; font-size:var(--fs-xs);
  width:26px; height:26px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.12); color:#fff;
  display:grid; place-items:center; margin-bottom:14px;
}
.fl h4{font-size:var(--fs-base); color:#fff; margin-bottom:6px; letter-spacing:-.025em}
.fl p{font-size:var(--fs-sm); color:#A9C2B3; line-height:1.65}
.fl:not(:last-child)::after{
  content:""; position:absolute; top:13px; right:calc(var(--gap-5) * -1);
  width:var(--gap-5); height:1px; background:var(--line-dark);
}

/* ===== 리뷰 =====
   카드 3개 → 큰 인용 하나 + 괘선 목록 (상세페이지와 같은 언어) */
.rev-best{margin-top:0}
.rev-best .qm{font-family:SUIT,sans-serif; font-size:40px; line-height:0; color:var(--muted); display:block; height:22px}
.rev-best .stars{display:flex; gap:2px; color:var(--amber); margin-top:18px}
.rev-best .stars svg{width:15px; height:15px}
.rev-best .tx{
  font-size:clamp(18px,2.3vw,24px); line-height:1.7; font-weight:600;
  margin-top:16px; max-width:34ch; letter-spacing:-.03em;
}
.rev-best .by{margin-top:18px; font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.rev-best .by b{color:var(--ink-2); font-weight:700}
.rev-ls{margin-top:36px; border-top:1px solid var(--line)}
.rev-ls li{
  display:grid; grid-template-columns:1fr auto; gap:18px; align-items:baseline;
  padding:19px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); color:var(--ink-2);
}
.rev-ls .meta{font-size:11.5px; color:var(--muted); white-space:nowrap}
.chip-ex{
  background:var(--bone-2); color:var(--muted);
  padding:3px 9px; border-radius:var(--r-pill); font-weight:700; font-size:11px;
}

/* ===== 인증 띠 =====
   흰 박스 4개 → 괘선 4단. 연도가 실제 정보라 크게 세운다. */
.certs{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink); border-bottom:1px solid var(--line);
}
.cert{padding:26px 22px 30px; text-align:left}
.cert + .cert{border-left:1px solid var(--line)}
.cert-y{
  font-family:SUIT,sans-serif; font-weight:800;
  font-size:clamp(22px,2.2vw,28px); letter-spacing:-.04em;
  color:var(--forest); margin-bottom:10px; line-height:1;
}
.cert b{display:block; font-size:var(--fs-base); letter-spacing:-.03em; margin-bottom:6px}
.cert span{font-size:var(--fs-xs); color:var(--muted); line-height:1.6}

/* ===== 인스타 ===== */
.ig{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-top:var(--gap-6)}
.ig a{
  position:relative; overflow:hidden; border-radius:var(--r-md);
  aspect-ratio:1/1; background:var(--bone-2); display:block;
}
.ig img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease)}
.ig a:hover img{transform:scale(1.07)}

/* ===== 플로팅 상담 ===== */
.float-kko{
  position:fixed; right:20px; bottom:20px; z-index:70;
  width:56px; height:56px; border-radius:var(--r-pill);
  background:#FAE100; color:#2E1F00; box-shadow:var(--sh-3);
  display:grid; place-items:center;
  transition:transform .22s var(--ease);
}
.float-kko:hover{transform:translateY(-3px) scale(1.04)}
.float-kko svg{width:26px; height:26px}

/* ===== 반응형 ===== */
@media (max-width:1024px){
  .story{grid-template-columns:1fr; gap:var(--gap-7)}
  .story-badge{left:auto; right:18px; bottom:-16px}
  .sub-grid{grid-template-columns:1fr; gap:var(--gap-7)}
  .prods{grid-template-columns:repeat(2,1fr)}
  /* 괘선 4단 → 2단: 왼쪽 선은 짝수 칸에만, 3번째부터는 윗선 */
  .cycle{grid-template-columns:repeat(2,1fr)}
  .cy + .cy{border-left:none}
  .cy:nth-child(even){border-left:1px solid var(--line)}
  .cy:nth-child(n+3){border-top:1px solid var(--line)}
  .certs{grid-template-columns:repeat(2,1fr)}
  .cert + .cert{border-left:none}
  .cert:nth-child(even){border-left:1px solid var(--line)}
  .cert:nth-child(n+3){border-top:1px solid var(--line)}
  .flow{grid-template-columns:repeat(2,1fr); gap:var(--gap-6)}
  .fl:not(:last-child)::after{display:none}
  .ig{grid-template-columns:repeat(3,1fr)}
  .facts-grid{grid-template-columns:repeat(2,1fr)}
  .fact:nth-child(2){border-right:0}
  .fact:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:768px){
  .hero{min-height:min(88vh,620px)}
  /* 모바일에서는 사진 아래쪽이 밝아 글이 묻힌다. 아래에서 올라오는 어둠을 더 준다 */
  .hero::after{
    background:
      linear-gradient(to top, rgba(10,26,19,.9) 0%, rgba(10,26,19,.72) 38%,
                              rgba(10,26,19,.35) 66%, rgba(10,26,19,.15) 100%);
  }
  .hero-in{padding-bottom:var(--gap-8)}
  .hero-cta{gap:10px; margin-top:var(--gap-6)}
  .hero-cta .btn{flex:1 1 auto; min-width:138px}
  .feat{grid-template-columns:1fr; gap:var(--gap-5)}
  .feat-img img{aspect-ratio:16/11}
  .sec-head{margin-bottom:var(--gap-6)}
  .fact{padding:var(--gap-6) var(--gap-4)}
  .cy,.cert{padding:20px 16px 24px}
  .rev-ls li{grid-template-columns:1fr; gap:8px}
}
@media (max-width:420px){
  .prods{gap:12px}
  .prod-body{padding:14px}
  .prod-name{font-size:var(--fs-sm); min-height:2.8em}
  .ig{grid-template-columns:repeat(3,1fr); gap:7px}
}

/* ===== 방송 출연 자리 =====
   의뢰서 "레거시 미디어 다수 출연" 항목. 자료를 못 받아 자리만 만들어 둔다.
   빈 칸이라는 것이 보이게 점선으로 처리해, 시안을 보는 분이 오해하지 않게 한다. */
.media{margin-top:var(--gap-7); text-align:center}
.media-label{
  font-size:var(--fs-sm); font-weight:700; color:var(--ink-2);
  letter-spacing:-.02em; margin-bottom:var(--gap-4);
}
.media-slots{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:12px; max-width:760px; margin:0 auto;
}
.media-slot{
  display:grid; place-items:center; padding:16px 10px;
  border:1px dashed var(--line-strong); color:var(--muted);
  font-size:var(--fs-sm); font-weight:600; background:var(--white);
}
.media-note{margin-top:14px; font-size:var(--fs-xs); color:var(--muted)}
@media (max-width:768px){
  .media-slots{grid-template-columns:repeat(2,1fr); gap:10px}
  .media-slot{padding:13px 8px; font-size:var(--fs-xs)}
}