/* ===========================================================================
   제품보증 안내 — 다국어 일반 스크롤 문서

   패널마다 형태를 달리해 같은 카드 리듬이 반복되지 않게 한다 —
     P1 Guide     : 4요소 풀폭 스펙 밴드 + 다크 밴드/보조 카드 2단
     P2 Period    : 스펙 표 + 시간축 타임라인 (이 페이지의 주인공)
     P3 Exclusion : 2단 번호 조항 목록 (+ 푸터)

   ※ 색은 tokens.css 것만 쓴다. 이 페이지가 새로 정하는 건 '무상/유상' 의미색 한 쌍뿐 —
     무상=골드(액센트), 유상=중립 실버+사선 해치. 유상에 빨강 같은 경고색을 쓰지 말 것
     (유상은 오류가 아니라 정상적인 계약 구간이다).
   =========================================================================== */
:root {
  --wr-paid:  #b3b8bd;   /* 유상 구간 — 중립 실버 (골드 액센트와 대비되는 '비적용' 톤) */
  --wr-plate: #f6f7f8;   /* 표·카드 바탕 */
  --wr-line:  #e3e6e9;
  --wr-ink:   #333;
  --wr-muted: #666;
}

/* 밀도 높은 보증 문서의 섹션 간격 */
.page-section .section-lede { margin-bottom: clamp(1.6rem, 4vh, 4rem); }
.page-section strong:not(.section-title__main), .page-section b { font-weight: 700; color: #222; }

/* 페이지 타이틀 — ci.html .ci-pagehead 와 동일 패턴(2톤 타이틀 + 소개문) */
/* 타이틀 아래 헤어라인 — 구 페이지의 .content-divider 자리를 이어받는다.
   (헤드 다음에 오는 블록이 무엇이든 경계가 유지되도록 헤드 자신이 선을 갖는다.) */
.wr-pagehead {
  margin-bottom: clamp(1.8rem, 4.5vh, 4rem);
  padding-bottom: clamp(1.6rem, 4vh, 3.4rem);
  border-bottom: 1px solid var(--wr-line);
}
.page-flow .section .wr-pagehead .section-title { margin-bottom: 0; }
.wr-pagehead p { margin-top: 1rem; font-size: 2.2rem; line-height: 1.4; color: #333; font-weight: 400; }

/* 골드 dot 목록 — 이 페이지 공용(보증 안내문·연장 조건) */
.wr-dot { display: flex; flex-direction: column; gap: .8rem; }
.wr-dot li {
  position: relative; padding-left: 1.4rem;
  font-size: 1.35rem; line-height: 1.8; color: var(--wr-muted); font-weight: 300;
}
.wr-dot li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--color-gold);
}

/* ---------- P1. Guide : 4요소 풀폭 스펙 밴드 ----------
   리드 문구(‘Warranty Guide …’)는 두지 않는다 — 페이지 타이틀이 이미 소개를 끝냈고,
   별도 제목줄은 두지 않는다 — 페이지 타이틀 다음에 바로 핵심 4요소를 보여준다.
   세로 구분선은 사이트 공용 .gold-divider(styles.css)를 쓴다 — 2번째 이후 항목에 클래스를 달면
   컬럼 경계에 연한 골드 선이 선다. 갭 없이 padding으로 벌린 그리드라 --gd-gap은 0px.
   ⚠ 단위 없는 `0`을 주면 안 된다 — calc(-.5 * 0)이 무효라 left:auto로 떨어지고,
     항목이 text-align:center라 선이 컬럼 경계가 아니라 항목 한가운데에 그려진다.
   (여기만 중립 회색선을 새로 그으면 사이트 전체가 쓰는 선 어휘에서 이 페이지만 이탈한다.) */
