.listing-template-store { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--listing-glass-strong); }
.listing-template-store > span { color: var(--muted); font-size: 11px; font-weight: 760; }
.listing-template-save { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.listing-template-save input { min-height: 34px; padding-left: 12px; }
.listing-template-save input:focus { border-color: color-mix(in srgb, var(--accent) 58%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.listing-template-save .primary-button { min-width: 64px; }
.listing-template-list { display: grid; gap: 6px; max-height: 176px; overflow: auto; }
.listing-template-list article { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 9px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.listing-template-list article[data-used="true"] { border-color: color-mix(in srgb, #22c55e 34%, var(--border)); }
.listing-template-list article[data-bound="true"] { background: color-mix(in srgb, #22c55e 8%, var(--surface)); }
.listing-template-list span { display: grid; flex: 1 0 100%; gap: 2px; min-width: 0; }.listing-template-list strong,.listing-template-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.listing-template-list strong { color: var(--text); font-size: 12px; }.listing-template-list small,.listing-template-list p,.listing-template-store small { margin: 0; color: var(--muted); font-size: 10px; font-weight: 740; line-height: 1.45; }
.listing-template-list button { min-height: 28px; padding: 0 9px; border-radius: 999px; background: transparent; font-size: 10px; box-shadow: none; }
.listing-template-list button[data-template-bind-saved] { background: var(--accent); color: var(--listing-primary-text); }.listing-template-list button[data-template-delete] { margin-left: auto; border-color: transparent; color: color-mix(in srgb, #ff3868 44%, var(--muted)); opacity: .72; }
.listing-template-list button[data-template-delete]:hover { opacity: 1; color: #ff3868; }
.listing-template-list button[data-template-apply] { border-color: transparent; color: var(--muted); }
.listing-template-handoff { display: grid; gap: 3px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent); }
.listing-template-handoff strong { color: var(--text); font-size: 11px; font-weight: 760; line-height: 1.25; }.listing-template-handoff span { color: var(--accent); font-size: 12px; font-weight: 760; line-height: 1.2; }
.listing-template-handoff small { color: var(--muted); font-size: 10px; font-weight: 740; line-height: 1.45; }
.listing-template-handoff ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin: 4px 0 0; padding: 0; list-style: none; }
.listing-template-handoff li { min-width: 0; padding: 5px 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 9px; font-weight: 760; text-align: center; }
.listing-template-handoff li.is-done { border-color: color-mix(in srgb, #22c55e 46%, var(--border)); background: #22c55e; color: #07130c; }
.listing-template-handoff li.is-done::before { content: "OK "; font-size: 8px; font-weight: 780; }
.listing-active-template { position: relative; display: grid; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); border-radius: 12px; background: var(--listing-item-bg, var(--surface)); }
.listing-active-template span { color: var(--muted); font-size: 10px; font-weight: 760; }
.listing-active-template strong { overflow: hidden; color: var(--text); font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.listing-active-template small { color: var(--muted); font-size: 10px; font-weight: 740; line-height: 1.45; }
.listing-active-template button { justify-self: start; min-height: 26px; padding: 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); font-size: 10px; box-shadow: none; }
.listing-active-template a { justify-self: start; min-height: 26px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: 10px; font-weight: 760; text-decoration: none; }
.listing-active-template a[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.listing-active-template button[data-template-bind-current] { background: var(--accent); color: var(--listing-primary-text); }
.listing-active-template button:disabled { opacity: .45; pointer-events: none; }
.listing-active-template:not(.is-empty) { background: color-mix(in srgb, var(--accent) 8%, var(--listing-item-bg, var(--surface))); }
.listing-active-template.is-bound { border-color: color-mix(in srgb, #22c55e 54%, var(--border)); background: color-mix(in srgb, #22c55e 10%, var(--listing-item-bg, var(--surface))); }
.listing-editor-preview .listing-active-template.is-bound::after { content: "商品反映済み"; position: absolute; top: 8px; right: 8px; padding: 3px 7px; border-radius: 999px; background: #22c55e; color: #07130c; font-size: 9px; font-weight: 780; line-height: 1; }
.listing-active-template.is-bound button[data-template-bind-current] { background: #22c55e; color: #07130c; }
.listing-product .listing-template-pill { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 22px; margin-top: 6px; padding: 2px 3px 2px 8px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--accent); font-size: 10px; font-weight: 760; line-height: 1; white-space: nowrap; }
.listing-product .listing-template-pill b { display: inline-flex; align-items: center; gap: 5px; font: inherit; color: inherit; }
.listing-product .listing-template-pill small { padding: 2px 5px; border-radius: 999px; background: #22c55e; color: #07130c; font-size: 8px; font-weight: 780; line-height: 1; }
.listing-product .listing-template-pill button { min-height: 18px; padding: 0 7px; border: 0; border-radius: 999px; background: var(--accent); color: var(--listing-primary-text); font-size: 9px; font-weight: 760; box-shadow: none; }
.listing-template-card[data-template-preset="trio"] { --sample-a:#eef2f8; --sample-b:#9aa4b2; --sample-c:#1f2732; }
.listing-template-mini.is-trio i:nth-child(1) { inset: 10% 52% 52% 10%; }.listing-template-mini.is-trio i:nth-child(2) { inset: 10% 10% 52% 52%; }.listing-template-mini.is-trio i:nth-child(3) { inset: 52% 10% 10%; }.listing-template-mini.is-trio i:nth-child(4) { display: none; }
.listing-editor-stage[data-has-image="false"] { background: color-mix(in srgb, var(--surface-soft) 72%, transparent); box-shadow: none; }
.listing-editor-stage[data-has-image="false"] canvas { opacity: 0; }
.listing-editor-stage[data-has-image="false"]::after { inset: 18px; border: 1px dashed color-mix(in srgb, var(--accent) 18%, var(--border)); border-radius: 12px; background: linear-gradient(currentColor,currentColor) left top / 54px 1px no-repeat,linear-gradient(currentColor,currentColor) left top / 1px 54px no-repeat,linear-gradient(currentColor,currentColor) right top / 54px 1px no-repeat,linear-gradient(currentColor,currentColor) right top / 1px 54px no-repeat,linear-gradient(currentColor,currentColor) left bottom / 54px 1px no-repeat,linear-gradient(currentColor,currentColor) left bottom / 1px 54px no-repeat,linear-gradient(currentColor,currentColor) right bottom / 54px 1px no-repeat,linear-gradient(currentColor,currentColor) right bottom / 1px 54px no-repeat; color: color-mix(in srgb, var(--muted) 24%, transparent); opacity: .46; }
.listing-editor-stage[data-has-image="false"] .listing-layer-guide.is-main { border-color: color-mix(in srgb, var(--accent) 22%, var(--border)); background: color-mix(in srgb, #eef2f8 50%, transparent); box-shadow: none; }