/* プレイリスト占い(実験 v0。正本: PLAYLIST-LAB.md)。/lab/pl/ 専用。
   styles.css は読まない —— 顔を診断面と分ける(design-faces: 地=ウルトラマリン/骨格=曲目表/角0)。 */
:root {
  /* 2026-09-26 23:16 修平「青くて見づらい」→ 地を青一面から白へ反転。青は見出しと帯だけに残す */
  --bg: #f7f8ff;         /* 地(わずかに青い白。生成りは使わない) */
  --bg-2: #eceefb;       /* 入力欄などの一段下 */
  --ink: #141e6b;        /* 主要テキスト(対 --bg 13.9:1) */
  --ink-2: #4a5290;      /* 二次テキスト(対 --bg 6.8:1) */
  --brand: #1f35d6;      /* 見出し・帯のウルトラマリン(対 --bg 7.8:1) */
  --accent: #c8155f;     /* 差し色(対 --bg 5.3:1) */
  --line: rgba(20, 30, 107, .28);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
  --f-display: 'RocknRoll One', 'Hiragino Sans', sans-serif;
  --f-mono: 'M PLUS 1 Code', 'Hiragino Sans', monospace;
  --t-s: 13px; --t-m: 15px; --t-l: 19px; --t-xl: 30px; --t-xxl: 44px;
  --dur: 180ms;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-mono); font-size: var(--t-m); line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--ink); }
.pl { max-width: 560px; margin: 0 auto; padding: var(--s6) var(--s4) var(--s8); }
.pl-kicker { font-size: var(--t-s); letter-spacing: .12em; color: var(--ink-2); margin: 0 0 var(--s3); }
.pl-kicker b { color: var(--accent); font-weight: 700; }
.pl h1 { font-family: var(--f-display); font-weight: 400; font-size: var(--t-xxl); line-height: 1.25; margin: 0 0 var(--s4); color: var(--brand); }
.pl-lead { color: var(--ink-2); margin: 0 0 var(--s6); }
.pl-rule { border: 0; border-top: 2px dotted var(--line); margin: var(--s6) 0; }

.pl-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); font-weight: 700; margin: 0 0 var(--s2); }
.pl-label small { font-weight: 400; color: var(--ink-2); font-size: var(--t-s); }
.pl textarea, .pl input[type=text] {
  width: 100%; border: 2px solid var(--ink); border-radius: 0; background: var(--bg-2); color: var(--ink);
  font: inherit; font-size: 16px; line-height: 1.7; padding: var(--s3); outline: none;
}
.pl textarea { min-height: 280px; resize: vertical; }
.pl textarea::placeholder, .pl input::placeholder { color: rgba(74, 82, 144, .75); }
.pl textarea:focus-visible, .pl input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent); }
.pl-field { margin: 0 0 var(--s5); }
.pl-help { font-size: var(--t-s); color: var(--ink-2); margin: var(--s2) 0 0; }
.pl-count { font-variant-numeric: tabular-nums; }

.pl-how { border: 2px solid var(--line); padding: var(--s3) var(--s4); margin: 0 0 var(--s5); font-size: var(--t-s); }
.pl-how summary { cursor: pointer; font-weight: 700; font-size: var(--t-m); }
.pl-how ol { padding-left: 1.4em; margin: var(--s2) 0 0; }

.pl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: 0 var(--s5); border: 2px solid var(--ink); border-radius: 0;
  font: inherit; font-weight: 700; font-size: var(--t-m); cursor: pointer; text-decoration: none;
  background: var(--ink); color: var(--bg);
  transition: background-color var(--dur) ease-out, color var(--dur) ease-out, transform var(--dur) ease-out;
}
.pl-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg-2); }
.pl-btn:active { transform: translateY(1px); }
.pl-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pl-btn[disabled] { opacity: .45; cursor: not-allowed; }
.pl-btn--ghost { background: transparent; color: var(--ink); }
.pl-btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pl-btn--wide { width: 100%; }
.pl-link { background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-s); color: var(--ink-2); text-decoration: underline; cursor: pointer; }
.pl-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.pl-status { min-height: 1.8em; margin: var(--s3) 0 0; font-size: var(--t-s); color: var(--ink); }
.pl-status.is-error { color: var(--accent); font-weight: 700; }

