/**
 * HIVELINK 메인 홈페이지 스타일
 * 컨셉: "현장 원장(Field Ledger) × 대화형 AI"
 * — 핑크(--hive)는 '의미가 부여된 데이터'의 마커로만,
 * — 시안(--signal)은 'AI/시스템 응답'의 색으로만 사용합니다.
 */

/* ========================================
   레이아웃 공통
======================================== */
.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
}

.section {
    /* 브라우저 폭에 따라 72px~110px 사이에서 연속적으로 조절 */
    padding: clamp(72px, 9vw, 110px) 0;
}

.section-head {
    /* 컨테이너 가로폭을 그대로 사용 — 리드 문단 조기 줄바꿈 방지 */
    max-width: 100%;
    margin-bottom: 64px;
}

.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: var(--hive);
    margin-bottom: 18px;
}

.eyebrow-arrow {
    color: var(--faint);
    margin: 0 2px;
}

.section-title {
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.25;
    color: var(--ink);
}

.section-lead {
    margin-top: 20px;
    font-size: 1.06rem;
    color: var(--mute);
    line-height: 1.75;
}

.section-lead strong {
    color: var(--ink);
    font-weight: 700;
}

.br-mobile {
    display: none;
}

/* 스크롤 리빌 */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

/* ========================================
   네비게이션
======================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border-bottom: 1px solid transparent;
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--line);
}

.nav-container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.logo-icon {
    width: 30px;
    height: auto;
}

.logo-text {
    font-family: var(--font-mono);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
    list-style: none;
}

.nav-links a {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--mute);
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: var(--ink);
}

.nav-links a.nav-cta {
    padding: 9px 18px;
    background: var(--ink);
    color: var(--white);
    border-radius: 999px;
    transition: background 0.2s ease;
}

.nav-links a.nav-cta:hover {
    background: var(--hive);
    color: var(--white);
}

/* ========================================
   Hero
======================================== */
.hero {
    position: relative;
    padding: 168px 0 96px;
    background:
        radial-gradient(1100px 480px at 82% -10%, rgba(0, 188, 212, 0.07), transparent 60%),
        radial-gradient(900px 480px at 4% 8%, rgba(233, 30, 99, 0.05), transparent 55%),
        var(--paper);
    overflow: hidden;
}

/* 미세 그리드 — 원장/도면의 질감 */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.4;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 85%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 85%);
    pointer-events: none;
}

.hero-container {
    position: relative;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(32px, 4.5vw, 56px);
    align-items: center;
}

.hero-title {
    font-size: clamp(2.3rem, 4.6vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.22;
    color: var(--ink);
    margin-bottom: 26px;
}

.hero-title .mark {
    font-style: normal;
    color: var(--hive);
    position: relative;
    white-space: nowrap;
}

.hero-title .mark::after {
    content: '';
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: 4px;
    height: 0.38em;
    background: var(--hive-soft);
    z-index: -1;
}

.hero-lead {
    font-size: 1.1rem;
    color: var(--mute);
    line-height: 1.8;
    max-width: 560px;
    margin-bottom: 36px;
}

.hero-lead strong {
    color: var(--ink);
    font-weight: 700;
}

.hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 26px;
    border-radius: 999px;
    font-size: 0.96rem;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn-primary {
    background: var(--hive);
    color: var(--white);
    box-shadow: 0 8px 24px rgba(233, 30, 99, 0.28);
}

.btn-primary:hover {
    background: var(--hive-deep);
    transform: translateY(-2px);
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--line-dark);
}

.btn-ghost:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
}

/* ── 시그니처: 터미널 데모 ── */
.hero-demo {
    min-width: 0;
}

.terminal {
    background: var(--panel);
    border: 1px solid var(--panel-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
}

.terminal-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 16px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--panel-line);
}

.term-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--panel-line);
}

.term-dot:first-child {
    background: var(--hive);
}

.terminal-title {
    margin-left: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--panel-text);
    letter-spacing: 0.02em;
}

.terminal-tag {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--signal);
    border: 1px solid rgba(0, 188, 212, 0.35);
    border-radius: 4px;
    padding: 3px 8px;
}

.terminal-body {
    padding: 20px;
    height: 430px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: opacity 0.5s ease;
}

.terminal-body.fading {
    opacity: 0;
}

.term-user {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.term-prompt {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--panel);
    background: var(--white);
    border-radius: 4px;
    padding: 3px 8px;
    transform: translateY(-1px);
}

.term-user-text {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: -0.01em;
    line-height: 1.5;
}

.term-user-text.typing::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--signal);
    margin-left: 3px;
    vertical-align: text-bottom;
    animation: blink 0.8s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

