/* 보관함 화면을 유튜브처럼 꽉 차게: 왼쪽 메뉴(library-sidebar.js) + 넓은 본문 + 오른쪽 리모콘.
   styles.css 에 폭 제한(.shell 1100~1390px)·왼쪽 리모콘 위치 규칙이 여러 층 쌓여 있어, 보관함이 보일 때만
   (body:has(#dashboardView:not(.hidden))) 이 파일이 덮는다. 마이페이지·로그인 화면은 예전 모양 그대로. */
:root{--sidebar-full:240px;--sidebar-mini:76px;--sidebar-w:var(--sidebar-full);--remote-gutter:96px}
body.sidebar-mini{--sidebar-w:var(--sidebar-mini)}

/* ── 본문: 폭 제한을 풀고 메뉴·리모콘 자리만 비운다 ── */
body:has(#dashboardView:not(.hidden)) .shell{max-width:none!important;margin:0!important;padding:16px var(--remote-gutter) 90px calc(var(--sidebar-w) + 24px)!important;transition:padding-left .18s ease}
body:has(#dashboardView:not(.hidden)) #dashboardView{padding-left:0!important}
body:has(#dashboardView:not(.hidden)) .library-section .album-grid,
body:has(#dashboardView:not(.hidden)) .library-section .file-grid{grid-template-columns:repeat(auto-fill,minmax(236px,1fr))!important}

/* ── 리모콘: 오른쪽 가장자리 ── */
body:has(#dashboardView:not(.hidden)) .actionbar{left:auto!important;right:20px!important}

/* ── 위쪽 바: 메뉴 단추 ── */
.sidebar-toggle{flex:0 0 auto;display:grid;place-items:center;width:62px;border:0;border-right:1px solid var(--line-strong);background:transparent;color:var(--ink);padding:0;cursor:pointer}
.sidebar-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sidebar-toggle:hover{background:var(--fill-hover)}
.sidebar-toggle:focus-visible{outline:2px solid var(--info);outline-offset:-4px}

/* ── 왼쪽 메뉴 ── */
.library-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:45;width:var(--sidebar-w);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:16px 10px 28px;border-right:1px solid var(--line);background:var(--surface);color:var(--ink);transition:width .18s ease,transform .2s ease;scrollbar-width:thin}
.library-sidebar svg{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sidebar-group{display:grid;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
.sidebar-group:first-of-type,.sidebar-create+.sidebar-group{border-top:0}
.sidebar-heading{margin:4px 12px 6px;color:var(--ink-dim);font-size:12px;font-weight:800;letter-spacing:.02em}
.sidebar-link:disabled{opacity:.35;cursor:default}   /* 장소·사람 책장: 아직 없음 */
.sidebar-link{display:flex;align-items:center;gap:18px;width:100%;min-height:40px;padding:0 12px;border:0!important;border-radius:var(--ui-radius-sm,8px)!important;background:transparent;color:var(--ink);font:500 14px/1.2 "Pretendard",Inter,sans-serif;text-align:left;cursor:pointer}
.sidebar-link span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-link em{font-style:normal;color:var(--ink-mute);font-size:12px}
.sidebar-link:hover{background:var(--fill)}
.sidebar-link.is-active{background:var(--fill-hover);font-weight:800}
.sidebar-link:focus-visible,.sidebar-item:focus-visible,.sidebar-create-button:focus-visible,.sidebar-create-menu button:focus-visible{outline:2px solid var(--info);outline-offset:-2px}

/* 새로 만들기(메뉴 맨 위) */
.sidebar-create{position:relative;padding:0 2px 12px}
.sidebar-create-button{display:flex;align-items:center;gap:12px;width:100%;min-height:46px;padding:0 18px;border:1px solid var(--line-strong)!important;border-radius:var(--ui-radius-pill,999px)!important;background:var(--surface-2);color:var(--ink);font:800 15px/1 "Pretendard",Inter,sans-serif;cursor:pointer;box-shadow:0 2px 8px #0000001f}
.sidebar-create-button:hover{background:var(--fill-hover)}
.sidebar-create-button svg{stroke-width:2.4}
.sidebar-create-menu{position:absolute;left:2px;right:-120px;top:52px;z-index:3;display:grid;gap:2px;padding:6px;border:1px solid var(--line-strong);border-radius:var(--ui-radius-md,14px);background:var(--surface);box-shadow:0 14px 34px #00000040}
.sidebar-create-menu[hidden]{display:none}
.sidebar-create-menu button{display:flex;align-items:center;gap:14px;padding:10px 12px;border:0!important;border-radius:var(--ui-radius-sm,8px)!important;background:transparent;color:var(--ink);font:700 14px/1.25 "Pretendard",Inter,sans-serif;text-align:left;cursor:pointer}
.sidebar-create-menu button:hover{background:var(--fill)}
.sidebar-create-menu small{display:block;margin-top:2px;color:var(--ink-dim);font-size:11px;font-weight:500}

/* 최근 날짜 파일·앨범 목록 */
.sidebar-items{display:grid;gap:2px}
.sidebar-item{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:4px 10px;border:0!important;border-radius:var(--ui-radius-sm,8px)!important;background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.sidebar-item:hover{background:var(--fill)}
.sidebar-thumb{flex:0 0 30px;width:30px;height:30px;overflow:hidden;border-radius:50%;background:var(--fill);box-shadow:inset 0 0 0 1px var(--line)}
.sidebar-item.is-album .sidebar-thumb{flex-basis:26px;width:26px;height:34px;border-radius:5px}
.sidebar-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.sidebar-thumb-empty{display:block;width:100%;height:100%}
.sidebar-item-text{display:grid;min-width:0;gap:2px}
.sidebar-item-text b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13px/1.2 "Pretendard",Inter,sans-serif}
.sidebar-item-text small{color:var(--ink-mute);font-size:11px}
.sidebar-empty{margin:2px 12px;color:var(--ink-mute);font-size:12px}

/* ── 접힌 메뉴(아이콘만) ── */
body.sidebar-mini .library-sidebar{padding-left:6px;padding-right:6px}
body.sidebar-mini .sidebar-extra,body.sidebar-mini .sidebar-heading{display:none}
body.sidebar-mini .sidebar-group{border-top:0;padding:4px 0}
body.sidebar-mini .sidebar-link{flex-direction:column;justify-content:center;gap:6px;min-height:70px;padding:8px 2px;font-size:10px;text-align:center}
body.sidebar-mini .sidebar-link span{flex:0 0 auto;max-width:100%}
body.sidebar-mini .sidebar-link em{display:none}
body.sidebar-mini .sidebar-create-button{justify-content:center;width:52px;height:52px;min-height:52px;margin:0 auto;padding:0}
body.sidebar-mini .sidebar-create-button span{display:none}
body.sidebar-mini .sidebar-create-menu{left:0;right:auto;width:260px}

/* ── 좁은 화면: 메뉴는 서랍 ── */
.sidebar-backdrop{position:fixed;inset:0;z-index:44;background:#0000005c}
.sidebar-backdrop[hidden]{display:none}
@media(max-width:760px){
  :root{--remote-gutter:68px}
  body:has(#dashboardView:not(.hidden)) .shell{padding-left:12px!important}
  body:has(#dashboardView:not(.hidden)) .actionbar{right:10px!important}
  .library-sidebar{width:var(--sidebar-full);transform:translateX(-102%);box-shadow:none}
  body.sidebar-open .library-sidebar{transform:none;box-shadow:12px 0 30px #00000047}
  body.sidebar-mini .library-sidebar{padding-left:10px;padding-right:10px}
  body.sidebar-mini .sidebar-extra{display:grid}
  body.sidebar-mini .sidebar-heading{display:block}
  body.sidebar-mini .sidebar-group{border-top:1px solid var(--line);padding:10px 0}
  body.sidebar-mini .sidebar-link{flex-direction:row;justify-content:flex-start;gap:18px;min-height:40px;padding:0 12px;font-size:14px;text-align:left}
  body.sidebar-mini .sidebar-link span{flex:1 1 auto}
  body.sidebar-mini .sidebar-create-button{justify-content:flex-start;width:100%;height:auto;min-height:46px;padding:0 18px}
  body.sidebar-mini .sidebar-create-button span{display:inline}
  .sidebar-toggle{width:52px}
}
@media print{.library-sidebar,.sidebar-toggle,.sidebar-backdrop{display:none!important}}