/* =========================================================
   AX Discovery — Interaction Enhancements (v2)
   원본 디자인 유지 + 인터랙션 강화 + 신규 섹션
   ========================================================= */

/* -----------------------------
   A. Scroll Progress Bar
   ----------------------------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: 9999;
    pointer-events: none;
}

.scroll-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-neon-blue), var(--color-cyan-glow));
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
    transition: width 0.05s linear;
    will-change: width;
}

/* -----------------------------
   B. Hero Cursor Glow
   ----------------------------- */
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.18) 0%, rgba(0, 112, 243, 0.08) 30%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    transition: opacity 0.4s ease;
    opacity: 0;
    mix-blend-mode: screen;
    filter: blur(40px);
    will-change: transform, opacity;
}

.cursor-glow.is-active { opacity: 1; }

@media (pointer: coarse) {
    .cursor-glow { display: none; }
}

/* -----------------------------
   C. Enhanced Reveal Animations
   ----------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(36px);
    filter: blur(6px);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter;
}

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

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }

.split-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px) rotate(2deg);
    filter: blur(8px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter;
}

.split-word.visible {
    opacity: 1;
    transform: translateY(0) rotate(0);
    filter: blur(0);
}

/* -----------------------------
   D. Card Tilt 3D
   ----------------------------- */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    will-change: transform;
}

.tilt-card.is-tilting {
    transition: transform 0.1s linear;
    transform:
        perspective(1000px)
        rotateX(var(--rx, 0))
        rotateY(var(--ry, 0))
        translateZ(var(--tz, 0));
}

.tilt-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        circle at var(--mx, 50%) var(--my, 50%),
        rgba(0, 240, 255, 0.15) 0%,
        transparent 50%
    );
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 1;
}

.tilt-card.is-tilting::after { opacity: 1; }
.tilt-card > * { position: relative; z-index: 2; }

@media (pointer: coarse) {
    .tilt-card.is-tilting { transform: none; }
    .tilt-card::after { display: none; }
}

/* -----------------------------
   E. Magnetic Button
   ----------------------------- */
.btn-magnetic {
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

@media (pointer: coarse) {
    .btn-magnetic { transform: none !important; }
}

/* -----------------------------
   F. Number Counter Style
   ----------------------------- */
.counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

.counter-wrap {
    position: relative;
    display: inline-block;
}

.counter-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-cyan-glow), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s ease 0.5s;
}

.counter-wrap.counted::after { transform: scaleX(1); }

@keyframes counter-pulse {
    0%, 100% { text-shadow: 0 0 0 transparent; }
    50% { text-shadow: 0 0 24px rgba(0, 240, 255, 0.6); }
}

.counter-wrap.counted .counter {
    animation: counter-pulse 1.2s ease-out;
}

/* -----------------------------
   G. Keyword Marquee
   ----------------------------- */
.marquee {
    overflow: hidden;
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(0, 240, 255, 0.18);
    border-bottom: 1px solid rgba(0, 240, 255, 0.18);
    background: linear-gradient(90deg, rgba(0, 112, 243, 0.04), rgba(0, 240, 255, 0.04));
    padding: 22px 0;
}

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

.marquee::before {
    left: 0;
    background: linear-gradient(90deg, var(--color-navy), transparent);
}

.marquee::after {
    right: 0;
    background: linear-gradient(-90deg, var(--color-navy), transparent);
}

.marquee-track {
    display: flex;
    gap: 56px;
    width: max-content;
    animation: marquee-scroll 50s linear infinite;
    white-space: nowrap;
    will-change: transform;
}

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

.marquee-item {
    font-family: var(--font-mono);
    font-size: clamp(1rem, 0.8rem + 0.8vw, 1.4rem);
    font-weight: 500;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: inline-flex;
    align-items: center;
    gap: 56px;
}

.marquee-item .sep {
    color: var(--color-cyan-glow);
    font-weight: 700;
    opacity: 0.7;
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* -----------------------------
   H. Scroll-To-Top Button
   ----------------------------- */
.to-top {
    position: fixed;
    right: clamp(16px, 3vw, 32px);
    bottom: clamp(16px, 3vw, 32px);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(10, 17, 34, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 240, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 90;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: opacity 0.3s, transform 0.3s, border-color 0.3s, box-shadow 0.3s;
    color: var(--color-cyan-glow);
}

.to-top.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.to-top:hover {
    border-color: var(--color-cyan-glow);
    box-shadow: 0 0 24px rgba(0, 240, 255, 0.4);
    transform: translateY(-2px) scale(1.05);
}

.to-top svg { width: 18px; height: 18px; }

/* -----------------------------
   I. Nav Enhanced
   ----------------------------- */
.nav {
    transition: padding 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease;
}

.nav.scrolled {
    background: rgba(5, 11, 20, 0.85);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(0, 240, 255, 0.12);
}

.nav.scrolled .nav-inner {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* -----------------------------
   J. Card Glow on Hover
   ----------------------------- */
.pain-card, .solution-card, .feature-card {
    position: relative;
    overflow: hidden;
}

.pain-card::before, .solution-card::before, .feature-card::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at var(--mx, 50%) var(--my, 50%),
        rgba(0, 240, 255, 0.12),
        transparent 30%
    );
    opacity: 0;
    transition: opacity 0.4s;
    pointer-events: none;
}

.pain-card:hover::before,
.solution-card:hover::before,
.feature-card:hover::before { opacity: 1; }

/* -----------------------------
   K. Reduced motion
   ----------------------------- */
@media (prefers-reduced-motion: reduce) {
    .reveal, .split-word {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .cursor-glow, .scroll-progress { display: none; }
    .marquee-track { animation: none; }
    .tilt-card.is-tilting { transform: none !important; }
}

/* -----------------------------
   L. CTA shimmer
   ----------------------------- */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-primary:hover::after { left: 130%; }

@media (max-width: 640px) {
    .marquee-item { gap: 40px; }
    .marquee-track { gap: 40px; }
}

/* =============================================================
   ★ HERO COVER IMAGE — 배경 색상 매칭
   이미지 가장자리가 떠보이지 않도록 마스크로 페이드
   ============================================================= */
.hero-cover-img {
    mask-image: radial-gradient(
        ellipse 80% 75% at center,
        rgba(0, 0, 0, 1) 30%,
        rgba(0, 0, 0, 0.7) 55%,
        rgba(0, 0, 0, 0.3) 75%,
        rgba(0, 0, 0, 0) 95%
    );
    -webkit-mask-image: radial-gradient(
        ellipse 80% 75% at center,
        rgba(0, 0, 0, 1) 30%,
        rgba(0, 0, 0, 0.7) 55%,
        rgba(0, 0, 0, 0.3) 75%,
        rgba(0, 0, 0, 0) 95%
    );
    opacity: 0.65;
}

.hero-cover-veil {
    background:
        radial-gradient(ellipse at center, transparent 0%, rgba(5, 11, 20, 0.3) 45%, rgba(5, 11, 20, 0.9) 80%, rgba(5, 11, 20, 1) 100%),
        linear-gradient(180deg, rgba(5, 11, 20, 0.5) 0%, transparent 25%, transparent 70%, rgba(5, 11, 20, 1) 100%) !important;
}

/* =============================================================
   ★ NEW: WHY 섹션 — 95% vs 5%
   ============================================================= */
.section-why {
    position: relative;
    overflow: hidden;
}

.why-hook {
    text-align: center;
    margin-bottom: 80px;
}

.why-hook-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fca5a5;
    margin-bottom: 24px;
}

.why-hook-eyebrow .pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--color-danger);
    border-radius: 50%;
    animation: pulse-dot 1.8s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    50% { opacity: 0.7; transform: scale(1.15); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
}

.why-hook-headline {
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3.75rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--color-white);
    word-break: keep-all;
    max-width: 920px;
    margin: 0 auto 20px;
}

.why-hook-headline em {
    font-style: normal;
    background: linear-gradient(135deg, var(--color-neon-blue) 0%, var(--color-cyan-glow) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.why-hook-source {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-gray-500);
    letter-spacing: 0.05em;
}

/* 95% vs 5% 시각화 */
.why-stat-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 0 auto 80px;
    max-width: 1080px;
}

@media (min-width: 720px) {
    .why-stat-split {
        grid-template-columns: 1fr 1fr;
    }
}

.why-stat-card {
    padding: clamp(28px, 4vw, 48px);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}

