.soap-collab { background:#111212; }
.soap-collab h2 { display:flex; align-items:center; gap:24px; font-size:clamp(1.15rem,2vw,1.55rem); }
.soap-collab h2::after { content:""; height:1px; background:#66695f; flex:1; max-width:380px; }
.soap-carousel { margin-top:26px; }
.soap-slide { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(28px,4vw,64px); align-items:center; margin-bottom:28px; }
.soap-slide[hidden] { display:none; }
.soap-carousel.is-ready .soap-slides { display:grid; }
.soap-carousel.is-ready .soap-slide { grid-area:1 / 1; margin-bottom:0; }
.soap-carousel.is-ready .soap-slide[hidden] { display:grid; visibility:hidden; pointer-events:none; }
.soap-media { min-width:0; display:grid; place-items:center; height:clamp(240px,29vw,410px); overflow:hidden; border-radius:6px; }
.soap-media img { display:block; width:100%; height:100%; min-height:0; max-height:100%; object-fit:contain; }
.soap-media--logo img { object-fit:contain; filter:invert(1); mix-blend-mode:screen; }
.soap-copy { min-width:0; font-family:'Noto Serif KR',serif; font-size:clamp(1rem,1.45vw,1.25rem); line-height:1.95; word-break:keep-all; overflow-wrap:anywhere; }
.soap-copy p { margin:0 0 22px; }
.soap-copy p:last-child { margin-bottom:0; }
.soap-copy .soap-note { color:#b8bab4; font-size:.8em; line-height:1.8; }
.soap-controls { display:flex; align-items:center; justify-content:flex-end; gap:24px; margin-top:18px; }
.soap-controls[hidden] { display:none; }
.soap-controls button { width:48px; height:48px; border:1px solid #676a60; border-radius:50%; color:#eeede7; background:transparent; cursor:pointer; font-size:22px; }
.soap-controls button:hover { background:#292c27; }
.soap-carousel:focus-visible,.soap-controls button:focus-visible { outline:2px solid #eeede7; outline-offset:5px; }
.soap-controls span { font-variant-numeric:tabular-nums; min-width:70px; text-align:center; }
@media(max-width:600px) {
  .soap-slide { grid-template-columns:minmax(0,1fr); grid-template-rows:230px 1fr; gap:20px; }
  .soap-copy { align-self:start; }
  .soap-media { height:230px; }
  .soap-media--logo { height:230px; }
  .soap-media--logo img { width:min(100%,360px); }
  .soap-copy { font-size:.94rem; line-height:1.85; }
  .soap-copy p { margin-bottom:16px; }
  .soap-controls { gap:20px; margin-top:22px; }
}