@font-face {
    font-family: 'Six Caps';
    src: url('../fonts/SixCaps-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Typography */
    --font-main: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;

    /* Theme Colors (Default: Dark) — 2026-09-03: "롤백 취소" — 블루/베이지 팔레트 유지. */
    --bg-color: #181818;
    --bg-inverted: #ffffff;
    --text-white: #ffffff;
    /* 2026-09-13: "포인트 컬러(하늘색)"와 별개로 서브 정보 컬러(보조 텍스트)를
       독립된 색값(#A9B4E8, 남색 배경에 어울리던 라벤더블루)이 아니라 --text-white
       기반 opacity로 전환 — 배경/문자색이 나중에 또 바뀌어도 "서브 정보 컬러"가
       자동으로 같이 톤이 맞아떨어지도록(매번 새 hex를 지정할 필요 없게) 함. */
    --text-gray: rgba(255, 255, 255, 0.7);
    --text-dark: #333333;
    --point-red: #3BF8FF;
    --point-red-contrast: #181818;
    --border-color: rgba(255, 255, 255, 0.14);
    /* 2026-09-03: 0.2 -> 0.12로 한 단계 낮춤 — "보조 라인들이 너무 강조돼 보인다" 지적
       (이건 컬러 시스템 롤백 대상 아님 — 별개 요청이라 유지)
       2026-09-13: 배경을 #02031B(남색) -> #181818(무채색)로 바꾸며 배경 밝기가
       살짝 올라간 만큼(대비 손실 보정) 0.12 -> 0.14로 소폭 상향. */

    /* Spacing */
    /* 2026-09-06: "섹션 타이틀 위 공간 조금씩만 줄여줘 — 밑에 뭐가 있다는 암시가 안됨"
       요청으로 480px -> 420px 축소. 이후 "섹션 사이 거리만 방금 줄인만큼만 줄여봐"
       요청으로 동일한 폭(60px)만큼 한 번 더 축소 — 이 변수(섹션 사이 거리)만 대상,
       .provide-intro(340px) 등 다른 간격은 그대로 유지. */
    --spacing-section: 360px;
    --spacing-item: 12px;

    /* Transitions */
    --transition-fast: 0.15s ease-out;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Light Theme Override */
body.light-theme {
    --bg-color: #ffffff;
    --bg-inverted: #050505;
    --text-white: #111111;
    --text-gray: #666666;
    --text-dark: #eeeeee;
    --border-color: rgba(0, 0, 0, 0.1);
}

/* ==========================================
   2. Reset & Base Styles
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::selection {
    background: var(--point-red);
    color: var(--point-red-contrast);
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-color);
    color: var(--text-white);
    font-size: 15px;
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    position: relative;
    transition: background-color var(--transition-slow), color var(--transition-slow);
    /* 2026-09-06: 개별 클래스(.manifesto-text)에만 word-break:keep-all이 있어서 그 외
       한글 본문(svc-item-desc, testimonial-quote 등)은 줄바꿈 시 단어 중간이 잘려
       다음 줄로 넘어가는 문제가 계속 발생 — "어떤 뷰에서든 단어잘림 없게" 요청에 맞춰
       body 레벨로 전체 상속, 이후 개별 요소마다 따로 챙길 필요 없도록 함. */
    word-break: keep-all;
    overflow-wrap: break-word;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-normal);
}

a:hover {
    color: var(--text-white);
}

ul {
    list-style: none;
}

/* ==========================================
   3. Fixed UI Elements
   ========================================== */

/* Canvas Background */
#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Changed from 100vw to avoid scrollbar overflow */
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}


/* Theme Toggle */
.theme-toggle {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 1000;
    background: none;
    border: 1px solid var(--text-gray);
    color: var(--text-gray);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 600;
    transition: all var(--transition-normal);
    mix-blend-mode: difference;
}

.theme-toggle:hover {
    border-color: var(--text-white);
    color: var(--text-white);
}

/* ==========================================
   4. Language Visibility
   ========================================== */
[data-lang="ko"] .en,
[data-lang="ko"] .cn,
[data-lang="en"] .ko,
[data-lang="en"] .cn,
[data-lang="cn"] .ko,
[data-lang="cn"] .en {
    display: none !important;
}

/* ==========================================
   5. Layout
   ========================================== */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Main Content Wrapper (Slides over Hero) */
#main-content {
    position: relative;
    z-index: 10;
    background-color: var(--bg-color);
    transition: background-color var(--transition-slow);
}

/* ==========================================
   6. Components
   ========================================== */

/* Red Badge */
.red-badge {
    /* No fixed height on purpose — with align-items:center + a fixed
       height, flex centers the whole line box and top/bottom padding
       stops having any visible effect. Letting padding size the box
       directly is what actually lets us correct the visual centering.
       2026-09-13(4차, 최종): 3px 비대칭(6px/3px)이 22px 남짓한 뱃지 전체 높이
       기준으로 너무 커서 위쪽이 확연히 넓어 보이는 역효과 — 대표님이 스크린샷과
       함께 "딱 봐도 위가 훨씬 넓다"고 지적. 3차례 연속으로 방향/크기를 잘못
       짚었던 것에 대한 반성으로, 추측성 비대칭 조정을 그만두고 top=bottom
       완전히 동일하게(4px) 되돌림 — 그 위에서 실제 렌더링을 직접 보고 최종
       확인. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--point-red);
    color: var(--point-red-contrast);
    border-radius: 12px;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    padding: 4px 10px;
    vertical-align: middle;
    margin-left: 12px;
    margin-right: 20px;
    transform: translateY(-2px);
    box-shadow: 0 0 10px rgba(59, 248, 255, 0.4);
}

.red-badge.large {
    height: 36px;
    border-radius: 18px;
    font-size: 20px;
    padding: 0 16px;
    margin-left: 20px;
    transform: translateY(-4px);
}

/* ==========================================
   7. Hero Section
   ========================================== */
.hero-section {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 5;
    will-change: transform, opacity;
    transform-origin: center center;
    /* Base style: Dark — hardcoded (not var(--bg-color)) on purpose: body.light-theme
       redefines --bg-color to white, but the hero must stay the brand blue regardless
       of site theme (see override directly below). */
    background-color: #181818;
    color: #ffffff;
    transition: background-color var(--transition-fast);
}

/* Ensure Hero ignores Light Theme via specificity */
body.light-theme .hero-section {
    background-color: #181818;
    color: #ffffff;
}

body.light-theme .hero-section h1.main-title,
body.light-theme .hero-section .clock-number,
body.light-theme .hero-section .manifesto-text,
body.light-theme .hero-section .career-timer,
body.light-theme .hero-section .scroll-indicator {
    color: #ffffff;
}

/* 2026-09-13: "light mode일 때 히어로 상단 BDI Studio 텍스트가 블랙이라 안
   보인다" — 위 .career-timer{color:#fff} 지정만으론 부족했음: 실제 글자는
   안쪽 .skill-text가 자기 자신의 color(var(--text-white))를 직접 갖고 있어서
   (light 테마에서 --text-white는 #111111로 바뀜) 부모의 color 지정이 상속되지
   않고 자식의 명시적 color에 덮여 그대로 검게 보였음 — 자식을 직접 지정. */
body.light-theme .hero-section .career-timer .skill-text {
    color: #ffffff;
}

body.light-theme .hero-section .scroll-arrow svg path {
    stroke: #ffffff;
}

body.light-theme .hero-section .clock-hand,
body.light-theme .hero-section .clock-center {
    background: #ffffff;
}

/* Hero Inverted State (Blink Effect) - Should work in both themes */
.hero-section.hero-inverted {
    background-color: #ffffff !important;
}

.hero-section.hero-inverted h1.main-title,
.hero-section.hero-inverted .clock-number,
.hero-section.hero-inverted .manifesto-text,
.hero-section.hero-inverted .career-timer,
.hero-section.hero-inverted .scroll-indicator {
    color: #050505 !important;
}

.hero-section.hero-inverted .clock-hand,
.hero-section.hero-inverted .clock-center {
    background: #050505 !important;
}

.hero-section.hero-inverted .scroll-arrow svg path {
    stroke: #050505 !important;
}

.hero-section.hero-inverted .clock-second {
    background: var(--point-red) !important;
}

/* Physics Typography Hero (2026-09-01) */
#hero-physics-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.hero-content {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

h1.main-title {
    font-size: 15vw;
    font-weight: 800;
    color: #ffffff;
    line-height: 0.75;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    text-align: center;
    opacity: 1;
    margin: 0;
    transition: color var(--transition-fast);
    will-change: transform, opacity;
}

.relevance-message {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--point-red);
    min-height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0.9;
    max-width: 80vw;
}

/* Small BDI Studio motion in the hero top-center (matches old digit-clock size) */
.career-timer {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

.skill-text.bdi-motion-hero {
    font-size: 24px;
}

/* Full-size BDI Studio motion above the info-header divider. Fixed to the
   top of the viewport (via .is-stuck, JS-toggled) once scrolled past its
   resting position, so it stays pinned all the way to the bottom of the
   page instead of unsticking when its short parent block scrolls away. */
.skill-text.bdi-motion {
    margin-bottom: 32px;
    position: relative;
    z-index: 30;
    transition: background-color var(--transition-slow);
}

.skill-text.bdi-motion.is-stuck {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin-bottom: 0;
    font-size: 24px;
    background-color: var(--bg-color);
    padding-top: 20px;
    padding-bottom: 20px;
    /* 2026-10-18: "좌우 마진이 왜 달라" — 고정 40px이었던 좌우 패딩은
       .container(max-width:1400px, 중앙정렬)가 뷰포트 폭에 따라 점점 더
       크게 벌어지는 본문 여백을 전혀 따라가지 못해, 큰 화면(아이맥 전체화면
       등)에서 스크롤로 고정된 이 로고만 본문보다 훨씬 왼쪽에 붙어 보이는
       원인이었음(실측: 2560px에서 로고 40px vs 본문 520px) — .testimonial-strip
       .svc-label이 이미 쓰고 있던 것과 같은 공식으로 교체해 본문 좌우 여백과
       항상 일치하도록 함. */
    padding-left: max(40px, calc((100vw - 1400px) / 2 + 40px));
    padding-right: max(40px, calc((100vw - 1400px) / 2 + 40px));
}

@media (max-width: 768px) {
    .skill-text.bdi-motion.is-stuck {
        padding: 16px 24px;
    }
}

@media (max-width: 480px) {
    .skill-text.bdi-motion.is-stuck {
        padding: 14px 16px;
    }
}

/* Clock Face */
.hero-clockface {
    position: absolute;
    width: 100%;
    height: 100%;
}

.clockface-numbers {
    position: relative;
    width: 100%;
    height: 100%;
}

.clock-number {
    position: absolute;
    left: 50%;
    top: 50%;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    transition: color var(--transition-fast);
}

/* Clock Hands */
.clock-hands {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.clock-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform-origin: bottom center;
    background: #ffffff;
    border-radius: 4px;
}

.clock-hour {
    width: 4px;
    height: 15vh;
    margin-left: -2px;
}

.clock-minute {
    width: 3px;
    height: 22vh;
    margin-left: -1.5px;
}

.clock-second {
    width: 2px;
    height: 24.3vh;
    margin-left: -1px;
    background: var(--point-red);
    transition: none;
}

.clock-second::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: var(--point-red);
    border-radius: 50%;
}

.clock-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    z-index: 2;
}

/* Manifesto */
.hero-manifesto {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 40px;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.manifesto-text {
    font-size: min(10vw, 220px);
    font-weight: 800;
    color: #ffffff;
    line-height: 0.85;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    text-align: center;
    word-break: keep-all;
    transition: color var(--transition-fast);
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-gray);
    opacity: 0.6;
    transition: opacity var(--transition-normal);
    cursor: pointer;
}

.scroll-indicator:hover {
    opacity: 1;
}

.scroll-text {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.scroll-arrow {
    animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-arrow svg {
    width: 24px;
    height: 24px;
}

@keyframes scrollBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

/* ==========================================
   8. Info Header
   ========================================== */
.info-header {
    padding-top: 80px;
    padding-bottom: 60px;
}

.role-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px 60px;
    padding-top: 32px;
}

.role-tagline {
    max-width: none;
    flex: 1 1 480px;
}

/* 2026-09-13: "이 부분 타이포를 What we provide 사이즈, 두께로 수정해"
   — .provide-label(WHAT WE PROVIDE)과 동일한 크기/굵기/자간으로 맞춤.
   2026-10-15: 대문자만 재지적("전체 대문자 말고 이렇게 바꿔" + 문장
   그대로)으로 text-transform 제거, 원래 타이핑된 문장 그대로(Sentence case)
   노출. 크기/굵기/자간은 그대로 유지. */
.tagline-en {
    font-size: 18px;
    /* 2026-09-13: "bold 말고 medium으로" */
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-white);
    line-height: 1.5;
    margin: 0;
}

.tagline-break {
    display: block;
}

.tagline-ko {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-gray);
    line-height: 1.5;
    margin: 12px 0 0;
}

.contact-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    flex-shrink: 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 20px 60px;
    font-size: 14px;
    text-align: right;
}

.contact-label {
    display: block;
    font-size: 11px;
    color: var(--text-gray);
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 0.05em;
}

.affiliation-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-white);
}

.affiliation-logo {
    height: 1.4em;
    width: auto;
    display: block;
}

/* ---------- Services (Consulting / Design Solution) ---------- */
.services-wrapper {
    display: flex;
    align-items: stretch;
    padding-top: 128px;
}

.service-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
}

.service-col:first-child {
    padding-right: 30px;
}

.service-col-right {
    padding-left: 60px;
    border-left: 1px solid var(--border-color);
}

.service-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
}

.service-title {
    font-family: var(--font-main);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-white);
    margin: 0;
    letter-spacing: -0.01em;
}

/* Consulting has no sub-items to click, so the title itself is the link
   down to its detail section — color shift on hover signals that. */
.service-title-link {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-normal);
}

.service-title-link:hover {
    color: var(--point-red);
}

/* 2026-09-13: "가격이 맥락 없이 뚝하고 크기도 너무 크고 강조돼있다, 조화롭게" —
   4개 항목 리스트와 같은 흰색/22px/700굵기라 리스트보다도 더 튀어 보였음.
   ①"고정가" 라벨(.service-price-note, 기존에 정의만 돼 있고 안 쓰이던 클래스)을
   앞에 붙여 맥락을 주고, ②크기/굵기를 리스트 항목(18px/700)보다도 낮춰 보조
   정보처럼 차분하게, ③리스트와의 간격도 20px→14px로 좁혀 붙여보이게. */
