/* ══════════════════════════════════════════════════════════════════════
   LG Culture Week — 고정 캔버스 + scale 방식 랜딩 페이지
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --cw-breakpoint: 768px;   /* JS 의 CONFIG.breakpoint 와 반드시 같은 값 */
  --cw-pc-base: 1920;
  --cw-mo-base: 360;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
}

body {
  overflow-x: hidden;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: none; border: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }


/* ── 캔버스 ───────────────────────────────────────────────────────────
   .cw-viewport  문서 흐름을 차지하는 래퍼. 높이는 JS 가 (캔버스높이 × scale) 로 설정.
   .cw-canvas    기준 폭(1920 / 375) 고정. JS 가 transform: scale() 을 건다.
   ─────────────────────────────────────────────────────────────────── */

.cw-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.cw-canvas {
  position: relative;
  transform-origin: 0 0;
  /* JS 가 인라인 transform 으로 덮어쓴다. 이건 JS 실행 전 깜빡임 방지용 기본값.
     translateX 가 먼저 와야 이동량이 배율의 영향을 받지 않는다. */
  transform: translateX(var(--cw-offset, 0px)) scale(var(--cw-scale, 1));
}

/* PC / 모바일 전환. JS 없이도 올바른 쪽이 보이도록 CSS 로 1차 제어한다. */
.cw-viewport--mo { display: none; }
@media (max-width: 767.98px) {
  .cw-viewport--pc { display: none; }
  .cw-viewport--mo { display: block; }
}
/* JS 가 판정한 뒤에는 data-cw-mode 가 우선한다 (CSS px 과 JS px 불일치 방지). */
html[data-cw-mode='pc'] .cw-viewport--pc,
html[data-cw-mode='mo'] .cw-viewport--mo { display: block; }
html[data-cw-mode='pc'] .cw-viewport--mo,
html[data-cw-mode='mo'] .cw-viewport--pc { display: none; }


/* ── 섹션 ─────────────────────────────────────────────────────────────
   섹션은 흐름 배치 + 명시적 height. 내부 요소만 absolute 로 Figma 좌표를 쓴다.
   → 캔버스 전체 높이가 자동 합산되므로 섹션 top 을 하드코딩할 필요가 없다.
   ─────────────────────────────────────────────────────────────────── */

.cw-section {
  position: relative;
  overflow: hidden;
}

.cw-viewport--pc .cw-canvas,
.cw-viewport--pc .cw-section { width: 1920px; }

.cw-viewport--mo .cw-canvas,
.cw-viewport--mo .cw-section { width: 360px; }

/* 섹션 직계 자식은 기본적으로 절대 배치 — Figma 의 x/y 를 left/top 으로 그대로 옮긴다. */
.cw-section > * { position: absolute; }
/* 배경처럼 섹션을 꽉 채우는 요소용 */
.cw-section > .cw-fill { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }


/* ── GNB ──────────────────────────────────────────────────────────────
   캔버스 바깥(body 직계)에 있다. transform 조상이 없어야 fixed 가 동작한다.
   ─────────────────────────────────────────────────────────────────── */

.cw-gnb {
  position: fixed;
  left: 0; top: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  /* Figma 메뉴고정영역 123:5031 = 1920x96, 좌우 여백 280 (로고 x=280 / 메뉴 우측끝 1640) */
  height: calc(96px * var(--cw-scale, 1));
  /* 배경(bar)은 화면 전체를 덮되, 내용물은 캔버스와 같은 offset 만큼 안쪽에서 시작한다. */
  padding-left: calc(var(--cw-offset, 0px) + 280px * var(--cw-scale, 1));
  padding-right: calc(var(--cw-offset, 0px) + 280px * var(--cw-scale, 1));
  background-color: transparent;
  transition: background-color .3s ease, box-shadow .3s ease;
}

.cw-gnb--mo {
  height: calc(56px * var(--cw-scale, 1));
  padding-left: calc(var(--cw-offset, 0px) + 20px * var(--cw-scale, 1));
  padding-right: calc(var(--cw-offset, 0px) + 20px * var(--cw-scale, 1));
}

/* 캔버스와 동일한 규칙으로 PC/모바일 GNB 를 전환한다. */
.cw-gnb--mo { display: none; }
@media (max-width: 767.98px) {
  .cw-gnb--pc { display: none; }
  .cw-gnb--mo { display: flex; }
}
html[data-cw-mode='pc'] .cw-gnb--pc,
html[data-cw-mode='mo'] .cw-gnb--mo { display: flex; }
html[data-cw-mode='pc'] .cw-gnb--mo,
html[data-cw-mode='mo'] .cw-gnb--pc { display: none; }

/* 스크롤이 내려가면 JS 가 is-solid 를 붙인다. */
.cw-gnb.is-solid {
  background-color: rgba(125, 212, 240, .94);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}

.cw-gnb__logo {
  width: calc(240px * var(--cw-scale, 1));   /* Figma 123:4379 240x29 @ (280,34) */
  height: auto;
  cursor: pointer;
}
.cw-gnb--mo .cw-gnb__logo { width: calc(120px * var(--cw-scale, 1)); }

.cw-gnb__nav {
  margin-left: auto;
  display: flex;
  gap: calc(80px * var(--cw-scale, 1));      /* Figma menu 123:4396 */
  font-size: calc(20px * var(--cw-scale, 1));
  font-weight: 700;
  color: rgb(255, 255, 255);
  white-space: nowrap;
}

.cw-gnb__nav a { text-underline-offset: .34em; text-decoration-thickness: 3px; }
.cw-gnb__nav a:hover { text-decoration: underline; }


/* ── 스크롤 진입 애니메이션 ───────────────────────────────────────────
   data-reveal="fade" | "up". JS 가 뷰포트 진입 시 .is-in 을 붙인다.
   지연은 인라인 style="transition-delay: .12s" 로 준다.
   ─────────────────────────────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.22, .61, .36, 1),
              transform .9s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
[data-reveal='up'] { transform: translateY(52px); }
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ── 유틸 ─────────────────────────────────────────────────────────── */

/* 시안의 줄바꿈을 그대로 고정할 때 사용. 마크업에 실제 개행문자를 넣는다.
   박스 폭은 최장 줄보다 20~30px 여유를 둘 것 — 서브픽셀 반올림으로 밀린다. */
.cw-pre { white-space: pre-line; }

.cw-sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* 스캐폴드 자리표시자 — Figma 콘텐츠를 채우면 지운다. */
.cw-placeholder {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: rgba(0, 0, 0, .3);
  white-space: nowrap;
}
[data-reveal].cw-placeholder { transform: translate(-50%, -50%) translateY(52px); }
[data-reveal].cw-placeholder.is-in { transform: translate(-50%, -50%); }
.cw-viewport--mo .cw-placeholder { font-size: 16px; }
.cw-section[style*='rgb(0,0,0)'] .cw-placeholder { color: rgba(255, 255, 255, .45); }


/* ── KV  [Figma 123:4239] 1920x1000 ────────────────────────────────── */

.cw-kv {
  height: 1000px;
  background: rgb(125, 212, 240);   /* #7dd4f0 */
}

/* Scroll 큐 — Pretendard Bold 20 / line-height 1.2 / 가운데 정렬.
   9/1 시안에서 갈색(#593c2e) → **흰색** 으로 바뀌었다(셰브론도 동일). */
.cw-kv__scroll {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: rgb(255, 255, 255);
}

/* 아직 내려받지 못한 Figma 에셋 자리. 좌표·크기는 시안 실측값 그대로다. */
.cw-todo {
  display: block;
  border: 2px dashed rgba(89, 60, 46, .45);
  border-radius: 6px;
  background: rgba(255, 255, 255, .22);
}

/* ── 레이아웃 유틸 ─────────────────────────────────────────────────────
   .cw-layer  섹션을 꽉 채우는 투명 레이어. 섹션 전체에 reveal 을 한 번만 걸 때 쓴다.
              (요소마다 data-reveal 을 달면 translateY 가 요소별 transform 과 충돌한다)
   .cw-c      캔버스 폭 전체를 차지하는 가운데 정렬 행. Figma 의 "가운데 정렬 + 좌표"를
              translateX(-50%) 없이 표현하므로 reveal 의 transform 과 부딪히지 않는다.
   ─────────────────────────────────────────────────────────────────── */

.cw-layer { left: 0; top: 0; width: 100%; height: 100%; }
.cw-layer > * { position: absolute; }

.cw-c { left: 0; width: 100%; text-align: center; }


/* ── 행사설명 (Intro)  [Figma 53:761] 1920x920 ─────────────────────── */

.cw-intro { height: 920px; background: rgb(197, 237, 255); }   /* #c5edff */

.cw-intro__pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 128px; height: 30px;
  border: 1.5px solid rgb(0, 0, 0);
  border-radius: 19px;
  font-size: 14px; font-weight: 600; line-height: 1.2;
  color: rgb(0, 0, 0);
  box-sizing: border-box;
}
.cw-intro__h1   { font-size: 64px; font-weight: 900; line-height: 1.2; color: rgb(0,0,0); }
.cw-intro__h2   { font-size: 36px; font-weight: 700; line-height: 1.2; color: rgb(82,81,88); }
.cw-intro__body { font-size: 28px; font-weight: 500; line-height: 1.5; color: rgb(82,81,88); }
.cw-intro__date { font-size: 30px; font-weight: 700; line-height: 1.5; color: rgb(0,0,0); }


