/* =====================================================
   PuRuth ROI Simulator - Style Sheet v2.0
   Zero Touch Transformation
   
   Corporate Design - Deep Indigo × Gold × Off-White
   ===================================================== */

/* =====================================================
   CSS Custom Properties
   ===================================================== */
:root {
    /* Primary Colors */
    --color-primary: #060d17;
    --color-primary-light: #0c1a2e;
    --color-primary-dark: #030811;
    --color-secondary: #0f1f35;
    
    /* Gold Accent */
    --color-gold: #c9a227;
    --color-gold-light: #d4b33d;
    --color-gold-dark: #a68820;
    --color-gold-muted: rgba(201, 162, 39, 0.15);
    
    /* Status Colors */
    --color-success: #00ff88;
    --color-warning: #f6ad55;
    --color-danger: #ff6b6b;
    --color-info: #00d4ff;
    
    /* Semantic Colors */
    --color-asis: #ff6b6b;
    --color-asis-bg: rgba(255, 107, 107, 0.15);
    --color-tobe: #00d4ff;
    --color-tobe-bg: rgba(0, 212, 255, 0.15);
    --color-savings: #00ff88;
    --color-org: #9f7aea;
    --color-biz: #48bb78;
    
    /* Text Colors */
    --color-text-primary: #f0f4f8;
    --color-text-secondary: #9fb3c8;
    --color-text-muted: #627d98;
    
    /* Gray Scale */
    --color-white: #ffffff;
    --color-off-white: #f8f9fa;
    --color-gray-50: #f5f7fa;
    --color-gray-100: #e8ecf1;
    --color-gray-200: #d1d9e3;
    --color-gray-400: #7b8fa6;
    --color-gray-600: #3d4f66;
    --color-gray-800: #1a2736;
    
    /* Gradients */
    --gradient-dark: linear-gradient(180deg, #060d17 0%, #0c1a2e 50%, #060d17 100%);
    --gradient-gold: linear-gradient(135deg, #c9a227 0%, #d4b33d 50%, #c9a227 100%);
    
    /* Typography */
    --font-heading: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
    --font-body: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
    --font-accent: 'Inter', 'Helvetica Neue', sans-serif;
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.2);
    --shadow-gold: 0 4px 20px rgba(201, 162, 39, 0.25);
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.8;
    color: var(--color-text-primary);
    background-color: var(--color-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* =====================================================
   Navigation
   ===================================================== */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(6, 13, 23, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

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

.nav-logo {
    text-decoration: none;
}

.nav-logo .logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.nav-links a {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

.nav-links a.active {
    color: var(--color-gold);
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 12px;
    min-width: 180px;
    background: rgba(6, 13, 23, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-fast);
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-dropdown-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.nav-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.dropdown-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #f0f4f8;
}

.dropdown-desc {
    font-size: 0.6875rem;
    color: #627d98;
}

.dropdown-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    font-size: 0.5625rem;
    font-weight: 600;
    color: var(--color-success);
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: 9999px;
    width: fit-content;
}

/* =====================================================
   Hero Section
   ===================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(201, 162, 39, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 162, 39, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

.glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(ellipse, rgba(201, 162, 39, 0.08) 0%, transparent 60%);
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: var(--space-xl);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 9999px;
    background: rgba(201, 162, 39, 0.05);
}

.badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
}

.badge-text {
    font-family: var(--font-accent);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--color-gold);
}

.hero-title {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: var(--space-lg);
}

.title-line {
    display: block;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    color: var(--color-text-primary);
}

.title-accent {
    color: var(--color-gold);
}

.hero-subtitle {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 2;
}

.hero-subtitle strong {
    color: var(--color-gold);
    font-weight: 600;
}

.subtitle-philosophy {
    display: block;
    margin-top: var(--space-sm);
    font-size: 0.875rem;
    font-style: italic;
    color: var(--color-text-muted);
    opacity: 0.9;
}

/* =====================================================
   Layout
   ===================================================== */
.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
}

.section {
    padding: var(--space-4xl) 0;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.section-number {
    display: block;
    font-family: var(--font-accent);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--color-gold);
    margin-bottom: var(--space-md);
}

.section-title {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.section-desc {
    margin-top: var(--space-md);
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

/* =====================================================
   Simulator Section
   ===================================================== */
.section-simulator {
    background: var(--gradient-dark);
}

.simulator-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

/* Step Block */
.sim-step {
    background: rgba(201, 162, 39, 0.03);
    border: 1px solid rgba(201, 162, 39, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    margin-bottom: var(--space-xl);
}

.step-header {
    margin-bottom: var(--space-xl);
}

.step-number {
    display: inline-block;
    font-family: var(--font-accent);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--color-gold);
    background: rgba(201, 162, 39, 0.15);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
}

.step-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.step-desc {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

/* =====================================================
   Growth Matrix (Step 1)
   ===================================================== */
.growth-matrix {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    overflow-x: auto;
}

.matrix-header,
.matrix-row {
    display: grid;
    grid-template-columns: 180px repeat(3, 1fr);
    gap: var(--space-md);
    align-items: center;
}

.matrix-header {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.matrix-row {
    margin-bottom: var(--space-md);
}

.matrix-row:last-child {
    margin-bottom: 0;
}

.header-cell {
    text-align: center;
}

.time-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gold);
    letter-spacing: 0.05em;
}

.label-cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.axis-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.axis-label svg {
    color: var(--color-gold);
    flex-shrink: 0;
}

.axis-hint {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    padding-left: 26px;
}

.input-cell {
    display: flex;
    justify-content: center;
}

.input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-fast);
    max-width: 140px;
}

.input-wrapper:focus-within {
    border-color: var(--color-gold);
}

.input-wrapper.large {
    max-width: 200px;
}

.input-wrapper input {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: var(--space-sm) var(--space-md);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-primary);
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-accent);
    text-align: right;
}

.input-prefix {
    padding-left: var(--space-md);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.input-suffix {
    padding: 0 var(--space-sm);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    background: rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

/* Growth Preview */
.growth-preview {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
}

.preview-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.preview-header svg {
    color: var(--color-gold);
}

.growth-charts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.growth-chart-box {
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.chart-label {
    display: block;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
    text-align: center;
}

.chart-wrapper {
    position: relative;
    height: 100px;
    width: 100%;
}

.chart-wrapper canvas {
    max-height: 100px !important;
}

/* Linkage Info */
.linkage-info {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: rgba(201, 162, 39, 0.05);
    border: 1px solid rgba(201, 162, 39, 0.1);
    border-radius: var(--radius-md);
}

.linkage-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gold);
    margin-bottom: var(--space-md);
}

.linkage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.linkage-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.linkage-type {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 2px 8px;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 9999px;
}

.linkage-type.org {
    color: var(--color-org);
    background: rgba(159, 122, 234, 0.15);
}

.linkage-type.biz {
    color: var(--color-biz);
    background: rgba(72, 187, 120, 0.15);
}

.linkage-tasks {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* =====================================================
   Form Grid (Step 2)
   ===================================================== */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.form-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.label-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.label-hint {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

/* Tooltip */
.tooltip-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.tooltip-trigger svg {
    color: var(--color-text-muted);
}

.tooltip-content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    padding: var(--space-sm);
    background: var(--color-primary-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    font-size: 0.6875rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 100;
    margin-bottom: var(--space-sm);
}

.tooltip-trigger:hover .tooltip-content {
    opacity: 1;
    visibility: visible;
}

/* =====================================================
   Existing System Section
   ===================================================== */
.existing-system-section {
    margin-top: var(--space-xl);
    padding: var(--space-xl);
    background: rgba(100, 149, 237, 0.05);
    border: 1px solid rgba(100, 149, 237, 0.2);
    border-radius: var(--radius-lg);
}

.system-choice-group {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.system-choice {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.system-choice:hover {
    border-color: rgba(100, 149, 237, 0.3);
}

.system-choice input[type="radio"] {
    margin-top: 4px;
    accent-color: var(--color-gold);
}

.system-choice input[type="radio"]:checked + .choice-content {
    color: var(--color-text-primary);
}

.system-choice:has(input:checked) {
    border-color: var(--color-gold);
    background: rgba(201, 162, 39, 0.1);
}

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

.choice-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.choice-desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.system-cost-input {
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
}

.input-row {
    display: flex;
    gap: var(--space-md);
    align-items: center;
}

.btn-auto-calc {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: rgba(100, 149, 237, 0.2);
    border: 1px solid rgba(100, 149, 237, 0.4);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-auto-calc:hover {
    background: rgba(100, 149, 237, 0.3);
    border-color: rgba(100, 149, 237, 0.6);
}

.auto-calc-note {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(201, 162, 39, 0.1);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.note-icon {
    font-size: 1rem;
}

.note-text span {
    font-weight: 600;
    color: var(--color-gold);
}

@media (max-width: 768px) {
    .existing-system-section {
        padding: var(--space-md);
    }
    
    .system-choice-group {
        flex-direction: column;
    }
    
    .input-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .btn-auto-calc {
        justify-content: center;
    }
}

/* =====================================================
   Challenge Parameters Section
   ===================================================== */
.challenge-params-section {
    margin-top: var(--space-xl);
    padding: var(--space-xl);
    background: rgba(255, 107, 107, 0.05);
    border: 1px solid rgba(255, 107, 107, 0.15);
    border-radius: var(--radius-lg);
}

.subsection-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm) 0;
}

.subsection-title svg {
    color: var(--color-warning);
}

.subsection-desc {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-lg) 0;
}

.challenge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.challenge-item {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.challenge-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: var(--space-md);
}

.challenge-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.challenge-hint {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

/* Fact-based input styles */
.fact-input-group {
    margin-bottom: var(--space-sm);
}

.fact-input-group .input-wrapper {
    max-width: 180px;
}

.fact-input-group .input-wrapper input {
    text-align: right;
}

.fact-select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.fact-select:focus {
    outline: none;
    border-color: var(--color-gold);
}

.fact-options {
    margin-top: var(--space-sm);
}

.fact-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.fact-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-gold);
    cursor: pointer;
}

/* Wide challenge item (spans 2 columns) */
.challenge-item-wide {
    grid-column: 1 / -1;
}

/* Peak input grid */
.peak-input-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.peak-input-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.peak-label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.input-wrapper.compact {
    max-width: 120px;
}

.input-wrapper.compact input {
    width: 50px;
    text-align: center;
    padding: var(--space-xs) var(--space-sm);
}

/* Peak result display */
.peak-result {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    margin-top: var(--space-sm);
}

.peak-indicator {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.peak-value {
    font-family: var(--font-accent);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-gold);
}

.peak-interpretation {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.peak-interpretation.low {
    color: var(--color-success);
}

.peak-interpretation.medium {
    color: var(--color-warning);
}

.peak-interpretation.high {
    color: var(--color-danger);
}

/* Peak View Controls */
.peak-view-controls {
    display: flex;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    justify-content: center;
}

.peak-view-btn {
    padding: var(--space-sm) var(--space-lg);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.peak-view-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.peak-view-btn.active {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--color-gold);
    color: var(--color-gold);
}

/* AS-IS Peak Section in Step 3 */
.asis-peak-section {
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow-x: hidden;
}

.asis-peak-section .result-section-title {
    color: var(--color-asis);
}

@media (max-width: 768px) {
    .asis-peak-section {
        padding: var(--space-md);
        margin-top: var(--space-lg);
    }
    
    .peak-explanation {
        padding: var(--space-sm);
    }
    
    .peak-explanation p {
        font-size: 0.75rem;
    }
    
    .peak-legend {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .breakdown-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .breakdown-card.total,
    .breakdown-card.subtotal,
    .breakdown-card.residual {
        grid-column: span 2;
    }
}

/* TO-BE Peak Explanation */
.tobe-explanation {
    background: rgba(0, 212, 255, 0.05);
    border-left: 3px solid var(--color-tobe);
    padding: var(--space-md);
    border-radius: var(--radius-md);
}

/* Peak Legend */
.peak-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    justify-content: center;
}

.peak-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.peak-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

@media (max-width: 480px) {
    .peak-input-grid {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .peak-input-item {
        width: 100%;
    }
}

/* Task-level challenge parameters */
.task-challenge-params {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.param-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
}

.param-label-inline {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    min-width: 100px;
}

.peak-label-sm {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.input-mini {
    width: 40px;
    padding: 4px 6px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-size: 0.8125rem;
}

.input-mini:focus {
    outline: none;
    border-color: var(--color-gold);
}

.input-medium {
    width: 80px;
    padding: 4px 8px;
    text-align: right;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    font-size: 0.8125rem;
}

.input-medium:focus {
    outline: none;
    border-color: var(--color-gold);
}

.input-prefix-inline {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.system-cost-row {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.system-cost-hint {
    font-size: 0.625rem;
    color: var(--color-text-muted);
    margin-left: var(--space-xs);
}

.system-cost-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    user-select: none;
}

.system-cost-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-gold);
    cursor: pointer;
}

.system-cost-toggle .toggle-label {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.system-cost-input-group {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
    padding-left: 24px;
}

.system-cost-input::placeholder {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.peak-factor-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid var(--color-gold);
    border-radius: var(--radius-sm);
    font-family: var(--font-accent);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gold);
    margin-left: var(--space-xs);
}

/* Peak toggle and detail inputs */
.peak-toggle-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.peak-toggle {
    width: 16px;
    height: 16px;
    accent-color: var(--color-gold);
    cursor: pointer;
}

.peak-detail-inputs {
    padding-left: var(--space-lg);
    margin-top: var(--space-xs);
    border-left: 2px solid rgba(212, 175, 55, 0.3);
}

.peak-detail-inputs.hidden {
    display: none;
}

.peak-note {
    font-size: 0.625rem;
    color: var(--color-text-muted);
    margin-left: var(--space-xs);
}

/* Transformation Power Criteria */
.transformation-criteria {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-gold);
}

.criteria-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.criteria-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.criteria-list li {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.criteria-list li strong {
    color: var(--color-gold);
    font-weight: 600;
}

@media (max-width: 768px) {
    .param-row {
        flex-wrap: wrap;
    }
    
    .param-label-inline {
        width: 100%;
        margin-bottom: var(--space-xs);
    }
}

/* Challenge Score Card */
.challenge-score-card {
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.1) 0%, rgba(255, 107, 107, 0.1) 100%);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
}

.score-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.score-header svg {
    color: var(--color-gold);
}

.score-display {
    margin-bottom: var(--space-md);
}

.score-value {
    font-family: var(--font-accent);
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-gold);
}

.score-max {
    font-size: 1.25rem;
    color: var(--color-text-muted);
}

.score-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--space-md);
}

.score-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-success), var(--color-warning), var(--color-danger));
    border-radius: 4px;
    transition: width 0.5s ease;
}

