.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}.filter-btn{border:1px solid var(--line);background:#fff;color:#5c6b80;border-radius:9px;padding:9px 14px;font-weight:700;cursor:pointer}.filter-btn:hover{border-color:#c7d1df}.filter-btn.active{background:var(--navy);border-color:var(--navy);color:var(--yellow)}
.story-detail{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}.article-card,.side-card,.about-card,.how-box,.category-section{background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}.article-card{padding:32px}.article-card h1{font-size:34px;line-height:1.45;margin:0 0 10px}.article-meta{display:flex;gap:9px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line)}.article-text{font-size:17px;line-height:2.15;color:#35435a;white-space:pre-line}.video-embed{margin-top:28px;aspect-ratio:16/9;background:var(--navy);border-radius:13px;display:grid;place-items:center;color:#d8e0ec;overflow:hidden;text-align:center;padding:24px}.video-embed iframe{width:100%;height:100%;border:0}.side-card{position:sticky;top:100px;padding:22px}.side-card h3{margin:0 0 14px;font-size:18px}.side-list{display:grid;gap:8px}.side-list a{padding:11px 12px;border-radius:9px;background:#f2f5f9;color:#34445d;font-size:13px;font-weight:700}.side-list a:hover{background:#e8eef7;color:var(--blue)}
.channel-page{display:grid;grid-template-columns:1fr 1fr;gap:22px}.channel-box{background:var(--navy);color:#fff;border-radius:15px;padding:32px;min-height:290px;box-shadow:var(--shadow)}.youtube-badge{display:inline-flex;background:var(--red);color:#fff;border-radius:8px;padding:6px 10px;font-size:12px;font-weight:800}.channel-box h2{font-size:31px;margin:14px 0 5px}.channel-box p{color:#c7d0df;font-size:14px}.channel-number{display:flex;gap:0;margin:24px 0;border-block:1px solid rgba(255,255,255,.12);padding:14px 0}.channel-number>div{flex:1}.channel-number>div+div{border-right:1px solid rgba(255,255,255,.12);padding-right:24px}.channel-number strong{display:block;font-size:25px}.channel-number span{font-size:11px;color:#b8c3d3}.how-box{padding:30px}.how-box h2{margin-top:0;font-size:24px}.steps{display:grid;gap:10px}.step{display:flex;gap:12px;align-items:flex-start;padding:14px;background:#f4f7fb;border-radius:11px}.step-num{width:31px;height:31px;flex:0 0 31px;border-radius:8px;background:var(--yellow);color:var(--navy);display:grid;place-items:center;font-weight:900}.step strong{font-size:14px}.step div div{font-size:12px;color:var(--muted);margin-top:2px}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.about-card{min-height:190px;padding:26px;position:relative;overflow:hidden}.about-card:before{content:"";position:absolute;right:0;top:0;width:5px;height:100%;background:var(--yellow)}.about-card .about-no{font-size:12px;color:var(--blue);font-weight:900}.about-card h3{margin:18px 0 6px;font-size:19px}.about-card p{margin:0;color:var(--muted);font-size:13px}
.category-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.category-section{padding:25px;min-height:160px;position:relative;transition:.2s}.category-section:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(23,35,58,.1)}.category-section .category-no{font-size:11px;color:var(--blue);font-weight:900}.category-section h2{margin:17px 0 6px;font-size:22px}.category-section p{margin:0;color:var(--muted);font-size:13px}.category-section:after{content:"←";position:absolute;left:22px;bottom:20px;color:var(--blue);font-weight:900}
@media(max-width:850px){.story-detail,.channel-page{grid-template-columns:1fr}.side-card{position:static}.about-grid{grid-template-columns:1fr}.category-list{grid-template-columns:1fr}}