@charset "utf-8";

/**
 * ====================================================================
 * SUNIVA StoryBook Component Style Sheet v2.5.5 [AI Life Final Master]
 * Design Inspired by Apple Onboarding & Nintendo Switch Setup UI
 * Reviewed by Chappy & Gemini Optimized for EC-CUBE 4.3 Environment
 * ====================================================================
 */

:root {
    /* Brand Colors */
    --sv-primary: #2f8f5b;
    --sv-primary-light: rgba(47, 143, 91, 0.08);
    --sv-primary-glow: rgba(47, 143, 91, 0.25);
    --sv-text-main: #222222;
    --sv-text-sub: #444444;
    --sv-text-muted: #666666;
    
    /* Backgrounds & Gradients */
    --sv-bg-base: #fffaf3; /* 上下の隙間を完全に殺すための温かみのある背景色 */
    --sv-glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.82));
    --sv-glass-header: rgba(255, 255, 255, 0.75);
    --sv-glass-footer: rgba(255, 255, 255, 0.8);
    --sv-dot-inactive: #d9d9d9;
    --sv-journey-btn-bg: linear-gradient(135deg, #ff9f63, #ff6f91);
    --sv-journey-glow: rgba(255, 111, 145, 0.3);
    --sv-journey-glow-hover: rgba(255, 111, 145, 0.4);
    
    /* Utility Settings */
    --sv-blur-radius: 18px;
    --sv-blur-header-footer: 15px;
    --sv-radius-bubble: 20px;
    --sv-shadow-header: 0 4px 20px rgba(0, 0, 0, 0.03);
    --sv-shadow-button: 0 6px 20px rgba(0, 0, 0, 0.06);
    --sv-shadow-avatar: 0 10px 30px rgba(0, 0, 0, 0.15);
    --sv-font-family: "Hiragino Sans", "Yu Gothic", "Segoe UI", -apple-system, sans-serif;
    
    /* Animation Timings */
    --sv-transition-page: 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    --sv-transition-ui: 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    --sv-zoom-duration: 12s;
}

/* ====================================================================
   02. BASE HTML & BODY SAFETY RESET
   ==================================================================== */
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--sv-bg-base);
    overflow-x: hidden;
    font-family: var(--sv-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#suniva-storybook * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

#suniva-storybook a {
    color: inherit;
    text-decoration: none;
}

#suniva-storybook button {
    font-family: inherit;
    outline: none;
}

#suniva-storybook ::selection {
    background: var(--sv-primary);
    color: #ffffff;
}

/* ====================================================================
   03. MAIN APP WRAPPER
   ==================================================================== */
#suniva-storybook {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--sv-bg-base);
    overflow: hidden;
    z-index: 1;
}

/* 環境光フェードエフェクト */
.storybook-background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.storybook-background::before {
    content: "";
    position: absolute;
    width: 900px;
    height: 900px;
    left: -220px;
    top: -220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 240, 180, 0.3) 0%, rgba(255, 240, 180, 0.1) 35%, transparent 75%);
    animation: lightFloatEngine 14s ease-in-out infinite;
}

@keyframes lightFloatEngine {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.05); }
}

/* 共通表示フェード設定 */
.story-page {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(40px) scale(0.98);
    transition: opacity 0.55s ease, visibility 0.55s ease, transform 0.55s ease;
    z-index: 1;
    will-change: opacity, transform;
}

.story-page.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) scale(1);
    z-index: 5;
}

.story-page.is-prev {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-40px) scale(0.98);
    z-index: 1;
}

.story-page.is-next {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(40px) scale(0.98);
    z-index: 1;
}

/* 画像共通設定 */
.story-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    contain: layout paint;
}

.story-image img {
    width: 100%;
    height: 100%;
    object-position: center center;
    display: block;
    transition: transform var(--sv-transition-page);
    will-change: transform;
    filter: brightness(0.96);
}

.story-page.is-active .story-image img {
    animation: immersiveSlowZoom var(--sv-zoom-duration) ease-out forwards;
}

@keyframes immersiveSlowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.06); }
}