.score-interpretation {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.score-interpretation.low {
    color: var(--color-success);
}

.score-interpretation.medium {
    color: var(--color-warning);
}

.score-interpretation.high,
.score-interpretation.critical {
    color: var(--color-danger);
}

/* Challenge Score Section (after Step 3) */
.challenge-score-section {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.challenge-score-section .challenge-score-card {
    max-width: 600px;
    margin: 0 auto;
}

/* Score Breakdown */
.score-breakdown {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.breakdown-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.breakdown-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
}

.breakdown-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-sm);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-sm);
}

.breakdown-item-label {
    font-size: 0.625rem;
    color: var(--color-text-muted);
}

.breakdown-item-value {
    font-family: var(--font-accent);
    font-size: 0.875rem;
    font-weight: 600;
}

.breakdown-item-value.low {
    color: var(--color-success);
}

.breakdown-item-value.medium {
    color: var(--color-warning);
}

.breakdown-item-value.high {
    color: var(--color-danger);
}

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

@media (max-width: 768px) {
    .challenge-params-section {
        padding: var(--space-md);
    }
    
    .challenge-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .challenge-item {
        padding: var(--space-md);
    }
    
    .score-value {
        font-size: 2.5rem;
    }
}

/* Cost Summary */
.cost-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: rgba(201, 162, 39, 0.08);
    border-radius: var(--radius-md);
}

.cost-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    text-align: center;
}

.cost-label {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.cost-value {
    font-family: var(--font-accent);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gold);
}

/* =====================================================
   Task Cards (Step 3)
   ===================================================== */
.task-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.task-card {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
}

.task-card.active {
    border-color: var(--color-gold);
    background: rgba(201, 162, 39, 0.05);
}

.task-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
}

/* Toggle Switch */
.task-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.task-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--color-gray-600);
    border-radius: 24px;
    transition: var(--transition-base);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--color-white);
    border-radius: 50%;
    transition: var(--transition-base);
}

.task-toggle input:checked + .toggle-slider {
    background: var(--color-gold);
}

.task-toggle input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.task-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.task-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.task-module {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    font-family: var(--font-accent);
}

