/* ============================================================
   BIGWINNER — PC 레이아웃 (설계도 §2 / 20260913)
   적용 조건: html.pc (js/bw_pc.js 가 ?pcv=1 + 최소폭에서만 켬)
   폰(<1024) 및 플래그 없는 PC 에는 단 한 줄도 적용되지 않는다.
   값은 전부 아래 변수. 문구(content 텍스트) 0.
   ============================================================ */

html.pc{
  /* 골격 */
  --pc-minw:1024px;          /* js/bw_pc.js MINW 와 동일하게 유지 */
  --pc-rail:88px;            /* 좌측 세로 레일 */
  --pc-main:1200px;          /* 본문 최대폭 */
  --pc-side:320px;           /* 우측 사이드 */
  --pc-gap:24px;
  --pc-pad:24px;
  --pc-wrap:calc(var(--pc-main) + var(--pc-pad) * 2);
  --pc-head:160px;           /* 머리 가로 띠 높이 */

  /* 카드 */
  --pc-live-cols:5;          /* 방송 격자 열 수 — 5면 5열x2줄(10칸 한 화면), 2면 2열x5줄(카드 크게, 스크롤) */
  --pc-live-max:1200px;      /* 방송 격자 최대폭 (2열로 바꾸면 880px 권장) */
  --pc-t1-h:320px;           /* 1위 카드 높이 */
  --pc-t1-btn-b:76px;        /* 1위 카드 상세보기 버튼 아래 여백 */
  --pc-c2-ar:2.6;            /* 2·3위 카드 가로세로비 */
  --pc-c4-ar:1.5;            /* 4~10위 카드 3:2 */
  --pc-c4-img:68%;           /* 4~10위 건물 그림 높이 (이름줄 안 가리게) */
  --pc-r-lg:22px;
  --pc-r-md:16px;

  /* 글자 (폰 대비 한 단계 위) */
  --pc-fs-h1:22px;
  --pc-fs-h2:18px;
  --pc-fs-name-lg:30px;
  --pc-fs-name-md:20px;
  --pc-fs-name-sm:18px;
  --pc-fs-body:14px;
  --pc-fs-chip:13px;
  --pc-fs-micro:13px;
  --pc-fs-sheet-title:26px;

  /* 색 — 앱 기존 다크·금색 그대로 */
  --pc-gold:#E9C77E;
  --pc-gold-soft:rgba(233,199,126,.55);
  --pc-line:rgba(255,255,255,.06);
  --pc-ink:rgba(10,11,14,.95);

  /* 모션 */
  --pc-dur:220ms;
  --pc-ease:cubic-bezier(.2,.7,.2,1);
  --pc-lift:-3px;
}

