/* ============================================================
   ホームリスニング 共通コンポーネント
   foundations.css → tokens.css → components.css の順で読込
   ============================================================ */

/* ---------- リセット&共通 ---------- */
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- スマホ枠（保護者画面の視覚的な"電話の中"表現）---------- */
.hl-phone-frame {
  max-width: var(--eq-max-w);
  margin: 0 auto;
  background: var(--eq-bg);
  min-height: 100vh;
  position: relative;
}

/* ---------- ヘッダー ----------
   3カラム grid: [ロゴ(左)] [タイトル(中央)] [メニュー(右)]
   タイトルは画面中央に固定する */
.hl-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--eq-s-3) var(--eq-gutter);
  border-bottom: 1px solid var(--eq-border);
  background: var(--eq-bg);
  position: sticky;
  top: 0;
  z-index: 10;
  gap: var(--eq-s-2);
}

.hl-header__logo { height: 24px; }
/* 左セル：ロゴまたは戻る矢印 */
.hl-header__left {
  display: inline-flex;
  align-items: center;
  justify-self: start;
}
/* 中央セル：画面タイトル */
.hl-header__title {
  justify-self: center;
  text-align: center;
  font-weight: var(--eq-fw-bold);
  color: var(--eq-teal-ink);
  letter-spacing: var(--eq-ls-wide);
  font-size: 16px;
  white-space: nowrap;
}
/* 右セル：ハンバーガー等 */
.hl-header__menu {
  background: transparent;
  border: 0;
  padding: var(--eq-s-2);
  color: var(--eq-fg1);
  justify-self: end;
}

/* ---------- 兄弟切替タブ（ヘッダー直下） ---------- */
.hl-sibling-tabs {
  display: flex;
  border-bottom: 1px solid var(--eq-border);
  background: var(--eq-bg);
}
.hl-sibling-tab {
  flex: 1;
  padding: var(--eq-s-3) var(--eq-s-2);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--eq-fg2);
  font-size: var(--eq-fs-body);
  font-weight: var(--eq-fw-med);
  text-align: center;
  transition: color var(--eq-dur) var(--eq-ease),
              border-color var(--eq-dur) var(--eq-ease);
}
.hl-sibling-tab--active {
  color: var(--eq-teal-ink);
  border-bottom-color: var(--eq-teal);
}
.hl-sibling-tab__name { display: block; font-size: var(--eq-fs-body); font-weight: var(--eq-fw-bold); }
.hl-sibling-tab__sub  { display: block; font-size: var(--eq-fs-caption); color: var(--eq-fg2); margin-top: 2px; }

/* ---------- カード ---------- */
.hl-card {
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-lg);
  padding: var(--eq-s-4);
  background: var(--eq-bg);
}
.hl-card + .hl-card { margin-top: var(--eq-card-gap); }
/* リスト系カードで内側 padding をリスト行に委譲する場合 (04-detail #monthList 等) */
.hl-card--flush { padding: 0; overflow: hidden; }

/* ---------- ボタン ---------- */
.hl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--eq-r-md);
  font-size: var(--eq-fs-body);
  font-weight: var(--eq-fw-bold);
  border: 1.5px solid var(--eq-teal);
  background: var(--eq-bg);
  color: var(--eq-teal-ink);
  transition: opacity var(--eq-dur) var(--eq-ease);
}
.hl-btn:active { opacity: 0.7; }
.hl-btn:focus-visible { outline: none; box-shadow: var(--eq-shadow-focus); }

.hl-btn--primary {
  background: var(--eq-teal);
  color: var(--eq-fg-invert);
}
.hl-btn--ghost {
  border-color: var(--eq-border);
  color: var(--eq-fg1);
}
.hl-btn--block { width: 100%; }
.hl-btn--lg { padding: 14px 20px; font-size: 15px; }

/* CTA red — 体験レッスン専用。HLでは使わないが念のため定義のみ */

