/* =========================================================
   HERO — JW MEDIA REFERENCE REPRODUCTION
   이 파일은 prototype.html의 HERO(.jw-hero)에만 적용된다.
   모든 선택자가 .jw-hero 또는 #hero-* 로 한정되어 다른 섹션에 영향 없음.

   레퍼런스 실측 (1440px, 클라이언트 폭 1425px):
   - 컨텐츠 폭 1280px, 열 28% / 50% / 22% + gap 20px → 347 / 620 / 273px
   - 행 min-height 270px, 상하 padding 18px, 1·2행 하단 1px 오렌지 선
   - 이미지 높이 222px 고정, 폭은 열 폭 − 18px
   - 대형 단어 Paperlogy 900 / 160px / line-height .82 / letter-spacing −11px
   - 3행 단어(CATCH)만 scaleX(.66) 가로 압축 (≥1025px) — 레퍼런스 STORY와 동일 처리
   ========================================================= */

@font-face{font-family:"Paperlogy";font-weight:400;font-style:normal;font-display:swap;
  src:url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2") format("woff2")}
@font-face{font-family:"Paperlogy";font-weight:900;font-style:normal;font-display:swap;
  src:url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2") format("woff2")}

.jw-hero{
  --jw-bg:#080706;
  --jw-ivory:#EEECE6;
  --jw-orange:#C24A5C; /* 버건디 강조 (변수명 유지) */
  --jw-content:1280px;   /* HERO container */
  --jw-gap:20px;         /* 열 사이 간격 */
  --jw-row-h:270px;      /* 행 최소 높이 */
  --jw-row-pad:18px;     /* 행 상하 padding */
  --jw-inset:18px;       /* 열 안쪽 여백 → 이미지 폭 = 열 − 18px */
  --jw-img-h:222px;      /* 이미지 기본 높이 */
  --jw-word-size:160px;
  --jw-word-ls:-11px;

  background:var(--jw-bg);
  color:var(--jw-ivory);
  min-height:100vh;
  padding:36px 24px 34px;
  font-family:"Paperlogy","Pretendard Variable",Pretendard,sans-serif;
}
.jw-hero *,.jw-hero *::before,.jw-hero *::after{box-sizing:border-box}
.jw-hero__inner{width:100%;max-width:var(--jw-content);margin-inline:auto}

/* ---------- ROW ---------- */
.jw-row{display:flex;align-items:center;gap:var(--jw-gap);min-height:var(--jw-row-h);padding:var(--jw-row-pad) 0}
.jw-row--1,.jw-row--2{border-bottom:1px solid var(--jw-orange)} /* ORANGE DIVIDER */

/* ---------- COLUMN (28 / 50 / 22) ---------- */
.jw-col{min-width:0;display:flex;flex-direction:column;justify-content:center}
.jw-col--a{flex:0 1 28%}
.jw-col--b{flex:0 1 50%}
.jw-col--c{flex:0 1 22%}

/* ---------- 대형 단어 ---------- */
.jw-word{
  margin:0;
  font-family:"Paperlogy","Pretendard Variable",Pretendard,sans-serif;
  font-size:var(--jw-word-size);
  font-weight:900;
  line-height:.82;
  letter-spacing:var(--jw-word-ls);
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--jw-ivory);
}
/* 1열 단어는 레퍼런스처럼 가로 압축으로 칸 안에 맞춤 (이미지와 겹침 방지)
   FEEL  377px × .76 = 288px → 레퍼런스 SEE 폭과 동일
   CATCH 530px × .66 = 350px → 레퍼런스 STORY와 동일 압축률 */
#hero-feel{display:inline-block;transform:scaleX(.76);transform-origin:left center}
#hero-cast{}
#hero-catch{display:inline-block;transform:scaleX(.66);transform-origin:left center}

/* ---------- 이미지 — 각 이미지 독립 제어 ----------
   --w      wrapper 폭      (기본: 열 폭 − 18px)
   --h      wrapper 높이    (기본: 222px, auto로 두면 --ratio 적용)
   --ratio  aspect-ratio    (기본: auto — 높이 고정 방식)
   --pos    object-position (crop 위치)
   --m      margin
   --dx/--dy translate 이동
   이미지는 wrapper 안에서 object-fit:cover — 절대 늘리지 않음 */
.jw-img{
  position:relative;
  overflow:hidden;
  margin:var(--m,0);
  width:var(--w,calc(100% - var(--jw-inset)));
  max-width:100%;
  height:var(--h,var(--jw-img-h));
  aspect-ratio:var(--ratio,auto);
  translate:var(--dx,0px) var(--dy,0px);
}
.jw-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);border-radius:0}

