* { margin:0; padding:0; box-sizing:border-box; }
html { overflow-x: hidden; }
body { background:#0e0e0e; font-family:system-ui,sans-serif; padding-bottom:50px; overflow-x: hidden; }
[v-cloak] {display: none;}
.top-bar { display:flex; background:#0e0e0e; color:#fff; height:50px; align-items:center; justify-content:space-between; padding:0 15px; position:relative; z-index:100; width:calc(100vw / 1.5); margin:auto; }
.top-bar .logo { font-size:16px; font-weight:bold; }
.pc-search { display:flex; align-items:center; flex:1; max-width:400px; margin-left:20px; background:#1a252f; border-radius:4px; }
.pc-search-input { width:100%; padding:6px 12px; border:none; background:transparent; color:#fff; font-size:14px; outline:none; }
.pc-search-btn { background:none; border:none; font-size:16px; color:#999; cursor:pointer; padding:0 12px; border-left:1px solid #555; }
.pc-search-input::placeholder { color:#888; }
.pc-search-input:focus { border-color:#409eff; }
.mobile-search { display:none; align-items:center; gap:10px; }
.mobile-search-box { position:absolute; top:50%; right:3%; transform:translateY(-50%); display:flex; align-items:center; gap:8px; background:#2c3e50; padding:0 10px; z-index:101; width:52%; }
.mobile-search-input { flex:1; padding:6px 12px; border:1px solid #555; border-radius:4px; background:#1a252f; color:#fff; font-size:14px; outline:none; }
.mobile-search-input::placeholder { color:#888; }
.mobile-search-input:focus { border-color:#409eff; }
.search-btn { background:none; border:none; font-size:18px; color:#fff; cursor:pointer; padding:0 10px; z-index:102; }
.close-search { background:none; border:none; font-size:16px; color:#999; cursor:pointer; padding:0; }
.hamburger { font-size:22px; background:none; border:none; color:#fff; cursor:pointer; outline:none; }
a, a:hover, a:visited, a:active { text-decoration: none; }
.a-click { height:35px; line-height:35px; background:#2c3e50; color:#fff; text-align:center; border-radius:5px; text-decoration:none; font-size:12px; }
.top-nav { background:#0e0e0e; padding:5px; top:0; z-index:100; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
.nav-container { margin-top:10px; display:grid; grid-template-columns:repeat(auto-fill, minmax(100px,1fr)); gap:5px; }
@media (max-width:768px) { .nav-container { margin-top:10px; grid-template-columns:repeat(5,1fr); } }
@keyframes blink-glow { 0% { color:#2c3e66; text-shadow:none; } 50% { color:#e97132; text-shadow:0 0 5px rgba(233,113,50,0.5); } 100% { color:#2c3e66; text-shadow:none; } }
.nav-link { font-size:1.2rem; font-weight:600; text-decoration:none; animation:blink-glow 1.8s infinite; }
.nav-link:nth-child(1) { animation-delay:0s; }
.nav-link:nth-child(2) { animation-delay:0.3s; }
.nav-link:nth-child(3) { animation-delay:0.6s; }
.nav-link:nth-child(4) { animation-delay:0.9s; }
.nav-link:nth-child(5) { animation-delay:1.2s; }
.nav-link:nth-child(6) { animation-delay:0.15s; }
.nav-link:nth-child(7) { animation-delay:0.75s; }
.nav-link:hover { animation:none; color:#e97132; transform:scale(1.02); }
.main-content { max-width:100%; margin:0 auto; padding:0 1.5rem; }
.category-section { margin-bottom:1.5rem; }
.category-header { display:flex; justify-content:space-between; align-items:baseline; border-left:5px solid #e97132; padding-left:1rem; margin-bottom:0.5rem; }
.category-name { font-size:16px; font-weight:600; background:#fff; background-clip:text; -webkit-background-clip:text; color:transparent; }
.more-link { font-size:14px; color:#e97132; text-decoration:none; padding:0.1rem 1rem; border-radius:30px; }
.scroll-wrapper { overflow-x:auto; overflow-y:hidden; white-space:nowrap; scroll-behavior:smooth; cursor:grab; user-select:none; padding-bottom:8px; width:100%; scrollbar-width:none; -ms-overflow-style:none; }
.scroll-wrapper::-webkit-scrollbar { display:none; height:0; width:0; background:transparent; }
.scroll-wrapper:active { cursor:grabbing; }
.card-list { display:inline-flex; gap:1.2rem; padding:0.5rem 0.2rem; flex-wrap:nowrap; }
.media-card { width:240px; flex-shrink:0; background:white; border-radius:5px; overflow:hidden; box-shadow:0 8px 18px rgba(0,0,0,0.05); transition:0.25s; cursor:pointer; white-space:normal; }
.media-card:hover { transform:translateY(-5px); }
.more-card { width:100px; flex-shrink:0; background:#2c3e50; border-radius:5px; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:0.25s; }
.more-card:hover { transform:translateY(-5px); background:#3a506b; }
.more-icon { font-size:40px; color:#e97132; }
.more-text { color:#fff; font-size:12px; margin-top:8px; }
.card-img { width:230px; height:230px; display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center; }
.card-img img { width:230px; height:230px; object-fit:cover; }
.card-info { padding:0.8rem 0.7rem 1rem; }
.card-title { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; word-break:break-word; font-size:13px; }
.card-sub { font-size:0.7rem; color:#91a0b6; }
.content{width:67%;margin:auto;}
.a-link{height:35px;line-height:35px;background:#0e0e0e;color:#fff;text-align:center;border-radius:5px;text-decoration:none;font-size:12px;display:inline-block;height:35px!important;line-height:35px!important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.btn-grid-next{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:2px}
@media (max-width:680px) {.content{width:100%;}.btn-grid-next{grid-template-columns:repeat(6,1fr)} .media-card { width:200px; padding:5px; } .card-img {width:190px; height:180px; border-radius:10px; }.card-img img{width:190px; height:180px;} .main-content { padding:0 5px; } .top-bar { display:flex; background:#2c3e50; color:#fff; height:50px; align-items:center; justify-content:space-between; padding:0 15px; position:relative; z-index:100; width:100vw; margin:auto; } .container { flex-direction:column; height:auto; } .top-bar { display:flex; } .pc-search { display:none; } .mobile-search { display:flex; } .logo { z-index:102; } }
.footer-note { text-align:center; font-size:0.7rem; color:#b9c3d4; margin-top:1rem;}