@import url('https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap');

:root {
    --color-bg: #13090B;
    --color-accent: #e29448;
    --color-accent-strong: #ea9646;
    --color-text-dark: #140a0c;
    --color-highlight: #ffcd9e;
    --color-muted: #d0a984;
    --color-line: rgba(234, 150, 70, 0.5);
}

* { box-sizing: border-box; }

body, html {
    scroll-behavior: smooth;
    word-break: keep-all;
}

body {
    margin: 0;
    background: var(--color-bg);
    font-family: 'Gowun Batang', serif;
    color: #fff;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.display_mo {display: none;}



/* ===== Header ===== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 200px;
    box-sizing: border-box;
    height: 140px;
    transition: all 0.5s;
    border-bottom: 1px solid rgba(204, 137, 68, 0.47);
}

.site-header.fixed {
    height: 100px;
}

.site-header.fixed .site-header__logo-img {
    height: 48px;
}

.site-header.fixed .site-header__nav-img {
    height: 24px;
}

.site-header.fixed .lang-btn {
    width: 42px;
    height: 42px;
    font-size: 18px;
}

/* 스크롤 시 main.js에서 .site-header에 토글하는 클래스: .fixed (현재 스타일 없음, 필요 시 여기에 추가) */


.site-header__logo-img {
    height: 60px;
    width: auto;
    transition: height 0.3s;
}

.site-header__nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 40px;
}

.site-header__nav-img {
    /* Sandoll Witch 폰트 라이선스 파일이 없어 Figma에서 렌더링된 이미지로 대체 */
    height: 30px;
    width: auto;
    transition: height 0.3s;
}

.site-header__lang {
    display: flex;
    gap: 18px;
    flex-shrink: 0;
}

.lang-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 100px;
    font-family: 'Gowun Batang', serif;
    font-weight: 700;
    font-size: 18px;
    background: transparent;
    border: 1px solid var(--color-accent-strong);
    color: var(--color-accent-strong);
    transition: width 0.3s, height 0.3s, font-size 0.3s, background 0.3s, color 0.3s;
}

.lang-btn.is-active,
.lang-btn:hover {
    background: var(--color-accent-strong);
    color: var(--color-text-dark);
    border-color: var(--color-accent-strong);
}

.site-header__burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.site-header__burger img {
    width: 24px;
    height: 24px;
}

/* ===== 모바일 사이드 메뉴 (node 36:1769) ===== */
.mo_menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 274px;
    max-width: 80%;
    height: 100%;
    background: var(--color-accent-strong);
    z-index: 1200;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.mo_menu.is-open {
    transform: translateX(0);
}

.mo_menu__top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    height: 66px;
    padding: 0 16px;
    background: #000;
    border-bottom: 1px solid rgba(9, 4, 5, 0.2);
    flex-shrink: 0;
}

.mo_menu__lang {
    display: flex;
    gap: 6px;
}

.mo_menu__lang .lang-btn {
    width: 40px;
    height: 40px;
    font-size: 15px;
}

.mo_menu__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.mo_menu__close img {
    width: 24px;
    height: 24px;
}

.mo_menu__nav {
    display: flex;
    flex-direction: column;
    padding: 6px 16px 0;
}

.mo_menu__link {
    display: flex;
    align-items: center;
    height: 50px;
}

.mo_menu__link-img {
    /* 기존 오렌지색 TIMETABLE/INTRODUCE svg를 재사용, 필터로 검정색(--color-text-dark)으로 표시 */
    height: 16px;
    width: auto;
    filter: brightness(0);
}

.mo_menu__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16px;
    height: 50px;
    border-radius: 100px;
    background: var(--color-bg);
    font-family: 'Gowun Batang', serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--color-accent-strong);
}