.term-step {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--panel-faint);
}

.term-step i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--signal);
    animation: pulse 0.9s ease infinite;
}

.term-step.done i {
    background: var(--signal-deep);
    animation: none;
}

.term-step.done {
    color: var(--panel-text);
}

@keyframes pulse {
    50% { opacity: 0.3; }
}

.term-sql {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    line-height: 1.6;
    color: var(--signal);
    background: rgba(0, 188, 212, 0.06);
    border: 1px solid rgba(0, 188, 212, 0.18);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    white-space: pre-wrap;
    overflow-x: auto;
}

.term-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.74rem;
}

.term-table th {
    text-align: left;
    font-weight: 500;
    color: var(--panel-faint);
    padding: 6px 10px;
    border-bottom: 1px solid var(--panel-line);
    letter-spacing: 0.05em;
}

.term-table td {
    color: var(--panel-text);
    padding: 7px 10px;
    border-bottom: 1px solid rgba(36, 48, 61, 0.5);
}

.term-answer {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--panel-text);
    border-left: 3px solid var(--signal);
    padding: 4px 0 4px 14px;
}

.pop {
    animation: popIn 0.4s ease both;
}

@keyframes popIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.demo-caption {
    margin-top: 14px;
    font-size: 0.78rem;
    color: var(--faint);
    text-align: center;
    line-height: 1.6;
}

/* ========================================
   원장 스트립 (누적 데이터 규모)
======================================== */
.ledger-strip {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--white);
}

.ledger-strip-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 22px 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px 32px;
}

.ledger-item {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--mute);
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.ledger-item b {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/* ========================================
   데이터 파이프라인 (철학)
======================================== */
.pipeline-section {
    background: var(--white);
}

.pipeline {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    position: relative;
}

/* 단계를 잇는 흐름선 */
.pipeline::before {
    content: '';
    position: absolute;
    top: 66px;
    left: 4%;
    right: 4%;
    height: 1px;
    background: linear-gradient(90deg, var(--line-dark), var(--hive) 30%, var(--signal) 75%, var(--line-dark));
    opacity: 0.5;
}

.pipe-step {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 20px 22px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pipe-step:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--line-dark);
}

.pipe-num {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--faint);
}

/* 육각형 마커 — 벌집 셀 하나 = 의미가 부여된 데이터 한 건 */
.pipe-hex {
    position: absolute;
    top: 24px;
    right: 18px;
    width: 14px;
    height: 16px;
    background: var(--line-dark);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.pipe-step-core .pipe-hex {
    background: var(--hive);
}

.pipe-step:nth-child(4) .pipe-hex,
.pipe-step:nth-child(5) .pipe-hex {
    background: var(--signal);
}

.pipe-title {
    margin-top: 34px;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.pipe-en {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
    margin-top: 4px;
}

.pipe-step-core .pipe-title {
    color: var(--hive);
}

.pipe-desc {
    margin-top: 14px;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--mute);
}

.pipe-chip {
    margin-top: 16px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    line-height: 1.6;
    color: var(--mute);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 7px 10px;
}

.pipe-step-core {
    background: var(--white);
    border-color: rgba(233, 30, 99, 0.35);
    box-shadow: 0 8px 28px rgba(233, 30, 99, 0.08);
}

.pipeline-note {
    margin-top: 52px;
    text-align: center;
    font-size: 1.02rem;
    color: var(--mute);
    line-height: 1.9;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.pipeline-note strong {
    color: var(--hive);
    font-weight: 700;
}

/* ========================================
   솔루션
======================================== */
.solutions-section {
    background: var(--paper);
}

.solutions-grid {
    display: grid;
    /* 폭이 420px 이상 확보될 때만 다단 배치 — 리사이즈 시 연속적으로 재배치 */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: 26px;
}

.solution-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 34px 32px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.solution-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

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

.solution-idx {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--faint);
}

.solution-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--mute);
    border: 1px solid var(--line-dark);
    border-radius: 999px;
    padding: 4px 12px;
}

.solution-tag-ai {
    color: var(--signal);
    border-color: rgba(0, 188, 212, 0.45);
}

.solution-title {
    font-size: 1.42rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 14px;
}

.solution-desc {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--mute);
    margin-bottom: 22px;
}

.solution-desc strong {
    color: var(--ink);
}

.equipment-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.equipment-item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px;
}

.equipment-item img {
    width: 100%;
    height: 110px;
    object-fit: contain;
    margin-bottom: 10px;
}

.equipment-item figcaption {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--ink);
}

.equipment-item figcaption span {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 400;
    color: var(--faint);
    margin-top: 4px;
}

