/* =====================================================
    FORUM PAGE
===================================================== */

/* 히어로 아래 여백은 섹션 padding이 아니라 이 선이 직접 갖도록 모아 둔다.
   (about 페이지와 동일한 기준) */
.page-forum .sub-hero__rule {
    width: 100px;
    height: 3px;
    margin: var(--sub-hero-space) 0 40px;
    border: 0;
    background: var(--sub-blue);
}

.page-forum .sub-hero.sub-pad--hero {
    padding-bottom: 0;
}

/* 섹션 머리말 — about의 `about-structure__kicker`와 같은 톤. */
.page-forum .forum-side-title {
    display: block;
    margin: 0 0 20px;
    padding-top: 0;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: var(--sub-black);
    word-break: keep-all;
}

.page-forum .forum-side-title span {
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--sub-black);
}

/* =====================================================
    INTRO
===================================================== */

/* 제목을 좁은 좌측 열에 가두면 lang의 <br>로 의도한 3줄이 계속 깨졌다.
   제목은 전체 폭을 쓰는 스테이트먼트로 올리고, 본문은 그 아래 3단으로 내린다.
   (about의 `about-structure` — 큰 머리말 + 3열 그리드와 같은 리듬) */
.page-forum .forum-intro {
    position: relative;
}

.page-forum .forum-intro__inner {
    position: relative;
    z-index: 1;
    display: block;
}

.page-forum .forum-intro__heading {
    display: block;
    margin: 0;
}

/* PIC 브랜드 마크에서 가져온 아치 — 색은 아래 3단 상단선, 그리고 about의
   `about-program-grid` 카드 색 순서(빨강/파랑/노랑)와 같은 값으로 맞춘다.
   원 브랜드 노랑(#F8F400)은 흰 배경에서 거의 보이지 않아, about이 같은
   이유로 쓰는 짙은 금색으로 대체한다.
   텍스트만 있으면 오른쪽이 휑해 보여, 크게 키워 옅은 배경 장식으로 깔고
   아주 미세하게 떠다니듯 움직인다(archive-forum-section__circle과 같은
   배경 장식 패턴 — position:absolute + z-index:0 + pointer-events:none). */
.page-forum .forum-intro__mark {
    display: block;
    position: absolute;
    top: 38%;
    right: clamp(-40px, 3vw, 20px);
    width: clamp(260px, 28vw, 460px);
    height: auto;
    transform: translateY(-50%);
    opacity: 0.07;
    z-index: 0;
    pointer-events: none;
    animation: forum-intro-mark-drift 14s ease-in-out infinite;
}

