/* 2026-11-07 대표님 「패치노트 사이트를 리스트형으로, 제목 먼저 → 들어가면 본문」: 목록(/hompage/news)과 글(/hompage/news/pMMDD) 공용 스타일 */
:root{--bg:#0d0716;--bg2:#150b24;--fg:#f4efff;--mut:#b7abd0;--pink:#ff2d7a;--pink2:#ff5fa0;--vio:#8f4dff;--line:rgba(255,255,255,.12)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.7 system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.nav{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;gap:28px;padding:0 32px;height:64px;background:#0d0716ee;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .lg{display:flex;align-items:center;gap:10px}
.nav .lg img{height:44px;width:auto}
.nav ul{display:flex;gap:26px;list-style:none;margin:0 0 0 12px;padding:0;font-size:14px;font-weight:600}
.nav ul a{opacity:.85}.nav ul a:hover{opacity:1;color:var(--pink2)}
.nav .sp{flex:1}
.btn{display:inline-flex;align-items:center;gap:12px;padding:8px 18px;border-radius:10px;font-weight:800;font-size:14px;background:linear-gradient(135deg,var(--pink),#ff6a3d);color:#fff;box-shadow:0 8px 28px rgba(255,45,122,.4)}
footer{border-top:1px solid var(--line);padding:40px 6vw;text-align:center;color:var(--mut);font-size:13px;background:#09050f}
footer nav{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
footer a:hover{color:var(--pink2)}
.pg{max-width:860px;margin:0 auto;padding:110px 6vw 70px}
.pg>h1{font-size:clamp(30px,4.4vw,44px);margin:0 0 8px;font-weight:900;letter-spacing:-.8px}
.pg>.sub{color:var(--mut);margin:0 0 34px}

/* ---- 목록 ---- */
.posts{list-style:none;margin:0;padding:0;display:grid;gap:44px}
.post a{display:block}
.post .th{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:#150b24;border:1px solid var(--line)}
.post .th img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.post a:hover .th img{transform:scale(1.03)}
.post .th.brand{display:grid;place-items:center;background:radial-gradient(120% 90% at 80% 10%,#8f4dff55,transparent 60%),radial-gradient(90% 80% at 10% 100%,#ff2d7a44,transparent 60%),linear-gradient(160deg,#1c1030,#0d0716)}
.post .th.brand img{width:auto;height:auto;max-width:56%;max-height:46%;object-fit:contain;filter:drop-shadow(0 8px 30px #ff2d7a66)}
.post .th.brand.rk img{position:absolute;inset:0;margin:auto;max-width:none;max-height:none;height:82%;width:auto;aspect-ratio:1;filter:drop-shadow(0 14px 34px #ff2d7a77)}
.post .th.brand span{position:absolute;left:16px;bottom:12px;font-weight:900;font-size:13px;letter-spacing:.08em;color:#ffffffaa}
.meta{display:flex;align-items:center;gap:12px;margin:16px 0 6px;font-size:14px}
.meta .tag{color:var(--pink2);font-weight:800}
.meta time{color:var(--mut);font-weight:700;padding-left:12px;border-left:1.5px solid var(--line)}
.post h2{margin:0 0 6px;font-size:clamp(21px,3vw,26px);line-height:1.35;font-weight:900;letter-spacing:-.4px;transition:color .2s}
.post a:hover h2{color:var(--pink2)}
.post p{margin:0;color:#d9cfee;font-size:15px}

/* ---- 글 ---- */
.art .crumb{display:inline-block;margin-bottom:18px;color:var(--mut);font-size:14px;font-weight:700}.art .crumb:hover{color:var(--pink2)}
.art h1{font-size:clamp(28px,4.2vw,40px);line-height:1.3;margin:4px 0 14px;font-weight:900;letter-spacing:-.8px}
.art .sum{margin:0 0 26px;padding:16px 18px;border-radius:14px;background:#ff2d7a14;border:1px solid #ff5fa033;color:#f1e8ff;font-size:16px}
.art .hero{margin:0 0 28px}
.art h2{margin:34px 0 10px;padding-top:22px;border-top:1px solid var(--line);font-size:19px;color:#e3d4ff;letter-spacing:-.2px}
.art ul{margin:0;padding-left:20px;color:#e4dcf5;font-size:16px}
.art li{margin:7px 0}
.art li b{color:#fff}
.art figure{margin:18px 0 6px}
.art figure img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:#0d0716}
.art figcaption{margin-top:8px;color:var(--mut);font-size:13px;text-align:center}
.art .ba{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.art .ba figure{margin:0}
.art .gal{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));margin:16px 0 6px}
.art .gal figure{margin:0;padding:12px 8px 10px;border-radius:14px;background:linear-gradient(160deg,#1c1030,#130a22);border:1px solid var(--line);text-align:center}
.art .gal img{width:100%;max-width:120px;aspect-ratio:1;object-fit:contain;margin:0 auto;border:0;background:none;border-radius:10px}
.art .gal figcaption{margin-top:6px;color:#e9dcff;font-weight:800;font-size:13px}
.art .gal figcaption small{display:block;color:var(--mut);font-weight:700;font-size:11px}
.pn{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:48px}
.pn a{padding:14px 16px;border-radius:14px;background:#170c28;border:1px solid var(--line);font-size:14px}
.pn a:hover{border-color:#ff5fa088}
.pn small{display:block;color:var(--mut);font-size:12px;font-weight:700}
.pn .nx{text-align:right;grid-column:2}
.tolist{display:block;margin-top:14px;text-align:center;padding:14px;border-radius:14px;border:1px solid var(--line);font-weight:800;color:var(--mut)}.tolist:hover{color:#fff;border-color:#ff5fa088}

@media(max-width:820px){
 .nav{padding:0 16px;gap:14px}.nav ul{display:none}
 .pg{padding:92px 20px 56px}
 .posts{gap:36px}
}