.task-badges {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.task-linkage {
    font-size: 0.5625rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 9999px;
}

.task-linkage.org {
    color: var(--color-org);
    background: rgba(159, 122, 234, 0.15);
}

.task-linkage.biz {
    color: var(--color-biz);
    background: rgba(72, 187, 120, 0.15);
}

.task-status {
    font-size: 0.5625rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.task-status.available {
    color: var(--color-success);
    background: rgba(0, 255, 136, 0.1);
}

.task-status.coming {
    color: var(--color-info);
    background: rgba(0, 212, 255, 0.1);
}

.task-status.planned {
    color: var(--color-gray-400);
    background: rgba(123, 143, 166, 0.1);
}

/* Task Params */
.task-params {
    padding: 0 var(--space-lg) var(--space-lg);
    display: none;
}

.task-card.active .task-params {
    display: block;
}

.param-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.param-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm);
}

.param-item.highlight {
    background: rgba(246, 173, 85, 0.1);
    border: 1px solid rgba(246, 173, 85, 0.2);
}

.param-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.param-label svg {
    color: var(--color-warning);
}

.param-value {
    font-family: var(--font-accent);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.param-input-inline {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.param-input-inline input {
    width: 60px;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.875rem;
    font-family: var(--font-accent);
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    outline: none;
    text-align: right;
}

/* 処理件数入力欄 - 大きめに */
.param-input-inline input.volume-input {
    width: 100px;
    font-size: 0.9375rem;
    font-weight: 600;
}

.param-input-inline input:focus {
    border-color: var(--color-gold);
}

.param-input-inline span {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.param-item select {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.75rem;
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    outline: none;
}

.param-item select:focus {
    border-color: var(--color-gold);
}

/* Calculate Button */
.calculate-section {
    text-align: center;
    padding: var(--space-xl) 0;
}

.btn-calculate {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-3xl);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--gradient-gold);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-gold);
}

.btn-calculate:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(201, 162, 39, 0.4);
}

.btn-calculate svg {
    width: 20px;
    height: 20px;
}

/* =====================================================
   Results Section
   ===================================================== */
.section-results {
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
}

/* Result Section Title */
.result-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
}

.result-section-title svg {
    color: var(--color-gold);
}

/* Results Matrix */
.results-matrix-section {
    margin-bottom: var(--space-2xl);
}

.results-matrix {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    overflow-x: auto;
}

.matrix-wrapper {
    min-width: 600px;
}

.result-table {
    width: 100%;
    border-collapse: collapse;
}

.result-table th,
.result-table td {
    padding: var(--space-md);
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.result-table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.result-table .sub-header th {
    font-size: 0.6875rem;
    padding-top: 0;
}

.result-table .sub-header th.asis {
    color: var(--color-asis);
}

.result-table .sub-header th.tobe {
    color: var(--color-tobe);
}

.result-table .row-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-align: left;
}

.result-table .row-label svg {
    color: var(--color-gold);
    flex-shrink: 0;
}

.result-table td.asis {
    font-family: var(--font-accent);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-asis);
}

.result-table td.tobe {
    font-family: var(--font-accent);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-tobe);
}

.result-table .savings-row td.savings {
    font-family: var(--font-accent);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-gold);
}

.result-table .reduction-row td.reduction {
    font-family: var(--font-accent);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-savings);
}

/* Chart Section */
.chart-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    margin-bottom: var(--space-xl);
}

.chart-container {
    position: relative;
    height: 300px;
    max-width: 100%;
    overflow: hidden;
}

.chart-container.chart-large {
    height: 400px;
}

canvas {
    max-width: 100% !important;
}

.peak-explanation {
    background: rgba(246, 173, 85, 0.1);
    border: 1px solid rgba(246, 173, 85, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}

.peak-explanation p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
}

/* Projection Controls */
.projection-controls {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.projection-btn {
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.projection-btn.active {
    color: var(--color-gold);
    background: rgba(201, 162, 39, 0.15);
    border-color: var(--color-gold);
}

.projection-btn:hover:not(.active) {
    border-color: rgba(255, 255, 255, 0.2);
}

/* Projection Summary */
.projection-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.projection-item {
    background: rgba(255, 255, 255, 0.03);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    text-align: center;
}

.projection-item.highlight {
    background: rgba(201, 162, 39, 0.15);
    border: 1px solid rgba(201, 162, 39, 0.3);
}

.proj-label {
    display: block;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}

.proj-value {
    font-family: var(--font-accent);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.proj-value.asis {
    color: var(--color-asis);
}

.proj-value.tobe {
    color: var(--color-tobe);
}

.proj-value.savings {
    color: var(--color-gold);
}

/* =====================================================
   Insight Section
   ===================================================== */
.insight-section {
    background: rgba(201, 162, 39, 0.03);
    border: 1px solid rgba(201, 162, 39, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    margin-bottom: var(--space-xl);
}

.insight-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gold);
    margin-bottom: var(--space-xl);
    text-align: center;
    justify-content: center;
}

.insight-title svg {
    flex-shrink: 0;
}

.insight-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.insight-chart {
    height: 320px;
    width: 100%;
}

.insight-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.insight-item {
    padding: var(--space-lg);
    border-radius: var(--radius-md);
}

.insight-item.asis {
    background: var(--color-asis-bg);
    border-left: 3px solid var(--color-asis);
}

.insight-item.tobe {
    background: var(--color-tobe-bg);
    border-left: 3px solid var(--color-tobe);
}

.insight-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
}

.insight-item.asis .insight-label {
    color: var(--color-asis);
}

.insight-item.tobe .insight-label {
    color: var(--color-tobe);
}

.insight-item p {
    font-size: 0.9375rem;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.insight-points {
    list-style: none;
}

.insight-points li {
    position: relative;
    padding-left: var(--space-md);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.insight-points li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--color-text-muted);
}

.insight-conclusion {
    margin-top: var(--space-lg);
    padding: var(--space-xl);
    background: rgba(201, 162, 39, 0.1);
    border-radius: var(--radius-md);
    text-align: center;
}

.insight-conclusion p {
    font-size: 1rem;
    color: var(--color-text-primary);
    line-height: 2;
}

/* =====================================================
   Pricing Breakdown Section
   ===================================================== */
.pricing-breakdown-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    margin-bottom: var(--space-xl);
    border: 1px solid rgba(201, 162, 39, 0.2);
}

.pricing-breakdown-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-gold);
    margin-bottom: var(--space-md);
    text-align: center;
}

.pricing-breakdown-desc {
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
    line-height: 1.8;
}

.pricing-note {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.pricing-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-lg);
    align-items: stretch;
    margin-bottom: var(--space-xl);
}

.price-card {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    border: 2px solid transparent;
}

.price-card.asis {
    border-color: rgba(255, 107, 107, 0.4);
}

.price-card.tobe {
    border-color: rgba(100, 149, 237, 0.4);
}

.price-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--space-md);
}

.price-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.price-card.asis .price-card-label {
    color: var(--color-asis);
}

.price-card.tobe .price-card-label {
    color: var(--color-tobe);
}

.price-card-total {
    font-family: var(--font-accent);
    font-size: 1.5rem;
    font-weight: 700;
}

.price-card.asis .price-card-total {
    color: var(--color-asis);
}

.price-card.tobe .price-card-total {
    color: var(--color-tobe);
}

.price-card-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
}

.price-item.sub {
    padding-left: var(--space-md);
}

.price-item.subtotal {
    padding-top: var(--space-sm);
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.price-item.residual {
    flex-wrap: wrap;
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.price-item-label {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.price-item-value {
    font-family: var(--font-accent);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.price-item.subtotal .price-item-value {
    color: var(--color-gold);
}

.price-item-note {
    width: 100%;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.price-item-group {
    background: rgba(100, 149, 237, 0.1);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
}

.price-item-group-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-tobe);
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.price-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--color-gold);
}

.reduction-badge {
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-gold);
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: var(--radius-sm);
}

.savings-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    padding: var(--space-lg);
    background: rgba(201, 162, 39, 0.1);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(201, 162, 39, 0.3);
}

.savings-item {
    text-align: center;
    padding: var(--space-md);
}

.savings-item.highlight {
    background: rgba(201, 162, 39, 0.2);
    border-radius: var(--radius-md);
}

.savings-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}

.savings-value {
    font-family: var(--font-accent);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-gold);
}