@keyframes forum-intro-mark-drift {
    0%, 100% {
        transform: translateY(-50%) rotate(0deg);
    }
    50% {
        transform: translateY(calc(-50% - 14px)) rotate(3deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-forum .forum-intro__mark {
        animation: none;
    }
}

.page-forum .forum-intro__mark-arc--red {
    stroke: var(--sub-red);
}

.page-forum .forum-intro__mark-arc--blue {
    stroke: var(--sub-blue);
}

.page-forum .forum-intro__mark-arc--gold {
    stroke: #c9a227;
}

/* 전체 폭으로 올리면서 48px을 그대로 뒀더니, 짧은 3줄을 큰 글씨로 강제 개행한
   모양이 돼 투박해 보였다. 섹션 제목(48px)과 본문성 제목(32px) 사이 크기로 잡아,
   전체 폭을 버티면서도 강제 개행이 투박해 보이지 않는 선을 맞춘다. */
.page-forum .forum-intro__heading h2 {
    margin: 0;
    max-width: 100%;
    font-size: clamp(22px, 2.8vw, 36px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.025em;
    color: var(--sub-black);
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 밑줄 형광펜 대신 인용부호로 강조한다. 본문에서 이미 작은따옴표(‘혁신’)를 쓰고
   있어 구분되게 겹따옴표를 쓰고, 글자색도 브랜드 블루로 올려 포인트를 준다. */
.page-forum .forum-intro__quote {
    color: var(--sub-blue);
}

.page-forum .forum-intro__quote::before,
.page-forum .forum-intro__quote::after {
    color: var(--sub-blue);
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}

.page-forum .forum-intro__quote::before {
    content: "\201C";
    margin-right: 0.03em;
}

.page-forum .forum-intro__quote::after {
    content: "\201D";
    margin-left: 0.03em;
}

/* 좁은 3단으로 나눴더니 줄이 짧아져(약 22자) 오히려 읽기 어려웠다.
   문단 구분은 유지하되 컨테이너 전체 폭 한 흐름으로 위아래로 쌓는다.
   (about의 `about-asean__desc` — 문단만 나뉜 한 흐름의 글과 같은 처리) */
.page-forum .forum-intro__body {
    display: block;
    margin-top: 40px;
}

/* 색선 장식 바 대신, about이 메인페이지 포럼 블록을 흰 배경용으로 각색한 것과
   같은 서체로 바꾸고 문장 안 핵심 어구에 형광펜 하이라이트를 직접 준다.
   (about의 `.section-speakers__forum-desc` 오버라이드와 동일한 값) */
.page-forum .forum-intro__lead {
    margin: 0;
    font-family: var(--font-sans, "Pretendard", sans-serif);
    font-size: var(--sub-lead-size);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.015em;
    color: var(--sub-black);
    word-break: keep-all;
    /* balance는 짧은 헤드라인용이라 지금처럼 여러 줄짜리 본문에 쓰면
       브라우저가 줄 길이를 억지로 맞추려다 오히려 부자연스러워진다. */
    text-wrap: pretty;
}

/* text-highlight는 원래 어두운 배경(메인페이지 포럼 블록) 기준으로 흰 글자 +
   원색 형광펜을 쓴다. 흰 배경인 이 페이지에서는 글자를 검정으로 바꾸고,
   원색은 about과 같은 이유로 알파 0.7로 낮춰 형광펜 느낌으로만 쓴다.
   (about의 `.section-speakers .text-highlight` 오버라이드와 동일한 값) */
.page-forum .v3-intro__highlight,
.page-forum .text-highlight {
    color: var(--sub-black);
}

.page-forum .text-highlight--lime {
    --text-highlight-color: rgba(223, 255, 0, 0.7);
}

.page-forum .text-highlight--mint {
    --text-highlight-color: rgba(110, 231, 196, 0.7);
}

.page-forum .text-highlight--yellow {
    --text-highlight-color: rgba(242, 212, 0, 0.7);
}

.page-forum .text-highlight--blue {
    --text-highlight-color: rgba(47, 107, 255, 0.7);
}

/* =====================================================
    VISUAL / PIC MOTION BANNER
===================================================== */

.page-forum .forum-visual__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 0 38px;
}

.page-forum .forum-visual__head span {
    font-size: 24px;
    font-weight: 700;
    color: var(--sub-blue);
}

.page-forum .forum-visual__head h2 {
    margin: 0;
    font-size: clamp(24px, 2.4vw, 30px);
    letter-spacing: -0.03em;
}

.page-forum .pic-motion-section {
    --pic-paper: #6b6b6e;
    --pic-ink: #111113;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.page-forum .pic-motion {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    overflow: hidden;
    color: var(--pic-ink);
    background: var(--pic-paper);
    border: 0;
    border-radius: 4px;
    aspect-ratio: 846 / 173;
    isolation: isolate;
}

.page-forum .pic-motion video {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* about vision의 오버레이와 같은 구성 — 전체를 살짝 눌러 흰 글자 대비를 확보하고,
   가로 그라데이션으로 가운데 카피 뒤를 조금 더 어둡게 잡는다. */
.page-forum .pic-motion::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)),
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.18) 42%,
            rgba(0, 0, 0, 0.28) 100%
        );
}

.page-forum .pic-motion__copy {
    position: absolute;
    top: 50%;
    right: clamp(18px, 3vw, 54px);
    left: clamp(18px, 3vw, 54px);
    z-index: 4;
    text-align: center;
    transform: translateY(-42%);
    color: #ffffff;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.18);
}

