/* ============================================================
   연구단 소개 (about.html, about_tech1~3.html)
   homepage.css 다음에 로드한다. 색은 --hp-* 토큰만 쓴다.

   이 파일의 규칙은 전부 `.about-page` 아래에 둔다.
   `.site-container` 를 덮어쓰기 때문에 스코프를 놓치면
   나머지 24개 화면의 폭이 함께 바뀐다.

   폭은 본문만 넓힌다. 최상단 네비게이션은 다른 화면과 같다.
   ============================================================ */

/* === 레이아웃: 본문 폭은 사이트 전역과 같다 ===
 *
 * 예전에는 본문만 `min(80%, 1500px)` 로 넓혀 썼다. 그런데 그 값은 화면에
 * 비례해서 자라기 때문에 1650px 언저리부터 최상단 마스트헤드(1320px 고정)를
 * 앞질렀다 — 1920px 화면에서 본문이 간판보다 180px 넓어, 페이지 위아래의
 * 세로선이 어긋나 보였다.
 *
 * 그래서 상한과 좌우 패딩을 homepage.css 의 `.site-container`(1320px · 20px)
 * 그대로 쓴다. 실증 개관(demo/index.html)과 같은 짜임이다. `--about-max-width`
 * 는 히어로 등 몇 곳이 참조하므로 이름은 남기고 값만 맞춘다. */
.about-page {
    --about-max-width: 1320px;
}

/* 헤더 예외 규칙은 걷어냈다. 본문이 사이트 전역 폭을 그대로 쓰게 되면서
   헤더만 따로 1320px 로 되돌릴 이유가 없어졌다 — 이제 둘이 같은 규칙을 본다. */

/* 섹션 제목 아래 한 줄 요약만 폭을 제한한다.
 * 본문(`.about-prose`)은 제한하지 않는다. 바로 위아래에 놓이는 인용 상자와
 * 목록이 컨테이너 전폭을 쓰기 때문에, 여기만 좁히면 글줄 끝이 어긋나 보인다. */
.about-page .about-section__lead {
    max-width: 90ch;
}

.about-page {
    scroll-behavior: smooth;
    /* 한글은 어절 단위로만 줄을 바꾼다. 기본값(normal)은 한글을 글자 단위로
     * 끊어서 "공간데이터큐" / "브" 처럼 단어 중간이 갈라진다.
     *
     * keep-all 만 쓰면 한 어절이 상자보다 길 때 밖으로 삐져나가므로,
     * 그 경우에만 동작하는 overflow-wrap 을 짝으로 둔다. 긴 영문·URL 도
     * 이쪽이 받아 준다. */
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 헤더(56px) 와 이동 줄 묶음이 겹쳐 붙어 있어, 앵커로 이동하면 제목이 그
 * 뒤로 숨는다. 좁은 화면은 두 줄(이동+목차), 넓은 화면은 한 줄이다. */
.about-page [id] {
    scroll-margin-top: 160px;
}
@media (min-width: 1400px) {
    .about-page [id] { scroll-margin-top: 120px; }
}

/* === 스크롤 진행 바 === */
.about-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--hp-card);
    opacity: 0.85;
    z-index: 1001;
    pointer-events: none;
}

/* === 섹션 셸 ===
 * 섹션 하나가 슬라이드 한 장이다. 배경을 번갈아 주어
 * 스크롤할 때 장이 넘어가는 리듬을 만든다. */
.about-section {
    position: relative;
    padding: 5rem 0;
    background: var(--hp-card);
    overflow: hidden;
}
.about-section--tint { background: var(--hp-bg); }
/* 짙은 구획. 가운데 정지점에 구 팔레트의 남색이 남아 있어 딥 그린과
 * 섞이며 탁한 띠가 났다. 세 정지점을 모두 그린 계열 토큰으로 맞춰 한 색의
 * 농담 변화로만 보이게 한다. */
.about-section--dark {
    background: linear-gradient(140deg, var(--hp-blue-dark) 0%, var(--hp-blue) 55%, var(--hp-blue-dark) 100%);
    color: var(--hp-cream);
}
.about-page .about-section > .site-container {
    position: relative;
    z-index: 1;
}

/* 격자 모티프 — 연구 주제 자체를 배경 패턴으로 반복한다.
 * 장식용 색 띠나 제목 밑줄은 쓰지 않는다. */
.about-section--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(to right, color-mix(in srgb, var(--hp-card) 7%, transparent) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(to bottom, color-mix(in srgb, var(--hp-card) 7%, transparent) 0 1px, transparent 1px 72px);
    pointer-events: none;
}

/* === 섹션 머리 === */
.about-section__head {
    display: flex;
    align-items: baseline;
    gap: 1.1rem;
    margin-bottom: 0.9rem;
}
.about-section__num {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--hp-border);
    letter-spacing: -0.03em;
    flex: none;
}
.about-section--tint .about-section__num { color: var(--hp-border); }
.about-section--dark .about-section__num { color: color-mix(in srgb, var(--hp-card) 28%, transparent); }
.about-section__head h2 {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--hp-blue);
}
.about-section--dark .about-section__head h2 { color: var(--hp-card); }
.about-section__lead {
    margin: 0 0 2.6rem;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.65;
    color: var(--hp-text-secondary);
}
.about-section--dark .about-section__lead { color: color-mix(in srgb, var(--hp-card) 78%, transparent); }

.about-section h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--hp-blue-dark);
    margin: 2.6rem 0 1rem;
}
.about-section--dark h3 { color: var(--hp-card); }
.about-prose {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--hp-text);
    margin: 0 0 1.2rem;
}
.about-section--dark .about-prose { color: color-mix(in srgb, var(--hp-card) 86%, transparent); }
.about-prose strong { color: var(--hp-blue); }
.about-section--dark .about-prose strong { color: var(--hp-cream); }

/* 본문에 딸린 단서 한 줄. 도판 바로 위처럼 "이건 아직 확정이 아니다"를 먼저
 * 알려야 하는 자리에 쓴다. 도판 설명(figcaption)과 같은 크기·색이라 한 덩어리로
 * 읽히고, 본문(.about-prose)보다 작아 본문과 섞이지 않는다. */
.about-note {
    margin: -0.4rem 0 1rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--hp-text-secondary);
}
.about-section--dark .about-note { color: color-mix(in srgb, var(--hp-card) 70%, transparent); }

/* 절이 다른 챕터로 옮겨간 자리에 남기는 이정표 한 줄 — 본문(.about-prose)과
 * 달리 실제 내용이 아니라 안내이므로 옅은 바탕과 왼쪽 룰러로 구분한다. */
.about-seealso {
    margin: 0;
    padding: 1rem 1.25rem;
    background: var(--hp-paper-tint);
    border-left: 2px solid var(--hp-blue);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--hp-text-secondary);
}
.about-seealso a { color: var(--hp-blue); font-weight: 700; }

/* 인용 블록 — 비전·정의 문장 */
.about-quote {
    margin: 0 0 1.6rem;
    padding: 1.4rem 1.6rem;
    background: var(--hp-bg);
    border-radius: 10px;
    font-size: 1.1rem;
    line-height: 1.7;
}
.about-section--tint .about-quote { background: var(--hp-card); }
.about-section--dark .about-quote {
    background: color-mix(in srgb, var(--hp-card) 8%, transparent);
    color: var(--hp-card);
}
.about-quote dt {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--hp-blue);
    margin-bottom: 0.35rem;
}
.about-section--dark .about-quote dt { color: var(--hp-cream); }
.about-quote dd { margin: 0 0 1.1rem; }
.about-quote dd:last-child { margin-bottom: 0; }