.savings-item.highlight .savings-value {
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .pricing-breakdown-section {
        padding: var(--space-lg);
    }
    
    .pricing-breakdown-title {
        font-size: 1rem;
        flex-direction: column;
    }
    
    .pricing-comparison {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .price-arrow {
        transform: rotate(90deg);
        padding: var(--space-md) 0;
    }
    
    .price-card-total {
        font-size: 1.25rem;
    }
    
    .savings-summary {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    
    .savings-value {
        font-size: 1rem;
    }
    
    .savings-item.highlight .savings-value {
        font-size: 1.25rem;
    }
}

/* =====================================================
   Commitment Section
   ===================================================== */
.commitment-section {
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.08) 0%, rgba(100, 149, 237, 0.08) 100%);
    border: 2px solid rgba(201, 162, 39, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    margin-bottom: var(--space-xl);
}

.commitment-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.commitment-header svg {
    color: var(--color-gold);
}

.commitment-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.commitment-content {
    max-width: 700px;
    margin: 0 auto;
}

.commitment-lead {
    text-align: center;
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 2;
    margin-bottom: var(--space-xl);
}

.commitment-lead strong {
    color: var(--color-gold);
}

.commitment-points {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.commitment-point {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-gold);
}

.point-icon {
    flex-shrink: 0;
    color: var(--color-gold);
}

.point-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.point-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.point-desc {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.commitment-question {
    text-align: center;
    padding: var(--space-xl);
    background: rgba(201, 162, 39, 0.1);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(201, 162, 39, 0.3);
}

.question-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
}

.commitment-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    background: rgba(201, 162, 39, 0.2);
    border: 2px solid var(--color-gold);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
}

.commitment-checkbox:hover {
    background: rgba(201, 162, 39, 0.3);
}

.commitment-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-gold);
}

.commitment-checkbox:has(input:checked) {
    background: var(--color-gold);
    color: var(--color-primary);
}

.commitment-checkbox:has(input:checked) .checkbox-label {
    color: var(--color-primary);
    font-weight: 700;
}

.checkbox-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-gold);
}

@media (max-width: 768px) {
    .commitment-section {
        padding: var(--space-lg);
    }
    
    .commitment-header {
        flex-direction: column;
        text-align: center;
    }
    
    .commitment-title {
        font-size: 1rem;
    }
    
    .commitment-lead {
        font-size: 0.875rem;
    }
    
    .commitment-point {
        flex-direction: column;
        text-align: center;
    }
    
    .point-icon {
        align-self: center;
    }
    
    .point-title {
        font-size: 0.875rem;
    }
    
    .point-desc {
        font-size: 0.75rem;
    }
    
    .question-text {
        font-size: 0.875rem;
    }
    
    .commitment-checkbox {
        padding: var(--space-sm) var(--space-md);
    }
    
    .checkbox-label {
        font-size: 0.8125rem;
    }
}

/* =====================================================
   Internal Section (PuRuth Internal Use Only)
   ===================================================== */
/* Internal Section - デフォルト非表示（URLパラメータ ?internal=true で表示）*/
.internal-section {
    display: none;
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.05) 0%, rgba(201, 162, 39, 0.05) 100%);
    border: 2px dashed rgba(255, 107, 107, 0.3);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    margin-bottom: var(--space-xl);
}

/* JSで .internal-visible クラスが追加されると表示 */
.internal-section.internal-visible {
    display: block;
}

.internal-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-danger);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(255, 107, 107, 0.2);
}

.internal-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.internal-subtitle {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
}

/* Pricing Adjustment Panel */
.pricing-adjustment-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid rgba(201, 162, 39, 0.2);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.pricing-input-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.pricing-preset-row {
    margin-bottom: var(--space-lg);
}

.pricing-select-full {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
    color: var(--color-text-primary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    margin-top: var(--space-xs);
}

.pricing-select-full:focus {
    outline: none;
    border-color: var(--color-gold);
}

.pricing-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.pricing-input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.pricing-input-wrapper:focus-within {
    border-color: var(--color-gold);
}

.pricing-prefix,
.pricing-suffix {
    padding: var(--space-sm) var(--space-xs);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.03);
    white-space: nowrap;
}

.pricing-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: var(--space-sm);
    font-family: var(--font-accent);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gold);
    text-align: right;
    min-width: 60px;
}

.pricing-input:focus {
    outline: none;
}

.pricing-select {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: 0.75rem;
    color: var(--color-text-primary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pricing-select:focus {
    outline: none;
    border-color: var(--color-gold);
}

.pricing-hint {
    display: block;
    font-size: 0.625rem;
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}

.preset-reason {
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(0, 212, 255, 0.1);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    border-left: 3px solid var(--color-info);
}

.preset-reason:empty {
    display: none;
}

.preset-reason .reason-badge {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(0, 212, 255, 0.2);
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--color-info);
    margin-right: var(--space-xs);
}

.preset-reason strong {
    color: var(--color-gold);
}

/* Preset Logic Section */
.preset-logic-section {
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    border: 1px solid rgba(201, 162, 39, 0.15);
}

.logic-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-gold);
    margin: 0 0 var(--space-md) 0;
}

.preset-logic-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.preset-tier-table {
    overflow-x: auto;
}

.preset-table {
    width: 100%;
    border-collapse: collapse;
}

.preset-table th,
.preset-table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-size: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.preset-table th {
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-size: 0.625rem;
    letter-spacing: 0.05em;
}

.preset-table td {
    color: var(--color-text-secondary);
}

.preset-table td.center-text {
    text-align: center;
    font-style: italic;
    color: var(--color-text-muted);
}

.preset-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
}

.preset-badge.pioneer {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
}

.preset-badge.starter {
    background: rgba(0, 255, 136, 0.15);
    color: var(--color-success);
}

.preset-badge.growth {
    background: rgba(0, 212, 255, 0.15);
    color: var(--color-info);
}

.preset-badge.scale {
    background: rgba(159, 122, 234, 0.15);
    color: var(--color-org);
}

.preset-badge.enterprise {
    background: rgba(201, 162, 39, 0.2);
    color: var(--color-gold);
}

.preset-priority-logic {
    padding: var(--space-md);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm);
}

.preset-priority-logic h6 {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm) 0;
}

.preset-priority-logic p {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-sm) 0;
}

.preset-priority-logic ul {
    margin: 0 0 var(--space-md) 0;
    padding-left: var(--space-lg);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.linkage-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 9999px;
    font-size: 0.5625rem;
    font-weight: 600;
    margin-right: var(--space-xs);
}

.linkage-badge.org {
    background: rgba(159, 122, 234, 0.15);
    color: var(--color-org);
}

.linkage-badge.biz {
    background: rgba(72, 187, 120, 0.15);
    color: var(--color-biz);
}

.priority-rule {
    padding: var(--space-sm) var(--space-md);
    background: rgba(201, 162, 39, 0.1);
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

.priority-rule strong {
    color: var(--color-gold);
}

.preset-example {
    padding: var(--space-md);
    background: rgba(0, 212, 255, 0.05);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-info);
}

.preset-example h6 {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-info);
    margin: 0 0 var(--space-sm) 0;
}

.example-case {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.example-input,
.example-output {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

.example-arrow {
    font-size: 1rem;
    color: var(--color-info);
    font-weight: bold;
}

.example-output strong {
    color: var(--color-gold);
}

@media (max-width: 768px) {
    .preset-logic-section {
        padding: var(--space-md);
    }
    
    .preset-table th,
    .preset-table td {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.6875rem;
    }
    
    .example-case {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .example-arrow {
        transform: rotate(90deg);
        align-self: center;
    }
}

.recalculate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md) var(--space-xl);
    background: linear-gradient(135deg, var(--color-gold), #e6b84d);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.recalculate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(201, 162, 39, 0.4);
}

.recalculate-btn svg {
    transition: transform 0.3s ease;
}

.recalculate-btn:hover svg {
    transform: rotate(180deg);
}

/* Progressive Pricing Section */
.progressive-pricing-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-top: var(--space-xl);
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.progressive-tables {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.progressive-table-card {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.progressive-table-card .table-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-xs) 0;
}

.progressive-table-card .table-desc {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-md) 0;
}

.progressive-table {
    width: 100%;
    border-collapse: collapse;
}

.progressive-table th,
.progressive-table td {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.8125rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.progressive-table th {
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
}

.progressive-table td {
    color: var(--color-text-secondary);
}

.progressive-table td:last-child {
    text-align: right;
}

.scale-input {
    width: 60px;
    padding: var(--space-xs) var(--space-sm);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-family: var(--font-accent);
    color: var(--color-gold);
    text-align: right;
    font-weight: 600;
}

.scale-input:focus {
    outline: none;
    border-color: var(--color-gold);
}

.progressive-logic {
    background: rgba(0, 212, 255, 0.05);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    border-left: 3px solid rgba(0, 212, 255, 0.5);
}

.progressive-logic .logic-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm) 0;
}

