/* ══════════════════════════════════════════════════════════════════════
   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 / #593c2e / 가운데 정렬 */
.cw-kv__scroll {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: rgb(89, 60, 46);
}

/* 아직 내려받지 못한 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 123:4404] 1920x920 ───────────────────── */

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

.cw-intro__badge {
  left: 896px; top: 157px;                    /* (1920-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-intro__title  { top: 203px; font-size: 64px; font-weight: 900; line-height: 1.2; color: rgb(0,0,0); white-space: nowrap; }
.cw-intro__sub    { top: 296px; font-size: 36px; font-weight: 700; line-height: 1.2; color: rgb(82,81,88); white-space: nowrap; }
.cw-intro__lead   { top: 411px; font-size: 28px; font-weight: 500; line-height: 1.5; color: rgb(82,81,88); }
.cw-intro__body   { top: 519px; font-size: 28px; font-weight: 500; line-height: 1.5; color: rgb(82,81,88); }
.cw-intro__date   { top: 717px; font-size: 30px; font-weight: 700; line-height: 1.5; color: rgb(0,0,0); white-space: nowrap; }


/* ── PROGRAM  [Figma 123:4414] 1920x1089 ──────────────────────────── */

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

.cw-prog__title { left: 280px; top: 100px; font-size: 100px; font-weight: 900; line-height: 1; color: rgb(0,0,0); white-space: nowrap; }
/* 우측 정렬 — Figma 는 left 1640 + translateX(-100%). 오른쪽 끝을 1640 에 고정한다. */
.cw-prog__note  { left: 280px; top: 127px; width: 1360px; text-align: right;
                  font-size: 28px; font-weight: 600; line-height: 1; color: rgb(82,81,88); }
.cw-prog__rule  { left: 280px; top: 220px; width: 1360px; height: 2px; background: rgb(0,0,0); }

/* 카드 */
.cw-card {
  width: 360px; height: 540px;
  border-radius: 24px;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.cw-card:hover { transform: translateY(-10px); box-shadow: 0 18px 38px rgba(0,0,0,.18); }
.cw-card > * { position: absolute; }

.cw-card__eyebrow { left: 32px; top: 74px;  width: 295px; font-size: 16px; font-weight: 500; line-height: 1; }
/* white-space: pre — 시안의 개행만 살리고 자동 줄바꿈은 막는다.
   pre-line 으로 두면 'SP AI PLAYGROUND'(32px) 가 폭에 걸려 2줄로 접히고 설명과 겹친다. */
.cw-card__title   { left: 32px; top: 101px; font-size: 36px; font-weight: 700; line-height: 1;
                    color: rgb(0,0,0); white-space: pre; }
.cw-card__desc    { left: 32px; top: 151px; width: 295px; font-size: 16px; font-weight: 500; line-height: 1.2; color: rgb(0,0,0); }

/* 참여 안내 문구 — 첫 구분선 바로 위. 시안(123:4419)에는 없고 이후 추가 요청된 내용.
   본문(16px 검정)보다 작고 옅은 보조 텍스트로, 프로젝트 공통 보조색 #525158 을 쓴다. */
/* ⚠️ 실측 293px 인데 카드 콘텐츠 폭이 296px 라 여유가 3px 뿐이다.
   폭을 고정하면 서브픽셀 반올림으로 두 줄이 되어 구분선을 침범한다(13px 에서 -10.8px 확인).
   → 폭을 주지 않고 nowrap 으로 한 줄을 보장한다. 카드(360/328) 안에는 충분히 들어간다. */
.cw-card__note {
    left : 32px;
    top: 283px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: rgb(82, 81, 88);
    white-space: nowrap;
    width: 100%;
    text-align: left;
}
.cw-mo-card__note {
    top: 220px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: rgb(82, 81, 88);
    white-space: nowrap;
    width: 100%;
    text-align: left;
    left : 20px;
}

/* 구분선 3줄 + 장소/시간 — 윗줄 카드(a) 와 아랫줄 카드(b) 가 3px 어긋나 있다(시안 그대로) */
.cw-card__rule  { left: 33px; width: 293.333px; height: 1px; background: rgb(30,30,30); }
.cw-card__lbl   { left: 50px;  font-size: 20px; font-weight: 500; line-height: 1; color: rgb(30,30,30); white-space: nowrap; }
.cw-card__val   { left: 100px; font-size: 20px; font-weight: 700; line-height: 1.2; color: rgb(0,0,0); white-space: nowrap; }

.cw-card--a .cw-card__rule:nth-of-type(1) { top: 329px; }
.cw-card--a .cw-card__rule:nth-of-type(2) { top: 377px; }
.cw-card--a .cw-card__rule:nth-of-type(3) { top: 425px; }
.cw-card--a .cw-card__lbl--place { top: 341px; }
.cw-card--a .cw-card__val--place { top: 341px; }
.cw-card--a .cw-card__lbl--time  { top: 389px; }
.cw-card--a .cw-card__val--time  { top: 389px; }

.cw-card--b .cw-card__rule:nth-of-type(1) { top: 326px; }
.cw-card--b .cw-card__rule:nth-of-type(2) { top: 374px; }
.cw-card--b .cw-card__rule:nth-of-type(3) { top: 422px; }
.cw-card--b .cw-card__lbl--place { top: 338px; }
.cw-card--b .cw-card__val--place { top: 338px; }
.cw-card--b .cw-card__lbl--time  { top: 386px; }
.cw-card--b .cw-card__val--time  { top: 386px; }

/* 카드1(SP TECH TALK) 시간값만 16px 2줄 (09.15 / 09.17).
   ⚠️ 선택자에 .cw-card--a 를 붙여야 한다. 위의 `.cw-card--a .cw-card__val--time { top: 389px }`
      가 명시도(0,2,0)로 더 세서, `.cw-card__val--stack`(0,1,0) 의 top 383 이 무시됐다.
      그 결과 2줄이 6px 아래로 밀려 세 번째 구분선(425px)을 침범했다.
   line-height 는 Figma 박스 그대로 35px / 2줄 = 17.5px 로 고정한다
   (시안의 auto 값이라 배수로 두면 폰트마다 달라진다). */
.cw-card--a .cw-card__val--stack,
.cw-card--b .cw-card__val--stack {
  top: 383px;
  width: 185px;
  font-size: 16px;
  line-height: 17.5px;
}

/* 더 알아보기 — Material 3 Toggle button(outline, XSmall). Figma 인스턴스 35.7px 높이 */
/* 시안 실측: 좌측 33(구분선과 같은 라인) / 높이 33 / 폭 약 118.
   section-map 의 인스턴스 bbox(53, 78x35.7)는 렌더 결과와 달라 그대로 쓰면 20px 어긋난다. */
.cw-more {
  left: 33px;
  display: inline-flex; align-items: center; gap: 6px;
  height: 33px; padding: 0 15px;
  border: 1px solid rgb(30,30,30);
  border-radius: 999px;
  font-size: 14px; font-weight: 500; line-height: 1;
  color: rgb(30,30,30); white-space: nowrap;
  background: transparent;
}
/* 호버 시 색 변경 없음(사용자 요청). 커서만 바뀐다. */
.cw-more svg { width: 16px; height: 16px; flex: none; }
.cw-card--a .cw-more { top: 442px; }
.cw-card--b .cw-more { top: 439px; }


/* ── 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; }

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

.cw-modal__title { left: 0; top: 140px; width: 100%; text-align: center;
                   font-size: 64px; font-weight: 900; line-height: 1; color: rgb(132,186,229); white-space: nowrap; }
.cw-modal__desc  { left: 0; top: 228px; width: 100%; text-align: center;
                   font-size: 36px; font-weight: 500; line-height: 1.3; color: rgb(0,0,0); }
.cw-modal__ok    { left: 0; bottom: 0; width: 720px; height: 116px;
                   display: flex; align-items: center; justify-content: center;
                   background: rgb(125,212,240);
                   font-size: 48px; font-weight: 500; line-height: 1; color: rgb(255,255,255);
                   cursor: pointer; }


/* ── TIMETABLE  [Figma 123:4484] 1920x2069 (09.15 기준) ───────────────
   날짜별로 섹션 높이가 다르다: 09.15 2069 / 09.16 1805 / 09.17 2333
   .cw-section 의 height 만 바꾸면 캔버스 높이는 자동으로 따라온다.
   ─────────────────────────────────────────────────────────────────── */

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

.cw-tt__title { left: 290px; top: 100px; font-size: 100px; font-weight: 900; line-height: 1; color: rgb(0,0,0); white-space: nowrap; }
.cw-tt__note  { left: 1273px; top: 127px; width: 367px; text-align: right;
                font-size: 28px; font-weight: 500; line-height: 1; color: rgb(82,81,88); }
.cw-tt__rule  { left: 280px; top: 219px; width: 1360px; height: 2px; background: rgb(115,179,200); }
.cw-tt__deco  { left: 1334px; top: 252px; }

/* 날짜 탭 */
.cw-tabs { left: 281px; top: 345px; display: flex; gap: 24px; }
.cw-tab {
  position: relative; width: 175px; height: 48px;
  border-radius: 60px;
  background: rgb(134,194,213);                /* #86c2d5 — 비활성 */
  font-size: 20px; font-weight: 700; line-height: 1;
  color: rgb(89,60,46);                        /* #593c2e */
  white-space: pre;                            /* 라벨의 두 칸 공백 유지 */
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease;
}
.cw-tab[aria-selected='true'] { background: rgb(255,245,60); }  /* #fff53c */

/* 행 공통 — Figma 는 세로 중앙 기준(top + translateY(-50%)) 으로 배치돼 있다 */
.cw-vc { transform: translateY(-50%); }

.cw-tt__time  { left: 334px; font-size: 28px; font-weight: 700; line-height: normal; color: rgb(0,0,0); white-space: nowrap; }
.cw-tt__name  { left: 334px; font-size: 48px; font-weight: 900; line-height: normal; color: rgb(0,0,0); white-space: nowrap; }
.cw-tt__desc  { left: 334px; font-size: 20px; font-weight: 500; line-height: normal; color: rgb(82,81,88); white-space: nowrap; }
.cw-tt__place { display: flex; gap: 10px; align-items: center;
                font-size: 24px; font-weight: 500; line-height: normal; color: rgb(0,0,0); white-space: nowrap; }
.cw-tt__place img { width: 19.5px; height: 23.833px; flex: none; }
.cw-tt__bar   { width: 2px; height: 24px; background: rgb(115,179,200); }
.cw-tt__cast  { font-size: 24px; font-weight: 700; line-height: normal; color: rgb(0,0,0); white-space: nowrap; }
.cw-tt__row   { left: 310px; width: 1300px; height: 2px; background: rgb(115,179,200); }

/* 상시 행 — 회색으로 톤다운 */
.cw-tt__always     { left: 337px; font-size: 28px; font-weight: 700; line-height: normal; color: rgb(82,81,88); white-space: nowrap; }
.cw-tt__name--soft { left: 426px; color: rgb(82,81,88); }
.cw-tt__place--soft { left: 426px; }

/* 사진 카드 — 흰 200x200 박스 안에 이미지가 들어간다 */
.cw-tt__photo { width: 200px; height: 200px; background: rgb(255,255,255); }
.cw-tt__crop  { overflow: hidden; }
.cw-tt__crop img { position: absolute; max-width: none; }

/* LIVE STREAMING — Figma 172x40 / #FF5134 / radius 8.
   디자이너 메모: 라이브 오픈 전에는 OFF 상태로 둔다. */
.cw-live { left: 334px; width: 172px; height: 40px; display: block; }
.cw-live img { width: 172px; height: 40px; }
.cw-live.is-off { filter: grayscale(1); opacity: .45; cursor: default; }


/* ── EVENT  [Figma 123:4978] 1920x845 ─────────────────────────────── */

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

.cw-ev__title { left: 284px;  top: 100px; font-size: 100px; font-weight: 900; line-height: 1; color: rgb(88,59,45); white-space: nowrap; }
.cw-ev__note  { left: 1321px; top: 169px; width: 319px; text-align: right;
                font-size: 28px; font-weight: 500; line-height: 1; color: rgb(88,59,45); white-space: nowrap; }
.cw-ev__rule  { left: 280px; top: 219px; width: 1360px; height: 2px; background: rgb(88,59,45); }

.cw-ev__step {
  left: 663px; width: 154px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 30px;
  background: rgb(245,233,255);                                /* #f5e9ff */
  font-size: 32px; font-weight: 700; line-height: 1;
  color: rgb(186,142,222); white-space: nowrap;
}
.cw-ev__txt { left: 848px; font-size: 36px; font-weight: 500; line-height: 1;
              color: rgb(245,233,255); white-space: nowrap; }


/* ── 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-tt__day,
.cw-mo-tt__day { pointer-events: none; }

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

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

/* 패널 레이어는 헤더/탭 아래에 깔린다 (겹칠 경우 대비) */
.cw-tt > .cw-layer:last-of-type,
.cw-mo-tt > .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(89, 60, 46); 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; }
}