@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/SpaceGrotesk-400.ttf') format('truetype'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/SpaceGrotesk-500.ttf') format('truetype'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/SpaceGrotesk-600.ttf') format('truetype'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/SpaceGrotesk-700.ttf') format('truetype'); }
* { margin: 0; padding: 0; box-sizing: border-box; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f0f0f0; } ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #999; }
html { scroll-behavior: smooth; } body { font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; background: #fafafa; color: #1a1a1a; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; } a:focus-visible { outline: 2px solid #2563eb; outline-offset: 4px; border-radius: 4px; }
nav { position: fixed; top: 0; left: 0; right: 0; background: rgba(250,250,250,.9); backdrop-filter: blur(12px); z-index: 1000; padding: 1.5rem 3rem; }
.nav-content { max-width: 1200px; margin: 0 auto; display:flex; justify-content:space-between; align-items:center; }
.logo { font-size:1.25rem; font-weight:600; letter-spacing:-.02em; }.nav-links{display:flex;gap:3rem;list-style:none}.nav-links a{color:#888;font-size:.9rem;transition:color .2s}.nav-links a:hover{color:#1a1a1a}
main{max-width:1200px;margin:0 auto;padding:0 3rem}.home-header{padding:12rem 0 8rem;border-bottom:1px solid #eee;margin-bottom:6rem}.home-header h1{font-size:4rem;font-weight:700;letter-spacing:-.03em;line-height:1.1;margin-bottom:1.5rem}.home-header p{font-size:1.25rem;color:#666;max-width:660px;line-height:1.7}.meta{margin-top:3rem;display:flex;gap:3rem}.meta-item{display:flex;flex-direction:column;gap:.25rem}.meta-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:#999}.meta-value{font-size:1rem;font-weight:600}
.news-list{display:flex;flex-direction:column}.news-item{display:grid;grid-template-columns:3rem 1fr auto;gap:2rem;padding:2.5rem 0;border-bottom:1px solid #eee;align-items:start;transition:background .2s,margin .2s,padding .2s}.news-item:hover{background:#fff;margin:0 -1.5rem;padding:2.5rem 1.5rem}.rank{font-size:.875rem;color:#999;font-weight:500;padding-top:.25rem}.news-info{display:flex;flex-direction:column;gap:.75rem}.news-header{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.news-title{font-size:1.5rem;font-weight:600;letter-spacing:-.02em;line-height:1.25}.news-source{font-size:.875rem;color:#999}.news-desc{font-size:.95rem;color:#666;max-width:680px;line-height:1.7}.news-tags,.tag-row{display:flex;flex-wrap:wrap;gap:.5rem}.tag{font-size:.75rem;color:#666;background:#f0f0f0;padding:.35rem .75rem;border-radius:4px}.news-action{display:flex;flex-direction:column;align-items:flex-end;gap:.75rem;min-width:8rem}.time{font-size:.9rem;color:#999;text-align:right}.time strong{display:block;color:#1a1a1a;font-size:1rem}.link{font-size:.8rem;color:#1a1a1a;border-bottom:1px solid #ccc;padding-bottom:.1rem;transition:border-color .2s}.link:hover{border-color:#1a1a1a}.badge{font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;padding:.25rem .5rem;border-radius:3px;font-weight:600;background:#f0f0f0;color:#666}.badge-top,.detail-header .badge{background:#1a1a1a;color:#fff}.badge-new{background:#f0f0f0;color:#666}
.breadcrumb{max-width:1200px;margin:0 auto;padding:7rem 3rem 0;display:flex;gap:.75rem;color:#999;font-size:.9rem}.breadcrumb a:hover{color:#1a1a1a}.detail-header{padding:4rem 0 5rem;border-bottom:1px solid #eee;margin-bottom:4rem}.header-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}.source{color:#999;font-size:.95rem}h1.detail-title{font-size:3.8rem;font-weight:700;letter-spacing:-.035em;line-height:1.08;max-width:980px;margin-bottom:1.5rem}.lead{font-size:1.2rem;color:#666;max-width:760px;line-height:1.75}.detail-meta{margin-top:3rem;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}.section{padding:0 0 4rem;margin-bottom:4rem;border-bottom:1px solid #eee;display:grid;grid-template-columns:16rem 1fr;gap:3rem}.section-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:#999;font-weight:600;padding-top:.45rem}.section-content{max-width:760px;color:#444;font-size:1.02rem;line-height:1.85}.point-list{list-style:none;display:flex;flex-direction:column;gap:1rem}.point-list li{padding-left:1.5rem;position:relative}.point-list li::before{content:'';width:.42rem;height:.42rem;border-radius:50%;background:#1a1a1a;position:absolute;left:0;top:.8rem}.action-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}.btn{min-height:44px;display:inline-flex;align-items:center;border-bottom:1px solid #ccc;font-size:.9rem;transition:border-color .2s}.btn:hover{border-color:#1a1a1a}.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.related-card{background:#fff;border:1px solid #eee;padding:1.25rem;transition:transform .2s,border-color .2s}.related-card:hover{transform:translateY(-2px);border-color:#ccc}.related-rank{color:#999;font-size:.8rem;margin-bottom:.5rem}.related-title{font-weight:600;line-height:1.35}.loading,.error{padding:4rem 0;color:#666}.error{color:#b91c1c}footer{max-width:1200px;margin:8rem auto 4rem;padding:0 3rem;text-align:center}footer p{font-size:.8rem;color:#999}
@media(max-width:768px){nav{padding:1rem 1.5rem}.nav-links{gap:1.5rem}.nav-links a{font-size:.85rem}main{padding:0 1.5rem}.home-header{padding:8rem 0 4rem;margin-bottom:3rem}.home-header h1{font-size:2.2rem}.home-header p,.lead{font-size:1rem}.meta{flex-direction:column;gap:1.5rem;margin-top:2rem}.news-item{grid-template-columns:1fr;gap:1rem;padding:2rem 0}.rank{display:none}.news-title{font-size:1.25rem}.news-action{flex-direction:row;align-items:center;justify-content:space-between;padding-top:1rem;min-width:0}.time{text-align:left}.breadcrumb{padding:6rem 1.5rem 0}h1.detail-title{font-size:2.15rem}.detail-meta{grid-template-columns:1fr;gap:1.25rem}.section{grid-template-columns:1fr;gap:1rem;margin-bottom:3rem;padding-bottom:3rem}.related{grid-template-columns:1fr}footer{padding:0 1.5rem;margin:4rem auto 2rem}}
@media(max-width:480px){.home-header h1{font-size:1.8rem}.news-item:hover{margin:0 -1rem;padding:1.5rem 1rem}.tag{font-size:.7rem;padding:.25rem .5rem}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}