@charset "UTF-8";
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-body-bg: #f0eeec;
  --color-scrollbar-track: var(--color-set-glay-05);
  --color-scrollbar-thumb: var(--color-set-glay-03);
  --color-text: var(--color-set-glay-09);
  --color-input-error-text: #ff4400;
  --color-border: var(--color-glay-03);
  --color-border-focus: var(--color-glay-05);
  /* Glay */
  --color-set-glay-01: #F4F5F6;
  --color-set-glay-02: #E9ECEF;
  --color-set-glay-03: #DEE2E6;
  --color-set-glay-04: #CED4DA;
  --color-set-glay-05: #ADB5BD;
  --color-set-glay-06: #6C757D;
  --color-set-glay-07: #495057;
  --color-set-glay-08: #343A40;
  --color-set-glay-09: #212529;
  --color-set-glay-10: #121216;
  /* Light Glay */
  --color-set-light-glay-01: #F2F2F2;
  --color-set-light-glay-02: #DFDFDF;
  --color-set-light-glay-03: #CCCCCC;
  --color-set-light-glay-04: #B9B9B9;
  --color-set-light-glay-05: #A5A5A5;
  --color-set-light-glay-06: #9C9C9C;
  --color-set-light-glay-07: #929292;
  --color-set-light-glay-08: #7F7F7F;
  --color-set-light-glay-09: #6C6C6C;
  --color-set-light-glay-10: #595959;
  /* Gold */
  --color-set-gold-01: #EDEA54;
  --color-set-gold-02: #EBDD4E;
  --color-set-gold-03: #E9D048;
  --color-set-gold-04: #E7C343;
  --color-set-gold-05: #E5B63D;
  --color-set-gold-06: #E2A837;
  --color-set-gold-07: #E09B31;
  --color-set-gold-08: #DE8E2C;
  --color-set-gold-09: #DC8126;
  --color-set-gold-10: #DA7420;
  /* Caramel */
  --color-set-caramel-01: #FFDCC2;
  --color-set-caramel-02: #FFD1AD;
  --color-set-caramel-03: #FFC599;
  --color-set-caramel-04: #EDA268;
  --color-set-caramel-05: #DA7E37;
  --color-set-caramel-06: #C06722;
  --color-set-caramel-07: #A85311;
  --color-set-caramel-08: #8F3E00;
  --color-set-caramel-09: #713200;
  --color-set-caramel-10: #522500;
  /* Sand */
  --color-set-sand-01: #EBCFBC;
  --color-set-sand-02: #E4C3AF;
  --color-set-sand-03: #DCB9A1;
  --color-set-sand-04: #D4AF96;
  --color-set-sand-05: #CBA48B;
  --color-set-sand-06: #AE8F7A;
  --color-set-sand-07: #A48470;
  --color-set-sand-08: #997A66;
  --color-set-sand-09: #8F705B;
  --color-set-sand-10: #846552;
  /* Coffee */
  --color-set-coffee-01: #F9F5F3;
  --color-set-coffee-02: #F0E5E1;
  --color-set-coffee-03: #E6D5CE;
  --color-set-coffee-04: #D3B6AB;
  --color-set-coffee-05: #AA8B7E;
  --color-set-coffee-06: #815F51;
  --color-set-coffee-07: #644234;
  --color-set-coffee-08: #4D3328;
  --color-set-coffee-09: #422C22;
  --color-set-coffee-10: #36241C;
  /* Brown */
  --color-set-brown-01: #FFEDD8;
  --color-set-brown-02: #F3D5B5;
  --color-set-brown-03: #E7BC91;
  --color-set-brown-04: #D4A276;
  --color-set-brown-05: #BC8A5F;
  --color-set-brown-06: #A47148;
  --color-set-brown-07: #8B5E34;
  --color-set-brown-08: #6F4518;
  --color-set-brown-09: #603808;
  --color-set-brown-10: #583101;
  /* Red Brown */
  --color-set-red-brown-01: #FFB950;
  --color-set-red-brown-02: #FFAD33;
  --color-set-red-brown-03: #FF7E33;
  --color-set-red-brown-04: #FF7E33;
  --color-set-red-brown-05: #FA5E1F;
  --color-set-red-brown-06: #EC3F13;
  --color-set-red-brown-07: #B81702;
  --color-set-red-brown-08: #A50104;
  --color-set-red-brown-09: #8E0103;
  --color-set-red-brown-10: #7A0103;
  /* Orange */
  --color-set-orange-01: #ffea00;
  --color-set-orange-02: #ffdd00;
  --color-set-orange-03: #ffd000;
  --color-set-orange-04: #ffc300;
  --color-set-orange-05: #FFB700;
  --color-set-orange-06: #FFAA00;
  --color-set-orange-07: #FFA200;
  --color-set-orange-08: #FF9500;
  --color-set-orange-09: #FF8800;
  --color-set-orange-10: #FF7B00;
  /* Yellow Green */
  --color-set-yellow-green-01: #FFFF3F;
  --color-set-yellow-green-02: #EEEF20;
  --color-set-yellow-green-03: #DDDF00;
  --color-set-yellow-green-04: #D4D700;
  --color-set-yellow-green-05: #BFD200;
  --color-set-yellow-green-06: #AACC00;
  --color-set-yellow-green-07: #80B918;
  --color-set-yellow-green-08: #55A630;
  --color-set-yellow-green-09: #2B9348;
  --color-set-yellow-green-10: #007F5F;
  /* Green */
  --color-set-green-01: #B7EFC5;
  --color-set-green-02: #92E6A7;
  --color-set-green-03: #6EDE8A;
  --color-set-green-04: #4AD66D;
  --color-set-green-05: #2DC653;
  --color-set-green-06: #25A244;
  --color-set-green-07: #208B3A;
  --color-set-green-08: #1A7431;
  --color-set-green-09: #155D27;
  --color-set-green-10: #10451D;
  /* Mint */
  --color-set-mint-01: #99E2B4;
  --color-set-mint-02: #88D4AB;
  --color-set-mint-03: #78C6A3;
  --color-set-mint-04: #67B99A;
  --color-set-mint-05: #56AB91;
  --color-set-mint-06: #469D89;
  --color-set-mint-07: #358F80;
  --color-set-mint-08: #248277;
  --color-set-mint-09: #14746F;
  --color-set-mint-10: #036666;
  /* Emerald */
  --color-set-emerald-01: #C4FFF9;
  --color-set-emerald-02: #B0F5F4;
  --color-set-emerald-03: #9CEAEF;
  --color-set-emerald-04: #3DCCC7;
  --color-set-emerald-05: #07BEB8;
  --color-set-emerald-06: #07B6B0;
  --color-set-emerald-07: #06ADA7;
  --color-set-emerald-08: #059D98;
  --color-set-emerald-09: #058F8A;
  --color-set-emerald-10: #05827D;
  /* Emerald Indigo */
  --color-set-emerald-indigo-01: #D9ED92;
  --color-set-emerald-indigo-02: #B5E48C;
  --color-set-emerald-indigo-03: #99D98C;
  --color-set-emerald-indigo-04: #76C893;
  --color-set-emerald-indigo-05: #52B69A;
  --color-set-emerald-indigo-06: #34A0A4;
  --color-set-emerald-indigo-07: #168AAD;
  --color-set-emerald-indigo-08: #1A759F;
  --color-set-emerald-indigo-09: #1E6091;
  --color-set-emerald-indigo-10: #184E77;
  /* Indigo */
  --color-set-indigo-01: #A9D6E5;
  --color-set-indigo-02: #89C2D9;
  --color-set-indigo-03: #61A5C2;
  --color-set-indigo-04: #468FAF;
  --color-set-indigo-05: #2C7DA0;
  --color-set-indigo-06: #2A6F97;
  --color-set-indigo-07: #014F86;
  --color-set-indigo-08: #01497C;
  --color-set-indigo-09: #013A63;
  --color-set-indigo-10: #012A4A;
  /* Aqua */
  --color-set-aqua-01: #DAF0F8;
  --color-set-aqua-02: #CAF0F8;
  --color-set-aqua-03: #ADE8F4;
  --color-set-aqua-04: #90E0EF;
  --color-set-aqua-05: #48CAE4;
  --color-set-aqua-06: #00B4D8;
  --color-set-aqua-07: #0096C7;
  --color-set-aqua-08: #0077B6;
  --color-set-aqua-09: #023E8A;
  --color-set-aqua-10: #03045E;
  /* Alice Blue */
  --color-set-alice-blue-01: #EDF2FB;
  --color-set-alice-blue-02: #E2EAFC;
  --color-set-alice-blue-03: #CCDBFD;
  --color-set-alice-blue-04: #B6CCFE;
  --color-set-alice-blue-05: #A0BBFF;
  --color-set-alice-blue-06: #88AAFF;
  --color-set-alice-blue-07: #7099FF;
  --color-set-alice-blue-08: #5E8CFF;
  --color-set-alice-blue-09: #4C7FFF;
  --color-set-alice-blue-10: #4877ED;
  /* Lavender */
  --color-set-lavender-01: #E0C3FC;
  --color-set-lavender-02: #DDBDFC;
  --color-set-lavender-03: #DAB6FC;
  --color-set-lavender-04: #CBB2FE;
  --color-set-lavender-05: #BBADFF;
  --color-set-lavender-06: #ADA7FF;
  --color-set-lavender-07: #9FA0FF;
  --color-set-lavender-08: #8E94F2;
  --color-set-lavender-09: #8187DC;
  --color-set-lavender-10: #757BC8;
  /* Rose */
  --color-set-rose-01: #FFF0F3;
  --color-set-rose-02: #FFCCD5;
  --color-set-rose-03: #FFB3C1;
  --color-set-rose-04: #FF8FA3;
  --color-set-rose-05: #FF758F;
  --color-set-rose-06: #FF4D6D;
  --color-set-rose-07: #C9184A;
  --color-set-rose-08: #A4133C;
  --color-set-rose-09: #800F2F;
  --color-set-rose-10: #590D22;
  /* Violet */
  --color-set-violet-01: #E0AAFF;
  --color-set-violet-02: #C77DFF;
  --color-set-violet-03: #9D4EDD;
  --color-set-violet-04: #8833cc;
  --color-set-violet-05: #7B2CBF;
  --color-set-violet-06: #5A189A;
  --color-set-violet-07: #4A1277;
  --color-set-violet-08: #3C096C;
  --color-set-violet-09: #240046;
  --color-set-violet-10: #10002B;
  /* HigLabo */
  --color-set-higlabo-01: #F8F9FA;
  --color-set-higlabo-02: #E9ECEF;
  --color-set-higlabo-03: #DEE2E6;
  --color-set-higlabo-04: #CED4DA;
  --color-set-higlabo-05: #ADB5BD;
  --color-set-higlabo-06: #6C757D;
  --color-set-higlabo-07: #495057;
  --color-set-higlabo-08: #6F4518;
  --color-set-higlabo-09: #343A40;
  --color-set-higlabo-10: #212529;
  /* Blue */
  --color-set-blue-01: #DBF3FF;
  --color-set-blue-02: #BDE5FF;
  --color-set-blue-03: #94CEFF;
  --color-set-blue-04: #6CB5FF;
  --color-set-blue-05: #248EFF;
  --color-set-blue-06: #0066DF;
  --color-set-blue-07: #0050AF;
  --color-set-blue-08: #003D8C;
  --color-set-blue-09: #00306D;
  --color-set-blue-10: #002155;
}