.why-stat-card.fail {
    background: linear-gradient(145deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.02));
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.why-stat-card.success {
    background: linear-gradient(145deg, rgba(0, 240, 255, 0.1), rgba(0, 240, 255, 0.02));
    border: 1px solid rgba(0, 240, 255, 0.3);
    box-shadow: 0 0 60px rgba(0, 240, 255, 0.08);
}

.why-stat-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.why-stat-card.fail .why-stat-tag {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.why-stat-card.success .why-stat-tag {
    background: rgba(0, 240, 255, 0.15);
    color: var(--color-cyan-glow);
}

.why-stat-number {
    font-family: var(--font-mono);
    font-size: clamp(4rem, 3rem + 6vw, 8rem);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.04em;
    margin-bottom: 16px;
}

.why-stat-card.fail .why-stat-number { color: #ef4444; }
.why-stat-card.success .why-stat-number {
    background: linear-gradient(135deg, var(--color-neon-blue), var(--color-cyan-glow));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.why-stat-headline {
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-white);
    margin-bottom: 12px;
    word-break: keep-all;
}

.why-stat-desc {
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--color-gray-400);
    word-break: keep-all;
}

/* HBS/BCG 데이터 박스 */
.why-data-row {
    margin-top: 48px;
    padding: 32px;
    border: 1px solid rgba(0, 240, 255, 0.18);
    border-radius: var(--radius-lg);
    background: rgba(0, 240, 255, 0.03);
}

.why-data-row-title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-cyan-glow);
    margin-bottom: 8px;
}

.why-data-row-quote {
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-white);
    margin-bottom: 28px;
    word-break: keep-all;
}

.why-data-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 720px) {
    .why-data-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.why-data-stat {
    padding-left: 20px;
    border-left: 2px solid rgba(0, 240, 255, 0.4);
}

.why-data-stat-num {
    font-family: var(--font-mono);
    font-size: clamp(2.2rem, 1.8rem + 1.5vw, 3rem);
    font-weight: 700;
    line-height: 1;
    color: var(--color-cyan-glow);
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}

.why-data-stat-num .unit {
    font-size: 0.5em;
    color: var(--color-gray-400);
    margin-left: 4px;
}

.why-data-stat-label {
    font-size: var(--text-sm);
    color: var(--color-gray-300);
    line-height: 1.5;
    word-break: keep-all;
}

.why-data-source {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    letter-spacing: 0.05em;
}

/* =============================================================
   ★ NEW: AI vs AX 비교 (기존 AI 교육과의 차이)
   ============================================================= */
.compare-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

@media (min-width: 880px) {
    .compare-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.compare-col {
    padding: clamp(32px, 4vw, 56px);
    position: relative;
}

.compare-col.left {
    background: linear-gradient(145deg, rgba(107, 114, 128, 0.08), rgba(107, 114, 128, 0.02));
}

.compare-col.right {
    background: linear-gradient(145deg, rgba(0, 240, 255, 0.08), rgba(0, 112, 243, 0.03));
}

.compare-grid::after {
    content: "VS";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-navy);
    border: 1px solid rgba(0, 240, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    color: var(--color-cyan-glow);
    z-index: 3;
    box-shadow: 0 0 24px rgba(0, 240, 255, 0.3);
}

@media (max-width: 879px) {
    .compare-col.left {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

.compare-col-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.compare-col.left .compare-col-tag {
    background: rgba(107, 114, 128, 0.2);
    color: var(--color-gray-300);
}

.compare-col.right .compare-col-tag {
    background: rgba(0, 240, 255, 0.15);
    color: var(--color-cyan-glow);
}

.compare-col-title {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--color-white);
    margin-bottom: 12px;
    word-break: keep-all;
}

.compare-col.left .compare-col-title { opacity: 0.7; }

.compare-col-subtitle {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    line-height: 1.5;
    margin-bottom: 28px;
    word-break: keep-all;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

.compare-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.compare-list li {
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    border-left: 3px solid;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
    font-size: var(--text-base);
    line-height: 1.55;
    word-break: keep-all;
}

.compare-col.left .compare-list li {
    border-left-color: rgba(107, 114, 128, 0.5);
    color: var(--color-gray-400);
}

.compare-col.right .compare-list li {
    border-left-color: var(--color-cyan-glow);
    color: var(--color-gray-100);
    background: rgba(0, 240, 255, 0.04);
}

.compare-list li .ico {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
}

.compare-col.left .compare-list li .ico {
    background: rgba(107, 114, 128, 0.2);
    color: var(--color-gray-400);
}

.compare-col.right .compare-list li .ico {
    background: rgba(0, 240, 255, 0.2);
    color: var(--color-cyan-glow);
}

/* =============================================================
   ★ NEW: 큰 통계 박스 (1인 100 에이전트 등)
   ============================================================= */
.big-stat-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 64px;
}

@media (min-width: 720px) {
    .big-stat-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

.big-stat {
    text-align: center;
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 0.3s, background 0.3s, transform 0.3s;
}

.big-stat:hover {
    border-color: rgba(0, 240, 255, 0.3);
    background: rgba(0, 240, 255, 0.03);
    transform: translateY(-4px);
}

.big-stat-value {
    font-family: var(--font-mono);
    font-size: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--color-neon-blue), var(--color-cyan-glow));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 12px;
}

.big-stat-label {
    font-size: var(--text-sm);
    color: var(--color-gray-300);
    line-height: 1.5;
    word-break: keep-all;
    font-weight: 500;
}

.big-stat-source {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-gray-500);
    letter-spacing: 0.05em;
}

/* =============================================================
   ★ NEW: Pull Quote
   ============================================================= */
.pull-quote {
    margin: 80px auto;
    max-width: 900px;
    padding: clamp(32px, 4vw, 56px);
    border-left: 3px solid var(--color-cyan-glow);
    background: linear-gradient(90deg, rgba(0, 240, 255, 0.04), transparent);
    position: relative;
}

.pull-quote::before {
    content: "“";
    position: absolute;
    top: -20px;
    left: 16px;
    font-family: Georgia, serif;
    font-size: 96px;
    line-height: 1;
    color: var(--color-cyan-glow);
    opacity: 0.4;
}

.pull-quote-text {
    font-size: clamp(1.2rem, 1rem + 0.8vw, 1.65rem);
    line-height: 1.5;
    font-weight: 500;
    color: var(--color-white);
    word-break: keep-all;
    margin-bottom: 16px;
}

.pull-quote-text em {
    color: var(--color-cyan-glow);
    font-style: normal;
    font-weight: 700;
}

.pull-quote-author {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    letter-spacing: 0.05em;
}

/* =============================================================
   ★ v3 추가: 폰트 통일 + 임팩트 강화 + 95%/5% 카운터
   ============================================================= */

/* 1. 모든 mono/캡션류 텍스트가 한글에서 시스템 폰트로 떨어지지 않도록
   강제로 sans-serif 스택 우선 (Pretendard) */
.why-hook-source,
.why-data-row-quote,
.why-stat-headline,
.why-stat-desc,
.why-data-stat-label,
.big-stat-label,
.pull-quote-text,
.pull-quote-author,
.compare-col-subtitle,
.testimonial-text,
.testimonial-credit {
    font-family: var(--font-sans);
}

/* 2. 임팩트 카드 숫자 — 폰트 사이즈 대폭 강화 */
.impact-card-value {
    font-size: clamp(3.5rem, 2.5rem + 4vw, 6rem) !important;
    font-weight: 900 !important;
    line-height: 0.9 !important;
    letter-spacing: -0.04em !important;
}

.impact-card-unit {
    font-size: clamp(1rem, 0.8rem + 0.5vw, 1.25rem) !important;
    font-weight: 700 !important;
    color: var(--color-cyan-glow) !important;
    margin-left: 4px;
}

.impact-card-stat-label {
    font-size: var(--text-xs) !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-gray-500) !important;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-weight: 500;
}

.impact-card-stat-row {
    margin-bottom: 28px;
}
.impact-card-stat-row:last-child {
    margin-bottom: 0;
}

.impact-card-label {
    font-size: var(--text-base) !important;
    font-weight: 700 !important;
    color: var(--color-white) !important;
    padding-bottom: 20px !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.01em;
}

/* 3. 95% / 5% 카운터 처리
   카운터 텍스트가 들어갈 공간 — 그라데이션을 카운터에도 동일하게 적용 */
