/* 영상 상세 페이지 글래스 디자인
   되돌리려면 watch.html 의 watch-glass.css <link> 한 줄을 지우면 돼요 (화면 구조는 그대로 두고 평평한 디자인으로 보여요) */

/* 1) 배경: 홈과 같은 파스텔 그라데이션 */
body.pg-watch{background-color:#f2f3f7;background-image:
   radial-gradient(48vw 40vw at 6% 18%,rgba(0,113,227,.17),transparent 70%),
   radial-gradient(44vw 38vw at 96% 12%,rgba(175,82,222,.14),transparent 70%),
   radial-gradient(52vw 44vw at 22% 92%,rgba(90,200,250,.15),transparent 70%),
   radial-gradient(46vw 40vw at 92% 86%,rgba(255,159,10,.10),transparent 70%);
  background-attachment:fixed}

/* 6) 헤더: 더 투명한 유리 + 아래 1px 반투명 선 */
.pg-watch .nav{background:rgba(251,251,253,.6);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(29,29,31,.08)}

/* 2) 영상 뒤 앰비언트 글로우 (썸네일을 크게 흐려서 은은하게) */
.pg-watch .pwrap{position:relative;isolation:isolate}
.pg-watch .pwrap::before{content:"";position:absolute;inset:-40px;z-index:-1;border-radius:40px;pointer-events:none;
  background:var(--thumb,none) center/cover no-repeat;filter:blur(70px) saturate(140%);opacity:.3}
.pg-watch .pwrap>.card{box-shadow:0 18px 40px -18px rgba(20,25,50,.35)}

/* 3) 영상 정보: 유리 카드 하나로 */
.glass,.pg-watch .vinfo,.pg-watch .plp{
  background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.8);border-radius:22px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 10px 30px -14px rgba(30,40,80,.18)}
.pg-watch .vinfo{position:relative;margin-top:24px;padding:24px 28px 26px}
.pg-watch .vinfo h1{font-size:28px;line-height:1.3;margin:0 0 12px;word-break:keep-all}
.pg-watch .vinfo:has(#adm-edit) h1{padding-right:84px}
.pg-watch .vmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pg-watch .vmeta .dot{color:#9ca3af}
.pg-watch .vmeta .chip{margin:0;padding:5px 12px;font-size:13px;background:rgba(255,255,255,.65);border:1px solid rgba(29,29,31,.12)}
.pg-watch .vmeta .chip:hover{border-color:#0071e3;color:#0071e3}
.pg-watch .vdesc{color:#374151;white-space:pre-wrap;margin:16px 0 0;padding-top:16px;border-top:1px solid rgba(29,29,31,.07);line-height:1.7}
.pg-watch .d{color:#4b5563}
/* 관리자 '수정'은 카드 오른쪽 위 작은 테두리 버튼 */
.pg-watch #adm-slot{position:absolute;top:18px;right:18px}
.pg-watch #adm-edit{margin:0;padding:5px 12px;font-size:13px;min-height:0;background:transparent;border:1px solid rgba(29,29,31,.18);color:#4b5563}
.pg-watch #adm-edit:hover{border-color:#0071e3;color:#0071e3}

/* 4) 오른쪽 '같은 Playlist' 유리 패널 (PC에서는 스크롤해도 따라와요) */
.pg-watch .plp{padding:20px 16px 12px}
.pg-watch .plp h2{font-size:19px;margin:0 4px 14px}
.pg-watch .plp .plh2{font-size:15px;color:#4b5563;margin:18px 4px 10px;padding-top:14px;border-top:1px solid rgba(29,29,31,.07)}
.pg-watch .pli{display:flex;gap:12px;padding:10px;margin-bottom:6px;border-radius:14px;background:transparent;transition:background .2s}
.pg-watch a.pli:hover{background:rgba(255,255,255,.7)}
.pg-watch .pli .plt{width:120px;flex:none;border-radius:10px;overflow:hidden}
.pg-watch .pli h3{font-size:15px;line-height:1.4;margin:0 0 4px}
.pg-watch .pli .lockb{top:16px;left:16px;right:auto;width:26px;height:26px}
.pg-watch .pli.now{background:rgba(0,113,227,.08);border:1px solid rgba(0,113,227,.22)}
.pg-watch .nowb{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#0071e3;margin-bottom:4px}
.pg-watch .nowb::before{content:"";width:6px;height:6px;border-radius:50%;background:#0071e3}
@media(min-width:861px){.pg-watch aside .plp{position:sticky;top:76px;max-height:calc(100vh - 100px);overflow:auto}}

/* 5) 첨부 파일·댓글은 불투명하게, 버튼 원칙 통일 */
.pg-watch .atr{background:#fff}
.pg-watch .atb [data-att=dl]{background:#0071e3;color:#fff;border:1px solid #0071e3}
.pg-watch .atb [data-att=dl]:hover{background:#0062c4}
.pg-watch .atb [data-att=open]{background:#fff;color:#0071e3;border:1px solid #0071e3}
.pg-watch .atb [data-att=open]:hover{background:rgba(0,113,227,.06)}
.pg-watch #comments .card{background:#fff}

/* 모바일: 글로우를 더 약하게, 화면 밖으로 넘치지 않게 */
@media(max-width:860px){
  .pg-watch .pwrap::before{inset:-12px 0;opacity:.2;filter:blur(56px) saturate(140%)}
  .pg-watch .vinfo{padding:20px 20px 22px}.pg-watch .vinfo h1{font-size:23px}
  .pg-watch aside{margin-top:8px}}
@media(prefers-reduced-transparency:reduce){.pg-watch .vinfo,.pg-watch .plp{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* 댓글 입력창: 연한 테두리 + 클릭하면 파란 포커스 링 */
.pg-watch #comments .in{border:1px solid #e5e7eb;transition:border-color .15s,box-shadow .15s}
.pg-watch #comments .in:focus,.pg-watch #comments .in:focus-visible{outline:none;border-color:#0071e3;box-shadow:0 0 0 3px rgba(0,113,227,.18)}
@media(max-width:860px){.pg-watch #adm-edit{min-height:38px;padding:6px 14px}}

/* 영상 정보 카드 맨 위 '← 홈으로' (글 상세의 '← 목록으로'와 같은 모양) — 관리자 '수정'은 같은 줄 오른쪽 */
.pg-watch .pback{display:inline-block;margin:2px 0 18px;font-size:13.5px;font-weight:600;color:#4b5563;text-decoration:none}
.pg-watch .pback:hover{color:#0071e3}
.pg-watch .vinfo:has(#adm-edit) h1{padding-right:0}