/* ── PROGRAM (9/1 시안)  [53:938] 1920x1214 ─────────────────────────
   카드 5개 + 카카오톡 안내 배너. 배경은 KV 와 같은 하늘색.
   ⚠️ 화살표는 Material 컴포넌트 인스턴스라 메타데이터 bbox(x=77)가 렌더(x=46)와
      다르다. 시안 스크린샷 실측값 45 를 쓴다(타이틀과 같은 좌측 정렬).
   ─────────────────────────────────────────────────────────────────── */

.cw-prog2 { height: 1216px; background: rgb(125, 212, 240); }

.cw-prog2__title { font-size: 56px; font-weight: 900; line-height: 1.2; color: rgb(0,0,0); }
.cw-prog2__sub   { font-size: 24px; font-weight: 500; line-height: 1.4; color: rgb(82,81,88); }

/* 안내 배너 1235x140 — #a6e9ff */
.cw-prog2__notice {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 1235px; height: 140px;
  border-radius: 24px;
  background: rgb(166, 233, 255);
  font-size: 24px; font-weight: 500; line-height: 1.5;
  color: rgb(0,0,0);
  text-align: center;
}
.cw-prog2__notice b { font-weight: 700; }

/* 카드 — 흰 배경 / radius 24 / shadow 0 4px 4px rgba(0,0,0,.12) */
.cw-pc {
  height: 300px;
  background: rgb(255,255,255);
  border-radius: 24px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .12);
  cursor: pointer;
  overflow: hidden;
}
.cw-pc > * { position: absolute; }

.cw-pc__name  { font-size: 32px; font-weight: 700; line-height: 1; color: rgb(0,0,0); white-space: nowrap; }
.cw-pc__name.cw-pre { white-space: pre-line; line-height: 1.2; }
.cw-pc__place {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 20px; font-weight: 500; line-height: 1.5;
  color: rgb(0,0,0); white-space: nowrap;
}
.cw-pc__pin { width: 20px; height: 20px; flex: none; }

.cw-pc__arrow { display: block; width: 32px; height: 32px; color: rgb(0,0,0); }
.cw-pc__arrow svg { width: 100%; height: 100%; display: block; }

.cw-prog2__deco { pointer-events: none; }


/* ── COMING SOON 팝업  [Figma 123:6793] 720x540 ────────────────────────
   ⚠️ 캔버스 **바깥**(body 직계)에 둔다. transform 조상이 있으면 fixed 가 깨진다.
   배율은 --cw-scale 이 아니라 JS 가 뷰포트에 맞춰 계산한 --cw-modal-scale 을 쓴다
   (모바일에서 --cw-scale 은 1 을 넘어서 720px 상자가 화면 밖으로 나간다).
   ─────────────────────────────────────────────────────────────────── */

.cw-modal {
  position: fixed; inset: 0; z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .55);
  /* 720px 상자의 **레이아웃** 폭은 축소 전 기준이라 좁은 화면에서 넘친다.
     transform 은 레이아웃에 영향이 없으므로 여기서 잘라 가로 스크롤을 막는다. */
  overflow: hidden;
}
.cw-modal.is-open { display: flex; }

/* 세로로 긴 모바일 패널 — 위에서부터 붙이고 오버레이가 세로로 스크롤한다.
   transform-origin 을 위쪽으로 옮겨야 확대분이 아래로 자라 스크롤 길이와 맞는다
   (JS sizeModal 이 margin-bottom 으로 차액을 메운다). */
.cw-modal.is-scroll {
  align-items: flex-start;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* 위아래로 꽉 차면 답답해서 여백을 준다(좌우 여백과 비슷한 20px × 배율).
     ⚠️ 아래쪽은 padding 으로 주지 않는다 — 스크롤 컨테이너의 padding-bottom 은
     브라우저에 따라 스크롤 높이에 안 잡힌다. JS(sizeModal)가 패널 margin-bottom 에
     함께 실어 준다. */
  padding-top: var(--cw-modal-pad, 20px);
}
.cw-modal.is-scroll .cw-pop { transform-origin: 50% 0; }

.cw-pop {
  position: relative;
  /* ⚠️ flex: none 필수. flex 아이템의 기본 flex-shrink 는 1 이라,
     좁은 화면에서 720px 상자가 **화면 폭까지 눌린 뒤** scale 이 적용된다.
     그러면 가로만 찌그러지고(720→390) 안쪽 720px 요소들이 삐져나온다.
     (모바일에서 'COMING SOON' 이 잘리고 '확인' 이 우측으로 밀렸던 원인) */
  flex: none;
  width: 520px; height: 360px;
  background: rgb(255, 255, 255);
  overflow: hidden;
  transform: scale(var(--cw-modal-scale, 1));
}
.cw-modal__box > * { position: absolute; }



/* ── TIMETABLE (9/1 시안 · 카드 그리드)  [53:771 / 53:1849 / 53:2892] ──
   구 시안은 리스트 행이었고, 새 시안은 620x274 카드 그리드다.
   섹션 높이는 날짜마다 다르다: 9/15·9/16 = 1244 / 9/17 = 1562.
   ─────────────────────────────────────────────────────────────────── */

.cw-tt2 { background: rgb(243, 248, 245); }   /* #f3f8f5 */

.cw-tt2__title { font-size: 56px; font-weight: 900; line-height: 1.2; color: rgb(0,0,0); }
.cw-tt2__sub   { font-size: 24px; font-weight: 500; line-height: 1.4; color: rgb(82,81,88); }

/* 날짜 탭 — 175x48 / radius 60 / 활성 #fff53c, 비활성 #ddd / 20px Bold #593c2e */
.cw-tt2__tabs { display: flex; gap: 32px; }
.cw-tab2 {
  width: 175px; height: 48px;
  border-radius: 60px;
  background: rgb(221, 221, 221);
  font-size: 20px; font-weight: 700; line-height: 1;
  color: rgb(89, 60, 46);
  white-space: pre;
  transition: background-color .2s ease;
}
.cw-tab2[aria-selected='true'] { background: rgb(255, 245, 60); }

/* 날짜 패널은 섹션을 꽉 채우는 투명 레이어. 그 안의 카드가 시안 좌표로 절대 배치된다.
   ⚠️ .cw-layer > * 규칙은 패널까지만 미치므로, 패널의 자식에도 따로 걸어야 한다. */
.cw-tt2__day { left: 0; top: 0; width: 100%; height: 100%; }
.cw-tt2__day > * { position: absolute; }

/* 카드 공통 — 흰 배경 / radius 24 / 옅은 그림자 */
.cw-tc {
  height: 274px;
  background: rgb(255, 255, 255);
  border-radius: 24px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .05);
}
.cw-tc > * { position: absolute; }

.cw-tc__name { font-size: 32px; font-weight: 700; line-height: normal; letter-spacing: -.64px; color: rgb(0,0,0); white-space: nowrap; }
.cw-tc__cast { font-size: 24px; font-weight: 700; line-height: normal; letter-spacing: -.48px; color: rgb(0,0,0); white-space: nowrap; }
.cw-tc__time { font-size: 20px; font-weight: 700; line-height: normal; letter-spacing: -.4px; color: rgb(0,0,0); white-space: nowrap; }

/* 장소 + 시간 한 줄 — 시안은 둘 사이 간격이 항상 12px 이다.
   ⚠️ 예전에는 시간을 고정 left 로 찍어서 장소 문구가 길어지면 간격이 제각각이 됐다
   (상시 카드에서 `ISC B1F 컬처커뮤니티상시` 처럼 붙어 버렸다). */
.cw-tc__meta {
  display: inline-flex; align-items: center; gap: 12px;
  white-space: nowrap;
}
.cw-tc__place {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 500; line-height: normal;
  color: rgb(0,0,0); white-space: nowrap;
}
.cw-tc__place img { flex: none; }

/* LIVE STREAMING 배지 — 라이브 오픈 전 OFF 상태는 회색(#d4d4d4).
   오픈하면 배경색만 바꾸면 된다. */
.cw-tc__live {
  display: inline-flex; align-items: center; justify-content: center;
  width: 140px; height: 26px;
  border-radius: 30px;
  background: rgb(212, 212, 212);
  font-size: 14px; font-weight: 700; line-height: 1;
  color: rgb(255, 255, 255);
  white-space: nowrap;
}

/* 참가 신청 버튼 — 144x56 / radius 70 / #7dd4f0 */
.cw-tc__apply {
  display: inline-flex; align-items: center; gap: 10px;
  width: 144px; height: 56px;
  padding: 0 26px;
  border-radius: 70px;
  background: rgb(125, 212, 240);
  font-size: 16px; font-weight: 400; line-height: 1;
  color: rgb(0, 0, 0);
  white-space: nowrap;
  cursor: pointer;
}
/* 링크 확정 전에도 시안과 같은 외형을 유지한다. 흐리게 하면 시안과 달라진다. */
.cw-tc__apply.is-off { cursor: default; }

/* 원형 사진 242x242. export 가 원형까지 렌더해 오므로 그대로 얹는다. */
.cw-tc__photo  { width: 242px; height: 242px; }
/* 사진이 없는 카드(버스킹)는 회색 원 + 일러스트 */
.cw-tc__circle { width: 242px; height: 242px; border-radius: 50%; background: rgb(245,245,245); }

/* 상시 카드 400x160 — 이름 24px, 장소/상시 16px */
/* 상시 카드 400x160 — 9/8 시안에서 3줄 스택(상시 → 제목 → 장소)이 됐다.
   제목·장소·시간 모두 일반 카드와 같은 크기라 별도 override 가 없다. */