/* 76px까지 커지면 이 배너 하나만 페이지에서 튄다. about vision의 제목 톤
   (--sub-title-size / 700 / -0.03em)에 맞춰 다른 섹션 제목과 층을 맞춘다. */
.page-forum .pic-motion__copy h2 {
    margin: 0;
    font-size: var(--sub-title-size);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.page-forum .pic-motion__copy p {
    margin: 12px 0 0;
    font-size: var(--sub-lead-size);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.015em;
    color: rgba(255, 255, 255, 0.92);
}

@media (prefers-reduced-motion: reduce) {
    .page-forum .pic-motion video {
        display: none;
    }
}

/* =====================================================
    FACTS
===================================================== */

/* 국가/장소/일정처럼 서로 붙어 있는 정보를 카드로 쪼개지 않고 한 줄짜리
   바(스트립)로 묶는다. 두 그룹(개최정보/상세내용)을 위아래로 쌓는다.
   흰 배경 + 헤어라인만으로는 존재감이 약해, 그룹 색의 옅은 틴트 패널로
   감싸 눈에 띄게 하고, 패널 안에서는 세로 헤어라인으로 항목을 나눈다. */
.page-forum .forum-fact-stack {
    display: grid;
    row-gap: 32px;
}

.page-forum .forum-fact-group {
    --group-accent: var(--sub-red);
    display: grid;
    row-gap: 16px;
}

.page-forum .forum-fact-group--detail {
    --group-accent: var(--sub-blue);
}

/* 두 정보 박스의 공통 서브타이틀 — 상위 섹션 제목보다 한 단계 작은 라벨 톤. */
.page-forum .forum-fact-group__title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--group-accent);
    word-break: keep-all;
}

.page-forum .forum-fact-strip {
    --item-accent: var(--sub-red);
    --item-accent-soft: var(--sub-red-soft);
    --item-divider: rgba(244, 61, 48, 0.18);
    padding: 32px clamp(24px, 3vw, 44px);
    background: var(--item-accent-soft);
    border-radius: 18px;
}

.page-forum .forum-fact-strip--blue {
    --item-accent: var(--sub-blue);
    --item-accent-soft: var(--sub-blue-soft);
    --item-divider: rgba(30, 79, 161, 0.18);
}

/* 개최국가=포럼주제, 개최장소=포럼구성, 개최일정=협력기관 — 두 행의 각
   칸 폭을 동일하게 맞춘다. 주제 값에 "...경제화:<br>IP 기반..."처럼 의도한
   줄바꿈 지점이 있는데 폭이 좁으면 그 앞에서 먼저 꺾이므로, 그 지점만
   지키는 비율(1.6:1.1:1.1)을 두 행 모두에 쓴다. */
/* fr은 전체 합에 대한 비율이라, 2번째 칸만 키우면 전체 합이 커져서
   1번째 칸의 실제 폭까지 줄어든다. 1번째 칸 폭은 그대로 두기 위해
   3번째 칸에서 그만큼(0.2) 덜어와 전체 합을 이전과 동일하게 유지한다. */
.page-forum .forum-fact-strip__row {
    display: grid;
    grid-template-columns: 1.25fr 1.33fr 0.87fr;
}

/* 영문 개최일정은 지정한 두 줄이 다시 꺾이지 않도록 날짜 열의 실제 내용 폭을 확보한다. */
@media (min-width: 1321px) {
    html[lang="en"] .page-forum .forum-fact-strip__row--event {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) max-content;
    }
}

/* 포럼주제가 콜론 뒤에서 2줄로 꺾이면서, 커진 글자(dt 20px / dd 32px) 대비
   라벨-값 간격(14px)이 빡빡해 보였다. */
.page-forum .forum-fact-strip__row--detail dt {
    margin-bottom: 14px;
}

