/* ==============================================================================
 * 🟡 Jihyun Park — Swiss Brutalist Poster Theme (style.css)
 * Exact Style Reference: poster_concept_bookshop_people.jpg (Rep.Club Layout)
 * Typeface: Univers (Univers 85 Extra Black / Univers 75 Bold / Serif Annotation)
 * Palette: Acid Chartreuse Lime-Yellow (#CEFF00) + Solid Black (#000000) + White (#FFFFFF)
 * ============================================================================== */

/* --- CSS Design Tokens --- */
:root {
    --acid-yellow: #CEFF00;
    /* Primary Accent Lime-Yellow */
    --acid-yellow-hover: #E2FF4D;
    --black: #000000;
    --dark-bg: #0A0A0A;
    --card-bg: #121212;
    --white: #FFFFFF;
    --gray-light: #F0F0F0;
    --gray-mid: #888888;
    --gray-dark: #222222;
    --border-black: #000000;
    --font-univers: 'Univers', 'Univers LT Std', 'Univers 85 Extra Black', 'Univers 75 Black', 'Archivo Black', 'Noto Sans KR', 'Inter', sans-serif;
    --font-serif: 'Playfair Display', 'Cormorant Garamond', 'Times New Roman', serif;
    --font-mono: 'JetBrains Mono', 'Space Grotesk', monospace;
    --font-body: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-korean: 'Noto Sans KR', sans-serif;

    --transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Global Reset --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    background-color: var(--dark-bg);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
}

body {
    background-color: var(--dark-bg);
    min-height: 100vh;
    overflow-x: hidden;
}

/* --- 🌌 Generative Particle Canvas (Foreground Floating over Poster & Text) --- */
.background-canvas,
#generativeCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999;
    display: block;
}

/* --- Radiant Orange-Pink Magnifying Lens Cursor (Crystal Glass & Neon Rim) --- */
.inverted-lens-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35 0%, #FF2A85 60%, #FFA07A 100%);
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 16px rgba(255, 107, 53, 0.75),
        0 0 32px rgba(255, 42, 133, 0.55),
        inset 0 0 6px rgba(255, 255, 255, 0.6);
    transition: width 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.22s ease,
        border 0.22s ease,
        opacity 0.2s ease,
        transform 0.12s ease-out,
        box-shadow 0.25s ease;
    opacity: 0;
    will-change: left, top, width, height, transform;
}

.inverted-lens-cursor.visible {
    opacity: 1;
}



.inverted-lens-cursor.active {
    transform: translate(-50%, -50%) scale(0.85);
    box-shadow: 0 0 32px rgba(255, 107, 53, 1),
        0 0 65px rgba(255, 42, 133, 0.9);
}

@media (hover: hover) and (pointer: fine) {

    body:not(.modal-open),
    body:not(.modal-open) a,
    body:not(.modal-open) button,
    body:not(.modal-open) input,
    body:not(.modal-open) select,
    body:not(.modal-open) label,
    body:not(.modal-open) .palette-dot,
    body:not(.modal-open) .nav-palette-dot {
        cursor: none !important;
    }
}

/* 🌟 Restore standard responsive cursor when modal is open */
body.modal-open,
body.modal-open .project-modal,
body.modal-open .modal-card,
body.modal-open .modal-body {
    cursor: default !important;
}

body.modal-open .inverted-lens-cursor {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.modal-open .modal-close-btn,
body.modal-open .modal-thumb,
body.modal-open button {
    cursor: pointer !important;
}

/* ==============================================================================
 * 🏛️ SWISS EDITORIAL ARCHITECTURE & UNIFIED GRID SYSTEM
 * ============================================================================== */
.content-section {
    max-width: 1720px;
    margin: 2.5rem auto;
    padding: 0 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

.cv-editorial-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    margin-top: 1.2rem;
}

/* Editorial Hero Statement Box (Full-Width Top Module) */
.cv-hero-statement-box {
    background: var(--card-bg);
    border: 2px solid var(--border-dark);
    padding: 2.6rem 2.4rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

.cv-research-unified {
    margin-top: 0.5rem;
    position: relative;
    width: 100%;
    min-height: 160px;
    cursor: default;
}

.manifesto-physics-canvas {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    cursor: crosshair;
}

.cv-research-text-fallback {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cv-research-unified p {
    font-size: 0.86rem;
    line-height: 1.85;
    color: var(--gray-light);
    word-break: keep-all;
    margin: 0;
}

.cv-research-unified p strong {
    color: var(--white);
}

/* Unified 3-Column Top Matrix (Equal 1:1:1 Harmonic Grid) */
.cv-top-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    background: var(--card-bg);
    border: 2px solid var(--border-dark);
    padding: 2.5rem 2.2rem;
    box-sizing: border-box;
}

/* Column 1: Identity, Education & Skills */
.cv-col-identity {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    border-right: 1px solid var(--border-dark);
    padding-right: 1.8rem;
}

.cv-profile-header {
    display: flex;
    align-items: flex-end;
    gap: 1.4rem;
    padding-bottom: 0.4rem;
    min-height: 64px;
    box-sizing: border-box;
}

.cv-profile-header-spacer {
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.4rem;
    min-height: 84px;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .cv-top-matrix {
        grid-template-columns: 1fr;
    }

    .cv-col-identity,
    .cv-col-timeline {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid var(--border-dark);
        padding-bottom: 2rem;
    }

    .cv-profile-header-spacer {
        display: none;
    }
}

.cv-logo-box {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 0;
    flex-shrink: 0;
}

.jp-official-logo {
    width: 64px;
    height: auto;
    display: block;
    background: transparent !important;
    border: none !important;
    filter: invert(1) brightness(1.2);
    transition: var(--transition);
}

.cv-name-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 2px;
}

.cv-name-block h3 {
    font-family: var(--font-univers);
    font-size: 1.45rem;
    font-weight: 900;
    color: var(--white);
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.cv-name-block .cv-meta-sub {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--gray-mid);
    line-height: 1.5;
}

.cv-sub-section {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    word-break: keep-all;
}

.cv-sub-section p {
    word-break: keep-all;
}

.cv-label {
    font-family: var(--font-univers);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 0.45rem;
    margin-bottom: 0.3rem;
}

.cv-label::before {
    content: '■ ';
    color: var(--acid-yellow);
    font-size: 0.65rem;
    margin-right: 0.35rem;
}

.cv-list-clean {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--gray-light);
    line-height: 1.6;
}

.cv-list-clean li {
    list-style: none;
    line-height: 1.5;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    padding-bottom: 0.45rem;
}

.cv-list-clean li:last-child {
    border-bottom: none;
}

.cv-list-clean li strong {
    color: var(--white);
    font-family: var(--font-korean);
    font-weight: 700;
    font-size: 0.88rem;
    display: block;
}

.cv-list-clean li span {
    font-size: 0.80rem;
    color: var(--gray-mid);
}

.cv-list-side {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.82rem;
}

.cv-list-side li {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.8rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    padding-bottom: 0.4rem;
    line-height: 1.5;
}

.cv-list-side li strong {
    color: var(--white);
    font-family: var(--font-korean);
    font-weight: 700;
    font-size: 0.88rem;
    white-space: nowrap;
}

.cv-list-side li span {
    font-family: var(--font-mono);
    font-size: 0.80rem;
    color: var(--gray-mid);
    text-align: right;
}

.cv-list-side li span {
    font-size: 0.78rem;
    color: var(--acid-yellow);
    font-family: var(--font-mono);
    text-align: right;
    white-space: nowrap;
}

.cv-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.cv-pill {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    background: #181818;
    color: var(--white);
    border: 1px solid var(--border-dark);
    padding: 4px 8px;
    letter-spacing: 0.02em;
}

.cv-pill.pill-accent {
    border-color: var(--acid-yellow);
    color: var(--acid-yellow);
}

/* Column 2: Heritage Timeline */
.cv-col-timeline {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    border-right: 1px solid var(--border-dark);
    padding-right: 1.8rem;
}

.cv-timeline-track {
    position: relative;
    padding-left: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.cv-timeline-track::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 4px;
    width: 2px;
    background: var(--border-dark);
}

.cv-time-node {
    position: relative;
}

.cv-time-node::before {
    content: '';
    position: absolute;
    left: -1.6rem;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--black);
    border: 2px solid var(--gray-mid);
}

.cv-time-node.node-star::before {
    background: var(--black);
    border-color: var(--gray-mid);
    box-shadow: none;
}

.cv-node-year {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 0.2rem;
    letter-spacing: 0.02em;
}

.cv-time-node.node-star .cv-node-year {
    color: var(--white);
}

.cv-node-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    font-family: var(--font-univers), var(--font-korean);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.4;
    margin-bottom: 0.2rem;
}

.cv-node-role {
    font-family: var(--font-mono);
    font-size: 0.80rem;
    color: var(--acid-yellow);
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
}

.cv-node-desc {
    font-family: var(--font-korean);
    font-size: 0.82rem;
    color: var(--gray-light);
    line-height: 1.6;
}

/* Column 3: Research & Projects */
.cv-col-projects {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.cv-research-structured {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-family: var(--font-korean);
    font-size: 0.82rem;
    color: var(--gray-light);
    line-height: 1.65;
    word-break: keep-all;
}

.cv-research-structured p {
    margin: 0;
    line-height: 1.65;
    word-break: keep-all;
}

.cv-research-structured p strong {
    color: var(--white);
}

.cv-project-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    word-break: keep-all;
}

.cv-proj-title {
    font-family: var(--font-univers), var(--font-korean);
    font-weight: 700;
    font-size: 0.90rem;
    color: var(--white);
    line-height: 1.4;
}

.cv-proj-desc {
    font-family: var(--font-korean);
    font-size: 0.82rem;
    color: var(--gray-mid);
    line-height: 1.5;
}

.cv-project-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cv-proj-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.35;
}

.cv-proj-desc {
    font-size: 0.8rem;
    color: var(--gray-mid);
    line-height: 1.4;
}

/* Bottom 2-Column Balanced Bento Grid */
.cv-bottom-matrix {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 1.5rem;
}

.cv-full-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.cv-right-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cv-card-box {
    background: var(--card-bg);
    border: 2px solid var(--border-dark);
    padding: 2.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.cv-card-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--acid-yellow);
    padding-bottom: 0.55rem;
}

