/*
 * fcip-wizard 1.0.22: AI補正・外側の線・色を変える・寸法線と、画像アップロード画面の並び（UVDTF・DTF・ラベルと共通の型）。
 * ラベル・シール（ls-wizard rc32）の lsw-ai.css を元に、fcip の画面構造（単位選択・解像度表示など）に合わせた。
 * 前半は body 直下に出す AI補正ダイアログ・比較画面（DTF の dtf-ai.css と同じ内容）。
 * 後半は見積画面 #fcip-app-root の中。wizard-style.css の指定より強くなるよう #fcip-app-root .クラス の詳細度で書く。
 */
/* ── マスコット（進行表示の中で使う。document・Shadow DOM の両方） ── */
.fciw-ai-mascot-dancer { transform-origin: 40px 68px; animation: fciw-ai-hop 1.25s ease-in-out infinite; }
.fciw-ai-mascot-brush { transform-origin: 67px 36px; animation: fciw-ai-brush .65s ease-in-out infinite alternate; }
.fciw-ai-mascot-eyes { transform-box: fill-box; transform-origin: center; animation: fciw-ai-blink 3.6s infinite; }
.fciw-ai-mascot-sparkle { animation: fciw-ai-sparkle 1.4s ease-in-out infinite alternate; }
@keyframes fciw-ai-hop { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes fciw-ai-brush { to { transform: rotate(-15deg); } }
@keyframes fciw-ai-blink { 0%,43%,49%,100% { transform: scaleY(1); } 46% { transform: scaleY(.12); } }
@keyframes fciw-ai-sparkle { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .fciw-ai-mascot-dancer, .fciw-ai-mascot-brush, .fciw-ai-mascot-eyes, .fciw-ai-mascot-sparkle { animation: none; }
}

/* ── AI補正ダイアログ（body 直下） ── */
.fciw-ai-dialog { font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif; }
.fciw-ai-dialog .fciw-ai-billing { padding: 0; margin: 0; border: 0; background: none; }
.fciw-ai-dialog .fciw-ai-billing p { margin: 0 0 0.6rem; padding: 0.55rem 0.7rem; border-radius: 8px; background: #f8fafc; font-size: 0.85rem; line-height: 1.5; color: #334155; }
.fciw-ai-dialog .fciw-ai-billing p[hidden] { display: none; }
.fciw-ai-dialog .fciw-ai-billing button {
    display: block; width: 100%; min-height: 2.9rem; margin: 0 0 0.5rem; padding: 0.6rem 0.9rem; border: 1px solid #d1d5db; border-radius: 10px;
    background: #fff; color: #374151; font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer;
}
.fciw-ai-dialog .fciw-ai-billing button:first-of-type { border-color: #4f46e5; background: #4f46e5; color: #fff; }
.fciw-ai-dialog .fciw-ai-billing button:disabled { opacity: 0.55; cursor: default; }
.fciw-ai-dialog .fciw-ai-activity { display: none; }
.fciw-ai-dialog .fciw-ai-review-open {
    display: block; width: 100%; min-height: 2.9rem; margin: 0 0 0.5rem; border: 1px solid #c7d2fe; border-radius: 10px;
    background: #eef2ff; color: #3730a3; font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer;
}
.fciw-ai-dialog .fciw-ai-review-open[hidden] { display: none; }
.fciw-ai-dialog .fciw-ai-notice { margin: 0.25rem 0 0; font-size: 0.8rem; line-height: 1.5; color: #4b5563; }
.fciw-ai-dialog .fciw-ai-notice:empty { display: none; }
.fciw-ai-dialog .qui-help-pop span, .fciw-ai-dialog .qui-help-pop > span > span { display: block; margin-bottom: 0.4rem; }
.fciw-ai-dialog .fciw-ai-instruction { display: block; margin: 0 0 0.75rem; }
.fciw-ai-dialog .fciw-ai-instruction > span { display: block; margin-bottom: 0.3rem; font-size: 0.85rem; font-weight: 700; color: #374151; }
.fciw-ai-dialog .fciw-ai-instruction textarea,
.fciw-ai-review .fciw-ai-refine textarea {
    display: block; width: 100%; box-sizing: border-box; min-height: 3.4rem; padding: 0.55rem 0.7rem; border: 1px solid #d1d5db; border-radius: 10px;
    font: inherit; font-size: 16px; line-height: 1.5; resize: vertical; color: #111827; background: #fff;
}
.fciw-ai-dialog .fciw-ai-instruction small { display: block; margin-top: 0.2rem; text-align: right; font-size: 0.72rem; color: #9ca3af; }

/* ── 比較画面（body 直下） ── */
html.fciw-ai-review-open { overflow: hidden; }
.fciw-ai-review { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .72); font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif; }
.fciw-ai-review:focus { outline: none; }
.fciw-ai-review-panel { display: flex; flex-direction: column; width: min(960px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: hidden; border-radius: 12px; background: #fff; color: #1f2937; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.fciw-ai-review header { padding: 16px 20px 8px; }
.fciw-ai-review h2 { margin: 0; font-size: 18px; line-height: 1.4; color: #312e81; }
.fciw-ai-review header p { margin: 6px 0 0; font-size: 12px; line-height: 1.6; color: #4b5563; }
.fciw-ai-review-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 20px; }
.fciw-ai-review-tabs, .fciw-ai-review-bg { display: flex; gap: 6px; }
.fciw-ai-review-tabs { flex: 1 1 220px; }
.fciw-ai-review-tools button { min-height: 40px; padding: 8px 14px; border: 1px solid #a5b4fc; border-radius: 8px; background: #fff; color: #3730a3; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.fciw-ai-review-tabs button { flex: 1; }
.fciw-ai-review-tools button[aria-pressed="true"] { background: #3730a3; border-color: #3730a3; color: #fff; }
.fciw-ai-review-stage { position: relative; flex: 1 1 auto; min-height: 240px; height: 60vh; margin: 0 20px; overflow: auto; display: flex; align-items: center; justify-content: center; border: 1px solid #e5e7eb; border-radius: 8px; }
.fciw-ai-review-stage img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; }
.fciw-ai-review-stage.is-actual { display: block; }
.fciw-ai-review-stage.is-actual img { max-width: none; max-height: none; margin: 0 auto; }
.fciw-ai-review-stage.is-checker { background-color: #fff; background-image: linear-gradient(45deg,#e2e8f0 25%,transparent 25%),linear-gradient(-45deg,#e2e8f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e8f0 75%),linear-gradient(-45deg,transparent 75%,#e2e8f0 75%); background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0; }
.fciw-ai-review-stage.is-dark { background: #111827; }
.fciw-ai-review-stage.is-light { background: #fff; }
.fciw-ai-review-status { margin: 10px 20px 0; font-size: 13px; line-height: 1.6; color: #374151; }
.fciw-ai-review footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; }
.fciw-ai-review footer button { min-height: 44px; padding: 10px 18px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #374151; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.fciw-ai-review footer .fciw-ai-review-primary { border-color: #4f46e5; background: #4f46e5; color: #fff; }
.fciw-ai-review footer button:disabled { opacity: .5; cursor: not-allowed; }
.fciw-ai-review footer button[hidden] { display: none; }
.fciw-ai-review footer [data-refine] { border-color: #a5b4fc; color: #3730a3; background: #eef2ff; }
.fciw-ai-review .fciw-ai-review-instruction { margin: 0.4rem 0 0; padding: 0.4rem 0.6rem; border-radius: 8px; background: #eef2ff; color: #3730a3; font-size: 12px; line-height: 1.5; }
.fciw-ai-review .fciw-ai-refine { margin: 10px 20px 0; padding: 0.75rem; border: 1px solid #c7d2fe; border-radius: 10px; background: #f5f7ff; }
.fciw-ai-review .fciw-ai-refine[hidden] { display: none; }
.fciw-ai-review .fciw-ai-refine-lead { margin: 0 0 0.5rem; font-size: 12px; line-height: 1.6; color: #374151; }
.fciw-ai-review .fciw-ai-refine-caution { margin: 0 0 0.5rem; padding: 0.45rem 0.6rem; border-radius: 8px; background: #fffbeb; color: #92400e; font-size: 12px; line-height: 1.6; }
.fciw-ai-review .fciw-ai-refine-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 0.5rem; }
.fciw-ai-review .fciw-ai-refine-actions button { min-height: 44px; padding: 8px 14px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #374151; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.fciw-ai-review .fciw-ai-refine-actions .fciw-ai-review-primary { border-color: #4f46e5; background: #4f46e5; color: #fff; }
.fciw-ai-review .fciw-ai-refine-msg { margin: 0.4rem 0 0; font-size: 12px; color: #b91c1c; }
.fciw-ai-review.is-refining .fciw-ai-review-tabs [data-before] { opacity: 0.4; pointer-events: none; }
.fciw-ai-review.is-refining [data-zoom] { opacity: 0.4; pointer-events: none; }
@media (max-width: 640px) {
    .fciw-ai-review { padding: 0; }
    .fciw-ai-review-panel { max-height: 100vh; max-height: 100dvh; height: 100%; border-radius: 0; }
    .fciw-ai-review-stage { margin: 0 12px; height: auto; }
    .fciw-ai-review header, .fciw-ai-review-tools { padding-left: 12px; padding-right: 12px; }
    .fciw-ai-review-status { margin: 8px 12px 0; }
    .fciw-ai-review .fciw-ai-refine { margin: 8px 12px 0; }
    .fciw-ai-review footer { flex-wrap: wrap; padding: 10px 12px 14px; }
    .fciw-ai-review footer button { flex: 1; }
    .fciw-ai-review footer [data-refine] { flex: 1 1 100%; order: -1; }
}


/* ── 見積画面の中（#fcip-app-root） ─────────────────────────── */

/* 見出しと料金の目安 */
#fcip-app-root .fciw-step2-header { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--lsq-border, #e5e7eb); }
#fcip-app-root .fciw-step2-header .step-title { margin-bottom: 6px !important; }
#fcip-app-root .fciw-step2-file-guide { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
#fcip-app-root .fciw-step2-file-guide { align-items: center !important; }
#fcip-app-root .fciw-step2-file-guide .qui-badge { color: #374151 !important; font-weight: 600 !important; }

/* 2列: 左=道具と画像、右=設定カード（UVDTF・DTF と同じ） */
#fcip-app-root .gen-container.fciw-gen-grid {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important; grid-template-areas: none !important;
    gap: 16px !important; align-items: start !important;
}
#fcip-app-root .fciw-gen-left { min-width: 0; }
#fcip-app-root .fciw-gen-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; position: sticky; top: 16px; }
#fcip-app-root .fciw-gen-side > .qui-card { margin: 0 !important; }
@media (max-width: 899px) {
    #fcip-app-root .gen-container.fciw-gen-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
    #fcip-app-root .fciw-gen-side { position: static; }
}

/* ツールバー（画像の上に1段） */
#fcip-app-root .fciw-gen-toolbar.qui-toolbar { margin: 0 0 8px !important; }
#fcip-app-root .fciw-tool-group { display: inline-flex; align-items: center; gap: 0.3rem; }
#fcip-app-root .fciw-tool-divider { width: 1px; align-self: stretch; margin: 0.1rem 0.15rem; background: #e2e8f0; }
#fcip-app-root .fciw-tool-divider[hidden], #fcip-app-root .fciw-ai-tool-slot[hidden] { display: none !important; }
#fcip-app-root .fciw-gen-toolbar .fciw-preview-bg-toolbar { display: inline-flex !important; flex-wrap: nowrap !important; gap: 0.3rem !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; position: relative; }
#fcip-app-root .fciw-gen-toolbar .fciw-preview-bg-btn,
#fcip-app-root .fciw-gen-toolbar .fciw-tool-btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative;
    width: var(--qui-tap) !important; height: var(--qui-tap) !important; min-width: var(--qui-tap) !important; min-height: 0 !important;
    padding: 0 !important; margin: 0 !important; border: 2px solid #d1d5db !important; border-radius: 8px !important; box-shadow: none !important; cursor: pointer;
}
#fcip-app-root .fciw-gen-toolbar .fciw-tool-btn { border-width: 1px !important; background: #fff !important; color: #374151 !important; }
#fcip-app-root .fciw-gen-toolbar .fciw-tool-btn:hover { border-color: var(--qui-accent) !important; color: var(--qui-accent) !important; background: var(--qui-accent-weak) !important; }
#fcip-app-root .fciw-gen-toolbar .fciw-tool-btn svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#fcip-app-root .fciw-gen-toolbar .fciw-preview-bg-btn.active { border-color: var(--qui-accent) !important; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25) !important; }
#fcip-app-root .fciw-swatch-checker { background-color: #fff !important; background-image: linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%) !important; background-size: 10px 10px !important; background-position: 0 0,0 5px,5px -5px,-5px 0 !important; }
#fcip-app-root .fciw-swatch-black { background: #111827 !important; }
#fcip-app-root .fciw-swatch-color { background: linear-gradient(135deg,#ef4444,#f59e0b,#22c55e,#3b82f6,#8b5cf6) !important; }
/* 色選択の入力は見せない（ボタンから開く） */
#fcip-app-root .fciw-gen-toolbar .fciw-preview-color-input { position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none; }
#fcip-app-root .qui-toolbar.is-locked > .fciw-ai-tool-slot { opacity: 1 !important; pointer-events: auto !important; }

/* AI補正ボタン: 塗りつぶし＋グラデーション、周囲が脈打つように光り、✦がきらめく（UVDTF・DTF と同じ） */
#fcip-app-root .fciw-gen-toolbar .fciw-ai-tool,
#fcip-app-root .fciw-gen-toolbar .fciw-ai-tool:hover {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative;
    width: auto !important; height: 2.25rem !important; min-width: 6.25rem !important; padding: 0 0.85rem !important; gap: 0.3rem !important; margin: 0 !important;
    border: 0 !important; border-radius: 999px !important; white-space: nowrap !important; cursor: pointer;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #d946ef 100%) !important;
    color: #fff !important; font-size: 0.82rem !important; font-weight: 800 !important; letter-spacing: 0.02em !important;
    animation: fciw-ai-glow 1.8s ease-in-out infinite;
}
#fcip-app-root .fciw-gen-toolbar .fciw-ai-tool:hover { filter: brightness(1.08); }
#fcip-app-root .fciw-gen-toolbar .fciw-ai-tool svg { width: 1.05rem !important; height: 1.05rem !important; fill: #fff !important; stroke: none !important; animation: fciw-ai-twinkle 1.6s ease-in-out infinite; transform-origin: center; filter: drop-shadow(0 0 3px rgba(255,255,255,0.9)); }
#fcip-app-root .fciw-gen-toolbar .fciw-ai-tool [data-label] { font-variant-numeric: tabular-nums; color: #fff !important; }
#fcip-app-root .fciw-gen-toolbar .fciw-ai-tool::before {
    content: ""; position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%) no-repeat;
    background-size: 250% 100%; animation: fciw-ai-sweep 2.2s ease-in-out infinite;
}
@keyframes fciw-ai-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.55), 0 2px 8px rgba(99, 102, 241, 0.45); }
    50%      { box-shadow: 0 0 0 7px rgba(139, 92, 246, 0), 0 0 18px 4px rgba(217, 70, 239, 0.55); }
}
@keyframes fciw-ai-sweep { 0% { background-position: 150% 0; } 55%, 100% { background-position: -100% 0; } }
@keyframes fciw-ai-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(1.3) rotate(18deg); opacity: 0.85; } }
#fcip-app-root .fciw-gen-toolbar .fciw-ai-tool.is-busy, #fcip-app-root .fciw-gen-toolbar .fciw-ai-tool.is-busy svg { animation: none; }
#fcip-app-root .fciw-gen-toolbar .fciw-ai-tool.is-busy::before { display: none; }
@media (prefers-reduced-motion: reduce) {
    #fcip-app-root .fciw-gen-toolbar .fciw-ai-tool, #fcip-app-root .fciw-gen-toolbar .fciw-ai-tool svg { animation: none; }
    #fcip-app-root .fciw-gen-toolbar .fciw-ai-tool::before { display: none; }
}
@media (max-width: 640px) {
    #fcip-app-root .fciw-gen-toolbar .fciw-ai-tool-slot { order: -2; }
    #fcip-app-root .fciw-gen-toolbar .fciw-ai-divider { order: -1; }
    #fcip-app-root .fciw-gen-toolbar .fciw-ai-tool, #fcip-app-root .fciw-gen-toolbar .fciw-ai-tool:hover { height: 2.5rem !important; }
    #fcip-app-root .fciw-gen-toolbar.qui-toolbar.qui-more-right { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
    #fcip-app-root .fciw-gen-toolbar.qui-toolbar.qui-more-left { -webkit-mask-image: linear-gradient(to left, #000 82%, transparent); mask-image: linear-gradient(to left, #000 82%, transparent); }
    #fcip-app-root .fciw-gen-toolbar.qui-toolbar.qui-more-left.qui-more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 82%, transparent); }
    #fcip-app-root .fciw-gen-toolbar .qui-toolbar-spacer { display: none !important; }
}

/* キャンバス: 寸法線の分だけ上と右に余白を取る */
#fcip-app-root .fciw-gen-left #previewContainer { min-height: 420px; }
#fcip-app-root #previewContainer.has-dimension-lines { padding: 2rem 2.5rem 1rem 1rem !important; }
#fcip-app-root #previewContainer.black-bg .qui-dim-line, #fcip-app-root #previewContainer.black-bg .qui-dim-ext { stroke: #a5b4fc; }
#fcip-app-root #previewContainer.black-bg .qui-dim-arrow { fill: #a5b4fc; }
@media (max-width: 640px) {
    #fcip-app-root .fciw-gen-left #previewContainer { min-height: 280px; }
    #fcip-app-root #previewContainer.has-dimension-lines { padding: 1.8rem 2.1rem 0.6rem 0.6rem !important; }
}

/* 状態カード */
#fcip-app-root .fciw-status-card .fciw-status-file { margin: 0 0 0.4rem !important; font-size: 0.9rem !important; font-weight: 700 !important; color: #111827 !important; overflow-wrap: anywhere; }

/* カット形状カード（旧パネルの枠は外す） */
#fcip-app-root .fciw-shape-card .gen-shape-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
#fcip-app-root .fciw-shape-card .gen-shape-btn { height: 64px !important; padding: 6px 3px !important; border-radius: 8px !important; }
#fcip-app-root .fciw-shape-card .gen-shape-btn svg { width: 22px !important; height: 22px !important; margin-bottom: 3px !important; }
#fcip-app-root .fciw-shape-card .gen-shape-label { font-size: 11px !important; }

/* 背景カード */
#fcip-app-root .fciw-bg-card.is-busy .qui-seg { opacity: 0.6 !important; pointer-events: none !important; }
#fcip-app-root .fciw-bg-card .fciw-hole-level-control { margin: 0.6rem 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
#fcip-app-root .fciw-bg-card .fciw-hole-level-hint { font-size: 11px !important; line-height: 1.5 !important; }

/* サイズカード（1列にまとめる） */
#fcip-app-root .fciw-size-card .gen-size-input { display: flex !important; flex-direction: column !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
#fcip-app-root .fciw-size-card .gen-size-input > .qui-card-head { margin: 0 !important; }
#fcip-app-root .fciw-size-card .size-unit-selector { grid-template-columns: 1fr 1fr !important; margin: 0 !important; }
#fcip-app-root .fciw-size-card .size-unit-prompt { grid-column: 1 / -1 !important; }
#fcip-app-root .fciw-size-card .size-unit-btn { min-width: 0 !important; min-height: 44px !important; }
#fcip-app-root .fciw-size-card .input-group { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 0 !important; }
#fcip-app-root .fciw-size-card .size-conversion-summary { margin: 0 !important; }
#fcip-app-root .fciw-size-card .dpi-display { margin: 0 !important; }
#fcip-app-root .fciw-dim-toggle { display: inline-flex !important; align-items: center !important; gap: 0.3rem !important; margin: 0 0 0 auto !important; font-size: 0.75rem !important; font-weight: 600 !important; color: #6b7280 !important; cursor: pointer !important; white-space: nowrap !important; }
#fcip-app-root .fciw-dim-toggle input { width: 1rem !important; height: 1rem !important; margin: 0 !important; accent-color: #4f46e5; }

/* 余白・角丸・輪郭カード（旧パネルの枠は外す） */
#fcip-app-root .fciw-controls-card .gen-controls { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; padding: 0 !important; border: 0 !important; background: none !important; }

/* 確認用の背景（黒・好きな色）。市松は既存の .checker-bg */
#fcip-app-root #previewContainer.black-bg, #fcip-app-root #previewContainer.black-bg:hover { background-color: #111827 !important; background-image: none !important; }
#fcip-app-root #previewContainer.custom-bg, #fcip-app-root #previewContainer.custom-bg:hover { background-image: none !important; }

/* カットラインの凡例（SVGの外に置く。製作用SVGに入れない） */
#fcip-app-root .fciw-cutline-legend { display: flex; align-items: center; gap: 0.45rem; margin: 6px 2px 0; font-size: 12px; line-height: 1.5; color: #475569; }
#fcip-app-root .fciw-cutline-legend-swatch { flex: 0 0 auto; width: 1.4rem; height: 0; border-top: 2px solid #e4007f; }
@media (max-width: 899px) { #fcip-app-root .fciw-shape-card .gen-shape-btn { height: 58px !important; } }

/* 外側の線・色を変える */
#fcip-app-root .fciw-outline-card.is-busy .qui-seg { opacity: 0.6 !important; pointer-events: none !important; }
#fcip-app-root .fciw-recolor-row { display: flex !important; align-items: center !important; gap: 0.5rem !important; margin: 0 0 0.5rem !important; }
#fcip-app-root .fciw-recolor-pick { flex: 0 0 auto !important; min-height: 2.5rem !important; padding: 0 0.8rem !important; border: 1px solid #a5b4fc !important; border-radius: 10px !important; background: #eef2ff !important; color: #3730a3 !important; font-size: 0.82rem !important; font-weight: 700 !important; white-space: nowrap !important; cursor: pointer !important; }
#fcip-app-root .fciw-recolor-pick[aria-pressed="true"] { background: #4f46e5 !important; border-color: #4f46e5 !important; color: #fff !important; }
#fcip-app-root .fciw-recolor-from { display: inline-block !important; flex: 0 0 auto !important; width: 2.5rem !important; height: 2.5rem !important; border-radius: 10px !important; border: 1px solid #d1d5db !important; }
#fcip-app-root .fciw-recolor-from.is-empty { background-color: #fff !important; background-image: linear-gradient(45deg, transparent 46%, #d1d5db 46%, #d1d5db 54%, transparent 54%) !important; }
#fcip-app-root .fciw-recolor-arrow { color: #9ca3af !important; font-weight: 700 !important; }
#fcip-app-root .fciw-recolor-card input.fciw-recolor-to[type="color"] { display: inline-block !important; flex: 0 0 auto !important; width: 2.75rem !important; min-width: 2.75rem !important; height: 2.5rem !important; padding: 2px !important; border: 1px solid #d1d5db !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; cursor: pointer !important; }
#fcip-app-root .fciw-recolor-swatches { display: flex !important; flex-wrap: wrap !important; gap: 0.35rem !important; margin: 0 0 0.5rem !important; }
#fcip-app-root .fciw-recolor-swatches button { width: 1.9rem !important; height: 1.9rem !important; min-height: 0 !important; padding: 0 !important; border: 1px solid #d1d5db !important; border-radius: 50% !important; cursor: pointer !important; }
@media (pointer: coarse) { #fcip-app-root .fciw-recolor-swatches button { width: 2.4rem !important; height: 2.4rem !important; } }
#fcip-app-root .fciw-recolor-tol { display: flex !important; align-items: center !important; gap: 0.5rem !important; margin: 0 0 0.35rem !important; font-size: 0.78rem !important; color: #4b5563 !important; font-weight: 600 !important; }
#fcip-app-root .fciw-recolor-tol > span { flex: 0 0 auto !important; white-space: nowrap !important; }
#fcip-app-root .fciw-recolor-card input[type="range"][data-recolor-tol] { -webkit-appearance: auto !important; appearance: auto !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 1.5rem !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important; accent-color: #4f46e5 !important; }
#fcip-app-root .fciw-recolor-actions { display: flex !important; gap: 0.5rem !important; justify-content: flex-end !important; }
#fcip-app-root .fciw-recolor-actions button { min-height: 2.75rem !important; padding: 0 1rem !important; border: 1px solid #d1d5db !important; border-radius: 10px !important; background: #fff !important; color: #374151 !important; font-size: 0.85rem !important; font-weight: 700 !important; cursor: pointer !important; }
#fcip-app-root .fciw-recolor-actions button[hidden] { display: none !important; }
#fcip-app-root .fciw-recolor-actions .fciw-recolor-apply { border-color: #4f46e5 !important; background: #4f46e5 !important; color: #fff !important; }
#fcip-app-root .fciw-recolor-actions .fciw-recolor-apply:disabled { opacity: 0.45 !important; cursor: default !important; }
#fcip-app-root .fciw-recolor-card.is-busy .fciw-recolor-actions { opacity: 0.6 !important; pointer-events: none !important; }
#fcip-app-root #previewContainer.is-picking-color, #fcip-app-root #previewContainer.is-picking-color * { cursor: crosshair !important; }
#fcip-app-root canvas.fciw-recolor-preview { position: absolute !important; z-index: 3 !important; display: block !important; max-width: none !important; pointer-events: none !important; }
#fcip-app-root canvas.fciw-recolor-preview[hidden] { display: none !important; }
#fcip-app-root .qui-help-pop > span { display: block !important; margin: 0 0 0.45rem !important; }
#fcip-app-root .qui-help-pop > span:last-child { margin-bottom: 0 !important; }