@charset "UTF-8";
/**
 * Octopus Photo Studio - 共通スタイルシート
 * ・カラーテーマ変数（ライト / ダーク）
 * ・基本リセット＆タイポグラフィ
 * ・共通コンテナ＆ヘッダー＆ワイド表示
 * ・グローバルナビゲーション
 * ・アップロード枠＆アコーディオン＆共通フォーム
 * ・説明セクション＆フッター
 */

:root {
    /* メインカラー：アース黄緑 (Sage / Olive Green) */
    --primary: #64A488;
    --primary-hover: #428468;
    --primary-light: #f2f6ec;
    --primary-border: #c4d7b3;
    --primary-glow: rgba(96, 125, 59, 0.2);

    /* アクセントカラー：濃い紫 (Deep Plum / Purple) */
    --accent: #542366;
    --accent-hover: #411a50;
    --accent-light: #f7effa;
    --accent-border: #dbc3e3;

    /* ニュートラル・サーフェス */
    --bg-color: #f7f8f5;
    --card-bg: #ffffff;
    --card-bg-sub: #f3f5f0;
    --text-color: #2b3324;
    --text-muted: #64705a;
    --border-color: #e0e6d8;
    --border-hover: #b8c8a8;
    
    --danger-color: #c94a4a;
    --danger-hover: #ab3737;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 2px 8px rgba(43, 51, 36, 0.05);
    --shadow-md: 0 8px 24px rgba(43, 51, 36, 0.08);
    --transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ダークモード設定 */
[data-theme="dark"] {
    --primary: #64A488;
    --primary-hover: #428468;
    --primary-light: #252e1f;
    --primary-border: #3d4a32;
    --primary-glow: rgba(134, 173, 88, 0.25);

    --accent: #bd79d9;
    --accent-hover: #cb90e3;
    --accent-light: #321d38;
    --accent-border: #573361;

    --bg-color: #1e221b;
    --card-bg: #282d24;
    --card-bg-sub: #21251e;
    --text-color: #ecf0e6;
    --text-muted: #a3b098;
    --border-color: #373f32;
    --border-hover: #4d5746;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans JP", sans-serif; 
}

body { 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    padding: 32px 16px; 
    min-height: 100vh; 
    transition: background-color 0.3s, color 0.3s; 
    line-height: 1.6; 
}

/* メインコンテナ */
.container { 
    max-width: 840px; 
    margin: 0 auto; 
    background: var(--card-bg); 
    padding: 32px; 
    border-radius: var(--radius-lg); 
    border: 1px solid var(--border-color); 
    box-shadow: var(--shadow-md); 
    transition: max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
}

/* PC専用ワイドモード（最大2000px） */
.container.wide-mode {
    max-width: 2000px;
    width: 96vw;
}

/* ヘッダー */
.header { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    margin-bottom: 24px; 
    border-bottom: 2px solid var(--border-color); 
    padding-bottom: 16px; 
}
.header h1 { 
    margin: 0; 
    font-size: 22px; 
    font-weight: 700; 
    color: var(--text-color); 
    letter-spacing: -0.01em; 
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    display: block;
}
.header-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
.version { 
    font-size: 12px; 
    font-weight: 600; 
    color: var(--primary); 
    background: var(--primary-light); 
    border: 1px solid var(--primary-border); 
    padding: 2px 10px; 
    border-radius: 20px; 
}

/* ワイド表示切替ボタン */
.wide-toggle-btn {
    display: none;
    cursor: pointer;
    background: var(--card-bg-sub);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition);
}
.wide-toggle-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}
@media (min-width: 860px) {
    .wide-toggle-btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }
}

/* テーマ切替ボタン */
.theme-toggle { 
    cursor: pointer; 
    background: var(--card-bg-sub); 
    color: var(--text-color); 
    border: 1px solid var(--border-color); 
    padding: 6px 12px; 
    border-radius: var(--radius-sm); 
    font-size: 14px; 
    transition: var(--transition); 
}
.theme-toggle:hover { 
    border-color: var(--primary); 
    background: var(--primary-light); 
}

/* 共通グローバルナビゲーション */
.global-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.global-nav::-webkit-scrollbar {
    display: none;
}
.nav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    background: var(--card-bg-sub);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    text-decoration: none;
    transition: var(--transition);
    flex-shrink: 0;
    user-select: none;
}
.nav-item:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}
.nav-item.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 2px 8px var(--primary-glow);
    pointer-events: none;
}

/* ==========================================
   共通グローバルナビゲーション（動的ランチャー対応）
   ========================================== */

/* --- 基本スタイル（スマホ幅：860px以下） --- */
.global-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    position: relative;
    user-select: none;
}