.cv-card-heading {
    font-family: var(--font-univers);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cv-card-badge {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 700;
    background: var(--acid-yellow);
    color: var(--black);
    padding: 3px 8px;
    letter-spacing: 0.02em;
}

.cv-exhibit-table {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cv-exhibit-table .cv-exhibit-row {
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.cv-exhibit-table .cv-ex-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.2rem;
}

.cv-exhibit-table .cv-ex-info strong {
    font-family: var(--font-korean);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 0;
    color: var(--white);
}

.cv-exhibit-table .cv-ex-info span {
    font-family: var(--font-korean);
    font-size: 0.80rem;
    line-height: 1.4;
    color: var(--gray-light);
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

.cv-exhibit-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.cv-group-col {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cv-exhibit-row {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 0.7rem;
    font-size: 0.84rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    word-break: keep-all;
}

.cv-ex-year {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--acid-yellow);
}

.cv-ex-info strong {
    color: var(--white);
    font-size: 0.86rem;
    font-weight: 700;
    display: block;
    margin-bottom: 3px;
    line-height: 1.4;
}

.cv-ex-info span {
    color: var(--gray-light);
    font-size: 0.78rem;
    line-height: 1.45;
    display: block;
}

.cv-award-table {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.cv-award-row {
    display: grid;
    grid-template-columns: 85px 1fr;
    gap: 0.8rem;
    font-size: 0.84rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cv-aw-date {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--acid-yellow);
}

.cv-aw-info strong {
    color: var(--white);
    font-size: 0.86rem;
    font-weight: 700;
    display: block;
    margin-bottom: 3px;
    line-height: 1.4;
}

.cv-aw-info span {
    color: var(--gray-light);
    font-size: 0.78rem;
    line-height: 1.45;
    display: block;
}

/* Papers & Lectures Table (Compact & Refined Line Spacing) */
.cv-paper-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cv-paper-item:first-child {
    padding-top: 0;
}

.cv-paper-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cv-paper-num {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--acid-yellow);
}

.cv-paper-title {
    font-family: var(--font-korean);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.5;
    word-break: keep-all;
}

.cv-paper-journal {
    font-family: var(--font-korean);
    font-size: 0.80rem;
    color: var(--gray-mid);
    line-height: 1.45;
    word-break: keep-all;
}

.cv-lecture-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.8rem;
    font-size: 0.82rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cv-lec-univ {
    font-family: var(--font-univers), var(--font-korean);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--white);
}

.cv-lec-univ span {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--acid-yellow);
    font-weight: 700;
}

.cv-lec-courses {
    font-family: var(--font-korean);
    font-size: 0.82rem;
    color: var(--gray-mid);
    line-height: 1.45;
}

.cv-press-item {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    font-size: 0.82rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.cv-press-year {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--acid-yellow);
    min-width: 50px;
    flex-shrink: 0;
}

.cv-press-text {
    font-family: var(--font-korean);
    font-size: 0.82rem;
    color: var(--gray-light);
    line-height: 1.5;
}

/* University Tag Grid (Compact & Proportional) */
.cv-univ-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
}

.cv-univ-pill {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 0.55rem 0.7rem;
    font-family: var(--font-univers), var(--font-korean);
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--white);
    text-align: center;
    transition: var(--transition);
}

.cv-univ-pill:hover {
    border-color: var(--acid-yellow);
    color: var(--acid-yellow);
    background: rgba(206, 255, 0, 0.06);
    transform: translateY(-2px);
}

.paper-subtitle {
    display: block;
    font-family: var(--font-korean);
    font-size: 0.80rem;
    color: var(--gray-light);
    margin-top: 0.2rem;
    line-height: 1.45;
    word-break: keep-all;
}

@media (max-width: 768px) {
    .cv-univ-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .cv-top-matrix {
        grid-template-columns: 1fr 1fr;
    }

    .cv-col-timeline {
        border-right: none;
        padding-right: 0;
    }

    .cv-col-projects {
        grid-column: span 2;
        border-top: 1px solid var(--border-dark);
        padding-top: 1.8rem;
    }

    .cv-bottom-matrix {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .cv-top-matrix {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }

    .cv-col-identity,
    .cv-col-timeline {
        border-right: none;
        padding-right: 0;
    }

    .cv-col-projects {
        grid-column: span 1;
    }

    .cv-card-box {
        padding: 1.5rem;
    }
}

/* --- Minimalist Generative Canvas (Floating Above Layers) --- */
.background-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 25;
    pointer-events: none;
    opacity: 0.95;
}

/* --- Fixed Top Navigation --- */
.top-nav-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--black);
    border-bottom: 2px solid var(--border-dark);
    padding: 1.35rem 0 1.15rem 0;
}

.nav-container {
    max-width: 1720px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.nav-left {
    display: flex;
    align-items: center;
}

.nav-brand {
    font-family: var(--font-heavy);
    font-weight: 900;
    font-size: clamp(1.1rem, 1.55vw, 1.7rem);
    color: var(--acid-yellow);
    text-decoration: none;
    letter-spacing: -0.01em;
    line-height: 1;
    text-transform: uppercase;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease, text-shadow 0.22s ease;
    display: inline-block;
    transform-origin: left center;
}

.nav-brand:hover {
    color: #FFFFFF;
    transform: scale(1.22);
    text-shadow: 0 0 16px rgba(255, 255, 255, 0.9), 0 0 28px var(--acid-yellow);
}

.nav-links {
    display: flex;
    gap: 1.8rem;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--white);
    font-family: var(--font-univers);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    display: inline-block;
    transform-origin: center center;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.2s ease,
        text-shadow 0.22s ease;
}

/* 🔍 상단 메뉴 텍스트 돋보기 확대 인터랙션 (Magnifying Fisheye Zoom) */
.nav-links a:hover {
    color: var(--acid-yellow);
    transform: scale(1.42);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.95),
        0 0 24px rgba(255, 107, 53, 0.8),
        0 0 36px var(--acid-yellow);
    z-index: 10;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1.8rem;
}

.nav-menu-links {
    display: flex;
    align-items: center;
    gap: 1.8rem;
}

.nav-item-link {
    font-family: var(--font-univers);
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--white);
    text-decoration: none;
    letter-spacing: 0.04em;
    display: inline-block;
    transform-origin: center center;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease, text-shadow 0.22s ease;
}

.nav-item-link:hover {
    color: var(--acid-yellow);
    transform: scale(1.38);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 0 24px var(--acid-yellow);
}

.nav-theme-dots {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding-left: 0.8rem;
    border-left: 1px solid var(--border-dark);
}

.nav-palette-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    cursor: pointer;
    padding: 0;
    outline: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1;
}

.nav-palette-dot:hover,
.nav-palette-dot.active {
    border-color: var(--white);
    transform: scale(1.3);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

/* ==============================================================================
 * 💛 HERO POSTER (Rep.Club Split Poster Composition — 1920x1080 Optimized)
 * ============================================================================== */
.poster-hero-section {
    position: relative;
    z-index: 10;
    max-width: 1720px;
    margin: 1.2rem auto 3.5rem auto;
    padding: 0 1.5rem;
}

.poster-card-wrapper {
    background: var(--black);
    border: 3px solid var(--border-dark);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9);
}

/* [TOP POSTER BLOCK: Acid Lime-Yellow Background] */
.poster-top-block {
    background: var(--acid-yellow);
    padding: 1.8rem 2.6rem 1.6rem 2.6rem;
    border-bottom: 3px solid var(--black);
}

.poster-top-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--black);
    padding-bottom: 0.4rem;
}

/* Typographic Poster Wall */
.poster-typography-wall {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.wall-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.8rem;
    line-height: 1.05;
}



.heavy-text {
    font-family: var(--font-univers);
    font-weight: 900;
    font-size: clamp(1.7rem, 3.58vw, 3.9rem);
    text-transform: uppercase;
    letter-spacing: 0.015em;
    color: var(--black);
    white-space: nowrap;
}

.heavy-amp {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(1.9rem, 3.9vw, 4.2rem);
    line-height: 0.85;
    color: var(--black);
}

.heavy-group-nowrap {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    white-space: nowrap;
}

.heavy-cities-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.no-break-word {
    white-space: nowrap !important;
    display: inline-block;
}

/* Inset Serif & Mono Annotation Boxes */
.inline-annotation-box {
    display: inline-flex;
    flex-direction: column;
    background: transparent;
    padding: 0 0.4rem;
    line-height: 1.15;
    margin-right: 0.6rem;
}

.anno-serif {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(0.68rem, 0.85vw, 0.88rem);
    color: var(--black);
    font-weight: 600;
    white-space: nowrap;
}

.contact-annotation-box {
    display: inline-flex;
    flex-direction: column;
    margin-left: auto;
    text-align: right;
    line-height: 1.2;
}

.anno-mono {
    font-family: var(--font-mono);
    font-size: clamp(0.65rem, 0.8vw, 0.82rem);
    font-weight: 700;
    color: var(--black);
    white-space: nowrap;
}

/* Sub-Keyword Manifesto Line */
.poster-sub-manifesto {
    margin-top: 0.9rem;
    padding-top: 0.6rem;
    border-top: 2px solid var(--black);
    width: 100%;
}

.manifesto-line-1 {
    font-family: var(--font-serif);
    font-size: clamp(0.70rem, 0.83vw, 0.86rem);
    color: var(--black);
    line-height: 1.45;
    font-weight: 500;
    text-align: justify;
    text-align-last: justify;
    text-justify: inter-word;
    width: 100%;
    display: block;
    margin-bottom: 0.25rem;
    white-space: normal;
}

.manifesto-line-2 {
    font-family: var(--font-serif);
    font-size: clamp(0.70rem, 0.83vw, 0.86rem);
    color: var(--black);
    line-height: 1.45;
    font-weight: 500;
    text-align: left;
    display: block;
}

.manifesto-line-1 em {
    font-weight: 700;
    text-transform: uppercase;
    font-family: var(--font-univers);
    font-style: normal;
    background: var(--black);
    color: var(--acid-yellow);
    padding: 1px 5px;
    margin-right: 4px;
}

/* [BOTTOM POSTER BLOCK: Deep Black Graphic Split — Tight Fit] */
.poster-bottom-block {
    background: var(--black);
    position: relative;
    height: clamp(120px, 14.5vh, 175px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
}

.bottom-giant-letters {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
    overflow: hidden;
}

.giant-word {
    font-family: var(--font-univers);
    font-weight: 900;
    font-size: clamp(5.5rem, 16.8vw, 18.5rem);
    color: var(--white);
    line-height: 0.72;
    letter-spacing: -0.042em;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    width: 100%;
    transform: translateX(-1.7%);
    opacity: 1;
    text-shadow: 0 0 60px rgba(255, 255, 255, 0.25);
}

.spaced-statement {
    letter-spacing: 0.02em;
}

.bottom-cta-container {
    position: absolute;
    bottom: 2.6rem;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
}

.strip-cta-pill {
    background: var(--acid-yellow);
    color: var(--black);
    font-family: var(--font-univers);
    font-weight: 900;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-decoration: none;
    padding: 0.85rem 2.6rem;
    border: 2px solid var(--black);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: var(--transition);
}

.strip-cta-pill:hover {
    background: var(--white);
    color: var(--black);
    transform: translateY(-2px);
}

/* ==============================================================================
 * 🏛️ SECTION LAYOUT & SWISS MATRIX
 * ============================================================================== */
.content-section {
    position: relative;
    z-index: 10;
    max-width: 1720px;
    margin: 0 auto 2.5rem auto;
    padding: 0 1.5rem;
}

#lab.content-section {
    margin-bottom: 1.2rem;
}