/* 큰 한 문장 강조 */
.about-pullquote {
    margin: 2.4rem 0 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.02em;
    text-align: center;
}

/* === 소제목 (h3 아래 단계) ===
 * 원본 슬라이드가 「1 개념 정의 / 2 비교 / 3 주요 특징」처럼 번호를 달아
 * 묶는 구조라 그대로 옮긴다. h3(1.35rem)보다 한 단계 작다. */
.about-subhead {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 2rem 0 0.9rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hp-blue-dark);
}
.about-subhead span {
    flex: none;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 6px;
    background: var(--hp-blue);
    color: var(--hp-card);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.about-section--dark .about-subhead { color: var(--hp-card); }

/* === 정의 두 칸 + 그림 (원본 「개념 정의」 판형) ===
 * 두 정의를 가운데 세로 점선으로 가르고, 그 아래 그림이 두 칸에 걸친다. */
.about-defs {
    background: var(--hp-bg);
    border: 1px solid var(--hp-border);
    border-radius: 12px;
    padding: 1.6rem;
}
.about-section--tint .about-defs { background: var(--hp-card); }
.about-defs__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}
.about-defs__grid > * + * {
    border-left: 1px dashed var(--hp-border);
    padding-left: 2rem;
}
.about-defs__tag {
    display: inline-block;
    margin-bottom: 0.6rem;
    padding: 0.35rem 1.1rem;
    border-radius: 999px;
    background: var(--hp-blue-dark);
    color: var(--hp-card);
    font-size: 0.92rem;
    font-weight: 700;
}
.about-defs__grid p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--hp-text);
}
.about-defs > img {
    display: block;
    width: 100%;
    max-width: 760px;
    height: auto;
    margin: 1.4rem auto 0;
}

/* === VS 비교 두 칸 (원본 「픽셀과 복셀 비교」 판형) === */
.about-vs {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.9rem;
    /* 안에 든 도해가 원본 588·608px 짜리라 전폭으로 늘리면 원본보다 크게
     * 확대되어 흐려진다. 바로 위 「2D와 3D 격자체계 비교」 도해와 같은
     * 1048px 에서 멈춰 두 비교 블록의 폭을 맞춘다. */
    max-width: 1048px;
}
.about-vs__card {
    background: var(--hp-card);
    border: 1px solid var(--hp-border);
    border-radius: 12px;
    overflow: hidden;
    align-self: stretch;
}
.about-vs__card h5 {
    margin: 0;
    padding: 0.8rem 1rem;
    background: var(--hp-blue-dark);
    color: var(--hp-card);
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
}
.about-vs__card p {
    margin: 0;
    padding: 1rem 1.2rem 0;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--hp-text);
}
.about-vs__card img {
    display: block;
    width: 100%;
    height: auto;
    padding: 0.6rem 1.2rem 1.2rem;
}
.about-vs__badge {
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--hp-blue-dark);
    color: var(--hp-card);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === 주요 특징 (원본의 원형 아이콘 + 제목 + 설명) === */
.about-traits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.about-traits--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.about-traits li {
    background: var(--hp-bg);
    border: 1px solid var(--hp-border);
    border-radius: 12px;
    padding: 1.4rem 1.3rem;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.about-section--tint .about-traits li { background: var(--hp-card); }
.about-traits li:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--hp-ink) 8%, transparent);
    border-color: var(--hp-blue-light);
}
.about-traits i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    margin-bottom: 0.8rem;
    border-radius: 50%;
    background: var(--hp-blue-dark);
    color: var(--hp-card);
    font-size: 1.3rem;
}
.about-traits strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hp-blue);
}
.about-traits span {
    display: block;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--hp-text-secondary);
}




/* 그림 위에 덮는 막. 두 가지 일을 한다.
 *
 * 왼쪽 — 글자가 놓이는 자리를 살짝 덮는다. 그림이 거기서 이미 거의 흰색이라
 * 눈에 띄지 않지만, 수채 번짐이 올라오는 아래쪽에서 대비를 지켜 준다.
 *
 * 오른쪽 — 그림은 원래 슬라이드 오른쪽 끝까지 그림이 이어지도록 그려져 있어,
 * 화면이 `__inner` 의 max-width 보다 넓으면 그 지점에서 세로로 뚝 끊긴다.
 * 끝을 바탕색으로 되돌려 경계선을 지운다. 바탕색이 같은 값이라 이어 붙은
 * 것처럼 보인다. mask 대신 gradient 를 쓰는 이유는 지원 범위 때문이다. */













@keyframes about-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* === 이동 줄 묶음 ===
 * 화면 이동(위)과 섹션 목차(아래)를 한 상자에 넣어 함께 붙인다. 둘을 따로
 * sticky 로 두면 아래 줄의 top 값을 위 줄 높이에 맞춰 손으로 계산해야 하고,
 * 글자가 한 줄 늘어나는 순간 아래 줄이 위 줄 뒤로 숨는다. 실제로 숨었다.
 *
 * 이 상자에는 filter·transform 을 걸지 않는다. 걸면 넓은 화면에서 안쪽
 * 목차의 `position: fixed` 가 이 상자를 기준으로 잡혀 왼쪽으로 못 나간다.
 *
 * 붙는 자리는 헤더 바로 아래다. 헤더는 sticky top:0 에 z-index 1000 이라
 * top 이 헤더 높이보다 작으면 그 차이만큼 띠가 헤더 뒤로 들어가 글자가
 * 가려진다 — 56px 로 적혀 있던 동안 75px 띠의 41px 가 그렇게 숨어 있었다. */
.about-navbar {
    position: sticky;
    top: var(--hp-header-height);
    z-index: 900;
    background: var(--hp-card);
    border-bottom: 1px solid var(--hp-border);
}

/* 핵심 개념·참여기관은 본문이 배경을 칠하지 않는 program.css 부품(chap·
 * about-facts·grp)이라 body 바탕이 그대로 드러난다. 나머지 다섯 챕터는 본문이
 * `.about-section`(배경 --hp-card)이어서 이동 띠 아래가 같은 색으로 이어지는데,
 * 이 두 화면만 종이색(--hp-bg)으로 떨어져 띠 밑에 경계선이 생겼다.
 *
 * `main` 에 배경을 걸지 않는 이유는 `.site-container` 가 가운데 80% 폭이라
 * 좌우 끝이 비기 때문이다. 화면 폭을 채우려면 100vw 나 clip-path 같은 우회가
 * 필요한데, 100vw 는 스크롤바 폭만큼 가로 스크롤을 만들고 clip-path 는 `.reveal`
 * 의 translateY 를 잘라낸다. 바탕 자체를 바꾸는 편이 안전하다 — 표제부
 * (`.about-techhero`)와 푸터(`.site-footer`)는 자기 배경을 따로 칠하므로
 * 영향받지 않는다. */
.about-page--plain { background: var(--hp-card); }

/* 핵심 개념·참여기관은 표제부만 about-techhero 를 쓰고 본문은 program.css 의
 * chap·about-facts 로 간다. 그 둘은 원래 page-head 바로 뒤에 오는 것을 전제로
 * program.css 가 인접 선택자(`.page-head + .chap` 등)로 위 여백을 주는데,
 * 표제부가 바뀌고 사이에 이동 띠까지 끼면서 그 규칙이 닿지 않는다. 띠 다음
 * 본문의 첫 블록에 같은 값을 다시 준다 — 어긋나면 이 두 화면만 첫 룰러가
 * 위로 붙는다. */
