/* 열다섯째 편(HR 디자인)만의 규칙. 뼈대는 ../common/style.css 를 그대로 쓴다.

   ① 번호 장이 서른여섯이다. 공용 CSS 의 물결은 .sec-20 까지만 있어 스물한째부터 이어 적는다(평가 편과 같은 규칙, 열 벌을 돌려 쓴다).
   ② 넓은 짜임(.split.wide)은 평가 편과 같은 값이다 — 시험이 eval/style.css 와 대조한다.
   ③ 우클릭 장(.split.rc)은 메뉴 그림이 좁고 길다. 그림 칸을 좁히고 목록 두 덩이(.lists)를 한 단으로 둔다.
   ④ 컬러 장의 견본 칩(.swatches i)만 제품 색을 칠한다 — 사용자 결정(2026-10-05)의 예외. 색 값은 본문 style 속성에 있다. */
@media print, screen and (min-width: 900px) {
  .sec-21 { --head-mask: url("../common/head-01.svg"); }
  .sec-22 { --head-mask: url("../common/head-02.svg"); }
  .sec-23 { --head-mask: url("../common/head-03.svg"); }
  .sec-24 { --head-mask: url("../common/head-04.svg"); }
  .sec-25 { --head-mask: url("../common/head-05.svg"); }
  .sec-26 { --head-mask: url("../common/head-06.svg"); }
  .sec-27 { --head-mask: url("../common/head-07.svg"); }
  .sec-28 { --head-mask: url("../common/head-08.svg"); }
  .sec-29 { --head-mask: url("../common/head-09.svg"); }
  .sec-30 { --head-mask: url("../common/head-10.svg"); }
  .sec-31 { --head-mask: url("../common/head-01.svg"); }
  .sec-32 { --head-mask: url("../common/head-02.svg"); }
  .sec-33 { --head-mask: url("../common/head-03.svg"); }
  .sec-34 { --head-mask: url("../common/head-04.svg"); }
  .sec-35 { --head-mask: url("../common/head-05.svg"); }
  .sec-36 { --head-mask: url("../common/head-06.svg"); }
}
@media print, screen and (min-width: 900px) {
  .page .split.wide { grid-template-columns: 1fr 1.8fr; gap: calc(8 * var(--mm)); }
  .flip .page .split.wide { grid-template-columns: 1.8fr 1fr; }
  .page .split.wide .art.shot img { width: 100%; max-height: calc(112 * var(--mm)); object-fit: contain; }
}

.feat.one { columns: 1; }
.list-h { margin: var(--s4) 0 var(--s2); font-weight: 700; color: var(--accent-text); }
.tip { margin: var(--s3) 0 0; color: var(--mute); font-size: var(--fs-sub); }
.lists .feat { margin-bottom: var(--s3); }

.swatches { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--s3); }
.swatches li { display: grid; grid-template-columns: 44px auto 1fr; grid-template-rows: auto auto; column-gap: var(--s3); align-items: center; }
.swatches i { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--line); }
.swatches b { font-family: ui-monospace, monospace; }
.swatches em { font-style: normal; color: var(--mute); }
.swatches span { grid-column: 2 / 4; color: var(--mute); font-size: var(--fs-sub); }

