/* 要約: 和風の5列表と難易度5色を保ち、スコアランクを7色の発光と幅を抑えたプルダウンで表示する。 */
:root {
  color-scheme: light;
  --paper: #f4efe5;
  --surface: #fcf9f2;
  --ink: #302c28;
  --muted: #786c5d;
  --indigo: #293e49;
  --vermilion: #a84132;
  --rule: #d7cbb8;
  --serif: 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'Noto Serif JP', 'MS PMincho', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; border-top: 5px solid var(--indigo); background-image: radial-gradient(#987c4f0c .65px, transparent .8px); background-size: 5px 5px; }
button, select { font: inherit; }
button, select { cursor: pointer; }
a { color: var(--vermilion); text-decoration: none; }
a:hover { color: #77382d; text-decoration: underline; }
button:focus-visible, select:focus-visible, a:focus-visible, .table-scroll:focus-visible { outline: 3px solid #527985; outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; top: 10px; left: 10px; padding: 12px 18px; background: var(--surface); z-index: 10; }
.section { padding: 36px 24px 24px; }
.container { width: 100%; max-width: 1152px; margin: 0 auto; }
.center, .has-text-centered { text-align: center; }
.sheet-header { position: relative; padding: 19px 0 12px; }
.sheet-header::before { content: ''; display: block; width: 38px; height: 2px; background: var(--vermilion); margin: 0 auto 22px; }
.sheet-header .subtitle { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 20px; font-family: var(--serif); font-size: 40px; letter-spacing: .13em; font-weight: 600; line-height: 1.5; color: var(--ink); }
.title-seal { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 38px; border: 2px solid var(--vermilion); border-radius: 2px; color: var(--vermilion); font-family: var(--serif); font-size: 23px; font-weight: 600; letter-spacing: 0; line-height: 1; transform: rotate(-4deg); }
.sheet-subtitle { font-size: 13px; letter-spacing: .13em; margin: 0 0 12px; color: var(--muted); }
.sheet-description { font-family: var(--serif); font-size: 14px; letter-spacing: .06em; margin: 0 0 10px; line-height: 1.9; }
.guide-link { display: inline-block; font-size: 11px; letter-spacing: .06em; padding: 5px 10px; }
hr { height: 3px; border: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: transparent; margin: 19px 0 23px; }
.table { border-collapse: collapse; border-spacing: 0; color: var(--ink); background: var(--surface); }
.is-fullwidth { width: 100%; }
.easy { color: #9b4523; background: #fce5d6; }
.normal { color: #4f6a21; background: #e5f0cf; }
.hard { color: #7d5c0b; background: #fff0bc; }
.oni { color: #96365e; background: #f7dfeb; }
.ura { color: #704393; background: #e9ddf4; }
.table-scroll { overflow-x: auto; width: 100%; border: 1px solid #a2957e; box-shadow: 0 4px 16px #5b4d3206; -webkit-overflow-scrolling: touch; }
#sheet-list-table { width: 100%; table-layout: fixed; }
#sheet-list-table th { height: 40px; padding: 8px 0; background: var(--indigo); border-top: 1px solid #bdab84; border-bottom: 1px solid #1b2d36; text-align: center; color: #f6efdf; }
#sheet-list-table h3 { position: sticky; left: 0; width: calc(100vw - 50px); max-width: 100%; font-family: var(--serif); font-size: 16px; letter-spacing: .15em; line-height: 1.4; margin: 0; font-weight: 600; }
#sheet-list-table td { width: 20%; height: 59px; padding: 0; border-bottom: 1px solid var(--rule); border-right: 1px solid #e2d8c7; text-align: center; vertical-align: middle; }
#sheet-list-table td:last-child { border-right: 0; }
#sheet-list-table tbody:last-child tr:last-child td { border-bottom: 0; }
.chart-cell { width: 100%; min-height: 58px; display: block; border: 0; background: none; color: var(--ink); padding: 13px 9px 8px; font-family: var(--serif); font-weight: 600; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; text-align: center; transition: background .15s; }
.chart-annotation { display: inline-block; white-space: nowrap; font-size: 12px; }
.difficulty-label { padding: 1px 3px; border-radius: 2px; }
.chart-level { color: var(--muted); font-family: var(--sans); font-size: 11px; font-weight: 500; }
.empty-cell { background: #f5efe3; }
.chart-entry { position: relative; vertical-align: top !important; transition: background .22s, box-shadow .22s; }
#sheet-list-table td.chart-entry { padding-bottom: 44px; }
.score-control { position: absolute; left: 12px; right: 12px; bottom: 10px; padding: 0; }
.score-select { width: 112px; max-width: 100%; min-width: 0; height: 31px; padding: 0 24px 0 9px; border: 1px solid #b9ab95; border-radius: 3px; background-color: #fffaf2d9; color: var(--ink); font-family: var(--sans); font-size: 12px; }
.score-select option { background: #fffaf2; color: var(--ink); }
[data-score-rank='sui-white'] { --score-fill: linear-gradient(130deg, #ffffff 10%, #edf1f5 52%, #ffffff 85%); --score-glow: #ffffff; --score-edge: #a8b4c0; }
[data-score-rank='sui-bronze'] { --score-fill: linear-gradient(130deg, #fbe6d4, #d8a27b 48%, #fff0e1); --score-glow: #e8b083b3; --score-edge: #b67a4f; }
[data-score-rank='sui-silver'] { --score-fill: linear-gradient(130deg, #f8fbff, #c5ced6 48%, #f9fcff); --score-glow: #c7d8ecb3; --score-edge: #8f9fae; }
[data-score-rank='miyabi-gold'] { --score-fill: linear-gradient(130deg, #fff8d6, #e7c66a 48%, #fffbdf); --score-glow: #f1d15eb3; --score-edge: #b69435; }
[data-score-rank='miyabi-sakura'] { --score-fill: linear-gradient(130deg, #fff0f6, #f2b8d1 48%, #fff2f7); --score-glow: #f3a6ccb3; --score-edge: #ca82a3; }
[data-score-rank='miyabi-purple'] { --score-fill: linear-gradient(130deg, #f3eaff, #c9ace9 48%, #f6edff); --score-glow: #c29aeab3; --score-edge: #9571ba; }
[data-score-rank='kiwami-rainbow'] { --score-fill: linear-gradient(120deg, #ffe0e0, #fff1bd 17%, #e4f1c8 33%, #ccf3e9 50%, #d9e7ff 67%, #e7d8fa 83%, #ffe0f0); --score-glow: #e6b7ff99; --score-edge: #a58dba; }
.chart-entry[data-score-rank]:not([data-score-rank='']), .score-chip { background: var(--score-fill); box-shadow: inset 0 0 0 1px var(--score-edge), inset 0 0 24px 3px var(--score-glow); }
.chart-entry[data-score-rank]:not([data-score-rank='']) .score-select { border-color: var(--score-edge); }
.score-save-status { margin: 12px 0 0; min-height: 18px; font-size: 11px; line-height: 1.7; color: var(--muted); }
.score-save-status.save-unavailable { color: var(--vermilion); }
.score-rank-legend { display: flex; flex-wrap: wrap; gap: 12px 17px; margin: 15px 0 17px; }
.score-legend-item { display: flex; align-items: center; gap: 8px; }
.score-chip { display: inline-block; min-width: 60px; border-radius: 3px; padding: 5px 8px; font-family: var(--serif); font-size: 13px; font-weight: 600; text-align: center; color: var(--ink); }
.score-legend-condition { font-size: 11px; color: var(--muted); }
.about { margin-top: 30px; padding: 24px 0; border-top: 3px double var(--rule); }
.about h2 { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: .1em; margin: 0 0 14px; padding-left: 12px; border-left: 3px solid var(--vermilion); color: var(--ink); }
.about h3 { font-family: var(--serif); font-size: 16px; margin: 23px 0 12px; font-weight: 600; }
.about p { font-size: 12px; line-height: 1.9; margin: 7px 0; color: var(--muted); }
.about .rank-guide { font-family: var(--serif); font-size: 14px; font-weight: 600; color: var(--indigo); overflow-wrap: anywhere; }
.mobile-hint { color: var(--muted); }
.site-footer { border-top: 1px solid var(--rule); padding: 22px 0 0; display: flex; justify-content: space-between; gap: 20px; font-size: 11px; color: var(--muted); }
@media (max-width: 600px) { .section { padding: 22px 14px 20px; } .sheet-header { padding-top: 12px; } .sheet-header::before { width: 28px; margin-bottom: 18px; } .sheet-header .subtitle { gap: 10px; font-size: 29px; letter-spacing: .07em; margin-bottom: 16px; } .title-seal { width: 26px; height: 31px; font-size: 19px; } .sheet-subtitle { font-size: 11px; } .sheet-description { font-size: 12px; letter-spacing: 0; } hr { margin: 17px 0 20px; } .about { margin-top: 25px; } .about p { font-size: 11px; } .about .rank-guide { font-size: 12px; } .site-footer { font-size: 10px; gap: 12px; } #sheet-list-table h3 { width: calc(100vw - 30px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
/* 画面幅にかかわらず5列を収め、細いセルでは文字と選択欄を折り返して表示する。 */
@media (max-width: 600px) {
  .section { padding-left: 5px; padding-right: 5px; }
  #sheet-list-table h3 { width: 100%; }
  .chart-cell { padding: 8px 2px 6px; font-size: 10px; line-height: 1.6; min-height: 58px; }
  .chart-song { overflow-wrap: anywhere; }
  .chart-annotation { display: block; white-space: normal; font-size: 9px; }
  .difficulty-label { padding: 1px; }
  .chart-level { display: inline-block; font-size: 9px; }
  #sheet-list-table td.chart-entry { padding-bottom: 41px; }
  .score-control { left: 2px; right: 2px; bottom: 8px; padding: 0; }
  .score-select { width: 100%; max-width: 100%; padding: 0 1px; font-size: 10px; height: 29px; }
}

/* 各版へのリンクはヘッダー右端に控えめに配置する。 */
.sheet-header { position: relative; }
.edition-link { position: absolute; top: 0; right: 0; font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: 0; color: var(--muted); text-decoration: none; }
.edition-link:hover { text-decoration: underline; }

/* 譜面リンクは従来の文字色を保ち、操作時にリンクであることを示す。 */
a.chart-cell:hover { color: var(--vermilion); text-decoration: underline; text-underline-offset: 3px; }
a.chart-cell:focus-visible { outline-offset: -3px; }