.mo_menu__dim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mo_menu__dim.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* ===== Hero =====
   원본 시안(1920x2431)의 비율을 그대로 유지하는 "포스터형" 히어로.
   모든 좌표는 1920x2431 기준 픽셀값을 %로 환산해 aspect-ratio 박스 안에 배치했다.
   (get_design_context가 반환한 top/bottom %는 전체 페이지(5817px) 기준으로 잘못 계산되어 있어
   원본 메타데이터의 실제 좌표(x,y,width,height)로 직접 재계산함) */
.hero_sec {
    /* 모바일 기본값: 100vh. 768px 이하 미디어쿼리가 "나중에 덮어써서" 잠깐 작았다가
       커지는 현상이 있었어서, 아예 모바일을 기본값으로 두고 데스크탑에서만
       aspect-ratio로 덮어쓰는 방식으로 순서를 뒤집음 */
    position: relative;
    width: 100%;
    height: 100vh;
    background: var(--color-bg);
    overflow: hidden;
}

@media (min-width: 1025px) {
    .hero_sec {
        height: auto;
        aspect-ratio: 1920 / 2431;
    }
}

.hero_sec__bg {
    position: absolute;
    top: 32.25%;
    bottom: 0;
    left: 50%;
    width: 85.833%;
    transform: translateX(-50%);
    overflow: hidden;
}

.hero_sec__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.hero_sec__dimmed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 64.91%;
    background: linear-gradient(
        to bottom,
        #000 0%,
        #000 29.99%,
        rgba(0, 0, 0, 0) 71.1%
    );
    pointer-events: none;
}

.hero_sec__dimmed-bottom {
    /* figma node 29:373 — 보살 이미지 하단(오브 부근)을 은은하게 어둡게 해서
       빛나는 구슬만 또렷하게 남기는 비네트. 원본 비율(303/2431 ≈ 12.47%)로 환산. */
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 12.47%;
    background: linear-gradient(
        to top,
        var(--color-bg) 0%,
        var(--color-bg) 21.517%,
        rgba(19, 9, 11, 0) 80%
    );
    pointer-events: none;
}

.hero_sec__content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.hero_sec__text {
    /* 광복절 기념~날짜까지 한 그룹으로 묶어서, hero_sec 높이(100vh 등)가 바뀌어도
       내부 간격은 유지되고 그룹 전체 위치만 top으로 잡히게 함 */
    position: absolute;
    top: 9.38%;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero_sec__eyebrow,
.hero_sec__subtitle {
    margin: 0;
    text-align: center;
    white-space: nowrap;
    color: var(--color-accent-strong);
}

.hero_sec__eyebrow {
    font-size: clamp(10px, 0.94vw, 18px);
    font-weight: 400;
}

.hero_sec__subtitle {
    margin-top: 1.04vw;
    font-size: clamp(14px, 1.56vw, 30px);
    line-height: 1.4;
}

.hero_sec__title {
    margin-top: 2.14vw;
    width: 27.02%;
    height: auto;
}

.hero_sec__tagline {
    margin-top: 2.19vw;
    width: 31.06%;
    height: auto;
}

.hero_sec__date {
    /* Sandoll Witch 폰트 라이선스 파일이 없어 Figma에서 렌더링된 이미지로 대체 */
    margin-top: 1.56vw;
    width: 14.5%;
    height: auto;
}

/* ===== Hero Interaction (PC + 모바일 공통) =====
   1) 로드 시 dimmed 높이가 0 → 기존 높이로 내려온 뒤 hero_sec__text 페이드업
   2) 보살 이미지는 opacity 0으로 시작, 화면에 들어오면(모바일은 로드 시 바로) 블러+페이드인
   모바일에서는 main.js가 이 연출이 끝날 때까지 스크롤을 잠갔다가 다음 섹션으로 자동 이동시킴 */
.hero_sec__dimmed {
    height: 0;
    transition: height 1.2s ease-out;
}

.hero_sec.is-revealed .hero_sec__dimmed {
    height: 64.91%;
}

.hero_sec__text {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transition-delay: 1.1s;
}

.hero_sec.is-revealed .hero_sec__text {
    opacity: 1;
    transform: translateY(0);
}

.hero_sec__bg-img {
    opacity: 0;
    filter: blur(24px);
    transition: opacity 1.2s ease, filter 1.2s ease;
}

.hero_sec__bg-img.is-visible {
    opacity: 1;
    filter: blur(0);
}

.hero_sec__exit-fade {
    /* 타임테이블로 스크롤해서 넘어갈 때 히어로가 어둡게 페이드아웃되는 오버레이.
       불투명도는 main.js에서 스크롤 위치에 따라 직접 계산해서 넣음 */
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--color-bg);
    opacity: 0;
    pointer-events: none;
}

