*{margin:0;padding:0;box-sizing:border-box;}
  /* ── 커스텀 커서 (마우스 장치에서만) ─────────────────────────────────────────── */
  /* CSS cursor SVG: OS 레벨 렌더링 → 지연 없음. DOM 가상 커서는 THREE.js 메인스레드에 막혀 느림.
     기본: 흰 4각 별 / 포인터: 베이비핑크 4각 별(더 큼). */
  @media (pointer:fine){
    *{cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><path d='M9,1 L10.1,7.9 L17,9 L10.1,10.1 L9,17 L7.9,10.1 L1,9 L7.9,7.9Z' fill='white' opacity='.78'/></svg>") 9 9,auto;}
    a,button,[role=button],select,[tabindex]:not([tabindex="-1"]),[onclick],
    .tg,.tg-unit,.sr-item,.sr-credit-item,.fav-btn,.tab-btn,.mob-top-btn,
    .dh-btn,.tt-nav-btn,.conn-back-btn,.sw{
      cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer!important;
    }
    input[type=text],input[type=search],input[type=email],input[type=password],textarea{cursor:text!important;}
    .hscroll-drag{cursor:grab!important;}
    .hscroll-drag.drag-scrolling{cursor:grabbing!important;}
  }
  /* ── K-POP UNIVERSE 디자인 토큰 (2026-09-03 신설, 리뷰 반영) ────────────────────────────
     ⚠️ 앞으로 새 UI는 값 직접 쓰지 말고 이 변수만 쓸 것. 기존 값은 배치로 점진 이관 중(1a=서브픽셀
     제거·토큰 정의, 1b=5단계 통합). 목표: 표면 2종(카드/확인모달) + 타입 5단계 + 간격 6단계. */
  :root{
    /* 타입 5단계 + 라벨(대문자·트래킹 금지, 11px 하한 — 우주 CSS2D 라벨만 예외) */
    --fz-meta:11px; --fz-body:13px; --fz-title:15px; --fz-lg:20px; --fz-xl:28px;
    --fz-label:11px; --lh-body:1.5; --lh-title:1.25; --lh-ui:1;
    /* 간격 6단계 (섹션 사이는 --sp-5 고정 권장) */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
    /* 라운드 3종 + 원형 */
    --r-sm:8px; --r-md:14px; --r-lg:24px;
    /* 흰색 반투명 4단계 (bg / border / hover / text) */
    --w-bg:rgba(255,255,255,0.06); --w-border:rgba(255,255,255,0.10);
    --w-hover:rgba(255,255,255,0.16); --w-text:rgba(255,255,255,0.64);
    /* 액센트(연한 블루 — 기존 그대로) */
    --accent:#8ab0ff;
  }
  /* 더블탭 시 브라우저 네이티브 확대가 실수로 걸리는 걸 막음(2026-08-13, 사용자 제보) — pinch-zoom은
     허용값이라 3D 지도의 OrbitControls 핀치 확대에는 영향 없음, manipulation은 더블탭줌만 끈다. */
  html{background:#060612;-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation;}
  body{
    background:radial-gradient(ellipse at 50% 38%,
      #12112a 0%,
      #0d0c20 30%,
      #09091a 60%,
      #060612 100%
    );
    overflow:hidden;transition:background 0.9s ease;
    /* 폰트 미지정 요소(라이트박스 제목·uplist·with칩·리액션 등)가 브라우저 기본 세리프(Times)로 숫자·영문을
       렌더하던 문제 수정(2026-09-06 디자인리뷰 #2). body에서 한 번 지정하면 inherit 체인이 전부 해결된다. */
    font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
  }

  canvas{display:block;}
  /* 첫 인상 = 에디토리얼 볼드(Pudding 레퍼런스, 2026-08-31). 묵직한 900 헤드라인 + 리드인 한 줄,
     'UNIVERSE'만 민트 액센트. 연출은 절제 — 진입 시 fade-up 한 번만(연속 애니 없음). */
  /* ── 부팅 중 UI 크롬 숨김(2026-09-02) ─────────────────────────
     첫 화면엔 로딩 문구만 보여야 한다. 예전엔 veil(z-index 96)이 화면을 통째로 덮어 탭바(40)·
     줌 컨트롤(50)·상단 헤더를 자연히 가렸는데, 리빌을 clip-path로 바꾸며 veil을 없애자 캔버스만
     클립돼 나머지 UI가 로딩 문구와 함께 노출됐다(사용자 제보).
     visibility까지 끄는 이유: opacity만 0으로 두면 레이아웃·히트영역은 남아 로딩 중 잘못 눌린다.
     transition에 visibility를 같이 실어야 페이드인이 끝난 뒤가 아니라 시작과 함께 보인다. */
  html.booting #tabbar,
  html.booting #zoom-ctrl,
  html.booting #mob-top-bar,
  html.booting #desktop-header{
    opacity:0;visibility:hidden;pointer-events:none;
  }
  /* 발자국 바는 저장된 발자국이 있으면 JS(_fpUpdateVis)가 로드 즉시 인라인 display:flex로 켜므로,
     부팅 숨김엔 !important가 필요하다(안 그러면 우주 뜨기 전부터 🐾가 떠버림, 2026-09-03 제보). */
  html.booting #footprint-bar,
  html.chrome-wait #footprint-bar{display:none!important;}
  /* 탭바·줌 컨트롤은 booting이 풀린 뒤(클립 시작)에도 chrome-wait로 계속 숨겨둔다 — 이 둘은 각자
     transition을 스크롤숨김(#tabbar line~129)·패널이동(#zoom-ctrl line~2508)에 이미 쓰고 있어서 위
     booting 규칙의 리빌 트랜지션이 덮여버린다(그래서 클립 시작과 함께 뚝 떠버렸음, 2026-09-02 제보).
     그래서 이 둘만 JS(_revealChrome)로 화면 확장에 맞춰 페이드인한다. */
  html.chrome-wait #tabbar,
  html.chrome-wait #zoom-ctrl{
    opacity:0;visibility:hidden;pointer-events:none;
  }
  /* ⚠️ 기존 transition을 덮어쓰지 않도록 각각 이어 붙인다 — #tabbar는 숨김/복귀(transform+opacity),
     #zoom-ctrl은 패널 열릴 때 좌우 이동(left)에 이미 트랜지션을 쓰고 있다. 통째로 재선언하면
     그 애니메이션이 조용히 사라진다.
     ⚠️ 딜레이 .5s가 핵심 — 크롬 페이드(.55s)가 클립(1.2s)보다 짧아서, 딜레이 없이 같이 시작하면
     **크롬이 먼저 다 나타나고 우주가 뒤늦게 열린다**(실측 550ms 시점에 줌·상단바만 떠 있었다).
     클립 중반부터 시작해 거의 같이 끝나야 "열리면서 같이 나타나는" 것으로 보인다. */
  #mob-top-bar,#desktop-header{
    transition:opacity .55s ease .5s,visibility 0s linear .5s;
  }
  #tabbar{
    transition:transform .32s cubic-bezier(0.32,0.72,0,1),opacity .55s ease .5s,
               visibility 0s linear .5s;
  }
  html.booting #tabbar{transition:none;}
  #zoom-ctrl{
    transition:left 0.32s cubic-bezier(0.4,0,0.2,1),opacity .55s ease .5s,visibility 0s linear .5s;
  }
  #loading{
    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    z-index:98;
    font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
    display:flex;flex-direction:column;gap:3px;align-items:flex-start;white-space:nowrap;
    /* 폴백 폰트(Apple SD Gothic Neo)로 먼저 그렸다가 Pretendard가 늦게 로드되면 텍스트 폭이 바뀌며
       중앙정렬(translate -50%) 박스가 좌우로 "한 칸" 튀는 밀림이 있었음(2026-09-02 제보). 폰트가
       준비될 때까지 숨겨뒀다가(.ld-ready) 그때 띄워 스왑 리플로우를 화면 밖에서 끝낸다. .ld-ready는
       body 인라인 스크립트가 document.fonts.load 완료(또는 700ms 폴백) 후 붙인다. */
    visibility:hidden;
  }
  #loading.ld-ready{visibility:visible;animation:ld-in .7s cubic-bezier(.2,.7,.2,1) backwards;}
  /* 리빌 확장 발광 링(IMAX 조리개) — JS 매 프레임 radial-gradient에서 CSS keyframe으로 교체(2026-10-10).
     mix-blend screen + will-change:transform으로 compositor 레이어 승격 — Three.js rAF와 겹쳐 메인 스레드를
     잡던 `style.background` 매 프레임 갱신이 없어진다. duration은 JS가 --rc-dur 로 주입. */
  #loading-ring{position:fixed;inset:0;z-index:97;pointer-events:none;mix-blend-mode:screen;overflow:hidden;}
  #loading-ring::after{
    content:'';display:block;position:absolute;border-radius:50%;
    top:50%;left:50%;transform:translate(-50%,-50%);
    width:0;height:0;opacity:0;
    box-shadow:0 0 55px 28px rgba(150,190,255,0.22);
    will-change:width,height,opacity;
  }
  #loading-ring.ring-go::after{
    animation:ring-burst var(--rc-dur,700ms) cubic-bezier(.3,.1,.55,.4) both;
  }
  @keyframes ring-burst{
    0%{width:0;height:0;opacity:0;}
    12%{opacity:1;}
    65%{opacity:0.2;}
    100%{width:220vmax;height:220vmax;opacity:0;}
  }
  #loading .ld-l1{
    font-size:clamp(13px,3.2vw,16px);font-weight:600;letter-spacing:0.005em;
    color:rgba(188,203,240,0.6);padding-left:0.08em;
  }
  #loading .ld-l2{
    font-size:clamp(28px,9vw,52px);font-weight:900;letter-spacing:-0.022em;line-height:1.0;
    color:#e9eeff;text-shadow:0 3px 34px rgba(120,150,255,0.28);
  }
  /* 액센트는 앱 본체와 같은 페리윙클 블루로 통일(2026-09-02). 예전엔 로딩만 민트(#54e0c6)라 첫 화면과
     본편이 다른 브랜드처럼 보였다 — 민트는 로딩 밖에선 .trace-dot(실시간 흔적) 말고 안 쓰인다.
     이 값은 .uc-btn-primary의 rgba(126,156,255) 계열이고, 바로 위 .ld-l2 글로우와도 같은 색이다. */
  #loading .ld-ac{ color:#7e9cff;text-shadow:0 0 24px rgba(126,156,255,0.38); }
  @keyframes ld-in{from{opacity:0;transform:translate(-50%,-44%);}to{opacity:1;transform:translate(-50%,-50%);}}
  @keyframes loading-shimmer{0%{background-position:160% 0;}100%{background-position:-60% 0;}}
  #loading.loading-error{
    visibility:visible; /* 폰트 대기와 무관하게 에러 메시지는 즉시 노출(위 .ld-ready 게이트 우회) */
    animation:none;letter-spacing:0;white-space:normal;
    background:none;-webkit-background-clip:initial;background-clip:initial;
    color:rgba(210,222,248,0.92);-webkit-text-fill-color:rgba(210,222,248,0.92);
    display:flex;flex-direction:column;align-items:center;gap:14px;
    width:min(280px,80vw);text-align:center;line-height:1.55;font-size:14px;
  }
  #loading.loading-error .uc-btn{width:100%;flex:none;}
  /* ── Tab bar ────────────────────────────────────── */
  #tabbar{
    position:fixed;bottom:0;left:0;right:0;
    display:flex;align-items:center;justify-content:space-around;gap:0;
    background:rgba(14,18,36,0.92);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-top:0.5px solid rgba(255,255,255,0.07);
    border-radius:0;padding:9px 0 max(11px, env(safe-area-inset-bottom,0px));z-index:40;
  }
  .tab-btn{
    flex:1;background:none;border:none;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;
    color:rgba(190,205,240,0.61);
    font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
    font-size:14px;padding:5px 4px;border-radius:10px;
    transition:background .04s,color .04s,opacity .04s;
    line-height:1;overflow:hidden;white-space:nowrap;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  }
  /* 탭 라벨(2026-09-02) — 기본은 자리만 잡고 숨김(아이콘만=깔끔). 활성 탭만 노출, 첫 1~2회 방문엔 전체
     잠깐(.show-labels). visibility로 숨겨 모든 탭 높이를 같게 유지 → 아이콘 세로 정렬이 안 틀어진다. */
  /* 라벨 상시 표시(2026-09-03 리뷰 — 아이콘만으론 탭 구분 안 됨). 이미 자리를 잡고 있어(예전 visibility:hidden)
     상시로 바꿔도 탭 높이 안 변함. 11px = --fz-label. */
  .tab-label{font-size:var(--fz-label);line-height:1.1;letter-spacing:.02em;visibility:visible;opacity:.92;}
  .tab-btn.active .tab-label{opacity:1;}
  /* 랜덤 탐험 버튼(2026-09-03 — 플로팅은 발자국 바/줌바와 자꾸 겹쳐, 상단바 하트 옆으로 이동).
     별 아이콘이 살짝 눌린 듯 도드라지게만 하고 나머진 .mob-top-btn/.dh-btn 스타일을 그대로 쓴다. */
  #random-fab:active,#dh-random-btn:active{transform:scale(0.92);color:var(--accent);}
  /* 연도 링 라벨(CSS2D) — 줌아웃 스케일 게이지의 연도 숫자. 은은하게, 투명도는 JS가 zoomT로 제어(2026-09-02) */
  .year-ring-lbl{font-size:8px;font-weight:300;letter-spacing:.08em;color:rgba(150,180,235,0.42);pointer-events:none;white-space:nowrap;text-shadow:0 0 6px rgba(0,0,0,0.55);transition:opacity .35s ease;}
  .tab-btn:hover{color:rgba(210,225,255,0.85);}
  .tab-btn.active{color:rgba(225,238,255,1);text-shadow:0 0 8px rgba(200,220,255,0.5);}
  #mob-fav-btn svg path,#dh-fav-btn svg path{fill:none;transition:fill .15s;}
  #mob-fav-btn.fav-mode-on svg path,#dh-fav-btn.fav-mode-on svg path{fill:currentColor;}
  #tab-feed.feed-open{color:rgba(130,170,255,0.9);}  #tab-lang{font-size:12px;font-weight:700;letter-spacing:.1em;}
  /* 나침반 탭 첫방문 뱃지(2026-08-21, 사용자 요청) — "여기 뭔가 있다"는 신호만 은은하게 반짝이는 점 하나,
     텍스트 없음. 한 번이라도 열면 영구히 안 뜸(JS에서 localStorage로 관리). */
  #tab-feed{position:relative;}
  .tab-badge-dot{display:none;position:absolute;top:6px;right:14px;width:7px;height:7px;border-radius:50%;background:#6ea8ff;box-shadow:0 0 6px rgba(110,168,255,0.85);pointer-events:none;}
  #tab-feed.show-badge .tab-badge-dot{display:block;animation:tab-badge-pulse 1.8s ease-in-out infinite;}
  @keyframes tab-badge-pulse{0%,100%{opacity:0.5;transform:scale(0.85);}50%{opacity:1;transform:scale(1.2);}}
  .tab-sep{display:none;}
  /* ── Tabbar search mode (mobile) ────────────────── */
  /* 탭 아이콘↔검색창 전환 시 컨테이너 모양과 내용물이 같은 속도로 접히고 펼쳐지도록,
     display 하드 스왑 대신 flex-basis/opacity를 함께 트랜지션해서 자연스럽게 이어지게 함 */
  /* 카드 시트(#mob-sheet 등)의 bottom 트랜지션(.32s cubic-bezier(0.32,0.72,0,1))과 반드시 같은 속도/곡선을
     써야 함 — 예전엔 탭바가 .18s로 더 빨리 움직여서, 스크롤 올려 탭바가 다시 나타날 때 카드가 그 속도를
     못 따라가 둘 사이에 틈이 생기고 그 틈으로 우주가 비쳐 보였음(2026-08-14, 사용자 제보). */
  #tabbar{transition:transform .32s cubic-bezier(0.32,0.72,0,1),opacity .32s cubic-bezier(0.32,0.72,0,1);}
  #tabbar.tab-hidden{transform:translateY(110%);opacity:0;pointer-events:none;}
  #tabbar.search-mode{bottom:4px;left:28px;right:28px;border-radius:16px;border-top-color:transparent;padding:4px 10px;justify-content:flex-start;box-shadow:0 4px 24px rgba(0,0,0,0.45);}
  #tabbar.search-mode .tab-btn{flex:0 0 0;opacity:0;padding-left:0;padding-right:0;pointer-events:none;}
  #tab-sb-icon{display:flex;flex:0 0 0;overflow:hidden;opacity:0;color:rgba(190,205,240,0.71);align-items:center;padding-right:0;transition:opacity .1s;}
  #tab-sb-input{display:block;flex:0 0 0;width:0;min-width:0;overflow:hidden;opacity:0;background:none;border:none;color:#c8d8f0;
    font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;font-size:14px;
    outline:none;padding:4px 0;letter-spacing:.03em;
    transition:opacity .1s;
    -webkit-text-size-adjust:none;}
  #tab-sb-input::placeholder{color:rgba(140,160,200,0.38);}
  #tab-sb-clear{display:flex;flex:0 0 0;overflow:hidden;opacity:0;background:none;border:none;
    color:rgba(190,205,240,0.61);font-size:16px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:4px 0;line-height:1;align-items:center;
    transition:opacity .1s;}
  #tabbar.search-mode #tab-sb-icon{flex:0 0 auto;opacity:1;padding-right:8px;}
  #tabbar.search-mode #tab-sb-input{flex:1 1 auto;width:auto;opacity:1;}
  #tabbar.search-mode #tab-sb-clear{flex:0 0 auto;opacity:1;padding:4px 6px;}
  /* ── Mobile search results ───────────────────────── */
  #mob-sr{
    position:fixed;left:28px;right:28px;
    bottom:var(--sheet-bottom,73px);
    background:rgba(14,18,36,0.96);border-radius:16px 16px 0 0;
    border:0.5px solid rgba(255,255,255,0.09);border-bottom:none;
    backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
    box-shadow:0 -4px 32px rgba(0,0,0,0.45);
    z-index:68;max-height:180px;overflow-y:auto;overflow-x:hidden;display:none;
    box-sizing:border-box;padding:4px 0;
  }
  #mob-sr.open{display:block;}
  #tabbar.search-mode.has-sr{
    border-radius:0 0 16px 16px;
    border-top:0.5px solid rgba(255,255,255,0.08);
  }
  /* ── Desktop header ──────────────────────────────── */
  /* ── Mobile top bar ─────────────────────────────── */
  #mob-top-bar{display:none;}
  @media(max-width:768px){
    #mob-top-bar{
      position:fixed;top:0;left:0;right:0;
      display:flex;align-items:center;justify-content:space-between;
      padding:calc(14px + env(safe-area-inset-top,0px)) 18px 15px;
      background:linear-gradient(to bottom,rgba(9,9,26,0.38) 0%,rgba(9,9,26,0.0) 80%);
      backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1);
      -webkit-mask-image:linear-gradient(to bottom,black 35%,rgba(0,0,0,0.5) 65%,transparent 100%);
      mask-image:linear-gradient(to bottom,black 35%,rgba(0,0,0,0.5) 65%,transparent 100%);
      z-index:40;
    }
    #mob-top-title{
      font-size:13px;font-weight:700;letter-spacing:.06em;
      color:rgba(180,200,240,0.61);
      font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
    }
    #mob-top-title .title-u{color:#7e9cff;}
    #mob-top-right{display:flex;align-items:center;gap:6px;}
    .mob-top-btn{
      background:none;border:none;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;
      color:rgba(190,205,240,0.66);
      font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
      font-size:18px;padding:8px 10px;border-radius:10px;
      display:inline-flex;align-items:center;justify-content:center;
      transition:color .04s;line-height:1;
    }
    .mob-top-btn.active{color:rgba(225,238,255,1);}
    /* ⚙︎ 글리프는 폰트 안에서 다른 요소보다 작고 낮게 그려져(2026-08-13, 사용자 제보) 크기를
       한 단계 더 키워 하트·KO와 시각적으로 맞춘다. */
    #tab-settings{font-size:21px;}
  }
  #desktop-header{
    position:fixed;top:16px;left:0;right:0;
    display:flex;align-items:center;justify-content:flex-end;
    /* z-index:55 — #yt-lightbox(67)보다는 낮게 유지. #feed-list-overlay는 65로 올라가 데스크톱 헤더를
       덮지만 풀스크린 모달이 열려있을 때는 어차피 네비게이션이 가려지는 게 자연스러움. */
    padding:0 16px;z-index:55;pointer-events:none;
  }
  @media(max-width:768px){#desktop-header{display:none;}}
  #dh-title{
    margin-right:auto;margin-left:10px;font-size:13px;font-weight:700;letter-spacing:.06em;
    color:rgba(180,200,240,0.61);
    font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
  }
  #dh-title .title-u{color:#7e9cff;}
  /* 즐겨찾기 유도 말풍선 — 첫 즐겨찾기 전까지 탐색 버튼을 가리킨다 */
  #fav-hint-callout{
    position:fixed;top:58px;z-index:39;
    background:rgba(16,20,40,0.94);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    box-shadow:0 8px 28px rgba(0,0,0,0.52);
    border:0.5px solid rgba(140,175,255,0.22);border-radius:14px;
    padding:12px 18px;font-size:13px;font-weight:700;letter-spacing:.01em;
    color:rgba(235,242,255,0.97);white-space:nowrap;
    pointer-events:all;cursor:pointer;opacity:0;transform:translateY(-4px);
    transition:opacity .3s ease,transform .3s ease;
    display:flex;flex-direction:column;gap:3px;
  }
  #fav-hint-callout.show{opacity:1;transform:translateY(0);}
  #fav-hint-callout:hover{background:rgba(20,26,50,0.97);border-color:rgba(160,195,255,0.38);}
  #fhc-main{display:inline;font-weight:700;}
  #fhc-sub{display:block;font-size:11px;font-weight:400;color:rgba(180,200,240,0.62);margin-top:1px;letter-spacing:.01em;}
  #fhc-arrow{
    position:absolute;top:-5px;left:22px;width:9px;height:9px;
    background:rgba(16,20,40,0.94);
    border-left:0.5px solid rgba(140,175,255,0.22);border-top:0.5px solid rgba(140,175,255,0.22);
    transform:rotate(45deg);
  }
  @media(max-width:768px){#fav-hint-callout{display:none!important;}}
  /* 온보딩 팁 시퀀스 — 데스크톱: 화면 정중앙. 모바일: 탭바 위 하단 고정 */
  #ob-tips{
    position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    z-index:150;
    background:rgba(16,20,40,0.94);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:0.5px solid rgba(140,175,255,0.20);border-radius:16px;
    padding:24px 28px 20px;
    width:360px;
    box-shadow:0 12px 40px rgba(0,0,0,0.60);
    opacity:0;transition:opacity .3s ease;
  }
  #ob-tips.show{opacity:1;}
  #ob-tips-text{font-size:15px;line-height:1.65;color:rgba(235,242,255,0.92);margin:0 0 18px;}
  #ob-tips-dots{display:flex;gap:6px;margin-bottom:18px;}
  .ob-dot{width:5px;height:5px;border-radius:50%;background:rgba(140,175,255,0.22);transition:background .2s;}
  .ob-dot.active{background:rgba(140,175,255,0.78);}
  #ob-tips-cta{width:100%;background:rgba(100,140,255,0.10);border:0.5px solid rgba(100,140,255,0.22);color:rgba(200,220,255,0.85);font-size:13px;font-weight:600;padding:10px;border-radius:10px;cursor:pointer;margin-bottom:16px;transition:background .15s;text-align:center;}
  #ob-tips-cta:hover{background:rgba(100,140,255,0.20);}
  #ob-tips-btns{display:flex;justify-content:space-between;align-items:center;}
  #ob-tips-skip{background:none;border:none;color:rgba(180,200,240,0.42);font-size:12px;cursor:pointer;padding:4px 0;}
  #ob-tips-skip:hover{color:rgba(180,200,240,0.68);}
  #ob-tips-next{background:rgba(100,140,255,0.14);border:0.5px solid rgba(100,140,255,0.28);color:rgba(200,220,255,0.90);font-size:13px;font-weight:600;padding:8px 22px;border-radius:8px;cursor:pointer;transition:background .15s;}
  #ob-tips-next:hover{background:rgba(100,140,255,0.24);}
  @media(max-width:768px){
    #ob-tips{
      top:auto;left:16px;right:16px;
      bottom:calc(max(11px,env(safe-area-inset-bottom,0px)) + 60px + 12px);
      width:auto;transform:none;
      padding:18px 20px 16px;
    }
    #ob-tips-text{font-size:14px;margin-bottom:14px;}
    #ob-tips-dots{margin-bottom:14px;}
  }
  #dh-right{pointer-events:all;}
  #dh-right{
    background:rgba(18,22,40,0.82);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    box-shadow:0 4px 24px rgba(0,0,0,0.45);
    border-radius:22px;padding:4px 6px;display:flex;align-items:center;gap:2px;
  }
  .dh-btn{
    background:none;border:none;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;
    color:rgba(190,205,240,0.61);
    font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
    font-size:15px;padding:6px 12px;border-radius:16px;
    transition:background .04s,color .04s;line-height:1;
  }
  .dh-btn:hover{background:rgba(255,255,255,0.08);color:rgba(210,225,255,0.85);}
  .dh-btn.active{background:rgba(255,255,255,0.10);color:rgba(225,238,255,0.95);}
  #dh-lang-btn{font-size:10px;font-weight:700;letter-spacing:.1em;padding:6px 11px;}
  /* 핵심 내비(홈/탐색/피드/검색/프로필)와 부가 유틸(언어/하이라이트/설정)을 담백하게 구분하는 얇은 선 */
  .dh-divider{width:0.5px;align-self:stretch;margin:6px 3px;background:rgba(255,255,255,0.12);}
  /* ── Settings panel ─────────────────────────────── */
  #settings-panel{
    position:fixed;bottom:78px;right:16px;width:252px;
    background:rgba(18,22,40,0.94);
    backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
    box-shadow:0 8px 32px rgba(0,0,0,0.5);
    border-radius:16px;padding:25px 25px 16px;z-index:68;display:none;
    font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
  }
  #settings-panel.open{display:block;}
  .sp-hd{font-size:11px;font-weight:700;letter-spacing:.2em;color:rgba(130,150,205,0.56);
    text-transform:uppercase;margin-bottom:13px;}
  .sp-row{display:flex;align-items:center;justify-content:space-between;
    padding:8px 0;}
  .sp-row:last-child{border-bottom:none;padding-top:11px;}
  .sp-lbl{font-size:12px;color:#7090b8;letter-spacing:.02em;}
  .sp-tog{
    background:rgba(255,255,255,0.07);border:none;
    color:rgba(150,168,210,0.71);font-size:10px;letter-spacing:.1em;font-weight:700;
    padding:3px 10px;border-radius:8px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;transition:all .15s;
  }
  .sp-tog.on{background:rgba(160,180,255,0.18);color:rgba(200,215,255,0.95);}
  .sp-sec{padding:9px 0;}
  .sp-sec-lbl{font-size:11px;color:#7090b8;margin-bottom:6px;}
  .sp-subsec-lbl{font-size:10px;color:rgba(155,178,228,0.56);margin-top:10px;margin-bottom:3px;padding-bottom:3px;border-bottom:0.5px solid rgba(255,255,255,0.08);letter-spacing:.03em;}
  .sp-dual{position:relative;height:18px;margin-top:6px;}
  .sp-dual::before{content:'';position:absolute;top:50%;left:0;right:0;height:1.5px;
    background:rgba(255,255,255,0.13);transform:translateY(-50%);border-radius:1px;pointer-events:none;}
  .sp-dual input[type=range]{
    position:absolute;width:100%;height:100%;left:0;top:0;margin:0;padding:0;
    pointer-events:none;-webkit-appearance:none;appearance:none;background:transparent;
  }
  .sp-dual input[type=range]::-webkit-slider-runnable-track{background:transparent;}
  .sp-dual input[type=range]::-moz-range-track{background:transparent;height:0;}
  .sp-dual input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;pointer-events:all;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;
    width:11px;height:11px;border-radius:50%;background:#8899dd;border:none;
  }
  .sp-dual input[type=range]::-moz-range-thumb{
    pointer-events:all;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;
    width:11px;height:11px;border-radius:50%;background:#8899dd;border:none;
  }
  .sp-rng-vals{display:flex;justify-content:space-between;font-size:10px;color:#4a6278;margin-top:3px;}
  .sp-types{display:flex;gap:4px;margin-top:6px;}
  .sp-type{
    flex:1;padding:4px 0;font-size:11px;letter-spacing:.03em;text-align:center;
    background:rgba(255,255,255,0.05);border:none;
    color:rgba(120,140,188,0.68);border-radius:8px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;
    font-family:inherit;transition:all .15s;
  }
  .sp-type.active{background:rgba(140,162,255,0.18);color:rgba(195,210,255,0.95);}
  #sp-gens .sp-type{position:relative;}
  .sp-gen-info{position:absolute;top:1px;right:2px;font-size:8px;line-height:1;padding:2px;
    color:rgba(140,162,255,0.5);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  .sp-gen-info:hover{color:rgba(195,210,255,0.9);}
  .sp-gen-info.active{color:rgba(195,210,255,1);}
  .sp-gen-detail{display:none;margin-top:6px;padding:8px 9px;border-radius:8px;background:rgba(255,255,255,0.045);}
  .sp-gen-detail.open{display:block;}
  .sp-gen-detail-hd{font-size:10px;color:rgba(180,196,255,0.8);margin-bottom:5px;}
  .sp-gen-detail-list{font-size:10px;line-height:1.7;color:rgba(160,180,220,0.68);
    max-height:88px;overflow-y:auto;}
  .sp-gen-grp{cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;text-decoration:underline;text-decoration-color:rgba(140,162,255,0.28);text-underline-offset:2px;}
  .sp-gen-grp:hover,.sp-gen-grp:active{color:rgba(200,214,255,0.95);text-decoration-color:rgba(180,196,255,0.6);}
  .sp-gen-note{font-size:9px;line-height:1.5;color:rgba(120,140,188,0.48);margin-top:7px;}
  .sp-reset{
    background:none;border:none;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:1px 0;
    font-size:10px;letter-spacing:.10em;font-family:inherit;
    color:rgba(120,138,182,0.36);transition:color .15s;
  }
  .sp-reset:hover{color:rgba(170,188,232,0.68);}
  .sp-feedback-btn{
    width:100%;background:rgba(126,156,255,0.10);border:0.5px solid rgba(126,156,255,0.22);
    border-radius:10px;padding:9px;font-family:inherit;font-size:12px;font-weight:700;
    letter-spacing:.03em;color:rgba(195,215,255,0.85);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .15s,border-color .15s,color .15s;
  }
  .sp-feedback-btn:hover{background:rgba(126,156,255,0.18);border-color:rgba(126,156,255,0.4);color:#fff;}
  .sp-legal-links{
    display:flex;align-items:center;justify-content:center;gap:7px;
    margin:14px 0 2px;padding-top:12px;
    border-top:0.5px solid rgba(255,255,255,0.07);
    font-size:11px;letter-spacing:.02em;
  }
  .sp-legal-links a{color:rgba(120,138,182,0.5);text-decoration:none;transition:color .15s;}
  .sp-legal-links a:hover{color:rgba(170,188,232,0.8);}
  .sp-legal-sep{color:rgba(120,138,182,0.3);}
  /* ── K-pop 링크 모음 오버레이 ──────────────────────── */
  #kpop-links-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:65;display:none;align-items:center;justify-content:center;}
  #kpop-links-overlay.open{display:flex;}
  #kpop-links-panel{width:min(540px,calc(100vw - 32px));max-height:84vh;display:flex;flex-direction:column;background:rgba(13,17,34,0.97);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-radius:18px;box-shadow:0 16px 56px rgba(0,0,0,0.72);border:0.5px solid rgba(255,255,255,0.10);}
  .klp-hd{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:0.5px solid rgba(255,255,255,0.08);font-size:15px;font-weight:600;color:#e8eaf6;flex-shrink:0;}
  .klp-close{background:none;border:none;color:rgba(200,210,255,0.5);font-size:22px;line-height:1;cursor:pointer;padding:0 2px;transition:color .15s;}
  .klp-close:hover{color:#fff;}
  .klp-body{overflow-y:auto;padding:8px 0 16px;-webkit-overflow-scrolling:touch;}
  .klp-cat{padding:14px 20px 6px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(130,155,220,0.6);}
  .klp-cat:first-child{padding-top:8px;}
  .klp-links{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 4px;}
  .klp-link{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:20px;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.10);color:rgba(200,215,255,0.85);font-size:13px;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s;}
  .klp-link:hover{background:rgba(126,156,255,0.14);border-color:rgba(126,156,255,0.3);color:#fff;}
  .klp-link-ext{font-size:10px;opacity:.5;}
  .klp-favicon{width:14px;height:14px;object-fit:contain;border-radius:3px;flex-shrink:0;}
  .co-ext-link{color:rgba(130,155,220,0.6);text-decoration:none;font-size:11px;margin-left:4px;vertical-align:middle;transition:color .15s;}
  .co-ext-link:hover{color:rgba(180,200,255,0.9);}
  @media(max-width:768px){
    #kpop-links-overlay{align-items:flex-end;}
    #kpop-links-panel{width:100%;max-width:100%;max-height:88vh;border-radius:18px 18px 0 0;position:relative;}
    #kpop-links-panel::before{content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,0.2);z-index:3;pointer-events:none;}
  }
  /* ── Toggle switch ───────────────────────────────── */
  .sw{display:inline-flex;align-items:center;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;flex-shrink:0;}
  .sw input{display:none;}
  .sw-track{
    width:28px;height:16px;border-radius:8px;position:relative;
    background:rgba(255,255,255,0.09);border:none;
    transition:background .22s;
  }
  .sw input:checked+.sw-track{background:rgba(130,155,255,0.30);}
  .sw-thumb{
    position:absolute;top:2.5px;left:2.5px;
    width:9px;height:9px;border-radius:50%;
    background:rgba(148,165,218,0.48);
    transition:transform .22s,background .22s;pointer-events:none;
  }
  .sw input:checked+.sw-track .sw-thumb{
    transform:translateX(12px);background:rgba(185,202,255,0.88);
  }
  .group-label{
    font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
    font-size:11px;font-weight:300;letter-spacing:0.08em;
    pointer-events:none;user-select:none;white-space:nowrap;
    text-shadow:0 1px 4px rgba(0,0,0,0.75),0 0 8px rgba(0,0,0,0.45);
    transition:opacity 0.6s ease,color 0.4s ease,text-shadow 0.4s ease,font-weight 0.3s ease; /* 떴다 사라지는 로테이션이라 조금 더 부드럽게(2026-08-26) */
  }
  .group-label.gl-focused{
    color:rgba(255,255,255,0.96)!important;
    font-weight:500;
    font-size:12px;
    letter-spacing:0.12em;
    text-shadow:0 0 10px rgba(200,220,255,0.32),0 1px 2px rgba(0,0,0,0.75);
  }
  /* ── Cards ───────────────────────────────────── */
  #tt,#gc{
    background:rgba(16,20,36,0.68);
    backdrop-filter:blur(36px) saturate(180%);
    -webkit-backdrop-filter:blur(36px) saturate(180%);
    border-radius:16px;
    box-shadow:0 8px 32px rgba(0,0,0,0.50);
  }
  #tt{
    position:fixed;display:none;max-width:320px;
    padding:16px 28px 14px 28px;font-size:14px;line-height:1.55;
    color:#ccd8ee;z-index:61;pointer-events:all;
    font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
    transition:opacity 0.22s ease,transform 0.22s ease;
  }
  #tt.tt-enter{opacity:0;transform:translateY(6px) scale(0.97);}
  #tt.tt-exit-to-left{opacity:0;transform:translateX(-28px);pointer-events:none;}
  #tt.tt-exit-to-right{opacity:0;transform:translateX(28px);pointer-events:none;}
  #tt.tt-enter-from-right{opacity:0;transform:translateX(28px);}
  #tt.tt-enter-from-left{opacity:0;transform:translateX(-28px);}
  #ttx{position:absolute;top:9px;right:11px;font-size:15px;color:rgba(150,170,215,0.71);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;line-height:1;}
  #tt-back{position:absolute;top:-2px;left:-2px;z-index:2;padding:14px 16px;}
  #tt-bar{height:2px;width:calc(100% - 8px);margin:6px 4px 12px;}
  .tn{font-size:15px;font-weight:700;color:#d8e4f6;margin-bottom:3px;padding-right:18px;padding-left:4px;letter-spacing:-.02em;}
  .tn-subname{font-size:var(--fz-meta);font-weight:400;color:rgba(180,195,230,0.42);margin-left:6px;letter-spacing:0;vertical-align:middle;} /* 옛 활동명/실명 보조표기 — 작고 흐리게(2026-08-22) */
  #tg-row{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:1px;padding-left:4px;padding-right:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  #tg-row::-webkit-scrollbar{display:none;}
  .tg{font-size:12px;color:#aec8e8;letter-spacing:.05em;font-weight:500;text-transform:uppercase;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:color .12s;width:fit-content;white-space:nowrap;}
  .tg:hover{color:#d0e8ff;}
  .tg.tg-past{color:rgba(150,165,200,0.48);}
  .tg.tg-past:hover{color:#d0e8ff;}
  /* 프로젝트 유닛(V8·갓더비트 등) 표기 — 실제 그룹/행성은 아니라서 평소엔 .tg보다 어둡게 표시하고,
     클릭하면 이동(navigate) 대신 멤버 카드 안 영상 그리드를 유닛 관련 영상으로 필터링한다(active로 표시). */
  .tg-unit{font-size:11px;color:rgba(150,165,200,0.48);letter-spacing:.05em;font-weight:500;text-transform:uppercase;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;width:fit-content;transition:color .12s;}
  .tg-unit:hover{color:#d0e8ff;}
  .tg-unit.active{color:#d0e8ff;}
  .tg-en{font-size:11px;}
  .tg-unit.tg-en{font-size:var(--fz-meta);}
  .tg.tg-nogroup{cursor:default;}
  /* 탈퇴/과거 그룹 칩 옆에 붙는 활동 기간(예: ~2021.08). 지금은 탈퇴일만이라 종료 시점만,
     합류일 데이터가 채워지면 "2020.09~2022.03"으로 자동 확장. 클릭 불가·이름칩보다 더 흐리게. */
  .tg-period{font-size:var(--fz-meta);color:rgba(150,165,200,0.40);letter-spacing:.02em;font-weight:400;margin-left:3px;white-space:nowrap;pointer-events:none;text-transform:none;}
  .tg.tg-nogroup:hover{color:#aec8e8;}
  .tco{font-size:12px;color:#88aac8;margin-top:6px;margin-bottom:0;padding-left:0;white-space:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  #tco::-webkit-scrollbar{display:none;}
  /* 웹에서 클릭 후 드래그로 가로 스크롤되는 줄(소속사줄·영상 카테고리 탭) 공용 커서 힌트 —
     실제 드래그 동작은 _enableDragScroll()가 담당(2026-08-11, 사용자 요청). */
  .hscroll-drag{cursor:grab;}
  .hscroll-drag.drag-scrolling{cursor:grabbing;user-select:none;}
  /* 그룹/멤버 카드 상태 한 줄 — "지금 N명이 보고 있어요"와 "N명이 즐겨찾기했어요"가 한 자리에서 번갈아 표시됨 */
  .gc-status-line{display:none;overflow:hidden;height:16px;position:relative;font-size:11px;letter-spacing:.01em;margin:8px 0 5px;}
  .gc-status-line.show{display:block;}
  @keyframes status-slide-in{from{transform:translateY(110%);opacity:0;}to{transform:translateY(0);opacity:1;}}
  @keyframes status-slide-out{from{transform:translateY(0);opacity:1;}to{transform:translateY(-110%);opacity:0;}}
  .gc-status-inner{position:absolute;top:0;left:0;right:0;height:100%;display:flex;align-items:center;gap:5px;}
  .gc-status-inner.type-presence{color:rgba(255,170,150,0.85);}
  .gc-status-inner.type-favcount{color:rgba(255,150,190,0.85);text-shadow:0 0 6px rgba(255,120,170,0.3);}
  /* 흔적(익명 합산)은 앞의 둘과 달리 색 규칙이 없어서 부모 색을 그대로 물려받고 있었음 — 멤버 카드는
     #tt{color:#ccd8ee}라 멀쩡했는데 그룹 카드(#gc)는 색 지정이 없어 UA 기본 검정을 물려받아 어두운
     카드 위에서 안 보였음(2026-08-25 사용자 제보). 부모에 기대지 말고 여기서 직접 못 박는다.
     presence(코랄)·favcount(핑크)와 달리 강조색을 안 쓰는 건 의도 — 순위·경쟁이 아닌 조용한 합산이라
     멤버 카드 본문과 같은 톤(#ccd8ee)으로 두고, 분홍 점(.favcount-dot)만 시선을 끈다.
     ⚠️ "#gc에 기본 color를 주면 되지 않나"는 안 됨 — 모바일 카드 스택은 이전 카드를 cloneNode 후
     id를 지워서 배경에 남기는데(_freezeSheetBottomBeforeOverwrite), 그러면 #gc 아이디 셀렉터가
     통째로 무효화돼 얼어붙은 카드만 도로 검정이 된다. 클래스 셀렉터로 박아야 클론에서도 산다. */
  .gc-status-inner.type-traces{color:#ccd8ee;}
  .gc-status-inner.anim-in{animation:status-slide-in 0.42s cubic-bezier(0.22,0.8,0.36,1) forwards;}
  .gc-status-inner.anim-out{animation:status-slide-out 0.38s cubic-bezier(0.64,0,0.78,0.2) forwards;}
  #tt-status-line{margin:10px 0 6px;}
  #tt-status-line .gc-status-inner{padding-left:4px;}
  .presence-dot{width:6px;height:6px;border-radius:50%;background:rgb(255,140,120);box-shadow:0 0 5px rgba(255,140,120,0.8);animation:presence-pulse 1.6s ease-in-out infinite;flex:none;}
  .favcount-dot{width:6px;height:6px;border-radius:50%;background:rgb(255,110,165);box-shadow:0 0 5px rgba(255,110,165,0.8);animation:presence-pulse 1.6s ease-in-out infinite;flex:none;}
  /* 흔적(이번 주 N명이 흔적 M개) 전용 점 — 예전엔 .favcount-dot을 그대로 재사용해서 "N명이 좋아해요"와
     점 색이 똑같았다(둘 다 핑크). 같은 줄에서 로테이션되는 지표라 점까지 같으면 무엇이 바뀐 건지
     구분이 안 된다(2026-08-27 사용자 지적).
     presence(코랄 255,140,120)·favcount(핑크 255,110,165)가 둘 다 따뜻한 쪽이라, 흔적만 차가운 쪽으로
     뺀다 — 텍스트도 이미 차가운 본문톤(#ccd8ee)이라 점과 글자가 한 덩어리로 읽힌다. */
  .trace-dot{width:6px;height:6px;border-radius:50%;background:rgb(110,225,195);box-shadow:0 0 5px rgba(110,225,195,0.75);animation:presence-pulse 1.6s ease-in-out infinite;flex:none;}
  @keyframes presence-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.45;transform:scale(0.72);}}
  .tm{display:none;}
  #tv-big-wrap{cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;border-radius:8px;overflow:hidden;background:rgba(255,255,255,0.04);}
  #tv-big-wrap:hover #tv-big{opacity:.84;}
  #tv-big{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;transition:opacity .13s;}
  #tv-big-title{font-size:13px;color:#a8bcd8;line-height:1.3;padding:4px 4px;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;}
  #tv-small-row{display:flex;gap:5px;margin-top:5px;}
  .tv-sm{flex:1;position:relative;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;border-radius:6px;overflow:hidden;background:rgba(255,255,255,0.04);transition:opacity .13s;}
  .tv-sm:hover{opacity:.82;}
  .tv-sm img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
  .tv-sm-title{font-size:11.5px;color:#a8bcd8;line-height:1.3;padding:4px 4px;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;}
  .tv-with-line{font-size:var(--fz-meta);font-weight:500;color:#a8bcd8;padding:0 4px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em;}
  .tv-with-chip{cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;color:rgba(150,180,255,0.72);transition:color .13s;}
  .tv-with-chip:hover{color:rgba(200,220,255,1);text-decoration:underline;}
  .tv-with-chip-cover{color:rgba(200,150,230,0.75);}
  .tv-with-chip-cover:hover{color:rgba(225,190,245,1);}
  /* 마퀴(긴 제목 슬라이드) — 데스크톱은 hover, 모바일은 탭으로 트리거(JS의 addMarquee 참고). 둘 다 같은 표시 규칙 공유 */
  #tv-big-title,.tv-sm-title,.tv-with-line{text-overflow:unset;}
  .tv-title-inner{display:inline-block;white-space:nowrap;vertical-align:top;}
  #tv-big-title:not(.is-marquee),.tv-sm-title:not(.is-marquee),.tv-with-line:not(.is-marquee),.feed-card-sub:not(.is-marquee){-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 14px),transparent 100%);mask-image:linear-gradient(to right,#000 calc(100% - 14px),transparent 100%);}
  /* duration은 항상 JS(_marqueeDuration)가 넘치는 거리에 비례해서 인라인으로 계산해 넣음 — 여기 2.2s는
     인라인 값이 없을 때(이론상 없어야 함)의 fallback일 뿐, 실제로는 매번 덮어써짐 */
  .marquee-run{animation:title-marquee 2.2s .2s linear infinite;}
  @keyframes title-marquee{0%,15%{transform:translateX(0);}85%,100%{transform:translateX(var(--mx,0px));}}
  /* 모바일 탭: hover가 없으므로 한 번만 끝까지 슬라이드했다가 되돌아옴(무한반복 아님) */
  /* 끝까지 슬라이드된 상태로 끝남 — 되돌아오는 모션은 넣지 않고, 애니메이션이 끝나면(JS가 클래스 제거)
     그냥 즉시 처음 위치로 스냅됨(유튜브 앱의 제목 스크롤과 동일한 느낌) */
  @keyframes title-marquee-tap{0%,6%{transform:translateX(0);}80%,100%{transform:translateX(var(--mx,0px));}}
  .marquee-tap-run{animation:title-marquee-tap 3.2s linear;}
  .tv-empty{font-size:11px;color:#5878a0;}
  /* 쇼츠 썸네일 (9:16) */
  #tv-big-wrap.is-shorts #tv-big{aspect-ratio:9/16;width:40%;margin:0 auto;}
  #tv-small-row .tv-sm.is-shorts{flex:0 0 52px;width:52px;}
  .tv-sm.is-shorts img{aspect-ratio:9/16;}
  /* 대표영상 제외 나머지 영상 그리드 — 그룹카드처럼 가로/쇼츠를 업로드 순서 기반으로 섞어서 배치 (모바일/데스크톱 공용) */
  .tv-mix-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:5px;}
  .tv-mix-grid .tv-sm.wide{grid-column:span 2;}
  /* 2026-10-02 유튜브 모바일 홈 방식 — 가로는 항상 전체폭 1열, 쇼츠는 2열(.gc-ch-grid 쪽 주석 참고) */
  .tv-mix-grid{grid-auto-flow:dense;}
  .tv-mix-grid>.tv-sm:not(.is-shorts){grid-column:span 2;}
  .tv-mix-grid>.tv-sm.is-shorts.wide{grid-column:auto;}
  /* 더보기 버튼 */
  .tv-more-btn{width:100%;margin-top:5px;padding:5px 8px;border:none;border-radius:8px;background:rgba(255,255,255,0.08);color:rgba(160,180,225,0.80);font-family:inherit;font-size:10px;font-weight:600;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;letter-spacing:.02em;transition:background .13s,color .13s;}
  .tv-more-btn:hover{background:rgba(255,255,255,0.13);color:rgba(205,220,255,0.95);}
  /* ── Mobile bottom sheet ─────────────────────────── */
  /* 카드 시트 높이/위치는 전부 JS가 :root에 심는 두 변수만 보고 결정된다(2026-08-25 재설계).
       --sheet-bottom : 시트 아래에 비워둘 높이 = 탭바가 보일 땐 탭바 높이, 숨겨지면 0
       --sheet-grow   : 반쯤(60vh) 상태에서 탭바가 사라진 만큼 시트를 더 키울 양(0 또는 탭바 높이)
     예전엔 _extendSheets()가 시트 3개에 인라인 min/max-height를 직접 박았는데, 그 값이 "호출 시점의
     bs-full 여부"로 정해져서 그 뒤에 열리는 카드가 옛 값에 갇혔음(스택 카드 inner가 60vh+탭바에
     고정돼 화면을 못 채움 = "탭바 로직이 카드 열었다 닫았다 하면 깨진다"의 정체). 변수만 바꾸면
     지금 열려있든 나중에 열리든 CSS가 알아서 맞추므로 stale 인라인 값이 구조적으로 안 생긴다. */
  /* --safe-top : 상단 세이프에어리어(노치/상태바) 높이. 시트가 화면을 꽉 채울 때(bs-full)만 의미가 있다.
     ⚠️ 왜 env()를 직접 안 쓰고 변수로 한 번 감싸는가 —
       ① 시트의 padding-top과 그 위에 절대배치된 버튼들의 top이 **반드시 같은 값**이어야 하는데,
          예전엔 시트만 env()를 쓰고 버튼은 top:0이라 PWA(홈 화면 추가)에서 버튼만 노치 밑에 남았다.
          absolute의 top:0은 padding box가 아니라 border edge 기준이라, 손잡이(일반 흐름)는 밀려나는데
          버튼은 안 밀려난다 — 브라우저에선 inset이 0이라 안 보이고 **PWA에서만** 드러났다
          (2026-08-27 사용자 제보 "웹앱으로 열면 이전 버튼이 혼자 왼쪽 꼭대기에 있어서 쓸 수가 없음").
       ② env()는 헤드리스/데스크톱에서 항상 0이라 회귀 테스트로 재현할 방법이 없다. 변수로 두면
          테스트가 --safe-top만 덮어써서 노치 상황을 그대로 재현할 수 있다(tests/pwa-safearea.test.js). */
  :root{--safe-top:env(safe-area-inset-top,0px);}
  #mob-sheet{
    display:none;position:fixed;left:0;right:0;width:100%;
    bottom:var(--sheet-bottom,73px);
    min-height:calc(60vh + var(--sheet-grow,0px));max-height:calc(60vh + var(--sheet-grow,0px));
    border-radius:20px 20px 0 0;
    background:rgba(16,20,36,0.96);
    backdrop-filter:blur(36px);-webkit-backdrop-filter:blur(36px);
    border:0.5px solid rgba(255,255,255,0.10);
    box-shadow:0 1px 0 rgba(255,255,255,0.06) inset,0 -8px 32px rgba(0,0,0,0.55);
    z-index:63;pointer-events:all;overflow:hidden;
    box-sizing:border-box;
    transform:translateY(calc(100% + var(--sheet-bottom,73px)));
    transition:transform .32s cubic-bezier(0.32,0.72,0,1),max-height .32s cubic-bezier(0.32,0.72,0,1),min-height .32s cubic-bezier(0.32,0.72,0,1),border-radius .32s cubic-bezier(0.32,0.72,0,1),bottom .32s cubic-bezier(0.32,0.72,0,1);
    will-change:transform;
  }
  #mob-sheet.bs-open{transform:translateY(0);}
  #mob-sheet.bs-full{min-height:calc(var(--mob-vh,100vh) - var(--sheet-bottom,73px));max-height:calc(var(--mob-vh,100vh) - var(--sheet-bottom,73px));border-radius:0;padding-top:var(--safe-top);}
  #mob-sheet.bs-full #mob-sheet-inner{max-height:calc(var(--mob-vh,100vh) - var(--sheet-bottom,73px) - 24px - var(--safe-top));}
  #mob-card-stack{
    display:none;position:fixed;left:0;right:0;
    bottom:var(--sheet-bottom,73px);min-height:calc(60vh + var(--sheet-grow,0px));max-height:calc(60vh + var(--sheet-grow,0px));
    border-radius:20px 20px 0 0;overflow:hidden;
    background:rgba(14,18,36,0.97);
    backdrop-filter:blur(36px);-webkit-backdrop-filter:blur(36px);
    border:0.5px solid rgba(255,255,255,0.10);
    box-shadow:0 1px 0 rgba(255,255,255,0.06) inset,0 -8px 32px rgba(0,0,0,0.55);
    z-index:64;pointer-events:all;
    transform:translateY(calc(100% + var(--sheet-bottom,73px)));
    transition:transform .32s cubic-bezier(0.32,0.72,0,1),bottom .32s cubic-bezier(0.32,0.72,0,1),min-height .32s cubic-bezier(0.32,0.72,0,1),max-height .32s cubic-bezier(0.32,0.72,0,1),border-radius .32s cubic-bezier(0.32,0.72,0,1);
    will-change:transform;
    font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
  }
  #mob-card-stack.bs-open{transform:translateY(0);}
  /* mob-sheet(첫 카드)의 100%(bs-full) 상태가 그 위로 쌓이는 카드(mob-card-stack)에도 그대로 이어지도록
     동일한 규칙을 mob-card-stack에도 적용 — 안 그러면 첫 카드를 100%로 봐놓고 다음 카드를 열었을 때
     60vh로 뚝 떨어져서 답답해 보이는 문제가 있었음. */
  #mob-card-stack.bs-full{min-height:calc(var(--mob-vh,100vh) - var(--sheet-bottom,73px));max-height:calc(var(--mob-vh,100vh) - var(--sheet-bottom,73px));border-radius:0;box-sizing:border-box;padding-top:var(--safe-top);}
  #mob-card-stack.bs-full #mob-card-stack-inner{max-height:calc(var(--mob-vh,100vh) - var(--sheet-bottom,73px) - 24px - var(--safe-top));}
  #mob-card-stack-inner{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;max-height:calc(60vh + var(--sheet-grow,0px) - 24px);overscroll-behavior:contain;width:100%;box-sizing:border-box;position:relative;transition:max-height .32s cubic-bezier(0.32,0.72,0,1);}
  #mob-card-stack-inner>#tt,#mob-card-stack-inner>#gc{
    position:static!important;display:block!important;
    max-width:100%!important;width:100%!important;
    left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
    border-radius:0!important;box-shadow:none!important;
    border:none!important;background:transparent!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    transform:none!important;transition:none!important;
    box-sizing:border-box!important;overflow-x:hidden!important;
  }
  @media(min-width:769px){#mob-card-stack{display:none!important;}}
  /* tt-back과 같은 top:-2px를 썼었는데, 그룹 카드는 맨 위가 색상 라인이 아니라 그룹 이름 텍스트라
     3px만큼 중심이 안 맞았음(2026-08-13, 사용자 제보 — 실측으로 확인) — 이름 텍스트 중심에 맞춤. */
  #gc-back{position:absolute;top:1px;left:-2px;z-index:2;padding:14px 16px;}
  /* z-index는 정적 67(기준)이고, 열릴 때 openLightbox가 _bringToFront로 동적으로 최상단(132+)에 올린다
     — 곡→영상 목록·조합 위에서 재생되고, 그 위에서 어드민 편집모달을 열면 그게 또 위로(2026-09-02, 하드코딩
     130이 어드민 편집(82)을 뒤로 가리던 것을 _bringToFront 시스템으로 통일). */
  #yt-lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.9);z-index:67;align-items:center;justify-content:center;}
  /* 브라우즈 모드는 화면 전체를 덮는 실제 페이지형 시트라, 반투명(0.9)이면 뒤에 여전히 마운트돼있는
     카드의 제목 텍스트 등이 10%만큼 비쳐 보이는 문제가 있었음(작은 중앙 박스였던 기존 모드는 겹칠
     일이 거의 없어서 안 드러났었음, 2026-08-11 스크린샷으로 실측 확인) — 완전 불투명으로. */
  #yt-lightbox.lb-browse{background:#08091a;will-change:transform;}
  #yt-lightbox.open{display:flex;}
  /* ── 웹 전용: 카드 보며 영상 재생 (2026-09-02 제보 "영상 보면서 카드도") ───────────────
     #yt-lightbox는 inset:0 풀스크린이라 우측 앵커 카드(#side-panel:320, +멤버 2단:640, 넓게:640)를
     통째로 덮었다. 데스크톱에서 카드가 열려 있으면 그 폭만큼 플레이어의 오른쪽을 비운다 → 카드 영역은
     루트가 아예 차지하지 않으므로 그대로 보이고 클릭도 네이티브로 동작한다(어드민 좌측도킹과 같은 목적,
     여기선 루트를 물리적으로 줄여 pointer-events 조작조차 불필요). 카드가 없으면 그대로 풀스크린.
     min(…,100vw-480px)로 좁은 데스크톱에선 영상이 최소 480px는 유지(그 경우만 카드 일부를 덮음).
     :has()는 이미 어드민 도킹(#adm-home-overlay 등)에서 쓰는 기법 — 데스크톱 지원 확인됨. */
  @media(min-width:769px){
    body:has(#side-panel.open) #yt-lightbox{right:440px;}
    body:has(#member-panel.open) #yt-lightbox{right:min(760px,calc(100vw - 480px));}
    body.card-wide:has(#side-panel.open) #yt-lightbox{right:min(640px,calc(100vw - 480px));}
    body.card-wide:has(#member-panel.open) #yt-lightbox{right:min(960px,calc(100vw - 480px));}
    /* 좁아진 영역에 맞춰 영상 래퍼가 카드 밑으로 삐져나가지 않게(기본 min(88vw,900px) 위에 캡) */
    body:has(#side-panel.open) #yt-lb-wrap,
    body:has(#member-panel.open) #yt-lb-wrap{max-width:88%;}
  }
  #yt-lb-wrap{position:relative;width:min(88vw,900px);}
  #yt-lb-video-box{position:relative;width:100%;aspect-ratio:16/9;}
  #yt-lb-video-box.is-shorts{aspect-ratio:9/16;width:min(54vw,420px);margin:0 auto;}
  /* 원래 쇼츠(세로) 영상을 "일반 재생모드처럼" 보고 싶을 때 — 박스 자체는 is-shorts를 빼서 그냥 기본
     16:9 크기를 그대로 쓰고(새 규칙 불필요), 안의 iframe만 세로 비율 그대로 유지한 채 가운데 정렬해서
     레터박스(양옆 여백)로 보이게 한다(2026-08-14, 사용자 요청). */
  #yt-lb-video-box.is-letterbox #yt-lb-iframe{width:auto;height:100%;aspect-ratio:9/16;margin:0 auto;}
  #yt-lb-iframe{width:100%;height:100%;border:none;border-radius:8px;display:block;}
  #yt-lb-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:1;}
  #yt-lb-loading.show{opacity:1;transition-delay:.12s;}
  /* ⚠️ 회전 애니메이션은 반드시 `.show`가 붙은 동안만 걸 것(2026-09-22 발열 조사). 예전엔 스피너
     자체에 `infinite`가 걸려 있었는데, 로딩이 끝나도 #yt-lb-loading은 **opacity:0으로 가려질 뿐
     DOM에 그대로 남는다** — 그래서 보이지도 않는 스피너가 영상 보는 내내 돌았다. 실측(라이트박스
     open 6초): RecalcStyle 360회(초당 60회)가 이것 때문이었다. 브라우저가 "이 페이지는 애니메이션
     중"이라 판단해 매 vsync마다 합성 프레임을 돌리게 만드는, 발열의 숨은 지분. */
  .yt-lb-spinner{width:32px;height:32px;border-radius:50%;border:2.5px solid rgba(255,255,255,0.18);border-top-color:rgba(255,255,255,0.85);}
  #yt-lb-loading.show .yt-lb-spinner{animation:yt-lb-spin .7s linear infinite;}
  @keyframes yt-lb-spin{to{transform:rotate(360deg);}}
  /* 우측 중단 영역을 눌러 2배속을 토글하는 탭존 — 위/아래 모서리는 유튜브 자체 버튼(설정·전체화면 등)이
     눌리도록 터치 감지 영역에서 비워둠(정확한 크기는 실기기 테스트로 조정 필요) */
  #yt-lb-speed-zone{position:absolute;top:52px;right:0;bottom:80px;width:22%;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;z-index:1;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
  /* Shorts: 하단 YouTube 컨트롤 영역 완전히 확보 — 상단 30% 구간에만 배속존 적용 */
  #yt-lightbox.lb-shorts #yt-lb-speed-zone{bottom:auto;height:30%;width:18%;}
  #yt-lb-speed-badge{display:none;position:absolute;top:10px;right:10px;background:rgba(0,0,0,0.65);color:#fff;font-size:12px;font-weight:700;padding:3px 8px;border-radius:10px;pointer-events:none;z-index:2;letter-spacing:.02em;}
  #yt-lb-speed-badge.is-on{display:block;}
  /* 브라우즈 모드 연속재생 카운트다운 — 유튜브/넷플릭스식 "다음 영상 N초" 배너(2026-08-21).
     쇼츠 모드는 카운트다운 없이 곧장 넘어가서 이 배너 자체가 필요 없음. */
  #yt-lb-autonext{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:10px;background:rgba(10,10,20,0.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:0.5px solid rgba(255,255,255,0.14);border-radius:20px;padding:8px 8px 8px 16px;box-shadow:0 6px 24px rgba(0,0,0,0.4);}
  #yt-lb-autonext-text{color:#fff;font-size:13px;font-weight:600;white-space:nowrap;}
  #yt-lb-autonext-cancel{background:rgba(255,255,255,0.12);border:0.5px solid rgba(255,255,255,0.18);color:#fff;font-size:12px;font-weight:700;padding:6px 12px;border-radius:14px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;white-space:nowrap;transition:background .15s;}
  #yt-lb-autonext-cancel:hover{background:rgba(255,255,255,0.22);}
  #yt-lb-close{position:absolute;top:-30px;right:0;background:none;border:none;color:#fff;font-size:20px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:4px 6px;opacity:.65;line-height:1;}
  #yt-lb-close:hover{opacity:1;}
  #yt-lb-close-chevron{display:block;width:18px;height:18px;}
  /* 브라우즈 모드 전용 상단 우측 "더보기(⋮)" 메뉴 — "연결 보기"처럼 자주 안 쓰는 부가 기능을 여기로
     모아서 상단바를 정리(2026-08-12, 사용자 요청). 기본(쇼츠 모드)은 아예 없음. */
  .lb-menu-wrap{display:none;position:relative;}
  #yt-lb-menu-panel{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:140px;
    border-radius:10px;background:rgba(20,24,44,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:0.5px solid rgba(255,255,255,0.10);box-shadow:0 8px 24px rgba(0,0,0,0.45);padding:4px;z-index:3;}
  .lb-menu-wrap.open #yt-lb-menu-panel{display:block;}
  #yt-lb-menu-panel #yt-lb-conn-btn{width:100%;box-sizing:border-box;text-align:left;margin-top:0;
    background:none;border-radius:6px;justify-content:space-between;}
  #yt-lb-menu-panel #yt-lb-conn-btn:hover{background:rgba(255,255,255,0.07);}
  /* 제목/업로드일·조회수 — 라이트박스에 텍스트 정보가 전혀 없어서 확인하려면 유튜브로 나가야 했던
     문제(2026-08-10, 사용자 제보) — 조회수는 관리자 동기화 전이거나 오래된 영상이면 없을 수 있어
     비어있으면 그 부분만 조용히 생략(날짜만 있어도 표시, 둘 다 없으면 이 줄 자체를 숨김). */
  #yt-lb-info{padding:8px 2px 0;overflow:hidden;}
  #yt-lb-video-box.is-shorts~#yt-lb-info{width:min(54vw,420px);margin:0 auto;}
  #yt-lb-title-text{font-size:13px;font-weight:600;color:rgba(225,235,255,0.92);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  #yt-lb-meta-text{font-size:11px;color:rgba(150,175,215,0.66);margin-top:2px;}
  #yt-lb-tap-cap{display:none;}
  /* 모바일 브라우즈: 영상 상단 드래그 캡 — iframe이 터치를 흡수하므로 위에 얇은 레이어로 아래 스와이프→닫기 제공 */
  #yt-lb-drag-cap{display:none;}
  /* 모바일 첫 진입 시 1회: 상하로 스와이프해서 영상 넘길 수 있다는 걸 살짝 들썩임으로 암시 */
  @keyframes lb-swipe-hint{0%,100%{transform:translateY(0);}25%{transform:translateY(-16px);}60%{transform:translateY(0);}80%{transform:translateY(10px);}}
  #yt-lb-wrap.swipe-hint{animation:lb-swipe-hint 1s ease-in-out 2;}
  #yt-lb-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 0 0;user-select:none;}
  #yt-lb-prev,#yt-lb-next{background:none;border:none;color:rgba(255,255,255,0.45);font-size:30px;line-height:1;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:4px 10px;transition:color .15s;}
  #yt-lb-prev:hover,#yt-lb-next:hover{color:rgba(255,255,255,0.9);}
  #yt-lb-prev:disabled,#yt-lb-next:disabled{color:rgba(255,255,255,0.12);cursor:default;}
  #yt-lb-actions{display:flex;align-items:center;gap:10px;}
  #yt-lb-scrap,#yt-lb-col,#yt-lb-flag,#yt-lb-edit,#yt-lb-mute,#yt-lb-rotate{background:rgba(255,255,255,0.08);border:none;border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;color:rgba(200,215,255,0.7);transition:color .15s,background .15s;font-size:15px;}
  #yt-lb-rotate.is-portrait{background:rgba(155,178,228,0.22);color:#c8ddff;}
  #yt-lb-edit:hover{background:rgba(255,255,255,0.16);color:#fff;}
  #yt-lb-mute:hover{background:rgba(255,255,255,0.16);color:#fff;}
  #yt-lb-mute.is-on{color:rgba(255,255,255,0.95);}
  #yt-lb-scrap svg,#yt-lb-col svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;}
  #yt-lb-flag svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;}
  #yt-lb-scrap.scrapped{color:rgba(255,92,125,0.92);}
  #yt-lb-scrap.scrapped svg{fill:currentColor;}
  #yt-lb-col.col-on{color:rgba(130,185,255,0.9);}
  #yt-lb-col.col-on svg{fill:currentColor;}
  #yt-lb-flag.flagged{color:rgba(255,185,80,0.95);}
  #yt-lb-flag.flagged svg{fill:currentColor;stroke:currentColor;}
  .lb-action-cnt{font-size:var(--fz-meta);font-weight:700;color:rgba(200,215,255,0.66);margin-left:3px;font-family:'Pretendard',sans-serif;line-height:1;}
  .lb-action-cnt:empty{display:none;}
  #yt-lb-reactions{display:flex;align-items:center;justify-content:center;gap:4px;padding:10px 0 4px;flex-wrap:wrap;}
  .lb-react-btn{background:rgba(255,255,255,0.07);border:none;border-radius:18px;padding:5px 9px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;display:inline-flex;align-items:center;gap:4px;font-size:17px;line-height:1;position:relative;overflow:hidden;transition:background .15s,transform .2s ease-out;color:#fff;}
  .lb-react-btn:active{transform:scale(0.86);transition:transform .08s;}
  .lb-react-btn.reacted{background:rgba(255,255,255,0.20);}
  .lb-react-cnt{font-size:11px;color:rgba(220,235,255,0.75);font-family:'Pretendard',sans-serif;font-weight:600;line-height:1;}
  .lb-react-cnt:empty{display:none;}
  /* 리액션 3+펼침(디자인리뷰 Q5, 2026-09-07) — 기본 3개+더보기(···), 탭하면 나머지 3개. 플레이어 조작 절제. */
  #yt-lb-react-more{background:rgba(255,255,255,0.07);border:none;border-radius:18px;padding:5px 11px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;color:rgba(220,235,255,0.68);font-size:15px;line-height:1;transition:background .15s,transform .12s;}
  #yt-lb-react-more:active{transform:scale(0.86);}
  #yt-lb-reactions:not(.expanded) .lb-react-hidden{display:none;}
  #yt-lb-reactions.expanded #yt-lb-react-more{display:none;}
  @keyframes _lbRipple{0%{transform:scale(0);opacity:.55;}100%{transform:scale(3.5);opacity:0;}}
  .lb-ripple{position:absolute;border-radius:50%;width:44px;height:44px;margin:-22px 0 0 -22px;background:rgba(255,255,255,0.42);pointer-events:none;animation:_lbRipple .48s ease-out forwards;}
  /* [삭제됨 2026-09-04] #lb-react-extended / #lb-emoji-picker-* — 라이트박스 반응의 확장 행과 전체 피커.
     아래 `emoji-picker{...}`는 남긴다 — 최애(bias) 선택기(#pp-bias-emoji-picker)가 같은 컴포넌트를 쓴다. */
  emoji-picker{--background:transparent;--border-color:rgba(255,255,255,0.07);--button-active-background:rgba(255,255,255,0.14);--button-hover-background:rgba(255,255,255,0.08);--category-emoji-size:1.1rem;--emoji-size:1.5rem;--input-border-color:rgba(255,255,255,0.12);--input-font-color:#fff;--input-placeholder-color:rgba(180,200,240,0.4);--indicator-color:rgba(150,180,255,0.85);--outline-color:rgba(150,180,255,0.5);--text-color:rgba(200,220,255,0.9);--num-columns:8;width:100%;height:300px;border:none;}

  /* ── 라이트박스 브라우즈 모드(일반 영상 — 유튜브뮤직 스타일, 2026-08-11) ──
     쇼츠(스와이프) 모드는 위 규칙들 그대로 유지, 이 블록은 #yt-lightbox.lb-browse일 때만 적용됨. */
  #yt-lb-main{display:block;}
  /* 제목: 유튜브 자체 컨트롤을 탭하면 위에 뜨는 제목과 겹치는 정보라, 튀지 않게 은은한 톤으로만 */
  #yt-lightbox.lb-browse #yt-lb-title-text{font-weight:500;color:rgba(175,190,220,0.66);}
  #yt-lightbox.lb-browse #yt-lb-toolbar #yt-lb-prev,
  #yt-lightbox.lb-browse #yt-lb-toolbar #yt-lb-next{display:none;} /* 아래 추천 목록 헤더의 화살표로 대체 */
  #yt-lightbox.lb-browse #yt-lb-toolbar{justify-content:center;}
  #yt-lb-member-info{display:none;}
  #yt-lightbox.lb-browse #yt-lb-member-info{display:block;padding:10px 2px;border-bottom:0.5px solid rgba(255,255,255,0.07);margin-top:10px;}
  #yt-lb-anchor-chip{font-size:13px;font-weight:600;color:rgba(215,228,255,0.85);}
  #yt-lb-anchor-chip:empty{display:none;}
  #yt-lb-with-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;}
  #yt-lb-with-chips:empty{display:none;}
  .lb-with-chip{background:rgba(255,255,255,0.06);border-radius:11px;padding:3px 9px;font-size:11px;color:rgba(195,210,240,0.72);}
  /* 누를 수 있는 칩(해석된 멤버) — span 칩과 생김새는 같게 두고 버튼 기본 스타일만 지운다. 칩 자체가
     이미 22px라 세로는 충분해서 좌우 여백만 조금 넓혀 탭 실수를 줄인다(2026-08-27). */
  .lb-with-chip-btn{border:none;font-family:inherit;line-height:inherit;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:4px 11px;-webkit-tap-highlight-color:transparent;}
  .lb-with-chip-btn:active{background:rgba(255,255,255,0.14);color:#fff;}
  #yt-lb-conn-btn{margin-top:9px;background:rgba(130,155,255,0.14);border:none;border-radius:14px;padding:6px 13px;font-size:12px;color:rgba(185,205,255,0.92);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;display:inline-flex;align-items:center;gap:1px;}
  #yt-lb-conn-btn:hover{background:rgba(130,155,255,0.22);}
  #yt-lb-conn-btn span{opacity:.7;}
  #yt-lb-uplist{display:none;}
  #yt-lightbox.lb-browse #yt-lb-uplist{display:block;}
  #yt-lb-uplist-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
  #yt-lb-uplist-label{font-size:12px;font-weight:700;color:rgba(195,210,240,0.71);letter-spacing:.02em;}
  #yt-lb-uplist-nav{display:flex;align-items:center;gap:4px;}
  /* 다음 영상 헤더 줄 상하 패딩을 타이트하게(2026-08-12, 사용자 요청) — 이 줄 높이가 prev/next 버튼의
     세로 패딩으로 정해지므로 여기를 줄이면 헤더 전체가 낮아짐. */
  #yt-lb-uplist-prev,#yt-lb-uplist-next{background:none;border:none;color:rgba(255,255,255,0.5);font-size:17px;line-height:1;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:1px 7px;}
  #yt-lb-uplist-prev:hover,#yt-lb-uplist-next:hover{color:rgba(255,255,255,0.9);}
  #yt-lb-uplist-prev:disabled,#yt-lb-uplist-next:disabled{color:rgba(255,255,255,0.15);cursor:default;}
  #yt-lb-uplist-cnt{font-size:11px;color:rgba(150,170,210,0.61);min-width:34px;text-align:center;}
  #yt-lb-uplist-scroll{display:flex;flex-direction:column;gap:2px;}
  .lb-uplist-item{display:flex;gap:9px;padding:6px 4px;border-radius:8px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;align-items:center;}
  .lb-uplist-item:hover{background:rgba(255,255,255,0.05);}
  .lb-uplist-item.is-current{background:rgba(130,155,255,0.11);box-shadow:inset 2.5px 0 0 rgba(130,155,255,0.7);}
  .lb-uplist-item.is-current .lb-uplist-title{color:rgba(220,230,255,0.98);font-weight:600;}
  .lb-uplist-thumb{width:78px;height:44px;flex-shrink:0;border-radius:6px;object-fit:cover;background:rgba(255,255,255,0.06);}
  .lb-uplist-thumb.is-shorts{width:38px;height:66px;}
  .lb-uplist-info{min-width:0;flex:1;}
  .lb-uplist-title{font-size:var(--fz-body);color:rgba(220,230,255,0.88);line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .lb-uplist-meta{font-size:11px;color:rgba(150,170,210,0.61);margin-top:2px;}
  /* ── Surf(파도타기) Up Next — 2026-09-29. 시안(c35f0173)의 구조를 라이트박스 톤(남색 반투명)으로 옮김.
     "이어서 보기"(들어온 목록)는 기본 펼침 — 헤더를 누르면 접힘(.pl-closed). 2026-09-29 사용자 요청으로 기본 접힘→펼침.
     목록이 1개뿐이면 헤더째 숨김. */
  #yt-lb-uplist-label{background:none;border:none;padding:4px 0;font-family:inherit;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;display:inline-flex;align-items:center;gap:5px;}
  #yt-lb-uplist.surf-on #yt-lb-uplist-label::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s;opacity:.7;}
  #yt-lb-uplist.surf-on.pl-closed #yt-lb-uplist-label::after{transform:rotate(-45deg);}
  #yt-lb-uplist.surf-on.pl-closed #yt-lb-uplist-scroll{display:none;}
  #yt-lb-uplist.no-playlist #yt-lb-uplist-hd,#yt-lb-uplist.no-playlist #yt-lb-uplist-scroll{display:none;}
  #yt-lb-uplist.surf-on #yt-lb-uplist-hd{margin-top:14px;padding-top:8px;border-top:0.5px solid rgba(255,255,255,0.07);}
  #yt-lb-surf:empty{display:none;}
  .surf-trail{display:flex;align-items:center;gap:4px;margin-bottom:8px;}
  .surf-back{flex:none;background:rgba(255,255,255,0.06);border:none;border-radius:50%;width:26px;height:26px;color:rgba(215,228,255,0.85);font-size:16px;line-height:1;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:0 0 2px;}
  .surf-back:hover{background:rgba(255,255,255,0.12);}
  .surf-crumbs{display:flex;align-items:center;gap:5px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;font-size:11px;color:rgba(150,170,210,0.61);min-width:0;}
  .surf-crumbs::-webkit-scrollbar{display:none;}
  .surf-crumbs i{font-style:normal;opacity:.6;}
  .surf-crumbs button{background:none;border:none;padding:4px 0;font:inherit;color:inherit;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  .surf-crumbs button.cur{color:rgba(225,235,255,0.92);font-weight:600;cursor:default;}
  .surf-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
  .surf-title{font-size:12px;font-weight:700;color:rgba(195,210,240,0.71);letter-spacing:.02em;}
  .surf-seg{display:flex;width:100%;margin-bottom:10px;}
  .surf-seg .seg-btn{padding:6px 0;font-size:11px;}
  .surf-list{background:rgba(255,255,255,0.035);border-radius:12px;overflow:hidden;}
  .surf-empty{padding:16px 14px;font-size:12px;color:rgba(150,170,210,0.61);}
  .surf-grp+.surf-grp{border-top:0.5px solid rgba(255,255,255,0.07);}
  .surf-row{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto 12px;gap:10px;align-items:center;padding:12px 12px 12px 14px;background:none;border:none;color:inherit;font-family:inherit;text-align:left;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;-webkit-tap-highlight-color:transparent;}
  .surf-row:hover{background:rgba(255,255,255,0.04);}
  .surf-row:disabled{cursor:default;opacity:.45;}
  .surf-row:disabled:hover{background:none;}
  .surf-r-txt{min-width:0;display:flex;flex-direction:column;gap:2px;}
  .surf-r-name{font-size:13px;font-weight:600;color:rgba(225,235,255,0.92);}
  .surf-r-rel{font-size:11px;color:rgba(150,170,210,0.61);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .surf-stack{display:flex;align-items:center;}
  .surf-stack img{width:32px;height:18px;object-fit:cover;border-radius:4px;border:1.5px solid #10122a;margin-left:-10px;display:block;background:rgba(255,255,255,0.06);}
  .surf-stack img:first-child{margin-left:0;}
  .surf-stack b{font-size:11px;font-weight:500;color:rgba(150,170,210,0.61);margin-left:7px;font-variant-numeric:tabular-nums;}
  .surf-chev{width:7px;height:12px;stroke:rgba(150,170,210,0.61);fill:none;stroke-width:2;transition:transform .2s;}
  .surf-grp.open .surf-chev{transform:rotate(90deg);}
  .surf-chips{display:flex;gap:6px;overflow-x:auto;padding:0 12px 10px;scrollbar-width:none;overscroll-behavior-x:contain;}
  .surf-chips::-webkit-scrollbar{display:none;}
  .surf-chip{flex:none;border:0.5px solid rgba(255,255,255,0.14);background:none;color:rgba(195,210,240,0.78);font:500 11.5px/1 inherit;font-family:inherit;padding:6px 11px;border-radius:999px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;white-space:nowrap;}
  .surf-chip.on{background:rgba(225,235,255,0.92);border-color:transparent;color:#0b0d20;font-weight:600;}
  .surf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 8px;padding:2px 12px 12px;}
  .surf-tile{background:none;border:none;padding:0;text-align:left;color:inherit;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;display:flex;flex-direction:column;gap:5px;font-family:inherit;min-width:0;}
  .surf-tile img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:7px;display:block;background:rgba(255,255,255,0.06);}
  .surf-tt{font-size:11.5px;line-height:1.35;color:rgba(220,230,255,0.88);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .surf-tile.seen .surf-tt{color:rgba(150,170,210,0.61);}
  .surf-tm{font-size:10.5px;color:rgba(150,170,210,0.61);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .surf-tm em{font-style:normal;color:rgba(195,210,240,0.85);font-weight:500;margin-right:5px;}
  .surf-saved{font-size:11px;color:rgba(160,185,255,0.95);}
  .surf-save{flex:none;margin-left:auto;background:none;border:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:rgba(170,190,225,0.7);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:0;}
  .surf-save svg{width:15px;height:15px;}
  .surf-save:hover{color:#eef4ff;}
  .surf-save.col-on{color:rgba(160,185,255,0.95);}
  .surf-save.col-on svg{fill:currentColor;}
  /* Today's Path 시트 — ⚠️ backdrop-filter 금지(영상 위 blur는 모바일 발열 1순위, PERFORMANCE.md). 불투명 배경으로. */
  #surf-recap{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:6;
    width:min(420px,calc(100vw - 20px));box-sizing:border-box;background:#171b36;border:0.5px solid rgba(255,255,255,0.1);
    border-radius:22px;padding:20px 20px 12px;box-shadow:0 18px 50px rgba(0,0,0,0.55);display:flex;flex-direction:column;gap:8px;}
  .surf-recap-t{font-size:17px;font-weight:700;color:#eef4ff;letter-spacing:-.02em;}
  .surf-recap-path{font-size:13px;line-height:1.6;color:rgba(195,210,240,0.72);word-break:keep-all;}
  .surf-recap-path b{color:#eef4ff;font-weight:600;}
  .surf-recap-meta{font-size:12px;color:rgba(150,170,210,0.61);}
  .surf-recap-btns{display:grid;gap:4px;margin-top:6px;}
  .surf-recap-save{background:rgba(130,155,255,0.9);color:#0b0d20;border:none;border-radius:13px;padding:12px 0;font-size:14px;font-weight:600;font-family:inherit;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  .surf-recap-cont{background:none;border:none;color:rgba(170,190,255,0.95);padding:9px 0;font-size:14px;font-weight:500;font-family:inherit;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  @media (prefers-reduced-motion:no-preference){#surf-recap{animation:surfRecapIn .32s cubic-bezier(.2,.8,.2,1) both;}
    @keyframes surfRecapIn{from{opacity:0;transform:translate(-50%,30px);}to{opacity:1;transform:translate(-50%,0);}}}
  .surf-more{grid-column:1/-1;background:none;border:none;color:rgba(160,185,255,0.95);font:500 12px inherit;font-family:inherit;padding:2px 0 0;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;text-align:left;}

  /* ── 라이트박스 큐(Queue) 시트 ─────────────────────────────────── */
  /* 제목 줄 — 제목 + 큐 열기 버튼을 한 행에 */
  #yt-lb-info-row{display:flex;align-items:flex-start;gap:8px;}
  #yt-lb-info-row #yt-lb-title-text{flex:1;min-width:0;}
  #yt-lb-queue-btn{display:none;flex-shrink:0;background:none;border:none;
    color:rgba(200,215,240,0.38);font-size:19px;line-height:1;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;
    padding:2px 0 2px 8px;-webkit-tap-highlight-color:transparent;transition:color .15s;}
  #yt-lb-queue-btn:active{color:rgba(200,215,240,0.9);}
  /* 미리보기 꼬리 — 다음 2개 항목 항상 노출 */
  #yt-lb-uplist-preview{display:none;}
  #yt-lb-uplist-preview-hd{font-size:10.5px;font-weight:700;color:rgba(180,198,232,0.45);
    letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px;padding:0 6px;}
  .lb-preview-item{display:flex;align-items:center;gap:10px;padding:8px 6px;
    cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;border-radius:8px;-webkit-tap-highlight-color:transparent;}
  .lb-preview-item:active{background:rgba(255,255,255,0.07);}
  .lb-preview-thumb{width:66px;height:37px;object-fit:cover;border-radius:5px;
    background:rgba(255,255,255,0.08);flex-shrink:0;display:block;}
  .lb-preview-thumb.is-shorts{width:21px;height:37px;aspect-ratio:9/16;}
  .lb-preview-info{flex:1;min-width:0;}
  .lb-preview-title{font-size:12px;font-weight:500;color:rgba(220,228,245,0.82);
    overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  .lb-preview-meta{font-size:10.5px;color:rgba(155,175,210,0.55);margin-top:1.5px;
    overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  #yt-lb-uplist-more-btn{display:block;width:100%;background:none;border:none;
    color:rgba(155,175,215,0.5);font-size:11.5px;font-family:inherit;
    text-align:center;padding:7px 6px 2px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;-webkit-tap-highlight-color:transparent;}
  #yt-lb-uplist-more-btn:active{color:rgba(200,220,255,0.9);}
  /* 큐 시트 — 하단에서 슬라이드업 */
  #yt-lb-queue-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.52);z-index:192;
    opacity:0;pointer-events:none;transition:opacity .25s;}
  #yt-lb-queue-backdrop.open{opacity:1;pointer-events:auto;}
  #yt-lb-queue-sheet{position:fixed;left:0;right:0;bottom:0;z-index:193;
    background:#0c0f1f;border-radius:18px 18px 0 0;
    display:flex;flex-direction:column;
    transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.9,.3,1);
    max-height:82vh;overflow:hidden;}
  #yt-lb-queue-sheet.open{transform:translateY(0);}
  #yt-lb-queue-sheet-handle{width:36px;height:4px;background:rgba(255,255,255,0.18);
    border-radius:2px;margin:12px auto 8px;flex-shrink:0;cursor:grab;}

  @media(min-width:769px){
    /* 데스크톱: 좌측(재생 중) + 우측(추천 목록) 2열 — 모바일 세로 스택과 다르게 별도 설계 */
    #yt-lightbox.lb-browse #yt-lb-wrap{width:min(92vw,1080px);display:flex;align-items:flex-start;gap:26px;}
    #yt-lightbox.lb-browse #yt-lb-main{flex:1;min-width:0;}
    #yt-lightbox.lb-browse #yt-lb-uplist{width:320px;flex-shrink:0;max-height:min(80vh,720px);overflow-y:auto;padding-left:2px;overscroll-behavior:contain;will-change:transform;}
    #yt-lightbox.lb-browse #yt-lb-uplist-scroll{padding-bottom:8px;}
    /* 데스크톱: toolbar prev/next 표시, reactions 왼쪽 정렬 */
    #yt-lightbox.lb-browse #yt-lb-toolbar #yt-lb-prev,
    #yt-lightbox.lb-browse #yt-lb-toolbar #yt-lb-next{display:flex;}
    #yt-lightbox.lb-browse #yt-lb-toolbar{justify-content:space-between;}
    #yt-lightbox.lb-browse #yt-lb-reactions{justify-content:flex-start;}
    /* "연결 보기"를 담는 더보기 메뉴 — 닫기 버튼과 같은 자리(영상 위 여백)에 나란히 배치.
       데스크톱은 화면 폭에 여유가 있어 기존 인라인 배치도 문제 없었지만, 모바일과 구조를 통일해서
       유지보수 포인트를 하나로 줄임(2026-08-12). */
    #yt-lightbox.lb-browse .lb-menu-wrap{display:block;position:absolute;top:-30px;right:34px;}
    #yt-lightbox.lb-browse #yt-lb-menu-btn{background:none;border:none;color:#fff;font-size:20px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:4px 6px;opacity:.65;line-height:1;}
    #yt-lightbox.lb-browse #yt-lb-menu-btn:hover{opacity:1;}

    /* ── 데스크톱 쇼츠: 세로 영상 + 우측 정보 패널 (YouTube Shorts 데스크톱 레이아웃 참고) ── */
    /* wrap을 컨텐츠 너비에 맞게(고정 1080px 아님), main을 auto-shrink, video를 높이 기준으로 키움 */
    #yt-lightbox.lb-browse.lb-shorts-desk #yt-lb-wrap{width:auto;max-width:92vw;}
    #yt-lightbox.lb-browse.lb-shorts-desk #yt-lb-main{flex:0 0 auto;}
    #yt-lightbox.lb-browse.lb-shorts-desk #yt-lb-video-box{
      height:min(88vh,800px);width:auto;aspect-ratio:9/16;margin:0;}
    /* .is-shorts 기본 규칙(width:min(54vw,420px);margin:0 auto) 덮어씀 — 높이 기준이 우선 */
    #yt-lightbox.lb-browse.lb-shorts-desk #yt-lb-video-box.is-shorts{
      width:auto;margin:0;}
    /* info·reactions·toolbar도 video-box 너비에 자동으로 맞춤 */
    #yt-lightbox.lb-browse.lb-shorts-desk #yt-lb-info,
    #yt-lightbox.lb-browse.lb-shorts-desk #yt-lb-video-box.is-shorts~#yt-lb-info{
      width:auto;margin:0;}
    /* 업리스트 패널: 기존 browse 320px 유지, 세로 영상 높이에 맞춰 꽉 채움 */
    #yt-lightbox.lb-browse.lb-shorts-desk #yt-lb-uplist{
      max-height:min(88vh,800px);align-self:flex-start;}
  }
  @media(max-width:768px){
    /* 발열 완화(2026-08-28, PERFORMANCE.md): 영상 위 backdrop-filter blur는 매 프레임 GPU 부하가 커서
       모바일에선 뺀다. autonext(하단 "다음 영상" 바)는 재생 중 상시 떠있어 특히 영향 큼, menu-panel은
       더보기 메뉴 열 때만. 배경 반투명(rgba)은 그대로라 시각차는 거의 없다. */
    #yt-lb-autonext,#yt-lb-menu-panel{backdrop-filter:none;-webkit-backdrop-filter:none;}
    /* 발열(2026-09-22): 모바일에선 라이트박스가 열린 동안 배경을 완전 불투명으로 깐다. 기본값
       rgba(0,0,0,0.9)는 뒤의 우주 캔버스가 10% 비치는데, 그 10% 때문에 컴포지터가 전체화면 WebGL
       캔버스를 계속 합성 대상으로 붙들고 있어야 한다. 불투명이면 index.html의 animate()가 캔버스를
       visibility:hidden으로 빼도 시각차가 0이다. 색은 브라우즈 모드(#08091a)와 같아 그 경로는 변화 없음. */
    #yt-lightbox.open{background:#08091a;}
    /* 같은 이유로, 라이트박스 뒤에 가려진 탭바 배지의 무한 펄스도 멈춘다 — 보이지도 않으면서
       매 프레임 합성을 유발한다(실측에서 영상 재생 중 살아있던 애니메이션 2개 중 하나). */
    body:has(#yt-lightbox.open) .tab-badge-dot{animation:none;}
    #yt-lb-wrap{width:95vw;}
    /* 브라우즈 모드: 작은 중앙 박스가 아니라 전체화면 시트로 — 추천 목록까지 들어가야 해서.
       ⚠️ 2026-08-12까지는 #yt-lb-wrap 전체를 하나의 overflow-y:auto로 묶어서, "다음 영상" 쪽으로
       스크롤하면 영상·제목·리액션·툴바까지 통째로 같이 밀려 올라갔음(사용자 제보 — "다음 영상 스크롤하면
       전체 화면이 내려간다"). Spotify 스타일로 재구성: 상단바(닫기/멤버정보/더보기메뉴)와 영상~툴바
       영역(#yt-lb-main)은 화면에 고정, "다음 영상"(#yt-lb-uplist) 영역만 남은 높이 안에서 독립적으로
       스크롤되게 flex column 구조로 바꿈. */
    #yt-lightbox.lb-browse{align-items:stretch;justify-content:stretch;}
    #yt-lightbox.lb-browse #yt-lb-wrap{width:100vw;max-width:100vw;height:100%;max-height:100%;
      display:flex;flex-direction:column;overflow:hidden;
      box-sizing:border-box;padding:calc(78px + env(safe-area-inset-top,0px)) 14px 0;}
    /* 멤버·콜라보 칩 줄이 있을 때만 영상을 칩 한 줄만큼 내린다(2026-10-01) — 여러 명 태깅을 전부 칩으로 띄우면서 칩 줄이
       잦아졌는데, 78px로는 상단바(칩 포함 86px)가 영상 위를 8px 덮었다(tests/lb-topbar.test.js가 잡던 것). 칩 없는
       영상은 예전 위치 그대로라 영상 위치가 칩 유무 두 가지로만 갈린다. */
    #yt-lightbox.lb-browse.lb-has-chips #yt-lb-wrap{padding-top:calc(92px + env(safe-area-inset-top,0px));}
    #yt-lightbox.lb-browse #yt-lb-main{flex-shrink:0;}
    #yt-lightbox.lb-browse #yt-lb-info{padding-top:14px;}
    #yt-lightbox.lb-browse #yt-lb-reactions{padding-top:14px;}
    #yt-lightbox.lb-browse #yt-lb-toolbar{padding-top:14px;}
    /* 멤버정보(누가 나왔는지 칩)는 더 이상 툴바 밑에 끼어있지 않고 상단바 중앙으로 이동 — 그룹/멤버
       카드에서 재생모드로 들어왔을 때만 뜨는데, 기존 위치는 리액션·다음영상 사이에 레이아웃이 어색하다는
       제보(2026-08-12)로 옮김. "연결 보기" 버튼은 더보기(⋮) 메뉴 쪽으로 같이 이동함(위 공용 규칙 참고).
       닫기/메뉴 버튼과 높이(36px)·top(14px)을 맞추고 flex 세로중앙 정렬해서, 텍스트만 살짝 높은 줄에
       떠 보이던 정렬 어긋남을 없앰(2026-08-12, 사용자 재제보로 조정). */
    /* ⚠️ 예전엔 height:36px에 두 줄(앵커 + 함께한멤버 칩)을 욱여넣어서 **두 줄이 3px 겹쳐** 있었다
       (실측 2026-08-27: 앵커 버튼 아래끝 31 > 칩 위끝 28). 위아래 어느 쪽을 눌러도 엉뚱한 게 잡혀
       '터치가 어렵다'는 제보로 이어졌다. 이제 높이를 내용에 맡기고(min-height로 최소치만 유지)
       두 줄 사이에 실제 간격을 준다.
       ⚠️ 첫 줄은 여전히 닫기(⌄)·메뉴(⋮) 버튼과 같은 36px 밴드 안에서 세로 중앙이어야 한다 —
       그래서 justify-content:center(전체 중앙)가 아니라 flex-start로 두고, 앵커 줄 자체에 36px를
       준다. 안 그러면 칩이 생길 때마다 첫 줄이 위로 밀려 좌우 버튼과 어긋난다. */
    /* 폭 제약은 컨테이너가 아니라 **그룹명 줄에만** 건다(2026-08-28, 사용자 제보 "히토미 왼쪽·소하
       오른쪽에 자리가 충분한데 칩이 두 줄로 넘쳐 영상 위에 겹친다"). 원래 여기 있던 max-width:56vw는
       1줄(그룹명)이 ⌄/⋮ 버튼과 안 부딪히게 하려던 제약인데, 그 아래 멤버 칩 줄까지 같이 묶여 있었다.
       390px 실측: 컨테이너 폭이 195px뿐이라 좌우로 98px씩 놀고 있었고, 칩 7개는 334px면 한 줄에
       들어간다 — 전체 폭(366px)을 쓰면 세이마이네임 7명도 한 줄로 끝난다. */
    #yt-lightbox.lb-browse #yt-lb-member-info{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:0;right:0;transform:none;
      min-height:36px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
      max-width:none;padding-left:12px;padding-right:12px;
      text-align:center;z-index:1;margin-top:0;padding-top:0;border-top:none;
      pointer-events:none;} /* 빈 영역의 탭은 아래(영상)로 그대로 통과 — 누를 것들만 아래에서 되살린다 */
  /* 하프시트 진입점(멤버/그룹 이름)·연결 버튼은 눌려야 하므로 부모의 pointer-events:none를 개별 복구
     — 빈 영역은 여전히 영상으로 통과(2026-08-26 회귀 수정: 하프시트 버튼이 부모 때문에 죽어있던 것). */
  #yt-lightbox.lb-browse #yt-lb-member-info .lb-anchor-part,
  #yt-lightbox.lb-browse #yt-lb-member-info .lb-with-chip-btn,
  #yt-lightbox.lb-browse #yt-lb-member-info #yt-lb-conn-btn{pointer-events:auto;}
    #yt-lightbox.lb-browse #yt-lb-anchor-chip{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
      height:36px;line-height:36px;
      max-width:56vw;} /* 닫기/메뉴 버튼과 같은 밴드 — 버튼과 안 부딪히게 이 줄만 폭을 제한한다 */
    /* 멤버 칩 줄: 넘치면 줄바꿈이 아니라 **가로 스크롤**. 줄바꿈을 허용하면 컨테이너가 position:fixed라
       세로로 자라면서 그대로 영상 위를 덮는다(제보 사례: 세이마이네임 7명 → 2줄 → 영상 침범).
       가로 스크롤이면 높이가 36px 밴드 아래 한 줄로 고정돼 영상 위치가 그룹마다 안 들쭉날쭉하다.
       width:max-content — 칩이 적을 땐 내용만큼만 차지해서 가운데 정렬되고(부모가 align-items:center),
       좌우 빈 영역은 이 줄의 박스 밖이라 탭이 그대로 영상으로 통과한다(pointer-events:auto를 켜도 안전).
       margin-top은 7px→4px(사용자: "예전엔 너무 좁았는데 이젠 너무 크다"). */
    #yt-lightbox.lb-browse #yt-lb-with-chips{
      margin-top:4px;flex-wrap:nowrap;
      width:max-content;max-width:100%;
      overflow-x:auto;overflow-y:hidden;
      scrollbar-width:none;-webkit-overflow-scrolling:touch;
      overscroll-behavior-x:contain; /* 끝에서 더 밀어도 바깥(라이트박스 닫기)으로 안 새게 */
      pointer-events:auto;}
    #yt-lightbox.lb-browse #yt-lb-with-chips::-webkit-scrollbar{display:none;}
    #yt-lightbox.lb-browse #yt-lb-with-chips>*{flex-shrink:0;}
    /* 볼륨/좋아요 등 툴바 줄과 "다음 영상" 사이 여백은 줄여서, 화면 하나에 다음 영상이 2개 정도는
       바로 보이게(2026-08-12, 사용자 요청). */
    /* overscroll-behavior:contain — 목록 끝에서 계속 밀 때 스크롤 연쇄가 바깥(라이트박스/페이지)으로
       새는 걸 막는다. 이게 없으면 iOS 바운스가 바깥까지 번져 "둘러보다 갑자기 닫힘"에 힘을 보탠다
       (2026-08-28, 다른 스크롤러들은 이미 contain을 쓰고 있는데 여기만 빠져 있었음). */
    #yt-lightbox.lb-browse #yt-lb-uplist{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
      overscroll-behavior:contain;
      margin-top:10px;padding:10px 0 24px;border-top:0.5px solid rgba(255,255,255,0.07);}
    #yt-lightbox.lb-browse #yt-lb-uplist-scroll{gap:10px;}
    #yt-lightbox.lb-browse .lb-uplist-item{padding:10px 6px;}
    #yt-lightbox.lb-browse #yt-lb-close{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:12px;right:auto;bottom:auto;z-index:2;background:rgba(0,0,0,0.4);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;}
    #yt-lightbox.lb-browse .lb-menu-wrap{display:block;position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:12px;z-index:2;}
    #yt-lightbox.lb-browse #yt-lb-menu-btn{background:rgba(0,0,0,0.4);border:none;border-radius:50%;width:36px;height:36px;
      color:#fff;font-size:21px;line-height:1;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;display:flex;align-items:center;justify-content:center;padding:0;}
    #yt-lb-iframe{border-radius:10px;}
    /* 쇼츠는 세로로 길어서 화면 대부분을 차지해 스와이프 시작 지점(유튜브 iframe 바깥 여백)이 거의 없었음 —
       살짝 줄여서 위아래 여백을 확보 (탭으로 재생/일시정지하는 유튜브 기본 컨트롤은 그대로 유지됨) */
    #yt-lb-video-box.is-shorts{height:min(80vh,660px);width:auto;aspect-ratio:9/16;margin:0 auto;display:block;}
    /* #yt-lb-info(제목 줄)의 width가 위 규칙 밖(줄 469 부근)에서 정의된 min(54vw,420px) 그대로 남아있어서,
       모바일에서 영상 박스가 height 기준(width:auto, 9:16)으로 바뀐 뒤로는 실제 영상 너비랑 안 맞았음 —
       영상이 훨씬 넓은데 제목 줄만 좁아서 제목이 얼마 안 보이고 좌우로 빈 여백만 남던 원인(2026-08-14,
       사용자 제보). 영상 실제 너비(height*9/16)와 같은 공식으로 맞춘다.
       ⚠️ 아래 줄이 항상 이겨야 하므로 셀렉터 순서상 min(54vw,420px) 규칙(줄 469 근처)보다 뒤에 있어야 함. */
    #yt-lb-video-box.is-shorts~#yt-lb-info{width:calc(min(80vh,660px) * 9 / 16);}
    #yt-lb-close{top:auto;bottom:calc(100% + 8px);right:0;font-size:15px;padding:4px 6px;opacity:.7;}
    /* 쇼츠 모드 전용 상단 바 — 닫기·모드전환·멤버정보·케밥 항상 고정 표시.
       ⚠️ top은 반드시 env(safe-area-inset-top)을 포함해야 함 — #yt-lb-wrap의 padding-top(아래, 영상
       시작 위치를 결정)은 이미 안전영역을 포함해서 계산하는데, 이 4개는 예전에 top:14px 고정값이라
       노치/다이나믹아일랜드 있는 기기에서만 상단바와 영상 시작 위치 사이에 안전영역 높이만큼 큰 틈이
       생겼음(2026-08-14, 사용자 제보 — "여전히 여백이 크다", 안전영역 없는 환경에선 안 보여서 처음엔
       못 잡았던 버그). */
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-close{
      display:flex;position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:12px;right:auto;bottom:auto;
      z-index:2;background:rgba(0,0,0,0.4);border-radius:50%;padding:0;
      width:36px;height:36px;align-items:center;justify-content:center;font-size:16px;opacity:1;}
    #yt-lightbox.lb-shorts:not(.lb-browse) .lb-menu-wrap{
      display:block;position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:12px;z-index:2;}
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-menu-btn{
      background:rgba(0,0,0,0.4);border:none;border-radius:50%;padding:0;
      width:36px;height:36px;color:#fff;font-size:21px;line-height:1;
      cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;display:flex;align-items:center;justify-content:center;}
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-member-info{
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);
      height:36px;max-width:44vw;text-align:center;z-index:1;
      margin-top:0;padding-top:0;border-top:none;pointer-events:none;}
    /* 컨테이너는 pointer-events:none(빈 영역은 세로 스와이프에 투과) 유지하되, 멤버/그룹 텍스트 버튼만
       클릭 활성화 — 브라우즈 모드와 동일하게 눌러서 하프카드를 연다(2026-08-29, 사용자 제보 "쇼츠에선
       카드가 안 열림"). 탭=카드 열기, 스와이프=다음/이전 영상(touch 이벤트는 버블되어 그대로 동작). */
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-member-info .lb-anchor-part{pointer-events:auto;}
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-anchor-chip{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-with-chips{display:none;}
    #yt-lightbox.lb-shorts:not(.lb-browse){align-items:flex-start;}
    /* 상단 고정바(닫기/멤버정보/케밥, top:14px + height:36px = 50px에서 끝남) 바로 밑으로 여백 최소화
       (2026-08-14, 사용자 요청 — "제목줄도 겨우 들어간다"). 예전 58px에서 살짝만 줄임 — 너무 붙이면
       고정바랑 겹쳐 보임. */
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-wrap{
      padding-top:calc(52px + env(safe-area-inset-top, 0px));}
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-video-box.is-shorts{height:min(68vh,530px);}
    /* 이 몰입형 쇼츠 모드는 영상 높이가 위(80vh/660px)와 또 달라서(68vh/530px), 제목 줄 너비도 이 값
       기준으로 다시 맞춰야 함 — 안 그러면 여기서도 위와 같은 폭 불일치가 재발함. */
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-video-box.is-shorts~#yt-lb-info{width:calc(min(68vh,530px) * 9 / 16);}
    /* 회전·음소거·컬렉션·좋아요·(관리자면)편집 버튼 — 가로 영상 재생모드에선 툴바 줄 안에 자연스럽게
       보이는데, 쇼츠 모드는 영상+제목+리액션까지 쌓이고 나면 그 툴바 줄 자체가 화면 아래로 밀려나
       다섯 개 다 사실상 안 보였음(2026-08-14, 사용자 제보 — 처음엔 회전 버튼만 고쳤다가, 같은 툴바
       안의 나머지 버튼도 똑같이 안 보인다는 걸 뒤늦게 발견). 영상 전체를 덮는 투명판 없이, 릴스/틱톡처럼
       영상 오른쪽 가장자리에 작은 원형 버튼만 세로로 쌓아서 각자 자기 자리만 차지하게 한다 — 중앙 탭
       (재생/일시정지)이나 하단 유튜브 자체 진행바와는 안 겹침.
       base: 맨 아래 버튼(회전)의 top — 영상 실제 하단 가장자리(#yt-lb-wrap padding-top + 영상 높이)에서
       90px 위(유튜브 자체 하단 컨트롤바를 가리지 않도록 #yt-lb-speed-zone의 bottom:80px 여유와 맞춤).
       그 위로 버튼당 52px(38px 버튼 + 14px 간격)씩 쌓는다. */
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-rotate,
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-mute,
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-col,
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-flag,
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-scrap,
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-edit{
      position:fixed;right:12px;left:auto;z-index:2;}
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-rotate{
      top:calc(52px + env(safe-area-inset-top, 0px) + min(68vh,530px) - 90px - 0*52px);}
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-mute{
      top:calc(52px + env(safe-area-inset-top, 0px) + min(68vh,530px) - 90px - 1*52px);}
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-col{
      top:calc(52px + env(safe-area-inset-top, 0px) + min(68vh,530px) - 90px - 2*52px);}
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-flag{
      top:calc(52px + env(safe-area-inset-top, 0px) + min(68vh,530px) - 90px - 3*52px);}
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-scrap{
      top:calc(52px + env(safe-area-inset-top, 0px) + min(68vh,530px) - 90px - 4*52px);}
    #yt-lightbox.lb-shorts:not(.lb-browse) #yt-lb-edit{
      top:calc(52px + env(safe-area-inset-top, 0px) + min(68vh,530px) - 90px - 5*52px);}
    /* 모바일은 상하 스와이프로 영상 넘기므로 좌우 버튼은 오히려 잘못된 방향을 암시함 — 숨김 */
    #yt-lb-prev,#yt-lb-next{display:none;}
    #yt-lb-toolbar{justify-content:center;}
    /* 가로(browse) 재생모드의 당겨-닫기 손잡이. ⚠️ 예전엔 `right:0`이라 **영상 상단 전체를 가로지르는
       40px 투명 띠**였고, 유튜브 자체 우상단 버튼(공유·나중에 볼 동영상·더보기)이 정확히 그 아래 깔려
       눌리지 않았다(2026-08-31 사용자 제보 → elementFromPoint로 확인: 우상단 세 지점 전부
       #yt-lb-drag-cap이 먹고 있었음). 오른쪽 120px을 비워 유튜브 버튼을 되살리고, 왼쪽·가운데는
       그대로 남겨 당겨-닫기 제스처를 유지한다(390px 기기 기준 손잡이 폭 약 240px). */
    #yt-lightbox.lb-browse #yt-lb-drag-cap{display:block;position:absolute;top:0;left:0;right:120px;height:40px;z-index:1;-webkit-tap-highlight-color:transparent;}
    #mob-sr .sr-item{padding:8px 22px;font-size:var(--fz-title);line-height:1;}
    .sr-tag{font-size:11px;}
    /* 모바일 큐 시트: 큐 버튼·미리보기 표시, 기존 uplist는 시트로 이동 */
    #yt-lightbox.lb-browse #yt-lb-queue-btn{display:flex;align-items:center;}
    #yt-lightbox.lb-browse #yt-lb-uplist-preview{display:block;margin-top:8px;
      padding-top:10px;border-top:0.5px solid rgba(255,255,255,0.07);}
    #yt-lightbox.lb-browse #yt-lb-uplist:not(.qs-in){display:none!important;}
    #yt-lightbox.lb-browse #yt-lb-uplist.qs-in{margin-top:0!important;border-top:none!important;
      padding-bottom:calc(env(safe-area-inset-bottom,0px) + 20px)!important;}
  }
  #mob-sheet-handle{width:36px;height:4px;background:rgba(255,255,255,0.14);border-radius:2px;margin:10px auto 6px;display:block;}
  /* 카드 뒤로가기 — 시트 손잡이 줄 왼쪽 끝에 고정(2026-08-26).
     카드(#tt/#gc)는 mob-sheet와 mob-card-stack을 오가지만 손잡이 줄은 컨테이너에 붙어 있어서,
     어떤 카드가 올라와도 뒤로가기 위치가 항상 같다(예전엔 카드 제목 옆에 붙어 카드마다 달랐음).
     글리프는 작게 두되 탭 영역은 44×44로 잡는다(애플 HIG 최소 터치 타깃). */
  .sheet-back-btn{
    position:absolute;left:2px;top:0;width:44px;height:44px;z-index:3;
    /* 탭 영역은 44×44로 아래까지 넉넉히 두되, 글리프는 손잡이(y 10~14px)와 같은 줄에 오도록
       위쪽 정렬 + line-height 26px로 시각 중심을 13px에 맞춘다. */
    display:none;align-items:flex-start;justify-content:center;
    background:none;border:none;margin:0;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;
    /* 손잡이 줄과 같은 줄이되 시각 중심이 살짝 아래로 — 실기기(사파리) 피드백 반영 */
    padding:6px 0 0;
    color:rgba(155,178,228,0.82);
    -webkit-tap-highlight-color:transparent;transition:color .15s;
  }
  .sheet-back-btn.on{display:flex;}
  /* 시트가 화면을 꽉 채울 때(bs-full)는 시트에 상단 세이프에어리어만큼 padding이 붙는데, 이 버튼들은
     absolute라 top:0이 **padding box가 아니라 border edge** 기준이다 — 즉 손잡이(일반 흐름)는 노치
     아래로 밀려나는데 버튼만 노치 밑에 그대로 남는다. 브라우저에선 inset이 0이라 안 보이고 PWA(홈
     화면 추가)에서만 드러났다(2026-08-27 제보). 시트 padding-top과 **같은 변수**를 써서 붙여둔다 —
     한쪽만 고치면 또 어긋나므로 값의 출처를 하나로 묶는 게 요점.
     '영상으로 돌아가기'(.sheet-tovid-btn)도 같은 top:0이라 같이 깨져 있었다. */
  #mob-sheet.bs-full>.sheet-back-btn,   #mob-sheet.bs-full>.sheet-tovid-btn,
  #mob-card-stack.bs-full>.sheet-back-btn, #mob-card-stack.bs-full>.sheet-tovid-btn{
    top:var(--safe-top);
  }
  /* 라이트박스 닫기 셰브런(#yt-lb-close-chevron)과 같은 도형을 왼쪽으로 돌려 씀 — 텍스트 글리프(‹)는
     각도가 벌어지고 크기 제어가 안 돼서 SVG로 교체(2026-08-26 사용자 피드백). 앱 전체 아이콘 문법 통일. */
  .sheet-back-btn>svg{display:block;width:20px;height:20px;transform:rotate(90deg);}
  .sheet-back-btn:active{color:rgba(210,228,255,0.95);}
  .sheet-back-btn:focus-visible{outline:2px solid rgba(150,180,255,0.8);outline-offset:-4px;border-radius:10px;}
  #mob-sheet-inner{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;max-height:calc(60vh + var(--sheet-grow,0px) - 24px);overscroll-behavior:contain;width:100%;box-sizing:border-box;position:relative;transition:max-height .32s cubic-bezier(0.32,0.72,0,1);}
  #mob-sheet-inner::-webkit-scrollbar{-webkit-appearance:none;width:2px;}
  #mob-sheet-inner::-webkit-scrollbar-track{background:transparent;}
  #mob-sheet-inner::-webkit-scrollbar-thumb{-webkit-appearance:none;background:rgba(180,200,240,0.07);border-radius:2px;}
  #mob-sheet-inner{scrollbar-width:thin;scrollbar-color:rgba(180,200,240,0.07) transparent;}
  #mob-sheet-inner>#tt,#mob-sheet-inner>#gc{
    position:static!important;display:block!important;
    max-width:100%!important;width:100%!important;
    left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
    border-radius:0!important;box-shadow:none!important;
    border:none!important;background:transparent!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    transform:none!important;transition:none!important;
    box-sizing:border-box!important;overflow-x:hidden!important;
  }
  @media(max-width:768px){
    #tt,#gc{display:none;} /* 카드는 bottom sheet 안에서만 표시 */
    #settings-panel{
      top:calc(48px + env(safe-area-inset-top,0px));bottom:auto;right:12px;left:auto;
      width:252px;border-radius:16px;
      max-height:70vh;overflow-y:auto;
    }
  }
  /* ── Side panel (desktop) ──────────────────────────── */
  #side-panel{
    position:fixed;right:0;top:64px;bottom:0;width:440px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    z-index:63;pointer-events:none;
    transform:translateX(100%);
    visibility:hidden;
    transition:transform 0.26s cubic-bezier(0.32,0,0.15,1),visibility 0s 0.26s;
    background:rgba(16,20,36,0.84);
  }
  #side-panel.open{
    transform:translateX(0);pointer-events:all;
    visibility:visible;
    transition:transform 0.26s cubic-bezier(0.32,0,0.15,1),visibility 0s 0s;
    backdrop-filter:blur(40px) saturate(190%);-webkit-backdrop-filter:blur(40px) saturate(190%);
    box-shadow:-8px 0 40px rgba(0,0,0,0.55);
  }
  #side-panel>#tt,#side-panel>#gc{
    position:relative!important;display:block!important;max-width:100%!important;
    width:100%!important;border-radius:0!important;border:none!important;
    box-shadow:none!important;background:none!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
  }
  #side-panel>#gc{padding-top:44px;}
  #side-panel>#tt{padding-top:40px;}
  @media(max-width:768px){#side-panel{display:none;}}
  /* ── Member panel (그룹 카드 왼쪽 확장) ───────────── */
  #member-panel{
    position:fixed;right:440px;top:64px;bottom:0;width:440px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    z-index:62;pointer-events:none;
    transform:translateX(100%);
    visibility:hidden;
    transition:transform 0.26s cubic-bezier(0.32,0,0.15,1),visibility 0s 0.26s;
    background:rgba(16,20,36,0.84);
  }
  #member-panel.open{
    transform:translateX(0);pointer-events:all;
    visibility:visible;
    transition:transform 0.26s cubic-bezier(0.32,0,0.15,1),visibility 0s 0s;
    backdrop-filter:blur(40px) saturate(190%);-webkit-backdrop-filter:blur(40px) saturate(190%);
    box-shadow:-8px 0 40px rgba(0,0,0,0.45);
  }
  #member-panel>#tt{
    position:relative!important;display:block!important;max-width:100%!important;
    width:100%!important;border-radius:0!important;border:none!important;
    box-shadow:none!important;background:none!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
    padding-top:44px;
  }
  #member-panel>#tt #ttx{display:none!important;}
  /* 접기 탭: member-panel 왼쪽 중간. member-panel 자체와 똑같은 거리(자기 폭 380px)·같은 트랜지션
     커브로 translateX를 같이 줘서, 패널이 슬라이드될 때 탭이 따로 놀지 않고 카드에 붙어서 같이 움직임 */
  #tt-collapse{
    position:fixed;right:880px;top:50%;
    width:22px;height:44px;border:none;border-radius:8px 0 0 8px;
    background:rgba(20,24,44,0.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    color:rgba(160,185,230,0.80);font-size:16px;line-height:1;
    cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:0;z-index:62;
    opacity:0;pointer-events:none;
    transform:translateY(-50%) translateX(440px);
    transition:transform 0.26s cubic-bezier(0.32,0,0.15,1),opacity 0.26s,background 0.15s,color 0.15s;
    display:flex;align-items:center;justify-content:center;
  }
  #member-panel.open~#tt-collapse{opacity:1;pointer-events:all;transform:translateY(-50%) translateX(0);}
  #tt-collapse:hover{background:rgba(40,50,80,0.96);color:rgba(200,220,255,0.95);}
  /* 접기 탭: conn-panel 왼쪽 중간 (동일 패턴, conn-panel 자기 이동거리(280+640px)만큼 같이 슬라이드) */
  #conn-collapse{
    position:fixed;right:1320px;top:50%;
    width:22px;height:44px;border:none;border-radius:8px 0 0 8px;
    background:rgba(20,24,44,0.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    color:rgba(160,185,230,0.80);font-size:16px;line-height:1;
    cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:0;z-index:61;
    opacity:0;pointer-events:none;
    transform:translateY(-50%) translateX(1320px);
    transition:transform 0.26s cubic-bezier(0.32,0,0.15,1),opacity 0.26s,background 0.15s,color 0.15s;
    display:flex;align-items:center;justify-content:center;
  }
  #conn-panel.open~#conn-collapse{opacity:1;pointer-events:all;transform:translateY(-50%) translateX(0);}
  #conn-collapse:hover{background:rgba(40,50,80,0.96);color:rgba(200,220,255,0.95);}
  @media(max-width:768px){#member-panel{display:none;}#tt-collapse{display:none;}#ttx{display:none;}#gcx{display:none;}#conn-collapse{display:none;}}
  /* ── 카드 넓게 보기 (wide mode) ──────────────────────── */
  body.card-wide #side-panel{width:640px;}
  body.card-wide #member-panel{right:640px;}
  body.card-wide #tt-collapse{right:1080px;}
  body.card-wide #conn-panel{right:1080px;transform:translateX(calc(100% + 1080px));}
  body.card-wide #conn-panel.open{transform:translateX(0);}
  body.card-wide #conn-collapse{right:1520px;transform:translateY(-50%) translateX(1520px);}
  body.card-wide #conn-panel.open~#conn-collapse{transform:translateY(-50%) translateX(0);}
  #sp-wide-btn{
    position:absolute;top:10px;left:10px;z-index:62;
    background:none;border:none;padding:4px 6px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;
    color:rgba(145,170,220,0.46);font-size:14px;line-height:1;border-radius:6px;
    transition:color .15s,background .15s;
    display:none;
  }
  #side-panel.open #sp-wide-btn{display:block;}
  #sp-wide-btn:hover{color:rgba(190,210,255,0.85);background:rgba(255,255,255,0.06);}
  /* ── Member card nav ──────────────────────────────── */
  /* 데스크톱: 옆 멤버 이동 화살표를 상단 X(닫기) 버튼과 같은 줄로 이동 */
  #tt-nav{
    position:absolute;top:18px;right:29px;
    display:flex;align-items:center;justify-content:flex-end;
    gap:8px;margin:0;
  }
  .tt-nav-btn{
    background:none;border:none;padding:2px 4px;
    font-size:13px;line-height:1;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;
    color:rgba(160,180,225,0.51);transition:color .18s;
    display:flex;align-items:center;gap:3px;
  }
  .nav-name{display:none;}
  .nav-arr{line-height:1;}
  @media(max-width:768px){
    #tt-nav{display:none!important;}
  }
  .tt-nav-btn:hover{color:rgba(200,218,255,0.75);}
  #tt-counter{display:none;}
  #gc{position:fixed;display:none;max-width:320px;z-index:61;overflow:hidden;pointer-events:all;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
    transition:opacity 0.22s ease,transform 0.22s ease;}
  #gc.gc-enter{opacity:0;transform:translateY(6px) scale(0.97);}
  #gc-bar{height:3px;width:calc(100% - 8px);margin:0 4px;}
  #gc-inner{padding:16px 28px 14px 28px;}
  #gc-bar-mob{display:none;height:3px;width:calc(100% - 8px);border-radius:2px;margin:0 4px 10px;}
  #gc-inner:not(:has(.gc-status-line.show)) #gc-bar-mob{margin-top:12px;}
  @media(max-width:768px){
    #mob-sheet-inner #gc-bar,#mob-card-stack-inner #gc-bar{display:none;}
    #gc-bar-mob{display:block;}
    #mob-sheet-inner #gc-grid,#mob-card-stack-inner #gc-grid{border-top:none;padding-top:0;margin-top:0;}
    /* 모바일에서는 gc-grid의 border-top이 아니라 gc-bar-mob(색상 바)가 "n명이 좋아해요" 아래 구분선 역할을 함 */
    #mob-sheet-inner #gc-status-line,#mob-card-stack-inner #gc-status-line{margin-bottom:3px;}
    #mob-sheet-inner #gc-name-row,
    #mob-sheet-inner #gc-en-row,
    #mob-sheet-inner #gc-status-line,
    #mob-sheet-inner #gc-grid,
    #mob-card-stack-inner #gc-name-row,
    #mob-card-stack-inner #gc-en-row,
    #mob-card-stack-inner #gc-status-line,
    #mob-card-stack-inner #gc-grid{margin-left:6px;}
    #mob-sheet-inner #tt-name-row,
    #mob-sheet-inner #tg-row,
    #mob-sheet-inner .tco,
    #mob-sheet-inner #tt-status-line,
    #mob-sheet-inner #tt-nav,
    #mob-card-stack-inner #tt-name-row,
    #mob-card-stack-inner #tg-row,
    #mob-card-stack-inner .tco,
    #mob-card-stack-inner #tt-status-line,
    #mob-card-stack-inner #tt-nav{margin-left:6px;}
  }
  #gcx{position:absolute;top:11px;right:11px;font-size:15px;color:rgba(150,170,215,0.70);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;line-height:1;}
  #gc-header{display:flex;align-items:center;gap:10px;padding-right:2px;margin-bottom:3px;}
  #gc-header-text{flex:1;min-width:0;}
  #gc-name{font-size:var(--fz-title);font-weight:700;margin-bottom:4px;padding-right:0;letter-spacing:-.02em;color:#d8e4f6;}
  #gc-en{font-size:var(--fz-meta);letter-spacing:.1em;color:#7898b8;margin-bottom:0;text-transform:uppercase;font-weight:500;}
  /* 고인 표기 — 우주에서 멤버가 실제로 발광하는 방식(코어+halo 그라디언트, makeGlowTex 참고)과 같은
     느낌을 내는 작은 발광 점. 이모지/한자 대신 이걸 이름 뒤에 붙인다(2026-08-06, "이모티콘 댕강 붙인
     느낌" 재피드백으로 교체). */
  .deceased-star{display:inline-block;width:8px;height:8px;margin-left:5px;border-radius:50%;
    vertical-align:middle;position:relative;top:-1px;flex-shrink:0;
    background:radial-gradient(circle,rgba(255,255,255,1) 0%,rgba(255,255,255,0.95) 12%,rgba(255,255,255,0.55) 32%,rgba(255,255,255,0.16) 62%,rgba(255,255,255,0) 100%);
    box-shadow:0 0 5px 1.5px rgba(255,255,255,0.42),0 0 11px 3px rgba(190,210,255,0.16);
    animation:deceased-twinkle 2.8s ease-in-out infinite;}
  @keyframes deceased-twinkle{0%,100%{opacity:0.72;transform:scale(0.9);}50%{opacity:1;transform:scale(1.1);}}
  .gc-mem-name .deceased-star{width:6px;height:6px;margin-left:3px;}
  /* 영문 그룹명 + SNS 링크를 기본 한 줄에 두되, 영문이 길어 한 줄에 안 들어가면 링크만 자동으로 다음 줄로
     내린다(flex-wrap) — 글자수를 세지 않고 공간 기준 자동. 보통 3줄(이름 / 영문+링크 / 상태), 영문 긴 그룹만
     4줄(이름 / 영문 / 링크 / 상태). 사진 유무 무관 통일(2026-08-28, 사용자 요청 — 4줄 남발 방지). */
  /* 영문+SNS는 한 줄. 영문(gc-en)이 flex:1로 남은 공간을 채워 SNS를 오른쪽 끝으로 밀고, 영문이 길면 스스로
     줄어(ellipsis) SNS를 다음 줄로 밀지 않는다 — flex-wrap은 짧은 영문(예: CORTIS)도 애매하게 줄바꿈시켜
     폐기(2026-08-28). 4줄이 필요한 긴 영문 그룹은 gc-en-stack으로 명시 지정(index.html). */
  #gc-en-row{display:flex;align-items:center;gap:14px;min-width:0;}
  /* 최후의 안전장치 — #gc-links가 flex-shrink:0이라 영문명이 안 줄면 SNS 아이콘이 카드 밖으로 밀려
     잘린다(#gc는 overflow:hidden이라 조용히 잘린다). 실제 잘림은 아래 .has-gc-pic 규칙으로 막는다. */
  #gc-en{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* 영어 모드에선 영문 서브(gc-en)가 빈 문자열이라(index.html: _enShow=한국어일때만) 숨겨서 gap이 안 생기게 —
     그래야 영어 모드는 이름+링크 2줄 그대로 유지된다(2026-08-28, 사용자: "en 모드는 2줄, 그대로 두면 됨"). */
  #gc-en:empty{display:none;}
  /* SNS를 영문명 반대쪽(오른쪽 끝)으로 밀어 원래 space-between 느낌 복원(2026-08-28, 사용자 요청).
     단 강제 4줄(gc-en-stack, column)에선 오른쪽으로 튀면 어색해서 왼쪽 정렬로 되돌린다. */
  #gc-links{display:flex;align-items:center;gap:9px;flex-shrink:0;}
  #gc-en-row.gc-en-stack #gc-links{margin-left:0;}
  #tt-links{display:flex;align-items:center;gap:7px;flex-shrink:0;}
  #tt-links:not(:empty)::after{content:'·';color:rgba(120,145,195,0.46);font-size:10px;}
  #tt-links .gc-link-icon{width:14px;height:14px;}
  /* 틱톡 아이콘의 원형 콘텐츠가 x=5~15(24단위 기준) 좌측에 치우쳐 있어 우측 여백이 크고(16px 아이콘
     기준 ≈6px), 바로 뒤 나무위키 아이콘과의 시각적 gap이 다른 쌍보다 넓어 보임(2026-08-14, 사용자 제보).
     margin:-7px 기본값보다 더 음수로 설정해 나무위키 아이콘을 왼쪽으로 당겨야 gap이 줄어든다
     (덜 음수인 -3px는 반대 방향 — 오른쪽으로 밀어 gap을 더 늘림). */
  .gc-link-icon-tiktok + .gc-link-icon-namu{margin-left:-9px;}
  /* SNS 아이콘 쌍별 간격 미세 정리(2026-08-28, 사용자 요청 — 기본 gap 9px에서 특정 쌍만 좁힘) */
  .gc-link-icon-instagram + .gc-link-icon-x{margin-left:-5px;}
  .gc-link-icon-x + .gc-link-icon-tiktok{margin-left:-4px;}
  /* 가족관계 — 연결 카드 헤더 바로 아래, 콜라보 목록과 구분되는 별도 섹션(2026-08-13,
     멤버 카드의 ⓘ 팝업에서 이동해옴). */
  .conn-family-sec{margin-bottom:14px;}
  .conn-family-lbl{font-size:var(--fz-meta);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(126,150,204,0.58);margin-bottom:5px;}
  .conn-family-row{padding:7px 9px;border-radius:8px;font-size:12px;color:rgba(200,218,240,0.82);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;
    transition:background .12s,color .12s;}
  .conn-family-row:hover{background:rgba(255,255,255,0.06);color:rgba(220,235,255,0.96);}
  .gc-link-icon{
    display:flex;align-items:center;justify-content:center;
    width:16px;height:16px;color:rgba(150,175,220,0.66);
    transition:color .15s,transform .15s;
    /* 14~16px 아이콘은 손가락으로 정확히 누르기 어렵다는 실측 확인(2026-08-12) — 시각적 크기/간격은
       그대로 두고 패딩+음수 마진으로 실제 탭 가능 영역만 넓힌다(전역 border-box 리셋 아래선 패딩이
       안쪽을 깎아먹으므로 이 요소만 content-box로 되돌림, 음수 마진으로 레이아웃 자리는 원래 크기
       그대로 보존). 배경/보더 없는 순수 아이콘이라 이 트릭이 시각적으로 전혀 티 안 남. */
    box-sizing:content-box;padding:7px;margin:-7px;
  }
  .gc-link-icon:hover{color:rgba(200,220,255,0.95);transform:translateY(-1px);}
  .gc-link-icon svg{width:100%;height:100%;}
  #gc-grid,#tt-info-grid{display:flex;flex-direction:column;gap:1px;margin-top:7px;padding-top:9px;border-top:0.5px solid rgba(255,255,255,0.10);}
  /* 멤버 카드 안에서는 이름(.tn)·그룹칩(#tg-row)이 전부 padding-left:4px로 살짝 들여져 있는데
     이 정보 줄만 0이라 왼쪽으로 삐져나와 보였음 — 같은 4px로 맞춘다(2026-08-10, 사용자 제보) */
  #tt-info-grid{padding-left:4px;}
  #gc-grid .row,#tt-info-grid .row{display:flex;align-items:baseline;}
  #gc-grid .lbl,#tt-info-grid .lbl{font-size:var(--fz-meta);color:#9abcd8;min-width:56px;flex-shrink:0;letter-spacing:.02em;}
  body.lang-en #gc-grid .lbl,body.lang-en #tt-info-grid .lbl{font-size:11px;}
  #gc-mem-label.toggleable{cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;user-select:none;color:rgba(170,205,255,0.80);text-shadow:0 0 4px rgba(140,175,255,0.16),0 0 2px rgba(140,175,255,0.07);transition:color .15s,text-shadow .15s;}
  #gc-mem-label.toggleable:hover{color:#c8dcff;text-shadow:0 0 6px rgba(160,195,255,0.28),0 0 3px rgba(160,195,255,0.14);}
  #gc-mem-label.toggleable.on{color:rgba(170,205,255,0.95);text-shadow:0 0 6px rgba(140,175,255,0.35);}
  .gc-mem-name.gc-mem-inactive{opacity:0.55;}
  #gc-grid .val,#tt-info-grid .val{font-size:var(--fz-title);color:#c0d6f0;font-weight:500;line-height:20px;}
  #gc-grid #gc-fandom,#gc-grid #gc-leader,#tt-info-grid #tt-fandom{
    font-size:11px;font-weight:600;letter-spacing:.04em;
    margin-left:4px; /* 작은 글꼴+글로우 특성상 글자 잉크가 다른 값 줄보다 왼쪽에서 시작해 보정 */
    color:rgba(170,205,255,0.80);
    text-shadow:0 0 4px rgba(140,175,255,0.16),0 0 2px rgba(140,175,255,0.07);
  }
  #gc-grid #gc-mem-row{align-items:baseline;margin-top:0;}
  #gc-grid #gc-unit-row{align-items:center;}
  /* ⚠️ .val 안의 칩/버튼 리스트는 전부 padding-left:4px — gc-fandom·gc-leader의 margin-left:4px 보정과
     같은 선에 오게 맞춤. 새 .row에 flex 리스트 .val을 추가할 때 반드시 여기에 같이 작성할 것. */
  #gc-unit-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px;padding-left:4px;}
  #gc-mem-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px;padding-left:4px;}
  .gc-mem-name{
    cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:2px 6px 2px 0;font-size:13px;font-weight:600;
    background:none;border:none;
    color:rgba(170,210,255,0.95);letter-spacing:.02em;
    text-shadow:0 0 10px rgba(170,210,255,0.6),0 0 4px rgba(170,210,255,0.3);
    transition:color .15s,text-shadow .15s;
  }
  .gc-mem-name:hover{
    color:rgba(220,238,255,1.0);
    text-shadow:0 0 14px rgba(200,228,255,0.8),0 0 6px rgba(200,228,255,0.5);
  }
  @media(min-width:769px){
    /* 모바일은 그대로 두고, 웹에서만 멤버 이름 글로우를 살짝 줄임 */
    .gc-mem-name{text-shadow:0 0 8px rgba(170,210,255,0.53),0 0 3px rgba(170,210,255,0.26);}
    .gc-mem-name:hover{text-shadow:0 0 11px rgba(200,228,255,0.7),0 0 4.5px rgba(200,228,255,0.43);}
  }
  #gc-tv{margin-top:12px;}
  /* ── YouTube 채널 영상 섹션 ─────────────────────────── */
  #gc-ch-vid{margin-top:9px;padding-top:8px;border-top:0.5px solid rgba(255,255,255,0.10);}
  #gc-ch-vid:empty{display:none;}
  /* 멤버 카드 영상 섹션(#tv) — 그룹카드(#gc-ch-vid)와 동일하게 자체 여백+구분선을 둬서, 바로 위 공연 정보
     (tt-concert-row)가 있든 없든 라이브/Shorts 필터 줄까지의 간격이 항상 일정하게 유지되도록 함. */
  #tv{margin-top:9px;padding-top:8px;border-top:0.5px solid rgba(255,255,255,0.10);}
  #tv:empty{display:none;}
  .gc-ch-hd{display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;gap:6px 8px;margin-bottom:8px;}
  .gc-ch-search-wrap{position:relative;margin-bottom:8px;}
  .gc-ch-search{width:100%;box-sizing:border-box;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.10);border-radius:8px;padding:5px 26px 5px 9px;font-size:12px;color:#c8daf0;font-family:inherit;outline:none;transition:border-color .15s,background .15s;}
  .gc-ch-search::placeholder{color:rgba(150,175,215,0.44);}
  .gc-ch-search:focus{border-color:rgba(150,185,255,0.28);background:rgba(255,255,255,0.075);}
  .gc-ch-search-clear{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:none;background:none;border:none;color:rgba(150,175,215,0.51);font-size:14px;padding:2px 4px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;line-height:1;}
  .gc-ch-search-clear.visible{display:block;}
  .gc-ch-search-toggle{background:none;border:none;padding:3px 5px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;color:rgba(145,170,220,0.44);display:flex;align-items:center;border-radius:6px;transition:color .15s,background .15s;flex-shrink:0;}
  .gc-ch-search-toggle:hover,.gc-ch-search-toggle.active{color:rgba(190,210,255,0.82);background:rgba(255,255,255,0.06);}
  .gc-ch-total{font-size:var(--fz-meta);color:rgba(140,165,210,0.25);text-align:center;padding:6px 0 2px;letter-spacing:0.04em;}
  @keyframes gc-ch-spin{to{transform:rotate(360deg);}}
  .gc-ch-sort-wrap{position:relative;flex:0 0 auto;}
  .gc-ch-sort-btn{background:none;border:none;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;color:rgba(155,178,228,0.46);font-size:15px;padding:4px 5px;transition:color .15s;font-family:inherit;line-height:1;}
  .gc-ch-sort-btn:hover,.gc-ch-sort-btn.active{color:#c0d6f0;}
  .gc-ch-sort-menu{display:none;position:absolute;right:0;top:calc(100% + 4px);min-width:114px;border-radius:18px;
    background:rgba(20,24,44,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border:0.5px solid rgba(255,255,255,0.10);box-shadow:0 8px 24px rgba(0,0,0,0.45);z-index:5;overflow:hidden;padding:5px;}
  .gc-ch-sort-menu.open{display:block;}
  .gc-ch-sort-item,.gc-ch-view-toggle{display:flex;align-items:center;gap:6px;width:100%;background:none;border:none;text-align:left;
    color:rgba(200,218,240,0.72);font-size:11px;font-family:inherit;padding:6px 9px;border-radius:12px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .12s,color .12s;}
  .gc-ch-sort-item:hover,.gc-ch-view-toggle:hover{background:rgba(255,255,255,0.07);color:rgba(220,235,255,0.95);}
  .gc-ch-sort-item.active,.gc-ch-view-toggle.active{color:#c8ddff;}
  .gc-ch-sort-item .chk,.gc-ch-view-toggle .chk{width:11px;flex:0 0 auto;font-size:10px;opacity:0;}
  .gc-ch-sort-item.active .chk,.gc-ch-view-toggle.active .chk{opacity:1;}
  .gc-ch-sort-divider{height:0.5px;background:rgba(255,255,255,0.10);margin:4px 5px;}
  .gc-ch-filters{display:flex;gap:4px;flex-wrap:nowrap;flex:1;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    /* 넘치는 알약이 오른쪽 끝에서 글자 중간에 하드 컷 되던 것("Live" 절단, 디자인리뷰 #5) → 가장자리를
       페이드시켜 "잘림"이 아니라 "더 스크롤"로 읽히게 한다. 순수 CSS, 레이아웃 변화 없음. */
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent);}
  .gc-ch-filters::-webkit-scrollbar{display:none;}
  .gc-ch-filter{
    background:linear-gradient(160deg,rgba(255,255,255,0.11),rgba(255,255,255,0.02));
    backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
    border:0.5px solid rgba(255,255,255,0.16);border-radius:20px;padding:9px 12px;
    font-size:11px;color:rgba(192,214,240,0.71);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;
    box-shadow:inset 0 1px 1px rgba(255,255,255,0.2),inset 0 -5px 8px -6px rgba(255,255,255,0.08),0 2px 5px rgba(0,0,0,0.14);
    transition:background .14s,border-color .14s,color .14s,transform .14s,box-shadow .14s;
    white-space:nowrap;flex-shrink:0;
  }
  /* 23px 높이는 손가락 탭 기준으로 얕음(2026-08-12 실측) — 투명 히트존 확장을 시도했으나 이 부모
     (.gc-ch-filters)가 가로 스크롤용 overflow-x:auto라서 CSS 스펙상 overflow-y도 강제로 auto가 되어
     세로 확장분이 그대로 잘려나감(elementFromPoint로 실측 확인, 확장 안 먹힘). 대신 패딩을 4px→6px로
     살짝 늘려 실제 알약 높이 자체를 키움. 2026-09-05(UX감사 #3) 패딩 6→9px로 한 번 더 올림(~33px) —
     부모(.gc-ch-filters)는 height 고정이 없어 자식 높이만큼 같이 커지므로 세로 padding 증가는 안 잘린다
     (예전 '투명 히트존 확장'이 잘린 건 칩 밖으로 삐져나간 영역이라 그랬던 것 — 칩 자체를 키우면 괜찮). */
  /* 차트 목록의 필터 칩 줄(2026-09-04). 칩 자체는 .gc-ch-filter를 그대로 쓴다 — 이 앱에서 "고르는
     알약"은 이미 그 모양이라 새 스타일을 만들면 같은 뜻의 UI가 두 벌이 된다. */
  /* 축이 여럿이면 줄을 나눈다 — 한 줄에 섞으면 어느 알약이 어느 축인지 안 읽힌다. */
  #feed-list-facets{display:flex;flex-direction:column;gap:5px;margin-top:7px;}
  #feed-list-facets .fl-facet-row{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
  #feed-list-facets .fl-facet-lbl{font-size:10px;color:rgba(150,175,225,0.5);margin-right:1px;min-width:22px;}
  .gc-ch-filter:hover{background:linear-gradient(160deg,rgba(255,255,255,0.16),rgba(255,255,255,0.04));border-color:rgba(255,255,255,0.24);color:rgba(220,235,255,0.95);}
  .gc-ch-filter:active{transform:scale(0.93);}
  .gc-ch-filter.active{
    background:linear-gradient(160deg,rgba(190,212,255,0.4),rgba(140,170,230,0.14));
    color:#eef4ff;border-color:rgba(205,222,255,0.5);font-weight:600;
    box-shadow:inset 0 1px 1px rgba(255,255,255,0.4),inset 0 -6px 10px -6px rgba(120,150,220,0.3),0 3px 10px rgba(120,150,220,0.3);
  }
  @media(min-width:769px){
    .gc-ch-filter{font-size:9px;}
    .gc-ch-sort-btn{font-size:13px;}
    /* 데스크톱 사이드 카드 폭이 좁아 필터 알약(전체/MV/라이브/Shorts)이 두 줄로 밀리기 쉬움 —
       돋보기/정렬/새로고침 아이콘 사이 여백을 줄여 필터 쪽에 가로 공간을 더 확보 */
    .gc-ch-hd{gap:6px;}
    .gc-ch-search-toggle{padding:3px 5px;}
    .gc-ch-sort-btn{padding:4px 4px;}
  }
  /* 멤버 카드 전용 Only 토글 — 전체/라이브/Shorts는 서로 배타적인 "모드"라 알약 버튼이지만, Only는 그 위에
     얹는 부가 조건이라 같은 버튼 모양이면 넷 다 같은 종류의 선택지처럼 보여 헷갈림. 텍스트만 둬서 구분. */
  .gc-ch-only{background:none;border:none;padding:4px 2px;margin-left:5px;font-size:11px;font-family:inherit;
    color:rgba(192,214,240,0.51);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:color .14s;flex-shrink:0;white-space:nowrap;}
  .gc-ch-only:hover{color:rgba(220,235,255,0.8);}
  .gc-ch-only.active{color:#c8ddff;text-decoration:underline;text-underline-offset:2px;}
  @media(min-width:769px){.gc-ch-only{font-size:9px;}}
  /* bottom도 탭바를 따라간다(2026-09-18) — 78px로 박아두면 탭바가 숨었을 때 버튼만 허공에 떠 있다.
     ⚠️ max()로 안전영역 하한을 건다 — 탭바가 숨으면 --sheet-bottom이 0이 되는데, 그대로 두면 버튼이
     홈 인디케이터 제스처 영역으로 내려간다(헤드리스 캡처에서 발견). 탭바가 보일 땐 그 값이 이미
     safe-area를 품고 있어(offsetHeight 실측) max가 자연히 탭바 쪽을 고른다. */
  .gc-totop{
    position:fixed;right:16px;bottom:calc(max(var(--sheet-bottom,73px), env(safe-area-inset-bottom,0px)) + 5px);z-index:66;width:36px;height:36px;border-radius:50%;
    background:rgba(255,255,255,0.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:0.5px solid rgba(255,255,255,0.16);color:rgba(220,235,255,0.9);font-size:16px;
    display:none;align-items:center;justify-content:center;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.14),0 4px 14px rgba(0,0,0,0.35);
    /* ⚠️ transition은 여기 한 줄뿐이어야 한다 — 위에 따로 쓰면 이 선언이 덮어써서 bottom이 안 따라간다 */
    transition:background .14s,transform .14s,bottom .32s cubic-bezier(0.32,0.72,0,1);
  }
  .gc-totop:hover{background:rgba(255,255,255,0.14);}
  .gc-totop:active{transform:scale(0.9);}
  /* align-items:stretch(2026-08-10) — start였을 때, 같은 행에서 한쪽만 "함께한 멤버" 줄이 있으면(썸네일
     높이는 JS로 못박혀 있어도 그 아래 제목/함께한 멤버 줄은 auto라 카드 전체 높이가 서로 달라짐) 짧은
     카드가 그 차이만큼 안 늘어나서 두 컬럼이 안 맞아 보이던 문제(사용자 제보 — "계단식으로 어긋남").
     stretch로 바꾸면 짧은 카드도 행 높이만큼 배경이 채워져서 나란히 맞아 보임(썸네일 자체는 JS로 이미
     높이가 고정돼있어 늘어나지 않음, 영향 없음). */
  /* dense: 전체폭(.featured/.gc-ch-wide span 2) 카드가 홀수 위치 뒤에 와서 빈 칸이 생기면 뒤 단일 카드로
     자동 채움 — feed-grid와 동일한 예방책(featured가 맨 위일 땐 채울 구멍이 없어 변화 없음, 2026-08-22). */
  .gc-ch-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;align-items:stretch;grid-auto-flow:dense;}
  .gc-ch-item{position:relative;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;border-radius:6px;overflow:hidden;background:rgba(255,255,255,0.04);transition:opacity .13s;}
  .gc-ch-item:hover{opacity:.78;}
  .gc-ch-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
  .gc-ch-meta{font-size:11px;color:rgba(150,175,215,0.66);padding:0 4px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .gc-ch-item.featured,.gc-ch-item.gc-ch-wide{grid-column:span 2;}
  /* 2026-10-02 유튜브 모바일 홈 방식(사용자 결정) — **가로는 항상 전체폭 1열, 쇼츠는 2열**. 예전 "한 행 =
     같은 비율 2개"에선 반폭 가로(≈188×106)가 옆 쇼츠 2개 행(≈188×334)의 1/3 높이라 가로가 묻혔다.
     JS 배치(_groupMixedVids·resolveTrailing의 짝짓기/넓히기)는 페이지 로딩·쇼츠 판정 보정과 얽혀 있어
     건드리지 않고 CSS로 강제한다: 가로=span 2, 쇼츠는 넓히지 않음(gc-ch-wide 무시), 빈칸은 dense가 뒤 쇼츠로 메움. */
  .gc-ch-grid>.gc-ch-item:not(.is-short){grid-column:span 2;}
  .gc-ch-grid>.gc-ch-item.is-short.gc-ch-wide:not(.featured){grid-column:auto;}
  /* 순위 배지 — 순위와 변동은 다른 정보라 크기·굵기·색으로 위계를 나눈다(2026-09-18).
     baseline 정렬이라 폰트 크기가 달라도 숫자 밑선이 맞는다. tabular-nums로 자릿수가 바뀌어도 안 흔들림. */
  .gc-ch-rank-badge{position:absolute;top:4px;left:4px;z-index:2;display:flex;align-items:baseline;gap:3px;padding:2px 6px;border-radius:4px;background:rgba(10,14,24,0.72);backdrop-filter:blur(2px);font-variant-numeric:tabular-nums;}
  .gc-ch-rank-badge .rk-num{font-size:12px;font-weight:800;color:#fff;line-height:1;}
  .gc-ch-rank-badge .rk-delta{font-size:9px;font-weight:700;line-height:1;letter-spacing:.02em;}
  .gc-ch-rank-badge .rk-delta.rd-up{color:#5ee6a0;}
  .gc-ch-rank-badge .rk-delta.rd-down{color:#ff8a8a;}
  /* NEW는 글자라 숫자보다 폭이 넓다 — 더 작게·트래킹을 줘서 "라벨"로 읽히게 하고 순위를 안 눌리게 */
  .gc-ch-rank-badge .rk-delta.rd-new{font-size:8px;letter-spacing:.06em;color:#ffd166;}
  /* 재생시간 배지(2026-09-16) — 유튜브와 같은 위치(썸네일 우측 하단). 썸네일 아래에 제목·조회수 줄이
     붙는 구조라 bottom으로는 썸네일 밑변에 못 붙는다(아이템 전체 높이 기준이 되어 제목 밑으로 내려감).
     그래서 JS가 썸네일 실측 높이를 style.top에 넣어주고(renderItems/renderOne의 높이 못박기 루프에서
     이미 재는 값 그대로 재사용), 여기서 자기 높이만큼 되올려 밑변에 맞춘다 — 배지 높이를 몰라도 정확함.
     우측 하단을 쓰는 이유: 이 썸네일의 다른 오버레이는 전부 위쪽 모서리에 있다(✎ top-left, ♡/컬렉션
     top-right, 순위 배지 top-left, 선택 ✓ top-right) — 아래쪽만 비어 있어서 겹칠 게 없다. */
  .gc-ch-dur{
    position:absolute;right:4px;z-index:2;transform:translateY(calc(-100% - 4px));
    font-size:10px;font-weight:600;padding:1px 4px;border-radius:3px;letter-spacing:0.2px;
    background:rgba(8,11,20,0.78);color:rgba(240,246,255,0.94);pointer-events:none;
  }
  /* 시청 진행 바 — YouTube 빨간 줄과 동일 컨셉. top은 JS(_placeProgBar)로 이미지 밑선에 맞춤 */
  .gc-ch-prog{
    position:absolute;left:0;height:3px;z-index:3;
    background:#f00;pointer-events:none;display:none;border-radius:0 1px 1px 0;
  }
  .gc-ch-item.is-short .gc-ch-thumb{aspect-ratio:9/16;object-fit:contain;position:relative;z-index:1;}
  /* 세로 원본이 없어 가로 썸네일(좌우 검은 띠 포함)로 폴백한 쇼츠 — cover로 가운데 세로 화면만 남긴다(_shortThumbFallback) */
  .gc-ch-item.is-short .gc-ch-thumb.is-fallback{object-fit:cover;}
  .gc-ch-item.is-short .gc-ch-thumb-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(18px) brightness(0.45);transform:scale(1.08);z-index:0;}
  /* 쇼츠가 대표(featured)로 뽑히면 2열 폭 전체를 채워 9:16 비율로 최대 크기로 표시한다(사용자 요청).
     버튼은 기본값(right/left 4px)을 그대로 사용 — 썸네일이 전체 폭이라 별도 조정 불필요. */
  .gc-ch-item.featured.is-short .gc-ch-thumb{width:100%;aspect-ratio:16/9;}
  /* ↑ 2026-10-02: 대표 쇼츠도 16:9 상자(세로 영상은 contain + 뒤 흐린 배경) — 전체폭 9:16은 ≈680px로 카드를 통째로 먹었다 */
  /* ── 관리자 전용: 영상 출연 멤버 태깅 (그룹/멤버/연결 카드 썸네일 공용) ───────────────── */
  .vid-edit-btn{
    width:22px;height:22px;border-radius:50%;
    background:rgba(10,14,28,0.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border:0.5px solid rgba(255,255,255,0.22);color:rgba(230,238,255,0.95);font-size:11px;
    display:flex;align-items:center;justify-content:center;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;flex-shrink:0;
  }
  .vid-edit-btn:hover{background:rgba(30,40,70,0.85);}
  .gc-ch-item .vid-edit-btn{position:absolute;top:4px;left:4px;z-index:2;}
  /* 모바일은 손가락 탭 대상이라 22px는 너무 작아서 잘 안 눌림 — 터치 타겟 권장 최소치에 가깝게 키움 */
  @media(max-width:768px){.vid-edit-btn{width:32px;height:32px;font-size:15px;}}
  /* ── 어드민 일괄 선택 모드 ── */
  .gc-ch-item.admin-selected,.tv-conn-selectable.admin-selected{outline:2px solid rgba(100,180,255,0.9);outline-offset:-2px;}
  .gc-ch-item.admin-selected::after,.tv-conn-selectable.admin-selected::after{content:'✓';position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:rgba(60,140,255,0.92);color:#fff;font-size:12px;font-weight:700;line-height:20px;text-align:center;z-index:5;pointer-events:none;}
  .gc-ch-sel-btn{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);border-radius:14px;color:rgba(180,200,230,0.75);font-size:11px;padding:3px 9px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;white-space:nowrap;font-family:inherit;}
  /* 어드민 전용 "전체선택" — 같은 필박스 톤이되, admin-bulk-bar와 같은 파란 계열로 구분(2026-08-18) */
  .gc-ch-selall-btn{background:rgba(100,160,255,0.10);border-color:rgba(100,160,255,0.32);color:#9ab8e0;}
  .gc-ch-selall-btn:hover{background:rgba(100,160,255,0.18);}
  .gc-ch-sel-btn.active{background:rgba(100,160,255,0.18);border-color:rgba(100,160,255,0.4);color:#a8d0ff;}
  #admin-bulk-bar,#user-bulk-bar{position:fixed;bottom:76px;left:50%;transform:translateX(-50%);background:rgba(14,20,40,0.96);border:1px solid rgba(100,160,255,0.28);border-radius:22px;padding:9px 16px;display:flex;align-items:center;gap:10px;z-index:9990;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 4px 28px rgba(0,0,0,0.55);font-size:13px;color:#9ab8e0;white-space:nowrap;transition:opacity .18s;}
  #admin-bulk-bar.hidden,#user-bulk-bar.hidden{display:none;}
  /* 관리자 바는 버튼이 최대 7개(편집·이 멤버 제외·이 그룹 제외·함께한 태그 제거·무관·보류·숨김·취소)라
     좁은 화면에서 가로로 넘친다 — 실측(2026-08-27, 헤드리스): 390px 뷰포트에서 바 폭이 일반 조합 475px,
     '이 멤버/그룹 제외'까지 뜨는 최악 조합 679px. left:50%+translateX(-50%)라 양쪽으로 잘려서 '취소'와
     '0개 선택됨'이 화면 밖으로 나가고, 이번에 추가한 '보류'도 닿지 않는다(보류 버튼 추가 전부터 이미
     넘치던 문제였고, 버튼이 하나 늘며 확실히 드러났다).
     → 화면 폭 안으로 묶고 줄바꿈을 허용한다. 버튼 자체의 nowrap(라벨 안 깨짐)은 그대로 두고
       컨테이너만 wrap — 좁은 화면에서 두 줄이 될 뿐 모든 버튼이 화면 안에 남는다.
     ⚠️ left:50%+transform만 두고 wrap을 켜면 **더 나빠진다**: position:fixed에서 right가 auto면 가용
        폭이 (100% - left) = 50vw로 잡혀서, 390px에서 바가 195px로 쪼그라들고 5줄(153px)이 됐다(실측).
        그래서 left/right를 양쪽으로 잡아 화면 폭을 다 쓰게 하고 margin auto로 가운데 정렬한다
        (width:fit-content라 데스크톱처럼 여유 있는 화면에선 예전과 똑같이 내용만큼만 차지한다). */
  #admin-bulk-bar,#user-bulk-bar{
    left:10px;right:10px;transform:none;
    width:fit-content;max-width:calc(100vw - 20px);
    margin-left:auto;margin-right:auto;
    flex-wrap:wrap;justify-content:center;row-gap:7px;
  }
  #user-bulk-col-btn{background:rgba(120,160,255,0.16);border:1px solid rgba(140,180,255,0.32);border-radius:13px;color:#a8c4ff;font-size:12px;padding:5px 14px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;}
  #user-bulk-col-btn:active{opacity:.7;}
  #user-bulk-cancel-btn{background:none;border:none;color:rgba(140,165,210,0.61);font-size:12px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:4px 2px;font-family:inherit;}
  #admin-bulk-edit-btn{background:rgba(120,160,255,0.16);border:1px solid rgba(140,180,255,0.32);border-radius:13px;color:#a8c4ff;font-size:12px;padding:5px 14px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;}
  #admin-bulk-edit-btn:active{opacity:.7;}
  #admin-bulk-hide-btn{background:rgba(255,65,65,0.16);border:1px solid rgba(255,100,100,0.32);border-radius:13px;color:#ff9898;font-size:12px;padding:5px 14px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;}
  #admin-bulk-hide-btn:active{opacity:.7;}
  #admin-bulk-exclude-member-btn,#admin-bulk-exclude-group-btn{background:rgba(255,170,60,0.16);border:1px solid rgba(255,185,90,0.32);border-radius:13px;color:#ffc98a;font-size:12px;padding:5px 14px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;}
  #admin-bulk-exclude-member-btn:active,#admin-bulk-exclude-group-btn:active{opacity:.7;}
  #admin-bulk-clear-collab-btn{background:rgba(160,120,255,0.16);border:1px solid rgba(175,140,255,0.32);border-radius:13px;color:#c4aeff;font-size:12px;padding:5px 14px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;}
  #admin-bulk-clear-collab-btn:active{opacity:.7;}
  #admin-bulk-irrelevant-btn{background:rgba(255,120,170,0.16);border:1px solid rgba(255,140,185,0.32);border-radius:13px;color:#ffa8c8;font-size:12px;padding:5px 14px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;}
  #admin-bulk-irrelevant-btn:active{opacity:.7;}
  #admin-bulk-cancel-btn{background:none;border:none;color:rgba(140,165,210,0.61);font-size:12px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:4px 2px;font-family:inherit;}
  /* tv-sm/tv-big-wrap은 스크랩 버튼이 이미 오른쪽을 쓰므로 왼쪽에 배치 */
  .tv-sm .vid-edit-btn,#tv-big-wrap .vid-edit-btn{position:absolute;top:4px;left:4px;z-index:3;}
  #vid-tag-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:82;display:none;align-items:center;justify-content:center;}
  #vid-tag-overlay.open{display:flex;}
  #vm-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:81;display:none;align-items:center;justify-content:center;}
  #vm-overlay.open{display:flex;}
  #vm-panel{width:min(560px,calc(100vw - 32px));max-height:86vh;display:flex;flex-direction:column;background:rgba(12,16,32,0.98);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-radius:20px;box-shadow:0 20px 64px rgba(0,0,0,0.78);border:0.5px solid rgba(255,255,255,0.10);overflow:hidden;}
  /* 데스크톱은 높이도 고정(2026-08-27, 사용자 요청 "패널 크기가 계속 바뀌기보단 고정이면 더 보기 좋다").
     width는 원래 560px 고정이었고 max-height라 **높이만** 내용에 따라 늘었다 줄었다 했다 — 탭을 옮길 때마다
     패널이 출렁이고, 목록이 짧으면 스크롤바도 사라져 위치 감각이 리셋된다. 모바일은 화면이 좁아 짧은 목록에
     빈 공간을 크게 남기는 게 손해라 기존 max-height 그대로 둔다. */
  @media(min-width:769px){#vm-panel{height:86vh;}}
  #vm-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;flex-shrink:0;border-bottom:0.5px solid rgba(255,255,255,0.07);}
  #vm-hd-title{font-size:13px;font-weight:700;color:rgba(220,230,255,0.9);letter-spacing:-.01em;}
  #vm-close{background:none;border:none;color:rgba(180,195,230,0.56);font-size:18px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:0;line-height:1;}
  /* 세그먼트 컨트롤(hnn-tabs/gp-tab 계열)과 같은 톤 — 공유 배경 컨테이너 + 개별 탭은 무테두리, active만
     배경 강조(2026-08-18, 어드민 패널 전반 스타일 통일). HTML/JS(탭 전환 바인딩)는 그대로, 값만 맞춤. */
  #vm-totals{display:none;font-size:11px;color:rgba(155,178,228,0.58);padding:6px 16px 2px;letter-spacing:.01em;line-height:1.5;flex-shrink:0;}
  #vm-totals.show{display:block;}
  #vm-totals b{color:rgba(205,222,255,0.88);font-weight:700;}
  #vm-totals .vm-totals-refresh{background:none;border:none;color:rgba(155,178,228,0.5);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-size:11px;padding:0 2px;vertical-align:middle;}
  #vm-totals .vm-totals-refresh:hover{color:#c0d6f0;}
  #vm-tabs{display:flex;gap:2px;background:rgba(255,255,255,0.06);border-radius:10px;padding:2px;margin:10px 16px 0;flex-shrink:0;}
  .vm-tab{flex:1;padding:5px 0;border-radius:8px;border:none;background:none;color:rgba(155,178,228,0.61);font-size:11px;font-weight:600;font-family:inherit;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .13s,color .13s;}
  .vm-tab:hover{color:rgba(210,225,255,0.85);}
  .vm-tab.active{background:rgba(255,255,255,0.12);color:rgba(220,230,255,0.95);}
  /* .vm-tab과 같은 톤이지만 별도 클래스 — .vm-tab은 스크립트가 로드 시점에 querySelectorAll로 한 번만
     훑어서 탭 전환 클릭을 바인딩하므로, 그냥 시각적 재사용 목적으로 같은 클래스를 붙이면 "정상만" 버튼도
     탭으로 오인돼 클릭 시 탭이 깨지는 사고가 남(2026-08-14, 구현 중 자체 검토로 발견). */
  .vm-toggle-pill{padding:5px 12px;border-radius:8px;border:0.5px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.04);color:rgba(170,190,225,0.66);font-size:11px;font-weight:600;font-family:inherit;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .13s,color .13s,border-color .13s;}
  .vm-toggle-pill:hover{color:rgba(210,225,255,0.85);}
  .vm-toggle-pill.active{background:rgba(155,178,228,0.18);border-color:rgba(170,195,255,0.35);color:#c8ddff;}
  #vm-search{margin:8px 16px 0;padding:7px 10px;border-radius:8px;background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.12);color:#c8daf0;font-size:12px;font-family:inherit;outline:none;flex-shrink:0;width:calc(100% - 32px);box-sizing:border-box;transition:border-color .15s,background .15s;}
  #vm-search::placeholder{color:rgba(150,175,215,0.44);}
  #vm-search:focus{border-color:rgba(150,185,255,0.28);background:rgba(255,255,255,0.075);}
  /* 1차 검색 결과 안에서 한 번 더 좁혀 찾는 재검색 — 새 DB 조회 없이 이미 받아온 _vmRows를 클라이언트에서만
     한 번 더 필터링한다(2026-08-13, 사용자 요청). */
  #vm-search-2{margin:6px 16px 0;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,0.03);border:0.5px solid rgba(255,255,255,0.08);color:#c8daf0;font-size:11px;font-family:inherit;outline:none;flex-shrink:0;width:calc(100% - 32px);box-sizing:border-box;transition:border-color .15s,background .15s;}
  #vm-search-2::placeholder{color:rgba(150,175,215,0.38);}
  #vm-search-2:focus{border-color:rgba(150,185,255,0.24);background:rgba(255,255,255,0.06);}
  #vm-status{font-size:12px;color:rgba(155,178,228,0.7);padding:5px 16px 0;min-height:16px;flex-shrink:0;}
  #vm-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:8px 16px;border-bottom:0.5px solid rgba(255,255,255,0.08);flex-shrink:0;}
  #vm-select-all-row{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(185,205,245,0.75);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;white-space:nowrap;}
  #vm-count{flex:1;font-size:12px;color:rgba(155,178,228,0.61);}
  /* 툴바 버튼 공통 — 예전엔 버튼마다 같은 선언을 복붙해서 규칙이 없는 버튼(#vm-hold-btn)은 브라우저
     기본 스타일 그대로 튀어나왔고(2026-08-25 사용자 제보 "선택-보류만 못생겼음"), 새 버튼을 추가할
     때마다 같은 실수가 반복됐다. 모양은 여기 한 곳에서, 색만 아래 변형으로 준다. */
  #vm-toolbar>button{border-radius:10px;font-size:12px;padding:6px 12px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;white-space:nowrap;border:1px solid rgba(120,170,255,0.32);background:rgba(120,170,255,0.14);color:rgba(160,195,255,0.9);transition:opacity .12s;}
  #vm-toolbar>button:active{opacity:.7;}
  #vm-toolbar>button:disabled{opacity:.4;cursor:default;}
  /* 초록 = 되돌리는/승인하는 방향(정상으로 되돌리기·승인·확인) */
  #vm-toolbar>#vm-normal-btn,#vm-toolbar>#vm-review-approve-btn,#vm-toolbar>#vm-confirm-btn{background:rgba(100,180,120,0.16);border-color:rgba(100,180,120,0.32);color:rgba(145,220,165,0.9);}
  /* 주황 = 내려놓는 방향(무관·보류·숨김) — 파랑(일반)과 초록(되돌리기)에서 시각적으로 구분.
     셋 다 "카드에서 빼는" 같은 방향이라 한 색으로 묶고, 구분은 라벨이 한다(2026-08-27 정리). */
  #vm-toolbar>#vm-hold-btn,#vm-toolbar>#vm-nomem-btn,#vm-toolbar>#vm-hidden-btn{background:rgba(230,160,90,0.14);border-color:rgba(230,160,90,0.32);color:rgba(240,190,130,0.9);}
  /* 빨강 = 거부(되돌리기 부담이 가장 큰 동작) */
  #vm-toolbar>#vm-review-reject-btn{background:rgba(230,110,110,0.14);border-color:rgba(230,110,110,0.34);color:rgba(245,160,160,0.92);}
  /* 보라 = 원곡 지정(다른 축의 동작이라 색으로 계열을 분리) */
  #vm-toolbar>#vm-coverset-btn{background:rgba(190,120,230,0.16);border-color:rgba(190,120,230,0.42);color:rgba(222,182,242,0.95);}
  #vm-edit-btn{border-radius:10px;font-size:12px;padding:6px 12px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;white-space:nowrap;border:1px solid;background:rgba(120,160,255,0.16);border-color:rgba(140,180,255,0.32);color:#a8c4ff;}
  #vm-edit-btn:active{opacity:.7;}
  #vm-edit-btn:disabled{opacity:.4;cursor:default;}
  /* 스크롤바 상시 표시(2026-08-27, 사용자 요청 "스크롤은 되는데 스크롤바가 없다") — overflow-y:auto만
     두면 맥의 오버레이 스크롤바가 스크롤을 멈추는 순간 사라져서 "어디쯤인지" 단서가 없다. ::-webkit-scrollbar를
     명시하면 오버레이 대신 상시 표시되는 클래식 스크롤바가 된다. #mob-sheet-inner(2px, 알파 0.07)보다
     굵고 진하게 — 저긴 콘텐츠 몰입용이고 여긴 몇 백 건을 훑는 관리 목록이라 위치 파악이 기능이다. */
  #vm-list{overflow-y:scroll;padding:8px 0;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(150,175,230,0.30) transparent;}
  #vm-list::-webkit-scrollbar{width:10px;}
  #vm-list::-webkit-scrollbar-track{background:rgba(255,255,255,0.03);border-radius:5px;}
  #vm-list::-webkit-scrollbar-thumb{background:rgba(150,175,230,0.30);border-radius:5px;border:2px solid transparent;background-clip:content-box;}
  #vm-list::-webkit-scrollbar-thumb:hover{background:rgba(160,185,240,0.48);background-clip:content-box;}
  /* 탭 라벨의 "마지막 조회 시점 개수"(2026-08-27) — 실시간 아님을 시각적으로도 구분되게 흐리고 작게.
     숫자가 붙었다 없어져도 탭 폭이 안 흔들리게 .vm-tab은 flex:1로 이미 균등분할돼 있다. */
  /* 자동 판정분 표시(2026-08-27) — 배지 왼쪽에 점 하나. 텍스트를 붙이면 '무관'/'보류'/'숨김'
     라벨이 밀려 배지 폭이 제각각이 되므로 무형(::before)으로만 구분한다. */
  .vm-flag-btn.vm-flag-auto::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;
    background:currentColor;opacity:.55;margin-right:4px;vertical-align:middle;}
  .vm-tab-count{font-size:10px;font-weight:500;opacity:.62;margin-left:1px;}
  .vm-tab.active .vm-tab-count{opacity:.78;}
  #vm-empty{font-size:12px;color:rgba(155,178,228,0.51);text-align:center;padding:32px 0;}
  .vm-item{display:flex;align-items:center;gap:9px;padding:7px 14px;transition:background .12s;position:relative;}
  .vm-item:hover{background:rgba(255,255,255,0.035);}
  /* 키보드 검수 포커스(2026-09-04) — hover보다 확실히 진해야 "지금 이 행에 1~4가 걸린다"가 읽힌다.
     왼쪽 막대는 스크롤 중에도 눈이 따라가는 앵커. */
  .vm-item.vm-kbd{background:rgba(120,150,255,0.13);}
  .vm-item.vm-kbd::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:rgba(150,180,255,0.9);}
  .vm-item input[type=checkbox]{flex-shrink:0;}
  .vm-thumb{width:72px;flex-shrink:0;aspect-ratio:16/9;object-fit:cover;border-radius:5px;background:rgba(255,255,255,0.06);}
  .vm-info{flex:1;min-width:0;}
  .vm-group{font-size:11px;color:rgba(155,178,228,0.61);margin-bottom:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  .vm-title{font-size:12px;color:rgba(210,225,255,0.80);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  .vm-tags{font-size:10px;color:rgba(150,175,215,0.5);margin-top:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  .vm-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;}
  .vm-flag-btn{font-size:10px;padding:3px 7px;border-radius:7px;border:0.5px solid;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;white-space:nowrap;transition:opacity .12s;}
  .vm-flag-btn:hover{opacity:.75;}
  .vm-flag-normal{background:rgba(100,180,120,0.12);border-color:rgba(100,180,120,0.35);color:rgba(145,220,165,0.9);}
  .vm-flag-nomem{background:rgba(255,160,80,0.12);border-color:rgba(255,160,80,0.35);color:rgba(255,190,120,0.9);}
  .vm-flag-hidden{background:rgba(220,90,90,0.12);border-color:rgba(220,90,90,0.35);color:rgba(240,150,150,0.9);}
  .vm-flag-hold{background:rgba(180,140,230,0.12);border-color:rgba(180,140,230,0.35);color:rgba(205,175,240,0.9);}
  .vm-flag-other{background:rgba(155,178,228,0.12);border-color:rgba(155,178,228,0.35);color:rgba(190,205,240,0.9);}
  .vm-all-btn{background:rgba(80,140,255,0.12);border-color:rgba(100,160,255,0.35);color:rgba(150,200,255,0.9);}
  .vm-flag-mini{position:absolute;right:36px;top:50%;transform:translateY(-50%);background:rgba(13,17,34,0.98);border:0.5px solid rgba(255,255,255,0.12);border-radius:9px;padding:5px;display:flex;flex-direction:column;gap:3px;z-index:10;box-shadow:0 4px 16px rgba(0,0,0,0.5);}
  #vm-ch-inner{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;}
  #vm-ch-tabs{display:flex;gap:5px;padding:8px 16px 0;flex-shrink:0;}
  .vm-ch-tab{flex:1;padding:6px 0;border-radius:8px;border:0.5px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.04);color:rgba(170,190,225,0.66);font-size:11px;font-weight:600;font-family:inherit;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .13s,color .13s,border-color .13s;}
  .vm-ch-tab.active{background:rgba(155,178,228,0.18);border-color:rgba(170,195,255,0.35);color:#c8ddff;}
  #vm-ch-count{font-size:10px;color:rgba(140,165,210,0.56);padding:5px 16px 0;}
  #vm-ch-list{overflow-y:auto;padding:8px 0;flex:1;min-height:0;}
  /* "그외" 탭 안에서 유형(음악/예능/잡지/아이돌개인/드라마영화)별로 걸러보는 칩 — official 탭에선 숨김(2026-08-21) */
  #vm-ch-tier-filter{display:none;flex-wrap:wrap;gap:5px;padding:8px 16px 0;flex-shrink:0;}
  .ec-tier-chip{padding:4px 10px;border-radius:999px;border:0.5px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.04);color:rgba(170,190,225,0.66);font-size:11px;font-weight:600;font-family:inherit;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .13s,color .13s,border-color .13s;white-space:nowrap;}
  .ec-tier-chip.active{background:rgba(155,178,228,0.18);border-color:rgba(170,195,255,0.35);color:#c8ddff;}
  /* "그외" 채널 추가 폼 — DB 기반으로 바뀌면서 코드 수정 없이 여기서 바로 추가 가능(2026-08-12) */
  #vm-ch-add-row{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;border-bottom:0.5px solid rgba(255,255,255,0.08);flex-shrink:0;}
  #vm-ch-add-row input,#vm-ch-add-row select{background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.12);border-radius:8px;color:rgba(220,230,255,0.9);font-size:11px;font-family:inherit;padding:6px 9px;}
  #vm-ch-add-handle{flex:1 1 110px;min-width:90px;}
  #vm-ch-add-name{flex:1 1 110px;min-width:90px;}
  #vm-ch-add-owner{flex:1 1 140px;min-width:110px;}
  /* 동명이인 있을 때만 나타나는 그룹 선택(아이돌개인 유형, 2026-08-21) */
  #vm-ch-add-owner-gko{flex:1 1 140px;min-width:110px;}
  /* 팬 채널의 대상 그룹 입력(2026-08-21) */
  #vm-ch-add-target-gko{flex:1 1 140px;min-width:110px;}
  #vm-ch-add-btn{flex-shrink:0;background:rgba(155,178,228,0.18);border:0.5px solid rgba(170,195,255,0.35);border-radius:8px;color:#c8ddff;font-size:11px;font-weight:600;font-family:inherit;padding:6px 12px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  #vm-ch-add-btn:hover{background:rgba(155,178,228,0.28);}
  /* 대표 채널 체크박스(아이돌개인 행) — 유형/기본카테고리 select 옆에 같은 높이로 붙음 */
  .ec-primary-lbl{flex-shrink:0;display:inline-flex;align-items:center;gap:3px;font-size:11px;color:rgba(190,210,250,0.72);white-space:nowrap;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  .ec-primary-lbl input{margin:0;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  .ec-tier-sel{flex-shrink:0;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.12);border-radius:8px;color:rgba(210,225,255,0.85);font-size:11px;font-family:inherit;padding:3px 5px;}
  .ec-del-btn{flex-shrink:0;font-size:11px;color:rgba(240,150,150,0.85);background:rgba(220,90,90,0.10);border:0.5px solid rgba(220,90,90,0.3);border-radius:8px;padding:3px 8px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;}
  .ec-del-btn:hover{background:rgba(220,90,90,0.2);}
  /* ── 검수 센터 (통합 패널) ── */
  /* ── 관리자 홈(오늘 할 일) ─────────────────────────────────────────────
     데스크톱/모바일 둘 다에서 쓰므로 카드는 auto-fit 그리드로 폭에 따라 1~3열로 접힌다.
     모바일(≤768px)에선 전체화면 시트로 전환 — 좁은 화면에서 가운데 떠 있는 모달은 스크롤이
     답답하고 탭 타겟도 좁아진다. */
  #adm-home-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:81;display:none;align-items:center;justify-content:center;}
  #adm-home-overlay.open{display:flex;}
  #adm-home-panel{width:min(600px,calc(100vw - 24px));max-height:86vh;display:flex;flex-direction:column;background:rgba(12,16,32,0.98);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,0.55);border:0.5px solid rgba(255,255,255,0.10);overflow:hidden;}
  #adm-home-hd{display:flex;align-items:center;gap:10px;padding:14px 16px;flex-shrink:0;border-bottom:0.5px solid rgba(255,255,255,0.08);}
  #adm-home-title{flex:1;font-size:13px;font-weight:700;color:rgba(220,230,255,0.9);letter-spacing:-.01em;}
  #adm-home-close{background:none;border:none;padding:4px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;color:rgba(150,175,225,0.55);display:flex;align-items:center;}
  #adm-home-close:active{color:rgba(200,218,255,0.85);transform:scale(0.9);}
  #adm-home-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 16px 20px;}
  #adm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
  .adm-card{background:rgba(255,255,255,0.04);border:0.5px solid rgba(255,255,255,0.09);border-radius:12px;padding:12px 13px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .13s;-webkit-tap-highlight-color:transparent;}
  .adm-card:active{background:rgba(255,255,255,0.08);}
  .adm-card.adm-card-static{cursor:default;}
  .adm-card-lbl{font-size:11px;color:rgba(150,175,225,0.62);letter-spacing:.02em;}
  .adm-card-num{font-size:22px;font-weight:700;color:rgba(225,236,255,0.95);line-height:1.25;margin-top:3px;font-variant-numeric:tabular-nums;}
  .adm-card-num.adm-zero{color:rgba(150,175,225,0.45);font-weight:600;}
  .adm-card-num.adm-warn{color:rgba(255,190,120,0.95);}
  .adm-card-sub{font-size:10px;color:rgba(140,165,215,0.55);margin-top:2px;}
  .adm-sec-lbl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(120,148,205,0.55);margin:18px 0 6px;}
  #adm-routine-desc{font-size:11px;line-height:1.55;color:rgba(155,178,228,0.6);margin-bottom:9px;}
  #adm-routine-btns{display:flex;flex-wrap:wrap;gap:8px;}
  #adm-routine-btns>button{border-radius:10px;font-size:12px;padding:9px 14px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;white-space:nowrap;border:1px solid rgba(120,170,255,0.32);background:rgba(120,170,255,0.14);color:rgba(180,208,255,0.95);}
  #adm-routine-btns>#adm-run-routine{background:rgba(100,180,120,0.18);border-color:rgba(100,180,120,0.36);color:rgba(150,225,170,0.95);font-weight:600;}
  #adm-routine-btns>#adm-stop-routine{background:rgba(230,110,110,0.14);border-color:rgba(230,110,110,0.34);color:rgba(245,160,160,0.92);}
  #adm-routine-btns>button:active{opacity:.7;}
  #adm-routine-btns>button:disabled{opacity:.4;cursor:default;}
  #adm-cleanup-desc{font-size:11px;line-height:1.55;color:rgba(155,178,228,0.6);margin-bottom:9px;}
  #adm-cleanup-steps{margin:6px 0 0;padding-left:18px;}
  #adm-cleanup-steps li{margin:1px 0;}
  #adm-cleanup-steps b{font-weight:600;color:rgba(185,205,245,0.85);}
  #adm-cleanup-btns{display:flex;flex-wrap:wrap;gap:8px;}
  #adm-cleanup-btns>button{border-radius:10px;font-size:12px;padding:9px 14px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;white-space:nowrap;border:1px solid rgba(120,170,255,0.32);background:rgba(120,170,255,0.14);color:rgba(180,208,255,0.95);}
  #adm-cleanup-btns>button:active{opacity:.7;}
  #adm-cleanup-btns>button:disabled{opacity:.4;cursor:default;}
  #adm-routine-log{margin-top:12px;font-size:11px;line-height:1.6;color:rgba(175,196,240,0.78);white-space:pre-wrap;word-break:break-word;}
  #adm-routine-log:empty{display:none;}
  .adm-log-step{padding:7px 10px;border-radius:9px;background:rgba(255,255,255,0.035);margin-bottom:6px;border-left:2px solid rgba(120,170,255,0.4);}
  .adm-log-step.adm-log-done{border-left-color:rgba(100,180,120,0.6);}
  .adm-log-step.adm-log-fail{border-left-color:rgba(230,110,110,0.6);}
  @media(max-width:768px){
    #adm-home-panel{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;border:none;}
    #adm-home-hd{padding-top:calc(env(safe-area-inset-top,0px) + 14px);}
    #adm-home-body{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 28px);}
    #adm-cards{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));}
    #adm-routine-btns>button,#adm-cleanup-btns>button{flex:1 1 100%;padding:12px 14px;font-size:13px;}
  }
  #hnn-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:81;display:none;align-items:center;justify-content:center;}
  #hnn-overlay.open{display:flex;}
  #hnn-panel{width:min(540px,calc(100vw - 24px));max-height:86vh;display:flex;flex-direction:column;background:rgba(12,16,32,0.98);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-radius:20px;box-shadow:0 20px 64px rgba(0,0,0,0.78);border:0.5px solid rgba(255,255,255,0.10);overflow:hidden;}
  #hnn-hd{display:flex;align-items:center;gap:10px;padding:14px 16px 0;flex-shrink:0;}
  #hnn-hd-title{font-size:13px;font-weight:700;color:rgba(220,230,255,0.9);letter-spacing:-.01em;flex-shrink:0;}
  #hnn-tabs{display:flex;flex:1;gap:2px;background:rgba(255,255,255,0.06);border-radius:10px;padding:2px;margin:0 6px;}
  .hnn-tab{flex:1;background:none;border:none;border-radius:8px;padding:5px 8px;font-size:12px;font-family:inherit;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;color:rgba(155,178,228,0.61);transition:background .15s,color .15s;white-space:nowrap;}
  .hnn-tab.active{background:rgba(255,255,255,0.12);color:rgba(220,230,255,0.95);font-weight:600;}
  #hnn-close{background:none;border:none;color:rgba(180,195,230,0.56);font-size:18px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:0;line-height:1;flex-shrink:0;}
  #hnn-close:hover{color:rgba(220,230,255,0.85);}
  .hnn-tab-sep{height:0.5px;background:rgba(255,255,255,0.07);flex-shrink:0;margin-top:10px;}
  .hnn-pane{display:none;flex:1;min-height:0;overflow-y:auto;flex-direction:column;}
  .hnn-pane.active{display:flex;}
  .hnn-auto-status{font-size:12px;color:rgba(155,178,228,0.71);padding:10px 18px 4px;min-height:18px;flex-shrink:0;}
  /* 탭 공통 섹션 라벨 */
  .hnn-sec-lbl{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(155,178,228,0.46);padding:12px 18px 4px;flex-shrink:0;}
  /* 원곡 커버 탭 */
  #wonkok-status{font-size:12px;color:rgba(155,178,228,0.71);padding:10px 18px 4px;min-height:18px;flex-shrink:0;}
  #wonkok-toolbar{display:flex;align-items:center;gap:10px;padding:8px 18px;border-bottom:0.5px solid rgba(255,255,255,0.07);flex-shrink:0;}
  #wonkok-select-all-row{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(185,205,245,0.75);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;white-space:nowrap;}
  #wonkok-count{flex:1;font-size:11px;color:rgba(155,178,228,0.51);}
  #wonkok-apply-btn{background:rgba(255,190,140,0.14);border:1px solid rgba(255,190,140,0.28);border-radius:10px;color:#ffd8ab;font-size:12px;padding:6px 14px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;white-space:nowrap;font-weight:600;}
  #wonkok-apply-btn:hover{background:rgba(255,190,140,0.22);}
  #wonkok-apply-btn:active{opacity:.7;}
  #wonkok-apply-btn:disabled{opacity:.35;cursor:default;}
  #wonkok-list{padding:4px 0;}
  .wk-item{display:flex;align-items:center;gap:10px;padding:8px 16px;transition:background .12s;}
  .wk-item:hover{background:rgba(255,255,255,0.03);}
  .wk-item input[type=checkbox]{flex-shrink:0;accent-color:rgba(255,190,140,0.9);}
  .wk-thumb{width:80px;flex-shrink:0;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:rgba(255,255,255,0.06);}
  .wk-info{flex:1;min-width:0;}
  .wk-group{font-size:10px;color:rgba(155,178,228,0.56);margin-bottom:2px;}
  .wk-group b{color:rgba(255,190,140,0.85);font-weight:600;}
  .wk-multigrp-badge{display:inline-block;font-size:10px;font-weight:600;color:rgba(255,150,150,0.95);background:rgba(255,90,90,0.14);border-radius:4px;padding:1px 5px;margin-right:4px;vertical-align:middle;}
  .wk-title{font-size:12px;color:rgba(210,225,255,0.78);line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  #wonkok-empty{font-size:12px;color:rgba(155,178,228,0.46);text-align:center;padding:40px 0;}
  /* 태깅 품질 탭 */
  #hnn-wl-sec{flex-shrink:0;padding:0 18px 12px;}
  #hnn-wl-list{display:block;}
  .hnn-wl-sublbl{font-size:10px;color:rgba(155,178,228,0.46);margin:6px 0 4px;}
  .hnn-wl-sublbl:first-child{margin-top:0;}
  .hnn-wl-row{display:flex;flex-wrap:wrap;gap:6px;}
  .hnn-wl-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.10);border-radius:7px;padding:3px 4px 3px 9px;font-size:11px;color:rgba(200,215,245,0.8);}
  .hnn-wl-chip.hnn-wl-fixed{opacity:.5;padding-right:9px;}
  .hnn-wl-name{cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  .hnn-wl-name:hover{color:#fff;text-decoration:underline;text-underline-offset:2px;}
  .hnn-wl-rm{background:none;border:none;color:rgba(255,150,150,0.7);font-size:13px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:0 4px;line-height:1;font-family:inherit;}
  .hnn-wl-rm:hover{color:rgba(255,180,180,0.95);}
  /* 기타 태깅 예외 규칙(성씨제외/동시매칭무시/리터럴전용) — 흔한단어 보호 목록과 동일 톤 재사용 */
  #hnn-atm-sec{flex-shrink:0;padding:0 18px 12px;}
  .hnn-atm-sub{margin-top:10px;}
  .hnn-atm-sub-lbl{font-size:10px;color:rgba(155,178,228,0.46);margin:0 0 4px;}
  .hnn-atm-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
  .hnn-atm-list:empty::after{content:'없음';font-size:11px;color:rgba(155,178,228,0.35);}
  .hnn-atm-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.10);border-radius:7px;padding:3px 4px 3px 9px;font-size:11px;color:rgba(200,215,245,0.8);}
  .hnn-atm-chip.hnn-atm-fixed{opacity:.5;padding-right:9px;}
  .hnn-atm-rm{background:none;border:none;color:rgba(255,150,150,0.7);font-size:13px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:0 4px;line-height:1;font-family:inherit;}
  .hnn-atm-rm:hover{color:rgba(255,180,180,0.95);}
  .hnn-atm-add-row{display:flex;gap:6px;}
  .hnn-atm-add-row input{flex:1;min-width:0;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.12);border-radius:6px;padding:5px 8px;font-size:11px;color:#e8eefc;font-family:inherit;}
  .hnn-atm-add-row input::placeholder{color:rgba(155,178,228,0.35);}
  .hnn-atm-add-row button{flex-shrink:0;background:rgba(140,170,255,0.14);border:0.5px solid rgba(140,170,255,0.3);border-radius:6px;padding:5px 12px;font-size:11px;color:#cdd8ff;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;}
  .hnn-atm-add-row button:hover{background:rgba(140,170,255,0.22);}
  #hnn-dup-sec{flex-shrink:0;padding:10px 18px 12px;border-bottom:0.5px solid rgba(255,255,255,0.07);}
  #hnn-dup-list{max-height:160px;overflow-y:auto;margin-top:6px;}
  /* 이름 라벨+칩을 한 줄(flex-wrap)로 압축 — 127개 그룹이 전부 2줄씩 차지하던 걸 줄임(2026-08-11).
     이름 라벨은 톤을 낮추고 cursor/hover 없이 둬서 클릭 가능한 칩과 시각적으로 확실히 구분되게 함
     (클릭해도 반응 없어 헷갈린다는 제보 — 원래부터 클릭 대상이 아니었음). */
  .hnn-dup-item{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:4px 0;border-top:0.5px solid rgba(255,255,255,0.05);}
  .hnn-dup-item:first-child{border-top:none;}
  .hnn-dup-name{font-size:12px;font-weight:600;color:rgba(150,170,205,0.66);flex-shrink:0;}
  .hnn-dup-person{font-size:11px;color:rgba(170,195,255,0.85);background:rgba(120,160,255,0.10);border:0.5px solid rgba(140,180,255,0.24);border-radius:8px;padding:2px 7px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  .hnn-dup-person:hover{background:rgba(120,160,255,0.20);color:#fff;}
  #hnn-dup-empty{font-size:11px;color:rgba(155,178,228,0.46);padding:4px 0;}
  /* 그룹 우선순위(어드민 전용, 유저 비노출) — 검수 센터(#hnn-overlay)와 같은 팝업 톤 재사용 */
  #gp-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:81;display:none;align-items:center;justify-content:center;}
  #gp-overlay.open{display:flex;}
  #gp-panel{width:min(460px,calc(100vw - 24px));max-height:86vh;display:flex;flex-direction:column;background:rgba(12,16,32,0.98);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-radius:20px;box-shadow:0 20px 64px rgba(0,0,0,0.78);border:0.5px solid rgba(255,255,255,0.10);overflow:hidden;}
  #gp-hd{display:flex;align-items:center;gap:10px;padding:14px 16px;flex-shrink:0;border-bottom:0.5px solid rgba(255,255,255,0.07);}
  #gp-hd-title{font-size:13px;font-weight:700;color:rgba(220,230,255,0.9);letter-spacing:-.01em;flex:1;}
  #gp-close{background:none;border:none;color:rgba(180,195,230,0.56);font-size:18px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:0;line-height:1;flex-shrink:0;}
  #gp-close:hover{color:rgba(220,230,255,0.85);}
  #gp-search-wrap{padding:10px 16px 0;flex-shrink:0;}
  #gp-search{width:100%;background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.12);border-radius:8px;padding:7px 10px;font-size:12px;color:#c0d6f0;font-family:inherit;outline:none;box-sizing:border-box;}
  #gp-search::placeholder{color:rgba(155,178,228,0.41);}
  #gp-search:focus{border-color:rgba(155,178,228,0.4);}
  #gp-tabs{display:flex;gap:2px;background:rgba(255,255,255,0.06);border-radius:10px;padding:2px;margin:10px 16px 0;flex-shrink:0;}
  .gp-tab{flex:1;background:none;border:none;border-radius:8px;padding:5px 4px;font-size:12px;font-family:inherit;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;color:rgba(155,178,228,0.61);transition:background .15s,color .15s;white-space:nowrap;}
  .gp-tab.active{background:rgba(255,255,255,0.12);color:rgba(220,230,255,0.95);font-weight:600;}
  .gp-tab-cnt{font-size:10px;font-weight:400;opacity:0.7;margin-left:2px;}
  #gp-count{font-size:11px;color:rgba(155,178,228,0.46);padding:8px 16px 0;flex-shrink:0;}
  #gp-list{flex:1;min-height:0;overflow-y:auto;padding:6px 10px 12px;}
  .gp-item{display:flex;align-items:center;gap:8px;padding:6px 6px;border-top:0.5px solid rgba(255,255,255,0.05);}
  .gp-item:first-child{border-top:none;}
  .gp-info{flex:1;min-width:0;}
  .gp-name{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;}
  .gp-name-text{color:rgba(215,225,250,0.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
  .gp-disbanded-tag{flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:.04em;color:rgba(200,150,150,0.7);background:rgba(255,100,100,0.10);border:0.5px solid rgba(255,100,100,0.22);border-radius:4px;padding:1px 4px;}
  .gp-survival-tag{flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:.04em;color:rgba(150,190,220,0.75);background:rgba(100,180,255,0.10);border:0.5px solid rgba(100,180,255,0.22);border-radius:4px;padding:1px 4px;}
  .gp-sub{font-size:11px;color:rgba(155,178,228,0.51);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .gp-level-sel{display:flex;gap:3px;flex-shrink:0;}
  .gp-lvl-btn{background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.10);border-radius:6px;padding:4px 8px;font-size:11px;font-weight:700;color:rgba(155,178,228,0.56);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;transition:background .15s,color .15s;}
  .gp-lvl-btn:hover{background:rgba(255,255,255,0.10);}
  .gp-lvl-btn.gp-lvl-clear{font-weight:400;padding:4px 6px;}
  .gp-lvl-btn[data-lvl="A"].active{background:rgba(255,120,120,0.22);border-color:rgba(255,120,120,0.4);color:#ffb3b3;}
  .gp-lvl-btn[data-lvl="B"].active{background:rgba(255,190,140,0.22);border-color:rgba(255,190,140,0.4);color:#ffd8ab;}
  .gp-lvl-btn[data-lvl="C"].active{background:rgba(155,178,228,0.22);border-color:rgba(155,178,228,0.4);color:#c0d6f0;}
  .gp-lvl-btn[data-lvl=""].active{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.24);color:rgba(220,230,255,0.85);}
  #gp-empty{font-size:12px;color:rgba(155,178,228,0.46);text-align:center;padding:40px 0;}

  /* ── 어드민 도킹 모드 (데스크톱 전용, 2026-08-28) ────────────────────────────────
     관리자 홈/검수 센터/영상 관리/그룹 우선순위는 원래 z81 중앙 모달이라, 열면 카드(#gc:61,
     #side-panel/#member-panel:62~63)를 항상 덮었다. 검수하면서 카드를 못 보니 "열고 확인하고 닫고"
     왕복이 생기고, 대시보드 카드조차 자기를 닫아야(_admHomeClose) 다음 패널을 열 수 있었다.
     → z58로 카드 **밑에** 깔고 좌측에 도킹한다. 카드는 우측 앵커(#side-panel right:0,
     #member-panel right:640px)라 가로로 겹치지 않는다.

     구현 메모: 오버레이 루트는 inset:0 그대로 두되 배경/블러를 지우고 pointer-events:none으로
     투과시킨다. 패널만 pointer-events:auto. 이렇게 하면
       · window pointerdown/click 가드의 `e.target.closest('[data-modal]')`는 패널 클릭이
         루트까지 버블링되므로 그대로 동작 (배경 클릭은 애초에 루트에 안 닿음 → 우주 조작 정상)
       · 호버 툴팁 가드의 elementsFromPoint는 pointer-events:none 요소를 제외하므로
         루트는 안 잡히고 패널만 잡힌다 → 패널 위에선 툴팁 숨김, 우주 위에선 툴팁 정상
       · `e.target===e.currentTarget` 백드롭 클릭 닫기 핸들러들은 루트에 이벤트가 안 닿아
         자동으로 무력화된다 (도킹은 배경 클릭으로 닫히면 안 되므로 의도한 결과)
     즉 data-modal 속성/가드 코드는 손대지 않아도 도킹 의미론이 그대로 성립한다.
     ⚠️ 도킹 패널에 _bringToFront()를 쓰면 안 된다 — 카드보다 위로 올라가 목적이 뒤집힌다. */
  @media(min-width:769px){
    #adm-home-overlay,#hnn-overlay,#vm-overlay,#gp-overlay{
      background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
      z-index:58;pointer-events:none;
      align-items:stretch;justify-content:flex-start;
      padding:58px 0 12px 12px;
    }
    #adm-home-panel,#hnn-panel,#vm-panel,#gp-panel{
      pointer-events:auto;
      width:min(520px,44vw);max-width:none;
      height:100%;max-height:none;
      box-shadow:0 12px 44px rgba(0,0,0,0.6);
    }
    /* 도킹 폭에선 카드 3열이 너무 좁다 — 2열로 */
    #adm-cards{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}

    /* 좌측 슬롯 충돌 해소 — 탐험 패널과 저널 사이드바가 둘 다 left:0·width:300px·z66으로 같은 자리를
       쓴다(게다가 탐험 패널은 세션마다 자동으로 열린다). 도킹 z58은 그 밑이라 그냥 두면 패널 왼쪽
       300px가 통째로 가려진다 — 실제로 첫 스크린샷에서 vm 탭 줄이 잘려 나왔다. 어드민 도킹 중에는
       좌측 패널을 접어둔다. `.open` 클래스는 그대로 두므로(transform만 되돌림) 도킹을 닫는 순간
       원래 transition을 타고 다시 미끄러져 나온다 — 상태를 따로 저장·복원할 필요가 없다.
       줌 컨트롤(#zoom-ctrl, z50)도 도킹 밑에 깔리므로 폭만큼 옆으로 민다
       (기존 `#journal-sidebar.open~#zoom-ctrl{left:318px}`와 같은 대응). */
    body:has(#adm-home-overlay.open,#hnn-overlay.open,#vm-overlay.open,#gp-overlay.open) #feed-overlay,
    body:has(#adm-home-overlay.open,#hnn-overlay.open,#vm-overlay.open,#gp-overlay.open) #journal-sidebar{
      transform:translateX(-300px);
    }
    body:has(#adm-home-overlay.open,#hnn-overlay.open,#vm-overlay.open,#gp-overlay.open) #zoom-ctrl{
      left:calc(min(520px,44vw) + 24px);
    }
  }
  /* 도킹 패널 헤더의 "관리자 홈으로" 되돌아가기 — 홈과 슬롯을 공유하므로 진입 후 복귀 경로가 필요 */
  .adm-back-home{background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.10);border-radius:7px;color:rgba(200,215,245,0.72);font-size:12px;line-height:1;padding:5px 7px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;flex-shrink:0;margin-left:auto;margin-right:8px;}
  .adm-back-home:hover{background:rgba(255,255,255,0.10);color:rgba(220,232,255,0.92);}
  @media(max-width:768px){.adm-back-home{display:none;}}

  #fbv-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:81;display:none;align-items:center;justify-content:center;}
  #fbv-overlay.open{display:flex;}
  #fbv-panel{width:min(460px,calc(100vw - 24px));max-height:86vh;display:flex;flex-direction:column;background:rgba(12,16,32,0.98);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-radius:20px;box-shadow:0 20px 64px rgba(0,0,0,0.78);border:0.5px solid rgba(255,255,255,0.10);overflow:hidden;}
  #fbv-hd{display:flex;align-items:center;gap:10px;padding:14px 16px;flex-shrink:0;border-bottom:0.5px solid rgba(255,255,255,0.07);}
  #fbv-hd-title{font-size:13px;font-weight:700;color:rgba(220,230,255,0.9);letter-spacing:-.01em;flex:1;}
  #fbv-close{background:none;border:none;color:rgba(180,195,230,0.56);font-size:18px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:0;line-height:1;}
  #fbv-tabs{display:flex;gap:2px;background:rgba(255,255,255,0.06);border-radius:10px;padding:2px;margin:10px 16px 0;flex-shrink:0;}
  .fbv-tab{flex:1;background:none;border:none;border-radius:8px;padding:5px 4px;font-size:12px;font-family:inherit;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;color:rgba(155,178,228,0.61);transition:background .15s,color .15s;white-space:nowrap;}
  .fbv-tab.active{background:rgba(255,255,255,0.12);color:rgba(220,230,255,0.95);font-weight:600;}
  .fbv-tab-cnt{font-size:10px;font-weight:400;opacity:0.7;margin-left:2px;}
  #fbv-count{font-size:11px;color:rgba(155,178,228,0.46);padding:8px 16px 0;flex-shrink:0;}
  #fbv-list{flex:1;min-height:0;overflow-y:auto;padding:6px 10px 12px;}
  .fbv-item{padding:9px 8px;border-top:0.5px solid rgba(255,255,255,0.05);}
  .fbv-item:first-child{border-top:none;}
  .fbv-item-top{display:flex;align-items:center;gap:6px;margin-bottom:5px;}
  .fbv-cat-tag{flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.02em;border-radius:4px;padding:2px 6px;}
  .fbv-cat-bug{color:#ffb3b3;background:rgba(255,120,120,0.14);border:0.5px solid rgba(255,120,120,0.3);}
  .fbv-cat-suggest{color:#ffd8ab;background:rgba(255,190,140,0.14);border:0.5px solid rgba(255,190,140,0.3);}
  .fbv-cat-etc{color:#c0d6f0;background:rgba(155,178,228,0.14);border:0.5px solid rgba(155,178,228,0.3);}
  .fbv-date{font-size:10px;color:rgba(155,178,228,0.42);flex:1;}
  .fbv-del-btn{flex-shrink:0;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.10);border-radius:6px;padding:3px 7px;font-size:10px;color:rgba(155,178,228,0.56);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;}
  .fbv-del-btn:hover{background:rgba(255,100,100,0.14);border-color:rgba(255,100,100,0.3);color:#ffb3b3;}
  .fbv-msg{font-size:12px;color:rgba(215,225,250,0.9);line-height:1.45;white-space:pre-wrap;word-break:break-word;}
  .fbv-meta{margin-top:5px;font-size:10px;color:rgba(155,178,228,0.42);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #fbv-empty{font-size:12px;color:rgba(155,178,228,0.46);text-align:center;padding:40px 0;}
  /* z-index:65 — 카드시트(#mob-sheet:63, #mob-card-stack:64, #gc:61)보다 위에 있어야 카드에서 컬렉션을
     탭했을 때 오버레이가 카드 앞으로 뜸. #yt-lightbox(67)보다는 아래 유지 — 이 목록 안 영상을 탭하면
     라이트박스가 이 오버레이 위로 열리는 구조라 67보다 낮아야 함. */
  #feed-list-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:65;display:none;align-items:center;justify-content:center;}
  #feed-list-overlay.open{display:flex;}
  #feed-list-panel{width:min(560px,calc(100vw - 32px));max-height:82vh;display:flex;flex-direction:column;background:rgba(13,17,34,0.97);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-radius:18px;box-shadow:0 16px 56px rgba(0,0,0,0.72);border:0.5px solid rgba(255,255,255,0.10);}
  #feed-list-hd{display:flex;align-items:flex-start;justify-content:space-between;padding:16px 18px 12px;flex-shrink:0;gap:10px;}
  #feed-list-hd-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
  #feed-list-hd-title{font-size:var(--fz-title);font-weight:600;color:rgba(220,230,255,0.9);}
  #feed-list-sub{font-size:11px;color:rgba(155,178,228,0.61);margin-top:3px;}
  /* 콜렉션 한줄평(선택 입력) — 목록/칩처럼 좁은 자리엔 넣을 공간이 없어서 상세를 열었을 때만 보여준다
     (2026-08-12, 사용자 요청). 내 컬렉션일 때만 연필 아이콘으로 수정 가능, 남의 공개 컬렉션은 있을
     때만(비어있으면 행 자체를 숨김) 읽기 전용으로 노출. */
  #feed-list-desc-row{display:flex;align-items:center;gap:6px;margin-top:5px;}
  #feed-list-desc{font-size:var(--fz-body);color:rgba(200,215,250,0.72);line-height:1.4;}
  #feed-list-desc.placeholder{color:rgba(140,165,220,0.41);font-style:italic;}
  #feed-list-desc-edit{background:none;border:none;color:rgba(140,165,220,0.38);font-size:11px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:1px 4px;flex-shrink:0;}
  #feed-list-desc-edit:hover{color:rgba(180,200,240,0.66);}
  /* 히트영역은 36px로 넉넉히(모바일 탭 타깃), 아이콘 자체는 은은한 톤 유지(2026-08-29 사용자 제보 "닫기버튼
     너무 작음"). 음수 margin으로 시각 위치는 유지한 채 터치 영역만 넓힌다. */
  #feed-list-close{background:none;border:none;color:rgba(180,195,230,0.55);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;line-height:1;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;margin:-8px -8px -8px 0;border-radius:50%;-webkit-tap-highlight-color:transparent;}
  #feed-list-close:active{background:rgba(255,255,255,0.08);}
  #feed-list-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
  /* 다른 유저의 공개 컬렉션을 열었을 때만 보이는 줄 — 작성자 표시 + 내 라이브러리로 저장(복제)
     (2026-08-12, 사용자 요청). 내 컬렉션이거나 포맷/장르 모아보기 등 콜렉션이 아닌 목록일 땐 숨김. */
  #feed-list-save-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 18px 12px;flex-shrink:0;}
  #feed-list-owner{font-size:11px;color:rgba(140,165,220,0.56);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #feed-list-action-btns{display:flex;align-items:center;gap:8px;flex-shrink:0;}
  /* 저장(책갈피)·좋아요(하트) — 영상 썸네일의 .col-btn/.scrap-btn과 같은 아이콘·색을 그대로 써서
     "어디서든 저장은 왼쪽 책갈피, 좋아요는 오른쪽 하트"로 통일한다(2026-08-12, 사용자 요청). 다만 저
     버튼들은 썸네일 위에 얹는 absolute 오버레이라 여기(헤더 줄) 배치엔 안 맞아서, 같은 시각 언어의
     인라인 버전을 새로 만듦.
     */
  .feed-lb-icon-btn{background:rgba(255,255,255,0.06);border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;color:rgba(220,230,255,0.72);transition:color .15s,transform .15s,background .15s;padding:0;}
  .feed-lb-icon-btn svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;}
  .feed-lb-icon-btn:hover{transform:scale(1.1);}
  #feed-list-admin-del-btn{color:rgba(255,140,150,0.75);}
  #feed-list-admin-del-btn:hover{color:rgba(255,95,110,0.95);background:rgba(255,95,110,0.14);}
  #feed-list-save-btn.col-on{color:rgba(130,185,255,0.95);}
  #feed-list-save-btn.col-on svg{fill:currentColor;}
  #feed-list-save-btn.saved{cursor:default;}
  #feed-list-save-btn.saved:hover{transform:none;}
  #feed-list-like-btn.liked{color:rgba(255,92,125,0.92);}
  #feed-list-like-btn.liked svg{fill:currentColor;stroke-width:2.2;}
  #feed-list-grid{overflow-y:auto;padding:0 14px 16px;}
  /* 정사각형으로 강제 크롭하면 썸네일에 박혀있는 이름/자막 정보가 잘려서(사용자 제보, 2026-08-03),
     그룹/멤버 카드의 기본 .gc-ch-item/.gc-ch-thumb 그대로(가로 16:9, 쇼츠만 9:16) 원본 비율을
     살리는 쪽으로 되돌림 — 이 기본 패턴은 다른 그리드에서 이미 겹침 버그 없이 잘 동작해왔음.
     예전엔 데스크톱에서만 3열로 좁혔었는데, 카드 안 채널 영상 그리드(.gc-ch-grid 기본값)는 화면
     크기 무관하게 항상 2열이라 이 팝업만 다르게 보였음 — "카드 내 노출과 최대한 비슷하게"(2026-08-06,
     사용자 요청)를 위해 2열로 통일하고, 제목도 카드처럼 다시 보이게 함(원래 여기서만 숨겨져 있었음). */
  #feed-list-grid.gc-ch-grid{grid-template-columns:repeat(2,1fr);gap:4px;align-items:start;}
  #feed-list-grid .gc-ch-item{border-radius:4px;}
  /* 모바일: 가운데 팝업 대신 아래에서 올라오는 바텀시트로(2026-08-27, 사용자 요청 — 탐험 패널·카드 시트와
     일관되게, 아래로 스와이프해서 닫기). 데스크톱은 위 센터 모달 그대로. 슬라이드 인/아웃 transform은 JS가
     패널에 인라인으로 넣는다(_openFeedListOverlay / _closeFeedListOverlay / _wireFeedListSwipe). */
  @media(max-width:768px){
    #feed-list-overlay{align-items:flex-end;}
    #feed-list-panel{position:relative;width:100%;max-width:100%;max-height:88vh;border-radius:18px 18px 0 0;padding-top:8px;}
    #feed-list-panel::before{content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,0.2);z-index:3;pointer-events:none;}
  }
  .ec-item{display:flex;align-items:center;gap:8px;padding:7px 16px;transition:background .12s;}
  .ec-item:hover{background:rgba(255,255,255,0.04);}
  .ec-info{flex:1;min-width:0;overflow:hidden;}
  .ec-name{font-size:12px;color:rgba(210,225,255,0.85);}
  .ec-handle{font-size:11px;color:rgba(155,178,228,0.56);}
  .ec-link{flex-shrink:0;font-size:11px;color:rgba(170,210,255,0.75);text-decoration:none;padding:3px 9px;border-radius:12px;border:0.5px solid rgba(170,210,255,0.25);background:rgba(170,210,255,0.06);}
  .ec-link:hover{background:rgba(170,210,255,0.14);}
  /* 320 → 560(2026-09-04, admin_improvement_plan P2-6). 이 모달은 소속 그룹·멤버 체크박스·콜라보·
     원곡·카테고리·플래그를 한 화면에 담는데 320px에선 멤버 칩이 서너 개마다 줄바꿈돼 스크롤이 길어진다.
     좁은 화면에선 기존처럼 화면 폭에 맞춘다(min). */
  #vid-tag-panel{width:min(560px,calc(100vw - 40px));max-height:82vh;overflow-y:auto;background:rgba(13,17,34,0.97);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border-radius:18px;box-shadow:0 16px 56px rgba(0,0,0,0.72);border:0.5px solid rgba(255,255,255,0.10);padding:20px;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  #vid-tag-vidtitle{font-size:11px;color:rgba(160,182,222,0.71);margin:6px 0 14px;line-height:1.4;}
  #vid-tag-members{display:flex;flex-wrap:wrap;gap:7px;}
  .vid-tag-mem{display:flex;align-items:center;gap:6px;font-size:13px;color:rgba(220,230,250,0.88);background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.08);border-radius:10px;padding:6px 10px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  .vid-tag-mem input{accent-color:#6d8cff;}
  /* 오태깅 규칙 등록 깃발(⚑) — 흔한 단어 이름을 그 자리에서 해시태그전용 규칙으로(2026-08-30). 은은하게, hover 시 또렷. */
  .vid-tag-rule-flag{margin-left:2px;opacity:0.32;font-size:11px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:opacity .12s,color .12s;color:rgba(220,180,120,0.9);}
  .vid-tag-rule-flag:hover{opacity:1;color:rgba(240,200,130,1);}
  #vid-tag-with-results{margin-top:4px;max-height:140px;overflow-y:auto;border-radius:10px;background:rgba(255,255,255,0.04);}
  #vid-tag-with-results:empty{display:none;}
  .vid-tag-with-opt{padding:7px 10px;font-size:12px;color:rgba(220,230,250,0.85);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  .vid-tag-with-opt:hover,.vid-tag-with-opt.kbd-active{background:rgba(255,255,255,0.08);}
  .vid-tag-with-opt-group{color:rgba(255,190,140,0.9);font-weight:600;}
  #vid-tag-with-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
  #vid-tag-with-chips:empty{display:none;}
  .vid-tag-chip{display:flex;align-items:center;gap:5px;font-size:12px;color:rgba(220,230,250,0.9);background:rgba(109,140,255,0.16);border:0.5px solid rgba(109,140,255,0.35);border-radius:20px;padding:4px 10px 4px 12px;}
  .vid-tag-chip-group{background:rgba(255,170,109,0.16);border-color:rgba(255,170,109,0.4);}
  #vid-tag-cover-results{margin-top:4px;max-height:140px;overflow-y:auto;border-radius:10px;background:rgba(255,255,255,0.04);}
  #vid-tag-cover-results:empty{display:none;}
  #vid-tag-cover-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
  #vid-tag-cover-chips:empty{display:none;}
  .vid-tag-chip-cover{background:rgba(190,120,230,0.16);border-color:rgba(190,120,230,0.4);}
  .vid-tag-chip button{background:none;border:none;color:rgba(220,230,250,0.7);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-size:12px;padding:0;line-height:1;}
  #vid-tag-status{font-size:12px;color:rgba(155,178,228,0.7);margin-top:10px;min-height:14px;}
  #vid-tag-btns{display:flex;gap:8px;margin-top:16px;}
  #vid-tag-flag-toggles{display:flex;gap:8px;margin-top:10px;}
  .vid-tag-flag-toggle{flex:1;padding:8px;border-radius:10px;border:0.5px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);color:rgba(185,205,245,0.71);font-size:12px;font-family:inherit;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .15s,color .15s,border-color .15s;}
  .vid-tag-flag-toggle:hover{background:rgba(255,255,255,0.09);}
  .vid-tag-flag-toggle.vid-tag-flag-nomem.active{background:rgba(255,160,80,0.16);border-color:rgba(255,160,80,0.4);color:rgba(255,190,120,0.95);}
  /* 보류는 무관(주황)·숨김(빨강)과 확실히 갈리는 청록으로 — 셋이 나란히 있어서 색이 비슷하면
     급하게 누를 때 헷갈린다. 의미도 "제외"가 아니라 "판단 대기"라 경고색을 안 쓰는 게 맞다. */
  .vid-tag-flag-toggle.vid-tag-flag-hold.active{background:rgba(90,200,180,0.16);border-color:rgba(90,200,180,0.4);color:rgba(140,225,205,0.95);}
  .vid-tag-flag-toggle.vid-tag-flag-hidden.active{background:rgba(220,90,90,0.16);border-color:rgba(220,90,90,0.4);color:rgba(240,150,150,0.95);}
  /* ── 최애(bias) ─────────────────────────────────── */
  #pp-bias-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
  #pp-bias-chips:empty{margin-bottom:0;}
  .pp-bias-chip{display:flex;align-items:center;gap:5px;font-size:13px;color:rgba(220,230,250,0.9);background:rgba(109,140,255,0.16);border:0.5px solid rgba(109,140,255,0.35);border-radius:20px;padding:5px 10px 5px 12px;}
  .pp-bias-chip button{background:none;border:none;color:rgba(220,230,250,0.7);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-size:12px;padding:0;line-height:1;}
  #pp-bias-hint{display:none;font-size:11px;color:rgba(140,160,200,0.56);line-height:1.5;margin-bottom:4px;}
  /* "+ 최애 추가" 버튼과 검색창이 같은 줄을 공유 — 평소엔 버튼만, 누르면 버튼 자리에 검색창이 들어섬 */
  #pp-bias-add-row{position:relative;margin-top:8px;}
  #pp-bias-add-row #pp-bias-search{margin:0;}
  /* 프로필 카드 높이가 검색 결과 개수에 따라 출렁이지 않도록 절대배치 오버레이로 띄워서 아래 내용을 덮게 함 */
  #pp-bias-search-results{position:absolute;left:0;right:0;top:calc(100% + 4px);max-height:180px;overflow-y:auto;border-radius:10px;background:rgba(20,24,44,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:0.5px solid rgba(255,255,255,0.10);box-shadow:0 8px 24px rgba(0,0,0,0.45);z-index:5;}
  #pp-bias-search-results:empty{display:none;}
  .pp-bias-opt{padding:7px 10px;font-size:12px;color:rgba(220,230,250,0.85);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  .pp-bias-opt:hover{background:rgba(255,255,255,0.08);}
  #pp-bias-emoji-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:80;display:none;align-items:center;justify-content:center;}
  #pp-bias-emoji-overlay.open{display:flex;}
  #pp-bias-emoji-panel{width:min(320px,calc(100vw - 40px));background:rgba(13,17,34,0.97);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border-radius:18px;box-shadow:0 16px 56px rgba(0,0,0,0.72);border:0.5px solid rgba(255,255,255,0.10);padding:20px;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  #pp-bias-emoji-target{font-size:12px;color:rgba(160,182,222,0.72);margin:4px 0 10px;}
  #pp-bias-emoji-native{display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 0 8px;}
  #pp-bias-emoji-native-hint{font-size:12px;color:rgba(160,182,222,0.55);}
  #pp-bias-emoji-input{width:64px;height:64px;font-size:38px;text-align:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:14px;color:#fff;caret-color:transparent;outline:none;padding:0;}
  #pp-bias-emoji-input:focus{border-color:rgba(150,180,255,0.45);background:rgba(255,255,255,0.09);}
  #pp-bias-emoji-skip{width:100%;margin-top:10px;}
  /* 마이페이지 헤더에 상시 노출되는 최애 칩(읽기 전용) */
  #my-page-bias{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 14px;}
  #my-page-bias:empty{display:none;margin:0;}
  .mp-bias-chip{font-size:12px;color:rgba(210,225,255,0.85);background:none;border:none;padding:0;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:color .13s;}
  .mp-bias-chip:hover{color:rgba(240,248,255,1);}
  .mp-bias-chip:hover{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.22);}
  .gc-ch-more-wrap{min-height:1px;font-size:11px;color:rgba(155,178,228,0.51);text-align:center;padding:8px 0 2px;}
  .tv-cover-of-wrap{margin-top:14px;padding-top:12px;border-top:0.5px solid rgba(255,255,255,0.08);}
  .tv-cover-of-hd{font-size:var(--fz-body);font-weight:600;color:rgba(210,175,235,0.85);margin-bottom:8px;}
  .gc-ch-more-loading{display:inline-flex;align-items:center;gap:5px;}
  .gc-ch-more-loading .dot{width:5px;height:5px;border-radius:50%;background:rgba(155,178,228,0.65);animation:gc-more-bounce 1s ease-in-out infinite;}
  .gc-ch-more-loading .dot:nth-child(2){animation-delay:.15s;}
  .gc-ch-more-loading .dot:nth-child(3){animation-delay:.3s;}
  @keyframes gc-more-bounce{0%,80%,100%{transform:translateY(0);opacity:.4;}40%{transform:translateY(-4px);opacity:1;}}
  .gc-ch-msg{grid-column:1/-1;font-size:var(--fz-body);color:rgba(155,178,228,0.51);text-align:center;padding:10px 0;line-height:1.6;}
  @keyframes gc-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
  .gc-ch-skeleton{border-radius:6px;overflow:hidden;background:rgba(255,255,255,0.04);}
  .gc-ch-skeleton.featured{grid-column:span 2;}
  .gc-ch-skeleton-thumb{width:100%;aspect-ratio:16/9;background:linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.09) 50%,rgba(255,255,255,0.04) 75%);background-size:200% 100%;animation:gc-shimmer 1.4s ease infinite;}
  .gc-ch-skeleton-title{height:9px;margin:7px 8px 4px;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.09) 50%,rgba(255,255,255,0.04) 75%);background-size:200% 100%;animation:gc-shimmer 1.4s ease infinite;}
  .gc-ch-skeleton-title.short{width:55%;margin-bottom:8px;}
  .gc-ch-err{grid-column:1/-1;font-size:12px;color:rgba(228,155,155,0.65);text-align:center;padding:6px 0;}
  .gc-ch-err-retry{display:block;margin:8px auto 0;background:rgba(155,178,228,0.14);border:0.5px solid rgba(155,178,228,0.3);border-radius:7px;padding:6px 16px;font-size:12px;color:#c0d6f0;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;transition:background .15s;}
  .gc-ch-err-retry:hover{background:rgba(155,178,228,0.24);}
  .sp-yt-key{width:100%;background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.12);border-radius:7px;padding:6px 9px;font-size:11px;color:#c0d6f0;font-family:inherit;outline:none;box-sizing:border-box;margin-top:5px;}
  .sp-yt-key::placeholder{color:rgba(155,178,228,0.41);}
  .sp-yt-key:focus{border-color:rgba(155,178,228,0.4);}
  .sp-yt-sync{width:100%;margin-top:6px;background:rgba(155,178,228,0.14);border:0.5px solid rgba(155,178,228,0.28);border-radius:7px;padding:7px;font-size:12px;color:#c0d6f0;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;transition:background .15s;}
  .sp-yt-sync:hover:not(:disabled){background:rgba(155,178,228,0.24);}
  .sp-yt-sync:disabled{opacity:.45;cursor:not-allowed;}
  .sp-yt-prog{font-size:11px;color:rgba(155,178,228,0.56);margin-top:5px;min-height:14px;text-align:center;word-break:break-all;}
  /* 실행 중 상단 고정 진행 바 + 최근 실행 로그 + 버튼별 마지막 실행 배지 (설정패널 개선 1·2·8, 2026-09-01) */
  #adm-exec-bar{display:none;}
  #adm-exec-bar.on{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:6;margin:0 0 8px;padding:8px 10px;border-radius:8px;
    background:linear-gradient(90deg,rgba(90,140,255,0.24),rgba(90,140,255,0.10));border:1px solid rgba(140,180,255,0.55);
    color:#dce8ff;font-size:12px;font-weight:600;line-height:1.35;box-shadow:0 4px 14px rgba(0,0,0,0.35);
    animation:aebPulse 1.6s ease-in-out infinite;}
  #adm-exec-bar .aeb-txt{flex:1 1 auto;min-width:0;word-break:break-all;}
  #adm-exec-bar .aeb-stop{flex:0 0 auto;background:rgba(210,120,120,0.22);border:1px solid rgba(230,150,150,0.6);color:#f2d4d4;
    border-radius:6px;padding:3px 8px;font-size:11px;font-weight:600;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;white-space:nowrap;}
  #adm-exec-bar .aeb-stop:hover{background:rgba(210,120,120,0.35);}
  @keyframes aebPulse{0%,100%{border-color:rgba(140,180,255,0.5)}50%{border-color:rgba(150,190,255,0.95)}}
  #adm-exec-bar.on.nudge{animation:aebNudge .45s ease;}
  @keyframes aebNudge{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
  #adm-exec-log{margin:0 0 8px;font-size:11px;}
  #adm-exec-log:empty{margin:0;}
  #adm-exec-log .ael-h{color:rgba(155,178,228,0.5);margin-bottom:2px;font-size:10px;}
  #adm-exec-log .ael-row{display:flex;gap:5px;padding:1px 0;line-height:1.35;}
  #adm-exec-log .ael-t{color:rgba(155,178,228,0.55);flex:0 0 auto;min-width:42px;}
  #adm-exec-log .ael-l{color:#cdd8f0;flex:0 0 auto;font-weight:600;}
  /* 한 줄 말줄임이 기본(로그가 길어 목록이 안 무너지게) — 다만 **잘린 숫자를 오독한 사고**가 있어
     (2026-09-03: "384,993건 스캔"이 "38499…"로 보여, 조회가 끊긴 걸로 두 번 오진함) 마우스를 올리면
     전체가 보이도록 펼친다. title 속성도 같이 붙어 있어 툴팁으로도 확인 가능. */
  #adm-exec-log .ael-r{color:rgba(200,210,230,0.6);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #adm-exec-log .ael-row:hover .ael-r{overflow:visible;white-space:normal;word-break:break-all;}
  #adm-exec-log .ael-r.bad{color:#e39a9a;}
  .sp-last-badge{font-size:10px;opacity:.5;font-weight:400;}
  /* 패널 열기 6개 2열 그리드 + 실행버튼과 스타일 분리 (설정패널 개선 6) */
  .sp-open-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0 2px;}
  .sp-open-btn{background:rgba(120,150,220,0.10);border:0.5px solid rgba(155,178,228,0.22);border-radius:9px;
    padding:10px 6px;font-size:12px;color:#cdd8f0;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;transition:background .15s;text-align:center;font-weight:500;}
  .sp-open-btn:hover{background:rgba(120,150,220,0.22);}
  .sp-open-primary{border-color:rgba(140,180,255,0.5);background:rgba(140,180,255,0.16);color:#dce8ff;font-weight:600;}
  /* 버튼별 ⓘ 클릭 펼침(설정패널 개선 7) — 전체 토글(show-hints)과 함께 동작 */
  .sp-hint-i{margin-left:6px;font-size:10px;opacity:.5;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-weight:400;}
  .sp-hint-i:hover{opacity:.95;}
  .sp-btn-hint.open{display:block;}
  /* 되돌리기 최근 일괄 작업 목록(설정패널 개선 10) */
  #adm-undo-list{margin:6px 0 2px;}
  #adm-undo-list:empty{margin:0;}
  #adm-undo-list .aul-row{display:flex;align-items:center;gap:8px;padding:6px 8px;margin-top:4px;border-radius:7px;background:rgba(208,138,138,0.08);border:0.5px solid rgba(208,138,138,0.28);}
  #adm-undo-list .aul-info{flex:1 1 auto;min-width:0;font-size:11px;color:#e6d2d2;line-height:1.3;}
  #adm-undo-list .aul-meta{display:block;font-size:10px;opacity:.55;margin-top:1px;}
  #adm-undo-list .aul-btn{flex:0 0 auto;background:rgba(208,138,138,0.2);border:0.5px solid rgba(230,150,150,0.6);color:#f2d4d4;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:600;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;white-space:nowrap;}
  #adm-undo-list .aul-btn:hover{background:rgba(208,138,138,0.35);}
  /* 버튼마다 한 줄 설명 — 기본은 숨겨져 있다가 위 "ⓘ 버튼 설명 보기" 토글을 켜면 나타남
     (2026-08-19, 사용자 요청 — "버튼마다 이해하기 쉽게 설명 좀"). */
  .sp-btn-hint{display:none;font-size:11px;line-height:1.4;color:rgba(155,178,228,0.55);margin:3px 2px 6px;}
  #sp-yt-sec.show-hints .sp-btn-hint{display:block;}
  /* ── Search ──────────────────────────────────── */
  #search-wrap{
    position:fixed;bottom:78px;left:50%;transform:translateX(-50%);
    z-index:68;width:240px;
    font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
    display:none;
  }
  /* ⌘K/Ctrl+K 힌트 배지(2026-09-02) — 단축키는 있다는 걸 알려야 쓴다.
     입력이 시작되면 .has-q가 붙어 숨는다(입력한 글자와 겹치지 않게). 모바일은 키보드가 없어 숨김. */
  #search-kbd{
    position:absolute;right:11px;top:11px;pointer-events:none;
    font-family:inherit;font-size:10px;font-weight:600;letter-spacing:.04em;
    color:rgba(150,172,214,0.5);background:rgba(255,255,255,0.06);
    border:0.5px solid rgba(255,255,255,0.1);border-radius:5px;padding:2px 5px;line-height:1;
    transition:opacity .12s;
  }
  #search-wrap.has-q #search-kbd{opacity:0;}
  @media(max-width:768px){#search-kbd{display:none;}}
  #search-wrap.open{
    display:block;
    background:rgba(16,20,40,0.96);
    border:0.5px solid rgba(255,255,255,0.10);
    border-radius:12px;
    backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
    box-shadow:0 6px 28px rgba(0,0,0,0.55);
    overflow:hidden;
  }
  #search-input{
    width:100%;background:transparent;
    border:none;border-radius:0;
    color:#c8d8f0;font-family:inherit;font-size:12px;
    padding:9px 13px;outline:none;letter-spacing:.04em;
    box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    transition:background .15s;box-sizing:border-box;
  }
  #search-input:focus{background:rgba(255,255,255,0.03);}
  #search-input::placeholder{color:rgba(140,160,200,0.38);}
  /* iOS Safari: font-size < 16px 이면 input 포커스 시 자동 줌인 — 모바일에서 16px로 고정해서 방지 */
  @media(max-width:768px){
    #search-input,#tab-sb-input,#idx-search-inp,.pp-input{font-size:16px!important;}
  }
  #search-results{
    display:none;margin-top:0;
    background:transparent;
    border:none;border-top:0.5px solid rgba(255,255,255,0.08);
    border-radius:0;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:none;
    max-height:60vh;overflow-y:auto;padding:4px 0;
  }
  /* ── 모바일 검색 풀스크린 시트(2026-09-02) ─────────────────────────
     예전 구조(탭바 변형 + 탭바 위 180px 상자)는 결과 타입이 5종으로 늘면서 한계가 명확해졌다 —
     항목 하나가 ~30px이라 섹션 헤더까지 넣으면 실제로 보이는 게 3~4개뿐이고, 서버에서 늦게 오는
     영상 결과는 맨 아래 붙어 존재조차 모른다. 화면 전체를 쓰고 타입 탭으로 나눈다.
     z-index 69: #mob-sr(68)보다 위, yt-lightbox(67)/_bringToFront 기준선 위. 검색 결과에서 영상을
     누르면 라이트박스가 그 위로 떠야 하므로 라이트박스는 _bringToFront로 따로 올라간다. */
  #msheet{
    /* 하단 탭바를 덮지 않고 그 위에서 멈춘다(2026-09-03 제보 — 검색 중에도 탭 이동이 편하게).
       bottom = 탭바 높이(≈64px)+안전영역. 값은 실기기서 미세조정 가능. */
    position:fixed;top:0;left:0;right:0;
    bottom:calc(64px + env(safe-area-inset-bottom,0px));
    z-index:69;display:none;flex-direction:column;
    background:rgba(9,12,26,0.97);
    backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
    padding-top:env(safe-area-inset-top,0px);
  }
  #msheet.open{display:flex;}
  #msheet-top{display:flex;align-items:center;gap:6px;padding:8px 12px 8px 6px;flex:none;}
  #msheet-back{
    display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
    background:none;border:none;color:rgba(200,215,245,0.82);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;border-radius:50%;
    -webkit-tap-highlight-color:transparent;
  }
  #msheet-back:active{background:rgba(255,255,255,0.09);}
  #msheet-inputwrap{
    flex:1;min-width:0;display:flex;align-items:center;gap:8px;
    background:rgba(255,255,255,0.07);border:0.5px solid rgba(255,255,255,0.1);
    border-radius:11px;padding:0 11px;height:38px;
  }
  #msheet-icon{display:flex;color:rgba(150,175,235,0.6);flex:none;}
  #msheet-input{
    flex:1;min-width:0;background:none;border:none;outline:none;color:#e6eeff;
    font-size:15px;font-family:inherit;letter-spacing:.01em;
    -webkit-text-size-adjust:none;
  }
  #msheet-input::placeholder{color:rgba(140,160,200,0.42);}
  #msheet-clear{
    display:flex;align-items:center;justify-content:center;flex:none;background:none;border:none;
    color:rgba(190,205,240,0.6);font-size:15px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:4px 2px;line-height:1;
    -webkit-tap-highlight-color:transparent;
  }
  /* 타입 탭 — 가로 스크롤이지만 5개는 390px에 대체로 다 들어간다(넘치면 스크롤). */
  #msheet-tabs{
    display:flex;gap:6px;padding:2px 12px 10px;flex:none;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  #msheet-tabs::-webkit-scrollbar{display:none;}
  .msheet-tab{
    flex:none;padding:7px 13px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.01em;
    background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.09);
    color:rgba(185,200,235,0.72);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;white-space:nowrap;
    -webkit-tap-highlight-color:transparent;transition:background .12s,color .12s,border-color .12s;
  }
  .msheet-tab[aria-selected="true"]{
    background:rgba(126,156,255,0.19);border-color:rgba(126,156,255,0.42);color:#cfdcff;
  }
  .msheet-tab .msheet-tab-n{opacity:.55;margin-left:5px;font-weight:500;}
  #msheet-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:20px;}
  /* ⚠️ 탭 필터는 el.hidden으로 감추는데, HTML [hidden]은 UA 스타일시트의 display:none이라
     저자 스타일 `.sr-item{display:flex}`에 그냥 진다 — 속성은 붙는데 화면엔 그대로 보였다
     (테스트가 el.hidden만 확인해서 통과시켰고, 스크린샷을 보고서야 발견). 명시적으로 이긴다. */
  #msheet-body .sr-item[hidden],#msheet-body .sr-sec-label[hidden]{display:none!important;}
  /* 풀스크린에선 항목을 키운다 — 180px 상자에 욱여넣던 시절의 12px/5px는 손가락에 너무 작다. */
  #msheet-body .sr-item{padding:11px 16px;font-size:var(--fz-title);}
  #msheet-body .sr-item-name{font-size:var(--fz-title);}
  #msheet-body .sr-sec-label{padding:14px 16px 5px;font-size:11px;}
  #msheet-body .sr-recent-label{padding:12px 16px 5px;font-size:11px;}
  #msheet-body .sr-empty{padding:28px 16px;font-size:13px;}
  #msheet-body .sr-loading{padding:11px 16px;font-size:12px;}
  #msheet-body .sr-alias{font-size:11px;}
  #msheet-body .sr-tag{font-size:11px;}
  /* 영상 결과 — 썸네일 + 제목 2줄 + 그룹·조회수(2026-09-02). 텍스트 한 줄로는 어떤 영상인지
     알기 어렵고 검색 결과가 콘텐츠처럼 안 보였다. 유튜브 검색 결과와 같은 형태. */
  .sr-item.sr-vid{align-items:flex-start;gap:10px;}
  #msheet-body .sr-item.sr-vid{padding:9px 16px;}
  .sr-vt{
    position:relative;flex:none;width:88px;height:50px;border-radius:6px;overflow:hidden;
    background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;
  }
  .sr-vt img{width:100%;height:100%;object-fit:cover;display:block;}
  /* 썸네일이 없는 행(구 데이터)엔 재생 아이콘만 남긴다 — 깨진 이미지가 뜨는 것보다 낫다 */
  .sr-vt .sr-vp{position:absolute;font-size:13px;color:rgba(255,255,255,0.5);text-shadow:0 1px 4px rgba(0,0,0,0.6);}
  .sr-vt img+.sr-vp{display:none;}
  .sr-vb{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
  .sr-vtitle{
    font-size:13px;line-height:1.35;color:#dce8f8;font-weight:500;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  #msheet-body .sr-vtitle{font-size:var(--fz-title);}
  .sr-vmeta{font-size:11px;color:rgba(150,172,214,0.66);letter-spacing:.01em;}
  .sr-item{
    padding:5px 13px;font-size:12px;color:#dce8f8;font-weight:500;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;
    border-bottom:0.5px solid rgba(255,255,255,0.07);letter-spacing:.02em;
    display:flex;justify-content:space-between;align-items:center;gap:8px;
    transition:background .1s;
  }
  .sr-item:last-child{border-bottom:none;}
  .sr-item:hover,.sr-item:active,.sr-item.kbd-active{background:rgba(255,255,255,0.09);}
  .sr-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .sr-item-name.sr-group{color:#9ab8dc;}
  /* 이름+별칭 묶음 — space-between으로 태그를 오른쪽에 두되 별칭은 이름 바로 옆에 붙게(2026-08-22) */
  .sr-nl{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;overflow:hidden;}
  .sr-nl .sr-item-name{flex:0 1 auto;}
  .sr-alias{font-size:var(--fz-meta);font-weight:400;color:rgba(180,195,230,0.42);letter-spacing:0;flex-shrink:0;}
  .sr-tag{font-size:var(--fz-meta);color:#9ab8dc;letter-spacing:.05em;text-transform:uppercase;flex-shrink:0;}
  /* 이미 떠난 소속(탈퇴·그 그룹에서 active:false)은 흐리게 — 현 소속처럼 읽히지 않게(2026-09-16 사용자 요청).
     지우지 않는 이유: "트레저 출신"은 여전히 유용한 정보라서. 판정은 _isFormerOf. */
  .sr-tag-former{color:rgba(154,184,220,0.42);}
  .sr-empty{padding:14px 13px;font-size:12px;color:rgba(140,160,200,0.56);text-align:center;}
  /* 크레딧 검색 결과 ('백현 작사' 등) */
  .sr-credit-section{margin-top:4px;}
  .sr-credit-item{display:flex!important;align-items:center;gap:8px;padding:7px 13px;}
  .sr-credit-badge{flex-shrink:0;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:.02em;}
  .src-lyrics{background:rgba(255,180,60,0.13);color:rgba(255,210,90,0.9);}
  .src-compose{background:rgba(120,200,120,0.13);color:rgba(150,230,165,0.9);}
  .sr-credit-title{flex:1;min-width:0;font-size:13px;color:rgba(218,230,255,0.88);font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  .sr-credit-album{flex-shrink:0;max-width:38%;font-size:11px;color:rgba(140,165,215,0.48);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:right;}
  .sr-credit-more{padding:4px 13px 8px;font-size:11px;color:rgba(140,160,200,0.52);}
  .sr-credit-hint{margin-left:auto;font-size:10px;padding:1px 6px;border-radius:3px;background:rgba(255,200,80,0.10);color:rgba(255,210,100,0.75);flex-shrink:0;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;white-space:nowrap;}
  .sr-credit-hint:hover{background:rgba(255,200,80,0.18);}
  .sr-related{border-top:0.5px solid rgba(255,255,255,0.05);margin-top:2px;}
  .sr-related-chips{display:flex;flex-wrap:wrap;gap:6px;padding:7px 10px 5px;}
  .sr-chip{flex-shrink:0;font-size:11px;padding:4px 10px;border-radius:20px;background:rgba(255,255,255,0.07);color:rgba(200,220,255,0.8);border:none;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;}
  .sr-chip:hover{background:rgba(255,255,255,0.13);}
  .sr-chip-credit{background:rgba(255,200,80,0.09);color:rgba(255,215,100,0.82);}
  .sr-chip-credit:hover{background:rgba(255,200,80,0.16);}
  .sr-cowriter-section{border-top:0.5px solid rgba(255,255,255,0.05);padding-bottom:4px;}
  .sr-cowriter-chips{display:flex;flex-wrap:wrap;gap:6px;padding:4px 13px 6px;}
  .sr-cowriter-chip{font-size:11px;padding:3px 9px;border-radius:12px;background:rgba(150,200,255,0.08);color:rgba(170,210,255,0.75);border:none;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;}
  .sr-cowriter-chip:hover{background:rgba(150,200,255,0.15);}
  .sr-recent-label{padding:6px 13px 4px;font-size:10px;font-weight:700;color:rgba(140,160,200,0.56);letter-spacing:.06em;text-transform:uppercase;}
  /* 검색 결과 타입 구분 헤더(2026-08-31). ⚠️ `.sr-item` 클래스를 주면 안 된다 — 키보드 내비게이션이
     `.sr-item`으로 항목을 고르므로 화살표가 헤더에서 멈춘다. */
  .sr-sec-label{padding:9px 13px 4px;font-size:10px;font-weight:700;color:rgba(150,175,235,0.52);letter-spacing:.07em;text-transform:uppercase;}
  /* 검색 첫 화면 트렌딩 — 컬러 오브(→앨범커버) 그리드(2026-09-02) */
  .sr-orbs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;padding:9px 13px 8px;}
  .sr-orb{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;padding:0;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  .sr-orb-disc{width:56px;height:56px;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 3px 12px rgba(0,0,0,0.42);transition:transform .13s ease;}
  .sr-orb:hover .sr-orb-disc,.sr-orb:active .sr-orb-disc{transform:scale(1.07);}
  .sr-orb-name{font-size:11px;color:rgba(212,224,250,0.86);text-align:center;line-height:1.2;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .sr-sec-label:first-child{padding-top:6px;}
  /* 검색 결과가 늦게 도착하는 섹션(영상)의 로딩 표시 */
  .sr-loading{padding:8px 13px;font-size:11px;color:rgba(140,160,200,0.45);}
  /* 타입별 더보기 줄(2026-09-21) — 섹션 끝에 붙는다. ⚠️ `.sr-item`을 주지 않는다(섹션 헤더와 같은
     이유: 키보드 화살표가 여기서 멈춘다). 항목이 아니라 "이 섹션을 늘리는 조작"이라 톤도 한 단계 죽인다. */
  .sr-more{display:block;width:calc(100% - 20px);margin:3px 10px 5px;padding:8px 0;background:rgba(255,255,255,0.04);border:none;border-radius:9px;
    font-family:inherit;font-size:11.5px;font-weight:600;color:rgba(170,192,238,0.72);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .13s,color .13s;}
  .sr-more:hover{background:rgba(255,255,255,0.08);color:rgba(200,218,255,0.9);}
  .sr-more:disabled{cursor:default;color:rgba(150,170,210,0.45);}
  #msheet-body .sr-more[hidden]{display:none!important;}
  #msheet-body .sr-more{margin:5px 16px 8px;width:calc(100% - 32px);padding:10px 0;font-size:12.5px;}
  /* ── Responsive: desktop panel positions ────────── */
  @media(min-width:769px){
    #tabbar{display:none;}
    #settings-panel{top:58px;bottom:auto;right:0;width:320px;border-radius:16px 0 0 16px;max-height:calc(100vh - 78px);overflow-y:auto;}
    /* 어드민 레이아웃(2026-08-30, 사용자 확정): 설정 패널을 맨 왼쪽에 두고, 어드민 작업패널(adm-home/vm/hnn/gp)은
       설정 바로 오른쪽 옆으로 밀어 나란히 놓는다(설정 leftmost → 그 옆에 vm). 우주를 가려도 무방(어드민 전용).
       설정이 닫혀 있으면 작업패널은 원래 좌측 끝에서 시작(아래 :has로 열렸을 때만 밀어냄). */
    body.is-admin #settings-panel{right:auto;left:0;border-radius:0 16px 16px 0;}
    body.is-admin:has(#settings-panel.open) #adm-home-overlay,
    body.is-admin:has(#settings-panel.open) #hnn-overlay,
    body.is-admin:has(#settings-panel.open) #vm-overlay,
    body.is-admin:has(#settings-panel.open) #gp-overlay{padding-left:332px;} /* 설정 폭 320 + 여백 12 */
    #search-wrap{top:58px;bottom:auto;left:auto;right:16px;transform:none;width:320px;}
    /* ── 검색 '더보기' → 전체화면 결과(2026-09-23) ──────────────────────────────
       #msheet는 원래 모바일 전용 풀스크린 검색 시트였는데(하단 탭바 위에서 멈추는 구조), 데스크톱
       작은 드롭다운(#search-results)에서 '더보기'를 누르면 같은 시트를 그대로 재사용한다(JS는
       _openSearchOverlayFrom 참고 — 매칭/탭/더보기 로직이 컨테이너 무관이라 새로 만들 이유가 없었음).
       데스크톱엔 탭바가 없으니 그 여백(bottom)을 없애고, 목록이 1440px 폭까지 쭉 늘어지면 읽기 힘드니
       가운데 640px 칼럼으로 좁힌다 — 좌우 남는 배경(=#msheet 자신)을 클릭하면 닫히게 JS에서 처리. */
    #msheet{bottom:0;}
    #msheet-top,#msheet-tabs,#msheet-body{max-width:640px;width:100%;margin-left:auto;margin-right:auto;}
    #msheet-top{padding-top:14px;}
  }
  /* ── Journal sidebar ─────────────────────────────── */
  #journal-sidebar{
    position:fixed;top:0;left:0;height:100%;width:300px;
    background:rgba(14,18,34,0.82);
    backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
    border-right:0.5px solid rgba(255,255,255,0.10);
    box-shadow:4px 0 24px rgba(0,0,0,0.35);
    z-index:66;
    transform:translateX(-300px);
    transition:transform 0.32s cubic-bezier(0.4,0,0.2,1);
  }
  #journal-sidebar.open{transform:translateX(0);}
  #journal-toggle{display:none!important;}
  .journal-toggle-placeholder{
    position:absolute;top:50%;right:-26px;transform:translateY(-50%);
    width:26px;
    background:rgba(14,18,34,0.75);
    backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
    border:0.5px solid rgba(255,255,255,0.10);border-left:none;
    border-radius:0 10px 10px 0;
    padding:16px 5px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;
    color:rgba(150,165,210,0.71);font-size:11px;line-height:1;
    transition:background .15s,color .15s;
    display:flex;align-items:center;justify-content:center;
  }
  #journal-toggle:hover{background:rgba(255,255,255,0.09);color:rgba(200,215,255,0.92);}
  #journal-toggle-icon{
    display:inline-block;
    transition:transform 0.32s cubic-bezier(0.4,0,0.2,1);
  }
  #journal-sidebar.open #journal-toggle-icon{transform:rotate(180deg);}
  #journal-inner{
    height:100%;padding:56px 16px 20px;
    display:flex;flex-direction:column;gap:0;
    font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
    overflow-y:auto;
  }
  /* ── Connection Card ─────────────────────────────── */
  #conn-panel{
    position:fixed;right:880px;top:64px;bottom:0;width:440px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    z-index:61;pointer-events:none;
    transform:translateX(calc(100% + 880px));
    visibility:hidden;
    transition:transform 0.26s cubic-bezier(0.32,0,0.15,1),visibility 0s 0.26s;
    background:rgba(16,20,36,0.88);
    font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
  }
  #conn-panel.open{
    transform:translateX(0);pointer-events:all;
    visibility:visible;
    transition:transform 0.26s cubic-bezier(0.32,0,0.15,1),visibility 0s 0s;
    backdrop-filter:blur(40px) saturate(190%);-webkit-backdrop-filter:blur(40px) saturate(190%);
    box-shadow:-6px 0 32px rgba(0,0,0,0.45);
  }
  @media(max-width:768px){#conn-panel{display:none;}}
  #conn-panel .conn-inner{padding:56px 23px 20px 26px;}
  #conn-sheet{
    display:none;position:fixed;left:0;right:0;
    bottom:var(--sheet-bottom,73px);min-height:calc(60vh + var(--sheet-grow,0px));max-height:calc(60vh + var(--sheet-grow,0px));
    border-radius:20px 20px 0 0;overflow:hidden;
    background:rgba(14,18,36,0.97);
    backdrop-filter:blur(36px);-webkit-backdrop-filter:blur(36px);
    border:0.5px solid rgba(255,255,255,0.10);
    box-shadow:0 1px 0 rgba(255,255,255,0.06) inset,0 -8px 32px rgba(0,0,0,0.60);
    z-index:65;pointer-events:all;
    transform:translateY(calc(100% + var(--sheet-bottom,73px)));
    transition:transform .32s cubic-bezier(0.32,0.72,0,1),bottom .32s cubic-bezier(0.32,0.72,0,1),min-height .32s cubic-bezier(0.32,0.72,0,1),max-height .32s cubic-bezier(0.32,0.72,0,1),border-radius .32s cubic-bezier(0.32,0.72,0,1);
    font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
  }
  #conn-sheet.bs-open{transform:translateY(0);}
  /* 멤버 카드가 100%(bs-full)로 열려있는 상태에서 연결 카드를 열면 그 상태를 그대로 물려받아 100%로 열림
     (mob-sheet/mob-card-stack의 bs-full 이어받기와 같은 패턴, 2026-08-04 사용자 요청). */
  #conn-sheet.bs-full{min-height:calc(var(--mob-vh,100vh) - var(--sheet-bottom,73px));max-height:calc(var(--mob-vh,100vh) - var(--sheet-bottom,73px));border-radius:0;box-sizing:border-box;padding-top:var(--safe-top);}
  #conn-sheet.bs-full #conn-sheet-inner{max-height:calc(var(--mob-vh,100vh) - var(--sheet-bottom,73px) - 24px - var(--safe-top));}
  @media(min-width:769px){#conn-sheet{display:none!important;}}
  #conn-sheet-inner{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;max-height:calc(60vh + var(--sheet-grow,0px) - 24px);overscroll-behavior:contain;transition:max-height .32s cubic-bezier(0.32,0.72,0,1);}
  #conn-sheet .conn-inner{padding:16px 28px 14px 28px;}
  /* ── Mob filter sheet ───────────────────────────── */
  #mob-filter-sheet{
    display:none;position:fixed;left:0;right:0;
    bottom:var(--sheet-bottom,73px);height:58vh;min-height:58vh;max-height:58vh;
    border-radius:20px 20px 0 0;overflow:hidden;
    background:rgba(14,18,34,0.97);
    backdrop-filter:blur(36px);-webkit-backdrop-filter:blur(36px);
    border:0.5px solid rgba(255,255,255,0.10);
    box-shadow:0 1px 0 rgba(255,255,255,0.06) inset,0 -8px 32px rgba(0,0,0,0.60);
    z-index:38;pointer-events:all;
    transform:translateY(calc(100% + var(--sheet-bottom,73px)));
    transition:transform .32s cubic-bezier(0.32,0.72,0,1);
    font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
  }
  #mob-filter-sheet.bs-open{transform:translateY(0);}
  @media(min-width:769px){#mob-filter-sheet{display:none!important;}}
  #mob-filter-sheet-inner{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;max-height:calc(58vh - 40px);overscroll-behavior:contain;padding:0 20px 16px;}
  #mob-filter-sheet #filter-panel{display:block!important;}
  .conn-handle{width:36px;height:4px;background:rgba(255,255,255,0.14);border-radius:2px;margin:10px auto 6px;display:block;}
  .conn-hd{display:flex;align-items:center;gap:8px;margin-bottom:13px;}
  .conn-back-btn{background:none;border:none;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:2px 5px;color:rgba(155,178,228,0.75);font-size:22px;line-height:1;font-family:inherit;font-weight:600;transition:color .15s;}
  .conn-back-btn:hover{color:rgba(200,220,255,0.90);}
  /* 연결 카드 자체의 닫기(×)는 데스크톱에선 왼쪽 접기 탭(#conn-collapse)이 대신하므로 헤더 버튼은 모바일에서만 노출 */
  @media(min-width:769px){.conn-panel-close{display:none;}}
  .conn-anchor-chip{padding:3px 11px;border-radius:20px;font-size:11px;font-weight:700;background:rgba(255,255,255,0.055);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:0.5px solid rgba(255,255,255,0.14);color:rgba(210,228,255,0.96);letter-spacing:.02em;box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);}
  .conn-lbl{font-size:var(--fz-meta);font-weight:700;letter-spacing:.20em;text-transform:uppercase;color:rgba(148,175,225,0.72);margin-bottom:8px;}
  .conn-lbl-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
  .conn-lbl-row .conn-lbl{margin-bottom:0;}
  .conn-only-toggle{background:rgba(255,255,255,0.055);border:0.5px solid rgba(255,255,255,0.14);border-radius:20px;padding:3px 9px;font-size:10px;font-weight:700;letter-spacing:.03em;color:rgba(192,214,240,0.61);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);transition:background .14s,border-color .14s,color .14s,transform .14s;}
  .conn-only-toggle:hover{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.22);color:rgba(220,235,255,0.95);}
  .conn-only-toggle:active{transform:scale(0.93);}
  .conn-only-toggle.active{background:rgba(155,178,228,0.22);color:#c8ddff;border-color:rgba(170,195,255,0.4);box-shadow:inset 0 1px 0 rgba(255,255,255,0.22),0 0 10px rgba(155,178,228,0.25);}
  .conn-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px;align-items:flex-start;}
  /* API 콜라보 데이터 로딩 중 표시 — "타 그룹 칩이 없다"가 아니라 "아직 오는 중"임을 알려줌(2026-08-06) */
  .conn-loading-pill{
    font-size:11px;font-weight:500;color:rgba(150,175,220,0.61);
    padding:2px 2px;font-family:inherit;letter-spacing:.01em;
    animation:conn-loading-pulse 1.3s ease-in-out infinite;
  }
  @keyframes conn-loading-pulse{0%,100%{opacity:0.35;}50%{opacity:0.85;}}
  .conn-chip{
    padding:2px 2px 2px 0;font-size:13px;font-weight:600;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;
    background:none;border:none;
    color:rgba(170,210,255,0.85);letter-spacing:.02em;font-family:inherit;
    text-shadow:0 0 9px rgba(170,210,255,0.46),0 0 3px rgba(170,210,255,0.25);
    transition:color .15s,text-shadow .15s,transform .1s;
    user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  }
  .conn-chip.sel{
    color:rgba(210,232,255,1.0);
    text-shadow:0 0 13px rgba(190,220,255,0.82),0 0 5px rgba(190,220,255,0.52);
  }
  .conn-chip.disabled{opacity:0.28;cursor:default;pointer-events:none;}
  .conn-chip-wrap{display:inline-flex;align-items:center;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
  .conn-chip-goto{display:inline-flex;align-items:center;width:0;overflow:hidden;opacity:0;pointer-events:none;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-size:10px;color:rgba(170,205,255,0.72);line-height:1;transition:opacity 0.13s,width 0.13s,padding-left 0.13s;white-space:nowrap;padding-left:0;}
  .conn-chip-goto:hover{color:rgba(215,235,255,1);}
  @media(hover:hover){
    .conn-chip:hover{color:rgba(220,238,255,1.0);text-shadow:0 0 14px rgba(200,228,255,0.8),0 0 6px rgba(200,228,255,0.5);}
    .conn-chip-goto{width:16px;padding-left:0;font-size:15px;}
    .conn-chip-wrap:hover .conn-chip-goto{opacity:1;pointer-events:all;}
  }
  @media(hover:none){
    .conn-chip-goto{width:0;opacity:0;pointer-events:none;padding-left:0;font-size:15px;}
    .conn-chip.sel + .conn-chip-goto{width:auto;opacity:0.8;pointer-events:all;padding-left:0;margin-left:4px;}
  }
  /* 타 그룹 묶음 칩 */
  .conn-group-chip{
    display:inline-flex;align-items:center;gap:5px;
    padding:3px 10px 3px 9px;border-radius:10px;
    background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.09);
    font-size:12px;font-weight:600;letter-spacing:.02em;
    color:rgba(145,175,230,0.72);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;
    transition:background .15s,color .15s,border-color .15s;
    user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  }
  .conn-group-chip:active{background:rgba(255,255,255,0.09);}
  .conn-group-chip.open{background:rgba(145,175,255,0.10);border-color:rgba(145,175,255,0.20);color:rgba(190,215,255,0.88);}
  .conn-group-chevron{font-size:10px;opacity:0.6;transition:transform .2s ease;display:inline-block;}
  .conn-group-chip.open .conn-group-chevron{transform:rotate(90deg);}
  .conn-group-members{display:none;flex-wrap:wrap;gap:5px;padding:4px 0 2px 2px;}
  .conn-group-members.open{display:flex;}
  .conn-chip:active,.conn-chip.lp-active{transform:scale(0.93);color:rgba(232,246,255,1.0);text-shadow:0 0 17px rgba(200,228,255,0.94),0 0 8px rgba(200,228,255,0.65),0 0 3px rgba(200,228,255,0.42);}
  .conn-no-video{font-size:11px;color:#5878a0;padding:4px 0;}
  /* ── 콘서트/팬미팅 ────────────────────────────── */
  .concert-row{margin-top:8px;padding-top:7px;border-top:0.5px solid rgba(255,255,255,0.10);}
  .concert-row:empty{display:none;margin:0;padding:0;border:none;}
  .concert-teaser{display:flex;align-items:center;gap:6px;width:100%;background:none;border:none;padding:2px 0;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;text-align:left;color:rgba(200,220,255,0.76);}
  .concert-teaser-txt{flex:1;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .concert-chevron{font-size:10px;opacity:0.6;transition:transform .2s ease;flex-shrink:0;}
  .concert-teaser.open .concert-chevron{transform:rotate(90deg);}
  .concert-list{display:none;flex-direction:column;gap:8px;margin-top:8px;}
  /* 예정 / 지난 공연 구분 라벨 — 목록 안에서 섹션 경계만 알려주는 최소한의 표시 */
  .concert-sec-lbl{font-size:10px;font-weight:700;letter-spacing:.06em;color:rgba(150,175,225,0.58);
    padding:4px 2px 0;text-transform:uppercase;}
  .concert-sec-lbl:not(:first-child){margin-top:6px;border-top:0.5px solid rgba(255,255,255,0.06);padding-top:8px;}
  .concert-more-btn{background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.10);
    border-radius:9px;padding:7px 10px;font-size:11px;font-family:inherit;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;
    color:rgba(185,210,250,0.78);-webkit-tap-highlight-color:transparent;}
  .concert-more-btn:hover{background:rgba(255,255,255,0.09);color:rgba(215,232,255,0.95);}
  /* KOPIS 오픈API 약관이 요구하는 출처 표기 — 데이터 바로 아래, 눈에 거슬리지 않되 읽히는 크기로 */
  .concert-credit{font-size:10px;color:rgba(150,170,210,0.50);letter-spacing:.01em;padding:2px 2px 0;}
  .concert-list.open{display:flex;}
  .concert-item{background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.09);border-radius:10px;padding:8px 10px;font-size:11px;color:rgba(200,220,255,0.7);}
  /* fable 개선안 반영(2026-08-28): grid 대신 flex. 포스터 옆 body(min-width:0)에 제목·날짜를 세로로 쌓고
     공연장·예매·다녀왔어요는 칩으로 가로 배치. 제목은 여러 줄 허용(line-height 1.35). min-width:0으로
     긴 제목 세로 줄바꿈 방지(직전 grid minmax 버그픽스를 flex 구조로 대체). 날짜 포맷 세련화는 다음 단계. */
  .concert-item.has-poster{display:flex;gap:12px;}
  .concert-poster{width:60px;height:85px;object-fit:cover;border-radius:8px;flex-shrink:0;
    background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.08);}
  .concert-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
  .concert-item-title{font-weight:700;font-size:13px;line-height:1.35;color:rgba(226,238,255,0.92);}
  .concert-item-date{font-size:11px;color:rgba(165,188,228,0.82);}
  .concert-item-meta{color:rgba(160,182,222,0.66);margin-bottom:6px;}
  .concert-item-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px;}
  .concert-venue-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:rgba(190,215,255,0.92);background:rgba(155,178,228,0.10);border:0.5px solid rgba(155,178,228,0.22);border-radius:9px;padding:5px 9px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;}
  .concert-venue-chip:hover{background:rgba(155,178,228,0.18);color:#dbeaff;}
  .concert-ticket-btn{display:inline-flex;align-items:center;font-size:11px;font-weight:700;color:rgba(200,220,248,0.9);background:rgba(155,178,228,0.16);border:0.5px solid rgba(155,178,228,0.3);border-radius:9px;padding:5px 10px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;text-decoration:none;font-family:inherit;}
  .concert-attend-btn{display:inline-flex;align-items:center;font-size:11px;font-weight:700;border-radius:9px;padding:5px 10px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;background:rgba(255,255,255,0.055);border:0.5px solid rgba(255,255,255,0.14);color:rgba(200,220,248,0.85);}
  .concert-attend-btn.on{background:rgba(155,178,228,0.26);color:#d5e5ff;border-color:rgba(170,195,255,0.45);}
  .concert-reaction-row{display:none;gap:4px;margin-top:4px;}
  .concert-reaction-row.open{display:flex;}
  .concert-reaction-btn{font-size:15px;background:none;border:none;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:2px 3px;border-radius:8px;opacity:0.55;transition:opacity .12s,background .12s;}
  .concert-reaction-btn:hover{opacity:0.85;}
  .concert-reaction-btn.sel{opacity:1;background:rgba(155,178,228,0.20);}
  .concert-note-input{width:100%;box-sizing:border-box;margin-top:4px;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.12);border-radius:7px;padding:6px 9px;font-size:12px;color:#c0d6f0;font-family:inherit;outline:none;}
  .concert-note-input::placeholder{color:rgba(155,178,228,0.41);}
  /* ── 그룹 카드 디스코그래피(앨범명/커버/발매일/종류/타이틀곡) — 멜론 데이터 기반, 2026-08-11 ──
     기본은 싱글/EP/정규만 노출, 리믹스·OST·라이브·컴필레이션 등은 "+" 눌러야 나옴(데이터는 항상 다
     들고 있음, isMain으로만 구분 — 사용자 요청). */
  .gc-discog-row{margin-top:7px;padding-top:10px;border-top:0.5px solid rgba(255,255,255,0.10);}
  .gc-discog-hd{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:12px;}
  .gc-discog-title{flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.14em;color:rgba(130,150,205,0.56);text-transform:uppercase;}
  /* ── Discography 종류 필터 + 정렬(2026-08-13) — 정렬 버튼은 밑의 영상 정렬(.gc-ch-sort-btn)과
     톤을 맞추려고 그 클래스를 그대로 재사용. "기타 앨범 보기" +/− 버튼도 원래 따로 있었는데 한 줄에
     컨트롤이 너무 많다는 피드백으로 이 정렬 드롭다운 안 항목(.gc-ch-view-toggle 재사용)으로 옮김.
     종류 필터는 영상 쪽의 "따로 떨어진 알약 여러 개"가 아니라 "하나의 트랙 안에서 선택 배경이
     슬라이드하는" 세그먼트 컨트롤을 원한다는 요청으로 별도 컴포넌트를 새로 만듦 — 이 앱에 이 형태가 없었음.
     처음엔 Discography 제목 밑에 별도 줄로 뒀는데, "옆으로 붙여서 한 줄에 다 넣어달라"는 요청으로
     제목과 같은 줄(.gc-discog-hd 안)로 옮기고 폭/높이를 확 줄인 축소판(.seg-control-sm)을 씀. */
  .gc-discog-hd-right{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0;}
  .gc-discog-hd-right .gc-ch-sort-wrap{flex-shrink:0;}
  .seg-control{position:relative;display:flex;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.09);border-radius:10px;padding:2px;flex:1;min-width:0;}
  .seg-control-sm{flex:0 1 auto;padding:1px;border-radius:8px;}
  .seg-control-sm .seg-btn{padding:4px 10px;font-size:10px;letter-spacing:-.01em;}
  .seg-control-sm .seg-thumb{top:1px;bottom:1px;border-radius:7px;}
  .seg-thumb{position:absolute;top:2px;bottom:2px;left:2px;width:0;border-radius:8px;
    background:linear-gradient(160deg,rgba(190,212,255,0.42),rgba(140,170,230,0.16));
    box-shadow:inset 0 1px 1px rgba(255,255,255,0.4),inset 0 -4px 8px -6px rgba(120,150,220,0.3),0 2px 6px rgba(120,150,220,0.25);
    transition:transform .22s cubic-bezier(0.4,0,0.2,1),width .22s cubic-bezier(0.4,0,0.2,1);
    pointer-events:none;}
  .seg-btn{position:relative;z-index:1;flex:1;background:none;border:none;padding:6px 4px;
    font-size:11px;font-weight:600;color:rgba(170,190,225,0.62);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;
    white-space:nowrap;transition:color .18s;}
  .seg-btn.active{color:#eef4ff;}
  .gc-discog-hd-right .gc-ch-sort-btn{font-size:12px;padding:2px 3px;}
  .gc-discog-strip{display:flex;gap:9px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;cursor:grab;}
  .gc-discog-strip::-webkit-scrollbar{display:none;}
  .gc-discog-item{flex-shrink:0;width:80px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  .gc-discog-cover{width:80px;height:80px;border-radius:8px;object-fit:cover;background:rgba(255,255,255,0.06);display:block;box-shadow:0 3px 10px rgba(0,0,0,0.35);}
  .gc-discog-type{font-size:8px;font-weight:700;letter-spacing:.03em;color:rgba(150,175,225,0.66);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .gc-discog-item-title{font-size:10px;color:rgba(215,228,255,0.85);line-height:1.28;margin-top:1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .gc-discog-extra .gc-discog-cover{opacity:.55;}
  /* ── 앨범 상세 팝업 ── */
  #gc-discog-detail{position:fixed;inset:0;z-index:102;display:none;align-items:flex-end;justify-content:center;}
  #gc-discog-detail.open{display:flex;}
  #gc-discog-detail-bg{position:absolute;inset:0;background:rgba(0,0,0,0.55);}
  #gc-discog-detail-sheet{position:relative;width:100%;background:rgba(14,18,38,0.98);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-radius:20px 20px 0 0;padding:22px 22px calc(22px + env(safe-area-inset-bottom,0px));box-sizing:border-box;z-index:1;text-align:center;}
  /* 데스크톱: 상단 기준으로 고정한다(2026-09-15 사용자 제보 — "곡 수마다 창 세로 길이가 바뀌어도
     위줄 위치는 고정돼야 한다"). 예전엔 컨테이너가 align-items:flex-end라 시트가 **아래에 붙어 위로
     자랐고**, 트랙 목록이 0~200px까지 늘어나는 만큼 상단이 그대로 튀었다. ‹ › 로 앨범을 넘길 때마다
     제목·커버가 위아래로 움직여서 특히 거슬린다.
     → flex-start + 고정 margin-top. 이제 높이는 아래로만 자란다.
     ⚠️ 모바일은 바꾸지 않는다 — 거긴 바텀시트(아래에서 올라오는) 패턴이 의도된 것이고, 거기서
        상단을 고정하면 시트가 화면 중간에 떠 버린다. */
  @media(min-width:769px){
    #gc-discog-detail{align-items:flex-start;}
    #gc-discog-detail-sheet{
      max-width:480px;border-radius:18px;
      margin-top:clamp(56px,12vh,120px);
      max-height:calc(100dvh - clamp(56px,12vh,120px) - 24px);
      overflow-y:auto;
    }
    #gc-discog-detail-cover{width:200px;height:200px;}
    #gc-discog-detail-tracks{max-height:none;}
  }
  #gc-discog-detail-close{position:absolute;top:10px;right:12px;background:none;border:none;color:rgba(190,205,240,0.4);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:4px;line-height:1;z-index:2;display:inline-flex;} /* ×텍스트(밝음)→얇은 SVG, 대비 낮춤(2026-08-22 사용자 요청 — 닫기는 은은하게) */
  #gc-discog-detail-close svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;}
  #gc-discog-detail-covrow{display:flex;align-items:center;justify-content:center;gap:14px;margin:4px 0 14px;}
  .gc-discog-cover-wrap{position:relative;flex-shrink:0;}
  #gc-discog-detail-cover{width:150px;height:150px;border-radius:12px;object-fit:cover;box-shadow:0 8px 28px rgba(0,0,0,0.45);display:block;}
  .gc-discog-flag-btn{position:absolute;bottom:6px;right:6px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,0.55);border:none;display:flex;align-items:center;justify-content:center;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;color:rgba(220,230,255,0.65);transition:color .15s,background .15s;}
  .gc-discog-flag-btn svg{width:14px;height:14px;display:block;}
  .gc-discog-flag-btn:hover{background:rgba(0,0,0,0.72);color:rgba(255,200,100,0.9);}
  .gc-discog-flag-btn.flagged{color:rgba(255,185,80,0.95);}
  .gc-discog-flag-btn.flagged svg{fill:currentColor;}
  .flag-thumb-sq{width:45px!important;height:45px!important;border-radius:5px!important;}
  .gc-discog-nav-btn{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.07);border:none;color:rgba(200,215,255,0.8);font-size:19px;line-height:1;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,opacity .15s;}
  .gc-discog-nav-btn:hover{background:rgba(255,255,255,0.13);color:#fff;}
  .gc-discog-nav-btn:disabled{opacity:.25;cursor:default;background:rgba(255,255,255,0.07);color:rgba(200,215,255,0.8);}
  #gc-discog-detail-type{font-size:10px;font-weight:700;letter-spacing:.14em;color:rgba(150,175,225,0.71);text-transform:uppercase;}
  #gc-discog-detail-title{font-size:15px;font-weight:700;color:#e4ecff;margin-top:5px;line-height:1.32;}
  #gc-discog-detail-meta{font-size:var(--fz-meta);color:rgba(150,170,210,0.66);margin-top:6px;}
  #gc-discog-detail-track-lbl{font-size:var(--fz-meta);font-weight:700;letter-spacing:.14em;color:rgba(130,150,205,0.56);text-transform:uppercase;margin-top:18px;padding-top:14px;border-top:0.5px solid rgba(255,255,255,0.08);text-align:left;}
  #gc-discog-detail-tracks{margin-top:6px;max-height:200px;overflow-y:auto;text-align:left;}
  .gc-discog-track{display:flex;align-items:baseline;gap:9px;padding:6px 4px;font-size:13px;border-radius:7px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .13s;}
  .gc-discog-track:hover{background:rgba(255,255,255,0.06);}
  /* ── 트랙 클릭 → 영상 필터 결과 (2026-08-18) ──
     gc-discog-detail(z-index:102) 위에 새 시트를 얹는 방식 — 앨범 상세를 안 닫고 그대로 뒤에 살려둬서,
     ×로 닫으면 원래 보던 화면(앨범 트랙리스트)이 그대로 남아있게(사용자 피드백: "돌아가기 너무 어려움",
     기존엔 검색창을 그 자리에서 고쳐 쓰는 방식이라 되돌리기가 애매했음). */
  #gc-track-videos-overlay{position:fixed;inset:0;z-index:110;display:none;align-items:flex-end;justify-content:center;}
  #gc-track-videos-overlay.open{display:flex;}
  #gc-track-videos-bg{position:absolute;inset:0;background:rgba(0,0,0,0.55);}
  /* 고정 높이 — 내용 로드에 따라 창이 커지는 "점프"를 없앤다(2026-09-02 제보 "채워진 정도와 무관하게 크기 고정").
     열리는 순간부터 78vh, 리스트가 내부 스크롤로 채워진다(#...-list flex:1). 큰 콘텐츠 창의 표준 패턴. */
  #gc-track-videos-sheet{position:relative;width:100%;height:78vh;display:flex;flex-direction:column;background:rgba(14,18,38,0.98);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-radius:20px 20px 0 0;padding:22px 22px calc(16px + env(safe-area-inset-bottom,0px));box-sizing:border-box;z-index:1;}
  @media(min-width:769px){
    #gc-track-videos-overlay{align-items:center;}
    #gc-track-videos-sheet{max-width:580px;width:580px;height:min(85vh,780px);border-radius:18px;margin-bottom:0;}
  }
  #gc-track-videos-close{position:absolute;top:10px;right:12px;background:none;border:none;color:rgba(190,205,240,0.66);font-size:20px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:4px;line-height:1;z-index:2;}
  /* 곡 상세 헤더 — 앨범커버 + (제목/아티스트·앨범·연도). 커버·메타는 로드 후 채워짐(2026-09-02) */
  #gc-track-videos-header{display:flex;gap:11px;align-items:center;flex-shrink:0;}
  #gc-track-videos-cover{width:52px;height:52px;border-radius:8px;object-fit:cover;flex-shrink:0;box-shadow:0 2px 12px rgba(0,0,0,0.45);}
  #gc-track-videos-cover[hidden]{display:none;}
  #gc-track-videos-head-txt{min-width:0;flex:1;} /* min-width:0 — 긴 곡명 세로줄바꿈 방지(flex 텍스트 원칙) */
  #gc-track-videos-title{font-size:var(--fz-title);font-weight:700;color:#e4ecff;line-height:1.32;padding-right:24px;}
  #gc-track-videos-meta{font-size:var(--fz-meta);color:rgba(165,185,225,0.72);margin-top:3px;line-height:1.3;padding-right:24px;}
  #gc-track-videos-meta.hidden{display:none;}
  /* 탭 줄에 원곡/커버 + 형식 칩이 같이 오면 좁은 시트에선 넘친다 — 가로 스크롤(JS가 _enableDragScroll로
     드래그도 열어준다). 스크롤바는 숨기고 스크롤만 남긴다(다른 가로 목록과 같은 처리). */
  #gc-track-videos-tabs{display:flex;gap:6px;margin-top:12px;flex-shrink:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  #gc-track-videos-tabs::-webkit-scrollbar{display:none;}
  #gc-track-videos-tabs.hidden{display:none;}
  .tvf-tab{flex-shrink:0;font-size:12px;font-weight:600;color:rgba(190,205,240,0.72);background:rgba(255,255,255,0.06);border:none;border-radius:14px;padding:5px 14px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .13s,color .13s;font-family:inherit;white-space:nowrap;}
  .tvf-tab.active{background:rgba(120,150,255,0.92);color:#fff;}
  /* 원곡/커버(어느 쪽 영상인가)와 형식(무엇을 찍은 영상인가)은 서로 다른 축이라 같은 줄에서도 구분선으로 가른다 */
  .tvf-tab-sep{flex-shrink:0;align-self:center;width:1px;height:16px;background:rgba(140,170,240,0.22);margin:0 3px;}
  .tvf-cover-chip{display:inline-block;margin-right:6px;font-size:10px;font-weight:700;color:#c7d2ff;background:rgba(120,150,255,0.2);border-radius:6px;padding:1px 5px;vertical-align:middle;}
  /* 액션 줄(2026-09-21) — 전체 재생 + 정렬 토글 */
  #gc-track-videos-actions{display:flex;align-items:center;gap:8px;margin-top:10px;flex-shrink:0;}
  #gc-track-videos-actions.hidden{display:none;}
  .tvf-play{display:inline-flex;align-items:center;gap:7px;background:rgba(120,150,255,0.92);color:#fff;border:none;border-radius:12px;padding:8px 14px;font-size:13px;font-weight:700;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;white-space:nowrap;}
  .tvf-play:hover{background:rgba(134,162,255,0.96);}
  .tvf-play-ic{font-size:10px;line-height:1;}
  .tvf-sort{margin-left:auto;background:rgba(255,255,255,0.06);color:rgba(190,205,240,0.78);border:none;border-radius:12px;padding:8px 12px;font-size:12px;font-weight:600;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;white-space:nowrap;}
  .tvf-sort:hover{background:rgba(255,255,255,0.1);}
  #gc-track-videos-list{margin-top:14px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;min-height:0;flex:1;}
  /* ── 조합 패널(2026-09-02) — 앵커 없는 대등 멤버 조합. 고정 높이(#3 패턴)+내부 스크롤. tvf-* 재사용 ── */
  #combo-overlay{position:fixed;inset:0;z-index:112;display:none;align-items:flex-end;justify-content:center;}
  #combo-overlay.open{display:flex;}
  #combo-bg{position:absolute;inset:0;background:rgba(0,0,0,0.55);}
  #combo-sheet{position:relative;width:100%;height:82vh;display:flex;flex-direction:column;background:rgba(14,18,38,0.98);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-radius:20px 20px 0 0;padding:20px 20px calc(16px + env(safe-area-inset-bottom,0px));box-sizing:border-box;}
  @media(min-width:769px){#combo-sheet{max-width:430px;height:min(82vh,640px);border-radius:18px;margin-bottom:70px;}}
  #combo-close{position:absolute;top:10px;right:12px;background:none;border:none;color:rgba(190,205,240,0.66);font-size:20px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:4px;line-height:1;z-index:2;}
  #combo-hd{display:flex;align-items:baseline;gap:8px;flex-shrink:0;padding-right:24px;}
  #combo-title{font-size:15px;font-weight:800;color:#e9eeff;}
  #combo-count{font-size:11px;color:rgba(150,175,235,0.6);}
  #combo-sub{font-size:var(--fz-meta);color:rgba(160,180,220,0.66);margin-top:3px;flex-shrink:0;}
  #combo-search{margin-top:12px;width:100%;background:rgba(255,255,255,0.06);border:0.5px solid rgba(140,170,240,0.18);border-radius:12px;padding:9px 13px;color:#c8d8f0;font-size:14px;outline:none;box-sizing:border-box;font-family:inherit;flex-shrink:0;}
  #combo-search::placeholder{color:rgba(140,160,200,0.4);}
  #combo-suggest{display:flex;flex-direction:column;max-height:150px;overflow-y:auto;flex-shrink:0;}
  #combo-suggest:not(:empty){margin-top:6px;background:rgba(255,255,255,0.03);border-radius:10px;}
  .combo-sug{display:flex;align-items:baseline;gap:8px;background:none;border:none;text-align:left;padding:8px 12px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;color:#dbe4fa;font-size:13px;font-family:inherit;}
  .combo-sug:hover{background:rgba(255,255,255,0.06);}
  .combo-sug-g{font-size:11px;color:rgba(150,175,235,0.6);}
  #combo-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;flex-shrink:0;}
  #combo-chips:empty{margin-top:0;}
  .combo-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(120,150,255,0.16);border:0.5px solid rgba(120,150,255,0.3);border-radius:14px;padding:4px 6px 4px 11px;font-size:13px;color:#e4ecff;}
  .combo-chip-g{font-size:10px;color:rgba(170,190,240,0.62);}
  .combo-chip button{background:none;border:none;color:rgba(200,215,250,0.7);font-size:15px;line-height:1;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:0 3px;}
  #combo-actions{display:flex;gap:8px;align-items:center;margin-top:12px;flex-shrink:0;}
  #combo-go{flex:1;background:rgba(120,150,255,0.92);color:#fff;border:none;border-radius:12px;padding:10px;font-size:14px;font-weight:700;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;}
  #combo-go:disabled{background:rgba(255,255,255,0.08);color:rgba(200,215,250,0.4);cursor:default;}
  #combo-share{background:rgba(255,255,255,0.08);color:#c8d8f0;border:none;border-radius:12px;padding:10px 14px;font-size:13px;font-weight:600;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;white-space:nowrap;font-family:inherit;}
  #combo-results{margin-top:14px;overflow-y:auto;display:block;min-height:0;flex:1;} /* buildVideoSection이 자체 레이아웃(대표영상+행패커 그리드)을 붙이므로 일반 블록 */
  .combo-who{font-size:11px;color:rgba(150,175,235,0.62);margin-top:2px;} /* 이 영상에 나온 선택 멤버들 */
  .combo-entry{display:flex;flex-direction:column;gap:2px;width:calc(100% - 26px);margin:8px 13px 4px;padding:11px 14px;background:linear-gradient(100deg,rgba(120,150,255,0.16),rgba(84,224,198,0.10));border:0.5px solid rgba(120,150,255,0.25);border-radius:13px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;text-align:left;}
  .combo-entry-t{font-size:13px;font-weight:700;color:#e9eeff;}
  .combo-entry-s{font-size:11px;color:rgba(175,195,240,0.7);}
  /* ── 발자국(2026-09-02) — 방금 본 카드로 되돌아가기. 카드 닫혀 우주로 돌아왔을 때만 좌하단에 뜬다(클린 유지).
     기본은 🐾 토글만, 누르면 최근 카드 칩 트레일. localStorage라 닫혀도·재방문에도 남는다. ── */
  #footprint-bar{position:fixed;left:12px;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:41;display:none;align-items:center;gap:8px;max-width:calc(100vw - 24px);}
  #fp-toggle{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:rgba(16,20,44,0.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:0.5px solid rgba(140,170,240,0.22);color:#c8d8f0;font-size:16px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;box-shadow:0 3px 14px rgba(0,0,0,0.4);line-height:1;padding:0;}
  #fp-trail{display:none;gap:6px;overflow-x:auto;padding:2px 2px 4px;-webkit-overflow-scrolling:touch;}
  #footprint-bar.open #fp-trail{display:flex;}
  .fp-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;background:rgba(16,20,44,0.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:0.5px solid rgba(140,170,240,0.2);border-radius:16px;padding:6px 12px;color:#dbe4fa;font-size:12px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;white-space:nowrap;font-family:inherit;box-shadow:0 3px 12px rgba(0,0,0,0.35);}
  .fp-ic{font-size:9px;color:rgba(150,180,255,0.75);}
  /* ── 이어서 발견(2026-09-02) — 멤버 카드 하단 컨텍스트 홉. 탐험 루프 엔진 ── */
  #tt-discover{margin-top:8px;padding-top:12px;border-top:0.5px solid rgba(255,255,255,0.07);}
  .ttd-lbl{font-size:var(--fz-meta);font-weight:700;letter-spacing:.14em;color:rgba(130,150,205,0.56);text-transform:uppercase;margin-bottom:7px;}
  .ttd-hop{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:rgba(255,255,255,0.03);border:0.5px solid rgba(140,170,240,0.14);border-radius:10px;padding:7px 11px;margin-bottom:6px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;}
  .ttd-hop:hover{background:rgba(255,255,255,0.06);}
  .ttd-orb{width:52px;height:34px;border-radius:8px;flex-shrink:0;background-size:cover;background-position:center;box-shadow:0 2px 8px rgba(0,0,0,0.35);}
  .ttd-txt{display:flex;flex-direction:column;gap:1px;min-width:0;}
  .ttd-main{font-size:13px;font-weight:600;color:#e4ecff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .ttd-note{font-size:11px;color:rgba(150,175,235,0.6);}
  .tvf-item{display:flex;align-items:flex-start;gap:10px;padding:6px;border-radius:10px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .13s;}
  .tvf-item:hover{background:rgba(255,255,255,0.06);}
  /* 썸네일 래퍼 — 재생시간 배지를 붙이기 위한 것. 톤은 .gc-ch-dur/.feed-card-dur와 동일(같은 정보, 같은 생김새) */
  .tvf-thumb-wrap{position:relative;width:88px;flex-shrink:0;line-height:0;}
  .tvf-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:7px;background:rgba(255,255,255,0.06);display:block;}
  .tvf-dur{position:absolute;right:4px;bottom:4px;z-index:2;font-size:10px;font-weight:600;padding:1px 4px;border-radius:3px;letter-spacing:0.2px;background:rgba(8,11,20,0.78);color:rgba(240,246,255,0.94);pointer-events:none;line-height:1.35;}
  .tvf-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;} /* min-width:0 — 긴 제목이 썸네일을 밀지 않게 */
  .tvf-title{font-size:var(--fz-body);color:rgba(210,225,255,0.85);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
  .tvf-meta{font-size:var(--fz-meta);color:rgba(160,182,224,0.66);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .tvf-empty{font-size:12px;color:rgba(155,178,228,0.5);text-align:center;padding:20px 0;}
  .gc-discog-track-no{flex-shrink:0;width:16px;color:rgba(130,150,205,0.51);font-size:11px;text-align:right;font-variant-numeric:tabular-nums;}
  .gc-discog-track-name{flex:1;min-width:0;color:rgba(200,215,250,0.82);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .gc-discog-track.is-title .gc-discog-track-no{color:rgba(255,190,130,0.85);}
  .gc-discog-track.is-title .gc-discog-track-name{color:#ffdcb0;font-weight:700;}
  /* 트랙별 멜론/스포티파이 뱃지 — 아이콘만 있고 클릭해도 아무 정보가 없으면 이상하다는 피드백으로,
     클릭하면 전체 트로피 패널을 새로 열지 않고 그 자리에서 작은 텍스트가 펼쳐지는 가벼운 토글로
     구현(2026-08-19). */
  /* ── 크레딧 칩 ── */
  #gc-discog-detail-credits,#gc-track-videos-credits{padding:12px 0 2px;}
  .gcdc-lbl{font-size:10px;font-weight:700;letter-spacing:.14em;color:rgba(120,145,200,0.5);margin-bottom:8px;}
  .gcdc-chips{display:flex;flex-wrap:wrap;gap:5px;}
  .gcdc-list{display:flex;flex-direction:column;gap:8px;}
  .gcdc-row{display:flex;flex-direction:column;gap:3px;}
  .gcdc-row-head{background:none;border:none;padding:0;display:flex;align-items:center;gap:7px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  .gcdc-row-head:hover .gcdc-name{color:#fff;}
  .gcdc-song-list{font-size:10px;color:rgba(140,160,210,0.6);line-height:1.4;padding-left:1px;text-align:left;}
  .gcdc-chip{background:rgba(255,255,255,0.06);border:0.5px solid rgba(255,255,255,0.11);border-radius:20px;padding:4px 10px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;display:flex;align-items:center;gap:5px;transition:background .13s;}
  .gcdc-chip:hover{background:rgba(255,255,255,0.12);}
  .gcdc-name{font-size:12px;color:rgba(205,220,255,0.88);font-weight:500;}
  .gcdc-role{font-size:10px;color:rgba(130,155,210,0.52);}
  .gc-discog-track-badge{flex-shrink:0;background:none;border:none;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:2px;display:inline-flex;color:rgba(210,175,80,0.55);transition:color .15s,transform .12s;}
  .gc-discog-track-badge svg{width:11px;height:11px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .gc-discog-track-badge:hover{color:rgba(220,185,80,0.95);transform:scale(1.15);}
  .gc-discog-track-badge-info{flex-shrink:0;font-size:10px;color:rgba(220,185,80,0.85);white-space:nowrap;}
  /* ── 그룹/멤버 카드 내 컬렉션 행(내 컬렉션 + 공개 컬렉션 중 이 그룹이 담긴 것) ── */
  .gc-collection-row{margin-top:7px;padding-top:8px;border-top:0.5px solid rgba(255,255,255,0.10);}
  .gc-collection-hd{font-size:10px;font-weight:700;letter-spacing:.16em;color:rgba(130,150,205,0.56);text-transform:uppercase;margin-bottom:7px;}
  .gc-collection-list{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;}
  .gc-collection-list::-webkit-scrollbar{display:none;}
  .gc-collection-chip{flex-shrink:0;width:80px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  /* 영상 0개 컬렉션 칩은 눌러도 아무 일 없어 "죽은 클릭"처럼 보였다(2026-09-05 UX감사 #5) — 흐리게+기본
     커서로 "아직 빔"을 명확히 해 오해를 없앤다. */
  .gc-collection-chip-empty{opacity:0.45;cursor:default;}
  /* 한 사람의 시간축(2026-09-05, 킬러 6.3) — 컬렉션 헤더와 같은 톤의 미니 라벨 + 세로 마일스톤 목록 */
  #tt-timeline-section,#gc-timeline-section{margin-top:16px;padding-top:12px;border-top:0.5px solid rgba(255,255,255,0.10);}
  .tt-timeline-hd{font-size:10px;font-weight:700;letter-spacing:.16em;color:rgba(130,150,205,0.56);text-transform:uppercase;margin-bottom:6px;}
  .tt-tl-row{display:flex;align-items:baseline;gap:8px;padding:2px 0;font-size:12px;}
  .tt-tl-dot{width:15px;text-align:center;flex-shrink:0;font-size:11px;}
  .tt-tl-date{color:rgba(150,175,225,0.62);font-variant-numeric:tabular-nums;min-width:50px;flex-shrink:0;}
  .tt-tl-label{color:rgba(205,222,255,0.85);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* 별자리 글리프(디자인리뷰 Q2) — 카드 헤더 이름 왼쪽. 빈 span(글리프 없음)이면 자리·여백 0. */
  .card-glyph{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:7px;flex-shrink:0;opacity:0.92;}
  .card-glyph:empty{display:none;margin:0;}
  /* 이름 행 안에서는 gap이 이미 여백을 만들므로 glyph의 margin-right를 제거해 이중여백 방지 */
  #tt-name-row .card-glyph,#gc-name-row .card-glyph{margin-right:0;}
  .gc-collection-chip-thumb-wrap{position:relative;width:80px;height:80px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,0.06);}
  .gc-collection-chip-thumb{width:100%;height:100%;object-fit:cover;display:block;}
  .gc-collection-quad{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1.5px;width:100%;height:100%;}
  .gc-collection-quad img{width:100%;height:100%;object-fit:cover;display:block;}
  .gc-collection-quad .gc-quad-empty{background:rgba(255,255,255,0.05);}
  .gc-collection-chip-mine{position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:rgba(130,185,255,0.95);box-shadow:0 0 5px rgba(130,185,255,0.7);}
  .gc-collection-chip-name{margin-top:4px;font-size:11px;color:rgba(200,220,255,0.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .gc-collection-chip-cnt{font-size:10px;color:rgba(120,145,190,0.54);}
  .gc-collection-chip-del{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:rgba(20,26,48,0.72);border:0.5px solid rgba(130,185,255,0.3);color:rgba(210,228,255,0.85);font-size:13px;line-height:1;padding:0;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.15s,background 0.15s;}
  .gc-collection-chip:hover .gc-collection-chip-del{opacity:1;}
  .gc-collection-chip-del:hover{background:rgba(130,185,255,0.35);color:#fff;}
  /* 폰엔 hover가 없어 삭제 버튼이 영영 안 보이고 못 눌렀다(2026-09-05 UX감사 #1) — scrap-btn/col-btn과
     동일한 터치 폴백. 14→22px로 히트영역도 키움. */
  @media(hover:none){ .gc-collection-chip-del{opacity:0.6;} }
  #venue-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:80;display:none;align-items:center;justify-content:center;}
  #venue-overlay.open{display:flex;}
  #venue-panel{position:relative;width:min(320px,calc(100vw - 40px));max-height:min(480px,calc(100vh - 80px));overflow-y:auto;background:rgba(13,17,34,0.97);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border-radius:18px;box-shadow:0 16px 56px rgba(0,0,0,0.72);border:0.5px solid rgba(255,255,255,0.10);padding:20px;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  #venue-panel-close{position:absolute;top:14px;right:14px;}
  #venue-panel-list{display:flex;flex-direction:column;gap:8px;margin-top:6px;}
  .venue-item{background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.09);border-radius:10px;padding:8px 10px;font-size:12px;color:rgba(200,220,255,0.85);}
  .venue-item-title{font-weight:700;font-size:var(--fz-body);color:rgba(220,235,255,0.95);margin-bottom:3px;}
  .concert-log-info{flex:1;min-width:0;}
  .concert-log-note{font-size:11px;color:rgba(160,182,222,0.66);margin-top:2px;font-style:italic;}
  /* ── 음악방송 1위 트로피 ──────────────────────── */
  .trophy-btn{background:none;border:none;outline:none;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:2px 3px;border-radius:6px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:rgba(210,175,80,0.52);transition:color .15s,transform .12s;}
  .trophy-btn svg{width:13px;height:13px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .trophy-btn:hover{color:rgba(220,185,80,0.95);transform:scale(1.18);}
  .trophy-btn:active{transform:scale(0.9);}
  #trophy-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:80;display:none;align-items:center;justify-content:center;}
  #trophy-overlay.open{display:flex;}
  #trophy-panel{position:relative;width:min(320px,calc(100vw - 40px));max-height:min(480px,calc(100vh - 80px));overflow-y:auto;background:rgba(13,17,34,0.97);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border-radius:18px;box-shadow:0 16px 56px rgba(0,0,0,0.72);border:0.5px solid rgba(255,255,255,0.10);padding:20px;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  #trophy-panel-close{position:absolute;top:14px;right:14px;}
  #trophy-panel-tabs{margin-top:12px;}
  #trophy-panel-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
  .trophy-item{display:flex;align-items:baseline;gap:8px;padding:5px 2px;border-bottom:0.5px solid rgba(255,255,255,0.06);font-size:12px;}
  .trophy-item-date{color:rgba(160,182,222,0.66);flex-shrink:0;font-variant-numeric:tabular-nums;}
  .trophy-item-show{color:rgba(220,200,150,0.85);font-weight:700;flex-shrink:0;}
  .trophy-item-song{color:rgba(210,225,255,0.9);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* ✦ 연결 버튼 */
  #tt-conn-row{margin-top:6px;}
  .tt-conn-btn{
    margin-left:auto;flex-shrink:0;white-space:nowrap;
    display:inline-flex;align-items:center;padding:3px 9px;border-radius:18px;
    font-size:9px;font-weight:600;letter-spacing:.10em;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;
    background:rgba(165,200,255,0.07);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border:0.5px solid rgba(165,200,255,0.20);
    color:rgba(185,215,255,0.80);
    opacity:0;transform:translateY(2px);
    transition:background .18s,border-color .18s,color .18s,
               opacity .42s ease,transform .42s cubic-bezier(0.22,1,0.36,1);
  }
  .tt-conn-btn.conn-btn-visible{opacity:1;transform:translateY(-1px);}
  .tt-conn-btn:hover{background:rgba(165,200,255,0.13);border-color:rgba(165,200,255,0.34);color:rgba(215,235,255,0.98);}
  .tt-conn-btn:active{opacity:0.55;}
  /* 연결 카드 첫 로딩(이름 많은 멤버는 몇 초 걸릴 수 있음) 동안 텍스트 대신 작은 스피너 표시.
     ⚠️ transition:none이 핵심이다(2026-08-28, 사용자 제보 "로딩 아이콘이 연결 텍스트 위로 겹쳐 보임").
     .tt-conn-btn 기본 규칙에 `color .18s` 트랜지션이 걸려 있어서 글자가 0.18초에 걸쳐 서서히 사라지는데,
     이 클래스를 붙인 직후 openConnCard가 메인 스레드를 통째로 막는다 — 그러면 트랜지션이 시작만 하고
     진행을 못 해서, 글자가 그대로 남은 채 그 위에 스피너만 얹힌 상태로 몇 초간 얼어붙는다.
     로딩 표시는 "부드럽게" 바뀔 이유가 없으므로 즉시 전환한다. */
  .tt-conn-btn.conn-btn-loading{color:transparent;pointer-events:none;position:relative;transition:none;}
  .tt-conn-btn.conn-btn-loading::after{
    content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
    border-radius:50%;border:1.5px solid rgba(185,215,255,0.30);border-top-color:rgba(185,215,255,0.95);
    animation:tt-conn-spin .7s linear infinite;
  }
  @keyframes tt-conn-spin{to{transform:rotate(360deg);}}
  /* ── Tag chips ───────────────────────────────────── */
  .tag-chip{
    display:inline;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;
    padding:1px 7px;border-radius:12px;font-size:11px;font-weight:600;letter-spacing:.04em;
    padding:1px 4px;background:none;border:none;
    color:rgba(170,205,255,0.80);
    text-shadow:0 0 7px rgba(140,175,255,0.32),0 0 3px rgba(140,175,255,0.14);
    transition:color .14s,text-shadow .14s;user-select:none;
  }
  /* 생년월일 칩도 소속사·국적과 같은 base 색으로(2026-09-01, 사용자 요청 — 예전 "부차 정보라 어둡게"를 되돌림) */
  .tag-chip:hover{color:rgba(210,230,255,1.0);text-shadow:0 0 10px rgba(170,210,255,0.52),0 0 4px rgba(170,210,255,0.24);}
  .tag-chip.active{color:#fff;text-shadow:0 0 10px rgba(190,220,255,0.60),0 0 4px rgba(190,220,255,0.30);}
  /* 해체 그룹·탈퇴 멤버의 소속사 표기는 이제 과거 정보라 흐리게(2026-08-14, 사용자 요청) */
  .tag-chip.tag-chip-past{color:rgba(170,205,255,0.42);text-shadow:none;}
  .tag-chip.tag-chip-past:hover{color:rgba(190,215,255,0.60);text-shadow:none;}
  /* 데뷔일 옆 "~ 해체일"(2026-08-27) — 폰트/크기는 데뷔일과 동일하게 두고 색만 낮춘다.
     값은 .tag-chip-past(과거형 태그)와 같은 것을 쓴다 — 이 프로젝트에서 "지난 것"을 뜻하는 색이
     이미 그거라, 새 값을 만들면 같은 의미에 두 가지 톤이 생긴다. glow도 같이 뺀다(빛나면 현재형으로 읽힘). */
  .gc-show-suffix.gc-disband-suffix{color:rgba(170,205,255,0.42);text-shadow:none;}
  /* 데뷔 연도 옆 출신 프로그램명 — tag-chip과 폰트는 통일하되 클릭 불가(필터 대상 아님) */
  .gc-show-suffix{
    display:inline;padding:1px 4px 1px 0;font-size:11px;font-weight:600;letter-spacing:.04em;
    color:rgba(170,205,255,0.80);text-shadow:0 0 7px rgba(140,175,255,0.32),0 0 3px rgba(140,175,255,0.14);
    user-select:none;cursor:default;
  }
  /* ── Filter panel (journal-sidebar 내) ───────────── */
  #filter-panel{display:none;}
  /* ── Zoom slider ────────────────────────────────── */
  #zoom-ctrl{position:fixed;left:18px;bottom:24px;display:flex;flex-direction:column;align-items:center;gap:0;z-index:50;user-select:none;width:30px;background:rgba(12,16,36,0.60);border:1px solid rgba(140,165,220,0.16);border-radius:14px;padding:10px 0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 2px 14px rgba(0,0,0,0.22);transition:left 0.32s cubic-bezier(0.4,0,0.2,1);}
  #journal-sidebar.open~#zoom-ctrl{left:318px;} /* 저널 사이드바는 300px 그대로 */
  #zoom-ctrl.zoom-feed-open{left:438px;} /* 탐험 레일 폭 - 2px(380→440, 2026-10-02) */
  /* 모바일 줌 컨트롤(2026-08-31, 사용자 요청) — 예전엔 모바일에서 통째로 숨겼는데(핀치 줌이 있으니),
     "우주만 보이는 상태"에선 줌 레벨을 눈으로 보고 조절할 수 있는 게 낫다는 요청. 카드·탐험 패널·
     라이트박스·검색 등 **뭐라도 열려 있으면 숨긴다** — 우주가 실제로 보일 때만 뜨는 게 핵심이라
     상태를 하나라도 빠뜨리면 다른 화면 위에 떠버린다.
     위치는 하단 탭바 바로 위 오른쪽 끝(엄지 닿는 쪽). 데스크톱은 왼쪽 그대로. */
  @media(max-width:768px){
    #zoom-ctrl{display:none;}
    body:not(.feed-open):not(:has(#mob-sheet.bs-open)):not(:has(#mob-card-stack.bs-open)):not(:has(#yt-lightbox.open)):not(:has(#tabbar.search-mode)):not(:has(#settings-panel.open)):not(:has(#profile-panel.open)):not(:has(#conn-panel.open)) #zoom-ctrl{
      display:flex;
      left:auto;right:12px;
      bottom:calc(78px + env(safe-area-inset-bottom,0px)); /* 탭바(패딩 9+11 + 버튼) 위 */
      background:rgba(12,16,36,0.52);
    }
    /* 터치 타깃 확보 — 데스크톱 10px 점은 손가락으로 못 집는다([[모바일 터치 타겟 수정]]과 같은 이유).
       ⚠️ 다만 그때 시각 크기까지 18px로 키웠더니 "원이 너무 크고 눈에 띈다"는 제보(2026-09-02).
       소셜 링크 아이콘 때와 같은 해법 — **보이는 크기는 줄이고 누르는 영역만 투명하게 넓힌다.**
       ::before가 34px 히트영역이라 손가락으로 집는 감각은 그대로다(#zoom-ctrl 38px 안에 들어간다). */
    #zoom-ctrl #zoom-track{height:110px;width:3px;}
    #zoom-ctrl #zoom-thumb{width:12px;height:12px;box-shadow:0 0 5px rgba(110,150,255,0.42);}
    #zoom-ctrl #zoom-thumb::before{
      content:'';position:absolute;left:50%;top:50%;width:34px;height:34px;
      transform:translate(-50%,-50%);border-radius:50%;
    }
    #zoom-ctrl{width:38px;padding:12px 0;touch-action:none;}
  }
  #zoom-track{width:2px;height:96px;background:rgba(140,165,220,0.15);border-radius:1px;position:relative;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;flex-shrink:0;}
  #zoom-thumb{width:10px;height:10px;background:rgba(150,180,255,0.85);border-radius:50%;position:absolute;left:50%;transform:translateX(-50%);top:0;cursor:grab;box-shadow:0 0 6px rgba(110,150,255,0.55);transition:background .15s,box-shadow .15s;}
  #zoom-thumb:hover{background:rgba(185,210,255,1);box-shadow:0 0 10px rgba(130,170,255,0.75);}
  #zoom-thumb:active{cursor:grabbing;}
  #filter-panel-hd{
    display:flex;align-items:flex-start;justify-content:space-between;
    padding:0 0 10px;border-bottom:0.5px solid rgba(255,255,255,0.08);margin-bottom:10px;
  }
  #filter-panel-label{font-size:9px;font-weight:700;letter-spacing:.20em;color:rgba(130,150,205,0.56);text-transform:uppercase;margin-bottom:4px;}
  #filter-panel-active{font-size:12px;color:rgba(195,215,255,0.92);font-weight:600;letter-spacing:.02em;}
  #filter-panel-clear{background:none;border:none;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-size:16px;line-height:1;
    color:rgba(140,165,220,0.46);transition:color .13s;padding:2px 4px;flex-shrink:0;margin-top:-1px;}
  #filter-panel-clear:hover{color:rgba(200,220,255,0.85);}
  .fli-group-hd{font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(120,145,200,0.48);padding:12px 0 5px;}
  .filter-list-item{
    display:flex;flex-direction:column;
    padding:7px 0;border-bottom:0.5px solid rgba(255,255,255,0.055);
    cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:opacity .13s;
  }
  .filter-list-item:last-child{border-bottom:none;}
  .filter-list-item:hover .fli-name{color:#e0eeff;}
  .fli-item-row{display:flex;align-items:center;justify-content:space-between;}
  .fli-name{font-size:13px;color:#b8d0ee;font-weight:500;transition:color .13s;}
  .fli-sub{font-size:11px;color:#5878a0;letter-spacing:.04em;flex-shrink:0;margin-left:8px;}
  .fli-date-line{display:flex;align-items:center;margin-bottom:4px;}
  .fli-date-txt{font-size:10px;font-weight:700;color:rgba(170,200,245,0.88);letter-spacing:.12em;}
  .fli-day-num{font-size:9px;color:rgba(140,165,215,0.71);letter-spacing:.06em;margin-right:9px;font-variant-numeric:tabular-nums;flex-shrink:0;}
  /* ── Index entry row (마이페이지 상단) ─────────────── */
  #sp-index-btn{width:100%;box-sizing:border-box;display:flex;align-items:center;gap:7px;padding:8px 9px;margin-bottom:11px;border-radius:9px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;background:rgba(140,165,220,0.07);border:0.5px solid rgba(140,165,220,0.16);transition:background .13s,border-color .13s;font-family:inherit;}
  #sp-index-btn:hover{background:rgba(140,165,220,0.13);border-color:rgba(140,165,220,0.30);}
  #sp-index-lbl{font-size:10px;font-weight:700;letter-spacing:.18em;color:rgba(150,175,225,0.80);}
  #sp-index-count{flex:1;text-align:right;font-size:11px;color:rgba(180,200,240,0.68);letter-spacing:.02em;}
  #sp-index-arrow{font-size:13px;color:rgba(140,165,220,0.51);}
  /* ── Index panel controls (필터 패널 내 인덱스 모드) ── */
  #idx-ctrl-row{margin-bottom:10px;}
  #idx-view-toggle{display:flex;gap:4px;margin-bottom:8px;}
  .idx-view-btn{flex:1;background:rgba(255,255,255,0.04);border:0.5px solid rgba(255,255,255,0.08);border-radius:7px;color:rgba(150,175,220,0.66);font-family:inherit;font-size:11px;font-weight:600;padding:5px 0;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .13s,color .13s,border-color .13s;}
  .idx-view-btn.active{background:rgba(126,156,255,0.16);border-color:rgba(126,156,255,0.32);color:rgba(210,225,255,0.95);}
  #idx-sort-row{display:flex;gap:6px;margin-bottom:8px;}
  #idx-sort-sel{flex:1;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.09);border-radius:7px;color:#c8d8f0;font-family:inherit;font-size:11px;padding:5px 7px;outline:none;}
  #idx-dir-btn{width:28px;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.09);border-radius:7px;color:rgba(180,200,240,0.75);font-size:12px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .13s,color .13s;}
  #idx-dir-btn:hover{background:rgba(255,255,255,0.09);color:#fff;}
  #idx-search-inp{width:100%;box-sizing:border-box;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.09);border-radius:7px;color:#c8d8f0;font-family:inherit;font-size:12px;padding:6px 9px;outline:none;letter-spacing:.02em;}
  #idx-search-inp::placeholder{color:rgba(126,152,202,0.38);}
  #idx-search-inp:focus{border-color:rgba(136,164,255,0.38);}
  #member-tooltip{position:fixed;pointer-events:none;z-index:99;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;font-size:13px;font-weight:600;color:rgba(245,248,255,0.95);text-shadow:0 0 11px rgba(225,235,255,0.55),0 0 4px rgba(225,235,255,0.45),0 1px 4px rgba(0,0,0,0.85);white-space:nowrap;opacity:0;transition:opacity 0.15s;transform:translate(-50%,-130%);letter-spacing:.04em;}
  /* 모바일 줌인 시 멤버 이름 레이블 (CSS2DObject) */
  /* .group-label(줄 303 부근)과 거의 동일한 스타일 — currentColor 이중 글로우, 불투명도 높임(2026-08-14). */
  .member-name-label{font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;font-size:9px;font-weight:400;color:rgba(200,215,240,0.52);white-space:nowrap;pointer-events:none;user-select:none;letter-spacing:.08em;text-shadow:0 1px 3px rgba(0,0,0,0.65);transform:translate(-50%,-100%);}
  /* 멤버 카드가 열린 사람의 별 이름(2026-10-01) — 우주에 따로 뜬 솔로 별은 주변에 행성 라벨이 많아 기본 9px로는 묻힌다 */
  .member-name-label.is-focus{font-size:12px;font-weight:500;color:rgba(215,228,248,0.88);text-shadow:0 1px 2px rgba(0,0,0,0.8);}
  ::-webkit-scrollbar{-webkit-appearance:none;width:2px;height:2px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{-webkit-appearance:none;background:rgba(180,200,240,0.07);border-radius:2px;}
  ::-webkit-scrollbar-thumb:hover{background:rgba(180,200,240,0.14);}
  /* ── Favorites ───────────────────────────────────── */
  .fav-btn{position:relative;background:none;border:none;outline:none;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:2px 3px;border-radius:6px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:rgba(255,110,140,0.48);transition:color .15s,transform .12s;}
  .fav-btn svg{width:13px;height:13px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;transition:fill .15s;}
  .fav-btn:hover{color:rgba(255,95,128,0.92);transform:scale(1.18);}
  .fav-btn.fav-on{color:rgba(255,95,128,0.92);}
  .fav-btn.fav-on svg{fill:currentColor;}
  /* 즐겨찾기 추가 순간: 하트가 탱글하게 바운스 + 작은 하트 조각이 톡톡 터지며 퍼짐 */
  @keyframes fav-heart-bounce{0%{transform:scale(1);}30%{transform:scale(1.4);}55%{transform:scale(0.9);}75%{transform:scale(1.15);}100%{transform:scale(1);}}
  .fav-btn.fav-burst svg{animation:fav-heart-bounce .45s ease-out;}
  @keyframes fav-particle{
    0%{transform:translate(-50%,-50%) scale(0.7);opacity:1;}
    100%{transform:translate(calc(-50% + var(--px)),calc(-50% + var(--py))) scale(0.15);opacity:0;}
  }
  .fav-particle{position:absolute;left:50%;top:50%;pointer-events:none;line-height:1;color:rgba(255,110,140,0.95);animation:fav-particle .6s cubic-bezier(0.2,0.7,0.4,1) forwards;will-change:transform,opacity;}
  .fav-star-particle{color:rgba(255,238,160,0.95);animation-duration:.75s;}
  /* 하트→피드탭 비언어 루프 힌트(2026-09-02) — ♥가 곡선으로 피드 탭에 날아가 흡수되고 탭이 글로우 펄스 */
  .fav-fly{position:fixed;z-index:9999;font-size:19px;line-height:1;color:#ff5c8a;pointer-events:none;text-shadow:0 0 12px rgba(255,92,138,0.6);will-change:transform,opacity;}
  @keyframes fav-tab-glow{0%{filter:drop-shadow(0 0 0 rgba(126,156,255,0));}30%{filter:drop-shadow(0 0 8px rgba(126,156,255,0.95));}100%{filter:drop-shadow(0 0 0 rgba(126,156,255,0));}}
  .tab-btn.fav-tab-pulse{animation:fav-tab-glow .6s ease;}
  /* 첫 즐겨찾기를 유도하는 은은한 펄스 — favGroups/favMembers가 둘 다 비어있는 동안만(_syncFavBtn) */
  @keyframes fav-hint-pulse{
    0%,100%{filter:drop-shadow(0 0 0px rgba(255,95,128,0));transform:scale(1);}
    50%{filter:drop-shadow(0 0 5px rgba(255,95,128,0.72));transform:scale(1.12);}
  }
  .fav-btn.fav-hint{color:rgba(255,120,150,0.68);animation:fav-hint-pulse 2.2s ease-in-out infinite;}
  .fav-btn+.trophy-btn{margin-left:-6px;position:relative;top:-0.25px;}
  @media(max-width:768px){.fav-btn+.trophy-btn{top:0.5px;}}
  .trophy-btn+.trophy-btn{margin-left:-6px;position:relative;top:-0.25px;}
  @media(max-width:768px){.trophy-btn+.trophy-btn{top:0.5px;}}
  .fav-btn+.share-btn{margin-left:-6px;position:relative;top:-0.25px;}
  @media(max-width:768px){.fav-btn+.share-btn{top:0.5px;}}
  .share-btn{background:none;border:none;outline:none;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:2px 3px;border-radius:6px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:rgba(190,205,240,0.54);transition:color .15s,transform .12s;}
  .share-btn svg{width:13px;height:13px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
  .share-btn:hover{color:rgba(210,222,255,0.95);transform:scale(1.18);}
  .share-btn:active{transform:scale(0.9);}
  .trophy-btn+.share-btn{margin-left:-6px;position:relative;top:-0.25px;}
  /* 카드 단위 ⋮ 메뉴 버튼(2026-08-30) — 공유 아이콘 옆. 텍스트 글리프라 크기/정렬만 별도로. */
  .card-menu-btn{font-size:17px;line-height:1;letter-spacing:0;color:rgba(190,205,240,0.5);}
  .share-btn+.card-menu-btn{margin-left:-3px;position:relative;top:-1px;}
  @media(max-width:768px){.trophy-btn+.share-btn{top:0.5px;}}
  /* UX감사 #2(2026-09-05): 카드 상단 버튼(하트·트로피·공유·⋮)이 ~17px에 -6px로 겹쳐 폰에서 오터치 잦음.
     폰에서만 패딩으로 히트영역을 키우고 음수 마진(겹침)을 완화한다(시각 배치는 크게 안 흔들리게). */
  @media(max-width:768px){
    #tt-name-row .fav-btn,#tt-name-row .trophy-btn,#tt-name-row .share-btn,
    #gc-name-row .fav-btn,#gc-name-row .trophy-btn,#gc-name-row .share-btn{padding:7px 6px;}
    #tt-name-row .card-menu-btn,#gc-name-row .card-menu-btn{padding:6px 6px;}
    .fav-btn+.trophy-btn,.trophy-btn+.trophy-btn,.fav-btn+.share-btn,.trophy-btn+.share-btn{margin-left:-2px;}
    .share-btn+.card-menu-btn{margin-left:0;}
    /* 멤버 카드(tt-name-row) 버튼 수직 보정값 리셋 — 모바일에선 패딩이 커서 -1.5px 보정이 오히려 엇나감 */
    #tt-name-row .fav-btn,#tt-name-row .share-btn{top:0;}
  }
  /* 계정 연결 안내(2026-09-29) — 즐겨찾기 3개째·10개째 한 번씩. 불투명 배경(blur 없음 — 발열 기준) */
  #link-nudge{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:190;
    width:min(380px,calc(100vw - 24px));box-sizing:border-box;background:#171b36;border:0.5px solid rgba(255,255,255,0.12);border-radius:18px;
    padding:16px 16px 12px;box-shadow:0 14px 40px rgba(0,0,0,0.5);font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  #link-nudge .ln-t{font-size:15px;font-weight:700;color:#eef4ff;letter-spacing:-.01em;}
  #link-nudge .ln-d{margin-top:6px;font-size:12.5px;line-height:1.5;color:rgba(195,210,240,0.75);word-break:keep-all;}
  #link-nudge .ln-btns{display:flex;gap:8px;margin-top:12px;align-items:center;}
  #link-nudge .ln-go{flex:1;background:rgba(130,155,255,0.9);color:#0b0d20;border:none;border-radius:11px;padding:9px 0;font-size:13px;font-weight:600;font-family:inherit;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  #link-nudge .ln-later{background:none;border:none;color:rgba(170,190,255,0.85);font-size:13px;font-family:inherit;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:9px 6px;}
  @media(max-width:768px){#link-nudge{bottom:calc(84px + env(safe-area-inset-bottom,0px));}}
  #share-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(12px);background:rgba(20,24,40,0.94);color:rgba(230,238,255,0.95);font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;font-size:13px;font-weight:600;padding:9px 16px;border-radius:20px;box-shadow:0 6px 24px rgba(0,0,0,0.35);z-index:200;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;white-space:nowrap;}
  #share-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  #discover-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(12px);display:flex;align-items:center;gap:9px;background:rgba(20,24,40,0.94);color:rgba(230,238,255,0.95);font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;font-size:12px;font-weight:600;padding:6px 16px 6px 6px;border-radius:24px;box-shadow:0 6px 24px rgba(0,0,0,0.35);z-index:200;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;white-space:nowrap;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  #discover-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
  #discover-toast-thumb{width:44px;height:28px;border-radius:6px;object-fit:cover;flex-shrink:0;display:none;background:rgba(255,255,255,0.08);}
  #discover-toast-thumb.has-img{display:block;}
  #discover-toast-text b{color:#fff;}
  /* align-items:center로 바꿔서 이름줄+그룹줄 텍스트 블록 전체가 원(사진) 세로 중앙에 자동으로 맞춰지게
     함 — 예전엔 flex-start(원 상단에 맞춤)라 이름줄/그룹줄 사이 여백이 원 중간선과 안 맞았음(2026-08-11,
     사용자 요청). 텍스트 두 줄 높이가 정확히 같지 않아도 이 방식이 폰트/언어(한국어·영어) 변화에도 항상
     자연스럽게 맞는다. */
  #tt-pic-info-row{display:flex!important;flex-direction:row!important;align-items:center;gap:8px;margin-bottom:2px;position:relative;padding-left:0;}
  #tt-info-side{flex:1;min-width:0;overflow:hidden;}
  /* 어드민 프로필 사진 업로드 버튼 — 크기는 #tt-insta-pic-wrap과 항상 동일해야 함(사진 있고 없고에 따라
     이 자리를 서로 대신 차지하므로) */
  .tt-insta-cam-btn{flex-shrink:0;order:-1;width:78px;height:78px;border-radius:50%;border:1.5px dashed rgba(130,155,200,0.35);background:rgba(10,14,32,0.55);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;display:flex;align-items:center;justify-content:center;color:rgba(140,165,220,0.56);transition:border-color .15s,color .15s;z-index:5;padding:0;}
  .tt-insta-cam-btn:hover{border-color:rgba(140,165,220,0.65);color:rgba(180,205,255,0.85);}
  .tt-insta-cam-btn svg{width:20px;height:20px;pointer-events:none;}
  .tt-insta-cam-btn.cam-overlay{position:absolute;width:20px;height:20px;left:calc(4px + 54px);top:54px;border:none;background:rgba(10,14,32,0.68);backdrop-filter:blur(3px);}
  .tt-insta-cam-btn.cam-overlay svg{width:11px;height:11px;}
  .tt-insta-cam-btn.cam-uploading{opacity:.5;pointer-events:none;}
  #tt-insta-pic-wrap{display:block;position:relative;flex-shrink:0;width:78px;height:78px;border-radius:50%;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;text-decoration:none;}
  /* 모바일에서만 아주 살짝 키움(2026-08-12, 사용자 요청 — 웹은 그대로 두고 모바일만) */
  @media(max-width:768px){#tt-insta-pic-wrap,.tt-insta-cam-btn{width:82px;height:82px;}}
  /* 모바일에서 위치도 오른쪽으로 아주 살짝(2026-08-12, 사용자 요청) — transform이라 옆 텍스트 블록의
     레이아웃(간격)엔 영향 없이 원만 시각적으로 이동함. hover의 scale(1.07)은 transform을 통째로
     덮어써서 그대로 두면 이동분이 사라지므로, 모바일 hover에도 같이 옮긴 채로 커지게 맞춰줌. */
  @media(max-width:768px){
    #tt-insta-pic-wrap{transform:translateX(4px);}
    #tt-insta-pic-wrap:hover{transform:translateX(4px) scale(1.07);}
  }
  /* 사진 URL은 캐시로 즉시 알아도 실제 이미지 바이트 다운로드엔 시간이 걸려서, 다 된 채로 "툭" 튀어
     나오면 어색하다는 제보(2026-08-11) — URL이 확정된 순간 자리부터 차지하고 은은한 로딩 셰머를
     보여주다가, 이미지가 실제로 로드되면 사진으로 크로스페이드한다. */
  #tt-insta-pic-wrap::after,#gc-pic-wrap::after{content:'';position:absolute;inset:0;border-radius:50%;
    background:linear-gradient(90deg, rgba(160,180,220,0.10) 25%, rgba(220,230,250,0.26) 50%, rgba(160,180,220,0.10) 75%);
    background-size:200% 100%;opacity:0;pointer-events:none;transition:opacity .25s ease;}
  #tt-insta-pic-wrap.tt-pic-loading::after,#gc-pic-wrap.tt-pic-loading::after{opacity:1;animation:tt-pic-shimmer 1.3s ease-in-out infinite;}
  @keyframes tt-pic-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
  /* 인스타 브랜드 그라데이션(주황~빨강) → 인디고~마젠타 성운 톤(2026-08-11 1차) → 그마저도 컬러감이
     남아있어서 블랙앤화이트에 가까운 톤으로 재조정(2026-08-11 2차, 사용자 제보) — 검정~은색~흰색을
     도는 메탈릭한 느낌만 남김. 가장 어두운 지점이 배경(#060612 계열)이랑 거의 같은 밝기라 링과
     배경 경계가 안 보인다는 재제보(2026-08-11 3차) — 최저 밝기만 살짝 올림. */
  .tt-insta-ring{display:block;width:100%;height:100%;border-radius:50%;padding:1.5px;background:conic-gradient(from 0deg,#1e1e26,#50505c,#eceef2,#50505c,#1e1e26);}
  #tt-insta-pic,#gc-pic{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid rgba(14,18,38,0.98);opacity:0;transition:opacity .3s ease;}
  #tt-insta-pic-wrap.tt-pic-ready #tt-insta-pic,#gc-pic-wrap.tt-pic-ready #gc-pic{opacity:1;}
  #tt-insta-pic-wrap:hover,#gc-pic-wrap:hover{transform:scale(1.07);transition:transform .15s;}
  #tt.has-insta-pic{max-width:288px!important;}
  /* ── 그룹 프로필 사진(2026-08-28) ─────────────────────────────────────────
     멤버 카드(#tt-insta-pic-wrap)와 링·셰머·크로스페이드를 공유하고 크기만 다르다.
     그룹 카드는 기본 234px로 멤버 카드보다 좁아서 78px 원을 넣으면 이름/영문명/링크가
     밀린다 — 원은 62px로 줄이고, 사진이 있을 때만 카드를 288px로 넓힌다(멤버와 같은 방식). */
  #gc-pic-wrap{display:block;position:relative;flex-shrink:0;width:62px;height:62px;border-radius:50%;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;text-decoration:none;}
  /* 사진이 있으면 SNS 아이콘 줄을 영문명 아래로 내린다. 헤더 글자 영역이 185px인데 아이콘 6개가
     139px를 먹어서, 사진(62px)까지 들어가면 영문명에 38px밖에 안 남는다 — 실측상 268개 그룹 중
     90개(34%)의 영문명이 잘렸다("TOMORROW X TOGETHER"→"TO..."). 사진을 줄여도 아이콘이 공간의
     대부분을 쓰므로 해결이 안 돼서, 아이콘을 한 줄 내려 영문명에 전체 폭을 준다(2026-08-28).
     ⚠️ 카드 폭은 늘릴 수 없다 — 데스크톱은 #side-panel, 모바일은 시트가 폭을 정한다. */
  #gc.has-gc-pic #gc-en-row{align-items:center;gap:14px;}
  #gc.has-gc-pic #gc-en{max-width:100%;}
  /* 지정 그룹(영문명 김)은 강제로 영문/SNS를 세로 분리 = 4줄 허용(index.html gc-en-stack 토글). */
  #gc-en-row.gc-en-stack{flex-direction:column;align-items:flex-start;}
  /* 강제 4줄일 땐 영문이 flex:1로 세로 늘지 않게, 전체 표시되게 */
  #gc-en-row.gc-en-stack #gc-en{flex:none;max-width:100%;}
  /* 사진이 없을 때 뜨는 관리자 업로드 버튼(점선 원)도 같은 크기여야 자리 교대가 자연스럽다.
     #gc-header는 position:static이라 cam-overlay(absolute)의 기준이 되게 relative를 준다. */
  #gc-header{position:relative;}
  #gc-pic-cam-admin{width:62px;height:62px;}
  #gc-pic-cam-admin.cam-overlay{width:18px;height:18px;left:44px;top:44px;}
  #gc-pic-cam-admin.cam-overlay svg{width:10px;height:10px;}
  @media(max-width:768px){#gc-pic-wrap,#gc-pic-cam-admin{width:66px;height:66px;}
    #gc-pic-cam-admin.cam-overlay{width:18px;height:18px;left:48px;top:48px;}}
  #tt-name-row{display:inline-flex;align-items:center;gap:8px;margin-bottom:3px;padding-left:0;max-width:100%;}
  #tt-name-row .tn{margin-bottom:0;padding-left:4px;padding-right:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* 하트/공유 버튼이 align-items:center로도 이름 텍스트보다 살짝 아래로 처져 보인다는 제보(2026-08-11)
     — 아이콘 내부 여백 때문에 생기는 광학 보정용 미세 조정. */
  #tt-name-row .fav-btn,#tt-name-row .share-btn{position:relative;top:-1.5px;}
  #gc-name-row{display:inline-flex;align-items:center;gap:8px;margin-bottom:6px;max-width:100%;}
  #gc-name-row #gc-name{margin-bottom:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* 하트·트로피·공유를 SNS 아이콘과 같은 16px로 통일(원래 svg 13px에 아이콘별 top 미세보정이 얹혀 있어
     모바일에서 크기·정렬이 들쭉날쭉했음, 2026-08-28 사용자 요청). 보정 top을 0으로 리셋하고 gc-name-row의
     align-items:center에만 맡겨 서로 + 그룹명과 세로 중앙. (그룹 카드 전용 — 멤버 카드는 안 건드림) */
  #gc-name-row .fav-btn svg,#gc-name-row .trophy-btn svg,#gc-name-row .share-btn svg{width:16px;height:16px;}
  #gc-name-row .fav-btn,#gc-name-row .trophy-btn,#gc-name-row .share-btn{top:0;}
  #fav-section{padding-top:12px;padding-bottom:12px;border-top:0.5px solid rgba(255,255,255,0.07);}
  .fav-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
  .fav-hd-lbl{font-size:10px;font-weight:700;letter-spacing:.2em;color:rgba(130,150,205,0.56);text-transform:uppercase;}
  /* 섹션 헤더 오른쪽 묶음(공유 아이콘 + Highlight 토글). 아이콘은 카드/라이트박스와 같은 .share-btn을
     그대로 재사용 — 새 컴포넌트를 만들지 않는다. 모바일은 무형 확장으로 탭 타겟만 27px 확보. */
  .fav-hd-right{display:flex;align-items:center;gap:6px;}
  @media(max-width:768px){.fav-hd-right .share-btn{padding:7px 6px;margin:-7px -3px;}}
  /* 2026-08-18 — ANNIVERSARIES 섹션을 여기로 통합하면서 아바타(사진/색상원)+기념일 배지가 들어간
     카드형으로 재설계. 멤버=인스타/위버스 사진, 그룹=groups.json img 필드(없으면 그룹 색상 원형). */
  .fav-item{display:flex;align-items:center;gap:9px;padding:6px 4px;border-radius:10px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .13s;}
  .fav-item:hover{background:rgba(255,255,255,0.06);}
  .fav-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;overflow:hidden;}
  .fav-avatar-photo{box-shadow:0 0 0 1px rgba(255,255,255,0.12);}
  .fav-avatar-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .fav-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
  .fav-name-row{display:flex;align-items:center;gap:6px;min-width:0;}
  .fav-date-row{display:flex;align-items:center;gap:5px;}
  .fav-iname{font-size:var(--fz-body);color:#b8d0ee;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .fav-isub{font-size:10px;color:rgba(125,150,198,0.56);flex-shrink:0;letter-spacing:.02em;}
  .fav-itag{font-size:9px;font-weight:700;letter-spacing:.05em;padding:1px 5px;border-radius:7px;flex-shrink:0;background:rgba(145,175,255,0.10);color:rgba(150,175,228,0.61);}
  .fav-badge{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.03em;padding:1px 5px;border-radius:6px;flex-shrink:0;}
  .fav-badge.today{background:rgba(255,205,70,0.16);color:rgba(255,215,100,0.92);}
  .fav-badge.soon{background:rgba(255,110,140,0.13);color:rgba(255,130,155,0.85);}
  .fav-badge.normal,.fav-badge.anniv{background:rgba(145,175,255,0.08);color:rgba(148,170,225,0.54);}
  .fav-edit{background:none;border:none;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-size:14px;color:rgba(120,145,195,0.44);padding:2px 4px;flex-shrink:0;transition:color .13s;line-height:1;}
  .fav-edit:hover{color:rgba(200,220,255,0.85);}
  .fav-empty{font-size:11px;color:rgba(92,112,158,0.48);padding:4px 4px;}
  /* 프로필 통합 빈 화면(디자인리뷰 Q4) — 4개 "없어요" 대신 하나. 일러스트 없이(§5) ✦+문구+행동 1개. */
  #profile-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 20px 40px;}
  #profile-empty-star{font-size:26px;color:rgba(140,175,255,0.55);margin-bottom:14px;text-shadow:0 0 18px rgba(130,170,255,0.4);}
  #profile-empty-title{font-size:15px;font-weight:600;color:rgba(215,228,255,0.9);margin-bottom:6px;}
  #profile-empty-sub{font-size:12px;color:rgba(150,172,220,0.6);line-height:1.5;margin-bottom:18px;max-width:220px;}
  #profile-empty-cta{background:rgba(130,170,255,0.14);border:0.5px solid rgba(140,175,255,0.32);border-radius:999px;color:rgba(205,222,255,0.92);font-size:12.5px;font-weight:600;padding:9px 18px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;transition:background .13s,border-color .13s;}
  #profile-empty-cta:hover{background:rgba(130,170,255,0.24);border-color:rgba(160,190,255,0.5);}
  #mob-fav-btn.fav-mode-on,#dh-fav-btn.fav-mode-on{color:rgba(255,105,135,0.95)!important;text-shadow:0 0 10px rgba(255,100,130,0.45);}
  /* ── Profile panel ───────────────────────────────── */
  #profile-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:69;display:none;align-items:center;justify-content:center;}
  #profile-overlay.open{display:flex;}
  #profile-panel{width:min(320px,calc(100vw - 32px));background:rgba(13,17,34,0.97);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border-radius:20px;box-shadow:0 16px 56px rgba(0,0,0,0.72);border:0.5px solid rgba(255,255,255,0.10);padding:22px 22px 24px;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  .pp-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
  .pp-title{font-size:14px;font-weight:700;color:rgba(210,225,255,0.88);letter-spacing:.04em;}
  /* 선택 입력 안내 — 제목보다 한 톤 낮춰야 "필수"로 안 읽힌다. \n을 줄바꿈으로 살리려고 pre-line. */
  .pp-hint{margin-top:7px;font-size:var(--fz-body);line-height:1.5;font-weight:400;color:rgba(180,200,230,0.62);white-space:pre-line;letter-spacing:.01em;}
  #pp-close{background:none;border:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-size:16px;color:rgba(148,168,218,0.61);line-height:1;padding:0;position:relative;overflow:hidden;flex-shrink:0;transition:color .13s,transform .2s ease-out;}
  #pp-close:hover{color:rgba(200,218,255,0.85);}  #pp-close:active{transform:scale(0.86);transition:transform .07s;}
  .pp-section{margin-bottom:18px;}
  .pp-label{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(126,150,204,0.58);display:block;margin-bottom:8px;}
  .pp-required{color:rgba(255,108,135,0.82);}
  .pp-input{width:100%;background:rgba(255,255,255,0.055);border:0.5px solid rgba(255,255,255,0.09);border-radius:10px;color:#c8d8f0;font-family:inherit;font-size:13px;padding:9px 12px;outline:none;letter-spacing:.02em;transition:border-color .15s,background .15s;box-sizing:border-box;}
  .pp-input:focus{background:rgba(255,255,255,0.085);border-color:rgba(100,150,255,0.55);box-shadow:0 0 0 3px rgba(100,150,255,0.09);}
  .pp-input::placeholder{color:rgba(126,152,202,0.34);}
  .pp-nick-row{display:flex;gap:6px;align-items:flex-start;}
  .pp-nick-row .pp-input{flex:1;}
  /* _promptDialog 인라인 종류 토글(새 컬렉션 영상/사진) — 세그먼트 버튼 2개 */
  .pp-toggle{display:flex;gap:6px;margin-top:12px;}
  .pp-toggle-opt{flex:1;padding:9px;border-radius:10px;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.03em;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.09);color:rgba(180,200,238,0.72);transition:background .15s,border-color .15s,color .15s;}
  .pp-toggle-opt:hover{background:rgba(255,255,255,0.09);color:#fff;}
  .pp-toggle-opt.active{background:rgba(100,150,255,0.18);border-color:rgba(100,150,255,0.55);color:#fff;}
  /* 즐겨찾기 행 케밥(⋮) 팝업 — 기념일 수정 + 순서 이동. body에 붙여 패널 overflow 클리핑을 피함 */
  .fav-kebab-menu{position:fixed;z-index:100000;background:rgba(18,22,38,0.98);border:0.5px solid rgba(140,165,220,0.22);border-radius:11px;padding:5px;box-shadow:0 10px 30px rgba(0,0,0,0.55);min-width:132px;backdrop-filter:blur(8px);}
  .fav-kebab-item{display:block;width:100%;text-align:left;background:none;border:0;color:rgba(200,216,240,0.9);font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.02em;padding:10px 12px;border-radius:7px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;white-space:nowrap;transition:background .12s,color .12s;}
  .fav-kebab-item:hover{background:rgba(100,150,255,0.16);color:#fff;}
  #pp-nick-random{flex-shrink:0;background:rgba(255,255,255,0.055);border:0.5px solid rgba(255,255,255,0.09);border-radius:10px;color:rgba(170,195,240,0.71);font-size:15px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .13s,transform .15s;padding:0;}
  #pp-nick-random:hover{background:rgba(255,255,255,0.10);color:rgba(210,225,255,0.9);}
  #pp-nick-random:active{transform:rotate(180deg) scale(0.88);transition:transform .18s;}
  .pp-err{font-size:11px;color:rgba(255,108,132,0.82);margin-top:5px;letter-spacing:.02em;}
  #pp-colors{display:flex;gap:9px;flex-wrap:wrap;margin-top:2px;}
  .pp-color-swatch{width:22px;height:22px;border-radius:50%;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;border:2.5px solid transparent;transition:transform .13s,border-color .13s;flex-shrink:0;padding:0;outline:none;}
  .pp-color-swatch:hover{transform:scale(1.18);}  .pp-color-swatch:active{transform:scale(0.88);transition:transform .07s;}
  .pp-color-swatch.sel{border-color:rgba(255,255,255,0.82);transform:scale(1.14);}
  .pp-fav-row{display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .pp-fav-info{flex:1;}
  .pp-fav-label{font-size:12px;color:rgba(178,200,238,0.82);font-weight:500;}
  .pp-fav-sub{font-size:10px;color:rgba(110,135,182,0.54);margin-top:3px;letter-spacing:.02em;}
  .pp-save-btn{width:100%;margin-top:4px;padding:9px;border:none;border-radius:12px;background:rgba(115,145,255,0.10);border:0.5px solid rgba(120,150,255,0.20);color:rgba(180,195,230,0.75);font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.04em;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;position:relative;overflow:hidden;transition:background .15s,color .15s,transform .22s ease-out;}
  .pp-save-btn:hover{background:rgba(115,145,255,0.18);border-color:rgba(120,150,255,0.32);color:rgba(220,230,255,0.92);}  .pp-save-btn:active{background:rgba(115,145,255,0.22);transform:scale(0.97);transition:transform .07s;}
  #tab-profile.pp-set,#dh-profile-btn.pp-set{font-size:11px;font-weight:700;letter-spacing:.01em;}
  /* ── 즐겨찾기 해제 확인 / 기념일 날짜 수정 / 계정 연결 확인 팝업 ────── */
  #unfav-confirm-overlay,#date-edit-overlay,#link-confirm-overlay,#logout-confirm-overlay,#generic-confirm-overlay,#generic-prompt-overlay,#welcome-choice-overlay,#welcome-login-overlay,#uc-card-overlay,#debut-card-overlay,#col-card-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:70;display:none;align-items:center;justify-content:center;}
  #unfav-confirm-overlay.open,#date-edit-overlay.open,#link-confirm-overlay.open,#logout-confirm-overlay.open,#generic-confirm-overlay.open,#generic-prompt-overlay.open,#welcome-choice-overlay.open,#welcome-login-overlay.open,#uc-card-overlay.open,#debut-card-overlay.open,#col-card-overlay.open{display:flex;}
  #unfav-confirm-panel,#date-edit-panel,#link-confirm-panel,#logout-confirm-panel,#generic-confirm-panel,#generic-prompt-panel,#welcome-choice-panel,#welcome-login-panel{width:min(280px,calc(100vw - 40px));background:rgba(13,17,34,0.97);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border-radius:18px;box-shadow:0 16px 56px rgba(0,0,0,0.72);border:0.5px solid rgba(255,255,255,0.10);padding:20px;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  #unfav-confirm-msg,#link-confirm-msg,#logout-confirm-msg,#generic-confirm-msg,#welcome-choice-msg,#welcome-login-msg{font-size:var(--fz-body);color:rgba(160,182,222,0.72);line-height:1.5;margin-top:8px;}
  /* 줄바꿈 보존 — 어드민 스윕 확인창처럼 여러 줄 요약을 넘기는 호출이 생겼다(2026-08-31). 한 줄짜리
     기존 호출부엔 영향 없음. .wide는 그런 긴 요약일 때만 켜지는 옵트인 모드(_confirmDialog{wide:true}). */
  #generic-confirm-msg{white-space:pre-wrap;}
  #generic-confirm-panel.wide{width:min(460px,calc(100vw - 40px));}
  #generic-confirm-panel.wide #generic-confirm-msg{max-height:52vh;overflow-y:auto;}
  #unfav-confirm-btns,#link-confirm-btns,#logout-confirm-btns,#generic-confirm-btns,#welcome-login-btns{display:flex;gap:8px;margin-top:18px;}
  /* 선택/로그인 패널은 -btns 없이 pp-save-btn을 바로 쌓아서 쓰므로, 메시지 아래 여백만 별도로 확보 */
  #welcome-choice-msg,#welcome-login-msg{margin-bottom:14px;}
  #pp-x-link{margin-top:18px;}
  #pp-linked-state{font-size:11px;color:rgba(130,200,160,0.85);margin-top:10px;letter-spacing:.02em;}
  #pp-linked-state .pp-linked-provider{font-weight:700;margin-right:4px;}
  #pp-linked-state .pp-linked-id{color:rgba(180,210,255,0.75);word-break:break-all;}
  /* ── 피드백 보내기 ─────────────────────────────────── */
  #feedback-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:70;display:none;align-items:center;justify-content:center;}
  #feedback-overlay.open{display:flex;}
  #feedback-panel{width:min(340px,calc(100vw - 40px));background:rgba(13,17,34,0.97);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border-radius:18px;box-shadow:0 16px 56px rgba(0,0,0,0.72);border:0.5px solid rgba(255,255,255,0.10);padding:20px;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  .fb-cat-row{display:flex;gap:6px;margin-top:14px;margin-bottom:12px;}
  .fb-cat-btn{flex:1;padding:8px 4px;border-radius:9px;font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.01em;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;background:rgba(255,255,255,0.045);border:0.5px solid rgba(255,255,255,0.09);color:rgba(160,182,222,0.62);transition:background .15s,border-color .15s,color .15s;}
  .fb-cat-btn:hover{color:rgba(200,215,245,0.85);}
  .fb-cat-btn.active{background:rgba(126,156,255,0.16);border-color:rgba(126,156,255,0.4);color:#fff;}
  #feedback-text{resize:vertical;font-family:inherit;min-height:88px;}
  .uc-btn{flex:1;padding:10px;border-radius:10px;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.03em;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;position:relative;overflow:hidden;transition:background .15s,border-color .15s,color .15s,transform .2s ease-out;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.09);color:rgba(180,200,238,0.72);display:flex;align-items:center;justify-content:center;}
  /* 텍스트는 언제나 보조일 뿐 — 카드 미리보기 닫기/저장/공유 버튼은 아이콘으로만(2026-08-21, 사용자 요청) */
  .uc-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;}
  .uc-btn:hover{background:rgba(255,255,255,0.09);color:#fff;}
  .uc-btn-danger{background:rgba(255,95,110,0.14);border-color:rgba(255,95,110,0.30);color:rgba(255,160,170,0.92);}
  .uc-btn-danger:hover{background:rgba(255,95,110,0.24);border-color:rgba(255,95,110,0.50);color:#fff;}
  .uc-btn-primary{background:rgba(126,156,255,0.15);border-color:rgba(126,156,255,0.26);color:rgba(195,215,255,0.90);}
  .uc-btn-primary:hover{background:rgba(126,156,255,0.26);border-color:rgba(126,156,255,0.48);color:#fff;}  .uc-btn:active{transform:scale(0.96);transition:transform .07s;}
  .uc-btn:disabled{opacity:.4;cursor:default;pointer-events:none;}
  /* ── My Page (sidebar) ───────────────────────────── */
  /* 첫 줄(별·닉네임·편집)과 최애 표기 줄 사이가 padding-bottom 14 + margin-bottom 14 + 최애줄
     margin-top 2 = 30px로 과했음(2026-08-27 사용자 요청). 17px로 줄인다 — 최애 줄이 비어 있을 땐
     #my-page-bias가 display:none이라 그 아래 FAVORITES 섹션과의 간격도 같이 줄어든다. */
  #my-page-header{display:flex;align-items:center;gap:10px;padding:4px 0 10px;margin-bottom:5px;}
  #my-page-star-dot{width:26px;height:26px;border-radius:50%;flex-shrink:0;background:rgba(140,160,210,0.20);transition:background .3s,box-shadow .3s;}
  #my-page-info{flex:1;min-width:0;}
  #my-page-nick{font-size:13px;font-weight:700;color:rgba(210,228,255,0.88);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:color .15s,text-shadow .15s;border-radius:4px;}
  #my-page-nick:hover{color:rgba(240,248,255,1);}
  #my-page-nick.my-star-sel{text-shadow:0 0 10px currentColor;}
  #my-page-bio{font-size:10px;color:rgba(118,142,192,0.58);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  #my-page-edit{background:none;border:0.5px solid rgba(140,165,220,0.20);border-radius:7px;color:rgba(138,162,218,0.58);font-size:9px;font-weight:700;letter-spacing:.10em;padding:3px 8px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;transition:background .13s,color .13s,border-color .13s;flex-shrink:0;text-transform:uppercase;}
  #my-page-edit:hover{background:rgba(140,165,220,0.09);color:rgba(188,210,255,0.88);border-color:rgba(140,165,220,0.38);}
  /* ── 저널 섹션 리스트 공용 캡드-스크롤 ─────────────────
     길어지는 목록(FAVORITES/COLLECTIONS/CONCERTS)이 저널 사이드바 전체를 끝없이 늘리지 않도록
     섹션마다 자체 최대높이+내부 스크롤을 준다(2026-08-13, 사용자 요청). ANNIVERSARIES는 2026-08-18에
     별도 섹션에서 FAVORITES 카드 안으로 통합됨(anniv-list 제거).
     LIKES는 무제한으로 쌓일 수 있어 이 패턴 대신 미리보기+전체보기 오버레이를 쓴다(아래 별도 규칙). */
  #fav-list,#collection-list,#concert-log-list{max-height:220px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(140,165,220,0.18) transparent;}
  #fav-list::-webkit-scrollbar,#collection-list::-webkit-scrollbar,#concert-log-list::-webkit-scrollbar{width:3px;}
  #fav-list::-webkit-scrollbar-thumb,#collection-list::-webkit-scrollbar-thumb,#concert-log-list::-webkit-scrollbar-thumb{background:rgba(140,165,220,0.22);border-radius:2px;}
  /* ── Scrap (likes) ───────────────────────────────── */
  #scrap-section{margin-top:14px;padding-top:12px;border-top:0.5px solid rgba(255,255,255,0.07);}
  #scrap-list{max-height:220px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(140,165,220,0.18) transparent;}
  #scrap-list::-webkit-scrollbar{width:3px;}
  #scrap-list::-webkit-scrollbar-thumb{background:rgba(140,165,220,0.22);border-radius:2px;}
  #scrap-viewall-btn{margin-top:6px;background:none;border:0.5px dashed rgba(140,165,220,0.18);border-radius:8px;color:rgba(140,165,220,0.48);font-size:12px;font-weight:600;padding:7px 10px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;width:100%;text-align:left;transition:border-color .13s,color .13s;letter-spacing:.02em;}
  #scrap-viewall-btn:hover{border-color:rgba(140,165,220,0.38);color:rgba(180,200,240,0.78);}
  /* ── Collections ──────────────────────────────────── */
  #collection-section{margin-top:14px;padding-top:12px;border-top:0.5px solid rgba(255,255,255,0.07);}
  .col-row{display:flex;align-items:center;gap:10px;padding:6px 4px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;border-radius:8px;transition:background .12s;}
  .col-row:hover{background:rgba(255,255,255,0.04);}
  .col-row-thumb{width:28px;height:28px;border-radius:4px;object-fit:cover;background:rgba(255,255,255,0.06);flex-shrink:0;}
  .col-row-info{flex:1;min-width:0;}
  .col-row-name{font-size:13px;color:rgba(200,220,255,0.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .col-row-cnt{font-size:11px;color:rgba(120,145,190,0.54);margin-top:1px;}
  .col-row-del{background:none;border:none;color:rgba(140,165,220,0.34);font-size:14px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:2px 6px;flex-shrink:0;}
  /* UX감사 #6(2026-09-05): 컬렉션 피커 행 끝 아이콘 3개(삭제·공개·커버)가 ~18px로 다닥다닥 → 폰서 오터치.
     폰에서만 패딩으로 히트영역을 키운다(데스크톱은 마우스라 그대로). */
  @media(max-width:768px){ .col-row-del,.col-row-cam,.col-row-pub{padding:8px 9px;} }
  .col-row-del:hover{color:rgba(255,100,120,0.7);}
  .col-row-cam{background:none;border:none;color:rgba(140,165,220,0.34);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:2px 5px;flex-shrink:0;display:flex;align-items:center;}
  .col-row-cam svg{width:14px;height:14px;stroke:currentColor;}
  .col-row-cam:hover{color:rgba(180,200,240,0.76);}
  .col-row-cam.cam-uploading{opacity:0.4;pointer-events:none;}
  .col-row-rename{background:none;border:none;color:rgba(140,165,220,0.34);font-size:12px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:2px 5px;flex-shrink:0;}
  .col-row-rename:hover{color:rgba(180,200,240,0.66);}
  .col-row-pub{background:none;border:none;color:rgba(140,165,220,0.34);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:2px 4px;flex-shrink:0;display:flex;align-items:center;}
  .col-row-pub svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;}
  .col-row-pub:hover{color:rgba(180,200,240,0.66);}
  .col-row-pub.on{color:rgba(130,185,255,0.9);}
  /* 드래그 재정렬 손잡이 — 콜렉션 목록(.col-row)·콜렉션 안 영상 목록(.cve-item) 공용(2026-08-12).
     탭하면 목록을 열고 손잡이만 눌러 끌면 순서를 바꾸는 구조라 손잡이 히트박스를 넉넉히 잡는다. */
  .drag-handle{background:none;border:none;color:rgba(140,165,220,0.38);cursor:grab;padding:4px 6px;flex-shrink:0;touch-action:none;font-size:13px;line-height:1;letter-spacing:1px;}
  .drag-handle:hover{color:rgba(180,200,240,0.66);}
  .drag-reorder-item{position:relative;}
  .drag-reorder-item.dragging{opacity:1;background:rgba(18,22,46,0.98);box-shadow:0 8px 28px rgba(0,0,0,0.55);border-radius:8px;z-index:20;cursor:grabbing;}
  .drag-reorder-item.dragging .drag-handle{cursor:grabbing;color:rgba(160,195,255,0.9);}
  /* 콜렉션 상세(내 것일 때만) — 사진 그리드 대신 재생목록처럼 세로 리스트로 보여줘야 드래그 재정렬이
     자연스러워서(스포티파이/유튜브뮤직 플레이리스트 편집 화면 참고, 2026-08-12) 사진 그리드(.gc-ch-item)와
     별도 레이아웃을 쓴다. */
  #feed-list-grid.cve-list{display:flex;flex-direction:column;gap:2px;}
  .cve-item{display:flex;align-items:center;gap:8px;padding:5px 2px;border-radius:8px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .12s;}
  .cve-item:hover{background:rgba(255,255,255,0.04);}
  .cve-thumb-wrap{position:relative;flex-shrink:0;}
  /* 56×34(가로로 긴 상자)였는데, 쇼츠(세로 9:16) 썸네일이 폭 기준으로 채워지면서 위아래 대부분이
     잘려나가 거의 안 보이는 문제가 있었음(2026-08-19, 사용자 제보 — "쇼츠만 있는 컬렉션인데 목록이
     한눈에 안 들어온다"). 오늘 컬렉션 목록 썸네일(.col-row-thumb)에 적용했던 것과 같은 판단(정사각형이면
     어느 쪽이든 크롭 손실이 덜함)을 그대로 적용. */
  .cve-thumb{display:block;width:44px;height:44px;border-radius:4px;object-fit:cover;background:rgba(255,255,255,0.06);}
  .cve-info{flex:1;min-width:0;}
  .cve-title{font-size:13px;color:rgba(210,225,255,0.88);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cve-sub{font-size:11px;color:rgba(120,145,190,0.56);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cve-remove{background:none;border:none;color:rgba(140,165,220,0.34);font-size:14px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:2px 6px;flex-shrink:0;}
  .cve-remove:hover{color:rgba(255,100,120,0.7);}
  /* 콜렉션 대표 이미지(커버) 직접 지정 — 별도 버튼으로 줄을 하나 더 차지하니 번잡스럽다는 피드백으로
     (2026-08-12), 썸네일 모서리에 작은 배지로 옮김. 기본은 첫 영상 썸네일이고, 배지를 누르면 그 영상으로
     고정/해제 토글. 호버 없이도(모바일) 발견 가능하도록 평소에도 옅게 보이게 둔다. */
  .cve-cover-badge{position:absolute;bottom:1px;right:1px;width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,0.6);border:none;padding:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.55);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;opacity:.7;transition:opacity .15s,color .15s;}
  .cve-cover-badge svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:1.8;}
  .cve-cover-badge:hover{opacity:1;}
  .cve-cover-badge.on{opacity:1;color:rgba(255,205,110,0.95);}
  .cve-cover-badge.on svg{fill:currentColor;}
  #col-create-btn,#col-create-photo-btn{margin-top:6px;background:none;border:0.5px dashed rgba(140,165,220,0.18);border-radius:8px;color:rgba(140,165,220,0.48);font-size:12px;font-weight:600;padding:7px 10px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;width:100%;text-align:left;transition:border-color .13s,color .13s;letter-spacing:.02em;}
  #col-create-btn:hover,#col-create-photo-btn:hover{border-color:rgba(140,165,220,0.38);color:rgba(180,200,240,0.78);}
  #col-create-photo-btn{margin-top:5px;}
  /* ── 내 우주 카드 (2026-08-18) ─────────────────────────── */
  /* #uc-card-btn의 옛 점선 슬롯 스타일은 제거됨(2026-09-18) — #col-create-btn과 픽셀 단위로 같아서
     "새로 만들기" 칸으로 오인됐다. 지금은 .fav-hd-right 안의 .share-btn이라 별도 룰이 필요 없다. */
  #uc-card-panel{width:min(340px,calc(100vw - 40px));background:rgba(13,17,34,0.97);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border-radius:18px;box-shadow:0 16px 56px rgba(0,0,0,0.72);border:0.5px solid rgba(255,255,255,0.10);padding:20px;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  #uc-card-imgwrap{margin-top:12px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,0.03);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;}
  #uc-card-img{width:100%;height:100%;object-fit:cover;display:none;}
  #uc-card-img.loaded{display:block;}
  #uc-card-status{font-size:12px;color:rgba(160,182,222,0.65);margin-top:10px;text-align:center;min-height:14px;}
  #uc-card-btns{display:flex;gap:8px;margin-top:14px;}
  /* 데뷔 기념일 카드 — 내 우주 카드(uc-card-*)와 동일 톤/구조, 세로 비율만 9:16으로 다르게(스토리 공유
     용도, 2026-08-19 사용자 요청 — "이미지 자체는 세로가 긴 게 좋을 듯"). */
  #debut-card-panel{width:min(320px,calc(100vw - 40px));background:rgba(13,17,34,0.97);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border-radius:18px;box-shadow:0 16px 56px rgba(0,0,0,0.72);border:0.5px solid rgba(255,255,255,0.10);padding:20px;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  #debut-card-imgwrap{margin-top:12px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,0.03);aspect-ratio:9/16;display:flex;align-items:center;justify-content:center;}
  #debut-card-img{width:100%;height:100%;object-fit:cover;display:none;}
  #debut-card-img.loaded{display:block;}
  #debut-card-status{font-size:12px;color:rgba(160,182,222,0.65);margin-top:10px;text-align:center;min-height:14px;}
  #debut-card-btns{display:flex;gap:8px;margin-top:14px;}
  /* 컬렉션 공유 카드 — 위 두 카드와 동일 톤/구조, 4:5(인스타 피드 비율, 2026-08-21). */
  #col-card-panel{width:min(340px,calc(100vw - 40px));background:rgba(13,17,34,0.97);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border-radius:18px;box-shadow:0 16px 56px rgba(0,0,0,0.72);border:0.5px solid rgba(255,255,255,0.10);padding:20px;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  #col-card-imgwrap{margin-top:12px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,0.03);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;}
  #col-card-img{width:100%;height:100%;object-fit:cover;display:none;}
  #col-card-img.loaded{display:block;}
  #col-card-status{font-size:12px;color:rgba(160,182,222,0.65);margin-top:10px;text-align:center;min-height:14px;}
  #col-card-btns{display:flex;gap:8px;margin-top:14px;}
  #gc-anniv-banner{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:8px;padding:9px 14px;border-radius:10px;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.01em;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;background:linear-gradient(90deg,rgba(255,200,120,0.20),rgba(255,140,190,0.20));border:0.5px solid rgba(255,200,150,0.35);color:#ffe9c7;transition:background .15s,transform .2s ease-out;}
  #gc-anniv-banner:hover{background:linear-gradient(90deg,rgba(255,200,120,0.30),rgba(255,140,190,0.30));}
  #gc-anniv-banner:active{transform:scale(0.97);transition:transform .07s;}
  /* ── Collection picker modal ────────────────────────── */
  #col-picker{position:fixed;inset:0;z-index:9990;display:none;align-items:flex-end;justify-content:center;}
  #col-picker.open{display:flex;}
  #col-picker-bg{position:absolute;inset:0;background:rgba(0,0,0,0.5);}
  #col-picker-sheet{position:relative;width:100%;background:rgba(14,18,38,0.98);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom,0px);max-height:72vh;display:flex;flex-direction:column;z-index:1;}
  @media(min-width:769px){#col-picker-sheet{max-width:380px;border-radius:18px;margin-bottom:100px;}}
  .col-picker-hd{padding:16px 18px 10px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
  .col-picker-title{font-size:13px;font-weight:700;color:rgba(200,220,255,0.88);letter-spacing:.03em;}
  #col-picker-close{background:none;border:none;color:rgba(150,175,230,0.62);font-size:23px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;line-height:1;width:36px;height:36px;display:flex;align-items:center;justify-content:center;padding:0;margin:-8px -8px -8px 0;border-radius:50%;-webkit-tap-highlight-color:transparent;}
  #col-picker-close:active{background:rgba(255,255,255,0.08);}
  /* 모바일 바텀시트: 위에서 아래로 스와이프해 닫을 수 있다는 힌트로 손잡이 줄을 얹는다(2026-08-29 사용자 제보). */
  @media(max-width:768px){
    #col-picker-sheet::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,0.20);pointer-events:none;}
    .col-picker-hd{padding-top:22px;}
  }
  #col-picker-list{overflow-y:auto;flex:1;padding:0 0 4px;}
  .col-picker-item{display:flex;align-items:center;gap:10px;padding:11px 18px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .12s;}
  .col-picker-item:hover{background:rgba(255,255,255,0.04);}
  .col-picker-item-name{flex:1;font-size:13px;color:rgba(200,220,255,0.82);}
  .col-picker-item-cnt{font-size:11px;color:rgba(120,145,190,0.51);margin-right:4px;}
  .col-picker-check{width:20px;height:20px;border-radius:50%;border:1.5px solid rgba(140,165,220,0.28);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .13s,border-color .13s;}
  .col-picker-check.on{background:rgba(255,92,125,0.88);border-color:rgba(255,92,125,0.88);}
  .col-picker-check.on::after{content:'✓';font-size:10px;color:#fff;font-weight:700;}
  .col-picker-new{padding:10px 18px 14px;border-top:0.5px solid rgba(255,255,255,0.07);flex-shrink:0;}
  #col-new-trigger{font-size:12px;color:rgba(140,165,220,0.56);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;display:inline-flex;align-items:center;gap:4px;padding:4px 0;}
  #col-new-trigger:hover{color:rgba(180,200,240,0.78);}
  .col-new-row{display:flex;gap:8px;margin-top:8px;}
  #col-new-name{flex:1;background:rgba(255,255,255,0.055);border:0.5px solid rgba(255,255,255,0.09);border-radius:10px;color:#c8d8f0;font-family:inherit;font-size:13px;padding:8px 12px;outline:none;transition:border-color .15s;}
  #col-new-name:focus{border-color:rgba(100,150,255,0.5);}
  #col-new-confirm{background:rgba(255,92,125,0.12);border:0.5px solid rgba(255,92,125,0.22);border-radius:10px;color:rgba(255,92,125,0.85);font-size:12px;font-weight:700;padding:8px 14px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;white-space:nowrap;transition:background .13s;}
  #col-new-confirm:hover{background:rgba(255,92,125,0.2);}
  #concert-section{margin-top:14px;padding-top:12px;border-top:0.5px solid rgba(255,255,255,0.07);}
  #journal-hd{margin-top:16px;display:none;}
  .scrap-item{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:8px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .13s;}
  .scrap-item:hover{background:rgba(255,255,255,0.06);}
  .scrap-thumb{width:42px;height:28px;border-radius:5px;object-fit:cover;flex-shrink:0;background:rgba(255,255,255,0.06);}
  .scrap-thumb.is-shorts{width:18px;height:28px;}
  .scrap-info{flex:1;min-width:0;}
  .scrap-title{font-size:11px;color:#b8d0ee;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .scrap-sub{font-size:10px;color:rgba(112,136,180,0.54);margin-top:1px;letter-spacing:.02em;}
  .scrap-del{background:none;border:none;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;color:rgba(138,158,208,0.36);font-size:13px;line-height:1;padding:2px 4px;flex-shrink:0;transition:color .13s;}
  .scrap-del:hover{color:rgba(255,100,130,0.72);}
  /* ── 입덕 여정(FLAGS) ── */
  #flag-list{display:flex;flex-direction:column;gap:4px;}
  .flag-item{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:8px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;transition:background .13s;}
  .flag-item:hover{background:rgba(255,255,255,0.05);}
  .flag-thumb-wrap{flex-shrink:0;}
  .flag-thumb{width:68px;height:45px;border-radius:6px;object-fit:cover;background:rgba(255,255,255,0.06);}
  .flag-thumb-empty{width:68px;height:45px;border-radius:6px;background:rgba(255,255,255,0.06);}
  .flag-info{flex:1;min-width:0;}
  .flag-name{font-size:10px;font-weight:700;color:rgba(255,185,80,0.85);letter-spacing:.04em;margin-bottom:2px;}
  .flag-title-txt{font-size:11px;color:rgba(195,215,255,0.82);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .flag-date{font-size:10px;color:rgba(110,135,185,0.5);margin-top:2px;}
  /* 썸네일 위 스크랩 버튼 */
  .tv-sm{position:relative!important;}
  #tv-big-wrap{position:relative;}
  .scrap-btn{position:absolute;top:4px;right:4px;background:rgba(0,0,0,0.52);border:none;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;color:rgba(220,230,255,0.72);opacity:0;transition:opacity .15s,color .15s,transform .15s;z-index:3;padding:0;line-height:1;}
  .scrap-btn svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;transition:fill .15s;}
  @media(hover:hover){.tv-sm:hover .scrap-btn,#tv-big-wrap:hover .scrap-btn,.gc-ch-item:hover .scrap-btn{opacity:1;}}
  .scrap-btn.scrapped{opacity:1!important;color:rgba(255,92,125,0.92);}
  .scrap-btn.scrapped svg{fill:currentColor;}
  .scrap-btn:hover{color:rgba(255,100,130,0.95);transform:scale(1.22);}
  .col-btn{position:absolute;top:4px;right:34px;background:rgba(0,0,0,0.52);border:none;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;color:rgba(220,230,255,0.72);opacity:0;transition:opacity .15s,color .15s,transform .15s;z-index:3;padding:0;line-height:1;}
  .col-btn svg{width:13px;height:13px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;transition:fill .15s,stroke .15s;}
  @media(hover:hover){.tv-sm:hover .col-btn,#tv-big-wrap:hover .col-btn,.gc-ch-item:hover .col-btn{opacity:1;}}
  .col-btn.col-on{opacity:1!important;color:rgba(130,185,255,0.95);}
  .col-btn.col-on svg{fill:currentColor;}
  .col-btn:hover{color:rgba(160,210,255,0.98);transform:scale(1.22);}
  /* 모바일 그리드 = 순수 이미지(디자인리뷰 Q3, 2026-09-07 사용자 동의). 예전(2026-08-14)엔 모바일에서도
     썸네일 위 저장/컬렉션 버튼을 은은히 보였는데, 화면당 아이콘 40개로 어수선했다 → 그리드에선 숨기고
     저장·컬렉션은 **라이트박스**(#yt-lb-scrap/#yt-lb-col)에서 한다. 데스크톱 hover 노출은 그대로 유지. */
  @media(hover:none){
    .scrap-btn,.col-btn{display:none;}
  }
  #col-quick-toast{position:fixed;bottom:calc(80px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(10px);background:rgba(16,20,44,0.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:0.5px solid rgba(140,170,240,0.18);border-radius:14px;padding:10px 16px;display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(200,220,255,0.88);white-space:nowrap;z-index:120;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;}
  #col-quick-toast.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
  #col-quick-toast-check{color:rgba(130,185,255,0.9);font-size:13px;}
  #col-quick-toast-name{font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis;}
  #col-quick-toast-change{color:rgba(130,185,255,0.75);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-size:12px;background:none;border:none;border-left:0.5px solid rgba(140,170,240,0.22);padding:0 0 0 10px;margin-left:2px;font-family:inherit;}
  #col-quick-toast-change:hover{color:rgba(160,210,255,0.98);}
  /* 랜덤 스와치 */
  .pp-color-rand{background:conic-gradient(hsl(0,90%,72%),hsl(60,90%,72%),hsl(120,90%,72%),hsl(180,90%,72%),hsl(240,90%,72%),hsl(300,90%,72%),hsl(360,90%,72%))!important;box-shadow:none!important;}
  .pp-color-custom{display:flex;align-items:center;justify-content:center;position:relative;background:rgba(255,255,255,0.08)!important;box-shadow:none;color:rgba(210,225,255,0.75);font-size:13px;font-weight:700;line-height:1;}
  .pp-color-custom input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;border:none;padding:0;}

  /* ── 탐험 피드 ──────────────────────────────────────────────────────── */
  #feed-overlay{position:fixed;inset:0;z-index:39;display:none;flex-direction:column;}
  #feed-overlay.open{display:flex;}
  /* 데스크톱은 전체화면 오버레이 대신 저널 사이드바와 같은 방식의 왼쪽 슬라이드 패널로 표시 */
  @media(min-width:769px){
    #feed-overlay{
      /* 오른쪽 카드 레일(#side-panel)과 좌우 짝이라 폭을 맞춘다: 320→380(2026-09-09) → 440(2026-10-02).
         ⚠️ 09-27에 카드만 440으로 늘고 여기는 380으로 남아 있었다 — 카드 폭을 바꾸면 여기·아래 translateX·
         #zoom-ctrl.zoom-feed-open도 같이 바꿀 것. */
      display:flex;inset:auto;top:0;left:0;height:100%;width:440px;
      background:rgba(14,18,34,0.92);
      backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
      border-right:0.5px solid rgba(255,255,255,0.10);
      box-shadow:4px 0 24px rgba(0,0,0,0.35);
      z-index:66;
      transform:translateX(-440px);
      transition:transform 0.32s cubic-bezier(0.4,0,0.2,1);
    }
    #feed-overlay.open{transform:translateX(0);}
    #feed-hd{padding:16px 20px 14px;}
    /* 세로 스크롤바를 또렷하게(2026-09-23, 사용자 요청) — Discover 탭 상단 가로 선반들(기념일·신보·
       차트·오리지널 콘텐츠)은 마우스 휠을 가로채 자기 안에서만 옆으로 움직인다(의도적 유지 — 아래
       #feed-body 자체의 overflow-y:auto는 원래도 있었지만, 그 위에서는 휠로 못 내려가고 데스크톱에서
       거의 안 보이는 전역 2px 스크롤바(::-webkit-scrollbar, 이 파일 위쪽)만 있어 발견이 안 됐다.
       #fav-list 등 다른 패널이 쓰는 손잡이 패턴(rgba(140,165,220,...))을 따르되, 선반 사이 틈을 정확히
       노리지 않고도 드래그로 내릴 수 있게 폭만 살짝 더 넓힌다(3px→6px, 목록 하나보다 패널 전체 스크롤이라
       그랩 타겟이 더 커야 함). 트랙도 옅게 남겨 "더 있다"는 게 호버 없이도 보이게 한다. */
    #feed-body{padding-bottom:20px;scrollbar-width:thin;scrollbar-color:rgba(140,165,220,0.28) rgba(10,13,28,0.70);}
    #feed-body::-webkit-scrollbar{-webkit-appearance:none;width:6px;}
    #feed-body::-webkit-scrollbar-track{-webkit-appearance:none;background:rgba(10,13,28,0.70);border-radius:3px;}
    #feed-body::-webkit-scrollbar-thumb{-webkit-appearance:none;background:rgba(140,165,220,0.28);border-radius:3px;}
    #feed-body::-webkit-scrollbar-thumb:hover{background:rgba(155,180,240,0.48);}
  }
  /* 탐험 패널이 살짝 열린(peek, 화면 절반) 상태에선 위쪽 절반이 그대로 보이므로 상단바를 가릴 필요가
     없음 — 전체로 펼쳐졌을 때만 숨긴다(2026-08-13, 사용자 제보 — peek 상태에서도 상단바가 사라짐). */
  body.feed-open:not(:has(#feed-overlay.peek)) #mob-top-bar{display:none!important;}
  /* #feed-body와 배경/블러가 달라서(0.97 vs 0.78 + blur) 그 경계에 얇은 색 차이가 보이는 문제가
     있었음(2026-08-13, 사용자 제보) — 같은 배경/블러로 맞춰서 손잡이만 떠있는 이음새 없는 시트로 보이게. */
  #feed-hd{display:flex;align-items:center;justify-content:flex-end;padding:calc(env(safe-area-inset-top,0px) + 16px) 20px 14px;background:rgba(8,11,24,0.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);flex-shrink:0;}
  #feed-peek-handle{display:none;}
  #feed-close{display:none;}
  #feed-close:active{color:rgba(200,218,255,0.85);transform:scale(0.86);transition:transform .07s;}
  /* 아래 여백은 탭바를 따라간다(2026-09-18) — 탐험 패널도 카드처럼 스크롤 다운이면 탭바가 숨는데,
     여백이 80px로 박혀 있으면 탭바가 사라져도 빈칸이 그대로 남아 "숨은 의미"가 없다.
     ⚠️ env(safe-area-inset-bottom)을 따로 더하지 않는다 — --sheet-bottom은 탭바의 offsetHeight
     실측값이고 탭바 자신의 padding-bottom이 이미 safe-area를 품고 있어서, 더하면 이중 계산이 된다. */
  #feed-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:rgba(8,11,24,0.88);padding-bottom:calc(var(--sheet-bottom,73px) + 8px);transition:padding-bottom .32s cubic-bezier(0.32,0.72,0,1);}
  /* 2탭(For You / Discover) — 스크롤해도 위에 붙어있게 sticky. 배경은 #feed-body와 맞춰 콘텐츠가 비쳐도 안 지저분하게. */
  /* 탐험 패널 탭 — X(트위터)식 언더라인 방식(2026-08-31 사용자 요청). 예전엔 알약 버튼(배경+테두리)이라
     존재감이 컸는데, 배경을 거의 없애고 **탭이 폭을 정확히 반씩 나눠 갖고 활성 탭 글자 밑에만 밑줄**이
     깔리는 형태로 바꿨다. 알약(.seg-control)과는 다른 카테고리이니 혼동하지 말 것 — 이건 화면 전환용
     최상위 탭이고, .seg-control은 목록 안의 필터다([[세그먼트 컨트롤 컴포넌트]]).
     ⚠️ 밑줄은 버튼이 아니라 **안쪽 span**에 건다. 버튼에 걸면 반쪽 폭 전체에 밑줄이 그어져서
        X처럼 안 보인다(글자 폭에 맞아야 함). */
  #feed-tabs{position:sticky;top:0;z-index:3;display:flex;flex-shrink:0;gap:0;padding:0;background:rgba(8,11,24,0.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:0.5px solid rgba(255,255,255,0.09);}
  .feed-tab{flex:1 1 0;display:flex;align-items:center;justify-content:center;padding:14px 4px 0;border:none;border-radius:0;background:none;color:rgba(200,215,250,0.52);font-size:14px;font-weight:700;letter-spacing:.01em;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;-webkit-tap-highlight-color:transparent;transition:color .16s,background .16s;}
  .feed-tab>span{position:relative;display:inline-block;padding-bottom:13px;white-space:nowrap;}
  .feed-tab>span::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px 3px 0 0;background:rgba(140,175,255,0.95);opacity:0;transform:scaleX(0.4);transition:opacity .16s,transform .16s cubic-bezier(0.32,0.72,0,1);}
  .feed-tab.active{color:#fff;}
  .feed-tab.active>span::after{opacity:1;transform:scaleX(1);}
  .feed-tab:hover:not(.active){color:rgba(220,232,255,0.78);background:rgba(255,255,255,0.03);}
  .feed-tab:active{background:rgba(255,255,255,0.06);}
  .feed-pane[hidden]{display:none;}
  /* 즐겨찾기 신작 온보딩 — 아직 하트 누른 게 없을 때 이 선반이 비지 않게 안내 카드로 채운다. */
  .feed-onboard-card{flex:0 0 auto;max-width:min(300px,78vw);display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,0.05);border:0.5px solid rgba(255,255,255,0.10);}
  /* 빈/오류 상태 — Supabase 실패로 선반이 하나도 안 뜰 때(예전엔 제목만 남고 빈 화면). 다시 시도 버튼. */
  .feed-empty[hidden]{display:none;}
  .feed-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 24px;text-align:center;}
  .feed-empty-txt{font-size:13px;color:rgba(190,205,240,0.72);line-height:1.5;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  .feed-empty-retry{padding:9px 20px;border-radius:999px;border:0.5px solid rgba(140,175,255,0.4);background:rgba(140,175,255,0.1);color:rgba(200,220,255,0.92);font-size:13px;font-weight:700;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;}
  .feed-empty-retry:active{background:rgba(140,175,255,0.22);}
  .feed-onboard-emoji{font-size:26px;line-height:1;flex-shrink:0;}
  .feed-onboard-txt{font-size:12px;line-height:1.5;color:rgba(210,222,250,0.82);font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  .feed-section-ttl{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(120,148,205,0.51);padding:14px 20px 8px;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  /* 기념일 스트립(인스타 스토리 스타일 가로 스크롤) */
  .feed-strip{display:flex;gap:10px;overflow-x:auto;padding:2px 20px 18px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .feed-strip::-webkit-scrollbar{display:none;}
/* 투데이 애니버서리 스트립만 프로필 간 가로 간격 더 좁게(2026-08-26 사용자 요청) — 공유 .feed-strip은
   그대로 두고 #feed-anniv에만 gap·아이템 폭 축소(썸네일 76px보다 작아지면 안 됨). 실기기서 미세조정 가능. */
#feed-anniv{gap:5px;}
#feed-anniv .feed-strip-item{width:72px;}
  .feed-strip-item{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;width:78px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;position:relative;-webkit-tap-highlight-color:transparent;}
  /* 로딩 중(이미지 뜨기 전)엔 이 배경이 생으로 다 보여서 원색 무지개 동그라미처럼 튀어 보이던 문제
     (2026-08-10, 사용자 제보) — 톤을 확 낮춰 은은한 테두리 느낌만 남김(보일듯말듯).
     톤을 낮춘 뒤에도 갈색~보라 배색이 여전히 우주 테마와 안 어울려 무지개 느낌이 난다는 재제보로
     인디고~마젠타 성운 톤으로 바꿨다가(2026-08-11 1차), 그마저 컬러감이 남아있다는 재재제보(2차)로
     .tt-insta-ring과 같은 블랙앤화이트 메탈릭 톤으로 통일. 밝기 범위는 원래 톤 그대로 유지.
     최저 밝기가 배경과 안 구분된다는 재제보(2026-08-11 3차)로 .tt-insta-ring과 함께 최저 밝기만 올림. */
  .feed-strip-thumb-wrap{width:68px;height:68px;border-radius:50%;padding:2px;flex-shrink:0;position:relative;overflow:hidden;background:conic-gradient(from 180deg,#1e1e26,#38383f,#48484f,#26262c,#1e1e26);}
  .feed-strip-thumb{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:2px solid #0b0f1f;box-sizing:border-box;opacity:0;transition:opacity .25s ease;}
  .feed-strip-thumb.loaded{opacity:1;}
  .feed-strip-icon{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;background:rgba(16,20,38,0.96);border:2px solid #0b0f1f;box-sizing:border-box;}
  .feed-strip-name{font-size:11px;font-weight:600;color:rgba(215,228,255,0.85);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:78px;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  /* 둘째 서브줄(생년월일)은 윗줄(그룹명)에 더 붙여서 한 덩어리로 읽히게 — item gap 7px를 상쇄 */
  .feed-strip-sub+.feed-strip-sub{margin-top:-7px;}
  .feed-strip-sub{font-size:var(--fz-meta);color:rgba(120,148,200,0.61);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:78px;margin-top:-4px;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  /* Discovery 피드(인스타 피드 스타일 세로 스크롤 큰 카드) */
  .feed-card{cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;border-bottom:0.5px solid rgba(255,255,255,0.06);transition:background .13s;animation:feed-card-appear .28s ease both;}
  /* 2열 그리드(2026-08-21, Fable UX 감사 반영 — "화면당 1장은 발견량이 너무 적다") — 풀블리드 1열 목록에서
     2열 타일 그리드로 전환. 카드 자체(_appendFeedCard)는 그대로 재사용하고 컨테이너 레이아웃만 바꾼다. */
  /* grid-auto-flow:dense — 전체폭(.feed-wide span 2) 카드가 홀수 위치 뒤에 오면 직전 행 오른쪽 칸이
     비던 버그(2026-08-22 사용자 제보) 수정: 빈 칸을 뒤쪽 단일 카드로 자동 메움(구멍 있을 때만 작동). */
  .feed-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 20px 4px;align-items:start;grid-auto-flow:dense;}
  /* 2열 메이슨리(열 독립 스택, 2026-08-30) — 카드를 더 짧은 열에 붙여 16:9/9:16 혼합에도 여백이 안 생긴다.
     grid+dense의 "한 행=같은 비율" 전제를 없앤 근본 해법(가로영상 아래 여백 지속 발생 문제). */
  .feed-masonry{display:flex;gap:10px;padding:0 20px 4px;align-items:flex-start;}
  .feed-masonry-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px;}
  .feed-masonry .feed-card{border-bottom:none;border-radius:8px;background:rgba(255,255,255,0.03);}
  .feed-masonry .feed-card-cap{padding:8px 10px 12px;}
  .feed-masonry .feed-card-title{font-size:11.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .feed-masonry .feed-card-sub{font-size:10.5px;}
  /* varied 메이슨리 — 여백없는 메이슨리 세그먼트 + 가로영상 전체폭 featured가 섞인 잡지형 배치(2026-08-30). */
  .feed-varied{display:flex;flex-direction:column;gap:10px;padding:0 20px 4px;}
  .feed-varied>.feed-masonry{padding:0;} /* 세그먼트는 부모(feed-varied)가 패딩을 가짐 */
  .feed-varied-feat{width:100%;}
  .feed-varied-feat>.feed-card{border-bottom:none;border-radius:8px;background:rgba(255,255,255,0.03);}
  .feed-varied-feat>.feed-card .feed-card-cap{padding:8px 12px 12px;}
  .feed-varied-feat>.feed-card .feed-card-title{font-size:13px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .feed-varied-feat>.feed-card .feed-card-sub{font-size:10.5px;}
  /* 크기 섞기(2026-08-22) — 그룹/멤버 카드 그리드처럼: 하이라이트(단일영상)는 전체폭 16:9, 대표가 쇼츠면 9:16 세로 */
  .feed-grid .feed-card.feed-wide{grid-column:span 2;}
  /* 최애 표시(2026-10-02) — 크기 대신 카드 둘레의 은은한 빛. --fav-rgb = 최애 멤버(없으면 그룹) 색 "r,g,b".
     텍스트 배지는 안 붙인다(빛과 겹치면 과함). 순서(맨 앞)는 _buildFeedFavNew가 맡는다. */
  /* 2026-10-02 3차(사용자: "선처럼 말고, 별·행성처럼 뿌옇고 반투명하게 — 같은 거리면 같은 밝기, 바깥으로 갈수록
     옅어지게"): 선·방향성 그라데이션 없이 **블러만 다른 그림자 3겹**으로 둘레 전체에 고르게 번지는 후광.
     가장자리 바로 바깥이 가장 진하고 멀어질수록 사라진다. 색은 최애 색을 흰빛으로 풀어(--fav-soft) 네온감을 뺀다.
     ⚠️ 애니메이션 없음 — 화면 밖 카드의 무한 애니가 탐험 패널 발열 주범이었다(2026-09-28). */
  .feed-grid .feed-card.feed-fav{
    --fav-soft:rgb(var(--fav-rgb));
    --fav-soft:color-mix(in srgb,rgb(var(--fav-rgb)) 60%,#ffffff);
    /* 세기: 3차 첫 값(34/18/8%)이 "너무 은은해 티가 안 난다"(사용자) → 약 1.6배 + 번짐 조금 넓힘 */
    box-shadow:0 0 5px 1px rgba(var(--fav-rgb),0.48),0 0 16px 3px rgba(var(--fav-rgb),0.26),0 0 36px 8px rgba(var(--fav-rgb),0.12);
    box-shadow:0 0 5px 1px color-mix(in srgb,var(--fav-soft) 55%,transparent),
               0 0 16px 3px color-mix(in srgb,var(--fav-soft) 30%,transparent),
               0 0 36px 8px color-mix(in srgb,var(--fav-soft) 14%,transparent);
  }
  .feed-card.is-short .feed-card-thumb-wrap{aspect-ratio:9/16;}
  .feed-card.is-short .feed-card-thumb{object-fit:cover;z-index:1;}
  /* 전체폭 쇼츠(2026-09-04) — Discover의 랜덤 큰 쇼츠 + For You의 최애 쇼츠가 쓴다.
     9:16을 그대로 전체폭으로 깔면 390px 뷰포트에서 높이가 620px를 넘어 한 장이 화면을 통째로 먹는다.
     비율은 유지하되 높이 상한을 걸어 잘리게 둔다(안쪽 img가 object-fit:cover라 가운데가 남는다).
     max-height를 두 번 쓰는 건 폴백 — svh를 모르는 브라우저는 앞 줄의 px 값에서 멈춘다. */
  .feed-grid .feed-card.feed-wide.is-short .feed-card-thumb-wrap{max-height:520px;max-height:min(64svh,520px);}
  .feed-card-thumb-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(16px) brightness(0.42);transform:scale(1.1);z-index:0;}
  .feed-grid .feed-card{border-bottom:none;border-radius:8px;background:rgba(255,255,255,0.03);}
  .feed-grid .feed-card-cap{padding:8px 10px 12px;}
  .feed-grid .feed-card-title{font-size:11.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .feed-grid .feed-card-sub{font-size:10.5px;}
  .feed-grid .gc-ch-more-wrap{grid-column:1/-1;}
  /* Charts는 가로 선반(feed-strip)으로 전환(2026-08-24) — 세로 그리드+더보기 토글에서, 기념일·최근본
     스트립과 일관되게. 카드(_appendFeedCard)는 그대로 재사용하고 고정폭 타일로만 만든다. 오른쪽 20px
     패딩+카드폭 덕에 다음 카드가 살짝 걸쳐 보여(peek) "뒤에 더 있다"를 알린다. */
  /* Charts는 가로 스트립(158px 고정 카드). Trend는 2026-08-29 Step3에서 세로 2단 그리드로 이관 —
     쇼츠(9:16)가 가로 16:9 틀에 갇혀 작게 보이던 문제 해결. Trend는 이제 .feed-grid 규칙을 그대로 탄다. */
  /* 즐겨찾기 신작(#feed-favnew)도 Charts와 같은 가로 스트립 카드(158px) — Step3에서 Trend만 그리드로
     빼면서 이 선반이 폭 규칙에서 누락돼 카드가 0폭으로 붕괴("점처럼")되던 것 수정(2026-08-29 사용자 제보). */
  /* #feed-chart는 가로 스트립이라 고정폭 유지. #feed-favnew는 2열 그리드(.feed-grid)로 바뀌었으므로(2026-08-30)
     이 고정 width:158px를 주면 안 됨 — 데스크톱 320px 패널에서 안 줄어들어 오른쪽 열이 잘렸다(사용자 제보).
     그리드 카드는 아래 `.feed-grid .feed-card`(1fr, 유연)를 그대로 쓴다(Trend와 동일). */
  /* #feed-jacon(오리지널 콘텐츠 선반)도 차트와 동일한 고정폭 카드(2026-09-04 사용자 — "썸네일 크기 차트랑 동일하게"). */
  #feed-chart>.feed-card,#feed-jacon>.feed-card{flex:0 0 auto;width:158px;border-bottom:none;border-radius:8px;background:rgba(255,255,255,0.03);}
  #feed-chart>.feed-card .feed-card-cap,#feed-jacon>.feed-card .feed-card-cap,#feed-favnew>.feed-card .feed-card-cap{padding:8px 10px 12px;}
  #feed-chart>.feed-card .feed-card-title,#feed-jacon>.feed-card .feed-card-title,#feed-favnew>.feed-card .feed-card-title{font-size:11.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;}
  #feed-chart>.feed-card .feed-card-sub,#feed-jacon>.feed-card .feed-card-sub,#feed-favnew>.feed-card .feed-card-sub{font-size:10.5px;}
  /* 오리지널 콘텐츠 캡션: 멤버 먼저, 소속 그룹은 작고 흐리게(2026-09-28) */
  .feed-sub-grp{font-size:.88em;opacity:.55;margin-left:2px;}
  /* 오늘의 케이팝 — 뉴스 리스트형(세로 스택). 가로 카드 선반이 아니라 한 줄 뉴스 행으로 타입을 먼저
     읽고 내용을 훑는 레이아웃. 배지(타입) + 제목·서브 + 우측 작은 썸네일(선택). */
  .feed-news-list{display:flex;flex-direction:column;}
  .feed-news-row{display:flex;align-items:center;gap:10px;padding:11px 20px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;-webkit-tap-highlight-color:transparent;transition:background .12s;}
  .feed-news-row:active{background:rgba(255,255,255,0.04);}
  .feed-news-row+.feed-news-row{border-top:0.5px solid rgba(255,255,255,0.06);}
  .feed-news-badge{flex-shrink:0;font-size:10px;font-weight:700;letter-spacing:.02em;padding:3px 8px;border-radius:4px;min-width:44px;text-align:center;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  .fnb-album{background:rgba(80,150,255,0.13);color:rgba(130,190,255,0.92);}
  .fnb-win{background:rgba(255,200,60,0.13);color:rgba(255,215,80,0.92);}
  .fnb-mv{background:rgba(160,100,255,0.13);color:rgba(195,150,255,0.92);}
  .fnb-teaser{background:rgba(60,220,180,0.13);color:rgba(90,240,200,0.92);}
  .fnb-milestone{background:rgba(255,120,150,0.13);color:rgba(255,160,180,0.95);} /* 09-28: 빠져 있어 기본색(어두움)으로 거의 안 보였다 */
  .feed-news-body{flex:1;min-width:0;}
  .feed-news-title{font-size:13px;font-weight:600;color:rgba(220,232,255,0.92);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  .feed-news-sub{font-size:11px;color:rgba(140,166,215,0.72);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  .feed-news-thumb{flex-shrink:0;width:60px;height:38px;object-fit:cover;border-radius:5px;opacity:0;transition:opacity .25s ease;}
  .feed-news-thumb.loaded{opacity:1;}
  .feed-news-thumb.is-square{width:38px;height:38px;}
  /* 조회수 돌파 — 썸네일 전폭 상단, 뱃지+텍스트 하단 */
  .feed-news-row.is-milestone{flex-direction:column;align-items:stretch;padding:0;margin:4px 16px 2px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,0.028);border-top:none!important;}
  .feed-news-row.is-milestone+.feed-news-row{border-top:0.5px solid rgba(255,255,255,0.06);}
  .feed-news-row.is-milestone:active{background:rgba(255,255,255,0.055);}
  .feed-news-thumb--milestone{width:100%;height:auto;aspect-ratio:16/9;border-radius:0;flex-shrink:0;}
  .fnr-cap{display:flex;align-items:center;gap:10px;padding:8px 12px 10px;}
  .fnr-cap .feed-news-body{flex:1;min-width:0;}
  /* 투데이스 케이팝 1면(2026-09-28) — 헤드라인 1 + 요약 4 + 더보기 */
  .feed-news-hero{margin:2px 16px 6px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,0.035);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;position:relative;-webkit-tap-highlight-color:transparent;}
  .feed-news-hero .fnh-media{position:relative;aspect-ratio:16/9;background:rgba(255,255,255,0.04);overflow:hidden;}
  .feed-news-hero .fnh-img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .25s ease;}
  .feed-news-hero .fnh-img.loaded{opacity:1;}
  .feed-news-hero.is-album .fnh-bg{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(22px) brightness(.55);}
  .feed-news-hero.is-album .fnh-img{position:relative;width:auto;height:100%;margin:0 auto;object-fit:contain;}
  .feed-news-hero .fnh-cap{padding:10px 14px 12px;}
  .feed-news-hero .feed-news-badge{display:inline-block;min-width:0;}
  .feed-news-hero .fnh-title{margin-top:7px;font-size:15px;font-weight:700;line-height:1.35;color:rgba(232,240,255,0.95);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  .feed-news-hero .fnh-sub{margin-top:3px;font-size:11.5px;color:rgba(150,175,222,0.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  .feed-news-more{display:block;margin:4px 20px 2px;padding:8px 0;width:calc(100% - 40px);background:none;border:0;border-top:0.5px solid rgba(255,255,255,0.06);color:rgba(150,175,222,0.8);font-size:12px;font-weight:600;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  /* 조회수 돌파 쇼츠 2열(2026-10-12) — 영상 그리드(.feed-grid)와 같은 세로 카드. 좌우는 아래 앨범 그리드(20px)에 맞춘다. */
  .feed-news-shorts{padding:6px 20px 4px;}
  .feed-news-shorts .feed-card-cap .feed-news-badge{display:inline-block;min-width:0;margin-bottom:5px;}
  /* This Week's K-pop 안의 발매 앨범 블록 소제목(2026-10-12 합침) — 섹션 제목보다 한 단계 낮게, 같은 대문자 톤 */
  .feed-news-subttl{font-size:10px;font-weight:700;letter-spacing:.12em;color:rgba(120,148,205,0.45);padding:14px 20px 8px;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  #feed-dailynews[hidden]+#feed-newalbum-section .feed-news-subttl{padding-top:2px;}
  /* 아이콘 전용 셰브런(2026-08-21, 사용자 요청 — 텍스트바가 너무 투박하고 큼) — 작은 원형 버튼, 접힘/펼침은
     회전으로만 표현. 터치 타겟은 실제 시각 크기(28px)보다 무형으로 넉넉히 키움(padding, 기존 소셜아이콘
     확장 패턴과 동일). */
  .feed-more-toggle{display:flex;align-items:center;justify-content:center;width:14px;height:14px;margin:0 auto 12px;padding:4px;box-sizing:content-box;color:rgba(160,185,230,0.5);background:rgba(255,255,255,0.03);border:none;border-radius:50%;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;-webkit-tap-highlight-color:transparent;}
  .feed-more-toggle:active{background:rgba(255,255,255,0.08);}
  .feed-more-toggle svg{width:12px;height:12px;transition:transform .2s ease;}
  .feed-more-toggle.expanded svg{transform:rotate(180deg);}
  @keyframes feed-card-appear{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
  .feed-card:active{background:rgba(255,255,255,0.035);}
  .feed-card-thumb-wrap{width:100%;aspect-ratio:16/9;background:rgba(255,255,255,0.05);position:relative;overflow:hidden;}
  /* 💿 이번 주 발매 — 앨범 커버는 **정사각**이다(2026-09-15). Discover의 다른 선반이 전부 16:9/9:16
     유튜브 썸네일이라 화면이 한 가지 리듬으로만 읽히는데, 1:1 커버가 그 사이에서 눈에 띄는 변주가 된다.
     ⚠️ 여기선 aspect-ratio를 써도 된다 — 문제가 됐던 건 grid의 row 트랙 사이징(크로미움 버그)이고
        이 선반은 flex 가로 스트립이다. 그래도 폭이 고정이라 height를 직접 박는 게 더 확실하다. */
  /* 앨범 커버 카드(정사각) — Discover "이번 주 발매"(#feed-newalbum)와 For You "즐겨찾기 신보"
     (#feed-favalbum)가 같이 쓴다. .feed-album-grid 공통 클래스로 관리(2열 그리드). */
  .feed-album-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:2px 20px 18px;}
  /* display:flex — 아래 .feed-card-cap의 flex:1과 메타 줄 하단 정렬(margin-top:auto)이 먹으려면
     카드 자신이 세로 flex 컨테이너여야 한다(2026-09-21). */
  .feed-album-grid>.feed-card{border-bottom:none;border-radius:8px;background:rgba(255,255,255,0.03);display:flex;flex-direction:column;}
  .feed-album-grid>.feed-card .feed-card-thumb-wrap{aspect-ratio:1/1;height:auto;border-radius:8px 8px 0 0;}
  .feed-album-grid>.feed-card .feed-card-thumb{object-fit:cover;}
  /* 앨범 제목이 1줄이냐 2줄이냐에 따라 "싱글 · 9.14" 줄의 높이가 달라져 선반이 들쭉날쭉해 보인다 —
     캡션을 세로 flex로 두고 메타만 아래로 밀어 카드마다 같은 높이에 오게 한다(2026-09-21). */
  .feed-album-grid>.feed-card .feed-card-cap{padding:8px 10px 12px;display:flex;flex-direction:column;flex:1;min-height:0;}
  .feed-album-grid>.feed-card .feed-card-meta{margin-top:auto;padding-top:2px;}
  .feed-album-grid>.feed-card .feed-card-title{font-size:11.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;}
  .feed-album-grid>.feed-card .feed-card-sub{font-size:10.5px;}
  /* 캡션 셋째 줄 — "싱글 · 9.14"(2026-09-21). 앨범 커버 위에는 아무것도 얹지 않는다(커버는 그 자체가
     작품이라 영상 썸네일과 다르게 다룬다, 사용자 결정) — 대신 캡션에 위계를 한 단계 더 준다.
     한 줄 고정(줄바꿈 금지)이라 카드 높이는 딱 이 줄만큼만 늘어난다. */
  .feed-card-meta{margin-top:2px;font-size:10.5px;font-weight:500;line-height:1.35;color:rgba(150,175,235,0.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* 오늘·어제 발매만 강조 — 선반의 목적이 "따끈한 것 먼저"라서. 세 번째 색은 만들지 않는다. */
  .feed-card-meta.is-fresh{color:rgba(150,180,255,0.95);font-weight:700;}
  /* NEW 칩(2026-10-12) — 캡션 메타 줄 맨 앞. 강조 메타(is-fresh)와 같은 파랑 계열로, 색 종류를 늘리지 않는다. */
  .feed-card-new{display:inline-block;margin-right:5px;padding:0 4px;border-radius:3px;font-size:8.5px;font-weight:800;letter-spacing:.06em;line-height:14px;vertical-align:1px;color:#0d1426;background:rgba(150,180,255,0.92);}
  .feed-card-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease;}
  /* 재생시간 배지(2026-09-16) — 여기는 썸네일 전용 래퍼(.feed-card-thumb-wrap)가 있어서 그냥 밑변에
     붙이면 된다. 톤은 카드 그리드의 .gc-ch-dur와 동일하게 유지할 것(같은 정보, 같은 생김새). */
  .feed-card-dur{
    position:absolute;right:5px;bottom:5px;z-index:3;
    font-size:10px;font-weight:600;padding:1px 4px;border-radius:3px;letter-spacing:0.2px;
    background:rgba(8,11,20,0.78);color:rgba(240,246,255,0.94);pointer-events:none;
  }
  .feed-card-thumb.loaded{opacity:1;}
  .feed-card-icon-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:34px;background:linear-gradient(135deg,rgba(100,130,255,0.16),rgba(255,255,255,0.03));}
  /* 셔머는 보이는 동안만(.sh-on — index.html _watchShimmer). 화면 밖 카드 200여 개가 무한 애니를 돌려 탐험 패널 발열의 주범이었다(2026-09-28). */
  .feed-card-shimmer{width:100%;height:100%;background:linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.09) 50%,rgba(255,255,255,0.04) 75%);background-size:200% 100%;animation:none;}
  .feed-card-shimmer.sh-on{animation:gc-shimmer 1.4s ease infinite;}
  .feed-strip-shimmer{width:100%;height:100%;border-radius:50%;background:linear-gradient(90deg,rgba(255,255,255,0.04) 25%,rgba(255,255,255,0.09) 50%,rgba(255,255,255,0.04) 75%);background-size:200% 100%;animation:gc-shimmer 1.4s ease infinite;}
  /* 제목이 썸네일보다 먼저 떠서 "반쪽만 로딩된" 것처럼 어색해 보이는 문제(2026-08-10, 사용자 제보) —
     썸네일(또는 실패 시 폴백 아이콘)이 준비될 때까지 캡션도 같이 숨겨뒀다가 한 번에 페이드인시킴. */
  .feed-card-cap{padding:10px 20px 18px;opacity:0;transition:opacity .22s ease;}
  .feed-card.cap-revealed .feed-card-cap{opacity:1;}
  .feed-strip-name,.feed-strip-sub{opacity:0;transition:opacity .22s ease;}
  .feed-strip-item.cap-revealed .feed-strip-name,
  .feed-strip-item.cap-revealed .feed-strip-sub{opacity:1;}
  .feed-strip-item.anniv-inactive{opacity:0.42;filter:grayscale(0.3);}
  /* 최근 본 가로 행 — 원형 아바타(feed-strip-item)와 달리 영상 썸네일이라 16:9 사각 카드로 별도 마크업 */
  /* 썸네일 크기를 차트 카드(#feed-chart>.feed-card, 158px)와 동일하게(2026-09-13 사용자 요청 — "너무 작음"). */
  .feed-recent-item{display:flex;flex-direction:column;gap:5px;flex-shrink:0;width:158px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;-webkit-tap-highlight-color:transparent;position:relative;}
  .feed-recent-thumb-wrap{width:158px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:rgba(255,255,255,0.05);}
  .feed-recent-thumb{width:100%;height:100%;object-fit:cover;display:block;}
  .feed-recent-title{font-size:10px;color:rgba(200,215,245,0.75);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  .feed-card-title{font-size:13px;font-weight:600;color:rgba(220,232,255,0.92);line-height:1.4;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  /* ⚠️ 한글은 같은 px·같은 알파에서 라틴보다 훨씬 빈약해 보인다(획이 많아 작은 크기에서 뭉갠다) —
     "작고 볼드 아닌 한글이 보잘것없다"는 제보(2026-09-21). 크기를 키우는 대신 **웨이트 400→500**과
     알파를 올렸다: 카드 폭이 좁아(132~190px) 크기를 올리면 잘림이 늘고, 한글 가독성은 크기보다
     웨이트가 훨씬 크게 좌우한다. Pretendard 동적 서브셋이 500을 실제로 제공하므로 합성 볼드가 아니다.
     ⚠️ 발열과 무관하다 — 텍스트 스타일은 3D 드로우콜(발열의 실제 원인)과 완전히 별개이고, 폰트도
     이미 로드된 것을 쓴다. */
  .feed-card-sub{font-size:11px;font-weight:500;color:rgba(140,166,215,0.78);margin-top:3px;line-height:1.35;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;white-space:nowrap;overflow:hidden;}
  /* ── 첫 방문 온보딩: 상단 검색바(iOS 리퀴드글라스 느낌) ──────────── */
  #ob-top-search{
    position:fixed;z-index:41;
    top:calc(env(safe-area-inset-top,0px) + 76px);
    left:24px;right:24px;
    opacity:0;transform:translateY(-6px);
    transition:opacity .9s cubic-bezier(0.22,1,0.36,1),transform .9s cubic-bezier(0.22,1,0.36,1);
    pointer-events:none;
  }
  #ob-top-search.ob-show{opacity:1;transform:translateY(0);pointer-events:auto;}
  #ob-top-search.ob-hide{opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .3s ease;pointer-events:none;}
  #ob-top-search-btn{
    width:100%;box-sizing:border-box;display:flex;align-items:center;gap:8px;
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(3px) saturate(140%);-webkit-backdrop-filter:blur(3px) saturate(140%);
    border:0.5px solid rgba(255,255,255,0.18);
    border-radius:28px;padding:13px 18px;
    cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;
    color:rgba(255,255,255,0.55);
    font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
    font-size:13px;font-weight:600;letter-spacing:.04em;
    box-shadow:0 4px 20px rgba(0,0,0,0.18),inset 0 1px 0 rgba(255,255,255,0.14);
    transition:background .18s,border-color .18s,transform .12s;
  }
  #ob-top-search-btn:active{transform:scale(0.98);background:rgba(255,255,255,0.10);}
  #ob-top-search-btn svg{flex-shrink:0;opacity:.6;}
  #ob-top-search-btn span{overflow:hidden;display:flex;flex-direction:column;gap:2px;
    color:rgba(255,255,255,0.85);text-shadow:0 0 14px rgba(255,255,255,0.55),0 0 5px rgba(255,255,255,0.35);}
  #ob-top-search-btn span small{display:block;font-size:10px;font-weight:400;letter-spacing:.02em;color:rgba(255,255,255,0.42);text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  /* 타이핑 모드: 버튼 숨기고 인풋으로 전환 */
  #ob-top-search.ob-typing{
    display:flex;align-items:center;gap:8px;
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(3px) saturate(140%);-webkit-backdrop-filter:blur(3px) saturate(140%);
    border:0.5px solid rgba(255,255,255,0.20);
    border-radius:28px;padding:0 18px;
    box-shadow:0 4px 20px rgba(0,0,0,0.18),inset 0 1px 0 rgba(255,255,255,0.14);
  }
  #ob-top-search.ob-typing #ob-top-search-btn{display:none;}
  #ob-si{display:none;flex:1;background:none;border:none;outline:none;
    color:rgba(255,255,255,0.88);font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;
    font-size:13px;font-weight:500;line-height:1;padding:13px 0;-webkit-text-size-adjust:none;letter-spacing:.03em;}
  #ob-si::placeholder{color:rgba(255,255,255,0.55);text-shadow:0 0 14px rgba(255,255,255,0.4);}
  #ob-top-search.ob-typing #ob-si{display:block;}
  #ob-si-clear{display:none;background:none;border:none;color:rgba(200,215,240,0.45);
    font-size:16px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:4px 0 4px 4px;line-height:1;align-items:center;flex-shrink:0;}
  #ob-top-search.ob-typing #ob-si-clear{display:flex;}
  #ob-top-search.ob-typing #ob-si:placeholder-shown~#ob-si-clear{display:none;}
  /* 온보딩 검색 결과 패널 — 플로팅 바 바로 아래에 뜸 */
  #ob-sr{
    position:fixed;left:24px;right:24px;
    top:calc(env(safe-area-inset-top,0px) + 76px + 50px);
    background:rgba(14,18,36,0.97);border-radius:0 0 16px 16px;
    border:0.5px solid rgba(255,255,255,0.09);border-top:none;
    backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);
    box-shadow:0 8px 32px rgba(0,0,0,0.45);
    z-index:42;max-height:55vh;overflow-y:auto;overflow-x:hidden;display:none;
    box-sizing:border-box;padding:4px 0;
  }
  #ob-sr.open{display:block;}
  /* 탐험 패널 — 지도앱 바텀시트 방식. 첫 방문엔 살짝(peek, 절반)만 열어두고, 손잡이를 위로 끌면
     하단 탭바 "탐험" 버튼을 눌렀을 때와 완전히 같은 전체화면 상태(.peek 제거)가 되고, 아래로 끌면
     peek/전체 상태 구분 없이 바로 닫힌다(2026-08-13, 사용자 요청 — 이미 반만 열려있는 상태에서
     아래로 끄는 건 "줄이기"가 아니라 "닫기"라는 의도). top/height를 전환해서 카드 바텀시트처럼
     크기 자체가 부드럽게 CSS 트랜지션되게 한다(진입 슬라이드업은 JS에서 처리, 아래 참고).
     세로 여백 없이 카드 바텀시트(#mob-sheet)와 톤을 맞추려고 #feed-hd 배경/구분선은 없앰(아래). */
  @media(max-width:768px){
    #feed-overlay{transition:transform .32s cubic-bezier(0.32,0.72,0,1),top .32s cubic-bezier(0.32,0.72,0,1),height .32s cubic-bezier(0.32,0.72,0,1),border-radius .32s cubic-bezier(0.32,0.72,0,1),bottom .32s cubic-bezier(0.32,0.72,0,1);}
    #feed-overlay.open.peek{
      top:44%;height:56%;
      border-radius:20px 20px 0 0;
      border-top:0.5px solid rgba(255,255,255,0.10);
      box-shadow:0 -8px 32px rgba(0,0,0,0.35);
      background:rgba(8,11,24,0.97);
    }
    /* peek 상태: X버튼 없으니 헤더 완전 축소, 핸들 바로 아래에 콘텐츠 */
    #feed-overlay.open.peek #feed-hd{padding:0;height:0;overflow:hidden;}
    /* peek 상태: 불투명하게(backdrop-filter 제거) */
    #feed-overlay.open.peek #feed-body{background:rgba(8,11,24,0.97);backdrop-filter:none;-webkit-backdrop-filter:none;}
    /* 전체 열림(non-peek): 오버레이 바닥을 --sheet-bottom에 물려서 카드 시트처럼 탭바 숨을 때 같이 확장.
       padding-bottom도 맞춰 줄여 빈칸 없이 / safe-area는 오버레이가 덮지 않는 구간이므로 env()로 보정. */
    #feed-overlay.open:not(.peek){bottom:var(--sheet-bottom,73px);}
    #feed-overlay.open:not(.peek) #feed-body{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px);}
    /* peek든 전체든 손잡이는 항상 떠있게(#mob-sheet-handle과 동일 패턴) — "끌 수 있다"는 걸 늘 알려줌 */
    #feed-overlay.open #feed-peek-handle{display:block;width:36px;height:4px;background:rgba(255,255,255,0.18);border-radius:2px;margin:10px auto 0;}
  }

  /* ── 자체 웹앱(홈화면 설치, standalone) 전용 상단 여백 ────────────────────────
     사파리 브라우저는 주소창 여백이 있어 괜찮은데, 홈화면에 추가한 자체 웹앱(black-translucent 상태바)에선
     콘텐츠가 상태바 밑까지 꽉 차 상단바가 타이트했음(2026-08-22 사용자 제보). display-mode:standalone은
     "설치된 웹앱일 때만" 걸리므로 사파리엔 영향 없음. env(safe-area-inset-top)은 그대로 쓰고 기본 여백만
     14→24px로 키워 상태바에 바짝 붙는 느낌을 완화. 이 규칙은 파일 끝(소스 순서 마지막)이라 위 #mob-top-bar
     패딩을 확실히 덮어씀. ⚠️ 실기기(홈화면 추가한 아이폰)에서 보고 아래 24px만 조정하면 됨. */
  @media (display-mode: standalone) and (max-width:768px){
    #mob-top-bar{padding-top:calc(24px + env(safe-area-inset-top,0px));}
    /* 시트(카드)도 같은 처리(2026-08-31 사용자 제보 — "웹앱에서 카드 열면 상단 핸들이랑 왼쪽 화살표가
       너무 위에 있어서 클릭할 수가 없다"). 2026-08-27에 --safe-top으로 위치는 맞춰뒀지만 **여유가 0**
       이었다 — 실측(인셋 47px 가정): 뒤로가기 버튼 top=48, 즉 상태바 경계에 딱 붙는다. iOS는 화면 최상단
       탭을 상태바가 먼저 먹기도 해서 "안 눌린다"가 된다.
       위 #mob-top-bar가 standalone에서 14→24px로 **+10px 여유**를 주는 것과 같은 폭으로 맞춘다.
       ⚠️ 변수 하나만 바꾼다 — 시트의 padding-top과 그 위 버튼들의 top이 **같은 --safe-top**을 보므로
          한쪽만 고치면 또 어긋난다(2026-08-27에 그렇게 깨졌던 지점). */
    :root{--safe-top:calc(env(safe-area-inset-top,0px) + 10px);}
  }

  /* ── 모션 줄이기(prefers-reduced-motion) ──────────────────────────────────────────
     OS에서 "동작 줄이기"를 켠 사용자에게 스스로 계속 움직이는 화면을 주지 않는다(2026-08-26).
     3D 우주의 자동회전·카메라 비행·리플은 index.html의 _reduceMotion 플래그가 처리하고,
     여기서는 CSS의 **끝없이 반복되는 장식성 애니메이션**만 끈다.
     ⚠️ 일부러 남기는 것들:
       ① 로딩 표시(스피너·시머·점 바운스) — 끄면 "멈춘 화면"으로 보여 오히려 사용성이 나빠진다.
       ② transition 전반 — 이 앱은 시트/카드 정리를 transitionend 타이밍에 의존하는 곳이 있어서
          일괄로 none을 주면 카드가 중간 상태로 고착될 수 있다. 실제로 과거에 시트 높이 고착
          버그가 반복됐던 지점이라 건드리지 않는다.
     즉 "움직임을 다 없애기"가 아니라 "이유 없이 계속 움직이는 것만 없애기"가 기준. */
  @media (prefers-reduced-motion: reduce){
    /* 주목 끌기용 반복 펄스 — 정보는 색/모양으로 이미 전달되므로 깜빡임만 제거 */
    #tab-feed.show-badge .tab-badge-dot,
    .presence-dot,
    .favcount-dot,
    .trace-dot,
    .fav-btn.fav-hint{ animation:none !important; }
    /* 고인 멤버 별 반짝임 — 추모 표현이지만 지속 깜빡임이라 정지(색은 그대로 유지) */
    .deceased-twinkle,
    [class*="deceased"]{ animation:none !important; }
    /* 제목 자동 흐름 — 탭하면 흐르는 별도 애니메이션(title-marquee-tap)이 있어 기능 손실 없음 */
    .marquee-run{ animation:none !important; }
    /* 라이트박스 스와이프 힌트·리플 — 순수 연출 */
    .lb-swipe-hint,
    [class*="lb-ripple"]{ animation:none !important; }
  }

  /* ── 라이트박스 하프시트(2026-08-26, 로드맵 P1-2) ────────────────────────────────
     재생 화면 상단의 멤버/그룹 이름을 누르면, 그 카드가 들어있는 시트를 라이트박스 위로 올리고
     높이를 절반으로 줄여 "다음 영상 목록만 가리는" 상태로 만든다. 영상은 계속 재생된다.
     ⚠️ z-index는 여기서 고정하지 않는다 — _bringToFront()가 런타임에 최상단으로 올린다
        (겹치는 레이어는 항상 최근 실행 화면이 위라는 프로젝트 규칙). */
  #mob-sheet.lb-half,#mob-card-stack.lb-half{
    bottom:0;                                   /* 라이트박스가 덮고 있어 탭바가 없다 */
    /* 52→55vh(2026-09-04): 영상은 상단 고정이라 하프시트가 낮으면 영상~시트 사이 배경 여백이 컸다.
       시트를 영상 바로 밑까지 살짝 올려 그 여백을 줄인다(영상 덮지 않게 보수적으로 +3vh). */
    min-height:55vh;max-height:55vh;
  }
  #mob-sheet.lb-half #mob-sheet-inner,
  #mob-card-stack.lb-half #mob-card-stack-inner{max-height:calc(55vh - 26px);}
  /* 영상 위 이름 칩 — 누를 수 있다는 걸 보여주되 툴바가 시끄러워지지 않게 밑줄만 은은하게 */
  /* 탭 영역은 세로로 넓히고(실측 17px → 44px 미만이라 누르기 어려웠음) 밑줄은 안쪽 span이 그린다 —
     버튼에 border-bottom을 두면 padding만큼 글자에서 떨어져 밑줄이 붕 뜬다(2026-08-27). */
  .lb-anchor-part{
    background:none;border:none;padding:12px 5px;margin:0;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;
    font:inherit;color:inherit;letter-spacing:inherit;line-height:1;vertical-align:middle;
    -webkit-tap-highlight-color:transparent;
  }
  .lb-anchor-label{border-bottom:1px solid rgba(255,255,255,0.28);padding-bottom:1px;}
  .lb-anchor-part:active .lb-anchor-label{color:#fff;border-bottom-color:rgba(255,255,255,0.7);}
  .lb-anchor-part:focus-visible{outline:2px solid rgba(150,180,255,0.85);outline-offset:2px;border-radius:3px;}
  .lb-anchor-sep{margin:0 5px;opacity:0.55;}
  /* "영상으로 돌아가기" — 손잡이 줄 오른쪽 끝(왼쪽은 카드 뒤로가기가 쓴다).
     하프시트일 때만 나타난다. 아래 방향 셰브런 = 시트를 내려 영상으로 복귀. */
  .sheet-tovid-btn{
    position:absolute;right:2px;top:0;width:44px;height:44px;z-index:3;
    display:none;align-items:flex-start;justify-content:center;
    background:none;border:none;margin:0;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;
    padding:6px 0 0;color:rgba(155,178,228,0.82);
    -webkit-tap-highlight-color:transparent;transition:color .15s;
  }
  #mob-sheet.lb-half>.sheet-tovid-btn,#mob-card-stack.lb-half>.sheet-tovid-btn{display:flex;}
  .sheet-tovid-btn>svg{display:block;width:20px;height:20px;}
  .sheet-tovid-btn:active{color:rgba(210,228,255,0.95);}
  .sheet-tovid-btn:focus-visible{outline:2px solid rgba(150,180,255,0.8);outline-offset:-4px;border-radius:10px;}
  /* "카드 크게 보기"(▲) — 손잡이 줄 왼쪽 끝. 반열림(lb-half)이고 아직 꽉 차지 않았을 때만 뜬다
     (꽉 차면 더 커질 게 없으니 숨김). 오른쪽 '영상으로'(▼)와 위/아래 한 쌍. 2026-09-13 사용자 요청. */
  .sheet-expand-btn{
    position:absolute;left:2px;top:0;width:44px;height:44px;z-index:3;
    display:none;align-items:flex-start;justify-content:center;
    background:none;border:none;margin:0;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-family:inherit;
    padding:6px 0 0;color:rgba(155,178,228,0.82);
    -webkit-tap-highlight-color:transparent;transition:color .15s;
  }
  #mob-sheet.lb-half:not(.bs-full)>.sheet-expand-btn,
  #mob-card-stack.lb-half:not(.bs-full)>.sheet-expand-btn{display:flex;}
  /* '이전 카드로'(.sheet-back-btn.on)도 왼쪽 끝을 쓰므로, 둘 다 있으면 크게보기를 그 옆으로 민다
     (DOM에서 expand가 back보다 뒤라 ~ 선택자가 먹는다). */
  .sheet-back-btn.on~.sheet-expand-btn{left:46px;}
  .sheet-expand-btn>svg{display:block;width:20px;height:20px;}
  .sheet-expand-btn:active{color:rgba(210,228,255,0.95);}
  .sheet-expand-btn:focus-visible{outline:2px solid rgba(150,180,255,0.8);outline-offset:-4px;border-radius:10px;}
  /* ⚠️ 재생 중(lb-half)엔 lb-half(55vh, 소스상 뒤라 우선순위 승)가 bs-full을 덮어써서, 예전엔 스와이프로
     올려도 실제론 안 커졌다(잠재 버그). lb-half.bs-full 결합 규칙으로 "재생 중에도 꽉 차게" 만든다 —
     ▲버튼과 스와이프업 둘 다 이걸로 동작. lb-half는 bottom:0(탭바 없음)이라 전체 높이로 채운다. */
  #mob-sheet.lb-half.bs-full,#mob-card-stack.lb-half.bs-full{
    min-height:var(--mob-vh,100vh);max-height:var(--mob-vh,100vh);
    border-radius:0;box-sizing:border-box;padding-top:var(--safe-top);
  }
  #mob-sheet.lb-half.bs-full #mob-sheet-inner,
  #mob-card-stack.lb-half.bs-full #mob-card-stack-inner{
    max-height:calc(var(--mob-vh,100vh) - 24px - var(--safe-top));
  }
  /* 절전 모드 설정 행(2026-08-26, P1-3) — 라벨+세그먼트 한 줄, 그 아래 현재 상태 설명 한 줄.
     자동이 기본이라 "지금 절전 중인지"를 글로 알려줘야 사용자가 상태를 안다. */
  .sp-row.sp-row-col{flex-direction:column;align-items:stretch;gap:6px;}
  .sp-row.sp-row-col .sp-row-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .sp-row.sp-row-col .sp-sub{font-size:12px;line-height:1.45;color:rgba(155,178,228,0.62);}

  /* 연결 즐겨찾기(2026-08-26) — 앵커 + 연결된 멤버의 프로필 사진을 살짝 겹쳐 보여준다.
     "연결"이라는 게 사람과 사람 사이의 일이라, 사진 하나만 있으면 무엇과의 연결인지 안 보인다.
     겹침은 원 지름의 약 1/3(-12px)만 — 더 겹치면 얼굴이 가려지고 덜 겹치면 목록이 옆으로 길어진다.
     테두리를 배경색으로 둘러 원끼리 경계가 분명하게 보이도록 한다. */
  .fav-avatar-stack{display:flex;align-items:center;flex-shrink:0;}
  .fav-avatar-stack .fav-avatar{border:2px solid #0d1226;box-sizing:border-box;}
  .fav-avatar-stack .fav-avatar+.fav-avatar{margin-left:-12px;}
  /* 뒤쪽 원이 앞쪽 위로 올라오지 않게 — 왼쪽이 위에 오도록 쌓는다(읽는 방향과 같게) */
  .fav-avatar-stack .fav-avatar:nth-child(1){z-index:3;}
  .fav-avatar-stack .fav-avatar:nth-child(2){z-index:2;}
  .fav-avatar-stack .fav-avatar:nth-child(3){z-index:1;}
  .fav-avatar-stack .fav-avatar-more{
    display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:600;color:rgba(210,225,255,0.9);
    background:rgba(30,38,66,0.96);
  }

  /* ── 공연 추가 폼(#ev-overlay) — 관리자 전용. gp-overlay(81)와 같은 층. 설정 패널에서 열리고
        그 위엔 아무것도 안 뜨므로 vid-tag(82)보다 낮게 둔다(2026-08-28). ── */
  #ev-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.52);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:81;display:none;align-items:center;justify-content:center;}
  #ev-overlay.open{display:flex;}
  #ev-panel{width:min(380px,calc(100vw - 32px));max-height:86vh;overflow-y:auto;background:rgba(13,17,34,0.97);backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border-radius:18px;box-shadow:0 16px 56px rgba(0,0,0,0.72);border:0.5px solid rgba(255,255,255,0.10);padding:20px;font-family:'Pretendard','Apple SD Gothic Neo',sans-serif;}
  #ev-panel .pp-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
  #ev-close{background:none;border:none;color:rgba(155,178,228,0.6);font-size:15px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:0 2px;line-height:1;}
  #ev-close:hover{color:rgba(210,225,255,0.9);}
  #ev-panel .pp-section{margin-bottom:14px;}
  .ev-row{display:flex;gap:10px;}
  .ev-hint-inline{font-weight:400;letter-spacing:0;text-transform:none;color:rgba(126,150,204,0.45);font-size:10px;margin-left:4px;}
  .ev-warn{font-size:11px;color:rgba(255,190,120,0.9);margin-top:5px;line-height:1.45;}
  .ev-warn:empty{display:none;}
  #ev-who-results{margin-top:4px;max-height:150px;overflow-y:auto;border-radius:10px;background:rgba(255,255,255,0.04);}
  #ev-who-results:empty{display:none;}
  .ev-res{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:7px 10px;background:none;border:none;font-family:inherit;text-align:left;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}
  .ev-res:hover{background:rgba(255,255,255,0.08);}
  .ev-res b{font-size:12px;font-weight:600;color:rgba(220,230,250,0.9);}
  .ev-res span{font-size:11px;color:rgba(126,150,204,0.6);}
  #ev-who-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
  #ev-who-chips:empty{display:none;}
  .ev-chip{display:flex;align-items:center;gap:5px;font-size:12px;color:rgba(220,230,250,0.9);background:rgba(109,140,255,0.16);border:0.5px solid rgba(109,140,255,0.35);border-radius:20px;padding:4px 10px 4px 12px;}
  .ev-chip button{background:none;border:none;color:rgba(220,230,250,0.7);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;font-size:12px;padding:0;line-height:1;}
  #ev-status{font-size:12px;color:rgba(155,178,228,0.7);margin-top:10px;min-height:14px;}
  #ev-status.ev-ok{color:rgba(130,220,175,0.9);}
  #ev-status.ev-err{color:rgba(255,140,140,0.9);}
  #ev-btns{display:flex;gap:8px;margin-top:14px;}
  #ev-recent{margin-top:16px;}
  #ev-recent:empty{display:none;}
  .ev-recent-head{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(126,150,204,0.5);margin-bottom:7px;padding-top:14px;border-top:0.5px solid rgba(255,255,255,0.07);}
  .ev-recent-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:rgba(185,205,245,0.72);padding:5px 0;}
  .ev-recent-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .ev-recent-row button{flex:none;background:none;border:none;color:rgba(255,150,150,0.75);font-family:inherit;font-size:11px;cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;padding:0;text-decoration:underline;}
  /* 날짜 입력의 네이티브 달력 아이콘이 어두운 배경에서 안 보여서 반전시킨다. */
  #ev-panel input[type=date]::-webkit-calendar-picker-indicator{filter:invert(0.7);cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M11,1 L12.3,9.7 L21,11 L12.3,12.3 L11,21 L9.7,12.3 L1,11 L9.7,9.7Z' fill='%23FFB0D0' opacity='.97'/></svg>") 11 11,pointer;}

/* ── Film grain overlay (전체 앱 배경 텍스처) ──────────────────────── */
#grain-overlay{
  position:fixed;inset:0;pointer-events:none;z-index:9998;
  opacity:0.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.70' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:220px 220px;
}
/* ── 멤버 탐색 오버레이 ───────────────────────────────────────────────────── */
#mx-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.72);display:flex;align-items:flex-end;justify-content:center;visibility:hidden;opacity:0;transition:opacity 0.2s,visibility 0.2s;}
#mx-overlay.open{visibility:visible;opacity:1;}
#mx-panel{width:100%;max-height:93dvh;background:#0e0e12;border-radius:18px 18px 0 0;display:flex;flex-direction:column;overflow:hidden;transform:translateY(40px);transition:transform 0.25s cubic-bezier(0.32,0.72,0,1);}
#mx-overlay.open #mx-panel{transform:translateY(0);}
@media(min-width:768px){
  #mx-overlay{align-items:center;}
  #mx-panel{width:min(940px,94vw);max-height:88dvh;border-radius:18px;}
}
.mx-hd{display:flex;align-items:center;padding:15px 20px 10px;border-bottom:1px solid rgba(255,255,255,0.07);flex-shrink:0;}
.mx-title{font-size:16px;font-weight:600;color:#fff;flex:1;}
#mx-close{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.1);border:none;color:rgba(255,255,255,0.75);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.mx-filter-area{padding:12px 14px 10px;border-bottom:1px solid rgba(255,255,255,0.07);flex-shrink:0;display:flex;flex-direction:column;gap:9px;}
.mx-search{width:100%;box-sizing:border-box;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.11);border-radius:10px;color:#fff;font-size:14px;padding:9px 13px;outline:none;transition:border-color 0.15s;}
.mx-search:focus{border-color:rgba(130,170,255,0.45);background:rgba(255,255,255,0.1);}
.mx-search::placeholder{color:rgba(255,255,255,0.3);}
.mx-chips{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.mx-chip-lbl{font-size:10px;color:rgba(255,255,255,0.38);margin-right:2px;white-space:nowrap;}
.mx-chip{padding:5px 11px;border-radius:20px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.55);font-size:12px;cursor:pointer;transition:background 0.13s,border-color 0.13s,color 0.13s;white-space:nowrap;}
.mx-chip.active{background:rgba(110,155,255,0.18);border-color:rgba(120,165,255,0.45);color:rgba(170,205,255,0.95);}
.mx-result-bar{padding:6px 16px 4px;display:flex;align-items:center;flex-shrink:0;}
.mx-count{font-size:11px;color:rgba(255,255,255,0.35);}
#mx-grid{flex:1;overflow-y:auto;padding:10px 10px 28px;display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;align-content:start;}
@media(min-width:480px){#mx-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px;}}
@media(min-width:768px){#mx-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;padding:12px 14px 32px;}}
.mx-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:12px 8px 10px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;transition:background 0.14s,transform 0.1s;text-align:center;}
.mx-card:hover{background:rgba(255,255,255,0.09);transform:translateY(-2px);}
.mx-card:active{transform:scale(0.96);}
.mx-card-av{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.mx-card-av-letter{font-size:20px;font-weight:700;color:rgba(0,0,0,0.45);}
.mx-card-av img{width:100%;height:100%;object-fit:cover;}
.mx-card-name{font-size:12px;font-weight:600;color:#fff;line-height:1.3;word-break:keep-all;}
.mx-card-group{font-size:10px;color:rgba(255,255,255,0.45);word-break:keep-all;}
.mx-card-meta{font-size:10px;color:rgba(255,255,255,0.35);}
.mx-empty{grid-column:1/-1;text-align:center;color:rgba(255,255,255,0.3);padding:48px 20px;font-size:14px;}
.mx-feed-btn{width:100%;display:flex;align-items:center;gap:14px;padding:13px 16px;background:rgba(100,150,255,0.07);border:1px solid rgba(100,150,255,0.18);border-radius:14px;cursor:pointer;text-align:left;transition:background 0.14s;}
.mx-feed-btn:hover{background:rgba(100,150,255,0.13);}
.mx-feed-icon{font-size:20px;flex-shrink:0;}
.mx-feed-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;}
.mx-feed-ttl{font-size:13px;font-weight:600;color:rgba(190,215,255,0.95);}
.mx-feed-sub{font-size:11px;color:rgba(160,185,255,0.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mx-feed-arr{font-size:18px;color:rgba(255,255,255,0.25);flex-shrink:0;}