.lab-top-meta-bar {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    border-bottom: 1px solid var(--acid-yellow);
    padding-bottom: 0.35rem;
    margin-bottom: 1.5rem;
}

.section-index-pill {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--black);
    background: var(--acid-yellow);
    padding: 0.35rem 0.75rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
}

/* --- Swiss Lab Box & Interactive Controls --- */
.swiss-lab-box {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    background: rgba(14, 14, 14, 0.7);
    backdrop-filter: blur(10px);
    border: 2px solid var(--border-dark);
    padding: 2.5rem;
    position: relative;
    z-index: 10;
}

.lab-title-group {
    margin-bottom: 0.8rem;
}

.lab-main-title {
    font-family: var(--font-univers);
    font-weight: 900;
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    color: var(--acid-yellow);
    letter-spacing: 0.06em;
}

.lab-lead-text {
    font-size: 0.95rem;
    color: var(--gray-mid);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.lab-metric-pills {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.m-pill {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    background: #181818;
    border: 1px solid var(--border-dark);
    padding: 0.35rem 0.75rem;
    display: inline-flex;
    gap: 0.4rem;
}

.m-lbl {
    color: var(--gray-mid);
}

.m-val {
    color: var(--acid-yellow);
}

.lab-right-controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.2rem;
    width: 100%;
}

.swiss-control-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
    margin-bottom: 0;
}

.control-label-left {
    min-width: 110px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.swiss-control-line input[type="range"] {
    flex: 1 1 auto;
    width: 100%;
    height: 7px;
    accent-color: var(--acid-yellow);
    cursor: pointer;
    margin: 0;
}

.control-val-right {
    min-width: 38px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--acid-yellow);
    flex-shrink: 0;
}

.swiss-theme-palette {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    /* widened gap as requested */
    margin-top: 0.4rem;
}

.pal-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--acid-yellow);
    margin-right: 0.2rem;
}

.palette-dot {
    width: 14px;
    /* small circle */
    height: 14px;
    border-radius: 50%;
    /* circle shape */
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    outline: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.palette-dot:hover {
    transform: scale(1.35);
}

.palette-dot.active {
    border-color: #FFFFFF;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4), 0 0 8px currentColor;
    transform: scale(1.2);
}

/* ==============================================================================
 * 🏛️ SWISS EDITORIAL ABOUT & CV MATRIX (3-Column Architecture)
 * ============================================================================== */
.about-editorial-container {
    background: var(--card-bg);
    border: 2px solid var(--border-dark);
    padding: 3rem 2.8rem;
    margin-top: 1.5rem;
}

.about-editorial-grid {
    display: grid;
    grid-template-columns: 280px 360px 1fr;
    gap: 2.8rem;
}

.about-left-col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    border-right: 1px solid var(--border-dark);
    padding-right: 2.2rem;
}

.about-logo-box {
    margin-bottom: 0.6rem;
}

.jp-monogram-svg {
    width: 64px;
    height: auto;
    fill: currentColor;
    color: var(--white);
    transition: var(--transition);
}

.about-editorial-container:hover .jp-monogram-svg {
    color: var(--acid-yellow);
}

.about-profile-meta h3 {
    font-family: var(--font-univers);
    font-size: 1.45rem;
    font-weight: 900;
    color: var(--white);
    margin-bottom: 0.3rem;
}

.about-profile-meta .meta-sub {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--gray-mid);
    line-height: 1.6;
}

.about-meta-group {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.about-section-label {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--acid-yellow);
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border-dark);
    padding-bottom: 0.35rem;
    margin-bottom: 0.3rem;
}

.about-tag-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.84rem;
    color: var(--gray-light);
}

.about-tag-list li {
    list-style: none;
    line-height: 1.45;
}

.about-tag-list li span.role-title {
    color: var(--white);
    font-weight: 700;
    display: block;
}

.about-tag-list li span.role-affil {
    color: var(--gray-mid);
    font-size: 0.78rem;
}

.about-pills-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.about-pill {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    background: #181818;
    color: var(--white);
    border: 1px solid var(--border-dark);
    padding: 3px 8px;
    letter-spacing: 0.02em;
}

/* Center Column: Vertical Heritage Timeline */
.about-timeline-col {
    border-right: 1px solid var(--border-dark);
    padding-right: 2.2rem;
}

.timeline-track {
    position: relative;
    padding-left: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.timeline-track::before {
    content: '';
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 4px;
    width: 2px;
    background: var(--border-dark);
}

.timeline-node {
    position: relative;
}

.timeline-node::before {
    content: '';
    position: absolute;
    left: -1.8rem;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--black);
    border: 2px solid var(--acid-yellow);
    transform: translateX(-0.5px);
}

.timeline-node.highlight-node::before {
    background: var(--acid-yellow);
    box-shadow: 0 0 10px var(--acid-yellow);
}

.timeline-year {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--acid-yellow);
    margin-bottom: 0.2rem;
}

.timeline-inst {
    font-family: var(--font-univers);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.timeline-detail {
    font-size: 0.84rem;
    color: var(--gray-mid);
    line-height: 1.5;
}

/* Right Column: Research, Exhibitions & Honors */
.about-right-col {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
}

.editorial-block {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.block-title {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--acid-yellow);
    border-bottom: 1px solid var(--border-dark);
    padding-bottom: 0.4rem;
    letter-spacing: 0.05em;
}

.block-body {
    font-size: 0.88rem;
    color: var(--gray-light);
    line-height: 1.65;
}

.block-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.block-list li {
    list-style: none;
    font-size: 0.85rem;
    color: var(--gray-mid);
    line-height: 1.5;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
    padding-bottom: 0.5rem;
}

.block-list li strong {
    color: var(--white);
    display: block;
    margin-bottom: 2px;
}

.block-list li em {
    font-family: var(--font-mono);
    color: var(--acid-yellow);
    font-size: 0.78rem;
    font-style: normal;
    margin-right: 6px;
}

@media (max-width: 1200px) {
    .about-editorial-grid {
        grid-template-columns: 1fr 1fr;
    }

    .about-timeline-col {
        border-right: none;
        padding-right: 0;
    }

    .about-right-col {
        grid-column: span 2;
        border-top: 1px solid var(--border-dark);
        padding-top: 2rem;
    }
}

@media (max-width: 768px) {
    .about-editorial-grid {
        grid-template-columns: 1fr;
    }

    .about-left-col,
    .about-timeline-col {
        border-right: none;
        padding-right: 0;
    }

    .about-right-col {
        grid-column: span 1;
    }
}

.card-description code {
    font-family: var(--font-mono);
    color: var(--acid-yellow);
    background: #252525;
    padding: 2px 5px;
}

.card-footer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.card-footer-tags span {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    background: #222222;
    color: var(--gray-light);
    padding: 0.25rem 0.55rem;
}

/* ==========================================================================
   🌌 Background Generative Canvas & Atmospheric Depth System
   ========================================================================== */
.background-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
}

/* Ensure text sits crisp and sharp above atmospheric background particles */
.content-section,
.cv-editorial-wrap,
.cv-hero-statement-box,
.cv-research-unified,
.statement-dual-grid,
.statement-col,
.cv-card-box,
.cv-top-matrix,
.cv-artist-footer-cta,
.poster-hero-section,
.about-hero-section,
.about-cards-grid,
.perspective-card,
.top-nav-bar,
.section-top-bar,
.lab-top-meta-bar,
.poster-footer-section {
    position: relative;
    z-index: 2;
}

.cv-card-box,
.cv-hero-statement-box,
.cv-research-unified,
.cv-top-matrix,
.footer-cta-card,
.about-select-card,
.perspective-card,
.footer-huge-poster-box {
    background: rgba(14, 14, 14, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ==============================================================================
 * 💼 SELECTED WORKS SHOWCASE (Filter Grid & Baseline Alignment)
 * ============================================================================== */
.work-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* Baseline bottom alignment */
    margin-bottom: 2rem;
    gap: 1.5rem;
}

.work-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.work-header-left .section-sub-desc {
    margin-bottom: 0;
    line-height: 1.4;
}

.filter-tab-bar {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 2px;
    /* Fine-tuned text baseline match */
}

.filter-btn {
    background: #161616;
    border: 1px solid var(--border-dark);
    color: var(--gray-mid);
    font-family: var(--font-univers);
    font-weight: 800;
    font-size: 0.78rem;
    padding: 0.45rem 0.95rem;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: var(--transition);
    line-height: 1.2;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--acid-yellow);
    color: var(--black);
    border-color: var(--acid-yellow);
}

@media (max-width: 900px) {
    .work-header-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

.swiss-projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .swiss-projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .swiss-projects-grid {
        grid-template-columns: 1fr;
    }
}

/* 🖼️ Image-First Full Hover Card (Yangjungeun Style) */
.project-card.image-first-card {
    position: relative;
    background: #141414;
    border: 2px solid var(--border-dark);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
    height: 340px;
    display: block;
}

.project-card.image-first-card:hover {
    border-color: var(--acid-yellow);
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.9);
}

.image-first-card .project-thumb-box {
    position: relative;
    width: 100%;
    height: 100%;
    background: #0A0A0A;
    overflow: hidden;
    border-bottom: none;
}

.image-first-card .project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.95) contrast(1.02);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.project-card.image-first-card:hover .project-img {
    transform: scale(1.06);
    filter: brightness(0.6) contrast(1.05);
}

/* 🖤 Dark Typographic Hover Overlay */
.project-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.92) 100%);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}

.project-card.image-first-card:hover .project-card-overlay {
    opacity: 1;
}

