/* =========================================================
    ABOUT PAGE
========================================================= */

.page-about .desktop-only {
    display: inline;
}

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

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

/* =========================================================
    FORUM (메인 페이지 섹션 재사용, 흰 배경 + 타이틀/서브타이틀 숨김)
========================================================= */

.page-about .section-speakers,
.page-about .section-speakers.section.is-visible {
    border-top: 0;
    padding-top: 0;
    background: var(--sub-white);
    color: var(--sub-black);
}

/* 메인페이지 폭(1320px, 여백 없음) 대신 다른 about 섹션과 동일한
   page-container 폭/여백 기준(1320px + 반응형 패딩)을 맞춘다. */
.page-about .section-speakers > .container {
    width: 100%;
    max-width: var(--sub-container-max);
    padding-inline: var(--sub-container-pad);
    margin-inline: auto;
    box-sizing: border-box;
}

.page-about .section-speakers__deco {
    display: none;
}

/* 페이지 상단 sub-hero의 h1이 이미 이 페이지의 제목 역할을 하므로,
   메인페이지에서 딸려온 이너브로우/타이틀은 노출하지 않는다. */
.page-about .section-speakers__forum-eyebrow,
.page-about .section-speakers__forum-title {
    display: none;
}

/* about-structure가 자체 padding-top(--sub-section-after-hero)을 이미 가지고 있어,
   메인페이지용 하단 margin(최대 72px)까지 더하면 다음 섹션과의 간격이 이중으로 벌어진다. */
.page-about .section-speakers__forum {
    margin-bottom: 0;
}

.page-about .section-speakers__forum-intro {
    margin-bottom: 40px;
}

/* 메인페이지의 대형 히어로용 카피(최대 42px, 대문자, 볼드) 대신,
   페이지 도입부를 여는 리드 문단 톤으로 정리한다. */
.page-about .section-speakers__forum-desc {
    display: block;
    font-family: var(--font-sans, "Pretendard", sans-serif);
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem) !important;
    font-weight: 500;
    line-height: 1.8 !important;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--sub-black);
    word-break: keep-all;
    /* 문장 흐름을 유지하면서 마지막 줄의 짧은 자투리만 완화한다.
       미지원 브라우저에서는 기본 줄바꿈으로 자연스럽게 폴백한다. */
    text-wrap: pretty;
}

/* 메인페이지에서는 세 줄이 우/좌로 어긋나는 지그재그 연출이라 각 줄이
   block+width:100%였는데, 그대로 두면 문장 중간에서 강제 개행된 것처럼 보인다.
   inline으로 풀어 한 문단으로 자연스럽게 흐르게 한다. */
.page-about .speakers-intro__line,
.page-about .speakers-intro__line--right,
.page-about .speakers-intro__line--full,
.page-about .speakers-intro__line--left {
    display: inline;
    width: auto;
    text-align: left;
}

.page-about .section-speakers .v3-intro__highlight,
.page-about .section-speakers .text-highlight {
    color: var(--sub-black);
}

/* 메인페이지는 어두운 배경이라 형광에 가까운 원색 밑줄이 어울렸지만,
   흰 배경인 이 페이지에서는 너무 진해 글자를 읽는 데 방해가 된다.
   같은 색을 알파 0.7로 낮춰 형광펜 느낌으로 쓴다. */
.page-about .section-speakers .v3-intro__highlight--lime,
.page-about .section-speakers .text-highlight--lime {
    --v3-highlight-color: rgba(223, 255, 0, 0.7);
    --text-highlight-color: rgba(223, 255, 0, 0.7);
}

.page-about .section-speakers .v3-intro__highlight--mint,
.page-about .section-speakers .text-highlight--mint {
    --v3-highlight-color: rgba(110, 231, 196, 0.7);
    --text-highlight-color: rgba(110, 231, 196, 0.7);
}

.page-about .section-speakers .v3-intro__highlight--yellow,
.page-about .section-speakers .text-highlight--yellow {
    --v3-highlight-color: rgba(242, 212, 0, 0.7);
    --text-highlight-color: rgba(242, 212, 0, 0.7);
}