.cw-tc--always { height: 160px; }



/* ── FOOTER  [Figma 123:5001] 1920x242 ────────────────────────────────
   디자이너 메모: **등장효과 없이 고정** — data-reveal 을 주지 않는다.
   ─────────────────────────────────────────────────────────────────── */

.cw-ft { height: 242px; background: rgb(18, 18, 18); }         /* #121212 */
.cw-ft__logo { left: 316px; top: 49px; }
.cw-ft__copy { left: 1137px; top: 179px; width: 451px; text-align: right;
               font-size: 16px; font-weight: 500; line-height: 1;
               color: rgb(255,255,255); white-space: nowrap; }


/* ── FESTIVAL MAP  [Figma 123:4863] 1920x1327 ─────────────────────── */

.cw-map { height: 1327px; background: rgb(243, 248, 245); }    /* #f3f8f5 */

.cw-map__title { left: 280px;  top: 110px; font-size: 100px; font-weight: 900; line-height: 1; color: rgb(0,0,0); white-space: nowrap; }
.cw-map__note  { left: 1370px; top: 139px; width: 270px; text-align: right;
                 font-size: 28px; font-weight: 500; line-height: 1; color: rgb(82,81,88); }
.cw-map__rule  { left: 280px; top: 229px; width: 1360px; height: 2px; background: rgb(82,81,88); }

/* 지도 — 1130x746 박스에 2px #7896be 테두리, 이미지는 세로로 살짝 잘려 있다 */
.cw-map__frame {
  left: 395px; top: 324px; width: 1130px; height: 746px;
  border: 2px solid rgb(120,150,190);
  border-radius: 24px;
  overflow: hidden;
}
.cw-map__frame img { position: absolute; left: 0; top: -6.57%; width: 100%; height: 113.13%; max-width: none; }

/* 범례 배경 — 지도 아래쪽에 붙는 하늘색 띠 */
.cw-map__legend {
  left: 395px; top: 928px; width: 1130px; height: 142px;
  background: rgb(173,235,255);                                /* #adebff */
  border-radius: 0 0 24px 24px;
}

.cw-map__cap  { font-size: 26px; font-weight: 700; line-height: normal; white-space: nowrap; }
.cw-map__cap--stamp { left: 1043px; top: 759px; color: rgb(63,120,234); }   /* #3f78ea */
.cw-map__cap--main  { left: 512px;  top: 953px; color: rgb(255,119,156); }  /* #ff779c */

.cw-map__item { display: flex; gap: 6px; align-items: center;
                font-size: 20px; font-weight: 500; line-height: normal; color: rgb(0,0,0); white-space: nowrap; }
/* M3 Badges(Large) — 20x20 원형 */
.cw-map__badge {
  flex: none; width: 20px; height: 20px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500; line-height: 1; color: rgb(255,255,255);
}
.cw-map__item--main  .cw-map__badge { background: rgb(255,119,156); }
.cw-map__item--stamp .cw-map__badge { background: rgb(63,120,234); }


/* ⚠️ nowrap 이 걸린 요소에 .cw-pre(pre-line) 를 같이 주면 nowrap 이 이겨서 개행이 무시된다.
   시안의 줄바꿈을 그대로 쓰는 곳은 white-space: pre 로 명시한다 (개행 유지 + 자동 줄바꿈 금지). */
.cw-ev__txt.cw-pre,
.cw-card__val--stack.cw-pre { white-space: pre; }

/* 출연자 표기 중 일부는 시안에서 좌표 기준이 아니라 **가운데 정렬**이다
   (버스킹 행: translateX(-50%) 가 함께 걸려 있다). 좌우 기준이 달라 별도 클래스로 둔다. */
.cw-tt__cast--c { transform: translate(-50%, -50%); }

/* 날짜별 패널 — 선택된 날짜만 보인다. 패널마다 높이가 달라서
   .cw-tt 의 height 를 JS 가 함께 바꾼다(캔버스 높이는 자동으로 따라옴). */
.cw-tt__day { left: 0; top: 0; width: 100%; height: 100%; }
.cw-tt__day > * { position: absolute; }
.cw-tt__day[hidden] { display: none; }
.cw-tab { cursor: pointer; }


/* ══════════════════════════════════════════════════════════════════════
   MOBILE  [Figma 컬쳐위크_MO_Main 123:5033] 360x8185
   PC 와 완전히 별개의 마크업이다. 같은 문구를 고칠 때 양쪽 모두 확인할 것.
   ══════════════════════════════════════════════════════════════════════ */

/* MO GNB — Figma Rectangle 58 (0,0) 360x48, 반투명 하늘색 */
.cw-gnb--mo { background-color: rgba(125, 212, 240, .4); }
.cw-gnb--mo.is-solid { background-color: rgba(125, 212, 240, .94); }
.cw-gnb__menu {
  margin-left: auto;
  width: calc(24px * var(--cw-scale, 1));
  height: calc(24px * var(--cw-scale, 1));
  cursor: pointer;
}

/* ── MO KV  [123:5034] 360x648 ─────────────────────────────────────── */

.cw-mo-kv { height: 648px; background: rgb(125, 212, 240); }
.cw-mo-kv__scroll {
  left: 0; top: 570px; width: 100%; text-align: center;
  font-size: 12px; font-weight: 700; line-height: 1.2;
  color: rgb(89, 60, 46); white-space: nowrap;
}

/* ── MO 행사설명  [123:5195] 360x610 ───────────────────────────────── */

