/* 학원 둘러보기: classroom photo grid + lightbox, shared by / and /about/ (2026-11-03).
   The five photos are the ones the office consult screen shows in its 둘러보기 act; the room names
   come from tools/consult-screen/data/tour.json so the two surfaces never disagree. Photos are from
   the Google Photos album 「CIT 2026 Interior」: no people, no names.
   Mobile: a horizontal snap strip that bleeds to the screen edges (one photo in view, the next
   peeking). From 640px: a grid; from 900px: four columns with the first photo spanning 2×2. */
.cit-rooms { --cr-gap: 10px; --cr-radius: 14px; --cr-line: #e4e7ef; --cr-muted: #5b6477; --cr-ink: #0f172a; --cr-accent: #4f46e5; margin: 0; }
.cit-rooms__grid { list-style: none; margin: 0 -16px; padding: 0 16px 4px; display: flex; gap: var(--cr-gap); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cit-rooms__grid::-webkit-scrollbar { display: none; }
.cit-rooms__item { flex: 0 0 78%; min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; }
.cit-rooms__link { display: block; position: relative; aspect-ratio: 4 / 3; border-radius: var(--cr-radius); overflow: hidden; background: #e9ebf3; border: 1px solid var(--cr-line); box-shadow: 0 1px 2px rgba(13, 27, 63, .05), 0 6px 20px -8px rgba(13, 27, 63, .12); }
.cit-rooms__link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) { .cit-rooms__link:hover img { transform: scale(1.03); } }
.cit-rooms__link:focus-visible { outline: 3px solid var(--cr-accent); outline-offset: 3px; }
.cit-rooms__zoom { position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(15, 23, 42, .72); color: #fff; display: grid; place-items: center; pointer-events: none; }
.cit-rooms__zoom svg { width: 16px; height: 16px; }
.cit-rooms__cap { margin: 8px 2px 0; font-size: 14px; line-height: 1.45; font-weight: 700; color: var(--cr-ink); word-break: keep-all; }
@media (min-width: 640px) {
  .cit-rooms__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .cit-rooms__item { flex: none; }
  .cit-rooms__item--lead { grid-column: 1 / -1; }
  .cit-rooms__item--lead .cit-rooms__link { aspect-ratio: 16 / 9; }
}
@media (min-width: 900px) {
  .cit-rooms__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cit-rooms__item--lead { grid-column: 1 / 3; grid-row: 1 / 3; }
  .cit-rooms__item--lead .cit-rooms__link { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
  .cit-rooms__item--lead .cit-rooms__cap { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .cit-rooms__link img { transition: none; } }

/* 보통 학원과 다른 점: the four items the consult screen shows beside the photos (tour.json
   `different`, same words). One column on a phone, two from 640px, four from 900px. */
.cit-rooms-diff { margin-top: 22px; }
.cit-rooms-diff__title { margin: 0 0 10px; font-size: 17px; line-height: 1.35; font-weight: 800; letter-spacing: -0.01em; color: var(--cr-ink); }
.cit-rooms-diff__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cit-rooms-diff__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 900px) { .cit-rooms-diff__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cit-rooms-diff__list li { position: relative; min-width: 0; padding: 14px 16px 14px 20px; background: #fff; border: 1px solid var(--cr-line); border-radius: 12px; box-shadow: 0 1px 2px rgba(13, 27, 63, .04); }
.cit-rooms-diff__list li::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 4px; border-radius: 0 3px 3px 0; background: var(--cr-accent); opacity: .85; }
.cit-rooms-diff__list b { display: block; font-size: 15px; line-height: 1.4; font-weight: 800; color: var(--cr-ink); word-break: keep-all; }
.cit-rooms-diff__list span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--cr-muted); word-break: keep-all; }

/* Lightbox: a native <dialog> that classrooms.js builds once per gallery. */
dialog.cit-lb { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overscroll-behavior: contain; }
dialog.cit-lb::backdrop { background: rgba(5, 10, 30, .95); }
.cit-lb__fig { margin: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 64px 16px 20px; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; row-gap: 12px; }
@media (min-width: 900px) { .cit-lb__fig { padding: 64px 72px 24px; } }
.cit-lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); }
.cit-lb__cap { font-size: 15px; font-weight: 700; text-align: center; word-break: keep-all; }
.cit-lb__cap small { margin-left: 10px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .7); }
.cit-lb__btn { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .1); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background-color .18s; }
.cit-lb__btn:hover { background: rgba(255, 255, 255, .22); }
.cit-lb__btn:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 2px; }
.cit-lb__btn svg { width: 20px; height: 20px; }
.cit-lb__close { top: 12px; right: 12px; }
.cit-lb__prev, .cit-lb__next { top: 50%; transform: translateY(-50%); }
.cit-lb__prev { left: 10px; }
.cit-lb__next { right: 10px; }
@media (max-width: 639px) { .cit-lb__prev, .cit-lb__next { top: auto; bottom: 14px; transform: none; } .cit-lb__fig { padding-bottom: 72px; } }
html.cit-lb-open { overflow: hidden; }