:root { --ink:#11131a; --muted:#686b74; --paper:#f7f6f2; --line:#deddd7; --blue:#3157ff; --lime:#c7ff35; --coral:#ff6e52; --purple:#7551db; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans KR",sans-serif; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { cursor:pointer; }
.top-line { height:5px; background:linear-gradient(90deg,var(--blue) 0 33%,var(--lime) 33% 65%,var(--coral) 65%); }
.site-header { height:84px; max-width:1440px; margin:auto; padding:0 50px; display:flex; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; font:700 21px/1 "DM Sans",sans-serif; letter-spacing:-.6px; white-space:nowrap; }
.brand b { color:var(--blue); }
.brand-mark { width:28px; height:28px; display:flex; align-items:flex-end; gap:3px; padding:5px; background:var(--ink); border-radius:50%; transform:rotate(-8deg); }
.brand-mark i { display:block; width:4px; background:var(--lime); border-radius:4px; }
.brand-mark i:nth-child(1){height:7px}.brand-mark i:nth-child(2){height:12px}.brand-mark i:nth-child(3){height:17px}
.main-nav { display:flex; gap:38px; margin:auto; font-size:14px; font-weight:600; }
.main-nav a { position:relative; padding:31px 0; }
.main-nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--blue); }
.header-actions { display:flex; align-items:center; gap:12px; }
.icon-button { width:40px; height:40px; border:1px solid var(--line); border-radius:50%; background:transparent; position:relative; }
.icon-button span { position:absolute; width:13px; height:13px; border:1.8px solid var(--ink); border-radius:50%; left:11px; top:10px; }
.icon-button span::after { content:""; position:absolute; width:7px; height:2px; background:var(--ink); transform:rotate(45deg); right:-5px; bottom:-3px; }
.subscribe-button { border:0; color:white; background:var(--ink); padding:11px 17px; font-size:13px; font-weight:700; }
main { max-width:1440px; margin:auto; padding:0 50px 56px; }
.ticker { min-height:49px; display:flex; align-items:center; gap:15px; border-bottom:1px solid var(--line); font-size:12px; }
.ticker-label { background:var(--blue); color:white; padding:5px 9px; font:700 10px "DM Sans",sans-serif; letter-spacing:1.2px; }
.ticker p { margin:0; flex:1; }
.ticker-time { color:#94969d; }
.hero { display:grid; grid-template-columns:minmax(0,2.05fr) minmax(320px,.95fr); border-bottom:1px solid var(--line); }
.lead-story { min-height:545px; padding:48px 42px 48px 0; display:grid; grid-template-columns:48% 52%; border-right:1px solid var(--line); }
.lead-copy { z-index:1; display:flex; flex-direction:column; justify-content:center; padding-right:24px; }
.eyebrow { display:flex; align-items:center; gap:8px; color:var(--blue); font:700 11px "DM Sans",sans-serif; letter-spacing:1.5px; }
.eyebrow i { width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 5px rgba(49,87,255,.12); }
.lead-copy h1 { margin:18px 0 22px; font-size:clamp(42px,4.5vw,68px); line-height:1.14; letter-spacing:-4.2px; }
.lead-copy h1 em { color:var(--blue); font-style:normal; position:relative; }
.lead-copy h1 em::after { content:""; position:absolute; left:0; right:0; bottom:3px; height:7px; background:var(--lime); z-index:-1; }
.lead-summary { margin:0 0 30px; max-width:410px; color:var(--muted); font-size:15px; line-height:1.85; }
.story-meta { display:flex; align-items:center; gap:11px; }
.avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:white; background:var(--ink); font:700 13px "DM Sans"; }
.story-meta b,.story-meta small { display:block; font-size:11px; line-height:1.6; }.story-meta small{color:#98999e}
.hero-art { position:relative; overflow:hidden; min-height:430px; background:#10162d; align-self:center; }
.grid-lines { position:absolute; inset:0; opacity:.28; background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size:37px 37px; transform:perspective(500px) rotateX(12deg) scale(1.15); }
.orb { position:absolute; border-radius:50%; filter:blur(2px); }.orb-one{width:370px;height:370px;right:-100px;top:-90px;background:radial-gradient(circle at 35% 35%,#92a7ff,#3157ff 42%,transparent 70%)}.orb-two{width:290px;height:290px;left:-120px;bottom:-100px;background:radial-gradient(circle,#c7ff35,rgba(199,255,53,.2) 50%,transparent 70%)}
.core-ring { position:absolute; left:50%; top:50%; width:200px; height:200px; transform:translate(-50%,-50%); display:grid; place-items:center; border:1px solid rgba(255,255,255,.55); border-radius:50%; box-shadow:0 0 0 23px rgba(255,255,255,.04),0 0 0 55px rgba(91,115,255,.08),inset 0 0 55px rgba(103,130,255,.23); }
.core-ring::before,.core-ring::after{content:"";position:absolute;border-radius:50%;border:1px dashed rgba(199,255,53,.6)}.core-ring::before{inset:-37px}.core-ring::after{inset:30px}
.core-ring span { color:white; font:700 54px "DM Sans"; letter-spacing:-5px; text-shadow:0 0 35px rgba(199,255,53,.7); }
.hero-art svg { position:absolute; inset:0; width:100%; height:100%; fill:var(--lime); stroke:rgba(199,255,53,.7); stroke-width:1.2; }
.hero-art svg path{fill:none}.data-chip{position:absolute;z-index:2;color:#d7ddff;font:600 8px "DM Sans";letter-spacing:1.2px;border:1px solid rgba(255,255,255,.2);padding:6px 8px;background:rgba(5,8,20,.45)}.chip-one{left:20px;top:22px}.chip-two{right:18px;bottom:20px}
.briefing { padding:48px 0 40px 42px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px; }
.section-heading>div>span { color:var(--blue); font:700 10px "DM Sans"; letter-spacing:1.4px; }
.section-heading h2 { margin:5px 0 0; font-size:24px; letter-spacing:-1.2px; }
.section-heading>a { color:#7b7d84; font-size:11px; padding-bottom:3px; border-bottom:1px solid #a8a9ad; }
.brief-list { list-style:none; margin:0; padding:0; }
.brief-list li { display:grid; grid-template-columns:44px 1fr; gap:14px; padding:24px 0; border-top:1px solid var(--line); }
.brief-list .number { color:#a8a9ae; font:600 18px "DM Sans"; }
.brief-list h3 { margin:7px 0 6px; font-size:16px; line-height:1.5; letter-spacing:-.5px; }
.brief-list p { margin:0; color:#8b8d94; font-size:11px; }
.tag,.category { color:var(--blue); font:700 9px "DM Sans"; letter-spacing:1px; }.tag.mint{color:#179875}.tag.orange{color:#df663e}
.latest-section { padding:66px 0 70px; }
.section-heading.wide { align-items:end; margin-bottom:27px; }
.section-heading.wide h2 { font-size:30px; }
.filters { display:flex; gap:6px; }
.filters button { border:1px solid var(--line); border-radius:30px; padding:7px 15px; background:transparent; font-size:11px; }.filters button.selected{background:var(--ink);color:white;border-color:var(--ink)}
.story-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.story-card { min-width:0; }
.card-image { height:235px; position:relative; overflow:hidden; margin-bottom:20px; background:#ddd; }
.image-label { position:absolute; left:13px; top:13px; z-index:2; background:rgba(17,19,26,.86); color:white; padding:6px 8px; font:600 8px "DM Sans"; letter-spacing:1px; }
.image-code { display:grid; place-items:center; background:linear-gradient(145deg,#3157ff,#121934); }.image-code::after{content:"";position:absolute;width:210px;height:210px;border:35px solid rgba(199,255,53,.72);border-radius:50%;right:-55px;top:-70px}
.code-window { width:66%; height:55%; padding:15px; position:relative; z-index:1; background:rgba(8,11,26,.72); border:1px solid rgba(255,255,255,.2); box-shadow:0 20px 40px rgba(0,0,0,.25); }.code-window i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ff765e;margin-right:4px}.code-window i:nth-child(2){background:#ffd15c}.code-window i:nth-child(3){background:#c7ff35}.code-window b{display:block;margin-top:38px;color:white;font:700 28px "DM Sans"}
.image-city { background:linear-gradient(#ffd6a5 0 47%,#ed745b 47%); }.city-sun{position:absolute;width:100px;height:100px;border-radius:50%;background:#ff603e;right:16%;top:12%}.building{position:absolute;bottom:0;background:#292038}.b1{left:12%;width:25%;height:45%}.b2{left:40%;width:24%;height:68%;clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}.b3{right:8%;width:25%;height:35%}.building::after{content:"";position:absolute;inset:15px;background:repeating-linear-gradient(0deg,transparent 0 12px,rgba(255,222,142,.8) 12px 15px)}
.image-human { background:linear-gradient(135deg,#d2c4ff,#6e54c9); display:grid; place-items:center; }.face{width:145px;height:190px;border-radius:48% 48% 42% 42%;background:linear-gradient(100deg,#202027,#8d78dc 48%,#f0b995 49%);position:relative;box-shadow:25px 20px 0 rgba(40,25,100,.25)}.face i{position:absolute;width:70px;height:2px;background:var(--lime);right:-18px;top:85px;box-shadow:0 0 12px var(--lime)}.scan{position:absolute;inset:20px;border:1px solid rgba(255,255,255,.35);clip-path:polygon(0 0,20% 0,20% 2%,2% 2%,2% 20%,0 20%,0 0,100% 0,100% 20%,98% 20%,98% 2%,80% 2%,80% 0,100% 0,100% 100%,80% 100%,80% 98%,98% 98%,98% 80%,100% 80%,100% 100%,0 100%,0 80%,2% 80%,2% 98%,20% 98%,20% 100%)}
.story-card>.category { display:block; margin-bottom:9px; }.category.coral{color:var(--coral)}.category.purple{color:var(--purple)}
.story-card h3 { margin:0 0 10px; font-size:19px; line-height:1.55; letter-spacing:-.8px; }.story-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.75}.card-footer{display:flex;justify-content:space-between;margin-top:20px;padding-top:14px;border-top:1px solid var(--line);color:#999ba0;font-size:10px}
.newsletter { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:70px; padding:55px 65px; color:white; background:#121725; position:relative; overflow:hidden; }.newsletter::before{content:"+";position:absolute;right:-20px;top:-93px;color:rgba(199,255,53,.08);font:700 330px/1 "DM Sans"}.eyebrow.light{color:var(--lime)}.eyebrow.light i{background:var(--lime);box-shadow:0 0 0 5px rgba(199,255,53,.1)}.newsletter h2{margin:14px 0 0;font-size:34px;line-height:1.4;letter-spacing:-1.8px}.newsletter-form{position:relative;z-index:1}.newsletter-form p{font-size:13px;color:#bdc1cc}.newsletter form{display:flex;margin:20px 0 10px}.newsletter input{min-width:0;flex:1;padding:14px 15px;border:1px solid #3d4352;border-right:0;color:white;background:#1a2030;outline:none;font-size:12px}.newsletter button{border:0;padding:0 18px;background:var(--lime);color:#111;font-size:12px;font-weight:800}.newsletter button span{margin-left:10px}.newsletter small{color:#707687;font-size:9px}
footer { max-width:1340px; margin:auto; padding:28px 0 42px; display:flex; align-items:center; gap:24px; color:#8b8d94; font-size:10px; border-top:1px solid var(--line); }.footer-brand{color:var(--ink);font-size:16px}.footer-brand .brand-mark{width:23px;height:23px;padding:4px}.footer-brand .brand-mark i{width:3px}.footer-brand+ p{flex:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:1050px){.site-header,main{padding-left:26px;padding-right:26px}.main-nav{gap:20px}.lead-story{grid-template-columns:1fr;padding-right:26px}.lead-copy{padding-right:0}.hero-art{min-height:330px}.briefing{padding-left:26px}.lead-copy h1{font-size:48px;letter-spacing:-3px}.story-grid{gap:16px}footer{margin:0 26px}}
@media (max-width:760px){.site-header{height:70px;padding:0 18px}.main-nav,.icon-button{display:none}.header-actions{margin-left:auto}.subscribe-button{padding:9px 12px;font-size:11px}main{padding:0 18px 35px}.ticker{font-size:10px}.ticker-time{display:none}.hero{display:block}.lead-story{display:flex;flex-direction:column;min-height:0;padding:38px 0;border-right:0}.lead-copy{padding-bottom:30px}.lead-copy h1{font-size:47px;letter-spacing:-3.5px}.lead-summary{font-size:13px}.hero-art{min-height:350px}.briefing{padding:42px 0 24px;border-top:1px solid var(--line)}.latest-section{padding:50px 0}.section-heading.wide{display:block}.filters{margin-top:20px}.story-grid{grid-template-columns:1fr;gap:42px}.card-image{height:250px}.newsletter{grid-template-columns:1fr;gap:25px;padding:40px 24px}.newsletter form{display:block}.newsletter input{width:100%;border-right:1px solid #3d4352}.newsletter button{width:100%;padding:14px;margin-top:8px}footer{margin:0 18px;padding:24px 0;flex-wrap:wrap}.footer-brand+ p{flex-basis:60%}footer>span:last-child{width:100%}}