/* ===== bottom_bg (Timetable ~ Introduce 공용 배경) ===== */
.bottom_bg {
    position: relative;
    background: var(--color-bg) url('/assets/images/bottom_bg.png') no-repeat top center;
    background-size: cover;
}

/* ===== Timetable ===== */
.timetable_sec {
    padding: 160px 40px 120px;
    text-align: center;
}

.timetable_sec__title {
    /* Sandoll Witch 폰트 라이선스 파일이 없어 Figma에서 렌더링된 이미지로 대체 */
    display: block;
    height: 50px;
    width: auto;
    margin: 0 auto 60px;
}

.timetable_card {
    max-width: 1520px;
    margin: 0 auto;
    border: 1px solid rgba(204, 137, 68, 0.34);
    border-radius: 40px;
    background: rgba(100, 91, 81, 0.1);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    box-shadow: 3px 25px 50px -3px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    text-align: left;
}

.timetable_grid {
    display: grid;
    grid-template-columns: minmax(110px, 0.6fr) repeat(4, 1fr);
}

.timetable_grid__cell {
    padding: 30px 20px;
    border-bottom: 1px solid var(--color-line);
    border-left: 1px solid var(--color-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.timetable_grid__cell--corner {
    border-left: none;
    border-bottom: 1px solid var(--color-line);
}

.timetable_grid__head-img {
    /* Sandoll Witch 폰트 라이선스 파일이 없어 Figma에서 렌더링된 이미지로 대체 */
    height: 26px;
    width: auto;
}

.timetable_grid__type {
    gap: 8px;
    border-bottom: 1px solid var(--color-line);
}

.timetable_grid__type:nth-child(11), .timetable_grid__type:nth-child(6) {
    border-left: 0;
}

.timetable_grid__icon {
    width: 32px;
    height: 32px;
}

.timetable_grid__type-ko {
    font-family: 'Gowun Batang', serif;
    font-weight: 700;
    font-size: 26px;
    color: var(--color-accent-strong);
}

.timetable_grid__type-en {
    /* Sandoll Witch 폰트 라이선스 파일이 없어 Figma에서 렌더링된 이미지로 대체 */
    height: 18px;
    width: auto;
}

.timetable_grid__time {
    margin: 0 0 6px;
    font-family: 'Gowun Batang', serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--color-highlight);
    line-height: 1.4;
}

.timetable_grid__sub {
    margin: 0;
    font-family: 'Gowun Batang', serif;
    font-size: 18px;
    color: var(--color-accent-strong);
}

.timetable_info {
    display: flex;
    flex-wrap: wrap;
    padding: 70px 0px;
}

.timetable_info__col {
    flex: 1 1 0;
    min-width: 260px;
    padding: 0px 40px;
    border-left: 1px solid var(--color-line);
    text-align: center;
}

.timetable_info__col:first-child {
    border-left: none;
}

.timetable_info__title {
    /* Sandoll Witch 폰트 라이선스 파일이 없어 Figma에서 렌더링된 이미지로 대체 */
    display: block;
    height: 30px;
    width: auto;
    margin: 0 auto 24px;
}

.timetable_info__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Gowun Batang', serif;
    font-size: 18px;
    color: var(--color-muted);
    line-height: 2;
}

