:root{
  --bg:#0d0f12; --card:#171a1f; --card2:#1f242b; --line:#2a3038;
  --txt:#e8ecf1; --sub:#8a93a0; --accent:#00ffa3; --accent-d:#00c47e;
  --live:#15c47e; --live-bg:#123726; --live-bg2:#16442f;
  --amber:#f5b945; --amber-bg:#3a2c10; --amber-bg2:#473614;
  --warn:#ff5e7e; --gold:#ffcf5e; --blue:#4a8fff;
  --pro:#7a5cff; --strm:#ff4e6a;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0; height:100%; background:var(--bg); color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",Segoe UI,sans-serif;}
::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-thumb{background:#2c333c;border-radius:5px;} ::-webkit-scrollbar-track{background:transparent;}

.app{display:flex; height:100vh; overflow:hidden;}

/* ===== 좌측: 달력 ===== */
.left{width:500px; flex:0 0 500px; border-right:none; display:flex; flex-direction:column; padding:18px 20px;}
.brand{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.brand .logo{width:36px; height:36px; border-radius:50%; overflow:hidden; position:relative; flex:0 0 36px; background:#f6a623;}
.brand .logo svg{position:absolute; inset:0; width:100%; height:100%; display:block;}
.brand .logo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.brand h1{font-size:20px; margin:0; font-weight:800; letter-spacing:.3px;}
.brand .who{font-size:13px; color:var(--sub); margin-left:auto;}
.toolbtns{display:flex; gap:8px;}
.tbtn{background:var(--card2); border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:9px 13px; font-size:13px; font-weight:600; cursor:pointer;}
.tbtn:hover{background:var(--line);}
.tbtn.primary{background:var(--accent); color:#04150e; border-color:var(--accent);}
.tbtn.primary:hover{background:var(--accent-d);}

.monthbar{display:flex; align-items:center; justify-content:space-between; margin:6px 0 14px;}
.monthbar .mtitle{font-size:18px; font-weight:700;}
.navbtn{background:var(--card2); border:1px solid var(--line); color:var(--txt);
  width:36px; height:36px; border-radius:10px; font-size:18px; cursor:pointer;}
.navbtn:hover{background:var(--line);}
.today-pill{font-size:12px; color:var(--accent); border:1px solid var(--accent-d);
  padding:5px 11px; border-radius:20px; background:rgba(0,255,163,.08); cursor:pointer; margin-left:10px;}

.weekrow{display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:7px;}
.weekrow span{text-align:center; font-size:11px; color:var(--sub); font-weight:600;}
.weekrow span.sun{color:#ff7a7a;} .weekrow span.sat{color:#7aa9ff;}

.grid{display:grid; grid-template-columns:repeat(7,1fr); column-gap:9px; row-gap:3px; flex:0 0 auto; align-content:start;}
.cell[draggable]{}
.cell{min-height:52px; background:var(--card); border-radius:10px; position:relative;
  display:flex; flex-direction:column; align-items:center; padding-top:6px; cursor:pointer;
  border:1.5px solid transparent; transition:.1s;}
.cell .vlogos{position:absolute; top:5px; left:5px; display:flex; gap:2px; z-index:3;}
.cell .vlogo{width:17px; height:17px; border-radius:4px; object-fit:cover; border:1px solid rgba(255,255,255,.18); flex:0 0 auto;}
.cell .vmore{font-size:8px; font-weight:800; color:var(--sub); background:var(--card2); display:flex; align-items:center; justify-content:center;}
.cell.track-hit{border-color:var(--pro) !important; box-shadow:0 0 0 2px var(--pro), 0 0 12px -2px var(--pro); background:rgba(122,92,255,.16);}
/* 게임 추적 바 */
/* 툴바 안(다시보기 ↔ 설정 사이)에 들어가므로 위아래 여백 없이 인라인 배치 */
.trackbar{position:relative; display:flex; align-items:center; gap:7px; margin:0; flex:0 0 auto; min-width:0;}
.toolbtns .trackbtn{padding:0 11px; align-self:stretch;}
.trackbtn{background:var(--card2); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:5px 11px; font-size:12px; font-weight:700; cursor:pointer; flex:0 0 auto;}
.trackbtn:hover,.trackbtn.on{border-color:var(--pro); color:#c9b3ff;}
.track-active{display:flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:var(--txt); background:rgba(122,92,255,.12); border:1px solid var(--pro); border-radius:8px; padding:3px 5px 3px 9px; min-width:0; overflow:hidden;}
.track-active .tc-dot{width:8px; height:8px; border-radius:50%; background:var(--pro); flex:0 0 auto;}
.track-active b{color:#c9b3ff;}
.track-active .tc-x{background:none; border:none; color:var(--sub); cursor:pointer; font-size:13px; padding:0 2px; flex:0 0 auto;}
.track-active .tc-x:hover{color:var(--warn);}
.track-pop{position:absolute; top:calc(100% + 4px); left:0; z-index:40; width:240px; max-height:300px; overflow-y:auto; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:5px; box-shadow:0 8px 24px rgba(0,0,0,.4); display:none;}
.track-pop.open{display:block;}
.track-row{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px; cursor:pointer;}
.track-row:hover{background:rgba(255,255,255,.06);}
.track-row.on{background:rgba(122,92,255,.16);}
.track-ic{width:22px; height:22px; border-radius:5px; object-fit:cover; flex:0 0 22px; display:flex; align-items:center; justify-content:center; font-size:12px;}
.track-ic.lol{background:#1e2a4a;}
.track-nm{flex:1; min-width:0; font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.track-cnt{font-size:11px; color:var(--sub); font-weight:700; flex:0 0 auto;}
.track-empty{padding:12px; text-align:center; color:var(--sub); font-size:12px;}
.track-active .tc-main{display:flex; align-items:center; gap:5px; cursor:pointer; min-width:0; overflow:hidden;}
/* 추적 결과 목록 (우측 패널) */
.trk-head{display:flex; align-items:center; gap:10px; padding:18px 22px 14px; border-bottom:1px solid var(--line);}
.trk-tt{font-size:20px; font-weight:800; color:var(--txt); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.trk-sum{font-size:13px; font-weight:700; color:#c9b3ff; background:rgba(122,92,255,.14); border:1px solid var(--pro); border-radius:8px; padding:3px 10px; flex:0 0 auto;}
.trk-close{margin-left:auto; background:var(--card2); border:1px solid var(--line); color:var(--sub); border-radius:8px; padding:5px 12px; font-size:12px; font-weight:700; cursor:pointer; flex:0 0 auto;}
.trk-close:hover{border-color:var(--warn); color:var(--warn);}
.trk-list{padding:14px 22px; display:flex; flex-direction:column; gap:7px; overflow-y:auto;}
.trk-row{display:flex; align-items:center; gap:14px; padding:11px 16px; border-radius:10px; border:1px solid var(--line); background:var(--card); cursor:pointer; transition:background .12s;}
.trk-row:hover{background:rgba(122,92,255,.1); border-color:var(--pro);}
.trk-date{font-size:15px; font-weight:800; color:var(--txt); flex:0 0 auto; display:flex; align-items:baseline; gap:5px;}
.trk-date i{font-size:12px; font-weight:600; color:var(--sub); font-style:normal;}
.trk-rec{font-size:13px; color:var(--sub); font-weight:600;} .trk-rec b{color:var(--blue);}
.trk-vt{font-size:13px; color:var(--sub); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cell.empty{background:transparent; cursor:default;}
.cell:not(.empty):hover{border-color:#3a4450;}
.cell .dnum{font-size:14px; font-weight:600; z-index:2; color:#c4ccd6;}
.cell.sun .dnum{color:#ff8c8c;} .cell.sat .dnum{color:#8fb4ff;}
/* LCK 일정 표시 (주황) — 방송 여부와 별개라 방송 초록 위에 덧입혀진다 */
.cell.lckday,.cell.live.lckday,.cell.live.manual.lckday{border-color:#ff9d2e !important; background:rgba(255,157,46,.14);}
.cell.lckday .dnum,.cell.live.lckday .dnum,.cell.live.manual.lckday .dnum{color:#ffb45c;}
.cell.lckday::after{content:"LCK"; position:absolute; top:3px; right:4px; font-size:8.5px; font-weight:800;
  color:#ff9d2e; letter-spacing:.3px; z-index:3;}
.tog.lck.on{border-color:#a35c14; background:rgba(255,157,46,.12); color:#ffb45c;}
.tog.lck.on .dot{background:#ff9d2e;}

/* 그날 방송한 시간 (날짜 아래) */
.cell .airtime{margin-top:2px; font-size:10.5px; font-weight:700; color:var(--live,#22e39a); opacity:.85; letter-spacing:-.2px; z-index:2;}

/* ===== 편집할 것 (우하단) ===== */
.todo-list{flex:1; min-height:0; overflow-y:auto; padding:6px 8px 8px; display:flex; flex-direction:column; gap:6px;}
.todo-empty{color:var(--sub); font-size:11.5px; text-align:center; padding:22px 6px; line-height:1.7;}
.todo-row{display:flex; align-items:flex-start; gap:8px; background:var(--card2); border:1px solid rgba(255,255,255,.06);
  border-radius:9px; padding:8px 9px; cursor:pointer;}
.todo-row:hover{border-color:#3a4450;}
.todo-row.done{opacity:.45;}
.todo-row.done .todo-topic{text-decoration:line-through;}
.todo-chk{flex:0 0 15px; width:15px; height:15px; margin-top:1px; border-radius:5px; background:transparent;
  border:1.5px solid #4a5563; cursor:pointer; padding:0;}
.todo-chk.on{background:var(--live,#22e39a); border-color:var(--live,#22e39a);}
.todo-main{flex:1; min-width:0;}
.todo-topic{font-size:12.5px; font-weight:700; color:#e6eaf0; word-break:break-all; line-height:1.35;}
.todo-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:3px; font-size:10.5px; color:var(--sub);}
.todo-due.soon{color:#ffc35c;}
.todo-due.over{color:#ff8a82; font-weight:700;}
/* ===== 합방 스트리머 ===== */
.collabs{margin-top:5px; display:flex; flex-wrap:wrap; gap:5px; align-items:center; font-size:11.5px; color:var(--sub);}
.collab{background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:2px 9px;
  font-size:11.5px; font-weight:700; color:#9fd8ff; text-decoration:none;}
.collab:hover{border-color:#3a7fb5; color:#cfeaff;}
.addvid.sub-on{background:var(--amber-bg,rgba(255,195,92,.14)) !important; border-color:#7a5e1a !important; color:#ffc35c !important;}

/* 콘텐츠 카드 인라인 편집 — 클릭한 자리에서 그대로 펼쳐진다(별도 창 없음) */
.game.custom.editing{cursor:default; border-left-color:var(--pro,#7a5cff); padding:0;}
/* 설명·합방스트리머가 있다는 힌트만 접힌 카드에 살짝 보여준다(내용은 클릭해야 펼쳐짐) */
.has-more{margin-left:6px; color:var(--sub); font-weight:800; letter-spacing:1px; font-size:12px;}
/* 인라인 편집 폼: 제목 → 합방 스트리머 → 설명(맨 아래) 순서로 통일 */
.ce-body{padding:14px 14px 4px; display:flex; flex-direction:column; gap:14px;}
.game.custom.editing .gfoot{padding:0 14px 12px; margin-top:0;}
.ce-field .cm-label{display:flex; align-items:center; gap:5px;}
.cm-label-sub{font-weight:400; color:var(--sub); opacity:.75; font-size:11px;}

/* 콘텐츠 모달 - 스트리머 검색 */
.cs-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; min-height:26px;}
.cs-empty{font-size:11.5px; color:var(--sub); padding:4px 0;}
.cs-chip{display:inline-flex; align-items:center; gap:6px; background:var(--card2); border:1px solid var(--line);
  border-radius:14px; padding:3px 6px 3px 4px;}
.cs-chip img{width:18px; height:18px; border-radius:50%; object-fit:cover; flex:0 0 auto;}
.cs-chip a{font-size:12px; font-weight:700; color:#9fd8ff; text-decoration:none;}
.cs-chip a:hover{text-decoration:underline;}
.cs-chip button{background:none; border:none; color:var(--sub); cursor:pointer; font-size:11px; padding:0 2px;}
.cs-chip button:hover{color:var(--warn);}
.cs-search{position:relative; display:flex; gap:6px; margin-bottom:12px;}
.cs-plat{flex:0 0 auto; background:var(--card2); border:1px solid var(--line); color:var(--txt);
  border-radius:8px; font-size:12px; padding:0 8px;}
.cs-search .cm-input{flex:1; margin:0;}
.cs-menu{display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60;
  background:var(--card); border:1px solid var(--line); border-radius:10px; padding:4px;
  max-height:230px; overflow-y:auto; box-shadow:0 10px 30px rgba(0,0,0,.45);}
.cs-menu.open{display:block;}
.cs-opt{display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px; cursor:pointer;}
.cs-opt:hover{background:var(--card2);}
.cs-opt img,.cs-noimg{width:24px; height:24px; border-radius:50%; object-fit:cover; flex:0 0 auto; background:var(--card2);}
.cs-nm{flex:1; min-width:0; font-size:12.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cs-id{flex:0 0 auto; font-size:10.5px; color:var(--sub);}
.cs-follow{flex:0 0 auto; font-size:10.5px; color:var(--accent,#00ffa3); font-weight:700; margin-left:2px;}
.cs-plattag{flex:0 0 auto; font-size:9.5px; font-weight:800; border-radius:5px; padding:2px 5px; letter-spacing:.2px;}
.cs-plattag.soop{background:rgba(0,0,0,.35); color:#7ad0ff; border:1px solid #234;}
.cs-plattag.chzzk{background:rgba(0,255,163,.1); color:#00ffa3; border:1px solid #1d5e41;}
.cs-msg{color:var(--sub); font-size:12px; cursor:default;}
.cs-msg:hover{background:none;}

/* ===== 방송국 공지 (달력 아래) ===== */
.notice-list{flex:1; min-height:0; overflow-y:auto; padding:2px 2px 4px; display:flex; flex-direction:column; gap:6px;}
.notice-empty{color:var(--sub); font-size:11.5px; text-align:center; padding:20px 6px; line-height:1.7;}
.notice-row{display:block; background:var(--card2); border:1px solid rgba(255,255,255,.06); border-radius:9px;
  padding:8px 10px; text-decoration:none;}
.notice-row:hover{border-color:var(--accent-d); background:rgba(0,255,163,.05);}
.notice-title{font-size:12.5px; font-weight:700; color:#e6eaf0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.notice-meta{margin-top:3px; font-size:10.5px; color:var(--sub);}

/* 우하단 탭 (편집할 것 ↔ 탐색) */
.btab{background:none; border:none; color:var(--sub); font-size:12.5px; font-weight:800; cursor:pointer;
  padding:3px 2px; border-bottom:2px solid transparent; margin-right:12px;}
.btab:hover{color:var(--txt);}
.btab.on{color:var(--txt); border-bottom-color:var(--accent);}
.todo-list.hide,#findPane.hide,#drivePane.hide{display:none;}
#findPane,#drivePane{flex:1; min-height:0; display:flex; flex-direction:column;}
#driveBox{flex:1; min-height:0; display:flex; flex-direction:column;}

/* ===== 구글 드라이브 ===== */
.drv-setup{padding:6px 2px;}
.drv-label{font-size:12px; font-weight:700; color:var(--sub); margin-bottom:6px;}
.drv-label span{font-weight:400; color:var(--sub); opacity:.7;}
.drv-setup input{width:100%; box-sizing:border-box; background:var(--card2); border:1px solid var(--line);
  border-radius:8px; color:var(--txt); font-size:12px; padding:8px 10px; margin-bottom:7px;}
.drv-setup button{width:100%; background:var(--accent); color:#07201a; font-weight:800; font-size:12.5px;
  border:none; border-radius:8px; padding:9px; cursor:pointer;}
.drv-warn{font-size:11px; color:var(--sub); margin-top:8px; line-height:1.6;}
.drv-bar{display:flex; align-items:center; gap:5px; flex:0 0 auto; padding-bottom:6px;}
.drv-btn{background:var(--card2); border:1px solid var(--line); color:var(--sub); border-radius:7px;
  padding:4px 8px; font-size:12px; cursor:pointer; text-decoration:none; flex:0 0 auto; line-height:1.5;}
.drv-btn:hover:not(:disabled){color:var(--txt); border-color:#3a4450;}
.drv-btn:disabled{opacity:.35; cursor:default;}
.drv-crumb{flex:1; min-width:0; font-size:11.5px; color:var(--sub); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; direction:rtl; text-align:left;}
.drv-list{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:3px;}
.drv-empty{color:var(--sub); font-size:11.5px; text-align:center; padding:26px 6px; line-height:1.7;}
.drv-row{display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px; cursor:pointer;
  background:var(--card2); border:1px solid rgba(255,255,255,.05); text-decoration:none;}
.drv-row:hover{border-color:var(--accent-d); background:rgba(0,255,163,.05);}
.drv-ico{flex:0 0 auto; font-size:13px;}
.drv-name{flex:1; min-width:0; font-size:12px; font-weight:600; color:#e6eaf0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.drv-mod{flex:0 0 auto; font-size:10px; color:var(--sub);}

/* 진행 단계 배지 (클릭하면 다음 단계) */
.todo-stage{flex:0 0 auto; align-self:center; border:1px solid var(--line); background:var(--card);
  color:var(--sub); border-radius:14px; padding:4px 11px; font-size:11px; font-weight:800; cursor:pointer; white-space:nowrap;}
.todo-stage:hover{filter:brightness(1.25);}
.todo-stage.s-0{color:#8a93a3;}                                        /* 대기 */
.todo-stage.s-1{color:#8fb4ff; border-color:#38507d;}                  /* 준비 */
.todo-stage.s-2{color:#ff8a82; border-color:#7d3a38;}                  /* 방송 */
.todo-stage.s-3{color:#ffc35c; border-color:#7a5e1a;}                  /* 편집 */
.todo-stage.s-4{color:#c9b3ff; border-color:#5e4aa0;}                  /* 검수 */
.todo-stage.s-5{color:#7ad8ff; border-color:#2f6b85;}                  /* 제출 */
.todo-stage.s-6{color:#ff9ad2; border-color:#8a3f6b;}                  /* 수정 */
.todo-stage.s-7{color:#0b2018; background:var(--accent,#00ffa3); border-color:transparent;}  /* 완료 */
.cell.live{background:var(--live-bg); border-color:#1d5e41;}
.cell.live:hover{background:var(--live-bg2);}
.cell.live .dnum{color:#7df3c0;}
.cell.live.manual{background:var(--card); border:1.5px dashed var(--live);}
.cell.live.manual .dnum{color:#7df3c0;}
.cell.sub{background:var(--amber-bg); border-color:#7a5e1a;}
.cell.sub:hover{background:var(--amber-bg2);}
.cell.sub .dnum{color:#ffd98a;}
.cell.sub.manual{background:var(--card); border:1.5px dashed var(--amber);}
.cell.today .dnum{color:var(--accent); text-decoration:underline;}
.cell.sel{outline:2px solid var(--accent); outline-offset:0;}
.cell .editflag{position:absolute; top:7px; right:7px; width:6px; height:6px; border-radius:50%; background:var(--gold);}
.cell .rec{position:absolute; bottom:6px; font-size:11px; font-weight:700;}
.cell .rec b{color:var(--blue);} .cell .rec i{color:var(--warn); font-style:normal;} .cell .rec s{color:var(--sub); text-decoration:none;}
.cell .marks{position:absolute; bottom:7px; display:flex; gap:3px;}
.cell .marks .dot{width:6px; height:6px; border-radius:50%; background:var(--gold);}
.cell .marks .dot.done{background:var(--accent);}

.legend{display:flex; gap:16px; justify-content:center; padding-top:14px; font-size:11px; color:var(--sub); flex-wrap:wrap;}
.legend i{display:inline-block; width:12px; height:12px; border-radius:4px; vertical-align:-2px; margin-right:5px;}
.lg-live i{background:var(--live-bg); border:1.5px solid #1d5e41;}
.lg-sub i{background:var(--amber-bg); border:1.5px solid #7a5e1a;}
.lg-man i{background:transparent; border:1.5px dashed var(--live);}
.lg-edit i{border-radius:50%; background:var(--gold); width:10px; height:10px;}

/* ===== 영상 바구니 ===== */
.vidbin{flex:1; display:flex; flex-direction:column; margin-top:12px; min-height:120px;}
.vidbar{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.vbttl{font-size:17px; font-weight:800;}
.vidsel{flex:1; background:var(--card2); border:1px solid var(--line); color:var(--txt); border-radius:9px; padding:7px 9px; font-size:13px; min-width:0;}
.vidbtn{background:var(--card2); border:1px solid var(--line); color:var(--txt); border-radius:9px; padding:7px 10px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;}
.vidbtn:hover{background:var(--line);}
.vidDrop{flex:1; border:1.5px dashed var(--line); border-radius:12px; padding:8px; overflow-y:auto;
  display:flex; flex-direction:column; gap:6px; min-height:90px;}
.vidDrop.drag{border-color:var(--accent); background:rgba(0,255,163,.05);}
.vidDrop .ph{color:var(--sub); font-size:12px; margin:auto; text-align:center; line-height:1.6;}
.clip{position:relative; display:flex; align-items:center; gap:8px; width:100%; min-height:44px; box-sizing:border-box; background:var(--card2);
  border:1px solid var(--line); border-left:3px solid var(--sub); border-radius:9px; padding:6px 10px; cursor:grab;}
.clip.dragging{opacity:.4;}
.clip.over{border-top:2px solid var(--accent);}
.clip-nav:hover{background:rgba(122,92,255,.1); border-color:var(--pro);}
.clip.win{border-left-color:var(--blue);} .clip.lose{border-left-color:var(--warn);}
.clip img{width:30px; height:30px; border-radius:6px; flex:0 0 30px;}
.clip .cdate{font-size:11px; color:var(--sub); font-weight:700; flex:0 0 auto; min-width:36px;}
.clip .ck{font-size:12px; font-weight:700;}
.clip .cw{font-size:11px; font-weight:800;}
.clip.win .cw{color:var(--blue);} .clip.lose .cw{color:var(--warn);}
.clip .cd{font-size:11px; color:var(--sub); font-weight:600;}
.clip .cctl{margin-left:auto; display:flex; align-items:center; gap:1px; flex:0 0 auto;}
.clip .cmv{background:none; border:none; color:var(--sub); cursor:pointer; font-size:9px; padding:2px 3px; line-height:1;}
.clip .cmv:hover{color:var(--accent);}
.clip .cx{background:none; border:none; color:var(--sub); cursor:pointer; font-size:13px; padding:0 0 0 2px;}
.clip .cx:hover{color:var(--warn);}
.game[draggable=true]{cursor:grab;}
.game.dragging{opacity:.4;}
.game img{-webkit-user-drag:none; user-drag:none;}

/* ===== 패널 리사이저 ===== */
.resizer{flex:0 0 5px; background:var(--line); cursor:col-resize; transition:background .15s; z-index:10;}
.resizer:hover,.resizer.dragging{background:var(--accent-d);}

/* ===== 우측 메모장 ===== */
.notepad{flex:0 0 330px; border-left:none; display:flex; flex-direction:column; overflow:hidden;}
.np-body{flex:1; overflow-y:auto; padding:22px 20px; display:flex; flex-direction:column;}
.np-placeholder{margin:auto; text-align:center; color:var(--sub); font-size:14px; line-height:1.9;}
#resizer-ns,#resizer-lf{margin:0; flex:0 0 5px; height:5px; background:var(--line); cursor:ns-resize; transition:background .15s;}
/* 달력과 아래 패널이 붙어 보이지 않도록 여백 */
#resizer-lf{margin-top:12px;}
/* 공지 3개가 잘리지 않는 기본 높이 (드래그로 조절 가능) */
#bnav-left{padding-top:6px; flex:0 0 258px;}
#resizer-ns:hover,#resizer-ns.dragging,#resizer-lf:hover,#resizer-lf.dragging{background:var(--accent-d);}
.addvid.sht-on{background:rgba(122,92,255,.18); border-color:var(--pro); color:#c9b3ff;}
/* 하단 나란히 패널 */
.bnav-wrap{flex:0 0 220px; display:flex; flex-direction:row; min-height:0; border-top:1px solid var(--line);}
.bvdiv{width:9px; flex:0 0 9px; background:transparent; position:relative; z-index:5;}
.bvdiv::before{content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); background:var(--line);}
/* 안쪽 목록(.notice-list/.todo-list/.gf-list)이 각자 스크롤하므로
   패널 자체는 스크롤하지 않는다. 둘 다 스크롤하면 목록이 잘려 보인다. */
.bpanel{flex:1; display:flex; flex-direction:column; padding:8px 8px 10px; gap:5px; min-height:0; overflow:hidden;}
.bptit{font-size:17px; font-weight:800; color:var(--txt); display:flex; align-items:center; gap:5px; flex:0 0 auto; padding-bottom:2px;}
.bptit .bpemo{font-size:1em; line-height:1;}
/* 탐색기 */
.gf-grds{display:flex; gap:4px; flex-wrap:wrap;}
.gf-btn{flex:1; padding:3px 0; border-radius:7px; border:1px solid var(--line); background:transparent; color:var(--sub); font-size:11px; font-weight:700; cursor:pointer; transition:background .15s;}
.gf-btn.on{background:var(--accent-d); border-color:var(--accent-d); color:#fff;}
.gf-searchbtn{flex:0 0 30px;}
.gf-searchbtn.on{background:var(--pro); border-color:var(--pro); color:#fff;}
.gf-mine{display:flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--sub); cursor:pointer; margin:-1px 0 1px 1px;}
.gf-mine input{accent-color:var(--pro); width:13px; height:13px; cursor:pointer;}
.gf-cicon{font-size:16px; flex:0 0 22px; text-align:center;}
.gf-item.custom{border-left:3px solid var(--pro);}
.gf-vs{font-size:9px; font-weight:700; color:var(--sub); flex:0 0 auto;}
.gf-opp{width:20px; height:20px; flex:0 0 20px; opacity:.92;}
.gf-edited{font-size:9px; font-weight:700; color:var(--sub); background:rgba(255,255,255,.08); border-radius:5px; padding:1px 5px; flex:0 0 auto;}
.gf-item.is-edited .gf-champ, .gf-item.is-edited .gf-kda{opacity:.5;}
.gf-list{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:4px;}
.gf-item{display:flex; flex-direction:column; gap:3px; padding:5px 8px; border-radius:8px; cursor:pointer; border:1px solid var(--line); background:var(--card); transition:background .15s;}
.gf-item:hover{background:rgba(255,255,255,.06);}
.gf-item.win{border-left:3px solid var(--blue);}
.gf-item.lose{border-left:3px solid var(--warn);}
.gf-row{display:flex; align-items:center; gap:6px;}
.gf-review{font-size:10px; color:var(--sub); line-height:1.3; padding-left:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gf-search{width:100%; box-sizing:border-box; font-size:11px; background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:7px; color:var(--txt); padding:4px 8px; margin-bottom:2px; outline:none;}
.gf-search:focus{border-color:var(--pro); background:rgba(122,92,255,.08);}
.gf-search::placeholder{color:var(--sub); opacity:.7;}
.gf-date{font-size:10px; color:var(--sub); flex:0 0 28px;}
.gf-champ{width:22px; height:22px; border-radius:4px; flex:0 0 22px; object-fit:cover;}
.gf-kda{font-size:11px; color:var(--txt); flex:1;}
.np-head{font-size:17px; font-weight:800; margin-bottom:14px;}
.np-textarea{width:100%; min-height:260px; background:var(--card); border:1px solid var(--line); color:var(--txt);
  border-radius:12px; padding:14px; font-size:14px; line-height:1.7; resize:vertical; font-family:inherit;}
.np-textarea:focus{outline:none; border-color:var(--accent-d);}
.np-textarea::placeholder{color:var(--sub);}
/* 메모 서식 툴바 */
.np-toolbar{display:flex; align-items:center; gap:3px; padding:6px 8px; background:var(--card2); border:1px solid var(--line); border-radius:10px; margin-bottom:8px; flex-wrap:wrap;}
.npt-sep{flex:0 0 1px; height:18px; background:var(--line); margin:0 4px;}
.npt-btn{background:none; border:1px solid transparent; color:var(--sub); border-radius:6px; width:28px; height:28px; font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 28px;}
.npt-btn:hover{background:var(--line); color:var(--txt);}
.npt-btn.on{background:rgba(0,255,163,.15); border-color:var(--accent-d); color:var(--accent);}
.npt-sel{background:var(--card); border:1px solid var(--line); color:var(--txt); border-radius:7px; padding:3px 6px; font-size:12px; height:28px; cursor:pointer;}
.npt-color-wrap{position:relative;}
.npt-cir{display:inline-block; flex:0 0 13px; width:13px; height:13px; border-radius:50%; background:#e8ecf1; border:1.5px solid rgba(255,255,255,.3); vertical-align:middle; box-sizing:border-box;}
.npt-palette{position:absolute; top:34px; left:-4px; background:#1c2128; border:1px solid var(--line); border-radius:11px; padding:8px; display:none; grid-template-columns:repeat(6,24px); gap:4px; z-index:30; box-shadow:0 10px 28px rgba(0,0,0,.55);}
.npt-palette.open{display:grid;}
.npt-swatch{width:24px; height:24px; border-radius:5px; border:1px solid rgba(255,255,255,.12); cursor:pointer; transition:transform .1s;}
.npt-swatch:hover{transform:scale(1.2);}
.np-editor{flex:1; min-height:80px; background:var(--card); border:1px solid var(--line); color:var(--txt); border-radius:12px; padding:14px; font-size:14px; line-height:1.7; outline:none; overflow-y:auto; word-break:break-word; font-family:inherit;}
.np-editor:focus{border-color:var(--accent-d);}
.np-editor:empty::before{content:attr(data-placeholder); color:var(--sub); pointer-events:none; display:block; white-space:pre-wrap;}
.resizer-h{height:6px; margin:4px -20px; background:var(--line); cursor:ns-resize; transition:background .15s; flex:0 0 6px;}
.resizer-h:hover,.resizer-h.dragging{background:var(--accent-d);}

/* ===== 우측: 상세 ===== */
.right{flex:1; overflow-y:auto; padding:26px 30px;}
.placeholder{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--sub); gap:10px;}
.placeholder .big{font-size:46px; opacity:.4;}
.detail{max-width:none;}
.d-head{display:flex; align-items:center; gap:12px; margin-bottom:4px;}
/* 게임 목록 접기/펼치기 */
.vgToggle{display:flex; align-items:center; gap:7px; margin:10px 0 8px; padding:8px 11px; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:9px;
  font-size:12.5px; font-weight:700; color:var(--sub); user-select:none;}
.vgToggle:hover{border-color:#3a4450; color:var(--txt);}
.vgToggle .vgArrow{font-size:11px;}
.vgToggle .vgCnt{margin-left:auto; font-weight:800; color:var(--accent);}
.vgameWrap.hide,.vodWrap.hide{display:none;}

/* 방송 토글을 날짜 옆으로 (한 줄 통으로 차지하던 공간 절약) */
.d-head .tog{flex:0 0 auto; margin-left:12px; padding:6px 14px; font-size:13px; border-radius:9px;}
/* 날짜와 방송 토글 사이 빈 공간에 그날 총 방송시간 */
.d-head .d-total{margin-left:auto; font-size:13px; font-weight:700; color:var(--accent); background:rgba(0,255,163,.08);
  border:1px solid rgba(0,255,163,.25); border-radius:9px; padding:5px 12px; white-space:nowrap;}
.vmeta .vnext{color:var(--amber,#ffc35c); font-weight:700; margin-left:4px;}
.d-head .tog .dot{width:7px; height:7px;}
.d-date{font-size:26px; font-weight:800;}
.d-sub{font-size:13px; color:var(--sub); margin-bottom:20px;}

.liveToggle{display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:15px 16px; margin-bottom:16px;}
.liveToggle .t1{font-weight:700; font-size:15px;}
.liveToggle .t2{font-size:12px; color:var(--sub); margin-top:2px;}
.switch{margin-left:auto; width:52px; height:30px; border-radius:20px; background:var(--line); position:relative; transition:.2s; cursor:pointer; flex:0 0 52px;}
.switch.on{background:var(--accent);}
.switch.amber.on{background:var(--amber);}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; transition:.2s;}
.switch.on::after{left:25px;}

.togrow{display:flex; gap:9px; margin-bottom:16px;}
.tog{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--card); border:1.5px solid var(--line); border-radius:12px; padding:13px 6px; cursor:pointer; font-weight:700; font-size:15px; color:var(--sub); user-select:none;}
.tog:hover{border-color:#3a4450;}
.tog .dot{width:9px; height:9px; border-radius:50%; background:#3a4450; transition:.15s;}
.tog.on{color:var(--txt);}
.tog.live.on{border-color:var(--accent-d); background:rgba(0,255,163,.08);} .tog.live.on .dot{background:var(--accent);}
.tog.sub.on{border-color:#7a5e1a; background:var(--amber-bg);} .tog.sub.on .dot{background:var(--amber);}
.tog.var.on{border-color:#5e4aa0; background:rgba(122,92,255,.1);} .tog.var.on .dot{background:var(--pro);}

.vodbox{background:rgba(0,255,163,.06); border:1px solid var(--accent-d); border-radius:12px; padding:12px 15px; margin-bottom:16px; font-size:14px;}
.vodbox .vt{font-weight:700; margin-bottom:3px; display:block; color:inherit; text-decoration:none;}
.vodbox a.vt:hover{color:var(--accent); text-decoration:underline; cursor:pointer;}
.vodbox .vmeta{color:var(--sub); font-size:12px;}

/* 커스텀 콘텐츠 */
.miniadd{margin-left:auto; background:var(--card2); border:1px solid var(--line); color:var(--accent); border-radius:8px; padding:4px 11px; font-size:12px; font-weight:700; cursor:pointer;}
.miniadd:hover{background:var(--line);}
.game.custom{border-left-color:var(--pro);}
.game.custom .cicon{width:64px; height:64px; flex:0 0 64px; border-radius:12px; background:rgba(122,92,255,.15); display:flex; align-items:center; justify-content:center; font-size:30px;}
/* 게임 박스아트는 대개 세로형이라 정사각 64px에 넣으면 얼굴이나 로고가 잘린다.
   포스터일 때만 세로로 더 키워서(전체 카드도 그만큼 커짐) 안 잘리게 한다. */
.game.custom .cicon.cicon-game{width:76px; height:100px; flex:0 0 76px; object-fit:cover; background:var(--card2);}
/* 콘텐츠 카드는 gmid(챔피언 표시용 가운데 칸)를 안 쓰므로, 정보 칸이 남는 폭을 채우게 한다.
   안 그러면 제목/설명 옆에 큰 빈 공간이 생기고 등급 버튼만 멀리 오른쪽에 떠 있게 된다. */
.game.custom .ginfo{flex:1 1 auto; max-width:none;}
.game.custom .gmid{flex:0 0 auto;}
.vidbody{flex:1; display:flex; gap:9px; min-height:0;}
.monthcol{flex:0 0 50px; display:flex; flex-direction:column; gap:5px; overflow-y:auto;}
.monthtab{padding:9px 2px; border-radius:8px; background:var(--card2); border:1px solid var(--line); color:var(--sub); font-size:12px; font-weight:700; cursor:pointer; text-align:center; white-space:nowrap;}
.monthtab:hover{border-color:var(--sub);}
.monthtab.on{background:rgba(0,255,163,.13); border-color:var(--accent-d); color:var(--accent);}
.vidmain{flex:1; display:flex; flex-direction:column; gap:8px; min-width:0;}
.vidbar2{position:relative; display:flex; gap:8px; margin-bottom:0;}
.vidname{flex:1; background:var(--card2); border:1px solid var(--line); color:var(--txt); border-radius:9px; padding:8px 10px; font-size:13px; min-width:0;}
.vidname:focus{outline:none; border-color:var(--pro);}
.vn-lbl{flex:1; font-size:13px; font-weight:600; color:var(--txt); padding:4px 6px; border-radius:7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:default; border:1px solid transparent; transition:border-color .15s, background .15s;}
.vn-lbl:hover{border-color:var(--line); background:rgba(255,255,255,.04);}
.vn-lbl::after{content:" ✏"; font-size:9px; opacity:0; transition:opacity .2s;}
.vn-lbl:hover::after{opacity:.4;}
.vidsw{flex:0 0 40px; background:var(--card2); border:1px solid var(--line); color:var(--sub); border-radius:9px; cursor:pointer; font-size:13px;}
.vidsw:hover{background:var(--line); color:var(--txt);}
.vdd-list{position:absolute; top:calc(100% + 5px); left:0; right:0; background:#1c2128; border:1px solid var(--line); border-radius:11px; padding:5px; z-index:30; max-height:210px; overflow-y:auto; display:none; box-shadow:0 10px 30px rgba(0,0,0,.55);}
.vdd-list.open{display:block;}
.vdd-item{padding:9px 11px; border-radius:8px; font-size:13px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--txt);}
.vdd-item:hover{background:#252b34;}
.vdd-item.on{background:rgba(0,255,163,.13); color:var(--accent); font-weight:700;}
.vdd-item .cnt{color:var(--sub); font-size:12px; font-weight:600;}
.vdd-item.on .cnt{color:var(--accent-d);}
.vdd-empty{padding:11px; color:var(--sub); font-size:12px; text-align:center;}
.clip.custom{border-left-color:var(--pro);} .clip .cicon-sm{font-size:16px;}

/* 종합게임 */
.vgameWrap{margin:0 0 16px;}
.vgame{display:flex; align-items:center; gap:11px; background:var(--card); border:1px solid var(--line);
  border-left:4px solid var(--sub); border-radius:12px; padding:9px 13px; margin-bottom:8px;}
.vgame img{width:34px; height:45px; object-fit:cover; border-radius:6px; flex:0 0 34px; background:var(--card2);}
.vgame .vgi{flex:1;}
.vgame .vgn{font-weight:700; font-size:15px;}
.vgame .vgt{font-size:11px; color:var(--sub); margin-top:2px;}
.vgame .del{color:var(--warn); background:none; border:none; font-size:17px; cursor:pointer; padding:2px 5px;}
.vgadd{display:flex; gap:9px; margin-top:8px;}
.vgadd input{flex:1; background:var(--card2); border:1px solid var(--line); color:var(--txt); border-radius:11px; padding:11px; font-size:14px;}
.vgadd button{flex:0 0 64px; background:var(--card2); border:1px solid var(--line); color:var(--txt); border-radius:11px; font-size:14px; font-weight:700; cursor:pointer;}
.vgadd button:hover{background:var(--line);}

/* 라이브 표시 */
.livedot{margin-left:10px; display:none; align-items:center; gap:6px; font-size:12px; font-weight:800; color:#ff4d4d;}
.livedot.on{display:inline-flex;}
.livedot .d{width:9px; height:9px; border-radius:50%; background:#ff3b3b; box-shadow:0 0 0 0 rgba(255,59,59,.6); animation:pulse 1.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,59,59,.55);}70%{box-shadow:0 0 0 7px rgba(255,59,59,0);}100%{box-shadow:0 0 0 0 rgba(255,59,59,0);}}

.sectit{font-size:14px; font-weight:700; color:var(--sub); margin:18px 2px 11px; display:flex; align-items:center;}
.sectit .cnt{margin-left:auto; color:var(--accent); font-size:13px;}

/* ===== 롤 전적 카드 ===== */
.game{background:var(--card); border:1px solid var(--line); border-left:4px solid var(--sub);
  border-radius:12px; padding:11px 14px; margin-bottom:9px;}
.game.win{border-left-color:var(--blue);} .game.lose{border-left-color:var(--warn);}
.game .row1{display:flex; align-items:center; gap:14px;}
.game .gimg{width:64px; height:64px; border-radius:12px; flex:0 0 64px; object-fit:cover; background:var(--card2);}
.game .ginfo{flex:0 0 auto; min-width:0; max-width:235px;}
.game .gmid{flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:6px; align-content:center; justify-content:center;}
.game .gtop{font-size:17px; display:flex; align-items:center; gap:9px;} .game .gtop b{font-weight:700;}
.game .gq{font-size:11px; color:var(--sub); background:var(--bg); padding:3px 8px; border-radius:6px;}
.game .gwl{font-size:14px; font-weight:800;}
.game.win .gwl{color:var(--blue);} .game.lose .gwl{color:var(--warn);}
.game .gsub{font-size:13px; color:var(--sub); margin-top:6px;}
.game .gsub b{color:#d7dde4; font-weight:700;}
/* AI-Score 뱃지 */
.aibadge{position:relative; flex:0 0 46px; width:46px; height:46px; text-align:center; align-self:center;}
.aibadge .ailabel{position:absolute; top:-14px; left:0; right:0; font-size:9px; color:var(--sub); white-space:nowrap;}
.aibadge .air-rank-lbl{position:absolute; bottom:-14px; left:0; right:0; font-size:10px; font-weight:700; color:var(--sub); white-space:nowrap;}
.aibox{font-size:23px; font-weight:800; color:#fff; border-radius:9px; padding:6px 8px; line-height:1; box-shadow:inset 0 1px 0 rgba(255,255,255,.22);}
.game .aibadge .aibox{width:46px; height:46px; padding:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; font-size:20px; border-radius:11px; margin:0 auto;}
.aibox.verygood{background:#F0A93C;}
.aibox.good{background:#4FC4A0;}
.aibox.bad{background:#E06C6C;}
.aibox.verybad{background:#CC5A5A;}
.air-crown{font-size:11px; line-height:1; margin-bottom:-1px;}
.air-score{font-size:18px; font-weight:800; line-height:1.1;}
.airank-sub{font-size:10px; color:var(--sub); font-weight:600; text-align:center; margin-top:2px;}
.clip-lbl{cursor:default; border-radius:4px;}
.clip-lbl:hover{background:rgba(255,255,255,.07); text-decoration:underline dotted rgba(255,255,255,.3);}
.gf-list>.ph{margin:auto; text-align:center; padding:16px 8px;}
.bvdiv{cursor:col-resize !important;}
.bvdiv:hover::before{background:var(--pro); width:3px;}
.pf-toggle{margin-left:auto; font-size:10px; font-weight:600; color:var(--sub); display:flex; align-items:center; gap:3px; cursor:pointer;}
.pf-toggle input{accent-color:var(--pro); width:12px; height:12px; cursor:pointer;}
.pf-pros{display:flex; flex-wrap:wrap; gap:3px; min-width:0;}
.pf-mychamp{flex:1; min-width:0; font-size:11px; font-weight:700; color:var(--txt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pf-tag{display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:600; padding:1px 6px 1px 2px; border-radius:6px; white-space:nowrap;}
.pf-tag .pf-nchamp{width:14px; height:14px; border-radius:3px; flex:0 0 14px;}
.pf-tag b{font-weight:800; opacity:.8;}
.pf-tag.pf-pro{background:rgba(74,144,255,.16); color:#8fb8ff;}
.pf-tag.pf-streamer{background:rgba(224,108,108,.16); color:#ff9b9b;}
.pf-tag.is-ally{outline:1px dashed rgba(255,255,255,.18);}
.sht-orig{flex:0 0 auto; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:700;}
.sht-ttl{flex:1; min-width:0; font-size:11px; background:transparent; border:none; border-bottom:1px solid var(--line); border-radius:0; color:var(--txt); padding:2px 4px; height:22px; margin:0 4px; transition:border-color .15s, background .15s; outline:none;}
.sht-ttl::placeholder{color:var(--sub); opacity:.5; font-size:10px;}
.sht-ttl:hover{background:rgba(255,255,255,.04);}
.sht-ttl:focus{border-bottom-color:var(--pro); background:rgba(122,92,255,.08);}
.clip{align-items:center;}
/* 동반 P/S 칩 */
.notables{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; padding-left:55px;}
.chip{display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:3px 9px 3px 4px; border-radius:7px; background:var(--card2); border:1px solid var(--line);}
.chip .cimg{width:20px; height:20px; border-radius:50%; object-fit:cover; background:var(--bg); margin-left:-1px;}
.chip .mk{font-weight:800; font-size:10px; padding:1px 4px; border-radius:4px; color:#fff;}
.chip .mk.P{background:var(--pro);} .chip .mk.S{background:var(--strm);}
.chip .team{font-size:10px; color:var(--gold); font-weight:700;}
.chip .sd{font-size:10px; padding:0 4px; border-radius:4px;}
.chip .sd.ally{color:#9cc0ff; background:rgba(74,143,255,.12);}
.chip .sd.enemy{color:#ffa0b2; background:rgba(255,94,126,.12);}

.game{cursor:pointer;}
.game:hover{border-color:#3a4450;}
.gfoot{display:flex; align-items:center; gap:10px; margin-top:9px;}
.gfoot .notables{margin-top:0; flex:1; padding-left:0;}
.editmark{margin-left:auto; flex:0 0 auto; background:var(--card2); border:1px solid var(--line); color:var(--sub); border-radius:8px; padding:5px 12px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;}
.editmark:hover{border-color:var(--sub);}
.editmark.on{background:rgba(0,255,163,.15); border-color:var(--accent-d); color:var(--accent);}
.addvid{flex:0 0 auto; background:var(--card2); border:1px solid var(--line); color:var(--sub); border-radius:8px; padding:5px 12px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; margin-right:7px;}
.addvid:hover{border-color:var(--pro); color:#c9b3ff;}
.addvid.on{background:rgba(122,92,255,.18); border-color:var(--pro); color:#c9b3ff;}
.game.win:not(.edited){background-color:#161c26; background-image:linear-gradient(100deg, rgba(74,143,255,.13), rgba(74,143,255,.02) 60%);}
.game.lose:not(.edited){background-color:#241820; background-image:linear-gradient(100deg, rgba(255,94,126,.12), rgba(255,94,126,.02) 60%);}
.game.custom:not(.edited){background-color:#1b1730; background-image:linear-gradient(100deg, rgba(122,92,255,.13), rgba(122,92,255,.02) 60%);}
.game.edited{background:#0d0f13 !important;}
.game.edited .gimg,.game.edited .cicon,.game.edited .ginfo,.game.edited .gmid,.game.edited .aibadge{filter:grayscale(.95) opacity(.5);}
.game{position:relative;}
.gedit{flex:0 0 auto; align-self:center; margin-left:12px; background:var(--card2); border:1px solid var(--line); color:var(--sub); border-radius:8px; padding:8px 12px; font-size:13px; font-weight:700; cursor:pointer;}
.gedit:hover{border-color:var(--sub);}
.gedit.on{background:rgba(0,255,163,.15); border-color:var(--accent-d); color:var(--accent);}
/* 등급 버튼 */
.grade-wrap{position:relative; flex:0 0 auto; align-self:center; margin-left:-5px;}
.grade-btn{width:46px; height:46px; border-radius:11px; border:1.5px solid var(--line); background:var(--card2); color:var(--sub); font-size:19px; font-weight:800; cursor:pointer; line-height:1;}
.grade-btn:hover{border-color:var(--sub);}
.grade-btn .gl{font-size:10px; font-weight:600;}
.grade-btn.g-S{border-color:#e5484d; color:#ff5a5f; background:rgba(229,72,77,.15);}
.grade-btn.g-A{border-color:#f0883c; color:#f0883c; background:rgba(240,136,60,.15);}
.grade-btn.g-B{border-color:#f2c91d; color:#f2c91d; background:rgba(242,201,29,.15);}
.grade-btn.g-C{border-color:#3fb950; color:#52c463; background:rgba(63,185,80,.15);}
.grade-btn.g-D{border-color:#4a90ff; color:#4a90ff; background:rgba(74,144,255,.15);}
.grade-btn.g-F{border-color:#5a6270; color:#9aa1ad; background:rgba(120,128,140,.15);}
.grade-btn.g-plus{border-color:#b15cff; color:#c98aff; background:rgba(177,92,255,.16);}
.grade-pop{position:absolute; top:calc(100% + 6px); right:0; background:#1c2128; border:1px solid var(--line); border-radius:11px; padding:6px; display:none; gap:5px; z-index:25; box-shadow:0 10px 28px rgba(0,0,0,.55);}
.grade-pop.open{display:flex;}
.gopt{width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:8px; font-weight:800; font-size:15px; cursor:pointer; background:var(--card2); border:1px solid transparent;}
.gopt:hover{background:#2a313b;}
.gopt.g-S{color:#ff5a5f;} .gopt.g-A{color:#f0883c;} .gopt.g-B{color:#f2c91d;} .gopt.g-C{color:#52c463;} .gopt.g-D{color:#4a90ff;} .gopt.g-F{color:#9aa1ad;} .gopt.g-plus{color:#c98aff;} .gopt.clear{color:var(--sub);}
.clip .cg{font-size:13px; font-weight:800; min-width:14px; text-align:center;}
.clip .cg.g-S{color:#ff5a5f;} .clip .cg.g-A{color:#f0883c;} .clip .cg.g-B{color:#f2c91d;} .clip .cg.g-C{color:#52c463;} .clip .cg.g-D{color:#4a90ff;} .clip .cg.g-F{color:#9aa1ad;} .clip .cg.g-plus{color:#c98aff;}
/* 커스텀 이동/수정 버튼 */
.movebtn{flex:0 0 auto; background:var(--card2); border:1px solid var(--line); color:var(--sub); border-radius:7px; width:30px; height:30px; font-size:12px; cursor:pointer;}
.movebtn:hover{background:var(--line); color:var(--txt);}
.cedit-title,.cedit-desc{background:var(--card2); border:1px solid var(--pro); color:var(--txt); border-radius:8px; padding:8px 10px; font-size:14px; font-family:inherit;}
.cedit-desc{display:block; width:100%; min-height:60px; resize:vertical; line-height:1.6;}
.custom-desc{color:var(--sub); font-size:12px; margin-top:3px; white-space:pre-wrap; word-break:break-all;}
.vidbadge{display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:700; color:#c9b3ff; background:rgba(122,92,255,.15); border:1px solid rgba(122,92,255,.4); border-radius:7px; padding:3px 9px; margin-right:6px;}
.gcomment{display:flex; align-items:center; gap:8px; margin-top:10px;}
.gcomment .gcm-ico{font-size:14px; opacity:.65; flex:0 0 auto;}
.gcm-input{flex:1; background:var(--bg); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:8px 11px; font-size:13px;}
.gcm-input:focus{outline:none; border-color:var(--accent-d);}
.gcm-input::placeholder{color:var(--sub);}

/* ===== 콘텐츠 인라인 편집 폼 (공용 .cm-* 클래스) ===== */
.cm-label{font-size:12px; color:var(--sub); font-weight:600; margin-bottom:6px;}
.cm-input{width:100%; box-sizing:border-box; background:var(--card2); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:11px 14px; font-size:14px; font-family:inherit;}
.cm-input:focus{outline:none; border-color:var(--accent-d);}
.cm-input::placeholder{color:var(--sub);}
.cm-textarea{width:100%; box-sizing:border-box; min-height:70px; background:var(--card2); border:1px solid var(--line);
  color:var(--txt); border-radius:10px; padding:11px 14px; font-size:14px; font-family:inherit;
  line-height:1.7; resize:vertical;}
.cm-textarea:focus{outline:none; border-color:var(--accent-d);}
.cm-textarea::placeholder{color:var(--sub);}

/* ===== 스코어보드 모달 ===== */
#matchOv .sheet{width:880px; max-width:96vw; padding:0; overflow:hidden;}
.sbhead{display:flex; align-items:center; gap:16px; padding:18px 22px;}
.sbhead.win{background:linear-gradient(90deg,#16345e,#11213a);} .sbhead.lose{background:linear-gradient(90deg,#5a2230,#3a1922);}
.sbhead .hc{position:relative; flex:0 0 auto;}
.sbhead .hc img{width:56px; height:56px; border-radius:11px;}
.sbhead .hc .lv{position:absolute; bottom:-3px; right:-3px; background:#000; color:#fff; font-size:11px; font-weight:700; border-radius:9px; padding:0 5px;}
.sbhead .hmid{display:flex; flex-direction:column; gap:2px;}
.sbhead .hres{font-size:18px; font-weight:800;} .sbhead.win .hres{color:#7db0ff;} .sbhead.lose .hres{color:#ff8fa3;}
.sbhead .hsub{font-size:12px; color:#c9d2dc;}
.sbhead .hkda{font-size:20px; font-weight:800;} .sbhead .hkda small{font-size:13px; color:#c9d2dc; font-weight:600;}
.sbhead .haibox{margin-left:auto; flex:0 0 46px; width:46px; text-align:center;}
.sbhead .haibox .aibox{width:46px; height:46px; padding:0; display:flex; align-items:center; justify-content:center; font-size:20px; border-radius:11px; margin:0 auto;}
.sbhead .closeX{background:rgba(0,0,0,.3); border:none; color:#fff; width:34px; height:34px; border-radius:9px; font-size:18px; cursor:pointer;}
.sbbody{padding:14px 18px 20px; max-height:70vh; overflow-y:auto;}
.sbteam{margin-bottom:14px;}
.sbtitle{font-size:14px; font-weight:800; margin:6px 2px 8px; display:flex; gap:8px; align-items:center;}
.sbtitle .tg{font-size:11px; color:#fff; padding:2px 9px; border-radius:6px;}
.sbtitle .tg.win{background:#2f6fd0;} .sbtitle .tg.lose{background:#c0455a;}
.sbcolhead, .sbrow{display:grid; grid-template-columns:68px 160px 52px 80px 110px 54px 180px; gap:8px; align-items:center;}
.sbcolhead{padding:0 10px 6px; font-size:11px; color:var(--sub); font-weight:600;}
.sbcolhead span{text-align:center;} .sbcolhead span:nth-child(2){text-align:left;}
.sbrow{padding:7px 10px; border-radius:9px; background:var(--card2); margin-bottom:5px;}
.sbrow.me{background:#1b2940; outline:1px solid #3a5f9e;}
.sbc{display:flex; align-items:center; gap:5px;}
.sbc .ci{position:relative;} .sbc .ci img{width:38px; height:38px; border-radius:8px;}
.sbc .ci .lv{position:absolute; bottom:-2px; right:-2px; background:#000; color:#fff; font-size:9px; border-radius:7px; padding:0 3px;}
.sbc .sp{display:flex; flex-direction:column; gap:2px;} .sbc .sp img{width:17px; height:17px; border-radius:4px;}
.sbn{min-width:0; display:flex; flex-direction:column; justify-content:center;}
.sbn .sbn-top{display:flex; align-items:center; gap:3px; flex-wrap:nowrap;}
.sbn b{font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:90px;}
.sbn .mk{font-weight:800; font-size:9px; padding:1px 4px; border-radius:4px; color:#fff; flex:0 0 auto;}
.sbn .mk.P{background:var(--pro);} .sbn .mk.S{background:var(--strm);}
.sbn .team{font-size:9px; color:var(--gold); font-weight:700; flex:0 0 auto;}
.sbn .sbtier{font-size:10px; font-weight:800; padding:1px 5px; border-radius:5px; flex:0 0 auto; line-height:1.4;}
.sbn .sbtier.t-C{background:#2a5bd7; color:#fff;}
.sbn .sbtier.t-GM{background:#b59240; color:#fff;}
.sbn .sbtier.t-M{background:#9b59b6; color:#fff;}
.sbn .sbtier.t-GC{background:#e84393; color:#fff;}
.sbn .sbtier.t-CH{background:#e8a534; color:#111;}
.sbn .sbtier.t-D{background:#4a8fff; color:#fff;}
.sbn .sbtier.t-P{background:#00c9b1; color:#111;}
.sbn .sbtier.t-G{background:#e8c634; color:#111;}
.sbn .sbtier.t-S{background:#a0a8b0; color:#111;}
.sbai{text-align:center;}
.sbai .aibox{width:36px; height:36px; padding:0; display:flex; align-items:center; justify-content:center; font-size:14px; border-radius:8px; margin:0 auto;}
.sbai .sbr{font-size:10px; color:var(--sub); display:block; margin-top:2px;}
.sbkda{text-align:center; font-size:13px;} .sbkda b{font-weight:700;} .sbkda span{display:block; font-size:11px; color:var(--sub);}
.sbdmg{font-size:11px;} .sbdmg .dbar{height:7px; background:#2a3038; border-radius:4px; overflow:hidden; margin-bottom:3px;} .sbdmg .dbar i{display:block; height:100%; background:#e0686d;} .sbrow.win .sbdmg .dbar i{background:#5a8fd8;}
.sbcs{text-align:center; font-size:12px;} .sbcs b{font-weight:700;} .sbcs span{display:block; font-size:10px; color:var(--sub);}
.sbit{display:flex; gap:2px;} .sbit img{width:22px; height:22px; border-radius:4px;} .sbit .e{width:22px; height:22px; border-radius:4px; background:#23282f;}

/* ===== 편집점 ===== */
.edit{display:flex; align-items:center; gap:11px; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:11px 13px; margin-bottom:8px;}
.edit .chk{width:24px; height:24px; border-radius:7px; border:2px solid var(--sub); flex:0 0 24px; cursor:pointer; display:flex;align-items:center;justify-content:center; font-weight:900;}
.edit .chk.on{background:var(--accent); border-color:var(--accent); color:#04150e;}
.edit .etime{font-weight:700; font-size:14px; color:var(--accent); min-width:48px;}
.edit .ememo{flex:1; font-size:14px; word-break:break-all;}
.edit.done .ememo{text-decoration:line-through; color:var(--sub);}
.edit .del{color:var(--warn); background:none; border:none; font-size:17px; cursor:pointer; padding:2px 5px;}
.addrow{display:flex; gap:9px; margin-top:8px;}
.addrow input{background:var(--card2); border:1px solid var(--line); color:var(--txt); border-radius:11px; padding:12px; font-size:14px;}
.addrow input.t{flex:0 0 100px; text-align:center;}
.addrow input.m{flex:1;}
.addrow button{flex:0 0 54px; background:var(--accent); color:#04150e; border:none; border-radius:11px; font-size:22px; font-weight:800; cursor:pointer;}
.empty-edit{color:var(--sub); font-size:13px; padding:10px 2px;}

/* ===== 모달 공통 ===== */
.ov{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:50; display:none; align-items:center; justify-content:center;}
.ov.on{display:flex;}
.sheet{background:var(--card); width:440px; max-width:92vw; border-radius:18px; padding:22px; max-height:88vh; overflow-y:auto;}
.sh-title{font-size:19px; font-weight:800; margin-bottom:3px;}
.sh-sub{font-size:13px; color:var(--sub); margin-bottom:16px;}
.field{margin-bottom:13px;}
.field label{display:block; font-size:12px; color:var(--sub); margin-bottom:6px;}
.field input,.field select{width:100%; background:var(--card2); border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:11px; font-size:14px;}
.log{font-size:12px; color:var(--sub); background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:11px; margin-top:12px; max-height:150px; overflow-y:auto; white-space:pre-wrap; line-height:1.55;}
.mbtns{display:flex; gap:9px; margin-top:16px;}
.mbtns button{border:none; border-radius:11px; padding:13px; font-size:14px; font-weight:700; cursor:pointer;}
.mbtns .go{flex:1; background:var(--accent); color:#04150e;}
.mbtns .cc{flex:0 0 84px; background:var(--card2); color:var(--txt); border:1px solid var(--line);}
.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%); background:var(--card2); border:1px solid var(--accent-d); color:var(--txt); padding:12px 20px; border-radius:24px; font-size:14px; z-index:99; opacity:0; transition:.25s; pointer-events:none;}
.toast.on{opacity:1;}

/* 역할 배지 */
.role-badge{font-size:10px; font-weight:700; color:var(--warn); background:rgba(255,100,50,.12); border:1px solid rgba(255,100,50,.3); border-radius:8px; padding:2px 7px; margin-left:6px; display:none;}
.role-badge:not(:empty){display:inline-block;}

/* ===== 뷰어(일반) 모드 =====
   허용: 읽기·검색·등급 수정·콘텐츠 추가
   차단: 영상/쇼츠 관리, 콘텐츠 삭제, 순서이동, 가져오기, 설정, 메모 편집 */
body.viewer .addvid,
body.viewer #shtDel,
body.viewer #vidNew,
body.viewer #vidDel,
body.viewer .gedit,
body.viewer .movebtn,
body.viewer .cctl,
body.viewer .editmark,
body.viewer #openImport,
body.viewer #openSettings { pointer-events:none !important; opacity:.28; }
body.viewer .vidDrop,
body.viewer #shtDrop,
body.viewer .np-editor { pointer-events:none; }
body.viewer .vn-lbl { pointer-events:none; cursor:default; }
body.viewer .vn-lbl::after { display:none; }

/* ===================================================================
   모바일 (세로 스택 레이아웃)
   데스크톱은 [달력 | 상세 | 메모] 3단 가로 배치인데, 폭이 좁으면 각 칸이
   너무 눌려서 글자가 다 깨진다. 좁은 화면에서는 위아래로 쌓고,
   드래그용 리사이저는 의미가 없으니 숨긴다.
   =================================================================== */
@media (max-width: 860px){
  html,body{height:auto;}
  .app{flex-direction:column; height:auto; min-height:100vh; overflow:visible;}

  /* 가로폭 고정을 전부 풀어 한 줄 전체를 쓰게 한다 */
  .left,.right,.notepad{width:auto; flex:0 0 auto; max-width:100%;}
  .left{padding:14px 14px 4px;}
  .right{padding:16px 14px; overflow-y:visible;}
  .notepad{overflow:visible;}

  /* 세로 스택에서는 드래그 리사이저가 쓸모없다 */
  .resizer,#resizer-lf,#resizer-ns{display:none;}

  /* 높이 고정을 풀어 내용만큼 늘어나게 */
  .bnav-wrap{flex:0 0 auto; height:auto; border-top:1px solid var(--line);}
  #bnav-left,#bnav-right{flex:0 0 auto; height:auto;}
  .bpanel{overflow:visible; min-height:0;}
  .notice-list,.todo-list,.gf-list,.drv-list{max-height:none; overflow-y:visible;}
  .np-body{padding:16px 14px;}

  /* 상단 버튼 줄: 좁으면 줄바꿈 */
  .toolbtns{flex-wrap:wrap;}
  .toolbtns .tbtn.primary{flex:1 1 100%;}
  .trackbar{flex:1 1 auto;}

  /* 달력 칸이 눌리지 않게 */
  .grid{column-gap:4px;}
  .cell{min-height:46px; border-radius:8px;}
  .cell .dnum{font-size:13px;}
  .cell .airtime{font-size:9.5px;}
  .cell.lckday::after{font-size:7.5px;}

  /* 날짜 상세 헤더: 날짜 / 토글이 한 줄에 안 들어가면 접어서 */
  .d-head{flex-wrap:wrap; gap:8px;}
  .d-head .d-total{margin-left:0;}
  .d-head .tog{margin-left:0;}

  /* 다시보기·게임 카드: 가로로 늘어선 요소들이 넘치지 않도록 */
  .game .row1{flex-wrap:wrap; gap:10px;}
  .game .ginfo{max-width:none; flex:1 1 160px;}
  .gfoot{flex-wrap:wrap; gap:7px;}
  .gcm-input{flex:1 1 100%; min-width:0;}

  /* 편집할 것 / 탐색 / 드라이브 탭 줄 */
  .bptit{flex-wrap:wrap; gap:4px 10px;}
  .btab{margin-right:6px;}

  /* 모달은 화면을 거의 꽉 채우게 */
  .sheet{width:100%; max-width:96vw; padding:18px; max-height:90vh;}
  .cs-search{flex-wrap:wrap;}
  .cs-plat{flex:0 0 auto;}
  .cs-search .cm-input{flex:1 1 140px;}
}

/* 아주 좁은 화면(폰 세로) */
@media (max-width: 480px){
  .left{padding:12px 10px 4px;}
  .right{padding:14px 10px;}
  .brand h1{font-size:17px;}
  .cell{min-height:40px;}
  .cell .dnum{font-size:12px;}
  .cell .airtime{font-size:9px; letter-spacing:-.3px;}
  .weekrow span{font-size:11px;}
  .d-date{font-size:20px;}
  .vodbox .vt{font-size:13px;}
  .vmeta{font-size:11px;}
  /* 콘텐츠 카드 아이콘이 화면 폭을 너무 먹지 않게 */
  .game.custom .cicon{width:52px; height:52px; flex:0 0 52px; font-size:24px;}
  .game.custom .cicon.cicon-game{width:60px; height:80px; flex:0 0 60px;}
}