.metric-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
    padding-top: 18px;
    gap: 10px;
}

.metric-row dt {
    font-size: 0.74rem;
    color: var(--faint);
    margin-bottom: 4px;
}

.metric-row dd {
    font-family: var(--font-mono);
    font-size: 1.28rem;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.02em;
}

.metric-row dd i {
    font-style: normal;
    font-size: 0.85rem;
    color: var(--hive);
}

.solution-visual {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 20px;
    background: var(--paper);
}

.solution-visual img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    object-position: top;
}

.solution-visual figcaption {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--mute);
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    background: var(--white);
}

.solution-list {
    list-style: none;
}

.solution-list li {
    position: relative;
    font-size: 0.9rem;
    color: var(--mute);
    line-height: 1.7;
    padding: 7px 0 7px 22px;
}

.solution-list li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 15px;
    width: 8px;
    height: 9px;
    background: var(--hive);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    opacity: 0.7;
}

.preview-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.preview-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--paper);
}

.preview-item img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    object-position: top;
}

.preview-item figcaption {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--mute);
    padding: 8px 12px;
    border-top: 1px solid var(--line);
    background: var(--white);
}

/* AI 카드 — 다크 패널로 차별화 */
.solution-card-ai {
    background: var(--panel);
    border-color: var(--panel-line);
}

.solution-card-ai .solution-title {
    color: var(--white);
}

.solution-card-ai .solution-desc {
    color: var(--panel-text);
}

.solution-card-ai .solution-desc strong {
    color: var(--white);
}

.solution-card-ai .solution-idx {
    color: var(--panel-faint);
}

.ai-list {
    list-style: none;
    margin-bottom: 24px;
}

.ai-list li {
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--panel-faint);
    padding: 13px 0;
    border-bottom: 1px solid var(--panel-line);
}

.ai-list li:first-child {
    padding-top: 0;
}

.ai-list li b {
    display: block;
    font-size: 0.94rem;
    color: var(--signal);
    margin-bottom: 4px;
}

.ai-case {
    cursor: pointer;
    border-color: var(--panel-line);
    background: var(--panel-2);
    margin-bottom: 0;
    transition: border-color 0.2s ease;
}

.ai-case:hover {
    border-color: var(--signal);
}

.ai-case figcaption {
    background: var(--panel-2);
    border-top-color: var(--panel-line);
    color: var(--panel-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.ai-case .view-hint {
    color: var(--signal);
    white-space: nowrap;
}

/* ========================================
   프로젝트 원장 (Ledger)
======================================== */
.projects-section {
    background: var(--white);
}

.ledger {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
}

.ledger-head,
.ledger-row {
    display: grid;
    grid-template-columns: 150px 1.5fr 1.7fr 135px 84px 104px;
    gap: 18px;
    align-items: center;
    padding: 16px 22px;
}

.ledger-head {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--faint);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.ledger-row {
    border-bottom: 1px solid var(--line);
    transition: background 0.2s ease;
}

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

.ledger-row:hover {
    background: var(--paper);
}

.lg-client {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--mute);
    line-height: 1.5;
}

.lg-name {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.lg-scope {
    font-size: 0.82rem;
    color: var(--mute);
    line-height: 1.6;
}

.lg-ai {
    color: var(--hive);
    font-weight: 600;
}

.lg-period {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

.lg-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mute);
}

.lg-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--line-dark);
}

.is-ongoing .lg-status {
    color: var(--signal-deep);
}

.is-ongoing .lg-status i {
    background: var(--signal);
    animation: pulse 1.4s ease infinite;
}

.btn-detail {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line-dark);
    border-radius: 999px;
    padding: 7px 14px;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-detail:hover {
    background: var(--hive);
    border-color: var(--hive);
    color: var(--white);
}

/* ========================================
   회사 소개
======================================== */
.about-section {
    background: var(--paper);
}

.about-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
    align-items: center;
}

.about-copy p {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--mute);
    margin-top: 20px;
}

.about-copy p strong {
    color: var(--ink);
}

.about-list {
    list-style: none;
    margin-top: 30px;
    border-top: 1px solid var(--line-dark);
}

.about-list li {
    position: relative;
    font-size: 0.92rem;
    color: var(--mute);
    padding: 13px 0 13px 24px;
    border-bottom: 1px solid var(--line);
}

.about-list li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 20px;
    width: 8px;
    height: 9px;
    background: var(--hive);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.about-quote {
    background: var(--panel);
    border-radius: var(--radius);
    padding: 52px 44px;
    box-shadow: var(--shadow-panel);
}

.about-quote blockquote {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.55;
    color: var(--white);
    border: none;
}