body {
  font-family: "Noto Sans JP", "Roboto", "Inconsolata", Helvetica Neue, Helvetica, San Francisco, 游ゴシック体, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", FontAwesome, sans-serif;
  font-weight: 400;
  font-feature-settings: "pkna";
  word-break: break-all;
  touch-action: manipulation;
  background-color: var(--color-body-bg);
  color: var(--color-text);
  height: 100%;
  min-height: 0;
}

.card-panel {
  padding: 12px;
  border-radius: 8px;
  background-color: var(--color-panel-bg);
}
.card-panel.box-shadow {
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.16);
}
.card-panel.border-radius-0 {
  border-radius: 0;
}
.card-panel .color {
  margin-right: 12px;
}

.video-composer-panel {
  max-width: 1080px;
  margin-inline: auto;
  /* 素材割当＋シーン設定 */
}
.video-composer-panel fieldset {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.video-composer-panel legend {
  font-weight: 700;
}
.video-composer-panel label {
  display: block;
  font-size: 14px;
  margin-top: 8px;
  min-width: 0;
  cursor: default;
}
.video-composer-panel input, .video-composer-panel textarea, .video-composer-panel select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 10px;
  font-size: 14px;
  background: transparent;
  min-width: 0;
}
.video-composer-panel input[type=file] {
  padding: 8px;
}
.video-composer-panel textarea {
  min-height: 200px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  white-space: pre;
  resize: vertical;
}
.video-composer-panel .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.video-composer-panel .row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  align-items: start;
}
.video-composer-panel .preview {
  position: relative;
  /* 幅・高さは JS が設定。初期値は念のためのフォールバック */
  width: auto;
  height: auto;
  overflow: hidden;
  aspect-ratio: var(--preview-aspect, 9/16);
  background: #000; /* ← 背景を黒に */
}
.video-composer-panel .preview img,
.video-composer-panel .preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  display: block;
}
.video-composer-panel .text-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: transparent;
}
.video-composer-panel .text-preview [data-el=textPreviewInner] {
  display: inline-block;
  max-width: 92%;
  padding: 8px 12px;
  border-radius: 10px;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  position: relative; /* top: yOffset 用 */
  transition: transform 0.15s, top 0.15s;
}
.video-composer-panel small.hint {
  color: #666;
}
.video-composer-panel video#player {
  max-height: 720px;
  max-width: 100%;
  border-radius: 12px;
  background: #000;
  margin-top: 12px;
}
.video-composer-panel .log {
  white-space: pre-wrap;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: #f7f7f7;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
  max-height: 80vh;
  overflow: auto;
}
.video-composer-panel .scene-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.video-composer-panel .scene-card {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
}
.video-composer-panel .scene-card .sceneNo {
  font-size: 48px;
  font-weight: bold;
}
.video-composer-panel .scene-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.video-composer-panel .drop {
  border: 1px dashed #bbb;
  border-radius: 8px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.video-composer-panel .drop.over {
  background: rgba(44, 123, 229, 0.1);
}
.video-composer-panel .font-toolbar {
  display: grid;
  gap: 8px;
}
.video-composer-panel .font-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid #ddd;
}
.video-composer-panel .font-status.loading {
  background: #fff7e6;
  border-color: #ffd591;
}
.video-composer-panel .font-status.ok {
  background: #f6ffed;
  border-color: #b7eb8f;
}
.video-composer-panel .font-status.err {
  background: #fff1f0;
  border-color: #ffa39e;
}
.video-composer-panel .font-preview {
  border: 1px dashed #bbb;
  border-radius: 10px;
  padding: 12px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.02);
}
.video-composer-panel .mini-font-preview {
  margin-top: 6px;
  padding: 6px 10px;
  border: 1px dashed #ddd;
  border-radius: 8px;
  font-size: 18px;
  background: rgba(0, 0, 0, 0.02);
}
@media (max-width: 1000px) {
  .video-composer-panel .row, .video-composer-panel .row-3 {
    grid-template-columns: 1fr;
  }
  .video-composer-panel .scene-card {
    grid-template-columns: 1fr;
  }
}

:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-scrollbar-track: var(--color-glay-06);
  --color-scrollbar-thumb: var(--color-set-coffee-04);
  --color-body-bg: #f0eeec;
  --color-text: var(--color-glay-09);
  --color-text-01: var(--color-set-glay-08);
  --color-text-02: var(--color-glay-07);
  --color-text-03: var(--color-glay-05);
  --color-input-error-text: #ff4400;
  --color-border: var(--color-glay-03);
  --color-border-focus: var(--color-glay-05);
  /* Primary */
  --height-page-content: calc(100dvh - 40px);
  --color-link: #0022cc;
  --color-link-visited: #2200cc;
  --color-page-header-bg: #1b0000;
  --color-page-header-text: #ffffff;
  --color-nav-service-list-panel-bg: #3e2723;
  --color-nav-service-list-panel-hover: #604040;
  --color-nav-panel-bg: #eeeae4;
  --color-nav-panel-current: #f8f8f8;
  --color-menu-link-hover: #fffaf8;
  --color-record-menu-link-bg: #f2f2f2;
  --color-record-menu-link-hover: #eeeeee;
  --color-tab-bg: #f0f0f0;
  --color-tab-hover: #e0e0e0;
  --color-tab-border: var(--color-set-glay-05);
  --color-progress-panel-text: var(--color-set-glay-05);
  --color-progress-panel-current: #1b0000;
  --color-panel-menu-bg: #e0e0e0;
  --color-panel-menu-hover: #d8d8d8;
  --color-panel-bg: #ffffff;
  --color-popup-panel-bg: #ffffff;
  --color-footer-bg: #eaeaea;
  /* button */
  --color-button-bg: var(--color-set-primary-05);
  --color-button-text: var(--color-white);
  --color-button-hover: var(--color-set-primary-07);
  --color-button-focus: var(--color-set-primary-07);
  --color-publish-button-bg: #d7191c;
  /* form element */
  --color-form-element-bg: var(--color-set-glay-01);
  --color-form-element-text: var(--color-text);
  --color-form-element-border: var(--color-border);
  --color-form-element-focus: var(--color-set-glay-03);
  --color-placeholder: var(--color-set-glay-05);
  --color-table-header-bg: #37474f;
  --color-table-header-text: #ffffff;
  --color-block-information-panel-bg: var(--color-set-glay-01);
  --color-block-information-panel-text: var(--color-text);
  /* checkbox-panel */
  --color-checkbox-panel-checked: var(--color-set-primary-05);
  --color-checkbox-panel-focus: var(--color-set-primary-09);
  /* Primary color */
  /*--color-form-element-primary: #ff0000;*/
  --color-set-primary-01: var(--color-set-rose-01);
  --color-set-primary-02: var(--color-set-rose-02);
  --color-set-primary-03: var(--color-set-rose-03);
  --color-set-primary-04: var(--color-set-rose-04);
  --color-set-primary-05: var(--color-set-rose-05);
  --color-set-primary-06: var(--color-set-rose-06);
  --color-set-primary-07: var(--color-set-rose-07);
  --color-set-primary-08: var(--color-set-rose-08);
  --color-set-primary-09: var(--color-set-rose-09);
  --color-set-primary-10: var(--color-set-rose-10);
  /* Item */
  --color-set-item-01: var(--color-set-glay-01);
  --color-set-item-02: var(--color-set-glay-02);
  --color-set-item-03: var(--color-set-glay-03);
  --color-set-item-04: var(--color-set-glay-04);
  --color-set-item-05: var(--color-set-glay-05);
  --color-set-item-06: var(--color-set-glay-06);
  --color-set-item-07: var(--color-set-glay-07);
  --color-set-item-08: var(--color-set-glay-08);
  --color-set-item-09: var(--color-set-glay-09);
  --color-set-item-10: var(--color-set-glay-10);
  --color-tab-container-panel: #f0eae0;
  --color-filter-panel: var(--color-set-glay-01);
  --color-filter-condition-panel: #ececec;
  --color-filter-condition-panel-hover: #f2f2f2;
  --color-drop-target-bg: var(--color-set-glay-03);
  --color-circle-border: var(--color-set-glay-05);
  --color-saturday: #73BBEC;
  --color-sunday: #CB5551;
}