.about-page .about-navbar + main > .chap:first-child { margin-top: 46px; }
.about-page .about-navbar + main > .about-facts:first-child { margin-top: 40px; }

/* 화면 이동 — 사업개요 · 구성기술 1 · 2 · 3 */
.about-pagenav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.3rem;
    overflow-x: auto;
}
.about-pagenav a {
    display: block;
    padding: 0.95rem 1.3rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--hp-text-secondary);
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.about-pagenav a:hover { color: var(--hp-blue); background: var(--hp-bg); }
.about-pagenav a.active {
    color: var(--hp-blue);
    border-bottom-color: var(--hp-blue);
}
.about-pagenav small {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.75;
}

/* === 이 화면의 섹션 목차 ===
 * 마크업 하나로 두 모습을 갖는다. 좁은 화면에서는 이동 줄 아래 가로 줄,
 * 넓은 화면에서는 화면 맨 왼쪽의 점 목록(아래 미디어쿼리). */
.about-rail {
    border-top: 1px solid var(--hp-border);
}
.about-rail ul {
    display: flex;
    gap: 0.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}
.about-rail a {
    display: block;
    padding: 0.6rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--hp-muted);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.about-rail a:hover { color: var(--hp-text); }
.about-rail a.active {
    color: var(--hp-text);
    font-weight: 700;
    border-bottom-color: var(--hp-text);
}
/* 빵부스러기 */
/* 이 줄은 두 가지 바탕 위에 놓인다. 구성기술 상세 화면의 표제부(종이색)와
 * 소개 화면의 짙은 구획(잉크색)이다. 기본값을 종이 쪽에 맞추고 짙은 구획에서만
 * 뒤집는다. 예전에는 기본값이 흰색이라 종이 위에서는 글자가 보이지 않았다. */
.about-crumb {
    font-size: 0.85rem;
    color: var(--hp-text-secondary);
    margin-bottom: 0.9rem;
}
.about-crumb a { color: var(--hp-blue); }
.about-crumb a:hover { color: var(--hp-blue-dark); }
.about-section--dark .about-crumb { color: var(--hp-cream); }
.about-section--dark .about-crumb a { color: var(--hp-cream); }
.about-section--dark .about-crumb a:hover { color: var(--hp-card); }

/* === 대형 수치 카드 === */
.about-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.2rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}
.about-kpi > * {
    background: var(--hp-bg);
    border: 1px solid var(--hp-border);
    border-radius: 12px;
    padding: 1.6rem 1.4rem;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.about-section--tint .about-kpi > * { background: var(--hp-card); }
.about-section--dark .about-kpi > * {
    background: color-mix(in srgb, var(--hp-card) 8%, transparent);
    border-color: color-mix(in srgb, var(--hp-card) 16%, transparent);
}
.about-kpi > *:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--hp-ink) 8%, transparent);
    border-color: var(--hp-blue-light);
}
.about-kpi i {
    display: block;
    font-size: 1.4rem;
    color: var(--hp-blue);
    margin-bottom: 0.7rem;
}
/* 구 팔레트의 하늘색이 남아 있던 자리. 짙은 그린 위에서는 종이색이
 * 유일하게 쓸 수 있는 밝은 값이다. */
.about-section--dark .about-kpi i { color: var(--hp-cream); }
.about-kpi__num {
    display: block;
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--hp-blue);
    font-variant-numeric: tabular-nums;
}
.about-section--dark .about-kpi__num { color: var(--hp-card); }
/* 추진전략 카드(`homepage.css` 의 `.feature-card` 재사용).
 *
 * 두 가지를 바로잡는다. 하나는 본문 크기 — 카드 안 두 문단을 성능지표와
 * 마찬가지로 본문과 같은 1.05rem 에 맞춘다. 다른 하나는 여백 — 위쪽
 * `.about-section h3` 규칙이 카드 안 제목까지 잡아가면 2.6rem 짜리 위
 * 여백이 카드 안에 생긴다. 선택자를 한 단계 깊게 잡아 되돌린다. */
.about-section .feature-card h3 {
    /* 제목은 섹션 소제목과 같은 크기를 그대로 쓴다. 본문 크기로 낮춘 것은
     * 아래 두 문단뿐이다. */
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 0.6rem;
    color: var(--hp-blue-dark);
}
.about-section .feature-card p {
    font-size: 1.05rem;
    line-height: 1.75;
    margin: 0 0 0.3rem;
}
.about-section .feature-card p:last-child {
    margin-bottom: 0;
}

/* 담당 성능지표 한 줄. 설명과 같은 크기로 두면 또 하나의 설명처럼 읽히므로,
 * 히어로의 메타 정보(작은 라벨 + 값)와 같은 모양으로 맞춰 각주로 보이게 한다.
 * 근거는 로드맵 슬라이드([개요] 9·11·13p)가 구성기술별로 표시한 성능지표
 * 1~4 이다. 추진전략 슬라이드([개요] 4p)에는 이 대응이 없다. */
.about-section .feature-card .about-card-kpi {
    margin: 0.9rem 0 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--hp-blue);
}
.about-section .feature-card .about-card-kpi span {
    display: block;
    margin-bottom: 0.1rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--hp-text-secondary);
}

/* 라벨과 설명 모두 본문(`.about-prose`)과 같은 1.05rem 이다.
 * 둘을 가르는 것은 크기가 아니라 굵기뿐이다. 여기를 키우면 카드가
 * 본문보다 목소리가 커져 읽는 순서가 뒤집힌다. */
.about-kpi__label {
    display: block;
    margin-top: 0.6rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--hp-text);
}
.about-section--dark .about-kpi__label { color: var(--hp-card); }
.about-kpi__note {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--hp-text-secondary);
}
.about-section--dark .about-kpi__note { color: color-mix(in srgb, var(--hp-card) 65%, transparent); }

/* 요약용 수치 카드. 성능지표처럼 화면을 장악할 필요가 없는 자리에 쓴다.
 * 숫자를 섹션 제목(2.5rem)과 같은 크기로 낮추고 카드도 함께 줄인다. */
.about-kpi--compact > * {
    padding: 1.15rem 1.25rem;
}
.about-kpi--compact i {
    font-size: 1.15rem;
    margin-bottom: 0.45rem;
}
.about-kpi--compact .about-kpi__num {
    font-size: 2.5rem;
}

/* === 조직도 (단락 6-2) ===
 * 연결선은 이미지나 SVG 없이 가상요소와 border 로만 그린다. */
.about-orgchart { margin: 0 0 2.4rem; }
.about-orgchart__top {
    max-width: 520px;
    margin: 0 auto;
}
.about-orgchart__node {
    background: var(--hp-card);
    border: 1px solid var(--hp-border);
    border-radius: 10px;
    padding: 1.1rem 1.3rem;
    text-align: center;
}
.about-orgchart__node h4 {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hp-blue-dark);
}
.about-orgchart__node p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--hp-text-secondary);
}
/* 총괄 카드. 섹션 배경이 무엇이든 파란 채움을 유지해야 한다 —
 * 배경만 흰색으로 되돌아가면 흰 글씨가 남아 카드가 통째로 사라진다.
 * 그래서 배경 규칙을 섹션 수정자(`.about-section--tint` 등)보다
 * 무겁게 잡아 둔다. */