/* スマホ時のスクロールトラック（従来通り横スクロール） */
.nav-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
}
.nav-track::-webkit-scrollbar {
    display: none;
}

/* ナビアイテム（ピル型ボタン） */
.nav-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-color);
    background: var(--card-bg-sub);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    text-decoration: none;
    transition: var(--transition);
    flex-shrink: 0;
    white-space: nowrap;
}
.nav-item:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}
.nav-item.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 2px 8px var(--primary-glow);
    pointer-events: none;
}

/* スマホ表示時はランチャーボタンを非表示 */
.nav-launcher-wrap {
    display: none;
}

/* --- PC表示スタイル（861px以上） --- */
@media (min-width: 861px) {
    .global-nav {
        overflow: visible;
        justify-content: space-between;
    }

     /* PC時はスクロールを解除し、JSで表示・非表示を制御 */
    .nav-track {
        overflow: hidden;
        padding-bottom: 0;
        flex: 1;
        min-width: 0;
        display: flex;
        gap: 8px;
    }

    /* ランチャーラッパー */
    .nav-launcher-wrap {
        display: block;
        position: relative;
        flex-shrink: 0;
        margin-left: 4px;
    }

    /* 「⊞ 全ツール ▾」ボタン */
    .nav-launcher-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        font-size: 13px;
        font-weight: 700;
        color: var(--text-color);
        background: var(--card-bg-sub);
        border: 1px solid var(--border-color);
        border-radius: 20px;
        cursor: pointer;
        transition: var(--transition);
        white-space: nowrap;
    }
    .nav-launcher-btn:hover {
        border-color: var(--primary);
        background: var(--primary-light);
        color: var(--primary);
    }
    .nav-launcher-btn.open {
        border-color: var(--primary);
        color: var(--primary);
        box-shadow: 0 0 0 2px var(--primary-glow);
    }

    /* 開いているツールがバーから溢れてランチャー内にあるときのアクティブ点灯 */
    .nav-launcher-btn.active {
        background: var(--primary);
        color: #ffffff;
        border-color: var(--primary);
        box-shadow: 0 2px 8px var(--primary-glow);
    }
    .nav-launcher-btn.active:hover {
        background: var(--primary-hover);
        color: #ffffff;
    }

    .nav-launcher-arrow {
        font-size: 10px;
        transition: transform 0.2s ease;
        line-height: 1;
    }
    .nav-launcher-btn.open .nav-launcher-arrow {
        transform: rotate(180deg);
    }

    /* 全ツール一覧ポップオーバー */
    .nav-launcher-popover {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        width: 450px;
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        z-index: 920;
        padding: 16px;
        display: none;
        box-sizing: border-box;
    }
    .nav-launcher-popover.open {
        display: block;
        animation: navPopoverFade 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes navPopoverFade {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .nav-launcher-popover-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-color);
    }
    .nav-launcher-popover-title {
        font-size: 13.5px;
        font-weight: 700;
        color: var(--text-color);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .nav-launcher-popover-close {
        background: transparent;
        border: none;
        font-size: 16px;
        color: var(--text-muted);
        cursor: pointer;
        padding: 2px 6px;
        line-height: 1;
        border-radius: 4px;
        transition: var(--transition);
    }
    .nav-launcher-popover-close:hover {
        color: var(--text-color);
        background: var(--card-bg-sub);
    }

    /* 3列グリッドカード一覧 */
    .nav-launcher-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .nav-launcher-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 12px 8px;
        background: var(--card-bg-sub);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        text-decoration: none;
        color: var(--text-color);
        transition: var(--transition);
        text-align: center;
        position: relative;
    }
    .nav-launcher-card:hover {
        border-color: var(--primary);
        background: var(--primary-light);
        color: var(--primary);
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
    }
    .nav-launcher-card-icon {
        font-size: 22px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .nav-launcher-card-icon img {
        width: 26px;
        height: 26px;
        object-fit: contain;
        border-radius: 4px;
    }
    .nav-launcher-card-name {
        font-size: 11.5px;
        font-weight: 600;
        line-height: 1.25;
        white-space: normal;
        word-break: break-word;
    }

    /* 現在開いているツールのカード */
    .nav-launcher-card.active {
        background: var(--primary-light);
        border-color: var(--primary);
        color: var(--primary);
        font-weight: 700;
        pointer-events: none;
    }
    .nav-launcher-card.active::after {
        content: "●";
        position: absolute;
        top: 6px;
        right: 8px;
        font-size: 9px;
        color: var(--primary);
    }
}