@media (min-width:1024px){

  /* ── 껍데기: 레일 + 본문 ───────────────────────────── */
  html.pc .bwStage{ padding:0 !important; align-items:stretch !important; }

  html.pc .bwApp{
    max-width:none !important; width:100% !important; height:100dvh !important;
    display:grid !important;
    grid-template-columns:var(--pc-rail) minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr);
  }
  html.pc .bwHead{ grid-area:1 / 2 / 2 / 3; }
  html.pc .bwTop { grid-area:2 / 2 / 3 / 3; }
  html.pc .bwMain{ grid-area:3 / 2 / 4 / 3; }
  html.pc .bwNav { grid-area:1 / 1 / 4 / 2; }

  /* ── 좌측 세로 레일 (하단바 5개 인장 그대로) ───────── */
  html.pc .bwNav{
    height:auto !important; flex-direction:column !important;
    align-items:center !important; justify-content:flex-start !important;
    padding:18px 0 0 !important;
    border-top:none !important; border-right:1px solid var(--pc-line);
  }
  html.pc .bwNavItem{
    position:relative; width:100% !important; margin:0 !important;
    padding:10px 0 12px; border-radius:var(--pc-r-md);
    transition:transform var(--pc-dur) var(--pc-ease);
  }
  html.pc .bwNavItem::after{
    content:""; position:absolute; inset:4px 12px; border-radius:var(--pc-r-md);
    border:1px solid var(--pc-gold); opacity:0; pointer-events:none;
    transition:opacity var(--pc-dur) var(--pc-ease);
  }
  /* 현재 탭 = 앱이 라벨을 금색(#E9C77E)으로 칠한 항목. 1번(조선월드)은 항상 금색이라 제외 */
  html.pc .bwNav > .bwNavItem:not(:first-child):has(> span[style*="rgb(233, 199, 126)"])::after{ opacity:1; }
  html.pc .bwNavItem:hover{ transform:translateY(-2px); }
  html.pc .bwNavItem:focus-visible{ outline:2px solid var(--pc-gold); outline-offset:2px; }

  /* ── 머리 가로 띠 ──────────────────────────────────── */
  html.pc .bwHead{
    height:var(--pc-head); width:min(100%, var(--pc-wrap)); justify-self:center;
    margin:0 !important; padding:0 var(--pc-pad) !important; overflow:hidden;
  }
  html.pc .bwRoof{ width:auto !important; height:100% !important; margin:0 !important; }
  /* 풍경(풍경 애니)은 띠 우측 끝으로 */
  html.pc .bw-chime-vid{
    left:auto !important; right:calc(var(--pc-pad) + 8px) !important;
    top:14px !important; width:52px !important;
  }

  html.pc .bwTop{
    width:min(100%, var(--pc-wrap)); justify-self:center;
    margin:0 !important; padding:0 var(--pc-pad) !important;
  }

  html.pc .bwMain{ overscroll-behavior:contain; }

  /* ── 홈: 본문 + 우측 사이드 ────────────────────────── */
  html.pc .bwHome{
    display:grid !important; grid-template-columns:minmax(0,1fr);
    gap:0 var(--pc-gap); align-content:start;
    max-width:var(--pc-wrap); margin:0 auto !important;
    padding:10px var(--pc-pad) 48px !important;
  }
  html.pc .bwCol{ min-width:0; }

  html.pc .bwHeadRow{ padding:0 !important; margin-bottom:2px !important; }
  html.pc .bwHeadRow > span:first-child{ font-size:var(--pc-fs-h1) !important; }
  html.pc .bwHeadRow > span:first-child span{ font-size:var(--pc-fs-body) !important; }
  html.pc .bwHeadRow > span:last-child{ font-size:var(--pc-fs-micro) !important; }

  /* 탭 칩 줄 */
  html.pc .bwSorts{ padding:14px 0 18px !important; gap:10px !important; }
  html.pc .bwSorts > span{
    font-size:var(--pc-fs-body) !important; padding:10px 20px !important;
    transition:transform var(--pc-dur) var(--pc-ease);
  }
  html.pc .bwSorts > span:hover{ transform:translateY(-1px); }
  html.pc .bwSorts > span:focus-visible{ outline:2px solid var(--pc-gold); outline-offset:2px; }

  /* 1위 카드 — 좌 글 / 우 건물 */
  html.pc .bwTop1{
    margin:0 0 var(--pc-gap) !important; border-radius:var(--pc-r-lg) !important;
    transition:transform var(--pc-dur) var(--pc-ease);
  }
  html.pc .bwTop1:hover{ transform:translateY(var(--pc-lift)); }
  html.pc .bwT1m{ height:var(--pc-t1-h) !important; }
  html.pc .bwT1m > div:first-child{
    background:linear-gradient(90deg, var(--pc-ink) 0%, rgba(10,11,14,.74) 44%, rgba(10,11,14,0) 80%) !important;
  }
  html.pc .bwT1m > div:nth-child(2){ /* 1位 장원 뱃지 */
    top:30px !important; left:34px !important;
    font-size:var(--pc-fs-chip) !important; padding:7px 14px !important;
  }
  html.pc .bwT1img{
    right:3% !important; top:50% !important; height:84% !important;
    transform:translateY(-50%);
  }
  html.pc .bwT1info{
    left:34px !important; right:46% !important; bottom:auto !important; top:104px !important;
  }
  html.pc .bwT1info > div:first-child{ font-size:var(--pc-fs-name-lg) !important; margin-bottom:14px !important; }
  html.pc .bwT1info > div:last-child{ gap:9px !important; flex-wrap:wrap; }
  html.pc .bwT1info > div:last-child span{ font-size:var(--pc-fs-chip) !important; padding:7px 13px !important; }
  html.pc .bwT1btn{
    left:34px !important; top:auto !important; bottom:var(--pc-t1-btn-b) !important;
    font-size:var(--pc-fs-chip) !important; padding:9px 18px !important;
    transition:transform var(--pc-dur) var(--pc-ease);
  }
  html.pc .bwT1btn:hover{ transform:translateY(-1px); }
  html.pc .bwT1btn:focus-visible{ outline:2px solid var(--pc-gold); outline-offset:2px; }

  /* 2·3위 — 2열 */
  html.pc .bwG2{ padding:0 0 var(--pc-gap) !important; gap:var(--pc-gap) !important; }
  html.pc .bwG2 > div{
    height:auto !important; aspect-ratio:var(--pc-c2-ar); border-radius:var(--pc-r-lg) !important;
    transition:transform var(--pc-dur) var(--pc-ease);
  }
  html.pc .bwG2 > div:hover{ transform:translateY(var(--pc-lift)); }
  html.pc .bwG2 > div > span{ top:14px !important; left:16px !important; font-size:var(--pc-fs-chip) !important; }
  html.pc .bwG2 > div > img{ height:86% !important; top:7% !important; right:0 !important; }
  html.pc .bwG2 > div > div:last-child{ bottom:16px !important; left:18px !important; right:18px !important; }
  html.pc .bwG2 > div > div:last-child > div:first-child{ font-size:var(--pc-fs-name-md) !important; margin-bottom:6px !important; }
  html.pc .bwG2 > div > div:last-child > div:last-child{ font-size:var(--pc-fs-chip) !important; }

  /* 4~10위 — 4열 3:2 (두 줄을 한 격자로 합침) */
  html.pc .bwGwrap{
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--pc-gap);
  }
  html.pc .bwG3, html.pc .bwG4{ display:contents !important; }
  html.pc .bwG3 > div, html.pc .bwG4 > div{
    height:auto !important; aspect-ratio:var(--pc-c4-ar); border-radius:var(--pc-r-md) !important;
    transition:transform var(--pc-dur) var(--pc-ease);
  }
  html.pc .bwG3 > div:hover, html.pc .bwG4 > div:hover{ transform:translateY(var(--pc-lift)); }
  html.pc .bwG3 > div > span:first-of-type,
  html.pc .bwG4 > div > span:first-of-type{ top:10px !important; left:12px !important; font-size:var(--pc-fs-chip) !important; }
  html.pc .bwG3 > div > img, html.pc .bwG4 > div > img{
    height:var(--pc-c4-img) !important; top:4% !important; right:-2% !important;
  }
  html.pc .bwG3 > div > div:last-child{ bottom:12px !important; left:14px !important; right:14px !important; }
  html.pc .bwG3 > div > div:last-child > div:first-child{ font-size:var(--pc-fs-name-sm) !important; }
  html.pc .bwG3 > div > div:last-child > div:last-child{ font-size:var(--pc-fs-chip) !important; margin-top:3px; }
  html.pc .bwG4 > div > div:last-child{
    bottom:12px !important; left:14px !important; right:14px !important;
    font-size:var(--pc-fs-name-sm) !important;
  }

  /* 순위권 밖 — 칩 한 줄 */
  html.pc .bwRestHead{ padding:var(--pc-gap) 0 10px !important; }
  html.pc .bwRestHead > span:first-child{ font-size:var(--pc-fs-body) !important; }
  html.pc .bwRestHead > span:last-child{ font-size:var(--pc-fs-micro) !important; }
  html.pc .bwRest{
    padding:0 0 8px !important; gap:10px !important;
    overflow-x:visible !important; flex-wrap:wrap !important;
  }
  html.pc .bwRest > div{ padding:10px 16px !important; border-radius:14px !important; }
  html.pc .bwRest > div > span:nth-child(2){ font-size:var(--pc-fs-chip) !important; }
  html.pc .bwRest > div > span:last-child{ font-size:var(--pc-fs-micro) !important; }

  /* 우측 사이드 (≥1280 에서 분리) */
  html.pc .bwTop3{ border-radius:var(--pc-r-lg) !important; }
  html.pc .bwTop3 > div:first-child span{ font-size:var(--pc-fs-h2) !important; }
  html.pc .bwTop3 > div:first-child > span:last-child{ font-size:var(--pc-fs-body) !important; }
  html.pc .bwTop3 > div:not(:first-child) > div:nth-child(3) > div:first-child{ font-size:15px !important; }
  html.pc .bwTop3 > div:not(:first-child) > div:nth-child(3) > div:last-child{ font-size:12.5px !important; }
  html.pc .bwTop3 > div:not(:first-child) > span:last-child{ font-size:15px !important; }

  /* ── 상세 시트 = 가운데 모달 ───────────────────────── */
  html.pc .bwSheetBd{ position:fixed !important; }
  html.pc .bwSheet{
    position:fixed !important; left:50% !important; right:auto !important;
    top:50% !important; bottom:auto !important;
    width:min(720px, calc(100vw - 120px)) !important; max-height:86vh; overflow:auto;
    border-radius:var(--pc-r-lg) !important;
    border-bottom:1px solid var(--pc-gold-soft) !important;
    padding:22px 26px 26px !important;
    transform:translate(-50%,-50%);
    animation:bwPcPop var(--pc-dur) var(--pc-ease) !important;
  }
  html.pc .bwSheetGrip{ display:none !important; }
  html.pc .bwSheetMedia{ height:300px !important; }
  html.pc .bwSheet > div:nth-child(2) > span:first-child{ font-size:var(--pc-fs-body) !important; }
  html.pc .bwSheet > div:nth-child(2) > span:nth-child(2){ font-size:var(--pc-fs-sheet-title) !important; }
  html.pc .bwSheet > div:nth-child(2) > button{
    width:34px !important; height:34px !important;
    transition:transform var(--pc-dur) var(--pc-ease);
  }
  html.pc .bwSheet > div:nth-child(2) > button:hover{ transform:scale(1.06); }
  html.pc .bwSheet > div:nth-child(2) > button:focus-visible{ outline:2px solid var(--pc-gold); outline-offset:2px; }
  html.pc .bwSheet > button{ font-size:var(--pc-fs-h2) !important; padding:15px !important; }

  /* ── 다른 화면들: 본문 폭만 잡아준다 ───────────────── */
  html.pc .bwScreen{ max-width:var(--pc-main); margin:0 auto !important; }

  /* ── 방송 화면: 2열 × 5줄 격자 (10칸 동시 노출) ────── */
  /* 화면 좌측선을 머리띠·홈과 같은 자리에 맞춘다 */
  html.pc .bwLive{
    max-width:var(--pc-wrap) !important; margin:0 auto !important;
    padding-left:var(--pc-pad) !important; padding-right:var(--pc-pad) !important;
  }
  html.pc .bwLive > div:last-child{ max-width:var(--pc-live-max); }
  html.pc .bwLiveGrid{
    display:grid; grid-template-columns:repeat(var(--pc-live-cols),minmax(0,1fr));
    gap:var(--pc-gap); align-items:start;
    max-width:var(--pc-live-max); margin:0 auto var(--pc-gap) 0;
  }
  html.pc .bwLive2, html.pc .bwLive3, html.pc .bwLive4{ display:contents !important; }
  html.pc .bwLiveCard{
    min-width:0; margin:0 !important;
    transition:transform var(--pc-dur) var(--pc-ease);
  }
  html.pc .bwLiveCard:hover{ transform:translateY(var(--pc-lift)); }
  html.pc .bwLiveCard > div:first-child{
    height:auto !important; aspect-ratio:16 / 9;
    margin-bottom:8px !important; border-radius:var(--pc-r-md) !important;
  }
  html.pc .bwLiveCard > div:nth-child(2){
    font-size:var(--pc-fs-body) !important; text-align:left !important; line-height:1.4;
  }
  html.pc .bwLiveCard > div:nth-child(2) span{ font-size:var(--pc-fs-chip) !important; }
  html.pc .bwLiveFeat > div:first-child > div:nth-child(3){ top:8px !important; left:8px !important; gap:5px !important; }
  html.pc .bwLiveFeat > div:first-child > div:nth-child(3) > div{ padding:4px 8px !important; }
  html.pc .bwLiveFeat > div:first-child > div:nth-child(3) span{ font-size:10px !important; }
  /* 칸이 좁아 LIVE·시청자 뱃지와 겹친다 — 격자에서는 파트너 뱃지를 숨긴다 */
  html.pc .bwLiveFeat > div:first-child > div:nth-child(4){ display:none !important; }
  html.pc .bwLiveFeat > div:first-child > div:nth-child(5){ width:44px !important; height:44px !important; top:42% !important; }
  html.pc .bwLiveFeat > div:first-child > div:nth-child(5) svg{ width:17px; height:17px; }
  html.pc .bwLiveFeat > div:first-child > div:nth-child(6){ bottom:10px !important; left:12px !important; right:12px !important; }
  html.pc .bwLiveFeat > div:first-child > div:nth-child(6) > div:first-child{ font-size:var(--pc-fs-body) !important; margin-bottom:2px !important; }
  html.pc .bwLiveFeat > div:first-child > div:nth-child(6) > div:last-child{ font-size:11px !important; }

  /* ── 접근성·모션 ───────────────────────────────────── */
  html.pc a:focus-visible, html.pc button:focus-visible{ outline:2px solid var(--pc-gold); outline-offset:2px; }
}