.overlay-top-tags {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: translateY(-8px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card.image-first-card:hover .overlay-top-tags {
    transform: translateY(0);
}

.overlay-cat-badge {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;
    background: var(--acid-yellow);
    color: var(--black);
    padding: 3px 8px;
    letter-spacing: 0.04em;
}

.overlay-year-badge {
    display: none !important;
}

.overlay-content {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transform: translateY(12px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card.image-first-card:hover .overlay-content {
    transform: translateY(0);
}

.overlay-client {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--acid-yellow);
    letter-spacing: 0.02em;
}

.overlay-title {
    font-family: var(--font-univers), var(--font-korean);
    font-weight: 800;
    font-size: 1.12rem;
    color: var(--white);
    line-height: 1.35;
    white-space: pre-line;
}

.overlay-subtitle {
    font-family: var(--font-korean);
    font-size: 0.82rem;
    color: var(--gray-light);
    line-height: 1.45;
    word-break: keep-all;
}

.overlay-cta {
    margin-top: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--acid-yellow);
    letter-spacing: 0.05em;
    border-bottom: 1.5px solid var(--acid-yellow);
    width: fit-content;
    padding-bottom: 2px;
}

.overlay-arrow {
    font-size: 0.85rem;
    transition: transform 0.2s ease;
}

.project-card.image-first-card:hover .overlay-arrow {
    transform: translate(2px, -2px);
}

.swiss-custom-notice {
    margin-top: 2rem;
    background: var(--card-bg);
    border: 1px solid var(--border-dark);
    padding: 1rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.88rem;
}

.notice-badge {
    font-family: var(--font-mono);
    font-weight: 800;
    color: var(--black);
    background: var(--acid-yellow);
    padding: 2px 6px;
    font-size: 0.75rem;
}

.notice-text code {
    font-family: var(--font-mono);
    color: var(--acid-yellow);
}

/* ==============================================================================
 * 🧪 GENERATIVE VIBE LAB
 * ============================================================================== */
.swiss-lab-box {
    background: var(--card-bg);
    border: 2px solid var(--border-dark);
    padding: 1.6rem 2.2rem;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

.lab-title-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.live-pulse-dot {
    width: 10px;
    height: 10px;
    background: var(--acid-yellow);
    box-shadow: 0 0 10px var(--acid-yellow);
    border-radius: 50%;
}

.lab-main-title {
    font-family: var(--font-univers);
    font-weight: 900;
    font-size: 1.35rem;
    color: var(--white);
}

.lab-lead-text {
    font-size: 0.88rem;
    color: var(--gray-mid);
    line-height: 1.5;
    margin-bottom: 1.1rem;
}

.lab-metric-pills {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.m-pill {
    background: var(--black);
    border: 1px solid var(--border-dark);
    padding: 0.4rem 0.8rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

.m-lbl {
    color: var(--gray-mid);
}

.m-val {
    color: var(--acid-yellow);
    font-weight: 700;
    margin-left: 4px;
}

.lab-right-controls {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    justify-content: center;
}

.swiss-control-line {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-bottom: 0;
}

.control-label-left {
    min-width: 100px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--white);
    font-weight: 700;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.swiss-control-line input[type="range"] {
    flex: 1;
    accent-color: var(--acid-yellow);
    cursor: pointer;
    margin: 0;
}

.control-val-right {
    min-width: 36px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--acid-yellow);
    font-weight: 700;
    flex-shrink: 0;
}

.swiss-theme-palette {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

.pal-label {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--gray-mid);
}

.palette-dot {
    width: 22px;
    height: 22px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
}

.palette-dot.active,
.palette-dot:hover {
    border-color: var(--white);
    transform: scale(1.2);
}

/* ==============================================================================
 * 🎓 ACADEMIC & LECTURE ARCHIVE
 * ============================================================================== */
.swiss-academic-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.academic-column {
    background: var(--card-bg);
    border: 2px solid var(--border-dark);
    padding: 2.2rem;
}

.col-title {
    font-family: var(--font-univers);
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--acid-yellow);
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-dark);
    padding-bottom: 0.6rem;
}

.swiss-table-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.table-row {
    display: flex;
    gap: 1.2rem;
    border-bottom: 1px solid var(--border-dark);
    padding-bottom: 0.9rem;
}

.row-year {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--acid-yellow);
    min-width: 65px;
}

.row-desc strong {
    font-size: 0.95rem;
    color: var(--white);
    display: block;
    margin-bottom: 0.2rem;
}

.row-desc span {
    font-size: 0.85rem;
    color: var(--gray-mid);
}

.paper-entry-box {
    margin-bottom: 1.8rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--border-dark);
}

.entry-tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--acid-yellow);
    color: var(--black);
    padding: 2px 6px;
    display: inline-block;
    margin-bottom: 0.4rem;
}

.paper-entry-box h4 {
    font-family: var(--font-univers);
    font-weight: 900;
    font-size: 1.15rem;
    color: var(--white);
    margin-bottom: 0.3rem;
}

.paper-entry-box p,
.affiliations-list-box p {
    font-size: 0.88rem;
    color: var(--gray-mid);
    line-height: 1.6;
}

/* ==============================================================================
 * 📬 FOOTER & POSTER CLOSING
 * ============================================================================== */
.poster-footer-section {
    position: relative;
    z-index: 10;
    background: transparent;
    border-top: none;
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
    margin-top: 0.5rem;
}

.footer-inner-container {
    max-width: 1720px;
    margin: 0 auto;
}

.footer-huge-poster-box {
    text-align: center;
    padding-bottom: 0;
    border-bottom: none;
    background: transparent;
}

.f-meta-top {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--acid-yellow);
    margin-bottom: 0.6rem;
}

.footer-huge-type {
    font-family: var(--font-univers);
    font-weight: 900;
    font-size: clamp(3.0rem, 8.5vw, 8.5rem);
    color: var(--acid-yellow);
    letter-spacing: 0.04em;
    word-spacing: 0.25em;
    line-height: 0.95;
    margin-top: -1.5rem;
    margin-bottom: 2.6rem;
    text-align: center;
}

.footer-email-block {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: var(--card-bg);
    border: 2px solid var(--acid-yellow);
    padding: 0.7rem 1.6rem;
    margin-top: 0.2rem;
    margin-bottom: 2.4rem;
}

.f-email-text {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: 0.12em;
}

.swiss-copy-btn {
    background: var(--acid-yellow);
    border: none;
    color: var(--black);
    font-family: var(--font-univers);
    font-weight: 900;
    font-size: 0.8rem;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
    transition: var(--transition);
}

.swiss-copy-btn:hover {
    background: var(--white);
}

.footer-bottom-action {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0.2rem;
    margin-top: 0;
}

.back-to-top-btn {
    background: var(--acid-yellow);
    color: var(--black);
    font-family: var(--font-univers);
    font-weight: 900;
    font-size: 0.88rem;
    padding: 0.6rem 1.3rem;
    border: 2px solid transparent;
    cursor: pointer;
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: var(--transition);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    line-height: 1;
}

.top-arrow-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    fill: currentColor;
    flex-shrink: 0;
    transform: translateY(-0.5px);
}

.back-to-top-btn:hover {
    background: var(--white);
    color: var(--black);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
}

/* ==============================================================================
 * 📜 COMPACT FOOTER COPYRIGHT BAR (Slim & Refined - No White Line)
 * ============================================================================== */
.footer-copyright-bar {
    width: 100%;
    text-align: center;
    padding: 0.8rem 0 0.2rem 0;
    margin-top: 1rem;
    border-top: none;
}

.copyright-text {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--gray-mid);
    letter-spacing: 0.04em;
    line-height: 1;
    margin: 0;
    padding: 0;
}

/* ==============================================================================
 * 🔍 PROJECT LIGHTBOX MODAL (Swiss Aesthetic)
 * ============================================================================== */
.project-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.project-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(8px);
}

.modal-card {
    position: relative;
    z-index: 2;
    background: #111111;
    border: 2px solid var(--acid-yellow);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.9);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-modal.active .modal-card {
    transform: scale(1);
}

.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--black);
    color: var(--white);
    border: 1px solid var(--border-dark);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition);
}

.modal-close-btn:hover {
    background: var(--acid-yellow);
    color: var(--black);
}

.modal-img-wrap {
    position: relative;
    background: #000;
    height: 100%;
    min-height: 360px;
}

.modal-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.modal-badges {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: flex;
    gap: 0.5rem;
}

.modal-badge-cat {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;
    background: var(--acid-yellow);
    color: var(--black);
    padding: 3px 8px;
}

.modal-badge-year {
    display: none !important;
}

.modal-body {
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
}

.modal-client {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--acid-yellow);
    margin-bottom: 0.4rem;
}

.modal-title {
    font-family: var(--font-univers);
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--white);
    line-height: 1.2;
    margin-bottom: 0.4rem;
}

.modal-subtitle {
    font-size: 0.95rem;
    color: var(--gray-light);
    line-height: 1.5;
    margin-bottom: 1.2rem;
}

.modal-divider {
    height: 1px;
    background: var(--border-dark);
    margin-bottom: 1.2rem;
}

.modal-desc {
    font-size: 0.92rem;
    color: var(--gray-mid);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.modal-stats-box {
    background: #181818;
    border: 1px solid var(--border-dark);
    padding: 0.7rem 1rem;
    font-size: 0.82rem;
    margin-bottom: 1.2rem;
    display: flex;
    gap: 0.6rem;
}

.stats-label {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--acid-yellow);
}

.stats-val {
    color: var(--white);
}

.modal-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.modal-tags span {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    background: #222;
    color: var(--gray-light);
    padding: 3px 8px;
}

@media (max-width: 768px) {
    .modal-card {
        grid-template-columns: 1fr;
    }

    .modal-img-wrap {
        height: 240px;
    }
}

/* ==============================================================================
 * 📱 RESPONSIVE ADJUSTMENTS (Mobile, Tablet & Desktop)
 * ============================================================================== */
@media (max-width: 1100px) {

    .matrix-grid-3,
    .swiss-projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .swiss-lab-box,
    .swiss-academic-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .poster-hero-section {
        padding: 0 1rem;
        margin: 1rem auto 2.5rem auto;
    }

    .poster-top-block {
        padding: 1.6rem 1.4rem;
    }

    .poster-top-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }

    .wall-row {
        flex-wrap: wrap;
        gap: 0.3rem 0.6rem;
        margin-bottom: 0.4rem;
        line-height: 1.05;
    }

    .heavy-text {
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: break-word;
        font-size: clamp(1.5rem, 5.5vw, 2.8rem);
        line-height: 1.05;
    }

    .heavy-amp {
        font-size: clamp(1.6rem, 5.8vw, 3rem);
    }

    .inline-annotation-box {
        width: 100%;
        margin: 0.4rem 0;
        padding-left: 0;
    }

    .anno-serif {
        white-space: normal;
        font-size: clamp(0.75rem, 2.6vw, 0.9rem);
    }

    .contact-annotation-box {
        width: 100%;
        text-align: left;
        margin-left: 0;
        margin-top: 0.4rem;
    }

    .anno-mono {
        white-space: normal;
        font-size: clamp(0.72rem, 2.5vw, 0.85rem);
    }

    .poster-bottom-block {
        height: clamp(110px, 16vh, 150px);
    }

    .giant-word {
        font-size: clamp(3.2rem, 14vw, 6.8rem);
        transform: none;
        white-space: nowrap;
    }

    .bottom-cta-container {
        bottom: 0.8rem;
    }

    .strip-cta-pill {
        font-size: 0.82rem;
        padding: 0.6rem 1.4rem;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: flex !important;
        gap: 0.8rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .matrix-grid-3,
    .swiss-projects-grid {
        grid-template-columns: 1fr;
    }

    .heavy-text {
        font-size: clamp(1.25rem, 5.8vw, 2.0rem);
    }

    .footer-credits-bar {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .poster-top-block {
        padding: 1.2rem 0.9rem;
    }

    .heavy-text {
        font-size: clamp(1.15rem, 6.0vw, 1.7rem);
    }

    .poster-sub-manifesto {
        margin-top: 0.8rem;
        padding-top: 0.5rem;
    }

    .manifesto-text {
        font-size: 0.8rem;
    }
}

/* ==============================================================================
 * 🔍 PROJECT LIGHTBOX MODAL & MULTI-VIEW GALLERY
 * ============================================================================== */
.project-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.project-modal.active {
    display: flex;
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.90);
    backdrop-filter: blur(14px);
}

