/* =========================================================
   TOKENS — Black / Warm Ivory / Wine Burgundy 3색 체계 (2026-09-22 오렌지 → 버건디)
   ========================================================= */
:root{
  --black:#12100F;   /* 기본 블랙 */
  --black-2:#080706; /* 깊은 블랙 (챕터 구분용) */
  --ivory:#EEECE6;   /* 웜 아이보리 — 순백 금지 */
  --burgundy:#6E1A26; /* 와인 버건디 — 넓은 면·버튼 (위 글씨는 아이보리) */
  --orange:#C24A5C;  /* 강조 글씨·선용 밝은 버건디 (변수명은 기존 호환용으로 유지) */

  --ink:#12100F;
  --body:#4A4640;
  --muted:#7A756D;
  --on-dark:rgba(255,255,255,.62);
  --on-dark-muted:rgba(255,255,255,.42);
  --line-dark:rgba(255,255,255,.14);
  --line-light:rgba(18,16,15,.14);
  --line-orange:rgba(18,16,15,.28);

  /* 여백 스케일 — 큰 공간과 작은 공간의 차이를 크게 */
  --sec:clamp(72px,9vw,140px);        /* 일반 섹션 100~160 */
  --sec-lg:clamp(100px,12.5vw,200px); /* 중요 섹션 160~220 */
  --gap-type:clamp(36px,4.5vw,72px);  /* 큰 타이포 → 다음 요소 40~80 */
  --gap-img:clamp(18px,2vw,32px);     /* 사진 ↔ 사진 20~40 */
  --gap-text:clamp(16px,1.6vw,26px);  /* 텍스트 ↔ 본문 16~30 */
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Pretendard Variable",Pretendard,"Noto Sans KR",sans-serif;background:var(--ivory);color:var(--ink);-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:auto;border-radius:0}
a{text-decoration:none;color:inherit}
figure{margin:0}

/* Container — 화면 폭 80%, 좌우 10% */
.wrap{width:80%;margin-inline:auto}

/* 섹션 배경 */
.sec{padding-block:var(--sec)}
.sec-lg{padding-block:var(--sec-lg)}
.bg-black{background:var(--black);color:#fff}
.bg-black2{background:var(--black-2);color:#fff}
.bg-ivory{background:var(--ivory);color:var(--ink)}
.bg-orange{background:var(--burgundy);color:var(--ivory)}

/* =========================================================
   TYPOGRAPHY — 5단계 위계
   ========================================================= */
/* L5 Eyebrow 10~12px */
.label{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);margin-bottom:20px}
.bg-orange .label{color:rgba(238,236,230,.62)}
/* L2 Section Display 64~90px */
.disp{font-size:clamp(44px,5.6vw,96px);font-weight:800;line-height:1;letter-spacing:-.045em}
/* L3 한국어 메인 헤딩 40~55px */
.h3{font-size:clamp(30px,3.4vw,52px);font-weight:800;line-height:1.12;letter-spacing:-.03em}
/* L4 설명 제목 18~24px */
.h4{font-size:clamp(18px,1.45vw,21px);font-weight:700;line-height:1.35;letter-spacing:-.01em}
/* L5 Body 13~16px */
.copy{font-size:15px;line-height:1.8;color:var(--body)}
.bg-black .copy,.bg-black2 .copy{color:var(--on-dark)}
.bg-orange .copy{color:rgba(238,236,230,.8)}
.meta{font-size:13px;line-height:1.7;color:var(--muted)}
.bg-black .meta,.bg-black2 .meta{color:var(--on-dark-muted)}

/* 버튼 — 직사각형, radius 0, 작고 단단하게 */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.02em;padding:14px 22px;border-radius:0;border:1px solid transparent;transition:background .2s,color .2s}
.btn-orange{background:var(--burgundy);color:var(--ivory)}
.btn-orange:hover{background:#86222F}
.btn-black{background:var(--black);color:#fff}
.btn-black:hover{background:#2a2624}
.btn-line{background:transparent;border-color:var(--black);color:var(--black)}
.btn-line:hover{background:var(--black);color:#fff}

/* =========================================================
   HEADER
   ========================================================= */
.hd{position:sticky;top:0;z-index:20;background:var(--black);border-bottom:1px solid var(--line-dark)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{color:#fff;font-weight:900;letter-spacing:.14em;font-size:25.5px} /* 로고: 17px → 25.5px(1.5배), 700 → 900 */
.nav{display:flex;align-items:center;gap:32px}
.nav a{color:var(--on-dark);font-size:14px;font-weight:500}
.nav a:hover,.nav a.on{color:#fff}
.nav .btn{color:var(--ivory);padding:11px 18px}

/* =========================================================
   1. HERO — 4단 모듈 그리드, grid-column 이동으로 계단 생성
   ---------------------------------------------------------
   | 1 | 2 | 3 | 4 |
   r1: SEA   | [ IMAGE 2~3 ]  |
   r2: [IMG] | SENSE 2~3      |
   r3: STRIKE| [ IMAGE 2~3 ]  | COPY + CTA
   ========================================================= */
.hero{padding-block:clamp(64px,8vw,120px) var(--sec-lg)}
.hero .label{margin-bottom:clamp(28px,3.5vw,52px)}
.hero-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:1.8vw;           /* 글자 ↔ 이미지 약 2% viewport */
  row-gap:1.5vw;              /* 구분선 위아래 여백 (선이 행 사이에 들어가므로 양쪽에 동일 적용) */
  align-items:center;
}
/* 행 기준선 — 컨테이너 좌측 끝부터 우측 끝까지 */
.h-rule{grid-column:1/-1;height:1px;border:0;margin:0;background:var(--orange);align-self:stretch}
.h-rule.r1{grid-row:2}
.h-rule.r2{grid-row:4}
.h-rule.r3{grid-row:6}
/* 모듈 1개 = (80vw − 3×1.8vw) ÷ 4 ≈ 18.5vw
   가장 긴 STRIKE(실측 ≈3.22em)가 1모듈에 들어가도록 5.6vw로 역산 */
.hword{font-size:5.6vw;font-weight:900;line-height:.88;letter-spacing:-.05em;color:#fff;white-space:nowrap}
/* 이미지 위계: SEA = Wide / SENSE = Medium Landscape / STRIKE = Large Action Landscape
   aspect-ratio + object-fit:cover 로 찌그러짐·강제 늘림 방지 */
.hero-grid img{width:100%;height:auto;object-fit:cover}
.h-i1 img{aspect-ratio:2.3/1;object-position:center}
.h-i2 img{aspect-ratio:1.7/1;object-position:60% 55%}
.h-i3 img{aspect-ratio:3/2;object-position:48% 55%}

.h-w1{grid-column:1/2;grid-row:1}
.h-i1{grid-column:2/4;grid-row:1}

.h-i2{grid-column:1/2;grid-row:3}
.h-w2{grid-column:2/4;grid-row:3}

.h-w3{grid-column:1/2;grid-row:5}
.h-i3{grid-column:2/4;grid-row:5}
.h-cta{grid-column:4/5;grid-row:5;align-self:end}

.h-cta p{font-size:14px;line-height:1.7;color:var(--on-dark);margin-bottom:18px}
.h-cta p b{display:block;color:#fff;font-size:15px;font-weight:700;margin-bottom:6px}

/* =========================================================
   2. 질문
   ========================================================= */
.split{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:1.8vw}
.split>.l{grid-column:1/3}
.split>.r{grid-column:3/5}
.qlist{border-top:1px solid var(--line-light)}
.qitem{display:grid;grid-template-columns:44px 1fr;padding:28px 0;border-bottom:1px solid var(--line-light)}
.qnum{font-size:12px;font-weight:700;color:var(--orange);padding-top:4px;letter-spacing:.08em}
.qitem .h4{margin-bottom:10px}

/* =========================================================
   3. 대표 3종 — 이미지/타이틀 좌우 교차, 16:9
   ========================================================= */
.sec-head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:1.8vw;align-items:end;margin-bottom:var(--gap-type)}
.sec-head>.l{grid-column:1/3}
.sec-head>.r{grid-column:3/5}
.flag{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:1.8vw;align-items:center;padding-block:clamp(36px,4.5vw,64px);border-top:1px solid var(--line-dark)}
.flag .tx{grid-column:1/3}
.flag .fig{grid-column:3/5}
.flag.rev .tx{grid-column:3/5;grid-row:1}
.flag.rev .fig{grid-column:1/3;grid-row:1}
.flag img{aspect-ratio:16/9;object-fit:cover}
.flag .disp{margin-bottom:var(--gap-text)}
.fmeta{font-size:11px;letter-spacing:.2em;color:var(--orange);font-weight:600;margin-bottom:10px;text-transform:uppercase}
.flag .h4{margin-bottom:10px}
.flag .copy{max-width:440px}

/* =========================================================
   4. 숫자 — Orange 넓은 면
   ========================================================= */
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:1.8vw;padding-block:clamp(28px,3vw,44px);border-top:1px solid var(--line-orange);border-bottom:1px solid var(--line-orange);margin-bottom:var(--gap-type)}
.num b{display:block;font-size:clamp(44px,5.6vw,90px);font-weight:900;line-height:1;letter-spacing:-.045em}
.num span{display:block;margin-top:14px;font-size:13px;line-height:1.6;color:rgba(18,16,15,.72)}
.nrow{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-orange);font-size:15px;font-weight:600}
.nrow i{font-style:normal;opacity:.5}
.statimg{grid-column:4/5}

/* =========================================================
   5. 마퀴
   ========================================================= */
.mq{overflow:hidden;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding:22px 0;margin-top:var(--gap-type)}
.mqin{display:flex;white-space:nowrap;animation:mv 30s linear infinite;font-size:14px;color:var(--on-dark);font-weight:500}
.mqin span{padding-right:0}
@keyframes mv{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================
   6. SELECTED — 파노라마 2.4:1 + 3:2 두 장
   ========================================================= */
.sel-wide img{aspect-ratio:2.4/1;object-fit:cover}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-img);margin-top:var(--gap-img)}
.two img{aspect-ratio:3/2;object-fit:cover}
.cap{margin-top:14px}
.cap .h4{font-size:15px;margin-bottom:4px}

/* =========================================================
   7. DETAIL — 세로 3:4로 템포 전환
   ========================================================= */
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-img)}
.four img{aspect-ratio:3/4;object-fit:cover}
.four figcaption{margin-top:14px}

/* =========================================================
   8. 라인업 — 카드 UI 제거, 사진 + 텍스트만
   ========================================================= */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap-img);row-gap:clamp(36px,4vw,56px)}
a.card{display:block;color:inherit;text-decoration:none}
.card img{aspect-ratio:1;object-fit:cover;transition:opacity .2s}
.card:hover img{opacity:.86}
.card .t{font-size:11px;letter-spacing:.2em;color:var(--orange);font-weight:600;margin:16px 0 8px}
.card .h4{margin-bottom:4px}

/* =========================================================
   9. 공정
   ========================================================= */
.plist{border-top:1px solid var(--line-dark)}
.pitem{display:grid;grid-template-columns:72px 1fr;padding:26px 0;border-bottom:1px solid var(--line-dark)}
.pnum{font-size:clamp(28px,2.6vw,40px);font-weight:900;color:var(--orange);line-height:1;letter-spacing:-.03em}
.pitem .h4{margin-bottom:8px}

/* =========================================================
   10. 후기 (텍스트만)
   ========================================================= */
.score{display:flex;align-items:baseline;gap:12px;margin-bottom:var(--gap-text)}
.score b{font-size:clamp(44px,4.4vw,68px);font-weight:900;letter-spacing:-.04em;line-height:1}
.quote{font-size:clamp(20px,2.2vw,32px);font-weight:700;line-height:1.55;letter-spacing:-.02em}

/* =========================================================
   11. CTA — 마지막에 크게
   ========================================================= */
/* 잘림 방지: 조상 요소까지 overflow 명시 해제 + 넉넉한 line-height + stroke 두께만큼 상하 padding */
.cta{--stroke:2px;padding-block:clamp(140px,16vw,260px);overflow:visible}
.cta .wrap{overflow:visible}
.cta-big{font-size:clamp(52px,6.4vw,120px);font-weight:900;line-height:1.22;letter-spacing:-.045em;
  overflow:visible;padding-block:calc(var(--stroke) + .06em)}
.cta-big.out{font-family:Pretendard,"Pretendard Variable",sans-serif;color:transparent;-webkit-text-stroke:var(--stroke) var(--black);paint-order:stroke fill}
.cta-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:1.8vw;align-items:end;margin-top:var(--gap-type)}
.cta-row .copy{grid-column:1/3}
.cta-row .btns{grid-column:3/5;justify-self:end;display:flex;gap:10px;flex-wrap:wrap}