/* 항목 사이 좌우 여백 — 개최정보/상세정보 두 행 모두 동일하게 넉넉히 준다. */
.page-forum .forum-fact-strip__item {
    padding: 0 clamp(24px, 3.5vw, 44px);
    border-left: 1px solid var(--item-divider);
}

.page-forum .forum-fact-strip__item:first-child {
    padding-left: 0;
    border-left: 0;
}

.page-forum .forum-fact-strip__item:last-child {
    padding-right: 0;
}

/* about의 `section-speakers__forum-kicker`와 같은 라벨 톤
   (20px / 700 / 0.02em / 대문자 / 포인트 컬러)으로 통일한다. */
.page-forum .forum-fact-strip__item dt {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--item-accent);
}

/* about의 라벨 밑 값 텍스트(`section-speakers__forum-topic`)와 같은 톤
   (--sub-mini-title-size / 700 / 1.4 / 검정)으로 통일한다. */
.page-forum .forum-fact-strip__item dd {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--sub-black);
    word-break: keep-all;
}

/* 영문은 한글보다 길어 같은 크기에서 줄 수가 늘어난다. about과 같은 이유로
   한 단계 줄인다. */
html[lang="en"] .page-forum .forum-fact-strip__item dd {
    font-size: 26px;
}

/* 협력기관 — 쉼표로 나열된 값을 칩(chip) 목록으로, 한 줄에 하나씩. */
.page-forum .forum-fact-chips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* 옆 두 항목(dd, 32px)과 나란히 있을 때 15px는 유독 작아 보였다.
   배지 형태는 유지하되 글자 크기를 형제 값들과 비슷하게 키운다. */
.page-forum .forum-fact-chip {
    padding: 10px 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--item-accent);
    background: var(--sub-white);
    border: 1px solid rgba(17, 17, 17, 0.1);
    border-radius: 999px;
}

/* =====================================================
    STATEMENT
===================================================== */

.page-forum .forum-statement {
    display: flex;
    align-items: center;
    width: 100%;
    aspect-ratio: 846 / 175;
    background-color: #fafaf8;
    background-image:
        linear-gradient(rgba(17, 17, 17, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 17, 17, 0.06) 1px, transparent 1px);
    background-size: 18px 18px;
    color: var(--sub-black);
    padding: 0;
    box-sizing: border-box;
}

.page-forum .forum-statement__grid {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
}

.page-forum .forum-statement__grid > :not(h2) {
    display: none;
}

.page-forum .forum-statement__grid > span {
    font-size: 24px;
    letter-spacing: 0.1em;
    color: var(--sub-blue);
}

.page-forum .forum-statement__grid h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: var(--sub-title-size);
    line-height: 1.2;
    letter-spacing: -0.05em;
    text-shadow:
        0 0 2px #fff,
        0 0 6px #fff,
        0 0 14px #fff,
        0 0 28px #fff,
        0 0 48px #fff,
        0 0 80px rgba(255, 255, 255, 1),
        0 0 120px rgba(255, 255, 255, 0.95);
}

.page-forum .forum-statement__grid h2::before {
    content: "";
    position: absolute;
    inset: -40% -20%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.55) 35%,
        rgba(255, 255, 255, 0.15) 60%,
        transparent 75%
    );
}

.page-forum .forum-statement__grid p {
    margin: 8px 0 0;
    color: #222;
    font-size: 18px;
    line-height: 1.8;
}

/* =====================================================
    CONTENT
===================================================== */

.page-forum .forum-content {
    display: block;
}

.page-forum .forum-content .forum-side-title {
    margin-bottom: 48px;
}

.page-forum .forum-content__body > :not(h2):not(.forum-content__coming-soon) {
    display: none;
}

.page-forum .forum-content__body h2 {
    margin: 0 0 48px;
    font-size: var(--sub-title-size);
}

.page-forum .forum-content__coming-soon {
    width: 100vw;
    max-width: 100vw;
    margin: 0 calc(50% - 50vw);
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid #dededa;
    background: #f5f5f5;
    font-size: var(--sub-lead-size);
    font-weight: 700;
    color: var(--sub-muted);
    letter-spacing: -0.03em;
    box-sizing: border-box;
}