.modal-card {
    position: relative;
    z-index: 10;
    max-width: 1140px;
    width: 100%;
    height: 85vh;
    max-height: 820px;
    background: #111111;
    border: 2px solid var(--border-dark);
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.98);
    transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 🖼️ 1. Ultra-Wide / Panorama (가로 와이드 컷) */
.modal-card.is-ultrawide {
    max-width: 1280px;
    height: 84vh;
    max-height: 800px;
    grid-template-columns: 1.65fr 1fr;
}

/* 💻 2. Standard Landscape / 4:3 (일반 가로형 컷) */
.modal-card.is-landscape {
    max-width: 1140px;
    height: 85vh;
    max-height: 820px;
    grid-template-columns: 1.35fr 1fr;
}

/* ⏹️ 3. Square (정사각형 / 1:1 근접 컷) */
.modal-card.is-square {
    max-width: 1040px;
    height: 86vh;
    max-height: 820px;
    grid-template-columns: 1.15fr 1fr;
}

/* 📱 4. Portrait (세로형 / 카드 / 포스터 컷) */
.modal-card.is-portrait {
    max-width: 940px;
    height: 88vh;
    max-height: 840px;
    grid-template-columns: 1fr 1.05fr;
}

@media (max-width: 920px) {

    .modal-card,
    .modal-card.is-ultrawide,
    .modal-card.is-landscape,
    .modal-card.is-square,
    .modal-card.is-portrait {
        grid-template-columns: 1fr;
        max-height: 88vh;
        height: auto;
        overflow-y: auto;
    }

    .modal-card .modal-img-wrap {
        min-height: 380px;
    }
}

.modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 30;
    background: #000000;
    border: 1px solid var(--border-dark);
    color: var(--white);
    font-size: 1.1rem;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.modal-close-btn:hover {
    background: var(--acid-yellow);
    color: var(--black);
    border-color: var(--acid-yellow);
}

.modal-visual-column {
    display: flex;
    flex-direction: column;
    background: #000000;
    border-right: 2px solid var(--border-dark);
    overflow: hidden;
    position: relative;
    height: 100%;
}

.modal-img-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    overflow: hidden;
    background: #000000;
    cursor: zoom-in;
    will-change: auto;
    contain: layout paint;
}

.modal-img-wrap img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    transform-origin: center center;
    will-change: transform;
    pointer-events: none;
}

/* 🔍 Modal Image 30% Close-up Zoom Hover Effect */
.modal-img-wrap:hover img {
    transform: scale(1.30);
}

/* 📜 Ultra-Portrait Full-page Web Capture (마지막 풀스크롤 이미지 가로 100% 꽉 찬 초대형 확대) */
.modal-card.is-ultra-portrait .modal-img-wrap:hover img {
    transform: scale(4.25);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ◀️ ▶️ Modal Left/Right Image Navigation Arrows */
.modal-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 25;
    width: 44px;
    height: 44px;
    background: rgba(12, 12, 12, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    opacity: 0.85;
}

.modal-nav-btn:hover {
    background: var(--acid-yellow);
    color: var(--black);
    border-color: var(--acid-yellow);
    opacity: 1;
    transform: translateY(-50%) scale(1.12);
    box-shadow: 0 0 20px rgba(204, 255, 0, 0.4);
}

.modal-nav-btn.prev {
    left: 1rem;
    padding-right: 2px;
}

.modal-nav-btn.next {
    right: 1rem;
    padding-left: 2px;
}

.modal-nav-btn:disabled,
.modal-nav-btn.hidden {
    display: none;
}

.modal-badges {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: flex;
    gap: 0.4rem;
    z-index: 10;
}

.modal-badge-cat {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--acid-yellow);
    color: var(--black);
    padding: 3px 8px;
}

.modal-badge-year {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    background: #222222;
    color: var(--white);
    padding: 3px 8px;
}

/* Gallery Thumbnails Strip (Large & High-res selection) */
.modal-gallery-strip {
    display: flex;
    gap: 0.6rem;
    padding: 0.75rem 1.2rem;
    background: #0E0E0E;
    border-top: 1px solid var(--border-dark);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--acid-yellow) #181818;
}

.modal-gallery-strip::-webkit-scrollbar {
    height: 4px;
}

.modal-gallery-strip::-webkit-scrollbar-track {
    background: #181818;
}

.modal-gallery-strip::-webkit-scrollbar-thumb {
    background: var(--acid-yellow);
}

.modal-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 2px solid #222222;
    cursor: pointer;
    transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    opacity: 0.5;
    flex-shrink: 0;
}

.modal-thumb:hover {
    opacity: 0.85;
    border-color: rgba(204, 255, 0, 0.6);
}

.modal-thumb.active {
    border-color: var(--acid-yellow);
    opacity: 1;
    box-shadow: 0 0 12px rgba(204, 255, 0, 0.45);
}

.modal-body {
    padding: 2.2rem;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.modal-client {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--acid-yellow);
    margin-bottom: 0.4rem;
}

.modal-title {
    font-family: var(--font-univers), var(--font-korean);
    font-weight: 800;
    font-size: 1.32rem;
    color: var(--white);
    line-height: 1.35;
    white-space: pre-line;
    margin-bottom: 0.45rem;
}

.modal-subtitle {
    font-size: 0.88rem;
    color: var(--gray-mid);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.modal-divider {
    height: 1px;
    background: var(--border-dark);
    margin-bottom: 1.2rem;
}

.modal-desc {
    font-family: var(--font-korean);
    font-size: 0.86rem;
    color: var(--gray-light);
    line-height: 1.7;
    margin-bottom: 1.4rem;
}

/* 🔊 Modal Audio Sound Art Player */
.modal-audio-player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #161616;
    border: 1px solid rgba(204, 255, 0, 0.3);
    padding: 0.65rem 1rem;
    margin-bottom: 1.2rem;
    border-radius: 4px;
}

.audio-control-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.audio-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    color: var(--acid-yellow);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.05em;
    padding: 0;
    transition: var(--transition);
}

.audio-toggle-btn:hover {
    color: var(--white);
}

.audio-waves {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 16px;
}

.audio-waves span {
    display: block;
    width: 3px;
    height: 100%;
    background: var(--acid-yellow);
    animation: waveBounce 0.8s ease-in-out infinite alternate;
}

.audio-waves span:nth-child(2) {
    animation-delay: 0.2s;
    height: 60%;
}

.audio-waves span:nth-child(3) {
    animation-delay: 0.4s;
    height: 80%;
}

.audio-waves span:nth-child(4) {
    animation-delay: 0.1s;
    height: 40%;
}

.modal-audio-player.paused .audio-waves span {
    animation-play-state: paused;
    opacity: 0.4;
}

@keyframes waveBounce {
    0% {
        height: 20%;
    }

    100% {
        height: 100%;
    }
}

.modal-stats-box {
    background: #181818;
    border-left: 3px solid var(--acid-yellow);
    padding: 0.7rem 1rem;
    margin-bottom: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.stats-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--gray-mid);
    font-weight: 700;
}

.stats-val {
    font-family: var(--font-korean);
    font-size: 0.84rem;
    color: var(--white);
    font-weight: 700;
}

.modal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px dashed var(--border-dark);
}

.modal-tags span {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    background: #1C1C1C;
    color: var(--gray-mid);
    padding: 3px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 🌐 Interactive Official Live Website Link Button */
.modal-link-wrap {
    margin-top: 1.2rem;
    margin-bottom: 0.8rem;
}

.modal-live-link-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.95rem 1.25rem;
    background: rgba(229, 255, 0, 0.06);
    border: 1px solid var(--acid-yellow);
    color: var(--acid-yellow);
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    cursor: pointer;
}

.modal-link-text-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: flex-start;
    text-align: left;
}

.link-title-en {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--acid-yellow);
    line-height: 1.2;
    white-space: nowrap;
}

.link-title-ko {
    display: block;
    font-family: var(--font-korean), sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #DDDDDD;
    line-height: 1.2;
    white-space: nowrap;
}

.modal-live-link-btn:hover {
    background: var(--acid-yellow);
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(229, 255, 0, 0.4);
}

.modal-live-link-btn:hover .link-title-en,
.modal-live-link-btn:hover .link-title-ko {
    color: #000000 !important;
}

.modal-live-link-btn .live-link-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--acid-yellow);
    line-height: 1;
    margin-left: 1rem;
    flex-shrink: 0;
    transition: transform 0.25s ease, color 0.25s ease;
}

.modal-live-link-btn:hover .live-link-arrow {
    color: #000000;
    transform: translate(3px, -3px);
}

/* ==============================================================================
 * 🖨️ INTERACTIVE RESUME PDF PRINT BUTTON
 * ============================================================================== */
.cv-print-pdf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--acid-yellow);
    color: var(--black);
    border: 1.5px solid var(--acid-yellow);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.45rem 0.95rem;
    cursor: pointer;
    transition: var(--transition);
    border-radius: 0;
    outline: none;
    box-shadow: 0 2px 8px rgba(206, 255, 0, 0.2);
}

.cv-print-pdf-btn:hover {
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
}

.cv-print-pdf-btn .pdf-icon {
    stroke: currentColor;
    transition: transform 0.2s ease;
}

.cv-print-pdf-btn:hover .pdf-icon {
    transform: scale(1.15);
}

/* ==============================================================================
 * 🖨️ HIGH-PRECISION PDF RESUME PRINT SYSTEM (Optimized for A4 / Letter)
 * ============================================================================== */
/* ==============================================================================
 * 🖨️ HIGH-PRECISION PDF RESUME PRINT SYSTEM (Single-Column Vertical Stack Layout)
 * ============================================================================== */
@page {
    size: A4 portrait;
    margin: 14mm 15mm 15mm 15mm;
}

/* Screen: hide print-only text blocks */
.cv-print-only-manifesto,
.cv-print-only-statement {
    display: none;
}

