/* 이펙터 · 2026-10 제작 · 전후사진 페이지 스타일 */

.cm-ba { --cm-r: 1rem; }
@media (min-width: 992px) { .cm-ba { --cm-r: 1.25rem; } }

.cm-pc { display: none; } .cm-mo, .cm-bx { display: block; }
@media (min-width: 768px) { .cm-pc { display: block; } .cm-mo { display: none; } }
.cm-pc, .cm-mo, .cm-bx { width: 100%; height: 100%; }
.cm-pc > img, .cm-mo > img, .cm-bx > img, .cm-pc > .img-ph, .cm-mo > .img-ph, .cm-bx > .img-ph { width: 100%; height: 100%; }

.cm-ba-title { margin: 0; text-align: center; font-size: 2.25rem; font-weight: 700; line-height: 1.1; color: var(--ss-ink); }
@media (min-width: 768px)  { .cm-ba-title { font-size: 3rem; } }
@media (min-width: 1400px) { .cm-ba-title { font-size: 3.75rem; } }
.cm-ba .cm-filter { margin-top: 2rem; }
.cm-pill-ba { min-width: 0; height: 2.25rem; padding: 0 .75rem; border-color: transparent; background: transparent; font-size: .9375rem; font-weight: 500; color: var(--ss-weak); }
.cm-pill-ba.is-active { background: var(--ss-ink); color: var(--ss-white); font-weight: 600; }
@media (hover: hover) { .cm-pill-ba:not(.is-active):hover { color: var(--ss-ink); } }
@media (min-width: 768px) { .cm-ba .cm-filter .ss-mtab-list { gap: .625rem; } .cm-pill-ba { min-width: 5.625rem; height: 2.625rem; font-size: 1rem; } .cm-ba .cm-filter { margin-top: 4rem; } }
@media (min-width: 992px) { .cm-ba .cm-filter { margin-top: 5.5rem; } }

.cm-ba-sets { margin-top: 2rem; }
@media (min-width: 768px) { .cm-ba-sets { margin-top: 3rem; } }
@media (min-width: 992px) { .cm-ba-sets { margin-top: 4.5rem; } }
.cm-ba-set[hidden] { display: none; }
.cm-ba-view { max-width: 45rem; margin-inline: auto; }
.cm-ba-stage { position: relative; display: block; width: 100%; aspect-ratio: 720 / 400; padding: 0; overflow: hidden; border: 0; border-radius: var(--cm-r); background: var(--ss-bg-soft); cursor: pointer; }
.cm-ba-shot { display: block; position: absolute; inset: 0; }
.cm-ba-shot[hidden] { display: none; }
.cm-ba-shot img, .cm-ba-shot .img-ph { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; aspect-ratio: auto !important; }
.cm-ba-part { display: flex; align-items: baseline; gap: .5rem; margin: 1rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--ss-text); }
.cm-ba-part strong { flex: none; font-weight: 700; }
.cm-ba-part span { font-weight: 400; }
.cm-ba-angles { display: flex; justify-content: center; gap: .5rem; margin: 1.5rem 0 0; padding: 0; }
.cm-ba-angles li { flex: 0 1 9rem; min-width: 0; }
.cm-ba-angle { display: block; width: 100%; padding: 0; border: 0; border-radius: .625rem; background: none; cursor: pointer; }
.cm-ba-angle .cm-thumb { --cm-ar: 144 / 80; border-radius: .625rem; }
.cm-ba-angle:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 2px; }
@media (min-width: 768px) { .cm-ba-part { margin-top: 1.5rem; } .cm-ba-angles { gap: .625rem; } }

.cm-ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem .625rem; max-width: 75rem; margin: 5rem auto 0; }
.cm-ba-card { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.cm-ba-card .cm-thumb { --cm-ar: 384 / 213; }
.cm-ba-card .cm-thumb > span { position: absolute; inset: 0; }
.cm-ba-card:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 2px; }
@media (min-width: 768px) { .cm-ba-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 1.5rem; } }
@media (min-width: 992px) { .cm-ba-grid { gap: 5rem 1.5rem; margin-top: 7rem; } }
.cm-ba-card:hover .cm-thumb > span { transform: none; }