/* ---------- 教材グリッド ---------- */
.hl-grid {
  display: grid;
  grid-template-columns: var(--hl-grid-row-label-w) repeat(13, var(--hl-grid-cell-w));
  /* 列: [行頭ラベル] [桃] [4月] ... [3月]  = 1 + 13 = 14 columns */
  gap: var(--hl-grid-cell-gap);
  padding: var(--eq-s-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.hl-grid__col-header {
  height: var(--hl-grid-col-label-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg2);
  font-weight: var(--eq-fw-med);
}

.hl-grid__row-label {
  width: var(--hl-grid-row-label-w);
  height: var(--hl-grid-cell-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--eq-fs-small);
  font-weight: var(--eq-fw-bold);
  color: #fff;
  border-radius: var(--eq-r-sm);
  writing-mode: vertical-rl;
}

.hl-grid__cell {
  width: var(--hl-grid-cell-w);
  height: var(--hl-grid-cell-h);
  border-radius: var(--eq-r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: var(--eq-fs-caption);
  background: var(--hl-status-locked-bg);
  color: var(--hl-status-locked-fg);
  border: 1px solid var(--hl-status-locked-bd);
  cursor: pointer;
  transition: opacity var(--eq-dur) var(--eq-ease);
  position: relative;
}
.hl-grid__cell:active { opacity: 0.7; }
.hl-grid__cell--locked { /* default styles */ }
.hl-grid__cell--purchased {
  /* 学年色 tint で塗りつぶす。学年色は親要素の data-grade で当てる */
}

.hl-grid__cell--current {
  /* 当月は太いteal outline + 薄いhalo で「最も目立つ」状態に */
  outline: 3px solid var(--eq-teal) !important;
  outline-offset: -1px;
  box-shadow: 0 0 0 4px rgba(0, 174, 161, 0.18);
  z-index: 2;
}
.hl-grid__cell--current::after {
  content: "今月";
  position: absolute;
  top: -10px;
  right: -6px;
  font-size: 10px;
  font-weight: 700;
  background: var(--eq-teal);
  color: #fff;
  padding: 2px 7px;
  border-radius: var(--eq-r-pill);
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  z-index: 3;
}

/* ---------- 教材グリッド・縦型レイアウト（推奨：スマホ幅に収まり横スクロール不要） ---------- */
/* 横軸=学年(最大7) / 縦軸=月(12)。月ラベルは行頭、学年色チップは列頭 */
.hl-grid--vertical {
  display: grid;
  grid-template-columns: 40px repeat(var(--hl-grid-cols, 7), minmax(0, 1fr));
  gap: 4px;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
}
.hl-grid--vertical .hl-grid__col-header-grade {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  border-radius: var(--eq-r-sm);
  font-size: var(--eq-fs-small);
  font-weight: var(--eq-fw-bold);
  color: #fff;
  letter-spacing: 0;
}
.hl-grid--vertical .hl-grid__row-label-month {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg2);
  font-weight: var(--eq-fw-med);
}
.hl-grid--vertical .hl-grid__cell {
  width: auto;
  height: auto;
  aspect-ratio: 1 / 1;
  min-width: 0;
  font-size: var(--eq-fs-caption);
}
.hl-grid--vertical .hl-grid__cell .hl-grid__cell-month { display: none; }
.hl-grid--vertical .hl-grid__cell .hl-grid__cell-mark { font-size: 14px; line-height: 1; }
.hl-grid--vertical .hl-grid__corner { /* 左上隅 */ }

/* 購入済セル：tint色とink色を確実に適用（詳細度を上げて hl-grid__cell の locked色を上書き） */
.hl-grid__cell.hl-grade-red-tint    { background: var(--hl-grade-red-tint);    color: var(--hl-grade-red-ink);    border-color: var(--hl-grade-red-ink); }
.hl-grid__cell.hl-grade-orange-tint { background: var(--hl-grade-orange-tint); color: var(--hl-grade-orange-ink); border-color: var(--hl-grade-orange-ink); }
.hl-grid__cell.hl-grade-yellow-tint { background: var(--hl-grade-yellow-tint); color: var(--hl-grade-yellow-ink); border-color: var(--hl-grade-yellow-ink); }
.hl-grid__cell.hl-grade-green-tint  { background: var(--hl-grade-green-tint);  color: var(--hl-grade-green-ink);  border-color: var(--hl-grade-green-ink); }
.hl-grid__cell.hl-grade-blue-tint   { background: var(--hl-grade-blue-tint);   color: var(--hl-grade-blue-ink);   border-color: var(--hl-grade-blue-ink); }
.hl-grid__cell.hl-grade-purple-tint { background: var(--hl-grade-purple-tint); color: var(--hl-grade-purple-ink); border-color: var(--hl-grade-purple-ink); }
.hl-grid__cell.hl-grade-peach-tint  { background: var(--hl-grade-peach-tint);  color: var(--hl-grade-peach-ink);  border-color: var(--hl-grade-peach-ink); }

/* 月ラベルとマークの色 */
.hl-grid__cell .hl-grid__cell-month { font-weight: var(--eq-fw-med); }
.hl-grid__cell .hl-grid__cell-mark  { font-size: 13px; font-weight: 700; line-height: 1; }

/* 兄弟共有セル: 同世帯の兄弟が同学年・同月で購入済の場合に視聴可（要望書6項目） */
/* 当月セルより目立たないよう、薄い破線ボーダー + ◇マークのみで控えめに識別。バッジは削除 */
.hl-grid__cell--shared {
  border: 1px dashed var(--eq-teal-ink) !important;
  opacity: 0.85;
}
.hl-grid__cell--shared .hl-grid__cell-mark {
  font-weight: 700;
  color: var(--eq-teal-ink);
  font-size: 13px;
}
.legend__swatch.hl-grid__cell--shared-swatch {
  border: 1px dashed var(--eq-teal-ink);
  background: var(--hl-grade-blue-tint);
}

/* ---------- バッジ ---------- */
.hl-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--eq-r-pill);
  font-size: var(--eq-fs-caption);
  font-weight: var(--eq-fw-med);
  border: 1px solid var(--eq-border);
  background: var(--eq-bg);
  color: var(--eq-fg2);
}
.hl-badge--success { background: var(--eq-teal-tint); color: var(--eq-teal-ink); border-color: var(--eq-border-teal); }
.hl-badge--warn    { background: var(--hl-status-grace-bg); color: var(--hl-status-grace-fg); border-color: var(--hl-status-grace-bd); }
.hl-badge--blocked { background: var(--hl-status-blocked-bg); color: var(--hl-status-blocked-fg); border-color: var(--hl-status-blocked-bd); }

/* ---------- リストアイテム ---------- */
.hl-list-item {
  display: flex;
  align-items: center;
  gap: var(--eq-s-3);
  padding: var(--eq-s-3);
  border-bottom: 1px solid var(--eq-border-soft);
  background: var(--eq-bg);
}
.hl-list-item:last-child { border-bottom: 0; }
.hl-list-item__thumb {
  width: 56px; height: 56px;
  border-radius: var(--eq-r-md);
  background: var(--eq-bg-muted);
  flex-shrink: 0;
}
.hl-list-item__body { flex: 1; min-width: 0; }
.hl-list-item__title {
  font-size: var(--eq-fs-body);
  font-weight: var(--eq-fw-med);
  color: var(--eq-fg1);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hl-list-item__meta {
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg2);
}

/* ---------- 再生プレイヤー ---------- */
.hl-player {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--eq-bg);
  border-top: 1px solid var(--eq-border);
  box-shadow: var(--eq-shadow-1);
  max-width: var(--eq-max-w);
  margin: 0 auto;
  z-index: 20;
}
.hl-player__bar {
  display: flex;
  align-items: center;
  gap: var(--eq-s-3);
  padding: var(--eq-s-3) var(--eq-gutter);
}
.hl-player__title { flex: 1; min-width: 0; }
.hl-player__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--eq-s-4);
  padding: var(--eq-s-3);
}
.hl-player__btn {
  background: transparent;
  border: 0;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--eq-fg1);
  border-radius: var(--eq-r-pill);
}
.hl-player__btn--main {
  background: var(--eq-teal);
  color: #fff;
  width: 56px; height: 56px;
}
.hl-player__seek {
  flex: 1;
  height: 4px;
  background: var(--eq-border);
  border-radius: var(--eq-r-pill);
  position: relative;
  margin: 0 var(--eq-gutter);
}
.hl-player__seek-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--eq-teal);
  border-radius: var(--eq-r-pill);
}

/* ---------- 通知バナー（決済失敗等）---------- */
.hl-banner {
  display: flex;
  gap: var(--eq-s-3);
  padding: var(--eq-s-3) var(--eq-gutter);
  background: var(--hl-status-grace-bg);
  border-bottom: 1px solid var(--hl-status-grace-bd);
  color: var(--hl-status-grace-fg);
  font-size: var(--eq-fs-small);
}
.hl-banner--blocked {
  background: var(--hl-status-blocked-bg);
  border-bottom-color: var(--hl-status-blocked-bd);
  color: var(--hl-status-blocked-fg);
}

/* ---------- フォーム ---------- */
.hl-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-md);
  font: inherit;
  color: var(--eq-fg1);
  background: var(--eq-bg);
}
.hl-input:focus {
  outline: none;
  border-color: var(--eq-teal);
  box-shadow: var(--eq-shadow-focus);
}
.hl-label {
  display: block;
  font-size: var(--eq-fs-small);
  font-weight: var(--eq-fw-med);
  color: var(--eq-fg2);
  margin-bottom: 6px;
}
.hl-field { margin-bottom: var(--eq-s-4); }

