/* 메인 프로그램 타임라인을 재사용하는 세션 안내 페이지와 모달 스타일 */

/* =====================================================
    PROGRAM MODAL
===================================================== */

.sub-modal--program {
    align-items: center;
    overflow: hidden;
    padding: clamp(16px, 3vh, 32px) clamp(12px, 2vw, 24px);
}

.sub-modal--program .sub-modal__backdrop {
    background: rgba(8, 10, 16, 0.82);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.sub-modal--program .sub-modal__dialog {
    width: min(1080px, calc(100vw - 40px));
    height: min(740px, calc(100vh - 48px));
    max-height: calc(100vh - 48px);
    overflow: visible;
    border: 0;
    background: none;
    box-shadow: none;
}

.sub-modal--program .sub-modal__accent {
    display: none;
}

.sub-modal--program .section-programs__modal-dialog {
    width: 100%;
    height: 100%;
    max-height: 100%;
}

.sub-modal--program .sub-modal__close {
    top: clamp(16px, 2vw, 24px);
    right: clamp(16px, 2vw, 24px);
    z-index: 10;
    width: 44px;
    height: 44px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: all 0.25s cubic-bezier(0.2, 0, 0.1, 1);
}

.sub-modal--program .sub-modal__close:hover,
.sub-modal--program .sub-modal__close:focus-visible {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg) scale(1.08);
    outline: none;
}

.sub-modal--program .sub-modal__close span {
    background: currentColor;
}

.sub-modal--program .section-programs__modal-profile {
    background:
        radial-gradient(circle at 20% 18%, rgba(223, 255, 0, 0.08), transparent 36%),
        #151822;
}

.sub-modal--program .section-speakers__modal-profile-inner {
    padding-right: clamp(28px, 3vw, 44px);
    overflow-y: hidden;
}

.sub-modal--program .section-speakers__modal-name {
    font-size: clamp(26px, 2.5vw, 42px);
}

.sub-modal--program .section-speakers__modal-meta {
    margin-top: auto;
}

.sub-modal--program .section-programs__modal-content {
    background: rgba(16, 18, 26, 0.7);
}

.sub-modal--program .section-speakers__modal-avatar[hidden],
.sub-modal--program .section-speakers__modal-avatar img[hidden] {
    display: none;
}

.sub-modal--program .section-speakers__modal-country[hidden] {
    display: none;
}

.sub-modal--program .section-speakers__modal-country img {
    width: 22px;
    height: 16px;
    object-fit: cover;
}

/* =====================================================
    FORUM NOTICE
===================================================== */

.page-program .program-notice-section {
    max-width: var(--container-width);
    padding-inline: 0;
    padding-top: 0;
    padding-bottom: 40px;
}

/* forum 페이지 FACTS 스트립과 같은 시각 언어 — 옅은 컬러 틴트 패널 +
   about의 `section-speakers__forum-kicker`/`forum-topic` 타이포. */
/* forum FACTS 패널과 같은 여백 값(32px / clamp 44px)으로 통일. */
.page-program .program-notice {
    padding: 32px clamp(24px, 3vw, 44px);
    background: var(--sub-red-soft);
    border-radius: 18px;
}

/* forum FACTS의 국가:장소:일정 비율(1:1.7:1.3)과 동일하게 맞춘다. */
/* PC(1320px 이상)에서만 유효한 값 — 태블릿부터는 아래에서 1단으로
   바뀐다. 국가 칸 폭을 아래 타임라인의 구분(index-item)과 맞춘다. */
.page-program .program-notice__meta {
    display: grid;
    grid-template-columns: 275px 1.7fr 1.3fr;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-program .program-notice__meta li {
    padding: 0 clamp(20px, 3vw, 36px);
    border-left: 1px solid rgba(244, 61, 48, 0.18);
}

.page-program .program-notice__meta li:first-child {
    padding-left: 0;
    border-left: 0;
}

.page-program .program-notice__meta li:last-child {
    padding-right: 0;
}

/* 라벨 — about의 `section-speakers__forum-kicker`와 같은 톤
   (20px / 700 / 0.02em / 대문자 / 포인트 컬러). */
.page-program .program-notice__meta strong {
    display: block;
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--sub-red);
}

/* 값 — forum FACTS의 dd와 같은 톤(28px / 700 / 1.35 / 검정)으로 통일. */
.page-program .program-notice__meta span {
    display: block;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--sub-black);
    word-break: keep-all;
}

