/* =============================================
   共通スタイルシート - Creator Strategy 2026
   ============================================= */
:root {
  --primary:#6366f1;--primary-dark:#4f46e5;
  --secondary:#22d3ee;--accent:#f59e0b;
  --success:#10b981;--danger:#ef4444;
  --bg:#0f0f1a;--bg-card:#1a1a2e;--bg-card2:#16213e;
  --text:#e2e8f0;--text-muted:#94a3b8;--border:#2d3748;
  --gradient1:linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#ec4899 100%);
  --gradient2:linear-gradient(135deg,#0ea5e9 0%,#22d3ee 100%);
  --gradient3:linear-gradient(135deg,#10b981 0%,#34d399 100%);
  --gradient4:linear-gradient(135deg,#f59e0b 0%,#fbbf24 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:-apple-system,'Hiragino Kaku Gothic ProN','Yu Gothic',BlinkMacSystemFont,sans-serif;line-height:1.7;overflow-x:hidden}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(15,15,26,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 1.5rem}
.nav-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:56px;gap:1rem}
.nav-logo a{font-weight:700;font-size:.95rem;background:var(--gradient1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none}
.nav-cats{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.nav-cats a{color:var(--text-muted);text-decoration:none;font-size:.7rem;padding:.3rem .55rem;border-radius:6px;transition:all .2s;white-space:nowrap}
.nav-cats a:hover,.nav-cats a.active{background:rgba(99,102,241,.2);color:#a5b4fc}

/* PROGRESS BAR */
#progress-bar{position:fixed;top:56px;left:0;height:2px;background:var(--gradient1);width:0;z-index:99;transition:width .1s}

/* MAIN */
main{max-width:1400px;margin:0 auto;padding:72px 1.5rem 2rem}
section{margin-bottom:4rem}

/* HERO */
.hero{text-align:center;padding:3.5rem 1rem 2.5rem}
.badge{display:inline-block;background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.3);border-radius:999px;padding:.35rem 1.1rem;font-size:.78rem;color:#a5b4fc;margin-bottom:1.25rem}
.hero h1{font-size:clamp(1.8rem,4.5vw,3rem);font-weight:800;line-height:1.2;margin-bottom:.9rem}
.hero h1 span{background:var(--gradient1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{font-size:1rem;color:var(--text-muted);max-width:680px;margin:0 auto 2rem}
.hero-stats{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap}
.hero-stat{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1.2rem 1.6rem;min-width:120px;text-align:center}
.hero-stat .num{font-size:1.8rem;font-weight:800;background:var(--gradient1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-stat .lbl{font-size:.72rem;color:var(--text-muted);margin-top:.2rem}

/* SECTION HEADING */
.sec-head{margin-bottom:1.75rem}
.sec-head h2{font-size:1.6rem;font-weight:700;margin-bottom:.3rem}
.sec-head h2 span{background:var(--gradient1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sec-head p{color:var(--text-muted);font-size:.9rem}

/* CARDS */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.4rem}
.card h3{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:.9rem}
.card-grid{display:grid;gap:1.25rem}
.card-grid.col2{grid-template-columns:1fr 1fr}
.card-grid.col3{grid-template-columns:repeat(3,1fr)}
.card-grid.full{grid-column:1/-1}
@media(max-width:768px){.card-grid.col2,.card-grid.col3{grid-template-columns:1fr}}

/* SIZE BARS */
.bar-wrap{margin-bottom:.9rem}
.bar-label{display:flex;justify-content:space-between;font-size:.82rem;margin-bottom:.35rem}
.bar-track{background:rgba(255,255,255,.06);border-radius:999px;height:9px;overflow:hidden}
.bar-fill{height:100%;border-radius:999px;width:0;transition:width 1.2s cubic-bezier(.4,0,.2,1)}

/* DIFFICULTY */
.diff-meter{display:flex;gap:.4rem;margin:.4rem 0}
.diff-seg{flex:1;height:7px;border-radius:3px}
.diff-label{font-size:.78rem;color:var(--text-muted);margin-top:.3rem}

/* TAGS */
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.tag{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:.22rem .7rem;font-size:.73rem;color:var(--text-muted)}

/* CHECK LISTS */
.checklist{list-style:none;display:flex;flex-direction:column;gap:.45rem}
.checklist li{display:flex;gap:.55rem;font-size:.83rem;align-items:flex-start}
.checklist li::before{content:'▸';color:var(--primary);flex-shrink:0;margin-top:.1rem}

/* EVIDENCE */
.ev-list{display:flex;flex-direction:column;gap:.45rem}
.ev-item{display:flex;gap:.55rem;padding:.55rem .75rem;background:rgba(255,255,255,.03);border-radius:8px;border:1px solid rgba(255,255,255,.05);font-size:.77rem}
.ev-dot{width:5px;height:5px;border-radius:50%;background:var(--primary);flex-shrink:0;margin-top:.45rem}
.ev-item a{color:#818cf8;text-decoration:none;word-break:break-all}
.ev-item a:hover{text-decoration:underline;color:#a5b4fc}
.ev-data{color:var(--text-muted);font-size:.7rem;margin-top:.12rem}

/* IDEAS */
.ideas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:.9rem}
.idea-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1.1rem;display:flex;flex-direction:column;gap:.6rem;transition:transform .2s,border-color .2s}
.idea-card:hover{transform:translateY(-2px);border-color:var(--primary)}
.idea-head{display:flex;justify-content:space-between;align-items:flex-start;gap:.4rem}
.idea-num{font-size:.68rem;color:var(--text-muted);font-weight:600;white-space:nowrap}
.idea-title{font-weight:700;font-size:.92rem;line-height:1.4}
.idea-desc{font-size:.8rem;color:var(--text-muted);line-height:1.5}
.idea-badges{display:flex;flex-wrap:wrap;gap:.35rem}
.badge-easy{background:rgba(16,185,129,.15);color:#34d399;border:1px solid rgba(16,185,129,.3);font-size:.68rem;padding:.18rem .55rem;border-radius:6px;font-weight:600}
.badge-mid{background:rgba(245,158,11,.15);color:#fbbf24;border:1px solid rgba(245,158,11,.3);font-size:.68rem;padding:.18rem .55rem;border-radius:6px;font-weight:600}
.badge-hard{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.3);font-size:.68rem;padding:.18rem .55rem;border-radius:6px;font-weight:600}
.badge-cost{background:rgba(34,211,238,.1);color:#67e8f9;border:1px solid rgba(34,211,238,.2);font-size:.68rem;padding:.18rem .55rem;border-radius:6px}
.idea-mono{font-size:.76rem;color:var(--text-muted)}
.idea-mono span{color:#c7d2fe;font-weight:600}

/* SUCCESS CASE CARDS (OGP-style with image) */
.cases-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-bottom:2rem}
.case-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s,box-shadow .2s}
.case-card:hover{transform:translateY(-3px);border-color:var(--primary);box-shadow:0 12px 32px rgba(0,0,0,.3)}
.case-card-img{display:block;aspect-ratio:16/9;background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(139,92,246,.15));overflow:hidden;flex-shrink:0;position:relative}
.case-card-img img{width:100%;height:100%;object-fit:cover;vertical-align:top;transition:transform .3s}
.case-card:hover .case-card-img img{transform:scale(1.05)}
/* リンク切れカードのスタイル */
.case-card--broken{opacity:.72}
.case-card--broken .case-card-img::after{content:'リンク切れの可能性あり';position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.78);color:#f87171;font-size:.63rem;text-align:center;padding:3px 0;letter-spacing:.04em;pointer-events:none}
.case-card-body{padding:1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.case-card-title{font-weight:700;font-size:.9rem;line-height:1.35}
.case-card-desc{font-size:.78rem;color:var(--text-muted);line-height:1.5;flex:1}
.case-card-link{font-size:.72rem;color:#818cf8;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;margin-top:auto}
.case-card-link:hover{text-decoration:underline;color:#a5b4fc}
.case-card-link::after{content:'↗';font-size:.7rem;opacity:.8}
.case-card-hidden{display:none !important}
.case-count{font-size:.8rem;color:var(--text-muted);margin-bottom:.75rem}
.load-more-wrap{text-align:center;margin-top:1.25rem;margin-bottom:.5rem}
.load-more-btn{background:var(--primary);color:#fff;border:none;border-radius:10px;padding:.65rem 1.5rem;font-size:.9rem;cursor:pointer;transition:background .2s,transform .2s}
.load-more-btn:hover{background:var(--primary-dark);transform:translateY(-1px)}
.load-more-btn:disabled{opacity:.6;cursor:default;transform:none}
.load-more-wrap.load-more-done .load-more-btn{display:none}

/* CAT NAV (hub) */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.cat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1.2rem;text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:.7rem;transition:transform .2s,border-color .2s}
.cat-card:hover{transform:translateY(-3px);border-color:var(--primary)}
.cat-icon{font-size:2rem}
.cat-name{font-weight:700;font-size:1rem}
.cat-size{font-size:.78rem;color:var(--text-muted)}
.cat-diff{display:flex;gap:3px}
.cat-diff-dot{width:9px;height:9px;border-radius:50%}

/* MARKET HEADER */
.market-hdr{display:flex;align-items:center;gap:1.25rem;padding:1.75rem;border-radius:18px;margin-bottom:2rem}
.market-hdr-icon{font-size:2.8rem}
.market-hdr h1{font-size:1.7rem;font-weight:800;margin-bottom:.2rem}
.market-hdr p{color:var(--text-muted);font-size:.88rem}

/* BREADCRUMB */
.breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-muted);margin-bottom:1.5rem;flex-wrap:wrap}
.breadcrumb a{color:#818cf8;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .sep{color:var(--border)}

/* REVEAL */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:none}

/* BACK TOP */
#back-top{position:fixed;bottom:1.75rem;right:1.75rem;background:var(--primary);color:#fff;border:none;border-radius:50%;width:42px;height:42px;font-size:1.1rem;cursor:pointer;box-shadow:0 4px 18px rgba(99,102,241,.5);transition:all .3s;opacity:0;pointer-events:none;z-index:50}
#back-top.show{opacity:1;pointer-events:auto}
#back-top:hover{background:var(--primary-dark);transform:translateY(-2px)}

/* FOOTER */
footer{border-top:1px solid var(--border);padding:1.75rem;text-align:center;color:var(--text-muted);font-size:.78rem}
footer a{color:var(--text-muted);text-decoration:none;transition:color .2s}
footer a:hover{color:#818cf8}

@media(max-width:640px){
  .hero-stats{gap:.8rem}
  .market-hdr{flex-direction:column;align-items:flex-start}
  .nav-cats{display:none}
}