/* ---------- フォーム検証エラー (hlValidateForm) ---------- */
.hl-field--invalid > .hl-input,
.hl-field--invalid .name-row .hl-input,
.hl-field--invalid .hl-input {
  border-color: var(--hl-status-blocked-fg);
  background: #fff5f5;
}
.hl-field--invalid > .hl-input:focus,
.hl-field--invalid .name-row .hl-input:focus,
.hl-field--invalid .hl-input:focus {
  box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.12);
}
.hl-field__error {
  display: block;
  color: var(--hl-status-blocked-fg);
  font-size: var(--eq-fs-caption);
  margin-top: 6px;
  line-height: 1.4;
}
.hl-field__error[hidden] { display: none; }
.hl-field__error::before {
  content: "！ ";
  font-weight: var(--eq-fw-bold);
}

/* ---------- 管理画面レイアウト（PC） ---------- */
.hl-admin {
  display: grid;
  grid-template-columns: var(--hl-admin-sidebar-w) 1fr;
  min-height: 100vh;
}
.hl-admin__sidebar {
  background: var(--eq-bg-footer);
  border-right: 1px solid var(--eq-border);
  padding: var(--eq-s-6) var(--eq-s-4);
}
.hl-admin__main {
  padding: var(--eq-admin-content-pad, var(--eq-s-8));
  max-width: var(--hl-admin-max-w);
}
.hl-admin__nav-item {
  display: block;
  padding: var(--eq-s-3) var(--eq-s-3);
  border-radius: var(--eq-r-md);
  color: var(--eq-fg1);
  text-decoration: none;
  font-size: var(--eq-fs-body);
}
.hl-admin__nav-item--active {
  background: var(--eq-teal-tint);
  color: var(--eq-teal-ink);
  font-weight: var(--eq-fw-bold);
}

/* ---------- テーブル（管理画面） ---------- */
.hl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--eq-fs-body);
}
.hl-table th, .hl-table td {
  padding: var(--eq-s-3) var(--eq-s-4);
  text-align: left;
  border-bottom: 1px solid var(--eq-border);
}
.hl-table th {
  background: var(--eq-bg-muted);
  font-weight: var(--eq-fw-bold);
  font-size: var(--eq-fs-small);
  color: var(--eq-fg2);
  letter-spacing: var(--eq-ls-wide);
}
.hl-table tr:hover td { background: var(--eq-bg-muted); }

/* ---------- ユーティリティ ---------- */
.hl-stack-2 > * + * { margin-top: var(--eq-s-2); }
.hl-stack-3 > * + * { margin-top: var(--eq-s-3); }
.hl-stack-4 > * + * { margin-top: var(--eq-s-4); }
.hl-stack-6 > * + * { margin-top: var(--eq-s-6); }
.hl-row { display: flex; align-items: center; gap: var(--eq-s-3); }
.hl-row--between { justify-content: space-between; }
.hl-text-fg2 { color: var(--eq-fg2); }
.hl-text-center { text-align: center; }
.hl-pad-gutter { padding-left: var(--eq-gutter); padding-right: var(--eq-gutter); }

/* ============================================================
   === F1 ADDITION === 保護者側プロト用 追加コンポーネント
   ============================================================ */

/* ---------- スマホ下部固定タブナビ ---------- */
.hl-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: var(--eq-bg);
  border-top: 1px solid var(--eq-border);
  max-width: var(--eq-max-w);
  margin: 0 auto;
  z-index: 15;
  height: 56px;
}
.hl-bottom-nav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  text-decoration: none;
  color: var(--eq-fg2);
  font-size: 10px;
  background: transparent;
  border: 0;
  border-bottom: 0;
}
.hl-bottom-nav__item--active {
  color: var(--eq-teal-ink);
  font-weight: var(--eq-fw-bold);
}
.hl-bottom-nav__icon {
  font-size: 18px;
  line-height: 1;
}
/* ボトムナビ高さ分のページ末尾余白 */
.hl-page-with-bottom-nav { padding-bottom: 72px; }
.hl-page-with-player { padding-bottom: 200px; }

/* ---------- グリッドの追加状態（決済猶予/停止） ---------- */
.hl-grid__cell--grace {
  background: var(--hl-status-grace-bg);
  color: var(--hl-status-grace-fg);
  border-color: var(--hl-status-grace-bd);
}
.hl-grid__cell--blocked {
  background: var(--hl-status-blocked-bg);
  color: var(--hl-status-blocked-fg);
  border-color: var(--hl-status-blocked-bd);
}
.hl-grid__cell-month {
  font-size: var(--eq-fs-caption);
  color: inherit;
}
.hl-grid__cell-mark {
  font-size: 14px;
  font-weight: var(--eq-fw-bold);
  margin-top: 2px;
}

/* ---------- セグメントコントロール ---------- */
.hl-segmented {
  display: inline-flex;
  background: var(--eq-bg-muted);
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-pill);
  padding: 2px;
}
.hl-segmented__item {
  padding: 6px 14px;
  font-size: var(--eq-fs-small);
  border-radius: var(--eq-r-pill);
  background: transparent;
  border: 0;
  color: var(--eq-fg2);
}
.hl-segmented__item--active {
  background: var(--eq-bg);
  color: var(--eq-teal-ink);
  font-weight: var(--eq-fw-bold);
  box-shadow: var(--eq-shadow-1);
}

/* ---------- モーダル ---------- */
.hl-modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.hl-modal--open { display: flex; }
.hl-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(63, 58, 57, 0.4);
}
.hl-modal__panel {
  position: relative;
  background: var(--eq-bg);
  border-radius: var(--eq-r-lg);
  padding: var(--eq-s-6);
  width: calc(100% - 32px);
  max-width: 360px;
  z-index: 1;
}

/* ---------- プレイリストカード ---------- */
.hl-pl-card {
  display: flex;
  align-items: center;
  gap: var(--eq-s-3);
  padding: var(--eq-s-3);
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-lg);
  background: var(--eq-bg);
}
.hl-pl-card + .hl-pl-card { margin-top: var(--eq-s-3); }
.hl-pl-card--active {
  background: var(--eq-teal-tint);
  border-color: var(--eq-border-teal);
}
.hl-pl-card__thumb {
  width: 88px; height: 88px;
  border-radius: var(--eq-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 28px;
  font-weight: var(--eq-fw-bold);
}
.hl-pl-card__body { flex: 1; min-width: 0; }
.hl-pl-card__title {
  font-size: var(--eq-fs-body);
  font-weight: var(--eq-fw-bold);
  margin: 0 0 4px;
}
.hl-pl-card__meta {
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg2);
}
.hl-pl-card__play {
  width: 56px; height: 56px;
  border-radius: var(--eq-r-pill);
  background: var(--eq-teal);
  color: #fff;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.hl-pl-card__play:active { opacity: 0.7; }
.hl-pl-card__play:focus-visible { outline: none; box-shadow: var(--eq-shadow-focus); }

/* ---------- トースト ---------- */
.hl-toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%) translateY(8px);
  background: rgba(63, 58, 57, 0.92);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--eq-r-md);
  font-size: var(--eq-fs-small);
  z-index: 200;
  opacity: 0;
  transition: opacity var(--eq-dur) var(--eq-ease), transform var(--eq-dur) var(--eq-ease);
  max-width: calc(100% - 32px);
  text-align: center;
}
.hl-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.hl-toast--warn { background: var(--hl-status-grace-fg); }

