/* Workflow Display Toggle */
@media (min-width: 769px) {
    .workflow-desktop {
        display: flex !important;
    }

    .workflow-mobile {
        display: none !important;
    }

    /* docs.html / docs-en.html - Concept Mock Desktop Display */
    .concept-mock-desktop {
        display: grid !important;
    }

    .concept-mock-mobile {
        display: none !important;
    }

    /* docs.html / docs-en.html - Comparison Table Desktop Display */
    .comparison-table-desktop {
        display: block !important;
    }

    .comparison-accordion-mobile {
        display: none !important;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .workflow-desktop {
        display: none !important;
    }

    .workflow-mobile {
        display: flex !important;
    }
    body {
        padding: 10px 0;
    }

    .container {
        padding: 0 24px;
        max-width: 100% !important;
    }

    /* docs.html / docs-en.html - Block Diagram Mobile */
    .block-diagram-desktop {
        display: none !important;
    }

    .block-diagram-mobile {
        display: flex !important;
    }

    /* docs.html / docs-en.html - Comparison Table/Accordion Toggle */
    .comparison-table-desktop {
        display: none !important;
    }

    .comparison-accordion-mobile {
        display: flex !important;
    }

    /* Accordion Expanded State */
    .comparison-accordion-mobile .expanded .accordion-content {
        max-height: 2000px !important;
    }

    /* docs.html / docs-en.html - Hero h1 Font Size */
    .hero h1[style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
    }

    /* docs.html / docs-en.html - Challenges Section Headline */
    #challenges .feature-headline {
        font-size: 2.5rem !important;
    }

    /* docs.html / docs-en.html - Concept Mock Desktop/Mobile Toggle */
    .concept-mock-desktop {
        display: none !important;
    }

    .concept-mock-mobile {
        display: flex !important;
    }

    /* docs.html / docs-en.html - Concept Mock Mobile Adjustments */
    #solution > .container > div > div[style*="background: linear-gradient(135deg, rgba(127, 219, 255, 0.15)"] {
        padding: 2rem 1rem !important;
    }

    #solution > .container > div > div > h3[style*="font-size: 1.5rem"] {
        font-size: 1.2rem !important;
    }

    #solution > .container > div > div > div > div[style*="padding: 1.5rem"] {
        padding: 1rem !important;
    }

    #solution > .container > div > div > div > div h4 {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    #solution > .container > div > div > div > div div[style*="font-family: monospace"] {
        font-size: 0.8rem !important;
    }

    /* Block Diagram Container Mobile */
    #solution > .container > div > div > div[style*="margin-top: 3rem"] {
        padding: 1.5rem 1rem !important;
    }

    #solution > .container > div > div > div h4[style*="font-size: 1.2rem"] {
        font-size: 1rem !important;
    }

    .hero {
        padding: 160px 0 20px;
    }

    .logo {
        font-size: 48px;
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .hero h1 {
        font-size: 48px;
        margin-bottom: 20px;
    }
    
    .hero .subtitle {
        font-size: 18px;
        margin-bottom: 32px;
    }
    
    .email-form {
        max-width: 100%;
        gap: 20px;
    }

    .email-input {
        padding: 20px 140px 20px 24px;
        font-size: 16px;
        border-radius: 30px;
    }
    
    .cta-button {
        padding: 12px 16px;
        font-size: 14px;
        border-radius: 20px;
        /* right: 6px; を削除 */
    }
    
    /* スマホ版でボタンテキストを切り替え */
    .cta-button .full-text {
        display: none;
    }
    
    .cta-button .short-text {
        display: inline;
    }

    .floating-shape {
        display: none;
    }
    
    /* スマホ画面でのヘッダー要素の調整 */
    .top-logo {
        top: 15px;
        left: 15px;
    }
    
    .logo-image {
        height: 40px; /* ロゴサイズを小さく */
    }
    
    .top-signin {
        top: 10px;
        right: 10px;
        gap: 6px; /* ボタン間の間隔を狭く */
    }

    .top-signin > div {
        gap: 6px !important;
    }

    .lang-switcher {
        padding: 4px 8px !important;
        font-size: 11px !important;
        border-radius: 4px !important;
    }

    .roadmap-link,
    .signin-link {
        padding: 4px 10px !important; /* パディングを小さく */
        font-size: 11px !important; /* フォントサイズを小さく */
        border-radius: 4px !important;
        white-space: nowrap;
    }
    
    .roadmap-link::before,
    .signin-link::before {
        font-size: 0.8rem; /* アイコンサイズを小さく */
        margin-right: 0.3rem;
    }
    
    /* roadmap.htmlのヘッダー対応 */
    .roadmap-page header {
        padding: 10px 15px !important;
    }
    
    .roadmap-page header img {
        height: 35px !important;
    }
    
    .roadmap-page header a[href="index.html"] {
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
    }
    
    .roadmap-page {
        padding-top: 70px !important;
    }
    
    .frill-embedded {
        height: calc(100vh - 70px) !important;
        top: 70px !important;
    }
    
    /* Hero Feature Section のモバイル対応 */
    .hero-feature-section {
        padding: 80px 0px;
        text-align: center;
    }
    
    .hero-feature-section .container {
        padding: 0 12px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 100% !important;
    }
    
    .feature-headline {
        font-size: 48px;
        margin-bottom: 40px;
        text-align: center;
        white-space: normal;
    }
    
    .feature-description {
        font-size: 26px;
        margin-bottom: 40px;
        text-align: center;
        max-width: 100%;
    }
    
    .feature-demo {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    
    .demo-image {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
    
    /* Video Section のモバイル対応 */
    .video-section {
        padding: 60px 0px;
        text-align: center;
    }
    
    .video-section .container {
        padding: 0 12px;
        max-width: 100% !important;
    }
    
    .demo-video-container {
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
    }
    
    .demo-video-container > div {
        max-width: 100% !important;
        margin: 0.5rem 0 !important;
        padding-bottom: 56.25% !important; /* 16:9のアスペクト比 */
    }
}

@media (max-width: 480px) {
    .logo {
        font-size: 44px;
        margin-bottom: 32px;
    }

    .hero h1 {
        font-size: 36px;
        line-height: 1.2;
    }

    /* docs.html / docs-en.html - Hero h1 for smaller screens */
    .hero h1[style*="font-size: 2rem"] {
        font-size: 1.3rem !important;
    }

    .hero .subtitle {
        font-size: 18px;
        margin-bottom: 32px;
    }

    /* docs.html / docs-en.html - Comparison Table for smaller screens */
    #comparison table {
        font-size: 0.75rem;
    }

    #comparison table th,
    #comparison table td {
        padding: 0.75rem 0.5rem !important;
    }

    /* docs.html / docs-en.html - Feature Headline for smaller screens */
    .feature-headline {
        font-size: 1.8rem !important;
    }

    /* docs.html / docs-en.html - Concept Mock for smaller screens */
    #solution > .container > div > div > h3[style*="font-size: 1.5rem"] {
        font-size: 1.1rem !important;
    }

    #solution > .container > div > div > div > div h4 {
        font-size: 0.95rem !important;
    }

    #solution > .container > div > div > div > div div[style*="font-family: monospace"] {
        font-size: 0.75rem !important;
        line-height: 1.6 !important;
    }

    #solution > .container > div > div > div > div[style*="padding: 1.5rem"] {
        padding: 0.75rem !important;
    }

    .email-form {
        gap: 16px;
    }
    
    .email-input {
        padding: 18px 120px 18px 20px;
        font-size: 15px;
    }
    
    .cta-button {
        padding: 18px 36px;     /* より大きなパディング */
        font-size: 18px;        /* より大きなフォントサイズ */
        border-radius: 28px;
        margin: 0 auto;         /* 中央配置を明示的に指定 */
        display: block;         /* ブロック要素として表示 */
        width: fit-content;     /* コンテンツに合わせた幅 */
    }
    
    /* より小さい画面での調整 */
    .top-logo {
        top: 10px;
        left: 10px;
    }
    
    .logo-image {
        height: 35px;
    }
    
    .top-signin {
        top: 10px;
        right: 10px;
        gap: 6px;
    }
    
    .roadmap-link,
    .signin-link {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }
    
    .roadmap-link::before,
    .signin-link::before {
        font-size: 0.75rem;
        margin-right: 0.25rem;
    }
    
    .roadmap-page header {
        padding: 8px 12px !important;
    }
    
    .roadmap-page header img {
        height: 30px !important;
    }
    
    .roadmap-page header a[href="index.html"] {
        padding: 5px 10px !important;
        font-size: 0.8rem !important;
    }
    
    .roadmap-page {
        padding-top: 60px !important;
    }
    
    .frill-embedded {
        height: calc(100vh - 60px) !important;
        top: 60px !important;
    }
    
    /* 小さいスクリーンでの Video Section 追加調整 */
    .video-section {
        padding: 40px 0px;
    }
    
    .video-section .container {
        padding: 0 8px;
        max-width: 100% !important;
    }
    
    .video-section .feature-headline {
        font-size: 32px;
        margin-bottom: 32px;
    }
    
    .video-section .feature-headline::after {
        width: 30px;
        bottom: -12px;
    }
    
    .demo-video-container > div {
        margin: 0 !important;
        padding-bottom: 56.25% !important; /* 16:9のアスペクト比を維持 */
        border-radius: 8px !important; /* モバイル用の小さめの角丸 */
    }
    
    /* Feature demo動画の追加調整 */
    .hero-feature-section {
        padding: 60px 0px;
    }
    
    .hero-feature-section .container {
        padding: 0 8px;
        max-width: 100% !important;
    }
    
    .feature-demo {
        width: 100%;
    }
    
    .demo-image {
        width: 100%;
        max-width: 100%;
        border-radius: 12px; /* モバイル用の角丸を維持 */
    }
}