.timetable_info__list li {
    position: relative;
    padding-left: 14px;
}

.timetable_info__list li::before {
    content: '·';
    position: absolute;
    left: 0;
}

.timetable_info__dl {
    width: fit-content;
    margin: 0 auto;
    font-family: 'Gowun Batang', serif;
    font-size: 18px;
}

.timetable_info__dl > div {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    padding: 6px 0;
}

.timetable_info__dl dt {
    margin: 0;
    width: 80px;
    text-align: left;
    color: var(--color-accent-strong);
}

.timetable_info__dl dd {
    margin: 0;
    color: var(--color-muted);
    white-space: nowrap;
}

.timetable_info__addr {
    margin: 0 0 8px;
    font-family: 'Gowun Batang', serif;
    font-size: 18px;
    color: var(--color-muted);
}

.timetable_info__addr-sub {
    margin: 0 0 25px;
    font-family: 'Gowun Batang', serif;
    font-size: 14px;
    color: var(--color-muted);
}

.timetable_info__map-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 216px;
    margin: 0 auto;
    padding: 10px;
    border: 1px solid var(--color-accent-strong);
    border-radius: 10px;
    font-family: 'Gowun Batang', serif;
    font-size: 14px;
    color: var(--color-accent-strong);
    transition: background 0.3s, color 0.3s;
}

.timetable_info__map-btn:hover {
    background: var(--color-accent-strong);
    color: var(--color-text-dark);
}

.booking_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 600px;
    max-width: 90%;
    height: 110px;
    margin: 60px auto 0;
    border-radius: 100px;
    background: var(--color-accent-strong);
    font-family: 'Gowun Batang', serif;
    font-weight: 700;
    font-size: 34px;
    color: var(--color-text-dark);
    text-align: center;
    transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}

.booking_btn:hover {
    background: var(--color-highlight);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* ===== Timetable (모바일 전용 마크업, node 2023:12) =====
   데스크탑 표 대신 날짜 탭 + 카드 스택 구조. 기본은 숨김, 768px 이하에서만 노출
   (반응형 전환은 responsive 섹션에서 처리) */
.timetable_mobile {
    display: none;
    max-width: 400px;
    margin: 0 auto;
    text-align: left;
}

.timetable_mobile__tabs {
    display: flex;
    gap: 16px;
    margin: 0 0 16px;
    padding: 4px;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
}

.timetable_mobile__tabs::-webkit-scrollbar {
    display: none;
}

.timetable_mobile__tab {
    flex-shrink: 0;
    width: 80px;
    height: 40px;
    padding: 10px;
    border: 0.5px solid var(--color-accent-strong);
    border-radius: 100px;
    background: transparent;
    font-family: 'Gowun Batang', serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-accent-strong);
}

.timetable_mobile__tab.is-active {
    background: var(--color-accent-strong);
    color: var(--color-text-dark);
}

.timetable_mobile__card {
    margin: 0 0 16px;
    padding: 20px 18px;
    border: 0.5px solid rgba(234, 150, 70, 0.5);
    border-radius: 20px;
    background: rgba(100, 91, 81, 0.1);
}

.timetable_mobile__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(234, 150, 70, 0.2);
}

.timetable_mobile__card-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.timetable_mobile__icon {
    width: 32px;
    height: 32px;
}

.timetable_mobile__type-ko {
    margin: 0 0 6px;
    font-family: 'Gowun Batang', serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--color-accent-strong);
}

.timetable_mobile__type-en {
    height: 14px;
    width: auto;
}

.timetable_mobile__meta {
    margin: 0;
    font-family: 'Gowun Batang', serif;
    font-weight: 700;
    font-size: 12px;
    color: var(--color-accent-strong);
    white-space: nowrap;
}

.timetable_mobile__time {
    margin: 0;
    padding-top: 16px;
    font-family: 'Gowun Batang', serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-highlight);
}