/* ---------- 購入履歴：月別グループ ---------- */
.hl-history-group { margin-bottom: var(--eq-s-6); }
.hl-history-group__heading {
  font-size: var(--eq-fs-h3);
  font-weight: var(--eq-fw-bold);
  color: var(--eq-fg1);
  padding: 0 var(--eq-gutter);
  margin: 0 0 var(--eq-s-3);
  border-bottom: 1px solid var(--eq-border);
  padding-bottom: var(--eq-s-2);
}
.hl-history-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--eq-s-3) var(--eq-gutter);
  border-bottom: 1px solid var(--eq-border-soft);
}
.hl-history-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eq-s-2);
}
.hl-history-row__date {
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg2);
}
.hl-history-row__title {
  font-size: var(--eq-fs-body);
  font-weight: var(--eq-fw-med);
  color: var(--eq-fg1);
}
.hl-history-row__sub {
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg2);
}
.hl-history-row__amount {
  font-weight: var(--eq-fw-bold);
}
.hl-history-row__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---------- empty state ---------- */
.hl-empty {
  text-align: center;
  padding: var(--eq-s-8) var(--eq-gutter);
  color: var(--eq-fg2);
  font-size: var(--eq-fs-small);
}

/* ---------- リピートボタンの状態バッジ ---------- */
.hl-repeat-btn {
  position: relative;
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--eq-r-pill);
  color: var(--eq-fg2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hl-repeat-btn--active { color: var(--eq-teal-ink); background: var(--eq-teal-tint); }
.hl-repeat-btn__badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: var(--eq-teal);
  color: #fff;
  border-radius: var(--eq-r-pill);
  font-size: 9px;
  padding: 0 4px;
  line-height: 1.4;
  min-width: 12px;
  text-align: center;
}

/* ---------- ロゴ画像 ---------- */
.hl-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--eq-fw-bold);
  color: var(--eq-teal-ink);
  font-size: 16px;
  letter-spacing: var(--eq-ls-wide);
}
.hl-logo__mark {
  height: 24px;
  width: auto;
}

/* ---------- セクション見出し ---------- */
.hl-section {
  padding: var(--eq-s-4) var(--eq-gutter);
}
.hl-section__title {
  font-size: var(--eq-fs-h3);
  font-weight: var(--eq-fw-bold);
  margin: 0 0 var(--eq-s-3);
}
.hl-section__sub {
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg2);
  margin: -8px 0 var(--eq-s-3);
}

/* ---------- デモ用ナビ（次画面へ）----------
 * PR #32 で parent/ から、PR #34 で admin/ からも nav 本体を削除済み。
 * 現状この定義は参照されていないため将来削除候補。
 * shared/preview.html や screenshots/* で再導入する明確な計画ができない場合、
 * 次のリファクタ機会 (例: components.css リネーム) で削除すること。
 */
.hl-demo-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--eq-s-3);
  padding: var(--eq-s-4) var(--eq-gutter);
  border-top: 1px dashed var(--eq-border);
  background: var(--eq-bg-muted);
  font-size: var(--eq-fs-caption);
}
.hl-demo-nav a {
  color: var(--eq-fg2);
  border-bottom: 1px solid transparent;
}
.hl-demo-nav a:hover { color: var(--eq-teal-ink); }

/* ---------- グリッド：1行＝1セット用にflex化 ---------- */
.hl-grid--scroll {
  display: flex;
  flex-direction: column;
  gap: var(--hl-grid-cell-gap);
  padding: var(--eq-s-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hl-grid__row {
  display: grid;
  grid-template-columns: var(--hl-grid-row-label-w) repeat(13, var(--hl-grid-cell-w));
  gap: var(--hl-grid-cell-gap);
}
.hl-grid__row-label {
  position: sticky;
  left: 0;
  z-index: 2;
}
.hl-grid__col-headers {
  display: grid;
  grid-template-columns: var(--hl-grid-row-label-w) repeat(13, var(--hl-grid-cell-w));
  gap: var(--hl-grid-cell-gap);
}
.hl-grid__corner {
  width: var(--hl-grid-row-label-w);
  position: sticky;
  left: 0;
  background: var(--eq-bg);
  z-index: 2;
}

/* ---------- バナー内ボタン ---------- */
/* CTA赤は体験レッスン専用のため、HLバナーのCTAは primary teal に統一 */
.hl-banner__cta {
  margin-left: auto;
  padding: 6px 12px;
  font-size: var(--eq-fs-caption);
  font-weight: var(--eq-fw-bold);
  background: var(--eq-teal);
  color: #fff;
  border: 0;
  border-radius: var(--eq-r-md);
}
.hl-banner__cta:hover { background: var(--eq-teal-ink); }
.hl-banner {
  align-items: center;
}
.hl-banner__body { flex: 1; }
.hl-banner__title { font-weight: var(--eq-fw-bold); margin-bottom: 2px; }

/* ---------- コースカード（TOP）---------- */
.hl-course-card {
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-lg);
  padding: var(--eq-s-4);
  background: var(--eq-bg);
  margin-bottom: var(--eq-s-3);
  transition: border-color var(--eq-dur) var(--eq-ease), background var(--eq-dur) var(--eq-ease);
}
.hl-course-card--active {
  border-color: var(--eq-teal);
  background: var(--eq-teal-wash);
}
.hl-course-card__head {
  display: flex;
  align-items: center;
  gap: var(--eq-s-2);
  margin-bottom: var(--eq-s-2);
}
.hl-course-card__title {
  font-size: var(--eq-fs-h3);
  font-weight: var(--eq-fw-bold);
  margin: 0 0 2px;
}
.hl-course-card__meta {
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg2);
  margin-bottom: var(--eq-s-3);
}
.hl-grade-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--eq-r-pill);
  font-size: var(--eq-fs-caption);
  font-weight: var(--eq-fw-bold);
}

/* ---------- プレイヤー拡張 ---------- */
.hl-player__time {
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hl-player__seek-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--eq-gutter) var(--eq-s-2);
}
.hl-player__seek--full {
  flex: 1;
  margin: 0;
}

/* ---------- 教材詳細サムネ ---------- */
.hl-detail-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(0deg, var(--eq-bg-muted), var(--eq-bg-muted));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: var(--eq-fg3);
}

