/* 한국판 보정(원본 styles.css는 그대로 두고 위에 얹는다)
   1) 원본 글꼴(Exo 2·Aptos)에는 한글이 없어 한글 글자만 시스템 한글 글꼴로 채운다(unicode-range, 외부 요청 없음).
   2) 한국어 줄바꿈은 단어 단위(keep-all).
   3) 구매 링크 자리표시({확인 필요}) 모양. */
@font-face {
  font-family: "Podlers Modern";
  src: local("Apple SD Gothic Neo Heavy"), local("AppleSDGothicNeo-Heavy"), local("Malgun Gothic Bold"), local("MalgunGothicBold"), local("Noto Sans KR Black"), local("NotoSansKR-Black");
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
}

@font-face {
  font-family: "Podlers Text";
  src: local("Apple SD Gothic Neo"), local("AppleSDGothicNeo-Regular"), local("Malgun Gothic"), local("MalgunGothic"), local("Noto Sans KR"), local("NotoSansKR-Regular");
  font-display: swap;
  unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
}

html:lang(ko) body {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.product-cta + .product-cta {
  margin-top: 12px;
}

.product-cta.is-pending,
.product-cta.is-pending:hover {
  transform: none;
  background: #4a4f52;
  box-shadow: none;
  cursor: default;
}

.footer-emails p {
  margin: 0;
}

.footer p a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
}

/* v2 (P-261020-2): 가격 대신 안내 줄, 사이즈 안내 줄, 상품 정보 표, 법정 표기 링크.
   원본 제품 쪽 톤(가는 선 var(--line), 회색 라벨 var(--muted), 진한 값 var(--ink))을 따른다. */
.price-notice {
  margin: 38px 0 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}