.timetable_mobile__info-card {
    margin: 0 0 16px;
    padding: 20px 18px;
    border: 0.5px solid rgba(234, 150, 70, 0.5);
    border-radius: 20px;
    background: rgba(100, 91, 81, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    text-align: center;
}

.timetable_mobile__info-title {
    display: block;
    height: 20px;
    width: auto;
    margin: 0 auto 16px;
}

.timetable_mobile__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: 'Gowun Batang', serif;
    font-size: 14px;
    color: var(--color-muted);
    line-height: 1.4;
}

.timetable_mobile__list li {
    position: relative;
    max-width: 100%;
    padding-left: 14px;
    text-align: center;
}

.timetable_mobile__list li::before {
    content: '·';
    position: absolute;
    left: 0;
}

.timetable_mobile__dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: 'Gowun Batang', serif;
    font-size: 14px;
}

.timetable_mobile__dl > div {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.timetable_mobile__dl dt {
    margin: 0;
    width: 80px;
    text-align: left;
    color: var(--color-accent-strong);
}

.timetable_mobile__dl dd {
    margin: 0;
    color: var(--color-muted);
    white-space: nowrap;
}

.timetable_mobile__addr {
    margin: 0 0 10px;
    font-family: 'Gowun Batang', serif;
    font-size: 14px;
    color: var(--color-muted);
}

.timetable_mobile__addr-sub {
    margin: 0 0 16px;
    font-family: 'Gowun Batang', serif;
    font-size: 12px;
    color: var(--color-muted);
}

.timetable_mobile__map-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 148px;
    padding: 10px;
    border: 0.5px solid var(--color-accent-strong);
    border-radius: 10px;
    font-family: 'Gowun Batang', serif;
    font-size: 14px;
    color: var(--color-accent-strong);
}

/* ===== Introduce ===== */
.introduce_sec {
    position: relative;
    z-index: 0;
    padding: 40px 40px 140px;
    text-align: center;
}

.introduce_sec::after {
    /* bottom_bg.png 꼬리 부분이 거의 단색이라 푸터와 이어지는 하단만 자연스럽게 짙은 색으로 마감.
       위쪽은 transparent라 timetable 쪽 톤과 이어지고, 상단에 딱 붙어 보이던 경계선이 사라짐 */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(1, 0, 0, 0) 0%, #010000 60%);
    z-index: -1;
}

.introduce_sec__title {
    /* Sandoll Witch 폰트 라이선스 파일이 없어 Figma에서 렌더링된 이미지로 대체 */
    display: block;
    height: 50px;
    width: auto;
    margin: 0 auto 60px;
}

.introduce_sec__headline {
    margin: 0 0 80px;
    font-family: 'Gowun Batang', serif;
    font-weight: 700;
    font-size: 50px;
    line-height: 1.5;
    color: var(--color-accent-strong);
}

.introduce_sec__body {
    max-width: 1047px;
    margin: 0 auto 80px;
}

.introduce_sec__desc,
.introduce_sec__quote {
    margin: 0;
    font-family: 'Gowun Batang', serif;
    font-size: 28px;
    line-height: 1.9;
    color: var(--color-highlight);
}

.introduce_sec__divider {
    display: block;
    width: 50px;
    height: 1px;
    margin: 80px auto;
    background: var(--color-highlight);
}

.introduce_sec__footnote {
    max-width: 900px;
    margin: 0 auto 100px;
    font-family: 'Gowun Batang', serif;
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-highlight);
}

.introduce_sec__artists {
    margin: 0 0 80px;
}

.introduce_sec__artists-label {
    margin: 0 0 20px;
    font-family: 'Gowun Batang', serif;
    font-size: 26px;
    color: var(--color-accent-strong);
}

.introduce_sec__artists-list {
    margin: 0;
    font-family: 'Gowun Batang', serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.8;
    color: var(--color-accent-strong);
}

.introduce_sec__sponsor-label {
    margin: 0 0 20px;
    font-family: 'Gowun Batang', serif;
    font-size: 26px;
    color: var(--color-accent-strong);
}

