/* ============================================================================
   악보바다 리디자인 — 디자인 토큰 (단일 출처)

   리디자인 화면 여섯(악보 상세 PC/모바일, 파트 목록 PC/모바일, 샘플보기 PC/모바일)이
   같은 값을 쓰도록 여기 한 곳에 모아 둔다. 화면 CSS 는 var(--...) 로만 참조한다.

   반드시 각 화면의 <style> 보다 먼저 실려야 한다(뒤에 오는 화면 CSS 가 이겨야 하므로).
   레거시 common.css 와는 섞이지 않는다 — 리디자인 스코프(.rd- .mo- .pl- .pm- .sd- .sm-)
   안에서만 쓴다.
   ============================================================================ */

:root {

    /* ---------- 브랜드 ----------------------------------------------------- */
    --c-brand:        #1f61c1;   /* 주 액션 · 선택 · 강조 */
    --c-brand-hover:  #1a539f;   /* 채운 버튼 hover / 눌린 상태 */
    --c-brand-deep:   #164a99;   /* 그라데이션 끝 (MR 뱃지, 드롭캡) */
    --c-brand-ink:    #1a4f9e;   /* 모바일 선택 글자 — 파랑 바탕 위에서도 읽히는 톤 */
    --c-brand-on:     #93c5fd;   /* 채운 알약 안의 개수 */

    /* 브랜드 틴트 : 옅은 순서. 역할이 셋뿐이라 그 이상 늘리지 않는다 */
    --c-brand-50:     #f7faff;   /* hover 바닥 */
    --c-brand-100:    #eef4fd;   /* 선택 바닥 · 연한 강조판 */
    --c-brand-150:    #edf4fe;   /* 표 행 선택 (100 보다 아주 살짝 진하다) */
    --c-brand-200:    #e3edfb;   /* 모바일 뱃지 바닥 */
    --c-brand-panel:  #f5f8fd;   /* 패널/모달 머리 바닥 */
    --c-brand-border: #c9d9f5;   /* hover 테두리 */
    --c-brand-edge:   #dbe6f8;   /* 연한 파랑 테두리 */

    /* ---------- 글자 ------------------------------------------------------- */
    --c-text:          #1a1d23;  /* 기본 */
    --c-text-strong:   #101623;  /* 제목 강조 (샘플 화면) */
    --c-text-title:    #14171c;  /* 모바일 제목 */
    --c-text-deep:     #28303d;  /* 목록 항목 이름 */
    --c-text-body:     #4a5260;  /* 본문 */
    --c-text-review:   #3f444d;  /* 리뷰 본문 — 본문보다 한 톤 진하게 */
    --c-text-sub:      #616874;  /* 보조 설명 */
    --c-text-sub2:     #79818f;  /* 보조 설명(샘플 화면) */
    --c-text-muted:    #9ca2ae;  /* 라벨 · 날짜 · 개수 */
    --c-text-faint:    #a6adb8;  /* 저작권 등 아주 약한 글 */
    --c-text-disabled: #c8cdd6;  /* 값 없음 · 비활성 */
    --c-text-ghost:    #b6bcc6;  /* placeholder */
    --c-eyebrow:       #7f94b5;  /* 작은 대문자 눈썹 제목 */

    /* ---------- 바탕 ------------------------------------------------------- */
    --c-surface:      #fff;      /* 카드 · 행 */
    --c-bg:           #f2f4f7;   /* 모바일 페이지 바닥 */
    --c-bg-view:      #f4f6f9;   /* 샘플 화면 바닥 */
    --c-sunken:       #fafbfc;   /* 카드 안쪽 옅은 판 */
    --c-sunken2:      #f7f9fc;   /* 미리듣기 판 */
    --c-sunken3:      #f5f6f8;   /* 비활성 판 */
    --c-fill:         #f1f2f5;   /* 칩 기본 바닥 */
    --c-fill2:        #f0f2f5;   /* 태그 기본 바닥 */
    --c-thead:        #fafcff;   /* 표 머리 */
    --c-sechead:      #f0f4fa;   /* 분류 머리 (PC) */
    --c-tray:         #eef1f6;   /* 모바일 카드밭 · 칩바 */

    /* ---------- 선 --------------------------------------------------------- */
    --c-border:        #eceff2;  /* 카드 테두리 (PC 기본) */
    --c-border-soft:   #eef1f5;  /* 카드 안 구분선 */
    --c-border-panel:  #e4e8ee;  /* 샘플 화면 패널 경계 */
    --c-border-m:      #dfe4ec;  /* 모바일 카드 테두리 */
    --c-border-ctl:    #d2d7de;  /* 버튼 테두리 */
    --c-border-ctl2:   #e2e5ea;  /* 아이콘 버튼 · 트랙 */
    --c-border-pill:   #dfe3e9;  /* 알약 버튼 테두리 */
    --c-divider:       #f2f4f7;  /* 목록 구분선(약) */
    --c-divider2:      #e6e8ec;  /* 목록 구분선(중) */
    --c-rule:          #94a3b8;  /* 표 머리 위아래 굵은 선 — 리디자인의 시그니처 */

    /* ---------- 난이도 5단계 ------------------------------------------------ */
    --c-lv1-bg: #e8f6ee; --c-lv1-fg: #17835a; --c-lv1-tx: #128a54;  /* 입문 */
    --c-lv2-bg: #e9f2fd; --c-lv2-fg: #1f61c1; --c-lv2-tx: #1f61c1;  /* 초급 */
    --c-lv3-bg: #f1eefc; --c-lv3-fg: #6d3bd4; --c-lv3-tx: #7040bf;  /* 중급 */
    --c-lv4-bg: #fdf1e3; --c-lv4-fg: #a4670a; --c-lv4-tx: #b5730a;  /* 중상급 */
    --c-lv5-bg: #fdeceb; --c-lv5-fg: #c0392b; --c-lv5-tx: #c0392b;  /* 고급 */
    --c-dot-off: #e3e7ee;                                           /* 게이지 빈 칸 */

    /* ---------- 그 밖의 뜻을 가진 색 ---------------------------------------- */
    --c-key-bg:    #fff5e5;  --c-key-fg:   #a4670a;   /* 조(Key) — 원키와 다를 때만 */
    --c-key-line:  rgba(245,158,11,.4);
    --c-mr-bg:     #ebf3fc;  --c-mr-fg:    #1f61c1;   /* MR */
    --c-video-bg:  #fff1f1;  --c-video-fg: #eb2929;   /* 동영상 악보 */
    --c-video-bg-h:#ffe1e1;  --c-video-fg-h:#c81f1f;
    --c-star:      #f59e0b;                           /* 별점 */
    --c-star-soft: #ffd479;                           /* 어두운 바탕 위 별 · 1위 */
    --c-free:      #0b7a45;                           /* 무료 */
    --c-inverse:   #1a1d23;                           /* 토스트 · 툴팁 바탕 */

    /* ---------- 딤 --------------------------------------------------------- */
    --c-dim:       rgba(12,16,24,.45);   /* 모바일 시트/팝업 */
    --c-dim-modal: rgba(16,22,35,.55);   /* 샘플 화면 모달 */
    --c-dim-thumb: rgba(14,18,26,.52);   /* 카드 썸네일 덮개 */

    /* ---------- 모서리 ----------------------------------------------------- */
    --r-xs:    4px;    /* 태그 */
    --r-sm:    6px;    /* 작은 아이콘 버튼 · 난이도 뱃지 */
    --r-md:    8px;    /* 버튼 · 입력 · 툴  ← 기본 */
    --r-lg:    10px;   /* 썸네일 · 안쪽 판 */
    --r-card:  12px;   /* 카드 · 패널  ← 카드는 전부 이 값 */
    --r-modal: 14px;   /* 모달 */
    --r-sheet: 18px;   /* 바텀시트 위 모서리 */
    --r-pill:  100px;  /* 칩 · 뱃지 · FAB */

    /* ---------- 그림자 ----------------------------------------------------- */
    --e1:       0 1px 2px 0 rgba(16,24,40,.05);                      /* 목록 카드 */
    --e-card:   0 2px 10px 0 rgba(0,0,0,.1);                         /* 페이지 주요 카드 */
    --e-sheet:  0 2px 12px 0 rgba(0,0,0,.06);                        /* 악보 판 */
    --e-hover:  0 6px 18px 0 rgba(31,97,193,.12);                    /* 카드 hover */
    --e-on:     0 6px 18px 0 rgba(31,97,193,.16);                    /* 카드 선택 */
    --e-fab:    0 6px 18px rgba(31,97,193,.34);                      /* 떠 있는 단추 */
    --e-pop:    0 18px 40px -8px rgba(16,24,40,.30),
                0 4px 12px 0 rgba(16,24,40,.12);                     /* 떠오르는 패널 */
    --e-bar:    0 -2px 12px 0 rgba(0,0,0,.07);                       /* 하단 고정 바 */

    /* ---------- 움직임 ----------------------------------------------------- */
    --t-fast:  .12s ease;                        /* 행 바탕 */
    --t-base:  .15s ease;                        /* 색 · 테두리  ← 기본 */
    --t-move:  .18s ease;                        /* 자리 이동 · 확대 */
    --t-sheet: .28s cubic-bezier(.32,.72,0,1);   /* 바텀시트 */

    /* ---------- 모바일 좌우 여백 -------------------------------------------
       화면 폭을 따라간다(안드로이드 360, 아이폰 390·430 …).
       clamp 를 모르는 브라우저는 16px 로 남는다. */
    --gut: 16px;
}

@supports (width:clamp(1px,1vw,2px)) {
    :root { --gut: clamp(13px, 4.2vw, 18px); }
}