/* ============================================================================
   공유마당(browse.html) — 편집기와 같은 팔레트, 다른 판짜임
   ============================================================================
   색·글꼴은 styles.css에서 그대로 받는다(:root·body.dark·body.theme-*). 여기서
   새 색을 만들지 말 것 — 두 페이지의 테마가 어긋나면 딴 사이트처럼 보인다.
   이 파일이 하는 일은 둘: ① 편집기용 전면 판짜임을 '스크롤되는 문서'로 되돌리고
   ② 카드 격자를 그린다.
   ============================================================================ */

/* ① 편집기는 화면을 꽉 채우고 스스로 스크롤을 관리한다(body: 세로 flex · overflow:hidden).
      공유마당는 그냥 아래로 길어지는 문서라 그 규칙을 되돌린다. 글자 선택도 되살린다 —
      편집기에서 글자가 안 잡히는 건 마우스를 끄는 일이 죄다 '고르기'라서인데, 여기서는
      제목·지은이를 긁어 옮길 일이 있다. */
body.browse {
  display: block;
  height: auto;
  min-height: 100%;
  overflow: visible;
  -webkit-user-select: text;
  user-select: text;
  padding-bottom: 40px;
}

/* ---------- 맨 윗줄 (문패 + 만들기) ---------- */
.sc-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 24px;
  border-bottom: 1px solid var(--line); background: var(--panel);
  position: sticky; top: 0; z-index: 10;
}
.sc-brandlink { text-decoration: none; color: inherit; display: block; }
/* 편집기에서는 문패 오른쪽에 도구 무리가 붙어 28px을 벌려 뒀지만 여기서는 혼자다 */
.sc-brandlink #brandBox { margin-right: 0; }
/* 문패의 h1을 div로 바꿔 달았으므로(이 페이지의 h1은 '공유마당') 크기 규칙을 다시 준다 */
.brand-word { margin: 0; line-height: 0; font-size: 0; }
.brand-word svg { height: 18px; width: auto; display: block; }

.sc-make {
  flex: 0 0 auto; text-decoration: none;
  padding: 9px 16px; border-radius: 8px;
  background: var(--accent); color: #fff;      /* 강조색 위 흰 글자는 테마 무관 고정 */
  font-size: 13px; font-weight: 700;
}
.sc-make:hover { opacity: .9; }

/* ---------- 머리말 ---------- */
.sc-head { max-width: 1200px; margin: 0 auto; padding: 32px 24px 8px; }
.sc-head h1 { margin: 0 0 8px; font-size: 26px; letter-spacing: .04em; }
.sc-lead { margin: 0 0 22px; font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 46em; }
/* 국악원 탭 안내문 속 출처 줄 — 본문보다 한 뼘 작게(카드가 아니라 여기 한 번 적는 표기) */
.sc-lead-src { font-size: .88em; opacity: .8; }

/* 목록 갈래(탭) — 올라온 악보 | 국악원 정악보. 정렬 알약(.sc-sorts)과 층위가 달라
   밑줄 탭 꼴로 가른다(알약을 하나 더 두면 정렬과 같은 물건으로 읽힌다). */
.sc-tabs { display: flex; gap: 2px; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
.sc-tab {
  padding: 8px 13px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: transparent; color: var(--muted);
  font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.sc-tab:hover { color: var(--ink); }
.sc-tab.on { color: var(--ink); border-bottom-color: var(--accent); }

.sc-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-search {
  flex: 1 1 260px; min-width: 0; max-width: 380px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink);
  font-size: 13px; font-family: inherit;
}
.sc-sorts { display: flex; gap: 4px; background: var(--soft); padding: 3px; border-radius: 8px; }
.sc-sort {
  padding: 7px 14px; border: 0; border-radius: 6px; background: transparent;
  color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.sc-sort:hover { color: var(--ink); }
.sc-sort.on { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.sc-count { margin-left: auto; font-size: 12px; color: var(--muted); }

/* ---------- 카드 격자 ---------- */
/* auto-fill + minmax — 창 너비에 따라 칸 수가 알아서 늘고 준다(중단점을 손으로 안 적으려고) */
.sc-grid {
  max-width: 1200px; margin: 0 auto; padding: 20px 24px;
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.sc-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--panel); text-decoration: none; color: inherit;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.sc-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,.14); }

/* 악보는 늘 흰 종이다(다크모드에서도) — 미리보기 그림도 그 규칙을 따른다 */
.sc-thumb { background: #fff; aspect-ratio: 210 / 297; overflow: hidden; display: block; }
.sc-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* 그림 없이 올라온 것 — 빈 사각형 대신 '井'을 옅게 */
.sc-thumb-none {
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; color: #d8d4cc; background: #fff;
}

.sc-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 5px; }
/* 제목은 두 줄까지 — 세 줄이 되면 카드 키가 제각각이라 격자가 흔들린다 */
.sc-title {
  margin: 0; font-size: 13.5px; font-weight: 700; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: keep-all;
}
.sc-meta { font-size: 11.5px; color: var(--muted); }
.sc-tags { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.sc-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 6px; border-radius: 4px;
  background: var(--accent-tint); color: var(--accent);
}
.sc-tag-fork { background: var(--soft); color: var(--muted); }
.sc-views { margin-left: auto; font-size: 10.5px; color: var(--muted); }

/* ---------- 상태 · 더 보기 · 꼬리말 ---------- */
.sc-status { max-width: 1200px; margin: 0 auto; padding: 40px 24px; text-align: center;
             font-size: 13px; color: var(--muted); line-height: 1.8;
             /* 안내가 여러 줄일 때가 있어(공유마당 준비 중 등) 줄바꿈을 살린다 */
             white-space: pre-line; }
.sc-status.sc-empty { padding: 64px 24px; }
.sc-status.sc-error { color: var(--danger); }

.sc-morewrap { text-align: center; padding: 8px 24px 24px; }
.sc-more {
  padding: 10px 28px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink);
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.sc-more:hover { background: var(--hover); }
.sc-more:disabled { opacity: .5; cursor: default; }

.sc-foot {
  max-width: 1200px; margin: 0 auto; padding: 28px 24px;
  border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted); line-height: 1.7;
}
.sc-foot a { color: var(--accent); }
.sc-copy { display: block; margin-top: 6px; letter-spacing: .04em; }

/* 좁은 화면 — 카드는 격자가 알아서 줄어드니 머리말 여백만 줄인다 */
@media (max-width: 600px) {
  .sc-top { padding: 10px 14px; }
  .sc-head { padding: 22px 14px 4px; }
  .sc-grid { padding: 16px 14px; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .sc-count { width: 100%; margin-left: 0; }
}