@media print {

    /* 1️⃣ Hide Non-Resume Global UI Elements & Interactive Canvases */
    .top-nav-bar,
    .inverted-lens-cursor,
    .background-canvas,
    .statement-physics-wrap,
    .statement-physics-canvas,
    .manifesto-physics-canvas,
    #statementPhysicsCanvas,
    #manifestoPhysicsCanvas,
    .portfolio-sound-toggle-btn,
    #soundToggleBtn,
    .section-top-bar,
    .lab-top-meta-bar,
    .filter-tab-bar,
    #work,
    #awards,
    #contact,
    .footer-bottom-action,
    .project-modal,
    #backToTopBtn,
    header,
    footer {
        display: none !important;
    }

    /* 2️⃣ Complete Removal of Bullets, Dots & Pseudo-Elements */
    *::before,
    *::after {
        display: none !important;
        content: none !important;
    }

    ul,
    ol,
    li {
        list-style: none !important;
        list-style-type: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* 3️⃣ Pure 100% Black Typography on White Paper (Zero Grays, Zero Backgrounds) */
    html,
    body,
    .archive-page,
    .content-section,
    .content-section#about,
    .content-section#about-artist,
    .content-section *,
    .cv-editorial-wrap,
    .cv-hero-statement-box,
    .cv-research-unified,
    .statement-header-row,
    .statement-dual-grid,
    .statement-col,
    .statement-col *,
    .cv-card-box,
    .cv-card-box * {
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
        background: transparent !important;
        background-color: transparent !important;
        text-shadow: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }

    html,
    body,
    .archive-page {
        background-color: #FFFFFF !important;
        font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif !important;
        font-size: 9.5pt !important;
        line-height: 1.55 !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .content-section#about,
    .content-section#about-artist {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        background: #FFFFFF !important;
    }

    .cv-editorial-wrap {
        margin-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1.6rem !important;
    }

    /* 📄 Top Hero Profile & Research Statement (Clean Editorial Layout) */
    .cv-hero-statement-box {
        background: transparent !important;
        border: none !important;
        border-bottom: 2px solid #000000 !important;
        padding: 0 0 1.2rem 0 !important;
        gap: 1rem !important;
        display: flex !important;
        flex-direction: column !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    /* 📄 Crisp 100% Black Editorial Typography for Print Statements */
    .cv-print-only-manifesto,
    .cv-print-only-statement {
        display: block !important;
        color: #000000 !important;
        font-family: 'Noto Sans KR', -apple-system, sans-serif !important;
        font-size: 9.5pt !important;
        line-height: 1.65 !important;
        letter-spacing: -0.01em !important;
        margin-top: 0.8rem !important;
        margin-bottom: 1.2rem !important;
    }

    .cv-print-only-manifesto p,
    .cv-print-only-statement p {
        color: #000000 !important;
        margin-bottom: 0.65rem !important;
        text-align: justify !important;
        word-break: keep-all !important;
    }

    .cv-print-only-manifesto strong,
    .cv-print-only-statement strong {
        color: #000000 !important;
        font-weight: 700 !important;
    }

    .cv-profile-header {
        display: flex !important;
        align-items: flex-end !important;
        gap: 1.2rem !important;
        border-bottom: 1.5px solid #000000 !important;
        padding-bottom: 0.6rem !important;
        background: transparent !important;
    }

    .jp-official-logo {
        filter: none !important;
        /* Original black logo */
        width: 50px !important;
    }

    .cv-name-block h3 {
        color: #000000 !important;
        font-size: 1.45rem !important;
        font-weight: 900 !important;
        margin-bottom: 2px !important;
    }

    .cv-name-block .cv-meta-sub div,
    .cv-name-block .cv-meta-sub a,
    .cv-name-block .cv-meta-sub span {
        color: #000000 !important;
        font-size: 9pt !important;
        letter-spacing: 0.04em !important;
        text-decoration: none !important;
        -webkit-text-fill-color: #000000 !important;
    }

    /* 🎨 Artist Statement Print Layout */
    .statement-header-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        border-bottom: 1px solid #000000 !important;
        padding-bottom: 0.35rem !important;
        margin-bottom: 0.6rem !important;
        background: transparent !important;
    }

    .statement-heading {
        color: #000000 !important;
        font-size: 10.5pt !important;
        font-weight: 900 !important;
    }

    .statement-lang-badge {
        color: #000000 !important;
        font-size: 8pt !important;
        font-weight: 700 !important;
    }

    .statement-dual-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1.8rem !important;
        background: transparent !important;
    }

    .statement-col {
        background: transparent !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.6rem !important;
    }

    .statement-col p {
        color: #111111 !important;
        font-size: 8.8pt !important;
        line-height: 1.65 !important;
        margin: 0 !important;
        text-align: justify !important;
        word-break: keep-all !important;
    }

    .cv-research-unified p {
        color: #000000 !important;
        font-size: 9.2pt !important;
        line-height: 1.65 !important;
        margin: 0 !important;
    }

    .cv-research-unified p strong {
        color: #000000 !important;
        font-weight: 700 !important;
    }

    /* 📱 1-Column Sequential Vertical Stack (Zero Left Indent / Flush Left) */
    .cv-top-matrix,
    .cv-full-bento,
    .cv-bottom-matrix,
    .cv-exhibit-grid-3col,
    .cv-right-stack,
    .cv-col-identity,
    .cv-col-timeline,
    .cv-col-projects,
    .cv-timeline-track {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.3rem !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* 4️⃣ Section Headers & Subsections (No Outer Boxes, Flush Left) */
    .cv-sub-section,
    .cv-card-box {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 0 0.4rem 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.65rem !important;
        width: 100% !important;
    }

    .cv-label,
    .cv-card-title-bar {
        font-size: 11pt !important;
        font-weight: 900 !important;
        color: #000000 !important;
        border-bottom: 1.8px solid #000000 !important;
        padding-bottom: 0.35rem !important;
        margin-bottom: 0.4rem !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        background: none !important;
        break-after: avoid !important;
        page-break-after: avoid !important;
    }

    .cv-card-heading {
        color: #000000 !important;
        font-size: 11pt !important;
        font-weight: 900 !important;
    }

    /* Badges & Roles (Zero Box Fills, Pure Text Only) */
    .cv-card-badge,
    .cv-node-role {
        background: transparent !important;
        border: none !important;
        color: #000000 !important;
        font-size: 8.5pt !important;
        font-weight: 700 !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        text-align: right !important;
    }

    /* Timeline Nodes (Flush Left With No Left Indent) */
    .cv-time-node {
        padding: 0 0 0.55rem 0 !important;
        margin: 0 !important;
        border-bottom: 1px dashed #CCCCCC !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .cv-node-title {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        font-size: 9.5pt !important;
        font-weight: 700 !important;
        color: #000000 !important;
        margin: 0 0 0.2rem 0 !important;
    }

    .cv-node-desc {
        font-size: 8.8pt !important;
        color: #000000 !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cv-node-desc strong,
    .cv-node-desc span {
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
        opacity: 1 !important;
    }

    .cv-proj-title,
    .cv-paper-title {
        font-size: 9.2pt !important;
        font-weight: 700 !important;
        color: #000000 !important;
        margin: 0 0 0.15rem 0 !important;
    }

    .cv-proj-desc {
        font-size: 8.5pt !important;
        color: #000000 !important;
        margin: 0 !important;
    }

    .cv-project-item,
    .cv-paper-item {
        padding: 0 0 0.5rem 0 !important;
        margin: 0 !important;
        border-bottom: 1px dashed #CCCCCC !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .cv-list-clean,
    .cv-list-side {
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .cv-list-clean li,
    .cv-list-side li {
        font-size: 8.8pt !important;
        color: #000000 !important;
        padding: 0.35rem 0 !important;
        margin: 0 !important;
        border-bottom: 1px dashed #CCCCCC !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .cv-list-side span {
        color: #000000 !important;
        font-size: 8.2pt !important;
        text-align: right !important;
    }

    /* Skill Pills (Text List With Slashes / Clear Separation) */
    .cv-pills-row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.4rem 0.8rem !important;
        padding: 0.2rem 0 0.4rem 0 !important;
        margin: 0 !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .cv-pill {
        background: transparent !important;
        color: #000000 !important;
        border: none !important;
        font-size: 8.5pt !important;
        font-weight: 700 !important;
        padding: 0 !important;
    }

    .cv-pill:not(:last-child)::after {
        content: ' ·' !important;
        display: inline !important;
        color: #000000 !important;
        margin-left: 0.8rem !important;
    }

    /* University Grid (Clean 4-Column Text Roster) */
    .cv-univ-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.45rem 1rem !important;
        padding: 0.2rem 0 0.4rem 0 !important;
        margin: 0 !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .cv-univ-pill {
        background: transparent !important;
        color: #000000 !important;
        border: none !important;
        font-size: 8.5pt !important;
        font-weight: 600 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    /* Exhibition Rows (Right-Aligned Info Flush to Page Margin) */
    .cv-group-col {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .cv-exhibit-row,
    .cv-award-row,
    .cv-press-item {
        display: flex !important;
        align-items: baseline !important;
        width: 100% !important;
        gap: 1.2rem !important;
        padding: 0.45rem 0 !important;
        margin: 0 !important;
        border-bottom: 1px dashed #CCCCCC !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .cv-ex-year,
    .cv-aw-date,
    .cv-press-year {
        font-family: var(--font-mono) !important;
        font-size: 8.5pt !important;
        font-weight: 700 !important;
        color: #000000 !important;
        width: 65px !important;
        flex-shrink: 0 !important;
    }

    .cv-ex-info,
    .cv-aw-info {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        gap: 1.5rem !important;
    }

    .cv-ex-info strong,
    .cv-aw-info strong {
        color: #000000 !important;
        font-size: 9.2pt !important;
        font-weight: 600 !important;
        text-align: left !important;
        flex: 1 1 auto !important;
        word-break: keep-all !important;
    }

    .cv-ex-info span,
    .cv-aw-info span,
    .cv-press-text {
        color: #000000 !important;
        font-size: 8.5pt !important;
        text-align: right !important;
        margin-left: auto !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

/* ==============================================================================
 * 🎴 ABOUT PERSPECTIVE SELECTOR GATEWAY & DUAL CV STYLES
 * ============================================================================== */

/* Page Wrapper */
.about-select-page {
    background-color: var(--dark-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.about-select-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: clamp(5rem, 7.5vh, 6.8rem) 1.8rem 3rem 1.8rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    gap: 2.2rem;
    position: relative;
    z-index: 10;
}

/* Selector Header */
.about-select-header {
    border-bottom: 2px solid var(--gray-dark);
    padding-bottom: 1.8rem;
}

.about-select-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    color: var(--acid-yellow);
    margin-bottom: 0.8rem;
    text-transform: uppercase;
}

.about-select-title {
    font-family: var(--font-univers);
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 0.08em;
    color: var(--white);
    text-transform: uppercase;
    margin-bottom: 0;
}

.about-select-desc {
    font-size: 1.05rem;
    color: var(--gray-light);
    line-height: 1.6;
    max-width: 780px;
    font-family: var(--font-body);
}

.about-select-desc strong {
    color: var(--acid-yellow);
}

/* 2-Cards Poster Grid */
.about-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    align-items: stretch;
}

.perspective-card {
    background: var(--card-bg);
    border: 2px solid #282828;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.2rem;
    position: relative;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background-color 0.28s ease;
    overflow: hidden;
}

.perspective-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gray-dark);
    transition: background-color 0.28s ease;
}

.perspective-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Specific Card 1: Artist CV (Primary Lime) */
.card-artist {
    border-color: rgba(206, 255, 0, 0.4);
    background: linear-gradient(180deg, rgba(206, 255, 0, 0.03) 0%, rgba(18, 18, 18, 1) 100%);
}

.card-artist::before {
    background: var(--acid-yellow);
}

.card-artist:hover {
    border-color: var(--acid-yellow);
    box-shadow: 0 20px 45px rgba(206, 255, 0, 0.12), 0 0 0 1px var(--acid-yellow);
}

/* Specific Card 2: General CV (White Accent) */
.card-general {
    border-color: rgba(255, 255, 255, 0.25);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(18, 18, 18, 1) 100%);
}

.card-general::before {
    background: var(--white);
}

.card-general:hover {
    border-color: var(--white);
    box-shadow: 0 20px 45px rgba(255, 255, 255, 0.08), 0 0 0 1px var(--white);
}

/* Card Body */
.card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.card-role-title {
    font-family: var(--font-univers);
    font-size: clamp(2.2rem, 3.8vw, 3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--white);
    margin-bottom: 1.4rem;
}

.card-artist .card-role-title {
    color: var(--acid-yellow);
}

.card-subtitle-en {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    color: var(--gray-mid);
    margin-bottom: 1.8rem;
    text-transform: uppercase;
}

.card-manifesto-clean {
    font-family: var(--font-korean);
    font-size: 1.02rem;
    line-height: 1.7;
    color: #E0E0E0;
    margin-bottom: 1.8rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    word-break: keep-all;
}

.card-clean-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.card-clean-bullet-list li {
    font-size: 0.95rem;
    line-height: 1.4;
    position: relative;
    padding-left: 1.2rem;
    display: flex;
    align-items: center;
}

.card-clean-bullet-list li::before {
    content: '▪';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-mid);
    font-size: 0.85rem;
}

.card-artist .card-clean-bullet-list li::before {
    color: var(--acid-yellow);
}

.card-clean-bullet-list li strong {
    font-family: var(--font-mono);
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Card CTA Button */
.card-footer {
    margin-top: auto;
}

.card-cta-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.1rem 1.6rem;
    font-family: var(--font-univers);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    border-radius: 2px;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.primary-cta {
    background: var(--acid-yellow);
    color: var(--black);
}

.perspective-card:hover .primary-cta {
    background: var(--white);
    color: var(--black);
}

.secondary-cta {
    background: var(--white);
    color: var(--black);
}

.perspective-card:hover .secondary-cta {
    background: var(--acid-yellow);
    color: var(--black);
}

.cta-arrow {
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.perspective-card:hover .cta-arrow {
    transform: translateX(6px);
}

.cta-arrow {
    transition: transform 0.2s ease;
}

.card-cta-btn:hover .cta-arrow {
    transform: translateX(5px);
}

/* Footer Nav Links */
.about-select-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-dark);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    flex-wrap: wrap;
    gap: 1rem;
}

.back-to-home-link {
    color: var(--gray-light);
    text-decoration: none;
    transition: color 0.2s ease;
}

.back-to-home-link:hover {
    color: var(--acid-yellow);
}

.direct-archive-link {
    color: var(--acid-yellow);
    text-decoration: none;
    transition: all 0.2s ease;
}

.direct-archive-link:hover {
    color: var(--white);
    text-decoration: underline;
}

/* ==============================================================================
 * 🏷️ CV VIEW SWITCHER & SUB-NAVIGATION STYLES
 * ============================================================================== */

.cv-view-badge-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.view-tag-pill {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--acid-yellow);
    color: var(--black);
    padding: 0.35rem 0.85rem;
    border-radius: 2px;
    letter-spacing: 0.08em;
}

.view-tag-pill-link {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--gray-light);
    text-decoration: none;
    padding: 0.32rem 0.85rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
}

.view-tag-pill-link:hover {
    background: var(--acid-yellow);
    color: var(--black);
    border-color: var(--acid-yellow);
}

/* Quick Filter Bar & PDF Action Button Unified Styling */
.lab-top-meta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.cv-action-right-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Multi-language Switcher Bar (Independent Crisp Segment Buttons) */
.cv-lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 34px;
    box-sizing: border-box;
}

.lang-btn {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--gray-mid);
    background: #141414;
    border: 1px solid #2A2A2A;
    padding: 0 0.85rem;
    height: 34px;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
}

