/* ============================================================
   ZZAN Main — 홈(메인페이지) 콘텐츠 스타일
   layout_type = main 일 때만 로드. 디자인 토큰은 layout.css :root 사용.
   ※ 카드/썸네일의 inline linear-gradient는 데이터 연동 전 임시 플레이스홀더(추후 실제 이미지로 대체)
   ============================================================ */
.wrap{max-width:1280px;margin:0 auto;padding:0 24px;}
.sec{margin-top:42px;}
.sec__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.sec__h h2{font-size:20px;font-weight:800;letter-spacing:-.03em;}
.sec__h h2 b{color:var(--accent);}
.sec__more{font-size:13px;font-weight:700;color:var(--mute);display:flex;align-items:center;gap:3px;}
.sec__more:hover{color:var(--accent);}
.sec__btn{font-size:13px;font-weight:800;color:#fff;background:var(--accent);padding:8px 15px;border-radius:10px;}
.sec__btn:hover{filter:brightness(.94);}
.sec__h-actions{display:flex;gap:8px;align-items:center;}

/* hero */
.hero{margin-top:26px;display:grid;grid-template-columns:1fr 360px;gap:18px;}
.feat{position:relative;border-radius:var(--r);overflow:hidden;min-height:380px;display:flex;align-items:flex-end;background:linear-gradient(135deg,#3a2350,#7d2b3a 60%,#c2402f);}
.feat__badge{position:absolute;top:18px;left:18px;background:var(--accent);color:#fff;font-size:12px;font-weight:800;padding:5px 12px;border-radius:999px;letter-spacing:.02em;}
.feat__ov{position:relative;width:100%;padding:30px 28px;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.15) 70%,transparent);}
.feat__tag{display:inline-block;font-size:12px;font-weight:800;color:#ffd9d5;margin-bottom:8px;}
.feat__tit{color:#fff;font-size:30px;font-weight:900;letter-spacing:-.035em;line-height:1.25;max-width:560px;}
.feat__sub{color:rgba(255,255,255,.78);font-size:14px;margin-top:8px;}
.feat__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.5);display:grid;place-items:center;}
.feat__play svg{width:26px;height:26px;fill:#fff;margin-left:3px;}
/* 오늘의 픽 뉴스 슬라이더 */
.feat--slider{position:relative;display:block;border-radius:var(--r);overflow:hidden;min-height:380px;background:#1a1420;}
.fslide__track{display:flex;height:100%;min-height:380px;transition:transform .5s cubic-bezier(.4,0,.2,1);}
.fslide{position:relative;flex:0 0 100%;display:flex;align-items:flex-end;background-size:cover;background-position:center;text-decoration:none;min-height:380px;}
.fslide__dots{position:absolute;right:20px;bottom:18px;display:flex;gap:7px;z-index:4;}
.fslide__dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.4);cursor:pointer;transition:width .25s,background .25s;}
.fslide__dot.on{width:22px;border-radius:5px;background:#fff;}
.trend{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:8px 6px;}
.trend__h{font-size:14px;font-weight:800;padding:10px 12px 8px;display:flex;align-items:center;gap:6px;}
.trend__h .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
.trow{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;}
.trow:hover{background:var(--surface-2);}
.trow__n{font-size:15px;font-weight:900;font-style:italic;color:var(--mute);width:20px;text-align:center;}
.trow:nth-child(-n+4) .trow__n{color:var(--accent);}
.trow__t{font-size:13.5px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.trow__m{font-size:11px;color:var(--mute);font-weight:700;}

/* channel icons */
.chrow{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
.chrow::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:9px;width:84px;}
.chip__ic{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;font-size:24px;font-weight:900;color:#fff;border:1px solid rgba(255,255,255,.15);transition:transform .15s;}
.chip:hover .chip__ic{transform:translateY(-3px);}
.chip__t{font-size:12.5px;font-weight:700;color:var(--sub);}
.chip--add .chip__ic{background:var(--surface-2);color:var(--mute);border:1.5px dashed var(--border);}
/* 준비중 채널: 흑백 처리 */
.chip--soon .chip__ic{filter:grayscale(1);opacity:.55;}
.chip--soon .chip__t{color:var(--mute);}
.chip--soon:hover .chip__ic{transform:none;}

/* generic cards grid */
.grid{display:grid;gap:18px;}
.g4{grid-template-columns:repeat(4,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:transform .15s,box-shadow .15s;}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.thumb{aspect-ratio:16/9;position:relative;display:flex;align-items:flex-end;color:#fff;}
.thumb__d{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.72);color:#fff;font-size:11px;font-weight:800;padding:2px 7px;border-radius:6px;}
.thumb__p{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);border:1.5px solid rgba(255,255,255,.6);display:grid;place-items:center;}
.thumb__p svg{width:18px;height:18px;fill:#fff;margin-left:2px;}
.card__b{padding:13px 14px 15px;}
.card__tag{font-size:11px;font-weight:800;color:var(--accent);margin-bottom:5px;display:inline-block;}
.card__t{font-size:14.5px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px;}
.card__m{margin-top:8px;font-size:12px;color:var(--mute);display:flex;gap:10px;}
.pc-t{min-height:auto;}
.pc-deal{font-size:10.5px;font-weight:800;color:var(--gold);}
.pc-price{margin-top:7px;font-size:14px;font-weight:900;color:var(--accent);}

/* news: 좌 아코디언 + 우 웹진 */
.news{display:grid;grid-template-columns:1.45fr 1fr;gap:18px;}
.naccord{display:flex;flex-direction:column;gap:12px;height:444px;}
.npanel{position:relative;flex-grow:0;flex-shrink:1;flex-basis:78px;min-height:0;border-radius:14px;overflow:hidden;cursor:pointer;display:flex;align-items:flex-end;color:#fff;transition:flex-grow .45s ease,flex-basis .45s ease;}
.npanel.is-open{flex-grow:1;flex-basis:0;}
.npanel:not(.is-open){align-items:center;}
.npanel__ov{position:relative;width:100%;padding:13px 16px;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.05) 82%,transparent);transition:padding .3s;}
.npanel.is-open .npanel__ov{padding:20px 20px 18px;}
.npanel:not(.is-open) .npanel__ov{height:100%;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,.4));}
.npanel__tag{display:none;font-size:11px;font-weight:800;background:var(--accent);color:#fff;padding:3px 9px;border-radius:7px;margin-bottom:9px;}
.npanel.is-open .npanel__tag{display:inline-block;}
.npanel__t{color:#fff;font-weight:800;letter-spacing:-.02em;line-height:1.3;font-size:20px;padding-left:.6em;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;transition:font-size .3s;}
.npanel.is-open .npanel__t{font-size:22px;padding-left:0;-webkit-line-clamp:2;}
.npanel__ex{display:none;color:rgba(255,255,255,.78);font-size:13px;line-height:1.5;margin-top:8px;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.npanel.is-open .npanel__ex{display:-webkit-box;}
.npanel__more:hover{background:var(--accent);border-color:var(--accent);}
.wz{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:0 10px;display:flex;flex-direction:column;height:444px;}
.wzrow{flex:1 1 0;display:flex;gap:13px;padding:0 4px;align-items:center;min-width:0;}
.wzrow+.wzrow{border-top:1px solid var(--border);}
.wzrow:hover .wz__t{color:var(--accent);}
.wzrow__th{flex:0 0 112px;width:112px;aspect-ratio:16/10;border-radius:10px;}
.wzrow__b{min-width:0;flex:1;}
.wz__t{font-size:14.5px;font-weight:700;line-height:1.34;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .15s;}
.wz__ex{font-size:12.5px;color:var(--sub);line-height:1.5;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.wz__m{font-size:11.5px;color:var(--mute);margin-top:6px;display:flex;gap:10px;}

/* e스포츠 대회 카드 */
.tcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:transform .15s,box-shadow .15s;}
.tcard:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.tcard__bn{position:relative;aspect-ratio:16/6.4;display:flex;align-items:flex-start;justify-content:space-between;padding:11px;}
.tcard__bn .tag{font-size:11px;font-weight:800;padding:4px 10px;border-radius:7px;}
.ts-open{background:rgba(34,197,94,.2);color:#1c9e4b;}
.ts-live{background:var(--accent);color:#fff;}
.ts-end{background:rgba(0,0,0,.5);color:#fff;}
.tcard__gi{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:13px;font-weight:900;color:#fff;border:1px solid rgba(255,255,255,.32);}
.tcard__b{padding:14px 15px 16px;display:flex;gap:13px;}
.tdate{flex:0 0 auto;text-align:center;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:7px 11px;align-self:flex-start;min-width:52px;}
.tdate span{display:block;font-size:11px;color:var(--mute);font-weight:700;}
.tdate b{display:block;font-size:20px;font-weight:900;color:var(--accent);line-height:1.1;}
.tdate b small{font-size:12px;}
.tinfo{min-width:0;}
.tinfo__t{font-size:15px;font-weight:800;line-height:1.34;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tinfo__org{font-size:12px;color:var(--mute);margin-top:5px;}
.tinfo__tags{margin-top:9px;display:flex;gap:6px;flex-wrap:wrap;}
.ttag{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--surface-2);color:var(--sub);}

/* community feed */
.feed{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.fitem{display:flex;align-items:center;gap:13px;padding:14px 18px;}
.fitem+.fitem{border-top:1px solid var(--border);}
.fitem:hover{background:var(--surface-2);}
.fch{font-size:11px;font-weight:800;color:#fff;padding:3px 8px;border-radius:7px;flex:0 0 auto;}
.fitem__tw{flex:1;display:flex;align-items:center;gap:6px;min-width:0;}
.fitem__t{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fitem__cm{flex:0 0 auto;font-size:12.5px;font-weight:800;color:var(--accent);}
.newic{display:inline-block;margin-left:4px;font-size:9.5px;font-weight:900;line-height:1;color:#fff;background:var(--accent);border-radius:4px;padding:2px 4px;vertical-align:1px;}
.fitem__meta{font-size:12px;color:var(--mute);display:flex;align-items:center;gap:14px;flex:0 0 auto;}
.fitem__view{display:flex;align-items:center;gap:4px;}
.ic-eye{width:14px;height:14px;display:inline-block;background:var(--mute);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;}
.fitem__vote{font-size:11.5px;font-weight:900;color:var(--accent);background:var(--accent-soft);padding:3px 8px;border-radius:999px;}
.av{width:26px;height:26px;border-radius:50%;flex:0 0 auto;}

.wrap>.sec:last-child{margin-bottom:52px;}

@media(max-width:1000px){
  .hero{grid-template-columns:1fr;}
  .g4{grid-template-columns:1fr 1fr;}
  .g3{grid-template-columns:1fr;}
  .news{grid-template-columns:1fr;}
  .wz{height:auto;padding:0 4px;}
  .wzrow{flex-direction:row;align-items:flex-start;padding:14px 4px;}
  .wzrow__th{flex:0 0 96px;width:96px;}
  .wz__t{font-size:14px;}
  .wz__ex{display:none;}
  .fitem__meta{gap:8px;}
  .fitem__view{display:none;}
}