/* =========================================================
   FOOTER
   ========================================================= */
footer{background:var(--black-2);color:var(--on-dark-muted);padding-block:64px;font-size:13px;line-height:1.7}
footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
footer .fb{color:#fff;font-size:17px;font-weight:700;letter-spacing:.14em;margin-bottom:10px}
footer nav{display:flex;gap:24px}
footer nav a:hover{color:#fff}

.note{background:#F4E6E8;border-left:3px solid var(--burgundy);padding:12px 18px;font-size:13px;color:#6E1A26}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1024px){
  .four,.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .statimg{grid-column:1/-1;max-width:320px}
}
@media(max-width:767px){
  .wrap{width:calc(100% - 40px)}
  .nav a:not(.btn){display:none}
  .brand{font-size:20px} /* 모바일: 문의하기 버튼과 간격 확보 */
  /* 히어로: 한 열로 쌓되 2행의 '이미지 → 단어' 교차는 유지 */
  .hero-grid{grid-template-columns:1fr;row-gap:14px}
  .hero-grid>*{grid-column:1/-1!important;grid-row:auto!important}
  .hword{font-size:17vw}
  /* 모바일: 좁은 폭에 맞춰 파노라마를 완화 — 위계(Wide > Medium > Action)는 유지 */
  .h-i1 img{aspect-ratio:2/1}
  .h-i2 img{aspect-ratio:16/10}
  .h-i3 img{aspect-ratio:4/3}
  .h-w2,.h-w3{margin-top:18px}
  .h-cta{margin-top:24px}
  .split>.l,.split>.r,.sec-head>.l,.sec-head>.r,
  .flag .tx,.flag .fig,.flag.rev .tx,.flag.rev .fig,
  .cta-row .copy,.cta-row .btns{grid-column:1/-1;grid-row:auto}
  .split,.sec-head,.flag,.cta-row{row-gap:26px}
  .flag.rev .fig{order:-1}
  .cta-row .btns{justify-self:start}
  .two{grid-template-columns:1fr}
  .nums{grid-template-columns:1fr}
}

/* =========================================================
   SUB PAGES — 회사소개 · 자료실 · 문의하기 공통
   ========================================================= */
/* 서브 히어로: 대형 영문 워드 → 오렌지 기준선 → (카피 | 이미지) → 기준선
   같은 4단 그리드, 같은 기준선 규칙을 제품 페이지 히어로와 공유 */
.sub-hero{padding-block:clamp(64px,8vw,120px) var(--sec)}
.sub-hero .label{margin-bottom:clamp(28px,3.5vw,52px)}
.sub-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:1.8vw;row-gap:1.5vw;align-items:end}
.sub-word{grid-column:1/-1;font-size:7.4vw;font-weight:900;line-height:.9;letter-spacing:-.05em;color:#fff;white-space:nowrap}
.sub-copy{grid-column:1/3}
.sub-copy.wide{grid-column:1/4}
.sub-copy .h3{margin-bottom:var(--gap-text)}
.sub-fig{grid-column:3/5}
.sub-fig img{aspect-ratio:3/2;object-fit:cover}
.sub-fig.narrow{grid-column:4/5}
.sub-fig.narrow img{aspect-ratio:3/4}

/* 회사소개 — 3가지 가치 */
.vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:1.8vw}
.val{border-top:1px solid var(--line-light);padding-top:26px}
.val .qnum{display:block}
.vword{font-size:clamp(32px,3.4vw,54px);font-weight:900;line-height:1;letter-spacing:-.04em;margin:16px 0 18px}

/* 회사소개 — 공정 (이미지 | 텍스트) */
.proc-split{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:1.8vw;align-items:center}
.proc-split .fig{grid-column:1/3;overflow:hidden}
.proc-split .fig img{aspect-ratio:3/4;object-fit:cover;object-position:100% center;transform:scale(1.03);transform-origin:right center}
.proc-split .tx{grid-column:3/5}
.proc-split .h3{margin-bottom:var(--gap-text)}
.proc-split .plist{margin-top:var(--gap-type)}
.steps{margin-top:var(--gap-type);border-top:1px solid var(--line-dark)}
.step{display:grid;grid-template-columns:56px 1fr;padding:18px 0;border-bottom:1px solid var(--line-dark);font-size:16px;font-weight:600}
.step .pnum{font-size:15px;padding-top:2px}

/* 자료실 — 다운로드 목록 */
.docs{border-top:1px solid var(--line-light)}
.doc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:1.8vw;align-items:center;padding:30px 0;border-bottom:1px solid var(--line-light)}
.doc .qnum{grid-column:1/2;font-size:13px}
.doc .dt{grid-column:2/4}
.doc .dt .h4{margin-bottom:6px}
.doc .da{grid-column:4/5;justify-self:end}

