@charset "utf-8";
/* ==========================================================================
   Project — /demo/script/（YouTube・ショート動画の台本の作例）
   2026-10-11 新設。
   ⛔ 台本は表（table）で組まない。4列の表はスマホで横スクロールになり、
      ナレーションが1行に数文字しか入らなくなる。1シーン＝1ブロックにして、
      広い画面では3列、狭い画面では縦に積む。
   ========================================================================== */

/* サムネイルの見本だけは、テーマ（ライト/ダーク）に追従させない。
   実際の動画サムネイルは画像として固定の色で出るため、見本もそれに合わせる。
   ⛔ 色を変えたら白抜き・黄色の文字のコントラストを測り直す（地 #2b1d12 に対し #ffd84d は約12:1） */
:root {
  --script-thumb-ink: #ffffff;
  --script-thumb-accent: #ffd84d;
  --script-thumb-plate: #fffaf0;
  --script-thumb-plate-ink: #2b1d12;
}

@layer project {

  /* ---- サムネイルの見本（16:9） --------------------------------------- */
  .p-script-thumb {
    position: relative;
    display: flex; flex-direction: column; justify-content: center; gap: var(--space-3);
    aspect-ratio: 16 / 9;
    padding: var(--space-6);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #2b1d12 0%, #4a3220 60%, #6b4a2e 100%);
    color: var(--script-thumb-ink);
    overflow: hidden;
    box-shadow: var(--shadow-float);
  }
  .p-script-thumb--green { background: linear-gradient(135deg, #10291f 0%, #1d4634 60%, #2d5f48 100%); }
  .p-script-thumb--navy  { background: linear-gradient(135deg, #111b2e 0%, #1f3050 60%, #2e4570 100%); }
  .p-script-thumb__main {
    color: var(--script-thumb-accent);
    font-size: var(--fs-figure); font-weight: 700; line-height: 1.2;
    letter-spacing: .02em;
    font-feature-settings: "palt";
  }
  .p-script-thumb__main-line { display: block; }
  .p-script-thumb__sub {
    align-self: flex-start;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--script-thumb-plate);
    color: var(--script-thumb-plate-ink);
    font-size: var(--fs-xl); font-weight: 700;
  }
  .p-script-thumb__time {
    position: absolute; right: 8px; bottom: 8px;
    padding: 0 var(--space-1);
    border-radius: 4px;
    background: rgb(0 0 0 / 80%);
    color: #ffffff;
    font-size: var(--fs-xs); font-weight: 700;
  }
  /* 3案を並べるときの縮小版 */
  .p-script-thumb--small { padding: var(--space-4); gap: var(--space-2); box-shadow: none; }
  .p-script-thumb--small .p-script-thumb__main { font-size: var(--fs-3xl); }
  .p-script-thumb--small .p-script-thumb__sub { font-size: var(--fs-sm); }

  .p-script-thumbs {
    display: grid; gap: var(--space-6);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0; padding: 0; list-style: none;
  }
  .p-script-thumbs__item + .p-script-thumbs__item { margin-top: 0; }
  .p-script-thumbs__cap { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: var(--lh-compact); }
  .p-script-thumbs__cap-title { display: block; font-weight: 700; color: var(--color-text-primary); }

  /* ---- 台本の1シーン ---------------------------------------------------- */
  .p-script-scenes { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
  .p-script-scenes__item + .p-script-scenes__item { margin-top: 0; }
  .p-script-scene {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .p-script-scene__head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-surface-alt);
    border-bottom: 1px solid var(--color-border);
  }
  .p-script-scene__time {
    padding: 0 var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .p-script-scene__name { font-size: var(--fs-md); }
  .p-script-scene__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  }
  .p-script-scene__col { padding: var(--space-4); font-size: var(--fs-sm); line-height: var(--lh-compact); }
  .p-script-scene__col + .p-script-scene__col { border-left: 1px solid var(--color-border); }
  .p-script-scene__col--talk { font-size: var(--fs-md); line-height: var(--lh-body); }
  .p-script-scene__label {
    display: block; margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em;
  }
  .p-script-scene__col > p + p { margin-top: var(--space-2); }
  .p-script-scene__telop {
    display: grid; gap: var(--space-2);
    margin: 0; padding: 0; list-style: none;
  }
  .p-script-scene__telop-item + .p-script-scene__telop-item { margin-top: 0; }
  .p-script-scene__telop-item {
    padding: var(--space-1) var(--space-2);
    border-left: 4px solid var(--color-accent);
    background: var(--color-accent-surface);
    font-weight: 700;
  }
  .p-script-scene__memo {
    padding: var(--space-2) var(--space-4);
    border-top: 1px dashed var(--color-border-strong);
    color: var(--color-warn-text);
    background: var(--color-warn-surface);
    font-size: var(--fs-xs); line-height: var(--lh-compact);
  }

  /* ---- ショート（秒数の帯を左に） --------------------------------------- */
  .p-script-shorts {
    display: grid; gap: var(--space-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .p-script-short {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .p-script-short__head { padding: var(--space-4); background: var(--color-bg-surface-alt); border-bottom: 1px solid var(--color-border); }
  .p-script-short__kind { display: block; color: var(--color-accent); font-size: var(--fs-xs); font-weight: 700; }
  .p-script-short__title { margin-top: var(--space-1); font-size: var(--fs-lg); }
  .p-script-short__aim { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: var(--lh-compact); }
  .p-script-short__rows { margin: 0; padding: 0; list-style: none; }
  .p-script-short__row + .p-script-short__row { margin-top: 0; border-top: 1px solid var(--color-border); }
  .p-script-short__row {
    display: grid; grid-template-columns: 72px 1fr;
  }
  .p-script-short__sec {
    padding: var(--space-3) var(--space-2);
    background: var(--color-accent-surface);
    color: var(--color-accent);
    font-size: var(--fs-xs); font-weight: 700; text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .p-script-short__body { padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); line-height: var(--lh-compact); }
  .p-script-short__shot { color: var(--color-text-muted); font-size: var(--fs-xs); }
  .p-script-short__line { margin-top: var(--space-1); color: var(--color-text-primary); }
  .p-script-short__telop {
    display: inline-block; margin-top: var(--space-1);
    padding: 0 var(--space-2);
    border-left: 4px solid var(--color-accent);
    background: var(--color-accent-surface);
    font-weight: 700;
  }

  /* ---- 概要欄（等幅にせず、改行だけ保つ） ------------------------------- */
  .p-script-desc {
    padding: var(--space-4) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface-alt);
    font-size: var(--fs-sm); line-height: var(--lh-body);
    white-space: pre-line;
  }

  @media (max-width: 899px) {
    .p-script-thumbs { grid-template-columns: 1fr; }
    .p-script-shorts { grid-template-columns: 1fr; }
    .p-script-scene__grid { grid-template-columns: 1fr; }
    .p-script-scene__col + .p-script-scene__col { border-left: 0; border-top: 1px solid var(--color-border); }
  }
  @media (max-width: 767px) {
    .p-script-thumb__main { font-size: var(--fs-display); }
    .p-script-thumb__sub { font-size: var(--fs-md); }
  }
}