/* ---------- 教材一覧 (sub-list) ---------- */
.hl-track-row {
  display: flex;
  align-items: center;
  gap: var(--eq-s-3);
  padding: var(--eq-s-3) var(--eq-gutter);
  border-bottom: 1px solid var(--eq-border-soft);
  background: var(--eq-bg);
  text-align: left;
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  cursor: pointer;
}
.hl-track-row--playing {
  background: var(--eq-teal-tint);
}
.hl-track-row__no {
  width: 24px;
  text-align: center;
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg3);
  flex-shrink: 0;
}
.hl-track-row__body { flex: 1; min-width: 0; }
.hl-track-row__title {
  font-size: var(--eq-fs-body);
  font-weight: var(--eq-fw-med);
  color: var(--eq-fg1);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hl-track-row__meta {
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg2);
}
.hl-track-row__duration {
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg2);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   === F2 ADDITION === 管理側5画面（admin専用）
   prefix: .hl-admin-* で衝突回避
   ============================================================ */

/* ---------- サイドバーの拡張 ---------- */
.hl-admin__sidebar {
  display: flex;
  flex-direction: column;
}
.hl-admin-sidebar__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--eq-s-3) var(--eq-s-6);
  font-weight: var(--eq-fw-bold);
  color: var(--eq-teal-ink);
  letter-spacing: var(--eq-ls-wide);
  font-size: 15px;
}
.hl-admin-sidebar__logo-mark {
  width: 28px; height: 28px;
  background: var(--eq-teal);
  color: #fff;
  border-radius: var(--eq-r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.hl-admin-sidebar__group-label {
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg2);
  letter-spacing: var(--eq-ls-wide);
  padding: var(--eq-s-3) var(--eq-s-3) var(--eq-s-2);
  text-transform: uppercase;
  font-weight: var(--eq-fw-bold);
}
.hl-admin-sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.hl-admin-sidebar__user {
  margin-top: auto;
  border-top: 1px solid var(--eq-border);
  padding: var(--eq-s-4) var(--eq-s-3);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--eq-fs-small);
}
.hl-admin-sidebar__user-avatar {
  width: 32px; height: 32px;
  border-radius: var(--eq-r-pill);
  background: var(--eq-teal-tint);
  color: var(--eq-teal-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.hl-admin-sidebar__user-name { font-weight: var(--eq-fw-bold); color: var(--eq-fg1); display: block; }
.hl-admin-sidebar__user-role { color: var(--eq-fg2); font-size: var(--eq-fs-caption); display: block; }

/* ---------- 管理画面ヘッダー（メイン上部） ---------- */
.hl-admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--eq-s-6);
  gap: var(--eq-s-4);
}
.hl-admin-header__title { margin: 0; font-size: var(--eq-fs-h1); }
.hl-admin-header__caption { color: var(--eq-fg2); font-size: var(--eq-fs-small); margin-top: 4px; }
.hl-admin-header__right { display: flex; gap: var(--eq-s-3); align-items: center; }

.hl-admin-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--eq-teal-tint);
  color: var(--eq-teal-ink);
  border-radius: var(--eq-r-pill);
  font-size: var(--eq-fs-caption);
  font-weight: var(--eq-fw-bold);
}

/* ---------- セグメント（タブ） ---------- */
.hl-admin-segmented {
  display: inline-flex;
  background: var(--eq-bg-muted);
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-md);
  padding: 4px;
  gap: 2px;
}
.hl-admin-segmented__btn {
  background: transparent;
  border: 0;
  padding: 8px 14px;
  border-radius: var(--eq-r-sm);
  color: var(--eq-fg2);
  font-size: var(--eq-fs-small);
  font-weight: var(--eq-fw-med);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hl-admin-segmented__btn--active {
  background: var(--eq-bg);
  color: var(--eq-fg1);
  box-shadow: var(--eq-shadow-1);
}
/* 申請中等の通知系カウンタ。CTA赤を流用しないため grace（猶予中）色を使用 */
.hl-admin-segmented__count {
  display: inline-flex;
  background: var(--hl-status-grace-fg);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--eq-r-pill);
  padding: 1px 6px;
  min-width: 18px;
  justify-content: center;
}

/* ---------- 検索・フィルタ行 ---------- */
.hl-admin-filterbar {
  display: flex;
  gap: var(--eq-s-3);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--eq-s-4) 0;
}
.hl-admin-filterbar__search {
  flex: 1;
  min-width: 240px;
  max-width: 360px;
}
.hl-admin-select {
  padding: 9px 28px 9px 12px;
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-md);
  font: inherit;
  color: var(--eq-fg1);
  background: var(--eq-bg) url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236B6563'/%3E%3C/svg%3E") right 10px center no-repeat;
  appearance: none;
  -webkit-appearance: none;
}
.hl-admin-select:focus { outline: none; border-color: var(--eq-teal); box-shadow: var(--eq-shadow-focus); }

/* ---------- テーブル拡張（管理） ---------- */
.hl-table--admin th { white-space: nowrap; }
.hl-table--admin td { vertical-align: middle; }
.hl-table--admin tbody tr { cursor: pointer; }
.hl-table--admin tbody tr.is-pending td { background: rgba(255, 245, 224, 0.4); }
.hl-table-cell-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--eq-fg2); font-size: var(--eq-fs-small); }
.hl-table-grade-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--eq-r-pill);
  font-size: var(--eq-fs-caption);
  font-weight: var(--eq-fw-bold);
}

/* ---------- バッジの拡張 ---------- */
.hl-badge--neutral { background: var(--eq-bg-muted); color: var(--eq-fg2); border-color: var(--eq-border); }
.hl-badge--info    { background: var(--eq-teal-wash); color: var(--eq-teal-ink); border-color: var(--eq-border-teal); }

/* ---------- サマリーカード（H1） ---------- */
.hl-admin-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--eq-s-4);
}
.hl-admin-stat-card {
  background: var(--eq-bg);
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-lg);
  padding: var(--eq-s-4);
}
.hl-admin-stat-card__label {
  font-size: var(--eq-fs-small);
  color: var(--eq-fg2);
  font-weight: var(--eq-fw-med);
  margin-bottom: 6px;
}
.hl-admin-stat-card__value {
  font-size: 26px;
  font-weight: var(--eq-fw-bold);
  color: var(--eq-fg1);
  line-height: 1.2;
}
.hl-admin-stat-card__sub {
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg2);
  margin-top: 4px;
}
.hl-admin-stat-card__sub--up { color: var(--eq-teal-ink); }
.hl-admin-stat-card__sub--down { color: var(--hl-status-blocked-fg); }