/* 2026-10-15(1차): "너무 작아졌어, 글자만 띡 있는 느낌, 짜임새 있게" 지적에
   테두리+배경이 있는 둥근 박스로 감쌌었는데, 바로 "통일성도 없고 ai 같고
   보급형이어서 별로" 반려당함 — 이 사이트는 어디서도 둥근 모서리+배경 채운
   "카드" 컴포넌트를 쓰지 않고, 전부 얇은 구분선(border-top/bottom 하나)만
   쓰는 언어라는 걸 놓쳤음(`.svc-footer`의 `.svc-price-block`, `.provide-row`
   등 전부 이 패턴). 박스 자체를 버리고 그 기존 구분선 언어를 그대로 가져옴.
   2026-10-15(2차): 그 구분선도 "너무 인위적, 화면을 불필요하게 차지함,
   많이 고민한 디자인 같지 않음" — 재지적. 리스트 4줄 아래에 가격 하나 때문에
   전용 가로줄+세로 2줄 블록을 또 만드는 게 과했던 것 — 절제된 방향으로
   border-top 완전히 제거하고, 라벨+금액을 baseline 정렬된 한 줄로 합쳐
   리스트 바로 아래에 자연스러운 여백만으로 붙임(별도 섹션처럼 안 보이게). */
.service-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 14px;
}

.service-price-note {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-gray);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.service-price-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-white);
    letter-spacing: -0.01em;
}

/* Same typographic hierarchy as .content-col h3 (CAREERHISTORY role titles) */
.service-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}

.service-list li {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.service-list li:hover {
    transform: translateX(5px);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Plain inline (not flex) on purpose: flex would lay "Inquire" and the
   arrow out as separate boxes with a real gap between them, and the
   underline can't draw across that gap. Keeping it inline text (arrow
   included as literal content with a leading space) makes the underline
   run continuously beneath both. */
.service-cta {
    display: inline;
    color: var(--text-gray);
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 8px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--transition-normal);
}

.service-cta::after {
    content: " ↗";
    font-size: 20px;
    vertical-align: -3px;
}

.service-cta:hover {
    color: var(--text-white);
}

/* REQ-163 (2026-10-20): "inquire이 design strategy 행이랑 중앙 정렬돼야해.
   consulting까지 포함해서가 아니라" + "솔루션 제목 - 세부 항목 - 가격 간 디자인
   구조화도 안돼있고".
   ① Inquire: .service-head가 align-items:center라 2줄 제목(Design Strategy /
      · Consulting) 전체 높이의 가운데에 걸려 있었음 → 위쪽 정렬 + Inquire 줄높이를
      제목 첫 줄 높이(폰트×1.1)와 같게 해서 첫 줄(Design Strategy)과 정확히 같은 높이에 섬.
   ② 구조: 두 칼럼이 같은 3단(제목 / 항목 / 가격) 격자를 공유하도록 — 제목 영역을
      2줄 높이로 고정해 왼쪽(2줄)·오른쪽(1줄) 항목 리스트 시작선을 맞추고, 가격 줄은
      margin-top:auto로 두 칼럼 모두 같은 바닥선에 붙임. 오른쪽에도 같은 형식의 가격 줄
      (상세 섹션 기존 문구 '작업 범위별 상이' 재사용)을 둬 좌우 짝을 맞춤. 박스·구분선은
      추가하지 않음(10-15 두 차례 반려 이력 — 이 사이트는 여백과 타이포 위계로만 구분). */
:root {
    --svc-title-size: 34px;
}
.service-title {
    font-size: var(--svc-title-size);
}
/* 행 정렬은 subgrid로: 두 칼럼이 (제목 / 항목 / 가격) 3행을 공유 → 제목이 줄바꿈된
   칼럼이 있으면 그 높이에 맞춰 양쪽 항목 시작선이 같이 내려가고, 한 줄일 땐 여백을
   억지로 예약하지 않음. */
.services-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
}
.services-wrapper > .service-col {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
}
.service-head {
    align-items: flex-start;
    margin-bottom: 36px;
}
.service-cta {
    display: inline-block;
    line-height: calc(var(--svc-title-size) * 1.1);
    flex-shrink: 0;
}
.service-list {
    margin-bottom: 0;
}
.service-col .service-price {
    margin-top: 0;
    padding-top: 48px;
    align-self: end;
}
/* REQ-164 (2026-10-20): "고정가 & 가격을 차라리 볼드체 말고 regular로 하고 금액 부분만
   글자 크기를 '진단 번들 AX~'이부분이랑 동일하게 키워봐" — 라벨·금액 둘 다 400, 금액만
   항목 리스트(.service-list li)와 같은 크기(데스크톱 18px / ≤480px 16px). */
.service-price-note,
.service-price-value {
    font-weight: 400;
}
.service-price-value {
    font-size: 18px;
}
@media (max-width: 480px) {
    .service-price-value {
        font-size: 16px;
    }
}
@media (max-width: 768px) {
    :root {
        --svc-title-size: 36px;
    }
    /* 세로로 쌓이는 모바일 */
    .services-wrapper {
        grid-template-columns: minmax(0, 1fr);
    }
    .service-head {
        margin-bottom: 24px;
    }
    .service-col .service-price {
        padding-top: 28px;
    }
}

/* ==========================================
   Service Detail Sections (Design Strategy · Consulting /
   Branding / UI-UX / Visual Design / Marketing Design)
   ========================================== */

/* Filled CTA for the detail sections. Needs to read clearly at rest
   (not just on hover), so it's a solid fill rather than an outline or
   underline — but solid *white*, not the brand orange: high-contrast
   white-on-black is the restrained, editorial way to make a button
   unmissable without it reading as a loud sales-page CTA. Orange is
   saved for the hover state, where it adds personality without being
   the resting-state impression. */
.svc-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--text-white);
    color: var(--bg-color);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 15px 32px;
    flex-shrink: 0;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

.svc-cta::after {
    content: "↗";
    letter-spacing: normal;
}

.svc-cta:hover {
    background-color: var(--point-red);
    color: var(--point-red-contrast);
}

.svc-intro {
    max-width: 680px;
    margin-bottom: 64px;
}

.svc-intro-en {
    display: block;
    font-size: 20px;
    font-weight: 400;
    color: var(--text-white);
    line-height: 1.5;
    margin-bottom: 10px;
}

.svc-intro-ko {
    display: block;
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.6;
}

.svc-label {
    display: block;
    font-family: var(--font-main);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--point-red);
    margin-bottom: 28px;
}

.svc-label-sub {
    color: var(--text-gray);
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    margin-left: 8px;
}

/* Process — a connected timeline, not a grid of boxes: one continuous
   hairline runs behind all four steps, each step is marked by a node
   sitting on that line (a background-colored ring "cuts" the line at
   each node so they read as distinct stops along one path). */
.svc-process {
    margin-bottom: 72px;
}

.svc-process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 32px;
    row-gap: 32px;
    position: relative;
    margin-top: 6px;
}

/* 2026-09-14: "원이랑 선 가운데 정렬도 안되고, 반응형에 따라 이상하다" — 근본
   원인은 연결선이 .svc-process-steps 컨테이너에 딱 1개(::before, 고정
   top:6px)뿐이었다는 것. 4열/2열/1열로 열 수가 바뀌면 스텝들이 여러 행에
   나뉘어 배치되는데, 이 선은 항상 컨테이너 맨 위(=1행)에만 존재해서 2행부터는
   선 없이 점만 보였음(2열 그리드에서 03·04번 스텝). 컨테이너에 선 1개를 두는
   대신, 각 스텝(.svc-step)이 자기 자신의 선 조각을 갖게 하고 — 다음 컬럼과의
   32px 간격까지 오른쪽으로 마저 이어붙여서(right:-32px) 옆 스텝과 자연스럽게
   맞물리도록 함. 이러면 몇 열이든, 몇 행이든 각 행이 항상 자기 행의 선을
   갖게 되어 "2행부터 선이 없어지는" 문제 자체가 구조적으로 없어짐. */
.svc-step {
    position: relative;
    padding-top: 40px;
}

.svc-step::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 0;
    right: -32px;
    height: 1px;
    background: var(--border-color);
}

/* 한 행의 마지막 스텝은 다음 컬럼이 없으므로 간격만큼 더 이어붙이지 않음
   (그렇지 않으면 그리드 오른쪽 바깥으로 선이 삐져나감). 데스크탑 4열 기준
   기본값은 :last-child(4번째)만 해당 — 2열/1열일 때의 "행의 마지막"은 각
   너비별 미디어쿼리에서 다시 지정. */
.svc-step:last-child::before {
    right: 0;
}

.svc-step-node {
    position: absolute;
    top: 1px;
    left: -5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--point-red);
    z-index: 2;
    box-shadow: 0 0 0 6px var(--bg-color);
}

.svc-step-num {
    display: block;
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--text-gray);
    margin-bottom: 14px;
}

.svc-step-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-white);
    margin: 0 0 4px;
}

.svc-step-title-ko {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-gray);
    margin-bottom: 14px;
}

.svc-step-desc {
    font-size: 13px;
    color: var(--text-gray);
    line-height: 1.6;
    margin: 0;
}

/* Included / deliverables */
.svc-included-groups {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 60px;
}

/* Group title must clearly outrank the item names nested under it —
   giving it the same orange as .svc-label (Included/Process) collided
   with that top label, and shrinking it below the item names' size was
   an overcorrection that made it read as LESS prominent than its own
   children. Fixed by going bigger/bolder than the item names instead of
   relying on color: white, larger, capped+tracked+underlined. */
.svc-group-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-white);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 14px;
    margin-bottom: 20px;
}

.svc-included-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.svc-included-item {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
}

.svc-item-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-white);
}

.svc-item-desc {
    font-size: 14px;
    color: var(--text-gray);
    line-height: 1.5;
    margin: 0;
}

/* Footer bar — three equal panels (duration/price, target, CTA)
   separated by two vertical hairlines instead of one horizontal rule
   above the whole row; each panel gets its own generous padding so the
   dividers read as real column separators, not a stray line. */
.svc-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* stretch (not center) so every column takes the row's full height —
       otherwise the border-right dividers only span the text content's
       own height instead of the full row, and "centering" the text
       inside a content-sized box does nothing visible. */
    align-items: stretch;
    margin-top: 72px;
    padding: 40px 0;
    border-top: none;
}

.svc-price-block,
.svc-target-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* REQ-204: "Duration & Recommended for 상단 정렬 맞추기" (예전 center) */
    gap: 8px;
    padding: 0 40px 0 0;
    border-right: 1px solid var(--border-color);
}

.svc-target-block {
    padding-left: 40px;
}

.svc-cta {
    /* Fills the column width (minus the divider gap), button text
       centered inside it, responsive to whatever the column measures. */
    justify-self: stretch;
    align-self: center;
    justify-content: center;
    margin-left: 40px;
}

/* Price/duration: a single tight inline unit (no flex gap inside it —
   the "/" needs to sit snug against both sides to read as "per"). */
.svc-price-line {
    display: inline-flex;
    align-items: baseline;
}

.svc-duration {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-white);
}

/* Same size as .svc-duration on purpose — only weight/color mark this
   as the secondary unit, not a smaller font-size. */
.svc-duration-en {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-gray);
    letter-spacing: 0.02em;
    margin-left: 8px;
}

.svc-duration-sep {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-gray);
    margin: 0 10px;
}

.svc-target-label {
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--point-red);
}

.svc-target-label-ko {
    color: var(--text-gray);
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    margin-left: 6px;
}

.svc-target {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-white);
}

/* "What We Provide" — the label sits flush left at the same x=0 edge
   as everything else in this part of the page (h2 title, team-role
   names, the CEO & Creative Director line below) instead of being
   indented into a timeline-style content column.
   2026-09-06: 위(career-history의 --spacing-section)와 아래 간격이 완전히 같아서
   "구분이 안 된다"는 지적 — 아래 간격을 위보다 좁게 명시적으로 줄임(더 이상
   --spacing-section을 그대로 상속하지 않음). */
.provide-intro {
    margin-bottom: 0;
}

/* 2026-09-13(2차 수정): "밑에 얇은 stroke 화살표가 나타나면서 Consulting 제목까지
   이어지는 모션" — 두 가지 재지적:
   (1) "화살표가 멈춰있다" — 공용 .reveal 옵저버는 임계값 0.1(10%만 보여도 트리거)
   이라 화살표가 화면에 본격적으로 들어오기 한참 전에 이미 다 그려져버려서, 정작
   눈으로 볼 땐 "멈춰있는 완성된 화살표"처럼 보였음 — .reveal 공용 클래스를 떼고
   이 요소 전용 IntersectionObserver(임계값 0.6, script.js `initProvideArrow`)를
   따로 둬서 실제로 절반 이상 보일 때 그려지도록 타이밍을 맞춤.
   (2) "WHAT WE PROVIDE ↔ 다음과 같은... 문장 사이 행간(provide-label의 6px)만큼만
   띄우고 화살표가 바로 출발해야" — 캡션 밖 별도 블록이 아니라 .provide-copy 안,
   캡션 바로 아래로 이동(마크업 변경, index.html) + margin-top을 provide-label의
   margin-bottom(6px)과 동일하게. 전체 캡션→Consulting 거리(기존 340px)는
   유지하되, 이제 그 여백 전부를 화살표 SVG 자체 높이(320px)로 채움 —
   .provide-intro의 margin-bottom은 0으로, 이 커넥터가 사실상 유일한 여백 담당. */
.provide-arrow-connector {
    display: flex;
    /* 2026-09-13: "글자랑 화살표 사이 공간 살짝만 더 넓혀봐" — 6px(라벨→캡션 간격과
       동일)는 너무 붙어 보인다는 지적으로 16px로 소폭 확대. */
    margin: 16px 0 14px;
}

.provide-arrow-connector svg {
    /* 2026-09-13: "화살표 라인을 텍스트 왼쪽 끝에 정렬" — SVG 자체는 이미
       flex-start(왼쪽)로 붙어있었지만, 화살촉 좌우 대칭을 맞추려고 viewBox
       24px 폭 안에서 세로선을 정중앙(x=12)에 그려놔서 실제 "보이는 선"은
       컨테이너 왼쪽 끝에서 12px 안쪽에 떠 있었음 — SVG를 그만큼 왼쪽으로
       당겨서 선이 텍스트(캡션/라벨) 왼쪽 끝과 정확히 같은 x축에 오도록 함. */
    margin-left: -12px;
}

.provide-arrow-path {
    fill: none;
    stroke: var(--text-gray);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.3s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
}

.provide-arrow-connector.active .provide-arrow-path {
    stroke-dashoffset: 0;
}

.provide-row {
    border-top: 1px solid var(--border-color);
    padding-top: 28px;
}

.provide-label {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-white);
    margin: 0 0 6px;
}

.provide-caption {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-gray);
    line-height: 1.6;
    margin: 0;
    max-width: 640px;
}

/* CAREERHISTORY as a team, not one person. The eyebrow row states the
   shared credential (all three are SNU alumni) as plain running text.
   The 3-column grid below is left fully symmetric — that symmetry
   itself is what reads as "these three are peers." Each role gets a
   "1" count using .red-badge, the site's own existing badge system
   (already used next to .service-title), instead of an invented one. */
.team-lineup {
    margin-bottom: 40px;
}

.team-eyebrow {
    margin-bottom: 16px;
}

.team-eyebrow-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-gray);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.team-member {
    padding: 0 28px;
    border-right: 1px solid var(--border-color);
}

.team-member:first-child {
    padding-left: 0;
}

.team-member:last-child {
    border-right: none;
    padding-right: 0;
}

.team-role {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-white);
}

