/* ==========================================================================
   マイスター公式ミックス LP（meister.html 専用）
   site.css のトークン（--bg0/--moon/--ink0 …）だけを使う。色を発明しない。
   既存3ページに影響を出さないため site.css は編集せず、このファイルに閉じる。
   ========================================================================== */

/* ---------- 開示 ---------- */
.mx-disclosure{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--line2); border-radius:var(--r-chip);
  background:linear-gradient(180deg, rgba(142,151,251,.06), rgba(142,151,251,.02));
  padding:14px 16px; margin:22px 0 0; max-width:62ch;
}
.mx-disclosure svg{ width:18px; height:18px; flex:none; margin-top:2px; stroke:var(--moon); fill:none; stroke-width:1.6; }
.mx-disclosure p{ margin:0; font-size:.86rem; line-height:1.75; color:var(--ink1); }
.mx-disclosure b{ color:var(--ink0); font-weight:600; }

.mx-gardener{
  font-family:var(--serif); font-size:1.02rem; color:var(--ink1);
  margin:0; line-height:2; letter-spacing:.02em;
}
.mx-gardener span{ display:block; color:var(--ink2); font-size:.86rem; margin-top:6px; }

/* ---------- 作品ステージ ---------- */
.mx-stage{ display:grid; gap:22px; align-items:start; }
@media (min-width:900px){
  .mx-stage{ grid-template-columns:520px 1fr; gap:40px; }
}

.mx-cover{
  position:relative; border-radius:var(--r-card); overflow:hidden;
  background:var(--card); border:1px solid var(--line);
  aspect-ratio:1/1;
}
.mx-cover img{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; transition:opacity .6s var(--ease); }
.mx-cover img.is-on{ opacity:1; }
.mx-cover::after{
  content:""; position:absolute; inset:auto 0 0 0; height:38%;
  background:linear-gradient(180deg, transparent, rgba(7,10,20,.72));
  pointer-events:none;
}
.mx-index{
  position:absolute; top:14px; left:16px; z-index:2;
  font-family:var(--serif); font-size:.9rem; color:var(--ink1);
  background:rgba(7,10,20,.5); border:1px solid var(--line2);
  border-radius:var(--r-pill); padding:4px 12px; backdrop-filter:blur(6px);
}

.mx-title{
  font-family:var(--serif); font-size:clamp(1.5rem,4.4vw,2.1rem); line-height:1.5;
  color:var(--ink0); margin:0 0 6px; letter-spacing:.01em;
}
.mx-by{ font-size:.84rem; color:var(--ink2); margin:0 0 16px; }
.mx-copy{
  font-size:1rem; line-height:2.05; color:var(--ink1); margin:0 0 20px;
  max-width:40ch; letter-spacing:.01em;
}
.mx-intent{ font-size:.84rem; line-height:1.95; color:var(--ink2); margin:0 0 20px; max-width:46ch; }