/* ---------- サイドパネル（C1 詳細スライドイン） ---------- */
.hl-admin-side-panel {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: 420px;
  max-width: 90vw;
  background: var(--eq-bg);
  border-left: 1px solid var(--eq-border);
  box-shadow: -8px 0 24px rgba(0,0,0,.08);
  transform: translateX(100%);
  transition: transform var(--eq-dur) var(--eq-ease);
  z-index: 60;
  display: flex;
  flex-direction: column;
}
.hl-admin-side-panel.is-open { transform: translateX(0); }
.hl-admin-side-panel__header {
  padding: var(--eq-s-4) var(--eq-s-6);
  border-bottom: 1px solid var(--eq-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hl-admin-side-panel__title { margin: 0; font-size: var(--eq-fs-h2); }
.hl-admin-side-panel__close {
  background: transparent;
  border: 0;
  width: 32px; height: 32px;
  border-radius: var(--eq-r-pill);
  color: var(--eq-fg2);
  font-size: 20px;
}
.hl-admin-side-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--eq-s-6);
}
.hl-admin-side-panel__footer {
  padding: var(--eq-s-4) var(--eq-s-6);
  border-top: 1px solid var(--eq-border);
  display: flex;
  gap: var(--eq-s-3);
  background: var(--eq-bg-muted);
}
.hl-admin-side-panel__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(63, 58, 57, 0.4);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--eq-dur) var(--eq-ease);
}
.hl-admin-side-panel__backdrop.is-open { opacity: 1; pointer-events: auto; }

/* ---------- モーダル（admin） ---------- */
.hl-admin-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--eq-s-6);
}
.hl-admin-modal.is-open { display: flex; }
.hl-admin-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(63, 58, 57, 0.5);
}
.hl-admin-modal__panel {
  position: relative;
  background: var(--eq-bg);
  border-radius: var(--eq-r-lg);
  width: 480px;
  max-width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,.18);
}
.hl-admin-modal__header {
  padding: var(--eq-s-4) var(--eq-s-6);
  border-bottom: 1px solid var(--eq-border);
}
.hl-admin-modal__title { margin: 0; font-size: var(--eq-fs-h2); }
.hl-admin-modal__body { padding: var(--eq-s-6); overflow-y: auto; }
.hl-admin-modal__footer {
  padding: var(--eq-s-4) var(--eq-s-6);
  border-top: 1px solid var(--eq-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--eq-s-3);
  background: var(--eq-bg-muted);
}

/* ---------- トースト（admin） ---------- */
.hl-admin-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: var(--eq-fg1);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--eq-r-md);
  font-size: var(--eq-fs-small);
  font-weight: var(--eq-fw-med);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  z-index: 100;
  opacity: 0;
  transition: opacity var(--eq-dur) var(--eq-ease), transform var(--eq-dur) var(--eq-ease);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hl-admin-toast.is-open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.hl-admin-toast--success { background: var(--eq-teal-ink); }
.hl-admin-toast--warn { background: var(--hl-status-grace-fg); }

/* ---------- エンプティ（admin） ---------- */
.hl-admin-empty {
  text-align: center;
  padding: var(--eq-s-12) var(--eq-s-6);
  color: var(--eq-fg2);
  font-size: var(--eq-fs-small);
}

/* ---------- フォーム拡張 ---------- */
.hl-admin-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-md);
  font: inherit;
  color: var(--eq-fg1);
  background: var(--eq-bg);
  min-height: 80px;
  resize: vertical;
}
.hl-admin-textarea:focus { outline: none; border-color: var(--eq-teal); box-shadow: var(--eq-shadow-focus); }

.hl-admin-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hl-admin-radio,
.hl-admin-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-md);
  background: var(--eq-bg);
  cursor: pointer;
  font-size: var(--eq-fs-body);
  transition: background var(--eq-dur) var(--eq-ease), border-color var(--eq-dur) var(--eq-ease);
}
.hl-admin-radio input,
.hl-admin-check input {
  accent-color: var(--eq-teal);
  margin-top: 3px;
}
.hl-admin-radio:has(input:checked),
.hl-admin-check:has(input:checked) {
  background: var(--eq-teal-wash);
  border-color: var(--eq-border-teal);
  color: var(--eq-teal-ink);
}
.hl-admin-radio__sub {
  display: block;
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg2);
  margin-top: 2px;
}
.hl-admin-radio:has(input:checked) .hl-admin-radio__sub { color: var(--eq-teal-ink); }

.hl-admin-form-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--eq-s-4);
  align-items: start;
  margin-bottom: var(--eq-s-4);
}
.hl-admin-form-row__label {
  padding-top: 10px;
  font-size: var(--eq-fs-small);
  font-weight: var(--eq-fw-med);
  color: var(--eq-fg2);
}
/* 必須マーク。CTA赤の流用を避け、blocked系（#B0413E）を使用 */
.hl-admin-form-row__label--required::after {
  content: " *";
  color: var(--hl-status-blocked-fg);
}

/* ---------- 通知プレビュー（C3） ---------- */
.hl-admin-notice-preview {
  background: var(--eq-teal-wash);
  border: 1px solid var(--eq-border-teal);
  border-radius: var(--eq-r-lg);
  padding: var(--eq-s-4);
}
.hl-admin-notice-preview__title {
  font-size: var(--eq-fs-small);
  font-weight: var(--eq-fw-bold);
  color: var(--eq-teal-ink);
  margin: 0 0 var(--eq-s-3);
  letter-spacing: var(--eq-ls-wide);
}
.hl-admin-notice-item {
  background: #fff;
  border: 1px solid var(--eq-border-teal);
  border-radius: var(--eq-r-md);
  padding: var(--eq-s-3);
  display: flex;
  gap: var(--eq-s-3);
  align-items: flex-start;
}
.hl-admin-notice-item + .hl-admin-notice-item { margin-top: 8px; }
.hl-admin-notice-item__icon {
  width: 32px; height: 32px;
  border-radius: var(--eq-r-pill);
  background: var(--eq-teal-tint);
  color: var(--eq-teal-ink);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.hl-admin-notice-item__body { flex: 1; min-width: 0; }
.hl-admin-notice-item__to {
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg2);
}
.hl-admin-notice-item__subject {
  font-size: var(--eq-fs-body);
  font-weight: var(--eq-fw-bold);
  margin: 2px 0;
}
.hl-admin-notice-item__excerpt {
  font-size: var(--eq-fs-small);
  color: var(--eq-fg2);
  line-height: 1.5;
}