.career-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-white);
    /* 2026-09-04: 40px로 바꿨던 건 오진단(대표님 요청은 이 라벨 여백이 아니라 아래
       타임라인 행들의 줄간격이었음) — 원래 값으로 원복. */
    margin: 0 0 20px;
}

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

    /* 2열 그리드에서는 각 행의 "마지막"이 2번째·4번째 스텝 — 그 둘은 옆으로
       이어붙이지 않고 자기 컬럼에서 선을 끝냄(:last-child 기본 규칙은 4번째만
       잡아서 2번째가 빠져있었음). */
    .svc-step:nth-child(2n)::before {
        right: 0;
    }

    .svc-included-groups {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Stacks here rather than at 768px — between the two, "Brand &
       Visual Designer" plus its red-badge (12px+20px side margins)
       doesn't reliably fit a 3-way-equal column, and there was no
       coverage for that gap at all. */
    .team-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .team-member {
        padding: 0 0 12px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .team-member:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
}

@media (max-width: 768px) {
    /* 2026-09-14: 1열로 세로 쌓이는 모바일에서는 가로선 방식 자체가 안 맞음 —
       각 스텝의 가로 ::before(위에서 새로 만든 per-step 라인)를 세로선으로
       바꾸고, 다음 스텝과의 세로 간격(.svc-step의 padding-top:40px)만큼 아래로
       마저 이어붙여(bottom:-40px) 스텝들을 관통하는 하나의 세로선처럼 보이게
       함. 마지막 스텝은 더 이어붙이지 않도록 bottom:0.
       2026-09-14 추가 수정: 세로선 left값(5px)이 .svc-step-node의 left(-19px)와
       전혀 다른 기준으로 박혀있어서 원과 선의 x축 중심이 19px이나 어긋나 있었음
       (원 중심 = -19+5.5 = -13.5px, 선 중심 = 5+0.5 = 5.5px). 선이 원의 실제
       중심(-13.5px)을 지나가도록 left를 -14px로 맞춤. */
    .svc-process-steps {
        grid-template-columns: 1fr;
        /* row-gap은 데스크탑/태블릿 2~4열에서 줄과 다음 행 텍스트 사이 여백용으로
           추가한 것 — 모바일 1열은 세로선이 padding-top(40px)만큼을 bottom:-40px로
           직접 이어붙이는 방식이라 row-gap이 남아있으면 그만큼 선이 다음 스텝
           원까지 못 닿고 끊어짐. 모바일에서는 0으로 되돌림. */
        row-gap: 0;
        padding-left: 24px;
    }

    .svc-step::before {
        top: 0;
        bottom: -40px;
        left: -14px;
        right: auto;
        width: 1px;
        height: auto;
    }

    .svc-step:last-child::before {
        bottom: 0;
    }

    .svc-step-node {
        left: -19px;
    }

    .svc-included-item {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .svc-footer {
        grid-template-columns: 1fr;
        align-items: flex-start;
        gap: 24px;
    }

    .svc-price-block,
    .svc-target-block {
        padding: 0;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 24px;
    }

    .svc-cta {
        justify-self: stretch;
        margin-left: 0;
    }
}

.display-text {
    font-size: 11vw;
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    word-break: break-all;
    margin-bottom: 24px;
    will-change: transform;
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
    cursor: default;
}

.skill-text {
    font-size: 4vw;
    font-weight: 700;
    color: var(--text-white);
    text-transform: lowercase;
    letter-spacing: -0.05em;
    line-height: 1;
    font-family: var(--font-main);
    display: block;
    text-align: left;
}

/* ==========================================
   10. Timeline & Sections
   ========================================== */
section {
    margin-bottom: var(--spacing-section);
}

/* CAREERHISTORY is the first section after the info-header, so it has
   no preceding <section> to inherit the standard gap from — the
   info-header's own padding-bottom (60px) was filling in instead,
   which is why its "above" gap didn't match the other five. Give it
   the same gap explicitly. */
#career-history {
    margin-top: var(--spacing-section);
}

.section-header {
    margin-bottom: 96px;
    display: flex;
    align-items: center;
    /* 2026-09-04: 좌우 대칭 full-bleed였던 걸 "왼쪽은 본문과 맞추고 오른쪽만 뷰포트
       끝까지 확장"으로 바꿨던 적이 있었음(당시엔 JS 폰트 자동 크기 조절이 그 확장된
       폭을 기준으로 글자를 꽉 채웠음).
       2026-10-18: "섹션 타이틀 좌우 마진 아직도 다른데... G 우측 공간이랑 B 좌측
       공간 너비가 같아야 한다고. 여기 뿐만 아니라 모든 섹션 다" — 그 "오른쪽만 확장"
       설계 자체가 이번 재지적의 원인이었음(B 왼쪽은 본문 폭만큼, G 오른쪽은 뷰포트
       끝까지라 명백히 비대칭). 지금은 타이틀이 SVG 벡터 글리프(viewBox + width:100%)
       라 JS 폰트 측정 로직이 더 이상 존재하지 않아, 당시 그 로직 때문에 굳이 오른쪽만
       확장해야 했던 이유도 사라짐 — margin-right 확장을 완전히 제거해 타이틀도 다른
       본문처럼 그냥 .container 안에 평범하게 들어가도록 되돌림. 좌우 공간이 둘 다
       .container의 동일한 패딩(40px 기준)을 따르므로 구조적으로 항상 같아짐(한 클래스
       수정으로 전체 8개 타이틀 섹션에 동시 적용). */
    /* 2026-09-13(3차): overflow:hidden으로 disperse 모션을 가뒀더니, 그 하드 클리핑
       경계선 자체가 "이상한 사각형 틀"로 보인다고 재지적받아 제거함 — body에 이미
       overflow-x:hidden이 있어(위 75번째 줄) 가로 방향 진짜 화면 이탈은 어차피
       불가능하고, 세로 방향은 script.js의 MOTION_REF_PX(px 고정 캡)로 이동량 자체를
       적당히 억제하는 쪽으로 대응 — 컨테이너를 자르는 대신 애초에 크게 안 움직이게. */
    position: relative;
}


h2 {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-white);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* Full Width Title (Hybrid: Fifties VF + Scale) */
.full-width-title {
    /* 2026-09-04: 대표님이 Adobe Fonts 키트(use.typekit.net/sfs0qak.css)에 Fifties
       Variable(font-family "fifties-vf")을 추가 — 같은 키트 URL이라 CSS 링크는 그대로,
       실제로 쓸 폰트 이름만 slight-chance-mono에서 fifties-vf로 교체. 가변 폰트라
       font-weight 700(Bold)으로 지정. */
    font-family: "slight-chance-mono", 'Anton', sans-serif;
    font-size: min(43vw, 560px);
    /* 2026-09-03: 대표님 요청으로 기존(21.5vw/280px) 대비 2배 확대 */
    /* Limit max size to prevent overflow */
    font-weight: 700;
    /* 2026-09-13: "섹션 타이틀 행간도 자간처럼 간격 조정해" — REQ-110에서 자간을
       0(normal) -> 0.06em으로 넓혔던 것과 같은 방향으로, 멀티라인 타이틀(예:
       CAREER HISTORY, MARKETING DESIGN)이 줄 사이가 거의 안 떨어져 있던 걸
       완화하도록 0.85 -> 0.95로 소폭 확대. */
    line-height: 0.95;
    /* 2026-09-04(2차): Fifties VF일 땐 소문자 섞은 Title Case가 예뻐서 text-transform을
       껐었는데, 서체를 slight-chance-mono로 되돌리면서 "이 서체는 전체 대문자로 해야
       한다"는 요청 — 전역 h2{text-transform:uppercase} 규칙을 다시 그대로 적용받도록
       이 오버라이드 제거. */
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 20px 0;
    /* transform: scaleY(1); Removed: Controlled by JS on spans */
    transform-origin: center center;
    color: var(--text-white);
    display: block;
    white-space: nowrap;
    /* 2026-09-10: 대표님 요청으로 "지금의 두배"로 확대 — "normal"(0)엔 두 배할
       기준값이 없어서 0.06em으로 명시 지정. 숫자가 원하시는 것과 다르면 이 값만
       바꾸면 됨. */
    letter-spacing: 0.06em;
    overflow: visible;
    will-change: transform;
    transition: color var(--transition-slow);
    /* Color transition for theme toggle */
    /* Performance optimization */
}

/* 2026-09-10: 두 단어짜리 섹션 타이틀(예: MarketingDesign)을 항상 두 줄로 표기.
   전체 문구 폭이 아니라 더 긴 단어 하나의 폭만 컨테이너에 맞으면 되므로,
   전체 타이틀이 공유하는 폰트 크기(JS의 fitSectionTitles)를 훨씬 키울 수 있음
   — script.js의 measureFontSize가 이 구조를 보고 단어 단위로 측정함. */
.full-width-title[data-multiline="true"] {
    white-space: normal;
}

.full-width-title .title-word {
    /* inline-block(내용 크기만큼만 차지)이어야 JS가 단어 하나의 실제 폭을
       측정할 수 있음 — 줄바꿈은 위 HTML의 <br>이 항상 강제함. */
    display: inline-block;
    white-space: nowrap;
}

/* 2026-10-15(3차): 디더 노이즈(initTitleNoiseScroll, mask-image 기반)도
   "노이즈 전혀 안 보임" 재지적 이후 전면 폐기 — 대표님이 보내주신
   ShutterGlyphFooter React 컴포넌트(손으로 그린 기하학적 벡터 알파벳 +
   호버 플립 + 포인터 추적 셔터)를 "섹션 타이틀에, 가로 꽉 채워서"
   적용하는 걸로 교체. 순수 함수(글리프 좌표/레이아웃/셔터 수학)만
   React 없이 포팅(script.js의 initGlyphTitles 계열). 실제 텍스트는
   .sr-only-title로 접근성용으로 남기고, 보이는 건 전부 SVG 벡터 글자. */
.sr-only-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.glyph-title-wrap {
    display: block;
    width: 100%;
}

.glyph-row {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.glyph-row + .glyph-row {
    margin-top: 0.06em;
}

.glyph-row path,
.glyph-row polygon {
    fill: currentColor;
}

/* transform-box: fill-box — SVG 요소 기본 transform-origin은 viewport 좌상단
   기준이라 scaleY가 글자별이 아니라 전체 SVG 기준으로 뒤집힘. fill-box로
   각 글자 자신의 바운딩박스를 기준점으로 삼아야 "그 글자만" 뒤집힘. */
.glyph-g {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    cursor: pointer;
}

.glyph-g.is-flip {
    animation: glyphFlip 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes glyphFlip {
    0% {
        transform: scaleY(1);
    }

    45% {
        transform: scaleY(-1);
    }

    100% {
        transform: scaleY(1);
    }
}

/* 일반 글자: 획 하나하나를 감싸는 .glyph-frag를 매 프레임 JS가 커서와의
   거리에 따라 translate(클로징 모션도 동일 메커니즘 재사용).
   transition을 CSS로 주지 않는 이유: 매 프레임(60fps)마다 JS가
   already-eased 좌표를 직접 쓰기 때문 — CSS transition을 더 얹으면
   이중으로 지연되어 반대로 뚝뚝 끊겨 보임. */
.glyph-frag {
    transition: none;
}

/* 2026-10-16(7차): 모션 글자(.glyph-shutter) — 알파벳이 아니라
   ShutterGlyphFooter 레퍼런스의 셔터(날 3~4장이 피벗 한 점에서 만나는
   조형)를 그대로 복원. 날은 <polygon>이고, 피벗 좌표 자체가 커서를 따라
   움직이며 JS(initGlyphShutters)가 매 프레임 점 좌표를 다시 씀 —
   .glyph-frag와 달리 이동이 아니라 점 자체가 변하므로 별도 transition
   규칙 불필요(점 좌표 교체는 transition 대상이 아님). */
.glyph-shutter {
    cursor: pointer;
}

.glyph-shutter polygon {
    transition: none;
}

.timeline-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    /* 2026-09-04: 사이트 전체 여백은 4px 배수 스케일(16/20/24/32/40...)인데 여기만
       10px(4px 배수 아님)로 하드코딩돼 있었음 — 디자인 시스템 토큰(--spacing-item,
       4px 배수인 12px로 함께 수정)을 실제로 사용하도록 변경. */
    margin-bottom: var(--spacing-item);
    align-items: baseline;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--spacing-item);
    transition: border-color var(--transition-normal);
}

.timeline-row:hover {
    border-color: rgba(255, 255, 255, 0.28);
}

.timeline-row:last-child {
    border-bottom: none;
}

.year-col {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-gray);
}

.content-col h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 3px;
}

.content-col h3:last-child {
    margin-bottom: 0;
}

/* CAREERHISTORY previously relied on the site-wide [data-lang] toggle
   (.ko/.en/.cn) to show one language at a time — but no language
   switcher UI exists anywhere on this page, so anything in .en/.cn was
   permanently hidden. The timeline now runs English-only as plain
   content-col h3 text, decoupled from that dead toggle entirely. */

.content-col ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.content-col li {
    position: relative;
    color: var(--text-gray);
    font-weight: 300;
    font-size: 15px;
    transition: all 0.2s;
    padding-left: 0;
}

.content-col li::before {
    content: "-";
    margin-right: 8px;
    color: var(--text-gray);
}

