/* Story Video Maker のスタイル。既存のLINEスタンプモードの見た目には影響しないよう、すべて .sv- / #mode-story / .mode-bar 配下 */
@font-face { font-family: "Zen Maru Gothic"; font-weight: 500; font-display: swap; src: url("../assets/fonts/ZenMaruGothic-Medium.woff2") format("woff2"); }
@font-face { font-family: "Zen Maru Gothic"; font-weight: 700; font-display: swap; src: url("../assets/fonts/ZenMaruGothic-Bold.woff2") format("woff2"); }
@font-face { font-family: "Kiwi Maru"; font-weight: 400; font-display: swap; src: url("../assets/fonts/KiwiMaru-Regular.woff2") format("woff2"); }
@font-face { font-family: "Klee One"; font-weight: 400; font-display: swap; src: url("../assets/fonts/KleeOne-Regular.woff2") format("woff2"); }
@font-face { font-family: "Quicksand"; font-weight: 500; font-display: swap; src: url("../assets/fonts/Quicksand-Medium.ttf") format("truetype"); }
@font-face { font-family: "Quicksand"; font-weight: 700; font-display: swap; src: url("../assets/fonts/Quicksand-Bold.ttf") format("truetype"); }

.mode-bar { display: flex; gap: 8px; justify-content: center; margin: 0 auto 16px; flex-wrap: wrap; }
.mode-bar button {
  border: 2px solid #f0c7d2; background: #fff; color: #7a4b57; border-radius: 999px;
  padding: 9px 18px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.mode-bar button.active { background: linear-gradient(135deg, #f45a78, #d9436a); color: #fff; border-color: transparent; }

#mode-story[hidden], #mode-line[hidden], .sv-root [hidden] { display: none !important; }
.sv-root { max-width: 1360px; margin: 0 auto; color: #333; font-size: 14px; }
.sv-root h1 { font-size: 20px; margin: 0; text-align: left; }
.sv-root h3 { font-size: 15px; margin: 0 0 8px; }
.sv-root h4 { font-size: 13px; margin: 10px 0 6px; color: #7a4b57; }
.sv-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sv-head-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sv-head-actions input[type=text] { width: 200px; padding: 8px 10px; }
.sv-notice { background: #fff8e1; border: 1px solid #ffe08a; border-radius: 10px; padding: 10px 12px; font-size: 13px; margin-bottom: 10px; line-height: 1.6; }

.sv-btn {
  display: inline-block; border: 1px solid #e3cbd2; background: #fff; color: #5b3f36; border-radius: 10px;
  padding: 7px 12px; font-size: 13px; font-weight: 700; cursor: pointer; text-align: center; line-height: 1.3; text-decoration: none;
}
.sv-btn:hover { background: #fff4f7; }
.sv-btn:disabled { opacity: .5; cursor: not-allowed; }
.sv-primary { background: linear-gradient(135deg, #f45a78, #d9436a); color: #fff; border-color: transparent; }
.sv-primary:hover { background: linear-gradient(135deg, #f45a78, #c93a5f); }
.sv-danger { color: #c0392b; border-color: #f0b8b0; }
.sv-btnrow, .sv-inline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.sv-inline label { font-size: 12px; color: #666; display: flex; flex-direction: column; gap: 3px; }
.sv-inline select, .sv-inline input { padding: 7px 8px; font-size: 13px; width: auto; }

.sv-tabs, .sv-subtabs { display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap; }
.sv-tabs button, .sv-subtabs button {
  flex: 1 1 auto; border: none; background: rgba(255,255,255,.7); padding: 10px 14px; font-size: 14px; font-weight: 700;
  border-radius: 10px 10px 0 0; cursor: pointer; color: #7a6a6a;
}
.sv-tabs button.active, .sv-subtabs button.active { background: #fff; color: #d9436a; box-shadow: 0 -2px 0 #f45a78 inset; }
.sv-subtabs { display: none; }

.sv-card { background: #fff; border-radius: 14px; padding: 14px; margin-bottom: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.sv-hint { font-size: 12px; color: #888; line-height: 1.6; margin: 4px 0; }
.sv-warn { font-size: 12px; color: #c0392b; line-height: 1.6; margin: 4px 0; font-weight: 700; }
.sv-sub { font-weight: 700; font-size: 13px; margin: 14px 0 6px; padding-top: 8px; border-top: 1px dashed #eadfe2; }
.sv-root input[type=text], .sv-root input[type=number], .sv-root textarea, .sv-root select {
  width: 100%; padding: 7px 9px; border-radius: 8px; border: 1px solid #dde3ea; font-size: 13px; font-family: inherit; background: #fff;
}
.sv-root textarea { resize: vertical; line-height: 1.5; }
.sv-root input[type=color] { width: 44px; height: 30px; padding: 0; border: 1px solid #dde3ea; border-radius: 6px; background: #fff; }
.sv-root input[type=checkbox] { width: auto; }
.sv-chk { display: flex; align-items: center; gap: 6px; font-size: 13px; }

.sv-edit-grid { display: grid; grid-template-columns: 350px minmax(320px, 1fr) 400px; gap: 14px; align-items: start; }
.sv-two { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(300px, 460px); gap: 14px; align-items: start; }
.sv-previewcard { position: sticky; top: 8px; }

.sv-slot { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; padding: 7px 0; border-bottom: 1px solid #f4eef0; font-size: 13px; }
.sv-slot b { grid-column: 1 / -1; font-size: 13px; }
.sv-slot-name { font-size: 12px; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-slot.filled .sv-slot-name { color: #2a8a4a; font-weight: 700; }
.sv-wall-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 6px; }
.sv-wall { border: 3px solid transparent; border-radius: 8px; padding: 0; background: none; cursor: pointer; overflow: hidden; }
.sv-wall.sel { border-color: #f45a78; }
.sv-wall canvas { width: 100%; display: block; aspect-ratio: 9/16; }
.sv-wall span { display: block; font-size: 10px; padding: 2px; color: #666; }

.sv-f { display: grid; grid-template-columns: 92px 1fr; gap: 6px; align-items: center; margin: 5px 0; font-size: 12px; color: #555; }
.sv-f-i { display: flex; gap: 6px; align-items: center; min-width: 0; }
.sv-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.sv-grid2 .sv-f { grid-template-columns: 70px 1fr; }
.sv-sec { border-top: 1px solid #f1e6ea; padding-top: 4px; margin-top: 8px; }
.sv-textrole { border: 1px solid #f1e6ea; border-radius: 10px; padding: 8px; margin-bottom: 8px; }
.sv-textrole > label { font-weight: 700; font-size: 13px; display: block; margin-bottom: 4px; }
.sv-roleopts { display: grid; grid-template-columns: 1fr 70px 44px auto; gap: 6px; margin-top: 5px; align-items: center; }

.sv-stage { position: relative; width: min(100%, 360px); aspect-ratio: 9 / 16; margin: 0 auto 10px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,.18); touch-action: none; }
.sv-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv-safe { position: absolute; inset: 0; pointer-events: none; border: 0 solid rgba(255, 60, 60, .28); box-sizing: border-box; border-top-width: 6.25%; border-bottom-width: 14.06%; background: linear-gradient(rgba(255,60,60,0), rgba(255,60,60,0)); }
.sv-transport { display: flex; gap: 8px; align-items: center; }
.sv-transport input[type=range] { flex: 1; }
.sv-time { font-variant-numeric: tabular-nums; font-size: 12px; color: #666; min-width: 92px; text-align: right; }

.sv-layers { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow: auto; }
.sv-layer { display: flex; gap: 6px; align-items: center; padding: 5px 6px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.sv-layer:hover { background: #fff4f7; }
.sv-layer.sel { background: #ffe3ea; font-weight: 700; }
.sv-layer.off .sv-layer-name { opacity: .45; text-decoration: line-through; }
.sv-layer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-ico { border: none; background: none; cursor: pointer; font-size: 13px; width: 24px; }
.sv-tag { font-size: 10px; background: #eee; border-radius: 6px; padding: 1px 6px; color: #666; }

.sv-gantt { --lw: 104px; position: relative; font-size: 11px; }
.sv-gantt-head { position: relative; height: 16px; border-bottom: 1px solid #eee; }
.sv-tick { position: absolute; transform: translateX(-50%); color: #999; }
.sv-gantt-body { position: relative; max-height: 300px; overflow-y: auto; overflow-x: hidden; }
.sv-grow { display: flex; align-items: center; height: 20px; cursor: pointer; }
.sv-grow.sel { background: #ffe9ee; }
.sv-glabel { width: var(--lw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 4px; color: #555; flex: none; }
.sv-gtrack { position: relative; flex: 1; height: 10px; background: #f6f1f2; border-radius: 5px; }
.sv-gbar { position: absolute; top: 0; bottom: 0; background: #f08aa5; border-radius: 5px; }
.sv-gbar.end { background: #7cb7e8; }
.sv-gend { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed #5aa0d8; pointer-events: none; }
.sv-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #222; pointer-events: none; left: var(--lw); }
.sv-timing { margin-top: 8px; }
.sv-timing label { flex: 1; min-width: 90px; }

.sv-feed-nav { display: flex; gap: 10px; align-items: center; justify-content: center; margin-bottom: 8px; }
.sv-feedcard canvas { display: block; margin: 0 auto; max-width: 100%; border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,.18); }

.sv-issues { list-style: none; margin: 6px 0; padding: 0; font-size: 13px; line-height: 1.6; }
.sv-issues li { padding: 4px 8px; border-radius: 6px; margin-bottom: 4px; background: #fff8e1; }
.sv-issues li.ok { background: #e8f7ee; color: #2a7a46; }
.sv-issues li.err { background: #fdecea; color: #b03a2e; }
.sv-exp-list > div { padding: 8px 0; border-bottom: 1px solid #f4eef0; }
.sv-exp-list b { font-size: 13px; }
.sv-progress { margin-top: 10px; }
.sv-progress-label { font-size: 12px; color: #777; margin-bottom: 4px; }
.sv-progress-bg { background: #eee; border-radius: 999px; height: 10px; overflow: hidden; }
.sv-progress-fill { background: linear-gradient(90deg, #f45a78, #d9436a); height: 100%; width: 0; transition: width .2s; }
.sv-error { background: #fff0f0; border: 1px solid #f5b5b5; color: #c0392b; padding: 10px 12px; border-radius: 10px; font-size: 13px; margin-top: 10px; line-height: 1.6; }
.sv-result { text-align: center; margin-top: 12px; }
.sv-result video { width: 100%; max-width: 240px; border-radius: 12px; margin-bottom: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.sv-results { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.sv-results li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; background: #f7f2f3; border-radius: 8px; margin-bottom: 4px; }
.sv-results a { font-weight: 700; color: #d9436a; }

@media (max-width: 1100px) {
  .sv-edit-grid { grid-template-columns: 1fr; }
  .sv-subtabs { display: flex; }
  .sv-edit-grid[data-sub="left"] [data-col="center"], .sv-edit-grid[data-sub="left"] [data-col="right"],
  .sv-edit-grid[data-sub="center"] [data-col="left"], .sv-edit-grid[data-sub="center"] [data-col="right"],
  .sv-edit-grid[data-sub="right"] [data-col="left"], .sv-edit-grid[data-sub="right"] [data-col="center"] { display: none; }
  .sv-two { grid-template-columns: 1fr; }
  .sv-previewcard { position: static; }
}

.sv-slot.sv-dragover { outline: 2px dashed #e0689a; outline-offset: -2px; background: #fff3f8; }