:root {
  --more-border-color: var(--border-color, #e7e7e7);
  --more-text-main: var(--text-main, #222222);
  --more-text-sub: var(--text-sub, #666666);
  --more-bg-soft: var(--bg-soft, #fafafa);
  --more-shadow-soft: var(--shadow-soft, 0 8px 20px rgba(0, 0, 0, 0.06));
  --more-radius-l: 20px;
  --more-scrollbar-size: 10px;
  --more-scrollbar-thumb: rgba(34, 34, 34, 0.28);
  --more-scrollbar-thumb-hover: rgba(34, 34, 34, 0.42);
  --more-scrollbar-track: rgba(0, 0, 0, 0.04);
}
body[data-page="m"] { min-height: 100svh; }
body[data-page="m"] > header, body[data-page="m"] > footer { display: none; }
body[data-page="m"] main { min-height: 100svh; height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; padding-top: 0; padding-bottom: env(safe-area-inset-bottom, 0px); overflow: hidden; }
.more-scroll-area { min-height: 0; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; scrollbar-color: var(--more-scrollbar-thumb) var(--more-scrollbar-track); }
.more-scroll-area::-webkit-scrollbar { width: var(--more-scrollbar-size); }
.more-scroll-area::-webkit-scrollbar-track { background: var(--more-scrollbar-track); border-radius: 999px; }
.more-scroll-area::-webkit-scrollbar-thumb { background: var(--more-scrollbar-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.more-scroll-area::-webkit-scrollbar-thumb:hover { background: var(--more-scrollbar-thumb-hover); background-clip: padding-box; }
.more-scroll-area > * + * { margin-top: 12px; }
.more-top-group { position: sticky; top: 0; z-index: 20; background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.98) 72%, rgba(255, 255, 255, 0) 100%); }
.more-signboard { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.more-signboard-copy { min-width: 0; flex: 1; }
.more-signboard h1 { font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.more-signboard p { margin-top: 2px; font-size: 10px; color: var(--more-text-sub); line-height: 1.4; }
.more-signboard-logo { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; }
.more-signboard-logo-image { display: block; height: 80px; width: auto; max-width: 100%; }
.more-page-player, .more-page-dock, .more-player-context { border: 1px solid var(--more-border-color); border-radius: var(--more-radius-l); background: rgba(255, 255, 255, 0.96); box-shadow: var(--more-shadow-soft); backdrop-filter: blur(8px); }
.more-page-player { padding: 12px; }
.more-player-context { margin-top: 0; padding: 0 12px; display: flex; justify-content: flex-start; align-items: flex-start; gap: 12px; }
.more-player-now-playing { display: flex; align-items: flex-start; gap: 16px; }
.more-now-artwork { width: 120px; aspect-ratio: 1 / 1; border-radius: 16px; background: #cccccc; overflow: hidden; flex: 0 0 auto; }
.more-now-main { min-width: 0; flex: 1; display: flex; flex-direction: column; align-self: stretch; }
.more-now-topline { display: flex; justify-content: flex-end; align-items: flex-start; }
.more-download-button { min-width: 120px; height: 42px; padding: 0 18px; border: 1px solid var(--more-border-color); border-radius: 999px; background: #ffffff; color: var(--more-text-main); font-weight: 400; white-space: nowrap; }
.more-download-button:disabled { opacity: 0.45; cursor: default; }
.more-now-filename { min-width: 0; margin-top: auto; font-size: 13px; font-weight: 700; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more-player-context-archive { min-width: 0; flex: 0 0 244px; width: 244px; }
.more-player-context-length { flex: 0 0 200px; width: 200px; }
.more-archive-current-pills { display: flex; gap: 12px; align-items: stretch; }
.more-archive-current-pill { min-width: 0; flex: 1 1 0; min-height: 76px; padding: 12px 14px; border: 1px solid var(--more-border-color); border-radius: 16px; background: var(--more-bg-soft); box-shadow: var(--more-shadow-soft); display: flex; flex-direction: column; justify-content: center; }
.more-archive-current-label { font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; color: var(--more-text-sub); }
.more-archive-current-value { margin-top: 3px; font-size: 20px; font-weight: 800; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more-length-current-artwork { position: relative; width: 100%; aspect-ratio: 220 / 85; border: 1px solid var(--more-border-color); border-radius: 16px; background: var(--more-bg-soft); overflow: hidden; box-shadow: var(--more-shadow-soft); }
.more-length-current-fallback, .more-length-current-image { position: absolute; inset: 0; }
.more-length-current-fallback { padding: 12px 14px; background: var(--more-bg-soft); display: flex; flex-direction: column; justify-content: center; }
.more-length-current-sec { font-size: clamp(18px, 2vw, 22px); font-weight: 800; line-height: 1.1; color: #222222; white-space: nowrap; }
.more-length-current-label { margin-top: 2px; font-size: clamp(11px, 1.2vw, 13px); line-height: 1.3; color: #555555; white-space: nowrap; }
.more-length-current-image { width: 100%; height: 100%; object-fit: cover; }
.more-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.more-list-empty { padding: 24px 16px; border: 1px solid var(--more-border-color); border-radius: 16px; background: var(--more-bg-soft); color: var(--more-text-sub); }
.more-card-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; color: var(--more-text-main); font: inherit; -webkit-appearance: none; appearance: none; }
.more-card-artwork { width: 100%; aspect-ratio: 1 / 1; border-radius: 16px; background: #cccccc; overflow: hidden; box-shadow: var(--more-shadow-soft); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.more-card-text { margin-top: 4px; }
.more-card-title, .more-card-meta { font-size: 12px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.more-card-title { color: inherit; -webkit-text-fill-color: currentColor; }
.more-card-meta { color: var(--more-text-sub); -webkit-text-fill-color: currentColor; }
.more-card[aria-current="true"] .more-card-artwork { box-shadow: 0 0 0 2px #222222 inset, var(--more-shadow-soft); }
.more-card[aria-current="true"] .more-card-title { font-weight: 700; }
.more-page-dock { position: relative; min-width: 0; padding: 0 12px env(safe-area-inset-bottom, 0px); }
.more-page-dock-progress { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 10px; align-items: center; margin-top: 12px; }
.more-page-dock-time { font-size: 12px; font-weight: 700; line-height: 1; text-align: center; color: var(--more-text-sub); font-variant-numeric: tabular-nums; }
.more-page-dock-transport { margin-top: 12px; padding-bottom: 5px; align-items: center; justify-content: center; gap: 12px; }
.more-page-dock-transport button { position: relative; padding: 0; border: 0; background: transparent; color: inherit; border-radius: 999px; flex: 0 0 auto; transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease; }
.more-page-dock-transport button:hover { filter: brightness(0.98); }
.more-page-dock-transport button:active { transform: scale(0.98); }
.more-page-dock-transport button:focus-visible, .more-card-button:focus-visible, .more-download-button:focus-visible { outline: 2px solid #222222; outline-offset: 2px; }
.more-page-dock-transport button[data-more-transport-role="seek-backward-15"], .more-page-dock-transport button[data-more-transport-role="seek-forward-15"] { min-width: 52px; height: 40px; padding: 0 14px; border: 1px solid #7f7f7f; background: #7f7f7f; color: #ffffff; font-size: 14px; font-weight: 700; line-height: 1; }
.more-page-dock-transport button[data-more-transport-role="restart"], .more-page-dock-transport button[data-more-transport-role="next"] { width: 46px; height: 46px; }
.more-page-dock-transport button[data-more-transport-role="primary-play"], .more-page-dock-transport button[data-more-transport-role="primary-pause"] { width: 70px; height: 70px; }
.more-page-dock-transport button[data-more-transport-role="restart"] .transport-button-icon, .more-page-dock-transport button[data-more-transport-role="next"] .transport-button-icon { background-image: url("transport-skip.svg"); }
.more-page-dock-transport button[data-more-transport-role="restart"] .transport-button-icon { transform: scaleX(-1); }
.more-page-dock-transport button[data-more-transport-role="primary-play"] .transport-button-icon { background-image: url("transport-play.svg"); }
.more-page-dock-transport button[data-more-transport-role="primary-pause"] .transport-button-icon { background-image: url("transport-pause.svg"); }
.more-page-dock-transport button[data-more-transport-role="primary-pause"] { display: none; }
body[data-more-transport-ui-state="playing"] .more-page-dock-transport button[data-more-transport-role="primary-play"] { display: none; }
body[data-more-transport-ui-state="playing"] .more-page-dock-transport button[data-more-transport-role="primary-pause"] { display: block; }
body[data-more-transport-ui-state="playing"] .more-page-dock-transport button[data-more-transport-role="primary-pause"] .transport-button-icon { background-image: url("transport-pause-active.svg"); }
body[data-more-transport-ui-state="paused"] .more-page-dock-transport button[data-more-transport-role="primary-play"] .transport-button-icon { background-image: url("transport-play-active.svg"); }
body[data-more-skip-flash="1"] .more-page-dock-transport button[data-more-transport-role="next"] .transport-button-icon { background-image: url("transport-skip-active.svg"); }
@media (max-width: 640px) {
  body[data-page="m"] main { gap: 10px; padding: 10px; padding-top: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .more-signboard { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: 12px; }
  .more-signboard-logo a { display: block; width: min(100%, 144px); margin-left: auto; }
  .more-signboard-logo-image { width: 100%; height: auto; }
  .more-page-player, .more-page-dock, .more-player-context { border-radius: 16px; }
  .more-page-player { padding: 10px; }
  .more-player-context {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: stretch;
    gap: 10px;
    padding: 0 10px;
  }

  .more-player-context-archive,
  .more-player-context-length {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
  }

  .more-player-context-archive {
    display: flex;
    flex-direction: column;
  }
  .more-player-now-playing { align-items: flex-start; gap: 10px; }
  .more-now-artwork { width: clamp(100px, 32vw, 144px); }
  .more-now-main { width: 100%; min-width: 0; flex: 1 1 auto; }
  .more-now-topline { flex-wrap: wrap; gap: 8px; }
  .more-download-button { min-width: 0; width: 100%; }
  .more-now-filename { margin-top: 10px; white-space: normal; overflow: visible; text-overflow: clip; word-break: break-word; }
  .more-archive-current-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    height: 100%;
    align-items: stretch;
  }

  .more-archive-current-pill {
    min-height: 0;
    height: 100%;
    padding: 8px 10px;
    justify-content: center;
    align-items: center;
  }

  .more-archive-current-value {
    margin-top: 0;
    font-size: clamp(16px, 5vw, 20px);
    text-align: center;
  }
  .more-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .more-page-dock-progress { grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 8px; }
  .more-page-dock-transport { gap: 8px; }
  .more-page-dock-transport button[data-more-transport-role="seek-backward-15"], .more-page-dock-transport button[data-more-transport-role="seek-forward-15"] { min-width: 44px; height: 34px; padding: 0 10px; font-size: 12px; }
  .more-page-dock-transport button[data-more-transport-role="restart"], .more-page-dock-transport button[data-more-transport-role="next"] { width: 38px; height: 38px; }
  .more-page-dock-transport button[data-more-transport-role="primary-play"], .more-page-dock-transport button[data-more-transport-role="primary-pause"] { width: 54px; height: 54px; }
}

@media (max-width: 480px) {
  .more-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .more-card-text {
    margin-top: 3px;
  }

  .more-card-title,
  .more-card-meta {
    font-size: 9px;
    line-height: 1.2;
  }
}