.about-orgchart .about-orgchart__node--lead {
    background: var(--hp-blue);
    border-color: var(--hp-blue);
}
.about-orgchart__node--lead h4,
.about-orgchart__node--lead p { color: var(--hp-card); }
.about-orgchart__node--lead p { color: color-mix(in srgb, var(--hp-card) 85%, transparent); }
.about-orgchart__node--lead .about-orgchart__tag {
    background: color-mix(in srgb, var(--hp-card) 22%, transparent);
    color: var(--hp-card);
}
.about-orgchart__tag {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    background: var(--hp-bg);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--hp-blue);
}
.about-orgchart__stem {
    width: 2px;
    height: 28px;
    margin: 0 auto;
    background: var(--hp-border);
}
.about-orgchart__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    position: relative;
    padding-top: 26px;
}
/* 가로 연결선 + 각 카드로 내려가는 세로선 */
.about-orgchart__row::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: var(--hp-border);
}
.about-orgchart__row > * { position: relative; }
.about-orgchart__row > *::before {
    content: "";
    position: absolute;
    top: -26px;
    left: 50%;
    width: 2px;
    height: 26px;
    background: var(--hp-border);
}

/* === 구성기술별 참여기관 (단락 6-3) === */
.about-org-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.4rem;
}
.about-org-col {
    background: var(--hp-card);
    border: 1px solid var(--hp-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.about-org-col__head {
    padding: 1.1rem 1.3rem;
    color: var(--hp-card);
    background: var(--hp-blue);
}
/* 원본 조직도는 블록마다 색이 다르지만, 팔레트를 늘리지 않고
 * 아이콘과 축 이름으로 구분하고 명도만 3단계로 준다. */
.about-org-col--t1 .about-org-col__head { background: var(--hp-blue-dark); }
.about-org-col--t2 .about-org-col__head { background: var(--hp-blue); }
.about-org-col--t3 .about-org-col__head { background: var(--hp-blue-light); }
.about-org-col__axis {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    opacity: 0.85;
    margin-bottom: 0.35rem;
}
.about-org-col__head h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
}
.about-org-col ul {
    list-style: none;
    margin: 0;
    padding: 0.6rem;
    flex: 1;
}
.about-org-col li {
    display: grid;
    grid-template-columns: 3.1rem minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
    padding: 0.7rem 0.6rem;
    border-radius: 8px;
    transition: background 0.2s;
}
.about-org-col li:hover { background: var(--hp-bg); }
.about-org-col__no {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--hp-card);
    background: var(--hp-blue);
    border-radius: 5px;
    padding: 0.2rem 0;
    text-align: center;
}
.about-org-col__name {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--hp-text);
}
.about-org-col__task {
    display: block;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--hp-text-secondary);
}
.about-org-col a.about-org-col__name:hover { color: var(--hp-blue); }

/* === 로드맵 표 === */
.about-roadmap {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    background: var(--hp-card);
    border: 1px solid var(--hp-border);
    border-radius: 12px;
    overflow: hidden;
}
.about-roadmap caption {
    caption-side: bottom;
    padding-top: 0.8rem;
    font-size: 0.82rem;
    color: var(--hp-text-secondary);
    text-align: left;
}
.about-roadmap th,
.about-roadmap td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--hp-border);
    text-align: left;
}
.about-roadmap thead th {
    background: var(--hp-blue-dark);
    color: var(--hp-card);
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
}
.about-roadmap tbody th {
    font-weight: 700;
    color: var(--hp-blue);
    white-space: nowrap;
}
.about-roadmap tbody tr:last-child th,
.about-roadmap tbody tr:last-child td { border-bottom: none; }
.about-roadmap tbody tr:hover { background: var(--hp-bg); }
.about-roadmap__final {
    font-weight: 700;
    color: var(--hp-blue-dark);
}
.about-table-scroll { overflow-x: auto; }

/* === 세부과제 카드 === */
.about-task-card {
    background: var(--hp-card);
    border: 1px solid var(--hp-border);
    border-radius: 12px;
    padding: 1.8rem;
    margin-bottom: 1.4rem;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.about-task-card:hover {
    box-shadow: 0 8px 26px color-mix(in srgb, var(--hp-ink) 7%, transparent);
    border-color: var(--hp-blue-light);
}
.about-task-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 0.4rem;
}
.about-task-card__no {
    flex: none;
    background: var(--hp-blue);
    color: var(--hp-card);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    margin-top: 0.15rem;
}
.about-task-card__head h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--hp-blue-dark);
}
.about-task-card__org {
    margin: 0 0 1.2rem 3.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--hp-text-secondary);
}
/* 수행기관 아래 한 줄로 붙는 팜플렛의 장 제목(Ⅱ-1 …). 어느 세부과제에 속한
 * 기관인지 알려 주는 꼬리표라 기관명보다 한 단 낮춘다. */
.about-task-card__org span {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.6;
    opacity: 0.85;
}

/* === 팜플렛의 번호 블록 ===
 * 「기술 내용 및 개념도」 첫머리에 놓인 상자. 번호 배지 + 연구과제명 + 단계별
 * 목표 두 줄이라는 구성을 그대로 옮긴다. 카드 본문 규칙(`.about-task-card p`)이
 * 더 무거우므로 여기서도 카드까지 함께 짚는다. */
.about-task-card .about-task-block {
    margin-top: 0.2rem;
    padding: 1.1rem 1.3rem;
    background: var(--hp-bg);
    border: 1px solid var(--hp-border);
    border-radius: 10px;
}
.about-task-card .about-task-block__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.7rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--hp-border);
    font-size: 1rem;
    font-weight: 700;
    color: var(--hp-blue-dark);
}
.about-task-card .about-task-block__title span {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    background: var(--hp-blue);
    color: var(--hp-card);
    font-size: 0.8rem;
}
.about-task-card .about-task-block ul {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.95rem;
    line-height: 1.85;
}
.about-task-card .about-task-block ul strong { color: var(--hp-blue); }

/* 팜플렛에서 성과 아래 띠로 깔리는 한 문장 */
.about-task-card .about-task-card__note {
    margin: 1.1rem 0 0;
    padding: 0.85rem 1.1rem;
    background: var(--hp-blue-dark);
    color: var(--hp-card);
    border-radius: 8px;
    font-size: 0.92rem;
    line-height: 1.6;
    text-align: center;
}
/* 팜플렛의 세 소제목(기술 소개 / 기술 내용 및 개념도 / 대표 성과 및 활용 분야).
 * 원본에서 이 셋은 장을 가르는 큰 머리글이라, 작은 라벨체로 두면 카드 안에서
 * 단락 구분이 보이지 않는다. 카드 제목(1.25rem) 바로 아래 단계로 세운다. */
.about-task-card h4 {
    margin: 1.9rem 0 0.7rem;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--hp-blue);
}
.about-task-card p { margin: 0; font-size: 0.98rem; line-height: 1.8; }
.about-stage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.about-stage {
    background: var(--hp-bg);
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
}
.about-stage strong {
    display: block;
    font-size: 0.85rem;
    color: var(--hp-blue);
    margin-bottom: 0.35rem;
}
.about-stage p { font-size: 0.92rem; line-height: 1.65; }

/* === 그림 === */
.about-figure {
    margin: 1.6rem 0 0;
}
.about-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--hp-border);
    border-radius: 10px;
    background: var(--hp-card);
}
.about-figure figcaption {
    margin-top: 0.7rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--hp-text-secondary);
}
.about-figure figcaption span {
    display: block;
    font-size: 0.78rem;
    opacity: 0.8;
}
.about-section--dark .about-figure img {
    border-color: color-mix(in srgb, var(--hp-card) 18%, transparent);
}
.about-section--dark .about-figure figcaption { color: color-mix(in srgb, var(--hp-card) 70%, transparent); }
.about-figure--narrow { max-width: 900px; }
/* 입체격자체계 비교 도해. 원본이 1474×866 이라 컨테이너 전폭으로 늘리면
 * 넓은 화면에서 지나치게 커진다. 1048px 에서 멈춘다 — 높이는 비율대로
 * 615.7px 이 된다. 좁은 화면에서는 평소처럼 폭에 맞춰 줄어든다. */