.page-about .section-speakers .v3-intro__highlight--blue,
.page-about .section-speakers .text-highlight--blue {
    --v3-highlight-color: rgba(47, 107, 255, 0.7);
    --text-highlight-color: rgba(47, 107, 255, 0.7);
}

/* 주제/일정 블록: 메인페이지에서는 라벨이 왼쪽에 붙는 2단 그리드였는데,
   about 페이지에서는 라벨을 구분선 위 소제목으로 올려 위 섹션들과 같은
   "작은 라벨 → 내용" 흐름을 따르게 한다. */
.page-about .section-speakers__forum-content {
    gap: 0;
}

.page-about .section-speakers__forum-block {
    display: block;
    padding-top: 28px;
    border-top: 1px solid var(--sub-line);
}

.page-about .section-speakers__forum-block--schedule {
    margin-top: 40px;
}

.page-about .section-speakers__forum-label-col {
    padding-top: 0;
}

.page-about .section-speakers__forum-kicker {
    font-family: var(--font-sans, "Pretendard", sans-serif);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--sub-blue);
}

/* 메인페이지의 큰 상단 여백(35px)은 라벨이 옆에 있을 때 기준이라,
   라벨이 위로 올라온 지금 구조에서는 과하다. */
.page-about .section-speakers__forum-topic,
.page-about .section-speakers__forum-schedule {
    margin-top: 14px;
}

.page-about .section-speakers__forum-topic {
    font-family: var(--font-sans, "Pretendard", sans-serif);
    font-size: var(--sub-mini-title-size);
    font-weight: 700;
    line-height: 1.4;
    color: var(--sub-black);
}

/* 영문 포럼 주제는 한글보다 길어 같은 크기에서 줄 수가 늘어난다. 한 단계 줄인다. */
html[lang="en"] .page-about .section-speakers__forum-topic {
    font-size: 30px;
}

.page-about .section-speakers__forum-event {
    padding: 20px 22px;
    background: #f8f8f6;
    border: 1px solid var(--sub-line);
    border-radius: 10px;
}

/* 카드 제목(포럼/전시)은 파란 라벨 배지로 처리해 아래 일정 정보와 층을 나눈다. */
.page-about .section-speakers__forum-event-title {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 14px;
    font-family: var(--font-sans, "Pretendard", sans-serif);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--sub-white);
    background: var(--sub-blue);
    border-radius: 4px;
}

/* 날짜 / 장소·국가가 같은 굵기로 3줄 나열돼 어느 게 중요한지 읽히지 않았다.
   날짜는 크게 올리고 장소는 한 줄로 합쳐 옅게 내린다. */
.page-about .section-speakers__forum-event-meta {
    display: grid;
    gap: 4px;
    font-size: 17px;
    line-height: 1.5;
    color: var(--sub-gray, #4b5563);
}

.page-about .section-speakers__forum-event-date {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--sub-black);
}

.page-about .section-speakers__forum-event-place {
    font-size: 17px;
    color: var(--sub-gray, #4b5563);
}

/* =========================================================
    VISION
========================================================= */

.page-about .about-vision {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #0b0b0b;
    color: #ffffff;
}

.page-about .about-vision__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.page-about .about-vision__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    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-about .about-vision__bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 1000px을 기준으로 좌우 2단 / 위아래 1단을 명확히 나눈다.
   min-height(620px) 대신 padding으로 같은 정도의 높이를 낸다 — 배경 비디오는
   이 그리드(유일한 in-flow 자식)의 실제 높이만큼 채워진다. */
.page-about .about-vision__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.95fr);
    align-items: center;
    column-gap: clamp(40px, 5vw, 80px);
    row-gap: 36px;
    padding-block: 160px;
}

.page-about .about-vision__copy {
    z-index: 2;
    display: flex;
    flex-direction: column;
    max-width: 560px;
    color: #ffffff;
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.18);
}

/* 아래 사업명/주최/주관, 위 포럼/전시 배지와 동일한 처리 — 파란 배경 + 흰 글씨. */
.page-about .about-vision__label {
    align-self: start;
    margin: 0 0 18px;
    padding: 6px 14px;
    color: var(--sub-white);
    background: var(--sub-blue);
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-transform: uppercase;
    text-shadow: none;
}

.page-about .about-vision__copy h2 {
    margin: 0;
    font-size: var(--sub-title-size);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: #ffffff;
    word-break: keep-all;
}