/* ---------- HL購入マトリクス（C2） ---------- */
.hl-admin-matrix {
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--eq-fs-small);
}
.hl-admin-matrix th,
.hl-admin-matrix td {
  border-bottom: 1px solid var(--eq-border);
  padding: 6px;
  text-align: center;
  white-space: nowrap;
}
.hl-admin-matrix th {
  background: var(--eq-bg-muted);
  font-weight: var(--eq-fw-bold);
  color: var(--eq-fg2);
  font-size: var(--eq-fs-caption);
  position: sticky;
  top: 0;
}
.hl-admin-matrix th.is-current,
.hl-admin-matrix td.is-current {
  background: var(--eq-teal-wash);
  color: var(--eq-teal-ink);
}
.hl-admin-matrix__name {
  text-align: left !important;
  white-space: nowrap;
  font-weight: var(--eq-fw-med);
  position: sticky;
  left: 0;
  background: var(--eq-bg);
  z-index: 1;
  min-width: 160px;
}
tr:hover .hl-admin-matrix__name { background: var(--eq-bg-muted); }
.hl-admin-matrix__name-sub { color: var(--eq-fg2); font-size: var(--eq-fs-caption); display: block; }
.hl-admin-matrix__cell {
  width: 36px;
  height: 36px;
  border-radius: var(--eq-r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--eq-fw-bold);
  cursor: pointer;
  transition: opacity var(--eq-dur) var(--eq-ease);
  border: 0;
}
.hl-admin-matrix__cell:hover { opacity: 0.7; }
.hl-admin-matrix__cell--purchased[data-grade="orange"] { background: var(--hl-grade-orange-tint); color: var(--hl-grade-orange-ink); }
.hl-admin-matrix__cell--purchased[data-grade="blue"]   { background: var(--hl-grade-blue-tint);   color: var(--hl-grade-blue-ink); }
.hl-admin-matrix__cell--purchased[data-grade="red"]    { background: var(--hl-grade-red-tint);    color: var(--hl-grade-red-ink); }
.hl-admin-matrix__cell--purchased[data-grade="yellow"] { background: var(--hl-grade-yellow-tint); color: var(--hl-grade-yellow-ink); }
.hl-admin-matrix__cell--purchased[data-grade="green"]  { background: var(--hl-grade-green-tint);  color: var(--hl-grade-green-ink); }
.hl-admin-matrix__cell--purchased[data-grade="purple"] { background: var(--hl-grade-purple-tint); color: var(--hl-grade-purple-ink); }
.hl-admin-matrix__cell--purchased[data-grade="peach"]  { background: var(--hl-grade-peach-tint);  color: var(--hl-grade-peach-ink); }
.hl-admin-matrix__cell--locked { background: var(--hl-status-locked-bg); color: var(--hl-status-locked-fg); }
.hl-admin-matrix__cell--grace { background: var(--hl-status-grace-bg); color: var(--hl-status-grace-fg); border: 1px solid var(--hl-status-grace-bd); }
.hl-admin-matrix__cell--blocked { background: var(--hl-status-blocked-bg); color: var(--hl-status-blocked-fg); border: 1px solid var(--hl-status-blocked-bd); }
.hl-admin-matrix__cell--current {
  outline: 2px solid var(--eq-teal);
  outline-offset: -1px;
}

.hl-admin-matrix-wrap {
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-lg);
  overflow-x: auto;
  background: var(--eq-bg);
  max-height: 70vh;
}

.hl-admin-legend {
  display: flex;
  gap: var(--eq-s-4);
  flex-wrap: wrap;
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg2);
  padding: var(--eq-s-3) 0;
}
.hl-admin-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.hl-admin-legend__swatch {
  width: 14px; height: 14px;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid var(--eq-border);
}

/* ---------- 管理画面 共通フォーム入力（08a等で使用） ---------- */
.hl-admin-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  font-size: var(--eq-fs-body);
  font-family: inherit;
  color: var(--eq-fg1);
  background: var(--eq-bg);
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hl-admin-input:focus {
  outline: none;
  border-color: var(--eq-teal);
  box-shadow: 0 0 0 3px var(--eq-teal-tint);
}
.hl-admin-input:disabled,
.hl-admin-input[readonly] {
  background: var(--eq-bg-muted);
  color: var(--eq-fg2);
  cursor: not-allowed;
}
textarea.hl-admin-input {
  min-height: 80px;
  resize: vertical;
  line-height: 1.6;
}

/* ---------- 管理画面 セクションコンテナ（タイトル＋本文） ---------- */
.hl-admin-section {
  background: var(--eq-bg);
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-lg);
  padding: var(--eq-s-6);
  margin-bottom: var(--eq-s-4);
}
.hl-admin-section__title {
  margin: 0 0 var(--eq-s-4);
  font-size: var(--eq-fs-h3);
  font-weight: var(--eq-fw-bold);
  color: var(--eq-fg1);
}

/* ---------- セクションカード（H2 通知設定） ---------- */
.hl-admin-section-card {
  background: var(--eq-bg);
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-lg);
  padding: var(--eq-s-6);
  margin-bottom: var(--eq-s-4);
}
.hl-admin-section-card--disabled {
  background: var(--eq-bg-muted);
  opacity: 0.7;
}
.hl-admin-section-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--eq-s-4);
  gap: var(--eq-s-3);
}
.hl-admin-section-card__title { margin: 0; font-size: var(--eq-fs-h3); }
.hl-admin-section-card__caption { color: var(--eq-fg2); font-size: var(--eq-fs-small); margin-top: 2px; }

.hl-admin-toggle {
  position: relative;
  display: inline-block;
  width: 40px; height: 22px;
  flex-shrink: 0;
}
.hl-admin-toggle input { opacity: 0; width: 0; height: 0; }
.hl-admin-toggle__slider {
  position: absolute;
  inset: 0;
  background: var(--eq-border);
  border-radius: var(--eq-r-pill);
  transition: background var(--eq-dur) var(--eq-ease);
  cursor: pointer;
}
.hl-admin-toggle__slider::before {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  left: 2px; top: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--eq-dur) var(--eq-ease);
  box-shadow: var(--eq-shadow-1);
}
.hl-admin-toggle input:checked + .hl-admin-toggle__slider { background: var(--eq-teal); }
.hl-admin-toggle input:checked + .hl-admin-toggle__slider::before { transform: translateX(18px); }

.hl-admin-recipient-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--eq-s-3);
}

/* ---------- ステータスドット ---------- */
.hl-admin-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--eq-fs-small);
}
.hl-admin-status-dot::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--eq-teal);
}
.hl-admin-status-dot--pending::before { background: var(--hl-status-grace-fg); }
.hl-admin-status-dot--rejected::before { background: var(--hl-status-blocked-fg); }
.hl-admin-status-dot--done::before { background: var(--eq-teal); }

/* ---------- ボタン拡張 ---------- */
.hl-btn--sm { padding: 6px 12px; font-size: var(--eq-fs-small); }
/* danger系（拒否ボタン等）。CTA赤と同色にしないため blocked 系を使用 */
.hl-btn--danger {
  border-color: var(--hl-status-blocked-fg);
  color: var(--hl-status-blocked-fg);
  background: var(--eq-bg);
}
.hl-btn--danger:hover { background: var(--hl-status-blocked-bg); }