/* ---------- 再生 ---------- */
.mx-transport{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.mx-play{
  position:relative; width:64px; height:64px; flex:none; border-radius:50%;
  border:1px solid var(--moon); background:rgba(142,151,251,.08); color:var(--moon);
  display:grid; place-items:center; cursor:pointer; transition:background .3s var(--ease);
}
.mx-play:hover{ background:rgba(142,151,251,.16); }
.mx-play svg{ width:24px; height:24px; fill:currentColor; }
.mx-play .ic-pause{ display:none; }
.mx-play[aria-pressed="true"] .ic-play{ display:none; }
.mx-play[aria-pressed="true"] .ic-pause{ display:block; }
/* 再生中のリップル（8秒周期・水の物理） */
.mx-play::before,.mx-play::after{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid var(--moon); opacity:0;
}
.mx-play[aria-pressed="true"]::before{ animation:mxRipple 8s var(--ease-out) infinite; }
.mx-play[aria-pressed="true"]::after{ animation:mxRipple 8s var(--ease-out) infinite 4s; }
@keyframes mxRipple{ 0%{transform:scale(1);opacity:.5} 100%{transform:scale(1.9);opacity:0} }

.mx-bar{ flex:1; min-width:0; }
/* タップ領域を 44px 確保する（見た目の細さは維持したいので padding で稼ぐ）。 */
.mx-seek{ width:100%; accent-color:var(--moon); height:24px; padding:10px 0; cursor:pointer; box-sizing:content-box; }
.mx-time{ display:flex; justify-content:space-between; font-size:.75rem; color:var(--ink3); font-variant-numeric:tabular-nums; }
.mx-state{ font-size:.78rem; color:var(--ink2); min-height:1.2em; margin:0 0 14px; }

/* ---------- レイヤースタック ---------- */
.mx-layers{ list-style:none; margin:0 0 18px; padding:0; border-top:1px solid var(--line); }
.mx-layer{ border-bottom:1px solid var(--line); }
.mx-layer button{
  width:100%; display:grid; grid-template-columns:1fr auto; gap:4px 12px;
  align-items:center; padding:11px 2px; background:none; border:0; cursor:pointer;
  text-align:left; color:inherit; font:inherit; min-height:44px;
}
.mx-layer button[disabled]{ cursor:default; }
.mx-layer .nm{ font-size:.92rem; color:var(--ink0); }
.mx-layer .cat{ font-size:.72rem; color:var(--ink3); }
.mx-layer .lv{ grid-column:1/-1; height:3px; border-radius:2px; background:rgba(180,196,255,.09); overflow:hidden; }
.mx-layer .lv i{ display:block; height:100%; border-radius:2px; background:var(--gradMoon); transition:width .5s var(--ease), opacity .3s; }
.mx-layer .db{ font-size:.72rem; color:var(--ink2); font-variant-numeric:tabular-nums; }
.mx-layer .tier{
  font-size:.68rem; color:var(--dawn2); border:1px solid rgba(248,181,140,.35);
  border-radius:var(--r-pill); padding:1px 7px; margin-left:2px; white-space:nowrap;
}
/* 無料の層は中身が空。空のまま枠だけ描くと「正体不明のバッジ」に見える。 */
.mx-layer .tier:empty{ display:none; }
.mx-layer[data-muted="true"] .nm,.mx-layer[data-muted="true"] .db{ color:var(--ink3); text-decoration:line-through; }
.mx-layer[data-muted="true"] .lv i{ opacity:.18; }
/* ヒントと課金開示。開示だけ読みにくいのは景表法の打消し表示に当たるので、
   医療免責と同等のコントラストにする（ink3=2.67:1 だったものを ink1 へ）。 */
.mx-hint{ font-size:.8rem; color:var(--ink1); margin:0 0 18px; line-height:1.9; }
.mx-hint span{ display:block; }
.mx-hint .paid{ margin-top:6px; color:var(--dawn2); }
.mx-hint .free{ margin-top:6px; color:var(--moon2); }

.mx-meta{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.mx-tag{
  font-size:.74rem; color:var(--ink2); border:1px solid var(--line2);
  border-radius:var(--r-pill); padding:4px 11px;
}

/* ---------- 6作品セレクタ ---------- */
.mx-strip{
  display:grid; grid-auto-flow:column; grid-auto-columns:82%;
  gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 0 14px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.mx-strip::-webkit-scrollbar{ display:none; }
@media (min-width:900px){
  .mx-strip{
    grid-auto-flow:row; grid-template-columns:repeat(3,1fr); grid-auto-columns:auto;
    overflow:visible; scroll-snap-type:none; gap:16px;
  }
}
.mx-card{
  scroll-snap-align:center; border:1px solid var(--line); border-radius:var(--r-chip);
  overflow:hidden; background:var(--card); cursor:pointer; padding:0; text-align:left;
  color:inherit; font:inherit; transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.mx-card[aria-current="true"]{ border-color:var(--moon); }
.mx-card:hover{ transform:translateY(-2px); }
.mx-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.mx-card .cap{ padding:10px 12px 12px; }
.mx-card .n{ font-size:.72rem; color:var(--ink3); font-family:var(--serif); }
.mx-card .t{ font-size:.88rem; color:var(--ink1); font-family:var(--serif); line-height:1.55; margin-top:2px; }
.mx-card[aria-current="true"] .t{ color:var(--ink0); }
/* 無料で再現できる作品の目印。カバーの上に置く（一覧で一目で分かる位置）。 */
.mx-card{ position:relative; }
.mx-freebadge{
  position:absolute; top:10px; left:10px;
  font-size:.68rem; color:var(--moon2); background:rgba(7,10,20,.62);
  border:1px solid rgba(183,169,255,.4); border-radius:var(--r-pill);
  padding:3px 9px; backdrop-filter:blur(6px); white-space:nowrap;
}

/* ---------- つくりかた ---------- */
.mx-steps{ display:grid; gap:14px; margin-top:22px; }
@media (min-width:760px){ .mx-steps{ grid-template-columns:repeat(3,1fr); gap:18px; } }
.mx-steps h3{ margin:0 0 8px; font-size:1.05rem; color:var(--ink0); }
.mx-steps p{ margin:0; font-size:.88rem; line-height:1.9; }

/* ---------- 締め ---------- */
.mx-closing{
  font-family:var(--serif); font-size:clamp(1.05rem,3vw,1.3rem); line-height:2.1;
  color:var(--ink1); text-align:center; margin:0 auto; max-width:34ch;
}
/* 課金の但し書き。ink3 は bg0 に対して 2.67:1 しかなく「小さすぎて認識できない注記」に
   当たりうるので、本文と同等の ink1 まで上げる（医療免責は 7.69:1）。 */
.mx-ctasub{ font-size:.84rem; color:var(--ink1); margin-top:10px; }

/* ---------- モーション配慮 ---------- */
@media (prefers-reduced-motion:reduce){
  .mx-play::before,.mx-play::after{ animation:none !important; }
  .mx-cover img{ transition:none; }
  .mx-card{ transition:none; }
}

/* no-JS フォールバック */
.mx-nojs{ display:grid; gap:18px; }
.mx-nojs audio{ width:100%; }