@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

/* ═══════════════════════════════════════════════════
   Survival Unit 2026 — style.css
    1. Variables & Dark Mode
    2. Reset / Base
    3. Nav
    4. Nav Responsive + Hamburger + Section Menu
    5. Hero
    6. Indicators
    7. Alert Bar
    8. Page / Feed Controls / Category
    9. Cards
   10. Article Items
   11. Earthquake Map
   12. X Accounts
   13. Footer / To-Top / Toast
   14. Modals (install + chart)
═══════════════════════════════════════════════════ */

/* 1. VARIABLES & DARK MODE ─────────────────────── */
:root {
    --bg:      #b8c8d8;
    --surface: #ffffff;
    --surface2:#f0f5f9;
    --border:  #cdd8e3;
    --border2: #d8e2ea;
    --text:    #1a2332;
    --text2:   #4a5f75;
    --text3:   #7a90a4;
    --red:     #ef4444;
    --green:   #16a34a;
    --blue:    #2563eb;
    --radius:  12px;
    --nav-bg:  rgba(255,255,255,.96);
    --menu-bg: rgba(255,255,255,.98);
}
html[data-theme="dark"] {
    --bg:      #0d1520;
    --surface: #1a2332;
    --surface2:#1e2d40;
    --border:  #2a3f55;
    --border2: #243347;
    --text:    #f0f4f8;
    --text2:   #a8c4dc;
    --text3:   #7a9ab8;
    --nav-bg:  rgba(13,21,32,.96);
    --menu-bg: rgba(26,35,50,.98);
}

