/* ============================================================
   cocotaifu — 共通スタイル（cocoyureのトークンを踏襲）
   ============================================================ */
:root{
  --bg:#04060f; --panel:#080c1a; --panel2:#0c1225; --border:#131e3a;
  --accent:#22c3e6; --accent2:#5b8dff; --warn:#f59e0b; --danger:#ef4444; --safe:#10b981;
  --text:#d4dff0; --text2:#8899bb; --glow:0 0 18px rgba(34,195,230,.35);
}
:root.light{
  --bg:#eef4fb; --panel:#fff; --panel2:#e7eefb; --border:#cfdcec;
  --accent:#0e97b8; --accent2:#3b6fd4; --warn:#d97706; --danger:#dc2626; --safe:#059669;
  --text:#1e293b; --text2:#5a6b86; --glow:0 0 12px rgba(14,151,184,.25);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Outfit','Zen Kaku Gothic New',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;transition:background .35s,color .35s}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* NAV */
nav.site-nav{background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;transition:background .35s}
.nav-inner{max-width:1100px;margin:0 auto;padding:0 20px;height:56px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:baseline;font-family:'Outfit',sans-serif}
.logo-coco{font-weight:800;font-size:21px;color:var(--accent);letter-spacing:-1px}
.logo-taifu{font-weight:300;font-size:21px;color:var(--accent2);letter-spacing:2px}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{padding:6px 13px;border-radius:20px;font-size:12px;color:var(--text2);transition:all .2s;font-weight:600}
.nav-links a:hover,.nav-links a.active{background:var(--accent);color:#031017}
#theme-btn{background:transparent;border:1px solid var(--border);border-radius:20px;padding:5px 12px;cursor:pointer;font-size:11px;color:var(--text2);margin-left:8px}
#theme-btn:hover{border-color:var(--accent);color:var(--accent)}
.hamburger{display:none;background:transparent;border:1px solid var(--border);border-radius:8px;padding:4px 10px;cursor:pointer;font-size:20px;color:var(--text2);line-height:1}
@media(max-width:720px){
  .hamburger{display:block}
  .nav-links{display:none;position:absolute;top:56px;left:0;right:0;background:var(--panel);border-bottom:1px solid var(--border);flex-direction:column;padding:8px 16px;gap:2px}
  .nav-links.open{display:flex}
  .nav-links a{width:100%;padding:10px 14px;border-radius:8px;font-size:14px}
}

/* WRAP */
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.hero{text-align:center;padding:52px 20px 30px}
.hero-eyebrow{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:3px;color:var(--accent);text-transform:uppercase;margin-bottom:14px;display:flex;gap:8px;justify-content:center;align-items:center}
.hero-dot{width:7px;height:7px;border-radius:50%;background:var(--safe);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}50%{box-shadow:0 0 0 5px rgba(16,185,129,0)}}
.hero h1{font-family:'Outfit',sans-serif;font-weight:800;font-size:clamp(28px,5vw,52px);line-height:1.12;letter-spacing:-1.5px}
.hero h1 span{color:var(--accent);text-shadow:var(--glow)}
.hero-sub{color:var(--text2);font-size:clamp(13px,2vw,16px);max-width:620px;margin:16px auto 0;line-height:1.7}

/* MAP */
#map{height:460px;border:1px solid var(--border);border-radius:14px;margin:8px 0 6px;background:var(--panel)}
.map-note{font-size:11px;color:var(--text2);text-align:right;margin-bottom:24px}

/* SECTION */
.section-title{font-family:'Outfit',sans-serif;font-weight:800;font-size:22px;margin:34px 0 4px;letter-spacing:-.5px}
.section-sub{color:var(--text2);font-size:13px;margin-bottom:18px}

/* TYPHOON CARDS */
.ty-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.ty-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px;transition:border-color .2s,transform .2s;display:block}
.ty-card:hover{border-color:var(--accent);transform:translateY(-3px)}
.ty-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ty-badge{font-family:'Outfit',sans-serif;font-weight:800;font-size:13px;padding:4px 11px;border-radius:20px;background:var(--accent);color:#031017;white-space:nowrap}
.ty-badge.cat-TD{background:var(--safe);color:#02160f}
.ty-badge.cat-TS,.ty-badge.cat-STS{background:var(--warn);color:#1a1002}
.ty-badge.cat-TY{background:var(--danger);color:#fff}
.ty-name{font-weight:800;font-size:17px}
.ty-meta{color:var(--text2);font-size:12px;line-height:1.7}
.ty-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.ty-stat{background:var(--panel2);border:1px solid var(--border);border-radius:9px;padding:9px 11px}
.ty-stat .k{font-size:10px;color:var(--text2);letter-spacing:.5px}
.ty-stat .v{font-family:'Outfit',sans-serif;font-weight:700;font-size:16px;margin-top:2px}
.ty-more{margin-top:14px;font-size:12px;color:var(--accent);font-weight:700}

.empty-state{background:var(--panel);border:1px dashed var(--border);border-radius:14px;padding:40px 24px;text-align:center;color:var(--text2)}
.empty-state .big{font-size:40px;margin-bottom:10px}

/* DETAIL */
.detail-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:14px}
.fc-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:10px}
.fc-table th,.fc-table td{padding:9px 10px;border-bottom:1px solid var(--border);text-align:left}
.fc-table th{color:var(--text2);font-size:11px;font-weight:700;letter-spacing:.5px}
.fc-table td{font-variant-numeric:tabular-nums}

/* PREF LINKS */
.pref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:14px}
.pref-btn{display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:10px 6px;font-size:13px;font-weight:600;color:var(--text);transition:all .2s;text-align:center}
.pref-btn:hover{background:var(--accent);color:#031017;border-color:var(--accent);transform:translateY(-2px)}

.updated-line{font-size:11px;color:var(--text2);margin:6px 0 0;font-family:'Share Tech Mono',monospace}

@media(max-width:600px){#map{height:360px}.nav-links a span{display:none}}