@media (min-width:1280px){
  html.pc{ --pc-wrap:calc(var(--pc-main) + var(--pc-side) + var(--pc-gap) + var(--pc-pad) * 2); }
  html.pc .bwHome{ grid-template-columns:minmax(0,1fr) var(--pc-side); }
  html.pc .bwTop3{
    grid-column:2; grid-row:1; align-self:start;
    position:sticky; top:0; margin:0 !important; padding:20px 18px !important;
  }
}

@keyframes bwPcPop{
  from{ opacity:0; transform:translate(-50%,calc(-50% + 10px)) scale(.985); }
  to  { opacity:1; transform:translate(-50%,-50%) scale(1); }
}

@media (prefers-reduced-motion:reduce){
  html.pc .bwNavItem,
  html.pc .bwTop1,
  html.pc .bwG2 > div,
  html.pc .bwG3 > div,
  html.pc .bwG4 > div,
  html.pc .bwSorts > span,
  html.pc .bwT1btn,
  html.pc .bwLiveCard{ transition:none !important; }
  html.pc .bwNavItem:hover,
  html.pc .bwTop1:hover,
  html.pc .bwG2 > div:hover,
  html.pc .bwG3 > div:hover,
  html.pc .bwG4 > div:hover,
  html.pc .bwLiveCard:hover{ transform:none !important; }
  html.pc .bwSheet{ animation:none !important; }
}