@charset "utf-8";
/* Drumscore 画面の見た目 */
  :root { --pk:#f27a8a; --pk2:#fff3f4; --ln:#f6cdd3; --bl:#4a6fa5; }
  * { box-sizing: border-box; }
  /* 縦スクロールバーの有無で内容幅が変わらないようにする（段の幅は内容を作る前に決めるため） */
  html { scrollbar-gutter: stable; }
  body { margin:0; font-family: "BIZ UDPGothic","Yu Gothic",sans-serif; color:#333; background:#fff7f8; }
  header { background:#fff; border-bottom:2px solid var(--ln); padding:5px 12px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; position:sticky; top:0; z-index:6; }
  header h1 { font-size:15px; color:var(--pk); margin:0 6px 0 0; white-space:nowrap; cursor:pointer; display:flex; align-items:center; gap:5px; }
  header h1 svg { width:20px; height:20px; flex:0 0 auto; }
  header .home { display:flex; align-items:center; flex:0 0 auto; opacity:.8; }
  header .home:hover { opacity:1; }
  header .home svg { width:20px; height:20px; display:block; }
  header h1:hover { opacity:.75; }
  .about { display:flex; flex-direction:column; gap:8px; font-size:13px; line-height:1.7; color:#333; }
  .about .hh { display:flex; justify-content:flex-end; }
  .about .word { font-size:26px; font-weight:bold; color:var(--pk); letter-spacing:.04em; }
  .about .word span { color:#999; font-weight:normal; font-size:14px; margin-left:8px; }
  .about .eq { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .about .eq b { background:var(--pk2); border:1px solid var(--ln); border-radius:6px; padding:2px 10px; color:var(--pk); font-size:15px; }
  label { font-size:12px; display:flex; align-items:center; gap:3px; white-space:nowrap; }
  input[type=text] { font-size:12.5px; padding:3px 6px; border:1px solid #ccc; border-radius:6px; }
  select, button { font-size:12px; padding:4px 8px; border:1px solid #ccc; border-radius:6px; background:#fff; cursor:pointer; white-space:nowrap; }
  .sep { border-left:1px solid #ddd; height:20px; }
  .popwrap { position:relative; }
  .pop { position:absolute; top:calc(100% + 4px); left:0; z-index:30; background:#fff; border:1px solid var(--ln); border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.12); padding:8px 10px; display:flex; flex-direction:column; gap:6px; min-width:180px; }
  .pop button { text-align:left; }
  .pop[hidden] { display:none; }
  @media (max-width: 800px) { .pop { position:fixed; left:4vw; right:4vw; top:56px; max-width:92vw; max-height:80vh; overflow:auto; } }
  button.pri { background:var(--pk); color:#fff; border-color:var(--pk); }
  main { padding: 12px 16px; }
  .hint { font-size:12.5px; color:#444; margin:0 0 6px; line-height:1.7; }
  .helpbox { position:fixed; z-index:20; left:50%; top:70px; transform:translateX(-50%); width:min(960px, 94vw); max-height:calc(100svh - 86px); overflow:auto; overscroll-behavior:contain; background:#fff; border:2px solid var(--pk); border-radius:10px; padding:12px 18px 14px; box-shadow:0 6px 24px rgba(0,0,0,.15); }
  .helpbox .hh { display:flex; justify-content:space-between; align-items:center; font-size:15px; font-weight:bold; color:var(--pk); margin-bottom:6px; }
  .helpbox .hgrid { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
  .helpbox h4 { margin:8px 0 3px; font-size:13px; color:var(--pk); border-left:3px solid var(--pk); padding-left:6px; }
  .helpbox ul { margin:0; padding-left:18px; }
  .helpbox li { font-size:12.5px; line-height:1.65; color:#333; }
  .helpbox .lic { font-size:11px; color:#888; margin:10px 0 0; }
  .helpbox .lic a { color:var(--pk); }
  .helpbox .hh small { font-size:11px; color:#999; font-weight:normal; }
  .helpbox .hist { margin-top:10px; font-size:12px; }
  .helpbox .hist summary { cursor:pointer; color:var(--pk); font-weight:bold; }
  .helpbox .hist table { border-collapse:collapse; margin-top:4px; }
  .helpbox .hist td { padding:2px 8px 2px 0; vertical-align:top; color:#444; white-space:nowrap; }
  .helpbox .hist td:last-child { white-space:normal; }
  /* 動作確認環境のお知らせ（文面は app.js の ENV_NOTE で一元管理） */
  .envnote { font-size:12px; line-height:1.6; color:#666; background:#fafafa; border:1px solid #eee; border-radius:6px; padding:6px 9px; }
  .envnote.br { white-space:pre-line; }   /* 文と文の間で改行する場所 */
  /* 印刷/PDF設定：説明が長い行は横に伸ばさず、枠の中で折り返す */
  #printBox label { flex-wrap:wrap; white-space:normal; gap:4px 6px; }
  #printBox label > span { flex-basis:100%; margin-left:21px; font-size:11.5px; line-height:1.5; color:#999; }
  #printBox select, #printBox input[type=text] { max-width:100%; }
  @media (max-width: 800px) {
    .helpbox .hgrid { grid-template-columns:1fr; }
    .helpbox { left:2vw; right:2vw; width:auto; transform:none; top:8px; padding:8px 12px 110px; max-height:calc(100svh - 20px); }
    .helpbox .hh { position:sticky; top:0; background:#fff; padding:4px 0 6px; margin:0 0 4px; z-index:1; }
    .helpbox li { font-size:13px; }
    header button, .barpanel button, .barpanel select { min-height:32px; }
  }
  /* 小節設定パネル */
  .barpanel { background:#fff; border:1px solid var(--ln); border-radius:10px; padding:5px 10px; margin-bottom:6px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .barpanel .sel { font-weight:bold; color:var(--pk); white-space:nowrap; }
  .barpanel select { max-width:120px; }
  .barpanel label input[type=checkbox] { transform: scale(1.2); }
  /* 入力グリッド */
  .barpanel { position: sticky; top: 0; z-index: 5; }
  .rows { display:flex; flex-direction:column; gap:4px; }
  .row { display:flex; gap:10px; align-items:flex-start; background:#fff; border:1px solid var(--ln); border-radius:8px; padding:2px 6px; overflow:hidden; }
  .row .sc { flex: 0 0 var(--half); width: var(--half); position: relative; overflow:hidden; }
  .row .sc .shrunk { position:absolute; right:3px; top:3px; z-index:2; cursor:help;
    font-size:10.5px; font-weight:bold; line-height:1; letter-spacing:.02em;
    color:#fff; background:#c4544e; border-radius:11px; padding:5px 10px;
    box-shadow:0 1px 3px rgba(0,0,0,.18); user-select:none; touch-action:manipulation; }
  .shrunknote { position:fixed; z-index:30; width:min(280px, 86vw);
    background:#fff; border:2px solid #c4544e; border-radius:8px; padding:8px 10px;
    font-size:11.5px; line-height:1.6; color:#333; box-shadow:0 4px 14px rgba(0,0,0,.18); }
  .bpnav { display:flex; gap:6px; flex-wrap:wrap; }
  .bpbody { display:flex; flex-direction:column; gap:8px; }
  #pop_sc svg { display:block; max-width:100%; }
  #pop_ed { overflow-x:auto; }
  .row .ed { flex: 0 0 var(--half); width: var(--half); overflow:hidden; }
  .row.stacked { flex-direction:column; gap:2px; align-items:flex-start; }
  .row.stacked .sc, .row.stacked .ed { flex:0 0 auto; width: var(--half); }
  .row .sc svg { display:block; }
  table.g { border-collapse:collapse; }
  table.g.fixed { table-layout:fixed; }
  table.g.fixed td { overflow:hidden; white-space:nowrap; text-overflow:clip; }
  table.g.fixed th.barno { overflow:hidden; position:relative; }
  table.g.fixed th.barno .bb { position:absolute; right:2px; top:0; float:none; background:#fff; }
  table.g th, table.g td { border:1px solid #eee; height:16px; text-align:center; font-size:10px; user-select:none; padding:0; line-height:1; }
  table.g th.lbl { width:70px; text-align:left; padding-left:4px; background:#fafafa; white-space:nowrap; font-size:10px; }
  table.g td.c { width:20px; cursor:pointer; }
  table.g.fixed td.c { width:auto; }
  table.g td.c:hover { background:#fff0f2; }
  table.g td.beat, table.g th.beat { border-left:2px solid #ccc; }
  table.g td.bar, table.g th.bar { border-left:3px solid var(--pk); }
  /* オープンハイハット・クローズドリムショット */
  table.g td.s-on::after { content:""; display:inline-block; width:min(11px, 72%); aspect-ratio:1; border-radius:50%; background:var(--pk); vertical-align:middle; }
  table.g td.s-open::after { content:""; display:inline-block; width:min(11px, 72%); aspect-ratio:1; border-radius:50%; border:2px solid var(--pk); background:#fff; box-sizing:border-box; vertical-align:middle; }
  table.g td.s-cross, table.g td.s-flam { color:var(--pk); font-weight:bold; line-height:1; }
  table.g td.s-cross::after { content:"✕"; font-size:11px; vertical-align:middle; }
  table.g td.s-flam::after { content:"♪"; font-size:12px; vertical-align:middle; }
  table.g tr.kick td.s-on::after, table.g tr.r-hhf td.s-on::after { background:var(--bl); }
  table.g tr.r-hhf td.s-cross { color:var(--bl); }
  /* アクセント */
  table.g tr.cnt td.a { cursor:pointer; }
  table.g tr.cnt td.a:hover { background:#fff0f2; }
  table.g tr.cnt td.acc { color:var(--pk); font-weight:bold; }
  table.g tr.rest td.s-on::after { content:"𝄾"; width:auto; height:auto; border-radius:0; background:none; font-size:12px; color:#888; }
  table.g tr.rest th.lbl { color:#888; }
  table.g tr.cnt td { font-size:9px; color:#999; height:13px; }
  table.g tr.cnt td.beat, table.g tr.cnt td.bar { color:#555; font-weight:bold; }
  table.g tr.div td { height:13px; font-size:9px; color:var(--bl); cursor:pointer; background:#f4f7fb; }
  table.g tr.div td:hover { background:#e6eefc; }
  table.g th.barno { background:#fff; color:var(--pk); font-size:10px; height:14px; border:none; text-align:left; cursor:pointer; padding-left:3px; white-space:nowrap; }
  table.g th.barno:hover { text-decoration: underline; }
  table.g th.barno.selected { background:var(--pk); color:#fff; }
  table.g td.selb { background:#fff0f2; }
  table.g td.c.selb:hover { background:#ffe2e7; }
  table.g th.barno small { color:#999; font-weight:normal; }
  table.g th.barno .bb { float:right; margin-right:2px; }
  table.g th.barno .bb button { font-size:10px; line-height:1; padding:0 4px; margin-left:2px; border:1px solid #ddd; border-radius:3px; background:#fff; color:#666; cursor:pointer; }
  table.g th.barno .bb button:hover { background:var(--pk2); color:var(--pk); border-color:var(--pk); }
  table.g th.barno.selected .bb button { background:#fff; }
  /* 印刷用 */
  .sheet { display:none; }
  .sheet h2 { margin:0 0 6px; font-size:20px; }
  .line { margin-bottom:2px; break-inside: avoid; }
  .pg { display:flex; flex-direction:column; break-after: page; overflow:hidden; }
  .pg:last-child { break-after: auto; }
  .pbody { flex:1 1 auto; }
  .pbar { display:flex; justify-content:space-between; font-size:12px; color:#555; height:20px; align-items:center; }
  .pbar .c { flex:1; text-align:center; } .pbar .r { min-width:140px; text-align:right; } .pbar span:first-child { min-width:140px; }
  .line svg { display:block; }
  /* 幅が狭い画面 */
  @media (max-width: 1500px) {
    header { padding:4px 10px; gap:6px; }
    header h1 { font-size:15px; margin-right:4px; }
    label { font-size:11.5px; }
    input[type=text], select, button { font-size:11.5px; padding:3px 7px; }
    #title { width:140px !important; }
    #clipInfo { font-size:11px; }
    .barpanel { padding:4px 10px; gap:8px; }
    .barpanel .sel { min-width:0; font-size:12px; }
    .hint { font-size:11px; line-height:1.4; margin-bottom:4px; }
    main { padding:6px 10px; }
  }
  @page { size: A4 portrait; margin: 12mm; }
  @media print {
    header, .rows, .hint, .barpanel, .noprint { display:none !important; }
    body { background:#fff; }
    main { padding:0; }
    .sheet { display:block; transform-origin: top left; }
  }

/* ===== ヘッダーの開閉 ===== */
#hdrToggle { margin-left:auto; flex:0 0 auto; padding:2px 8px; font-size:12px; line-height:1.4; color:#888; }
#hdrToggle .lbl { display:none; }
body.hdr-closed header > *:not(#hdrToggle) { display:none !important; }
body.hdr-closed header { padding:0; border-bottom:2px solid var(--ln); }
body.hdr-closed #hdrToggle { margin:0; width:100%; border:0; border-radius:0; background:var(--pk2); color:var(--pk);
  font-weight:bold; padding:5px 0; display:flex; justify-content:center; align-items:center; gap:6px; }
body.hdr-closed #hdrToggle .lbl { display:inline; }
body.hdr-closed #hdrToggle .ar { display:none; }
body.hdr-closed #hdrToggle::after { content:'▼'; }
body.hdr-closed .barpanel { display:none !important; }

/* ===== 横向きのおすすめ ===== */
#rotate[hidden] { display:none !important; }
#rotate { position:fixed; left:0; right:0; bottom:0; z-index:40; display:flex; flex-wrap:wrap; gap:8px 12px;
  align-items:center; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:#fff; border-top:3px solid var(--pk); box-shadow:0 -4px 16px rgba(0,0,0,.12); font-size:13px; }
#rotate .ic { font-size:22px; color:var(--pk); }
#rotate .tx { flex:1 1 auto; line-height:1.5; }
#rotate .tx small { color:#888; font-size:11px; }
#rotate .ck { display:flex; align-items:center; gap:5px; color:#555; white-space:nowrap; }
#rotate .ck input { width:18px; height:18px; }
#rotate button { padding:8px 14px; }