@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;600;700;800;900&family=Outfit:wght@600;700;800;900&display=swap');:root{--ink:#071a2c;--lime:#d9f45a;--coral:#ff6848;--cream:#f3efe4}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7f7f4;color:var(--ink);font-family:'Noto Sans KR',sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}body>header{position:fixed;z-index:20;top:0;left:0;right:0;height:75px;padding:0 42px;display:flex;align-items:center;color:#fff;mix-blend-mode:difference}.logo{font-size:27px;font-weight:900;letter-spacing:-2px}.logo b{color:var(--lime)}body>header small{font:700 10px Outfit;letter-spacing:2px;margin-left:22px;padding-left:22px;border-left:1px solid}.menu{margin-left:auto;border:0;background:var(--coral);width:48px;height:48px;border-radius:50%;display:grid;place-content:center;gap:5px;cursor:pointer}.menu i{width:20px;height:2px;background:white;transition:.3s}.menu.on i:first-child{transform:translateY(7px) rotate(45deg)}.menu.on i:nth-child(2){opacity:0}.menu.on i:last-child{transform:translateY(-7px) rotate(-45deg)}.drawer{position:fixed;z-index:15;inset:0;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:10vw;transform:translateY(-100%);transition:.45s}.drawer.on{transform:none}.drawer a{font-size:clamp(36px,6vw,80px);font-weight:800;border-bottom:1px solid #ffffff30}.opening{height:1780px;display:grid;grid-template-columns:1fr 1fr;background:#111}.hero-wrap{height:1780px}.hero{position:sticky;top:0;height:100vh;min-height:650px;color:white;overflow:hidden}.hero>img{position:absolute;width:100%;height:100%;object-fit:cover}.shade{position:absolute;inset:0;background:linear-gradient(transparent 35%,#02090ed9)}.hero-copy{position:absolute;left:5vw;right:5vw;bottom:7vh}.hero-copy>small,.life small,.video-copy>small,.letter small{font:700 11px Outfit;letter-spacing:2px;color:var(--lime)}.hero-copy h1{font-size:clamp(36px,3.2vw,60px);line-height:1.24;letter-spacing:-3px;margin:18px 0}.hero-copy>p{font-size:14px;line-height:1.7;color:#dce1e4}.hero-copy footer{display:flex;align-items:center;gap:10px;font-size:12px;margin-top:25px}.hero-copy time{margin-left:auto}.avatar{width:35px;height:35px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font:800 11px Outfit}.count{position:absolute;top:100px;right:38px;font:600 13px Outfit}.count span{font-size:25px}.hero>button{position:absolute;right:35px;bottom:35px;border:1px solid #fff8;border-radius:50%;width:54px;height:54px;background:none;color:#fff;font-size:22px}.feed{position:relative;overflow:hidden;background:var(--lime);padding:190px 5vw 100px}.feed>h2{position:absolute;top:12px;left:3vw;margin:0;font:900 clamp(80px,9vw,170px)/.77 Outfit;letter-spacing:-8px}.intro{display:flex;justify-content:space-between;align-items:end;margin:20px 0 70px;font-size:12px;line-height:1.7}.intro b{font:700 12px Outfit;letter-spacing:2px}.feed-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px 27px}.card:nth-child(even){transform:translateY(95px)}.card>a>div{height:340px;position:relative;overflow:hidden;border-radius:23px}.card.tall>a>div{height:465px}.card.short>a>div{height:285px}.card img{width:100%;height:100%;object-fit:cover;transition:.5s}.card:hover img{transform:scale(1.04)}.card>a>div:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 38%,#000d)}.card small,.card i,.card h3{position:absolute;z-index:2;color:#fff}.card small{top:18px;left:20px;font:700 11px Outfit}.card i{top:15px;right:16px;width:31px;height:31px;border-radius:50%;background:var(--coral);display:grid;place-items:center;font:700 10px Outfit}.card h3{bottom:16px;left:20px;right:18px;margin:0;font-size:21px;line-height:1.4}.card>a>p{font-size:13px;line-height:1.6;min-height:42px}.card footer{display:flex;justify-content:space-between;font:600 10px Outfit;color:#536238}.trend{background:#111;color:#fff;padding:100px max(40px,calc((100vw - 1300px)/2));display:grid;grid-template-columns:.75fr 1fr;gap:90px}.trend small{color:var(--lime);font:700 11px Outfit;letter-spacing:2px}.trend h2{font-size:38px;line-height:1.35}.trend ol,.popular ol{list-style:none;padding:0;margin:0}.trend li{display:grid;grid-template-columns:45px 1fr auto;padding:19px 0;border-top:1px solid #ffffff30}.trend li b,.popular li b{color:var(--coral);font:800 18px Outfit}.ticker{background:var(--coral);color:white;height:105px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;font:900 38px Outfit;word-spacing:25px}.life{padding:110px max(35px,calc((100vw - 1400px)/2));background:var(--cream)}.section-head{display:flex;align-items:end;border-bottom:2px solid;padding-bottom:22px}.section-head h2{font:900 100px/.8 Outfit;margin:12px 0 0;letter-spacing:-6px}.section-head small{color:var(--coral)}.tabs{margin-left:auto;display:flex;gap:8px}.tabs button{border:1px solid;border-radius:30px;background:none;padding:8px 17px}.tabs .on{background:var(--ink);color:white}.life-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:42px}.life-grid .card{transform:none}.life-grid .card>a>div,.life-grid .card.tall>a>div,.life-grid .card.short>a>div{height:390px;border-radius:0}.life-grid .card:nth-child(even)>a>div{height:455px}.video{background:#0b2b4c;color:white;padding:110px max(35px,calc((100vw - 1400px)/2));display:grid;grid-template-columns:.7fr 1.3fr .65fr;gap:30px}.video-copy h2{font-size:50px;line-height:1.25}.video-copy i{color:var(--lime)}.video-copy>a{font-size:12px;border-bottom:1px solid}.video-main{height:610px;position:relative;overflow:hidden}.video-main:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,#000d)}.video-main>img{width:100%;height:100%;object-fit:cover}.video-main>span{position:absolute;z-index:2;top:24px;left:24px;width:52px;height:52px;border-radius:50%;background:var(--coral);display:grid;place-items:center}.video-main>div{position:absolute;z-index:2;bottom:28px;left:28px}.video-main h3{font-size:27px}.shorts{display:flex;flex-direction:column;gap:15px}.shorts a{height:193px;position:relative;overflow:hidden}.shorts img{width:100%;height:100%;object-fit:cover;filter:brightness(.55)}.shorts b,.shorts h3,.shorts small{position:absolute;z-index:2;left:14px;right:10px}.shorts b{top:10px;color:var(--lime);font:800 20px Outfit}.shorts h3{bottom:27px;font-size:14px;line-height:1.4}.shorts small{bottom:9px;font:600 9px Outfit}.reading{display:grid;grid-template-columns:1.15fr .85fr}.pick{background:#111;color:#fff;padding:90px 7vw}.pick>small,.popular>small{color:var(--coral);font:700 10px Outfit;letter-spacing:2px}.pick h2,.popular h2{font-size:42px}.pick img{width:55%;height:340px;object-fit:cover;float:left;margin-right:28px}.pick h3{font-size:23px;line-height:1.5;padding-top:30px}.pick p{font-size:12px;color:#aaa;line-height:1.7}.popular{background:#fff0bf;padding:90px 6vw}.popular li{display:grid;grid-template-columns:44px 1fr;padding:15px 0;border-top:1px solid #b8a87b}.ad{display:flex;flex-direction:column;background:var(--coral);color:#fff;padding:25px;margin-top:25px}.ad b{font-size:24px;margin:13px 0 25px}.ad small{font:700 9px Outfit}.ad span{font-size:11px}.letter{background:var(--lime);padding:80px max(40px,calc((100vw - 1100px)/2));display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.letter small{color:var(--ink)}.letter h2{font-size:38px}.letter label{font-size:12px}.letter form div{display:flex;margin-top:15px}.letter input{flex:1;border:0;border-bottom:2px solid;background:none;padding:14px}.letter button{border:0;background:var(--ink);color:#fff;padding:0 24px}body>footer{background:var(--ink);color:white;padding:65px max(35px,calc((100vw - 1300px)/2));display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:35px}body>footer>div:not(:first-child){display:flex;flex-direction:column;gap:8px}body>footer a,body>footer p{font-size:11px;line-height:1.8}.top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
@media(max-width:800px){body>header{height:55px;padding:0 17px;mix-blend-mode:normal;background:linear-gradient(#0009,transparent)}body>header small{display:none}.logo{font-size:20px}.menu{width:38px;height:38px}.opening{display:block;height:auto}.hero-wrap{height:auto}.hero{position:relative;height:100svh;min-height:620px}.hero-copy{left:19px;right:19px;bottom:60px}.hero-copy h1{font-size:29px;letter-spacing:-1.5px}.hero-copy>p{font-size:12px}.hero-copy time{display:none}.count{top:70px;right:18px}.hero>button{right:17px;bottom:15px;width:42px;height:42px}.feed{padding:125px 15px 70px}.feed>h2{font-size:70px;top:28px;letter-spacing:-5px}.intro{margin:15px 0 35px}.intro p{display:none}.feed-grid{gap:38px 9px}.card:nth-child(even){transform:translateY(55px)}.card>a>div,.card.tall>a>div,.card.short>a>div{height:250px;border-radius:8px}.card:nth-child(3n)>a>div{height:310px}.card h3{font-size:15px;left:11px;right:9px;bottom:11px}.card small{top:10px;left:11px}.card i{top:9px;right:9px}.card>a>p{font-size:10px;min-height:45px}.trend{display:block;padding:65px 18px}.trend h2{font-size:30px}.trend ol{margin-top:30px}.trend li{font-size:13px}.ticker{height:75px;font-size:25px}.life{padding:65px 15px}.section-head{display:block}.section-head h2{font-size:68px}.tabs{margin-top:25px;overflow:auto}.tabs button{white-space:nowrap}.life-grid{grid-template-columns:1fr 1fr;gap:32px 9px}.life-grid .card>a>div,.life-grid .card.tall>a>div,.life-grid .card.short>a>div,.life-grid .card:nth-child(even)>a>div{height:250px}.video{display:block;padding:65px 15px}.video-copy h2{font-size:36px}.video-copy>a{display:inline-block;margin-bottom:30px}.video-main{height:470px}.video-main h3{font-size:21px}.shorts{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px}.shorts a{height:185px}.shorts h3{font-size:11px}.reading{display:block}.pick,.popular{padding:65px 19px}.pick h2,.popular h2{font-size:33px}.pick img{float:none;width:100%;height:300px;margin:0}.letter{display:block;padding:60px 18px}.letter h2{font-size:31px}.letter form{margin-top:28px}.letter form div{display:block}.letter input,.letter button{width:100%;height:48px}body>footer{grid-template-columns:1fr 1fr;padding:55px 18px}body>footer>div:first-child,body>footer>p{grid-column:1/3}}