.introduce_sec__sponsor-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.introduce_sec__sponsor-logo {
    height: 47px;
    width: auto;
}

.introduce_sec__sponsor-emma-logo {
    height: 48px;
    width: auto;
}

/* ===== Footer =====
   logo top 120px / contact top 136px / copyright top 231px (node 29:517 기준)
   → flex로 좌우 배치하고, 세로 간격만 그 수치에 맞춰 재현 */
.site-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 120px 200px 170px;
    background: #080405;
}

.site-footer__logo {
    height: 86px;
    width: auto;
    transition: opacity 0.3s;
}

.site-footer__logo-link:hover .site-footer__logo {
    opacity: 0.7;
}

.site-footer__info {
    text-align: left;
}

.site-footer__contact-title {
    /* Sandoll Witch 폰트 라이선스 파일이 없어 Figma에서 렌더링된 이미지로 대체 */
    display: block;
    height: 17px;
    width: auto;
    margin: 0 0 10px;
}

.site-footer__contact-email {
    margin: 0 0 45px;
    font-family: 'Gowun Batang', serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-accent-strong);
    white-space: nowrap;
}

.site-footer__copyright {
    margin: 0;
    font-family: 'Gowun Batang', serif;
    font-weight: 700;
    font-size: 12px;
    color: var(--color-accent-strong);
    white-space: nowrap;
}

/* ===== responsive =====
   화면 폭 기준: 1280 / 1024 / 768 로 선언. 아직 스타일이 없는 구간은
   필요해지면 이 안에 breakpoint별로 추가하면 됨 (섹션 CSS 쪽에는 미디어쿼리 두지 않기) */

/* ----- 1025px 이상 (데스크탑) ----- */
@media (min-width: 1025px) {
    .mo_menu,
    .mo_menu__dim {
        display: none;
    }
}

/* ----- 1400px 이하 ----- */
@media (max-width: 1400px) {
    .timetable_info__list,
    .timetable_info__dl,
    .timetable_info__addr {
        font-size: 15px;
    }

    .timetable_info__col {
        padding: 0px 20px;
    }
}

/* ----- 1280px 이하 ----- */
@media (max-width: 1280px) {

    .site-header,
    .site-header.fixed {
        padding: 0px 100px;
        height: 100px;
    }
    .site-header__logo-img,
    .site-header.fixed .site-header__logo-img {
        height: 46px;
    }
    .site-header__nav {
        gap: 24px;
    }
    .site-header__nav-img,
    .site-header.fixed .site-header__nav-img {
        height: 22px;
    }
    .site-header__lang {
        gap: 12px;
    }
    .lang-btn,
    .site-header.fixed .lang-btn {
        width: 42px;
        height: 42px;
        font-size: 15px;
    }

    .site-footer {padding: 100px 100px;}

}