/* 2. RESET / BASE ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Noto Sans JP', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; -webkit-font-smoothing: antialiased; }

/* 3. NAV ───────────────────────────────────────── */
nav {
    position: sticky; top: 0; z-index: 100;
    background: var(--nav-bg); backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border2);
    padding: 0 20px; height: 52px;
    display: flex; align-items: center; gap: 12px;
}
.nav-brand   { display: flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; }
.nav-logo    { width: 30px; height: 30px; border-radius: 8px; overflow: hidden; flex-shrink: 0; display: flex; }
.nav-logo img { width: 100%; height: 100%; object-fit: cover; }
.nav-title   { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: .02em; white-space: nowrap; }
.nav-links   { display: flex; gap: 2px; }
.nav-link    { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text2); text-decoration: none; padding: 5px 13px; border-radius: 20px; transition: background .12s, color .12s; white-space: nowrap; }
.nav-link:hover { background: var(--surface2); color: var(--text); }
.nav-link.active { background: var(--text); color: var(--surface); }
html[data-theme="dark"] .nav-link.active { background: var(--text2); color: var(--bg); }
.nav-right   { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.badge-updated { font-size: 10px; color: var(--text3); background: var(--surface2); border: 1px solid var(--border2); padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.btn-theme   { background: none; border: 1px solid var(--border2); border-radius: 20px; padding: 3px 9px; font-size: 14px; cursor: pointer; color: var(--text2); transition: background .12s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.btn-theme:hover { background: var(--surface2); }
.btn-notify  { background: none; border: none; padding: 4px 6px; font-size: 16px; cursor: pointer; color: var(--text3); border-radius: 8px; transition: background .12s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.btn-notify:hover { background: var(--surface2); }
.btn-notify.granted { color: var(--blue); }

/* 4. NAV RESPONSIVE + HAMBURGER + SECTION MENU ─── */
@media (max-width: 640px) {
    nav { padding: 0 14px; }
    .nav-title { font-size: 12px; }
    .badge-updated { display: none; }
    .nav-links { display: none; }
}
.hamburger { background: none; border: none; cursor: pointer; padding: 8px 6px; display: flex; flex-direction: column; gap: 5px; border-radius: 6px; transition: background .12s; }
.hamburger:hover { background: var(--surface2); }
.hamburger span { display: block; width: 20px; height: 2px; background: var(--text2); border-radius: 2px; transition: transform .2s, opacity .2s; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
.section-menu {
    position: fixed; top: 52px; right: 0;
    background: var(--menu-bg); backdrop-filter: blur(20px);
    border-left: 1px solid var(--border2); border-bottom: 1px solid var(--border2);
    padding: 6px 0 10px; min-width: 220px; z-index: 99;
    box-shadow: -2px 6px 20px rgba(0,0,0,.12); display: none;
}
.section-menu.open { display: block; }
.smenu-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--text3); padding: 10px 18px 4px; text-transform: uppercase; }
.section-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 18px; font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none; transition: background .1s; }
.section-menu a:hover { background: var(--surface2); }
.section-menu a.smenu-active { font-weight: 700; background: var(--surface2); }
.smenu-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.smenu-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; }
.smenu-divider { height: 1px; background: var(--border2); margin: 6px 0; }

/* 5. HERO ──────────────────────────────────────── */
.hero { position: relative; background: url('../ogp.jpg') center 40%/cover no-repeat; border-bottom: 1px solid var(--border2); padding: 64px 24px 52px; min-height: 260px; text-align: center; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; background: rgba(2,5,12,.35); }
.hero > * { position: relative; z-index: 1; }
.mission-status { display: inline-flex; align-items: center; gap: 6px; background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.4); color: #fca5a5; font-size: 10px; font-weight: 700; letter-spacing: .12em; padding: 4px 12px; border-radius: 20px; margin-bottom: 20px; }
.mission-dot { width: 6px; height: 6px; background: #ef4444; border-radius: 50%; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(239,68,68,.4); } 50% { opacity:.7; box-shadow:0 0 0 5px rgba(239,68,68,0); } }
.hero-title { font-family: 'JetBrains Mono', monospace; font-size: 42px; font-weight: 700; color: #fff; letter-spacing: .04em; line-height: 1; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.hero-sub { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: rgba(255,255,255,.7); margin-top: 6px; letter-spacing: .06em; }
.hero-counters { display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: 24px; }
.counter-block { text-align: center; }
.counter-num { font-family: 'JetBrains Mono', monospace; font-size: 36px; font-weight: 700; color: #fff; line-height: 1; }
.counter-day .counter-num  { color: #fca5a5; }
.counter-left .counter-num { color: #93c5fd; }
.counter-label { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 5px; }
.counter-div { width: 1px; height: 40px; background: rgba(255,255,255,.25); }

/* 6. INDICATORS ────────────────────────────────── */
.indicators { border-bottom: 1px solid var(--border2); padding: 0 24px; overflow-x: auto; background: var(--surface); display: flex; flex-direction: column; }
.indicators-inner { display: flex; align-items: stretch; gap: 0; min-width: max-content; margin: 0 auto; max-width: 1600px; }
.ind-item { display: flex; flex-direction: column; justify-content: center; padding: 12px 24px; border-right: 1px solid var(--border2); gap: 3px; cursor: pointer; transition: background .1s; }
.ind-item:first-child { padding-left: 0; }
.ind-item:hover { background: var(--surface2); }
.ind-label  { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.ind-price  { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; color: var(--text); }
.ind-change { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; }
.ind-change.up   { color: #16a34a; }
.ind-change.down { color: #ef4444; }
.ind-change.flat { color: var(--text3); }
.ind-time { font-size: 9px; color: var(--text3); padding: 12px 0 12px 24px; display: flex; align-items: center; margin-left: auto; white-space: nowrap; }
.ind-toggle-btn { display: block; width: 100%; padding: 6px 0 5px; background: none; border: none; border-top: 1px solid var(--border2); cursor: pointer; text-align: center; color: var(--text3); line-height: 1; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.ind-toggle-btn:active { background: rgba(0,0,0,.03); }
.ind-toggle-arrow { display: inline-block; font-size: 14px; transition: transform .25s; }
.indicators.collapsed .ind-toggle-arrow { transform: rotate(-180deg); }
.indicators.collapsed .indicators-inner { display: none; }

/* 7. ALERT BAR ─────────────────────────────────── */
.alert-bar { background: var(--surface); border-bottom: 1px solid var(--border2); padding: 0; }
.alert-bar-inner { max-width: 1600px; margin: 0 auto; padding: 6px 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.alert-bar-icon  { font-size: 13px; flex-shrink: 0; }
.alert-bar-label { font-weight: 700; color: #ef4444; white-space: nowrap; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; flex-shrink: 0; }
.alert-bar-item  { font-size: 11px; font-weight: 600; margin-right: 4px; }
.alert-bar-item.up   { color: #16a34a; }
.alert-bar-item.down { color: #ef4444; }

/* 8. PAGE / FEED CONTROLS / CATEGORY ───────────── */
.page { max-width: 1600px; margin: 0 auto; padding: 24px 24px 60px; }
.feed-controls { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.feed-ctrl-btn { background: var(--surface2); border: 1px solid var(--border2); border-radius: 20px; padding: 7px 16px; font-size: 12px; font-weight: 600; color: var(--text2); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .12s, color .12s; }
.feed-ctrl-btn:hover  { background: var(--border2); color: var(--text); }
.feed-ctrl-btn:active { background: var(--border); }
.cat-section { margin-bottom: 30px; }
.cat-header  { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.cat-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cat-name { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); white-space: nowrap; }
.cat-line { flex: 1; height: 1px; background: var(--border2); }
.cat-note { font-size: 10px; color: var(--text3); margin-bottom: 10px; margin-top: -4px; }
.feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 13px; }

/* 9. CARDS ─────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.card:hover { border-color: var(--text3); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.card-head { padding: 0; display: flex; align-items: stretch; border-bottom: 1px solid var(--border2); }
.card-head-btn { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: none; border: none; padding: 11px 8px 11px 14px; cursor: pointer; text-align: left; min-width: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.card-head-btn:active { background: rgba(0,0,0,.04); }
.card-head-left { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.card-title  { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-toggle { color: var(--text3); font-size: 16px; line-height: 1; transition: transform .25s; flex-shrink: 0; }
.card-ext    { display: flex; align-items: center; padding: 11px 14px; flex-shrink: 0; font-size: 12px; color: var(--text3); text-decoration: none; transition: color .12s; }
.card-ext:hover { color: var(--text2); }
/* ステータス / バッジ */
.badge     { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; font-size: 9px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; flex-shrink: 0; }
.badge-dot { width: 5px; height: 5px; border-radius: 50%; }
.sdot      { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sdot-ok   { background: #16a34a; box-shadow: 0 0 6px rgba(22,163,74,.3); }
.sdot-err  { background: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,.3); }
.sdot-none { background: var(--text3); }
/* 新着バッジ */
.new-badge { background: #ef4444; color: #fff; font-size: 9px; font-weight: 700; border-radius: 10px; padding: 1px 5px; flex-shrink: 0; }
/* 折りたたみ */
.card.collapsed .card-toggle { transform: rotate(-90deg); }
.card.collapsed .item-list,
.card.collapsed .item-error,
.card.collapsed .item-empty { display: none; }
.card.collapsed .card-head { border-bottom-color: transparent; }
.card.collapsed { align-self: start; }

/* 10. ARTICLE ITEMS ────────────────────────────── */
.item-list { list-style: none; }
.item { display: flex; align-items: flex-start; gap: 9px; padding: 8px 14px; border-bottom: 1px solid var(--border2); transition: background .1s; }
.item:last-child { border-bottom: none; }
.item:hover { background: var(--surface2); }
.item.item-new { background: rgba(37,99,235,.04); }
.item.item-new .item-title { font-weight: 600; }
.item-num  { font-size: 10px; color: var(--text3); font-weight: 700; width: 13px; flex-shrink: 0; padding-top: 2px; text-align: right; }
.item-body { min-width: 0; flex: 1; }
.item-title { color: var(--blue); text-decoration: none; font-size: 12px; line-height: 1.5; display: block; transition: color .12s; }
.item-title:hover { filter: brightness(.8); }
.item-meta  { font-size: 10px; color: var(--text3); margin-top: 2px; display: flex; align-items: center; gap: 7px; }
/* 翻訳ボタン */
.item-translate { font-size: 9px; color: var(--text3); border: 1px solid var(--border2); border-radius: 4px; padding: 1px 5px; text-decoration: none; white-space: nowrap; transition: background .1s, color .1s; flex-shrink: 0; }
.item-translate:hover { background: var(--surface2); color: var(--text2); }
/* 機械翻訳バッジ */
.item-translated { display: inline-block; font-size: 9px; color: var(--text3); border: 1px solid var(--border2); border-radius: 4px; padding: 1px 5px; white-space: nowrap; opacity: .7; margin-right: 4px; vertical-align: middle; cursor: default; }
/* 既読 */
.item.item-read .item-title { color: var(--text3); }
.item-empty { padding: 14px; font-size: 11px; color: var(--text3); }
.item-error { padding: 10px 14px; font-size: 11px; color: #dc2626; background: rgba(239,68,68,.05); }

/* 11. EARTHQUAKE MAP ───────────────────────────── */
.quake-map-wrap { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
#quakeMap { height: 380px; background: var(--surface2); }
@media (max-width: 640px) { #quakeMap { height: 260px; } }
/* Leaflet popup dark mode */
html[data-theme="dark"] .leaflet-popup-content-wrapper,
html[data-theme="dark"] .leaflet-popup-tip { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .leaflet-tile { filter: brightness(.7) invert(1) contrast(3) hue-rotate(200deg) saturate(.3) brightness(.7); }

/* 12. X ACCOUNTS ───────────────────────────────── */
.x-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.x-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 15px; text-decoration: none; display: block; transition: border-color .2s, transform .15s; }
.x-card:hover { border-color: var(--text3); transform: translateY(-2px); }
.x-icon   { font-size: 14px; margin-bottom: 9px; }
.x-handle { font-size: 12px; font-weight: 700; color: var(--blue); }
.x-name   { font-size: 11px; color: var(--text2); margin-top: 3px; }
.x-desc   { font-size: 10px; color: var(--text3); margin-top: 7px; line-height: 1.5; }

/* 13. FOOTER / TO-TOP / TOAST ──────────────────── */
footer { margin-top: 40px; border-top: 1px solid var(--border2); padding: 14px 24px; font-size: 10px; color: var(--text3); text-align: center; background: var(--surface); }
.footer-add { display: inline-block; margin-top: 8px; font-size: 11px; color: var(--text2); cursor: pointer; text-decoration: underline; }
.footer-add:hover { color: var(--text); }
.to-top { position: fixed; bottom: 24px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: var(--text); color: var(--surface); border: none; font-size: 17px; cursor: pointer; opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; z-index: 50; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.to-top.visible { opacity: .8; transform: translateY(0); }
.to-top:hover { opacity: 1; }
.toast { position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%) translateY(12px); background: var(--text); color: var(--surface); font-size: 12px; padding: 8px 20px; border-radius: 20px; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; z-index: 400; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 14. MODALS ────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 300; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal { background: var(--surface); border-radius: 16px; padding: 24px; max-width: 360px; width: 90%; box-shadow: 0 8px 40px rgba(0,0,0,.2); }
.modal-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.modal-tabs  { display: flex; gap: 6px; margin-bottom: 14px; }
.modal-tab   { font-size: 12px; padding: 5px 14px; border-radius: 20px; border: 1px solid var(--border); color: var(--text2); cursor: pointer; background: var(--surface); transition: all .12s; }
.modal-tab.active { background: var(--text); color: var(--surface); border-color: var(--text); }
.modal-panel { font-size: 12px; color: var(--text2); line-height: 2; display: none; }
.modal-panel.active { display: block; }
.modal-panel ol { padding-left: 18px; }
.modal-panel li { margin-bottom: 2px; }
.modal-close-btn { display: block; margin-top: 18px; text-align: center; font-size: 12px; color: var(--text3); cursor: pointer; background: none; border: none; font-family: inherit; width: 100%; }
.modal-close-btn:hover { color: var(--text2); }
/* チャートモーダル */
.chart-modal { max-width: 500px; }
.chart-modal-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.chart-modal-title { font-size: 15px; font-weight: 700; color: var(--text); }
.chart-modal-price { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--text2); }
.chart-modal-sub { font-size: 10px; color: var(--text3); margin-bottom: 16px; }
.chart-wrap { position: relative; height: 200px; }
.chart-no-data { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 11px; color: var(--text3); }