.why-stat-number .stat-counter {
    background: inherit;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
}

/* 95% 카드는 빨강이라 background-clip 해제 (이미 단색이므로) */
.why-stat-card.fail .why-stat-number {
    color: #ef4444;
    -webkit-text-fill-color: #ef4444;
}

.why-stat-card.fail .why-stat-number .stat-counter {
    color: inherit;
    -webkit-text-fill-color: inherit;
    background: none;
}

/* 4. 풀쿼트 텍스트 강화 — 한글이 어색하지 않게 */
.pull-quote-text {
    font-family: var(--font-sans) !important;
    letter-spacing: -0.015em;
}

.pull-quote-author {
    letter-spacing: 0.05em;
    font-weight: 500;
}

/* 5. WHY hook source / data source — 한글 부분 폰트 명시 */
.why-hook-source {
    font-size: var(--text-base) !important;
    line-height: 1.65 !important;
    color: var(--color-gray-300) !important;
    letter-spacing: -0.005em;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.why-data-source {
    font-family: var(--font-sans);
    color: var(--color-gray-500);
    font-size: var(--text-xs);
    line-height: 1.5;
    letter-spacing: 0.02em;
}

/* big-stat label/source — 한글 깔끔하게 */
.big-stat-label {
    line-height: 1.55;
    letter-spacing: -0.005em;
}
.big-stat-source {
    font-family: var(--font-sans);
    letter-spacing: 0.02em;
}

/* compare 부제 — 한글 따옴표 표현 깔끔하게 */
.compare-col-subtitle {
    font-family: var(--font-sans) !important;
    font-style: italic;
    letter-spacing: -0.01em;
}


/* =============================================================
   ★ v3 마무리: 모바일 줄바꿈 처리 + 영역별 디테일
   ============================================================= */

/* 모든 long-text는 모바일에서 줄바꿈을 자연스럽게 */
.hero-subtitle,
.section-subtitle,
.feature-card-desc,
.pain-card-desc,
.solution-card-desc,
.outcome-item-desc,
.why-hook-source,
.why-stat-desc,
.why-data-row-quote,
.compare-list li,
.big-stat-label,
.pull-quote-text {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 모바일에서도 hero-title의 br는 유지 (두 줄 그대로 보이게)
   대신 폰트 크기를 더 작게 조정해서 화면에 맞춤 */
@media (max-width: 640px) {
    .hero-title {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
        line-height: 1.15 !important;
    }
    .hero-title-accent {
        display: inline-block;
    }
}

/* outcome quote가 두 줄 들어가도록 line-height */
.outcome-col-quote {
    line-height: 1.4;
}

/* WHY hook headline의 95% 강조가 카운터로 바뀌면서 width 흔들리는 거 방지 */
.why-hook-headline em {
    display: inline-block;
    min-width: 1.5em;
}

/* impact 임팩트 카드 듀얼(시간/비용) 더 큼직하게 */
.impact-card-dual {
    display: flex;
    flex-direction: column;
    gap: 24px;
}


/* =============================================================
   ★ v3.1 FIX: 임팩트 카드 숫자 크기 강제 확실히 적용
   ============================================================= */

/* 카운터에 들어간 .impact-card-value를 최우선 적용 */
.counter.impact-card-value,
span.impact-card-value {
    font-size: clamp(3.5rem, 2.5rem + 4vw, 6rem) !important;
    font-weight: 900 !important;
    line-height: 0.9 !important;
    letter-spacing: -0.04em !important;
    font-family: var(--font-mono) !important;
    background: linear-gradient(135deg, var(--color-cyan-glow), var(--color-neon-blue)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
}

/* 단위(시간, 억 원) — 숫자보다 훨씬 작게, 옆에 baseline 정렬 */
.impact-card-unit {
    font-size: clamp(0.95rem, 0.8rem + 0.4vw, 1.15rem) !important;
    font-weight: 600 !important;
    color: var(--color-gray-300) !important;
    margin-left: 8px;
    letter-spacing: -0.01em !important;
    font-family: var(--font-sans) !important;
    align-self: flex-end;
    padding-bottom: 0.3em;
}

/* 라벨(연간 절감 시간, 비용 절감) — 한글에 어울리는 자간으로 */
.impact-card-stat-label {
    font-size: var(--text-sm) !important;
    letter-spacing: 0.04em !important;  /* 기존 0.15em 너무 벌어짐 → 줄임 */
    text-transform: none !important;     /* 한글이라 uppercase 무의미 */
    color: var(--color-gray-400) !important;
    margin-bottom: 12px !important;
    font-family: var(--font-sans) !important;
    font-weight: 500 !important;
    display: block;
}

/* 카드 안 stat row 간격 + stat 자체 정렬 */
.impact-card-stat {
    display: flex;
    align-items: baseline;
    gap: 0;
}

.impact-card-stat-row {
    margin-bottom: 32px;
}
.impact-card-stat-row:last-child {
    margin-bottom: 0;
}

/* 카드 타이틀(현황 조사·진단 보고 자동화) — 더 임팩트 있게 */
.impact-card-label {
    font-size: var(--text-lg) !important;
    font-weight: 800 !important;
    color: var(--color-white) !important;
    padding-bottom: 20px !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.015em !important;
    line-height: 1.3 !important;
}


/* impact-card 안의 counter-wrap underline은 큰 폰트에 어울리지 않아 숨김 */
.impact-card-stat .counter-wrap::after {
    display: none;
}


/* =============================================================
   ★ v3.2 PDF 피드백 수정
   ============================================================= */

/* 1. Hero 영역 — 모바일/세로 화면에서 잘리지 않게 padding/min-height 조정 */
.hero {
    padding-top: clamp(40px, 8vw, 100px);
    padding-bottom: clamp(60px, 8vw, 120px);
}

/* hero 안 컨텐츠가 viewport보다 큰 경우 잘 보이도록 */
.hero-content {
    min-height: auto;
}

/* hero-title을 좀 더 컴팩트하게 (특히 모바일) */
.hero-title {
    line-height: 1.05 !important;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: clamp(2rem, 6vw, 3rem) !important;
    }
}

/* 2. 풀쿼트(Pull Quote) 큰따옴표 — Georgia 한글에 안 어울리므로 다른 방식으로 */
.pull-quote::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -3px;
    width: 56px;
    height: 56px;
    background:
        linear-gradient(135deg,
            transparent 0%, transparent 30%,
            var(--color-cyan-glow) 30%, var(--color-cyan-glow) 32%,
            transparent 32%, transparent 50%,
            var(--color-cyan-glow) 50%, var(--color-cyan-glow) 52%,
            transparent 52%);
    background-size: 18px 18px;
    background-repeat: no-repeat;
    background-position: 8px 12px, 24px 12px;
    opacity: 0;
}

/* 더 깔끔한 큰따옴표 — SVG로 가는 게 한글 무드에 잘 어울림 */
.pull-quote {
    position: relative;
    padding-top: clamp(48px, 5vw, 64px) !important;
}

.pull-quote::before {
    content: "";
    position: absolute;
    top: clamp(16px, 2vw, 24px);
    left: clamp(20px, 3vw, 32px);
    width: 36px;
    height: 28px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 28' fill='none'><path d='M14 4 Q 14 0 10 0 L 4 0 Q 0 0 0 4 L 0 14 Q 0 18 4 18 L 8 18 Q 12 18 12 22 L 12 24 Q 12 28 8 28 L 6 28' stroke='%2300f0ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M34 4 Q 34 0 30 0 L 24 0 Q 20 0 20 4 L 20 14 Q 20 18 24 18 L 28 18 Q 32 18 32 22 L 32 24 Q 32 28 28 28 L 26 28' stroke='%2300f0ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.7;
}

/* 3. pain-quote 양옆 따옴표 — 너무 멀어 보이므로 더 가깝게 + 작게 */
.pain-quote {
    position: relative;
    padding: 0 clamp(20px, 4vw, 40px) !important;
    display: inline-block;
    max-width: 100%;
}

.pain-quote::before,
.pain-quote::after {
    font-size: clamp(1.5rem, 2vw, 2rem) !important;
    opacity: 0.5;
}

/* 4. CERTIFICATION 박스 강화 */
.cert-panel {
    border: 1px solid rgba(0, 240, 255, 0.25) !important;
    background: linear-gradient(145deg, rgba(0, 240, 255, 0.05), rgba(0, 112, 243, 0.02)) !important;
    box-shadow: 0 0 80px rgba(0, 240, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    padding: clamp(48px, 6vw, 80px) clamp(32px, 4vw, 56px) !important;
}

.cert-badge {
    background: rgba(0, 240, 255, 0.12) !important;
    border: 1px solid rgba(0, 240, 255, 0.4) !important;
    color: var(--color-cyan-glow) !important;
    font-weight: 600 !important;
    padding: 8px 18px !important;
    letter-spacing: 0.15em !important;
}

.cert-title {
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem) !important;
    font-weight: 900 !important;
    margin: 16px 0 12px !important;
    line-height: 1.1 !important;
}

.cert-meta {
    color: var(--color-gray-400) !important;
    font-size: var(--text-sm) !important;
    margin-bottom: clamp(32px, 4vw, 56px) !important;
    padding-bottom: clamp(24px, 3vw, 40px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* cert-grid의 각 항목을 더 위계 있게 */
.cert-item {
    text-align: left;
    padding: clamp(20px, 2.5vw, 28px);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.cert-item-label {
    color: var(--color-cyan-glow) !important;
    font-size: var(--text-xs) !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
    display: block;
}

.cert-item-value {
    color: var(--color-gray-100) !important;
    font-size: var(--text-base) !important;
    line-height: 1.55 !important;
    word-break: keep-all;
}

/* 5. OUTCOMES 두 컬럼 — 위계 강화 */
.outcome-col {
    padding: clamp(32px, 4vw, 48px) !important;
}

.outcome-col-quote {
    font-size: var(--text-xl) !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    color: var(--color-white) !important;
    margin-bottom: clamp(28px, 4vw, 40px) !important;
    padding-bottom: clamp(20px, 3vw, 28px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    word-break: keep-all;
}

.outcome-col-label {
    font-size: var(--text-xs) !important;
    letter-spacing: 0.2em !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 100px;
    display: inline-block;
}

.outcome-col-label.org {
    background: rgba(0, 240, 255, 0.12);
    color: var(--color-cyan-glow);
    border: 1px solid rgba(0, 240, 255, 0.3);
}

.outcome-col-label.ind {
    background: rgba(0, 112, 243, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(0, 112, 243, 0.4);
}

.outcome-item {
    padding: 18px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.outcome-item:last-child {
    border-bottom: 0;
}

.outcome-item-title {
    font-size: var(--text-base) !important;
    font-weight: 700 !important;
    color: var(--color-white) !important;
    margin-bottom: 6px !important;
    line-height: 1.35;
    word-break: keep-all;
}

.outcome-item-desc {
    font-size: var(--text-sm) !important;
    line-height: 1.6 !important;
    color: var(--color-gray-400) !important;
    word-break: keep-all;
}

.outcome-item-check {
    color: var(--color-cyan-glow) !important;
    font-size: var(--text-base) !important;
    font-weight: 700;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 240, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

/* 6. 수강 신청 카드 — 디자인 강화 */
.register-card {
    padding: clamp(32px, 4vw, 48px) !important;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s, box-shadow 0.4s;
}

.register-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 240, 255, 0.4) !important;
    box-shadow: 0 12px 40px rgba(0, 240, 255, 0.12);
}

.register-card.featured {
    border: 1px solid rgba(0, 240, 255, 0.3) !important;
    background: linear-gradient(145deg, rgba(0, 240, 255, 0.06), rgba(0, 112, 243, 0.02)) !important;
    box-shadow: 0 0 60px rgba(0, 240, 255, 0.08) !important;
}

.register-card-tag {
    position: absolute !important;
    top: 0 !important;
    left: clamp(24px, 3vw, 36px) !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(135deg, var(--color-neon-blue), var(--color-cyan-glow)) !important;
    color: var(--color-navy) !important;
    font-weight: 800 !important;
    padding: 6px 14px !important;
    border-radius: 100px !important;
    font-size: var(--text-xs) !important;
    letter-spacing: 0.06em !important;
    box-shadow: 0 4px 16px rgba(0, 240, 255, 0.3) !important;
}

.register-card-title {
    font-size: var(--text-xl) !important;
    font-weight: 800 !important;
    margin-top: 8px !important;
    margin-bottom: clamp(24px, 3vw, 32px) !important;
    line-height: 1.3 !important;
    word-break: keep-all;
}

.register-card-price-current {
    font-size: clamp(2rem, 1.5rem + 2vw, 3rem) !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, var(--color-cyan-glow), var(--color-neon-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    display: block;
    margin: 4px 0;
}

.register-card-price-original {
    font-size: var(--text-sm) !important;
    color: var(--color-gray-500) !important;
    text-decoration: line-through;
    display: block;
}

.register-card-price-note {
    font-size: var(--text-xs) !important;
    color: var(--color-gray-400) !important;
    margin-top: 4px;
    display: block;
}

.register-info-row {
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 16px;
    align-items: baseline;
}

.register-info-row:last-of-type {
    border-bottom: 0;
}

.register-info-label {
    font-size: var(--text-xs) !important;
    color: var(--color-cyan-glow) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
}

.register-info-value {
    font-size: var(--text-sm) !important;
    color: var(--color-gray-100) !important;
    line-height: 1.55;
    word-break: keep-all;
}

.register-info-value small {
    display: block;
    color: var(--color-gray-500);
    font-size: var(--text-xs);
    margin-top: 2px;
}

/* 7. FAQ — 카드 느낌 강화 */
.faq-item {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: 12px !important;
    transition: border-color 0.3s, background 0.3s;
    overflow: hidden;
}

.faq-item:hover {
    border-color: rgba(0, 240, 255, 0.2) !important;
    background: rgba(0, 240, 255, 0.03) !important;
}

.faq-item.open {
    border-color: rgba(0, 240, 255, 0.35) !important;
    background: rgba(0, 240, 255, 0.04) !important;
}

.faq-question {
    padding: clamp(18px, 2.5vw, 24px) clamp(20px, 3vw, 28px) !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
    color: var(--color-gray-100) !important;
}

.faq-toggle {
    color: var(--color-cyan-glow) !important;
    font-weight: 700 !important;
}

.faq-answer-inner {
    padding: 0 clamp(20px, 3vw, 28px) clamp(20px, 2.5vw, 24px) !important;
    line-height: 1.7 !important;
    color: var(--color-gray-300) !important;
    font-size: var(--text-sm) !important;
}

/* 8. 푸터 마무리 — 페이지 끝이 갑자기 끊기지 않도록 */
.footer {
    position: relative;
    background:
        linear-gradient(180deg, transparent 0%, rgba(0, 240, 255, 0.02) 30%, var(--color-navy-deeper) 100%) !important;
    padding-top: clamp(80px, 10vw, 120px) !important;
    padding-bottom: clamp(40px, 5vw, 64px) !important;
    margin-top: clamp(40px, 6vw, 80px);
}

.footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 600px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.4), transparent);
}


/* =============================================================
   ★ v3.3 안전망: JS 실패/PDF 캡쳐 대비 fallback
   ============================================================= */

/* 인쇄/PDF 출력 시에는 모든 reveal/split-word를 즉시 보이게 */
@media print {
    .reveal,
    .split-word {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* JS가 1초 이상 안 도는 경우 — 그래도 텍스트가 보이도록 fallback
   (no-js 환경 또는 JS 로딩 실패 시) */
html.no-js .reveal,
html.no-js .split-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}


/* =============================================================
   ★ v3.4 핵심 수정
   ============================================================= */

/* 1. 등록 카드 태그 잘림 수정 — overflow: hidden 해제 + 카드 위쪽 여유 공간 확보 */
.register-card {
    overflow: visible !important;
    padding-top: clamp(40px, 5vw, 56px) !important;
}

.register-card-tag {
    top: -1px !important;
    transform: translateY(-50%) !important;
    z-index: 5;
}

/* 카드들이 들어있는 grid도 위쪽 여유 공간 */
.register-grid {
    padding-top: 20px;
}

/* 2. Hero 타이틀 그라데이션 텍스트 명시적으로 보장 (data-split 제거했지만 안전망) */
.hero-title-accent,
.hero-title .hero-title-accent {
    display: inline-block;
    background: linear-gradient(135deg, #ffffff 0%, var(--color-cyan-glow) 70%, var(--color-neon-blue) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* split-word가 그라데이션 부모 안에 들어갔을 때도 텍스트 보이게 (혹시 모를 케이스) */
.hero-title-accent .split-word {
    background: inherit !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* 3. Hero title 자체에 fallback color — 그라데이션 미지원 브라우저 대비 */
.hero-title {
    color: var(--color-white);
}


/* =============================================================
   ★ v4 — 신규 요소 + 가독성·임팩트 강화
   ============================================================= */

/* -----------------------------
   1. Hero 신뢰 칩 (Trust chips)
   ----------------------------- */
.hero-trust-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 36px;
    max-width: 720px;
}

.trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 100px;
    font-size: var(--text-sm);
    color: var(--color-gray-200);
    font-weight: 500;
    letter-spacing: -0.01em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.trust-chip .dot {
    width: 6px;
    height: 6px;
    background: var(--color-cyan-glow);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}

@media (max-width: 640px) {
    .hero-trust-chips {
        gap: 8px;
    }
    .trust-chip {
        font-size: var(--text-xs);
        padding: 6px 12px;
    }
}

/* -----------------------------
   2. Hero subtitle 더 강하게 (USP 명확화)
   ----------------------------- */
.hero-subtitle {
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem) !important;
    font-weight: 500 !important;
    line-height: 1.65 !important;
    color: var(--color-gray-200) !important;
    max-width: 680px !important;
    margin: 28px auto 28px !important;
}

.hero-subtitle strong {
    color: var(--color-white) !important;
    font-weight: 800 !important;
    background: linear-gradient(180deg, transparent 60%, rgba(0, 240, 255, 0.2) 60%);
    padding: 0 4px;
}

/* -----------------------------
   3. 골든타임 박스 (Why Now)
   ----------------------------- */
.urgency-block {
    margin: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
    padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 48px);
    border: 1px solid rgba(239, 68, 68, 0.25);
    background:
        radial-gradient(ellipse at top, rgba(239, 68, 68, 0.06), transparent 70%),
        rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    position: relative;
}

.urgency-head {
    text-align: center;
    margin-bottom: clamp(36px, 5vw, 56px);
}

.urgency-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 100px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #fca5a5;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.dot-pulse {
    width: 8px;
    height: 8px;
    background: var(--color-danger);
    border-radius: 50%;
    animation: pulse-dot 1.8s ease-in-out infinite;
}

.urgency-title {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--color-white);
    letter-spacing: -0.025em;
    word-break: keep-all;
    max-width: 820px;
    margin: 0 auto;
}

.urgency-title em {
    font-style: normal;
    color: #fca5a5;
}

.urgency-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 720px) {
    .urgency-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(20px, 2.5vw, 32px);
    }
}

.urgency-card {
    padding: clamp(24px, 3vw, 32px);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    transition: border-color 0.3s, background 0.3s, transform 0.3s;
}

.urgency-card:hover {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.04);
    transform: translateY(-3px);
}