html[lang="en"] .page-program .program-notice__meta span {
    font-size: 26px;
}

/* =====================================================
    PROGRAM SECTION
===================================================== */

.page-program .program-section {
    position: relative;
    min-height: 100%;
    padding-top: 0;
    overflow: hidden;
    color: #111111;
    background: #ffffff;
    border-top: 0;
}

.page-program .program-section--schedule {
    padding-bottom: clamp(64px, 6vw, 88px);
}

.page-program .program-section__line {
    position: absolute;
    z-index: 0;
    width: 700px;
    height: 700px;
    border: 1px solid rgba(30, 79, 161, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.page-program .program-section__line--one {
    top: 80px;
    right: -520px;
}

.page-program .program-section__line--two {
    bottom: -520px;
    left: -360px;
    border-color: rgba(244, 61, 48, 0.08);
}

.page-program .section-programs__schedule-wrap {
    position: relative;
    z-index: 2;
    margin-top: 0;
}

.page-program .section-programs__schedule-wrap,
.page-program .section-programs__schedule-layout,
.page-program .section-programs__item,
.page-program .section-programs__index-item,
.page-program .section-programs__session {
    background: #ffffff;
}

.page-program .section-programs__timeline {
    border-color: rgba(17, 17, 17, 0.22);
}

.page-program .program-schedule__notice {
    position: relative;
    z-index: 2;
    margin: 16px auto 0;
    font-size: 18px;
    line-height: 1.6;
    text-align: right;
    color: var(--sub-muted);
    word-break: keep-all;
}

/* =====================================================
    2026-08-30 프로그램 타임라인 리디자인
    (되돌릴 땐 이 블록만 백업본으로 교체하면 됨 —
    program.css.bak / programs.css.bak / program-timeline.php.bak)
===================================================== */

.page-program .section-programs__item {
    position: relative;
    border-color: rgba(17, 17, 17, 0.1);
    transition: background-color 0.25s ease;
}

.page-program .section-programs__item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--sub-blue);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.25s ease;
}

.page-program .section-programs__item:hover {
    background: #f8f9fb;
}

.page-program .section-programs__item:hover::before {
    transform: scaleY(1);
}

.page-program .section-programs__item:hover .section-programs__index-item,
.page-program .section-programs__item:hover .section-programs__session {
    background: transparent;
}

.page-program .section-programs__index-item {
    border-color: rgba(17, 17, 17, 0.1);
}

.page-program .section-programs__speaker strong {
    color: #111111;
}

/* inc/css/programs.css는 메인페이지와 공유되는 전역 스타일이라 거기서 크기를
   바꾸면 메인페이지에도 영향을 준다. 이 페이지에서만 고정 크기로 오버라이드.
   세 단계 위계: 구분(개회식/기조연설 등, 대) > 세부설명(session-title, 중)
   > 시간(소) — 순서는 DOM 그대로(구분 -> 시간), 세부설명은 오른쪽 칸. */
.page-program .section-programs__index-item {
    padding: 40px 32px 40px 0;
    gap: 10px;
}

.page-program .section-programs__index-title {
    margin: 0;
    padding-left: 14px;
    font-family: var(--font-sans, "Pretendard", sans-serif);
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--sub-black);
}

.page-program .section-programs__index-meta {
    margin: 0;
}

/* 흰 배경 기준 오버라이드 — 기본값(inc/css/programs.css)이 검정 배경용
   흰 글자라 세부설명이 흰 바탕에 흰 글자로 안 보이고 있었다. */
.page-program .section-programs__session-title {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #111111;
}

.page-program .section-programs__index-item time,
.page-program .section-programs__index-item time span {
    font-family: var(--font-sans, "Pretendard", sans-serif);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 0;
    color: rgba(17, 17, 17, 0.48);
}

.page-program .section-programs__session-label {
    color: var(--sub-blue);
}

.page-program .section-programs__speakers {
    border-color: rgba(17, 17, 17, 0.14);
}

.page-program .section-programs__speaker-presentation {
    color: rgba(17, 17, 17, 0.78);
}

.page-program .section-programs__speaker img {
    box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.16);
}

.page-program .section-programs__speaker span {
    color: rgba(17, 17, 17, 0.58);
}