.lang-btn:hover {
    color: var(--white);
    background: #242424;
    border-color: #4A4A4A;
}

.lang-btn.active {
    color: var(--black);
    background: var(--acid-yellow);
    border-color: var(--acid-yellow);
}

.cv-quick-filters {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.cv-quick-link,
.cv-print-pdf-btn {
    font-family: var(--font-mono);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    height: 34px;
    padding: 0 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    box-sizing: border-box;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    white-space: nowrap;
}

.cv-quick-link {
    background: #141414;
    border: 1px solid #282828;
    color: var(--gray-light);
}

.cv-quick-link:hover {
    background: #242424;
    color: var(--acid-yellow);
    border-color: var(--acid-yellow);
}

.cv-print-pdf-btn {
    background: var(--acid-yellow);
    border: 1px solid var(--acid-yellow);
    color: var(--black);
    margin-left: auto;
}

.cv-print-pdf-btn:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--black);
}

/* 2-Column Solo Exhibitions Layout */
.cv-exhibit-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.cv-solo-col {
    display: flex;
    flex-direction: column;
}

/* Artist Statement Dual Language Grid */
.statement-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}

.statement-heading {
    font-family: var(--font-mono);
    color: var(--acid-yellow);
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}

.statement-lang-badge {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--gray-mid);
    letter-spacing: 0.08em;
}

.statement-physics-wrap {
    position: relative;
    width: 100%;
    margin-top: 1rem;
}

.statement-physics-canvas {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    cursor: crosshair;
}

.statement-print-fallback {
    display: none;
}

.statement-dual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.statement-col {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.statement-kor p {
    font-family: var(--font-korean);
    font-size: 0.98rem;
    line-height: 1.85;
    color: #E2E2E2;
    word-break: keep-all;
    margin: 0;
}

.statement-eng p {
    font-family: var(--font-body);
    font-size: 0.94rem;
    line-height: 1.75;
    color: #B8B8B8;
    font-style: normal;
    margin: 0;
}

/* Artist CV Footer CTA Card */
.cv-artist-footer-cta {
    margin-top: 3.5rem;
}

.footer-cta-card {
    background: #141414;
    border: 2px solid #282828;
    border-radius: 4px;
    padding: 2.2rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

/* Mobile / Tablet Responsive */
@media (max-width: 900px) {
    .statement-dual-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .about-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .cv-top-matrix,
    .cv-full-bento,
    .cv-bottom-matrix,
    .cv-research-unified,
    .cv-exhibit-grid-3col,
    .cv-right-stack {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        width: 100% !important;
    }

    .card-highlights {
        grid-template-columns: repeat(2, 1fr);
    }

    .cv-exhibit-grid-2col {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .footer-cta-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================================== */
/* 🎄 HOTEL DAWSON CHRISTMAS SPECIAL: TWINKLING LIGHTS & CASTLE WINDOW GLOW      */
/* ============================================================================== */

/* Festive Golden Glowing Border & Ambient Aura for Christmas Card */
.project-card[data-id="hotel-dawson-christmas-film"] {
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 25px rgba(255, 46, 147, 0.15), 0 0 15px rgba(255, 215, 0, 0.12);
    position: relative;
}

.project-card[data-id="hotel-dawson-christmas-film"]:hover {
    border-color: #FFD700;
    box-shadow: 0 0 35px rgba(255, 215, 0, 0.45), 0 10px 40px rgba(255, 46, 147, 0.35);
}

/* HOTEL DAWSON Sparkling Marquee Lighting Animation */
@keyframes christmasTwinkle {
    0%, 100% {
        text-shadow: 0 0 4px #FFD700, 0 0 12px #FFA500, 0 0 20px #FF4500;
        color: #FFF9E6;
        opacity: 0.95;
    }
    50% {
        text-shadow: 0 0 10px #FFF, 0 0 24px #FFD700, 0 0 35px #FF8C00, 0 0 50px #FF1493;
        color: #FFFFFF;
        opacity: 1;
    }
    25%, 75% {
        text-shadow: 0 0 2px #FFD700, 0 0 8px #FFA500;
        opacity: 0.85;
    }
}

/* Castle Windows Glowing Through the Night */
@keyframes castleWindowGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(255, 220, 100, 0.6)) drop-shadow(0 0 18px rgba(255, 180, 50, 0.4));
    }
    50% {
        filter: drop-shadow(0 0 16px rgba(255, 240, 150, 0.95)) drop-shadow(0 0 30px rgba(255, 200, 80, 0.7));
    }
}

/* YouTube Shorts Responsive Player in Modal */
#modalYoutube {
    width: 100%;
    height: 100%;
    min-height: 520px;
    max-height: 80vh;
    aspect-ratio: 9 / 16;
    border: none;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.2);
}

