/* =========================================================
   FLAGSHIP SECTION — JW MEDIA "CORE SERVICE" 구조 재현
   prototype.html 의 .jw-service(#flagship) 에만 적용 (다른 섹션 영향 없음)

   레퍼런스 실측 (1440px):
   - 배경 #080706, padding 136 / 24 / 150, 컨텐츠 1280px
   - 상단: 좌 62%(라벨 12px → 22px → 제목 82px/900 lh1.3) | 우 하단 정렬 설명 16px/400 lh1.7 #AAA29B
   - 상단 → 목록 68px, 항목 간 20px
   - 항목: 상단 1px #3A332E, padding 38 / 0 / 58, 사진 718×430 | gap 42 | 글 520
          2번 항목은 좌우 반전
   - 글 영역: 맨 위 영문 124px/900 lh.8 ls-4px (사용자 요청으로 절반 62px 적용), 사진 하단 끝선에 맞춰
          라벨 12px → 15 → 제목 30px/600 → 15 → 본문 15px/400 lh1.75 → 15 → 태그 12px
   ========================================================= */

@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:600;font-style:normal;font-display:swap;
  src:url("https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.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-service{
  --sv-bg:#080706;
  --sv-ivory:#EEECE6;
  --sv-sub:#AAA29B;
  --sv-orange:#C24A5C; /* 버건디 강조 */
  --sv-rule:#3A332E;
  --sv-content:1280px;

  background:var(--sv-bg);
  color:var(--sv-ivory);
  padding:136px 24px 150px;
  font-family:"Paperlogy",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  word-break:keep-all;
}
.jw-service *{box-sizing:border-box}
.jw-service__inner{max-width:var(--sv-content);margin-inline:auto}

/* ---------- 상단 ---------- */
.jw-service__intro{display:flex;justify-content:space-between;align-items:flex-end;gap:28px 56px;margin-bottom:68px}
.jw-service__head{flex:0 1 62%;min-width:0;display:flex;flex-direction:column;gap:22px}
.jw-service__kicker,.jw-service__meta{margin:0;font-size:12px;font-weight:400;line-height:1.3;letter-spacing:.8px;text-transform:uppercase;color:var(--sv-orange)}
.jw-service__title{margin:0;font-size:82px;font-weight:900;line-height:1.3;letter-spacing:-2.5px;color:var(--sv-ivory)}
.jw-service__lead{margin:0;flex:0 0 auto;max-width:397px;font-size:16px;font-weight:400;line-height:1.7;color:var(--sv-sub)}

/* ---------- 항목 ---------- */
.jw-service__list{display:flex;flex-direction:column;gap:20px}
.jw-service__item{display:flex;align-items:stretch;gap:28px 42px;border-top:1px solid var(--sv-rule);padding:38px 0 58px}
.jw-service__item--rev{flex-direction:row-reverse}

/* 사진 — 각 사진 독립 제어: --pos(object-position) */
/* 58% / 42% 비율로 함께 줄어듦 (1280px에서 718 / 520px) */
.jw-service__fig{flex:0 1 58%;min-width:0;height:430px;margin:0;overflow:hidden}
.jw-service__fig img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
#flag-01{--pos:50% 50%}
#flag-02{--pos:50% 50%}
#flag-03{--pos:50% 50%}
#flag-04{--pos:50% 50%}

/* 글 영역: 단어는 위, 상세는 사진 하단 끝선에 */
.jw-service__copy{flex:0 1 42%;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:20px;
  overflow-x:clip} /* 압축 전 단어 폭이 화면 밖으로 밀려 가로 스크롤이 생기는 것 방지 (세로는 그대로 보임) */

/* 대형 영문 = 어종 이름으로 통일 (HANCHI 한치 / OCTOPUS 문어 / HAIRTAIL 갈치 / SQUID 갑오징어). 긴 단어는 --sx 로 가로만 압축해 520px 칸에 맞춤 (높이 124px 유지) */
.jw-service__word{margin:0;font-size:62px;font-weight:900;line-height:.8;letter-spacing:-2px;text-transform:uppercase;color:var(--sv-ivory);white-space:nowrap}
.jw-service__word span{display:inline-block;transform:scaleX(var(--sx,1));transform-origin:left top}
.jw-service__item--rev .jw-service__word span{transform-origin:left top}
#word-01{--sx:1}    /* HANCHI   (측정 후 조정) */
#word-02{--sx:1}    /* OCTOPUS  (2026-09-22 글자 절반으로 줄여 압축 불필요) */
#word-03{--sx:1}    /* HAIRTAIL */
#word-04{--sx:1}    /* SQUID    410px (압축 불필요) */

/* 홈 대표 섹션: 영문을 위가 아니라 설명 바로 위로 (2026-09-22 사용자 요청, 제품 페이지는 영향 없음) */
#flagship .jw-service__copy{justify-content:flex-end;gap:36px}
.jw-service__detail{display:flex;flex-direction:column;gap:15px}
.jw-service__name{margin:0;font-size:30px;font-weight:600;line-height:1.2;color:var(--sv-ivory)}
.jw-service__body{margin:0;font-size:15px;font-weight:400;line-height:1.75;color:var(--sv-sub)}
.jw-service__tags{margin:0;font-size:12px;font-weight:400;line-height:1.4;letter-spacing:.6px;text-transform:uppercase;color:var(--sv-orange)}

/* =========================================================
   TABLET (≤1024) — 레퍼런스: padding 100/32/110, 제목 62px, 사진 380px 높이, 단어 88px
   ========================================================= */
@media (max-width:1024px){
  .jw-service{padding:100px 32px 110px}
  .jw-service__title{font-size:62px}
  .jw-service__lead{max-width:293px}
  .jw-service__fig{height:380px}
  .jw-service__word{font-size:44px}
}

/* =========================================================
   MOBILE (≤767) — 세로 스택: 사진 → 단어 → 상세
   레퍼런스: padding 82/20/92, 제목 42px lh1.15, 사진 280px, 단어 72px, 제목 25px
   ========================================================= */
@media (max-width:767px){
  .jw-service{padding:82px 20px 92px}
  .jw-service__intro{flex-direction:column;align-items:flex-start;margin-bottom:48px}
  .jw-service__head{flex:0 0 auto;width:100%}
  .jw-service__title{font-size:42px;line-height:1.15;letter-spacing:-1.5px}
  .jw-service__title br{display:none}
  .jw-service__lead{max-width:none;font-size:14px}
  .jw-service__lead br{display:none}
  .jw-service__item,.jw-service__item--rev{flex-direction:column;padding:30px 0 48px}
  .jw-service__fig,.jw-service__copy{flex:0 0 auto;width:100%}
  .jw-service__fig{height:280px}
  .jw-service__word{font-size:36px}
  .jw-service__name{font-size:25px}
  .jw-service__body{font-size:14px}
  .jw-service__body br{display:none}
  .jw-service__tags{font-size:11px}
}