@media (max-height: 700px) {
    .logo {
        margin-bottom: 30px;
    }
    
    .hero h1 {
        margin-bottom: 20px;
    }
    
    .hero .subtitle {
        margin-bottom: 40px;
    }
    
    .hero {
        padding: 20px 0;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg, #1A1A1A 0%, rgba(42, 42, 42, 0.8) 100%);
        color: #E5E5E5;
    }

    /* Dark mode organic background */
    .organic-bg {
        background: 
            radial-gradient(circle at 25% 30%, rgba(127, 219, 255, 0.08) 0%, transparent 60%),
            radial-gradient(circle at 75% 70%, rgba(255, 111, 97, 0.06) 0%, transparent 50%),
            radial-gradient(circle at 40% 80%, rgba(207, 255, 229, 0.1) 0%, transparent 55%),
            radial-gradient(circle at 60% 20%, rgba(127, 219, 255, 0.04) 0%, transparent 45%);
    }

    /* Dark mode floating shapes */
    .floating-shape:nth-child(1) {
        background: radial-gradient(circle, rgba(127, 219, 255, 0.1), rgba(255, 111, 97, 0.06));
    }

    .floating-shape:nth-child(2) {
        background: radial-gradient(circle, rgba(255, 111, 97, 0.08), rgba(207, 255, 229, 0.1));
    }

    .floating-shape:nth-child(3) {
        background: radial-gradient(circle, rgba(207, 255, 229, 0.12), rgba(127, 219, 255, 0.06));
    }

    .floating-shape:nth-child(4) {
        background: radial-gradient(circle, rgba(127, 219, 255, 0.06), transparent);
    }

    /* Dark mode hero text */
    .hero h1 {
        background: linear-gradient(135deg, #E5E5E5 0%, #7FDBFF 40%, #FF6F61 80%, #E5E5E5 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .hero .subtitle {
        color: #B0B0B0;
    }

    /* Dark mode form elements */
    .email-input {
        background: rgba(42, 42, 42, 0.85);
        border: 2px solid rgba(127, 219, 255, 0.3);
        color: #E5E5E5;
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .email-input:focus {
        background: rgba(42, 42, 42, 0.95);
        box-shadow: 
            0 16px 48px rgba(127, 219, 255, 0.2),
            0 0 0 4px rgba(127, 219, 255, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .email-input::placeholder {
        color: rgba(229, 229, 229, 0.5);
    }

    .form-note {
        color: rgba(229, 229, 229, 0.6);
    }

    /* Dark mode modal */
    .success-modal {
        background: rgba(0, 0, 0, 0.8);
    }

    .modal-content {
        background: rgba(42, 42, 42, 0.95);
        border: 1px solid rgba(127, 219, 255, 0.3);
        box-shadow: 
            0 32px 80px rgba(0, 0, 0, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .modal-icon::after {
        color: #E5E5E5;
    }

    .modal-message {
        color: rgba(229, 229, 229, 0.8);
    }

    /* Dark mode ambient cursor */
    .ambient-cursor {
        background: radial-gradient(circle, rgba(127, 219, 255, 0.4), transparent);
    }

    /* Dark mode focus states */
    .email-input:focus ~ body,
    body:has(.email-input:focus) {
        background: linear-gradient(135deg, #1A1A1A 0%, rgba(127, 219, 255, 0.03) 100%) !important;
    }

    /* Problem Solution Section - Mobile */
    .problem-solution-section {
        padding: 50px 20px;
    }

    .problem-quote {
        font-size: 22px;
        padding: 20px;
        margin: 20px 0;
    }

    .problem-explanation {
        font-size: 16px;
    }

    .solution-points li {
        font-size: 16px;
        padding-left: 30px;
    }

    .example-block {
        padding: 25px 20px;
    }

    .example-title {
        font-size: 22px;
    }

    .example-input {
        font-size: 18px;
        padding: 15px;
    }

    .example-bullets li {
        font-size: 16px;
        padding-left: 30px;
    }

    .example-result {
        font-size: 17px;
        padding: 15px;
    }
}

/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
    /* docs.html / docs-en.html - Mobile Block Diagram Dark Mode */
    .block-diagram-mobile > div[style*="background: #FFF5E6"] {
        background: rgba(255, 245, 230, 0.15) !important;
    }

    .block-diagram-mobile > div[style*="background: #E6F7FF"] {
        background: rgba(230, 247, 255, 0.15) !important;
    }

    .block-diagram-mobile > div > div[style*="background: #F0FFF4"],
    .block-diagram-mobile > div > div[style*="background: #FAF5FF"],
    .block-diagram-mobile > div > div[style*="background: #FFF5F5"] {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    .block-diagram-mobile div[style*="color: #2A2A2A"] {
        color: #ffffff !important;
    }

    .block-diagram-mobile div[style*="color: #666"] {
        color: rgba(255, 255, 255, 0.75) !important;
    }

    /* Concept Mock Mobile - Dark Mode */
    .concept-mock-mobile > div[style*="background: white"] {
        background: rgba(42, 42, 42, 0.9) !important;
    }

    .concept-mock-mobile h4[style*="color: #FF6F61"],
    .concept-mock-mobile h4[style*="color: #7FDBFF"] {
        color: inherit !important;
    }

    .concept-mock-mobile div[style*="background: #f5f5f5"] {
        background: rgba(255, 255, 255, 0.1) !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }

    .concept-mock-mobile div[style*="background: #e6f7ff"] {
        background: rgba(127, 219, 255, 0.2) !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }

    .concept-mock-mobile div[style*="color: #666"] {
        color: rgba(255, 255, 255, 0.75) !important;
    }

    .concept-mock-mobile span[style*="color: #999"] {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    /* Comparison Accordion Mobile - Dark Mode */
    .comparison-accordion-mobile > div[style*="background: white"] {
        background: rgba(42, 42, 42, 0.9) !important;
    }

    .comparison-accordion-mobile > div[style*="background: linear-gradient"] {
        background: linear-gradient(135deg, rgba(127, 219, 255, 0.25) 0%, rgba(255, 111, 97, 0.25) 100%) !important;
    }

    .comparison-accordion-mobile h3,
    .comparison-accordion-mobile h4,
    .comparison-accordion-mobile span[style*="color: #2A2A2A"] {
        color: #ffffff !important;
    }

    .comparison-accordion-mobile button {
        background: rgba(255, 255, 255, 0.05) !important;
        color: #ffffff !important;
    }

    .comparison-accordion-mobile div[style*="background: #f5f5f5"],
    .comparison-accordion-mobile div[style*="background: rgba(127, 219, 255, 0.1)"] {
        background: rgba(127, 219, 255, 0.15) !important;
    }

    .comparison-accordion-mobile span[style*="color: #666"] {
        color: rgba(255, 255, 255, 0.75) !important;
    }

    /* Problem Solution Section - Dark Mode */
    .problem-solution-section {
        background: transparent;
    }

    .problem-intro,
    .problem-explanation {
        color: #B0B0B0;
    }

    .problem-quote {
        color: #E5E5E5;
        background: linear-gradient(135deg, rgba(127, 219, 255, 0.12) 0%, rgba(255, 111, 97, 0.12) 100%);
        border-left-color: #7FDBFF;
    }

    .solution-intro,
    .solution-points li,
    .example-output {
        color: #B0B0B0;
    }

    .solution-summary,
    .example-title,
    .example-bullets li,
    .example-result {
        color: #E5E5E5;
    }

    .solution-analogy {
        color: #888;
    }

    .example-block {
        background: linear-gradient(135deg, rgba(42, 42, 42, 0.95) 0%, rgba(26, 26, 26, 0.98) 100%);
        border-color: rgba(127, 219, 255, 0.2);
    }

    .example-input {
        color: #E5E5E5;
        background: rgba(127, 219, 255, 0.15);
        border-left-color: #7FDBFF;
    }

    .example-result {
        background: linear-gradient(135deg, rgba(127, 219, 255, 0.12) 0%, rgba(255, 111, 97, 0.12) 100%);
    }
}