.urgency-num {
    font-family: var(--font-mono);
    font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem);
    font-weight: 700;
    color: #fca5a5;
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: -0.03em;
    opacity: 0.7;
}

.urgency-card-title {
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--color-white);
    line-height: 1.3;
    margin-bottom: 14px;
    letter-spacing: -0.015em;
    word-break: keep-all;
}

.urgency-card-desc {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--color-gray-300);
    word-break: keep-all;
}

/* -----------------------------
   4. 중간 CTA 섹션
   ----------------------------- */
.mid-cta-section {
    padding: clamp(48px, 6vw, 80px) 0;
    position: relative;
    z-index: 2;
}

.mid-cta {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(24px, 3vw, 40px);
    padding: clamp(32px, 4vw, 56px);
    background:
        radial-gradient(ellipse at top right, rgba(0, 240, 255, 0.06), transparent 70%),
        linear-gradient(135deg, rgba(0, 240, 255, 0.05), rgba(0, 112, 243, 0.02));
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: var(--radius-lg);
    align-items: center;
}

@media (min-width: 880px) {
    .mid-cta {
        grid-template-columns: 1fr auto;
    }
}

.mid-cta.featured {
    background:
        radial-gradient(ellipse at top right, rgba(0, 240, 255, 0.1), transparent 70%),
        linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(0, 112, 243, 0.04));
    border: 1px solid rgba(0, 240, 255, 0.35);
    box-shadow: 0 0 80px rgba(0, 240, 255, 0.1);
}

