:root{
  --bg:#0f1115;--panel:#161922;--panel-2:#1c2030;--text:#e9ecf1;--muted:#9aa3b2;--accent:#6ea8fe;--border:#2a2f3f;
  --toolbar-h:64px;           /* JS가 실제 값으로 덮어씀 */
  --stack-pad:0px;            /* 주변여백제거 */
}
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Apple SD Gothic Neo,Noto Sans KR,Helvetica,Arial,sans-serif;

  /* 새로고침 방지 */
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
}

.content-area {
  overscroll-behavior: contain;
}

button,input{font:inherit;color:inherit}

/* 레이아웃 */
.app{
  display:grid;
  grid-template-columns:240px 1fr;  /* ← 리스트 폭 더 축소 */
  min-height:100dvh;
  transition:grid-template-columns .2s;
  align-items:start;
}
.app.collapsed{ grid-template-columns:1fr }

/* 항상 보이는 전역 토글 */
.floating-toggle{
  position:fixed; left:10px; top:10px; z-index:9999;
  background:var(--panel-2); border:1px solid var(--border);
  border-radius:.6rem; padding:.35rem .55rem; cursor:pointer;
}
.floating-toggle:hover{border-color:var(--accent)}

/* 사이드바 */
.sidebar{
  position:sticky; top:0; height:100dvh; overflow:auto;
  background:var(--panel); border-right:1px solid var(--border);
  display:flex; flex-direction:column; min-width:210px; max-width:420px; font-size:.95rem;
}
.app.collapsed .sidebar{display:none}
.sidebar-header{display:flex;gap:.5rem;align-items:center;padding:.6rem;border-bottom:1px solid var(--border)}
.view-switch{margin-left:auto;display:flex;gap:.25rem}
.btn{background:var(--panel-2);border:1px solid var(--border);padding:.35rem .6rem;border-radius:.6rem;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.small{padding:.2rem .45rem;font-size:.9rem}
.btn.xsmall{padding:.15rem .4rem;font-size:.85rem}
.btn.icon{padding:.3rem .5rem}
.btn.active{outline:2px solid var(--accent);outline-offset:2px}

.sidebar-tools{padding:.5rem;border-bottom:1px solid var(--border)}
.search{width:100%;min-width:120px;padding:.45rem .6rem;border-radius:.6rem;border:1px solid var(--border);background:#0e1119;font-size:.95rem}

/* 리스트 + 우측 세로 레일 */
.lists-wrap{display:grid;grid-template-columns:1fr 22px;gap:.35rem;flex:1;min-height:0;padding:.35rem .45rem}
.song-list{list-style:none;margin:0;padding:.2rem .2rem;overflow:auto;flex:1;border-radius:.5rem}
.group-header{margin:.5rem 0 .2rem;color:var(--muted);font-weight:600;border-top:1px solid var(--border);padding-top:.3rem;font-size:.9rem}

.song-item{border:1px solid transparent;border-radius:.6rem;padding:.45rem .5rem;margin:.2rem 0;cursor:pointer}
.song-item:hover{border-color:var(--border);background:#121726}
.song-item .primary{font-size:.95rem}
.song-item .meta{color:var(--muted);font-size:.85rem}
.song-item.active{border-color:var(--accent);background:#121a2e}

/* 세로 초성/알파벳 점프 레일 */
.initial-rail{position:sticky; top:.35rem; align-self:start; display:flex; flex-direction:column; gap:2px; width:22px}
.initial-rail .i-btn{
  width:22px; height:16px; display:flex; align-items:center; justify-content:center;
  font-size:10px; line-height:1; background:var(--panel-2); border:1px solid var(--border); border-radius:4px; cursor:pointer; user-select:none;
}
.initial-rail .i-btn:hover{border-color:var(--accent)}
.initial-rail .i-btn[disabled]{opacity:.45;cursor:default;border-color:#222}

/* 뷰어 */
.viewer{display:flex;flex-direction:column;min-width:0;overflow:hidden}

/* 상단 바: 2행, 오른쪽 끝(두 행 공통) */
.viewer-toolbar{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "title right"
    "subtitle right";
  gap:.35rem .75rem;
  align-items:center;
  padding:.45rem .75rem;
  border-bottom:1px solid var(--border);
  background:var(--panel);
}
.title-wrap{ grid-area:title; min-width:0; }
.subtitle-wrap{ grid-area:subtitle; min-width:0; }
.right-wrap{
  grid-area:right;
  display:flex; align-items:center; justify-content:flex-end; gap:.5rem;
  grid-row: 1 / span 2; align-self:center;
}

#songTitle{
  margin:0;
  font-size:clamp(.95rem,2vw,1.05rem);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.subtitle{ color:var(--muted); font-size:.85rem; line-height:1.25; }

.zoom-group{ display:flex; align-items:center; gap:.35rem; }
.zoom-label{ min-width:2.8rem; text-align:center; color:var(--muted); font-size:.85rem }

/* 콘텐츠 */
.content-area{
  flex:1; overflow:auto; background:#0c0f16;
}

/* 여러 악보(파일)를 세로 스택으로 표시 (좌우 여백 최소화) */
.figure-stack{
  width:100%;
  max-width:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.25rem;
  padding:var(--stack-pad);
}
/* .figure{ width:100%; display:grid; place-items:center; } */
.figure{
  width:100%;
  display:grid;
  align-items:start;
  justify-items:stretch;      /* 가운데 정렬 → 좌측/가로 꽉 채움 */
}

/* 이미지 */
.figure img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  /* border:1px solid var(--border);
  border-radius:.8rem;
  background:#000;
  object-fit:contain; */
  border:0;                   /* ← 검은 테두리 제거 */
  border-radius:0;            /* ← 모서리 둥글기 제거(검은 귀 제거) */
  background:transparent;     /* ← 주변 검은 배경 제거 */
  object-fit:contain;         /* 그대로 유지 */
}

/* PDF */
.pdf-wrap{
  width:100%;
  overflow:visible;
  position:relative;
}
.pdf-embed{
  display:block;
  width:100%;
  /* 툴바 높이를 뺀 정확한 높이로 설정 → 바깥 스크롤 제거 */
  height:calc(100vh - var(--toolbar-h) - (var(--stack-pad) * 2));
  border:1px solid var(--border);
  border-radius:.8rem;
  background:#000;
  transform-origin:center top;
}

.app.collapsed .figure-stack{padding:calc(var(--stack-pad) * 0.6)}

@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:absolute;z-index:10;width:68vw;max-width:340px;height:100%} /* 모바일도 폭 다이어트 */
}

/* 우측 뷰어 스크롤은 여기서! */
#contentArea,
.content-area {
  overflow: auto;           /* 스크롤 표시/동작 */
  overscroll-behavior: contain;  /* 바운스 전파 방지 */
}