.content-col li:hover {
    color: var(--text-white);
    transform: translateX(5px);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

.sub-date {
    display: inline-block;
    width: 50px;
    font-variant-numeric: tabular-nums;
    color: var(--text-gray);
    font-size: 0.9em;
    font-weight: 500;
}

/* ==========================================
   11. Film Strip
   ========================================== */
.lectures-film-strip {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-top: 60px;
    margin-bottom: 80px;
    overflow: hidden;
    height: 45vh;
}

.film-strip-inner {
    display: flex;
    gap: 30px;
    padding: 20px 0;
    will-change: transform;
    height: 100%;
    width: max-content;
    /* Ensure container expands for scrolling */
}

.film-strip-inner img {
    height: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(1) opacity(0.7);
    transition: filter var(--transition-slow), opacity var(--transition-slow);
    flex-shrink: 0;
}

.film-strip-inner img:hover {
    filter: grayscale(0) opacity(1);
}

/* 클라이언트 후기 필름스트립 — 위 .lectures-film-strip과 같은 스크롤-연동 좌우 이동 메커니즘
   (id="film-strip-container"/"film-strip-inner", script.js initFilmStrip)을 텍스트 카드에 재사용.
   드래그로 가로 스크롤은 안 되고, 세로 스크롤에 맞춰 자동으로 흐르는 것만 가능. */
.testimonial-strip {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-top: 56px;
    margin-bottom: 24px;
    overflow: hidden;
    /* 2026-09-04: 예전엔 padding: 0 calc(50vw - 50%)로 .container 폭만큼 좌우 여백을
       두고 있었음 — 이게 스크롤 위치와 무관하게 "카드 왼쪽에 항상 빈 공간"으로 보이던
       진짜 원인(초반 오프셋 문제가 아니라 구조적 패딩 문제였음). 제거해서 카드가 뷰포트
       끝까지 진짜로 꽉 차게 스크롤되도록 함. */
    /* 2026-10-15: "좌우에 뭐가 더 없어보여" — 카드가 5장뿐이라 스크롤에 따른
       가로 이동폭(maxMove)이 작아서, 끝 카드가 화면 가장자리에서 완전히 잘려
       보이는 순간이 거의 없음(움직임만으로는 "더 있다"는 암시가 충분히 안
       전달됨). 양쪽 끝에 고정된 페이드 마스크를 추가 — 스크롤 위치와
       무관하게 항상 카드가 가장자리에서 흐려지며 끊겨 보여서 "이 너머에도
       더 있다"는 인상을 상시 유지. (09-04에 반려된 그라디언트 "배경"과는
       다른 것 — 그건 카드 뒤에 깔린 장식용 색 그라디언트였고, 이건 투명도
       마스크로 콘텐츠 자체를 가장자리에서 페이드아웃시키는 것.) svc-label은
       왼쪽 인셋(40px~) 안쪽이라 이 48px 페이드 폭 밖에 있어 영향 없음.
       */
    -webkit-mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
}

/* 2026-10-15: "제목 좌측 정렬 그리드 벗어나있어"(Partner Feedback 라벨) —
   .testimonial-strip 자체가 풀블리드(width:100vw, 음수 margin-left)라
   svc-label도 그 풀블리드 왼쪽 끝(뷰포트 0)에서 시작하고 있었음. 본문
   컨테이너(.container, max-width:1400px + padding 40px)가 실제로 시작하는
   x좌표를 동일한 계산식으로 복제해서 라벨만 그 지점까지 들여씀 — 카드
   스크롤 영역 자체는 계속 풀블리드로 둠(이 패딩은 라벨에만 적용).
   카드 쪽은 여백 제거(위 2026-09-04 수정)가 그대로 유지돼야 하므로
   .testimonial-strip-inner에는 적용하지 않음. */
.testimonial-strip .svc-label {
    padding-left: max(40px, calc((100vw - 1400px) / 2 + 40px));
}

/* 11차(2026-09-04, 최종): 그라디언트/노이즈로 여러 차례 시행착오 끝에 결국 반려 —
   그라디언트 배경 자체를 없애고, 그 이전(REQ-080 이전) "위에 하늘색 스트로크만 있던"
   가장 단순한 버전으로 롤백. 배경 없음, 순수 border-top 라인만. */
.testimonial-strip-inner {
    display: flex;
    gap: 24px;
    padding: 28px 0 36px;
    will-change: transform;
    width: max-content;
}

.testimonial-card {
    position: relative;
    flex-shrink: 0;
    width: 300px;
    padding: 24px 20px 20px;
    border-top: 2px solid var(--point-red);
}

.testimonial-quote {
    font-size: 14px; /* REQ-204: "후기 글 텍스트 위계가 너무 높음 -> 위 included 본문에 폰트크기만 맞추기" (.svc-item-desc 14px) */
    font-weight: 400;
    color: var(--text-white);
    line-height: 1.55;
    margin: 0 0 20px;
}

.testimonial-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 4px;
}

.testimonial-tag {
    display: block;
    font-size: 11px;
    color: var(--text-gray);
}

/* ==========================================
   12. Animations
   ========================================== */
.scramble-scroll {
    opacity: 0;
}

.scramble-scroll.scrambled-done {
    opacity: 1;
    transition: opacity var(--transition-normal);
}

.reveal {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(12px);
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

/* Scramble Helper — 2026-09-03: 이 회색(#444)이 "쥐색"으로 지적받은 진짜 범인이었음
   (.acronym-fill은 다 채워진 후 상태색일 뿐, 타이핑/스크램블 도중 깜빡이는 글자는
   전부 이 .dud 색을 씀). 화이트 계열로 통일. */
.dud {
    color: rgba(255, 255, 255, 0.32);
    opacity: 0.7;
}

/* BDI Studio Acronym Reveal (skill-text special item) */
.skill-text.bdi-mode {
    text-transform: none;
}

.acronym-fill {
    /* 2026-09-03: var(--text-gray)는 "쥐색"처럼 배경 톤과 안 맞는다는 지적 —
       회색 계열 대신 화이트 반투명(디밍)으로 바꿔 블루 배경과 같은 색상군 유지 */
    color: rgba(255, 255, 255, 0.32);
    font-weight: 500;
}

/* Global Transitions for Theme Change */
h1,
h2,
h3,
.role,
.skill-text,
.footer-logo,
.contact-value,
.content-col li,
.timeline-row,
.lang-btn,
.social-icon path {
    transition: color var(--transition-slow), border-color var(--transition-slow), fill var(--transition-slow);
}

/* ==========================================
   13. Footer
   ========================================== */
/* 2026-09-04: "쓸데없이 구분선 사용하지 말고 최대 3행에다 전부" — border-top 구분선
   제거하고, 브랜드+링크(1행) / 이메일·주소(2행) / 저작권(3행)으로 압축. */
footer {
    padding: 40px 0 32px;
    border-top: 1px solid var(--border-color);
    margin-top: 60px;
    transition: border-color var(--transition-slow);
}

/* 2026-09-04: Inquire 페이지에서 Send Inquiry 버튼과 푸터가 너무 붙어있다는 지적 —
   해당 페이지에서만 간격을 3배로. */
.inquire-body footer {
    margin-top: 180px;
}

/* 2026-09-04(2차): "좌측이랑 중앙 정보 BDI Studio 밑으로 옮겨" — 브랜드/연락처를
   따로 나란한 열로 두지 않고 하나의 블록(.footer-main)으로 세로로 묶어서, 링크
   내비게이션과 2열로만 배치. */
.footer-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* 2026-09-04(3차): copyright를 footer-side 안으로 옮기고 이 행을 stretch시켜서
       footer-side가 footer-main과 같은 높이를 갖게 함 — copyright를 footer-side
       하단에 붙이면 자연히 footer-main의 마지막 줄(주소)과 같은 선에 정렬됨. */
    align-items: stretch;
    gap: 24px;
    margin-bottom: 28px;
}

.footer-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
}

.footer-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-brand {
    font-weight: 800;
    color: var(--text-white);
    letter-spacing: -0.02em;
    font-size: 18px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-contact a,
.footer-address {
    font-size: 13px;
    color: var(--text-gray);
}

.footer-contact a {
    transition: color var(--transition-normal);
}

.footer-contact a:hover {
    color: var(--point-red);
}

.footer-links {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
}

.footer-links a {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-gray);
    transition: color var(--transition-normal);
}

.footer-links a:hover {
    color: var(--text-white);
}

@media (max-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .footer-links {
        justify-content: flex-start;
    }

    .footer-side {
        align-items: flex-start;
    }
}

.copyright {
    font-size: 12px;
    color: var(--text-gray);
    text-align: right;
}

@media (max-width: 640px) {
    .copyright {
        text-align: left;
    }
}

/* ==========================================
   14. Responsive - Tablet (1024px)
   ========================================== */
@media (max-width: 1024px) {
    h1.main-title {
        font-size: 12vw;
    }

    .container {
        padding: 0 32px;
    }

    .timeline-row {
        grid-template-columns: 140px 1fr;
    }

    .contact-grid {
        gap: 16px 40px;
    }

    .skill-text {
        font-size: 5vw;
    }

    /* 2026-09-13: "Inquiry, Email, Seoul National ~ 이 왼쪽으로 올 때 우측 정렬이
       아니라 좌측 정렬" — role-wrapper가 flex-wrap으로 줄바꿈되는 지점은 768px보다
       넓은 이 구간(1024px 이하)에서 이미 시작되는데, 좌측 정렬 전환은 768px
       미디어쿼리에만 있어서 그 사이 구간에서 contact-grid만 계속 우측 정렬로
       남아 어색해 보였음 — 여기도 동일하게 좌측 정렬 적용. */
    .contact-col {
        align-items: flex-start;
    }

    .contact-grid {
        text-align: left;
    }
}

/* ==========================================
   15. Responsive - Mobile (768px)
   ========================================== */
@media (max-width: 768px) {
    h1.main-title {
        font-size: 11vw;
        /* Reduced from 14vw */
        line-height: 0.9;
        word-break: break-word;
    }

    .role-wrapper {
        flex-direction: column;
        gap: 40px;
    }

    .contact-col {
        align-items: flex-start;
    }

    .contact-grid {
        text-align: left;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 2026-09-13: "이 경우엔(좁은 화면) tailored에서 줄바꿈하지 말고 to every와도
       이어지게, 적당한 위치에서 자연스럽게 줄바꿈되도록" — 강제 블록 줄바꿈이
       이 폭에서는 "TAILORED"만 혼자 한 줄에 남아 어색했음(다음 단어 TO가 이어
       붙기엔 폭이 부족). 좁은 화면에서만 강제 줄바꿈을 풀어 자연 줄바꿈에 맡김 —
       넓은 화면(768px 초과)에서는 기존처럼 tailored 앞에서 깔끔하게 끊기는 모습 유지. */
    .tagline-break {
        display: inline;
    }

    .services-wrapper {
        flex-direction: column;
        padding-top: 80px;
        gap: 40px;
    }

    .service-col:first-child {
        padding-right: 0;
    }

    .service-col-right {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid var(--border-color);
        padding-top: 40px;
    }

    .service-title {
        font-size: 36px;
    }

    .timeline-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-bottom: 30px;
    }

    .container {
        padding: 0 24px;
    }

    header {
        padding-top: 140px;
    }

    .skill-text {
        font-size: 8vw;
    }

    .manifesto-text {
        font-size: 8vw;
        line-height: 0.9;
        padding: 0 10px;
    }
}

/* ==========================================
   16. Responsive - Small Mobile (480px)
   ========================================== */
@media (max-width: 480px) {
    h1.main-title {
        font-size: 14vw;
        margin-bottom: 40px;
    }

    .container {
        padding: 0 16px;
    }

    header {
        padding-top: 100px;
        padding-bottom: 60px;
    }

    .tagline-en {
        font-size: 18px;
    }

    .tagline-ko {
        font-size: 13px;
    }

    .contact-label {
        font-size: 10px;
    }

    .contact-grid {
        gap: 16px;
    }

    .service-head {
        flex-wrap: wrap;
        gap: 12px;
    }

    .service-list li {
        font-size: 16px;
    }

    .service-cta {
        font-size: 13px;
    }

    .content-col h3 {
        font-size: 14px;
        font-weight: 600;
    }

    .content-col li {
        font-size: 13px;
    }

    .year-col {
        font-size: 14px;
    }

    .skill-text {
        font-size: 10vw;
    }

    .theme-toggle {
        bottom: 20px;
        right: 20px;
        padding: 6px 12px;
        font-size: 11px;
    }

    .red-badge {
        font-size: 11px;
        padding: 3px 8px 3.5px;
        margin-left: 8px;
        margin-right: 0;
    }

    .red-badge.large {
        font-size: 16px;
        height: 28px;
    }

    section {
        margin-bottom: 100px;
    }

    /* #career-history and .provide-intro aren't <section> elements, so
       the rule above doesn't reach them — without this they'd keep the
       full --spacing-section (160px) while every actual section shrinks
       to 100px, breaking the "every title gets the same gap" rule that
       REQ-047/048 established. */
    #career-history {
        margin-top: 100px;
    }

    .provide-intro {
        margin-bottom: 100px;
    }

    footer {
        flex-direction: column;
        gap: 16px;
        text-align: left;
        padding: 40px 16px;
    }

    .manifesto-text {
        font-size: 14vw;
        line-height: 0.9;
    }
}

/* ==========================================
   17. Responsive - Large Desktop (1920px+)
   ========================================== */
/* 2026-10-18: "아이맥 전체화면... 좌우 마진이 왜 달라? BIO 본문... 글자크기가
   확 커지네" — 이 블록이 훨씬 이전(.container를 1400px로 고정하기 전) 시절에
   만들어진 "큰 화면에선 더 키운다" 규칙이었는데, 그 뒤로 .container가
   1400px로 확정되고(지금 사이트 전역이 이 1400px를 기준으로 패딩 계산식을
   짜 둠 — 예: .testimonial-strip .svc-label의 calc((100vw - 1400px)/2 + 40px))
   .content-col h3/li도 14px/15px로 자리 잡았는데, 이 블록만 그 사실을 모른 채
   그대로 남아 1920px 이상 화면에서 조용히 되살아나고 있었음 — 실제 증상:
   1) .container가 1600px로 넓어지면서 그 안의 본문(BIO 등)은 더 벌어진
   중앙정렬 여백을 갖게 되는데, 스크롤 시 고정되는 로고(.is-stuck)는 여전히
   예전 고정폭 40px 패딩이라 서로 다른 여백처럼 보임(실측: 2560px 화면에서
   로고 왼쪽 끝 40px vs 본문 520px). 2) .content-col h3/li가 14px/15px ->
   20px/16px로 커짐. 둘 다 재현 확인 후 원인이 된 세 줄만 제거 — 나머지
   규칙(h1.main-title/.role/.skill-text/.timeline-row/header)은 이번 재지적과
   무관해 그대로 둠. */
@media (min-width: 1920px) {
    h1.main-title {
        font-size: 8vw;
    }

    .role {
        font-size: 26px;
    }

    .skill-text {
        font-size: 3.5vw;
    }

    .timeline-row {
        grid-template-columns: 200px 1fr;
    }

    header {
        padding-top: 260px;
        padding-bottom: 120px;
    }
}

/* Floating Badge for Titles */
.floating-badge {
    position: absolute;
    /* 2026-10-15: top:54%/left:50%(centered) 값은 REQ-140 이전, 섹션 타이틀이
       측정 버그로 100px에 눌려있던 시절 그 짧은 높이 기준으로 맞춰졌던 좌표 —
       REQ-140에서 타이틀이 제 크기(240px대)로 복원되자 뱃지가 글자 한가운데를
       가로지르는 자리로 밀려나 "생뚱맞은 위치"가 됨. 중앙 오버레이 대신 우상단
       코너 배지로 변경 — 타이틀 크기와 무관하게 항상 자연스러운 위치 유지. */
    top: 8%;
    right: 1%;
    background-color: var(--point-red);
    color: var(--point-red-contrast);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    padding: 0.3em 0.8em;
    border-radius: 999px;
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    transition: all 0.3s ease;
}

/* Vibecoding Gallery - Interactive Grid */
.vibecoding-gallery {
    display: grid;
    /* Mobile: 2 columns */
    grid-template-columns: repeat(2, 1fr);
    gap: 3vw;
    margin-top: 10vh;
    margin-bottom: 20vh;
    padding: 0 4vw;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .vibecoding-gallery {
        /* PC: 4 columns */
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5vw;
    }
}

/* Gallery Item Structure Update */
.gallery-item {
    display: block;
    position: relative;
    text-decoration: none;
    transform: translateY(var(--parallax-y, 0));
    will-change: transform;
    transition: transform 0.1s linear, filter 0.5s ease, opacity 0.5s ease;
}