.cw-mo-intro { height: 610px; background: rgb(197, 237, 255); }
.cw-mo-intro__badge {
  left: 116px; top: 69px;                     /* (360-128)/2 */
  width: 128px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgb(0,0,0); border-radius: 19px;
  font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.cw-mo-intro__title { top: 115px; font-size: 36px; font-weight: 900; line-height: 1;   color: rgb(0,0,0); }
.cw-mo-intro__sub   { top: 211px; font-size: 24px; font-weight: 700; line-height: 1.2; color: rgb(82,81,88); white-space: nowrap; }
.cw-mo-intro__lead  { top: 280px; font-size: 16px; font-weight: 500; line-height: 1.5; color: rgb(82,81,88); }
.cw-mo-intro__body  { top: 376px; font-size: 16px; font-weight: 500; line-height: 1.5; color: rgb(82,81,88); }
.cw-mo-intro__date  { top: 512px; font-size: 18px; font-weight: 700; line-height: 1.5; color: rgb(0,0,0); white-space: nowrap; }

/* ── MO EVENT  [123:5566] 360x1028 ─────────────────────────────────── */

.cw-mo-ev { height: 1028px; background: rgb(186, 142, 222); }
.cw-mo-ev__title { left: 20px; top: 56px;  font-size: 48px; font-weight: 900; line-height: 1; color: rgb(88,59,45); white-space: nowrap; }
.cw-mo-ev__note  { left: 20px; top: 121px; font-size: 16px; font-weight: 500; line-height: 1; color: rgb(88,59,45); white-space: nowrap; }
.cw-mo-ev__rule  { left: 20px; top: 148px; width: 320px; height: 2px; background: rgb(88,59,45); }
.cw-mo-ev__step  {
  left: 120px; width: 120px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 30px; background: rgb(245,233,255);
  font-size: 20px; font-weight: 700; line-height: 1; color: rgb(186,142,222); white-space: nowrap;
}
.cw-mo-ev__txt { left: 0; width: 100%; text-align: center;
                 font-size: 16px; font-weight: 500; line-height: 1; color: rgb(245,233,255); }
.cw-mo-ev__txt.cw-pre { white-space: pre; }

/* ── MO FOOTER  [123:5588] 360x172 — 등장효과 없음 ─────────────────── */

.cw-mo-ft { height: 172px; background: rgb(18, 18, 18); }
.cw-mo-ft__logo { left: 16px; top: 24px; }
.cw-mo-ft__copy { left: 0; top: 138px; width: 298px; text-align: right;
                  font-size: 10px; font-weight: 500; line-height: 1; color: rgb(255,255,255); white-space: nowrap; }

/* ── MO PROGRAM  [123:5204] 360x2809 ───────────────────────────────── */

.cw-mo-prog { height: 2809px; background: rgb(243, 248, 245); }
.cw-mo-prog__title { left: 20px; top: 60px;  font-size: 48px; font-weight: 900; line-height: 1; color: rgb(0,0,0); white-space: nowrap; }
.cw-mo-prog__note  { left: 20px; top: 125px; font-size: 16px; font-weight: 500; line-height: 1; color: rgb(82,81,88); }
.cw-mo-prog__rule  { left: 20px; top: 173px; width: 320px; height: 2px; background: rgb(0,0,0); }

/* 카드 — 328x480, 세로로 504px 간격. 내부 오프셋은 5장 모두 동일하다. */
.cw-mo-card { left: 16px; width: 328px; height: 480px; border-radius: 24px; cursor: pointer; }
.cw-mo-card > * { position: absolute; }
.cw-mo-card__eyebrow { left: 16px; top: 56px;  font-size: 14px; font-weight: 500; line-height: 1; color: rgb(30,30,30); white-space: nowrap; }
.cw-mo-card__title   { left: 16px; top: 81px;  font-size: 32px; font-weight: 700; line-height: 1; color: rgb(0,0,0); white-space: pre; }
.cw-mo-card__desc    { left: 16px; top: 127px; font-size: 16px; font-weight: 500; line-height: 1.2; color: rgb(0,0,0); }
.cw-mo-card__rule    { left: 23px; width: 268px; height: 1px; background: rgb(30,30,30); }
.cw-mo-card__lbl     { left: 46px;  font-size: 16px; font-weight: 500; line-height: 1; color: rgb(30,30,30); white-space: nowrap; }
.cw-mo-card__val     { left: 107px; font-size: 16px; font-weight: 500; line-height: 1.2; color: rgb(0,0,0); white-space: nowrap; }
.cw-mo-card__val--stack { white-space: pre; }
.cw-mo-card .cw-more { left: 23px; top: 379px; height: 48px; font-size: 16px; padding: 0 18px; }
.cw-mo-card .cw-more svg { width: 18px; height: 18px; }

/* ── MO FESTIVAL MAP  [123:5513] 360x1551 ──────────────────────────────
   ⚠️ 지도 프레임이 **791px** 이라 360 캔버스를 넘는다 — 시안에도 "Swipe" 안내가 있다.
   328px 창에 넣고 가로 스크롤시킨다.
   ─────────────────────────────────────────────────────────────────── */

.cw-mo-map { height: 1551px; background: rgb(243, 248, 245); }
.cw-mo-map__title { left: 20px; top: 56px;  font-size: 48px; font-weight: 900; line-height: 1; color: rgb(0,0,0); white-space: pre; }
.cw-mo-map__note  { left: 20px; top: 178px; font-size: 16px; font-weight: 500; line-height: 1; color: rgb(82,81,88); white-space: nowrap; }
.cw-mo-map__rule  { left: 20px; top: 205px; width: 320px; height: 2px; background: rgb(82,81,88); }

.cw-mo-map__scroll {
  left: 16px; top: 233px; width: 328px; height: 453px;
  border: 2px solid rgb(120,150,190);
  border-radius: 16px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.cw-mo-map__inner { position: relative; width: 791px; height: 100%; overflow: hidden; }
.cw-mo-map__inner img { position: absolute; left: 0; top: -7.57%; width: 100%; height: 130.44%; max-width: none; }

.cw-mo-map__swipe { left: 266px; top: 700px; font-size: 16px; font-weight: 500; line-height: normal;
                    color: rgb(120,150,190); white-space: nowrap; }

.cw-mo-map__panel { left: 16px; width: 328px; background: rgb(173,235,255); border-radius: 16px; }
.cw-mo-map__cap2  { left: 43px; font-size: 26px; font-weight: 700; line-height: normal; white-space: nowrap; }
.cw-mo-map__item  { left: 43px; display: flex; align-items: center;
                    font-size: 20px; font-weight: 500; line-height: normal; color: rgb(0,0,0); white-space: nowrap; }

/* ── MO TIMETABLE  [123:5274] 360x1367 (09.15 기준) ────────────────────
   09.15 1367 / 09.16 1218 / 09.17 1490 — PC 와 같은 방식으로 패널을 전환한다.
   ─────────────────────────────────────────────────────────────────── */

.cw-mo-tt { height: 1367px; background: rgb(125, 212, 240); }
.cw-mo-tt__title { left: 20px; top: 56px;  font-size: 48px; font-weight: 900; line-height: 1; color: rgb(0,0,0); white-space: nowrap; }
.cw-mo-tt__note  { left: 20px; top: 121px; font-size: 16px; font-weight: 500; line-height: 1; color: rgb(82,81,88); white-space: nowrap; }
.cw-mo-tt__rule  { left: 20px; top: 150px; width: 320px; height: 2px; background: rgb(115,179,200); }

.cw-mo-tabs { left: 20px; top: 160px; display: flex; gap: 4px; }
.cw-mo-tab {
  position: relative; width: 104px; height: 32px;
  border-radius: 60px; background: rgb(134,194,213);
  font-size: 14px; font-weight: 700; line-height: 1; color: rgb(89,60,46);
  white-space: pre; display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color .2s ease;
}
.cw-mo-tab[aria-selected='true'] { background: rgb(255,245,60); }

.cw-mo-tt__time  { left: 23px; font-size: 16px; font-weight: 700; line-height: normal; color: rgb(0,0,0); white-space: nowrap; }
.cw-mo-tt__name  { left: 23px; font-size: 32px; font-weight: 900; line-height: normal; color: rgb(0,0,0); white-space: nowrap; }
.cw-mo-tt__desc  { left: 23px; font-size: 12px; font-weight: 500; line-height: normal; color: rgb(0,0,0); }
.cw-mo-tt__place { display: flex; gap: 4px; align-items: center;
                   font-size: 16px; font-weight: 500; line-height: normal; color: rgb(0,0,0); white-space: nowrap; }
.cw-mo-tt__place img { width: 13px; height: 16px; flex: none; }
.cw-mo-tt__bar   { width: 1px; background: rgb(115,179,200); }
.cw-mo-tt__cast  { font-size: 16px; font-weight: 700; line-height: normal; color: rgb(0,0,0); white-space: pre; }
.cw-mo-tt__row   { left: 20px; width: 320px; height: 1px; background: rgb(115,179,200); }
.cw-mo-tt__always     { left: 23px; font-size: 16px; font-weight: 700; line-height: normal; color: rgb(82,81,88); white-space: nowrap; }
.cw-mo-tt__name--soft { color: rgb(82,81,88); white-space: pre; }
.cw-mo-tt__place--soft { left: 23px; color: rgb(82,81,88); }
.cw-mo-tt__photo { overflow: hidden; }
.cw-mo-tt__photo img { position: absolute; max-width: none; }

.cw-live--xs { left: 24px; width: 134px; height: 24px; }
.cw-live--xs img { width: 134px; height: 24px; }

.cw-mo-tt__day { left: 0; top: 0; width: 100%; height: 100%; }
.cw-mo-tt__day > * { position: absolute; }
.cw-mo-tt__day[hidden] { display: none; }


/* ⚠️ 섹션을 꽉 채우는 **투명 컨테이너가 클릭을 가로채지 않도록** 한다.
   TIMETABLE 은 [헤더+탭 레이어] 와 [날짜 패널 레이어] 두 장이 겹쳐 있는데,
   패널 레이어가 DOM 상 뒤에 있어서 탭 위를 덮고 있었다.
   → elementFromPoint 가 탭 대신 .cw-tt__day 를 반환해서 날짜 버튼이 전혀 눌리지 않았다.

   컨테이너는 pointer-events: none, 실제 내용물만 auto 로 되돌린다.
   앞으로 전체 크기 레이어를 새로 추가할 때도 이 규칙을 따를 것. */

.cw-layer,
.cw-tt2__day,
.cw-mo-tt2__day { pointer-events: none; }

.cw-layer > *,
.cw-tt2__day > *,
.cw-mo-tt2__day > * { pointer-events: auto; }

/* ⚠️ 날짜 패널은 .cw-layer 의 직계 자식이라 바로 위 auto 규칙에 걸린다.
   명시도가 같아 뒤에 오는 auto 가 이기므로, 여기서 한 번 더 none 으로 되돌린다.
   (이 줄이 없으면 패널이 다시 탭을 덮어 버튼이 먹통이 된다) */
.cw-layer > .cw-tt2__day,
.cw-layer > .cw-mo-tt2__day { pointer-events: none; }

/* 패널 레이어는 헤더/탭 아래에 깔린다 (겹칠 경우 대비) */
.cw-tt2 > .cw-layer:last-of-type,
.cw-mo-tt2 > .cw-layer:last-of-type { z-index: 0; }


/* ── 모바일 메뉴 (햄버거) ──────────────────────────────────────────────
   ⚠️ 캔버스 **바깥**(body 직계)에 둔다 — transform 조상이 있으면 fixed 가 깨진다.
   크기는 GNB 와 같은 방식으로 var(--cw-scale) 을 곱해 캔버스 배율에 맞춘다.
   색은 KV 하늘색 + 갈색(#593c2e)으로, Scroll 큐·날짜 탭과 같은 조합이다.
   ─────────────────────────────────────────────────────────────────── */

.cw-gnb__menu {
  margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  width: calc(24px * var(--cw-scale, 1));
  height: calc(24px * var(--cw-scale, 1));
  cursor: pointer;
}
.cw-gnb__menu img { width: 100%; height: 100%; }

.cw-mo-nav {
  position: fixed; inset: 0; z-index: 90;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  background: rgb(125, 212, 240);
}
.cw-mo-nav.is-open { display: flex; }

.cw-mo-nav__close {
  position: absolute;
  top: calc(12px * var(--cw-scale, 1));
  right: calc(20px * var(--cw-scale, 1));
  width: calc(24px * var(--cw-scale, 1));
  height: calc(24px * var(--cw-scale, 1));
  color: rgb(89, 60, 46);
  cursor: pointer;
}
.cw-mo-nav__close svg { width: 100%; height: 100%; display: block; }

.cw-mo-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: calc(36px * var(--cw-scale, 1));
  text-align: center;
}
.cw-mo-nav__list a {
  display: block;
  padding: calc(4px * var(--cw-scale, 1)) calc(12px * var(--cw-scale, 1));
  font-size: calc(28px * var(--cw-scale, 1));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
  color: rgb(89, 60, 46);
  white-space: nowrap;
}
.cw-mo-nav__list a:active,
.cw-mo-nav__list a:hover { text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 3px; }

/* PC 모드에서는 메뉴가 열려 있어도 보이지 않게 (경계에서 폭이 바뀌는 경우 대비) */
html[data-cw-mode='pc'] .cw-mo-nav { display: none; }


/* ══════════════════════════════════════════════════════════════════════
   히어로(KV) 진입 연출
   ══════════════════════════════════════════════════════════════════════ */

/* KV 는 첫 화면이라 다른 섹션(52px)보다 이동폭을 줄여 과하지 않게 한다. */
.cw-kv [data-reveal='up'],
.cw-mo-kv [data-reveal='up'] { transform: translateY(28px); }

/* 히어로 연출 조절 노브 — 이 둘만 바꾸면 전체 리듬이 함께 움직인다.
     --cw-kv-dur  한 요소가 나타나는 시간 (다른 섹션은 .9s)
     --cw-kv-gap  요소 사이 간격. 각 요소의 --cw-kv-i(순번)에 곱해진다. */
.cw-kv,
.cw-mo-kv {
  --cw-kv-dur: 2s;
  --cw-kv-gap: .17s;
}

/* 전역 [data-reveal] 은 transition 단축 속성이라 delay 가 0 으로 초기화된다.
   여기서 longhand 로 덮어써야 순번 지연이 살아난다(이 규칙이 뒤에 와야 함). */
.cw-kv [data-reveal],
.cw-mo-kv [data-reveal] {
  transition-duration: var(--cw-kv-dur);
  transition-delay: calc(var(--cw-kv-i, 0) * var(--cw-kv-gap));
}

/* ── Scroll 셰브론 — 위→아래로 순차 점등 ───────────────────────────────
   Figma 에셋은 두 셰브론이 **하나의 path** 라 개별 제어가 안 된다.
   그래서 위/아래를 각각 path 로 나눠 인라인 SVG 로 넣고 지연을 달리 준다.
   ─────────────────────────────────────────────────────────────────── */

.cw-chev { display: block; color: rgb(255, 255, 255); overflow: visible; }
.cw-chev path {
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: cwChevPulse 1.6s ease-in-out infinite;
}
.cw-chev path:nth-of-type(1) { animation-delay: 0s; }      /* 위 */
.cw-chev path:nth-of-type(2) { animation-delay: .22s; }    /* 아래 */

@keyframes cwChevPulse {
  0%, 100% { opacity: .28; transform: translateY(0); }
  45%      { opacity: 1;   transform: translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .cw-chev path { animation: none; opacity: 1; }
}
/* ── MAP (9/1 시안)  [53:1588] 1920x1248 ────────────────────────────
   지도 1130x746 + 하단에 붙는 범례 박스 1130x142.
   스탬프 범례(A~D)는 지도 이미지 **위에** 얹힌다.
   ─────────────────────────────────────────────────────────────────── */

.cw-map2 { height: 1248px; background: rgb(243, 248, 245); }

.cw-map2__title { font-size: 56px; font-weight: 900; line-height: 1.2; color: rgb(0,0,0); }
.cw-map2__sub   { font-size: 28px; font-weight: 600; line-height: 1;   color: rgb(82,81,88); }

.cw-map2__box {
  width: 1130px; height: 746px;
  border: 2px solid rgb(218, 151, 87);   /* #da9757 — 9/8 개편에서 파랑 → 주황 */
  border-radius: 24px;
  overflow: hidden;
}
.cw-map2__box img { position: absolute; max-width: none; pointer-events: none; }

/* 범례 바탕 — 지도 박스 **안쪽** 아래에 깔린다.
   ⚠️ 형제 요소로 두면 박스와 좌표가 겹쳐 좌·우·아래 테두리를 덮어 버린다
   (시안에는 범례까지 테두리가 이어진다). 박스 안에 두면 테두리가 위에 남고
   모서리도 박스의 border-radius + overflow:hidden 이 잘라 준다. */
.cw-map2__legend {
  position: absolute;
  left: 0; right: 0; top: 602px; bottom: 0;
  background: rgb(218, 151, 87);   /* #da9757 */
}

.cw-map2__lbl { font-size: 26px; font-weight: 700; line-height: normal; white-space: nowrap; }
.cw-map2__lbl--main  { color: rgb(125, 59, 45); }     /* #7d3b2d */
.cw-map2__lbl--stamp { color: rgb(68, 170, 171); }    /* #44aaab */

.cw-map2__item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 20px; font-weight: 500; line-height: normal;
  color: rgb(0,0,0); white-space: nowrap;
}
/* 배지 20x20 원형 (모바일은 16x16) */
.cw-map2__b {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 12px; font-weight: 500; font-style: normal; line-height: 1;
  color: rgb(255,255,255);
}
.cw-map2__b--n { background: rgb(125, 59, 45); }   /* #7d3b2d */

/* PC 라벨만 ExtraBold — 모바일 시안은 Bold(700) 그대로다 */
.cw-map2 .cw-map2__lbl { font-weight: 800; }

/* 스탬프 투어 장소 — 원형 배지 대신 SPOT 알약 72x22 */
.cw-map2__item--spot { gap: 10px; }
.cw-map2__spot {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 22px;
  border-radius: 12px;
  background: rgb(68, 170, 171);
  font-size: 12px; font-weight: 500; font-style: normal; line-height: 1;
  color: rgb(255,255,255); white-space: nowrap;
}



/* ── EVENT (9/1 시안)  [53:1702] 1920x847 ──────────────────────────── */

.cw-ev2 { height: 845px; background: rgb(186, 142, 222); }   /* #ba8ede */

.cw-ev2__title { font-size: 56px; font-weight: 900; line-height: 1; color: rgb(88, 59, 45); }
.cw-ev2__sub   { font-size: 28px; font-weight: 600; line-height: 1; color: rgb(88, 59, 45); }

/* 안내 문구 — 9/5 개편에서 STEP 배지 3개가 없어지고 한 덩어리가 됐다.
   빈 줄이 하나 들어가므로 pre-line 로 개행을 그대로 살린다. */
.cw-ev2__body {
  font-size: 34px; font-weight: 500; line-height: 1.2;
  color: rgb(245, 233, 255); white-space: pre-line;
}

/* 굿즈 크롭 박스 — 원본을 좌우로 잘라 쓴다. 안쪽 img 좌표는 박스 기준 상대값. */
.cw-ev2__crop { overflow: hidden; }
.cw-ev2__crop img { position: absolute; max-width: none; }

/* 회전 장식 — 박스 안에서 가운데 정렬 후 회전(시안의 flex+rotate 구조).
   박스 크기와 각도(--cw-rot)는 장식마다 달라 인라인으로 준다. */
.cw-ev2__rot { display: flex; align-items: center; justify-content: center; }
.cw-ev2__rot img { transform: rotate(var(--cw-rot, 0deg)); }



/* ── Footer  [53:1724] 1920x242 ─────────────────────────────────────
   ⚠️ data-reveal 을 주지 말 것 — 디자이너 메모: "푸터는 등장효과 없이 고정".
   ─────────────────────────────────────────────────────────────────── */

.cw-ft2 { height: 242px; background: rgb(18, 18, 18); }

.cw-ft2__copy {
  font-size: 16px; font-weight: 400; line-height: 1.2;
  color: rgb(255, 255, 255);
  white-space: nowrap;
}


/* 팝업 내용 — 시안 53:6154 (520x360) */
.cw-pop--coming .cw-modal__title {
  position: absolute; left: 0; top: 87px; width: 100%;
  font-size: 48px; font-weight: 900; line-height: 1;
  color: rgb(132, 186, 229);   /* #84bae5 */
  text-align: center; white-space: nowrap;
}
.cw-pop--coming .cw-modal__desc {
  position: absolute; left: 0; top: 156px; width: 100%;
  font-size: 28px; font-weight: 500; line-height: 1.3;
  color: rgb(0,0,0); text-align: center;
}
.cw-pop--coming .cw-modal__ok {
  position: absolute; left: 0; bottom: 0; width: 520px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  background: rgb(125, 212, 240);
  font-size: 32px; font-weight: 500; line-height: 1;
  color: rgb(255,255,255);
}


/* ── MO KV / 행사설명 / Footer (9/1 시안) ─────────────────────────── */

.cw-mo-kv { height: 648px; background: rgb(125, 212, 240); }
.cw-mo-kv__scroll {
  width: 100%; text-align: center;
  font-size: 14px; font-weight: 700; line-height: 1;
  color: rgb(255, 255, 255); white-space: nowrap;
}

.cw-mo-intro { height: 610px; background: rgb(197, 237, 255); }
.cw-mo-intro__h1   { font-size: 36px; font-weight: 900; line-height: 1;   color: rgb(0,0,0); }
.cw-mo-intro__h2   { font-size: 24px; font-weight: 700; line-height: 1.2; color: rgb(82,81,88); }
.cw-mo-intro__body { font-size: 16px; font-weight: 500; line-height: 1.5; color: rgb(82,81,88); }
.cw-mo-intro__date { font-size: 18px; font-weight: 700; line-height: 1.5; color: rgb(0,0,0); }

/* ⚠️ 푸터에는 data-reveal 을 주지 않는다 (디자이너 메모: 등장효과 없이 고정) */
.cw-mo-ft2 { height: 172px; background: rgb(18, 18, 18); }
.cw-mo-ft2__copy { font-size: 10px; font-weight: 400; line-height: 1.2; color: rgb(255,255,255); }


/* ── MO TIMETABLE (9/1 시안 · 카드 리스트)  [53:4045/53:5556/53:4749] ──
   카드 320x120(상시 320x100), 좌측 원형 사진 88, 텍스트는 우측 정렬.
   ─────────────────────────────────────────────────────────────────── */

.cw-mo-tt2 { background: rgb(243, 248, 245); }
.cw-mo-tt2__title { font-size: 28px; font-weight: 900; line-height: 1.2; color: rgb(0,0,0); }
.cw-mo-tt2__sub   { font-size: 13px; font-weight: 500; line-height: 1.4; color: rgb(82,81,88); }

/* 날짜 탭 — 320px 안에 3개 균등 */
.cw-mo-tt2__tabs { display: flex; gap: 8px; width: 320px; }
.cw-mtab {
  flex: 1; height: 32px;
  border-radius: 60px;
  background: rgb(221, 221, 221);
  font-size: 12px; font-weight: 700; line-height: 1;
  color: rgb(89, 60, 46);
  white-space: pre;
  transition: background-color .2s ease;
}
.cw-mtab[aria-selected='true'] { background: rgb(255, 245, 60); }

.cw-mo-tt2__day { left: 0; top: 0; width: 100%; height: 100%; }
.cw-mo-tt2__day > * { position: absolute; }

.cw-mtc {
  width: 320px; height: 120px;
  background: rgb(255,255,255);
  border-radius: 13px;
  box-shadow: 0 0 10.876px 0 rgba(0,0,0,.05);
}
.cw-mtc--always { height: 100px; }
.cw-mtc > * { position: absolute; }

.cw-mtc__ph   { width: 88px; height: 88px; border-radius: 50%; }
.cw-mtc__name { font-size: 20px; font-weight: 700; line-height: normal; letter-spacing: -.4px;  color: rgb(0,0,0); white-space: nowrap; }
.cw-mtc__cast { font-size: 14px; font-weight: 700; line-height: normal; letter-spacing: -.28px; color: rgb(0,0,0); white-space: nowrap; }

/* 장소 + 시간 한 줄 (우측 정렬) */
.cw-mtc__meta  { display: inline-flex; align-items: center; gap: 4px; height: 12px; white-space: nowrap; }
.cw-mtc__place { display: inline-flex; align-items: center; gap: 1px; font-size: 10px; font-weight: 400; letter-spacing: -.2px; color: rgb(0,0,0); }
.cw-mtc__pin   { width: 12px; height: 12px; flex: none; color: rgb(0,0,0); }
.cw-mtc__time  { font-size: 10px; font-weight: 700; letter-spacing: -.2px; color: rgb(0,0,0); }

/* LIVE 배지 (오픈 전 OFF = 회색) */
.cw-mtc__live {
  display: inline-flex; align-items: center; justify-content: center;
  width: 80px; height: 18px; border-radius: 16px;
  background: rgb(212,212,212);
  font-size: 8px; font-weight: 700; line-height: 1; color: rgb(255,255,255); white-space: nowrap;
}

/* 참가신청 버튼 90x24 / radius 38 / #7dd4f0 */
.cw-mtc__apply {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 90px; height: 24px; border-radius: 38px;
  background: rgb(125, 212, 240);
  font-size: 12px; font-weight: 400; line-height: 1; color: rgb(255,255,255); white-space: nowrap;
}
.cw-mtc__apply svg { width: 8px; height: 7px; }


/* ── MO EVENT  [53:4611] 360x984 ────────────────────────────────────── */

.cw-mo-ev2 { height: 787px; background: rgb(186, 142, 222); }
.cw-mo-ev2__title { font-size: 28px; font-weight: 900; line-height: 1; color: rgb(88, 59, 45); }
.cw-mo-ev2__sub   { font-size: 16px; font-weight: 500; line-height: 1; color: rgb(88, 59, 45); }

.cw-mo-ev2__goods { object-fit: cover; }

/* 안내 문구 — 18px, 행 간격은 시안 스크린샷 실측값 21px 로 고정한다.
   (Figma 가 보고하는 텍스트 노드 높이 121 은 폰트 여백이 섞인 값이라 그대로 쓰면 안 된다) */
.cw-mo-ev2__body {
  font-size: 18px; font-weight: 500; line-height: 21px;
  color: rgb(245, 233, 255); white-space: pre-line;
}


/* ── MO MAP  [53:4556] 360x1148 ─────────────────────────────────────
   지도가 791px 라 화면(360)보다 넓다 → 가로 스크롤 컨테이너로 감싼다.
   ─────────────────────────────────────────────────────────────────── */

.cw-mo-map2 { height: 1148px; background: rgb(243, 248, 245); }
.cw-mo-map2__title { font-size: 28px; font-weight: 700; line-height: 1;  color: rgb(18,18,18); }
.cw-mo-map2__sub   { font-size: 16px; font-weight: 500; line-height: 24px; color: rgba(0,0,0,.8); }

.cw-mo-map2__scroll {
  width: 328px; height: 453px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
}
.cw-mo-map2__box {
  position: relative;
  width: 791px; height: 453px;
  border: 2px solid rgb(218, 151, 87);   /* #da9757 */
  border-radius: 16px;
  overflow: hidden;
}
.cw-mo-map2__box img { position: absolute; max-width: none; pointer-events: none; }

.cw-mo-map2__swipe {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 16px; font-weight: 500; line-height: 1;
  color: rgb(218, 151, 87); white-space: nowrap;
}
.cw-mo-map2__swipe svg { width: 16px; height: 16px; }

/* 범례 패널 — 9/8 개편에서 두 패널의 배경색이 서로 달라졌다 */
.cw-mo-map2__panel { width: 328px; border-radius: 16px; }
.cw-mo-map2__panel--stamp { background: rgb(255, 229, 118); }   /* #ffe576 */
.cw-mo-map2__panel--main  { background: rgb(218, 151, 87); }    /* #da9757 */

/* 스탬프 투어 장소 — 원형 배지 대신 SPOT 알약 50x16 */
.cw-mo-map2__spot {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 16px;
  border-radius: 12px;
  background: rgb(68, 170, 171);
  font-size: 10px; font-weight: 500; font-style: normal; line-height: 1;
  color: rgb(255,255,255); white-space: nowrap;
}

.cw-mo-map2__item {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500; line-height: normal;
  color: rgb(0,0,0); white-space: nowrap;
}
.cw-mo-map2__item .cw-map2__b { width: 16px; height: 16px; font-size: 10px; }


/* ── MO PROGRAM  [53:4465] 360x578 ──────────────────────────────────
   카드 294x240 을 가로 스크롤로 넘긴다 (다음 카드가 살짝 보인다).
   ⚠️ 화살표는 컴포넌트 인스턴스라 메타데이터 좌표를 믿을 수 없다 —
      시안 렌더 실측값 (30,176) 을 쓴다.
   ─────────────────────────────────────────────────────────────────── */

.cw-mo-prog2 { height: 578px; background: rgb(125, 212, 240); }
.cw-mo-prog2__title { font-size: 28px; font-weight: 900; line-height: 1.2; color: rgb(0,0,0); }
.cw-mo-prog2__sub   { font-size: 15px; font-weight: 500; line-height: 1.6; color: rgb(82,81,88); white-space: pre-line; }

.cw-mo-prog2__notice {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 320px; height: 50px;
  border-radius: 12px;
  background: rgb(166, 233, 255);
  font-size: 11px; font-weight: 500; line-height: 1.5;
  color: rgb(0,0,0); text-align: center;
}
.cw-mo-prog2__notice b { font-weight: 700; }

.cw-mo-prog2__scroll {
  width: 340px; height: 250px;          /* 다음 카드가 살짝 보이도록 */
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.cw-mo-prog2__track { position: relative; width: 1550px; height: 240px; }

.cw-mo-pc {
  position: absolute; top: 0;
  width: 294px; height: 240px;
  background: rgb(255,255,255);
  border-radius: 24px;
  box-shadow: 0 4px 4px 0 rgba(0,0,0,.12);
  cursor: pointer;
  overflow: hidden;
}
.cw-mo-pc > * { position: absolute; }
.cw-mo-pc__name  { font-size: 24px; font-weight: 700; line-height: 1; color: rgb(0,0,0); white-space: nowrap; }
.cw-mo-pc__name.cw-pre { white-space: pre-line; line-height: 1.2; }
.cw-mo-pc__place {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 16px; font-weight: 400; line-height: 1.5;
  color: rgb(0,0,0); white-space: nowrap;
}
.cw-mo-pc__ill { pointer-events: none; }


/* ── 팝업 패널 공통 ─────────────────────────────────────────────────
   각 패널은 시안 크기를 그대로 유지하고 --cw-modal-scale 로만 줄인다.
   ─────────────────────────────────────────────────────────────────── */

.cw-pop { position: relative; }
.cw-pop > * { position: absolute; }
.cw-pop--coming { width: 520px; height: 360px; background: rgb(255,255,255); }

/* 닫기 X — 시안에는 없지만 터치 환경에서 ESC 를 못 쓰므로 추가했다. */
.cw-pop__x {
  right: 20px; top: 20px; width: 32px; height: 32px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .18);
  color: rgb(255, 255, 255);
  cursor: pointer;
}
.cw-pop__x svg { width: 18px; height: 18px; }

/* 시안에서 맨 마지막에 그려지는 장식 — 카드보다 위에 올린다.
   (모바일 SP TECH TALK 의 구름이 카드 모서리에 가려져 있었다.
   .cw-pop__x 가 z-index 2 라 그 아래인 1 을 쓴다.) */
.cw-pop__over { z-index: 1; }
.cw-pop--coming .cw-pop__x { display: none; }

.cw-pop__eyebrow { font-size: 20px; font-weight: 700; line-height: 1; white-space: nowrap; }
.cw-pop__desc {
  left: 0; width: 100%; text-align: center;
  font-size: 20px; font-weight: 500; line-height: 28px; white-space: pre-line;
}
.cw-pop__loc {
  left: 0; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.cw-pop__pin { width: 16px; height: 16px; flex: none; }

/* 카카오 안내 배지 — 시안 422x36 / #fff53c / 1px #583b2d / radius 8 */
.cw-pop__kakao {
  display: flex; align-items: center; justify-content: center;
  width: 422px; height: 36px;
  border: 1px solid rgb(88, 59, 45);
  border-radius: 8px;
  background: rgb(255, 245, 60);
  font-size: 16px; font-weight: 500; line-height: 1.2;
  color: rgb(88, 59, 45); white-space: nowrap;
}

/* ── SP TECH TALK 팝업 [75:4295] ──────────────────────────────────── */

.cw-pop--tt { width: 812px; height: 940px; background: rgb(159, 151, 255); }

.cw-pop__card {
  width: 275px; height: 430px;
  background: rgb(255, 255, 255);
  border-radius: 16px;
}
.cw-pop__card > * { position: absolute; }

/* 이름 + 소속 (두 줄, 가운데) */
.cw-pop__who {
  left: 0; width: 100%; text-align: center;
  color: rgb(92, 57, 43); font-weight: 700;
  font-size: 20px; line-height: 1.4;
}
.cw-pop__who b { display: block; font-size: 28px; font-weight: 700; line-height: 1.4; }

/* 사진 크롭 박스 — position:relative 필수(안쪽 absolute 이미지의 기준) */
.cw-pop__ph { position: absolute; overflow: hidden; }
.cw-pop__ph img { position: absolute; max-width: none; }
.cw-pop__ph--plain { object-fit: cover; }

/* 날짜 알약 247x64 / #5c392b / radius 32 */
.cw-pop__when {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 247px; height: 64px;
  border-radius: 32px;
  background: rgb(92, 57, 43);
  color: rgb(255, 255, 255);
  font-size: 16px; font-weight: 500; line-height: 1.2; white-space: nowrap;
}
.cw-pop__when b { font-size: 20px; font-weight: 700; line-height: 1.2; }


/* ── SP AI PLAYGROUND 팝업 [75:4466] ──────────────────────────────── */

.cw-pop--ai { width: 812px; height: 940px; background: rgb(183, 206, 233); }

/* 프로그램 카드 200x260 — 상단 42px 핑크 헤더 + 설명 + 원형 사진 120
   (9/5 시안. 9/4 의 179.953x245 / 헤더 36 / 설명 14px 에서 또 한 단계 커졌다) */
.cw-pop__ac {
  position: absolute;
  width: 200px; height: 260px;
  background: rgb(255, 255, 255);
  border-radius: 20px;
}
.cw-pop__ac > * { position: absolute; }

.cw-pop__ac-head {
  left: 0; top: 0; width: 200px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px 20px 0 0;
  background: rgb(223, 87, 147);
  font-size: 18px; font-weight: 700; line-height: normal;
  color: rgb(255, 255, 255); text-align: center; white-space: nowrap;
}
/* 설명은 두 톤이다 — 마지막 줄만 Bold */
.cw-pop__ac-desc {
  left: 0; width: 100%; text-align: center;
  font-size: 16px; font-weight: 400; line-height: 1.2;
  color: rgb(88, 59, 45);
}
.cw-pop__ac-desc b { font-weight: 700; }

/* 원형 사진 — 시안은 마스크지만 여기서는 원형 크롭 박스로 만든다.
   지름이 카드마다 다르고(108 / 115.996) 안쪽 이미지 좌표는 **원 기준 상대값**
   (시안 mask-position 을 역산한 값)이라 둘 다 인라인으로 준다. */
.cw-pop__ac-ph {
  border-radius: 50%;
  overflow: hidden;
}
.cw-pop__ac-ph img { position: absolute; max-width: none; object-fit: cover; }


/* ── SP CONCERT 팝업 [75:5270] ────────────────────────────────────── */

.cw-pop--co { width: 812px; height: 940px; background: rgb(255, 229, 0); }

.cw-pop__co-box { width: 217px; background: rgb(255,255,255); border-radius: 20px; }
.cw-pop__co-head {
  width: 217px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px 20px 0 0;
  background: rgb(255, 81, 52);
  font-size: 14px; font-weight: 700; line-height: normal;
  color: rgb(255,255,255); white-space: nowrap;
}

/* 원형 사진 — export 가 원형까지 렌더해 오므로 그대로 얹는다 */
.cw-pop__co-ph { border-radius: 50%; }

.cw-pop__co-name { font-size: 14px; font-weight: 700; line-height: normal; letter-spacing: -.28px; color: rgb(0,0,0); white-space: pre-line; }
.cw-pop__co-day  { font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: -.24px; color: rgb(0,0,0); white-space: nowrap; }
.cw-pop__co-time { font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: -.24px; color: rgb(0,0,0); white-space: nowrap; }

/* 카드 안 구분선 */
.cw-pop__co-hline { width: 193px; height: 1px; background: rgba(0,0,0,.12); }
.cw-pop__co-vline { width: 1px; height: 115px; background: rgba(0,0,0,.12); }

/* 버스킹 스케줄 행 */
.cw-pop__co-who  { width: 100px; text-align: center; font-size: 12px; font-weight: 700; line-height: normal; color: rgb(0,0,0); white-space: nowrap; }
.cw-pop__co-when { font-size: 12px; font-weight: 400; line-height: normal; color: rgb(0,0,0); white-space: nowrap; }

/* ⚠️ 좌우 반전 장식에 scaleX(-1) 을 걸지 말 것.
   시안 노드에 flip 이 걸려 있어도 download_assets 의 export 는 **이미 반전된 상태**로
   나온다. CSS 로 한 번 더 뒤집으면 원래대로 돌아가 좌우가 바뀐다.
   (SP Concert 해·SP Food Zone 음료 장식이 실제로 뒤집혀 있었다) */


/* ── SP FOOD ZONE 팝업 [75:4570] ──────────────────────────────────── */

.cw-pop--fz { width: 812px; height: 940px; background: rgb(251, 151, 55); }

.cw-pop__fz-col  { width: 217px; background: rgb(255,255,255); border-radius: 20px; }
.cw-pop__fz-head {
  width: 217px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px 20px 0 0;
  font-size: 20px; font-weight: 700; line-height: normal;
  color: rgb(88, 59, 45); white-space: nowrap;
}

/* 메뉴 알약 — 안쪽에 흰 파선 테두리가 한 겹 더 있다.
   ⚠️ 글자색은 흰색이 아니라 갈색이다(9/4 시안에서 바뀌었다). */
.cw-pop__fz-pill {
  position: absolute;
  width: 188.445px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 142.651px;
  background: rgb(56, 210, 171);
  color: rgb(88, 59, 45);
}
.cw-pop__fz-dash {
  position: absolute; inset: 5px 5px;
  border: 1.337px dashed rgb(255,255,255);
  border-radius: 142.651px;
  pointer-events: none;
}
.cw-pop__fz-pill em {
  position: relative; font-style: normal;
  font-size: 14.589px; font-weight: 700; line-height: normal;
  text-align: center; white-space: pre-line;
}
.cw-pop__fz-pill em i { display: block; font-style: normal; font-size: 12px; font-weight: 500; }

/* 열마다 알약 색이 다르다 */
/* 열마다 알약 색이 다르다 — left 좌표로 구분한다(1열 79 / 2열 312·313 / 3열 545). */
.cw-pop--fz .cw-pop__fz-pill[style*='left:79px']  { background: rgb(56, 210, 171); }
.cw-pop--fz .cw-pop__fz-pill[style*='left:312px'],
.cw-pop--fz .cw-pop__fz-pill[style*='left:313px'] { background: rgb(255, 189, 66); }
.cw-pop--fz .cw-pop__fz-pill[style*='left:545px'] { background: rgb(72, 229, 64); }

/* ── LG BRAND BOOTH 팝업 [75:5092] ────────────────────────────────── */

.cw-pop--bb { width: 812px; height: 940px; background: rgb(249, 246, 239); }

/* 카드 566x240 / radius 20 — 라이프집(노랑) · 비채(사진) */
.cw-pop__bb-card { width: 566px; height: 240px; border-radius: 20px; }
.cw-pop__bb-card--y { background: rgb(255, 234, 130); }
.cw-pop__bb-img { width: 566px; height: 240px; border-radius: 20px; object-fit: cover; }

.cw-pop__bb-t1 {
  left: 0; width: 100%; text-align: center;
  font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -.72px;
  color: rgb(0,0,0); white-space: pre-line;
}
.cw-pop__bb-t2 {
  left: 0; width: 100%; text-align: center;
  font-size: 14px; font-weight: 500; line-height: 1.4;
  color: rgb(0,0,0); white-space: pre-line;
}
.cw-pop__bb-t2 b { font-weight: 700; }

/* 비채 카드 위 우측 정렬 텍스트 — 오른쪽 끝이 x=406 에 고정된다 */
.cw-pop__bb-r1 {
  text-align: right; font-size: 20px; font-weight: 400; line-height: 1.2;
  color: rgb(255,255,255); white-space: pre-line;
}
.cw-pop__bb-r2 {
  text-align: right; font-size: 16px; font-weight: 500; line-height: 1.3;
  color: rgb(255,255,255); white-space: pre-line;
}
.cw-pop__bb-r1 b, .cw-pop__bb-r2 b { font-weight: 700; }


/* ══ 모바일 전용 팝업 (320 폭 시안) ═══════════════════════════════════
   PC 팝업(812x940)을 390px 화면에 넣으면 배율 0.44 라 12px 글씨가 5px 이 된다.
   그래서 시안에 **모바일 전용 320 폭 팝업**이 따로 있다.
   같은 data-cw-pop 이름에 data-cw-pop-mode="mo" 를 달면 js/main.js 의
   pickPanel() 이 화면 모드에 맞는 쪽을 고른다. data-fit="mo" 는 폭만 맞추고
   (배율 = clientWidth/360, 모바일 캔버스와 동일) 세로는 오버레이가 스크롤한다.
   ═══════════════════════════════════════════════════════════════════ */

.cw-pop--mo { width: 320px; border-radius: 40px; }

/* 시안의 닫기 X 는 원형 배경 없이 16x16 이다. 탭 영역만 32 로 넓혔다. */
.cw-pop--mo .cw-pop__x {
  right: 23px; top: 23px; width: 32px; height: 32px;
  background: none; border-radius: 0;
}
.cw-pop--mo .cw-pop__x svg { width: 16px; height: 16px; }

.cw-pop--mo .cw-pop__desc { font-size: 14px; line-height: 20px; }
.cw-pop--mo .cw-pop__loc  { font-size: 12px; }

/* ── SP TECH TALK (모바일)  [89:9484] 320x1091 ─────────────────────── */

.cw-pop--mtt { height: 1091px; background: rgb(159, 151, 255); }

/* 카카오 안내 — 모바일은 252x68 두 줄 (PC 는 422x36 한 줄) */
.cw-pop__mkakao {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 252px; height: 68px;
  border: 1px solid rgb(88, 59, 45);
  border-radius: 8px;
  background: rgb(255, 245, 60);
  font-size: 16px; font-weight: 500; line-height: 1.2;
  color: rgb(88, 59, 45); white-space: pre-line;
}

/* ── SP CONCERT (모바일)  [89:9049] 320x1793 ───────────────────────
   PC 팝업과 카드 규격(217x288/140/165, 헤더 36, 원형 90/71)이 같아서
   .cw-pop__co-* 를 그대로 쓴다. 카드를 가로로 늘어놓는 대신 세로로 쌓았다. */

.cw-pop--mco { height: 1793px; background: rgb(255, 229, 0); }

/* '사팍에도 메탈사운드를' 만 12px 로는 100px 박스를 넘겨서 시안이 11px 로 줄였다 */
.cw-pop__co-who--sm { font-size: 11px; letter-spacing: -.55px; }

/* ── SP AI PLAYGROUND (모바일)  [89:9645] 320x1586 ───────────────────
   PC 는 156x245 카드 5장을 2행으로 깔지만, 모바일은 239.935x245 로 넓혀
   세로로 쌓는다. 사진은 시안의 마스크를 원형 크롭 박스로 바꿨고, 안쪽
   이미지 좌표는 **원 기준 상대값**(시안 mask-position 을 역산). */

.cw-pop--mai { height: 1586px; background: rgb(183, 206, 233); }

.cw-pop__mac {
  position: absolute;
  width: 239.935px; height: 245px;
  background: rgb(255, 255, 255);
  border-radius: 20px;
}
.cw-pop__mac > * { position: absolute; }
.cw-pop__mac-head {
  left: 0; top: 0; width: 239.935px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px 20px 0 0;
  background: rgb(223, 87, 147);
  font-size: 16px; font-weight: 700; line-height: normal;
  color: rgb(255, 255, 255); text-align: center; white-space: nowrap;
}
.cw-pop__mac-desc {
  left: 0; width: 100%; text-align: center;
  font-size: 14px; font-weight: 500; line-height: 1.2;
  color: rgb(88, 59, 45);
}
.cw-pop__mac-ph { border-radius: 50%; overflow: hidden; }
.cw-pop__mac-ph img { position: absolute; max-width: none; object-fit: cover; }

/* ── SP FOOD ZONE (모바일)  [89:9750] 320x1527 ───────────────────────
   PC 는 3열 나란히, 모바일은 세로로 쌓는다. 알약(188.445 폭)과 안쪽 흰 파선은
   PC 와 같은 .cw-pop__fz-pill 을 쓰지만 **글자색이 흰색이 아니라 갈색**이다.
   ⚠️ 메뉴 구성이 PC 팝업(75:4570)과 다르다 — CJ 3종(PC 4종), 풀무원 6종 전부 다른 품목. */

.cw-pop--mfz { height: 1527px; background: rgb(251, 151, 55); }

.cw-pop__mfz-col { width: 217px; background: rgb(255,255,255); border-radius: 20px; }
.cw-pop__mfz-head {
  width: 217px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 20px 20px 0 0;
  font-size: 20px; font-weight: 700; line-height: normal;
  color: rgb(88, 59, 45); white-space: nowrap;
}

.cw-pop__fz-dash--6 { inset: 6px; }
.cw-pop__fz-pill--15 em { font-size: 15px; }

/* 알약 색은 열마다 다르다 — 모바일은 left 로 구분한다(CJ 66 / 아워홈 67 / 풀무원 65) */
.cw-pop--mfz .cw-pop__fz-pill[style*='left:66px'] { background: rgb(56, 210, 171); }
.cw-pop--mfz .cw-pop__fz-pill[style*='left:67px'] { background: rgb(255, 189, 66); }
.cw-pop--mfz .cw-pop__fz-pill[style*='left:65px'] { background: rgb(72, 229, 64); }

/* ── LG BRAND BOOTH (모바일)  [89:9390] 320x1095 ─────────────────────
   PC 는 566x240 카드 2장을 위아래로, 모바일은 256 폭으로 좁히고 본문을
   더 잘게 줄바꿈한다(라이프집 5줄 / 6줄). 비채 카드는 **검정 카드 위에
   같은 원본 사진을 두 번 크롭**해 얹는다 — 위쪽 110x27 은 비채 로고,
   아래 256x240 은 채소. 사진에 박혀 있는 로고는 검정 사각형으로 가린다. */

.cw-pop--mbb { height: 1095px; background: rgb(249, 246, 239); }

.cw-pop__mbb-y { left: 32px; width: 256px; height: 397px; border-radius: 20px; background: rgb(255, 234, 130); }
.cw-pop__mbb-k { left: 32px; width: 256px; height: 385px; border-radius: 20px; background: rgb(0, 0, 0); }
.cw-pop__mbb-mask { background: rgb(0, 0, 0); }

/* 크롭 박스 — .cw-pop > * 가 absolute 라 컨테이닝 블록이 자기 자신이 된다 */
.cw-pop__mbb-crop { border-radius: 20px; overflow: hidden; }
.cw-pop__mbb-crop img { position: absolute; max-width: none; }

.cw-pop--mbb .cw-pop__bb-t1 { font-size: 16px; line-height: 1.6; letter-spacing: -.16px; }
.cw-pop--mbb .cw-pop__bb-t2 { font-size: 12px; line-height: 1.6; }

/* 비채 카드 위 흰 글씨 — PC 는 우측 정렬, 모바일은 가운데 정렬이다 */
.cw-pop__bb-c1 {
  left: 0; width: 100%; text-align: center;
  font-size: 16px; font-weight: 400; line-height: 1.2;
  color: rgb(255,255,255); white-space: pre-line;
}
.cw-pop__bb-c2 {
  left: 0; width: 100%; text-align: center;
  font-size: 12px; font-weight: 500; line-height: 1.6;
  color: rgb(255,255,255); white-space: pre-line;
}
.cw-pop__bb-c1 b, .cw-pop__bb-c2 b { font-weight: 700; }

/* 닫기 X 색 — 시안 실측. 밝은 배경(노랑·하늘·크림)에서는 검정이다. */
.cw-pop--mco .cw-pop__x,
.cw-pop--mai .cw-pop__x,
.cw-pop--mbb .cw-pop__x { color: rgb(0, 0, 0); }

/* ── SP CONCERT (PC) 9/5 개편 ─────────────────────────────────────────
   글자가 한 단계씩 커지고(이름 14→16 / 날짜·시간 12→14 / 헤더 14→16),
   버스킹 카드는 높이 165→197, 행 간격 24→30, 폭이 열마다 달라졌다.
   모바일 팝업(.cw-pop--mco)은 예전 크기 그대로라 PC 에만 스코프를 건다. */

.cw-pop--co .cw-pop__co-head { font-size: 16px; }
.cw-pop--co .cw-pop__co-name { font-size: 16px; letter-spacing: -.32px; }
.cw-pop--co .cw-pop__co-day,
.cw-pop--co .cw-pop__co-time { font-size: 14px; letter-spacing: -.28px; }

.cw-pop--co .cw-pop__co-vline { height: 144px; }
.cw-pop--co .cw-pop__co-who  { width: 120px; font-size: 14px; }
.cw-pop--co .cw-pop__co-when { font-size: 14px; letter-spacing: -.7px; }
/* DAY 1 만 시간도 가운데 정렬이다(2·3 은 왼쪽 정렬) */
.cw-pop--co .cw-pop__co-when--c { width: 120px; text-align: center; }