.progressive-logic .logic-list {
    margin: 0;
    padding-left: var(--space-lg);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.progressive-logic .logic-list ul {
    margin: var(--space-xs) 0;
    padding-left: var(--space-lg);
}

.progressive-logic .highlight {
    color: var(--color-gold);
    font-weight: 600;
}

.current-scale-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(201, 162, 39, 0.1);
    border-radius: var(--radius-md);
    border: 1px solid rgba(201, 162, 39, 0.3);
}

.current-scale-display .scale-label {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.current-scale-display .scale-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-gold);
}

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

/* Residual Rate Section */
.residual-rate-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-top: var(--space-xl);
    border: 1px solid rgba(255, 107, 107, 0.2);
}

.residual-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.residual-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.residual-task {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.residual-input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.residual-input-wrapper:focus-within {
    border-color: var(--color-gold);
}

.residual-input {
    width: 60px;
    padding: var(--space-sm);
    background: transparent;
    border: none;
    font-size: 0.9375rem;
    font-family: var(--font-accent);
    font-weight: 600;
    color: var(--color-gold);
    text-align: right;
}

.residual-input:focus {
    outline: none;
}

.residual-suffix {
    padding-right: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.residual-note {
    background: rgba(255, 107, 107, 0.05);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border-left: 3px solid rgba(255, 107, 107, 0.5);
}

.residual-note p {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

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

/* Logic Overview Section */
.logic-overview-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    border: 1px solid rgba(201, 162, 39, 0.2);
}

.logic-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.logic-card {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.logic-card.asis {
    border-left: 3px solid rgba(255, 107, 107, 0.7);
}

.logic-card.tobe {
    border-left: 3px solid rgba(0, 212, 255, 0.7);
}

.logic-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-md) 0;
}

.logic-sub-section {
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.logic-sub-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-tobe);
    margin: 0 0 var(--space-xs) 0;
}

.logic-formula-box {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.logic-formula-box .formula {
    margin: 0;
    font-size: 0.75rem;
    font-family: var(--font-accent);
    color: var(--color-gold);
    line-height: 1.6;
}

.logic-details {
    margin: 0;
    padding-left: var(--space-lg);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
}

/* Challenge-Based Pricing Logic Section */
.challenge-pricing-logic-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.pricing-logic-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.pricing-logic-card {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.score-breakdown-table,
.stage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.score-breakdown-table th,
.score-breakdown-table td,
.stage-table th,
.stage-table td {
    padding: var(--space-xs) var(--space-sm);
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.score-breakdown-table th,
.stage-table th {
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.625rem;
    text-transform: uppercase;
}

.score-breakdown-table td,
.stage-table td {
    color: var(--color-text-secondary);
}

.table-note {
    margin-top: var(--space-sm);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.price-example-section {
    background: rgba(201, 162, 39, 0.05);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.example-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.example-case-card {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.case-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.case-label {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.case-calculation {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.6875rem;
    color: var(--color-text-secondary);
}

.case-calculation strong {
    color: var(--color-text-primary);
}

.case-total {
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
    border-top: 1px solid rgba(201, 162, 39, 0.3);
    font-size: 0.8125rem;
}

.case-total strong {
    color: var(--color-gold);
    font-size: 1rem;
}

.philosophy-note {
    background: rgba(201, 162, 39, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border-left: 3px solid var(--color-gold);
}

.philosophy-note h5 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gold);
    margin: 0 0 var(--space-md) 0;
}

.philosophy-note ul {
    margin: 0;
    padding-left: var(--space-lg);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.philosophy-note strong {
    color: var(--color-gold);
}

.example-note {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: rgba(255, 107, 107, 0.1);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--color-danger);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.example-note strong {
    color: var(--color-danger);
}

@media (max-width: 992px) {
    .pricing-logic-grid {
        grid-template-columns: 1fr;
    }
    
    .example-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .challenge-pricing-logic-section {
        padding: var(--space-md);
    }
    
    .pricing-logic-card {
        padding: var(--space-md);
    }
    
    .score-breakdown-table th,
    .score-breakdown-table td,
    .stage-table th,
    .stage-table td {
        padding: var(--space-xs);
        font-size: 0.6875rem;
    }
    
    .philosophy-note {
        padding: var(--space-md);
    }
    
    .philosophy-note ul {
        font-size: 0.75rem;
    }
}

/* Correction Factors Section */
.correction-factors-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    border: 1px solid rgba(255, 107, 107, 0.2);
}

.correction-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.correction-item {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.correction-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.correction-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.correction-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 0.625rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--color-text-muted);
    cursor: help;
}

.correction-input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

.correction-input-wrapper:focus-within {
    border-color: var(--color-gold);
}

.correction-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: transparent;
    border: none;
    font-size: 1rem;
    font-family: var(--font-accent);
    font-weight: 600;
    color: var(--color-gold);
    text-align: center;
}

.correction-input:focus {
    outline: none;
}

.correction-desc {
    margin: 0;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.correction-note {
    background: rgba(255, 107, 107, 0.05);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border-left: 3px solid rgba(255, 107, 107, 0.5);
}

.correction-note h5 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-sm) 0;
}

.correction-note p {
    margin: 0 0 var(--space-sm) 0;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.correction-note ul {
    margin: 0;
    padding-left: var(--space-lg);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
}

@media (max-width: 768px) {
    .logic-cards,
    .correction-grid {
        grid-template-columns: 1fr;
    }
}

/* ROI Summary */
.roi-summary-section {
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.1) 0%, rgba(201, 162, 39, 0.05) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid rgba(201, 162, 39, 0.2);
}

.roi-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.roi-card {
    text-align: center;
    padding: var(--space-md);
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
}

.roi-card.highlight {
    background: rgba(201, 162, 39, 0.2);
    border: 1px solid rgba(201, 162, 39, 0.4);
}

.roi-label {
    display: block;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}

.roi-value {
    display: block;
    font-family: var(--font-accent);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-gold);
}

/* =====================================================
   Application Form
   ===================================================== */
.application-section {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.05) 0%, rgba(201, 162, 39, 0.05) 100%);
    border: 2px solid rgba(46, 204, 113, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

.application-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.form-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.form-section-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.form-group.full-width {
    grid-column: span 2;
}

.form-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.form-label .required {
    color: var(--color-danger);
}

.form-input,
.form-select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--color-text-primary);
    transition: border-color 0.2s ease;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-gold);
}

.form-input::placeholder {
    color: var(--color-text-muted);
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

/* Contract Summary */
.contract-summary {
    background: rgba(201, 162, 39, 0.1);
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.summary-table {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.summary-row:last-child {
    border-bottom: none;
    padding-top: var(--space-sm);
    margin-top: var(--space-xs);
    border-top: 1px solid rgba(201, 162, 39, 0.3);
}

.summary-label {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.summary-value {
    font-family: var(--font-accent);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary);
}

.summary-value.highlight {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-gold);
}

/* Application Actions */
.application-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
}

.btn-gold {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    background: linear-gradient(135deg, var(--color-gold), #e6b84d);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(201, 162, 39, 0.4);
}

/* Agreement Section */
.agreement-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.agreement-checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.agreement-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    cursor: pointer;
}

.agreement-checkbox {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--color-gold);
    cursor: pointer;
    flex-shrink: 0;
}

