/* C6 · 얼룩에서 조금씩 걷어내요 */

.c6-two {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3);
  max-width: 460px; margin: 0 auto;
}
.c6-box { text-align: center; }
.c6-box h4 { margin: 0 0 4px; font-size: .95rem; font-weight: 800; }
.c6-tag {
  display: inline-block; margin-bottom: 6px; padding: 1px 10px;
  background: var(--cream-3); border-radius: var(--radius-pill);
  font-size: .76rem; color: var(--ink-2);
}
.c6-frame {
  width: 100%; aspect-ratio: 1;
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-sm);
  overflow: hidden; background: #000;
  box-shadow: var(--drop-2);
}

/* 돋보기 한 겹. 띠는 이미 transform 으로 칸을 밀고 있어서 **바깥에서**
   키웁니다 — 한 요소에 둘을 얹으면 서로 엉킵니다.
   `is-zoom` 이면 가운데를 여섯 배로 키우고 **칸을 살립니다**(pixelated).
   매끄럽게 뭉개면 보여 주려던 색칸이 사라집니다 */
.c6-lens {
  width: 100%; height: 100%;
  transform-origin: 50% 50%;
  transition: transform .18s ease-out;
}
.is-zoom .c6-lens { transform: scale(6); }
.is-zoom .c6-film { image-rendering: pixelated; }

/* 띠 한 장(15칸 × 두 줄)에서 한 칸만 보입니다.
   `background-position` 대신 transform 이라 합성만으로 밀립니다 —
   손잡이를 빠르게 흔들어도 따라옵니다 */
.c6-film {
  display: block; width: 1500%; height: 200%;
  background-repeat: no-repeat; background-size: 100% 100%;
  transform-origin: 0 0;
  image-rendering: auto;
}
.c6-box--now   .c6-film { transform: translate(calc(var(--i, 4) * -6.6667%), 0); }
.c6-box--guess .c6-film { transform: translate(calc(var(--i, 4) * -6.6667%), -50%); }

.c6-slide { max-width: 460px; margin: var(--s4) auto 0; }
.c6-slider {
  width: 100%; height: 44px;          /* 손가락으로 잡는 크기 */
  accent-color: var(--leaf); cursor: pointer;
}
.c6-ends {
  display: flex; justify-content: space-between;
  font-size: .85rem; font-weight: 800; color: var(--ink-3);
}

/* 돋보기 단추 — 손잡이 바로 아래. 미는 것과 보는 것이 한 자리에 있어야
   "밀면 이 칸의 색이 바뀐다" 가 한눈에 들어옵니다 */
.c6-tools {
  display: flex; justify-content: center; margin: var(--s3) 0 0;
}
.c6-lens-btn.is-on { background: var(--yellow); }

.c6-picks {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  justify-content: center; margin-top: var(--s4);
}
.c6-pick { font-size: .9rem; }
.c6-pick.is-on { background: var(--yellow); }

.c6-say {
  max-width: 460px; margin: var(--s5) auto 0;
  padding: var(--s3) var(--s4);
  background: var(--paper);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--drop-2); font-weight: 700; text-align: center;
}