:root{
      --bg:#0e0e10;
      --panel:#151517;
      --panel-2:#1b1b1e;
      --text:#e7e7ea;
      --muted:#a8a8ad;
      --accent:#ff4b7b;
      --accent-2:#f06292;
      --chip:#232327;
      --chip-border:#2f2f35;
      --success:#2ecc71;
      --danger:#ff334b;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:"Noto Sans KR",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
      background:var(--bg);
      color:var(--text);
    }
    a {text-decoration:none}

    /* Topbar */
    .topbar{
      position:sticky;top:0;
      display:flex;align-items:center;gap:16px;
      padding:12px 20px;
      background:#000000;
      border-bottom:1px solid #1f1f24;
      backdrop-filter:saturate(150%) blur(6px);
      z-index:99999999;
    }
    .logo{font-weight:700;letter-spacing:.2px}

    .search{
      flex:1;display:flex;align-items:center;gap:10px;
      max-width:680px;
    }
    .search input{
      width:100%;padding:10px 14px;border-radius:8px;
      background:var(--panel-2);border:1px solid #26262b;color:var(--text);
      outline:none;
    }
    .top-actions{display:flex;align-items:center;gap:12px}
    .btn{
      padding:8px 12px;border-radius:8px;border:1px solid #2c2c31;
      background:var(--panel-2);color:var(--text);cursor:pointer;
    }
    .btn.primary{background:var(--accent);border-color:transparent;color:white;font-weight:600}

    /* Layout */
    .layout{display:grid;grid-template-columns:270px 1fr;gap:0;max-width:1300px;}
    body.sidebar-collapsed .layout{grid-template-columns:76px 1fr}

    /* Sidebar & Menu styles (desktop) */
    .sidebar{
      background:var(--panel);
      border-right:1px solid #1f1f24;
      padding:12px;
    }
    .content{padding:16px;}
    .collapse-btn{
      display:flex;align-items:center;gap:8px;width:100%;
      padding:10px;border-radius:10px;border:1px solid #2c2c31;background:var(--panel-2);color:#d6d6db;cursor:pointer;margin-bottom:12px;
    }
    .collapse-btn .label{font-weight:600}
    .section-header{display:flex;align-items:center;justify-content:space-between;margin:10px 0}
    .section-title{font-weight:700}
    .section-actions{display:flex;gap:8px}
    .mini-btn{padding:6px 10px;border:1px solid #2c2c31;border-radius:8px;background:var(--panel-2);color:#d6d6db;cursor:pointer;font-size:12px}

    .channel-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
    .channel-item{
      display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;border:1px solid #2c2c31;background:var(--panel-2);text-decoration:none;color:inherit;
    }
    .channel-item .avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;border:1px solid #2c2c31;display:grid;place-items:center;color:#d6d6db}
    .channel-item .avatar img{width:100%;height:100%;object-fit:cover;display:block}
    .channel-item .nickname{font-weight:600}
    .channel-item .viewer{font-size:12px;color:#a8a8ad}
    .channel-item .live-badge{margin-left:auto;background:var(--danger);color:#fff;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700}
    
    .channel-item-menu{
      display:flex;align-items:center;gap:0px;text-decoration:none;color:inherit;
    }
    .channel-item-menu:hover{border-radius: 10px;
    border: 1px solid #2c2c31;
    background: var(--panel-2);}
    .channel-item-menu .avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;display:grid;place-items:center;color:#d6d6db}
    .channel-item-menu .avatar img{width:100%;height:100%;object-fit:cover;display:block}
    .channel-item-menu .nickname{font-weight:600}
    .channel-item-menu .viewer{font-size:12px;color:#a8a8ad}
    .channel-item-menu .live-badge{margin-left:auto;background:var(--danger);color:#fff;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700}

    /* Menu inside sidebar */
    .menu{display:flex;flex-direction:column;gap:8px}
    .menu .channel-item{padding:10px}
    .mobile-tabs{
      display:none;
    }
    .hamburger{display:none;}
    /* 모바일 드로어/탭 반응형 */
    @media(max-width:900px){
      .layout{grid-template-columns:1fr}
      .top-actions{display:none}
      .hamburger{display:inline-grid;place-items:center;font-size:28px;border:0;background:#000;color:#fff;}
      .sidebar{
        position:fixed;top:55px;left:0;width:86vw;max-width:360px;height:100vh;
        transform:translateX(-100%);transition:transform .28s ease;z-index:40;
      }
      body.drawer-open .sidebar{transform:translateX(0);z-index: 99999991;}
      .collapse-btn{display:none} /* 모바일에선 사이드바 내부 접기버튼 숨김 */

      .drawer-backdrop{display:none}
      body.drawer-open .drawer-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:30}

      .mobile-tabs{
        display:flex;gap:12px;justify-content:space-between;padding:10px 20px;background:#151515;
      }
      .mobile-tab{
        flex:1;text-align:center;padding:10px;background:#151515;color:#d6d6db;font-weight:600;
      }

      /* 추천채널 섹션(본문) */
      .mobile-recos{padding:8px 20px}
      .mchannel-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
      .m-item{display:flex;align-items:center;gap:12px;padding:8px 4px;border-bottom:1px solid #1f1f24}
      .m-avatar{width:46px;height:46px;border-radius:50%;overflow:hidden;border:2px solid #2e2e33}
      .m-name{font-size:14px;font-weight:600}
      .m-sub{font-size:12px;color:#aaa}
      .m-live{margin-left:auto;background:var(--danger);color:#fff;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
      .mobile-more{text-align:center;margin:8px 0 4px}
      .mobile-more button{padding:8px 16px;border-radius:999px;border:1px solid #2c2c31;background:var(--panel-2);color:#d6d6db}
      .section-header{display:none;}
      .channel-list{display:none}
    }

    /* Carousel 기본 높이(데스크탑) */
    .carousel{
      position:relative;
      height: clamp(220px, 30vw, 380px);
      margin:14px 0;
      overflow:hidden; /* 컨테이너 밖으로 튀는 이미지 숨김 */
    }
    /* Carousel 높이/폭 조정(모바일) */
    @media(max-width:900px){
      .carousel{height: clamp(200px, 28vw, 240px)}
      .slide{width: clamp(220px, 88vw, 420px)}
    }

    .slides{
      position:relative;width:100%;height:100%;
    }
    .slide{
      position:absolute;top:0;left:50%;
      width:min(72%, 860px);height:100%;
      transform-origin:center bottom;
      transition:transform .45s ease, opacity .3s ease, filter .3s ease;
      --x:0; --scale:1; --z:1; --opacity:1;
      transform:translateX(calc(-50% + var(--x) * 1px)) scale(var(--scale));
      z-index:calc(100 + var(--z));
      opacity:var(--opacity);
    }
    .slide img{
      width:100%;height:100%;object-fit:cover;display:block;border-radius:12px;
      box-shadow:0 14px 28px rgba(0,0,0,.35);
    }
    .slide .shade{
      position:absolute;inset:0;border-radius:12px;pointer-events:none;
      background:linear-gradient(0deg,rgba(0,0,0,.28),transparent 30%, transparent 70%, rgba(0,0,0,.28));
    }
    .slide.is-active{filter:none}

    .arrow{
      position:absolute;top:50%;transform:translateY(-50%);
      background:rgba(0,0,0,.5);border:1px solid #2b2b30;color:#fff;border-radius:50%;
      width:36px;height:36px;display:grid;place-items:center;cursor:pointer;
      z-index: 9999999;
    }
    .arrow.prev{left:12px}.arrow.next{right:12px}

    .dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:6px;z-index: 9999999;}
    .dot{width:8px;height:8px;border-radius:10px;background:#7a7a84;opacity:.6;transition:all .25s}
    .dot.active{width:22px;background:var(--accent);opacity:1}

    /* Live section */
    .live-head{display:flex;align-items:center;justify-content:space-between;margin:8px 0 12px}
    h2{margin:0;font-size:18px}
    .chips{display:flex;gap:8px}
    .chip{
      border:1px solid var(--chip-border);background:var(--chip);color:#d8d8de;border-radius:20px;padding:6px 12px;cursor:pointer;font-size:12px
    }
    .chip.active{background:var(--accent);color:white;border-color:transparent}

    .grid{
      display:grid;gap:12px;
      grid-template-columns:repeat(2,minmax(0,1fr));
    }
    @media(min-width:800px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
    @media(min-width:1200px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

    .card{
      background:var(--panel);border:1px solid #22222a;border-radius:12px;overflow:hidden;
      transition:transform .2s ease, border-color .2s ease;
    }
    .card:hover{transform:translateY(-2px);border-color:#2c2c34}
    .thumb{position:relative;height:150px;background:#0b0b0d}
    .thumb img{width:100%;height:100%;object-fit:cover;display:block}
    .badge-live{position:absolute;left:10px;top:10px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;border-radius:6px;padding:2px 6px}
    .badge-view{position:absolute;right:10px;top:10px;background:#000a;border:1px solid #2b2b30;color:#eee;font-size:11px;border-radius:6px;padding:2px 6px}
    .card-body{padding:10px}
    .title{font-size:14px;font-weight:600;margin:0 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .tags{display:flex;gap:6px;flex-wrap:wrap}
    .tag{border:1px solid #2b2b30;background:var(--chip);color:#bfc0c7;font-size:11px;border-radius:14px;padding:3px 8px}
    .owner{display:flex;align-items:center;gap:8px;margin-top:8px;color:#b9b9bf;font-size:12px}
    .owner .owner-avatar{width:22px;height:22px;border-radius:50%;overflow:hidden;border:1px solid #2b2b30}

    /* Footer note */
    .note{margin-top:18px;color:#999;font-size:12px;text-align:center}