.about-figure--grid-compare { max-width: 1048px; }

/* 딥네이비 섹션에 밝은 도해를 넣을 때 쓴다. 그림을 그대로 얹으면 어두운
 * 바탕 위에 흰 사각형이 뜬 것처럼 보인다. 흰 패널에 여백을 두고 담아
 * 그림의 흰 배경이 패널과 이어지게 하고, 그림자로 바탕에서 띄운다.
 * 설명도 패널 안에 넣어 인쇄물의 도판처럼 한 덩어리로 만든다. */
.about-figure--panel {
    background: var(--hp-card);
    border-radius: 14px;
    padding: 1.5rem 1.5rem 1.2rem;
    box-shadow: 0 20px 44px color-mix(in srgb, var(--hp-ink) 24%, transparent);
}
.about-figure--panel img {
    border: none;
    border-radius: 4px;
}
.about-section--dark .about-figure--panel figcaption {
    color: var(--hp-text-secondary);
}
/* 밝은 섹션에 어두운 도해를 넣을 때 쓴다. 그림 자체가 이미 짙은 테두리를
 * 갖고 있어 패널로 감쌀 필요가 없다. 모서리만 둥글리고 그림자로 띄우면
 * 그림 한 장이 카드처럼 앉는다. */
.about-figure--flush img {
    border: none;
    border-radius: 14px;
    box-shadow: 0 20px 44px color-mix(in srgb, var(--hp-ink) 18%, transparent);
}

/* 기관별 카드 안의 개념도. 카드 자체가 이미 옅은 그림자로 떠 있어 그림까지
 * 같은 세기로 띄우면 그림자가 두 겹으로 겹친다. `--flush` 기본값에서 3할
 * 덜어낸다(번짐 44→31px, 짙기 0.18→0.126). 소개 화면(`about.html`)의 도해는
 * 기본값 그대로 둔다. */
.about-page--tech .about-task-card .about-figure img {
    box-shadow: 0 14px 31px color-mix(in srgb, var(--hp-ink) 12.6%, transparent);
}

/* 연구내용·로드맵의 큰 도해. 카드 안 그림과 달리 섹션 폭을 그대로 채워
 * 띄울 바탕이 없다. 그 자리에서는 그림자가 그림을 세워 주는 대신 아래쪽에
 * 얼룩처럼 남는다. `--flush` 뒤에 두어 그림자만 되돌린다. */
.about-figure--plain img { box-shadow: none; }

/* 구성기술 상세 세 화면(`about_tech1~3.html`)의 그림은 팜플렛 지면을 그대로
 * 잘라 온 것이라 네 귀퉁이에 원본의 상자 테두리가 그대로 있다. 모서리를
 * 둥글리면 그 선이 잘려 나가 그림이 어설프게 깎인 것처럼 보인다.
 * 두 선택자를 함께 두는 것은 `.about-figure--flush img`(0,2,0)보다 무거워야
 * 순서와 상관없이 이기기 때문이다. */
.about-page--tech img,
.about-page--tech .about-figure img {
    border-radius: 0;
}

/* 좁은 화면에서 이 도해들을 폭에 맞춰 줄이면 글자가 읽히지 않는다. 로드맵 표와
 * 같은 방식으로 그림 안에서만 가로로 밀어 본다. 페이지 자체는 넘치지 않는다. */
@media (max-width: 900px) {
    .about-figure--panel,
    .about-figure--flush {
        overflow-x: auto;
    }
    .about-figure--panel { padding: 1rem; }
    .about-figure--panel img,
    .about-figure--flush img {
        width: auto;
        max-width: none;
        height: 52vh;
        min-height: 320px;
    }
    .about-figure--panel figcaption,
    .about-figure--flush figcaption {
        position: sticky;
        left: 0;
    }
}
.about-figure-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.4rem;
    align-items: start;
}

/* === 3열 시나리오 / 파이프라인 === */
.about-scenario {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
}
.about-scenario > * {
    background: var(--hp-card);
    border: 1px solid var(--hp-border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.about-section--tint .about-scenario > * { background: var(--hp-card); }
.about-section--dark .about-scenario > * {
    background: color-mix(in srgb, var(--hp-card) 8%, transparent);
    border-color: color-mix(in srgb, var(--hp-card) 16%, transparent);
}
.about-scenario > *:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--hp-ink) 8%, transparent);
    border-color: var(--hp-blue-light);
}
.about-scenario h3 {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--hp-blue);
}
.about-section--dark .about-scenario h3 { color: var(--hp-card); }
.about-scenario__axis {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--hp-text-secondary);
    margin-bottom: 0.5rem;
}
.about-section--dark .about-scenario__axis { color: color-mix(in srgb, var(--hp-card) 65%, transparent); }

/* 단계 목표 카드에는 별도 제목(h3)이 없어서 이 줄이 곧 카드 제목이다.
 * 다른 곳처럼 0.75rem 로 두면 제목이 본문보다 작아 위계가 뒤집힌다. */
.about-scenario--titled .about-scenario__axis {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--hp-blue);
    margin-bottom: 0.9rem;
}
.about-scenario p { font-size: 0.92rem; line-height: 1.75; margin: 0; }
.about-section--dark .about-scenario p { color: color-mix(in srgb, var(--hp-card) 82%, transparent); }

/* 도메인별 격자 해상도 카드 — 줌 레벨 바로 아래에 실제 격자 크기를 한 줄로 덧붙인다.
 * .about-scenario p 가 margin:0 이라 두 문단이 맞붙어버리므로,
 * 선택자에 p 를 함께 적어 우선순위를 넘기고 이 줄에만 간격·서체를 따로 준다. */
.about-scenario p.about-scenario__metric {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hp-text-secondary);
    font-variant-numeric: tabular-nums;
}
.about-scenario dl { margin: 0.8rem 0 0; }
.about-scenario dt {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--hp-blue);
    margin-top: 0.9rem;
}
.about-section--dark .about-scenario dt { color: var(--hp-cream); }
.about-scenario dd { margin: 0.2rem 0 0; font-size: 0.9rem; line-height: 1.7; }

/* 진입 카드 (S7) */
.about-entry {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.about-entry ul {
    list-style: none;
    margin: 0.9rem 0 1.1rem;
    padding: 0;
    flex: 1;
}
.about-entry li {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--hp-text-secondary);
    padding: 0.28rem 0 0.28rem 0.9rem;
    position: relative;
}
.about-entry li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--hp-blue-light);
}
.about-entry__more {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--hp-blue);
}

/* 단계 흐름 (브이월드 4단계 등) */
.about-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}
.about-flow li {
    flex: 1 1 180px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--hp-bg);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
}
.about-section--tint .about-flow li { background: var(--hp-card); }
.about-flow li span {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--hp-blue);
    color: var(--hp-card);
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 세로 타임라인 (데이터 수급 6 Step) */
.about-timeline {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0 0 0 1.4rem;
    border-left: 2px solid var(--hp-border);
}
.about-timeline li {
    position: relative;
    padding: 0 0 1.4rem 0.4rem;
}
.about-timeline li::before {
    content: "";
    position: absolute;
    left: -1.85rem;
    top: 0.45rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hp-blue);
    border: 2px solid var(--hp-card);
}
.about-timeline strong {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--hp-blue);
}
.about-timeline p { margin: 0.15rem 0 0; font-size: 0.95rem; line-height: 1.6; }
.about-timeline time {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    color: var(--hp-text-secondary);
}

