/* --- 1. 기본 설정 --- */
html {

    scrollbar-gutter: stable;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Space Grotesk', 'Pretendard', sans-serif;
    font-size: 16px;
    color: #000;
    background: #F0EEE9;
    overflow-x: hidden;
    letter-spacing: -0.01em;
    /* Typography adjustment */
}

a {
    text-decoration: none;
    color: inherit;
}

/* --- 2. PC용 기둥 공통 --- */
.sidebar {
    position: fixed;
    top: 0;
    height: 100vh;
    width: 10vw;
    background: #F0EEE9;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.vertical-text {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: 1px;
}

/* PC용 폰트 크기 - 뷰포트 높이에 반응하여 잘림 방지 */
.title-text {
    font-size: clamp(4rem, 10vh, 7rem);
    /* 최소 4rem, 최대 7rem, 기본 10vh */
}

.pc-date-text {
    font-size: clamp(3.6rem, 9vh, 5.7rem);
    /* title-text보다 약 10% 작게 */
}

/* 태블릿용 긴 텍스트는 PC에서 숨김 */
.tablet-combined-text {
    display: none;
}

.left-bar {
    left: 0;
    justify-content: flex-end;
    align-items: flex-start;
    padding-left: 20px;
    padding-bottom: 25px;

    user-select: none;
    -webkit-user-select: none;
    /* 선택 불가 */
}

.pc-date-text {
    transform: rotate(180deg);
}

.right-bar {
    right: 0;
    justify-content: flex-start;
    align-items: flex-end;
    padding-right: 20px;
    padding-top: 25px;

    user-select: none;
    -webkit-user-select: none;
    /* 선택 불가 */
    pointer-events: none;
    /* ★ 메뉴 클릭 방해 방지 */
}

.right-bar .vertical-text {
    pointer-events: auto;
}

/* --- 3. PC용 메뉴 --- */
.menu-toggle-btn,
.menu-overlay {
    display: none;
}

.sidebar-menu {
    position: fixed;
    top: 0;
    right: 10vw;
    width: 10vw;
    min-width: 140px;
    height: 100vh;
    z-index: 101;
    /* ★ right-bar(100)보다 높아야 겹칠 때 클릭 가능 */
    background: transparent;
    /* ★ 배경 투명 - 글자만 보임 */
    padding-top: 25px;
    transition: all 0.3s ease;
}

.sidebar-menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5em;

    /* ★ 핵심 해결책: 자식 요소(메뉴들)를 가로축 끝(오른쪽)으로 정렬 */
    align-items: flex-end;

    /* 기존 padding-left: 15px; 삭제 */
    padding-left: 0;

    /* (옵션) 오른쪽 기둥과 너무 딱 붙지 않게 약간 여백 */
    padding-right: 10px;
}

.sidebar-menu li a {
    display: inline-block;
    text-align: right;
    font-weight: 700;
    font-size: 1.2rem;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
}

.sidebar-menu li a:hover,
.sidebar-menu li a.active {
    border-bottom: 2px solid #000;
}

/* --- 4. 메인 콘텐츠 --- */
main {
    margin-left: 10vw;
    margin-right: 20vw;
    padding: 25px 40px 100px 40px;
    min-height: 100vh;
    max-width: 720px;
}

/* --- 4.1 인트로 섹션 --- */
.intro-section {
    margin-bottom: 3rem;
}

.page-headline {
    font-family: 'Pretendard', sans-serif;
    font-size: clamp(2.3rem, 5.8vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #000;
    margin-bottom: 2rem;
}

/* --- 자음 네비게이션 (출판사 페이지) --- */
.consonant-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.2rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ddd;
}

.consonant-nav a {
    font-family: 'Pretendard', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: #888;
    text-decoration: none;
    transition: color 0.2s ease, border-bottom 0.2s ease;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
}

.consonant-nav a:hover {
    color: #000;
    border-bottom: 1px solid #000;
}

/* 모바일에서 왼쪽 정렬 */
@media (max-width: 768px) {
    .consonant-nav {
        justify-content: flex-start;
    }
}