/* Image Wrapper */
.thumb-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    /* 2026-10-15: "커서 갖다대기 이전 카드 테두리 컬러 우리 컬러시스템에
       어울리게 보완해" — 배경 #141A3D(남색)와 테두리 rgba(255,255,255,0.12)
       둘 다 지금 컬러 시스템(--bg-color 무채색 #181818, --border-color)과
       무관한 하드코딩값이었음(과거 "배경 블루" 시절의 잔재로 추정, 그때 이미
       --bg-color 자체는 무채색으로 바뀌었는데 여기만 안 따라옴). 둘 다
       사이트 전역에서 쓰는 변수로 교체. */
    background: rgba(255, 255, 255, 0.04);
    aspect-ratio: 8 / 11;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    margin-bottom: 15px;
    /* Spacing for text */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.thumb-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 1, 0.3, 1);
}

/* Meta Info (Below Image) */
.meta-info {
    text-align: left;
    padding: 0 4px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.meta-info h3 {
    /* 2026-10-15(재검토): 섹션 타이틀 자체가 (REQ-149) 폰트가 아니라 벡터
       글리프(SVG 직접 그리기)로 바뀌면서, 여기서 font-family를 맞추는 것
       만으로는 더 이상 "통일"이 성립하지 않게 됨. 카드 제목까지 벡터로
       바꾸는 안은 "승낙한 적 없다"고 반려 — 폰트는 유지하되, 기존
       slight-chance-mono(Adobe Fonts, 아티팩트 CSP상 로드 불가 — 항상
       Anton 폴백) 대신 그 폴백 자체를 교체.
       1차(Archivo Black, 900 고정): Anton보다는 나았지만 "섹션 타이틀보다
       볼드해보인다"는 재지적 — Archivo Black은 단일 900 굵기뿐이라 벡터
       글리프(획 두께가 전체 폭의 약 20%, 아주 두껍지는 않은 수준)보다
       체감 무게가 훨씬 무거웠음.
       2차: 넓은 굵기 범위를 가진 Big Shoulders Display(Google Fonts)로
       교체 — 같은 콘덴스드·기하학적 계열이면서 700 굵기로 지정해 벡터
       글리프의 획 두께감에 더 가깝게 맞춤. */
    font-family: "Big Shoulders Display", 'Anton', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    margin: 0;
    line-height: 0.95;
    color: var(--text-white);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    transition: color 0.3s ease;
}

.meta-info p {
    font-family: 'Helvetica', sans-serif;
    font-size: 0.85rem;
    color: var(--text-gray);
    margin-top: 10px;
    line-height: 1.4;
    font-weight: 300;
    /* Limit lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hover Interactions */
.vibecoding-gallery:hover .gallery-item {
    opacity: 0.4;
    filter: grayscale(100%);
    transform: scale(0.98) translateY(var(--parallax-y, 0));
}

.vibecoding-gallery .gallery-item:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.02) translateY(var(--parallax-y, 0));
    z-index: 10;
}

.gallery-item:hover .thumb-wrapper {
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-item:hover .meta-info {
    opacity: 1;
}

.gallery-item:hover .meta-info h3 {
    color: var(--point-red);
}

/* Closing Section (The Cinematic Wall) — 2026-10-15: 숫자 카운터를 벡터
   글리프 클로징 문구로 전면 교체하며 클래스명도 실체에 맞게 career-monument
   -> closing-section, monument-timer(숫자 전용 레이아웃) 제거. */
.closing-section.reveal-section {
    opacity: 0;
    transform: translateY(15vh);
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.5s ease;
    will-change: transform, opacity;
}

.closing-section.reveal-section.active {
    opacity: 1;
    transform: translateY(0);
}

.closing-section {
    position: relative;
    padding: 5vh 4vw;
    background-color: transparent;
    overflow: hidden;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.monument-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.monument-header {
    position: relative;
    width: 100%;
    z-index: 10;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

.monument-header .relevance-message {
    font-size: 11px;
    opacity: 1;
    color: var(--text-white);
    letter-spacing: 0.3em;
}

.closing-glyph {
    width: 100%;
    cursor: pointer;
}

/* 2026-10-18: "히어로 모션 응용 버전을 넣으라고" — 벡터 글리프 SVG 대신
   히어로 배경과 같은 <canvas> 점·선 네트워크로 교체(initClosingMotion). */
.closing-glyph canvas {
    display: block;
    width: 100%;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .closing-section {
        padding: 15vh 4vw;
    }

    .monument-header .relevance-message {
        font-size: 9px;
        max-width: 90vw;
    }
}

/* ==========================================
   16. Intro Loading Sequence
   ========================================== */




/* Light Theme overrides */
.light-theme .closing-section {
    border-top-color: rgba(0, 0, 0, 0.05);
}

/* ==========================================
   13. Inquire Pages (standalone — inquire-consulting.html / inquire-solution.html)
   ========================================== */
.inquire-body {
    min-height: 100vh;
    background-color: var(--bg-color);
    color: var(--text-white);
}

.inquire-shell {
    max-width: 880px;
    margin: 0 auto;
    padding: 64px 40px 120px;
}

.inquire-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-gray);
    text-decoration: none;
    margin-bottom: 56px;
    transition: color var(--transition-normal);
}

.inquire-back:hover {
    color: var(--text-white);
}

.inquire-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--point-red);
    margin-bottom: 18px;
}

/* 2026-09-06: "Design Strategy · Consulting"에서 줄바꿈이 "·" 바로 앞이나 뒤에서
   일어나면, 가운뎃점이 줄 끝/줄 시작에 혼자 남아 그 앞뒤 공백만 유독 넓어 보이는
   문제(홈 .service-title/Inquire .inquire-title 둘 다) — "·"와 그 뒤 단어를 하나의
   단위로 묶어 줄바꿈이 그 사이에서 일어나지 않도록 함. */
.nowrap-unit {
    white-space: nowrap;
}

.inquire-title {
    font-family: "slight-chance-mono", 'Anton', sans-serif;
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1.05;
    margin-bottom: 20px;
    text-wrap: balance;
    /* h1이라 전역 h2 규칙이 안 걸림 — slight-chance-mono는 전체 대문자여야 해서 명시 */
    text-transform: uppercase;
    /* 2026-09-13(2차 수정): 홈 섹션 타이틀과 같은 em 비율(0.06em)을 썼지만, 실제
       렌더링된 폰트 크기가 홈(228px대)과 Inquire(64px)에서 10배 가까이 차이 나다
       보니 "같은 6% 비율"이어도 작은 크기에서는 자간이 상대적으로 훨씬 넓어
       보임(자간의 광학적 크기 비선형성 — 대문자 디스플레이 서체에서 흔한 현상).
       대표님이 "Inquiry 쪽이 상대적으로 더 넓어 보인다"고 지적해 실측(스크린샷+
       computed style) 후 확인된 문제라 값을 낮춤. */
    letter-spacing: 0.03em;
}

.inquire-sub {
    /* 2026-09-04: 560px가 수동 줄바꿈(<br>)한 문장 길이랑 안 맞아서 의도치 않은 추가
       줄바꿈이 생김 — 각 문장이 한 줄에 온전히 들어가도록 폭을 넓힘. */
    max-width: 720px;
    font-size: 15px;
    color: var(--text-gray);
    line-height: 1.6;
    margin-bottom: 56px;
}

/* 2026-09-04 최종: "2단"은 페이지를 좌우로 쪼개는 게 아니라 담당자명/회사명/이메일/
   연락처 4개 필드만 2열로 묶으라는 뜻이었음(.inquire-field-row/.inquire-field-col,
   아래) — 관심 있는 항목/현재 상황/참고자료/Send는 전부 폭 전체를 쓰는 단일 컬럼으로
   위아래로 쌓임. 예전 페이지 좌우 분할 클래스(.inquire-columns 등)는 폐기. */
#inquire-columns > div:first-child {
    margin-bottom: 48px;
}

.inquire-context {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    padding: 24px 0;
    margin-bottom: 48px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.inquire-context-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.inquire-context-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-gray);
}

.inquire-context-value {
    font-size: 15px;
    font-weight: 700;
}

.inquire-context-sub {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-gray);
}

.inquire-section-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-gray);
    margin-bottom: 16px;
}

/* Toggle — segmented control. Consulting page uses it multi-select
   (checkbox semantics, several can stay active); Solution page uses it
   single-select (radio semantics, picking one clears the rest) — same
   markup/classes, the page's own JS decides which behavior to wire up. */
.inquire-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 48px;
}

.toggle-option {
    display: inline-flex;
    align-items: center;
    padding: 12px 20px;
    background: transparent;
    border: 1px solid var(--border-color);
    /* 2026-09-03: Inquire 버튼(.inquire-submit, radius 없음)과 통일 — 기존 999px(완전
       라운드 필)에서 각진 형태로 변경. */
    border-radius: 0;
    color: var(--text-gray);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-main);
    cursor: pointer;
    transition: border-color var(--transition-normal), color var(--transition-normal), background var(--transition-normal);
}

.toggle-option:hover {
    border-color: var(--text-white);
    color: var(--text-white);
}

.toggle-option.active {
    background: var(--point-red);
    border-color: var(--point-red);
    color: var(--point-red-contrast);
}

.inquire-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* 2026-09-04: "2단"의 의미를 필드 로우별 좌우 페어링이 아니라, 왼쪽 열에 담당자명+
   이메일을 세로로, 오른쪽 열에 회사명+연락처를 세로로 묶는 것으로 재구성 —
   .inquire-field-row가 두 개의 .inquire-field-col을 좌우로 배치. */
.inquire-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.inquire-field-col {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.inquire-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inquire-field label {
    /* 2026-09-04: 12px -> 14px, "질문 텍스트가 너무 작다" 피드백 */
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-gray);
}

.required-mark {
    color: var(--point-red);
    margin-left: 3px;
}

.inquire-field-hint {
    font-size: 12px;
    color: var(--text-gray);
}

.inquire-field input,
.inquire-field textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-white);
    font-family: var(--font-main);
    font-size: 15px;
    padding: 10px 2px;
    transition: border-color var(--transition-normal);
}

.inquire-field textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.5;
}

.inquire-field input:focus,
.inquire-field textarea:focus {
    outline: none;
    border-color: var(--point-red);
}

.inquire-field input::placeholder,
.inquire-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* 네이티브 브라우저 검증 팝업 대체 — required 필드가 비어있으면 이 클래스가 붙음
   (2026-09-03, inquire 페이지 JS에서 토글). */
.inquire-field.inquire-field-error input,
.inquire-field.inquire-field-error textarea {
    border-bottom-color: #ff6b6b;
}

.inquire-field.inquire-field-error label {
    color: #ff6b6b;
}

.inquire-submit-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 16px;
}

.inquire-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--text-white);
    color: var(--bg-color);
    border: none;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 16px 36px;
    cursor: pointer;
    font-family: var(--font-main);
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

.inquire-submit::after {
    content: "↗";
    letter-spacing: normal;
}

.inquire-submit:hover {
    background-color: var(--point-red);
    color: var(--point-red-contrast);
}

/* 제출 완료 화면 — 기존 "메일 앱이 열리며..." 안내문 + 토스트 대신, Formspree로 실제
   전송이 끝나면 폼 영역을 이 화면으로 교체 (2026-09-03, "send 하고 난 뒤... 완료 화면도
   디자인해" 요청). */
.inquire-success {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 0 60px;
}

.inquire-success.visible {
    display: flex;
}

.inquire-success-mark {
    width: 56px;
    height: 56px;
    border: 2px solid var(--point-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--point-red);
    margin-bottom: 32px;
}

.inquire-success-title {
    font-family: "slight-chance-mono", 'Anton', sans-serif;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.05;
    margin-bottom: 16px;
}

.inquire-success-sub {
    font-size: 15px;
    color: var(--text-gray);
    line-height: 1.6;
    max-width: 480px;
    margin-bottom: 40px;
}

@media (max-width: 640px) {
    .inquire-shell {
        padding: 40px 24px 80px;
    }

    .inquire-field-row {
        grid-template-columns: 1fr;
    }
}
/* REQ-165 (2026-10-20, 아티팩트 코멘트): "Design Strategy 행에다가 표시 (단어 끝나는 위치가
   아니라 첫째 행에 중앙 정렬)" — 제목이 2줄로 줄바꿈되면 38 뱃지가 둘째 줄 끝("Consulting" 뒤)에
   붙던 것을, 첫째 줄("Design Strategy") 끝에 그 줄 높이 가운데로 고정. 위치는 script.js의
   pinServiceBadges()가 첫 줄 실제 좌표를 재서 지정(한 줄일 땐 기존과 같은 자리). */
.service-title {
    position: relative;
}
.service-title .red-badge.is-pinned {
    position: absolute;
    margin: 0;
    transform: none;
}

/* REQ-166 (2026-10-20, 아티팩트 코멘트): "여기가 1열일 때는 '스타트업 단계별로 ~ 도출합니다.'
   이부분이랑 가로 폭 맞추기" — Consulting의 제공 항목은 그룹 하나뿐인 1열(.svc-included-group-flat)인데,
   2열 그리드의 왼쪽 칸에 들어가 화면 폭마다 630/480/836px 등 인트로(.svc-intro, 최대 680px)와 폭이
   제각각이었음 → 그리드 전체 폭을 쓰되 인트로와 같은 최대 폭으로 맞춤. */
.svc-included-group-flat {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 680px;
}

/* REQ-168 (2026-10-20): 섹션 타이틀 글자 호버 = 가운데(허리선)에서 위/아래로 갈라짐.
   "알파벳들이 세로로 뱅글뱅글 도는게 아니라 중앙 갈라지는 모션" — 세로 플립(glyphFlip) 폐기.
   위 반쪽은 왼쪽 위로, 아래 반쪽은 오른쪽 아래로 살짝 밀려 대각선으로 벌어지고, 커서가
   나가면 다시 붙음. 단위는 SVG 사용자 단위(글자 높이 100 기준). */