/* === 이전·다음 이동 === */
.about-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.about-pager a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.9rem 1.3rem;
    background: var(--hp-card);
    border: 1px solid var(--hp-border);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--hp-blue);
    transition: border-color 0.2s, transform 0.2s;
}
.about-pager a:hover {
    border-color: var(--hp-blue);
    transform: translateY(-2px);
}

/* === 스크롤 등장 ===
 * 초기 상태를 `html.js` 아래에만 둔다. about_page.js 가 최상단에서
 * 이 클래스를 붙이므로, 스크립트가 죽으면 전부 보이는 평범한 문서가 된다. */
html.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    transition-delay: calc(var(--i, 0) * 60ms);
}
html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}
html.js .about-figure.reveal { transform: translateY(24px) scale(0.98); }
html.js .about-figure.reveal.is-visible { transform: none; }



/* === 반응형 === */
/* 좁은 폭에서는 그림 위에 글을 얹을 자리가 안 나온다. 글을 위로 빼고
 * 그림은 아래에 비율 그대로 둔다. 여기서도 그림은 자르지 않는다. */

@media (max-width: 1100px) {
    .about-org-grid { grid-template-columns: 1fr; }
    .about-scenario { grid-template-columns: 1fr; }
    .about-traits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-traits--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    /* 좁은 화면의 좌우 패딩도 사이트 전역값(20px)을 그대로 쓴다. 예전의 16px
       은 본문만 80% 폭으로 넓혀 쓰던 시절의 보정값이었다. */
    .about-section { padding: 3.2rem 0; }
    .about-section__head { flex-direction: column; gap: 0.3rem; }
    .about-section__num { font-size: 2rem; }
    .about-section__head h2 { font-size: 1.75rem; }
    .about-section__lead { font-size: 1.05rem; margin-bottom: 1.8rem; }
    .about-pullquote { font-size: 1.35rem; }
    .about-kpi__num { font-size: 2.6rem; }
    .about-stage-grid { grid-template-columns: 1fr; }
    .about-traits,
    .about-traits--4 { grid-template-columns: 1fr; }
    /* 두 칸을 나란히 두기엔 좁다. 세로로 쌓고 점선 칸막이도 위쪽으로 돌린다. */
    .about-defs { padding: 1.2rem; }
    .about-defs__grid { grid-template-columns: 1fr; gap: 1.4rem; }
    .about-defs__grid > * + * {
        border-left: none;
        border-top: 1px dashed var(--hp-border);
        padding-left: 0;
        padding-top: 1.4rem;
    }
    .about-vs { grid-template-columns: 1fr; }
    .about-vs__badge { margin: 0 auto; }
    .about-orgchart__row { grid-template-columns: 1fr; padding-top: 0; gap: 0.7rem; }
    .about-orgchart__row::before { display: none; }
    .about-orgchart__row > *::before { display: none; }
    .about-task-card { padding: 1.3rem; }
    .about-task-card__org { margin-left: 0; }
}

/* ============================================================
   구성기술 상세 화면(about_tech1~3.html) — 표제부와 두 도식
   ------------------------------------------------------------
   이 세 화면의 "연구내용"과 "로드맵"은 원래 발표자료 슬라이드를 통째로 찍어
   넣은 그림 한 장이었다. 원본 10~12pt 글자가 지면 폭으로 줄어 읽히지 않았고,
   발표자료 고유의 파랑·빨강·회색이 종이/잉크 팔레트와 부딪혔다. 그림을
   걷어내고 같은 내용을 마크업으로 다시 짠다. 원본이 색으로 나누던 자리는
   1px 룰러와 글자 굵기로 대신한다.
   ============================================================ */

/* === 표제부 ===
 * 화면을 열면 가장 먼저 닿는 면이라 나머지 지면과 같은 종이색으로 둔다.
 * 위계는 굵은 잉크 제목이 만들고, 아래 경계는 룰러 한 줄로 긋는다. */
.about-techhero {
    background: var(--hp-bg);
    color: var(--hp-text);
    padding: 3.4rem 0;
    border-bottom: 1px solid var(--hp-border);
}
.about-techhero .about-section__num { color: var(--hp-faint); }
.about-techhero .about-section__head h2 { color: var(--hp-text); }
.about-techhero .about-section__lead {
    max-width: 64ch;
    margin-bottom: 2.2rem;
}
.about-techhero .about-kpi { margin-bottom: 0; }
/* 표제부 바탕이 종이색이라 지표 카드도 종이색이면 서로 묻힌다. 흰 종이로
 * 한 겹 띄운다 — `--tint` 구획에서 쓰는 것과 같은 처리다. */
.about-techhero .about-kpi > * { background: var(--hp-card); }

/* === 연구내용 — 선행사업 · 본 연구개발사업 · 최종 성과물 ===
 * 원본은 좌·중·우 세 칸이고 가운데가 가장 넓다. 그 비율을 그대로 옮긴다. */
.about-research-flow {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 2.1fr) minmax(0, 0.85fr);
    gap: 1.1rem;
    align-items: stretch;
    margin-top: 1.6rem;
}
.about-research-flow > * {
    background: var(--hp-card);
    border: 1px solid var(--hp-border);
    border-radius: 12px;
    padding: 1.4rem;
}
.about-research-flow .about-rf__title {
    margin: 0 0 1.1rem;
    padding-bottom: 0.55rem;
    border-bottom: 2px solid var(--hp-rule-strong);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--hp-text);
}

/* 선행사업 칸 */
.about-research-flow .about-rf__verdict {
    margin: 0 0 1.1rem;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.55;
    color: var(--hp-blue);
}
.about-rf__traits {
    margin: 0 0 1.1rem;
    border-top: 1px solid var(--hp-border);
}
.about-rf__traits > div {
    display: grid;
    grid-template-columns: 4.4rem minmax(0, 1fr);
    gap: 0.6rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--hp-border);
}
.about-rf__traits dt {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--hp-muted);
}
.about-rf__traits dd {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--hp-text);
}
.about-rf__gaps {
    margin: 0;
    padding: 0;
    list-style: none;
}
.about-rf__gaps li {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.55rem;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--hp-text-secondary);
}
/* 원본의 ▶ 글머리를 그대로 살린다. 한계를 짚는 줄이라 강조색을 쓴다. */
.about-rf__gaps li::before {
    content: "▶";
    position: absolute;
    left: 0;
    top: 0.3em;
    font-size: 0.6rem;
    color: var(--hp-blue);
}

/* 본 연구개발사업 칸 — 단계 머리와 성능지표 */
.about-rf__stages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 0.4rem;
}
.about-rf__stage {
    border: 1px solid var(--hp-border);
    border-top: 3px solid var(--hp-blue);
    padding: 0.8rem 0.9rem;
}
.about-rf__stage b {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hp-text);
}
.about-rf__stage b span {
    margin-left: 0.45rem;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--hp-muted);
    letter-spacing: 0.03em;
}
.about-rf__stage p {
    margin: 0.3rem 0 0.7rem;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--hp-text-secondary);
}
.about-rf__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.about-rf__metrics li {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--hp-blue);
    border: 1px solid var(--hp-border);
    padding: 0.15rem 0.5rem;
}
.about-rf__metrics li em {
    font-style: normal;
    font-weight: 400;
    color: var(--hp-muted);
    margin-right: 0.3rem;
}