.intro-subheadline {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 600;
    color: #000;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}

.intro-body {
    font-family: 'Pretendard', sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.7;
    /* Typography adjustment */
    color: #000;
    /* Typography adjustment */
    letter-spacing: -0.005em;
    /* Typography adjustment */
    max-width: 720px;
    word-wrap: break-word;
    word-break: keep-all;
}

/* --- 4.2 CTA 섹션 --- */
.cta-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    width: 100%;
    max-width: 720px;
}

.cta-button {
    flex: 1;
    display: inline-block;
    padding: 1.5rem 1rem;
    background: #000;
    color: #fff;
    font-family: 'Pretendard', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.2s ease;
    text-align: center;
}

.cta-button:hover {
    background: #333;
}

/* 인트로 첫 문장 강조 */
.intro-lead {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.01em;
    display: block;
    margin-bottom: 1rem;
    color: #000;
}

/* CTA 정보 박스 */
.cta-info-box {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding-left: 1rem;
    border-left: 3px solid #000;
    max-width: 480px;
}

.cta-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cta-info-label {
    font-family: 'Pretendard', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cta-info-value {
    font-family: 'Space Grotesk', 'Pretendard', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
}

/* --- 4.4 프로그램 타임라인 --- */
.program-timeline {
    margin-top: 1rem;
}

.timeline-day {
    margin-bottom: 3rem;
}

.timeline-date {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #000;
    padding-bottom: 0.8rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #000;
}

.timeline-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-left: 1rem;
    border-left: 3px solid #ddd;
    transition: border-color 0.2s ease;
}

.timeline-item:hover {
    border-left-color: #000;
}

.timeline-time {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #000;
    min-width: 50px;
    flex-shrink: 0;
}

.timeline-content {
    flex: 1;
}

.timeline-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 0.4rem;
}

.timeline-desc {
    font-family: 'Pretendard', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0.4rem;
}

.timeline-speaker {
    font-family: 'Pretendard', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #888;
}

/* --- 4.5 후원 등급 카드 --- */
.sponsor-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.sponsor-tier-card {
    border: 2px solid #000;
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.sponsor-tier-card:hover {
    background: #000;
    color: #fff;
}

.tier-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid currentColor;
}

.tier-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
}

.tier-price {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 500;
}

.tier-benefits {
    list-style: none;
    padding: 0;
}

.tier-benefits li {
    font-family: 'Pretendard', sans-serif;
    font-size: 1.05rem;
    line-height: 1.8;
    padding-left: 1rem;
    position: relative;
    color: #000;
}

.tier-benefits li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: 700;
}

/* --- 4.5-2 후원사 카드 (목록) --- */
.sponsor-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.sponsor-card {
    border: 2px solid #000;
    border-radius: 0;
    background: transparent;
    transition: all 0.25s ease;
}

.sponsor-card:hover {
    background: #000;
    color: #fff;
}

.sponsor-card-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 2.5rem;
    gap: 2rem;
}

.sponsor-info {
    flex: 1;
}

.sponsor-name {
    font-family: 'Pretendard', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.sponsor-name-en {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 0.7;
}

.sponsor-tagline {
    font-family: 'Pretendard', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.7;
}

.sponsor-desc {
    font-family: 'Pretendard', sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.7;
    opacity: 1;
    color: #000;
    margin-top: 0.5rem;
}

.sponsor-link-btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    border: 1.5px solid currentColor;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.sponsor-link-btn:hover {
    background: currentColor;
}

.sponsor-card:not(:hover) .sponsor-link-btn:hover {
    color: #fff;
    background: #000;
}

.sponsor-card:hover .sponsor-link-btn:hover {
    color: #000;
    background: #fff;
}

.sponsor-contribution {
    text-align: right;
    min-width: 180px;
}

.contribution-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.6;
    display: block;
    margin-bottom: 0.4rem;
}

.contribution-detail {
    font-family: 'Pretendard', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
}

/* 모바일 반응형 - 후원사 카드 */
@media (max-width: 768px) {
    .sponsor-card-main {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
        gap: 1.5rem;
    }

    .sponsor-contribution {
        text-align: left;
        min-width: auto;
        padding-top: 1rem;
        border-top: 1px solid currentColor;
        width: 100%;
    }
}

.sponsor-contact {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid #000;
}

.sponsor-contact-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.sponsor-contact-info {
    font-family: 'Pretendard', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
}

