/* ============================================================
   BookSwipe #16「締切が近いほど別のことを始めたくなるのはなぜか」
   絵コンテ共通スタイル（storyboard.css）
   - ミニフレームは 16:9。中の座標は「1920x1080 の実座標」を % に直したもの
   - .zone-* はエリア分割ガイド（RULES 3-F）。要素はここから出さない
   - .a-* を付けた要素は絵コンテ上で実際に動く（3秒ループ／--d で遅延）
   ============================================================ */
:root{
  --bg:#0a0f1c; --panel:#101827; --panel2:#0d1420; --card:#131c2e;
  --border:#26324a; --border2:#334264;
  --ink:#e8edf7; --sub:#8e9bb8; --sub2:#6b7793;
  --cream:#f2ead9;

  /* 実画面の意味色 */
  --task:#4f95e8;        /* 本命の仕事＝企画書 */
  --task-soft:rgba(79,149,232,.16); --task-line:rgba(79,149,232,.6);
  --lure:#e8a33d;        /* 別の行動＝掃除・SNS・通知 */
  --lure-soft:rgba(232,163,61,.16); --lure-line:rgba(232,163,61,.6);
  --exp:#5fbf7a;         /* 期待 */
  --val:#d9b34a;         /* 価値 */
  --imp:#e2543a;         /* 衝動性 */
  --dly:#a78bd0;         /* 時間 */
  --fix:#f2ead9;         /* 解決策カード */

  /* 絵コンテ上の注記（実画面には出ない） */
  --note:#ff5fa2;
  --note-soft:rgba(255,95,162,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:
    radial-gradient(ellipse at 20% -10%,#17233c 0%,transparent 55%),
    radial-gradient(ellipse at 90% 0%,#16203a 0%,transparent 50%),
    var(--bg);
  color:var(--ink);
  font-family:'Yu Gothic','Hiragino Kaku Gothic ProN','Meiryo',sans-serif;
  line-height:1.7; padding:28px 20px 70px;
}
.wrap{max-width:1360px;margin:0 auto}
a{color:inherit}

/* ---------- header ---------- */
header.mast{
  border:1px solid var(--border2);
  background:linear-gradient(160deg,#141f36,#0e1626);
  border-radius:14px;padding:22px 26px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);position:relative;overflow:hidden;
}
header.mast::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,transparent,transparent 26px,rgba(255,255,255,.015) 26px,rgba(255,255,255,.015) 27px);
  pointer-events:none;
}
.mast-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;position:relative}
.mast-title-area{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
h1{font-size:clamp(20px,3.2vw,30px);font-weight:800;letter-spacing:.01em}
h1 .sc{color:var(--lure)}
.badge{
  font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--note);
  border:1px solid var(--note);background:var(--note-soft);
  padding:4px 10px;border-radius:999px;white-space:nowrap;
}
.ver-tag{
  font-family:'Courier New',monospace;font-size:12px;color:var(--sub);
  border:1px solid var(--border2);border-radius:8px;padding:8px 14px;text-align:right;line-height:1.5;
}
.ver-tag b{color:var(--ink);font-size:14px}
.mast-meta{display:flex;flex-wrap:wrap;margin-top:16px;position:relative;border-top:1px solid var(--border);padding-top:14px}
.mast-meta .m{padding:2px 20px;border-right:1px solid var(--border)}
.mast-meta .m:last-child{border-right:0}
.mast-meta span{display:block;font-size:10.5px;letter-spacing:.14em;color:var(--sub2);font-weight:700}
.mast-meta b{font-family:'Courier New',monospace;font-size:15px;font-weight:700;color:var(--cream)}

