:root{
  --bg:#1b2838;--bg2:#16202d;--bar:#171a21;--panel:#2a475e;--panel2:#213548;
  --text:#c7d5e0;--dim:#8f98a0;--hi:#fff;--accent:#66c0f4;--accent2:#1a9fff;
  --green1:#75b022;--green2:#588a1b;--tag:#3e5266;--radius:3px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 500px at 70% -100px,#2f5272 0,transparent 70%),linear-gradient(#1b2838,#0f1923 900px) #0f1923;color:var(--text);font:14px/1.55 "Motiva Sans",Pretendard,-apple-system,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent);text-decoration:none}a:hover{color:#fff}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 16px}
#view{flex:1;padding-top:18px;padding-bottom:40px}
.topbar{background:var(--bar);box-shadow:0 1px 0 #000}
.topbar-in{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:#dcdedf;font-weight:700;letter-spacing:.14em;font-size:15px}
.brand b{color:var(--accent);font-weight:700}
.mainnav{display:flex;gap:4px;flex:1}
.mainnav a{color:#b8b6b4;font-weight:600;letter-spacing:.06em;font-size:13px;text-transform:uppercase;padding:8px 12px}
.mainnav a:hover,.mainnav a.on{color:#fff}
.topright{display:flex;align-items:center;gap:14px}
.home-link{color:var(--dim);font-size:12px}
.lang{display:flex;border:1px solid #3d4450;border-radius:var(--radius);overflow:hidden}
.lang button{background:transparent;border:0;color:var(--dim);padding:5px 10px;font:600 12px inherit;cursor:pointer}
.lang button[aria-pressed=true]{background:var(--accent2);color:#fff}
.subbar{background:linear-gradient(90deg,#2f4a63,#243b50);border-bottom:1px solid #0b121a}
.subbar-in{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.subbar a{color:#cfe4f5;padding:9px 14px;font-size:13px;white-space:nowrap;border-bottom:2px solid transparent}
.subbar a:hover{background:rgba(255,255,255,.08);color:#fff}
.subbar a.on{border-color:var(--accent);color:#fff;background:rgba(255,255,255,.07)}
h2.sec{font:400 14px inherit;text-transform:uppercase;letter-spacing:.07em;color:#fff;margin:26px 0 8px}
h2.sec small{color:var(--dim);text-transform:none;letter-spacing:0;font-size:12px;margin-left:8px}

/* featured */
.feat{display:grid;grid-template-columns:1fr 232px;gap:0;background:rgba(0,0,0,.22);box-shadow:0 0 12px #000;border-radius:var(--radius);overflow:hidden}
.feat-main{position:relative;display:block;background:#000;aspect-ratio:16/10;overflow:hidden}
.feat-main img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .35s}
.feat-info{position:absolute;inset:auto 0 0 0;padding:44px 20px 16px;background:linear-gradient(transparent,rgba(5,12,20,.92));color:#fff}
.feat-info h3{margin:0 0 2px;font-size:26px;font-weight:300;letter-spacing:.01em}
.feat-info p{margin:0;color:#c7d5e0;max-width:560px}
.feat-info .badges{margin-top:8px}
.feat-list{display:flex;flex-direction:column;background:rgba(0,0,0,.2)}
.feat-item{flex:1;display:flex;align-items:center;gap:10px;padding:0 10px;border:0;background:transparent;color:var(--text);text-align:left;cursor:pointer;font:inherit;min-height:0;position:relative}
.feat-item img{width:62px;height:39px;object-fit:cover;border-radius:2px;flex:none}
.feat-item span{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feat-item:hover{background:rgba(255,255,255,.07)}
.feat-item.on{background:linear-gradient(90deg,#3d6c8d,#2c4f69);color:#fff}
.feat-item.on::after{content:"";position:absolute;left:-6px;top:50%;margin-top:-6px;border:6px solid transparent;border-right-color:#3d6c8d;display:none}
.dots{display:none}

.badges{display:flex;flex-wrap:wrap;gap:5px}
.tag{background:rgba(103,193,245,.2);color:var(--accent);padding:1px 7px;border-radius:2px;font-size:12px;line-height:19px}
.tag.live{background:rgba(117,176,34,.25);color:#a4d007}

/* category cards */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cat{background:linear-gradient(135deg,#2a475e,#1b2f40);padding:14px;border-radius:var(--radius);color:var(--text);cursor:pointer;border:0;text-align:left;font:inherit;transition:filter .15s}
.cat:hover{filter:brightness(1.25);color:#fff}
.cat b{display:block;color:#fff;font-size:15px;font-weight:600}
.cat span{font-size:12px;color:var(--dim)}

/* capsule grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cap{display:flex;flex-direction:column;background:rgba(0,0,0,.25);border-radius:var(--radius);overflow:hidden;color:var(--text);transition:transform .15s,box-shadow .15s}
.cap:hover{transform:translateY(-3px);box-shadow:0 8px 20px #000a;color:#fff}
.cap img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:#000}
.cap-b{padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px;flex:1}
.cap-b h3{margin:0;color:#fff;font-size:16px;font-weight:600}
.cap-b p{margin:0;color:var(--dim);font-size:13px}
.cap-b .badges{margin-top:auto}

/* list rows */
.rows{display:flex;flex-direction:column;gap:3px}
.row{display:grid;grid-template-columns:184px 1fr auto;gap:14px;align-items:center;background:rgba(0,0,0,.2);padding:4px;color:var(--text);border-radius:var(--radius);transition:background .12s}
.row:hover{background:linear-gradient(90deg,#3d6c8d 0,#2b4a62 60%,#213548);color:#fff}
.row img{width:184px;height:115px;object-fit:cover;display:block;border-radius:2px}
.row h3{margin:0 0 3px;font-size:17px;color:#fff;font-weight:500}
.row p{margin:0 0 8px;font-size:13px;color:var(--dim)}
.row:hover p{color:#c7d5e0}
.row .side{text-align:right;padding-right:12px;min-width:110px;font-size:12px;color:var(--dim)}
.row .side b{display:block;color:#a4d007;font-weight:600;font-size:13px}

/* buttons */
.btn{display:inline-block;border:0;border-radius:var(--radius);padding:2px;cursor:pointer;font:inherit}
.btn span{display:block;padding:0 18px;line-height:32px;border-radius:2px;color:#d2efa9;font-weight:600;background:linear-gradient(to right,var(--green1) 5%,var(--green2) 95%)}
.btn:hover span{background:linear-gradient(to right,#8ed629 5%,#6aa621 95%);color:#fff}
.btn.blue span{color:#fff;background:linear-gradient(to right,#47bfff 5%,#1a44c2 60%)}
.btn.blue:hover span{filter:brightness(1.15)}
.btn.big span{line-height:42px;padding:0 28px;font-size:15px}

/* detail */
.crumb{font-size:12px;color:var(--dim);margin-bottom:10px}
.title{font-size:26px;font-weight:300;color:#fff;margin:0 0 12px}
.detail{display:grid;grid-template-columns:1fr 300px;gap:18px}
.shot{background:#000;border-radius:var(--radius);overflow:hidden;box-shadow:0 0 12px #000}
.shot img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.desc{margin-top:16px;background:rgba(0,0,0,.2);padding:16px 18px;border-radius:var(--radius)}
.desc h4{margin:0 0 8px;font:400 12px inherit;text-transform:uppercase;letter-spacing:.07em;color:var(--accent);border-bottom:1px solid #ffffff12;padding-bottom:6px}
.desc p{margin:0;font-size:15px;color:#d5dfe8}
.side-box{background:rgba(0,0,0,.22);border-radius:var(--radius);overflow:hidden}
.side-box .hd{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.side-box dl{margin:0;padding:12px 14px;font-size:13px}
.side-box dt{color:var(--dim);float:left;width:84px;clear:left;padding:2px 0}
.side-box dd{margin:0 0 0 84px;padding:2px 0;color:#fff}
.buy{background:linear-gradient(#273d51,#1b2a38);margin-top:12px;padding:14px;border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;gap:10px}
.buy .price{background:#000;color:#beee11;padding:6px 10px;border-radius:2px;font-size:13px;white-space:nowrap}
.buy .btn{margin-left:auto}
.note{font-size:12px;color:var(--dim);margin-top:10px}
.foot{background:var(--bar);color:var(--dim);font-size:12px;padding:22px 0;margin-top:20px}
.foot p{margin:0 0 4px}
.empty{padding:40px;text-align:center;color:var(--dim)}

@media (max-width:860px){
  .feat{grid-template-columns:1fr}
  .feat-list{flex-direction:row;overflow-x:auto}
  .feat-item{min-width:150px;padding:8px}
  .feat-item img{display:none}
  .feat-info h3{font-size:20px}
  .cats{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .detail{grid-template-columns:1fr}
  .mainnav,.home-link{display:none}
  .topbar-in{justify-content:space-between}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  .row{grid-template-columns:110px 1fr}
  .row img{width:110px;height:70px}
  .row .side{display:none}
  .row p{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}