@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Zen+Kaku+Gothic+New:wght@300;400&display=swap');

* { box-sizing: border-box; }
html { background: #060a14; }
body {
    margin: 0;
    font-family: 'Noto Sans JP','Yu Gothic',Meiryo,sans-serif;
    background:
        radial-gradient(ellipse at 15% 10%,  rgba(200,168,75,0.07)  0%, transparent 45%),
        radial-gradient(ellipse at 85% 25%,  rgba(48,184,200,0.06)  0%, transparent 40%),
        radial-gradient(ellipse at 10% 70%,  rgba(48,200,144,0.05)  0%, transparent 40%),
        radial-gradient(ellipse at 90% 80%,  rgba(144,80,192,0.05)  0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%,  rgba(64,96,180,0.04)   0%, transparent 60%),
        #060a14;
    overscroll-behavior-x: none;
}

/* ── スクロールバー ── */
::-webkit-scrollbar { width: 6px; background: #04080e; }
::-webkit-scrollbar-thumb { background: #1e2e4a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #c8a84b; }

/* ── ロゴ アニメーション ── */
@keyframes logo-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes logo-pulse {
    0%, 100% { text-shadow: 0 0 8px rgba(240,200,64,0.3), 0 0 24px rgba(200,168,75,0.1); }
    50%       { text-shadow: 0 0 20px rgba(240,200,64,0.7), 0 0 50px rgba(200,168,75,0.35), 0 0 80px rgba(48,184,200,0.12); }
}
@keyframes eye-spin-flash {
    0%   { filter: drop-shadow(0 0 4px rgba(240,200,64,0.4)); }
    50%  { filter: drop-shadow(0 0 14px rgba(240,200,64,0.9)) drop-shadow(0 0 28px rgba(48,184,200,0.5)); }
    100% { filter: drop-shadow(0 0 4px rgba(240,200,64,0.4)); }
}
.logo-text-main {
    background: linear-gradient(90deg,
        #f0c840 0%, #ffffff 20%, #c8a84b 35%,
        #30b8c8 50%, #f0c840 65%, #ffffff 80%, #c8a84b 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: logo-shimmer 4s linear infinite, logo-pulse 3s ease-in-out infinite;
}
.logo-eye-img {
    animation: eye-spin-flash 3s ease-in-out infinite;
}

/* ── ヘッダーのアンビエントグロー ── */
@keyframes header-ambient {
    0%, 100% { box-shadow: 0 2px 20px rgba(0,0,0,0.6), 0 0 60px rgba(200,168,75,0.04); }
    50%       { box-shadow: 0 2px 20px rgba(0,0,0,0.6), 0 0 60px rgba(200,168,75,0.12); }
}
.header-glow { animation: header-ambient 5s ease-in-out infinite; }

/* ── ティッカーテープ ── */
.ticker-outer {
    overflow: hidden;
    white-space: nowrap;
    background: linear-gradient(90deg, #05090f 0%, #0a1428 50%, #05090f 100%);
    border-top: 1px solid #1e2e4a;
    border-bottom: 1px solid #1e2e4a;
    padding: 6px 0;
}
.ticker-track {
    display: inline-flex;
    animation: ticker-scroll 38s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ticker-item {
    padding: 0 32px;
    font-size: 12px;
    color: #aab8cc;
    border-right: 1px solid #1e2e4a;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.ticker-up   { color: #e06060; font-weight: bold; }
.ticker-down { color: #4090d8; font-weight: bold; }

/* ── チャートパネルのグロー ── */
@keyframes panel-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(200,168,75,0.12); }
    50%       { box-shadow: 0 0 22px rgba(200,168,75,0.32); }
}
.chart-glow { animation: panel-glow 4s ease-in-out infinite; }

/* ── フェードイン ── */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fade-in-up 0.8s ease both; }

/* ── 期間ボタン ── */
.period-btn {
    padding: 5px 13px;
    font-size: 12px;
    border: 1px solid #4a6a9a;
    background: #0b1628;
    color: #7a9ab8;
    cursor: pointer;
    border-right: none;
    line-height: 1.5;
    white-space: nowrap;
    transition: all 0.15s;
    letter-spacing: 0.5px;
}
.period-btn:last-child { border-right: 1px solid #4a6a9a; }
.period-btn:hover { background: #142040; color: #c8a84b; border-color: #c8a84b88; }
.period-btn.selected { background: #1a3a6a; color: #f0c840; font-weight: bold; border-color: #c8a84b; }

/* ── 記事行ホバー ── */
.article-row {
    transition: background 0.18s, border-left-color 0.18s;
    border-left: 3px solid transparent !important;
}
.article-row:hover {
    background: #101e38 !important;
    border-left-color: #c8a84b !important;
}

/* ── サイドバーリンクホバー ── */
.side-link {
    transition: background 0.15s, color 0.15s, border-left-color 0.15s;
    border-left: 3px solid transparent;
}
.side-link:hover {
    background: #0d1830 !important;
    color: #f0c840 !important;
    border-left-color: #c8a84b !important;
}

/* ── パネル共通 ── */
.content-panel {
    position: relative;
    overflow: hidden;
}
.content-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #c8a84b, #4080c0 50%, #1e2e4a);
    opacity: 0.6;
}

/* ── 過去ログ Details ── */
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
    content: '▶';
    font-size: 9px;
    color: #5a7090;
    transition: transform 0.2s;
    display: inline-block;
    margin-right: 8px;
}
details[open] > summary::before { transform: rotate(90deg); }
details > summary:hover { color: #c8a84b !important; }

/* ── セクション見出しバー ── */
@keyframes bar-shift {
    0%   { background: linear-gradient(to bottom, #f0c840, #8060a0); }
    33%  { background: linear-gradient(to bottom, #30c890, #4080c0); }
    66%  { background: linear-gradient(to bottom, #40a0e0, #9050c0); }
    100% { background: linear-gradient(to bottom, #f0c840, #8060a0); }
}
.section-heading-bar {
    display: inline-block;
    width: 4px;
    height: 18px;
    background: linear-gradient(to bottom, #f0c840, #8060a0);
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 10px;
    flex-shrink: 0;
    animation: bar-shift 8s ease-in-out infinite;
}

/* ── パネルのトップボーダー カラーシフト ── */
@keyframes border-color-shift {
    0%   { border-top-color: rgba(200,168,75,0.4); }
    25%  { border-top-color: rgba(48,200,144,0.4); }
    50%  { border-top-color: rgba(64,128,192,0.4); }
    75%  { border-top-color: rgba(160,80,192,0.4); }
    100% { border-top-color: rgba(200,168,75,0.4); }
}
.panel-color-border { animation: border-color-shift 12s ease-in-out infinite; }

/* ── 最新号カードのフラッシュ ── */
@keyframes latest-flash {
    0%, 90%, 100% { border-color: rgba(200,168,75,0.25); box-shadow: none; }
    92%           { border-color: rgba(240,200,64,0.8);  box-shadow: 0 0 16px rgba(240,200,64,0.4); }
}
.latest-card { animation: latest-flash 6s ease-in-out infinite; }

/* ── マーケット数値フラッシュ ── */
@keyframes price-flash {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.75; }
}
.price-live { animation: price-flash 2s ease-in-out infinite; }

/* ── サイドバーのアクセント ── */
@keyframes sidebar-accent {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}

/* ── ベースレイアウト ── */
.site-body    { display: flex; flex-direction: row; }
.main-two-col { display: flex; align-items: flex-start; }

/* ── サイドバー・右パネル：デスクトップ幅をCSS側で管理 ── */
.sidebar-nav  {
    width: 200px; min-width: 200px;
    background: linear-gradient(180deg, #06080f 0%, #040810 40%, #060a0e 100%);
}
.right-panel-inner { width: 320px; min-width: 320px; padding: 14px 16px; }

/* ────────────────────────────────
   タブレット以下（900px）
──────────────────────────────── */
@media (max-width: 900px) {
    .sidebar-nav { display: none; }
    .right-panel-inner { width: 280px; min-width: 280px; }
}

/* ────────────────────────────────
   スマホ（680px以下）
──────────────────────────────── */
@media (max-width: 680px) {
    body { font-size: 13px; }

    /* ヘッダー */
    .site-header { padding: 8px 12px !important; flex-wrap: wrap; }
    .site-logo   { flex: 1 0 100%; margin-bottom: 6px; }
    .header-sep  { display: none !important; }
    .header-nav-items { display: none !important; }

    /* サイドバー非表示 */
    .sidebar-nav { display: none !important; }

    /* ボディ・メインを縦積み */
    .site-body    { flex-direction: column !important; }
    .main-scroll  { padding: 8px !important; width: 100% !important; }
    .main-two-col { flex-direction: column !important; width: 100%; align-items: stretch !important; }

    /* 右パネル全幅 */
    .right-panel-wrap  { width: 100%; }
    .right-panel-inner { width: 100% !important; min-width: 0 !important; padding: 10px 12px !important; }

    /* パネル余白削減 */
    .panel-color-border { padding: 8px 12px !important; margin-bottom: 6px !important; }
    .section-heading-row { margin-bottom: 8px !important; }

    /* 記事行 */
    .article-row { padding: 6px 10px !important; }

    /* テーブル横スクロール */
    .card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { font-size: 12px; }
}