.page-forum .forum-content__lead {
    margin: 0 0 70px;
    font-size: var(--sub-lead-size);
    font-weight: 600;
    line-height: 1.55;
}

.page-forum .forum-content__lead::after {
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 28px;
    background: #dededa;
    content: "";
}

.page-forum .forum-content__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
}

.page-forum .forum-content__columns p {
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
}

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

/* 좁은 화면에서는 배경 장식이 텍스트 위로 두드러지지 않도록 더 작고 옅게. */

/* 767px 이하 */

/* 480px 이하 */

/* 320px 이하 */

/* 태블릿 (~1320px) */
@media (max-width: 1320px) {
    .page-forum .forum-fact-strip__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-forum .forum-fact-strip__item {
        padding: 20px 0;
        border-left: 0;
        border-top: 1px solid var(--sub-line);
    }

    .page-forum .forum-fact-strip__item:first-child {
        padding-top: 0;
        border-top: 0;
    }

    .page-forum .forum-fact-strip__item:last-child {
        padding-bottom: 0;
    }

    /* 태블릿 구간부터 라벨(20px)/값(28px)이 커 보여 한 단계 줄인다. */
    .page-forum .forum-fact-strip__item dt {
        font-size: 18px;
    }

    .page-forum .forum-fact-group__title {
        font-size: 26px;
    }

    .page-forum .forum-fact-strip__item dd {
        font-size: 24px;
    }

    html[lang="en"] .page-forum .forum-fact-strip__item dd {
        font-size: 22px;
    }

    .page-forum .forum-content {
        display: block;
    }

    .page-forum .pic-motion {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 250px;
        aspect-ratio: auto;
        padding: 80px 24px;
        box-sizing: border-box;
    }

    .page-forum .pic-motion__copy {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        transform: none;
    }

    .page-forum .pic-motion__copy h2 {
        max-width: 440px;
        margin: 0 auto;
        font-size: clamp(34px, 9vw, 54px);
        line-height: 0.95;
        white-space: normal;
    }

    .page-forum .pic-motion__copy p {
        max-width: 440px;
        margin: 12px auto 0;
        font-size: clamp(16px, 3.2vw, 22px);
        line-height: 1.4;
    }

    /* about-structure__kicker 등 다른 타이틀류와 같은 단계(42 -> 36 -> 28). */
    .page-forum .forum-side-title {
        font-size: 36px;
    }

    .page-forum .forum-visual__head {
        display: block;
    }

    .page-forum .forum-visual__head h2 {
        margin-top: 10px;
    }

    .page-forum .forum-statement {
        padding: 80px 0;
    }

    .page-forum .forum-statement__grid {
        display: block;
    }

    .page-forum .forum-statement__grid h2 {
        margin: 25px 0;
    }

    .page-forum .forum-content__lead {
        margin-bottom: 50px;
    }

    .page-forum .forum-content__columns {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .page-forum .forum-statement {
        min-height: 250px;
        aspect-ratio: auto;
    }
}

/* 모바일 (~500px) */
@media (max-width: 500px) {
    .page-forum .forum-intro__mark {
        width: clamp(160px, 46vw, 240px);
        opacity: 0.05;
    }

    .page-forum .forum-fact-strip {
        padding: 28px 22px;
        border-radius: 14px;
    }

    /* 좁은 화면에 1단으로 쌓이면 라벨(20px)/값(28px)이 커 보인다. */
    .page-forum .forum-fact-strip__item dt {
        font-size: 16px;
    }

    .page-forum .forum-fact-group__title {
        font-size: 24px;
    }

    .page-forum .forum-fact-strip__item dd {
        font-size: 22px;
    }

    html[lang="en"] .page-forum .forum-fact-strip__item dd {
        font-size: 20px;
    }

    .page-forum .pic-motion__copy h2 {
        line-height: 1.2;
    }

    .page-forum .forum-side-title {
        font-size: 28px;
        flex-direction: column;
        gap: 6px;
    }
}