* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --primary-dark:#0a0a0a; --primary-light:#fff; --accent-orange:#ff6b35; --accent-teal:#00b4d8; --accent-purple:#7209b7; --accent-green:#06ffa5; --accent-gold:#ffd700; --accent-red:#dc2626; --accent-blue:#2563eb; --text-gray:#666; --bg-light:#f8f8f8; --border-light:#e0e0e0; }
body { font-family:'Helvetica Neue','Arial','Hiragino Sans','Noto Sans JP',sans-serif; background:var(--bg-light); color:var(--primary-dark); line-height:1.8; }

.hero { background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%); padding:80px 20px; text-align:center; color:#fff; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; width:200%; height:200%; background: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px); background-size:50px 50px; animation: moveGrid 20s linear infinite; }
@keyframes moveGrid { 0%{transform:translate(0,0);}100%{transform:translate(50px,50px);} }
.hero-content { position:relative; z-index:1; max-width:800px; margin:0 auto; }
.hero-title { font-size:3rem; font-weight:100; margin-bottom:20px; letter-spacing:.1em; text-shadow:0 0 30px rgba(255,107,53,0.3); }
.hero-subtitle { font-size:1.2rem; opacity:.9; line-height:1.6; }

.stats-section { padding:40px 20px; background:#fff; border-bottom:1px solid var(--border-light); }
.stats-container { max-width:1400px; margin:0 auto; display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:30px; }
.stat-card { text-align:center; padding:20px; background:var(--bg-light); border-radius:12px; transition: all .3s; }
.stat-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.stat-number { font-size:2.5rem; font-weight:700; background: linear-gradient(135deg, var(--accent-orange), var(--accent-purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-label { font-size:.9rem; color:var(--text-gray); text-transform:uppercase; letter-spacing:.1em; margin-top:5px; }

.filter-section { background:#fff; padding:30px 20px; position: sticky; top:71px; z-index:90; box-shadow:0 2px 10px rgba(0,0,0,0.05); }
.filter-container { max-width:1400px; margin:0 auto; }
.type-filters { display:flex; gap:15px; margin-bottom:25px; overflow-x:auto; padding-bottom:10px; }
.type-btn { padding:10px 25px; background:#fff; border:2px solid var(--border-light); border-radius:30px; cursor:pointer; transition: all .3s; font-size:.95rem; white-space:nowrap; position:relative; }
.type-btn:hover { transform: translateY(-2px); box-shadow:0 5px 15px rgba(0,0,0,0.1); }
.type-btn.active { color:#fff; border-color:transparent; }
.type-btn.all.active { background: var(--primary-dark); }
.type-btn.blog.active { background: var(--accent-orange); }
.type-btn.column.active { background: var(--accent-purple); }
.type-btn.news.active { background: var(--accent-red); }
.type-btn.media.active { background: var(--accent-teal); }
.type-btn.work.active { background: var(--accent-green); }
.type-count { display:inline-block; margin-left:8px; padding:2px 8px; background: rgba(0,0,0,0.1); border-radius:12px; font-size:.85rem; font-weight:500; }

.controls-row { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.search-container { flex:1; max-width:400px; position:relative; }
.search-input { width:100%; padding:12px 45px 12px 20px; border:1px solid var(--border-light); border-radius:30px; font-size:.95rem; transition: all .3s; }
.search-input:focus { outline:none; border-color: var(--accent-orange); box-shadow:0 0 0 3px rgba(255,107,53,0.1); }
.search-icon { position:absolute; right:20px; top:50%; transform: translateY(-50%); color:var(--text-gray); }
.view-controls { display:flex; gap:15px; align-items:center; }
.view-toggle { display:flex; background: var(--bg-light); border-radius:25px; padding:4px; }
.view-btn { padding:8px 15px; background:transparent; border:none; border-radius:20px; cursor:pointer; color:var(--text-gray); transition: all .3s; font-size:1.2rem; }
.view-btn.active { background:#fff; color:var(--primary-dark); box-shadow:0 2px 8px rgba(0,0,0,0.1); }
.sort-select { padding:10px 20px; border:1px solid var(--border-light); border-radius:25px; background:#fff; cursor:pointer; font-size:.9rem; }

.tag-filters { margin-top:20px; display:flex; gap:10px; flex-wrap:wrap; }
.tag-filter { padding:6px 16px; background: var(--bg-light); border-radius:20px; font-size:.85rem; cursor:pointer; transition: all .3s; border:1px solid transparent; }
.tag-filter:hover { background: var(--accent-orange); color:#fff; }
.tag-filter.active { background: var(--accent-orange); color:#fff; border-color: var(--accent-orange); }

.main-content { max-width:1400px; margin:0 auto; padding:40px 20px; }
.results-info { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; padding:20px; background:#fff; border-radius:12px; }
.results-text { font-size:1.1rem; color:var(--text-gray); }
.results-text strong { color: var(--primary-dark); font-size:1.3rem; }
.clear-filters { padding:8px 20px; background:transparent; border:1px solid var(--border-light); border-radius:20px; cursor:pointer; transition: all .3s; font-size:.9rem; }
.clear-filters:hover { background: var(--accent-orange); color:#fff; border-color: var(--accent-orange); }

.posts-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap:30px; margin-bottom:60px; }
.posts-list { display:none; flex-direction:column; gap:20px; margin-bottom:60px; }
body.list-view .posts-grid { display:none; }
body.list-view .posts-list { display:flex; }

.post-card { background:#fff; border-radius:12px; overflow:hidden; transition: all .3s; text-decoration:none; color: var(--primary-dark); display:block; box-shadow:0 2px 10px rgba(0,0,0,0.05); position:relative; }
.post-card:hover { transform: translateY(-5px); box-shadow:0 15px 35px rgba(0,0,0,0.12); }
.post-card-image { height:180px; background: linear-gradient(135deg, var(--accent-orange), var(--accent-teal)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:2.5rem; position:relative; }
.post-card.blog .post-card-image { background: linear-gradient(135deg, var(--accent-orange), var(--accent-gold)); }
.post-card.column .post-card-image { background: linear-gradient(135deg, var(--accent-purple), var(--accent-orange)); }
.post-card.news .post-card-image { background: linear-gradient(135deg, var(--accent-red), var(--accent-orange)); }
.post-card.media .post-card-image { background: linear-gradient(135deg, var(--accent-teal), var(--accent-blue)); }
.post-card.work .post-card-image { background: linear-gradient(135deg, var(--accent-green), var(--accent-teal)); }
.post-type-label { position:absolute; top:15px; left:15px; padding:6px 14px; background: rgba(255,255,255,0.95); border-radius:20px; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.post-card.blog .post-type-label { color: var(--accent-orange); }
.post-card.column .post-type-label { color: var(--accent-purple); }
.post-card.news .post-type-label { color: var(--accent-red); }
.post-card.media .post-type-label { color: var(--accent-teal); }
.post-card.work .post-type-label { color: var(--accent-green); }
.post-card-body { padding:25px; }
.post-meta { display:flex; gap:15px; font-size:.85rem; color: var(--text-gray); margin-bottom:12px; }
.post-title { font-size:1.25rem; font-weight:500; margin-bottom:12px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow:hidden; }
.post-excerpt { font-size:.95rem; color: var(--text-gray); line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow:hidden; margin-bottom:15px; }
.post-tags { display:flex; gap:8px; flex-wrap:wrap; }
.post-tag { padding:4px 10px; background: var(--bg-light); border-radius:12px; font-size:.75rem; color: var(--text-gray); }
.new-badge { position:absolute; top:15px; right:15px; background: var(--accent-red); color:#fff; padding:4px 10px; border-radius:12px; font-size:.7rem; font-weight:600; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.7;} }

.list-item { background:#fff; border-radius:12px; padding:25px; display:flex; gap:25px; transition: all .3s; text-decoration:none; color: var(--primary-dark); box-shadow:0 2px 10px rgba(0,0,0,0.05); }
.list-item:hover { transform: translateX(5px); box-shadow:0 5px 20px rgba(0,0,0,0.1); }
.list-item-image { width:180px; height:130px; border-radius:8px; background: linear-gradient(135deg, var(--accent-orange), var(--accent-teal)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:2rem; flex-shrink:0; }
.list-item-content { flex:1; }
.list-item-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; }
.list-item-type { padding:5px 12px; border-radius:15px; font-size:.75rem; font-weight:600; text-transform:uppercase; background: var(--bg-light); }

.pagination { display:flex; justify-content:center; align-items:center; gap:10px; margin-top:60px; }
.page-btn { padding:10px 15px; background:#fff; border:1px solid var(--border-light); border-radius:8px; cursor:pointer; transition: all .3s; text-decoration:none; color: var(--text-gray); }
.page-btn:hover { background: var(--accent-orange); color:#fff; border-color: var(--accent-orange); }
.page-btn.active { background: var(--accent-orange); color:#fff; border-color: var(--accent-orange); }
.page-btn.disabled { opacity:.5; cursor:not-allowed; }

.empty-state { text-align:center; padding:100px 20px; background:#fff; border-radius:12px; }
.empty-icon { font-size:4rem; margin-bottom:20px; opacity:.5; }
.empty-title { font-size:1.5rem; margin-bottom:10px; color: var(--text-gray); }
.empty-text { color: var(--text-gray); }

@media (max-width:768px) {
  .hero-title { font-size:2rem; }
  .stats-container { grid-template-columns: repeat(2, 1fr); }
  .type-filters { -webkit-overflow-scrolling:touch; }
  .controls-row { flex-direction:column; }
  .search-container { max-width:100%; }
  .posts-grid { grid-template-columns: 1fr; }
  .list-item { flex-direction:column; }
  .list-item-image { width:100%; }
}