/* 본 연구개발사업 칸 — 연구영역 행. 한 행이 1단계·2단계 두 칸으로 갈린다. */
.about-rf__areas {
    margin: 0;
    padding: 0;
    list-style: none;
}
.about-rf__area {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--hp-border);
}
.about-rf__cell-stage { display: none; }
.about-rf__task {
    margin: 0 0 0.65rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hp-border);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--hp-text);
}
.about-rf__goals {
    margin: 0;
    padding: 0;
    list-style: none;
}
.about-rf__goals li {
    display: grid;
    grid-template-columns: 2.7rem minmax(0, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.55rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--hp-text-secondary);
}
.about-rf__goals li:last-child { margin-bottom: 0; }
.about-rf__goals li > span {
    height: fit-content;
    padding: 0.1rem 0;
    border: 1px solid var(--hp-blue);
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    color: var(--hp-blue);
}
/* 목표 줄의 부연 주석. 부모 li 가 그리드라 이 요소도 그리드 항목이 된다.
 * 열을 지정하지 않으면 다음 줄의 첫 칸(배지 자리, 2.7rem)으로 밀려 글자가
 * 한 자씩 세로로 쏟아진다. 본문과 같은 둘째 열에 명시적으로 앉힌다. */
.about-rf__goals em {
    grid-column: 2;
    margin-top: 0.2rem;
    font-style: normal;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--hp-muted);
}

/* 최종 성과물 칸 */
.about-rf__outputs {
    margin: 0;
    padding: 0;
    list-style: none;
}
.about-rf__outputs li {
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--hp-border);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--hp-text);
}
.about-rf__outputs li:first-child { padding-top: 0; }
.about-rf__outputs li:last-child { border-bottom: none; }

/* 도식 아래 각주 — 원본의 "※ 성능지표는 전략계획서 내 제시된 목표수치임" */
.about-rf__note {
    margin: 0.9rem 0 0;
    font-size: 0.8rem;
    color: var(--hp-muted);
}

/* === 로드맵 === */
.about-roadmap-track { margin-top: 1.6rem; }
.about-rt__phases {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
    margin-bottom: 1.4rem;
}
.about-rt__phase {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--hp-rule-strong);
}
.about-rt__phase b {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hp-text);
}
.about-rt__phase span {
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: var(--hp-muted);
}

/* 세부과제 한 건이 카드 하나. 안에서 연차 네 칸으로 갈린다. */
.about-rt__task {
    background: var(--hp-card);
    border: 1px solid var(--hp-border);
    border-radius: 12px;
    padding: 1.3rem;
    margin-bottom: 1.1rem;
}
.about-rt__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.7rem;
    margin-bottom: 1.1rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--hp-border);
}
.about-rt__no {
    padding: 0.15rem 0.5rem;
    background: var(--hp-blue);
    color: var(--hp-cream);
    font-size: 0.78rem;
    font-weight: 700;
}
.about-roadmap-track .about-rt__head h4 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--hp-text);
}
.about-rt__orgs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}
.about-rt__orgs li {
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--hp-border);
    font-size: 0.78rem;
    color: var(--hp-text-secondary);
}
.about-rt__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}
.about-rt__col {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
/* 연차 머리는 칸마다 되풀이한다. 카드 바깥에 한 줄로 두면 카드 안쪽 여백만큼
 * 어긋나 열이 맞지 않는다. 되풀이하는 대신 작고 흐리게 둔다. */
.about-rt__yr {
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--hp-border);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--hp-muted);
}
.about-rt__yr em {
    display: block;
    font-style: normal;
    font-weight: 400;
    color: var(--hp-faint);
}
.about-rt__item p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--hp-text);
}
/* 산출물. 원본은 칸을 색으로 채워 구분했는데, 여기서는 옅은 종이 바탕에
 * 강조색 세로선 하나로 대신한다. */
.about-rt__deliv {
    margin-top: 0.35rem;
    padding: 0.3rem 0.5rem;
    background: var(--hp-paper-tint);
    border-left: 2px solid var(--hp-blue);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--hp-text-secondary);
}
.about-rt__result {
    display: grid;
    grid-template-columns: 5.6rem minmax(0, 1fr);
    gap: 0.7rem;
    align-items: baseline;
    margin: 1.1rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid var(--hp-border);
}
.about-rt__result dt {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--hp-muted);
}
.about-rt__result dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--hp-blue);
}

/* 좁은 화면 — 세 칸을 세로로 풀고, 연차는 두 칸씩 접는다. */
@media (max-width: 1100px) {
    .about-research-flow { grid-template-columns: minmax(0, 1fr); }
    .about-rt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .about-rf__stages,
    .about-rf__area,
    .about-rt__phases,
    .about-rt__grid { grid-template-columns: minmax(0, 1fr); }
    /* 두 칸이 한 줄로 겹치면 어느 단계인지 알 수 없다. 이때만 꼬리표를 켠다. */
    .about-rf__cell-stage {
        display: block;
        margin-bottom: 0.4rem;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        color: var(--hp-blue);
    }
    .about-rt__orgs { margin-left: 0; }
}

/* ============================================================
   연구소개 랜딩 (about.html)
   ------------------------------------------------------------
   예전 이 자리에는 전면 일러스트와 SCROLL 표시를 단 홈페이지급 히어로가
   있었다. index.html 의 히어로와 경쟁해 여기가 메인인지 서브인지 읽히지
   않았다. 히어로를 걷어내고 얇은 표제부 + 제원 표 + 목차로 바꾼다.
   이 화면의 본체는 목차다.
   ============================================================ */
/* 화면엔 보이지 않지만 스크린리더·검색엔진에는 남는 제목용 유틸. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* 위 여백은 0 이다. 표지 그림이 머리띠 바로 아래에서 시작해 화면을 곧장
 * 채운다 — 그림 자체가 사업명을 이고 있어, 그 위에 빈 띠를 한 겹 더 두면
 * 표제가 두 번 시작하는 것처럼 보인다. 아래 여백은 그대로 둔다. */
.about-landing {
    background: var(--hp-bg);
    padding: 0 0 4.2rem;
}
.about-landing__head { margin-bottom: 3rem; }

/* 표지 그림 — 본문 가로폭을 꽉 채우고 세로는 비율만 따라간다. 원본이 무슨
 * 크기로 들어오든 height:auto 가 비율을 지키므로 그림이 눌리지 않는다.
 * 아래 여백은 표제부(.about-landing__head)와 같은 3rem 으로 맞춰, 이 자리에
 * 무엇이 오든 목차까지의 간격이 같게 한다. */
