/* =========================================================
   보강분 — 2026-08-25
   기존 style.css 는 손대지 않는다. 이 파일만 지우면 원래대로 돌아온다.
   · .craft  : 만드는 과정 3단 (영상 + 사진)
   · .sizzle : 끓는 장면 영상 밴드
   ========================================================= */

/* ---------- 공통 : 영상 / 사진 상자 ---------- */
.vidbox{ position:relative; overflow:hidden; border-radius:var(--r); background:var(--ink); }
.vidbox video,
.vidbox img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- 만드는 과정 3단 ---------- */
.craft{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3.4vw,48px); }
.craft__item{ margin:0; }
.craft__media{ aspect-ratio:16/9; box-shadow:var(--sh); }
.craft__item h3{
  margin-top:26px; font-family:var(--serif); font-weight:800;
  font-size:clamp(1.1rem,2.1vw,1.4rem); letter-spacing:-.03em; line-height:1.5;
}
.craft__item p{ margin-top:12px; color:var(--ink-mid); font-size:.94rem; }

@media (max-width:880px){
  .craft{ grid-template-columns:1fr; gap:46px; }
}

/* ---------- 끓는 장면 밴드 ---------- */
.sizzle{ background:var(--ink); color:var(--paper); padding:clamp(76px,10vw,124px) 0; }
.sizzle__head{ max-width:820px; }
.sizzle__eye{ font-size:.72rem; font-weight:800; letter-spacing:.26em; color:#E58A78; margin-bottom:18px; }
.sizzle__h{
  font-family:var(--serif); font-weight:800; color:#fff;
  font-size:clamp(1.5rem,3.4vw,2.35rem); line-height:1.5; letter-spacing:-.035em;
  text-wrap:balance;
}
.sizzle__h em{ font-style:normal; color:var(--red2); }
.sizzle__p{ margin-top:18px; color:rgba(255,255,255,.66); font-size:1rem; }

.sizzle__grid{
  margin-top:clamp(40px,5vw,60px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px);
}
.sizzle__grid figure{ margin:0; }
.sizzle__media{ aspect-ratio:16/9; box-shadow:0 30px 70px rgba(0,0,0,.45); }
.sizzle__cap{ margin-top:14px; font-size:.86rem; color:rgba(255,255,255,.55); }

@media (max-width:720px){
  .sizzle__grid{ grid-template-columns:1fr; gap:34px; }
}

/* ---------- 스토리 ---------- */
.story{ padding:clamp(84px,11vw,132px) 0; background:var(--paper2); }
.story__in{ width:min(100% - 44px, 720px); margin-inline:auto; }
.story__eye{ font-size:.72rem; font-weight:800; letter-spacing:.26em; color:var(--red); margin-bottom:20px; }
.story__h{
  font-family:var(--serif); font-weight:800;
  font-size:clamp(1.6rem,3.6vw,2.4rem); line-height:1.45; letter-spacing:-.04em;
}
.story__h em{ font-style:normal; color:var(--red); }

.story__p{
  margin-top:clamp(30px,4vw,40px);
  color:var(--ink2); font-size:clamp(1rem,1.9vw,1.12rem); line-height:2.05; letter-spacing:-.015em;
}
.story__p + .story__p{ margin-top:26px; }
.story__p span{ display:block; }            /* 한 문장 = 한 줄 */
.story__p span + span{ margin-top:2px; }

.story__shot{ margin:clamp(38px,5vw,54px) 0 0; border-radius:var(--r); overflow:hidden; box-shadow:var(--sh); }
.story__shot img{ width:100%; height:auto; }

.story__pull{
  margin-top:clamp(38px,5vw,52px); padding:26px 0 26px 26px;
  border-left:3px solid var(--red);
  font-family:var(--serif); font-weight:800;
  font-size:clamp(1.2rem,2.6vw,1.6rem); line-height:1.65; letter-spacing:-.035em;
}
.story__pull span{ display:block; }
.story__pull em{ font-style:normal; color:var(--red); }

/* ---------- 후기 ----------
   후기 카드와 폰을 한 장씩 떼어내 직접 배치했다.
   아래쪽은 배경색으로 서서히 사라지게 덮는다. */
.rev{
  padding:clamp(84px,11vw,132px) 0 clamp(56px,7vw,88px);
  background:#F5F1EB; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.rev .sh__eye{ color:var(--red); }
.rev .sh__title{ color:var(--ink); }
.rev .sh__title em{ color:var(--red); font-style:normal; }
.rev .sh__desc{ color:var(--ink-mid); }

.revb{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,300px);
  gap:clamp(30px,6vw,86px); align-items:start;
}
/* 그리드 칸이 안쪽 내용에 밀려 넓어지지 않게 (모바일에서 그래프가 잘리던 원인) */
.revb > *{ min-width:0; }


/* 카드 배치 : 실제 후기 캡처를 2단으로 쌓고 아래는 배경색으로 사라지게 */
.rvcol{ position:relative; padding-bottom:8px; }
.rvwall{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(9px,1.1vw,14px); align-items:start;
  max-height:clamp(420px,56vw,780px); overflow:hidden;
}
.rvwall__col{ display:grid; gap:clamp(9px,1.1vw,14px); align-content:start; }
.rvwall img{
  width:100%; height:auto; display:block; border-radius:9px;
  box-shadow:0 8px 20px rgba(23,19,15,.11);
}
.rvcol__fade{
  position:absolute; left:-6%; right:-6%; bottom:0; height:24%; z-index:4; pointer-events:none;
  background:linear-gradient(to bottom, rgba(245,241,235,0) 0%, rgba(245,241,235,.74) 46%, #F5F1EB 90%);
}
.rvcol__cap{ display:none; margin-top:14px; font-size:.8rem; color:var(--ink-dim); }

/* 막대그래프 : 화면에 들어오면 채워진다.
   색은 브랜드 적색에서 흙빛으로 내려가는 5단계 — 값이 큰 항목일수록 진하다 */
.rbars{ display:grid; gap:clamp(18px,2.3vw,26px); padding-top:6px;
        position:sticky; top:calc(var(--hd-h) + 40px); }
.rbars li{ display:grid; grid-template-columns:1fr auto; gap:10px 12px; align-items:baseline; }
.rbars__label{ font-size:1rem; font-weight:800; color:var(--ink); letter-spacing:-.025em; }
.rbars__n{ font-family:var(--serif); font-weight:800; font-size:1.32rem; letter-spacing:-.02em; }
.rbars__track{
  grid-column:1 / -1; position:relative; height:13px; border-radius:999px;
  background:var(--paper3); overflow:hidden;
}
.rbars__track i{
  position:absolute; inset:0 auto 0 0; width:0; border-radius:999px;
  background:var(--c);
  transition:width 1.5s var(--ease);
}
.rbars.is-visible .rbars__track i{ width:var(--w); }

.rbars li:nth-child(1){ --c:#B0211A; }   /* 가장 진한 적색 */
.rbars li:nth-child(2){ --c:#CB3524; }
.rbars li:nth-child(3){ --c:#D9663A; }   /* 구운 주황 */
.rbars li:nth-child(4){ --c:#BE8B4A; }   /* 황토 */
.rbars li:nth-child(5){ --c:#8A7A69; }   /* 따뜻한 회갈색 */
.rbars li .rbars__n{ color:var(--c); }

.rbars li:nth-child(2) .rbars__track i{ transition-delay:.12s; }
.rbars li:nth-child(3) .rbars__track i{ transition-delay:.24s; }
.rbars li:nth-child(4) .rbars__track i{ transition-delay:.36s; }
.rbars li:nth-child(5) .rbars__track i{ transition-delay:.48s; }
.rbars li.rbars__note{ display:block; margin-top:22px; font-size:.78rem; color:var(--ink-dim); }

@media (max-width:900px){
  .revb{ grid-template-columns:1fr; gap:34px; }
}
@media (max-width:620px){
  /* 폰에서도 PC 와 같은 구성 : 카드 3단 한 덩어리 + 그 아래 그래프 */
  .rvwall{
    grid-template-columns:repeat(3,1fr); gap:7px;
    max-height:clamp(300px,112vw,460px);
  }
  .rvwall img{ border-radius:6px; box-shadow:0 5px 12px rgba(23,19,15,.10); }
  .rvcol__fade{ height:20%; }
  .rbars{ position:static; padding-top:0; }
  .rbars__label{ font-size:.94rem; }
  .rbars__n{ font-size:1.15rem; }
  .rbars__track{ height:11px; }
}

@media (prefers-reduced-motion:reduce){
  .rbars__track i{ transition:none; }
}

/* ---------- 후기 배경 워터마크 ----------
   음식 사진을 깔면 후기 카드와 싸운다. 로고 그릇 심볼을 아주 옅게 한 겹만. */
.rev{ position:relative; overflow:hidden; }
.rev__mark{
  position:absolute; right:-8%; top:2%;
  width:min(54%, 640px); aspect-ratio:230/154;
  background:url("../img/plus/mark-bowl.png") center/contain no-repeat;
  opacity:.11; z-index:0; pointer-events:none;
}
.rev > .wrap{ position:relative; z-index:1; }
@media (max-width:900px){
  .rev__mark{ width:76%; top:1%; opacity:.08; }
}