.mid-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--color-cyan-glow);
    text-transform: uppercase;
    margin-bottom: 12px;
}

.mid-cta-title {
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-white);
    letter-spacing: -0.02em;
    word-break: keep-all;
    margin-bottom: 0;
}

.mid-cta-title em {
    font-style: normal;
    color: var(--color-cyan-glow);
    background: linear-gradient(135deg, var(--color-cyan-glow), var(--color-neon-blue));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mid-cta-desc {
    margin-top: 12px;
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    line-height: 1.5;
}

/* -----------------------------
   5. 포함 내역 박스 (Includes)
   ----------------------------- */
.includes-box {
    margin: 0 0 clamp(20px, 2.5vw, 28px);
    padding: clamp(20px, 2.5vw, 28px);
    background: rgba(0, 240, 255, 0.04);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: var(--radius-md);
}

.includes-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-cyan-glow);
    text-transform: uppercase;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 240, 255, 0.15);
}

.includes-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.includes-list li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: start;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--color-gray-200);
    word-break: keep-all;
}

.includes-list li strong {
    color: var(--color-white);
    font-weight: 700;
}

.ico-check {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 240, 255, 0.18);
    color: var(--color-cyan-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* =============================================================
   ★ v4 — 가독성·임팩트 글로벌 강화
   ============================================================= */

/* 1. 모든 본문 행간 넓혀서 호흡 확보 */
.section-subtitle,
.feature-card-desc,
.pain-card-desc,
.solution-card-desc,
.outcome-item-desc,
.why-stat-desc,
.cert-item-value,
.faq-answer-inner,
.urgency-card-desc {
    line-height: 1.75 !important;
}

/* 2. 섹션 간 호흡 더 넉넉하게 */
.section {
    padding: clamp(72px, 10vw, 144px) 0 !important;
}

/* 3. 섹션 헤더 아래 여백 강화 */
.section-header {
    margin-bottom: clamp(48px, 7vw, 96px) !important;
}

/* 4. 섹션 타이틀 더 임팩트 */
.section-title {
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    margin-top: 16px !important;
}

/* 5. 섹션 부제 약간 축소해서 본문과의 위계 만들기 */
.section-subtitle {
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem) !important;
    max-width: 760px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 6. WHY hook headline — 핵심 후크 더 크게 */
.why-hook-headline {
    font-size: clamp(2.2rem, 1.5rem + 3vw, 4.25rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 24px !important;
}

/* 7. pain-quote 임팩트 강화 */
.pain-quote {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.025em !important;
    color: var(--color-white) !important;
    max-width: 800px;
    margin: 0 auto !important;
}

/* 8. 카드 패딩 더 넉넉하게 (호흡) */
.pain-card,
.solution-card,
.feature-card,
.outcome-col {
    padding: clamp(28px, 4vw, 48px) !important;
}

/* 9. 카드 타이틀 더 강하게 */
.pain-card-title,
.solution-card-title {
    font-size: var(--text-xl) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
    color: var(--color-white) !important;
}

.feature-card-title {
    font-size: var(--text-2xl) !important;
    line-height: 1.25 !important;
    margin-bottom: 20px !important;
}

/* 10. 본문 카드 desc — 한 줄 더 짧게 보이도록 */
.pain-card-desc,
.solution-card-desc {
    font-size: var(--text-base) !important;
    color: var(--color-gray-300) !important;
}

.feature-card-desc {
    font-size: var(--text-base) !important;
    color: var(--color-gray-200) !important;
}

/* 11. 카드 hover 시 살짝 떠오르는 효과 - 모든 카드 일관성 */
.pain-card, .solution-card, .feature-card, .outcome-col, .badge-feat, .why-stat-card {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s !important;
}

.pain-card:hover, .feature-card:hover, .outcome-col:hover, .badge-feat:hover {
    transform: translateY(-4px) !important;
}

/* 12. Hero subtitle strong 가시성 */
.hero-subtitle strong {
    color: var(--color-white) !important;
    font-weight: 800 !important;
    position: relative;
}

/* 13. 모바일에서 hero 영역 빡빡함 줄이기 */
@media (max-width: 640px) {
    .hero {
        padding: 100px 0 60px !important;
    }
    .hero-subtitle {
        font-size: var(--text-base) !important;
        line-height: 1.65 !important;
        margin: 24px auto 20px !important;
    }
    .section {
        padding: 60px 0 !important;
    }
    .section-title {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }
    .pain-quote {
        font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
    }
    .why-hook-headline {
        font-size: clamp(1.7rem, 7vw, 2.4rem) !important;
    }
}

/* 14. 임팩트 강화 — 큰 통계 영역에 background glow */
.big-stat:hover {
    box-shadow: 0 0 40px rgba(0, 240, 255, 0.15);
}

/* 15. 첫 화면 hero subtitle의 형광펜 효과 (강조 underline) */
.hero-subtitle strong {
    box-shadow: inset 0 -0.45em 0 rgba(0, 240, 255, 0.25);
    background: transparent !important;
}


/* ============================================================
   16. 1기 마감 처리 (Sold-out / Closed States)
   ============================================================ */

/* 마감된 카드 전체를 디밍 + 채도 제거 */
.register-card.is-closed {
    position: relative;
    opacity: 0.62;
    filter: saturate(0.45);
    overflow: hidden;
    pointer-events: none; /* 카드 내부 호버/클릭 차단 */
}

/* 마감 카드는 hover 떠오름/글로우 비활성화 */
.register-card.is-closed:hover {
    transform: none !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

/* 마감 카드 위에 사선 빗금 오버레이 */
.register-card.is-closed::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.015),
        rgba(255, 255, 255, 0.015) 12px,
        transparent 12px,
        transparent 24px
    );
    pointer-events: none;
    z-index: 1;
}