[dark-mode=true] {
  --color-scrollbar-track: var(--color-glay-03);
  --color-scrollbar-thumb: var(--color-glay-07);
  --color-body-bg: #000000;
  --color-text: #ffffff;
  --color-text-01: var(--color-glay-04);
  --color-text-02: var(--color-glay-05);
  --color-text-03: var(--color-glay-07);
  --color-border: var(--color-glay-07);
  --color-border-focus: var(--color-glay-05);
  /* Primary */
  --color-link: #0088ff;
  --color-link-visited: #0088ff;
  --color-page-header-bg: #202020;
  --color-page-header-text: #ffffff;
  --color-nav-service-list-panel-bg: #2a2a2a;
  --color-nav-service-list-panel-hover: #404040;
  --color-nav-panel-bg: #303030;
  --color-nav-panel-current: #555555;
  --color-menu-link-hover: #6c6c6c;
  --color-record-menu-link-bg: #222222;
  --color-record-menu-link-hover: #555555;
  /* tab */
  --color-tab-bg: #202020;
  --color-tab-hover: #303030;
  --color-tab-border: var(--color-set-glay-05);
  --color-progress-panel-text: var(--color-set-glay-06);
  --color-progress-panel-current: #e0e0e0;
  /* panel */
  --color-panel-menu-bg: #555555;
  --color-panel-menu-hover: #777777;
  --color-panel-bg: #303030;
  --color-popup-panel-bg: #333333;
  --color-footer-bg: var(--color-set-glay-10);
  /* button */
  --color-button-bg: var(--color-set-primary-06);
  --color-button-text: var(--color-white);
  --color-publish-button-bg: #d7191c;
  /* form element */
  --color-form-element-bg: var(--color-set-glay-08);
  --color-form-element-text: var(--color-set-glay-02);
  --color-form-element-border: var(--color-border);
  --color-form-element-focus: var(--color-set-glay-03);
  --color-placeholder: var(--color-set-glay-06);
  --color-block-information-panel-bg: var(--color-set-glay-08);
  --color-block-information-panel-text: var(--color-set-glay-04);
  --color-item-text: #4d5156;
  --color-item-bg: #242424;
  --color-item-bg0: #2c2c2c;
  --color-item-bg1: #2a2a2a;
  --color-item-hover: #242428;
  --color-item-focus: #212121;
  --color-item-current: #202020;
  --color-data-record-panel: #111111;
  --color-tab-container-panel: #333333;
  --color-filter-panel: var(--color-set-glay-08);
  --color-filter-condition-panel: #4a4a4a;
  --color-filter-condition-panel-hover: #3a3a3a;
  --color-drop-target-bg: var(--color-set-glay-07);
  --color-circle-border: var(--color-set-glay-07);
}