/* 위 리드 문단과 동일한 톤(24px / weight 500 / line-height 1.8). */
.page-about .about-vision__copy > p:last-child {
    margin: 24px 0 0;
    font-size: var(--sub-lead-size);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.8;
    letter-spacing: -0.015em;
    word-break: keep-all;
}

.page-about .about-vision .about-info__list {
    z-index: 2;
    width: 100%;
    margin: 50px 0 0;
    color: #ffffff;
}

/* 30px씩 잡힌 행 여백이 위 일정 카드(20px 내외) 대비 과해 목록이 늘어져 보인다. */
.page-about .about-vision .about-info__row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

.page-about .about-vision .about-info__row:last-child {
    border-bottom: 0;
}

/* 위 일정 카드의 포럼/전시 배지와 완전히 동일한 처리 — 파란 배경 + 흰 글씨. */
/* 행(.about-info__row)마다 독립된 그리드라 max-content가 행별로 계산돼
   라벨 글자 수(사업명/주최/주관)에 따라 배지 폭이 제각각이었다.
   공통 최소 폭을 줘 세 배지와 그 뒤 값의 시작점을 일직선으로 맞춘다. */
.page-about .about-vision .about-info__row dt {
    justify-self: stretch;
    min-width: 6em;
    text-align: center;
    padding: 6px 14px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--sub-white);
    background: var(--sub-blue);
    border-radius: 4px;
    text-shadow: none;
    white-space: nowrap;
}

/* 영문 라벨("Organized by" 등)은 국문보다 훨씬 길어 최소 폭을 따로 잡는다. */
html[lang="en"] .page-about .about-vision .about-info__row dt {
    min-width: 9.5em;
}

.page-about .about-vision .about-info__row dd {
    margin: 0;
    font-size: 22px;
    color: rgba(255, 255, 255, 0.96);
    line-height: 1.4;
}

/* =========================================================
    STRUCTURE
========================================================= */

.page-about .about-structure {
    padding-top: var(--sub-section-after-hero);
}

/* --forum-accent는 메인페이지 포럼 블록 안에서만 정의된 변수라 여기서는
   값이 없어 검정으로 떨어지고 있었다. 다른 섹션 제목과 같은 톤으로 명시한다. */
.page-about .about-structure__kicker {
    margin: 0 0 20px;
    padding-top: 0;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.12;
    color: var(--sub-black);
    letter-spacing: -0.03em;
}

.page-about .about-program-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 24px;
}

/* 파스텔 배경 대신 흰 바탕 + 헤어라인 테두리로 정돈한 카드.
   색은 번호에만 최소한으로 남기고, 라운드는 크게 주지 않는다.
   행은 부모 그리드에서 물려받아(subgrid) 세 카드의 제목·설명 시작선이 맞는다.
   (subgrid 미지원 브라우저는 바로 위 auto 1fr 선언으로 폴백) */
.page-about .about-program-item {
    --item-accent: var(--sub-red);
    display: grid;
    grid-row: span 2;
    grid-template-rows: auto 1fr;
    grid-template-rows: subgrid;
    gap: 24px;
    min-height: 0;
    padding: 28px;
    background: var(--sub-white);
    border: 1px solid rgba(17, 17, 17, 0.11);
    border-top: 3px solid var(--item-accent);
    border-radius: 4px;
}

.page-about .about-program-grid > .about-program-item:nth-child(1) {
    --item-accent: var(--sub-red);
}

.page-about .about-program-grid > .about-program-item:nth-child(2) {
    --item-accent: var(--sub-blue);
}

.page-about .about-program-grid > .about-program-item:nth-child(3) {
    --item-accent: #c9a227;
}

/* 번호는 바로 뒤의 리드(정례 교류 등)와 한 줄로 읽히는 메인 제목의 일부다.
   색은 카드에서 지정한 항목 고유색(currentColor)을 그대로 쓴다. */
.page-about .about-program-item__no {
    display: inline;
    margin-right: 0.3em;
    font-size: var(--sub-mini-title-size);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.02em;
    vertical-align: baseline;
    color: var(--item-accent);
}

.page-about .about-program-item__no--red {
    color: var(--sub-red);
}