@media print, screen and (min-width: 900px) {
  .page .split.rc { grid-template-columns: 1.45fr 0.55fr; }
  .flip .page .split.rc { grid-template-columns: 0.55fr 1.45fr; }
  /* 나란히 둘(.duo) — Time Stamp 창은 키가 커서 겹친 판(.pair)에 넣으면 판 밖으로 샌다. */
  .page .split .art.shot.duo { width: 100%; }
  .page .art.shot.duo .deck img { position: static; box-shadow: 0 2px 12px rgba(20, 22, 26, .14); }
  .page .art.shot.duo .deck { display: grid; grid-template-columns: 1fr 1fr; gap: calc(4 * var(--mm)); align-items: start; }
  .page .art.shot.duo .deck img { width: 100%; max-height: calc(92 * var(--mm)); object-fit: contain; }
  .page .split.rc .art.shot img { max-height: calc(118 * var(--mm)); width: auto; max-width: 100%; }
  .page .lists .feat.one { columns: 2; column-gap: calc(8 * var(--mm)); margin-bottom: calc(2 * var(--mm)); }
  .page .lists .list-h { margin: calc(2 * var(--mm)) 0 calc(1 * var(--mm)); font-size: calc(3.5 * var(--tp)); }
  .page .tip { font-size: calc(3.1 * var(--tp)); }
  .page .swatches { grid-template-columns: repeat(3, 1fr); gap: calc(4 * var(--mm)) calc(6 * var(--mm)); margin-top: calc(4 * var(--mm)); }
  .page .swatches li { grid-template-columns: calc(11 * var(--mm)) auto 1fr; }
  .page .swatches i { width: calc(11 * var(--mm)); height: calc(11 * var(--mm)); }
  .page .swatches b, .page .swatches em { font-size: calc(3.4 * var(--tp)); }
  .page .swatches span { font-size: calc(2.9 * var(--tp)); line-height: 1.35; }
}

/* 나란히 둘은 좁은 화면에서는 위아래로 — 겹침(.deck img 의 absolute)을 풀어 둔다. */
.shot.duo .deck img { position: static; width: 100%; height: auto; margin-bottom: var(--s3); }

/* ⑤ 예전과 변경 후를 견주는 판(29 장, 사용자 지시 2026-10-08). 겹쳐 쌓으면 어느 것이 예전인지
   안 읽혀 두 칸으로 편다 — 왼쪽은 예전, 오른쪽은 변경 후, 줄마다 같은 쓰임끼리 마주 선다.
   좁은 화면에서는 칸 머리를 감추고 예전·변경 후 차례로 내려 쌓는다(설명 앞 꼬리표가 칸 머리를 대신한다). */
.compare { display: grid; grid-template-columns: 1fr; gap: var(--s4); margin: var(--s6) 0; }
.compare .cmp-h { display: none; margin: 0; font-weight: 700; }
.compare figure { margin: 0; }
.compare img { width: 100%; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.compare .was img { filter: saturate(.55); opacity: .9; }
.compare .now img { border-color: var(--accent); box-shadow: 0 2px 12px rgba(51, 61, 157, .14); }
.compare figcaption { margin-top: var(--s2); color: var(--mute); font-size: var(--fs-sub); line-height: 1.5; }
.compare figcaption em {
  font-style: normal; font-weight: 700; margin-right: var(--s2);
  padding: 1px 8px; border-radius: var(--r-badge); border: 1px solid var(--line-strong); color: var(--mute);
}
.compare .now figcaption em { border-color: var(--accent); color: var(--accent-text); }

@media print, screen and (min-width: 900px) {
  .page .compare {
    grid-template-columns: 1fr calc(8 * var(--mm)) 1fr; grid-auto-flow: row dense;
    gap: calc(3 * var(--mm)) 0; align-items: center; margin: auto 0;
  }
  .page .compare .cmp-h { display: block; font-size: calc(3.9 * var(--tp)); padding-bottom: calc(1.5 * var(--mm)); border-bottom: calc(.6 * var(--mm)) solid var(--line-strong); }
  .page .compare .cmp-h.now { border-bottom-color: var(--accent); color: var(--accent-text); }
  .page .compare .was { grid-column: 1; }
  .page .compare .now { grid-column: 3; position: relative; }
  /* 두 칸 사이 틈에 화살표 — 예전에서 변경 후로 읽힌다. */
  .page .compare figure.now::before {
    content: "→"; position: absolute; left: calc(-8 * var(--mm)); width: calc(8 * var(--mm)); top: 40%;
    text-align: center; color: var(--accent); font-weight: 700; font-size: calc(5 * var(--tp));
  }
  .page .compare img { width: auto; max-width: 100%; max-height: calc(50 * var(--mm)); }
  .page .compare figcaption { margin-top: calc(1.5 * var(--mm)); font-size: calc(3.1 * var(--tp)); }
  .page .compare figcaption em { display: none; }
}