.quote-tagline {
    margin-top: 30px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    line-height: 1.8;
    color: var(--signal);
}

/* ========================================
   연락처
======================================== */
.contact-section {
    background: var(--white);
}

.contact-section .section-head {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 340px));
    justify-content: center;
    gap: 24px;
}

.contact-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--hive);
}

.contact-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--hive);
    margin-bottom: 12px;
}

.contact-value {
    display: block;
    font-size: 1.24rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.contact-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--faint);
    margin-top: 10px;
}

/* ========================================
   푸터
======================================== */
footer {
    background: var(--panel);
    padding: 64px 0 40px;
}

.footer-content {
    text-align: center;
}

.footer-logo-image {
    height: 40px;
    width: auto;
    margin: 0 auto 18px;
}

.footer-tagline {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    color: var(--signal);
    margin-bottom: 28px;
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 26px;
    margin-bottom: 30px;
}

.footer-links a {
    font-size: 0.88rem;
    color: var(--panel-faint);
    transition: color 0.2s ease;
}

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

.footer-bottom {
    font-size: 0.78rem;
    color: var(--panel-faint);
    border-top: 1px solid var(--panel-line);
    padding-top: 26px;
}

/* ========================================
   토스트 메시지
======================================== */
.toast-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--panel);
    color: var(--white);
    border: 1px solid var(--panel-line);
    border-radius: var(--radius);
    padding: 18px 22px;
    min-width: 300px;
    max-width: 400px;
    box-shadow: var(--shadow-panel);
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}

.toast.show {
    opacity: 1;
    transform: scale(1);
}

.toast-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hive);
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 700;
}

.toast-title {
    font-size: 0.94rem;
    font-weight: 700;
    margin-bottom: 3px;
}

.toast-message {
    font-size: 0.84rem;
    color: var(--panel-text);
    line-height: 1.5;
}

.toast-submessage {
    font-size: 0.76rem;
    color: var(--panel-faint);
    margin-top: 3px;
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--signal);
    animation: toastProgress 4s linear forwards;
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0; }
}

/* ========================================
   갤러리 모달
======================================== */
.gallery-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-modal.active {
    opacity: 1;
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 19, 26, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.gallery-container {
    position: relative;
    width: min(1080px, 94vw);
    max-height: 92vh;
    background: var(--white);
    border-radius: var(--radius);
    padding: 32px 36px 24px;
    overflow-y: auto;
    transform: translateY(16px);
    transition: transform 0.3s ease;
}

.gallery-modal.active .gallery-container {
    transform: none;
}

.gallery-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--mute);
    font-size: 1.3rem;
    line-height: 1;
    z-index: 2;
    transition: background 0.2s ease, color 0.2s ease;
}

.gallery-close:hover {
    background: var(--hive);
    border-color: var(--hive);
    color: var(--white);
}

.gallery-header {
    margin-bottom: 22px;
    padding-right: 48px;
}

.gallery-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--hive);
    border: 1px solid rgba(233, 30, 99, 0.4);
    border-radius: 999px;
    padding: 5px 13px;
    margin-bottom: 12px;
}

.gallery-title {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.35;
}

.gallery-subtitle {
    font-size: 0.86rem;
    color: var(--mute);
    margin-top: 8px;
}

.gallery-main {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.gallery-slides {
    flex: 1;
    min-width: 0;
    position: relative;
}

.gallery-slide {
    display: none;
}

.gallery-slide.active {
    display: block;
    animation: popIn 0.35s ease;
}

.gallery-slide img {
    width: 100%;
    max-height: 54vh;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
}

.slide-caption {
    padding: 14px 4px 0;
}

.slide-caption h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 5px;
}

.slide-caption p {
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--mute);
}

.gallery-nav {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line-dark);
    background: var(--white);
    color: var(--ink);
    font-size: 0.95rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.gallery-nav:hover {
    background: var(--ink);
    color: var(--white);
}