.agreement-text {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.agreement-text .required {
    color: var(--color-danger);
    margin-left: 2px;
}

.agreement-link {
    color: var(--color-gold);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.agreement-link:hover {
    color: #e6b84d;
}

.agreement-note {
    margin-top: var(--space-md);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.application-note {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.8;
}

/* Disabled button state */
.btn:disabled,
.btn-gold:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Responsive for Application Form */
@media (max-width: 768px) {
    .application-section {
        padding: var(--space-md);
    }
    
    .application-form {
        gap: var(--space-md);
    }
    
    .form-section {
        padding: var(--space-md);
    }
    
    .form-section-title {
        font-size: 0.8125rem;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    
    .form-group.full-width {
        grid-column: span 1;
    }
    
    .form-label {
        font-size: 0.6875rem;
    }
    
    .form-input,
    .form-select {
        padding: var(--space-sm);
        font-size: 0.8125rem;
    }
    
    .contract-summary {
        padding: var(--space-md);
    }
    
    .summary-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
    
    .summary-label {
        font-size: 0.75rem;
    }
    
    .summary-value {
        font-size: 0.8125rem;
    }
    
    .summary-value.highlight {
        font-size: 1rem;
    }
    
    .application-actions {
        flex-direction: column;
    }
    
    .application-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Agreement Section */
    .agreement-section {
        padding: var(--space-md);
    }
    
    .agreement-text {
        font-size: 0.75rem;
    }
    
    .agreement-note {
        font-size: 0.6875rem;
    }
}

/* Breakdown Grid */
.breakdown-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-md);
}

.breakdown-card {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    text-align: center;
}

.breakdown-card.subtotal {
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
}

.breakdown-card.subtotal .breakdown-value {
    color: var(--color-tobe);
}

.breakdown-card.residual {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.breakdown-card.residual .breakdown-value {
    color: var(--color-asis);
}

.breakdown-card.total {
    background: rgba(201, 162, 39, 0.15);
    border: 1px solid rgba(201, 162, 39, 0.3);
}

.breakdown-label {
    display: block;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}

.breakdown-value {
    display: block;
    font-family: var(--font-accent);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.breakdown-card.total .breakdown-value {
    color: var(--color-gold);
}

.breakdown-calc {
    display: block;
    font-size: 0.625rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* Logic Flow */
.logic-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.logic-step {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--radius-md);
}

.logic-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-family: var(--font-accent);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-gold);
    border-radius: 50%;
    flex-shrink: 0;
}

.logic-content {
    flex: 1;
}

.logic-title {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gold);
    margin-bottom: var(--space-sm);
}

.logic-detail {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.logic-formula {
    background: rgba(0, 0, 0, 0.2);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-family: var(--font-accent);
    margin: var(--space-sm) 0;
}

.logic-formula strong {
    color: var(--color-gold);
}

.logic-note {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.logic-result {
    background: rgba(0, 0, 0, 0.2);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin: var(--space-sm) 0;
}

.result-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.result-row.highlight {
    background: rgba(201, 162, 39, 0.1);
    margin: var(--space-xs) -var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
}

.result-row.highlight strong {
    color: var(--color-gold);
    font-size: 1.25rem;
}

.result-row.savings strong {
    color: var(--color-savings);
}

.logic-conclusion {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: rgba(201, 162, 39, 0.1);
    border-left: 3px solid var(--color-gold);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 0.875rem;
}

.logic-conclusion strong {
    color: var(--color-gold);
    font-size: 1.125rem;
}

/* Projection Detail Table */
.section-note {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.projection-table-wrapper {
    overflow-x: auto;
}

.projection-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.projection-detail-table th,
.projection-detail-table td {
    padding: var(--space-sm);
    text-align: right;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.projection-detail-table th {
    text-align: center;
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(0, 0, 0, 0.2);
}

.projection-detail-table td {
    font-family: var(--font-accent);
    color: var(--color-text-secondary);
}

.projection-detail-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.projection-detail-table tfoot {
    background: rgba(201, 162, 39, 0.1);
}

.projection-detail-table tfoot td {
    font-weight: 600;
    color: var(--color-gold);
}

/* Internal Insights */
.internal-insights {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

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

.insight-list li {
    padding: var(--space-sm) 0;
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.insight-list strong {
    color: var(--color-text-primary);
}

/* Responsive for Internal Section */
@media (max-width: 992px) {
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .roi-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .breakdown-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    /* Internal Section */
    .internal-section {
        padding: var(--space-md);
    }
    
    .internal-header {
        font-size: 0.75rem;
        flex-wrap: wrap;
    }
    
    .internal-content {
        gap: var(--space-lg);
    }
    
    .internal-subtitle {
        font-size: 0.8125rem;
        display: flex;
        align-items: center;
        gap: var(--space-xs);
    }
    
    /* Logic Overview */
    .logic-overview-section {
        padding: var(--space-md);
    }
    
    .logic-cards {
        grid-template-columns: 1fr;
    }
    
    .logic-card {
        padding: var(--space-md);
    }
    
    .logic-card-title {
        font-size: 0.8125rem;
    }
    
    .logic-formula-box {
        padding: var(--space-sm);
        overflow-x: auto;
    }
    
    .logic-formula-box .formula {
        font-size: 0.625rem;
        white-space: nowrap;
    }
    
    .logic-details {
        font-size: 0.6875rem;
        padding-left: var(--space-md);
    }
    
    /* Correction Factors */
    .correction-factors-section {
        padding: var(--space-md);
    }
    
    .correction-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .correction-item {
        padding: var(--space-md);
    }
    
    .correction-label {
        font-size: 0.75rem;
    }
    
    .correction-desc {
        font-size: 0.625rem;
    }
    
    .correction-note {
        padding: var(--space-md);
    }
    
    .correction-note h5 {
        font-size: 0.75rem;
    }
    
    .correction-note p,
    .correction-note ul {
        font-size: 0.6875rem;
    }
    
    /* Pricing Adjustment */
    .pricing-adjustment-section {
        padding: var(--space-md);
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    
    .pricing-input-card {
        padding: var(--space-sm);
    }
    
    .pricing-label {
        font-size: 0.625rem;
    }
    
    .pricing-input {
        font-size: 0.9375rem;
    }
    
    .pricing-select-full,
    .pricing-select {
        font-size: 0.75rem;
        padding: var(--space-sm);
    }
    
    /* Progressive Pricing */
    .progressive-pricing-section {
        padding: var(--space-md);
    }
    
    .progressive-tables {
        grid-template-columns: 1fr;
    }
    
    .progressive-table-card {
        padding: var(--space-md);
    }
    
    .progressive-table-card .table-title {
        font-size: 0.8125rem;
    }
    
    .progressive-table-card .table-desc {
        font-size: 0.625rem;
    }
    
    .progressive-table th,
    .progressive-table td {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.75rem;
    }
    
    .progressive-table th {
        font-size: 0.625rem;
    }
    
    .scale-input {
        width: 50px;
        font-size: 0.8125rem;
    }
    
    .progressive-logic {
        padding: var(--space-md);
    }
    
    .progressive-logic .logic-title {
        font-size: 0.75rem;
    }
    
    .progressive-logic .logic-list {
        font-size: 0.75rem;
        padding-left: var(--space-md);
    }
    
    .current-scale-display {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .current-scale-display .scale-label {
        font-size: 0.75rem;
    }
    
    .current-scale-display .scale-value {
        font-size: 0.9375rem;
    }
    
    /* Residual Rate */
    .residual-rate-section {
        padding: var(--space-md);
    }
    
    .residual-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
    
    .residual-task {
        font-size: 0.6875rem;
    }
    
    .residual-input {
        width: 50px;
        font-size: 0.8125rem;
    }
    
    .residual-suffix {
        font-size: 0.75rem;
    }
    
    .residual-note {
        padding: var(--space-sm);
    }
    
    .residual-note p {
        font-size: 0.6875rem;
    }
    
    /* ROI Summary */
    .roi-summary-section {
        padding: var(--space-md);
    }
    
    .roi-summary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
    
    .roi-card {
        padding: var(--space-sm);
    }
    
    .roi-label {
        font-size: 0.625rem;
    }
    
    .roi-value {
        font-size: 1rem;
    }
    
    /* Breakdown */
    .breakdown-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
    
    .breakdown-card {
        padding: var(--space-sm);
    }
    
    .breakdown-label {
        font-size: 0.625rem;
    }
    
    .breakdown-value {
        font-size: 0.9375rem;
    }
    
    /* Logic Flow */
    .logic-step {
        flex-direction: column;
        padding: var(--space-md);
    }
    
    .logic-number {
        align-self: flex-start;
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    
    .logic-title {
        font-size: 0.8125rem;
    }
    
    .logic-detail {
        font-size: 0.75rem;
    }
    
    .logic-formula {
        font-size: 0.6875rem;
        overflow-x: auto;
    }
    
    .logic-note {
        font-size: 0.625rem;
    }
    
    /* Projection Table */
    .projection-detail-table th,
    .projection-detail-table td {
        padding: var(--space-xs);
        font-size: 0.625rem;
    }
    
    .projection-detail-table th {
        font-size: 0.5625rem;
    }
}

@media (max-width: 480px) {
    .residual-grid {
        grid-template-columns: 1fr;
    }
    
    .roi-summary-grid {
        grid-template-columns: 1fr;
    }
    
    .breakdown-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   Result CTA
   ===================================================== */
.result-cta {
    text-align: center;
    padding: var(--space-3xl);
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.1) 0%, rgba(201, 162, 39, 0.02) 100%);
    border: 1px solid rgba(201, 162, 39, 0.2);
    border-radius: var(--radius-xl);
}

.cta-headline {
    margin-bottom: var(--space-xl);
}

.cta-eyecatch {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.cta-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.6;
}

.cta-desc {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
    line-height: 1.9;
}

.cta-value {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-lg) var(--space-2xl);
    background: rgba(201, 162, 39, 0.15);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
}

.cta-savings-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.cta-savings-value {
    font-family: var(--font-accent);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gold);
}

/* Data Send Option */
.cta-data-option {
    margin-bottom: var(--space-xl);
}

.data-send-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: rgba(100, 149, 237, 0.1);
    border: 2px solid rgba(100, 149, 237, 0.3);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 500px;
    margin: 0 auto;
}

.data-send-checkbox:hover {
    border-color: rgba(100, 149, 237, 0.5);
    background: rgba(100, 149, 237, 0.15);
}

.data-send-checkbox input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin-top: 2px;
    accent-color: var(--color-gold);
    flex-shrink: 0;
}

.data-send-checkbox:has(input:checked) {
    border-color: var(--color-gold);
    background: rgba(201, 162, 39, 0.1);
}

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

.checkbox-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.checkbox-desc {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* CTA Data Option - Responsive */
@media (max-width: 768px) {
    .cta-data-option {
        padding: 0 var(--space-sm);
    }
    
    .data-send-checkbox {
        max-width: 100%;
        padding: var(--space-md);
        gap: var(--space-sm);
    }
    
    .data-send-checkbox input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }
    
    .checkbox-title {
        font-size: 0.875rem;
    }
    
    .checkbox-desc {
        font-size: 0.6875rem;
    }
}

@media (max-width: 480px) {
    .data-send-checkbox {
        padding: var(--space-sm);
    }
    
    .checkbox-title {
        font-size: 0.8125rem;
    }
    
    .checkbox-desc {
        font-size: 0.625rem;
    }
    
    .cta-commitment-hint {
        flex-direction: column;
        text-align: center;
        font-size: 0.75rem;
        padding: var(--space-xs) var(--space-sm);
    }
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn svg {
    width: 16px;
    height: 16px;
}

.btn-primary {
    color: var(--color-primary);
    background: var(--gradient-gold);
    border: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

.btn-secondary {
    color: var(--color-text-primary);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.cta-note {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.cta-commitment-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--color-gold);
}

.cta-commitment-hint svg {
    flex-shrink: 0;
}

.cta-commitment-hint .hint-link {
    color: var(--color-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cta-commitment-hint .hint-link:hover {
    color: #f59e0b;
}

.cta-commitment-hint.hidden {
    display: none;
}

/* =====================================================
   Footer
   ===================================================== */
.footer {
    background: var(--color-primary-dark);
    padding: var(--space-xl) 0;
    text-align: center;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
}

.footer-link {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: var(--color-gold);
}

.footer-copy {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.footer-tagline {
    font-size: 0.6875rem;
    font-style: italic;
    color: var(--color-text-muted);
    opacity: 0.6;
}

/* =====================================================
   Responsive - Tablet (992px以下)
   ===================================================== */
@media (max-width: 992px) {
    .matrix-header,
    .matrix-row {
        grid-template-columns: 140px repeat(3, 1fr);
        gap: var(--space-sm);
    }
}

/* =====================================================
   Responsive - Mobile (768px以下)
   ===================================================== */
@media (max-width: 768px) {
    /* Base adjustments */
    html {
        font-size: 15px;
    }
    
    /* 単語の途中で改行しない */
    body {
        word-break: keep-all;
        overflow-wrap: break-word;
    }
    
    /* Hero Section - タブレットでも画面いっぱいに */
    .hero {
        min-height: 100svh;
        min-height: 100vh; /* フォールバック */
        padding-top: 70px;
    }
    
    .hero-content {
        padding: var(--space-xl);
    }
    
    .title-line {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.0625rem;
        line-height: 1.8;
    }
    
    /* Navigation */
    .nav-container {
        padding: 0 var(--space-sm);
        height: 50px;
    }
    
    .nav-links {
        gap: var(--space-xs);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .nav-links::-webkit-scrollbar {
        display: none;
    }
    
    .nav-links a {
        font-size: 0.625rem;
        white-space: nowrap;
        padding: var(--space-xs) var(--space-sm);
    }
    
    .nav-logo .logo-text {
        font-size: 0.9375rem;
    }
    
    .nav-dropdown-menu {
        position: fixed;
        top: 50px;
        left: var(--space-sm);
        right: var(--space-sm);
        margin-top: 0;
    }
    
    /* Container & Section */
    .container {
        padding: 0 var(--space-md);
    }
    
    .section {
        padding: var(--space-2xl) 0;
    }
    
    .section-header {
        margin-bottom: var(--space-xl);
    }
    
    .section-title {
        font-size: 1.25rem;
    }
    
    /* Hero - スマホでは画面いっぱいに */
    .hero {
        min-height: 100svh;
        min-height: 100vh; /* フォールバック */
        padding-top: 60px;
    }
    
    .hero-content {
        padding: var(--space-lg);
    }
    
    .hero-badge {
        padding: var(--space-xs) var(--space-md);
        margin-bottom: var(--space-xl);
    }
    
    .badge-text {
        font-size: 0.6875rem;
    }
    
    .title-line {
        font-size: 1.75rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        line-height: 1.9;
    }
    
    /* Sim Step Block */
    .sim-step {
        padding: var(--space-md);
        margin-bottom: var(--space-md);
    }
    
    .step-header {
        margin-bottom: var(--space-md);
    }
    
    .step-title {
        font-size: 1rem;
    }
    
    .step-desc {
        font-size: 0.8125rem;
    }
    
    /* Growth Matrix - 縦型レイアウト */
    .growth-matrix {
        padding: var(--space-md);
        overflow-x: visible;
    }
    
    .matrix-header {
        display: none; /* ヘッダーを非表示にし、各行にラベルを表示 */
    }
    
    .matrix-row {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        padding: var(--space-md);
        background: rgba(255, 255, 255, 0.02);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-md);
    }
    
    .matrix-row:last-child {
        margin-bottom: 0;
    }
    
    .label-cell {
        padding-bottom: var(--space-sm);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .axis-label {
        font-size: 0.9375rem;
    }
    
    .axis-hint {
        display: block;
        padding-left: 0;
        margin-top: var(--space-xs);
        font-size: 0.75rem;
    }
    
    /* Mobile matrix - 横並び入力 */
    .mobile-input-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
    }
    
    .input-cell {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    
    .input-cell::before {
        content: attr(data-label);
        display: block;
        font-size: 0.625rem;
        color: var(--color-gold);
        text-align: center;
        margin-bottom: var(--space-xs);
    }
    
    .input-wrapper {
        max-width: none;
        width: 100%;
    }
    
    .input-wrapper.large {
        max-width: none;
    }
    
    .input-wrapper input {
        padding: var(--space-sm);
        font-size: 0.9375rem;
        text-align: center;
    }
    
    .input-suffix {
        font-size: 0.625rem;
        padding: 0 var(--space-xs);
    }
    
    /* Growth Preview */
    .growth-preview {
        margin-top: var(--space-md);
        padding: var(--space-md);
    }
    
    .preview-header {
        font-size: 0.75rem;
    }
    
    .growth-charts {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .growth-chart-box {
        padding: var(--space-sm);
    }
    
    .chart-wrapper {
        height: 80px;
    }
    
    .chart-wrapper canvas {
        max-height: 80px !important;
    }
    
    /* Linkage Info */
    .linkage-info {
        margin-top: var(--space-md);
        padding: var(--space-md);
    }
    
    .linkage-header {
        font-size: 0.75rem;
    }
    
    .linkage-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    
    /* Form Grid (Step 2) */
    .form-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .form-group {
        gap: var(--space-xs);
    }
    
    .label-text {
        font-size: 0.8125rem;
    }
    
    .label-hint {
        font-size: 0.625rem;
    }
    
    /* Tooltip - モバイルでは下に表示 */
    .tooltip-content {
        bottom: auto;
        top: 100%;
        margin-top: var(--space-sm);
        margin-bottom: 0;
        width: 200px;
    }
    
    /* Cost Summary */
    .cost-summary {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
        padding: var(--space-md);
    }
    
    .cost-item {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        padding: var(--space-sm);
        background: rgba(0, 0, 0, 0.2);
        border-radius: var(--radius-sm);
    }
    
    .cost-value {
        font-size: 1rem;
    }
    
    /* Task Cards (Step 3) */
    .task-cards {
        gap: var(--space-sm);
    }
    
    .task-card {
        border-radius: var(--radius-md);
    }
    
    .task-header {
        padding: var(--space-md);
        gap: var(--space-sm);
        flex-wrap: wrap;
    }
    
    .task-toggle {
        width: 40px;
        height: 22px;
    }
    
    .toggle-slider::before {
        height: 16px;
        width: 16px;
    }
    
    .task-toggle input:checked + .toggle-slider::before {
        transform: translateX(18px);
    }
    
    .task-info {
        flex: 1;
        min-width: 0;
    }
    
    .task-name {
        font-size: 0.9375rem;
    }
    
    .task-module {
        font-size: 0.625rem;
    }
    
    .task-badges {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }
    
    .task-linkage,
    .task-status {
        font-size: 0.5rem;
        padding: 2px 6px;
    }
    
    /* Task Params */
    .task-params {
        padding: 0 var(--space-md) var(--space-md);
    }
    
    .param-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    
    .param-item {
        padding: var(--space-sm);
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .param-label {
        font-size: 0.625rem;
    }
    
    .param-value {
        font-size: 0.9375rem;
    }
    
    .param-input-inline {
        justify-content: flex-end;
    }
    
    .param-input-inline input {
        width: 50px;
        padding: var(--space-xs);
        font-size: 0.8125rem;
    }
    
    .param-input-inline input.volume-input {
        width: 80px;
        font-size: 0.875rem;
    }
    
    .param-input-inline span {
        font-size: 0.625rem;
    }
    
    /* Calculate Button */
    .calculate-section {
        padding: var(--space-md) 0;
    }
    
    .btn-calculate {
        width: 100%;
        max-width: 300px;
        padding: var(--space-md) var(--space-xl);
        font-size: 1rem;
    }
    
    /* Results Section */
    .results-matrix-section {
        margin-bottom: var(--space-lg);
    }
    
    .result-section-title {
        font-size: 0.875rem;
        margin-bottom: var(--space-md);
    }
    
    .results-matrix {
        padding: var(--space-sm);
        border-radius: var(--radius-md);
    }
    
    .matrix-wrapper {
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .result-table th,
    .result-table td {
        padding: var(--space-xs);
        font-size: 0.5625rem;
        white-space: nowrap;
    }
    
    .result-table .row-label {
        font-size: 0.5625rem;
        gap: 2px;
    }
    
    .result-table .row-label svg {
        width: 10px;
        height: 10px;
        display: none; /* スマホではアイコン非表示 */
    }
    
    .result-table td.asis,
    .result-table td.tobe {
        font-size: 0.625rem;
    }
    
    .result-table .savings-row td.savings {
        font-size: 0.75rem;
    }
    
    .result-table .reduction-row td.reduction {
        font-size: 0.6875rem;
    }
    
    /* Chart Section */
    .chart-section {
        padding: var(--space-md);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-md);
    }
    
    .peak-explanation {
        padding: var(--space-sm);
        margin-bottom: var(--space-md);
    }
    
    .peak-explanation p {
        font-size: 0.75rem;
        line-height: 1.6;
    }
    
    .chart-container {
        height: 200px;
    }
    
    .chart-container.chart-large {
        height: 250px;
    }
    
    .projection-controls {
        flex-wrap: wrap;
        gap: var(--space-xs);
    }
    
    .projection-btn {
        flex: 1;
        min-width: 70px;
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.6875rem;
        text-align: center;
    }
    
    .projection-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
    
    .projection-item {
        padding: var(--space-md);
    }
    
    .proj-label {
        font-size: 0.625rem;
    }
    
    .proj-value {
        font-size: 1rem;
    }
    
    /* Insight Section */
    .insight-section {
        padding: var(--space-md);
        overflow-x: hidden;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .insight-title {
        font-size: 0.875rem;
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .insight-title svg {
        width: 20px;
        height: 20px;
    }
    
    .insight-content {
        flex-direction: column;
        gap: var(--space-md);
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .insight-chart {
        height: 200px;
        max-width: 100%;
        overflow: hidden;
    }
    
    .insight-text {
        grid-template-columns: 1fr;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .insight-item {
        padding: var(--space-md);
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        word-break: break-word;
    }
    
    .insight-item p {
        font-size: 0.8125rem;
        word-break: break-word;
    }
    
    .insight-points {
        padding-left: var(--space-md);
    }
    
    .insight-points li {
        font-size: 0.75rem;
        word-break: break-word;
    }
    
    .insight-conclusion {
        padding: var(--space-md);
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .insight-conclusion p {
        font-size: 0.8125rem;
        word-break: break-word;
    }
    
    /* CTA Section */
    .result-cta {
        padding: var(--space-xl);
    }
    
    .cta-title {
        font-size: 1.125rem;
        line-height: 1.8;
    }
    
    .cta-desc {
        font-size: 0.8125rem;
    }
    
    .cta-value {
        padding: var(--space-md) var(--space-lg);
        width: 100%;
    }
    
    .cta-savings-value {
        font-size: 1.5rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .btn {
        width: 100%;
        justify-content: center;
        padding: var(--space-md);
        font-size: 0.875rem;
    }
    
    /* Footer */
    .footer {
        padding: var(--space-lg) 0;
    }
    
    .footer-links {
        gap: var(--space-sm) var(--space-md);
    }
    
    .footer-link {
        font-size: 0.6875rem;
    }
}

/* =====================================================
   Responsive - Small Mobile (480px以下)
   ===================================================== */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
    
    .container {
        padding: 0 var(--space-sm);
    }
    
    .sim-step {
        padding: var(--space-sm);
    }
    
    .growth-matrix {
        padding: var(--space-sm);
    }
    
    .matrix-row {
        padding: var(--space-sm);
    }
    
    .input-wrapper input {
        padding: var(--space-xs);
        font-size: 0.8125rem;
    }
    
    .task-header {
        padding: var(--space-sm);
    }
    
    .task-name {
        font-size: 0.875rem;
    }
    
    .results-matrix {
        padding: var(--space-sm);
    }
    
    .chart-container {
        height: 180px;
    }
    
    .projection-summary {
        grid-template-columns: 1fr;
    }
    
    .cta-title {
        font-size: 1rem;
    }
    
    /* Peak Section - Mobile */
    .asis-peak-section,
    .tobe-peak-section,
    #tobe-peak-section {
        padding: var(--space-md);
        margin-top: var(--space-lg);
    }
    
    .peak-legend {
        flex-wrap: wrap;
        gap: var(--space-xs);
    }
    
    .peak-legend-item {
        font-size: 0.625rem;
    }
    
    .peak-legend-note {
        font-size: 0.625rem;
        text-align: center;
        width: 100%;
    }
    
    .peak-view-controls {
        flex-wrap: wrap;
    }
    
    .peak-view-btn {
        padding: var(--space-xs) var(--space-sm);
        font-size: 0.6875rem;
    }
    
    /* Breakdown Grid - Mobile */
    .breakdown-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
    
    .breakdown-card {
        padding: var(--space-sm);
    }
    
    .breakdown-card.total,
    .breakdown-card.subtotal,
    .breakdown-card.residual {
        grid-column: span 2;
    }
    
    .breakdown-value {
        font-size: 0.9375rem;
    }
    
    .breakdown-label {
        font-size: 0.5625rem;
    }
    
    .breakdown-calc {
        font-size: 0.5rem;
    }
    
    /* Insight Section - Small Mobile */
    .insight-section {
        padding: var(--space-sm);
    }
    
    .insight-title {
        font-size: 0.8125rem;
    }
    
    .insight-chart {
        height: 150px;
    }
    
    .insight-item p {
        font-size: 0.75rem;
    }
    
    .insight-points li {
        font-size: 0.6875rem;
    }
    
    .insight-conclusion p {
        font-size: 0.75rem;
    }
}

/* Mobile-only / PC-only */
.sp-only {
    display: none;
}

@media (max-width: 768px) {
    .sp-only {
        display: inline;
    }
    
    .pc-only {
        display: none;
    }
}

/* =====================================================
   Print Styles
   ===================================================== */
@media print {
    .nav, .calculate-section, .cta-buttons {
        display: none;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .section {
        page-break-inside: avoid;
    }
}