/* ----- 1024px 이하 ----- */
@media (max-width: 1024px) {

    .display_mo {display: block;}

    /* Header */
    .site-header,
    .site-header.fixed {
        height: 66px;
        padding: 0 30px;
        border-bottom: 1px solid rgba(204, 137, 68, 0.4);
    }

    .site-header__logo-img,
    .site-header.fixed .site-header__logo-img {
        height: 26px;
    }

    .site-header__nav,
    .site-header__lang {
        display: none;
    }

    .site-header__burger {
        display: flex;
    }

    .hero_sec__subtitle {margin-bottom: 16px;}

    .timetable_sec__title {height: 37px;}

    /* Timetable — 데스크탑 표 숨기고 모바일 탭+카드 마크업으로 전환 */
    .timetable_sec {
        padding: 60px 20px 60px;
    }

    .timetable_mobile__tabs {
        /* 우측 section padding(20px)을 무시하고 화면 끝까지 이어지게 */
        margin-right: -20px;
        padding-right: 20px;
    }

    .timetable_card {
        display: none;
    }

    .timetable_mobile {
        display: block;
    }

    .booking_btn {
        max-width: 100%;
        width: 100%;
        height: 64px;
        font-size: 18px;
    }

    /* Introduce — node 2025:13 모바일 시안 기준 */
    .introduce_sec {
        padding: 40px 20px 60px;
    }

    .introduce_sec__title {
        height: 24px;
        margin-bottom: 26px;
    }

    .introduce_sec__headline {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .introduce_sec__body {
        margin-bottom: 70px;
    }

    .introduce_sec__desc,
    .introduce_sec__quote {
        font-size: 14px;
    }

    .introduce_sec__divider {
        margin: 30px auto;
    }

    .introduce_sec__footnote {
        display: none;
    }

    .introduce_sec__artists {
        margin-bottom: 50px;
    }

    .introduce_sec__artists-label {
        font-size: 14px;
    }

    .introduce_sec__artists-list {
        font-size: 16px;
    }

    .introduce_sec__sponsor-label {
        font-size: 14px;
    }

    .introduce_sec__sponsor-logo {
        height: 36px;
    }

    .introduce_sec__sponsor-emma-logo {
        height: 37px;
    }
    .introduce_sec__sponsor-logos {
        flex-direction: column;
        align-items: center;
    }

    /* Footer — node 36:1475 모바일 시안 기준 */
    .site-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 70px;
        padding: 60px 30px 50px;
    }

    .site-footer__logo {
        height: 51px;
        width: auto;
    }

    .site-footer__info {
        margin-top: 0;
    }

    .site-footer__contact-title {
        height: 12px;
        margin-bottom: 10px;
    }

    .site-footer__contact-email {
        font-size: 12px;
        margin-bottom: 20px;
    }

    .site-footer__copyright {
        font-size: 10px;
    }
}

/* ----- 768px 이하 ----- */
@media (max-width: 768px) {
    /* Hero — node 2022:10 (433x662 모바일 시안) 기준으로 비율/좌표 재계산.
       height:100vh는 이제 .hero_sec 기본값이라 여기서 다시 선언 안 해도 됨 */
    .hero_sec__bg {
        top: 34.59%;
        width: 100%;
    }

    .hero_sec__text {
        top: 15%;
    }

    .hero_sec__eyebrow {
        font-size: 10px;
    }

    .hero_sec__subtitle {
        margin-top: 3.46vw;
        font-size: 14px;
    }

    .hero_sec__title {
        width: 42.79%;
    }

    .hero_sec__tagline {
        margin-top: 4.95vw;
        width: 60.74%;
    }

    .hero_sec__date {
        margin-top: 2.3vw;
        width: 32%;
    }
}

/* ----- 640px 이하 ----- */
@media (max-width: 640px) {
    /* bottom_bg */
    .bottom_bg {
        background-image: url('/assets/images/bottom_bg_mo.png');
    }

    /* Timetable */
    .timetable_sec { padding: 100px 25px 80px; }
    .timetable_sec__title { font-size: 32px; margin-bottom: 30px; }
    .timetable_grid { grid-template-columns: 90px repeat(4, minmax(150px, 1fr)); overflow-x: auto; }
    .timetable_card { border-radius: 24px; overflow-x: auto; }
    .timetable_mobile__tabs {
        /* 우측 section padding(25px)을 무시하고 화면 끝까지 이어지게 */
        margin-right: -25px;
        padding-right: 25px;
    }
    .booking_btn { height: 80px; font-size: 20px; }

    /* Introduce */
    .introduce_sec { padding: 20px 20px 80px; }
    .introduce_sec__headline { font-size: 26px; margin-bottom: 50px; }
    .introduce_sec__desc,
    .introduce_sec__quote { font-size: 17px; }
    .introduce_sec__footnote { font-size: 14px; }
    .introduce_sec__artists-list { font-size: 20px; }
    .introduce_sec__sponsor-logos { flex-direction: column; gap: 16px; }
}