.about-cover {
    margin: 0 0 3rem;
}
.about-cover img {
    display: block;
    /* 본문 가로 폭보다 7% 작게 — 100% 에서 7 을 덜어낸 값이다. */
    width: 93%;
    height: auto;
    /* 왼쪽 여백만 자동으로 벌려 오른쪽 끝을 본문 끝에 붙인다. 남는 30% 는
     * 왼쪽에 여백으로 남아, 그림 속 제목 글자가 지면 가운데로 들어온다. */
    margin-left: auto;
    /* 가장자리 흐림 — 그림의 미색 배경이 지면 종이색과 미묘하게 달라 네 변이
     * 직선으로 도드라졌다. 마스크로 네 변을 투명으로 풀어 지면에 스미게 한다.
     * 마스크는 알파만 읽으므로 불투명 정지점의 색은 무엇이든 같고, 색상 토큰
     * 규칙에 맞춰 잉크 토큰을 쓴다. 배경색이 바뀌어도 함께 성립한다. */
    -webkit-mask-image:
        linear-gradient(to right, transparent, var(--hp-text) 36px, var(--hp-text) calc(100% - 36px), transparent),
        linear-gradient(to bottom, transparent, var(--hp-text) 36px, var(--hp-text) calc(100% - 36px), transparent);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent, var(--hp-text) 36px, var(--hp-text) calc(100% - 36px), transparent),
        linear-gradient(to bottom, transparent, var(--hp-text) 36px, var(--hp-text) calc(100% - 36px), transparent);
    mask-composite: intersect;
}
.about-landing__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--hp-muted);
}
.about-landing h1 {
    margin: 0.9rem 0 0;
    max-width: 20ch;
    font-size: 2.9rem;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.03em;
    color: var(--hp-text);
    text-wrap: balance;
}
.about-landing__org {
    margin: 1.1rem 0 0;
    font-size: 0.85rem;
    color: var(--hp-muted);
}
.about-landing__lead {
    margin: 1.25rem 0 0;
    max-width: 62ch;
    font-size: 1.06rem;
    line-height: 1.7;
    color: var(--hp-text-secondary);
    text-wrap: pretty;
}

/* 제원 — 수치 카드가 아니라 신문 지면의 제원 표. 굵은 룰러로 열고 닫는다. */
.about-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 0 3.4rem;
    border-top: 2px solid var(--hp-rule-strong);
    border-bottom: 1px solid var(--hp-border);
}
.about-facts > div {
    padding: 1rem 1.25rem 1.15rem;
    border-right: 1px solid var(--hp-border);
}
.about-facts > div:first-child { padding-left: 0; }
.about-facts > div:last-child { padding-right: 0; border-right: none; }
.about-facts dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--hp-muted);
}
.about-facts dd {
    margin: 0.45rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--hp-text);
}
/* `.about-facts dd` 가 타입 선택자를 끼고 있어(class 1 + type 1) 특이도가
 * class 하나뿐인 `.about-facts__accent`(class 1)보다 높다 — dd 를 붙이지
 * 않으면 강조 색이 조용히 먹지 않는다. note 도 같은 계열 선택자로 맞춘다. */
.about-facts dd.about-facts__accent { color: var(--hp-blue); }
.about-facts dd.about-facts__note {
    margin-top: 0.2rem;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--hp-text-secondary);
}

/* 목차 — 이 화면의 본체. 신문 색인처럼 한 줄에 한 챕터씩 읽는다. */
.about-index__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--hp-rule-strong);
}
/* 목차 제목은 아래 챕터 이름(.about-index__title strong, 1.35rem)보다 한 단계
 * 크다. 제원 표가 빠지면서 이 줄이 화면의 첫 글이 됐는데, 0.82rem 짜리 작은
 * 라벨이면 목록에 딸린 꼬리표처럼 보이고 목록의 머리로 읽히지 않는다.
 * 자간은 라벨 시절의 0.2em 을 그대로 두면 커진 글자에서 지나치게 벌어져
 * 제목답게 좁힌다. */
.about-index__head h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--hp-text);
}
.about-index__head span {
    font-size: 0.78rem;
    color: var(--hp-muted);
}
.about-index__row {
    display: grid;
    grid-template-columns: 3.9rem minmax(0, 30ch) minmax(0, 1fr) 1.5rem;
    gap: 1.25rem;
    align-items: baseline;
    padding: 1.35rem 0;
    border-bottom: 1px solid var(--hp-border);
    color: inherit;
    transition: background 0.2s, padding 0.2s;
}
.about-index__row:hover {
    background: var(--hp-card);
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    color: inherit;
}
.about-index__row--mark { background: var(--hp-paper-tint); }
.about-index__no {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--hp-faint);
}
.about-index__row--mark .about-index__no { color: var(--hp-blue); }
.about-index__title strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--hp-text);
}
.about-index__title em {
    display: block;
    margin-top: 0.35rem;
    font-style: normal;
    font-size: 0.78rem;
    color: var(--hp-muted);
}
.about-index__row--mark .about-index__title em {
    font-weight: 700;
    color: var(--hp-blue);
}
.about-index__desc {
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--hp-text-secondary);
}
.about-index__row i {
    font-size: 1rem;
    color: var(--hp-muted);
}
.about-index__row--mark i { color: var(--hp-blue); }

.about-landing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2.4rem;
}
/* 버튼은 라운드 없는 사각 — 잉크 배경/종이 글자, 보조는 1px 잉크 보더 */
.about-landing__cta {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.5rem;
    background: var(--hp-ink);
    color: var(--hp-cream);
    font-size: 0.92rem;
    font-weight: 600;
}
.about-landing__cta:hover { background: var(--hp-blue-dark); color: var(--hp-cream); }
.about-landing__cta--ghost {
    background: none;
    border: 1px solid var(--hp-ink);
    color: var(--hp-ink);
}
.about-landing__cta--ghost:hover { background: var(--hp-ink); color: var(--hp-cream); }

/* === 챕터 끝의 이전/다음 === */
.about-chapter-foot { padding: 2.6rem 0 3.4rem; }
.about-chapter-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}
.about-chapter-move {
    padding: 1rem 1.15rem;
    border: 1px solid var(--hp-border);
    color: inherit;
    transition: border-color 0.2s, background 0.2s;
}
.about-chapter-move:hover { border-color: var(--hp-ink); background: var(--hp-bg); color: inherit; }
.about-chapter-move--next { text-align: right; border-color: var(--hp-ink); }
.about-chapter-move span {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--hp-muted);
}
.about-chapter-move--next span { color: var(--hp-blue); }
.about-chapter-move strong {
    display: block;
    margin-top: 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--hp-text);
}

@media (max-width: 1100px) {
    .about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-facts > div:nth-child(2) { padding-right: 0; border-right: none; }
    .about-facts > div:nth-child(3) { padding-left: 0; }
    .about-index__row { grid-template-columns: 3.2rem minmax(0, 1fr) 1.5rem; }
    .about-index__desc { grid-column: 2 / 4; }
}
@media (max-width: 768px) {
    .about-landing h1 { font-size: 2rem; }
    .about-facts { grid-template-columns: minmax(0, 1fr); }
    .about-facts > div {
        padding: 0.9rem 0;
        border-right: none;
        border-bottom: 1px solid var(--hp-border);
    }
    .about-facts > div:last-child { border-bottom: none; }
    .about-index__row,
    .about-index__row:hover { grid-template-columns: 2.6rem minmax(0, 1fr); padding-left: 0; padding-right: 0; }
    .about-index__desc { grid-column: 2 / 3; }
    .about-index__row i { display: none; }
    .about-chapter-nav { grid-template-columns: minmax(0, 1fr); }
    .about-chapter-move--next { text-align: left; }
}

/* === 인쇄 ===
 * 인쇄 경로에서는 관찰기 콜백이 오지 않아 등장 대기 상태가 그대로 굳는다.
 * 여기서 초기 상태를 풀지 않으면 종이에 빈 페이지가 나온다. */
@media print {
    html.js .reveal,
    html.js .about-figure.reveal {
        opacity: 1;
        transform: none;
    }
    .about-progress,
    .about-navbar,
    .about-section { padding: 1.5rem 0; }
}

/* === 동작 줄이기 === */
@media (prefers-reduced-motion: reduce) {
    .about-page { scroll-behavior: auto; }
    html.js .reveal,
    html.js .about-figure.reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .about-page *,
    .about-page *::before,
    .about-page *::after {
        animation: none !important;
        transition: none !important;
    }
}