/* ============================================================
   Score → MML · Design Tokens · v3 (2026-05-17)
   ------------------------------------------------------------
   STATUS: this file is ALREADY linked from corrector.html as the
   FIRST stylesheet (before corrector.css).

   PHILOSOPHY (v3):
     "Calm chrome, working workspace."

   - Chrome (topbar, toolbar, panels, status, popups' wrapper):
     slate neutrals + ONE amber action accent. Restrained.
   - Score canvas overlays (markers, pulse, accidental labels,
     voice colours, grade colours, rubber-band): UNCHANGED.
     These are user-tuned & functional, not decorative.
   - Timeline: compact (24px lanes), DAW-style voice gradients
     retained, but pink chrome (border-left, title glow) dropped.
   - Popups' chrome (chord neutral, glyph orange) keeps its
     semantic colour but in token form.

   This file owns:
     :root tokens
     html/body defaults
     .btn .icon-btn .kbd-chip .pill .tabs .panel-head .mode-pill
     .app-topbar .app-statusbar .slider input

   This file does NOT redefine any .marker, .barline-overlay,
   .free-glyph-box, .score-rubber, .tl-rubber, .tl-note, .acc-label,
   .ghost-marker, .ghost-label, .rhythm-warning, .ghost-barline,
   .measure-highlight, .barline-label, .debug-line, .staff-overlay,
   .playback-cursor, #chord-popup, #glyph-popup rule.
   Those live in corrector.css and stay there. See PRESERVED_VALUES.md.
   ============================================================ */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");

:root{
  /* 브라우저가 **직접 그리는** 부품(숫자칸 스피너 화살표·스크롤바·체크박스·라디오·
     select 목록·파일선택 버튼)에게 "이 페이지는 어두운 테마"라고 알려 준다.
     CSS 색 지정이 닿지 않는 영역이라, 이게 없으면 배경만 어둡고 그 부품들만
     밝게 남는다(2026-08-06 유저 지적, 그전까지 저장소 전체에 선언 0건).
     ⛔`[data-theme="light"]`의 짝(아래)을 빼지 말 것 — 빼면 라이트 테마에서
       반대 사고(밝은 페이지에 어두운 부품)가 난다.
     ※ range 슬라이더는 `appearance:none`으로 완전 커스텀이라 영향 없음(~242행),
       `accent-color`(corrector.css)도 명시값이 그대로 이긴다. */
  color-scheme: dark;

  /* Surfaces */
  --bg-0: #0a0c10;       /* canvas surround */
  --bg-1: #0e1118;       /* app shell */
  --bg-2: #141822;       /* panels */
  --bg-3: #1b2030;       /* raised: buttons, inputs */
  --bg-4: #232a3c;       /* button hover */
  --line:        #262c3a;
  --line-strong: #323a4f;

  /* Ink */
  --ink-0: #eef1f7;
  --ink-1: #b9c0cf;
  --ink-2: #949cad;   /* #7f8898 은 옅은 띠 위에서 4.15:1 로 모자랐다 → 5.1:1 */
  --ink-3: #535b6c;

  /* Accent (action only) */
  --accent:      #f3a25b;
  --accent-dim:  #a87246;
  --accent-soft: rgba(243,162,91,.14);
  /* 강조색 **위에** 얹는 글자·아이콘 색. ⛔`color: var(--accent)` 를 강조 바탕 위에 쓰지 마라 —
     같은 토큰을 바탕과 글자에 함께 쓰면 대비가 반드시 1.00:1(= 안 보임)이 된다.
     2026-09-20 실측: 데스크톱 셸이 --accent 를 거의 흰색으로 바꾼 뒤 단축키 단추·모드 아이콘·
     튜토리얼 단추·Beta 배지가 전부 1.1~1.4:1 로 사라져 있었다. */
  --on-accent:   #1a1004;
  /* 파랑 보조 강조(작업 파일 단추 등). 어두운 면 기준 색을 밝은 면에 그대로 쓰면
     2.00:1 로 씻긴다(2026-09-20 실측) → 테마마다 값을 따로 둔다. */
  --info:        #7aa7d9;
  --info-soft:   rgba(122,167,217,.14);

  /* Status semantic */
  --ok:    #7cd454;
  --warn:  #ffae3a;
  --danger:#ff5d5d;

  /* Type */
  --font-sans: "Pretendard Variable", Pretendard, ui-sans-serif, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Type scale (UI chrome only — does NOT apply to .acc-label or popup contents)
     ⛔12px 아래로 내리지 마라. Microsoft 의 Windows 앱 타이포그래피 지침이
     정한 하한이 "12px Regular / 14px Semibold" 이고, 그 아래는 **일부 언어에서 글자가
     읽히지 않는다**고 못박혀 있다(learn.microsoft.com, Typography / Type ramp).
     2026-09-20 이전에는 meta 11.5 / kbd 10.5 였고, 데스크톱 셸은 여기서 한 단 더
     내려(body 11.5 · meta 10.5 · kbd 10) 앱 글자가 전부 하한 아래였다. */
  --fs-display: 18px;    /* 화면·패널 제목 */
  --fs-title:   14px;    /* 구역 머리 (굵게 쓰는 최소 크기) */
  --fs-body:    13px;    /* 기본 */
  --fs-label:   12px;    /* 폼 라벨, 도구 단추 */
  --fs-meta:    12px;    /* 상태 막대, 도움말 */
  --fs-kbd:     12px;    /* 단축키 표시 */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* 밀도 — **같은 뜻의 높이는 한 곳에서** (2026-09-20 신설).
     이들이 생기기 전에는 같은 "막대" 를 26px 로 8곳, "칸 안 단추" 를 24px 로 12곳,
     "창 상단" 을 32px 로 9곳에 따로 적어 두어 한 군데만 고치면 줄이 어긋났다. */
  --bar-h:   32px;   /* 창 상단 막대 (Windows 표준 제목 표시줄과 같은 값) */
  --row-h:   26px;   /* 한 줄 — 단추·부막대·공지 줄 */
  --strip-h: 24px;   /* 얇은 띠 — 상태 막대, 패널 머리, 타임라인 머리 */
  --field-h: 32px;   /* 입력 줄 — 라벨 + 입력칸 한 줄 */
  --ctl-h:   24px;   /* 칸 안 아이콘 단추. ⛔--strip-h 와 값이 같다고 합치지 마라 —
                        이건 **손가락이 닿아야 하는 크기**(WCAG 2.5.8 최소 24x24)고
                        저건 띠의 두께다. 기준이 올라가면 이것만 올라간다. */

  /* Radius */
  --r-sm: 4px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* Shadow */
  --shadow-sm: 0 2px 6px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 56px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
}