@media (max-width: 768px) {
    #modalYoutube {
        min-height: 440px;
    }

    /* 1. Mobile Content Section & Padding */
    .content-section {
        padding: 0 1rem;
        margin: 2rem auto;
    }

    /* 2. Top Navigation Bar (2-Row Balanced Symmetry on Mobile) */
    .top-nav-bar {
        padding: 0.8rem 0 0.65rem 0 !important;
    }

    .nav-container {
        padding: 0 1rem !important;
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        row-gap: 0.65rem !important;
        column-gap: 0.5rem !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 1행 좌측: JI-HYUN PARK 로고 */
    .nav-left {
        grid-column: 1 / 2 !important;
        grid-row: 1 / 2 !important;
        display: flex !important;
        align-items: center !important;
    }

    .nav-brand {
        font-size: 1.25rem !important;
    }

    /* nav-right는 contents로 풀어 그리드 자식으로 직접 배치 */
    .nav-right {
        display: contents !important;
    }

    /* 1행 우측: ●●●● 컬러 스위처 (4개 동그라미) */
    .nav-theme-dots {
        grid-column: 2 / 3 !important;
        grid-row: 1 / 2 !important;
        border-left: none !important;
        padding-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 0.55rem !important;
    }

    .nav-palette-dot {
        width: 15px !important;
        height: 15px !important;
    }

    /* 2행: HOME · ABOUT · WORK · AWARDS · CONTACT 5개 메뉴 균등 가로 배치 */
    .nav-menu-links {
        grid-column: 1 / 3 !important;
        grid-row: 2 / 3 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-top: 0.55rem !important;
        margin-top: 0.1rem !important;
        gap: 0.2rem !important;
    }

    .nav-item-link {
        font-size: 0.78rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em !important;
        padding: 0.2rem 0 !important;
        white-space: nowrap !important;
    }

    /* 3. Main Poster Page (index.html) - Full-Width Edge Alignment */
    .poster-hero-section {
        padding: 0 1rem !important;
        margin: 0.8rem auto 2rem auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .poster-card-wrapper {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 📱 Micro-Screens (iPhone SE, Small Fold Covers <= 360px) */
    @media (max-width: 360px) {
        .nav-brand {
            font-size: 1.1rem !important;
        }
        .nav-item-link {
            font-size: 0.72rem !important;
            letter-spacing: 0.02em !important;
        }
        .nav-theme-dots {
            gap: 0.4rem !important;
        }
        .nav-palette-dot {
            width: 13px !important;
            height: 13px !important;
        }
    }

    .poster-top-block {
        padding: 1.2rem 0.9rem;
    }

    .poster-top-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        margin-bottom: 0.5rem;
    }

    .poster-typography-wall {
        gap: 0.12rem !important;
    }

    .wall-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        gap: 0.15rem 0.4rem !important;
        margin-bottom: 0.12rem !important;
        line-height: 0.96 !important;
    }

    .heavy-group-nowrap {
        display: inline-flex !important;
        align-items: baseline !important;
        gap: 0.25rem !important;
        white-space: nowrap !important;
    }

    .heavy-cities-wrap {
        display: inline-flex !important;
        align-items: baseline !important;
        gap: 0.35rem !important;
        flex-wrap: wrap !important;
    }

    .no-break-word {
        white-space: nowrap !important;
        display: inline-block !important;
    }

    .heavy-text {
        font-size: clamp(1.2rem, 5.7vw, 1.85rem) !important;
        white-space: normal;
        word-break: keep-all;
        line-height: 0.96 !important;
        letter-spacing: -0.01em !important;
    }

    .heavy-amp {
        font-size: clamp(1.35rem, 6.2vw, 2.1rem) !important;
        line-height: 0.8 !important;
        display: inline-block !important;
        vertical-align: baseline !important;
        margin: 0 !important;
    }

    .inline-annotation-box {
        width: 100% !important;
        margin: 0.15rem 0 0.2rem 0 !important;
        padding: 0 !important;
        text-align: left !important;
        line-height: 1.25 !important;
    }

    .contact-annotation-box {
        width: 100% !important;
        margin: 0.15rem 0 0.2rem 0 !important;
        padding: 0 !important;
        text-align: left !important;
        line-height: 1.25 !important;
    }

    .anno-serif,
    .anno-mono {
        font-size: clamp(0.7rem, 2.8vw, 0.82rem) !important;
        white-space: normal;
        word-break: keep-all;
        line-height: 1.3 !important;
    }

    .poster-sub-manifesto {
        margin-top: 0.6rem !important;
        padding-top: 0.45rem !important;
        font-size: 0.76rem !important;
        line-height: 1.4 !important;
    }

    .poster-bottom-block {
        height: clamp(55px, 8.5vh, 75px) !important;
    }

    /* VIBE LAB Mobile Compact Single-Row Layout */
    .lab-section-wrap {
        margin: 1.2rem auto 1.8rem auto !important;
    }

    .swiss-lab-box {
        padding: 1.1rem 0.9rem !important;
        gap: 1rem !important;
        grid-template-columns: 1fr !important;
    }

    .lab-lead-text {
        font-size: 0.82rem !important;
        margin-bottom: 0.65rem !important;
        line-height: 1.45 !important;
    }

    .lab-metric-pills {
        gap: 0.35rem !important;
        margin-bottom: 0.4rem !important;
    }

    .m-pill {
        padding: 0.28rem 0.55rem !important;
        font-size: 0.72rem !important;
    }

    .lab-right-controls {
        gap: 0.65rem !important;
        width: 100% !important;
    }

    .swiss-control-line {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }

    .control-label-left {
        min-width: 80px !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        flex-shrink: 0 !important;
    }

    .swiss-control-line input[type="range"] {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 6px !important;
        margin: 0 !important;
    }

    .control-val-right {
        min-width: 26px !important;
        font-size: 0.75rem !important;
        text-align: right !important;
        flex-shrink: 0 !important;
    }

    /* 4. Filter Bars & Quick Links (archive.html & about_*.html) */
    .filter-tab-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.45rem 0.35rem !important;
        padding: 0 !important;
        margin-top: 0.4rem !important;
        margin-bottom: 0.6rem !important;
        width: 100% !important;
        overflow-x: visible !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
    }

    .filter-btn {
        flex: 0 0 auto !important;
        font-size: 0.74rem !important;
        font-weight: 800 !important;
        padding: 7px 11px !important;
        white-space: nowrap !important;
        letter-spacing: 0.03em !important;
        line-height: 1.1 !important;
    }

    .filter-tab-bar .section-index-pill {
        margin-left: 0 !important;
        font-size: 0.72rem !important;
        padding: 6px 10px !important;
        letter-spacing: 0.04em !important;
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .lab-top-meta-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .cv-quick-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
        gap: 0.3rem;
    }

    .cv-quick-filters::-webkit-scrollbar {
        display: none;
    }

    .cv-quick-link {
        flex-shrink: 0;
        font-size: 0.72rem;
        padding: 0 0.65rem;
        height: 32px;
    }

    .cv-action-right-group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 0.5rem;
    }

    .cv-lang-switcher {
        gap: 0.25rem;
    }

    .lang-btn {
        padding: 0 0.65rem;
        font-size: 0.7rem;
        height: 32px;
    }

    .cv-print-pdf-btn {
        font-size: 0.7rem;
        padding: 0 0.65rem;
        height: 32px;
        margin-left: auto;
    }

    /* 5. Header Badge Row & Heading */
    .cv-view-badge-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .view-tag-pill,
    .view-tag-pill-link {
        font-size: 0.7rem;
        padding: 5px 9px;
    }

    .section-heading {
        font-size: clamp(1.2rem, 5.5vw, 1.8rem);
        word-break: keep-all;
    }

    /* 6. CV Bento 1-Column Vertical Stack & Clean Typography */
    .cv-editorial-wrap {
        gap: 1.5rem !important;
        margin-top: 0.8rem !important;
    }

    .cv-hero-statement-box {
        padding: 1.4rem 1.1rem !important;
        gap: 1.5rem !important;
    }

    .cv-profile-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.6rem !important;
    }

    .cv-top-matrix,
    .cv-full-bento,
    .cv-bottom-matrix,
    .cv-research-unified,
    .cv-exhibit-grid-3col,
    .cv-right-stack {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        padding: 0 !important;
        gap: 1.5rem !important;
        width: 100% !important;
    }

    .cv-card-box {
        padding: 1.4rem 1.1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1.2rem !important;
    }

    .cv-card-title-bar {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .cv-card-heading {
        font-size: 0.92rem !important;
        line-height: 1.3 !important;
        word-break: keep-all !important;
    }

    .cv-card-badge {
        font-size: 0.72rem !important;
        padding: 3px 8px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .cv-time-node {
        padding-left: 1.1rem !important;
        margin-bottom: 0.8rem !important;
    }

    .cv-node-title {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.25rem !important;
        font-size: 0.92rem !important;
        line-height: 1.45 !important;
    }

    .cv-node-role {
        text-align: left !important;
        white-space: normal !important;
        font-size: 0.8rem !important;
    }

    .cv-node-desc {
        font-size: 0.8rem !important;
        line-height: 1.6 !important;
        word-break: keep-all !important;
    }

    .cv-exhibit-row,
    .cv-award-row,
    .cv-press-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.3rem !important;
        padding: 0.6rem 0 !important;
        width: 100% !important;
    }

    .cv-ex-year,
    .cv-aw-date,
    .cv-press-year {
        width: auto !important;
        min-width: 0 !important;
        color: var(--acid-yellow) !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
    }

    .cv-ex-info,
    .cv-aw-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.2rem !important;
        width: 100% !important;
    }

    .cv-ex-info strong,
    .cv-aw-info strong {
        font-size: 0.86rem !important;
        line-height: 1.45 !important;
        word-break: keep-all !important;
    }

    .cv-ex-info span,
    .cv-aw-info span,
    .cv-press-text {
        text-align: left !important;
        margin-left: 0 !important;
        white-space: normal !important;
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
        color: var(--gray-mid) !important;
        word-break: keep-all !important;
    }

    .cv-pills-row {
        gap: 0.35rem 0.5rem !important;
    }

    .cv-pill {
        font-size: 0.72rem !important;
        padding: 3px 7px !important;
    }

    .cv-timeline-track {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.2rem !important;
    }

    /* 7. Modal (archive.html Lightbox) */
    .project-modal {
        padding: 0.6rem;
    }

    .modal-card {
        height: 92vh;
        max-height: 92vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .modal-visual-column {
        flex: 0 0 auto;
        max-height: 44vh;
    }

    .modal-img-wrap {
        min-height: 200px;
        max-height: 44vh;
    }

    .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 1.2rem;
    }

    .modal-title {
        font-size: 1.15rem;
    }

    .modal-desc {
        font-size: 0.84rem;
        line-height: 1.6;
    }

    /* 8. Floating Sound Engine Button */
    .portfolio-sound-toggle-btn {
        bottom: 1rem;
        right: 1rem;
        padding: 7px 13px;
        font-size: 0.72rem;
    }

    /* 9. Mobile Footer & TOP Button Tight Alignment */
    .poster-footer-section {
        margin-top: 0.6rem !important;
        margin-bottom: 1rem !important;
        padding: 0.6rem 1rem 1.2rem 1rem !important;
    }

    .footer-huge-poster-box {
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }

    .footer-huge-type {
        margin-top: -1.2rem !important;
        margin-bottom: 1.5rem !important;
        font-size: clamp(2.4rem, 11vw, 4.4rem) !important;
        line-height: 0.92 !important;
    }

    .footer-email-block {
        margin-top: 0 !important;
        margin-bottom: 1.8rem !important;
        padding: 0.55rem 1.1rem !important;
        gap: 0.65rem !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .f-email-text {
        font-size: clamp(0.88rem, 3.8vw, 1.1rem) !important;
        letter-spacing: 0.06em !important;
    }

    .swiss-copy-btn {
        font-size: 0.72rem !important;
        padding: 0.35rem 0.7rem !important;
    }

    .footer-bottom-action {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .back-to-top-btn {
        padding: 0.45rem 1.1rem !important;
        font-size: 0.76rem !important;
    }

    .footer-copyright-bar {
        border-top: none !important;
        padding: 0.6rem 0 0.2rem 0 !important;
        margin-top: 0.8rem !important;
    }

    /* 10. Mobile Perspective Select Gateway (about.html) */
    .about-select-container {
        padding: 1.2rem 1rem 2rem 1rem !important;
        gap: 1.2rem !important;
    }

    .about-select-header {
        padding-bottom: 0.8rem !important;
    }

    .about-select-title {
        font-size: clamp(2rem, 9vw, 3rem) !important;
    }
}

/* Extra small devices (max-width: 420px) */
@media (max-width: 420px) {
    .heavy-text {
        font-size: clamp(1.1rem, 6.8vw, 1.55rem);
    }

    .nav-brand {
        font-size: 1.1rem;
    }

    .modal-visual-column {
        max-height: 38vh;
    }
}