/* app2.css — viewer2/account2 시네마틱 다크 리스킨. 원본 styles.css 토큰만 교체(셀렉터 100% 동일). */
:root {
  --bg:#050507; --bg-2:#0a0a0c; --bg-3:#0e0f13;
  --fg:#f5f5f2; --muted:#a8a9ad; --faint:#6c6d72;
  --line:rgba(245,245,242,.10); --line-2:rgba(245,245,242,.18);
  --accent:#7fb4ff; --glow:#dceeff;
  --glow-ring:0 0 0 1px rgba(220,238,255,.55), 0 0 24px rgba(127,180,255,.35), 0 0 64px rgba(127,180,255,.18);
  --glow-ring-soft:0 0 0 1px rgba(220,238,255,.22), 0 0 18px rgba(127,180,255,.14);
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,"Times New Roman",serif;
  --gap:2px;
}
* { box-sizing: border-box; }
html,body { margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Apple SD Gothic Neo","Noto Sans KR",sans-serif; }

/* FE-5: nowrap이라 좁은 폭에서 툴바가 가로로 넘쳐 오른쪽 버튼(Split/Select/New Gallery)이 잘리던 문제.
   wrap 허용 → 안 들어가면 아래 줄로 접혀 모든 버튼이 보이고 눌린다. */
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; flex-wrap:wrap; gap:12px; row-gap:8px;
  padding:10px 14px; background:rgba(5,5,7,.78); backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid var(--line); }