.gallery-thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.thumbnail {
    flex-shrink: 0;
    width: 96px;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
    opacity: 0.55;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.thumbnail:hover {
    opacity: 0.85;
}

.thumbnail.active {
    opacity: 1;
    border-color: var(--hive);
}

.thumbnail img {
    width: 100%;
    height: 56px;
    object-fit: cover;
}

.thumb-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    text-align: center;
    color: var(--mute);
    padding: 4px 2px;
    background: var(--paper);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.gallery-counter {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

.gallery-ai-badge {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--signal-deep);
    border: 1px solid rgba(0, 188, 212, 0.4);
    border-radius: 999px;
    padding: 5px 13px;
}

/* ========================================
   반응형
======================================== */
@media (max-width: 1080px) {
    .pipeline {
        grid-template-columns: repeat(2, 1fr);
    }

    .pipeline::before {
        display: none;
    }

    .pipe-step:last-child {
        grid-column: span 2;
    }

    .ledger-head {
        display: none;
    }

    .ledger-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "client status"
            "name name"
            "scope scope"
            "period action";
        gap: 8px 16px;
        padding: 20px 22px;
    }

    .lg-client { grid-area: client; }
    .lg-name { grid-area: name; font-size: 1rem; }
    .lg-scope { grid-area: scope; }
    .lg-period { grid-area: period; align-self: center; }
    .lg-status { grid-area: status; justify-self: end; }
    .lg-action { grid-area: action; justify-self: end; }
}

@media (max-width: 900px) {
    .nav-links {
        gap: 20px;
    }

    .nav-links a {
        font-size: 0.86rem;
    }
}

@media (max-width: 960px) {
    .hero {
        padding: 130px 0 72px;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero-lead {
        max-width: 100%;
    }

    .terminal-body {
        height: 420px;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }
}

@media (max-width: 640px) {
    .section {
        padding: 80px 0;
    }

    .br-mobile {
        display: inline;
    }

    .nav-links {
        gap: 18px;
    }

    .nav-links li:not(:last-child) {
        display: none;
    }

    .hero-title {
        font-size: 2.1rem;
    }

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

    .pipe-step:last-child {
        grid-column: auto;
    }

    .ledger-strip-inner {
        justify-content: flex-start;
        gap: 14px 28px;
    }

    .ledger-item b {
        font-size: 1.15rem;
    }

    .metric-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .metric-row dd {
        font-size: 1.05rem;
    }

    .solution-card {
        padding: 26px 22px;
    }

    .about-quote {
        padding: 38px 30px;
    }

    .about-quote blockquote {
        font-size: 1.25rem;
    }

    .gallery-container {
        padding: 24px 18px 18px;
    }

    .gallery-nav {
        display: none;
    }

    .terminal-body {
        height: 300px;      /* ⛔모바일에서 데스크톱(430px)보다 크면 빈 검은 박스가 된다 */
        padding: 16px;
    }

    .term-user-text {
        font-size: 0.94rem;
    }
}


/* ── v3 개념 삽화 (2026-08-30) ─────────────────────────────
   L2 개념 이미지: 실물이 없는 단계를 그림으로 설명한다.
   ⛔장식이 아니라 설명이므로 alt 를 반드시 채운다. */
.pipe-visual {
    margin: 12px 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--white);
}
.pipe-visual img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.pipe-step:hover .pipe-visual { border-color: var(--line-dark); }

.about-visual {
    margin: 18px 0 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
    max-width: 520px;
}
.about-visual img { display: block; width: 100%; height: auto; }

/* hero 배경 — 텍스트 가독성을 해치지 않도록 아주 옅게 */
.hero {
    background-image: url('/static/images/bg_hero.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--white);
    opacity: 0.86;
    pointer-events: none;
    z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

@media (max-width: 900px) {
    /* ⛔모바일에서 삽화를 숨기지 않는다 — 다섯 단계를 그림으로 설명하는 것이 이 섹션의 목적이다.
       카드가 세로로 쌓이므로 폭을 제한해 중앙에 두면 자연스럽다. */
    .pipe-visual { display: block; max-width: 300px; margin: 12px auto 14px; }
}

/* ── 질문이 답이 되는 순간 (v3 신설 2026-08-30) ─────────────────
   시그니처 섹션. 대담함은 여기 한 곳에만 쓰고 나머지는 조용히 둔다.
   구조가 곧 메시지다 — 왼쪽(전통)은 흐리게, 오른쪽(우리)은 또렷하게. */
.showcase-section {
    background: var(--white);
    border-top: 1px solid var(--line);
}

/* 대비 — 이 섹션의 논지 */
.contrast {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    margin: 8px 0 44px;
}
.contrast-col {
    padding: 22px 24px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}
.contrast-old {
    background: var(--paper);
    color: var(--faint);
}
.contrast-new {
    background: var(--white);
    border-color: var(--hive);
    box-shadow: var(--shadow-sm);
}
.contrast-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    margin: 0 0 12px;
    text-transform: uppercase;
}
.contrast-old .contrast-label { color: var(--faint); }
.contrast-new .contrast-label { color: var(--hive); }
.contrast-col ul { margin: 0; padding-left: 18px; }
.contrast-col li { margin: 7px 0; font-size: 0.93rem; line-height: 1.6; }
.contrast-old li { text-decoration: line-through; text-decoration-color: var(--line-dark); }
.contrast-new li { color: var(--ink); }
.contrast-arrow {
    font-size: 1.6rem;
    color: var(--hive);
    font-weight: 300;
}

/* 실제 동작 — 생성 영상이 아니라 운영 화면 녹화다 */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.showcase-item {
    margin: 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.showcase-item:hover {
    border-color: var(--line-dark);
    box-shadow: var(--shadow-md);
}
.showcase-video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background: var(--panel);
    object-fit: cover;
}
.showcase-item figcaption { padding: 16px 18px 20px; }
.sc-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--signal-deep);
    margin: 0 0 8px;
}
.showcase-item h3 {
    font-size: 1.02rem;
    line-height: 1.45;
    margin: 0 0 9px;
    color: var(--ink);
}
.sc-desc {
    font-size: 0.87rem;
    line-height: 1.65;
    color: var(--mute);
    margin: 0;
}
.showcase-note {
    margin: 26px 0 0;
    font-size: 0.82rem;
    color: var(--faint);
    text-align: center;
}

