* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            overflow-x: hidden;
        }

        body {
            font-family: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
            background-color: #ffffff;
            color: #0a0a0a;
            line-height: 1.5;
            overflow-x: hidden;
            letter-spacing: -0.02em;
        }

        /* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 16px 24px;
            line-height: 1.5;
            background-color: rgba(255, 255, 255, 0.6);
            /* 불투명도 증가 (0.3 → 0.6) */
            border-bottom: 1px solid rgba(229, 229, 229, 0.3);
            z-index: 1000;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: backdrop-filter 0.3s ease, background-color 0.3s ease;
        }

        /* 갤러리 영역 벗어나면 블러 제거 + 완전 불투명 */
        header.no-blur {
            backdrop-filter: blur(0px);
            -webkit-backdrop-filter: blur(0px);
            background-color: rgba(255, 255, 255, 1);
            /* 완전 불투명 */
            border-bottom: 1px solid #e5e5e5;
        }

        .header-content {
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
        }

        .back-button {
            color: #999999;
            text-decoration: none;
            font-size: 1.04rem;
            font-weight: 500;
            letter-spacing: normal;
            transition: color 0.3s ease;
        }

        .back-button:hover {
            color: #0a0a0a;
        }

        .header-title {
            font-size: clamp(1.1rem, 2vw, 1.3rem);
            font-weight: 600;
            letter-spacing: -0.02em;
        }

        .contact-info {
            display: block;
        }

        .contact-info a {
            color: #999999;
            text-decoration: none;
            font-size: 1.04rem;
            font-weight: 500;
            letter-spacing: normal;
            transition: color 0.3s ease;
        }

        .contact-info a:hover {
            color: #0a0a0a;
        }

        /* Main Content */
        .main-content {
            padding-top: 61px;
            /* 헤더 높이만 */
        }

        /* Project Info Section */
        .project-info {
            padding: 60px 40px 40px;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
            overflow: visible;
        }

        .project-info h1 {
            font-size: 2.2rem;
            font-weight: 600;
            letter-spacing: -0.03em;
            margin-bottom: 16px;
        }

        .project-info .section-label {
            margin-top: 80px;
        }

        /* Info 카드 - Favorite Brand 스타일 */
        .project-meta {
            display: flex;
            gap: 16px;
            margin-bottom: 20px;
            flex-wrap: nowrap;
        }

        .project-meta-item {
            display: inline-flex;
            flex-direction: column;
            gap: 8px;
            padding: 20px 28px;
            background-color: #f5f5f5;
            border: 1px solid #e5e5e5;
            border-radius: 12px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            flex: 1 1 0;
            min-width: 0;
            --mouse-x: 50%;
            --mouse-y: 50%;
        }

        .project-meta-item::before {
            content: '';
            position: absolute;
            width: 360px;
            height: 360px;
            background: radial-gradient(circle, rgba(249, 66, 57, 0.05) 0%, transparent 65%);
            border-radius: 50%;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.4s ease;
            left: var(--mouse-x);
            top: var(--mouse-y);
            transform: translate(-50%, -50%);
        }

        .project-meta-item::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 12px;
            padding: 1px;
            background: radial-gradient(280px circle at var(--mouse-x) var(--mouse-y),
                    rgba(249, 66, 57, 1) 0%,
                    rgba(249, 66, 57, 0.6) 20%,
                    rgba(249, 66, 57, 0.2) 50%,
                    rgba(249, 66, 57, 0.05) 70%,
                    transparent 85%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .project-meta-item:hover::before,
        .project-meta-item:hover::after {
            opacity: 1;
        }

        .project-meta-item:hover {
            background-color: #efefef;
            border-color: rgba(249, 66, 57, 0.12);
        }

        .meta-label {
            color: #999999;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            font-weight: 600;
        }

        .meta-value {
            color: #0a0a0a;
            font-size: 0.95rem;
            font-weight: 500;
            line-height: 1.6;
            white-space: normal;
        }

        /* 반응형 */
        @media (max-width: 767px) {
            .project-meta {
                flex-wrap: wrap;
            }

            .project-meta-item {
                flex: 1 1 calc(50% - 8px);
            }
        }

        @media (max-width: 480px) {
            .project-meta-item {
                flex: 1 1 100%;
            }
        }

        .project-description {
            font-size: 1rem;
            line-height: 1.8;
            color: #666666;
        }

        .section-image {
            display: block;
            width: 100%;
            margin-top: 16px;
            border-radius: 12px;
        }

        .illust-sub-title {
            font-size: 1.1rem;
            font-weight: 600;
            letter-spacing: -0.02em;
            margin-top: 80px;
            margin-bottom: 8px;
            color: #0a0a0a;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px 12px;
        }

        .blog-link {
            font-size: 1.1rem;
            font-weight: 600;
            color: #1a6ef5;
            text-decoration: underline;
            text-underline-offset: 3px;
            letter-spacing: -0.02em;
        }

        .blog-link:hover {
            color: #0047d0;
        }

        .illust-character-main,
        #camping-main-img,
        .character-main-img-bordered {
            width: 100%;
            border-radius: 12px;
            border: 1px solid #e5e5e5;
        }

        .character-thumb {
            width: 128px;
            aspect-ratio: 16 / 9;
            border-radius: 12px;
            cursor: pointer;
            overflow: hidden;
            flex-shrink: 0;
            transition: transform 0.25s ease,
                box-shadow 0.25s ease,
                opacity 0.25s ease,
                outline 0.15s ease;
            position: relative;
            opacity: 0.25;
            outline: 2px solid transparent;
            outline-offset: 3px;
        }

        .character-thumb:hover { opacity: 0.55; }

        .character-thumb.active {
            opacity: 1;
            box-shadow: 0 0 0 2px #0a0a0a;
            position: relative;
            z-index: 1;
        }

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

        .overview-image-area {
            position: relative;
            margin-top: 16px;
        }

        .overview-thumb-wrapper {
            position: absolute;
            top: 0;
            right: -170px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            padding: 10px;
        }

        .overview-thumb-row {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .overview-thumb {
            width: 128px;
            aspect-ratio: 16 / 9;
            border-radius: 12px;
            cursor: pointer;
            overflow: hidden;
            flex-shrink: 0;
            transition: transform 0.25s ease,
                box-shadow 0.25s ease,
                opacity 0.25s ease,
                outline 0.15s ease;
            position: relative;
            opacity: 0.25;
            outline: 2px solid transparent;
            outline-offset: 3px;
        }

        .overview-thumb:hover {
            opacity: 0.55;
        }

        .overview-thumb.active {
            opacity: 1;
            box-shadow: 0 0 0 2px #0a0a0a;
            position: relative;
            z-index: 1;
        }

        .illust-thumb {
            width: 128px;
            aspect-ratio: 16 / 9;
            border-radius: 12px;
            cursor: pointer;
            overflow: hidden;
            flex-shrink: 0;
            transition: transform 0.25s ease,
                box-shadow 0.25s ease,
                opacity 0.25s ease,
                outline 0.15s ease;
            position: relative;
            opacity: 0.25;
            outline: 2px solid transparent;
            outline-offset: 3px;
        }

        /* illust 사이드바 — overview-thumb-wrapper와 동일한 비주얼 + 스크롤 버튼 */
        .illust-sidebar {
            position: absolute;
            top: 0;
            right: -170px;
            bottom: 0;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .illust-scroll-btn {
            flex-shrink: 0;
            width: 100%;
            height: 24px;
            background: #f2f2f2;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
        }

        .illust-scroll-btn:hover { background: #e4e4e4; }

        .illust-scroll-area {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 3px;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .illust-scroll-area::-webkit-scrollbar { display: none; }

        .illust-scroll-area .overview-thumb-row {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .category-thumb {
            width: 128px;
            aspect-ratio: 16 / 9;
            border-radius: 12px;
            cursor: pointer;
            overflow: hidden;
            flex-shrink: 0;
            transition: transform 0.25s ease,
                box-shadow 0.25s ease,
                opacity 0.25s ease,
                outline 0.15s ease;
            position: relative;
            opacity: 0.25;
            outline: 2px solid transparent;
            outline-offset: 3px;
        }

        .illust-thumb:hover,
        .camping-thumb:hover,
        .category-thumb:hover { opacity: 0.55; }

        .illust-thumb.active,
        .camping-thumb.active,
        .category-thumb.active {
            opacity: 1;
            box-shadow: 0 0 0 2px #0a0a0a;
            position: relative;
            z-index: 1;
        }

        .illust-thumb img,
        .camping-thumb img,
        .category-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .camping-thumb-wrapper {
            position: absolute;
            top: 0;
            right: -170px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            padding: 10px;
        }

        .camping-thumb {
            width: 128px;
            aspect-ratio: 16 / 9;
            border-radius: 12px;
            cursor: pointer;
            overflow: hidden;
            flex-shrink: 0;
            transition: transform 0.25s ease,
                box-shadow 0.25s ease,
                opacity 0.25s ease,
                outline 0.15s ease;
            position: relative;
            opacity: 0.25;
            outline: 2px solid transparent;
            outline-offset: 3px;
        }

        .overview-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            pointer-events: none;
        }

        /* Gallery Container */
        .gallery-section {
            width: 100%;
            background-color: #fafafa;
            border-top: none;
            border-bottom: 1px solid #e5e5e5;
            position: relative;
            z-index: 1;
            margin-top: -80px;
            height: 80vh;
            overflow: hidden;
            clip-path: inset(0);
        }

        .gallery-container {
            height: 100%;
            /* gallery-section의 높이에 맞춤 */
            min-height: 500px;
            overflow: hidden;
            position: relative;
            cursor: grab;
            user-select: none;
        }

        .gallery-container:active {
            cursor: grabbing;
        }

        .gallery-canvas {
            position: absolute;
            width: 100%;
            height: 100%;
            will-change: transform;
            backface-visibility: hidden;
            perspective: 1000px;
        }

        .gallery-grid {
            position: absolute;
            display: grid;
            grid-template-columns: repeat(70, 80px);
            gap: 50px;
            padding: 40px;
            width: max-content;
        }

        .gallery-item {
            width: 80px;
            height: 80px;
            background-color: transparent;
            border-radius: 0;
            overflow: visible;
            box-shadow: none;
            transition: all 0.3s ease;
            position: relative;
            pointer-events: none;
            user-select: none;
            contain: layout style paint;
        }

        .gallery-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
            user-select: none;
            -webkit-user-drag: none;
        }

        .gallery-item-3d {
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        .gallery-item-3d:hover {
            transform: rotateY(5deg) rotateX(5deg) translateY(-4px);
        }

        /* Gallery Controls - Floating */
        .gallery-controls {
            position: absolute;
            bottom: 6%;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            background-color: rgba(255, 255, 255, 0.95);
            padding: 10px;
            border-radius: 100px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            backdrop-filter: blur(10px);
            z-index: 100;
            pointer-events: auto;
        }

        .control-toggle-button {
            padding: 14px 36px;
            border: 2px solid transparent;
            background-color: transparent;
            color: #666666;
            font-size: 1rem;
            font-weight: 500;
            border-radius: 100px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Poppins', sans-serif;
        }

        .control-toggle-button.active {
            background-color: #0a0a0a;
            color: #ffffff;
            border-color: #0a0a0a;
        }

        .control-toggle-button:hover:not(.active) {
            background-color: #f5f5f5;
            color: #0a0a0a;
        }

        /* Drag Tooltip */
        .drag-tooltip {
            position: fixed;
            background-color: rgba(0, 0, 0, 0.85);
            color: white;
            padding: 10px 16px;
            border-radius: 12px;
            font-size: 0.85rem;
            pointer-events: none;
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s ease;
            white-space: nowrap;
            transform: translate(-50%, -200%);
            font-family: 'Poppins', sans-serif;
        }

        .drag-tooltip.show {
            opacity: 1;
        }

        .drag-tooltip::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid rgba(0, 0, 0, 0.85);
        }

        /* 2D Section 2-col layout */
        .section-2col {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: start;
            margin-top: 40px;
        }

        .section-2col .content-grid {
            margin-top: 0;
        }

        .section-visual-square {
            width: 100%;
            aspect-ratio: 1 / 1;
            background-color: #f0f0f0;
            border-radius: 12px;
            position: relative;
            overflow: hidden;
        }

        .section-visual-full {
            aspect-ratio: 16 / 9;
        }

        /* ── 3D Graphic Version 2.0 — AI Prompt Split ── */
        .v2-split {
            display: flex;
            align-items: stretch;
            width: 100%;
            margin-top: 16px;
        }

        .v2-left {
            flex: 11;
            background: #ffffff;
            overflow: hidden;
            min-height: 580px;
            position: relative;
        }

        #v2TokenCanvas {
            width: 100%;
            height: 100%;
            display: block;
        }

        .v2-right {
            flex: 9;
            background: transparent;
            display: flex;
            align-items: stretch;
            position: relative;
        }

        .v2-image-slot {
            width: 100%;
            height: 100%;
            min-height: 500px;
            position: relative;
            overflow: hidden;
        }

        .v2-image-slot img {
            max-width: 70%;
            max-height: 70%;
            width: auto;
            height: auto;
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        @media (max-width: 768px) {
            .v2-split      { flex-direction: column; }
            .v2-divider    { width: 100%; height: 1px; background: linear-gradient(to right, transparent, #d0d0d0 15%, #d0d0d0 85%, transparent); }
            .v2-left       { display: none; }
            .v2-right      { min-height: 0; height: 220px; background: #f5f5f5; border-radius: 12px; }
            .v2-image-slot {
                min-height: 0;
                height: 220px;
                background: transparent;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .v2-image-slot img {
                position: static;
                transform: none;
                width: auto;
                height: auto;
                max-width: 60%;
                max-height: 180px;
            }
        }

        /* ── VS Code prompt viewer ── */
        .vsc-window {
            margin-top: 16px;
            border-radius: 10px;
            overflow: hidden;
            background: #1e1e1e;
            font-family: 'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;
            font-size: 12.5px;
            line-height: 1.8;
        }

        .vsc-titlebar {
            display: flex;
            align-items: center;
            background: #2d2d2d;
            padding: 0;
            height: 38px;
        }

        .vsc-tabs {
            display: flex;
            gap: 0;
        }

        .vsc-tab {
            padding: 0 16px;
            height: 38px;
            line-height: 38px;
            font-family: 'Poppins', sans-serif;
            font-size: 11.5px;
            color: #888;
            border-right: 1px solid #1e1e1e;
            cursor: default;
        }

        .vsc-tab.active {
            color: #d4d4d4;
            background: #1e1e1e;
            border-top: 1px solid #007acc;
        }

        .vsc-nav {
            display: flex;
            overflow-x: auto;
            background: #252526;
            border-bottom: 1px solid #1a1a1a;
            scrollbar-width: none;
            gap: 0;
        }

        .vsc-nav::-webkit-scrollbar { display: none; }

        .vsc-nav-btn {
            flex-shrink: 0;
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            color: #888;
            font-family: 'Poppins', sans-serif;
            font-size: 11px;
            font-weight: 500;
            padding: 8px 14px;
            cursor: pointer;
            white-space: nowrap;
            transition: color 0.15s, border-color 0.15s;
        }

        .vsc-nav-btn:hover { color: #ccc; }

        .vsc-nav-btn.active            { color: #fff; border-bottom-color: #007acc; }
        .vsc-nav-btn[data-sec="style"].active       { border-bottom-color: #569cd6; color: #569cd6; }
        .vsc-nav-btn[data-sec="subject"].active     { border-bottom-color: #4ec9b0; color: #4ec9b0; }
        .vsc-nav-btn[data-sec="comp"].active        { border-bottom-color: #ce9178; color: #ce9178; }
        .vsc-nav-btn[data-sec="bg"].active          { border-bottom-color: #d4d4d4; color: #d4d4d4; }
        .vsc-nav-btn[data-sec="view3d"].active      { border-bottom-color: #dcdcaa; color: #dcdcaa; }
        .vsc-nav-btn[data-sec="view2d"].active      { border-bottom-color: #c586c0; color: #c586c0; }
        .vsc-nav-btn[data-sec="colorrule"].active   { border-bottom-color: #f44747; color: #f44747; }
        .vsc-nav-btn[data-sec="yds"].active         { border-bottom-color: #6a9955; color: #6a9955; }

        .vsc-content-wrap {
            height: 460px;
            display: flex;
            flex-direction: column;
        }

        .vsc-body {
            padding: 0;
            flex: 1;
            overflow-y: auto;
        }

        .vsc-panel {
            display: none;
        }

        .vsc-raw-view {
            flex: 1;
            overflow-y: auto;
            scrollbar-width: none;
        }

        .vsc-raw-view::-webkit-scrollbar { display: none; }

        .vsc-panel {
            display: none;
        }

        .vsc-panel.active {
            display: block;
        }

        .vsc-panel-header {
            padding: 10px 20px 6px;
            font-family: 'Poppins', sans-serif;
            font-size: 10.5px;
            font-weight: 600;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            border-left: 3px solid #333;
            margin: 12px 16px 4px;
        }

        .vsc-panel-header span { font-weight: 400; text-transform: none; opacity: 0.55; margin-left: 6px; }

        .vsc-ph--style    { border-color: #569cd6; color: #569cd6; }
        .vsc-ph--subject  { border-color: #4ec9b0; color: #4ec9b0; }
        .vsc-ph--comp     { border-color: #ce9178; color: #ce9178; }
        .vsc-ph--bg       { border-color: #d4d4d4; color: #d4d4d4; }
        .vsc-ph--view3d   { border-color: #dcdcaa; color: #dcdcaa; }
        .vsc-ph--view2d   { border-color: #c586c0; color: #c586c0; }
        .vsc-ph--colorrule{ border-color: #f44747; color: #f44747; }
        .vsc-ph--yds      { border-color: #6a9955; color: #6a9955; }

        .vsc-sec-code {
            padding: 4px 24px 16px 20px;
            font-size: 13.5px;
            line-height: 2;
            color: #d4d4d4;
            white-space: pre;
            overflow-x: auto;
        }

        .vsc-yds-grid {
            padding: 8px 20px 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .yds-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .yds-name {
            font-family: 'Poppins', sans-serif;
            font-size: 11px;
            color: #888;
            width: 72px;
            flex-shrink: 0;
        }

        .yds-swatches {
            display: flex;
            gap: 4px;
        }

        .yds-swatches span {
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 4px;
            flex-shrink: 0;
            box-sizing: border-box;
        }

        .vc-comment { color: #6a9955; }
        .vc-key     { color: #569cd6; font-weight: 600; }
        .vc-str     { color: #ce9178; }
        .vc-var     { color: #4ec9b0; }
        .vc-op      { color: #888; }
        .vc-num     { color: #b5cea8; }
        .vc-dim     { color: #666; }

        .section-visual-triangle {
            width: 100%;
            aspect-ratio: 1 / 0.866;
            background-color: #f0f0f0;
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        }

        .section-text-block {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 24px;
        }

        .section-text-block h3 {
            font-size: 1.6rem;
            font-weight: 700;
            letter-spacing: -0.03em;
            color: #0a0a0a;
            line-height: 1.3;
        }

        .section-text-block p {
            color: #444444;
            line-height: 1.85;
            font-size: 0.95rem;
        }

        .section-text-block ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .section-text-block ul li {
            color: #555;
            font-size: 0.9rem;
            padding-left: 20px;
            position: relative;
        }

        .section-text-block ul li::before {
            content: '—';
            position: absolute;
            left: 0;
            color: #bbb;
        }

        .section-2col-bottom {
            margin-top: 80px;
        }

        .section-body-text {
            font-size: 1rem;
            line-height: 1.8;
            color: #666666;
            margin-top: 16px;
            letter-spacing: 0.005em;
            word-break: keep-all;
        }

        .asis-tobe-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 16px;
        }

        .asis-tobe-col {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .asis-container,
        .tobe-container {
            width: 100%;
            border-radius: 12px;
            padding: 20px 24px;
        }

        .asis-container {
            background-color: #e8e8e8;
        }

        .tobe-container {
            background-color: #d4ede4;
        }

        .asis-tobe-row img {
            display: block;
            width: 100%;
            border-radius: 8px;
        }

        .asis-tobe-label {
            display: inline-block;
            font-size: 1.1rem;
            font-weight: 600;
            letter-spacing: -0.02em;
            text-transform: none;
            color: #888;
        }

        .asis-container .asis-tobe-label {
            color: #444;
        }

        .tobe-container .asis-tobe-label {
            color: #2d7a5a;
        }

        /* 2D 오브젝트 규칙 카드 리스트 */
        .object-rule-section {
            margin-top: 60px;
            overflow-x: clip;
            overflow-y: visible;
            padding-top: 10px;
            position: relative;
            margin-left: calc(50% - 50vw + 40px);
            width: calc(100vw - 40px);
        }

        .object-rule-section::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 320px;
            height: 100%;
            background: linear-gradient(to right, #ffffff 40%, transparent);
            z-index: 1;
            pointer-events: none;
        }

        @keyframes ruleMarquee {
            0%   { transform: translateX(-50%); }
            100% { transform: translateX(0); }
        }

        .object-rule-marquee {
            overflow: visible;
        }

        .object-rule-track {
            display: flex;
            gap: 16px;
            width: max-content;
            animation: ruleMarquee 30s linear infinite;
        }

        .object-rule-track:hover {
            animation-play-state: paused;
        }

        .object-rule-card {
            flex: 0 0 300px;
            background-color: #f7f7f7;
            border-radius: 12px;
            padding: 24px 24px 28px;
            display: flex;
            flex-direction: column;
            gap: 0;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            user-select: none;
        }

        .object-rule-card:hover {
            transform: translateY(-8px);
        }

        .object-rule-card-num {
            display: inline-flex;
            align-self: flex-start;
            padding: 5px 12px;
            border-radius: 100px;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 14px;
        }

        .object-rule-card-img {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            border-radius: 12px;
            flex-shrink: 0;
            display: block;
            pointer-events: none;
            user-select: none;
            -webkit-user-drag: none;
        }

        .object-rule-card-title {
            font-size: 1.05rem;
            font-weight: 600;
            letter-spacing: -0.02em;
            color: #0a0a0a;
            line-height: 1.4;
            margin-top: 18px;
            margin-bottom: 8px;
        }

        .object-rule-card-desc {
            font-size: 0.85rem;
            color: #666666;
            line-height: 1.75;
        }

        /* Rule Card Modal */
        .rule-modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 3000;
            background: rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }

        .rule-modal-overlay.is-open {
            opacity: 1;
            pointer-events: auto;
        }

        .rule-modal {
            background: #ffffff;
            border-radius: 12px;
            width: min(840px, calc(100vw - 48px));
            aspect-ratio: 4 / 3;
            max-height: calc(100vh - 80px);
            overflow: hidden;
            position: relative;
            transform: translateY(20px) scale(0.97);
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: grid;
            grid-template-columns: 3fr 2fr;
        }

        .rule-modal-overlay.is-open .rule-modal {
            transform: translateY(0) scale(1);
        }

        .rule-modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 36px;
            height: 36px;
            border: none;
            background: #f0f0f0;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
        }

        .rule-modal-close:hover {
            background: #e0e0e0;
        }

        .rule-modal-close svg {
            width: 16px;
            height: 16px;
            stroke: #444;
            stroke-width: 2;
            stroke-linecap: round;
        }

        .rule-modal-num {
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            color: #bbbbbb;
            text-transform: uppercase;
        }

        .rule-modal-visual {
            width: 100%;
            height: 100%;
            background-color: #ebebeb;
            border-radius: 12px 0 0 12px;
            overflow: hidden;
        }

        .rule-modal-body {
            padding: 36px 40px 36px 32px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            justify-content: center;
            overflow-y: auto;
        }

        .rule-modal-title {
            font-size: 1.4rem;
            font-weight: 700;
            letter-spacing: -0.03em;
            color: #0a0a0a;
            line-height: 1.3;
        }

        .rule-modal-desc {
            font-size: 0.9rem;
            color: #555555;
            line-height: 1.9;
        }

        @media (max-width: 600px) {
            .rule-modal {
                aspect-ratio: unset;
                grid-template-columns: 1fr;
                max-height: calc(100vh - 48px);
                overflow-y: auto;
            }

            .rule-modal-visual {
                width: 100%;
                height: auto;
                aspect-ratio: 4 / 3;
                border-radius: 12px 12px 0 0;
            }

            .rule-modal-body {
                padding: 24px;
                justify-content: flex-start;
            }
        }

        /* Illustration Image Area */
        .core-value-logo-area {
            width: 100%;
            margin-top: 16px;
            border-radius: 12px;
            overflow: hidden;
        }

        .two-col-image-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-top: 16px;
        }

        .two-col-image-row img {
            width: 100%;
            border-radius: 12px;
            display: block;
        }

        .vs-icon-grid-wrap {
            border-radius: 12px;
            background: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 32px;
        }

        .vs-icon-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 4px;
            width: 100%;
        }

        .vs-icon-cell {
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 1;
            perspective: 240px;
        }

        .vs-icon-cell img {
            width: 52%;
            height: auto;
            display: block;
        }

        .core-value-logo-area img {
            display: block;
            width: 100%;
        }

        .illust-image-area {
            width: 100%;
            margin-top: 32px;
            margin-bottom: 14px;
            border-radius: 12px;
            background-color: #f0f0f0;
            aspect-ratio: 16 / 9;
            /* 뒤에 카드가 더 있음을 암시하는 스택 그림자 */
            box-shadow:
                7px 7px 0 0 rgba(0, 0, 0, 0.07),
                14px 14px 0 0 rgba(0, 0, 0, 0.04);
        }

        /* Illustration Deck Carousel */
        .illust-fan-section {
            margin-top: 80px;
            overflow: hidden;
            /* 콘텐츠 max-width 밖으로 풀너비 확장 */
            margin-left: calc(50% - 50vw + 40px);
            width: calc(100vw - 80px);
        }

        .illust-fan-track {
            position: relative;
            width: 100%;
            height: 660px;
            display: flex;
            align-items: center;
            justify-content: center;
            perspective: 2400px;
        }

        /* 기본: 숨김 (0~8 이외의 data-pos) */
        .illust-fan-card {
            position: absolute;
            width: 64%;
            aspect-ratio: 16 / 9;
            border-radius: 12px;
            cursor: pointer;
            transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.75s ease,
                box-shadow 0.75s ease;
            will-change: transform;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
            transform: translateX(-60%) translateZ(-320px) rotateY(15deg) scale(0.38);
            z-index: 1;
        }

        /* 메인 카드 */
        .illust-fan-card[data-pos="0"] {
            transform: translateX(0) translateZ(0px) rotateY(0deg) scale(1);
            opacity: 1;
            z-index: 20;
            pointer-events: auto;
            box-shadow: 0 28px 80px rgba(0, 0, 0, 0.22);
        }

        /* 뒤에 쌓이는 덱 (오른쪽 방향) */
        .illust-fan-card[data-pos="1"] {
            transform: translateX(12%) translateZ(-52px) rotateY(-13deg) scale(0.93);
            opacity: 0.88;
            z-index: 19;
            pointer-events: auto;
        }

        .illust-fan-card[data-pos="2"] {
            transform: translateX(22%) translateZ(-100px) rotateY(-23deg) scale(0.86);
            opacity: 0.72;
            z-index: 18;
            pointer-events: auto;
        }

        .illust-fan-card[data-pos="3"] {
            transform: translateX(30%) translateZ(-143px) rotateY(-31deg) scale(0.80);
            opacity: 0.57;
            z-index: 17;
            pointer-events: auto;
        }

        .illust-fan-card[data-pos="4"] {
            transform: translateX(36%) translateZ(-181px) rotateY(-37deg) scale(0.74);
            opacity: 0.43;
            z-index: 16;
            pointer-events: auto;
        }

        .illust-fan-card[data-pos="5"] {
            transform: translateX(40%) translateZ(-214px) rotateY(-41deg) scale(0.69);
            opacity: 0.30;
            z-index: 15;
            pointer-events: auto;
        }

        .illust-fan-card[data-pos="6"] {
            transform: translateX(43%) translateZ(-242px) rotateY(-44deg) scale(0.64);
            opacity: 0.20;
            z-index: 14;
            pointer-events: auto;
        }

        .illust-fan-card[data-pos="7"] {
            transform: translateX(45%) translateZ(-265px) rotateY(-46deg) scale(0.60);
            opacity: 0.12;
            z-index: 13;
            pointer-events: auto;
        }

        .illust-fan-card[data-pos="8"] {
            transform: translateX(47%) translateZ(-284px) rotateY(-48deg) scale(0.56);
            opacity: 0.07;
            z-index: 12;
            pointer-events: auto;
        }

        /* 우측 절반 클릭 힌트 커서 */
        .illust-fan-card[data-pos="0"] {
            cursor: e-resize;
        }


        /* Additional Content Section */
        .content-section {
            padding: 80px 40px;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            overflow: visible;
        }

        .content-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }

        .content-card {
            background-color: #fafafa;
            padding: 40px;
            border-radius: 12px;
            transition: transform 0.3s ease;
        }

        .content-card:hover {
            transform: translateY(-2px);
        }

        .content-card h3 {
            font-size: 1.1rem;
            font-weight: 600;
            letter-spacing: -0.02em;
            margin-bottom: 15px;
        }

        .content-card p {
            color: #666666;
            line-height: 1.7;
        }

        /* Section Label */
        .section-label {
            display: inline-block;
            color: #ffffff;
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            font-weight: 600;
            margin-bottom: 16px;
            padding: 7px 14px;
            background-color: #555555;
            border-radius: 4px;
        }

        .content-section h2 {
            font-family: 'Poppins', sans-serif;
            font-size: 2.625rem;
            font-weight: 600;
            margin-bottom: 16px;
            letter-spacing: -0.03em;
        }

        .content-section .project-meta + .section-label {
            margin-top: 80px;
        }

        .content-section .project-meta + h2 {
            margin-top: 80px;
        }

        .section-description {
            font-size: 1rem;
            line-height: 1.8;
            color: #666666;
            margin-bottom: 0;
            letter-spacing: 0.05em;
            word-break: keep-all;
        }

        /* Floating Navigation */
        .floating-nav {
            position: fixed;
            left: 48px;
            top: 50%;
            transform: translateY(-50%) translateX(-20px);
            display: flex;
            flex-direction: column;
            gap: 10px;
            z-index: 500;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .floating-nav.visible {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(-50%) translateX(0);
        }

        .floating-nav-item {
            display: flex;
            align-items: center;
            gap: 18px;
            cursor: pointer;
            padding: 7px 0;
            text-decoration: none;
            color: #cccccc;
            font-size: 0.95rem;
            font-weight: 500;
            transition: color 0.3s ease;
            white-space: nowrap;
            font-family: 'Poppins', sans-serif;
        }

        .floating-nav-line {
            width: 3px;
            height: 20px;
            background-color: #d5d5d5;
            border-radius: 2px;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .floating-nav-item.active {
            color: #0a0a0a;
        }

        .floating-nav-item.active .floating-nav-line {
            background-color: #0a0a0a;
            height: 40px;
        }

        .floating-nav-item:hover {
            color: #555555;
        }

        .floating-nav-item:hover .floating-nav-line {
            background-color: #555555;
        }

        @media (max-width: 1280px) {
            .floating-nav {
                display: none;
            }
        }

        /* 사이드바 절대영역: 1281px 이상에서 텍스트가 사이드바와 겹치지 않도록 */
        /* 사이드바 우측 끝: left(48px) + line(3px) + gap(18px) + 텍스트(~200px) ≈ 280px */
        @media (min-width: 1281px) {

            .project-info,
            .content-section {
                padding-left: max(40px, calc(300px - (100vw - 1200px) / 2));
            }
        }

        /* ─── 3D Showcase Split Banner ─────────────────────────────── */
        .showcase-split {
            display: flex;
            height: 540px;
            margin-top: 60px;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid #e8e8e8;
        }

        .showcase-left {
            width: 55%;
            display: flex;
            gap: 10px;
            padding: 0 10px;
            overflow: hidden;
            position: relative;
            background: #f5f5f5;
        }

        /* top/bottom fade */
        .showcase-left::before,
        .showcase-left::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 100px;
            z-index: 2;
            pointer-events: none;
        }
        .showcase-left::before {
            top: 0;
            background: linear-gradient(to bottom, #f5f5f5, transparent);
        }
        .showcase-left::after {
            bottom: 0;
            background: linear-gradient(to top, #f5f5f5, transparent);
        }

        /* right-edge fade into white */
        .showcase-left .showcase-fade-right {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 90px;
            background: linear-gradient(to right, transparent, #ffffff);
            pointer-events: none;
            z-index: 3;
        }

        .scroll-col {
            flex: 1;
            overflow: hidden;
            padding: 10px 0;
        }

        .scroll-col-track {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .scroll-col-up {
            animation: showcaseScrollUp 24s linear infinite;
        }

        .scroll-col-down {
            animation: showcaseScrollDown 30s linear infinite;
        }

        @keyframes showcaseScrollUp {
            0%   { transform: translateY(0); }
            100% { transform: translateY(-50%); }
        }

        @keyframes showcaseScrollDown {
            0%   { transform: translateY(-50%); }
            100% { transform: translateY(0); }
        }

        .scroll-icon-card {
            background: #ffffff;
            border-radius: 12px;
            padding: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 1;
            border: 1px solid rgba(0, 0, 0, 0.06);
            flex-shrink: 0;
        }

        .scroll-icon-card img {
            width: 72%;
            height: 72%;
            object-fit: contain;
        }

        .showcase-right {
            width: 45%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 60px 56px;
            background: #ffffff;
            border-left: 1px solid #e8e8e8;
        }

        .showcase-info {
            display: flex;
            flex-direction: column;
            padding: 48px 0 0;
        }

        .showcase-eyebrow {
            display: block;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #f94239;
            margin-bottom: 16px;
        }

        .showcase-title {
            font-size: clamp(1.7rem, 2.6vw, 2.4rem);
            font-weight: 700;
            letter-spacing: -0.04em;
            line-height: 1.18;
            color: #0a0a0a;
            margin-bottom: 20px;
        }

        .showcase-desc {
            font-size: 0.95rem;
            color: #666666;
            line-height: 1.75;
            margin-bottom: 44px;
        }

        .showcase-stats {
            display: flex;
            gap: 36px;
        }

        .showcase-stat {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .stat-num {
            font-size: 2.2rem;
            font-weight: 700;
            letter-spacing: -0.05em;
            color: #0a0a0a;
            line-height: 1;
        }

        .stat-label {
            font-size: 0.72rem;
            font-weight: 500;
            letter-spacing: 0.04em;
            color: #aaaaaa;
        }

        @media (max-width: 768px) {
            .showcase-split {
                flex-direction: column;
                height: auto;
            }
            .showcase-left {
                width: 100%;
                height: 240px;
            }
            .showcase-right {
                width: 100%;
                padding: 40px 28px;
                border-left: none;
                border-top: 1px solid #e8e8e8;
            }
            .showcase-stats {
                gap: 24px;
            }
        }
        /* ──────────────────────────────────────────────────────────── */

        /* Footer */
        footer {
            border-top: 1px solid #e5e5e5;
            padding: 40px 40px;
            text-align: center;
            color: #999999;
            font-size: 0.85rem;
        }

        @media (max-width: 768px) {
            footer {
                padding: 40px 10px;
            }
        }

        /* 27인치 이상 대형 모니터 - 사이드바 확대 */
        @media (min-width: 1800px) {
            .floating-nav {
                left: 72px;
                gap: 16px;
            }

            .floating-nav-item {
                font-size: 1.1rem;
                gap: 22px;
                padding: 10px 0;
            }

            .floating-nav-line {
                width: 4px;
                height: 26px;
            }

            .floating-nav-item.active .floating-nav-line {
                height: 52px;
            }
        }

        /* Overview 썸네일 - 좁은 화면에서 하단 가로 배치로 전환 */
        /* 1200px 컨테이너 + right:-170px 썸네일 → 최소 1540px 필요, 여유 포함 1600px */
        @media (max-width: 1600px) {
            .overview-thumb-wrapper,
            .camping-thumb-wrapper {
                position: static;
                margin-top: 12px;
                width: fit-content;
                margin-left: auto;
                margin-right: auto;
                border-radius: 12px;
            }

            .overview-thumb-row {
                flex-direction: row;
                gap: 10px;
            }

            .overview-thumb {
                width: 160px;
                flex: none;
            }

            .overview-thumb,
            .illust-thumb,
            .camping-thumb,
            .character-thumb,
            .category-thumb {
                width: 160px;
                flex-shrink: 0;
            }

            .illust-sidebar {
                position: static;
                flex-direction: row;
                align-items: center;
                width: 100%;
                height: auto;
                margin-top: 12px;
                gap: 6px;
            }

            .illust-scroll-btn {
                flex-shrink: 0;
                width: 28px;
                align-self: stretch;
                height: auto;
                border-radius: 8px;
            }

            .illust-scroll-up svg,
            .illust-scroll-down svg {
                transform: rotate(-90deg);
            }

            .illust-scroll-area {
                flex: 1;
                min-width: 0;
                overflow-x: auto;
                overflow-y: hidden;
                min-height: auto;
                padding: 3px;
            }

            .illust-scroll-area .overview-thumb-row {
                flex-direction: row;
                flex-wrap: nowrap;
                gap: 10px;
            }
        }

        /* Scroll hint - 모바일 전용 */
        .gallery-scroll-hint {
            display: none;
        }

        @keyframes scrollHintBounce {
            0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.5; }
            50% { transform: translateX(-50%) translateY(8px); opacity: 1; }
        }

        /* Responsive */
        @media (max-width: 768px) {
            header {
                padding: 12px 10px;
                background-color: #ffffff;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                transition: none;
                border-bottom: 1px solid #e5e5e5;
            }

            .header-content {
                flex-direction: column;
                align-items: flex-start;
                gap: 8px;
            }

            /* 모바일에서 이메일 숨김 */
            .contact-info {
                display: none;
            }

            .project-info {
                padding: 30px 10px;
            }

            .project-info h1 {
                font-size: 1.6rem;
            }

            .project-meta {
                flex-direction: column;
                gap: 12px;
            }

            /* 메타 카드 패딩 축소 */
            .project-meta-item {
                padding: 14px 16px;
            }

            .gallery-section {
                margin-top: -60px;
                height: 68dvh;
            }

            .gallery-container {
                height: 100%;
                min-height: 280px;
            }

            .gallery-grid {
                grid-template-columns: repeat(70, 44px);
                gap: 20px;
                padding: 16px;
            }

            .gallery-item {
                width: 44px;
                height: 44px;
            }

            /* 모바일에서는 토글 뒤 스크롤 힌트(화살표+텍스트) 숨김 */
            .gallery-scroll-hint {
                display: none;
            }

            .gallery-controls {
                bottom: 20px;
                padding: 8px;
            }

            .control-toggle-button {
                padding: 10px 24px;
                font-size: 0.88rem;
            }

            .content-section {
                padding: 48px 10px;
            }

            /* h2 모바일 폰트 크기 */
            .content-section h2 {
                font-size: clamp(1.6rem, 6.5vw, 2rem);
            }

            /* section 내 서브타이틀 간격 축소 */
            .illust-sub-title {
                margin-top: 44px;
            }

            .section-2col {
                grid-template-columns: 1fr;
            }

            .content-grid {
                grid-template-columns: 1fr;
            }

            .asis-tobe-row {
                grid-template-columns: 1fr;
            }

            .two-col-image-row {
                grid-template-columns: 1fr;
            }

            .illust-fan-section {
                margin-left: calc(50% - 50vw + 10px);
                width: calc(100vw - 20px);
            }

            .object-rule-section {
                margin-left: calc(50% - 50vw + 10px);
                width: calc(100vw - 10px);
            }

            /* 좌측 페이드 그라디언트 모바일에서 좁게 */
            .object-rule-section::before {
                width: 72px;
            }

            .illust-fan-track {
                height: 420px;
            }

            .illust-fan-card {
                width: 85%;
            }

            /* VSC prompt viewer */
            .vsc-content-wrap {
                height: 260px;
            }

            .vsc-sec-code {
                font-size: 10.5px;
                padding: 4px 16px 12px 14px;
                line-height: 1.85;
            }

            .vsc-nav-btn {
                font-size: 10px;
                padding: 8px 10px;
            }

            .vsc-panel-header {
                font-size: 9.5px;
                padding: 8px 14px 4px;
                margin: 10px 12px 4px;
            }

            .yds-swatches span {
                width: 16px;
                height: 16px;
            }

            /* overview / camping 썸네일 wrapper — 화살표 없이 스와이프 스크롤만.
               패딩은 wrapper 한 곳에서만 관리 (데스크톱용 10px는 명시적으로 0으로 리셋) */
            .overview-thumb-wrapper,
            .camping-thumb-wrapper {
                max-width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                padding: 8px;
            }

            .overview-thumb-wrapper::-webkit-scrollbar,
            .camping-thumb-wrapper::-webkit-scrollbar {
                display: none;
            }

            /* 모바일 썸네일 크기 축소 */
            .overview-thumb,
            .illust-thumb,
            .camping-thumb,
            .character-thumb,
            .category-thumb {
                width: 96px;
                flex-shrink: 0;
            }

            /* scroll-snap-align은 wrapper/row의 padding과 충돌해 새로고침 시
               스크롤이 강제로 밀리는 문제를 반복적으로 일으켜서 완전히 제거하고
               자연스러운 스와이프 스크롤만 사용 */

            /* 모바일에서는 화살표 버튼 숨김 — 스와이프 스크롤만 사용 (데스크톱/태블릿은 그대로 유지) */
            .illust-scroll-btn {
                display: none;
            }

            /* ── 풀-블리드 클립 구역 모바일 안전 처리 ── */

            /* cv-pills-outer: 100vw + translate 트릭 대신 단순 overflow:hidden */
            .cv-pills-outer {
                position: static;
                left: auto;
                transform: none;
                width: auto;
                overflow: hidden;
                margin-left: -10px;
                margin-right: -10px;
                padding-left: 10px;
                padding-right: 10px;
            }

            /* cv-pills 좌측 페이드 모바일에서 숨김 */
            .cv-pills-outer::before {
                display: none;
            }

            /* object-rule-section: clip → hidden (모바일 hover 없음)
               + 100vw 기반 풀블리드 계산은 iOS Safari에서 주소창 표시 여부에 따라
               실제 화면 폭과 어긋나는 버그가 있어서 100vw 계산은 쓰지 않되,
               부모 .content-section의 좌우 패딩(10px)만큼 음수 마진을 줘서
               카드 스크롤이 화면 끝까지 딱 붙게 함 (패딩 때문에 스크롤 중에도
               양옆에 여백이 남아있던 문제) */
            .object-rule-section {
                overflow: hidden;
                margin-left: -10px;
                margin-right: -10px;
                width: calc(100% + 20px);
            }

            /* 좌측 화이트 페이드 그라데이션 모바일에서 제거 */
            .object-rule-section::before {
                display: none;
            }

            /* 자동 마퀴 애니메이션은 끄고(카드 경계가 애매하게 걸친 순간이 계속 노출되는 문제),
               대신 직접 스와이프로 넘길 수 있게 가로 스크롤 활성화 — Rule 01~08 전부 접근 가능해야 함 */
            .object-rule-track {
                animation: none;
                transform: none;
            }

            .object-rule-marquee {
                overflow-x: auto;
                overflow-y: hidden;
                scrollbar-width: none;
                /* 카드 3벌을 복제해두고 끝에 닿으면 JS로 한 세트만큼 순간 이동해 무한 루프처럼 보이게 함
                   (yeogi-visual-system.js의 object-rule-marquee 스크롤 로직 참고) */
                overscroll-behavior-x: contain;
            }

            .object-rule-marquee::-webkit-scrollbar {
                display: none;
            }

            /* object-rule-card: 데스크톱 300px 고정폭이 모바일에서 화면을 거의 다 차지해서 축소 */
            .object-rule-card {
                flex-basis: 180px;
                padding: 16px 16px 20px;
            }

            /* 터치 기기는 탭 시 :hover가 눌러붙는 경우가 있어서, 데스크톱용 호버 리프트를
               모바일에서는 완전히 꺼서 스와이프/탭해도 카드가 위로 뜨지 않게 함 */
            .object-rule-card:hover {
                transform: none;
            }

            .object-rule-card-title {
                font-size: 0.95rem;
                margin-top: 14px;
            }

            .object-rule-card-desc {
                font-size: 0.8rem;
            }

            /* icon-row-section: clip → hidden */
            .icon-row-section {
                overflow: hidden;
            }

            /* core value pill 모바일 — 스크롤 트리거 확장 애니메이션(원→원기둥, 텍스트 페이드인)을
               전부 제거하고 처음부터 최종 모습(원기둥 + 텍스트 항상 표시)으로 고정.
               모바일에서 순차 딜레이 애니메이션이 부자연스럽다는 피드백에 따름.
               (이 규칙들의 unconditional 버전이 파일에서 이 미디어쿼리보다 뒤에 있어서
               소스 순서상 그냥 두면 덮어써짐 — !important로 명시적으로 이김) */
            .core-value-pill {
                width: min(280px, 85vw);
                max-width: 85vw;
                height: 480px !important;
                padding: 0 !important;
                justify-content: center;
                transition: none !important;
            }

            .core-value-pill-title {
                margin-top: 0 !important;
                transition: none !important;
            }

            .core-value-pill-desc {
                opacity: 1 !important;
                max-height: none !important;
                margin-top: 12px !important;
                transition: none !important;
            }

            /* 모바일에서는 원 하단에 삐져나오는 테마 그래픽(빨간 삼각형 등)을 숨김
               — 데스크톱은 주변 장식 원기둥과 함께 보여 자연스럽지만, 모바일은 세로로만
               쌓여 그래픽 조각이 이물질처럼 보임 */
            .core-value-graphic {
                opacity: 0 !important;
            }

            /* 그래픽을 숨기는 대신 색감을 단색 톤으로 대체 — 파스텔이 너무 연해서
               3개 전부 좀 더 진하고 선명하게 (Simple도 모바일에서만 함께 보정) */
            .core-value-pill:nth-child(1) {
                background: linear-gradient(to bottom, rgba(255, 90, 90, 0.32) 0%, #FFE4E1 40%);
            }

            .core-value-pill:nth-child(2) {
                background: linear-gradient(to bottom, rgba(70, 120, 255, 0.32) 0%, #DCE6FF 40%);
            }

            .core-value-pill:nth-child(3) {
                background: linear-gradient(to bottom, rgba(255, 180, 30, 0.35) 0%, #FFEFC2 40%);
            }

            /* onboarding 이미지 높이 */
            .onboarding-img-wrap {
                max-height: 320px;
            }

            .onboarding-img-slide {
                max-height: 320px;
            }
        }

        /* ── 카테고리 아이콘 마퀴 ── */
        .icon-row-section {
            margin-top: 40px;
            overflow-x: clip;
            position: relative;
        }

        .icon-row-section::before,
        .icon-row-section::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 120px;
            z-index: 2;
            pointer-events: none;
        }

        .icon-row-section::before {
            left: 0;
            background: linear-gradient(to right, #ffffff, transparent);
        }

        .icon-row-section::after {
            right: 0;
            background: linear-gradient(to left, #ffffff, transparent);
        }

        .icon-marquee-row {
            overflow: hidden;
        }

        .icon-marquee-track {
            display: flex;
            gap: 4px;
            width: max-content;
            animation: icon-marquee-scroll 37s linear infinite;
        }


        @keyframes icon-marquee-scroll {
            from {
                transform: translateX(-1104px);
            }

            to {
                transform: translateX(0);
            }
        }

        .icon-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 16px 12px 12px;
            border-radius: 12px;
            border: 2px solid transparent;
            width: 104px;
            z-index: 1;
        }

        .icon-item .icon-img {
            width: 64px;
            height: 64px;
            border-radius: 12px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .icon-item .icon-label {
            font-size: 0.72rem;
            font-weight: 500;
            color: #666666;
            white-space: nowrap;
        }

        .icon-item .hover-card {
            display: none;
        }

        /* Core Values - Animated Pills */
        .core-values-pills {
            display: flex;
            gap: 24px;
            justify-content: center;
            align-items: flex-start;
            margin-top: 60px;
        }

        .core-value-pill {
            flex: 0 0 280px;
            width: 280px;
            height: 280px;
            border-radius: 9999px;
            background: linear-gradient(to bottom, rgba(255, 118, 118, 0.15) 0%, #FFF4F1 40%);
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
            padding: 36px 0 20px;
            transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        .core-value-pill-title,
        .core-value-pill-desc {
            position: relative;
            z-index: 1;
        }

        .core-value-pill::before {
            display: none;
        }

        /* collapse 시 역순 딜레이 (3→2→1) */
        .core-value-pill:nth-child(1) {
            transition-delay: 0.2s;
        }

        .core-value-pill:nth-child(2) {
            transition-delay: 0.1s;
        }

        .core-value-pill:nth-child(3) {
            transition-delay: 0s;
        }

        .core-value-graphic {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
            display: block;
            opacity: 0;
            transition: opacity 0.45s ease;
            z-index: 0;
        }

        .cv-pill-deco {
            overflow: hidden;
            padding: 0;
        }

        .cv-pill-deco img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            flex-shrink: 0;
        }

        /* collapse 시 graphic 즉시 사라짐 */
        .core-value-pill:nth-child(1) .core-value-graphic {
            transition-delay: 0s;
        }

        .core-value-pill:nth-child(2) .core-value-graphic {
            transition-delay: 0s;
        }

        .core-value-pill:nth-child(3) .core-value-graphic {
            transition-delay: 0s;
        }

        .core-value-pill-title {
            font-size: 1.25rem;
            font-weight: 600;
            letter-spacing: -0.02em;
            color: #0a0a0a;
            margin-top: 103px;
            padding: 0 28px;
            flex-shrink: 0;
            transition: margin-top 0.55s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* collapse 시 title 역순 */
        .core-value-pill:nth-child(1) .core-value-pill-title {
            transition-delay: 0.2s;
            color: #0a0a0a;
        }

        .core-value-pill:nth-child(2) .core-value-pill-title {
            transition-delay: 0.1s;
            color: #0a0a0a;
        }

        .core-value-pill:nth-child(3) .core-value-pill-title {
            transition-delay: 0s;
            color: #0a0a0a;
        }

        .core-value-pill-desc {
            font-size: 0.9rem;
            line-height: 1.75;
            color: #666666;
            text-align: center;
            padding: 0 28px;
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            margin-top: 0;
            transition: opacity 0.4s ease, max-height 0.4s ease, margin-top 0.4s ease;
        }

        /* collapse 시 desc 즉시 사라짐 */
        .core-value-pill:nth-child(1) .core-value-pill-desc {
            transition-delay: 0s;
            color: #0a0a0a;
        }

        .core-value-pill:nth-child(2) .core-value-pill-desc {
            transition-delay: 0s;
            color: #0a0a0a;
        }

        .core-value-pill:nth-child(3) .core-value-pill-desc {
            transition-delay: 0s;
            color: #0a0a0a;
        }

        .core-values-pills.expanded .core-value-pill {
            height: 480px;
        }

        /* expand 시 순차 딜레이 (1→2→3) */
        .core-values-pills.expanded .core-value-pill:nth-child(1) {
            transition-delay: 0s;
        }

        .core-values-pills.expanded .core-value-pill:nth-child(2) {
            transition-delay: 0.2s;
        }

        .core-values-pills.expanded .core-value-pill:nth-child(3) {
            transition-delay: 0.4s;
        }

        .core-values-pills.expanded .core-value-pill-title {
            margin-top: 32px;
        }

        .core-values-pills.expanded .core-value-pill:nth-child(1) .core-value-pill-title {
            transition-delay: 0s;
        }

        .core-values-pills.expanded .core-value-pill:nth-child(2) .core-value-pill-title {
            transition-delay: 0.2s;
        }

        .core-values-pills.expanded .core-value-pill:nth-child(3) .core-value-pill-title {
            transition-delay: 0.4s;
        }

        .core-values-pills.expanded .core-value-pill-desc {
            opacity: 1;
            max-height: 200px;
            margin-top: 12px;
        }

        .core-values-pills.expanded .core-value-pill:nth-child(1) .core-value-pill-desc {
            transition-delay: 0.5s;
        }

        .core-values-pills.expanded .core-value-pill:nth-child(2) .core-value-pill-desc {
            transition-delay: 0.7s;
        }

        .core-values-pills.expanded .core-value-pill:nth-child(3) .core-value-pill-desc {
            transition-delay: 0.9s;
        }

        .core-values-pills.expanded .core-value-graphic {
            opacity: 1;
        }

        .core-values-pills.expanded .core-value-pill:nth-child(1) .core-value-graphic {
            transition-delay: 0.65s;
        }

        .core-values-pills.expanded .core-value-pill:nth-child(2) .core-value-graphic {
            transition-delay: 0.85s;
        }

        .core-values-pills.expanded .core-value-pill:nth-child(3) .core-value-graphic {
            transition-delay: 1.05s;
        }

        /* Core Values — 전체 원기둥 행 (max-width 무시) */
        .cv-pills-outer {
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            width: 100vw;
            overflow-x: clip;
            overflow-y: visible;
            margin-top: 60px;
        }

        .cv-pills-outer::before {
            content: '';
            position: absolute;
            left: 0;
            top: -20px;
            bottom: -20px;
            width: 240px;
            background: linear-gradient(to right, #ffffff 50%, transparent);
            z-index: 10;
            pointer-events: none;
        }

        .cv-pills-row {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            width: 100%;
            min-height: 460px;
        }

        .cv-pills-row .core-values-pills {
            position: relative;
            z-index: 1;
            margin-top: 0;
        }

        /* 데코 원기둥: 메인 3개(888px) 중심 기준 절대 배치 */
        .cv-pills-deco {
            position: absolute;
            top: 0;
            display: flex;
            gap: 24px;
            align-items: flex-start;
        }

        .cv-pills-deco--left  { right: calc(50% + 468px); }
        .cv-pills-deco--right { left:  calc(50% + 468px); }

        .cv-pill-deco {
            height: 280px;
            opacity: 1;
            transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .cv-pills-deco.expanded .cv-pill-deco {
            height: 480px;
        }

        /* 좌측: 메인과 동일한 transition 전체 명시 */
        .cv-pills-deco--left .cv-pill-deco:nth-child(2) { transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0s; }
        .cv-pills-deco--left .cv-pill-deco:nth-child(1) { transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; }

        /* 우측: 메인 0.4s 이후 이어서 */
        .cv-pills-deco--right .cv-pill-deco:nth-child(1) { transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.6s; }
        .cv-pills-deco--right .cv-pill-deco:nth-child(2) { transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.8s; }
        .cv-pills-deco--right .cv-pill-deco:nth-child(3) { transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1) 1.0s; }
        .cv-pills-deco--right .cv-pill-deco:nth-child(4) { transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1) 1.2s; }

        @media (max-width: 960px) {
            .cv-pills-row {
                flex-direction: column;
                align-items: center;
                left: auto;
                transform: none;
                width: auto;
            }

            .cv-pills-deco {
                display: none;
            }

            .core-values-pills {
                flex-direction: column;
                align-items: center;
            }

            .core-value-pill {
                max-width: 280px;
                width: 280px;
            }
        }

        /* ─── Tablet 공통 (769px – 1280px) ─────────────────────────────── */
        @media (min-width: 769px) and (max-width: 1280px) {

            /* project-meta: 2열 wrap */
            .project-meta {
                flex-wrap: wrap;
            }
            .project-meta-item {
                flex: 1 1 calc(50% - 8px);
            }

            /* content-grid: 최소 카드 너비 축소 */
            .content-grid {
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            }

            /* showcase-right: 패딩 축소 */
            .showcase-right {
                padding: 40px 40px;
            }

            /* illust-fan: 높이 줄이기 */
            .illust-fan-track {
                height: 520px;
            }
            .illust-fan-card {
                width: 74%;
            }

            /* vsc-window */
            .vsc-content-wrap {
                height: 400px;
            }
        }

        /* ─── Small Tablet (769px – 960px) ───────────────────────────── */
        @media (min-width: 769px) and (max-width: 960px) {

            /* section-2col → 1열 */
            .section-2col {
                grid-template-columns: 1fr;
                gap: 32px;
            }

            /* v2-split → 세로 스택 */
            .v2-split {
                flex-direction: column;
            }
            .v2-left {
                min-height: 380px;
            }
            .v2-image-slot {
                min-height: 320px;
            }

            /* fan-deck 더 축소 */
            .illust-fan-track {
                height: 400px;
            }
            .illust-fan-card {
                width: 82%;
            }

            /* as-is/to-be → 1열 */
            .asis-tobe-row {
                grid-template-columns: 1fr;
            }

            /* two-col-image → 1열 */
            .two-col-image-row {
                grid-template-columns: 1fr;
            }

            /* vsc-window 축소 */
            .vsc-content-wrap {
                height: 360px;
            }
        }

        /* ── Onboarding Deck ── */
        .onboarding-deck {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-top: 40px;
            align-items: stretch;
        }

        /* 좌측 이미지 */
        .onboarding-img-wrap {
            overflow: hidden;
            border-radius: 12px;
            border: 1px solid #e5e5e5;
            background: #f7f7f7;
            height: 520px;
        }

        .onboarding-img-track {
            display: flex;
            height: 100%;
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .onboarding-img-slide {
            flex: 0 0 100%;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: none;
        }

        .onboarding-img-slide::-webkit-scrollbar { display: none; }

        .onboarding-img-slide img {
            width: 100%;
            display: block;
            pointer-events: none;
            user-select: none;
            -webkit-user-drag: none;
        }

        /* 우측 텍스트 */
        .onboarding-info {
            position: relative;
            padding: 8px 0 76px;
            height: 100%;
            box-sizing: border-box;
        }

        .onboarding-panels {
            width: 100%;
        }

        .onboarding-panel {
            display: none;
            flex-direction: column;
            gap: 16px;
        }

        .onboarding-panel.active {
            display: flex;
        }

        .onboarding-panel-num {
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            color: #bbbbbb;
            text-transform: uppercase;
        }

        .onboarding-panel-title {
            font-size: 1.6rem;
            font-weight: 600;
            letter-spacing: -0.03em;
            color: #0a0a0a;
            line-height: 1.25;
        }

        .onboarding-panel-desc {
            font-size: 0.95rem;
            color: #666666;
            line-height: 1.85;
        }

        /* 하단 네비 */
        .onboarding-nav {
            position: absolute;
            bottom: 8px;
            left: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .onboarding-nav-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid #e5e5e5;
            background: #ffffff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #0a0a0a;
            transition: background 0.2s ease, border-color 0.2s ease;
            flex-shrink: 0;
        }

        .onboarding-nav-btn:hover {
            background: #f5f5f5;
            border-color: #d0d0d0;
        }

        .onboarding-nav-btn:disabled {
            opacity: 0.25;
            cursor: default;
        }

        @media (max-width: 768px) {
            .onboarding-deck {
                grid-template-columns: 1fr;
                gap: 24px;
            }
            .onboarding-img-wrap,
            .onboarding-info {
                height: auto;
            }
            .onboarding-img-wrap {
                max-height: 400px;
            }
            .onboarding-img-slide {
                max-height: 400px;
            }
        }