/* 마감 도장(스티커) */
.closed-stamp {
    position: absolute;
    top: 50%;
    right: clamp(20px, 6%, 48px);
    transform: translateY(-50%) rotate(-12deg);
    z-index: 5;
    width: clamp(116px, 30%, 150px);
    height: clamp(116px, 30%, 150px);
    border: 4px solid var(--color-danger);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.08);
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12), 0 8px 30px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    animation: stamp-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.closed-stamp-text {
    color: var(--color-danger);
    font-weight: 900;
    font-size: clamp(1.15rem, 4vw, 1.5rem);
    line-height: 1.15;
    text-align: center;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@keyframes stamp-in {
    0% { opacity: 0; transform: translateY(-50%) rotate(-12deg) scale(2.2); }
    100% { opacity: 1; transform: translateY(-50%) rotate(-12deg) scale(1); }
}

/* 마감 카드 태그 (회색) */
.register-card-tag--closed {
    background: linear-gradient(135deg, #4b5563, #374151) !important;
    color: #e5e7eb !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* 2기 모집중 태그 — 그대로 강조 (featured와 동일 룩) */
.register-card-tag--open {
    background: linear-gradient(135deg, var(--color-neon-blue), var(--color-cyan-glow)) !important;
    color: var(--color-navy) !important;
}

/* 비활성화된 신청 버튼 */
.register-btn--closed {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--color-gray-500) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: not-allowed !important;
    pointer-events: none;
    box-shadow: none !important;
}

.register-btn--closed:hover {
    transform: none !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* 1기 → 2기 안내 문구 */
.register-redirect-note {
    margin-top: 14px;
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    text-align: center;
    line-height: 1.5;
    position: relative;
    z-index: 2;
}

.register-redirect-note a {
    color: var(--color-cyan-glow);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 240, 255, 0.4);
    pointer-events: auto; /* 카드가 pointer-events:none이지만 이 링크는 살림 */
}

.register-redirect-note a:hover {
    border-bottom-color: var(--color-cyan-glow);
}

/* Hero 메타 — 마감/강조 상태 */
.hero-meta-item.is-closed .hero-meta-value {
    color: var(--color-gray-500);
}

.hero-meta-item.is-highlight .hero-meta-value {
    color: var(--color-cyan-glow);
}

/* 모집중(2기)을 먼저, 마감(1기)을 뒤로 — 홍보 우선순위 */
.register-grid { align-items: start; }
.register-card.featured { order: 0; }
.register-card.is-closed { order: 1; }

/* ============================================================
   17. 2기 주인공 강조 / 1기 정보 축소 / CTA 우선순위 재배치
   ============================================================ */

/* --- 1기 카드: 디밍 강화 + 그레이스케일 --- */
.register-card.is-closed {
    opacity: 0.5;
    filter: saturate(0.15) brightness(0.82);
    border-color: rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.012) !important;
    box-shadow: none !important;
}

/* 1기 카드 반투명 그레이 오버레이 (빗금보다 차분하게) */
.register-card.is-closed::after {
    background:
        linear-gradient(180deg, rgba(10, 14, 22, 0.25), rgba(10, 14, 22, 0.4)),
        repeating-linear-gradient(-45deg,
            rgba(255, 255, 255, 0.012),
            rgba(255, 255, 255, 0.012) 12px,
            transparent 12px,
            transparent 24px);
}

/* 1기 간소화 본문 (체크 아이콘 + 종료 메시지) */
.closed-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(36px, 8vw, 64px) 12px;
    gap: 18px;
    position: relative;
    z-index: 2;
}

.closed-check {
    color: var(--color-gray-500);
    opacity: 0.7;
}

.closed-message {
    font-size: var(--text-base);
    color: var(--color-gray-400);
    line-height: 1.7;
    font-weight: 500;
}

/* 1기 마감 도장: 텍스트 한 단어("마감")로 축소되어 더 굵게 */
.closed-stamp-text {
    font-size: clamp(1.5rem, 5vw, 2rem);
}

/* --- 2기 카드: 주인공 강조 강화 --- */
.register-card.featured {
    border: 1.5px solid rgba(0, 240, 255, 0.55) !important;
    background:
        radial-gradient(ellipse at top, rgba(0, 240, 255, 0.14), transparent 62%),
        linear-gradient(160deg, rgba(0, 112, 243, 0.08), rgba(0, 240, 255, 0.03)) !important;
    box-shadow:
        0 0 0 1px rgba(0, 240, 255, 0.2),
        0 0 50px rgba(0, 240, 255, 0.22),
        0 20px 60px rgba(0, 0, 0, 0.35) !important;
    transform: translateY(-6px);
    position: relative;
    z-index: 3;
}

.register-card.featured:hover {
    transform: translateY(-10px);
    border-color: var(--color-cyan-glow) !important;
    box-shadow:
        0 0 0 1px rgba(0, 240, 255, 0.35),
        0 0 70px rgba(0, 240, 255, 0.32),
        0 24px 70px rgba(0, 0, 0, 0.4) !important;
}

/* 2기 카드만 은은한 글로우 펄스 */
.register-card.featured::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.4), transparent 50%, rgba(0, 112, 243, 0.3));
    z-index: -1;
    opacity: 0;
    animation: featured-glow 4s ease-in-out infinite;
    filter: blur(12px);
}

@keyframes featured-glow {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.55; }
}

/* --- 가격 영역 축소 (2기) --- */
.register-card-price--compact {
    margin-bottom: 20px !important;
}

.register-card-price--compact .register-card-price-current {
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem) !important;
}

.register-card-price--compact .register-card-price-original {
    font-size: var(--text-xs) !important;
}

/* --- 신청 CTA 버튼 확대 강조 (2기, 페이지 유일 강조색) --- */
.register-btn--hero {
    margin-top: clamp(20px, 4vw, 32px) !important;
    padding: clamp(18px, 2.5vw, 24px) 32px !important;
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem) !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em;
    border-radius: 16px !important;
    box-shadow: 0 10px 32px rgba(0, 240, 255, 0.32), 0 4px 12px rgba(0, 112, 243, 0.25) !important;
    position: relative;
    z-index: 2;
}

.register-btn--hero:hover {
    transform: translateY(-3px) scale(1.015);
    box-shadow: 0 16px 44px rgba(0, 240, 255, 0.45), 0 6px 16px rgba(0, 112, 243, 0.35) !important;
}

/* ============================================================
   18. 사외교육 참가신청서 다운로드 박스
   ============================================================ */
.appform-box {
    margin-top: clamp(32px, 5vw, 48px);
    padding: clamp(24px, 3.5vw, 36px);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.appform-box-info {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 320px;
}

.appform-box-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(0, 112, 243, 0.18), rgba(0, 240, 255, 0.12));
    color: var(--color-cyan-glow);
}