/* ---------- ナビ拡張（管理サイドバー） ---------- */
.hl-admin__nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hl-admin__nav-item:hover { background: var(--eq-bg-muted); }
.hl-admin__nav-item--active:hover { background: var(--eq-teal-tint); }
.hl-admin-nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  font-size: 14px;
}
/* === /F2 ADDITION === */

/* ============================================================
   === UX1 ADDITION === 5/11レビュー改善
   - 兄弟チップ（横スクロール、3-4人対応）
   - 桃行を非表示にするためのユーティリティ
   - 管理テーブルの zebra stripe + 申請中行の左ボーダー強調
   - コースカードのフラット化
   ============================================================ */

/* ---------- 兄弟切替チップ（内部画面 03/05/06/07）----------
   仕様書ではタブ下線スタイル。3-4人想定では幅が苦しいので、
   ピル型 + 横スクロールに変更。
   ============================================================ */
.hl-sibling-chips {
  display: flex;
  gap: 8px;
  padding: 10px var(--eq-gutter);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  border-bottom: 1px solid var(--eq-border);
  background: var(--eq-bg);
}
.hl-sibling-chips::-webkit-scrollbar { display: none; }
.hl-sibling-chips .hl-sibling-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--eq-bg-muted);
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-pill);
  color: var(--eq-fg2);
  scroll-snap-align: start;
  transition: background var(--eq-dur) var(--eq-ease),
              border-color var(--eq-dur) var(--eq-ease),
              color var(--eq-dur) var(--eq-ease);
}
.hl-sibling-chips .hl-sibling-tab:active { opacity: 0.7; }
.hl-sibling-chips .hl-sibling-tab--active {
  background: var(--eq-teal-tint);
  border-color: var(--eq-teal);
  color: var(--eq-teal-ink);
}
.hl-sibling-chips .hl-sibling-tab__name {
  display: inline;
  font-size: var(--eq-fs-small);
  font-weight: var(--eq-fw-bold);
}
.hl-sibling-chips .hl-sibling-tab__sub {
  display: inline;
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg2);
  margin-top: 0;
}
.hl-sibling-chips .hl-sibling-tab--active .hl-sibling-tab__sub {
  color: var(--eq-teal-ink);
}
/* 学年色ドット（チップ左の小さな丸） */
.hl-sibling-tab__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* ---------- グリッド行の非表示（桃対象外）---------- */
.hl-grid__row--hidden { display: none; }

/* ---------- 管理テーブル：zebra stripe ＋ 申請中強調 ---------- */
.hl-table--admin tbody tr:nth-child(even) td {
  background: rgba(244, 242, 239, 0.5); /* 軽い warm off-white */
}
.hl-table--admin tbody tr.is-pending td {
  background: rgba(255, 245, 224, 0.55);
  border-left: 0;
}
.hl-table--admin tbody tr.is-pending td:first-child {
  box-shadow: inset 3px 0 0 var(--eq-teal);
}
.hl-table--admin tbody tr:hover td { background: var(--eq-bg-muted); }

/* ---------- セグメントカウンタ：申請中はteal系（要対応のポジ通知）---------- */
.hl-admin-segmented__count--alert {
  background: var(--eq-teal);
  color: #fff;
}

/* ---------- プレイリストカード：再生中の左ボーダー強調 ---------- */
.hl-pl-card--active {
  border-left-width: 3px;
  border-left-color: var(--eq-teal);
}

/* === /UX1 ADDITION === */

/* ============================================================
   === UX2 ADDITION === 5/8 ホーム画面改善
   - 中央寄せヘッダー（タイトル）
   - お知らせカード（info / blocked）
   - 退室済バッジ・お子さまカード拡張
   - 最近聴いた曲リスト
   ============================================================ */

/* ---------- お知らせカード ---------- */
.hl-notice {
  border-radius: var(--eq-r-md);
  padding: var(--eq-s-3) var(--eq-s-4);
  margin-bottom: var(--eq-s-3);
  display: flex;
  align-items: flex-start;
  gap: var(--eq-s-3);
  background: var(--eq-teal-tint);
  border: 1px solid var(--eq-border-teal);
  color: var(--eq-fg1);
}
.hl-notice:last-child { margin-bottom: 0; }
.hl-notice__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--eq-r-pill);
  background: var(--eq-teal);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.hl-notice__body { flex: 1; min-width: 0; }
.hl-notice__title {
  font-size: var(--eq-fs-body);
  font-weight: var(--eq-fw-bold);
  margin: 0 0 2px;
}
.hl-notice__text {
  font-size: var(--eq-fs-small);
  color: var(--eq-fg2);
  margin: 0;
  line-height: 1.5;
}
.hl-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--eq-s-2);
  margin-top: var(--eq-s-3);
}
.hl-notice__link {
  font-size: var(--eq-fs-small);
  color: var(--eq-teal-ink);
  text-decoration: underline;
  align-self: center;
}

/* 決済失敗（強調） */
.hl-notice--blocked {
  background: var(--hl-status-blocked-bg);
  border-color: var(--hl-status-blocked-bd);
  color: var(--hl-status-blocked-fg);
}
.hl-notice--blocked .hl-notice__icon {
  background: var(--hl-status-blocked-fg);
  color: #fff;
}
.hl-notice--blocked .hl-notice__title { color: var(--hl-status-blocked-fg); }
.hl-notice--blocked .hl-notice__text { color: var(--hl-status-blocked-fg); }
.hl-notice--blocked .hl-notice__link { color: var(--hl-status-blocked-fg); }

/* ---------- お子さまカード拡張（生年月日・年齢・退室） ---------- */
.hl-course-card__bio {
  font-size: var(--eq-fs-caption);
  color: var(--eq-fg2);
  margin: 0 0 2px;
}
.hl-course-card--left {
  background: var(--eq-bg-muted);
  border-color: var(--eq-border);
}
.hl-course-card--left .hl-course-card__title {
  color: var(--eq-fg2);
}
.hl-badge--left {
  background: var(--eq-bg-muted);
  color: var(--eq-fg2);
  border-color: var(--eq-border);
}

/* ---------- 最近聴いた曲リスト ---------- */
.hl-recent-list {
  border: 1px solid var(--eq-border);
  border-radius: var(--eq-r-lg);
  background: var(--eq-bg);
  overflow: hidden;
}
.hl-recent-list .hl-list-item:last-child { border-bottom: 0; }
.hl-recent-list a { text-decoration: none; color: inherit; display: block; }

/* === /UX2 ADDITION === */

/* ---------- フォーム入力エラー (#89) ---------- */
.hl-input--error,
.hl-input--error:focus {
  border-color: var(--eq-danger, #d92e3f);
  outline-color: var(--eq-danger, #d92e3f);
}
.hl-error-message {
  display: block;
  color: var(--eq-danger, #d92e3f);
  font-size: 12px;
  margin-top: 4px;
  min-height: 1.2em;
}
.hl-error-message:empty {
  display: none;
}