.size-note {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.product-spec {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.product-spec h2 {
  margin: 0 0 12px;
  color: var(--muted);
  font-family: Arial, "Helvetica Neue", "Podlers Text", sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: none;
}

.product-spec dl {
  margin: 0;
}

.product-spec dl > div {
  display: grid;
  grid-template-columns: minmax(96px, 30%) 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
}

.product-spec dt {
  color: var(--muted);
}

.product-spec dd {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.footer-legal-links,
.product-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.footer-legal-links {
  width: 100%;
  justify-content: flex-end;
}

.footer-legal-links a,
.product-footer-legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* v2.1 (P-261020-2): 한글 줄 간격 보정.
   원본 제목·표시 문구는 라틴 글꼴 기준 line-height 1.0 미만(또는 1.02~1.08)·음수 자간이라
   한글(대체 글꼴: 맑은 고딕·Apple SD Gothic Neo 등, 글자 높이가 더 큼)이 두 줄 이상이면 줄이 겹친다.
   한글이 들어가는 자리만 고친다. 영문 모델명 자리(.product-info h1, .product-style-stamp)는 그대로 둔다. */

/* 공통 h2(원본 1.02). :where로 우선순위를 원본 h2와 같게 두어, 자리별 규칙이 있으면 그쪽이 이긴다. */
:where(html:lang(ko)) h2 {
  line-height: 1.2;
}

/* 메인 히어로 제목(원본 .96) */
html:lang(ko) .hero-copy h1 {
  line-height: 1.18;
}

/* 제품 상세: 사진 위 문구(원본 .92) */
html:lang(ko) .visual-note {
  line-height: 1.2;
}

/* 제품 상세: 지형 이야기 제목(원본 .88, 자간 -.06em) */
html:lang(ko) .terrain-story-copy h2 {
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* 제품 상세: 디테일 제목(원본 .94) */
html:lang(ko) .detail-copy h2 {
  line-height: 1.18;
}

/* 제품 상세: 컬러 제목(원본 .87) */
html:lang(ko) .colorway-heading h2 {
  line-height: 1.15;
}

/* 제품 상세: 구매 버튼 큰 글자(원본 1, "네이버 스마트스토어 →"가 좁은 폭에서 두 줄이 될 때) */
html:lang(ko) .product-cta strong {
  line-height: 1.2;
}

/* 우리 쪽 CSS(blog.css·contact-page.css)의 원본 톤 제목(1.02·1.08)도 같은 기준으로 */
html:lang(ko) .blog-list .section-head h1,
html:lang(ko) .contact-page-hero-copy h1 {
  line-height: 1.2;
}

html:lang(ko) .blog-post-head h1 {
  line-height: 1.22;
}

/* v2.2 (P-261020-2): 한국어 가독성 최적화 — 이진우 PM «가독성 최적화 해줘».
   원본 크기는 영문 문구 기준이라 한글(글자 폭 약 1em)에는 너무 크고 줄이 많이 접힌다.
   큰 제목은 화면 폭에 따라 줄이고(clamp), 사진 위 글자는 덧칠을 보강해 대비 4.5:1(큰 글자 3:1) 이상,
   본문은 줄 간격 1.7·한 줄 약 35~45자로 맞춘다. 영문 모델명(.product-info h1, .product-style-stamp)은 그대로. */

/* 1) 고정 헤더: 흐림(backdrop-filter)을 ::before로 옮기고 알약 모양으로 잘라 사각형으로 번지지 않게 한다.
   유리 느낌(반투명 흰 바탕 + 흐림 + 테두리 + 그림자)은 그대로. */
html:lang(ko) .site-header {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html:lang(ko) .site-header::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, .54);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  clip-path: inset(0 round 999px);
  pointer-events: none;
}

/* 2) 메인 히어로 제목: 데스크톱·태블릿 2줄("여유로운 핏. 선명한 트레일." / "지면을 읽는 아웃솔."),
   휴대폰 4줄. max-width(em)로 줄이 문장 단위에서만 나뉘게 한다(맑은 고딕 1em·Noto 0.92em 모두 맞음). */
html:lang(ko) .hero-copy {
  width: min(940px, 86vw);
}

html:lang(ko) .hero-copy h1 {
  max-width: 13em;
  font-size: clamp(44px, 5vw, 72px);
}

/* 히어로 본문: 진한 글자, 줄 간격 1.7, 한 줄 약 38자 */
html:lang(ko) .hero-copy p:not(.eyebrow) {
  max-width: 32em;
  color: var(--ink);
  font-size: clamp(17px, 1.25vw, 19px);
  font-weight: 500;
  line-height: 1.7;
}

/* 히어로 사진 덧칠: 글자가 놓이는 왼쪽 2/3를 더 밝게(원본 .95 → .54(38%) → .08(72%)) */
html:lang(ko) .hero-media::after {
  background: linear-gradient(90deg, rgba(246, 246, 243, .96), rgba(246, 246, 243, .86) 42%, rgba(246, 246, 243, .5) 64%, rgba(246, 246, 243, .08) 84%);
}

/* 사진 위 작은 주황 글자(eyebrow): 원본 주황(#f05a28)은 밝은 사진 위에서 약 2.6:1이라 진한 주황으로 */
html:lang(ko) .hero .eyebrow,
html:lang(ko) .cinema:not(.light-text) .eyebrow {
  color: #9f3510;
}

@media (max-width: 880px) {
  html:lang(ko) .hero-copy {
    width: auto;
  }

  html:lang(ko) .hero-copy h1 {
    font-size: clamp(36px, 6.4vw, 56px);
  }

  /* v2.3: 좁은 화면 덧칠. 사진 전체는 옅게(.2)만 덮어 폭포·바위가 보이게 하고,
     글자 뒤에만 반투명 판(.72 + 약한 흐림)을 깐다. (v2.2: 세로 덧칠 .55 → .86(28~80%) → .3 → .12) */
  html:lang(ko) .hero-media::after {
    background: rgba(246, 246, 243, .2);
  }

  html:lang(ko) .hero-copy {
    position: relative;
  }

  /* v2.6: 판을 "밝은 안개"로. 사각 판 + mask 대신, 타원형 radial 배경 하나로 진하기가 글자 중심에서 가장 높고
     바깥으로 연속해서 줄어든다(.66 → .64 → .58 → .44 → .24 → .08 → 0, 평평한 고원 없음).
     좌우는 hero-copy 폭의 30%씩 화면 밖까지 넓혀 화면 끝에 세로선이 없고, 위아래는 글자 끝에서 약 200px에 걸쳐 사라진다.
     흐림(backdrop-filter)은 사각 영역 전체에 걸려 경계가 생기므로 뺐다.
     글자 자리 진하기: 가운데 .64~.66, 글자 네 귀퉁이 약 .56~.58.
     (v2.5: inset -32px -18px -148px, .72 + blur(8px), mask 세 장 / v2.3: inset 100px 6px -18px, 흰 테두리, 둥근 모서리) */
  html:lang(ko) .hero-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -92px -30% -208px;
    background: radial-gradient(ellipse closest-side at 50% 50%,
      rgba(246, 246, 243, .66) 0,
      rgba(246, 246, 243, .64) 45%,
      rgba(246, 246, 243, .58) 74%,
      rgba(246, 246, 243, .44) 84%,
      rgba(246, 246, 243, .24) 92%,
      rgba(246, 246, 243, .08) 97%,
      rgba(246, 246, 243, 0) 100%);
    pointer-events: none;
  }

  /* 판 위 주황 글자: 판이 옅어져 한 단계 더 진하게(v2.3 #9f3510 → #8a2c0c, v2.6 → #7a270b) */
  html:lang(ko) .hero .eyebrow {
    color: #7a270b;
  }
}

@media (max-width: 640px) {
  html:lang(ko) .hero-copy h1 {
    max-width: 7.4em;
    font-size: clamp(30px, 10vw, 46px);
  }
}

/* 3) 섹션 제목(공통 h2, 원본 clamp(38px, 6vw, 92px)): 데스크톱 2~3줄 */
:where(html:lang(ko)) h2 {
  font-size: clamp(30px, 4.2vw, 64px);
}

/* 가운데 정렬 제목은 줄 길이를 고르게 */
html:lang(ko) :is(.statement, .center-copy, .section-head, .wall-copy, .contact-copy) h2 {
  text-wrap: balance;
}

/* 좁은 단(약 420~500px)의 제목은 한 단계 작게 */
html:lang(ko) :is(.split-copy, .proof-copy) h2 {
  font-size: clamp(28px, 3.4vw, 52px);
}

/* 사진 위 가운데 제목(어두운 글자): 가운데에 밝은 덧칠을 더한다 */
html:lang(ko) .cinema:not(.light-text) .full-bleed::after {
  background:
    radial-gradient(ellipse at center, rgba(246, 246, 243, .76) 0, rgba(246, 246, 243, .62) 38%, rgba(246, 246, 243, 0) 75%),
    linear-gradient(90deg, rgba(246, 246, 243, .95), rgba(246, 246, 243, .54) 38%, rgba(246, 246, 243, .08) 72%);
}

/* 사진 위 가운데 제목(흰 글자): 가운데에 어두운 덧칠을 더한다 */
html:lang(ko) .light-text .full-bleed::after {
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, .45) 0, rgba(0, 0, 0, .32) 38%, rgba(0, 0, 0, 0) 75%),
    linear-gradient(0deg, rgba(0, 0, 0, .52), rgba(0, 0, 0, .12));
}