/* FE-5: 워드마크를 메인('/')으로 가는 링크로. 기존 시각 스타일 유지(밑줄 없음), hover만 살짝. */
.title { display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:600; font-family:var(--serif); letter-spacing:-.01em; color:inherit; text-decoration:none; cursor:pointer; transition:color .2s; }
.title svg { width:20px; height:20px; flex:none; }
.title:hover { color:var(--glow); }
.seglbl { font-size:11px; color:var(--muted); flex:none; font-variant-caps:all-small-caps; letter-spacing:.08em; text-transform:uppercase; }
.count { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.spacer { flex:1; }
.seg { display:inline-flex; flex:none; background:var(--bg-3); border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.seg button { background:transparent; color:var(--muted); border:0; padding:6px 14px; font-size:12px; white-space:nowrap; cursor:pointer; transition:background .2s,color .2s; }
.seg button.active { background:rgba(245,245,242,.08); color:var(--fg); box-shadow:inset 0 0 0 1px var(--line-2); }
.actions { display:flex; flex-wrap:wrap; gap:6px; }
.abtn { background:var(--bg-3); color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-size:12px; cursor:pointer; white-space:nowrap; transition:border-color .2s, color .2s, box-shadow .25s; }
.abtn:hover { border-color:var(--line-2); color:var(--fg); box-shadow:var(--glow-ring-soft); }
.abtn.on { background:var(--fg); border-color:var(--fg); color:#08080a; box-shadow:var(--glow-ring); }
#addBtn { background:var(--fg); border-color:var(--fg); color:#08080a; }
#addBtn:hover { box-shadow:var(--glow-ring); }
#modeBtn.on { background:var(--fg); border-color:var(--fg); color:#08080a; box-shadow:var(--glow-ring); }
@media (max-width:560px){ .topbar { gap:8px; padding:8px 10px; flex-wrap:wrap; } .title { font-size:14px; } .count,.seglbl { display:none; } .seg button { padding:5px 9px; } .abtn { padding:6px 10px; } }

/* 드롭존 / 빈 상태 */
.dropzone { display:none; margin:24px 14px; border:1px solid var(--line-2); border-radius:var(--radius,16px);
  background:var(--bg-3);
  min-height:46vh; align-items:center; justify-content:center; text-align:center; cursor:pointer; transition:border-color .25s, box-shadow .35s; }
.dropzone.show { display:flex; }
.dropzone:hover, .dropzone.drag { border-color:var(--accent); box-shadow:var(--glow-ring-soft); }
.dz-inner { padding:30px; max-width:560px; }
.dz-icon { font-size:40px; filter:grayscale(1) brightness(1.4); }
.dz-title { font-size:18px; font-weight:600; margin-top:10px; font-family:var(--serif); }
.dz-sub { font-size:13px; color:var(--muted); margin-top:8px; line-height:1.5; }
.dz-hint { color:var(--faint); font-size:12px; margin-top:6px; }
/* 화면 전체 드래그 오버레이 */
body.dragging::after { content:"여기에 놓으세요"; position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:600; font-family:var(--serif); color:var(--fg); background:rgba(5,5,7,.7); border:1px solid var(--accent); box-shadow:var(--glow-ring); pointer-events:none; }

/* JS 마소너리 격자 */
.grid { position:relative; width:100%; }
.tile { position:absolute; top:0; left:0; overflow:hidden; background:var(--bg-3); cursor:pointer; will-change:transform; border-radius:2px; }
.tile img, .tile video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* A1.5: 미리보기 video는 첫 프레임이 디코드될 때까지(loadeddata→preview-playing) 투명 — 그 사이엔
   아래 포스터 img가 그대로 보여 검은 화면/깜빡임 없이 자연스럽게 전환된다. */
.tile video.preview { z-index:1; opacity:0; transition:opacity .15s ease; }
.tile.preview-playing video.preview { opacity:1; }
.badge { position:absolute; z-index:3; top:6px; right:6px; display:flex; align-items:center; gap:3px;
  background:rgba(5,5,7,.65); color:var(--fg); font-size:10px; font-weight:600; padding:2px 7px; border-radius:999px; border:1px solid var(--line); }
.badge svg { width:11px; height:11px; }
/* 타일 백그라운드 저장 상태 표시 */
.tile .status { position:absolute; z-index:3; top:6px; left:6px; display:none; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:999px; background:rgba(5,5,7,.7); color:var(--fg); }
.tile.st-uploading .status, .tile.st-error .status { display:flex; }
.tile.st-error .status { background:rgba(220,38,38,.92); cursor:pointer; }
.tile .status .retry { font-size:14px; line-height:1; }
.tile.st-uploading { outline:1px solid rgba(127,180,255,.4); }
.status .spin { width:14px; height:14px; animation:spin 0.8s linear infinite; }
.status .spin circle { fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-dasharray:42; stroke-dashoffset:30; opacity:.9; }
@keyframes spin { to { transform:rotate(360deg); } }

/* 라이트박스 */
.lb { position:fixed; inset:0; z-index:50; background:rgba(2,2,3,.96); display:flex; align-items:center; justify-content:center; }
.lb.hidden { display:none; }
.lb-stage { max-width:94vw; max-height:86vh; display:flex; align-items:center; justify-content:center; }
.lb-stage img, .lb-stage video { max-width:94vw; max-height:86vh; border-radius:8px; object-fit:contain; background:#000; }
/* 이미지 줌(클릭 토글) */
.lb-stage img { cursor:default; }
.lb-stage.zoomed { overflow:auto; width:94vw; height:86vh; align-items:flex-start; justify-content:flex-start; }
.lb-stage.zoomed img { max-width:none; max-height:none; width:auto; height:auto; cursor:zoom-out; object-fit:initial; border-radius:0; }
.lb-meta { position:absolute; bottom:14px; left:0; right:0; text-align:center; font-size:12px; color:var(--muted); pointer-events:none; }
.lb-close { position:absolute; top:12px; right:16px; z-index:2; }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:2; font-size:34px; line-height:1; }
.lb-prev { left:10px; } .lb-next { right:10px; }
.lb button { background:rgba(245,245,242,.06); color:var(--fg); border:1px solid var(--line-2); border-radius:999px; min-width:44px; height:44px; cursor:pointer; font-size:18px; transition:box-shadow .25s, background .2s; }
.lb button:hover { background:rgba(245,245,242,.12); box-shadow:var(--glow-ring-soft); }
/* A2: 라이트박스 재생 품질 토글(경량 /play ↔ 원본 /media) — 영상일 때만 표시 */
.lb-hd { position:absolute; top:12px; right:70px; z-index:2; min-width:auto; width:auto; padding:0 14px; font-size:13px; font-weight:700; letter-spacing:.02em; }
.lb-hd.on { background:var(--fg); color:#0b0c0e; }
.lb-hd.hidden { display:none; }

/* ===== 격자 크기 조절(오른쪽 아래 반투명, 상하 배치) ===== */
.zoom { position:fixed; right:16px; bottom:16px; z-index:40; display:flex; flex-direction:column; align-items:stretch; gap:6px;
  padding:7px; border-radius:18px; background:rgba(14,15,19,.7); border:1px solid var(--line-2);
  backdrop-filter:blur(10px); box-shadow:0 6px 24px rgba(0,0,0,.5); }
.zoom .zbtn { width:52px; height:52px; border-radius:14px; border:0; cursor:pointer;
  background:rgba(245,245,242,.08); color:var(--fg); font-size:26px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .15s, box-shadow .25s; }
.zoom .zbtn:hover { background:rgba(245,245,242,.16); box-shadow:var(--glow-ring-soft); }
.zoom .zbtn:disabled { opacity:.35; cursor:default; }
.zoom .zlevel { width:52px; height:34px; border:0; border-radius:10px; cursor:pointer;
  background:rgba(245,245,242,.05); color:var(--muted); font:inherit; font-size:13px; font-weight:700;
  font-variant-numeric:tabular-nums; user-select:none; transition:background .15s; }
.zoom .zlevel:hover { background:rgba(245,245,242,.14); color:var(--fg); }
/* 랜덤/초기화: 자유 배치 모드에서만 노출 */
.zoom .zextra { display:none; height:40px; padding:0 10px; border:0; border-radius:12px; cursor:pointer;
  background:rgba(245,245,242,.08); color:var(--fg); font:inherit; font-size:13px; font-weight:600; white-space:nowrap;
  align-items:center; justify-content:center; transition:background .15s, box-shadow .25s; }
.zoom .zextra:hover { box-shadow:var(--glow-ring-soft); }
body.free .zoom .zextra { display:flex; }
@media (max-width:560px){ .zoom { right:10px; bottom:10px; } .zoom .zbtn { width:56px; height:56px; } }

/* ===== 초기 로딩 오버레이 ===== */
.loading { position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center;
  background:rgba(5,5,7,.6); backdrop-filter:blur(4px); }
.loading.hidden { display:none; }
.loading-card { width:min(86vw,320px); padding:24px 26px; border-radius:16px;
  background:var(--bg-3); border:1px solid var(--line-2); box-shadow:0 20px 60px rgba(0,0,0,.6), var(--glow-ring-soft); text-align:center; }
.loading-title { font-size:15px; font-weight:600; color:var(--fg); font-family:var(--serif); }
.loading-sub { font-size:12px; color:var(--muted); margin-top:10px; min-height:15px; }
.loading-bar { height:6px; border-radius:999px; background:rgba(245,245,242,.08); overflow:hidden; margin-top:16px; position:relative; }
.loading-bar i { position:absolute; top:0; left:0; height:100%; width:40%; border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent); animation:load-slide 1.1s ease-in-out infinite; }
@keyframes load-slide { 0%{ left:-40%; } 100%{ left:100%; } }

/* ===== 자유 배치 모드 (GridStack) ===== */
#freegrid[hidden] { display:none !important; }
body.free .grid { display:none; }              /* 메이슨리 격자 숨김 */
.grid-stack { background:transparent; margin:8px 6px; }
.grid-stack-item-content {
  overflow:hidden; border-radius:3px; background:var(--bg-3); outline:1px solid var(--line);
}
.grid-stack-item-content img, .grid-stack-item-content video {
  width:100%; height:100%; object-fit:cover; display:block;
}
.grid-stack-item-content video.preview { position:absolute; inset:0; z-index:1; opacity:0; transition:opacity .15s ease; }
.grid-stack-item-content.preview-playing video.preview { opacity:1; }
/* 이동 핸들(좌상단 반투명 십자) */
.move-handle {
  position:absolute; z-index:7; top:6px; left:6px; width:30px; height:30px; border-radius:8px;
  background:rgba(5,5,7,.6); color:var(--fg); display:flex; align-items:center; justify-content:center;
  cursor:move; font-size:16px; line-height:1; opacity:.75; transition:opacity .15s, box-shadow .25s;
  -webkit-user-select:none; user-select:none; touch-action:none;
}
.move-handle:hover { opacity:1; box-shadow:var(--glow-ring-soft); }
/* 리사이즈 핸들(우하단) 가시화 */
.grid-stack-item > .ui-resizable-se {
  width:20px; height:20px; right:5px; bottom:5px; z-index:7;
  background:rgba(5,5,7,.6); border-right:2px solid rgba(245,245,242,.8); border-bottom:2px solid rgba(245,245,242,.8);
  border-radius:0 0 6px 0; cursor:se-resize;
}
.grid-stack-item > .ui-resizable-se:hover { box-shadow:var(--glow-ring-soft); }
/* 라이트박스가 열려 있는 동안엔 그리드 핸들을 숨긴다 — 사진 위로 뚫고 올라오거나 눌리는 것 방지 */
body.lb-open .move-handle,
body.lb-open .grid-stack-item > .ui-resizable-se { display:none !important; }
/* 드래그/리사이즈 시 들어갈 자리(자석 가이드) */
.grid-stack > .grid-stack-placeholder > .placeholder-content {
  background:rgba(127,180,255,.12); border:1px dashed var(--accent); border-radius:4px;
}

/* ===== 정렬 / 범위 필터 드롭다운 ===== */
.sort-wrap { position:relative; display:inline-flex; flex:none; }
.sort-panel { display:none; position:absolute; top:calc(100% + 8px); left:0; width:248px;
  flex-direction:column; gap:14px; background:rgba(14,15,19,.97); border:1px solid var(--line-2);
  border-radius:14px; padding:14px; z-index:60; box-shadow:0 10px 36px rgba(0,0,0,.65), var(--glow-ring-soft); backdrop-filter:blur(12px); }
.sort-panel.show { display:flex; }
.sp-label { font-size:11px; color:var(--muted); margin-bottom:7px; font-variant-caps:all-small-caps; letter-spacing:.08em; text-transform:uppercase; }
.sp-seg { display:flex; flex-wrap:wrap; background:var(--bg-3); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.sp-seg button { flex:1 0 40%; background:transparent; color:var(--muted); border:0; padding:7px 8px;
  font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
.sp-seg button.active { background:rgba(245,245,242,.08); color:var(--fg); }
.sp-dir { margin-top:8px; width:100%; background:var(--bg-3); border:1px solid var(--line); border-radius:8px;
  color:var(--muted); padding:7px; font:inherit; font-size:12px; cursor:pointer; }
.sp-dir:hover { border-color:var(--line-2); color:var(--fg); }
.sp-range { display:flex; align-items:center; gap:8px; }
.sp-range input { flex:1; min-width:0; background:var(--bg); border:1px solid var(--line); border-radius:8px;
  color:var(--fg); padding:7px 9px; font:inherit; font-size:12px; }
.sp-range input:focus { outline:none; border-color:var(--accent); box-shadow:var(--glow-ring-soft); }
.sp-range span { color:var(--muted); }
.sp-actions { display:flex; gap:8px; }
.sp-actions button { flex:1; border-radius:8px; border:1px solid var(--line); background:var(--bg-3); color:var(--muted);
  padding:8px; font:inherit; font-size:12px; cursor:pointer; }
.sp-actions button.primary { background:var(--fg); border-color:var(--fg); color:#08080a; }
.sp-actions button:hover { border-color:var(--line-2); color:var(--fg); }
.sp-actions button.primary:hover { box-shadow:var(--glow-ring); }
#sortBtn.on { background:var(--fg); border-color:var(--fg); color:#08080a; box-shadow:var(--glow-ring); }

/* ===== 분할 보기 ===== */
.split-wrap { position:relative; display:inline-flex; }
.split-picker { display:none; position:absolute; top:calc(100% + 8px); right:0; min-width:120px;
  flex-direction:column; background:rgba(14,15,19,.97); border:1px solid var(--line-2); border-radius:12px;
  padding:6px; gap:2px; z-index:60; box-shadow:0 10px 36px rgba(0,0,0,.65), var(--glow-ring-soft); backdrop-filter:blur(12px); }
.split-picker.show { display:flex; }
.split-opt { background:transparent; border:0; border-radius:8px; text-align:left;
  padding:9px 14px; cursor:pointer; color:var(--muted); font:inherit; font-size:13px; white-space:nowrap;
  transition:background .12s, color .12s; }
.split-opt:hover { background:rgba(245,245,242,.08); color:var(--fg); }

/* 선택 중 배너 (화면 하단 중앙) */
.split-banner { display:none; position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:45; background:rgba(14,15,19,.96); border:1px solid var(--line-2);
  border-radius:999px; padding:10px 14px 10px 20px; gap:14px;
  align-items:center; font-size:13px; color:var(--fg);
  backdrop-filter:blur(12px); box-shadow:0 8px 32px rgba(0,0,0,.6), var(--glow-ring-soft); white-space:nowrap; }
.split-banner.show { display:flex; }
#splitCancelBtn { background:rgba(245,245,242,.08); border:1px solid var(--line-2); border-radius:999px;
  color:var(--muted); padding:5px 14px; font:inherit; font-size:12px; cursor:pointer; }
#splitCancelBtn:hover { background:rgba(220,38,38,.55); border-color:#dc2626; color:#fff; }

/* 분할 선택 중: 타일 커서 및 호버 강조 */
body.split-selecting .tile { cursor:pointer; }
body.split-selecting .tile:hover { outline:2px solid var(--accent) !important; outline-offset:-2px; box-shadow:var(--glow-ring); }
body.split-selecting .grid-stack-item:hover .grid-stack-item-content { outline:2px solid var(--accent); outline-offset:-2px; }

/* 선택 번호 뱃지 (타일 중앙 원형) */
.split-num { display:none; position:absolute; inset:0; z-index:6; align-items:center; justify-content:center;
  background:rgba(2,2,3,.45); pointer-events:none; }
.tile.split-picked .split-num,
.grid-stack-item.split-picked .split-num { display:flex; }
.split-num em { width:44px; height:44px; border-radius:50%; background:var(--fg); color:#08080a;
  font-size:20px; font-weight:700; font-style:normal;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--glow-ring); }

/* ---- 익명 업로드 → 계정 임포트 배너 (opt-in, 2026-07-02) ---- */
/* 로그인 직후 이 브라우저에 익명 업로드가 있으면 상단에 뜨는 dismissible 배너. split-banner와
   같은 톤이되, 화면 상단(topbar 아래)에 고정 — 항상 눈에 띄지만 그리드 작업을 가리지 않는다. */
.import-banner { display:none; position:fixed; top:64px; left:50%; transform:translateX(-50%);
  z-index:44; background:rgba(14,15,19,.96); border:1px solid var(--line-2);
  border-radius:999px; padding:10px 14px 10px 20px; gap:12px;
  align-items:center; font-size:13px; color:var(--fg);
  backdrop-filter:blur(12px); box-shadow:0 8px 32px rgba(0,0,0,.6), var(--glow-ring-soft);
  max-width:calc(100vw - 32px); }
.import-banner.show { display:flex; }
.import-banner .ib-import { background:linear-gradient(180deg,#a9cdff,#7db4ff); border:none; border-radius:999px;
  color:#06121f; padding:6px 16px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.import-banner .ib-import:disabled { opacity:.45; cursor:default; }
.import-banner .ib-dismiss { background:rgba(245,245,242,.08); border:1px solid var(--line-2); border-radius:999px;
  color:var(--muted); padding:5px 14px; font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
.import-banner .ib-dismiss:hover { background:rgba(245,245,242,.16); color:var(--fg); }
@media (max-width: 640px) {
  .import-banner { flex-wrap:wrap; border-radius:16px; padding:12px 14px; white-space:normal; }
}

/* ---- 비로그인 업로드 안내 배너 (익명 전용, 2026-07-24) ---- */
/* 로그인 안 한(익명) 사용자가 그리드에 올린 파일은 15일 뒤 자동 삭제된다는 안내. import-banner와
   같은 톤/위치(topbar 아래 고정)지만 둘은 상호배타 — import-banner=로그인 상태에서만, 이건
   비로그인 상태에서만 뜬다(=/api/auth/me 의 user 로 판정). 그리드에 항목이 있을 때만 노출해
   빈 상태 드롭존 힌트와 중복되지 않게 한다. */
.anon-notice { display:none; position:fixed; top:64px; left:50%; transform:translateX(-50%);
  z-index:44; background:rgba(14,15,19,.96); border:1px solid var(--line-2);
  border-radius:999px; padding:10px 14px 10px 20px; gap:12px;
  align-items:center; font-size:13px; color:var(--fg);
  backdrop-filter:blur(12px); box-shadow:0 8px 32px rgba(0,0,0,.6), var(--glow-ring-soft);
  max-width:calc(100vw - 32px); }
.anon-notice.show { display:flex; }
.anon-notice #anonNoticeText { min-width:0; }
.anon-notice .an-cta { background:linear-gradient(180deg,#a9cdff,#7db4ff); border:none; border-radius:999px;
  color:#06121f; padding:6px 16px; font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  white-space:nowrap; text-decoration:none; }
.anon-notice .an-dismiss { background:rgba(245,245,242,.08); border:1px solid var(--line-2); border-radius:999px;
  color:var(--muted); padding:5px 14px; font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
.anon-notice .an-dismiss:hover { background:rgba(245,245,242,.16); color:var(--fg); }
@media (max-width: 640px) {
  .anon-notice { flex-wrap:wrap; border-radius:16px; padding:12px 14px; white-space:normal; }
}

/* ---- 공유(opt-in share) 선택 UI ---- */
/* 선택 중 배너(split-banner 재사용 스타일) */
.share-banner { display:none; position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:46; background:rgba(14,15,19,.96); border:1px solid var(--line-2);
  border-radius:999px; padding:10px 12px 10px 20px; gap:12px;
  align-items:center; font-size:13px; color:var(--fg);
  backdrop-filter:blur(12px); box-shadow:0 8px 32px rgba(0,0,0,.6), var(--glow-ring-soft); white-space:nowrap; }
.share-banner.show { display:flex; }
.share-banner .sb-make { background:linear-gradient(180deg,#a9cdff,#7db4ff); border:none; border-radius:999px;
  color:#06121f; padding:6px 16px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.share-banner .sb-make:disabled { opacity:.45; cursor:default; }
.share-banner .sb-dl { background:rgba(245,245,242,.10); border:1px solid var(--line-2); border-radius:999px;
  color:var(--fg); padding:5px 14px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.share-banner .sb-dl:hover { background:rgba(245,245,242,.20); }
.share-banner .sb-dl:disabled { opacity:.45; cursor:default; }
.share-banner .sb-move { background:rgba(245,245,242,.10); border:1px solid var(--line-2); border-radius:999px;
  color:var(--fg); padding:5px 14px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.share-banner .sb-move:hover { background:rgba(245,245,242,.20); }
.share-banner .sb-move:disabled { opacity:.45; cursor:default; }
.share-banner .sb-del { background:rgba(220,38,38,.16); border:1px solid rgba(220,38,38,.5); border-radius:999px;
  color:#ffb4b4; padding:5px 14px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.share-banner .sb-del:hover { background:rgba(220,38,38,.7); border-color:#dc2626; color:#fff; }
.share-banner .sb-del:disabled { opacity:.45; cursor:default; }
.share-banner .sb-cancel { background:rgba(245,245,242,.08); border:1px solid var(--line-2); border-radius:999px;
  color:var(--muted); padding:5px 14px; font:inherit; font-size:12px; cursor:pointer; }
.share-banner .sb-cancel:hover { background:rgba(245,245,242,.16); color:var(--fg); }

/* 드래그(러버밴드) 다중 선택 박스 */
.select-box { position:fixed; z-index:45; border:1.5px solid var(--accent);
  background:rgba(125,180,255,.16); border-radius:4px; pointer-events:none; }
body.marquee-on { user-select:none; -webkit-user-select:none; cursor:crosshair; }
body.marquee-on .tile, body.marquee-on .tile img { cursor:crosshair; }

/* 공유 선택 중: 타일 커서/호버 강조 + 선택 체크 */
body.share-selecting .tile { cursor:pointer; }
body.share-selecting .tile:hover { outline:2px solid var(--accent) !important; outline-offset:-2px; box-shadow:var(--glow-ring); }
.tile.share-picked { outline:3px solid var(--accent) !important; outline-offset:-3px; }
.tile.share-picked::after { content:"✓"; position:absolute; top:8px; left:8px; z-index:7;
  width:26px; height:26px; border-radius:50%; background:var(--accent); color:#06121f;
  font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:var(--glow-ring); }

/* 공유 결과 모달 */
.share-modal { display:none; position:fixed; inset:0; z-index:60; background:rgba(2,2,3,.72);
  align-items:center; justify-content:center; padding:24px; }
.share-modal.show { display:flex; }
.share-modal .sm-card { width:min(480px,94vw); background:var(--panel,#0e0e12); border:1px solid var(--line-2);
  border-radius:16px; padding:24px; box-shadow:0 30px 80px -20px #000; }
.share-modal h3 { margin:0 0 6px; font-size:18px; color:var(--fg); }
.share-modal .sm-sub { margin:0 0 16px; font-size:13px; line-height:1.55; color:var(--muted); }
.share-modal .sm-row { display:flex; gap:8px; }
.share-modal .sm-link { flex:1; background:rgba(245,245,242,.06); border:1px solid var(--line-2); border-radius:10px;
  color:var(--fg); padding:10px 12px; font:inherit; font-size:13px; }
.share-modal .sm-btn { border:none; border-radius:10px; padding:10px 16px; font:inherit; font-size:13px; font-weight:600;
  cursor:pointer; background:linear-gradient(180deg,#a9cdff,#7db4ff); color:#06121f; white-space:nowrap; }
.share-modal .sm-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:18px; }
.share-modal .sm-open { color:var(--accent); font-size:13px; }
.share-modal .sm-close { background:rgba(245,245,242,.08); border:1px solid var(--line-2); border-radius:999px;
  color:var(--muted); padding:7px 16px; font:inherit; font-size:13px; cursor:pointer; }

/* ---- Library drawer (folders, Phase 12 · 2026-07-06) ---- */
.menu-btn { font-size:15px; line-height:1; padding:6px 12px; }
.sidebar { position:fixed; top:0; left:0; bottom:0; width:min(300px,86vw); z-index:55;
  background:rgba(10,10,12,.98); border-right:1px solid var(--line-2);
  backdrop-filter:saturate(150%) blur(14px); box-shadow:0 0 60px rgba(0,0,0,.6);
  transform:translateX(-104%); transition:transform .22s ease; display:flex; flex-direction:column; }
body.sidebar-open .sidebar { transform:translateX(0); }
.sidebar-backdrop { position:fixed; inset:0; z-index:54; background:rgba(2,2,3,.5); opacity:0; transition:opacity .22s ease; }
body.sidebar-open .sidebar-backdrop { opacity:1; }
.sb-head { display:flex; align-items:center; justify-content:space-between; padding:16px 16px 10px; border-bottom:1px solid var(--line); }
.sb-title { font-family:var(--serif); font-size:16px; font-weight:600; letter-spacing:-.01em; }
.sb-x { background:rgba(245,245,242,.06); color:var(--muted); border:1px solid var(--line-2); border-radius:999px;
  width:30px; height:30px; cursor:pointer; font-size:13px; transition:background .2s,color .2s; }
.sb-x:hover { color:var(--fg); background:rgba(245,245,242,.14); }
.sb-list { flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:2px; }
.sb-sep { height:1px; background:var(--line); margin:8px 6px; }
.sb-item { display:flex; align-items:center; border-radius:10px; }
.sb-item:hover { background:rgba(245,245,242,.05); }
.sb-item.active { background:rgba(127,180,255,.14); }
.sb-item-main { flex:1; display:flex; align-items:center; gap:10px; background:none; border:0; color:var(--fg);
  font:inherit; font-size:13px; padding:9px 10px; cursor:pointer; text-align:left; min-width:0; }
.sb-ico { width:18px; text-align:center; opacity:.8; flex:none; }
.sb-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-count { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; flex:none; }
.sb-item.active .sb-count { color:var(--glow); }
.sb-edit, .sb-del-f { background:none; border:0; color:var(--faint); cursor:pointer; font-size:12px;
  width:26px; height:30px; opacity:0; transition:opacity .15s, color .2s; flex:none; }
.sb-item:hover .sb-edit, .sb-item:hover .sb-del-f { opacity:1; }
.sb-edit:hover { color:var(--fg); }
.sb-del-f:hover { color:#ff8f8f; }
.sb-add { margin-top:6px; background:rgba(245,245,242,.05); border:1px dashed var(--line-2); border-radius:10px;
  color:var(--muted); font:inherit; font-size:13px; padding:10px; cursor:pointer; transition:color .2s,border-color .2s; }
.sb-add:hover { color:var(--fg); border-color:var(--accent); }
/* 자물쇠 업셀(무료/익명 — 폴더는 Plus 기능) */
.sb-lock { margin:10px 6px; padding:18px 16px; text-align:center; border:1px solid var(--line-2);
  border-radius:14px; background:rgba(245,245,242,.03); }
.sb-lock-icon { font-size:22px; }
.sb-lock-title { font-family:var(--serif); font-size:14px; font-weight:600; margin-top:8px; }
.sb-lock-sub { font-size:12px; color:var(--muted); line-height:1.5; margin-top:6px; }
.sb-lock-cta { display:inline-block; margin-top:12px; background:linear-gradient(180deg,#a9cdff,#7db4ff);
  color:#06121f; border-radius:999px; padding:7px 18px; font-size:12px; font-weight:600; text-decoration:none; }

/* 폴더 이동 모달(선택 배너의 📁 Move) */
.folder-modal { display:none; position:fixed; inset:0; z-index:62; background:rgba(2,2,3,.72);
  align-items:center; justify-content:center; padding:24px; }
.folder-modal.show { display:flex; }
.folder-modal .fm-card { width:min(440px,94vw); background:var(--panel,#0e0e12); border:1px solid var(--line-2);
  border-radius:16px; padding:22px; box-shadow:0 30px 80px -20px #000; }
.folder-modal h3 { margin:0 0 14px; font-size:17px; color:var(--fg); }
.folder-modal .fm-sub { margin:0 0 16px; font-size:13px; line-height:1.55; color:var(--muted); }
.folder-modal .fm-list { display:flex; flex-direction:column; gap:4px; max-height:46vh; overflow-y:auto; margin-bottom:14px; }
.folder-modal .fm-opt { display:flex; align-items:center; gap:10px; background:rgba(245,245,242,.05);
  border:1px solid var(--line); border-radius:10px; color:var(--fg); font:inherit; font-size:13px;
  padding:10px 12px; cursor:pointer; text-align:left; }
.folder-modal .fm-opt:hover { background:rgba(127,180,255,.14); border-color:var(--line-2); }
.folder-modal .fm-ico { flex:none; opacity:.8; }
.folder-modal .fm-optname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.folder-modal .fm-new { display:flex; gap:8px; margin-bottom:16px; }
.folder-modal .fm-newname { flex:1; min-width:0; background:rgba(245,245,242,.06); border:1px solid var(--line-2); border-radius:10px;
  color:var(--fg); padding:9px 12px; font:inherit; font-size:13px; }
.folder-modal .fm-newbtn { background:rgba(245,245,242,.10); border:1px solid var(--line-2); border-radius:10px;
  color:var(--fg); padding:9px 14px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.folder-modal .fm-newbtn:hover { background:rgba(245,245,242,.18); }
.folder-modal .fm-newbtn:disabled { opacity:.5; cursor:default; }
.folder-modal .fm-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.folder-modal .fm-close { background:rgba(245,245,242,.08); border:1px solid var(--line-2); border-radius:999px;
  color:var(--muted); padding:7px 16px; font:inherit; font-size:13px; cursor:pointer; }
.folder-modal .fm-close:hover { color:var(--fg); }
.folder-modal .fm-btn { border:none; border-radius:999px; padding:8px 18px; font:inherit; font-size:13px; font-weight:600;
  cursor:pointer; background:linear-gradient(180deg,#a9cdff,#7db4ff); color:#06121f; text-decoration:none; }

/* 분할 뷰어 오버레이 */
.split-view { position:fixed; inset:0; z-index:50; background:#020203; }
.split-view.hidden { display:none; }
.sv-close { position:absolute; top:12px; right:16px; z-index:10;
  background:rgba(245,245,242,.06); color:var(--fg); border:1px solid var(--line-2); border-radius:999px;
  width:44px; height:44px; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; transition:box-shadow .25s; }
.sv-close:hover { background:rgba(245,245,242,.12); box-shadow:var(--glow-ring-soft); }
/* 분할 뷰 이미지 줌 */
.split-pane img { cursor:zoom-in; }
.split-pane.zoomed { overflow:auto; }
.split-pane.zoomed img { position:static; width:auto; height:auto; max-width:none; max-height:none; cursor:zoom-out; object-fit:initial; }

/* 분할 창 컨테이너: 기본은 가로 균등(2·3분할) */
.split-panes { position:absolute; inset:0; display:flex; gap:2px; background:#08090b; }
.split-pane { flex:1; position:relative; overflow:hidden; background:#000; min-width:0; min-height:0; }
.split-pane img,
.split-pane video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; background:#000; }
/* 4분할: 2×2 그리드 */
.split-panes[data-layout="4"] { flex-wrap:wrap; }
.split-panes[data-layout="4"] .split-pane { width:calc(50% - 1px); height:calc(50% - 1px); flex:none; }
/* 3분할(복합): 왼쪽 절반 1개 + 오른쪽 절반 위아래 2개 */
.split-panes[data-layout="3c"] > .split-pane { flex:1; }      /* 왼쪽 큰 칸 */
.split-col { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; gap:2px; }
.split-col .split-pane { flex:1; }