.wr-guide__items {
  --gd-gap: 0px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 0;
}
.wr-guide__items + .wr-ext__grid {
  margin-top: clamp(2.4rem, 6vh, 5.6rem);
}
.wr-guide__item { padding: 0 2rem; text-align: center; }
.wr-guide__circle {
  display: grid; place-items: center;
  width: clamp(7rem, 11vh, 10.4rem); aspect-ratio: 1;
  margin: 0 auto clamp(1.2rem, 2.4vh, 2.2rem);
  border: 1px solid var(--line-gold); border-radius: 50%;
  background: var(--wr-plate); color: var(--color-gold);
}
.wr-guide__circle svg { width: 46%; height: 46%; }
.wr-guide__tit { display: block; font-size: 1.6rem; font-weight: 700; color: #222; }
.wr-guide__desc { margin-top: .9rem; font-size: 1.3rem; line-height: 1.75; color: var(--wr-muted); font-weight: 300; }

/* ---------- P2. Period : 스펙 표 + 시간축 타임라인 ----------
   안내 문구는 .section-lede 안에 넣는다 — 골드 세로바가 제목에서 끊기지 않고
   제목+상세를 함께 감싸야 한다(styles.css .section-lede의 h3+p 구성과 같은 취급). */
.wr-period .section-lede .wr-dot { margin-top: 1.4rem; }

.wr-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wr-table {
  width: 100%; min-width: 72rem;
  border-collapse: collapse; table-layout: fixed; background: #fff;
}
.wr-table th, .wr-table td {
  padding: clamp(.9rem, 1.6vh, 1.5rem) 1.2rem;
  border: 1px solid var(--wr-line);
  font-size: 1.35rem; line-height: 1.6; text-align: center; vertical-align: middle;
  color: var(--wr-ink); font-weight: 400;
}
.wr-table thead th {
  border-color: var(--color-navy); background: var(--color-navy);
  color: #fff; font-weight: 700; letter-spacing: .02em;
}
.wr-table tbody th { background: var(--wr-plate); font-weight: 700; color: #222; }
.wr-table__term { font-family: var(--font-en); font-weight: 700; color: var(--color-gold); font-variant-numeric: tabular-nums; }
.wr-table__note { color: #8d949b; font-size: 1.25rem; line-height: 1.7; font-weight: 300; }

/* 타임라인 — 보증은 '시간축'이라는 이 페이지의 핵심 정보를 형태로 옮긴 곳.
   두 행(기계·CNC)이 같은 3분할 축(0~12 / 12~24 / 24~)을 공유해 서로 비교된다. */
.wr-flow { margin-top: clamp(2rem, 4.5vh, 4.2rem); }
.wr-flow__legend { display: flex; justify-content: flex-end; gap: 2.4rem; margin-bottom: clamp(1rem, 2vh, 1.8rem); }
.wr-legend { display: inline-flex; align-items: center; gap: .8rem; font-size: 1.25rem; color: var(--wr-muted); }
.wr-legend::before { content: ""; width: 2.4rem; height: .9rem; border-radius: .45rem; }
.wr-legend.is-free::before { background: var(--color-gold); }
.wr-legend.is-paid::before {
  background: repeating-linear-gradient(-45deg, var(--wr-paid) 0 3px, #cfd3d7 3px 6px);
}

.wr-flow__row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  align-items: center;
  padding: clamp(1.2rem, 2.6vh, 2.4rem) 0;
  border-top: 1px solid var(--wr-line);
}
.wr-flow__row:last-child { border-bottom: 1px solid var(--wr-line); }
.wr-flow__tag { padding-right: 2rem; font-size: 1.5rem; font-weight: 700; color: #222; }
/* 라벨/바/축 3행을 서브그리드로 공유 — 라벨이 1줄이든 2줄이든 바가 한 줄로 이어진다
   (styles.css .hse-grid·.quality-cols 와 같은 subgrid 패턴) */
.wr-flow__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: .5rem;
}
.wr-flow__seg { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
.wr-flow__seg--wide { grid-column: span 2; }
.wr-seg__label {
  align-self: end;
  padding: 0 .6rem .8rem;
  text-align: center; font-size: 1.2rem; line-height: 1.6; color: var(--wr-muted); font-weight: 300;
}
.wr-seg__bar { align-self: center; height: 1.4rem; border-radius: .7rem; }
.wr-seg__bar.is-free { background: var(--color-gold); }
.wr-seg__bar.is-paid {
  background: repeating-linear-gradient(-45deg, var(--wr-paid) 0 4px, #cfd3d7 4px 8px);
}
.wr-seg__axis {
  align-self: start;
  padding-top: .9rem;
  text-align: center;
  font-family: var(--font-en); font-size: 1.15rem; letter-spacing: .04em;
  color: #8d949b; font-variant-numeric: tabular-nums;
}

/* ---------- P3. Exclusion : 2단 번호 조항 목록 ---------- */
.wr-exclusion .section { padding-bottom: clamp(6rem, 10vh, 10rem); }
/* 도입문도 세로바 안(.section-lede) — .section-lede p(0,1,1)를 이겨야 강조 톤이 유지된다 */
.section-lede p.wr-ex__intro { color: #222; font-weight: 500; }
.wr-ex__list {
  columns: 2; column-gap: 5rem;
  counter-reset: wrex;
}
/* 독일어·영어는 조항이 길어 3단으로 읽기 길이를 안정화한다. */
body:lang(de) .wr-ex__list,
body:lang(en) .wr-ex__list { columns: 3; column-gap: 3.4rem; }
.wr-ex__list > li {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  position: relative;
  padding-left: 3.2rem;
  margin-bottom: clamp(.8rem, 1.6vh, 1.5rem);
  font-size: 1.32rem; line-height: 1.75; color: var(--wr-muted); font-weight: 300;
}
.wr-ex__list > li::before {
  counter-increment: wrex; content: counter(wrex, decimal-leading-zero);
  position: absolute; left: 0; top: .12em;
  font-family: var(--font-en); font-size: 1.15rem; font-weight: 700; letter-spacing: .04em;
  color: var(--color-gold); font-variant-numeric: tabular-nums;
}
.wr-ex__sub {
  display: block;
  margin-top: .5rem; padding-left: 1.2rem;
  border-left: 1px solid var(--line-gold);
  font-size: 1.22rem; line-height: 1.7; color: #8d949b;
}
.wr-ex__foot {
  margin-top: clamp(1.4rem, 3vh, 2.8rem); padding-top: clamp(1.2rem, 2.4vh, 2rem);
  border-top: 1px solid var(--wr-line);
  font-size: 1.3rem; line-height: 1.75; color: var(--wr-muted); font-weight: 300;
}

/* ---------- P1. Extension : 다크 밴드 + 보조 카드 ----------
   기본 보증 4요소를 먼저 읽고 부가 안내로 넘어가도록 Guide 아래에 둔다. */
.wr-ext__grid {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 3rem; align-items: stretch;
}

.wr-ext__band {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.4rem, 5vh, 4.6rem) clamp(2.6rem, 4vw, 5rem);
  background: var(--color-navy); color: #fff;
}
/* 구 페이지에는 여기 로고 워터마크(lite-logo.png)가 있었으나 두지 않는다 —
   로고는 헤더·푸터가 이미 말하고 있고, 이 밴드 안에서는 아무 정보도 싣지 않는 장식이다. */
.wr-ext__band h3 {
  font-family: var(--font-en); font-size: 1.3rem; font-weight: 500; letter-spacing: .16em;
  color: var(--color-gold);
}
body:lang(ko) .wr-ext__band h3 {
  font-family: var(--font-kr); font-size: 2.2rem; font-weight: 700; letter-spacing: 0;
}
.wr-ext__band h3 span { display: block; margin-top: .8rem; font-family: var(--font-kr); font-size: 2.2rem; letter-spacing: 0; color: #fff; font-weight: 700; }
.wr-ext__txt { margin: clamp(1.2rem, 2.4vh, 2.2rem) 0 clamp(1.2rem, 2.4vh, 2rem); font-size: 1.5rem; line-height: 1.75; color: #e7eaec; font-weight: 300; }
.wr-ext__band .wr-dot li { color: #aeb6bd; }

/* 밴드는 내용이 세로 중앙이므로 카드도 중앙으로 — 위쪽에 붙으면 두 블록의 무게중심이 어긋난다 */
.wr-report {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.4rem, 5vh, 4.6rem) clamp(2.4rem, 3vw, 3.6rem);
  border: 1px solid var(--wr-line); background: var(--wr-plate);
}
.wr-report__head { display: flex; align-items: center; gap: 1.4rem; }
.wr-report__ico { flex: 0 0 auto; width: 4.4rem; height: 4.4rem; color: var(--color-gold); }
.wr-report__ico svg { width: 100%; height: 100%; }
.wr-report h4 { font-size: 1.9rem; font-weight: 700; color: #222; }
.wr-report .wr-dot { margin-top: clamp(1.2rem, 2.4vh, 2rem); }

/* ---------- 태블릿 ---------- */
@media (max-width: 1200px) {
  .wr-guide__item { padding: 0 1.2rem; }
  .wr-ext__grid { gap: 2rem; }
  .wr-ex__list { column-gap: 3.4rem; }
}
@media (min-width: 1201px) {
  /* 상단의 두 안내 블록보다 바깥 항목이 반 칼럼 안으로 몰려 보이지 않도록
     컨테이너 좌우 패딩 일부까지 4등분 축을 확장한다. 항목 간격은 동일하게 유지한다. */
  .wr-guide__items { margin-inline: -5rem; }
}

/* ---------- 작은 뷰포트 ---------- */
@media (max-width: 1024px), (max-height: 640px) {
  /* 낮은 화면에서는 vh 기반 장식을 안정적인 고정값으로 바꾼다. */
  .wr-guide__circle { width: 10rem; margin-bottom: 2rem; }
  .wr-flow__row { padding: 2.4rem 0; }
  .wr-ext__band, .wr-report { padding: 4rem 3.4rem; }
}
@media (max-width: 900px) {
  /* 2단으로 접히면 세로 규칙선은 가운데 한 줄만 남긴다 */
  .wr-guide__items { grid-template-columns: repeat(2, 1fr); row-gap: 3.4rem; }
  .wr-guide__item:nth-child(odd)::before { content: none; }
  .wr-ex__list { columns: 1; }
  .wr-ext__grid { grid-template-columns: 1fr; }
  /* 타임라인: 태그를 위로 빼고 축은 그대로 3분할 유지 (비교 축이 곧 정보다) */
  .wr-flow__row { grid-template-columns: 1fr; }
  .wr-flow__tag { padding: 0 0 1.2rem; }
}
@media (max-width: 640px) {
  .wr-pagehead p { font-size: 1.7rem; }
  .wr-guide__items { grid-template-columns: 1fr; row-gap: 2.8rem; }
  .wr-guide__item::before { content: none; }
  .wr-guide__item { display: grid; grid-template-columns: 7rem 1fr; gap: 0 2rem; padding: 0; text-align: left; align-items: center; }
  .wr-guide__circle { grid-row: span 2; width: 7rem; margin: 0; }
  .wr-guide__desc { margin-top: .4rem; }
  .wr-seg__label { font-size: 1.1rem; }
  .wr-seg__axis { font-size: 1.05rem; }
}