/* 문의하기 — 연락처 */
.info{border-top:1px solid var(--line-light)}
.info-row{display:grid;grid-template-columns:120px 1fr;padding:22px 0;border-bottom:1px solid var(--line-light);align-items:baseline}
.info-row .k{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}
.info-row .v{font-size:clamp(17px,1.5vw,22px);font-weight:700;letter-spacing:-.01em}
.bg-orange .h3{color:var(--ivory)}

@media(max-width:767px){
  .sub-word{font-size:15vw;white-space:normal}
  .sub-copy,.sub-copy.wide,.sub-fig,.sub-fig.narrow,
  .proc-split .fig,.proc-split .tx,
  .doc .qnum,.doc .dt,.doc .da{grid-column:1/-1}
  .sub-grid,.proc-split{row-gap:22px}
  .sub-fig.narrow img{aspect-ratio:4/3}
  .proc-split .fig img{aspect-ratio:4/5}
  .vals{grid-template-columns:1fr;row-gap:32px}
  .doc{row-gap:14px}
  .doc .da{justify-self:start}
  .info-row{grid-template-columns:1fr;row-gap:6px}
}

/* =========================================================
   ONE-PAGE ANCHOR — 메뉴 '제품소개' → #flagship 부드러운 이동
   고정 헤더(75px)에 가리지 않도록 도착 위치 보정
   ========================================================= */
html{scroll-behavior:smooth}
#flagship{scroll-margin-top:75px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}