/* Aパターン準拠：HTMLテキストカードの非表示化 */
.story-content {
    position: absolute;
    z-index: 10;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.story-content .story-heading,
.story-content .story-text,
.story-content .story-note {
    display: none !important;
}

/* 非アクティブページのゴースト排除防御策 */
.story-page:not(.is-active) .story-content,
.story-page:not(.is-active) .nenec-guide {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ラスト演出用オーバーレイ */
.journey-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, background 0.8s ease, visibility 0.8s;
    z-index: 99999;
}

.journey-overlay.active {
    opacity: 1;
    visibility: visible;
    background: rgba(255, 255, 255, 0.97);
}

.journey-message {
    text-align: center;
    font-size: 36px;
    font-weight: 900;
    color: var(--sv-primary);
    line-height: 1.5;
    transform: translateY(20px);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.journey-overlay.active .journey-message {
    transform: translateY(0);
}

/* ====================================================================
   09. NENECHI GUIDE FRAMEWORK (全端末ベース共通設計・衝突完全防御)
   ==================================================================== */
.nenec-guide {
    position: absolute !important;
    right: 24px !important;
    bottom: 96px !important; /* 操作ボタン群の下敷きにならない安全な配置 */
    display: flex !important;
    align-items: flex-end !important;
    gap: 15px !important;
    z-index: 99999 !important; /* 確実に最前面へ露出させる */
    opacity: 1 !important;
    visibility: visible !important;
}

.nenec-avatar {
    display: block !important;
    width: 78px !important;
    height: 78px !important;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    box-shadow: var(--sv-shadow-avatar, 0 10px 30px rgba(0, 0, 0, 0.15));
    pointer-events: auto !important; /* 画像エリアはクリック可能 */
    cursor: pointer !important;
    transition: transform var(--sv-transition-ui, 0.35s ease);
}

.nenec-avatar:hover {
    transform: scale(1.06) rotate(2deg);
}

.nenec-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* 🌸 チャッピー先生指示：通常時は非表示、音声再生中のみクラス付与で出現する制御へ変更 */
.nenec-bubble {
    display: block !important;
    max-width: 200px;
    padding: 12px 16px;
    border-radius: var(--sv-radius-bubble, 20px);
    background: #ffffff;
    color: var(--sv-text-main, #222222);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transform-origin: bottom right;
    pointer-events: none !important; /* 透明領域がボタンのクリックを奪うのを防止 */
    
    /* 初期状態：隠しておく */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(8px) scale(0.96);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

/* 🌸 音声再生中（JSで .is-speaking クラスが付与された時）だけ美しく浮かび上がらせる */
.nenec-bubble.is-speaking {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1);
}

/* ====================================================================
   LAYOUT A：PCレイアウト（1367px以上）- 16:9限界フィット & ねねち画面固定
   ==================================================================== */
@media (min-width: 1367px) {
    .storybook-stage {
        position: relative;
        width: min(100vw - 32px, calc((100dvh - 32px) * 16 / 9));
        height: min(calc((100vw - 32px) * 9 / 16), calc(100dvh - 32px));
        max-width: none;
        aspect-ratio: 16 / 9;
        margin: 16px auto;
        overflow: hidden;
        border-radius: 18px;
        background: var(--sv-bg-base);
        z-index: 10;
    }

    .story-image img {
        object-fit: contain;
    }

    .story-content {
        left: 48px;
        bottom: 42px;
    }

    .story-step {
        display: inline-block;
        padding: 6px 14px;
        border-radius: 999px;
        background: var(--sv-primary);
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.05em;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* PC版ねねち：画面右下に完全にピン留め */
    .nenec-guide {
        position: fixed !important;
        right: 32px !important;
        bottom: 96px !important;
    }
}

/* ====================================================================
   LAYOUT B：タブレットレイアウト（768px～1366px）- 縦横比死守・containスクロール
   ==================================================================== */
@media (min-width: 768px) and (max-width: 1366px) {
    #suniva-storybook {
        width: 100vw;
        min-height: 100vh;
        overflow-x: hidden;
        overflow-y: auto; /* 縦方向のスクロールを許可 */
        background: #fffaf3;
    }

    .storybook-stage {
        position: relative;
        width: 100vw;
        max-width: 100vw;
        aspect-ratio: 16 / 9; /* タブレット画面でも絶対画像を歪ませない */
        height: auto;
        margin: 0 auto 24px;
        overflow: hidden;
        border-radius: 0;
    }

    .story-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
    }

    .story-content {
        left: 20px;
        bottom: 90px;
    }

    .story-step {
        display: none !important;
    }

    /* タブレットねねち：フィット位置調整 */
    .nenec-guide {
        right: 18px !important;
        bottom: 40px !important;
    }
    .nenec-avatar {
        width: 64px !important;
        height: 64px !important;
    }
}

/* ====================================================================
   LAYOUT C：スマートフォンレイアウト（767px以下）- 縦フルスクリーン
   ==================================================================== */
@media (max-width: 767px) {
    #suniva-storybook {
        width: 100vw;
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .storybook-stage {
        position: relative;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-width: none;
        aspect-ratio: auto;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 0;
        background: var(--sv-bg-base);
        z-index: 10;
    }

    .story-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .story-content {
        left: 12px;
        bottom: 54px;
    }

    .story-step {
        display: none !important;
    }

    /* スマホねねち：極小42px・省スペースのためバブル非表示 */
    .nenec-guide {
        right: 12px !important;
        bottom: 16px !important;
    }
    .nenec-avatar {
        width: 42px !important;
        height: 42px !important;
    }
}

/* ====================================================================
   15. ACCESSIBILITY & MOTION ACCELERATOR
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
    .story-page, .story-image img, .nenec-avatar, .nenec-bubble, .journey-overlay {
        transition: none !important;
        animation: none !important;
    }
    .story-page.is-active .story-image img { animation: none !important; }
}

/* ====================================================================
   16. DUPLICATE UI CLEANUP (画像内ナビ連動による全画面HTML重複要素の完全消去＆最前面ガード)
   ==================================================================== */
/* タブレット・スマホでは完全に消去、PCのみ最前面表示を徹底マージ */
@media (min-width: 768px) and (max-width: 1366px) {
    .storybook-header,
    .storybook-footer,
    .story-controls,
    .story-dots,
    .story-prev,
    .story-next {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .storybook-header,
    .storybook-footer,
    .story-controls,
    .story-dots,
    .story-prev,
    .story-next {
        display: none !important;
    }
}

@media (min-width: 1367px) {
    .storybook-footer {
        display: flex !important;
        position: relative;
        z-index: 9999 !important;
    }

    .story-button,
    #storyPrev,
    #storyNext {
        display: inline-flex !important;
        pointer-events: auto !important;
        position: relative;
        z-index: 10000 !important;
    }

    .storybook-progress {
        display: flex !important;
    }

    .story-dot {
        display: inline-block !important;
    }
}