/* ---------- legend ---------- */
.legend{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.lg{border:1px solid var(--border);background:var(--panel);border-radius:12px;padding:16px 18px}
.lg h3{font-size:11px;letter-spacing:.16em;color:var(--sub);margin-bottom:10px;font-weight:800}
.lg ul{list-style:none;font-size:12.5px;color:var(--sub)}
.lg li{display:flex;align-items:center;gap:9px;padding:4px 0}
.lg .note li{color:#c3cbdc}
.lg .note b{color:var(--note)}
.lg code{font-family:'Courier New',monospace;background:rgba(255,255,255,.06);padding:1px 5px;border-radius:4px;color:var(--cream)}
.sw{width:16px;height:16px;border-radius:4px;flex:none;border:1px solid rgba(255,255,255,.15)}
.sw.task{background:var(--task)} .sw.lure{background:var(--lure)}
.sw.exp{background:var(--exp)} .sw.val{background:var(--val)}
.sw.imp{background:var(--imp)} .sw.dly{background:var(--dly)}
.sw.fix{background:var(--fix)} .sw.note{background:var(--note)}
.sw.navy{background:#1c2740;border:1px dashed var(--sub2)}

/* ---------- nav ---------- */
.nav{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.nav a{
  text-decoration:none;font-size:12.5px;font-weight:700;color:var(--sub);
  border:1px solid var(--border2);background:var(--panel2);border-radius:8px;padding:7px 13px;
}
.nav a:hover{color:var(--cream);border-color:var(--lure)}
.nav a.on{color:#241505;background:var(--lure);border-color:var(--lure)}

/* ---------- scene head ---------- */
.scene-head{
  margin-top:26px;display:flex;align-items:stretch;border:1px solid var(--border2);
  background:linear-gradient(120deg,#15203a,#101a2c);border-radius:12px;overflow:hidden;
}
.sh-no{
  min-width:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--lure),#a9701f);color:#241505;padding:10px 6px;
}
.sh-no i{font-style:normal;font-size:10px;letter-spacing:.3em;opacity:.75}
.sh-no b{font-size:30px;font-weight:900;line-height:1.1}
.sh-body{flex:1;padding:14px 20px}
.sh-body h2{font-size:clamp(16px,2.2vw,20px);font-weight:800}
.sh-body p{font-size:12.5px;color:var(--sub);margin-top:4px}
.sh-side{
  border-left:1px solid var(--border);padding:14px 20px;display:flex;flex-direction:column;
  justify-content:center;gap:3px;text-align:right;font-family:'Courier New',monospace;color:var(--sub);min-width:158px;
}
.sh-side b{color:var(--ink);font-size:15px}

/* ---------- flow（シーンの移り変わり図） ---------- */
.flow{
  margin-top:16px;border:1px solid var(--border);background:var(--panel);border-radius:12px;padding:16px 18px;
}
.flow h3{font-size:11px;letter-spacing:.16em;color:var(--sub);margin-bottom:12px;font-weight:800}
.flow-line{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.fl-step{
  flex:1;min-width:150px;border:1px solid var(--border2);background:var(--panel2);border-radius:10px;
  padding:10px 12px;position:relative;
}
.fl-step em{font-style:normal;display:block;font-family:'Courier New',monospace;font-size:10.5px;color:var(--sub2);letter-spacing:.08em}
.fl-step b{display:block;font-size:13px;color:var(--cream);margin-top:3px;line-height:1.45}
.fl-step p{font-size:11.5px;color:var(--sub);margin-top:5px;line-height:1.55}
.fl-step.hit{border-color:var(--lure);box-shadow:0 0 0 1px rgba(232,163,61,.25) inset}
.fl-step.fix{border-color:var(--exp)}
.fl-arrow{
  flex:none;width:34px;display:flex;align-items:center;justify-content:center;
  color:var(--note);font-size:17px;font-weight:800;
}

/* ---------- cut grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:20px;margin-top:20px}
.cut{
  background:var(--card);border:1px solid var(--border2);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.cut-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;background:var(--panel2);border-bottom:1px solid var(--border)}
.cut-head .cno{font-family:'Courier New',monospace;font-weight:800;font-size:13.5px;color:var(--lure)}
.cut-head .ctc{font-family:'Courier New',monospace;font-size:11.5px;color:var(--sub)}
.cut-head .cdur{font-family:'Courier New',monospace;font-size:11px;color:var(--cream);background:rgba(255,255,255,.05);padding:2px 8px;border-radius:6px;border:1px solid var(--border2)}

/* ---------- mini frame（16:9・中は実座標%） ---------- */
.miniframe{
  position:relative;width:100%;aspect-ratio:16/9;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 40px),
    linear-gradient(160deg,#0c1424,#0a101d);
  border-bottom:1px solid var(--border);overflow:hidden;
}
/* エリアガイド（RULES 3-F の実寸を%換算） */
.zone{position:absolute;border:1px dashed rgba(255,255,255,.10);border-radius:3px;pointer-events:none}
.zone-g{left:1.25%;top:2.2%;width:76.1%;height:77.0%}
.zone-s{left:2.3%;top:80.7%;width:73.9%;height:17.8%;border-color:rgba(255,255,255,.14)}
.zone-z{left:78.1%;top:61.1%;width:21.9%;height:38.9%;border-color:rgba(120,200,90,.18)}

.mf-el{
  position:absolute;border-radius:5px;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:11px;font-weight:700;padding:3px 6px;line-height:1.3;
}
.mf-task{background:var(--task-soft);border:1.4px solid var(--task-line);color:var(--task)}
.mf-lure{background:var(--lure-soft);border:1.4px solid var(--lure-line);color:var(--lure)}
.mf-exp{background:rgba(95,191,122,.14);border:1.4px solid rgba(95,191,122,.6);color:var(--exp)}
.mf-val{background:rgba(217,179,74,.14);border:1.4px solid rgba(217,179,74,.6);color:var(--val)}
.mf-imp{background:rgba(226,84,58,.14);border:1.4px solid rgba(226,84,58,.6);color:var(--imp)}
.mf-dly{background:rgba(167,139,208,.14);border:1.4px solid rgba(167,139,208,.6);color:var(--dly)}
.mf-fix{background:rgba(242,234,217,.10);border:1.4px solid rgba(242,234,217,.55);color:var(--cream)}
.mf-neutral{background:rgba(255,255,255,.05);border:1.3px solid rgba(255,255,255,.18);color:var(--cream)}
.mf-ghost{background:transparent;border:1.3px dashed rgba(255,255,255,.22);color:var(--sub2)}
.mf-text{
  font-size:12.5px;font-weight:800;color:var(--cream);background:rgba(8,12,22,.86);
  border:1px solid var(--border2);border-radius:5px;padding:6px 10px;
}
.mf-sub{ /* 字幕（白カード＋濃い文字） */
  position:absolute;left:2.3%;width:73.9%;bottom:2.2%;
  background:rgba(242,240,232,.92);color:#2c2a24;border-radius:6px;
  font-size:10.5px;font-weight:700;padding:5px 8px;text-align:center;line-height:1.35;
}
.mf-zun{
  position:absolute;right:1.5%;bottom:2%;width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#c9ea8f,#7fb84a);
  border:1.5px solid #4c7a2c;display:flex;align-items:center;justify-content:center;
  font-size:8.5px;font-weight:800;color:#233414;text-align:center;line-height:1.15;
}
.mf-note{position:absolute;font-size:9.5px;font-weight:700;color:var(--note);text-shadow:0 1px 3px rgba(0,0,0,.7);z-index:5}
.mf-tag{
  position:absolute;top:6px;left:6px;background:rgba(8,12,22,.8);border:1px solid var(--border2);
  font-family:'Courier New',monospace;font-size:9.5px;color:var(--sub);padding:2px 6px;border-radius:4px;z-index:6;
}
.mf-arrow{position:absolute;height:0;border-top:1.8px dashed var(--note);transform-origin:left center;z-index:4}
.mf-arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:4px solid transparent;border-left-color:var(--note)}

/* 優先度メーター（本作の通し図解） */
.gauge{position:absolute;width:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:3px;overflow:hidden}
.gauge i{position:absolute;left:0;bottom:0;width:100%;display:block;transform-origin:bottom}
.gauge i.task{background:var(--task)} .gauge i.lure{background:var(--lure)}
.gauge-lbl{position:absolute;font-size:9px;font-weight:800;color:var(--cream)}

/* ---------- rows ---------- */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:64px 1fr;border-top:1px solid var(--border)}
.row .label{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--sub2);padding:10px 0 0 14px}
.row .val{padding:9px 14px 11px;font-size:12.8px;color:#dbe2f0}
.row.serif .val{color:#cfd7e8}
.row.motion{background:var(--note-soft)}
.row.motion .label{color:var(--note)}
.row.motion .val{font-size:12.3px;line-height:1.75}
.row.motion b{color:var(--note);font-weight:800}
.row.motion .se{color:var(--val);font-weight:800}
.row.telop .val{color:var(--val);font-weight:700}
.emo-tag{display:inline-block;font-size:11px;font-weight:800;color:#1c1408;background:var(--val);padding:1px 7px;border-radius:6px;margin-right:6px}

/* ---------- footer ---------- */
footer{margin-top:34px}
.foot-in{border:1px solid var(--border2);background:var(--panel);border-radius:12px;padding:18px 22px;font-size:12.8px;color:#c3cbdc}
.foot-in h3{font-size:11px;letter-spacing:.18em;color:var(--sub);margin-bottom:8px;font-weight:800}
.foot-in p{margin:4px 0}
.foot-in .note{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border2);color:var(--sub)}

/* ============================================================
   動きプレビュー（絵コンテ上で実際に再生される）
   共通タイムライン: 0-6% 待機 / 6-20% IN / 20-86% ホールド / 86-100% OUT
   --d でカット内の時間差（staggered reveal）を表す
   ============================================================ */
.miniframe [class*="a-"]{animation-duration:3.2s;animation-iteration-count:infinite;animation-delay:var(--d,0s);animation-timing-function:cubic-bezier(.2,.8,.3,1)}
@keyframes inL{0%,6%{opacity:0;transform:translateX(-28px)}20%,86%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}
@keyframes inR{0%,6%{opacity:0;transform:translateX(28px)}20%,86%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}
@keyframes inU{0%,6%{opacity:0;transform:translateY(24px)}20%,86%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes inD{0%,6%{opacity:0;transform:translateY(-24px)}20%,86%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes pop{0%,6%{opacity:0;transform:scale(.55)}16%{opacity:1;transform:scale(1.12)}22%,86%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes zoom{0%,6%{opacity:0;transform:scale(1.7)}20%,86%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes fade{0%,6%{opacity:0}20%,86%{opacity:1}100%{opacity:0}}
@keyframes grow{0%,6%{transform:scaleY(0)}20%,86%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:.25}}
@keyframes growx{0%,6%{transform:scaleX(0)}20%,86%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:.25}}
@keyframes shrink{0%,6%{transform:scaleY(1)}20%,86%{transform:scaleY(.22)}100%{transform:scaleY(.22);opacity:.25}}
@keyframes drawline{0%,6%{stroke-dashoffset:220}30%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:.3}}
.a-inL{animation-name:inL} .a-inR{animation-name:inR}
.a-inU{animation-name:inU} .a-inD{animation-name:inD}
.a-pop{animation-name:pop} .a-zoom{animation-name:zoom} .a-fade{animation-name:fade}
.a-grow{animation-name:grow;transform-origin:bottom}
.a-growx{animation-name:growx;transform-origin:left}
.a-shrink{animation-name:shrink;transform-origin:bottom}
.a-draw{animation-name:drawline;stroke-dasharray:220}

/* 継続モーション（ホールド中ずっと動く） */
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.28}}
@keyframes orbit{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes tilt{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.m-shake{animation:shake .9s infinite ease-in-out}
.m-pulse{animation:pulse 1.6s infinite ease-in-out}
.m-blink{animation:blink 1.4s infinite ease-in-out}
.m-orbit{animation:orbit 9s infinite linear}
.m-tilt{animation:tilt 2.6s infinite ease-in-out}
.m-drift{animation:drift 2.4s infinite ease-in-out}

@media(prefers-reduced-motion:reduce){
  .miniframe *{animation:none!important;opacity:1!important;transform:none!important}
}
@media(max-width:860px){
  .legend{grid-template-columns:1fr}
  .mast-meta .m{border-right:0;border-bottom:1px solid var(--border);width:100%;padding:6px 4px}
  .scene-head{flex-wrap:wrap}
  .sh-side{border-left:0;border-top:1px solid var(--border);width:100%;flex-direction:row;justify-content:space-between;text-align:left}
  .grid{grid-template-columns:1fr}
}

/* ===== #17 黒歴史 追加トークン（2026-08-14） ===== */
:root{
  --kuro:#e2543a;   /* 黒歴史の玉・恥・判決印（アクセント：1カット1要素） */
  --good:#4f95e8;   /* 良い思い出の玉 */
  --cue:#d9a441;    /* 手がかり＝入口のレバー */
  --rumi:#a78bd0;   /* 反すう＝ループのレール */
  --guess:#b9b2a3;  /* あとから足した推測＝付箋 */
  --fact:#f2ead9;   /* 事実の核・受け皿 */
}
.mf-kuro {background:rgba(226,84,58,.14); border:1.4px solid rgba(226,84,58,.62); color:var(--kuro)}
.mf-good {background:rgba(79,149,232,.14);border:1.4px solid rgba(79,149,232,.62);color:var(--good)}
.mf-cue  {background:rgba(217,164,65,.14);border:1.4px solid rgba(217,164,65,.62);color:var(--cue)}
.mf-rumi {background:rgba(167,139,208,.14);border:1.4px solid rgba(167,139,208,.62);color:var(--rumi)}
.mf-guess{background:rgba(185,178,163,.12);border:1.4px dashed rgba(185,178,163,.60);color:#cfc8b8}
.mf-fact {background:rgba(242,234,217,.10);border:1.4px solid rgba(242,234,217,.55);color:var(--fact)}
/* 玉（丸） */
.mf-ball{border-radius:50%;font-size:9px}
/* 進捗メーター（左下常駐・8段） */
.mf-meter{position:absolute;left:2.4%;bottom:21%;display:flex;gap:2px;align-items:flex-end;z-index:4}
.mf-meter i{display:block;width:5px;background:rgba(255,255,255,.16);border-radius:1px}
.mf-meter i.on{background:var(--kuro)}
.mf-meter i:nth-child(1){height:5px}  .mf-meter i:nth-child(2){height:7px}
.mf-meter i:nth-child(3){height:9px}  .mf-meter i:nth-child(4){height:11px}
.mf-meter i:nth-child(5){height:13px} .mf-meter i:nth-child(6){height:15px}
.mf-meter i:nth-child(7){height:17px} .mf-meter i:nth-child(8){height:19px}