/* 4) 본문: 줄 간격 1.55 → 1.7, 가운데 정렬 본문 한 줄 약 38자 */
:where(html:lang(ko)) p {
  line-height: 1.7;
}

html:lang(ko) .statement p:not(.eyebrow),
html:lang(ko) .section-head p:not(.eyebrow) {
  max-width: 32em;
  margin-left: auto;
  margin-right: auto;
}

/* 5) 제품 상세 */
html:lang(ko) .visual-note {
  font-size: clamp(24px, 2.4vw, 38px);
}

html:lang(ko) .terrain-story-copy h2 {
  max-width: 12em;
  font-size: clamp(40px, 5.6vw, 84px);
  text-wrap: balance;
}

/* 사진 위 흰 제목·작은 칩 글자: 왼쪽 덧칠 보강 + 아래쪽 덧칠 추가(원본 .82 → .12(74%)) */
html:lang(ko) .terrain-story-shade {
  background:
    linear-gradient(0deg, rgba(7, 9, 9, .5), rgba(7, 9, 9, 0) 55%),
    linear-gradient(90deg, rgba(7, 9, 9, .86), rgba(7, 9, 9, .62) 40%, rgba(7, 9, 9, .12) 78%);
}

html:lang(ko) .detail-copy h2 {
  font-size: clamp(34px, 4.2vw, 64px);
  text-wrap: balance;
}

html:lang(ko) .colorway-heading h2 {
  font-size: clamp(40px, 5vw, 80px);
}

html:lang(ko) .product-lead,
html:lang(ko) .detail-copy > p:last-child,
html:lang(ko) .colorway-heading > p:last-child {
  line-height: 1.7;
}

@media (max-width: 700px) {
  html:lang(ko) .terrain-story-copy h2 {
    font-size: clamp(32px, 9.6vw, 52px);
  }

  /* 좁은 화면은 원본 세로 덧칠(.08 → .86)이 이미 충분해 원본으로 되돌린다 */
  html:lang(ko) .terrain-story-shade {
    background: linear-gradient(180deg, rgba(7, 9, 9, .08), rgba(7, 9, 9, .86));
  }

  html:lang(ko) .colorway-heading h2,
  html:lang(ko) .new-product-page .colorway-heading h2 {
    font-size: clamp(34px, 10vw, 52px);
  }
}

/* 6) 블로그·문의 */
html:lang(ko) .blog-list .section-head h1 {
  font-size: clamp(34px, 4.6vw, 68px);
}

/* 글 페이지: 본문 한 줄 약 44자(원본 폭 820px → 760px) */
html:lang(ko) .blog-post {
  width: min(760px, 100%);
}

html:lang(ko) .blog-post-head h1 {
  font-size: clamp(28px, 3.6vw, 48px);
  text-wrap: balance;
}

html:lang(ko) .contact-page-hero-copy h1 {
  max-width: 15em;
  font-size: clamp(32px, 4.4vw, 64px);
  text-wrap: balance;
}

html:lang(ko) .contact-page-hero-copy p:not(.eyebrow) {
  max-width: 32em;
  color: rgba(255, 255, 255, .92);
}

html:lang(ko) .contact-page-hero-shade {
  background: linear-gradient(180deg, rgba(5, 5, 5, .18) 0%, rgba(5, 5, 5, .78) 100%);
}

html:lang(ko) .contact-location-copy h2 {
  font-size: clamp(28px, 3.6vw, 52px);
}