#hero-01{ --w:calc(100% - 18px); --h:222px; --ratio:auto; --pos:50% 50%; --m:0; --dx:0px; --dy:0px; }
#hero-02{ --w:calc(100% - 18px); --h:222px; --ratio:auto; --pos:50% 50%; --m:0; --dx:0px; --dy:0px; }
#hero-03{ --w:calc(100% - 18px); --h:222px; --ratio:auto; --pos:50% 42%; --m:0; --dx:0px; --dy:0px; } /* 4:3 원본 → 낚싯대 곡선·인물 기준 세로 42% */

/* ---------- 우측 설명 + CTA ---------- */
.jw-brief{padding-left:var(--jw-inset)}
.jw-brief p{margin:0;font-family:"Paperlogy","Pretendard Variable",Pretendard,sans-serif;font-weight:400;line-height:1.2}
.jw-brief__exp{font-size:17px;letter-spacing:.6px;color:var(--jw-ivory)}
.jw-brief__cat{margin-top:16px!important;font-size:14px;letter-spacing:.2px;text-transform:uppercase;color:var(--jw-orange)}
.jw-brief__make{margin-top:20px!important;font-size:16px;letter-spacing:.8px;text-transform:uppercase;color:var(--jw-ivory)}
.jw-brief__cta{
  margin-top:16px;
  display:flex;align-items:center;justify-content:center;
  width:100%;height:56px;padding:20px 40px;
  border:1px solid var(--jw-orange);border-radius:0;
  background:var(--jw-bg);color:var(--jw-orange);
  font-family:"Paperlogy","Pretendard Variable",Pretendard,sans-serif;
  font-size:14px;font-weight:400;letter-spacing:.7px;text-transform:uppercase;white-space:pre;
  text-decoration:none;transition:background-color .25s,color .25s;
}
.jw-brief__cta:hover,.jw-brief__cta:focus-visible{background:var(--jw-orange);color:var(--jw-bg)}

/* ---------- MOTION 초기 상태 (JS 로드 전 깜빡임 방지) ---------- */
.jw-motion .jw-hero .jw-word-wrap,
.jw-motion .jw-hero .jw-img{opacity:0}
/* 우측 설명 블록(.jw-brief)은 모션 없이 처음부터 표시 */

/* =========================================================
   TABLET (≤1024px) — 레퍼런스 실측: 단어 112px, 행 230px, 이미지 높이 190px
   ========================================================= */
@media (max-width:1024px){
  .jw-hero{--jw-row-h:230px;--jw-row-pad:16px;--jw-inset:14px;--jw-word-size:112px;--jw-word-ls:-5px;padding-top:24px}
  #hero-01,#hero-02,#hero-03{--w:calc(100% - 14px);--h:190px}
  /* 태블릿도 압축 유지 — 풀면 CATCH가 hero-03과 107px 겹침 */
}

/* =========================================================
   MOBILE (≤767px) — 세로 스택: FEEL → 01 / 02 → CAST / CATCH → 03 → 설명 → CTA
   ========================================================= */
@media (max-width:767px){
  .jw-hero{min-height:0;padding:20px 20px 56px;--jw-row-pad:24px;--jw-word-size:clamp(52px,18vw,70px);--jw-word-ls:-3px}
  .jw-row{flex-direction:column;align-items:stretch;gap:14px;min-height:0}
  .jw-col{flex:0 0 auto;width:100%}
  .jw-col--c:empty{display:none}
  #hero-01,#hero-02,#hero-03{--w:100%;--h:auto;--ratio:335/210}
  #hero-feel,#hero-catch{transform:none} /* 모바일은 세로 스택이라 압축 불필요 */
  .jw-brief{padding-left:0;padding-top:10px}
}

@media (prefers-reduced-motion:reduce){
  .jw-motion .jw-hero .jw-word-wrap,.jw-motion .jw-hero .jw-img{opacity:1}
}