:root{
    --bg:#14110E; --bg2:#1C1814; --surface:#211C16; --surface2:#2A241D;
    --ink:#EFE6D6; --ink-dim:#B7AC99; --ink-mute:#837868;
    --brass:#D9A441; --brass-deep:#B07F2C; --brass-soft:rgba(217,164,65,.12);
    --line:rgba(217,164,65,.16); --line-soft:rgba(239,230,214,.08);
    --display:"Fraunces",Georgia,"Times New Roman",serif;
    --sans:"Zen Kaku Gothic New",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
    --mincho:"Shippori Mincho","Hiragino Mincho ProN",serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    background:var(--bg); color:var(--ink); font-family:var(--sans);
    line-height:1.6; -webkit-font-smoothing:antialiased;
    padding-bottom:env(safe-area-inset-bottom);
  }
  a{color:inherit}

  /* ---- ヘッダ / 検索バー ---- */
  header{
    position:sticky; top:0; z-index:20; background:rgba(20,17,14,.92);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
    padding:14px 16px calc(12px) ; padding-top:calc(14px + env(safe-area-inset-top));
  }
  .header-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px}
  .wordmark{display:flex; align-items:baseline; gap:9px; margin:0}
  .wordmark .mark{
    font-family:var(--display); font-weight:500; font-size:20px; letter-spacing:.2px;
  }
  .wordmark .mark em{font-style:italic; color:var(--brass)}
  .wordmark .sub{font-size:11px; color:var(--ink-mute); letter-spacing:.08em}
  .lang-switch{
    flex:none; font-size:12px; color:var(--ink-dim); text-decoration:none;
    border:1px solid var(--line); border-radius:999px; padding:5px 12px; white-space:nowrap;
  }
  .lang-switch:hover{color:var(--brass); border-color:var(--brass)}

  .search{position:relative}
  .search input{
    width:100%; font-family:var(--sans); font-size:16px; color:var(--ink);
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:12px 14px 12px 40px; outline:none;
  }
  .search input::placeholder{color:var(--ink-mute)}
  .search input:focus{border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-soft)}
  .search .glass{
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    width:16px; height:16px; opacity:.55;
  }

  .controls{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}
  .controls select{
    font-family:var(--sans); font-size:13px; color:var(--ink-dim);
    background:var(--surface); border:1px solid var(--line); border-radius:9px;
    padding:8px 28px 8px 11px; outline:none; cursor:pointer; flex:1 1 auto; min-width:0;
    appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23837868' stroke-width='1.4'/></svg>");
    background-repeat:no-repeat; background-position:right 11px center;
  }
  .controls select:focus{border-color:var(--brass)}

  .tagrow{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap}
  .tag{
    font-family:var(--sans); font-size:11.5px; color:var(--ink-dim);
    background:transparent; border:1px solid var(--line-soft); border-radius:999px;
    padding:5px 11px; cursor:pointer; transition:background .12s,border-color .12s,color .12s;
  }
  .tag[aria-pressed="true"]{
    background:var(--brass-soft); border-color:var(--brass); color:var(--brass);
  }

  /* ---- 件数 / 一覧 ---- */
  .meta{padding:14px 16px 4px; font-size:12px; color:var(--ink-mute); letter-spacing:.04em}
  .meta b{color:var(--brass); font-weight:700; font-variant-numeric:tabular-nums}

  ul.list{list-style:none; margin:0; padding:4px 12px 40px}
  li.row{
    display:flex; align-items:center; gap:12px; padding:13px 12px;
    border-bottom:1px solid var(--line-soft); cursor:pointer; border-radius:10px;
    transition:background .12s;
  }
  li.row:hover{background:var(--surface)}
  li.row .name{
    font-family:var(--display); font-weight:500; font-size:17px; line-height:1.25;
    flex:1 1 auto; min-width:0;
  }
  li.row .sub{font-family:var(--sans); font-size:11.5px; color:var(--ink-mute); margin-top:3px}
  li.row .chev{color:var(--ink-mute); flex:0 0 auto}
  .unknown{color:var(--ink-mute); font-style:normal}
  .empty{padding:48px 24px; text-align:center; color:var(--ink-mute); font-size:14px}

  /* ---- 詳細シート ---- */
  .scrim{
    position:fixed; inset:0; z-index:40; background:rgba(8,6,4,.6);
    backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .2s;
  }
  .scrim.open{opacity:1; pointer-events:auto}
  .sheet{
    position:fixed; z-index:50; left:0; right:0; bottom:0; top:0;
    background:var(--bg2); display:flex; flex-direction:column;
    transform:translateY(100%); transition:transform .26s cubic-bezier(.2,.7,.25,1);
    overscroll-behavior:contain;
  }
  .sheet.open{transform:translateY(0)}
  .sheet-bar{
    display:flex; align-items:center; gap:12px; padding:14px 16px;
    padding-top:calc(14px + env(safe-area-inset-top));
    border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg2);
  }
  .sheet-bar button{
    font-family:var(--sans); font-size:14px; color:var(--ink-dim);
    background:transparent; border:0; cursor:pointer; padding:6px 4px; display:flex; align-items:center; gap:6px;
  }
  .sheet-bar .ttl{font-size:12px; color:var(--ink-mute); letter-spacing:.08em; margin-left:auto}
  .sheet-body{padding:8px 22px 28px; overflow-y:auto; -webkit-overflow-scrolling:touch}

  .d-eyebrow{font-size:11.5px; color:var(--brass); letter-spacing:.12em; text-transform:uppercase; margin:18px 0 6px}
  .d-title{font-family:var(--display); font-weight:500; font-size:30px; line-height:1.15; margin:0 0 14px}
  .d-line{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px}
  .pill{
    font-family:var(--sans); font-size:12.5px; color:var(--ink-dim);
    border:1px solid var(--line); border-radius:8px; padding:6px 11px;
  }
  .pill .k{color:var(--ink-mute); margin-right:7px; font-size:11px}

  .d-h{font-family:var(--sans); font-size:12px; color:var(--ink-mute); letter-spacing:.06em; margin:24px 0 9px; border-top:1px solid var(--line-soft); padding-top:18px}
  .chips{display:flex; gap:7px; flex-wrap:wrap}
  .chord{
    font-family:var(--sans); font-weight:500; font-size:13px; color:var(--brass);
    background:var(--brass-soft); border:1px solid var(--line); border-radius:7px; padding:6px 12px;
  }
  .book{
    display:inline-flex; align-items:center; gap:7px;
    font-family:var(--sans); font-size:13px; color:var(--ink-dim);
    border:1px solid var(--line-soft); border-radius:8px; padding:7px 12px;
  }
  .book svg{opacity:.6}
  .book b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}
  .note{font-family:var(--mincho); font-size:16px; line-height:1.95; color:var(--ink); margin:0}
  .orig{margin:0; padding:0; list-style:none}
  .orig li{font-size:13px; color:var(--ink-dim); padding:5px 0; border-bottom:1px dashed var(--line-soft)}
  .orig li:last-child{border-bottom:0}

  .omni{
    display:inline-flex; align-items:center; gap:7px;
    font-family:var(--sans); font-size:13px; color:var(--ink-dim);
    border:1px solid var(--line-soft); border-radius:8px; padding:7px 12px;
  }
  .omni svg{opacity:.6}
  .omni b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}
  .omni .key-tag{
    font-size:10.5px; font-weight:700; color:var(--brass); background:var(--brass-soft);
    border-radius:4px; padding:2px 5px; margin-left:2px;
  }

  .realbook{
    display:inline-flex; align-items:center; gap:7px;
    font-family:var(--sans); font-size:13px; color:var(--ink-dim);
    border:1px solid var(--line-soft); border-radius:8px; padding:7px 12px;
  }
  .realbook svg{opacity:.6}
  .realbook b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}

  /* ---- iReal ボタン ---- */
  .cta-wrap{
    position:sticky; bottom:0; background:linear-gradient(to top,var(--bg2) 70%,transparent);
    padding:16px 22px calc(18px + env(safe-area-inset-bottom));
    margin-top:8px;
  }
  a.cta{
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; font-family:var(--sans); font-weight:700; font-size:16px;
    color:#1A1206; background:var(--brass); border-radius:13px; padding:16px;
    text-decoration:none; border:1px solid var(--brass-deep);
    box-shadow:0 6px 22px rgba(217,164,65,.22);
  }
  a.cta:active{transform:translateY(1px)}
  a.cta-spotify{
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; font-family:var(--sans); font-weight:700; font-size:15px;
    color:#fff; background:#1DB954; border-radius:13px; padding:14px 16px;
    text-decoration:none; border:1px solid #1aa34a;
    box-shadow:0 4px 16px rgba(29,185,84,.18); margin-top:10px;
  }
  a.cta-spotify:active{transform:translateY(1px)}
  .cta-foot{text-align:center; font-size:11.5px; color:var(--ink-mute); margin-top:11px}
  .cta-foot a{color:var(--ink-dim); text-decoration:underline; text-underline-offset:2px}

  @media (min-width:760px){
    .sheet{top:5vh; bottom:5vh; left:50%; right:auto; width:min(620px,92vw);
           transform:translate(-50%,110%); border-radius:18px; border:1px solid var(--line);
           box-shadow:0 30px 80px rgba(0,0,0,.5); overflow:hidden}
    .sheet.open{transform:translate(-50%,0)}
    ul.list{padding-left:max(12px,calc((100vw - 760px)/2)); padding-right:max(12px,calc((100vw - 760px)/2))}
    header{padding-left:max(16px,calc((100vw - 760px)/2)); padding-right:max(16px,calc((100vw - 760px)/2))}
    .meta{padding-left:max(16px,calc((100vw - 760px)/2))}
  }
  @media (prefers-reduced-motion:reduce){
    .scrim,.sheet{transition:none}
  }

  /* ---- フッター(全ページ共通) ---- */
  .app-footer{
    text-align:center; color:var(--ink-mute); font-size:12px;
    padding:24px 20px; border-top:1px solid var(--line-soft);
  }
  .app-footer p{margin:4px 0}
  .footer-links a{color:var(--ink-dim); margin:0 6px; text-decoration:none}
  .footer-links a:hover{color:var(--brass)}
  .footer-donate a{
    display:inline-block; margin-top:8px; color:var(--brass);
    border:1px solid var(--line); border-radius:8px; padding:6px 14px;
    text-decoration:none; font-size:12.5px;
  }
  .footer-donate a:hover{background:var(--brass-soft)}

  /* ---- 運営者情報 / プライバシーポリシー(静的ページ)---- */
  .static-header{
    display:flex; align-items:center; position:sticky; top:0; z-index:20;
    background:rgba(20,17,14,.92); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line); padding:14px 16px;
    padding-top:calc(14px + env(safe-area-inset-top));
  }
  .static-header a.brand{
    font-family:var(--display); font-weight:500; font-size:18px; color:var(--ink);
    text-decoration:none;
  }
  .static-header a.brand em{font-style:italic; color:var(--brass)}
  .static-header .back{
    margin-left:auto; font-family:var(--sans); font-size:13px; color:var(--ink-dim);
    text-decoration:none;
  }
  .static-header .back:hover{color:var(--brass)}
  .static-main{max-width:640px; margin:0 auto; padding:28px 20px 60px}
  .page-title{font-family:var(--display); font-weight:500; font-size:24px; margin:0 0 8px}
  .page-lead{color:var(--ink-dim); font-size:14px; line-height:1.8; margin:0 0 24px}
  .card{
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:16px 18px; margin-bottom:20px;
  }
  .card p{margin:6px 0; font-size:14px; line-height:1.8; color:var(--ink-dim)}
  .card a{color:var(--brass)}