.glyph-half {
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* REQ-171: 호버 시 고정 방향 이동(가로 허리선) 대신 script.js attachGlyphSlice()가 커서 경로를 칼선으로 잘라 인라인으로 이동시킴 */
.glyph-g.is-flip {
    animation: none;
}
/* REQ-168: 갈라질 때 위/아래 반쪽이 글자 상자(viewBox 높이=글자 높이) 밖으로 7단위씩 나가므로 잘리지 않게 */
.glyph-row {
    overflow: visible;
}

/* REQ-177 (2026-10-21): 클로징 위 문구 = 상단과 같은 BDI Studio 약어 모션(히어로 소형 카피와 같은 크기) */
.monument-header .skill-text.bdi-motion-closing {
    font-size: 16px; /* REQ-181: 11px → REQ-190: 13px → REQ-204(2026-10-23): "살짝 키웠었는데 왜 반영이 안돼보이는지?" 13px은 차이가 안 보여 16px */
    text-align: center;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .monument-header .skill-text.bdi-motion-closing { font-size: 12px; }
}

/* REQ-183: 섹션 타이틀 글자 = Roboto Flex <text>(가변 축은 인라인 font-variation-settings) */
.glyph-row text {
    fill: currentColor;
    font-family: 'Roboto Flex', sans-serif;
}

/* REQ-198: 섹션 타이틀 썰기 K2(캔버스). 엔진은 --fg/--bg로 글자색을 읽음 → 사이트 테마 변수에 연결 */
body { --fg: var(--text-white); --bg: var(--bg-color); }
.full-width-title .t-title { display: block; width: 100%; touch-action: pan-y; }
.full-width-title .t-row { display: block; width: 100%; }
.full-width-title .t-row + .t-row { margin-top: 0.06em; } /* 기존 .glyph-row + .glyph-row 와 같은 줄 간격 */
.full-width-title .t-row canvas { display: block; }

/* ==========================================================================
   REQ-208 (2026-10-23): QA 점검(bdi_qa_20261022.md) 버그 일괄 수정 — "이건 왜 해결 안해"
   ========================================================================== */
/* QA#1 모바일 VIBE CODING 갤러리 가로 넘침: 1fr 열 최소폭이 콘텐츠 폭이 되어 375에서 416px로 넘침 */
.vibecoding-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vibecoding-gallery > * { min-width: 0; }
@media (min-width: 1024px) {
    .vibecoding-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* QA#2·#4 테마 토글: 배경 없는 difference 블렌딩이라 라이트 모드에선 사라지고, 다크 모드에선
   흰 버튼·흰 타이틀·본문 위에서 글자가 묻힘 → 자기 배경을 가진 버튼으로(블렌딩 제거) */
.theme-toggle {
    mix-blend-mode: normal;
    background: rgba(24, 24, 24, 0.86);
    border-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.theme-toggle:hover { border-color: #ffffff; color: #ffffff; }
body.light-theme .theme-toggle {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(24, 24, 24, 0.55);
    color: #181818;
}
body.light-theme .theme-toggle:hover { border-color: #181818; color: #181818; }
/* QA#4(d) 페이지 맨 끝에서 토글이 저작권 문구를 가림 → 푸터 아래에 토글 높이만큼 여백 */
footer { padding-bottom: 96px; }
@media (max-width: 768px) { footer { padding-bottom: 72px; } }

/* QA#5·#6 좌측선 불일치: 40px 하한을 하드코딩해 .container 반응형 패딩(32/24/16)을 못 따라감 */
@media (max-width: 1024px) {
    .testimonial-strip .svc-label { padding-left: 32px; }
    .skill-text.bdi-motion.is-stuck { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 768px) {
    .testimonial-strip .svc-label { padding-left: 24px; }
    .skill-text.bdi-motion.is-stuck { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 480px) {
    .testimonial-strip .svc-label { padding-left: 16px; }
    .skill-text.bdi-motion.is-stuck { padding-left: 16px; padding-right: 16px; }
}

/* QA#7 모바일 푸터 좌우 여백 이중(이미 .container 16px 안인데 footer에도 16px) */
@media (max-width: 768px) {
    footer { padding-left: 0; padding-right: 0; }
}

/* QA#8 라이트 모드에서 하늘색 포인트 라벨(#3BF8FF)이 흰 배경에서 거의 안 보임 → 같은 계열의 진한 청록 */
body.light-theme .svc-label,
body.light-theme .svc-label-sub {
    color: #00838C;
}

/* QA#9 서비스 하단 정보행: 내용 높이에 따라 라벨 위치가 칸마다 따로 움직임 → 위쪽 정렬로 라벨 높이 통일 */
.svc-price-block,
.svc-target-block { justify-content: flex-start; }

/* REQ-204 (2026-10-23) 아티팩트 댓글 반영 */
/* ① 히어로 서비스 Inquire: "밑줄 없애고, hover 시 키컬러-스카이블루로" */
.service-cta { text-decoration: none; }
.service-cta:hover { color: var(--point-red); }
/* ② "'비즈니스~제공합니다'와 'Design Strategy Consulting / Design Solution' 사이에 구분선 하나 추가
      (정중앙 말고 서비스 쪽에 가깝게)" — 위 여백 88px, 선, 아래 여백 40px(예전엔 위 여백 128px만) */
.services-wrapper {
    padding-top: 40px;
    margin-top: 88px;
    border-top: 1px solid var(--border-color);
}
@media (max-width: 768px) {
    .services-wrapper { padding-top: 32px; margin-top: 48px; }
}

/* REQ-209: 컨설팅 문의 '진행 범위' 필수 선택 — 미선택 제출 시 선택지 테두리도 에러색 */
.inquire-field.inquire-field-error .toggle-option { border-color: #ff6b6b; }
#scope-toggle { margin-top: 12px; }

/* REQ-210 (2026-10-24) 모바일 BIO·팀 영역:
   "구분선 위에 불필요한 줄간격 / 구분선 아래~텍스트가 년도~이력 사이보다 미세하게 좁음" — 연도→이력(행 내부 gap)과
   이력→구분선, 구분선→다음 연도 간격을 같은 시각 간격으로(행 내부 gap엔 위아래 글자 반행간이 둘 다 끼므로,
   구분선 쪽은 반행간 하나만큼 더해 맞춤).
   "Brand & Visual Designer <-> BIO 사이 간격 더 넓혀야" — 팀 목록과 BIO 사이 40→64px. */
@media (max-width: 768px) {
    .timeline-row {
        gap: 12px;
        padding-bottom: 16px;
        margin-bottom: 16px;
    }
    .team-lineup { margin-bottom: 64px; }
    .career-label { margin-bottom: 16px; }
    /* 숫자 칩: 위 패딩이 시각적으로 좁아 보이고 가로폭이 좁음 → 위 1px 보정, 좌우 넓힘 */
    .red-badge {
        padding: 4.5px 11px 3.5px;
        min-width: 28px;
    }
}

/* REQ-211 (2026-10-24): 섹션 이동 메뉴 — 우상단 'Index' 글자 하나, 누르면 섹션 목록이 아래로 펼쳐짐.
   스티키 로고(BDI Studio)와 같은 줄 높이·좌우 여백(.container 패딩)에 맞춤. */
.site-index {
    position: fixed;
    top: 20px;
    right: max(40px, calc((100vw - 1400px) / 2 + 40px));
    z-index: 1001;
    font-family: var(--font-main);
    text-align: right;
}
.site-index-toggle {
    background: none;
    border: none;
    padding: 4px 0;
    color: var(--text-white);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
}
.site-index-toggle::after {
    content: '+';
    display: inline-block;
    margin-left: 6px;
    transition: transform var(--transition-normal);
}
.site-index-toggle[aria-expanded="true"]::after { transform: rotate(45deg); }
.site-index-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 14px 18px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
}
.site-index-list li + li { margin-top: 8px; }
.site-index-list a {
    color: var(--text-gray);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--transition-fast);
}
.site-index-list a:hover,
.site-index-list a:focus-visible { color: var(--text-white); }
@media (max-width: 1024px) { .site-index { right: 32px; } }
@media (max-width: 768px) { .site-index { top: 14px; right: 24px; } }
@media (max-width: 480px) { .site-index { right: 16px; } }
body.light-theme .site-index-toggle { color: #181818; }
body.light-theme .site-index-list { background: #ffffff; border-color: rgba(0, 0, 0, 0.12); }
body.light-theme .site-index-list a { color: rgba(0, 0, 0, 0.6); }
body.light-theme .site-index-list a:hover { color: #181818; }

/* REQ-212 (2026-10-24) 모바일 QA — "최상단 타이포 줄바꿈": BDI Studio 문구가 Business Design Intelligence Studio로
   펼쳐질 때 칸 폭을 넘어 줄이 넘어감(히어로 349px > 187px, 헤더 546px > 343px). 줄바꿈 막고, 모바일에선 펼친
   상태가 한 줄에 들어가는 크기로(펼친 폭 ≈ 글자 크기 × 14.6). */
.skill-text.bdi-motion-hero,
.skill-text.bdi-motion { white-space: nowrap; }
@media (max-width: 768px) {
    .skill-text.bdi-motion-hero { font-size: min(24px, calc((100vw - 48px) / 14.6)); }
    .skill-text.bdi-motion:not(.is-stuck) { font-size: min(10vw, calc((100vw - 48px) / 14.6)); }
}
@media (max-width: 480px) {
    .skill-text.bdi-motion-hero { font-size: min(24px, calc((100vw - 32px) / 14.6)); }
    .skill-text.bdi-motion:not(.is-stuck) { font-size: min(10vw, calc((100vw - 32px) / 14.6)); }
}

/* REQ-212 — "light mode 색상 가시성": 키컬러(#3BF8FF)와 흰 반투명 글자가 흰 배경에서 거의 안 보임.
   라이트 모드에서만 같은 계열의 진한 청록으로, 칩 글자는 흰색. 히어로는 라이트 모드에서도 어두운 배경이라 원래 색 유지. */
body.light-theme {
    --point-red: #00A3AD;
    --point-red-contrast: #ffffff;
}
body.light-theme .red-badge { box-shadow: none; }
body.light-theme .acronym-fill { color: rgba(0, 0, 0, 0.35); }
body.light-theme .hero-section { --point-red: #3BF8FF; --point-red-contrast: #181818; }
body.light-theme .hero-section .acronym-fill { color: rgba(255, 255, 255, 0.32); }
/* REQ-212: 모바일에서 펼친 히어로 문구가 우상단 Index 메뉴와 겹치지 않게 한 줄 아래로 */
@media (max-width: 768px) {
    .career-timer { top: 52px; }
}
/* REQ-213 (2026-10-30, 아티팩트 댓글): "좌측 BDI Studio랑 가로 중앙 정렬 돼야함" — 고정 로고(24px, 위 패딩 20/16/14)와
   Index(13px)의 대문자 세로 중심을 실측(로고 32/28/26px, Index는 top+13.7px)해 일치시킴. */
.site-index { top: 18.3px; }
@media (max-width: 768px) { .site-index { top: 14.3px; } }
@media (max-width: 480px) { .site-index { top: 12.3px; } }
/* REQ-214 (2026-10-30): "데스크탑에서 bdi studio - index 중앙 정렬이 돼야하고 (아직 안맞아보임), 모바일에서는 줄이 다른게 맞아"
   — 페이지 맨 위 히어로의 BDI Studio(top 30px, 대문자 중심 42px)가 Index(32px)보다 10px 아래였음.
   데스크톱만 히어로 문구를 top 20px로 올려 Index·스크롤 시 고정 로고와 같은 줄(대문자 중심 32px)에 맞춤. 모바일은 다른 줄 유지. */
@media (min-width: 769px) {
    .career-timer { top: 20px; }
}

/* REQ-215 (2026-10-30): "gallery - 총 10개니까 (열) 3-2-3-2로 보이도록 해. 지금은 4-4-2-2로 보여"
   — 4열 그리드에 행 순서로 채워져 마지막 줄 2개가 왼쪽 두 열에 몰렸음. 9번째를 1열, 10번째를 3열로 보내
   열별 개수 3·2·3·2(1·3열이 한 칸 더 길게)로. 모바일 2열은 그대로. */
@media (min-width: 1024px) {
    .vibecoding-gallery > .gallery-item:nth-child(9) { grid-column: 1; }
    .vibecoding-gallery > .gallery-item:nth-child(10) { grid-column: 3; }
}

/* REQ-215 — 라이트 모드 포인트 블루(섹션 타이틀 제외): "너무 안예쁘다 ... dark mode 블루랑 동일해보이되, 흰색 배경이니까
   가시성 낮아지지 않도록" — 탁한 청록(#00A3AD/#00838C) 대신 다크 모드 #3BF8FF와 같은 색상(시안 186°)에서 채도는 최대로,
   명도만 흰 배경용으로 낮춤. 칩·선 같은 면/선은 밝은 시안 #00CFE8 + 칩 글자는 다크 모드처럼 진한 글자,
   작은 글자(라벨)는 같은 색상에서 한 단계 진한 #00A6C0. 섹션 타이틀은 html의 --point-red를 읽어 원래 색 유지. */
body.light-theme {
    --point-red: #00CFE8;
    --point-red-contrast: #0B1A1D;
}
body.light-theme .svc-label { color: #00A6C0; }
body.light-theme .svc-label .svc-label-sub,
body.light-theme .svc-label-sub { color: var(--text-gray); } /* 보조 라벨(제공 항목 등)은 원래대로 회색 */

/* REQ-216 (2026-10-30, 아티팩트 댓글): "lightmode에서 index 글씨 여전히 안보인다고." — 라이트 모드에서 Index를 #181818로
   고정했는데, 히어로는 라이트 모드에서도 어두운 배경이라 맨 위에서 검은 글자가 묻혔음. 라이트 모드에선 흰 글자 + difference
   블렌딩으로 배경에 따라 자동 반전(어두운 히어로 위 흰색 / 흰 본문 위 검정). 펼친 목록은 자기 배경이 있어 영향 없음. */
/* (블렌딩은 고정 메뉴가 별도 쌓임 맥락이라 흰 본문 위에서 반전이 안 됨 → JS가 어두운 히어로 위일 때만 .on-dark) */
body.light-theme .site-index.on-dark .site-index-toggle { color: #ffffff; }

/* REQ-217 (2026-10-30): 갤러리 카드 — "링크 제거하고, 이미지도 모두 제거하고, 사이트와 통일된 배경색만 깔고"
   카드(div)는 클릭 대상이 아니므로 손가락 커서·확대·그림자 호버 제거, 카드 면은 사이트 배경색 + 기존 테두리. */
.gallery-item { cursor: default; }
.thumb-wrapper { background: var(--bg-color); }
.gallery-item:hover .thumb-wrapper { border-color: var(--border-color); box-shadow: none; }
.vibecoding-gallery:hover .gallery-item,
.vibecoding-gallery .gallery-item:hover { opacity: 1; filter: none; transform: translateY(var(--parallax-y, 0)); }

/* REQ-218 (2026-10-30): "3개인 열의 마지막 카드가 톡 튀어나오지 않게 바둑형식으로 격자로 배열해 (세로가 0.5씩 겹치게)"
   = 엇갈림(벽돌쌓기) 배치. 데스크톱 4열을 반 칸 단위 행으로 나눠 카드마다 2행씩 차지하게 하고, 1·3열(3장)은 1행부터,
   2·4열(2장)은 2행부터 시작 → 2장 열이 3장 열의 카드 사이 반 칸 높이에 맞물리고, 위아래가 대칭으로 반 칸씩만 나옴. */
@media (min-width: 1024px) {
    .vibecoding-gallery { grid-auto-rows: 1fr; row-gap: 0.75vw; }
    .vibecoding-gallery > .gallery-item { grid-row-end: span 2; }
    .vibecoding-gallery > .gallery-item:nth-child(1)  { grid-column: 1; grid-row-start: 1; }
    .vibecoding-gallery > .gallery-item:nth-child(2)  { grid-column: 2; grid-row-start: 2; }
    .vibecoding-gallery > .gallery-item:nth-child(3)  { grid-column: 3; grid-row-start: 1; }
    .vibecoding-gallery > .gallery-item:nth-child(4)  { grid-column: 4; grid-row-start: 2; }
    .vibecoding-gallery > .gallery-item:nth-child(5)  { grid-column: 1; grid-row-start: 3; }
    .vibecoding-gallery > .gallery-item:nth-child(6)  { grid-column: 2; grid-row-start: 4; }
    .vibecoding-gallery > .gallery-item:nth-child(7)  { grid-column: 3; grid-row-start: 3; }
    .vibecoding-gallery > .gallery-item:nth-child(8)  { grid-column: 4; grid-row-start: 4; }
    .vibecoding-gallery > .gallery-item:nth-child(9)  { grid-column: 1; grid-row-start: 5; }
    .vibecoding-gallery > .gallery-item:nth-child(10) { grid-column: 3; grid-row-start: 5; }
}

/* REQ-220 (2026-10-31): 갤러리 카드 10장 — 생성 이미지 + HTML 글자·UI·움직임. (REQ-219 CSS 목업 반려 후 교체)
   썸네일 칸(8:11)을 컨테이너로, 모든 치수는 cqw(카드 폭 1%) → 데스크톱·모바일 같은 구도. 카드 높이 = 137.5cqw.
   .gx-stage = 원본 이미지 비율(2:3) 그대로 카드 세로 중앙에 놓은 판 — 사진 위 요소(폰 화면·X-ray 박스·메모 라벨)는
   이 판 기준 %로 붙여서 사진과 정확히 같이 움직임. */
.thumb-wrapper { container-type: inline-size; }
.gx { position: absolute; inset: 0; overflow: hidden; font-family: 'Inter', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; line-height: 1.2; }
.gx :where(p, h4, span, i, em, b, nav) { margin: 0; padding: 0; font-style: normal; }
.gx, .gx * { box-sizing: border-box; }
.gx-stage { position: absolute; left: 0; width: 100%; aspect-ratio: 2 / 3; top: 50%; transform: translateY(-50%); }
.gx-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* 1. Moss & Morrow — Poch식: 오른쪽 위 문장 + 하단 알약 내비 */
.gx-01 { background: #F7F1E5; color: #1B1A16; }
.g1-mark { position: absolute; left: 6cqw; top: 6cqw; font: 400 5.4cqw/1 'Instrument Serif', Georgia, serif; letter-spacing: -.02em; }
.g1-head { position: absolute; right: 6cqw; top: 5.2cqw; text-align: right; font: 500 5cqw/1.08 'Inter', sans-serif; letter-spacing: -.035em; }
.g1-ico { display: inline-block; width: 7cqw; height: 4cqw; vertical-align: -.5cqw; border: .45cqw solid #1B1A16; border-radius: 99px; position: relative; }
.g1-ico i { position: absolute; left: 50%; top: 50%; width: 2.4cqw; height: 1.6cqw; margin: -.8cqw 0 0 -1.2cqw; border-radius: 50%; background: #6B3A1E; }
.g1-nav { position: absolute; left: 50%; bottom: 6cqw; transform: translateX(-50%); display: flex; align-items: center; gap: 2.6cqw; white-space: nowrap;
    background: #1B1A16; color: #F7F1E5; border-radius: 99px; padding: 1.1cqw 1.1cqw 1.1cqw 3.4cqw; font-size: 2.3cqw; box-shadow: 0 1.2cqw 3cqw rgba(60,40,20,.18); }
.g1-nav b { font: 400 3.4cqw/1 'Instrument Serif', Georgia, serif; margin-right: .6cqw; }
.g1-nav span { opacity: .72; }
.g1-nav em { background: #F2E27A; color: #1B1A16; padding: 1.5cqw 2.6cqw; border-radius: 99px; font-weight: 600; }

/* 2. Tally — 사진 속 꺼진 폰 화면(판 기준 x33.3~68%, y22.2~74.1%)에 실제 UI, 목록이 천천히 스크롤 */
.gx-02 { background: #6A2BD9; }
.g2-screen { position: absolute; left: 33.6%; top: 22.6%; width: 34.2%; height: 51.2%; border-radius: 4.6cqw; overflow: hidden;
    background: linear-gradient(180deg, #0D0C14, #0A0910); color: #fff; padding: 2.4cqw 2.2cqw 0; }
.g2-screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 32%); pointer-events: none; }
.g2-status { display: flex; justify-content: space-between; align-items: center; font: 600 1.5cqw/1 'Inter', sans-serif; }
.g2-status span:last-child { font-size: 1cqw; letter-spacing: -.1em; }
.g2-isl { width: 8cqw; height: 2.3cqw; border-radius: 99px; background: #000; }
.g2-scroll { margin-top: 3.4cqw; animation: g2scroll 9s ease-in-out infinite alternate; }
@keyframes g2scroll { 0%, 18% { transform: translateY(0); } 82%, 100% { transform: translateY(-11cqw); } }
.g2-k { font: 500 1.3cqw/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #C6B4FF; }
.g2-big { font: 600 7.4cqw/1 'Inter', sans-serif; letter-spacing: -.055em; margin-top: 1cqw !important; }
.g2-big small { font-size: 1.8cqw; letter-spacing: 0; font-weight: 500; opacity: .55; margin-left: .6cqw; }
.g2-spark { display: block; width: 100%; height: 7cqw; margin: 1.6cqw 0 1.2cqw; }
.g2-row { display: flex; align-items: center; gap: 1.4cqw; padding: 1.5cqw 0; border-top: .2cqw solid #1E1C29; font-size: 1.65cqw; }
.g2-row i { width: 3.2cqw; height: 3.2cqw; border-radius: 1cqw; flex: none; }
.g2-row b { margin-left: auto; font: 500 1.5cqw/1 'JetBrains Mono', monospace; }
.g2-row b.up { color: #7CE0B5; }
.g2-url { position: absolute; left: 1.6cqw; right: 1.6cqw; bottom: 2cqw; display: flex; align-items: center; justify-content: space-between; gap: 1cqw;
    background: rgba(40,38,52,.92); border-radius: 99px; padding: 1.1cqw 1.8cqw; font-size: 1.5cqw; color: rgba(255,255,255,.7); z-index: 2; }
.g2-url em { flex: 1; text-align: center; color: #fff; }

/* 3. Half Light — Bureau Dimanche식: 왼쪽 위 굵은 제목, 흰 여백, 리본 사진 */
.gx-03 { background: #FEFEFE; color: #111; }
.g3-head { position: absolute; left: 6cqw; top: 5.5cqw; font: 700 12.5cqw/.86 'Inter', sans-serif; letter-spacing: -.07em; }
.g3-meta { position: absolute; right: 6cqw; top: 6.4cqw; text-align: right; font: 500 2.1cqw/1.4 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .04em; color: #555; }
.g3-stage { aspect-ratio: 1 / 1; top: 30cqw; transform: none; }
.g3-foot { position: absolute; right: 6cqw; bottom: 5.5cqw; text-align: right; font: 500 2.7cqw/1.25 'Inter', sans-serif; letter-spacing: -.02em; color: #222; }

/* 4. Orbit Labs — Acme식 반투명 메뉴, 커서가 항목을 차례로 훑음(8초 루프) */
.gx-04 { background: #F5EDE2; }
.g4-menu { position: absolute; left: 12cqw; right: 12cqw; top: 25cqw; border-radius: 3.4cqw; padding: 3.6cqw 3.4cqw 3cqw;
    background: rgba(58,56,52,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #EDEBE6;
    box-shadow: 0 3cqw 8cqw rgba(60,45,25,.28), inset 0 0 0 .2cqw rgba(255,255,255,.08); }
.g4-top { display: flex; align-items: center; gap: 2.2cqw; margin-bottom: 3cqw !important; }
.g4-logo { width: 5.4cqw; height: 5.4cqw; border-radius: 1.3cqw; background: #F5F3EE; position: relative; }
.g4-logo::after { content: '\2726'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #1a1a1a; font-size: 3.4cqw; }
.g4-top b { font-size: 3cqw; font-weight: 600; letter-spacing: -.02em; flex: 1; }
.g4-win { width: 3cqw; height: 2.6cqw; border: .35cqw solid #CFCBC3; border-radius: .6cqw; }
.g4-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2cqw; }
.g4-i { display: flex; align-items: center; gap: 1.8cqw; height: 6.6cqw; padding: 0 1.6cqw; border-radius: 1.6cqw; font-size: 2.45cqw; color: #D9D6CF; white-space: nowrap; animation: g4hl 8s infinite; }
.g4-i i { width: 2.8cqw; text-align: center; font-size: 2.3cqw; opacity: .8; }
.g4-i.a { animation-name: g4a; } .g4-i.b { animation-name: g4b; } .g4-i.c { animation-name: g4c; }
.g4-i.e { animation-name: g4e; } .g4-i.f { animation-name: g4f; } .g4-i.d { animation: none; }
@keyframes g4a { 0%, 11% , 27%, 100% { background: transparent; } 14%, 25% { background: rgba(255,255,255,.09); color: #fff; } }
@keyframes g4b { 0%, 27%, 42%, 100% { background: transparent; } 29%, 40% { background: rgba(255,255,255,.09); color: #fff; } }
@keyframes g4c { 0%, 42%, 57%, 100% { background: transparent; } 44%, 55% { background: rgba(255,255,255,.09); color: #fff; } }
@keyframes g4e { 0%, 57%, 72%, 100% { background: transparent; } 59%, 70% { background: rgba(255,255,255,.09); color: #fff; } }
@keyframes g4f { 0%, 72%, 87%, 100% { background: transparent; } 74%, 85% { background: rgba(255,255,255,.09); color: #fff; } }
.g4-cursor { position: absolute; left: 0; top: 0; width: 6.4cqw; height: auto; filter: drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.3)); animation: g4move 8s cubic-bezier(.5,0,.3,1) infinite; z-index: 3; }
@keyframes g4move {
    0% { transform: translate(64cqw, 100cqw); } 12%, 25% { transform: translate(27cqw, 41.5cqw); }
    28%, 40% { transform: translate(27cqw, 48.1cqw); } 43%, 55% { transform: translate(27cqw, 54.7cqw); }
    58%, 70% { transform: translate(60cqw, 48.1cqw); } 73%, 85% { transform: translate(60cqw, 54.7cqw); }
    100% { transform: translate(64cqw, 100cqw); } }

/* 5. Diagnosis — X-ray 위 판독 박스 + 위→아래 스캔 라인 */
.gx-05 { background: #000; color: #EAF6FA; }
.gx-05 .gx-stage { width: 77.34cqw; height: 116cqw; left: 50%; top: 12cqw; transform: translateX(-50%); } /* 사진 전체가 보이게(위 라벨 자리 확보) */
.g5-box { position: absolute; border: .3cqw solid rgba(59,248,255,.0); }
.g5-box::before, .g5-box::after { content: ''; position: absolute; width: 3cqw; height: 3cqw; border: .45cqw solid #3BF8FF; }
.g5-box::before { left: -.45cqw; top: -.45cqw; border-right: 0; border-bottom: 0; }
.g5-box::after { right: -.45cqw; bottom: -.45cqw; border-left: 0; border-top: 0; }
.g5-box em, .g5-box b { position: absolute; font: 500 1.9cqw/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.g5-box em { left: 0; top: -3.4cqw; color: #3BF8FF; }
.g5-box b { right: 0; top: -3.4cqw; background: #3BF8FF; color: #04161A; padding: .5cqw 1cqw; top: -4cqw; }
.g5-box.b1 { left: 17%; top: 1%; width: 66%; height: 28%; }
.g5-box.b2 { left: 30%; top: 32%; width: 40%; height: 34%; }
.g5-box.b3 { left: 2%; top: 66%; width: 96%; height: 31%; }
.g5-box.b3 b { background: #FFB547; }
.g5-scan { position: absolute; left: 0; right: 0; height: 18cqw; top: 0; background: linear-gradient(180deg, rgba(59,248,255,0), rgba(59,248,255,.16) 85%, rgba(59,248,255,.75) 100%);
    border-bottom: .3cqw solid #3BF8FF; mix-blend-mode: screen; animation: g5scan 5s linear infinite; }
@keyframes g5scan { 0% { transform: translateY(-20cqw); } 100% { transform: translateY(140cqw); } }
.g5-top { position: absolute; left: 5cqw; right: 5cqw; top: 4.4cqw; display: flex; justify-content: space-between; font: 500 1.9cqw/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .06em; color: rgba(234,246,250,.75); }
.g5-score { position: absolute; right: 5cqw; top: 66cqw; display: flex; align-items: flex-end; gap: 1.4cqw; font: 400 15cqw/.8 'Instrument Serif', Georgia, serif; letter-spacing: -.03em; }
.g5-score small { font: 500 1.9cqw/1.35 'JetBrains Mono', monospace; letter-spacing: .04em; text-transform: uppercase; color: #3BF8FF; padding-bottom: .6cqw; }

/* 6. AX — dt pro식: 다크 사이트 + 콘덴스드 세리프 + 시안 디더링 창 */
.gx-06 { background: radial-gradient(120% 60% at 50% 105%, #123A44 0%, #0B0B0C 62%); color: #EDEDED; }
.g6-nav { position: absolute; left: 5cqw; right: 5cqw; top: 4.4cqw; display: flex; gap: 3cqw; font: 500 1.7cqw/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .06em; color: rgba(237,237,237,.6); }
.g6-nav em { margin-left: auto; }
.g6-k { position: absolute; left: 0; right: 0; top: 13cqw; text-align: center; font: 500 1.8cqw/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .06em; color: rgba(237,237,237,.55); }
.g6-head { position: absolute; left: 0; right: 0; top: 17.5cqw; text-align: center; font: 400 12.4cqw/.88 'Instrument Serif', Georgia, serif; letter-spacing: -.035em; }
.g6-btn { position: absolute; left: 50%; top: 42cqw; transform: translateX(-50%); white-space: nowrap; background: #3BF8FF; color: #04161A; padding: 1.2cqw 2.4cqw; border-radius: .8cqw; font: 600 1.8cqw/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }
.g6-win { position: absolute; left: 5cqw; right: 5cqw; top: 52cqw; border: .25cqw solid #2C2C30; border-radius: 1.6cqw; background: #0F0F11; overflow: hidden; }
.g6-bar { display: flex; justify-content: space-between; padding: 1.4cqw 2cqw; border-bottom: .25cqw solid #2C2C30; font: 500 1.6cqw/1 'JetBrains Mono', monospace; color: rgba(237,237,237,.55); }
.g6-body { display: grid; grid-template-columns: 1fr 1.25fr; gap: 2.4cqw; padding: 2.4cqw; }
.g6-txt { display: flex; flex-direction: column; gap: 1.5cqw; }
.g6-txt b { font: 700 4.4cqw/1 'JetBrains Mono', monospace; letter-spacing: -.04em; }
.g6-txt span { font: 400 1.75cqw/1.45 'JetBrains Mono', monospace; color: rgba(237,237,237,.65); margin-bottom: 1cqw; }
.g6-txt i { font: 500 1.6cqw/1 'JetBrains Mono', monospace; color: rgba(237,237,237,.75); border: .2cqw solid #2C2C30; padding: 1.1cqw 1.2cqw; border-radius: .6cqw; }
.g6-body img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 30%; image-rendering: pixelated; border-radius: .6cqw; display: block; }
.g6-tiles { position: absolute; left: 5cqw; right: 5cqw; bottom: 4.6cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.g6-tiles span { background: rgba(59,248,255,.08); border: .2cqw solid rgba(59,248,255,.25); border-radius: 1cqw; padding: 1.6cqw; font: 500 1.7cqw/1.3 'JetBrains Mono', monospace; text-transform: uppercase; color: #BFF9FF; }
.g6-tiles b { display: block; color: rgba(191,249,255,.6); font-weight: 500; }

/* 7. Roadmap — 시안 모서리 카드에 분기 라벨 */
.gx-07 { background: #D3C9BF; color: #1A1A1A; }
.g7-head { position: absolute; left: 6cqw; bottom: 6cqw; font: 600 7.4cqw/.95 'Inter', sans-serif; letter-spacing: -.055em; }
.g7-meta { position: absolute; right: 6cqw; bottom: 6.6cqw; text-align: right; font: 500 1.9cqw/1.45 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .05em; color: rgba(26,26,26,.65); }
.g7-tag { position: absolute; display: flex; align-items: center; gap: 1cqw; white-space: nowrap; transform: translate(-50%, -100%);
    background: #141414; color: #fff; font: 500 1.9cqw/1 'Inter', sans-serif; padding: 1.1cqw 1.8cqw 1.1cqw 1.4cqw; border-radius: 99px; box-shadow: 0 .8cqw 2cqw rgba(0,0,0,.18); }
.g7-tag i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #3BF8FF; }
.g7-tag::after { content: ''; position: absolute; left: 50%; top: 100%; width: .25cqw; height: 4cqw; margin-left: -.12cqw; background: #141414; }
.g7-tag.t1 { left: 34%; top: 33%; } .g7-tag.t2 { left: 83%; top: 21.5%; } .g7-tag.t3 { left: 60%; top: 10.5%; }

/* 8. Lull — 플래시 사진 위 콘덴스드 대형 타이포 + 스티커 */
.gx-08 { background: #0D1408; color: #fff; }
.g8-top { position: absolute; left: 5cqw; right: 5cqw; top: 4.6cqw; display: flex; justify-content: space-between; font: 500 1.9cqw/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .06em; text-shadow: 0 0 1.4cqw rgba(0,0,0,.5); }
.g8-sticker { position: absolute; right: 6cqw; top: 13cqw; width: 19cqw; height: 19cqw; border-radius: 50%; background: #D4FF3A; color: #0D1408; transform: rotate(12deg);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6cqw; box-shadow: .6cqw 1cqw 2cqw rgba(0,0,0,.35); }
.g8-sticker b { font: 700 6cqw/.9 'Big Shoulders Display', 'Anton', sans-serif; }
.g8-sticker i { font: 500 1.7cqw/1 'JetBrains Mono', monospace; }
.g8-word { position: absolute; left: 4cqw; bottom: 8.5cqw; display: flex; align-items: flex-end; gap: 2cqw; font: 700 27cqw/.78 'Big Shoulders Display', 'Anton', sans-serif; letter-spacing: -.01em; color: #D4FF3A; text-shadow: 0 1cqw 4cqw rgba(0,0,0,.35); }
.g8-word span { color: transparent; -webkit-text-stroke: .5cqw #D4FF3A; }
.g8-foot { position: absolute; left: 5cqw; bottom: 4.4cqw; font: 500 1.9cqw/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .05em; }

/* 9. Seoul Night Tea — 세리프 제목 + 커머스 구매 바 */
.gx-09 { background: #141332; color: #F4E7CF; }
.g9-head { position: absolute; left: 6cqw; top: 6cqw; font: 400 10.5cqw/.9 'Instrument Serif', Georgia, serif; letter-spacing: -.02em; text-shadow: 0 0 3cqw rgba(10,8,40,.45); }
.g9-head i { font-style: italic; color: #F0C987; }
.g9-sub { position: absolute; left: 6cqw; top: 27cqw; font: 500 1.9cqw/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .07em; color: rgba(244,231,207,.75); }
.g9-buy { position: absolute; left: 5cqw; right: 5cqw; bottom: 5cqw; display: flex; align-items: center; gap: 2cqw; padding: 1.6cqw 1.6cqw 1.6cqw 1.6cqw; border-radius: 2.4cqw;
    background: rgba(20,19,50,.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 .2cqw rgba(244,231,207,.14); }
.g9-thumb { width: 7cqw; height: 7cqw; border-radius: 1.4cqw; background: linear-gradient(180deg, #C9935A 0 26%, #1D3A2E 26% 100%); flex: none; }
.g9-name { display: flex; flex-direction: column; gap: .8cqw; flex: 1; }
.g9-name b { font: 700 2.5cqw/1 'Noto Serif KR', 'AppleMyungjo', serif; }
.g9-name em { font: 500 1.7cqw/1 'JetBrains Mono', monospace; color: rgba(244,231,207,.6); }
.g9-price { font: 500 2.2cqw/1 'JetBrains Mono', monospace; }
.g9-add { background: #F0C987; color: #141332; font: 600 2.2cqw/1 'Inter', sans-serif; padding: 1.6cqw 2.6cqw; border-radius: 1.4cqw; }

/* 10. Strategy Session — 남은 메모 세 장에 결정 라벨 + 통화 바 */
.gx-10 { background: #E9E7E2; color: #161616; }
.g10-note { position: absolute; left: 59%; display: flex; align-items: center; gap: 1.2cqw; white-space: nowrap; transform: translateY(-50%);
    background: #fff; padding: 1.2cqw 1.8cqw 1.2cqw 1.2cqw; border-radius: 99px; font: 500 2cqw/1 'Inter', sans-serif; letter-spacing: -.01em; box-shadow: 0 .6cqw 1.8cqw rgba(0,0,0,.12); }
.g10-note b { font: 500 1.7cqw/1 'JetBrains Mono', monospace; background: #161616; color: #3BF8FF; border-radius: 99px; padding: .6cqw .9cqw; }
.g10-note::before { content: ''; position: absolute; right: 100%; top: 50%; width: 3cqw; height: .25cqw; background: #161616; }
.g10-note.n1 { top: 64%; } .g10-note.n2 { top: 74.5%; } .g10-note.n3 { top: 85.5%; }
.g10-call { position: absolute; left: 5cqw; top: 5cqw; display: flex; align-items: center; gap: 1.4cqw; background: rgba(22,22,22,.86); color: #fff;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 1.4cqw 1.6cqw 1.4cqw 2cqw; border-radius: 99px; font: 500 2.1cqw/1 'Inter', sans-serif; }
.g10-call .rec { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #FF4D3D; box-shadow: 0 0 0 .7cqw rgba(255,77,61,.25); animation: g10rec 1.6s ease-in-out infinite; }
@keyframes g10rec { 50% { opacity: .35; } }
.g10-call span { font: 500 1.8cqw/1 'JetBrains Mono', monospace; background: rgba(255,255,255,.12); padding: .8cqw 1.2cqw; border-radius: 99px; margin-left: .6cqw; }
.g10-out { position: absolute; right: 5cqw; bottom: 5cqw; background: #161616; color: #3BF8FF; padding: 1.6cqw 2.4cqw; border-radius: 99px; font: 600 2.2cqw/1 'Inter', sans-serif; }

@media (prefers-reduced-motion: reduce) {
    .g2-scroll, .g4-i, .g4-cursor, .g5-scan, .g10-call .rec { animation: none !important; }
}

/* REQ-222 (2026-11-01): 갤러리 카드 — 레퍼런스 썸네일 1장씩 매력 원리를 대응시켜 응용(아래 카드별 주석에 출처). */
/* 4 HAN & PARTNERS — White & Case(CB) 응용: 흑백 인쇄물 여러 장에 걸쳐 잘려 나간 거대 타이포 */
.gx-han { background: #DADAD6; }
.hn-sheets { position: absolute; left: 5cqw; right: 5cqw; top: 6cqw; bottom: 6cqw; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.6cqw; }
.hn-s { position: relative; overflow: hidden; background: #F7F6F2; box-shadow: 0 .4cqw 1.2cqw rgba(0,0,0,.14), 0 0 0 .15cqw rgba(0,0,0,.05); }
.hn-s::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(0,0,0,.05), transparent 30%, transparent 70%, rgba(0,0,0,.04)); pointer-events: none; }
.hn-w { position: absolute; margin: 0; font: 700 41cqw/.74 'Big Shoulders Display', 'Anton', sans-serif; letter-spacing: -.015em; color: #0E0E0E; white-space: nowrap; }
.s1 .hn-w { left: -1.2cqw; top: 30cqw; } .s2 .hn-w { left: -45.8cqw; top: 30cqw; }
.s3 .hn-w { left: -1.2cqw; top: -6cqw; } .s4 .hn-w { left: -45.8cqw; top: -6cqw; }
.hn-col { position: absolute; left: 2.4cqw; top: 2.4cqw; margin: 0; font: 500 1.7cqw/1.35 'JetBrains Mono', monospace; color: #0E0E0E; text-transform: uppercase; letter-spacing: .02em; }
.hn-col.r { left: auto; right: 2.4cqw; top: auto; bottom: 2.4cqw; text-align: right; }
.hn-mk { position: absolute; right: 2.4cqw; top: 2cqw; margin: 0; font: 400 5.6cqw/1 'Instrument Serif', Georgia, serif; color: #0E0E0E; }
.hn-case { position: absolute; right: 2.4cqw; bottom: 2.4cqw; margin: 0; font: 500 1.7cqw/1.35 'JetBrains Mono', monospace; text-align: right; color: #0E0E0E; }

/* REQ-222 공통: 사진 속 앞 사물(기구·사람)을 잘라낸 전경 레이어 — 글자가 그 뒤에 칠해진 것처럼 */
.gx-fg { position: absolute; left: 0; width: 100%; height: auto; display: block; pointer-events: none; }

/* 2 SEOUL DESIGN WEEK — 보라 LED 월(판 기준 x5.08~95%, y21.8~65.6%)에 타이포 KV, 사람은 전경 레이어 */
.gx-sdw { background: #07050E; }
.sdw-scr { position: absolute; left: 5.08%; top: 21.8%; width: 89.9%; height: 43.8%; color: #F4EEFF; padding: 3.6cqw 4cqw; display: flex; flex-direction: column; justify-content: space-between;
    text-shadow: 0 0 1.4cqw rgba(225,205,255,.55); }
.sdw-top, .sdw-bot { display: flex; justify-content: space-between; margin: 0; font: 500 2cqw/1 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.sdw-big { margin: 0; font: 700 25cqw/.78 'Big Shoulders Display', 'Anton', sans-serif; letter-spacing: -.005em; transform: scaleY(1.18); transform-origin: left center; }
.sdw-bot { padding-bottom: 7cqw; }

/* 5 OLIM — 파란 벽(판 기준 y12.5~67%)에 칠한 워드마크, 앞 기구가 가림 */
.gx-olim { background: #0A1B5C; }
.ol-word { position: absolute; left: 3%; right: 3%; top: 19%; margin: 0; text-align: center; color: #F1EEE6; opacity: .94;
    font: 700 47cqw/.8 'Big Shoulders Display', 'Anton', sans-serif; letter-spacing: -.02em; transform: scaleY(2.3); transform-origin: center top; }
.ol-sub { position: absolute; left: 6cqw; top: 14.6%; margin: 0; font: 500 1.9cqw/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .1em; color: rgba(241,238,230,.85); }

/* 6 yeoyu — 가벽의 흰 포스터 9장에 곱하기(multiply)로 인쇄 → 주름·풀자국 그대로 */
.gx-wall { background: #8C8B87; }
.wp { position: absolute; width: 20.9%; height: 18.6%; mix-blend-mode: multiply; display: flex; flex-direction: column; padding: 1.5cqw 1.4cqw; overflow: hidden; }
.wp.a { background: #F1EEE4; color: #1F3D2B; }
.wp.b { background: #1F3D2B; color: #E9F28A; }
.wp b { font: 400 9cqw/.85 'Instrument Serif', Georgia, serif; letter-spacing: -.04em; }
.wp.b b { font-size: 5.2cqw; font-style: italic; letter-spacing: -.02em; margin-top: auto; }
.wp em { font: 400 italic 2.6cqw/1 'Instrument Serif', Georgia, serif; }
.wp span { margin-top: auto; font: 500 1.25cqw/1.25 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }
.wp.b span { margin-top: 1.2cqw; }

/* 7 SAUNA 87 — 안개 낀 강 위에 검은 포스터, 두 온도 */
.gx-sauna { background: #B9BEC1; }
.sa-poster { position: absolute; left: 21cqw; right: 21cqw; top: 14cqw; height: 74cqw; background: #0C0C0C; color: #F3F3F0; padding: 3cqw; display: flex; flex-direction: column; box-shadow: 0 1.6cqw 4cqw rgba(30,40,50,.25); }
.sa-n { margin: 0; font: 700 18.4cqw/.82 'Big Shoulders Display', 'Anton', sans-serif; letter-spacing: -.01em; }
.sa-n + .sa-n { margin-top: 2cqw; color: #9FD6FF; }
.sa-meta { margin: auto 0 0; display: flex; justify-content: space-between; font: 500 1.6cqw/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .06em; color: rgba(243,243,240,.7); }

/* 8 GOMGOM — Poch식: 오른쪽 위 문장 + 하단 알약 내비 */
.gx-gom { background: #000; color: #fff; }
.gm-head { position: absolute; right: 5cqw; top: 5cqw; margin: 0; text-align: right; font: 500 4.6cqw/1.08 'Inter', sans-serif; letter-spacing: -.035em; }
.gm-head span { font-weight: 300; }
.gm-nav { position: absolute; left: 50%; bottom: 5cqw; transform: translateX(-50%); display: flex; align-items: center; gap: 2.4cqw; white-space: nowrap;
    background: #fff; color: #111; border-radius: 99px; padding: 1cqw 1cqw 1cqw 3cqw; font: 500 2.1cqw/1 'Inter', sans-serif; }
.gm-nav b { font: 800 3.2cqw/1 'Inter', sans-serif; letter-spacing: -.07em; margin-right: .6cqw; }
.gm-nav span { color: #555; }
.gm-nav em { font-style: normal; background: #FFE36E; padding: 1.4cqw 2.4cqw; border-radius: 99px; font-weight: 600; }

/* 9 MAPO FC — Span식: 다큐 사진을 가로지르는 줄무늬 띠 + 굵은 글자 */
.gx-mapo { background: #10140F; }
.mp-band { position: absolute; left: 0; right: 0; top: 86cqw; display: flex; flex-direction: column; gap: 1.2cqw; }
.mp-band i { display: block; height: 3.2cqw; background: repeating-linear-gradient(180deg, #C6F03C 0 .55cqw, transparent .55cqw 1.1cqw); }
.mp-band p { margin: 0; display: flex; align-items: center; justify-content: center; gap: 2.4cqw; color: #fff; }
.mp-band b { font: 700 11cqw/.9 'Big Shoulders Display', 'Anton', sans-serif; letter-spacing: .01em; }
.mp-band em { font: 400 italic 4.4cqw/1 'Instrument Serif', Georgia, serif; color: #C6F03C; }
.mp-crest { position: absolute; left: 50%; bottom: 6cqw; transform: translateX(-50%); margin: 0; width: 11cqw; height: 13cqw; border: .45cqw solid #C6F03C; border-radius: 0 0 5.5cqw 5.5cqw;
    display: flex; align-items: center; justify-content: center; font: 700 3cqw/1 'Big Shoulders Display', sans-serif; color: #C6F03C; }