.sponsor-contact-info a {
    color: #000;
    font-weight: 600;
    text-decoration: underline;
}

/* --- 4.6 안내와 연결 페이지 --- */
.info-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}

.info-block {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #ddd;
}

.info-block-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 1rem;
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.info-label {
    font-family: 'Pretendard', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #888;
}

.info-value {
    font-family: 'Pretendard', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #000;
}

.info-value a {
    color: #000;
    text-decoration: underline;
}

/* 액션 링크 버튼 (SNS, 보도자료 등) */
.info-action-links {
    display: flex;
    gap: 1rem;
}

.action-link-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem 1.6rem;
    background: #000;
    color: #F0EEE9;
    font-family: 'Space Grotesk', 'Pretendard', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 10px;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-align: center;
}

.action-link-btn:hover {
    background: #333;
}

/* 모바일에서 버튼 세로 배치 */
@media (max-width: 600px) {
    .info-action-links {
        flex-direction: column;
    }
}

/* --- FAQ 아코디언 --- */
.faq-list {
    margin-top: 0.5rem;
}

.faq-item {
    border-bottom: 1px solid #000;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 0;
    cursor: pointer;
    transition: background 0.2s ease;
}

.faq-header:hover {
    background: rgba(0, 0, 0, 0.02);
}

.faq-question {
    font-family: 'Pretendard', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #000;
}

.faq-icon {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    color: #000;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.active .faq-body {
    max-height: 200px;
    padding-bottom: 1.5rem;
}

.faq-answer {
    font-family: 'Pretendard', sans-serif;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #000;
}

.poster-section {
    margin-top: 2rem;
}

.masonry-grid {
    column-count: 2;
    column-gap: 30px;
}

.card {
    break-inside: avoid;
    margin-bottom: 60px;
}

.card img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 15px;
}

.card-image-placeholder {
    width: 100%;
    background: #f0f0f0;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F0EEE9;
}

.card-info h2 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
}

.card-info p {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

/* --- 4.3 출판사 아코디언 리스트 --- */
.pub-list {
    margin-top: 2rem;
}

.pub-group {
    margin-bottom: 2rem;
}

.pub-group-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #666;
    padding: 0.5rem 0;
    border-bottom: 2px solid #000;
    margin-bottom: 0;
}

.pub-item {
    border-bottom: 1px solid #000;
}

.pub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 0;
    cursor: pointer;
    transition: background 0.2s ease;
}

.pub-header:hover {
    background: rgba(0, 0, 0, 0.02);
}

.pub-header-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pub-name {
    font-family: 'Pretendard', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #000;
}

.pub-slogan {
    font-family: 'Pretendard', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: #666;
}

.pub-icon {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
    color: #000;
    transition: transform 0.3s ease;
}

.pub-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 0;
}

.pub-item.active .pub-body {
    max-height: 2000px;
    padding: 0 0 1.5rem 0;
}

.pub-intro {
    font-family: 'Noto Serif KR', 'Batang', serif;
    font-size: 1rem;
    line-height: 1.9;
    color: #333;
    margin-bottom: 1.2rem;
}