.page-about .about-program-item__no--blue {
    color: var(--sub-blue);
}

.page-about .about-program-item__no--yellow {
    color: #f4c400;
}

/* 3열이라 열 폭이 좁아 제목·본문이 어절 중간에서 끊기거나 마지막 줄에
   한 단어만 떨어지기 쉽다. 어절 단위로 끊고 줄 길이를 고르게 나눈다. */
.page-about .about-program-item h2 {
    display: inline;
    margin: 0;
    font-size: var(--sub-mini-title-size);
    line-height: 1.3;
    letter-spacing: -0.03em;
    font-weight: 700;
    word-break: keep-all;
    text-wrap: pretty;
    text-wrap: balance;
}

/* 메인 제목 — 색은 번호에만 남기고 제목 자체는 검정으로 둔다.
   세 카드가 각각 빨강·파랑·노랑 제목을 갖던 구성이 산만해 보였다. */
.page-about .about-program-item__lead-red,
.page-about .about-program-item__lead-blue,
.page-about .about-program-item__lead-yellow {
    display: inline;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: var(--sub-black);
}

/* 서브 타이틀 — 메인(컬러 제목)보다 작고 옅게. */
.page-about .about-program-item__sub,
.page-about .about-program-item__detail {
    display: block;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.55;
    color: var(--sub-gray, #4b5563);
    word-break: keep-all;
    text-wrap: pretty;
    text-wrap: balance;
}

.page-about .about-program-item__sub {
    margin-top: 12px;
}

.page-about .about-program-item__detail {
    margin-top: 2px;
    margin-bottom: 0;
}

.page-about .about-program-item__detail:empty {
    display: none;
}

/* 설명 문단 — 구분선도 카드 고유색을 옅게 깔아 톤을 맞춘다. */
.page-about .about-program-item p {
    margin: 0;
    padding-top: 22px;
    border-top: 1px solid var(--sub-line);
    color: var(--sub-gray, #4b5563);
    font-size: 17px;
    line-height: 1.8;
    word-break: keep-all;
    text-wrap: pretty;
}

/* =========================================================
    ASEAN
========================================================= */

.page-about .about-asean {
    padding-top: var(--sub-section-block);
}

.page-about .about-asean__kicker {
    margin: 0 0 20px;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.12;
    color: var(--forum-accent);
    letter-spacing: 0.02em;
}

/* 왼쪽 아이덴티티(엠블럼+기관명), 오른쪽 설명. */
.page-about .about-asean__intro {
    display: grid;
    grid-template-columns: minmax(380px, 0.36fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding-bottom: 44px;
    border-bottom: 1px solid var(--sub-line);
}

/* 엠블럼과 기관명을 가로로 나란히 두고 세로 중앙을 맞춘다. */
.page-about .about-asean__identity {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.page-about .about-asean__identity img {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
}

.page-about .about-asean__name {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.page-about .about-asean__name strong {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--sub-black);
    word-break: keep-all;
}

/* 영문 정식 명칭(Association of Southeast Asian Nations)은 한글 기관명보다
   훨씬 길어 이 단 폭에서는 한 줄에 들어가지 않는다. 억지로 한 줄로 만들면
   왼쪽 단이 과하게 넓어지므로, 두 줄을 고르게 나눠 접는 쪽을 택한다. */
html[lang="en"] .page-about .about-asean__name strong {
    text-wrap: pretty;
    text-wrap: balance;
}

/* 영문 정식 명칭은 라벨처럼 작게, 포인트 컬러로. 괄호까지 한 덩어리라
   중간에서 끊기면 읽기 나빠 데스크톱에서는 한 줄로 유지한다. */
.page-about .about-asean__name span {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--sub-blue);
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
}

/* 세로 괘선으로 아이덴티티 블록과 단을 나누고, 줄 길이를 제한해 읽기 쉽게 한다. */
.page-about .about-asean__desc {
    margin: 0;
    padding-left: clamp(24px, 3vw, 40px);
    border-left: 1px solid var(--sub-line);
    font-size: 18px;
    line-height: 1.8;
    color: var(--sub-gray, #4b5563);
    word-break: keep-all;
    text-wrap: pretty;
}

/* 첫 문장은 도입부 리드로 한 단계 올려 읽는 시작점을 만든다. */
.page-about .about-asean__desc p {
    margin: 0;
}

.page-about .about-asean__desc p:first-child {
    font-size: 20px;
    font-weight: 500;
    color: var(--sub-black);
}

.page-about .about-asean__desc p + p {
    margin-top: 14px;
}

/* 11개국을 한 줄에 욱여넣어 칸이 좁고 국가명이 잘리듯 보였다.
   여러 줄로 흐르게 하고 각 항목을 국기+이름이 가로로 놓인 카드로 바꾼다. */
.page-about .about-asean__members {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

/* gap이 행에도 걸려 국가명과 가입연도가 16px씩 떨어져 있었다.
   행 간격만 좁히고 국기는 두 행에 걸쳐 세로 중앙에 둔다. */
.page-about .about-asean__member {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
    row-gap: 2px;
    min-width: 0;
    padding: 18px 20px;
    text-align: left;
    background: #ffffff;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 8px;
}

.page-about .about-asean__flag {
    display: grid;
    place-items: center;
    grid-row: span 2;
    align-self: center;
    width: 48px;
    height: 35px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 3px;
    /* 흰 면적이 많은 국기(싱가포르·태국 등)가 회색 카드 배경에 묻히지 않도록
       레이아웃에 영향 없는 안쪽 윤곽선만 얇게 준다. */
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.14);
}

/* 국기 SVG는 twemoji 원본이 36x36 정사각 캔버스라 위아래에 빈 여백이 있었다.
   viewBox를 국기 영역(0 5 36 26)으로 크롭해 두었으므로 contain으로 두면
   잘리는 곳 없이 배지 안을 거의 꽉 채운다. */
.page-about .about-asean__flag img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

.page-about .about-asean__member strong {
    max-width: 100%;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--sub-black);
    word-break: keep-all;
}

/* 가입연도는 국가명 바로 아래에 옅게 둔다. */
.page-about .about-asean__member > span:last-child {
    grid-column: 2;
    font-size: 14px;
    line-height: 1.3;
    color: var(--sub-gray, #4b5563);
}

/* =========================================================
    BRAND
========================================================= */

.page-about .about-brand.sub-pad--end {
    padding-top: var(--sub-section-block);
}

/* 제목 왼쪽, 다운로드 버튼 오른쪽. 구분선은 그 아래 전체 폭. */
.page-about .about-brand__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: 24px;
    padding-top: 0;
}

.page-about .about-brand__head .about-brand__title {
    grid-column: 1;
}

.page-about .about-brand__head .about-brand__downloads {
    grid-column: 2;
    grid-row: 1;
}

.page-about .about-brand__head .sub-hero__rule {
    grid-column: 1 / -1;
}

.page-about .about-brand__title {
    margin: 0;
    /* border-top: 1px solid var(--sub-line); */
    font-size: 42px;
    font-weight: 700;
    line-height: 1.12;
    color: var(--forum-accent);
    letter-spacing: 0.02em;
}

/* 로고 시안과 컬러 팔레트는 성격이 달라 같은 행에서 높이를 맞추면 어색해진다.
   설명 → 로고 → 컬러 순으로 각각 전체 폭을 쓰도록 세로로 쌓는다. */
.page-about .about-brand__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "logos"
        "colors"
        "description";
    row-gap: 0;
    align-items: start;
}

.page-about .about-brand__logos {
    grid-area: logos;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
}

.page-about .about-brand__panel {
    margin: 0;
    min-height: 0;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fafafa;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 4px;
    padding: 0 28px;
    box-sizing: border-box;
}

.page-about .about-brand__panel img {
    width: min(180px, 74%);
    height: auto;
    object-fit: contain;
}

.page-about .about-brand__panel--dark {
    background: #000000;
    border-color: #000000;
}

.page-about .about-brand__description {
    grid-area: description;
    width: 100%;
    max-width: none;
    margin: 44px 0 0;
}

/* text-wrap: pretty는 마지막 줄 고아 단어를 피하려고 앞 줄을 짧게 끊는데,
   어절이 긴 한글 문장에서는 임의로 <br>을 넣은 것처럼 보인다. */
.page-about .about-brand__description p {
    margin: 0;
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: -0.02em;
    color: var(--sub-gray, #4b5563);
    word-break: keep-all;
}

.page-about .about-brand__description p + p {
    margin-top: 14px;
}

/* 다운로드는 섹션 제목 오른쪽에 둔다. */
.page-about .about-brand__downloads {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

/* 왼쪽 로고와 같은 폭(50%)을 차지하는 2열 × 2행 배치. */
/* 로고 시안 바로 아래 붙는 작은 캡션 줄. 색은 작은 점으로만 표시한다. */
.page-about .about-brand__colors {
    grid-area: colors;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    align-items: center;
    width: 100%;
    margin-top: 16px;
    padding-top: 0;
    border-top: 0;
    box-sizing: border-box;
}

/* 작은 색점 + 이름 + 헥스를 한 줄로. */
.page-about .about-brand__color {
    --swatch: var(--sub-red);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0;
    text-align: left;
    white-space: nowrap;
}

.page-about .about-brand__color::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin: 0;
    background: var(--swatch);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.12);
}

.page-about .about-brand__color--yellow {
    --swatch: #f8f400;
}

.page-about .about-brand__color--red {
    --swatch: #e33131;
}

.page-about .about-brand__color--blue {
    --swatch: #22559e;
}

.page-about .about-brand__color--black {
    --swatch: #231815;
}

.page-about .about-brand__color-name {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    color: var(--sub-black);
}

.page-about .about-brand__color-rgb {
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--sub-gray, #4b5563);
}

.page-about .about-brand__download {
    min-width: 170px;
    height: 46px;
    padding: 0 6px 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--sub-black);
    font-size: 14px;
    font-weight: 700;
    color: var(--sub-black);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.page-about .about-brand__download-arrow {
    width: 30px;
    height: 30px;
    border-left: 1px solid currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
}

.page-about .about-brand__download:hover {
    background: var(--sub-black);
    color: #ffffff;
}

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

/* 로고 + 문구가 한 줄에 안 들어가면 문구를 아래로 */

/* 767px 이하 */

/* 753px 이하 — 한 단씩, 제목은 왼쪽 / 설명은 오른쪽 */

/* 480px 이하 — 모바일은 한 단으로 */

/* 281px 이하 */

/* 태블릿 (~1320px) */
@media (max-width: 1320px) {
    /* sub-hero h1과 같은 크기 단계를 따라간다 (42 -> 36 -> 28).
       타이틀처럼 쓰이는 섹션 제목들(kicker/title로 불리지만 실제 역할은
       h2 제목) 전부에 동일하게 적용. */
    .page-about .about-structure__kicker,
    .page-about .about-asean__kicker,
    .page-about .about-brand__title {
        font-size: 36px;
    }

    .page-about .about-asean__intro {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* 좁은 폭에서는 한 줄 유지가 불가능하므로 어절 단위로 접는다. */
    .page-about .about-asean__name span {
        white-space: normal;
    }

    /* 위아래로 쌓이면 세로 괘선이 맞지 않으므로 가로 괘선으로 바꾼다. */
    .page-about .about-asean__desc {
        max-width: none;
        padding-left: 0;
        padding-top: 24px;
        border-left: 0;
        border-top: 1px solid var(--sub-line);
    }

    .page-about .about-asean__members {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* 기본(row-gap:0)과 같이 세 영역 사이 간격은 각 요소의 margin-top으로
       개별 조정한다 — 여기서 gap을 또 주면 이중으로 벌어진다. */
    .page-about .about-brand__intro {
        grid-template-columns: 1fr;
        grid-template-areas:
            "logos"
            "colors"
            "description";
        align-items: start;
    }

    .page-about .about-brand__description {
        min-height: 0;
    }

    .page-about .about-brand__logos {
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-about .desktop-only {
        display: none;
    }

    /* 이 구간(500~1320px)은 아직 2단(1000px 미만에서 명시적으로 1단 전환)
       이므로 여기선 padding만 좁힌다. */
    .page-about .about-vision__grid {
        padding-block: 80px;
    }

    .page-about .about-vision__bg::after {
        background:
            linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08)),
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0) 28%,
                rgba(0, 0, 0, 0.28) 62%,
                rgba(0, 0, 0, 0.48) 100%
            );
    }

    .page-about .about-vision__copy {
        max-width: none;
        width: 100%;
    }

    .page-about .about-vision .about-info__list {
        margin-top: 0;
    }

    .page-about .about-vision .about-info__row {
        grid-template-columns: max-content 1fr;
        gap: 18px;
    }

    .page-about .about-brand__logos {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        justify-self: stretch;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 0;
    }

    .page-about .about-brand__colors {
        gap: 8px 20px;
    }

    .page-about .about-brand__panel {
        height: 170px;
        padding: 0 20px;
    }

    .page-about .about-brand__panel img {
        width: min(140px, 70%);
    }

    /* 좁은 화면에서는 제목 옆이 아니라 제목 아래 한 줄로 내린다. */
    .page-about .about-brand__head {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 16px;
    }

    /* 1단으로 쌓이면 마크업 순서(제목 -> 버튼 -> 선) 그대로 선이 맨 아래로
       내려간다. order로 제목 -> 선 -> 버튼 순서가 되게 한다. */
    .page-about .about-brand__head .about-brand__title {
        order: 1;
    }

    .page-about .about-brand__head .sub-hero__rule {
        order: 2;
    }

    .page-about .about-brand__head .about-brand__downloads {
        order: 3;
        grid-column: 1;
        grid-row: auto;
        justify-content: flex-start;
        margin-bottom: 8px;
    }

    .page-about .about-brand__downloads {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .page-about .about-brand__download {
        min-width: 0;
        width: 100%;
        height: 44px;
        padding-left: 12px;
        font-size: 13px;
    }

    .page-about .about-brand__download-arrow {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .page-about .about-program-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 16px;
    }

    .page-about .about-program-item {
        grid-row: auto;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto;
        column-gap: 40px;
        align-items: start;
        min-height: 0;
        padding: 28px 26px 30px;
    }

}

/* 1000px 아래로는 좌우 2단 대신 위아래 1단으로 명시적으로 전환한다.
   접힌 이후에는 padding도 한 단계 더 좁힌다 (1320:80 -> 1000:60 -> 500:40/32). */
@media (max-width: 1000px) {
    .page-about .about-vision__grid {
        grid-template-columns: 1fr;
        padding-block: 60px;
    }
}

/* 모바일 (~500px) */
@media (max-width: 500px) {
    /* "...경제화 :" / "...Imagination:" 다음 줄바꿈 — 모바일에서만, about
       페이지에서만. 홈페이지와 공유하는 about/forum.php에서는 기본 숨김
       (style="display:none")으로 내려오므로 여기서만 켠다. */
    .page-about .section-speakers__forum-topic-break {
        display: initial !important;
    }

    .page-about .about-program-item {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 16px;
        padding: 26px 22px 28px;
    }

    .page-about .about-structure__kicker,
    .page-about .about-asean__kicker,
    .page-about .about-brand__title {
        font-size: 28px;
    }

    .page-about .about-program-item__lead-red,
    .page-about .about-program-item__lead-blue,
    .page-about .about-program-item__lead-yellow {
        font-size: 26px;
    }

    .page-about .about-structure__kicker {
        margin-bottom: 20px;
    }

    .page-about .about-vision__copy > p:last-child {
        margin-top: 16px;
    }

    .page-about .about-vision__grid {
        gap: 12px;
        padding-block: 40px 32px;
    }

    .page-about .about-vision .about-info__list {
        margin-top: 0;
    }

    .page-about .about-vision .about-info__row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 20px 0;
    }

    .page-about .about-asean__members {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-about .about-asean__member {
        padding: 14px 16px;
        column-gap: 12px;
    }

    .page-about .about-asean__member strong {
        font-size: 15px;
    }

    .page-about .about-brand__panel {
        min-height: 110px;
        height: 110px;
        padding: 16px 12px;
    }

    .page-about .about-brand__panel img {
        width: min(100px, 68%);
    }

    .page-about .about-brand__logos {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* 두 줄(YELLOW/RED, BLUE/BLACK)로 떨어지도록 각 항목을 50%씩 나눈다. */
    .page-about .about-brand__colors {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 14px;
        margin-top: 8px;
    }

    .page-about .about-brand__color {
        min-width: 0;
    }
}