.appform-box-title {
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--color-white);
    margin: 0 0 4px;
}

.appform-box-desc {
    font-size: var(--text-sm);
    color: var(--color-gray-400);
    margin: 0;
    line-height: 1.5;
}

.appform-box-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.appform-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    font-size: var(--text-sm) !important;
    padding: 12px 20px !important;
}

.appform-btn:hover {
    color: var(--color-cyan-glow) !important;
    border-color: var(--color-cyan-glow) !important;
}

@media (max-width: 768px) {
    .appform-box {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }
    .appform-box-actions {
        flex-direction: column;
    }
    .appform-btn {
        justify-content: center;
    }
}

/* ============================================================
   19. 가독성 줄바꿈 제어 (.br-pc)
   - 모바일: br 무시(공백 한 칸으로 치환) / PC(>=768px): 정상 줄바꿈
   ============================================================ */
@media (max-width: 767px) {
    .br-pc {
        display: inline;
        font-size: 0; /* br 줄바꿈 폭 제거 */
    }
    .br-pc::after {
        content: " ";
        font-size: 1rem; /* 공백 한 칸 복원 (단어 붙음 방지) */
        white-space: pre;
    }
}

/* 지정 문구들 단어 중간 끊김 방지 + 줄 간격 가독성 */
.pain-quote,
.pain-card-title,
.solution-card-desc,
.feature-card-desc,
.register-info-value {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ============================================================
   20. 전역 한국어 줄바꿈 — 단어 중간 끊김(뚝뚝 끊김) 방지
   한글은 어절 단위로만 줄바꿈, 긴 영문/URL은 넘칠 때만 분리
   ============================================================ */
body,
.section-title,
.section-subtitle,
.hero-title,
.hero-subtitle,
.pain-card-desc,
.solution-card-title,
.feature-card-title,
.why-hook-headline,
.mid-cta-title,
.mid-cta-desc,
.cert-title,
.outcome-item-desc,
.badge-feat-title,
.badge-feat-desc,
.faq-question span,
.faq-answer-inner,
.instructor-name,
.curriculum-meta-text {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ============================================================
   21. 카드 제목 줄바꿈 (.br-mobile)
   - 모바일: 줄바꿈 / PC(>=768px): 줄바꿈 대신 공백 한 칸
   (이전 display:none 방식은 단어가 붙어버리는 문제가 있어 교체)
   ============================================================ */
@media (min-width: 768px) {
    .br-mobile {
        display: inline;
        font-size: 0; /* br 자체 폭 제거 */
    }
    .br-mobile::after {
        content: " ";
        font-size: 1rem; /* 공백 한 칸 복원 */
        white-space: pre;
    }
}

/* ============================================================
   22. THE REAL PROBLEM eyebrow를 pain-quote 위로 정렬
   - pain-quote가 부모보다 넓어 eyebrow가 옆으로 떠 보이던 문제 해결
   ============================================================ */
#problem .section-header {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#problem .section-eyebrow {
    display: block;
    margin-bottom: 18px;
}
#problem .pain-quote {
    max-width: 100%;
    padding: 0 20px;
}

/* cert 항목도 어절 단위 줄바꿈 */
.cert-item-value { word-break: keep-all; overflow-wrap: break-word; }

/* ============================================================
   23. 수강 신청 카드 — 세로 적층 + 카드 내부 가로 레이아웃
   (1기 짧고 2기 길어 좌우 높이 불균형 → 풀폭 가로 카드로 전환)
   ============================================================ */
.register-grid {
    grid-template-columns: 1fr !important; /* 위아래 적층 */
    gap: 24px;
    max-width: 980px;
    margin: 0 auto;
}

/* 카드 내부 좌우 2분할 */
.register-card-cols {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
}

.register-card-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.register-card-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 가로 레이아웃에서 일정 줄바꿈/여백 정리 */
.register-card-cols .register-info {
    margin-top: 0;
}
.register-card-cols .includes-box {
    margin-bottom: 0;
}

/* 2기: 가로 레이아웃에서 버튼이 왼쪽 컬럼 하단에 자연스럽게 */
.register-card-cols .register-btn--hero {
    margin-top: clamp(16px, 2.5vw, 24px) !important;
}

/* 1기(마감): 좌우 분할, 왼쪽 제목+버튼 / 오른쪽 안내 */
.register-card-cols--closed {
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.register-card-cols--closed .closed-body {
    padding: clamp(16px, 3vw, 28px) 12px;
    gap: 14px;
}
.register-card-cols--closed .register-redirect-note {
    margin-top: 8px;
}

/* 모바일: 다시 세로 1열로 (가로 분할 해제) */
@media (max-width: 768px) {
    .register-card-cols,
    .register-card-cols--closed {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .register-grid { max-width: 100%; }
}

/* ============================================================
   24. 메탈릭 실버 배지 (투명 PNG) — 글로우 조정
   ============================================================ */
.badge-showcase-img {
    mix-blend-mode: normal;
    filter:
        drop-shadow(0 20px 50px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 40px rgba(0, 240, 255, 0.16)) !important;
}

/* 메탈릭 배지엔 보라색 글로우 대신 차분한 시안 글로우 */
.badge-showcase-glow {
    background:
        radial-gradient(circle at 50% 45%, rgba(120, 160, 200, 0.4), transparent 60%),
        radial-gradient(circle at 60% 60%, rgba(0, 240, 255, 0.2), transparent 65%) !important;
}

/* ============================================================
   25. 1기 마감 — 빨간 도장 중앙에 쾅 + 도장만 선명 유지
   ============================================================ */
/* 카드 전체 filter 제거 → 콘텐츠(태그·내용)에만 디밍 적용해서 도장 색 보존 */
.register-card.is-closed {
    filter: none !important;
    opacity: 1 !important;
}
.register-card.is-closed .register-card-tag,
.register-card.is-closed .register-card-cols {
    opacity: 0.42;
    filter: saturate(0.12) brightness(0.8);
}

/* 마감 도장: 카드 정중앙, 진한 빨강, 이중 테두리 손도장 느낌 */
.register-card.is-closed .closed-stamp {
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%) rotate(-13deg);
    width: clamp(150px, 27%, 240px);
    height: clamp(150px, 27%, 240px);
    border: 5px solid #ef4444;
    background: radial-gradient(circle at 50% 40%, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.06));
    box-shadow:
        inset 0 0 0 4px rgba(239, 68, 68, 0.0),
        inset 0 0 0 7px rgba(239, 68, 68, 0.45),
        0 0 24px rgba(239, 68, 68, 0.35),
        0 12px 44px rgba(0, 0, 0, 0.55);
    z-index: 10;
    opacity: 0.95;
}

.register-card.is-closed .closed-stamp-text {
    color: #ff5a5a;
    font-size: clamp(1.5rem, 3.6vw, 2.2rem);
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 12px rgba(239, 68, 68, 0.4);
}

@keyframes stamp-in {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(-13deg) scale(2.4); }
    60% { opacity: 0.95; transform: translate(-50%, -50%) rotate(-13deg) scale(0.9); }
    100% { opacity: 0.95; transform: translate(-50%, -50%) rotate(-13deg) scale(1); }
}


/* ============================================================
   26. 헤더 고정 D-day 타이머 (윙배너 대체)
   - 데스크탑: 로고-신청버튼 사이 중앙에 'D-38 · 05:41:41'
   - 모바일: 'D-38'만 작게
   ============================================================ */
.nav-inner {
    position: relative;
}

.nav-timer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 100px;
    background: rgba(0, 240, 255, 0.06);
    border: 1px solid rgba(0, 240, 255, 0.28);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.nav-timer:hover {
    background: rgba(0, 240, 255, 0.12);
    border-color: rgba(0, 240, 255, 0.5);
    transform: translate(-50%, -50%) translateY(-1px);
}

.nav-timer-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff4d4d;
    box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.6);
    animation: nav-timer-pulse 1.6s ease-out infinite;
    flex-shrink: 0;
}
@keyframes nav-timer-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.6); }
    70% { box-shadow: 0 0 0 7px rgba(255, 77, 77, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); }
}

.nav-timer-label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-gray-300);
    letter-spacing: 0.01em;
}

.nav-timer-dday {
    font-size: var(--text-base);
    font-weight: 900;
    color: var(--color-cyan-glow);
    letter-spacing: -0.01em;
}

