/* =========================================================================
   NEO JAPONISM — upcoming show info ジェネレーター
   #stage は 1600×900 固定（書き出し対象）。可変テキストの座標は
   下の「===== 座標表 =====」で調整する（PSD/AIから実測した値）。
   ========================================================================= */

/* ---- 実フォント（PSD/AIで使用の書体を woff2 化して同梱） ---- */
@font-face { font-family:'NJDin';    src:url('assets/fonts/din.woff2') format('woff2');         font-display:swap; }
@font-face { font-family:'NJFutura'; src:url('assets/fonts/futura.woff2') format('woff2');      font-display:swap; }
/* イベント名見出し用：Futura Condensed ExtraBold（自然字幅で読める縦長コンデンス書体） */
@font-face { font-family:'NJFuturaCnd'; src:url('assets/fonts/futura-cond-xbold.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'NJNotoBk'; src:url('assets/fonts/noto-black.woff2') format('woff2');  font-display:swap; }
@font-face { font-family:'NJNotoB';  src:url('assets/fonts/noto-bold.woff2') format('woff2');   font-display:swap; }
@font-face { font-family:'NJNotoM';  src:url('assets/fonts/noto-medium.woff2') format('woff2'); font-display:swap; }

:root { --form-w: 380px; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family:'Hiragino Sans','Noto Sans JP',sans-serif; background:#15171c; color:#e7e9ee; -webkit-font-smoothing:antialiased; }

/* ===== 全体レイアウト ===== */
.app { display:grid; grid-template-columns: var(--form-w) 1fr; min-height:100vh; }

/* ---------- フォーム ---------- */
.form { padding:22px 20px 40px; background:#1c1f26; border-right:1px solid #2c313c; overflow-y:auto; }
.form h1 { font-size:17px; line-height:1.3; margin:0 0 18px; }
.form h1 small { display:block; font-size:11px; color:#8b93a3; font-weight:400; margin-top:4px; }
.field { display:flex; flex-direction:column; margin-bottom:14px; }
.field label { font-size:12px; color:#aeb6c5; margin-bottom:5px; }
.field label span { color:#6f7689; font-size:11px; }
.field input, .field textarea { font:inherit; font-size:14px; background:#11141a; color:#fff; border:1px solid #353b48; border-radius:7px; padding:9px 11px; outline:none; resize:vertical; }
.field input:focus, .field textarea:focus { border-color:#d23b3b; }
.row { display:flex; gap:10px; }
.row .field { flex:0 0 110px; }
.row .field.grow { flex:1; }
.box-fields { border:1px solid #2c313c; border-radius:9px; padding:12px 12px 0; margin-bottom:14px; }
.mini { align-self:flex-start; margin:-4px 0 16px; font-size:11px; color:#cfd4df; background:#2a2f3a; border:1px solid #3a4150; border-radius:6px; padding:5px 10px; cursor:pointer; }
.mini:hover { background:#333a47; }
.actions { margin:18px 0 8px; }
button.primary { width:100%; font:inherit; font-weight:700; font-size:15px; color:#fff; background:#d23b3b; border:0; border-radius:9px; padding:13px; cursor:pointer; }
button.primary:hover { background:#e04545; }
button.primary:active { transform:translateY(1px); }
button.primary:disabled { opacity:.6; cursor:default; }
.presets { margin-top:16px; }
.presets summary { cursor:pointer; font-size:12px; color:#aeb6c5; }
.preset-buttons { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.preset-buttons button { font:inherit; font-size:12px; text-align:left; color:#d7dbe4; background:#20242d; border:1px solid #333a47; border-radius:6px; padding:8px 10px; cursor:pointer; }
.preset-buttons button:hover { border-color:#d23b3b; }
.hint { font-size:11px; line-height:1.6; color:#7d8597; margin-top:18px; }
.hint b { color:#c6ccd8; }

/* ---------- プレビュー ---------- */
.preview { padding:18px 22px; overflow:auto; }
.preview-bar { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.badge { font-size:12px; font-weight:700; color:#fff; background:#d23b3b; border-radius:6px; padding:4px 9px; }
.scale { font-size:12px; color:#8b93a3; }
.stage-frame { overflow:hidden; border-radius:8px; box-shadow:0 10px 40px rgba(0,0,0,.45); width:max-content; }
#stage-wrap { transform-origin:top left; }

/* ★★★ 書き出し対象：1600×900 ★★★ */
#stage { position:relative; width:1600px; height:900px; overflow:hidden; background:#b1121a; }
#plate { position:absolute; inset:0; width:1600px; height:900px; object-fit:cover; display:none; }
.has-plate #plate { display:block; }
.has-plate #plate-placeholder { display:none; }
#plate-placeholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.ph-watermark { font-size:22px; letter-spacing:.1em; color:rgba(255,255,255,.7); }

/* =======================================================================
   ★★★★★  レ イ ア ウ ト 表  ★★★★★   単位 px。原点=#stageの左上。
   --- UX再設計版 ---
   背景プレートの左カラム使用域：x 124–645 / 上部 y≈150 〜 枠上端 y=596。
   出演・特典会の囲み枠（プレート実測）：x 135–618, y 596–747。
   縦リズム：日付ブロック → 余白 → イベント名 → 余白 → 会場 → 枠。
   イベント名は scaleX 圧縮を廃止。Futura Condensed（自然字幅）＋
   フォントサイズ自動調整＋2行折返しで「潰さず収める」（app.js fitEvent）。
   ======================================================================= */
.ov  { position:absolute; color:#fff; }
.ovb { position:absolute; color:#fff; }   /* ベースライン基準（line-height:0） */
.ovb { line-height:0; white-space:nowrap; }
.ovb > span { display:inline-block; line-height:0; transform-origin:left center; }

/* 左カラムの基準左端 */
:root { --col-left:126px; }

/* (1) 日付 06.03  — ヒーロー。DIN Condensed Bold。
   ※AI埋込DINは提供macOS版より約1.31倍背が高い→幅一致のためscaleYで補正 */
.ov-date { left:124.7px; top:392px; font-family:'NJDin'; font-size:236px;
           transform:scaleY(1.31); transform-origin:left 34px; }
/* (2) 曜日 WED（日付とベースライン揃え） */
.ov-wd   { left:498px; top:407px; font-family:'NJDin'; font-size:80px;
           transform:scaleY(1.22); transform-origin:left 16px; }

/* (3) イベント名 — Futura Condensed ExtraBold（Latin）＋ NotoBlack（♫/和文）。
   横圧縮なし・自然字幅。最大2行・フォントサイズは app.js が枠内に収まるよう調整。
   ブロックは「下端固定」：短い名前は下寄せで会場と一定の間隔、
   長い名前は2行になり日付の下の余白へ上方向に伸びる。 */
.ov-event {
  left:var(--col-left); top:462px; width:512px; height:112px;
  display:flex; flex-direction:column; justify-content:center;
  font-family:'NJFuturaCnd','NJNotoBk',sans-serif; font-weight:800;
  font-size:76px; line-height:0.98; letter-spacing:0.005em;
  color:#fff; white-space:normal; word-break:normal; overflow-wrap:anywhere;
}

/* (4) 会場 — NotoBold。控えめなトラッキングで可読性確保（過剰な字間を廃止） */
.ov-venue { left:var(--col-left); top:586px; font-family:'NJNotoB'; font-size:34px;
            letter-spacing:0.12em; }

/* (5) 出演 / 特典会 ラベル — NotoMedium。枠内 行ベースライン基準 */
.ov-perf-label  { left:170px; top:648px; font-family:'NJNotoM'; font-size:35px; }
.ov-bonus-label { left:170px; top:699px; font-family:'NJNotoM'; font-size:35px; }
.ov-perf-label > span, .ov-bonus-label > span { transform:scaleX(0.92); }

/* 出演 / 特典会 時間 — Futura（数字のリズム）※scaleYで高さ補正 */
.ov-perf-value  { left:322px; top:649px; font-family:'NJFutura'; font-size:42.5px;
                  transform:scaleY(1.31); transform-origin:left 15px; }
.ov-bonus-value { left:322px; top:699px; font-family:'NJFutura'; font-size:42.5px;
                  transform:scaleY(1.31); transform-origin:left 15px; }

/* ===== レスポンシブ ===== */
@media (max-width: 820px) {
  .app { grid-template-columns:1fr; }
  .form { border-right:0; border-bottom:1px solid #2c313c; }
}