.cm-pg-plain { gap: .25rem; }
.cm-pg-plain .cm-pg-n { width: 2rem; height: 2rem; border: 0; border-radius: .3125rem; background: none; font-size: .75rem; font-weight: 500; color: var(--ss-weak); }
.cm-pg-plain .cm-pg-n[aria-current="page"] { background: var(--ss-ink); color: var(--ss-white); font-size: .875rem; font-weight: 600; }
.cm-pg-plain .cm-pg-a { width: 2rem; height: 2rem; margin: 0 !important; color: var(--ss-weak); }
.cm-pg-plain .cm-pg-a .ss-ico { width: .875rem; height: .875rem; }
.cm-pg-plain .cm-pg-a-dbl .ss-ico + .ss-ico { margin-left: -.625rem; }
@media (hover: hover) { .cm-pg-plain a:hover:not([aria-current="page"]) { border-color: transparent; color: var(--ss-ink); } }

.cm-modal-ba { background: rgb(0 0 0 / .4); }
.cm-modal-ba .cm-modal-box { max-width: 35.25rem; padding: 3.5rem 1.25rem 3.5rem; border: 1px solid var(--ss-line); background: rgb(255 255 255 / .95); }
.cm-modal-close { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; background: none; color: var(--ss-text); cursor: pointer; }
.cm-modal-close .ss-ico { width: 1.75rem; height: 1.75rem; }
.cm-modal-logo { width: 9.375rem; margin: 0 auto; }
.cm-modal-logo img, .cm-modal-logo .img-ph { display: block; width: 100%; height: auto; }
.cm-modal-logo img.cm-modal-logo-img-pc { display: none; }
@media (min-width: 768px) { .cm-modal-logo img.cm-modal-logo-img-pc { display: block; } .cm-modal-logo img.cm-modal-logo-img-mo { display: none; } }
.cm-modal-sub { margin: 1rem 0 0; font-size: .875rem; line-height: 1.4; color: #1d1d1f; }
.cm-modal-ba .cm-login { max-width: 23.125rem; margin: 2.5rem auto 0; }
.cm-modal-ba .cm-login-in { height: 3rem; border-color: var(--ss-line-strong); font-size: .9375rem; }
.cm-modal-ba .cm-login-in::placeholder { color: var(--ss-weak); opacity: 1; }
.cm-modal-ba .cm-login-in + .cm-login-in { margin-top: 1rem; }
.cm-modal-ba .cm-login-links { margin-top: 2rem; font-size: .875rem; font-weight: 600; color: var(--ss-text-2); }
.cm-modal-ba .cm-login-links li + li::before { background: var(--ss-line); height: .75rem; margin-inline: .875rem; }
.cm-modal-ba .cm-login-go { height: 3.125rem; margin-top: 2rem; border-radius: 1.875rem; background: #1d1d1f; font-size: 1rem; font-weight: 600; }
.cm-login-sns-t { margin: 2rem 0 0; text-align: center; font-size: .875rem; line-height: 1.4; color: var(--ss-text-2); }
.cm-modal-ba .cm-login-sns { margin-top: 1.25rem; }
@media (min-width: 768px) {
  .cm-modal-ba .cm-modal-box { padding: 4rem 6rem 5.5rem; }
  .cm-modal-close { top: 1.875rem; right: 1.75rem; }
  .cm-modal-sub { margin-top: 1rem; font-size: .9375rem; }
  .cm-modal-ba .cm-login { margin-top: 3.25rem; }
  .cm-modal-ba .cm-login-in { height: 3.25rem; font-size: 1rem; }
  .cm-modal-ba .cm-login-in + .cm-login-in { margin-top: 1.75rem; }
  .cm-modal-ba .cm-login-links { margin-top: 3.5rem; font-size: .9375rem; }
  .cm-modal-ba .cm-login-go { height: 3.375rem; margin-top: 3.25rem; font-size: 1.125rem; }
  .cm-login-sns-t { margin-top: 3rem; font-size: 1rem; }
  .cm-modal-ba .cm-login-sns { margin-top: 1.25rem; gap: 1.25rem; }
}

.cm-ba-pair { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 100%; }
.cm-ba-pair img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-ba-lock { display: block; background: #e5e5e5; }
.cm-ba-pair { overflow: hidden; }
.cm-ba-pair img.cm-ba-ph { filter: blur(.75rem); transform: scale(1.1); }   /* 로그인 전 Before: 48px 로 줄인 사본(/api/ba-blur.ashx)을 흐리게 */

/* 1018 수정: 전후 사진 라벨 띠 */
.cm-ba-lbs { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; }
.cm-ba-lbs b { padding: .5rem 0; background: #111; color: #fff; text-align: center; font-size: .875rem; font-weight: 500; line-height: 1.4; }