#fcip-app-root .fciw-manual-background { padding: 14px; margin-bottom: 14px; border: 1px solid #bfdbfe; border-radius: 10px; background: #eff6ff; }
#fcip-app-root .fciw-manual-background strong { display: block; font-size: 14px; margin-bottom: 8px; }
#fcip-app-root .fciw-manual-background button { width: 100%; padding: 12px; border: 0; border-radius: 7px; background: #1d4ed8; color: white; font: inherit; font-weight: 700; cursor: pointer; }
#fcip-app-root .fciw-manual-background button:disabled { opacity: .5; cursor: default; }
#fcip-app-root .fciw-manual-background p { margin: 8px 0; font-size: 13px; line-height: 1.7; }
#fcip-app-root .fciw-manual-background small { display: block; color: #475569; font-size: 11px; line-height: 1.6; }
.fciw-bg-editor { box-sizing: border-box; width: min(960px, calc(100vw - 24px)); height: min(900px, calc(100dvh - 24px)); max-width: none; max-height: none; margin: auto; padding: 20px; border: 0; border-radius: 14px; background: #fff; color: #172334; font-family: system-ui, sans-serif; font-size: 14px; line-height: 1.5; box-shadow: 0 16px 80px #0006; }
.fciw-bg-editor[open] { display: flex; flex-direction: column; gap: 10px; }
.fciw-bg-editor::backdrop { background: #0f172ab3; }
.fciw-bg-editor * { box-sizing: border-box; }
.fciw-bg-editor h2 { margin: 0 0 4px; font-size: 22px; line-height: 1.3; color: #172334; }
.fciw-bg-editor p { margin: 0; }
.fciw-bg-editor-help { padding: 8px 12px; border-radius: 8px; background: #eff6ff; font-size: 13px; }
.fciw-bg-editor-tools, .fciw-bg-editor footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fciw-bg-editor button, .fciw-bg-editor select { min-height: 44px; padding: 9px 12px; border: 1px solid #94a3b8; border-radius: 7px; background: #fff; color: #172334; font: inherit; cursor: pointer; }
.fciw-bg-editor button:disabled { opacity: .45; cursor: default; }
.fciw-bg-editor button:focus-visible, .fciw-bg-editor select:focus-visible, .fciw-bg-editor input:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.fciw-bg-editor-tools label { margin-left: auto; }
.fciw-bg-editor-stage { flex: 1 1 auto; min-height: 120px; overflow: auto; padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #e2e8f0; overscroll-behavior: contain; }
.fciw-bg-editor-stage canvas { display: block; margin: auto; max-width: none; max-height: none; cursor: crosshair; touch-action: pan-x pan-y pinch-zoom; background-color: white; background-image: linear-gradient(45deg,#ccd3dd 25%,transparent 25%),linear-gradient(-45deg,#ccd3dd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccd3dd 75%),linear-gradient(-45deg,transparent 75%,#ccd3dd 75%); background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0; }
.fciw-bg-editor-stage[aria-busy="true"] canvas { cursor: wait; }
.fciw-bg-editor-adjust { display: grid; grid-template-columns: minmax(160px, 1fr) 1fr; gap: 16px; align-items: center; }
.fciw-bg-editor-adjust label { font-weight: 700; }
.fciw-bg-editor-adjust output { float: right; }
.fciw-bg-editor-adjust input { display: block; width: 100%; height: 32px; accent-color: #1d4ed8; }
.fciw-bg-editor input[type="range"] { appearance: none; -webkit-appearance: none; padding: 0; margin: 0; border: 0; background: transparent; box-shadow: none; cursor: pointer; }
.fciw-bg-editor input[type="range"]::-webkit-slider-runnable-track { height: 6px; border: 0; border-radius: 3px; background: #94a3b8; }
.fciw-bg-editor input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border: 2px solid white; border-radius: 50%; background: #1d4ed8; box-shadow: 0 0 0 1px #1d4ed8; }
.fciw-bg-editor input[type="range"]::-moz-range-track { height: 6px; border: 0; border-radius: 3px; background: #94a3b8; }
.fciw-bg-editor input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid white; border-radius: 50%; background: #1d4ed8; box-shadow: 0 0 0 1px #1d4ed8; }
.fciw-bg-editor-adjust p { font-size: 12px; color: #475569; }
.fciw-bg-editor-edge { padding-top: 8px; border-top: 1px solid #cbd5e1; }
.fciw-bg-editor-status { min-height: 21px; font-size: 13px; color: #334155; }
.fciw-bg-editor footer { justify-content: flex-end; }
.fciw-bg-editor .fciw-bg-editor-primary { background: #1d4ed8; border-color: #1d4ed8; color: white; font-weight: 700; }
@media (max-width: 600px) {
    .fciw-bg-editor { width: calc(100vw - 12px); height: calc(100dvh - 12px); padding: 12px; border-radius: 10px; }
    .fciw-bg-editor[open] { gap: 8px; }
    .fciw-bg-editor h2 { font-size: 19px; }
    .fciw-bg-editor header p, .fciw-bg-editor-help { font-size: 12px; }
    .fciw-bg-editor-tools { gap: 6px; }
    .fciw-bg-editor-tools button, .fciw-bg-editor-tools select { font-size: 12px; padding: 8px; }
    .fciw-bg-editor-tools label { margin-left: 0; font-size: 12px; }
    .fciw-bg-editor-adjust { grid-template-columns: 1fr; gap: 0; }
    .fciw-bg-editor footer { flex-wrap: nowrap; }
    .fciw-bg-editor footer button { flex: 1; padding: 10px 6px; font-size: 13px; }
}
/* 背景除去は元のプレビューの位置で行う。別画面・ダイアログには移動しない。 */
#fcip-app-root.fciw-inline-background-active .fciw-gen-left { position: static; }
#fcip-app-root.fciw-inline-background-active .fciw-gen-left > .fciw-shape-picker,
#fcip-app-root.fciw-inline-background-active .fciw-gen-left > .fciw-preview-bg-toolbar,
#fcip-app-root.fciw-inline-background-active #previewContainer > :not(.fciw-bg-editor-inline) { display: none !important; }
#fcip-app-root.fciw-inline-background-active #previewContainer { display: block; height: auto; padding: 0 !important; min-height: 0; max-height: none; overflow: visible; cursor: auto; background: #fff; border-style: solid; border-color: #93c5fd; }
#fcip-app-root .fciw-bg-editor.fciw-bg-editor-inline { display: flex; position: static; flex-direction: column; gap: 12px; width: 100%; height: auto; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; border-radius: 0; box-shadow: none; text-align: left; scroll-margin-top: 24px; }
#fcip-app-root .fciw-bg-editor-inline h2 { font-size: 18px; }
#fcip-app-root .fciw-bg-editor-inline .fciw-bg-editor-stage { flex: 0 0 auto; width: 100%; height: clamp(260px, 45vh, 500px); }
#fcip-app-root .fciw-bg-editor-inline .fciw-bg-editor-adjust { grid-template-columns: 1fr; gap: 4px; }
#fcip-app-root .fciw-bg-editor-inline .fciw-bg-editor-help { display: none; }
#fcip-app-root .fciw-bg-editor-inline header p { display: none; }
#fcip-app-root .fciw-bg-editor-inline footer { position: static; }
#fcip-app-root .fciw-bg-editor-inline button { min-height: 44px; min-width: 44px; padding: 9px 12px; border: 1px solid #94a3b8; border-radius: 7px; color: #172334; background: #fff; font: inherit; cursor: pointer; }
#fcip-app-root .fciw-bg-editor-inline button:disabled { opacity: .45; cursor: default; }
#fcip-app-root .fciw-bg-editor-inline [data-zoom="in"],
#fcip-app-root .fciw-bg-editor-inline .fciw-bg-editor-primary { color: #fff; background: #1d4ed8; border-color: #1d4ed8; font-weight: 700; }
#fcip-app-root .fciw-bg-editor-inline .fciw-bg-editor-stage { border: 1px solid #cbd5e1; background: #e2e8f0; overscroll-behavior: auto; }
#fcip-app-root .fciw-bg-editor-inline h2 { font-weight: 700; }
#fcip-app-root .fciw-bg-editor-inline .fciw-bg-editor-adjust label { font-weight: 700; }
#fcip-app-root .fciw-bg-editor-inline .fciw-bg-editor-adjust p,
#fcip-app-root .fciw-bg-editor-inline .fciw-bg-zoom-help { color: #475569; font-size: 12px; line-height: 1.6; }
#fcip-app-root .fciw-bg-editor-inline .fciw-bg-editor-edge { padding-top: 8px; border-top: 1px solid #cbd5e1; }
#fcip-app-root .fciw-bg-editor-inline .fciw-bg-editor-status { color: #334155; font-size: 13px; line-height: 1.6; }
#fcip-app-root.fciw-inline-background-active .fciw-step2-footer-slot,
#fcip-app-root.fciw-inline-background-active .psq-footer { visibility: hidden; }
@media (max-width: 600px) {
    #fcip-app-root .fciw-bg-editor.fciw-bg-editor-inline { padding: 10px; gap: 10px; }
    #fcip-app-root .fciw-bg-editor-inline h2 { font-size: 16px; }
    #fcip-app-root .fciw-bg-editor-inline .fciw-bg-editor-stage { height: clamp(240px, 42vh, 420px); }
    #fcip-app-root .fciw-bg-editor-inline button { font-size: 12px; padding: 8px; }
}
.fciw-bg-editor-stage.fciw-zoom-stage { padding: 0; overflow: hidden; }