.nav-timer-clock {
    font-size: var(--text-sm);
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding-left: 10px;
    margin-left: 3px;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
}
.nav-timer-clock b { font-weight: 800; min-width: 22px; text-align: center; display: inline-block; }
.nav-timer-clock i { color: var(--color-cyan-glow); font-style: normal; margin: 0 1px; }

/* 마감 종료 상태 */
.nav-timer.is-ended .nav-timer-clock { display: none; }
.nav-timer.is-ended .nav-timer-label { display: none; }

/* 모바일: D-day만 작게, 시계/라벨 숨김 */
@media (max-width: 768px) {
    .nav-timer {
        gap: 6px;
        padding: 5px 11px;
    }
    .nav-timer-clock {
        display: none;
    }
    .nav-timer-dday {
        font-size: 13px;
    }
}

/* 아주 좁은 화면(로고+타이머+버튼 빡빡)에서 로고 텍스트 축약 여지 */
@media (max-width: 380px) {
    .nav-timer { padding: 4px 9px; }
    .nav-timer-dday { font-size: 12px; }
}

/* ============================================================
   27. Hero 메타 2개 항목 가운데 정렬 (정원 삭제 후)
   ============================================================ */
.hero-meta--center {
    grid-template-columns: repeat(2, minmax(0, 220px)) !important;
    justify-content: center;
    max-width: 560px !important;
}
@media (max-width: 768px) {
    .hero-meta--center {
        grid-template-columns: 1fr 1fr !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   28. 수강신청 리팩토링 — 공통 혜택 분리 + 2열 슬림 카드
   (기수마다 반복되던 혜택 박스 중복 제거)
   ============================================================ */

/* 공통 혜택 박스 (한 번만, 가로 풀폭) */
.shared-benefits {
    max-width: 980px;
    margin: 0 auto 32px;
    padding: clamp(22px, 3vw, 30px) clamp(22px, 3.5vw, 36px);
    border-radius: 20px;
    background:
        radial-gradient(ellipse at top left, rgba(0, 240, 255, 0.06), transparent 60%),
        rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(0, 240, 255, 0.16);
}
.shared-benefits-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 800;
    color: var(--color-cyan-glow);
    letter-spacing: 0.02em;
    margin-bottom: 18px;
}
.shared-benefits-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-cyan-glow);
    box-shadow: 0 0 10px var(--color-cyan-glow);
}
.shared-benefits-list {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px 28px;
}
.shared-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.shared-benefits-list .ico-check {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(0, 240, 255, 0.15);
    color: var(--color-cyan-glow);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    margin-top: 1px;
}
.shared-benefits-list strong {
    display: block;
    font-size: var(--text-base);
    color: var(--color-white);
    font-weight: 700;
    line-height: 1.3;
}
.shared-benefits-list small {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-gray-400);
    margin-top: 2px;
    line-height: 1.4;
}

/* 2열 그리드 (2기 / 3기 나란히) */
.register-grid--2col {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px;
    max-width: 980px;
    margin: 0 auto;
    align-items: stretch;
}

/* 슬림 카드: 세로 흐름 (제목→가격→일정→버튼) */
.register-grid--2col .register-card {
    display: flex;
    flex-direction: column;
}
.register-grid--2col .register-info {
    margin: 20px 0 0;
    flex: 1;
}
.register-grid--2col .register-btn--hero {
    margin-top: 24px !important;
}
.register-grid--2col .register-card-price--compact {
    margin-bottom: 4px !important;
}

/* 모바일: 1열 적층 */
@media (max-width: 768px) {
    .register-grid--2col {
        grid-template-columns: 1fr !important;
    }
    .shared-benefits-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ============================================================
   29. 헤더 타이머 듀얼 (2기·3기 동시 노출)
   ============================================================ */
.nav-timer--dual {
    gap: 0 !important;
    padding: 7px 8px !important;
}
.nav-timer-unit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
}
.nav-timer-unit .nav-timer-label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-gray-300);
}
.nav-timer-unit .nav-timer-dday {
    font-size: var(--text-base);
    font-weight: 900;
    color: var(--color-cyan-glow);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
/* 마감된 기수는 회색 처리 */
.nav-timer-unit.is-ended .nav-timer-label,
.nav-timer-unit.is-ended .nav-timer-dday {
    color: var(--color-gray-500);
}
.nav-timer-unit.is-ended .nav-timer-pulse {
    background: var(--color-gray-500);
    animation: none;
    box-shadow: none;
}
/* 구분선 */
.nav-timer-div {
    width: 1px;
    align-self: stretch;
    margin: 4px 0;
    background: rgba(255, 255, 255, 0.16);
}
/* 3기 펄스는 살짝 다른 톤 (시안) */
.nav-timer-pulse--soft {
    background: var(--color-cyan-glow);
    box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.5);
    animation: nav-timer-pulse-soft 1.8s ease-out infinite;
}
@keyframes nav-timer-pulse-soft {
    0% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.5); }
    70% { box-shadow: 0 0 0 7px rgba(0, 240, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 240, 255, 0); }
}

/* 모바일: "마감" 글자만 숨겨 "2기"/"3기"로 축약 + 패딩 축소 */
@media (max-width: 768px) {
    .nav-timer--dual { padding: 5px 4px !important; }
    .nav-timer-unit { gap: 4px; padding: 0 6px; }
    .nav-timer-unit .nav-timer-label { font-size: 11px; }
    .nav-timer-unit .lbl-full { display: none; }
    .nav-timer-unit .nav-timer-dday { font-size: 12px; }
    .nav-timer-unit .nav-timer-pulse { width: 5px; height: 5px; }
}

/* ============================================================
   30. 모바일 헤더 공간 확보 (듀얼 타이머 때문에 빡빡)
   ============================================================ */
@media (max-width: 768px) {
    /* 로고 텍스트 숨기고 AX 마크만 → 타이머 공간 확보 */
    .nav-logo-text { display: none; }
}
@media (max-width: 480px) {
    /* 초소형 화면: 신청 버튼 텍스트 숨기고 화살표만 */
    .nav-cta span { display: none; }
    .nav-cta { padding: 8px 12px; }
}

/* ============================================================
   31. Hero 메타 라벨 가독성 개선 (회색 → 밝은 시안)
   ============================================================ */
.hero-meta--center .hero-meta-label {
    color: var(--color-cyan-glow);
    opacity: 0.85;
    font-weight: 700;
}

/* ============================================================
   32. 2기 종료 — 3기 단독 표시 레이아웃
   ============================================================ */
/* Hero 메타 항목 1개일 때 중앙 정렬 */
.hero-meta--center {
    grid-template-columns: minmax(0, 280px) !important;
    max-width: 320px !important;
}

/* 수강신청 카드 1개(3기)만 — 중앙 배치, 적정 폭 */
.register-grid--single {
    grid-template-columns: minmax(0, 520px) !important;
    justify-content: center;
    max-width: 560px !important;
}
@media (max-width: 768px) {
    .register-grid--single {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }
}

/* ============================================================
   33. 마감 후 신청버튼 대체 안내 + 타이머 시계 (3기 단독)
   ============================================================ */
/* 3기 카드 버튼 자리에 들어갈 "모집 마감" 안내 */
.register-closed-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    padding: 16px 20px;
    border-radius: 14px;
    background: rgba(120, 130, 145, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--color-gray-400);
    font-weight: 800;
    font-size: var(--text-base);
    letter-spacing: 0.01em;
}
.register-closed-notice::before {
    content: '🔒';
    font-size: 1.1em;
}

/* 헤더 타이머: 3기 단독 + 시계 함께 표기 시 여백 */
.nav-timer--withclock .nav-timer-unit { padding-right: 2px; }

/* 모바일에서도 마감 임박 시계 표시 (컴팩트) */
@media (max-width: 768px) {
    .nav-timer--withclock .nav-timer-clock {
        display: inline-flex;
        font-size: 11px;
        padding-left: 7px;
        margin-left: 2px;
    }
    .nav-timer--withclock .nav-timer-clock b { min-width: 16px; }
    .nav-timer--withclock .nav-timer-unit .lbl-full { display: none; } /* "마감" 숨겨 공간 확보 */
}
@media (max-width: 400px) {
    /* 초소형: 시계는 분:초만 두어도 되지만 일단 유지, 로고는 이미 AX만 */
    .nav-timer--withclock { padding: 5px 8px !important; }
}