/* ---------- LIGHT ---------- */
[data-theme="light"] {
  color-scheme: light;   /* :root의 dark를 되돌린다 — 위 주석의 짝 */

  --bg-0: #e4e7ec;
  --bg-1: #eaecf0;
  --bg-2: #f2f3f6;
  --bg-3: #e2e5eb;
  --bg-4: #d9dce4;
  --line:        #cdd1da;
  --line-strong: #b8bfcc;

  --ink-0: #1a2230;
  --ink-1: #4d586b;
  --ink-2: #565e6e;   /* #6b7585 은 밝은 면에서 3.53~4.20:1 로 모자랐다 → 4.9:1 */
  --ink-3: #9aa3b5;

  /* ⛔밝은 면에서 #e07830 을 **글자색**으로 쓰지 마라 — 1.75~2.68:1 로 씻긴다
     (2026-09-20 실측: 파일 선택 링크·공지 링크·모드 아이콘). 글자로도 쓸 수 있는
     진한 값으로 두고, 이 색이 **바탕**일 때의 글자는 흰색으로 짝을 맞춘다. */
  --accent:      #8a4510;
  --accent-dim:  #6d340a;
  --accent-soft: rgba(138,69,16,.12);
  /* 밝은 테마에서도 **어두운** 글자다: 흰 글자를 #e07830 위에 쓰면 3.07:1 로 모자라고,
     강조가 진해졌으므로 그 위 글자는 **흰색**이다(7.2:1). */
  --on-accent:   #ffffff;
  --info:        #27598f;                /* #2f6fb0 은 3.94:1 로 모자랐다 → 5.3:1 */
  --info-soft:   rgba(39,89,143,.12);
  /* ⛔상태색을 밝은 면에 그대로 물려주지 마라 — 어두운 면 기준 값(#ff5d5d 등)은
     흰 바탕에서 2.4:1 로 씻긴다(2026-09-20 실측 "일괄 삭제"). 밝은 면 값을 따로 둔다. */
  --ok:     #166534;
  --warn:   #7a4f00;
  --danger: #b3261e;

  --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,.12);
  --shadow-lg: 0 18px 56px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.08);
}

