:root { --bg:#f4f5f7; --panel:#fff; --ink:#1d2330; --muted:#6b7280; --line:#e3e6eb; --primary:#1b4db5; --accent:#f2c230; --ok:#1a9a5a; --err:#c0392b; --run:#d97706; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Hiragino Sans","Noto Sans JP",sans-serif; background:var(--bg); color:var(--ink); font-size:15px; }
header { background:var(--ink); color:#fff; padding:14px 24px; display:flex; align-items:center; gap:16px; }
header h1 { font-size:18px; margin:0; font-weight:700; }
header .sub { color:#aab; font-size:13px; }
.layout { display:grid; grid-template-columns:300px 1fr; min-height:calc(100vh - 52px); }
aside { background:var(--panel); border-right:1px solid var(--line); padding:16px; }
main { padding:20px 28px 60px; }
button { font:inherit; border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 14px; cursor:pointer; }
button.primary { background:var(--primary); color:#fff; border-color:var(--primary); font-weight:700; }
button.big { padding:14px 28px; font-size:17px; }
button:disabled { opacity:.5; cursor:default; }
input[type=text], textarea, select { font:inherit; width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 10px; background:#fff; }
textarea { min-height:60px; resize:vertical; }
.joblist { list-style:none; margin:12px 0 0; padding:0; }
.joblist li { padding:10px 12px; border-radius:8px; cursor:pointer; border:1px solid transparent; margin-bottom:6px; }
.joblist li:hover { background:#f0f3f9; }
.joblist li.active { border-color:var(--primary); background:#eef3ff; }
.joblist .name { font-weight:700; }
.joblist .meta { font-size:12px; color:var(--muted); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-bottom:18px; }
.card h2 { font-size:16px; margin:0 0 12px; display:flex; align-items:center; gap:10px; }
.card h2 .step { background:var(--primary); color:#fff; border-radius:50%; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
.field label { display:block; font-size:13px; color:var(--muted); margin:8px 0 4px; }
.assets { display:flex; flex-wrap:wrap; gap:10px; }
.asset { width:140px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fafafa; position:relative; }
.asset img { width:100%; height:100px; object-fit:contain; background:#eee; display:block; }
.asset .pdf { height:100px; display:flex; align-items:center; justify-content:center; font-weight:700; color:#b33; background:#fff3f3; }
.asset .n { font-size:11px; padding:6px; word-break:break-all; }
.asset .x { position:absolute; right:4px; top:4px; background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:50%; width:22px; height:22px; padding:0; }
.drop { border:2px dashed #c7cdd8; border-radius:10px; padding:18px; text-align:center; color:var(--muted); margin-bottom:12px; }
.drop.over { background:#eef3ff; border-color:var(--primary); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { border:1px solid var(--line); border-radius:999px; padding:7px 14px; cursor:pointer; user-select:none; background:#fff; }
.chip.on { background:var(--primary); color:#fff; border-color:var(--primary); }
.chip.pattern.on { background:#1d2330; border-color:#1d2330; }
.swatch { display:inline-flex; align-items:center; gap:8px; margin-right:16px; }
.swatch input[type=color] { width:44px; height:32px; border:1px solid var(--line); border-radius:6px; padding:0; background:#fff; }
.variants { display:grid; grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); gap:16px; }
.variant { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.variant .head { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--line); }
.variant .head b { font-size:15px; }
.status { font-size:12px; padding:3px 10px; border-radius:999px; color:#fff; background:var(--muted); }
.status.done { background:var(--ok); } .status.running { background:var(--run); } .status.queued { background:#888; } .status.error { background:var(--err); }
.variant video, .variant img.sheet { width:100%; display:block; background:#000; }
.variant .body { padding:12px 14px; }
.variant .actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.notes { white-space:pre-wrap; font-size:13px; color:#333; background:#fafafa; border:1px solid var(--line); border-radius:8px; padding:10px; max-height:260px; overflow:auto; margin-top:10px; }
.hint { color:var(--muted); font-size:13px; }
.selected { outline:3px solid var(--ok); }
.badge-sel { background:var(--ok); color:#fff; font-size:12px; padding:3px 8px; border-radius:6px; margin-left:8px; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:100; }
.modal.open { display:flex; }
.modal .box { background:#fff; width:900px; max-height:90vh; overflow:auto; border-radius:12px; padding:20px 24px; }
.cutrow { border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin-bottom:10px; }
.cutrow .t { font-weight:700; margin-bottom:6px; color:var(--primary); }
.cutrow .grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#1d2330; color:#fff; padding:10px 18px; border-radius:8px; display:none; z-index:200; }
.progress { font-size:13px; color:var(--muted); margin-top:6px; }
/* お客様ページ */
.customer { max-width:1100px; margin:0 auto; padding:24px; }
.customer h1 { font-size:22px; }
.customer .variant { margin-bottom:20px; }
.customer .choose { background:var(--ok); color:#fff; border-color:var(--ok); font-weight:700; }
/* 追加: お客様ごとの一覧、参考、縦型 */
.custgroup { margin-top:12px; }
.custgroup .cname { font-size:12px; color:var(--muted); font-weight:700; padding:4px 6px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.joblist { margin-top:0; }
.sidefoot { margin-top:18px; border-top:1px solid var(--line); padding-top:12px; }
.refs { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.ref { width:180px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fafafa; position:relative; }
.ref img { width:100%; height:120px; object-fit:cover; object-position:top; display:block; }
.ref .n { font-size:11px; padding:6px; }
.ref .x { position:absolute; right:4px; top:4px; background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:50%; width:22px; height:22px; padding:0; }
.pastgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; }
.past { border:1px solid var(--line); border-radius:8px; overflow:hidden; cursor:pointer; background:#fff; }
.past.on { outline:3px solid var(--primary); }
.past img { width:100%; display:block; }
.past .n { font-size:12px; padding:8px; }
.past .sel { color:var(--ok); font-weight:700; }
.variant.portrait video, .variant.portrait img.sheet { max-height:560px; object-fit:contain; background:#111; }
.facts { white-space:pre-wrap; font-size:13px; background:#fffbe6; border:1px solid #f0e2a0; border-radius:8px; padding:10px; margin-top:8px; }
.spin { display:inline-block; width:14px; height:14px; border:2px solid #ccc; border-top-color:var(--primary); border-radius:50%; animation: spin .8s linear infinite; vertical-align:middle; margin-right:6px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* 進捗バー */
.progwrap { padding:14px 14px 6px; }
.bar { height:14px; background:#e9ecf1; border-radius:999px; overflow:hidden; }
.bar.big { height:18px; }
.bar .fill { height:100%; background:linear-gradient(90deg, #1b4db5, #4f8cff); border-radius:999px; transition:width .6s ease; }
.stage { font-size:13px; color:#333; margin-top:8px; }
img.sheet.dim { opacity:.55; margin-top:10px; border-radius:6px; }
#concurrency { font:inherit; padding:4px 8px; border:1px solid var(--line); border-radius:6px; margin-left:6px; }

/* バナーから作る */
.bannerbox { margin-top:16px; border:1px dashed #c7cdd8; border-radius:10px; padding:14px 16px; background:#fbfcff; }
.bannerbox .bhead { display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; margin-bottom:6px; }
.bannerbox .brow { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; }
.bannerbox select { font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; min-width:260px; }
.bthumb img { height:110px; border-radius:6px; border:1px solid var(--line); display:block; }
.chip.btype.on { background:#b4471c; border-color:#b4471c; }

/* ---------- ログイン・利用者メニュー・運営者の画面 ---------- */
input[type=password], input[type=number], input[type=date] { font:inherit; width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 10px; background:#fff; }
.loginpage { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.loginbox { width:100%; max-width:400px; padding:32px 32px 24px; }
.loginbox h1 { font-size:20px; margin:0 0 8px; }
.loginbox .field { margin:16px 0 0; }
.loginbox .field label { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.loginbox button { width:100%; margin-top:16px; }
.err { color:var(--err); font-size:14px; min-height:1.5em; margin:12px 0 0; }
.hint.small { font-size:12px; margin-top:16px; }
header .spacer { flex:1; }
header .usage { font-size:13px; color:#dfe3ea; background:rgba(255,255,255,.08); border-radius:999px; padding:6px 12px; white-space:nowrap; }
header .usage b { color:#fff; }
header .usage.trial { background:rgba(242,194,48,.18); }
header .who { position:relative; }
header .who > button { background:transparent; color:#fff; border-color:rgba(255,255,255,.25); font-size:13px; padding:6px 12px; }
header .menu { display:none; position:absolute; right:0; top:calc(100% + 8px); background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); min-width:200px; padding:8px; z-index:20; }
header .menu.open { display:block; }
header .menu a, header .menu button { display:block; width:100%; text-align:left; border:0; background:none; padding:10px 12px; border-radius:6px; color:inherit; text-decoration:none; font-size:14px; }
header .menu a:hover, header .menu button:hover { background:#f0f3f9; }
header a.adminlink { color:#fff; font-size:13px; text-decoration:none; border:1px solid rgba(255,255,255,.25); border-radius:8px; padding:6px 12px; }
.orgtag { display:inline-block; font-size:11px; color:var(--primary); background:#eef3ff; border-radius:4px; padding:1px 6px; margin-right:6px; }
.quote { margin:16px 0 0; padding:16px; border-radius:10px; background:#f7f9fc; border:1px solid var(--line); }
.quote table { width:100%; border-collapse:collapse; margin:8px 0; font-size:14px; }
.quote td { padding:6px 0; border-bottom:1px solid var(--line); }
.quote td:last-child { text-align:right; white-space:nowrap; }
.quote .total td { font-weight:700; border-bottom:0; padding-top:10px; }
.quote .err { margin-top:8px; }
.customer .provider { color:var(--muted); font-size:13px; margin:0 0 8px; }
/* 運営者の画面 */
.admin main { max-width:1200px; margin:0 auto; }
.admin .tabs { display:flex; gap:8px; margin:0 0 20px; }
.admin .tabs button.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.admin table.list { width:100%; border-collapse:collapse; font-size:14px; }
.admin table.list th { text-align:left; font-weight:700; color:var(--muted); font-size:12px; padding:8px 10px; border-bottom:1px solid var(--line); }
.admin table.list td { padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.6; }
.admin table.list td.num, .admin table.list th.num { text-align:right; white-space:nowrap; }
.admin .row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.admin .grid2 .field label, .admin .grid3 .field label { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.admin .grid3 { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px 20px; }
.admin .off { color:var(--muted); }
.admin .pw { font-family:ui-monospace,Menlo,monospace; font-size:18px; letter-spacing:.06em; background:#fff8e1; border:1px solid #f2c230; border-radius:8px; padding:12px 16px; margin:12px 0; user-select:all; }
.admin .pill { display:inline-block; font-size:12px; border-radius:999px; padding:2px 10px; background:#eef3ff; color:var(--primary); }
.admin .pill.trial { background:#fff3cd; color:#8a6100; }
.admin .pill.stop { background:#f3f4f6; color:var(--muted); }
@media (max-width:760px) { .admin .grid3 { grid-template-columns:1fr; } .layout { grid-template-columns:1fr; } header { flex-wrap:wrap; } }
/* 保存した色 */
.palrow { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; align-items:center; }
.pal { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:4px 10px 4px 6px; background:#fff; cursor:pointer; font-size:13px; }
.pal:hover { border-color:var(--primary); }
.pal i { width:20px; height:20px; border-radius:50%; border:1px solid rgba(0,0,0,.12); display:inline-block; }
.pal .x { color:var(--muted); font-weight:400; margin-left:2px; padding:0 2px; }
.pal .mini { font-size:12px; padding:2px 8px; border-radius:999px; }
/* 音 */
.asset .audio { background:#eef3ff; color:var(--primary); font-size:15px; }
label.rights { display:block; margin-top:12px; font-size:14px; }
.bannerUp { display:block; margin-top:8px; }
.bannerUp button { font-size:13px; padding:6px 12px; }
/* 生成中の表示 */
.genbox { background:#f5f8ff; border:1px solid #d6e1ff; border-radius:12px; padding:14px 16px; }
.genbox .gtitle { font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.genbox .stage a { color:var(--primary); }
.floatprog { position:fixed; right:20px; bottom:20px; z-index:50; display:flex; align-items:center; gap:10px; background:var(--ink); color:#fff; border:0; border-radius:999px; padding:12px 18px; font-size:14px; box-shadow:0 10px 30px rgba(0,0,0,.25); cursor:pointer; overflow:hidden; }
.floatprog i { position:absolute; left:0; bottom:0; height:4px; background:var(--accent); transition:width .6s ease; }
.floatprog.done { background:var(--ok); }
.floatprog .spin { border-color:rgba(255,255,255,.35); border-top-color:#fff; }
/* バナー（素材とは別） */
.bgallery { display:flex; flex-wrap:wrap; gap:10px; padding:10px; border:2px dashed var(--line); border-radius:10px; min-height:110px; align-items:stretch; }
.bgallery.over { border-color:var(--primary); background:#eef3ff; }
.bitem { position:relative; width:150px; border:2px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; overflow:hidden; }
.bitem.on { border-color:var(--primary); box-shadow:0 0 0 3px #d6e1ff; }
.bitem.on::after { content:"使う"; position:absolute; left:6px; top:6px; background:var(--primary); color:#fff; font-size:11px; padding:1px 8px; border-radius:999px; }
.bitem img { display:block; width:100%; height:84px; object-fit:contain; background:#f3f4f6; }
.bitem .n { font-size:11px; padding:4px 6px; word-break:break-all; line-height:1.4; }
.bitem .x { position:absolute; right:4px; top:4px; width:22px; height:22px; padding:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; border:0; font-size:13px; line-height:22px; }
.badd, .field label.badd { width:184px; display:flex; margin:0; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:2px dashed #c9d3e6; border-radius:10px; color:var(--primary); font-size:13px; cursor:pointer; text-align:center; padding:8px; }
.badd:hover { background:#f5f8ff; }
.badd .t { white-space:nowrap; font-weight:600; }
.badd .hint { font-size:11px; line-height:1.6; color:var(--muted); }

/* 作り方（素材から／バナーから） */
.srcpick { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.srcopt { position:relative; display:flex; flex-direction:column; gap:6px; padding:14px 16px 14px 46px; border:2px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; line-height:1.6; }
.srcopt input { position:absolute; left:16px; top:18px; width:18px; height:18px; margin:0; accent-color:var(--primary); }
.srcopt b { font-size:16px; }
.srcopt span { font-size:12.5px; color:var(--muted); }
.srcopt:has(input:checked) { border-color:var(--primary); background:#f2f6ff; box-shadow:0 0 0 3px #d6e1ff; }
@media (max-width:760px) { .srcpick { grid-template-columns:1fr; } }
#main:not(.src-banner) .only-banner, #main.src-banner .only-assets { display:none; }
/* バナーから作るときは使わない欄: グレーにして触れない（inert） */
.src-banner .assets-only { background:#f5f6f8; }
.src-banner .assets-only > * { opacity:.35; filter:grayscale(1); }
.src-banner .assets-only > h2 { opacity:.8; filter:none; }
.src-banner .assets-only > h2::after { content:"バナーから作るときは使いません"; margin-left:12px; font-size:12px; font-weight:600; color:var(--muted); background:#e6e9ef; padding:3px 10px; border-radius:999px; }
.floatprog[hidden] { display:none; }
.src-banner .assets-only > h2 button { opacity:.4; filter:grayscale(1); }