.page-program .section-programs__speaker--with-topic:hover {
    background: #f7f7f4;
}

/* =====================================================
    EVENT OVERVIEW
===================================================== */

.page-program .program-overview {
    position: relative;
    padding: 0 0 var(--sub-section-block-end);
    color: #111111;
    background: #ffffff;
}

.page-program .program-overview__heading {
    margin-bottom: 24px;
}

.page-program .program-overview__heading h2,
.page-program .program-overview__list,
.page-program .program-overview__item dt,
.page-program .program-overview__item dd {
    margin: 0;
}

.page-program .program-overview__heading h2 {
    font-size: var(--sub-title-size);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.035em;
}

.page-program .program-overview__list {
    border-top: 1px solid rgba(17, 17, 17, 0.32);
}

.page-program .program-overview__item {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 30px;
    align-items: baseline;
    padding: 18px 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.14);
}

.page-program .program-overview__item dt {
    color: rgba(17, 17, 17, 0.58);
    font-size: 15px;
    font-weight: 700;
}

.page-program .program-overview__item dd {
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

/* =====================================================
    RESPONSIVE
===================================================== */

/* 태블릿 (~1320px) */
@media (max-width: 1320px) {
    /* 데스크톱 고정값(46/32/21px)이 모바일까지 그대로 적용돼 가독성이
       떨어졌다. 태블릿에서 한 단계, 모바일(500px)에서 한 단계 더 줄인다. */
    .page-program .section-programs__index-title {
        font-size: 36px;
    }

    .page-program .section-programs__session-title {
        font-size: 24px;
    }

    .page-program .section-programs__index-item time,
    .page-program .section-programs__index-item time span {
        font-size: 17px;
    }

    .sub-modal--program .sub-modal__dialog {
        width: min(720px, calc(100vw - 24px));
        height: auto;
        max-height: calc(100vh - 32px);
    }

    .sub-modal--program .section-programs__modal-dialog {
        height: auto;
        max-height: calc(100vh - 32px);
    }

    .page-program .program-notice-section {
        padding-bottom: 28px;
    }

    .page-program .program-notice {
        padding: 26px 22px;
        border-radius: 14px;
    }

    .page-program .program-notice__meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-program .program-notice__meta li {
        padding: 18px 0;
        border-left: 0;
        border-top: 1px solid rgba(244, 61, 48, 0.18);
    }

    .page-program .program-notice__meta li:first-child {
        padding-top: 0;
        border-top: 0;
    }

    .page-program .program-notice__meta li:last-child {
        padding-bottom: 0;
    }

    .page-program .program-section {
        min-height: auto;
    }

    .page-program .program-section--schedule {
        padding-bottom: 52px;
    }

    .page-program .program-overview__heading {
        margin-bottom: 20px;
    }

    .page-program .program-overview__item {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 14px;
        padding: 16px 0;
    }

    .page-program .program-overview__item dt {
        font-size: 14px;
    }

    .page-program .program-overview__item dd {
        font-size: 16px;
        line-height: 1.5;
    }

    .sub-modal--program {
        align-items: center;
        padding: 12px 8px;
    }

    .sub-modal--program .sub-modal__dialog {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }

    .sub-modal--program .section-programs__modal-dialog {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }
}

/* 모바일 (~500px) */
@media (max-width: 500px) {
    .page-program .program-notice__meta strong {
        font-size: 16px;
    }

    .page-program .program-notice__meta span,
    html[lang="en"] .page-program .program-notice__meta span {
        font-size: 22px;
    }

    /* 구분(index-title)과 시간(index-meta)을 세로 스택 대신 한 줄로 배치. */
    .page-program .section-programs__index-item {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 10px;
    }

    /* 세부설명(session-title)과 구분 짓기 위해 앞에 파란 세로 바를 둔다. */
    .page-program .section-programs__index-title {
        margin-bottom: 0;
        margin-left: 8px;
        padding-left: 12px;
        border-left: 3px solid var(--sub-blue);
        font-size: 26px;
    }

    .page-program .section-programs__session-title {
        font-size: 19px;
    }

    /* 세션(오른쪽 흰 영역) 상하 여백을 줄여 높이를 조금 낮춘다. */
    .page-program .section-programs__session {
        padding: 20px 20px 24px;
    }

    .page-program .section-programs__index-item time,
    .page-program .section-programs__index-item time span {
        font-size: 14px;
    }
}