/* ============================================================
   GLOBAL DEFAULTS
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  background: var(--bg-1);
  color: var(--ink-0);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* 줄바꿈 — **여기 한 번**. 웹과 앱이 같은 파일을 읽으므로 둘 다 받는다.
   브라우저 기본은 한글을 **글자 단위**로 끊는다("파일을 선|택하세요", 2026-09-20 실측 5건).
   · keep-all  : 한글은 어절(띄어쓰기) 단위로만 끊는다. 영어는 원래대로(MDN: non-CJK 는 normal 과 같다).
   · anywhere  : 한 어절이 칸보다 길면(긴 파일명·URL) 넘치지 말고 그 안에서 끊는다.
                 break-word 가 아니라 anywhere 인 이유 — flex/grid 칸의 최소 폭 계산에 이 끊김이
                 반영되어야 옆 칸을 밀지 않는다(MDN overflow-wrap).
   ⛔화면·요소마다 다시 적지 마라. 전에는 board.css 의 body 와 index.html 의 공지 제목·본문에
     따로 적혀 있었고, "본문만 고치고 제목을 빠뜨리는" 일이 실제로 있었다(index.html 옛 주석). */
html {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.mono, code, kbd, .kbd-chip {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   COMPONENT PRIMITIVES
   ============================================================ */

.btn{
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 12px; border-radius: var(--r-md);
  background: var(--bg-3); border:1px solid var(--line-strong);
  color: var(--ink-0); font-size: var(--fs-label); cursor:pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--bg-4); }
.btn:active { transform: translateY(0.5px); }

.btn.primary{
  background: linear-gradient(180deg, #f7b06d, #e08840);
  border-color: #bf6c2f;
  color: #1c1004;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.4);
}
.btn.primary:hover { filter: brightness(1.06); }

.btn.ghost { background: transparent; border-color: var(--line); }
.btn.ghost:hover { background: var(--bg-3); }

.btn.success {           /* for #btn-download (retokened green) */
  background: rgba(124,212,84,.12);
  border-color: rgba(124,212,84,.4);
  color: #b6e4a4;
}
.btn.success:hover { background: rgba(124,212,84,.2); }

.btn.danger {
  background: rgba(255,93,93,.12);
  border-color: rgba(255,93,93,.35);
  /* ⛔연분홍(#ffb3b3)을 박지 마라 — 밝은 면에서 1.34:1 로 씻긴다. 테마가 정하게 둔다. */
  color: var(--danger);
}

.icon-btn{
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent;
  border-radius: var(--r-md); color: var(--ink-2); cursor:pointer;
}
.icon-btn:hover { background: var(--bg-3); color: var(--ink-0); }

.kbd-chip{
  display:inline-block;
  font-family: var(--font-mono); font-size: var(--fs-kbd);
  padding: 1px 5px; border-radius: 4px;
  background: var(--bg-0); border:1px solid var(--line); color: var(--ink-1);
  line-height: 1.4;
}

.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--bg-2); border:1px solid var(--line);
  color: var(--ink-1); font-size: var(--fs-label);
}
.pill .dot{ width:6px; height:6px; border-radius:50%; background: var(--ok); }