.pub-book {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pub-book-cover {
    width: 60px;
    height: 80px;
    background: #e0e0e0;
    flex-shrink: 0;
}

.pub-book-title {
    font-family: 'Pretendard', sans-serif;
    font-size: 0.9rem;
    color: #666;
}

.pub-links {
    margin-bottom: 1.2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.pub-link {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    color: #888;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pub-link:hover {
    color: #000;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* =========================================
   [반응형] 태블릿 & 모바일 (1024px 이하)
   ========================================= */
@media (max-width: 1024px) {

    /* 1. 기둥 설정 */
    .left-bar {
        display: none;
    }

    /* 왼쪽 숨김 */

    /* PC용 짧은 제목은 숨기고, 긴 텍스트를 보여줌 */
    .title-text {
        display: none;
    }

    /* ★ [중요] 태블릿/모바일 기둥 텍스트 설정 ★ */
    .tablet-combined-text {
        display: block;
        /* vw 단위: 화면 너비에 따라 글자 크기가 변함
           숫자가 클수록 글자가 커집니다.
           화면에서 잘리지 않도록 이 숫자를 조절하세요.
        */
        font-size: 10vw;
        /* <--- 여기 숫자를 조절하세요! */
        font-weight: 700;
        line-height: 1;
    }

    /* ★ [조절] 태블릿/모바일 날짜 숫자 크기 ★
       아래 font-size를 조절하면 날짜 숫자만 크기가 변합니다.
       - 0.9em = 본문(this is text)의 90% 크기
       - 0.8em = 80% 크기 (더 작게)
       - 1.0em = 100% 크기 (동일)
       - 0.7em = 70% 크기 (훨씬 작게)
    */
    .tablet-combined-text .date-num {
        font-size: 0.83em;
        /* <--- 여기 숫자를 조절하세요! */
        vertical-align: bottom;
        /* 텍스트와 바텀라인 정렬 */
    }

    .right-bar {
        /* 세로쓰기 유지 */
        flex-direction: column;

        /* 오른쪽 정렬 유지 */
        justify-content: flex-start;
        align-items: flex-end;

        /* 폭을 조금 넓힘 */
        width: 15vw;
        padding-right: 1vw;

        background: #F0EEE9;
        /* 배경이 투명이면 뒤의 그림자가 비칠 수 있음. 꼭 흰색(#fff)이어야 함 */
        z-index: 100;
        /* 메뉴(99)보다 높아야 그림자가 기둥 위를 덮지 않음 */
        /* 오른쪽 여백 살짝 */
        user-select: none;
        /* 선택 불가 */
        pointer-events: none;
    }

    main {
        margin-left: 0;
        margin-right: 15vw;
        padding-top: 25px;
    }

    .masonry-grid {
        column-count: 1;
    }


    /* 2. 햄버거 버튼 */
    .menu-toggle-btn {
        display: flex;
        flex-direction: column;
        gap: 5px;
        position: fixed;
        top: 25px;
        right: 12vw;
        /* 기둥 옆 */
        z-index: 200;
        cursor: pointer;
        padding: 10px;
        transition: opacity 0.3s;
        /* 사라질 때 부드럽게 */
    }

    .menu-toggle-btn span {
        display: block;
        width: 25px;
        height: 2px;
        background: #000;
    }

    /* ★ [수정] 메뉴 열리면 버튼 투명하게 사라짐 (X 안 만듦) */
    .menu-toggle-btn.active {
        opacity: 0;
        pointer-events: none;
        /* 안 보이는데 눌리는 것 방지 */
    }


    /* 3. 메뉴 오버레이 (투명 막) */
    .menu-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;

        /* ★ [수정] 배경 완전 투명 (그림자 없음) */
        background-color: transparent;

        /* ★ [중요] Z-index 순서 정리 */
        /* 메뉴(99) > 오버레이(95) > 콘텐츠(기본) */
        z-index: 95;

        opacity: 0;
        visibility: hidden;
    }

    /* 오버레이 활성화되면 클릭을 받기 위해 보임 처리 */
    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }


    /* 4. 플로팅 메뉴 */
    .sidebar-menu {
        opacity: 0;
        visibility: hidden;
        transform: translateX(20px);
        top: 0;
        bottom: 0;
        height: 100vh;
        right: 15vw;
        /* 기둥 옆 */
        width: auto;
        min-width: 200px;

        /* ★ [중요] 메뉴는 오버레이보다 위에 있어야 함 */
        z-index: 99;

        background: #F0EEE9;
        padding: 25px 40px 40px 40px;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.08);
    }

    .sidebar-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .sidebar-menu ul {
        align-items: flex-end;
        gap: 0.5em;
    }

    .sidebar-menu li a {
        font-size: 1.2rem;
    }
}

/* 포스터들을 감싸는 통 */
.poster-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 가로 중앙 정렬 */
    gap: 100px;
    /* 포스터 사이 간격 넓게 */
    padding-bottom: 100px;
}

/* 개별 포스터 프레임 */
.poster-frame {
    /* 너비 100%로 꽉 차게 */
    width: 100%;
    height: auto;

    /* 이미지가 가운데 오도록 */
    display: flex;
    justify-content: center;
}

/* 포스터 이미지 스타일 */
.poster-frame img {
    /* 프레임 너비에 100% 맞춤 */
    width: 100%;
    height: auto;

    /* 비율 유지 */
    object-fit: contain;
}

