/** Shopify CDN: Minification failed

Line 57:0 Unexpected "}"

**/
/* 고급 모달: 어두운 오버레이 + 미세 블러 + 여백 중심 */
html.sl-modal-open { overflow: hidden; }

.sl-modal[hidden] { display: none !important; }

.sl-modal {
  position: fixed; inset: 0;
  z-index: 9999;
}

/* ✅ 백드롭은 가장 아래 */
.sl-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 10, 10, 0.62);
  backdrop-filter: blur(10px);
  z-index: 0;
}

/* ✅ 다이얼로그는 백드롭 위 */
.sl-modal__dialog {
  position: relative;
  z-index: 1;

  /* ✅ 내부 스택(레이어) 분리: 닫기 버튼이 iframe/오버레이 위로 확실히 올라오게 */
  isolation: isolate;

  width: min(1100px, calc(100% - 48px));
  margin: 48px auto;
  border-radius: 18px;
  background: rgba(15, 15, 15, 0.82);
  box-shadow: 0 30px 90px rgba(0,0,0,0.55);
  overflow: hidden;
}

/* ✅ 닫기 버튼은 항상 최상단 + 클릭 보장 */
.sl-modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  color: #fff;
  cursor: pointer;

  z-index: 50;          /* 핵심: 최상단 */
  pointer-events: auto; /* 핵심: 클릭 보장 */
  top: 10px;  /* 기존 14px → 10px */
  right: 10px;
}

}

/* ✅ 콘텐츠는 닫기 버튼보다 아래 레이어 */
.sl-modal__content {
  position: relative;
  z-index: 1;
  padding: 18px;
}

/* 섹션(영상) 레이아웃 */
.sl-film__wrap { display: grid; gap: 18px; }
@media (min-width: 900px) {
  .sl-film__wrap { grid-template-columns: 1.4fr 1fr; align-items: start; }
}

.sl-film__ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}

.sl-film__ratio iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.sl-film__video {
  width: 100%;
  border-radius: 14px;
  background: #000;
}

.sl-film__kicker {
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .82;
  color: rgba(255,255,255,0.85);

  /* ✅ 추가: X 버튼 영역만큼 위쪽 공간 확보 */
  margin-top: 60px;
}


.sl-film__title {
  margin: 10px 0 10px;
  font-size: 28px;
  line-height: 1.15;
  color: #fff;
}

.sl-film__desc {
  color: rgba(255,255,255,0.82);
  line-height: 1.7;
}

.sl-film__placeholder {
  padding: 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
}

@media (max-width: 640px) {
  .sl-film__kicker { margin-top: 26px; }
}

/* ================================
   Close(X) Hover: Luxury Blue Ring
   - hover/focus-visible에서만 고급 블루 링이 나타났다 사라짐
   - 기본 파란 아웃라인은 제거(대신 커스텀 링으로 대체)
================================ */

/* 기본 아웃라인 제거 + 트랜지션 */
.sl-modal__close {
  outline: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease,
    background-color .22s ease;
}

/* ✅ 마우스 올리면: 블루 링(고급스러운) 등장 */
.sl-modal__close:hover {
  border-color: rgba(120, 170, 255, 0.65);
  box-shadow:
    0 0 0 1px rgba(120, 170, 255, 0.55),
    0 0 0 6px rgba(120, 170, 255, 0.16),
    0 10px 30px rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}

/* ✅ 클릭 순간(더 묵직하고 고급스럽게) */
.sl-modal__close:active {
  transform: translateY(0px) scale(0.98);
  box-shadow:
    0 0 0 1px rgba(120, 170, 255, 0.45),
    0 0 0 5px rgba(120, 170, 255, 0.12),
    0 6px 18px rgba(0, 0, 0, 0.35);
}

/* ✅ 키보드 접근성(탭 포커스)도 동일하게 */
.sl-modal__close:focus-visible {
  border-color: rgba(120, 170, 255, 0.75);
  box-shadow:
    0 0 0 1px rgba(120, 170, 255, 0.65),
    0 0 0 7px rgba(120, 170, 255, 0.18),
    0 10px 30px rgba(0, 0, 0, 0.35);
}

/* ==========================================
   Signature Blue Ring (Tiffany / Sapphire)
   - 우리 플랫폼 시그니처 톤으로 고급 블루 링 재정의
========================================== */

/* 1) 시그니처 컬러 변수 */
:root{
  --sl-ring-tiffany:  #5FE6D8;  /* Tiffany 느낌 */
  --sl-ring-sapphire: #5B8CFF;  /* Sapphire 느낌 */
  --sl-ring-mix: color-mix(in srgb, var(--sl-ring-tiffany) 55%, var(--sl-ring-sapphire) 45%);
}

/* 2) 닫기 버튼 호버/포커스 링 */
.sl-modal__close:hover,
.sl-modal__close:focus-visible{
  border-color: color-mix(in srgb, var(--sl-ring-mix)87%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sl-ring-mix) 72%, transparent),
    0 0 0 7px color-mix(in srgb, var(--sl-ring-mix) 18%, transparent),
    0 14px 36px rgba(0, 0, 0, 0.38);
  background: rgba(0,0,0,0.34);
}

/* 3) 클릭 순간(조금 더 묵직하게) */
.sl-modal__close:active{
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sl-ring-mix) 62%, transparent),
    0 0 0 6px color-mix(in srgb, var(--sl-ring-mix) 14%, transparent),
    0 10px 24px rgba(0,0,0,0.38);
}

@supports not (color-mix(in srgb, white, black)) {
  .sl-modal__close:hover,
  .sl-modal__close:focus-visible{
    border-color: rgba(95, 230, 216, 0.70);
    box-shadow:
      0 0 0 1px rgba(95, 230, 216, 0.60),
      0 0 0 7px rgba(91, 140, 255, 0.16),
      0 14px 36px rgba(0, 0, 0, 0.38);
  }
  .sl-modal__close:active{
    box-shadow:
      0 0 0 1px rgba(95, 230, 216, 0.52),
      0 0 0 6px rgba(91, 140, 255, 0.12),
      0 10px 24px rgba(0,0,0,0.38);
  }
}