/* App shell */
.app-topbar{
  height:48px; display:flex; align-items:center; gap:14px;
  padding: 0 var(--space-4);
  background: linear-gradient(180deg, #11151f, #0d1018);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.app-statusbar{
  height:30px; display:flex; align-items:center; gap:18px;
  padding: 0 var(--space-4);
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  font-size: var(--fs-meta); color: var(--ink-2);
  flex-shrink: 0;
}
.app-statusbar .sep { width:1px; height:14px; background: var(--line); }

.tabs{ display:flex; gap:2px; background: var(--bg-2); padding:3px; border-radius: 8px; border:1px solid var(--line); }
.tabs .tab{ padding: 5px 12px; border-radius: 6px; font-size: 12.5px; font-weight: normal; color: var(--ink-2); cursor: pointer; text-decoration: none; }
.tabs .tab.is-active{ background: var(--bg-3); color: var(--ink-0); box-shadow: inset 0 0 0 1px var(--line-strong); }

.panel-head{
  display:flex; align-items:center; gap:8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.panel-head h4{
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); margin: 0;
}

.mode-pill{
  padding: 3px 10px; border-radius: 999px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .06em;
  background: var(--accent-soft); color: var(--accent); border:1px solid var(--accent-dim);
}
.mode-pill.barline{ background: rgba(255,108,122,.16); color: #ffd0d4; border-color: rgba(255,108,122,.4); }
.mode-pill.add{     background: rgba(106,163,255,.16); color: #cfe2ff; border-color: rgba(106,163,255,.4); }
.mode-pill.glyph{   background: rgba(255,153,51,.16); color: #ffcc88; border-color: rgba(255,153,51,.4); }

.slider{
  appearance: none; height: 4px; border-radius: 99px;
  background: var(--bg-3); outline: none; width: 120px;
}
.slider::-webkit-slider-thumb{
  appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid #1a1004; cursor: pointer;
}

/* Inputs — scope to chrome (not popups; corrector.js sets inline styles) */
.app-topbar input[type="number"],
.app-topbar input[type="text"],
.app-topbar select,
#mode-panel input[type="number"],
#mode-panel input[type="text"],
#mode-panel select,
#toolbar input[type="number"],
#toolbar input[type="range"],
#upload-bar input[type="number"],
#upload-bar input[type="file"]{
  background: var(--bg-0);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink-0);
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
}
.app-topbar input:focus,
#mode-panel input:focus,
#toolbar input:focus,
#upload-bar input:focus{
  outline: none;
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* ============================================================
   MOBILE: hamburger + mobile-nav (shared)
   ============================================================ */
.hamburger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-strong);
  border-radius: var(--r-md); cursor: pointer; padding: 0;
  flex-shrink: 0;
}
.hamburger .hamburger-bar {
  display: block; width: 18px; height: 2px;
  background: var(--ink-1); border-radius: 1px;
  position: relative;
}
.hamburger .hamburger-bar::before,
.hamburger .hamburger-bar::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--ink-1); border-radius: 1px;
}
.hamburger .hamburger-bar::before { top: -6px; }
.hamburger .hamburger-bar::after  { top: 6px; }

/* Desktop: wrapper invisible, children inline */
.mobile-nav { display: contents; }

@media (max-width: 768px) {
  .hamburger { display: inline-flex; }

  .mobile-nav {
    display: none;
    position: absolute; left: 0; right: 0;
    flex-direction: column; gap: 8px; z-index: 100;
    border-bottom: 1px solid var(--line, var(--border-soft));
    background: var(--bg-1, var(--bg));
    backdrop-filter: blur(14px);
    padding: 12px 16px;
  }
  .mobile-nav.open { display: flex; }

  /* ── Shared mobile-nav inner layout ── */
  /* Reset any nav container (.nav, .tabs, etc.) to vertical list */
  .mobile-nav .nav,
  .mobile-nav .tabs {
    display: flex; flex-direction: column; gap: 0;
    background: transparent; border: none; padding: 0; border-radius: 0;
    width: 100%;
  }

  /* All nav links: uniform style regardless of .tab / .nav a */
  .mobile-nav .nav a,
  .mobile-nav .tabs .tab {
    display: flex; align-items: center;
    padding: 12px 0; min-height: 44px;
    font-size: 14px; font-weight: 600;
    color: var(--ink-1, var(--text-2));
    text-decoration: none; border-radius: 0;
    border-bottom: 1px solid var(--line, var(--border-soft));
    background: transparent; box-shadow: none;
  }
  .mobile-nav .nav a:last-child,
  .mobile-nav .tabs .tab:last-child { border-bottom: none; }

  .mobile-nav .nav a.active,
  .mobile-nav .tabs .tab.is-active {
    color: var(--accent);
  }

  /* Actions row (login, theme, etc.) */
  .mobile-nav .hdr-right,
  .mobile-nav .topbar-right {
    display: flex; align-items: center; gap: 8px;
    width: 100%; flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--line, var(--border-soft));
    margin-left: 0;
  }
}