@media (max-width: 900px) {
    .contrast { grid-template-columns: 1fr; gap: 12px; }
    .contrast-arrow { transform: rotate(90deg); justify-self: center; }
    .showcase-grid { grid-template-columns: 1fr; }
}

/* ── 다음에 하려는 일 (v3 신설 2026-08-30) ─────────────────
   실적이 아니라 소망을 말하는 섹션. 톤을 낮추고 마지막에 정직한 단서를 단다. */
.next-section { background: var(--paper); border-top: 1px solid var(--line); }

.next-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 6px 0 34px;
}
.nf-step {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 22px 20px;
    position: relative;
}
.nf-num {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--faint);
}
.nf-step h3 { font-size: 1rem; margin: 10px 0 8px; color: var(--ink); }
.nf-step p { font-size: 0.89rem; line-height: 1.68; color: var(--mute); margin: 0; }

/* Sim2Real — 이 계획의 가장 어려운 지점을 먼저 꺼내 놓는 자리.
   어두운 밴드로 앞(3단계)과 뒤(3개 대상)를 끊어 준다. */
.sim2real {
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 28px;
    background: var(--ink);
    border-radius: var(--radius);
    padding: 28px 30px;
    margin: 0 0 34px;
}
.s2r-cap {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--signal);
    margin: 0 0 6px;
}
.s2r-sub {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.42);
    margin: 0;
}
.s2r-body h3 {
    font-size: 1.06rem;
    color: var(--white);
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}
.s2r-body > p {
    font-size: 0.89rem;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.66);
    margin: 0 0 18px;
}
.s2r-body > p strong { color: var(--white); font-weight: 600; }

.s2r-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
}
.s2r-list li {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-top: 12px;
    font-size: 0.83rem;
    line-height: 1.66;
    color: rgba(255, 255, 255, 0.56);
}
.s2r-list b {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 5px;
}

/* 실증 스택 — 남이 만든 하드웨어 위에서 먼저 증명한다는 자리.
   제품 사진을 지어내지 않는다. 사양은 글자로만 적는다. */
.proving { margin: 0 0 34px; }
.pv-cap {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--hive);
    margin: 0 0 10px;
}
.pv-head h3 {
    font-size: 1.14rem;
    color: var(--ink);
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}
.pv-lead {
    font-size: 0.9rem;
    line-height: 1.72;
    color: var(--mute);
    margin: 0 0 20px;
    max-width: 62ch;
}
.pv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.pv-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 20px 18px;
    display: flex;
    flex-direction: column;
}
.pv-tag {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    color: var(--faint);
    margin: 0 0 8px;
}
.pv-card h4 {
    font-size: 0.98rem;
    color: var(--ink);
    margin: 0 0 9px;
    letter-spacing: -0.01em;
}
.pv-card > p:not(.pv-tag):not(.pv-meta) {
    font-size: 0.85rem;
    line-height: 1.68;
    color: var(--mute);
    margin: 0 0 14px;
    flex: 1;
}
.pv-meta {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.6;
    color: var(--faint);
    border-top: 1px solid var(--line);
    padding-top: 10px;
    margin: 0;
}
.pv-note {
    margin: 16px 0 0;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--mute);
}

.next-targets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}
.nt-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 22px 22px;
}
/* 가장 먼저 시험해 볼 곳만 표시한다 — 나머지는 조용히 */
.nt-card-near { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.nt-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--faint);
    margin: 0 0 8px;
}
.nt-card-near .nt-tag { color: var(--signal-deep); }
.nt-card h3 { font-size: 1.02rem; margin: 0 0 9px; color: var(--ink); }
.nt-card p { font-size: 0.88rem; line-height: 1.68; color: var(--mute); margin: 0; }

