: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{flex:0 0 25%; min-width:180px; 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;}
.srv-dot{display:inline-flex; align-items:center; gap:5px; margin-left:10px; font-size:11px; font-weight:700; color:var(--sub); cursor:default;}
.srv-dot::before{content:""; width:9px; height:9px; border-radius:50%; background:#555; transition:background .2s, box-shadow .2s;}
.srv-dot.on{color:#2fbf8f;}
.srv-dot.on::before{background:#2fbf8f; box-shadow:0 0 7px #2fbf8f;}
.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);}
@keyframes lvpulse{0%,100%{opacity:1}50%{opacity:.45}}
/* 상세 라이브 박스 */
.livebox{margin:10px 0 4px; border:1px solid #ff3b50; border-radius:12px; padding:10px; background:rgba(255,59,80,.07);}
.livebox-head{display:flex; align-items:center; gap:9px; margin-bottom:9px; flex-wrap:wrap;}
.livebox-head .cell-live{position:static; animation:lvpulse 1.4s ease-in-out infinite;}
.livebox-head .lv-title{font-size:14px; font-weight:700; color:var(--txt); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.livebox-head .lv-open{font-size:12px; color:var(--sub); text-decoration:none; flex:0 0 auto;}
.livebox-head .lv-open:hover{color:#ff7080;}
.liveplayer{position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.liveplayer .lv-video{width:100%; height:100%; background:#000;}
.lv-play{background:#ff3b50; border:none; color:#fff; font-size:14px; font-weight:800; border-radius:10px; padding:11px 20px; cursor:pointer;}
.lv-play:hover{background:#ff5567;}
.lv-loading{color:var(--sub); font-size:13px; text-align:center; padding:14px;}
.lv-loading a{color:#ff7080;}
/* 우상단 LIVE 클릭 가능 표시 */
.livedot.clickable{cursor:pointer;}
.livedot.clickable:hover{filter:brightness(1.25);}
/* 달력 '위' 라이브 스테이지 (달력은 아래로, 좌측 패널 스크롤) */
.livestage{padding:4px 0 12px; margin-bottom:10px; border-bottom:1px solid var(--line);}
.livestage .livebox-head{margin-bottom:9px;}
/* 라이브 켜졌을 때 좌측 패널을 스크롤 컨테이너로 전환 (flex→block: 자식들 자연 높이로 쌓이고 넘치면 스크롤) */
.left.live-on{display:block; overflow-y:auto;}
.left.live-on .vidbin{min-height:340px;}
.left.live-on .vidDrop{min-height:180px;}
.lv-close{margin-left:auto; background:var(--card2); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:4px 10px; font-size:12px; font-weight:700; cursor:pointer; flex:0 0 auto;}
.lv-close:hover{border-color:#ff3b50; color:#ff7080;}
/* 라이브 화질 선택 */
.lv-quality{background:var(--card2); color:var(--txt); border:1px solid var(--line); border-radius:7px; font-size:11px; font-weight:700; padding:3px 7px; cursor:pointer; flex:0 0 auto;}
.lv-quality:hover{border-color:var(--accent-d);}
/* 게임 추적 바 */
.trackbar{position:relative; display:flex; align-items:center; gap:7px; margin:8px 0 2px;}
.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-date .trk-yr{font-size:15px; font-weight:800; color:var(--txt); font-style:normal; margin-right:6px;}
.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;}
.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 34%; min-width:220px; 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{margin:0; flex:0 0 5px; height:5px; background:var(--line); cursor:ns-resize; transition:background .15s;}
#resizer-ns:hover,#resizer-ns.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);}
.bpanel{flex:1; display:flex; flex-direction:column; padding:8px 8px 10px; gap:5px; min-height:0; overflow-y:auto;}
.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;}
/* 탐색 패널 탭 (탐색 / 프로전) */
.bp-tabs{gap:3px; padding-bottom:4px;}
.bp-tab{font-size:15px; font-weight:800; color:var(--sub); background:none; border:none; cursor:pointer; padding:3px 9px; border-radius:8px; display:flex; align-items:center; gap:4px; line-height:1;}
.bp-tab .bpemo{font-size:1em;}
.bp-tab:hover{color:var(--txt);}
.bp-tab.on{color:var(--txt); background:var(--card2);}
.find-pane{flex:1; display:flex; flex-direction:column; min-height:0; gap:5px;}
/* 탐색기 */
.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;}
.gf-dur{font-size:10px; color:var(--sub); font-weight:600; flex:0 0 auto;}
.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:70px; 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-split{flex:1; display:flex; flex-direction:column; gap:12px; min-height:0;}
.np-sec{flex:1; display:flex; flex-direction:column; min-height:0;}
.np-seclabel{font-size:12px; font-weight:700; color:var(--sub); margin-bottom:5px; flex:0 0 auto;}
.np-seclabel.notice{color:#f0a93c;}
.np-secsub{font-size:10px; font-weight:500; opacity:.7;}
.np-notice{background:rgba(240,169,60,.05); border-color:rgba(240,169,60,.3);}
.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; position:relative; overflow:hidden; padding:0;}
#rightScroll{height:100%; overflow-y:auto;}   /* 가운데 패널 전체 단일 스크롤 → CCTV 여러개 다 보임 */
#rightBody{padding:26px 30px;}
/* CCTV 상단 인라인 바 (가운데 패널 최상단, 상시 표시) */
#cctvBar{border-bottom:2px solid var(--line); background:var(--card2);}
.cctv-bar-head{display:flex; align-items:stretch; gap:8px; padding:16px 16px 14px; background:var(--card2);}
.cctv-bar-title{font-size:13px; font-weight:800; color:var(--accent); flex:0 0 auto; letter-spacing:.5px; display:flex; align-items:center;}
.cctv-plat-sel{background:var(--card); color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:0 10px; font-size:13px; font-weight:700; cursor:pointer; flex:0 0 auto; height:38px; box-sizing:border-box;}
.cctv-plat-sel:focus{outline:none; border-color:var(--accent-d);}
.cctv-input{flex:1; min-width:0; background:var(--card); border:1px solid var(--line); color:var(--txt); border-radius:8px; padding:0 12px; font-size:13px; height:38px; box-sizing:border-box;}
.cctv-input:focus{outline:none; border-color:var(--accent-d);}
.cctv-add{background:var(--accent); color:#06281d; border:none; border-radius:8px; padding:0 16px; font-weight:800; cursor:pointer; flex:0 0 auto; font-size:13px; height:38px; box-sizing:border-box;}
.cctv-add:hover{filter:brightness(1.06);}
/* 세로(아래로) 스택 — 각 영상 가운데 패널 폭에 꽉 차게 */
.cctv-grid{display:flex; flex-direction:column; gap:10px; padding:0 14px 14px;}
.cctv-empty-inline{color:var(--sub); font-size:12px; padding:4px 16px 16px; line-height:1.7;}
.cctv-cell{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column;}
.cctv-cellhead{display:flex; align-items:center; gap:7px; padding:7px 10px;}
.cctv-plat{font-size:10px; font-weight:800; padding:1px 6px; border-radius:5px; flex:0 0 auto;}
.cctv-plat.soop{background:#1762ff; color:#fff;}
.cctv-plat.chzzk{background:#00ffa3; color:#06281d;}
.cctv-plat.twitch{background:#9146ff; color:#fff;}
.cctv-plat.youtube{background:#ff0000; color:#fff;}
.cctv-name{font-size:12px; font-weight:700; color:var(--txt); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cctv-open{color:var(--sub); text-decoration:none; flex:0 0 auto; font-weight:800; padding:0 2px;}
.cctv-open:hover{color:var(--accent);}
.cctv-del{background:none; border:none; color:var(--sub); cursor:pointer; font-size:13px; flex:0 0 auto; padding:0 2px;}
.cctv-del:hover{color:var(--warn);}
.cctv-hq{background:none; border:1px solid var(--line); color:var(--sub); cursor:pointer; font-size:10px; font-weight:700; border-radius:5px; padding:2px 6px; flex:0 0 auto;}
.cctv-hq:hover{border-color:var(--accent); color:var(--accent);}
.cctv-hq.on{background:var(--accent); color:#06281d; border-color:var(--accent);}
.cctv-player{position:relative; width:100%; aspect-ratio:16/9; background:#000; display:flex; align-items:center; justify-content:center;}
.cctv-player iframe, .cctv-player .cctv-video{width:100%; height:100%; border:0; background:#000; display:block;}
.cctv-load{color:var(--sub); font-size:12px; text-align:center; padding:10px;}
.cctv-load a{color:#4a8fff;}
.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:baseline; gap:12px; margin-bottom:4px;}
.d-date{font-size:26px; font-weight:800;}
.d-sub{font-size:13px; color:var(--sub); margin-bottom:20px;}
.d-sub.live{color:#ff5567; font-weight:700;}

.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;}
.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; width:30px; flex:0 0 30px; display:inline-flex; align-items:center; justify-content:center;}  /* 전적 img(30px)와 동일 슬롯 → 커스텀·전적 클립 정렬 일치 */

/* 종합게임 */
.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);}

/* 라이브 표시 */
/* 헤더 LIVE — 항상 표시. 평소 흑백, 라이브면 빨간 불 켜짐 */
.livedot{margin-left:10px; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:#7a7f87; filter:grayscale(1); opacity:.55; transition:.2s;}
.livedot .d{width:9px; height:9px; border-radius:50%; background:#7a7f87;}
.livedot.on{color:#ff4d4d; filter:none; opacity:1;}
.livedot.on .d{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.is-ally{background:rgba(74,144,255,.18); color:#9fc2ff;}
.pf-tag.is-enemy{background:rgba(232,80,80,.18); color:#ff9b9b;}
.pf-tag .pf-mk{font-size:8px; font-weight:800; padding:0 3px; border-radius:3px; line-height:1.5; flex:0 0 auto;}
.pf-tag .pf-mk-p{background:#9146ff; color:#fff;}
.pf-tag .pf-mk-s{background:#e8a534; color:#111;}
.sht-orig{flex:0 0 84px; width:84px; 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;}
.gdel{flex:0 0 auto; background:none; border:1px solid var(--line); color:var(--sub); border-radius:8px; padding:5px 9px; font-size:12px; cursor:pointer;}
.gdel:hover{border-color:var(--warn); color:var(--warn);}
.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:#6b7280; color:#9aa0a8; background:rgba(130,140,150,.16);}
.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:#9aa0a8;} .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:#9aa0a8;} .clip .cg.g-plus{color:#c98aff;}
.cg.g-F{color:#9aa0a8;}
/* 커스텀 이동/수정 버튼 */
.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);}

/* ===== 커스텀 컨텐츠 편집 모달 ===== */
#customOv .sheet{width:480px; max-width:96vw; padding:28px 28px 24px;}
#customOv .cm-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
#customOv .cm-head h3{font-size:18px; font-weight:800; margin:0;}
#customOv .cm-label{font-size:12px; color:var(--sub); font-weight:600; margin-bottom:6px;}
#customOv .cm-input{width:100%; background:var(--card2); border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:11px 14px; font-size:15px; font-family:inherit; margin-bottom:14px;}
#customOv .cm-input:focus{outline:none; border-color:var(--accent-d);}
#customOv .cm-textarea{width:100%; min-height:120px; 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; margin-bottom:20px;}
#customOv .cm-textarea:focus{outline:none; border-color:var(--accent-d);}
#customOv .cm-textarea::placeholder{color:var(--sub);}
#customOv .cm-foot{display:flex; justify-content:flex-end; gap:10px;}
#customOv .cm-save{background:var(--accent); color:#04150e; border:none; border-radius:10px; padding:10px 22px; font-size:14px; font-weight:800; cursor:pointer;}
#customOv .cm-cancel{background:var(--card2); border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:10px 18px; font-size:14px; cursor:pointer;}

/* ===== 스코어보드 모달 ===== */
#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 .haibox .airank{font-size:11px; font-weight:700; color:var(--sub); text-align:center; margin-top:3px; white-space:nowrap;}
.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;}
.sbtabs{display:flex; gap:6px; padding:0 18px; border-bottom:1px solid var(--line);}
.sbtab{background:none; border:none; border-bottom:2px solid transparent; color:var(--sub); font-size:13px; font-weight:700; padding:9px 12px; cursor:pointer; margin-bottom:-1px;}
.sbtab:hover{color:var(--txt);}
.sbtab.on{color:var(--txt); border-bottom-color:var(--pro);}
.sbchart-wrap{padding:14px 18px 22px;}
.sbpl-teams{display:flex; gap:16px; margin-bottom:10px;}
.sbpl-team{flex:1; min-width:0;}
.sbpl-tlabel{font-size:11px; font-weight:800; margin-bottom:5px;}
.sbpl-tlabel.blue{color:#6fa8ff;} .sbpl-tlabel.red{color:#ff8f8f;}
.sbpl-row{display:flex; gap:5px; flex-wrap:wrap;}
.sbpl{position:relative; width:46px; height:46px; padding:0; border:2px solid var(--line); border-radius:10px; background:var(--card2); cursor:pointer; overflow:hidden; transition:border-color .12s, transform .12s;}
.sbpl:hover{border-color:var(--sub);}
.sbpl.on{border-color:var(--pro); transform:translateY(-2px);}
.sbpl[disabled]{opacity:.4; cursor:default;}
.sbpl img{width:100%; height:100%; object-fit:cover; display:block;}
.sbpl-me{position:absolute; top:0; left:0; right:0; font-size:8px; font-weight:800; color:#fff; background:rgba(122,92,255,.85); text-align:center; line-height:1.3;}
.sbpl-sc{position:absolute; bottom:0; right:0; font-size:10px; font-weight:800; color:#fff; padding:0 3px; border-radius:5px 0 0 0; line-height:1.3;}
.sbpl-sc.verygood{background:#F0A93C;} .sbpl-sc.good{background:#4FC4A0;} .sbpl-sc.bad{background:#E06C6C;} .sbpl-sc.verybad{background:#CC5A5A;}
.sbchart-legend{display:flex; gap:16px; font-size:11px; font-weight:600; margin-bottom:6px;}
.sbchart-legend .lg-me{color:#2fbf8f;} .sbchart-legend .lg-avg{color:#a07bff;}
.sbchart{width:100%; height:auto; display:block;}
.sbchart-empty{padding:48px 18px; text-align:center; color:var(--sub); font-size:13px; line-height:1.6;}
.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;}
/* 티어 뱃지 색 — DEEPLOL 기준 */
.sbn .sbtier.t-CH{background:#efb52a; color:#111;}   /* 챌린저 C = 골드/노랑 */
.sbn .sbtier.t-GM{background:#d8334a; color:#fff;}   /* 그랜드마스터 GM = 빨강 */
.sbn .sbtier.t-M{background:#9b59b6; color:#fff;}    /* 마스터 M = 보라 */
.sbn .sbtier.t-D{background:#4a8fff; color:#fff;}    /* 다이아 D = 파랑 */
.sbn .sbtier.t-E{background:#1fa97a; color:#fff;}    /* 에메랄드 E = 초록 */
.sbn .sbtier.t-P{background:#00c9b1; color:#111;}    /* 플래 P = 청록 */
.sbn .sbtier.t-G{background:#e8c634; color:#111;}    /* 골드 G */
.sbn .sbtier.t-S{background:#a0a8b0; color:#111;}    /* 실버 S */
.sbn .sbtier.t-B{background:#9a6a44; color:#fff;}    /* 브론즈 B */
.sbn .sbtier.t-I{background:#6a6a6a; color:#fff;}    /* 아이언 I */
.sbn .sbtier.t-U{background:#6b7178; color:#fff;}    /* 언랭 U = 회색 */
.sbn .sbtier.t-C{background:#2a5bd7; color:#fff;}    /* (예비 기본) */
.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 .addvid.shtbtn { pointer-events:auto !important; opacity:1 !important; }  /* 쇼츠 추가는 허용 */
body.viewer .vidDrop,
body.viewer #shtDrop { pointer-events:none; }
/* 0729(순수 보기전용): 메모·공지 편집은 막되 스크롤은 허용 → pointer-events 유지, contenteditable=false(JS).
   동작 없는 서식 툴바는 숨김 */
body.viewer:not(.memo) .np-toolbar { display:none; }
body.viewer:not(.memo) .np-editor { cursor:default; }
/* 메모 전용(soninuki): 등급·컨텐츠·한줄평·쇼츠 차단, 메모만 허용 */
body.memo .grade-btn,
body.memo #addContent,
body.memo #addContentBtn,
body.memo .miniadd,
body.memo .gcm-input,
body.memo .addvid.shtbtn { pointer-events:none !important; opacity:.35 !important; }
body.memo .addrow { display:none; }
/* 파카(soninuki): 메모장은 사용 가능 (나머지 수정은 불가) */
body.memo .np-editor { pointer-events:auto !important; }
body.viewer .vn-lbl { pointer-events:none; cursor:default; }
body.viewer .vn-lbl::after { display:none; }