.pl-screen[hidden] { display: none; }
.pl-wait { text-align: center; padding: var(--s8) 0; }
.pl-wait p { margin: var(--s4) 0 0; color: var(--ink-2); }
.pl-disc { width: 120px; height: 120px; margin: 0 auto; border-radius: 50%;
  background: radial-gradient(circle, var(--accent) 0 9px, var(--bg) 10px 22px, var(--bg-2) 23px);
  border: 2px solid var(--ink); animation: pl-spin 1.6s linear infinite; }
@keyframes pl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pl-disc { animation: none; } .pl-btn { transition: none; } }

.pl-card-img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); }
.pl-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin: var(--s5) 0 0; }
.pl-actions .pl-btn { width: 100%; padding: 0 var(--s3); }
.pl-bridge { border: 2px solid var(--accent); padding: var(--s5) var(--s4); margin: var(--s6) 0 0; }
.pl-bridge h2 { font-family: var(--f-display); font-weight: 400; font-size: var(--t-l); line-height: 1.5; margin: 0 0 var(--s3); }
.pl-bridge p { margin: 0 0 var(--s4); color: var(--ink-2); font-size: var(--t-s); }
.pl-q { color: var(--ink); font-size: var(--t-m); margin: 0 0 var(--s4); }
.pl-foot { margin-top: var(--s8); font-size: var(--t-s); color: var(--ink-2); line-height: 1.7; }
.pl-foot p { margin: 0 0 var(--s2); }
.pl-h-small { font-size: var(--t-xl) !important; }
.pl-care { border: 2px solid var(--ink); padding: var(--s4); margin: var(--s5) 0 0; }
.pl-care p { margin: 0 0 var(--s2); font-weight: 700; }
.pl-care ul { margin: 0; padding-left: 1.2em; font-size: var(--t-s); }
.pl-care a { font-weight: 700; }