/* 태블릿: 포스터 조정 */
@media (max-width: 768px) {
    .poster-frame {
        width: 100%;
    }
}

/* 모바일 */
@media (max-width: 600px) {
    /* 기존 width/margin overrides 제거하여 상위(tablet) 15vw 설정 상속 */

    .menu-toggle-btn {
        right: 13vw;
    }

    .sidebar-menu {
        right: 15vw;
        min-width: 150px;
    }

    /* 모바일에서 텍스트 크기 미세 조정 필요하면 여기서 */
    .tablet-combined-text {
        font-size: 10vw;
    }
}

/* =========================================
   INFO PAGE NAVIGATION (인포 페이지 내부 내비)
   ========================================= */
.info-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
    margin-top: -1rem;
    /* headline과 간격 조절 */
}

.info-nav-btn {
    font-family: 'IBM Plex Sans KR', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0.6rem 1.2rem;
    border: 1px solid black;
    background-color: transparent;
    color: black;
    text-decoration: none;
    border-radius: 10px;
    /* 둥근 버튼 50px -> 10px로 통일 */
    transition: all 0.3s ease;
}

.info-nav-btn:hover {
    background-color: black;
    color: white;
}

/* 앵커 이동 시 상단 여백 확보 (부드러운 이동 시 딱 붙지 않게) */
.info-block {
    scroll-margin-top: 100px;
}

/* --- 5. Footer (New) --- */
.site-footer {
    margin-top: 160px;
    padding-top: 40px;
    border-top: 1px solid #000;
    font-family: 'Space Grotesk', 'Pretendard', sans-serif;
    font-size: 0.9rem;
    color: #000;
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-logo {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 5px;
    display: block;
}

.footer-links {
    display: flex;
    gap: 20px;
}

.footer-links a {
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: opacity 0.2s;
}

.footer-links a:hover {
    opacity: 0.6;
}

.footer-bottom {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Mobile adjustments for Footer */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
    }
}

/* --- FAQ Static List Override --- */
.faq-body {
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 1.5rem !important;
}

.faq-header {
    cursor: default !important;
}

.faq-icon {
    display: none !important;
}

/* --- H2 margin adjustment (10% more) --- */
.info-block-title {
    margin-top: 1.1rem !important;
    /* Was 0, now 10% of spacing */
}

/* --- Info block divider style (matching sponsor-contact) --- */
.info-block {
    border-bottom: 2px solid #000 !important;
}

/* --- 후원 박스 Hover 시 텍스트 색상 강제 변경 (Fix) --- */

/* 1. 후원 등급(금액) 카드 마우스 오버 시 */
.sponsor-tier-card:hover .tier-benefits li {
    color: #fff !important;
}

/* 2. 후원사(목록) 카드 마우스 오버 시 */
.sponsor-card:hover .sponsor-name-en,
.sponsor-card:hover .sponsor-tagline,
.sponsor-card:hover .sponsor-desc {
    color: #fff !important;
    opacity: 1;
    /* 투명도가 있다면 선명하게 */
}

/* (옵션) 후원사 카드 오버 시 링크 버튼 테두리도 하얗게 */
.sponsor-card:hover .sponsor-link-btn {
    border-color: #fff;
    color: #fff;
}

/* (옵션) 후원사 카드 오버 상태에서 -> 버튼에 마우스 올렸을 때 (흰 배경/검은 글씨) */
.sponsor-card:hover .sponsor-link-btn:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}


/* --- 회차 정보 정렬 (Grid 수정버전) --- */
.schedule-container {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.schedule-row {
    display: grid;
    /* [핵심 수정] 너비를 '글자 크기'가 아니라 '고정 픽셀'로 박제합니다 */
    /* 1열(회차): 50px, 2열(구분선): 20px, 3열(시간): 나머지 */
    grid-template-columns: 46px 14px auto;
    align-items: center;
}

/* 구분선(|)을 그 칸의 정중앙에 위치시킴 */
.schedule-row .bar {
    color: #ccc;
    font-weight: 300;
    text-align: center;
    /* 가로 중앙 정렬 */
    transform: translateY(-2px);
    /* 살짝 위로 */
}

/* 시간 숫자(마지막 span)들이 흔들리지 않게 고정폭 숫자 적용 */
.schedule-row span:last-child {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: 0;
}