/* 共通アップロードドロップエリア */
.drop-area { 
    border: 2px dashed var(--primary-border); 
    border-radius: var(--radius-md); 
    padding: 34px 20px; 
    text-align: center; 
    cursor: pointer; 
    background: var(--primary-light); 
    margin-bottom: 24px; 
    transition: var(--transition); 
}
.drop-area:hover, .drop-area.drag-over { 
    border-color: var(--primary); 
    background: var(--card-bg-sub); 
    transform: translateY(-2px); 
    box-shadow: var(--shadow-sm); 
}
.drop-area p { 
    font-size: 14px; 
    font-weight: 700; 
    color: var(--text-color); 
}
.drop-area span { 
    font-size: 12px; 
    color: var(--text-muted); 
    display: block; 
    margin-top: 6px; 
}

/* ファイル上限枚数のインライン表示保証（改行防止） */
[data-octopus-max-files] {
    display: inline !important;
}

#limit-notice span{
    display: inline !important;
}


/* 共通アコーディオン */
.accordion { 
    margin-bottom: 14px; 
    border: 1px solid var(--border-color); 
    border-radius: var(--radius-md); 
    overflow: hidden; 
    background: var(--card-bg); 
    transition: var(--transition); 
}
.accordion:hover { 
    border-color: var(--border-hover); 
}
.accordion-header { 
    background: var(--card-bg-sub); 
    padding: 14px 18px; 
    cursor: pointer; 
    font-weight: 700; 
    font-size: 14px; 
    color: var(--text-color); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    user-select: none; 
    transition: var(--transition); 
}
.accordion-header:hover { 
    background: var(--primary-light); 
    color: var(--primary); 
}
.accordion-header span { 
    font-size: 11px; 
    color: var(--text-muted); 
    transition: var(--transition); 
}
.accordion-content { 
    padding: 20px; 
    display: none; 
    background: var(--card-bg); 
    border-top: 1px solid var(--border-color); 
}
.accordion-content.open { 
    display: block; 
}

/* 共通フォームレイアウト */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}
input[type="text"], input[type="number"], select, textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-color);
    color: var(--text-color);
    font-size: 14px;
    outline: none;
    transition: var(--transition);
    font-family: inherit;
}
input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
    background: var(--card-bg);
}

/* 共通メインアクションボタン */
.main-btn { 
    background: var(--primary); 
    color: #ffffff; 
    border: none; 
    padding: 15px 24px; 
    font-size: 15px; 
    font-weight: 700; 
    border-radius: var(--radius-md); 
    cursor: pointer; 
    width: 100%; 
    margin-top: 20px; 
    transition: var(--transition); 
    box-shadow: 0 4px 12px var(--primary-glow); 
    letter-spacing: 0.02em; 
}
.main-btn:hover:not(:disabled) { 
    background: var(--primary-hover); 
    transform: translateY(-2px); 
    box-shadow: 0 6px 18px var(--primary-glow); 
}
.main-btn:disabled { 
    background: #999999; 
    cursor: not-allowed; 
    transform: none; 
    box-shadow: none; 
}

/* 共通説明セクション */
.explanation { 
    max-width: 840px; 
    margin: 28px auto 0; 
    background: var(--card-bg); 
    padding: 28px 32px; 
    border-radius: var(--radius-lg); 
    border: 1px solid var(--border-color); 
    box-shadow: var(--shadow-sm); 
    line-height: 1.7; 
    transition: max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
}
.container.wide-mode ~ .explanation { 
    max-width: 2000px; 
}
.usage-section h3 { 
    font-size: 15px; 
    font-weight: 700; 
    color: var(--text-color); 
    border-left: 4px solid var(--primary); 
    padding-left: 10px; 
    margin: 22px 0 10px 0; 
    letter-spacing: 0.01em; 
}
.usage-section h3:first-child { 
    margin-top: 0; 
}
.usage-section p { 
    font-size: 13.5px; 
    color: var(--text-muted); 
    margin: 0 0 10px 0; 
    padding-left: 1.2em; 
    text-indent: -1.2em; 
} 
.usage-section ul { 
    font-size: 13px; 
    color: var(--text-muted); 
    margin-top: 6px; 
    padding-left: 2.2em; 
    line-height: 1.85; 
}
.usage-section a { 
    color: var(--primary); 
    text-decoration: none; 
    font-weight: 600; 
    transition: var(--transition); 
}
.usage-section a:hover { 
    color: var(--accent); 
    text-decoration: underline; 
}

/* 共通フッター */
.footer { 
    text-align: center; 
    padding: 28px 10px 36px; 
    color: var(--text-muted); 
    font-size: 12px; 
}
.copyright-name { 
    font-weight: 700; 
    color: var(--text-color); 
}