/* case.20261010b.css — 70번회차 시공사례 새 틀(b 판). a 판(69번)은 그대로 둔다.
   a 판에서 달라진 것 : 장면 칸 cover(가운데 기준) · 「현장 사진 모음」 바둑판 · 크게 보기 창 · 「사진 더 보기」 단추.
   공용 style.css 무접촉 · class 는 cx- 로만 · 전환은 크로스페이드(opacity)만 · 동작 줄이기면 전환 시간 0. */

/* ── 장면 ── */
.cx-scene{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:center;max-width:1080px;margin:0 auto}
.cx-scene__stage{position:relative;aspect-ratio:3/2;border-radius:var(--radius-xl);overflow:hidden;background:var(--c-navy);box-shadow:var(--shadow);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cx-scene__stage:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
.cx-scene__frame{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s ease;pointer-events:none}
.cx-scene__frame.is-on{opacity:1}
.cx-scene__frame picture,.cx-scene__frame img{display:block;width:100%;height:100%}
.cx-scene__frame img{object-fit:cover;object-position:50% 50%;-webkit-user-drag:none}
.cx-scene__num{font-size:44px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--c-navy)}
.cx-scene__num span{font-size:18px;font-weight:700;color:var(--c-text-mid)}
.cx-scene__tag{margin-top:14px;font-size:20px;font-weight:800;line-height:1.35;color:var(--c-navy);word-break:keep-all}
.cx-scene__desc{margin-top:8px;font-size:15px;line-height:1.6;color:var(--c-text-mid);word-break:keep-all}
.cx-scene__nav{display:flex;align-items:center;gap:10px;margin-top:22px}
.cx-arrow{flex:0 0 auto;width:38px;height:38px;padding:0;border:1px solid rgba(10,31,63,.18);border-radius:50%;background:#fff;color:var(--c-navy);font-size:18px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.cx-arrow:focus-visible,.cx-dot:focus-visible,.cx-gal__item:focus-visible,.cx-more:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.cx-dots{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cx-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(10,31,63,.24);cursor:pointer;transition:background .25s ease}
.cx-dot.is-on{background:var(--c-navy)}

/* ── 큰 전후 띠 ── */
.cx-band{position:relative;max-width:960px;margin:0 auto}
.cx-band__view{display:grid;grid-template-areas:"s";border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:var(--c-navy);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cx-band__slide{grid-area:s;display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--c-navy);opacity:0;transition:opacity .8s ease;pointer-events:none}
.cx-band__slide.is-on{opacity:1}
.cx-band__half{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden}
.cx-band__half picture,.cx-band__half img{display:block;width:100%;height:100%}
.cx-band__half img{object-fit:cover;-webkit-user-drag:none}
.cx-band__tag,.cx-cmp__tag{position:absolute;top:10px;margin:0;padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font-size:13px;font-weight:700;letter-spacing:-.02em;line-height:1.2;z-index:3}
.cx-band__tag{left:10px}
.cx-band__foot{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:14px}
.cx-band__cap{margin:0;font-size:15px;font-weight:700;color:var(--c-navy)}

/* ── 끌어 보는 전후 비교 칸 ── */
.cx-cmps{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1080px;margin:40px auto 0}
.cx-cmps--one{grid-template-columns:minmax(0,760px);justify-content:center;margin-top:0}
.cx-cmp-card{margin:0}
.cx-cmps:not(.cx-cmps--one) > .cx-cmp-card:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc(50% - 12px)}
.cx-cmp{position:relative;aspect-ratio:4/3;border-radius:var(--radius-xl);overflow:hidden;background:var(--c-bg-cool);box-shadow:var(--shadow);touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.cx-cmp__pic,.cx-cmp__pic img{position:absolute;inset:0;display:block;width:100%;height:100%}
.cx-cmp__pic img{object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.cx-cmp__after{clip-path:inset(0 0 0 50%)}
.cx-cmp__tag--before{left:10px}
.cx-cmp__tag--after{right:10px}
.cx-cmp__handle{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.18);z-index:4;cursor:ew-resize}
.cx-cmp__handle:focus{outline:none}
.cx-cmp__handle:focus-visible .cx-cmp__knob{outline:3px solid #2563eb;outline-offset:2px}
.cx-cmp__knob{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;color:var(--c-navy);font-size:18px;font-weight:800;letter-spacing:-.05em}
.cx-cmp__name{margin:12px 0 0;text-align:center;font-size:16px;font-weight:700;color:var(--c-navy)}
.cx-cmps__hint{margin:18px 0 0;text-align:center;font-size:13px;color:var(--c-text-mid)}

/* ── 현장 사진 모음 ── */
.cx-gal__lede{margin:10px 0 0;text-align:center;font-size:15px;color:var(--c-text-mid)}
.cx-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;max-width:1180px;margin:28px auto 0;padding:0;list-style:none}
.cx-gal__cell{margin:0;min-width:0}
.cx-gal__cell[hidden]{display:none}
.cx-gal__item{display:block;position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--c-bg-cool);box-shadow:0 2px 10px rgba(10,31,63,.10);cursor:zoom-in}
.cx-gal__item picture,.cx-gal__item img{display:block;width:100%;height:100%}
.cx-gal__item img{object-fit:cover;-webkit-user-drag:none}
.cx-gal__cap{margin:8px 2px 0;font-size:13px;line-height:1.4;color:var(--c-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-more-wrap{text-align:center;margin-top:26px}
.cx-more{display:inline-flex;align-items:center;gap:6px;padding:12px 26px;border:1px solid var(--c-navy);border-radius:999px;background:#fff;color:var(--c-navy);font-size:15px;font-weight:700;cursor:pointer}
.cx-more[hidden]{display:none}

/* ── 크게 보기 창 ── */
.cx-lb{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;background:rgba(5,12,24,.92);opacity:0;transition:opacity .25s ease;touch-action:pan-y}
.cx-lb[hidden]{display:none}
.cx-lb.is-on{opacity:1}
.cx-lb__fig{margin:0;max-width:min(92vw,1600px);display:flex;flex-direction:column;align-items:center}
.cx-lb__fig picture{display:block}
.cx-lb__fig img{display:block;max-width:min(92vw,1600px);max-height:80vh;width:auto;height:auto;object-fit:contain;border-radius:6px;-webkit-user-drag:none;user-select:none}
.cx-lb__cap{margin:12px 0 0;color:#fff;font-size:15px;line-height:1.45;text-align:center;word-break:keep-all}
.cx-lb__count{position:absolute;top:18px;left:20px;color:rgba(255,255,255,.85);font-size:14px;font-weight:700}
.cx-lb__btn{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:24px;cursor:pointer}
.cx-lb__btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.cx-lb__close{top:12px;right:14px}
.cx-lb__prev{left:14px;top:50%;margin-top:-24px}
.cx-lb__next{right:14px;top:50%;margin-top:-24px}
html.cx-lb-open{overflow:hidden}

@media (max-width:1024px){ .cx-gal{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){
  .cx-scene{grid-template-columns:1fr;gap:18px}
  .cx-scene__num{font-size:34px}
}
@media (max-width:767px){
  .cx-gal{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cx-cmps{grid-template-columns:1fr;gap:20px;margin-top:28px}
  .cx-cmps--one{margin-top:0}
  .cx-cmps:not(.cx-cmps--one) > .cx-cmp-card:last-child:nth-child(odd){width:auto;justify-self:stretch}
  .cx-band__slide{gap:3px}
  .cx-band__tag,.cx-cmp__tag{top:7px;padding:4px 9px;font-size:11px}
  .cx-band__tag{left:7px}
  .cx-cmp__tag--before{left:7px}
  .cx-cmp__tag--after{right:7px}
  .cx-scene__tag{font-size:18px}
  .cx-lb__prev,.cx-lb__next{top:auto;bottom:18px;margin-top:0}
  .cx-lb__fig img{max-height:72vh}
}
@media (prefers-reduced-motion:reduce){
  .cx-scene__frame,.cx-band__slide,.cx-dot,.cx-lb{transition:none}
}