/* ---- 続き(¥300)の入口と購入後の画面(2026-09-26 有料版 v1。PLAYLIST-LAB.md) ---- */
.pl-btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.pl-btn--accent:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pl-more { list-style: none; padding: 0; margin: 0 0 var(--s4); font-size: var(--t-s); }
.pl-more li { padding: var(--s1) 0 var(--s1) 1.6em; position: relative; border-bottom: 1px dotted var(--line); }
.pl-more li::before { content: '♪'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.pl-fine { font-size: var(--t-s); color: var(--ink-2); margin: var(--s3) 0 0; line-height: 1.7; }

.pl-tagline { font-family: var(--f-display); font-size: var(--t-l); line-height: 1.6; margin: 0 0 var(--s6); }
.pl-sec { font-family: var(--f-mono); font-size: var(--t-s); letter-spacing: .12em; color: var(--ink-2);
  margin: var(--s7) 0 var(--s3); padding-bottom: var(--s2); border-bottom: 2px dotted var(--line); }
.pl-sec small { letter-spacing: 0; font-weight: 400; margin-left: var(--s2); }
.pl-tracks { list-style: none; padding: 0; margin: 0; }
.pl-track { display: grid; grid-template-columns: 2.4em 1fr; gap: var(--s2); padding: var(--s3) 0; border-bottom: 1px dotted var(--line); }
.pl-track-no { font-weight: 700; color: var(--accent); font-size: var(--t-l); line-height: 1.4; }
.pl-track-title { font-weight: 700; margin: 0; line-height: 1.5; }
.pl-track-text { margin: var(--s1) 0 0; color: var(--ink-2); font-size: var(--t-s); }
.pl-track.is-bonus { background: var(--bg-2); margin: 0 calc(-1 * var(--s3)); padding-left: var(--s3); padding-right: var(--s3); }
.pl-track.is-bonus .pl-track-title::after { content: 'B面'; margin-left: var(--s2); font-size: 11px; font-weight: 700; color: #fff; background: var(--brand); padding: 1px 6px; vertical-align: 2px; }
.pl-ev { margin: var(--s1) 0 0; color: var(--accent); font-size: var(--t-s); font-weight: 700; }
.pl-prose { margin: 0; line-height: 1.95; white-space: pre-wrap; }

.pl-chat { margin-top: var(--s7); }
.pl-msg { margin: 0 0 var(--s3); padding: var(--s3) var(--s4); line-height: 1.85; white-space: pre-wrap; }
.pl-msg.is-ai { border-left: 4px solid var(--brand); background: var(--bg-2); }
.pl-msg.is-you { border-left: 4px solid var(--accent); margin-left: var(--s6); }
.pl-msg .pl-care { margin: 0; }
#pl-p-form { margin-top: var(--s4); }
#pl-p-form textarea { min-height: 120px; margin-bottom: var(--s3); }

.pl-dl { margin: 0; font-size: var(--t-s); }
.pl-dl dt { font-weight: 700; margin-top: var(--s4); }
.pl-dl dd { margin: var(--s1) 0 0; color: var(--ink-2); }

/* ---- B面の入口(2026-09-27 打ち手A〜F。PLAYLIST-LAB.md「🧗」)。カード画像の直下・保存/共有の上 ---- */
.pl-sideb { border: 2px solid var(--accent); padding: var(--s5) var(--s4); margin: var(--s5) 0 0; }
.pl-sideb[hidden] { display: none; }
.pl-sideb-head { font-size: var(--t-s); letter-spacing: .12em; color: var(--ink-2); margin: 0 0 var(--s3); }
.pl-sideb-head b { color: var(--accent); }
.pl-sideb-head span { letter-spacing: 0; margin-left: var(--s2); }
.pl-locked { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.pl-locked li { display: grid; grid-template-columns: 2.4em 1fr auto; gap: var(--s2); align-items: baseline;
  padding: var(--s3) 0; border-bottom: 1px dotted var(--line); }
.pl-locked-no { font-weight: 700; color: var(--accent); font-size: var(--t-l); line-height: 1.4; }
.pl-locked-title { font-weight: 700; line-height: 1.5; }
.pl-locked-key { font-size: var(--t-m); }
.pl-teaser { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); background: var(--bg-2); line-height: 1.85; }
.pl-teaser[hidden] { display: none; }
.pl-teaser-label { display: block; font-size: var(--t-s); letter-spacing: .12em; color: var(--ink-2); margin-bottom: var(--s1); }
/* 薄く見せる=末尾に向かって消える。文字は地に対して 4.5:1 を保つ濃さから始める */
.pl-teaser-text { color: var(--ink); -webkit-mask-image: linear-gradient(90deg, #000 55%, rgba(0,0,0,.25)); mask-image: linear-gradient(90deg, #000 55%, rgba(0,0,0,.25)); }
.pl-fine--sure { color: var(--ink); font-weight: 700; }
.pl-q-note { margin: 0 !important; font-size: var(--t-s); color: var(--brand) !important; font-weight: 700; }
.pl-sample { margin: var(--s4) 0 0; border-top: 2px dotted var(--line); padding-top: var(--s3); }
.pl-sample summary { cursor: pointer; font-weight: 700; font-size: var(--t-s); color: var(--ink); text-decoration: underline; }
.pl-sample summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pl-sample-body { margin-top: var(--s3); }
.pl-sample-type { font-family: var(--f-display); color: var(--brand); font-size: var(--t-xl); line-height: 1.3; margin: var(--s4) 0 var(--s2); }
.pl-sample .pl-sec { margin-top: var(--s5); }
.pl-sideb .pl-status:empty { min-height: 0; margin: 0; }