.next-note {
    margin: 26px 0 0;
    padding: 14px 18px;
    background: var(--white);
    border-left: 3px solid var(--line-dark);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--mute);
}

@media (max-width: 900px) {
    .next-flow, .next-targets { grid-template-columns: 1fr; }
    .sim2real { grid-template-columns: 1fr; gap: 18px; padding: 24px 22px; }
    .s2r-label { display: flex; align-items: baseline; gap: 10px; }
    .s2r-cap { margin: 0; }
    .s2r-list { grid-template-columns: 1fr; gap: 13px; }
    .pv-grid { grid-template-columns: 1fr; }
}

/* next 섹션 개념 삽화 — 아직 없는 것을 말하는 자리라 생성 이미지가 유일한 수단이다 */
.nf-visual, .nt-visual {
    margin: 0 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--white);
}
.nf-visual img, .nt-visual img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.nt-card-near .nt-visual { border-color: var(--signal); }

/* ── 연결구성 IR 엔진 (v3 신설 2026-08-30) ─────────────────
   숫자 두 개가 논지 전부다. 장식을 붙이지 않는다. */
.ir-engine {
    margin-top: 44px;
    padding: 32px 34px 30px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.ir-head { margin-bottom: 26px; }
.ir-title { font-size: 1.4rem; line-height: 1.4; margin: 8px 0 12px; color: var(--ink); }
.ir-lead { font-size: 0.94rem; line-height: 1.8; color: var(--mute); margin: 0; max-width: 78ch; }

.ir-body { display: grid; grid-template-columns: minmax(300px, 0.9fr) 1.1fr; gap: 30px; align-items: start; }

.ir-metrics { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.ir-metric { padding: 18px 16px; border-radius: var(--radius-sm); text-align: center; }
.ir-metric-before { background: var(--paper); color: var(--faint); }
.ir-metric-after { background: var(--hive-soft); }
.ir-m-label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; margin: 0 0 8px; }
.ir-metric-after .ir-m-label { color: var(--hive-deep); }
.ir-m-value { font-size: 1.9rem; font-weight: 800; margin: 0; letter-spacing: -0.02em; }
.ir-metric-before .ir-m-value { color: var(--faint); }
.ir-metric-after .ir-m-value { color: var(--hive); }
.ir-m-value i { font-style: normal; font-size: 1rem; font-weight: 700; margin-left: 1px; }
.ir-m-note { font-size: 0.78rem; margin: 7px 0 0; line-height: 1.55; }
.ir-metric-after .ir-m-note { color: var(--mute); }
.ir-metric-arrow { color: var(--hive); font-size: 1.3rem; font-weight: 300; }

.ir-d-title {
    font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.04em;
    color: var(--ink); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.ir-d-text { font-size: 0.9rem; line-height: 1.8; color: var(--mute); margin: 0 0 14px; }
.ir-proof {
    font-size: 0.86rem; line-height: 1.7; color: var(--ink); margin: 0;
    padding: 12px 14px; background: var(--signal-soft);
    border-left: 3px solid var(--signal); border-radius: var(--radius-sm);
}

@media (max-width: 900px) {
    .ir-engine { padding: 24px 20px; }
    .ir-body { grid-template-columns: 1fr; gap: 22px; }
    .ir-metrics { grid-template-columns: 1fr; }
    .ir-metric-arrow { transform: rotate(90deg); justify-self: center; }
}
.ir-d-title-2 { margin-top: 18px; }
.ir-detail code {
    font-family: var(--font-mono); font-size: 0.82em;
    background: var(--paper); padding: 1px 5px; border-radius: 4px; color: var(--ink);
}
.ir-lead + .ir-lead { margin-top: 12px; }
.ir-m-caption {
    font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
    color: var(--faint); margin: 0 0 10px;
}

/* 캡션+수치를 한 덩어리로 묶어 그리드 자식을 둘로 유지한다 */
.ir-metrics-wrap { align-self: start; }
.nf-video, .nt-video {
    display: block; width: 100%; height: auto;
    aspect-ratio: 4 / 3; object-fit: cover; background: var(--white);
}

/* 구성도 연결선을 따라가는 파싱 애니메이션 — 설명용이라 조작 UI 를 두지 않는다 */
.ir-walk { grid-column: 1 / -1; margin: 0 0 26px; }
.ir-walk-video {
    display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white);
}
.ir-walk figcaption {
    margin-top: 9px; font-size: 0.8rem; color: var(--faint); text-align: center;
}

/* ── 파싱 엔진 · 취합하는 데이터의 정합성 (전폭 3열, 2026-09-06) ── */
.ir-consist { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--line); }
.ir-consist-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ir-consist-title { font-size: 1.25rem; font-weight: 700; color: var(--ink); margin: 0; }
.ir-consist-lead { font-size: 0.92rem; color: var(--mute); margin: 0; }
.ir-consist-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.ir-c-col { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
.ir-c-step { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--hive); margin: 0 0 8px; }
.ir-c-title { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 10px; line-height: 1.45; }
.ir-c-list { margin: 0 0 12px; padding-left: 18px; font-size: 0.88rem; line-height: 1.7; color: var(--mute); }
.ir-c-list li + li { margin-top: 4px; }
.ir-c-list code { font-family: var(--font-mono); font-size: 0.82em; background: var(--mist, #f3f5f7); padding: 1px 5px; border-radius: 4px; color: var(--ink); }
.ir-c-text { font-size: 0.9rem; line-height: 1.75; color: var(--ink); margin: 0; }
@media (max-width: 900px) { .ir-consist-grid { grid-template-columns: 1fr; gap: 14px; } }

/* 2026-09-06 합성 표본 학교 고지 */
.sc-note{display:block;margin-top:.5rem;font-size:.82em;color:#8a94a6}


/* 2026-09-06 소개서 다운로드 버튼 */
.contact-downloads{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:32px}
.btn-download{display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:240px;padding:16px 28px;border-radius:999px;background:var(--ink,#111827);color:#fff;text-decoration:none;box-shadow:0 8px 24px rgba(17,24,39,.18);transition:transform .2s ease,box-shadow .2s ease}
.btn-download:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(17,24,39,.26);color:#fff}
.btn-download-label{font-weight:700;font-size:1.05rem;letter-spacing:.01em}
.btn-download-label sup{font-size:.55em;margin-left:1px}
.btn-download-sub{font-size:.8rem;opacity:.75}

/* 2026-09-06 비밀번호 다운로드 모달 */
.btn-download-locked{border:0;font:inherit;cursor:pointer}
.dl-modal{position:fixed;inset:0;margin:auto;border:0;border-radius:16px;padding:0;max-width:440px;width:calc(100% - 32px);max-height:calc(100% - 32px);overflow-x:hidden;overflow-y:auto;box-shadow:0 24px 60px rgba(17,24,39,.28)}
.dl-modal, .dl-modal *{box-sizing:border-box}
.dl-modal::backdrop{background:rgba(17,24,39,.55)}
.dl-modal-form{display:flex;flex-direction:column;gap:10px;padding:28px 28px 22px;background:var(--paper,#fff);color:var(--ink,#111827);width:100%;min-width:0}
.dl-modal-title{margin:0;font-size:1.15rem;font-weight:700}
.dl-modal-note{margin:0 0 6px;font-size:.93rem;line-height:1.55;color:#374151}
.dl-modal-label{font-size:.85rem;font-weight:600}
.dl-modal-input{width:100%;max-width:100%;padding:11px 12px;border:1px solid var(--line,#d1d5db);border-radius:8px;font-size:1rem;letter-spacing:.08em}
.dl-modal-input:focus{outline:2px solid #5b6cff;outline-offset:1px}
.dl-modal-msg{margin:0;min-height:1.2em;font-size:.88rem;color:#b42318}
.dl-modal-msg.ok{color:#067647}
.dl-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.dl-modal-cancel{padding:10px 16px;border:1px solid var(--line,#d1d5db);border-radius:8px;background:#fff;cursor:pointer;font:inherit}
.dl-modal-submit{padding:10px 18px;border:0;border-radius:8px;background:var(--ink,#111827);color:#fff;font-weight:600;cursor:pointer;font:inherit}
.dl-modal-submit[disabled]{opacity:.6;cursor:default}
.btn-lead{border:0;font:inherit;cursor:pointer}
.dl-modal-input.plain{letter-spacing:normal}
.dl-modal-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.dl-modal-row>div{display:flex;flex-direction:column;gap:6px}
.dl-modal-label .req{color:#b42318}
.dl-modal-agree{display:flex;gap:8px;align-items:flex-start;font-size:.82rem;line-height:1.5;color:#374151;margin-top:4px}
.dl-modal-agree input{margin-top:3px}
@media (max-width:480px){.dl-modal-row{grid-template-columns:1fr}}
/* 2026-09-06 상단 메뉴 관리자 링크 — 다른 메뉴보다 한 단계 옅게 */
.nav-links a.nav-admin{color:var(--faint)}
.nav-links a.nav-admin:hover{color:var(--hive)}