/* Quiet editing surface; shared product imagery connects it to the Showcase. */

#product-form,#preview-panel{scroll-margin-top:calc(var(--navigation-height,90px) + 22px)}
#studio .small-muted{color:var(--t-4b5ab1);text-decoration:underline;text-underline-offset:3px}
#studio .empty-preview{background:radial-gradient(ellipse at 50% 34%,var(--c-ffffff) 0,var(--c-f0f1ed) 65%);padding:28px;text-align:center}
#studio .empty-preview h2{font-size:28px;letter-spacing:-.04em;margin:20px 0 8px;color:var(--t-222a32)}
#studio .empty-preview p{color:var(--t-727975);line-height:1.7;margin:0;font-size:12px}
#studio .empty-preview button{background:var(--c-ffffff);border-color:var(--c-c5c9c1);color:var(--t-313b34);margin-top:24px}
#studio .studio-title{padding-block:24px;margin-bottom:24px}
#studio .studio-title h1{font-size:30px;margin-block:12px 0}
#studio .studio-title .eyebrow{color:var(--t-737a70)}
#studio .section-label>span{color:var(--t-384bff);font:11px/1.5 monospace}
#studio .text-button{color:var(--t-4b5ab1)}
#studio .canvas-wrap{border-color:var(--c-d9ddd4);box-shadow:0 14px 36px #26302b0c}
#studio .template-card{border-color:var(--c-d8dcd3);background:var(--c-f9faf6);transition:border-color .2s,transform .2s}
#studio .template-card:hover{transform:translateY(-3px);border-color:var(--c-8992d9)}
#studio .template-card.selected{border-color:var(--c-384bff);background:var(--c-f5f6ff)}
#studio .template-card i{color:var(--t-7982b2)}
#studio .template-card canvas{background:var(--c-f0f1ea)}
#studio .editor input:focus,#studio .editor textarea:focus,#studio .editor select:focus{outline:2px solid var(--c-384bff);outline-offset:2px}
#studio .editor input::placeholder,#studio .editor textarea::placeholder{color:var(--t-828a82)}
#studio .working-overlay{background:var(--c-f1f3efed);color:var(--t-354536)}
#studio .spinner{border-color:var(--c-d4d8ec);border-top-color:var(--c-384bff)}
#studio .counter-grid b{font-family:Arial,sans-serif;font-size:30px;letter-spacing:-.055em;font-variant-numeric:tabular-nums;color:var(--t-27313b)}
#studio .export-bar .button{background:var(--c-202934);color:var(--t-ffffff);border-color:var(--c-202934)}
#studio .export-bar .button:hover:not(:disabled){background:var(--c-384bff);border-color:var(--c-384bff)}
@media(min-width:761px){
  #studio .canvas-wrap,#studio .preview-toolbar,#studio .preview-caption{max-width:min(100%,490px)}
  #studio .workspace{min-width:0}
}
@media(max-width:760px){
  #studio{padding-bottom:76px}
  
  
  
  #studio .studio-title{padding-block:22px}
  #studio .studio-title h1{font-size:27px}
  #studio .empty-preview{padding:18px}
  #studio .empty-preview h2{font-size:23px;margin-top:14px}
  #studio .empty-preview button{margin-top:14px;padding:10px 18px}
  #studio .template-card i{position:static;display:block;padding:0 4px 4px;font-size:9px}
  #studio .template-card small{line-height:1.5}
}
/* Before upload, composition diagrams explain hierarchy without fake product data. */
#studio .template-picker:not(.has-image) .template-card canvas{display:none}
#studio .template-card>.layout-map{display:block;position:relative;aspect-ratio:1;padding:0;margin:0;overflow:hidden;background:var(--c-ffffff);max-height:140px}
#studio .template-picker.has-image .layout-map{display:none}
.layout-map>span{position:absolute;display:block}
.map-subject{width:42%;height:52%;left:29%;top:24%;background:linear-gradient(135deg,var(--c-b7bedc),var(--c-7785b1));border-radius:44% 44% 20% 20%;box-shadow:0 10px 12px #283d6920}
.layout-map-minimal .map-heading,.layout-map-minimal .map-detail,.layout-map-minimal .map-price{display:none}
#studio .layout-map-premium{background:var(--c-f0eee7)}
.layout-map-premium .map-subject{width:39%;height:46%;left:55%;top:41%;rotate:-8deg}
.map-heading{left:9%;top:12%;width:55%;height:7%;background:var(--c-263331);box-shadow:0 13px #263331}
.map-detail{left:9%;top:45%;width:26%;height:3%;background:var(--c-b5b9ae);box-shadow:0 7px #b5b9ae,0 14px #b5b9ae}
.map-price{left:9%;bottom:10%;width:20%;height:6%;background:var(--c-69747c)}
#studio .layout-map-sale{background:linear-gradient(170deg,var(--c-f5f1e5) 65%,var(--c-253a39) 65%)}
.layout-map-sale .map-subject{left:40%;top:26%;height:47%;width:35%;rotate:10deg}
.layout-map-sale .map-heading{width:40%;height:5%;box-shadow:0 10px #263331}
.layout-map-sale .map-detail{display:none}
.layout-map-sale .map-price{left:auto;right:10%;bottom:9%;width:37%;height:8%;background:var(--c-f5f1e5)}
#studio .template-card.selected::after{content:'✓';position:absolute;right:12px;top:12px;display:grid;place-items:center;width:23px;height:23px;background:var(--c-384bff);color:var(--t-ffffff);border-radius:50%;font-size:13px;box-shadow:0 2px 8px #18265025}
@media(max-width:760px){#studio .template-card>.layout-map{max-height:none}.map-heading{box-shadow:0 9px #263331}.map-detail{box-shadow:0 5px #b5b9ae,0 10px #b5b9ae}#studio .template-card.selected::after{right:9px;top:9px;width:19px;height:19px;font-size:11px}}
#studio .template-card>.layout-map{width:100%;max-width:140px;margin-inline:auto}
#studio .template-card>.layout-map-premium{background:var(--c-f0eee7)}
#studio .template-card>.layout-map-sale{background:linear-gradient(170deg,var(--c-f5f1e5) 65%,var(--c-253a39) 65%)}
#studio .template-card.selected::after{content:'✓' / ''}
/* Give the final action its own row on phones, including longer locales. */
@media(max-width:760px){
  #studio .export-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
  #studio .export-bar>div>span{line-height:1.7}
  #studio .export-bar #download{width:100%;min-height:48px;justify-content:space-between;padding:14px 18px;font-size:13px;white-space:nowrap}
}
.preview-inspect{display:flex;gap:24px;align-items:center;justify-content:space-between;margin:16px auto 0;padding:10px 0;border:0;border-bottom:1px solid var(--c-a2abc0);background:transparent;color:var(--t-485888);font-size:12px;min-height:40px;width:min(100%,490px)}
.preview-inspect:disabled{opacity:.45;cursor:default}
.studio-detail{width:min(900px,94vw);max-height:94svh;margin:auto;padding:20px;border:0;background:var(--c-f2f1ec);box-shadow:0 35px 90px #0005;overflow:auto}
.studio-detail::backdrop{background:var(--c-101117d9);backdrop-filter:blur(8px)}
.studio-detail header{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;position:sticky;top:-20px;padding-top:4px;background:var(--c-f2f1ec);z-index:1}
.studio-detail h2{font-size:16px;font-weight:500;margin:0 0 6px;color:var(--t-26302e)}
.studio-detail header span{font-size:10px;color:var(--t-737e7c)}
#studio-detail-close{width:44px;height:44px;border:1px solid var(--c-bec5c2);background:transparent;font-size:26px;color:var(--t-26302e)}
#studio-detail-canvas{display:block;width:100%;height:auto;background:var(--c-ffffff)}
@media(max-width:760px){.studio-detail{padding:12px}.studio-detail header{top:-12px}}
/* Fit the full artwork first; actual-size mode provides scrollable pixel inspection. */
.studio-detail .detail-actions{display:flex;align-items:center;gap:10px}
#studio-detail-size{min-height:44px;padding:8px 14px;border:1px solid var(--c-bec5c2);background:transparent;color:var(--t-435369);font-size:12px}
#studio-detail-size[aria-pressed=true]{background:var(--c-384bff);color:var(--t-ffffff);border-color:var(--c-384bff)}
.studio-detail-frame{overflow:auto;max-height:calc(94svh - 125px);overscroll-behavior:contain;background:var(--c-e4e5df)}
#studio-detail-canvas{width:min(100%,calc(94svh - 125px));height:auto;margin-inline:auto}
.studio-detail.actual-size .studio-detail-frame{height:calc(94svh - 125px)}
.studio-detail.actual-size #studio-detail-canvas{width:1200px;max-width:none;height:1200px;margin:0}
@media(max-width:760px){#studio-detail-size{padding-inline:9px;font-size:11px}.studio-detail h2{font-size:13px}.studio-detail .detail-actions{gap:6px}}
.source-details{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0 8px;border-bottom:1px solid var(--c-d9ddd4);font-size:11px;line-height:1.6;color:var(--t-53625e)}
#source-name{min-width:0;overflow-wrap:anywhere}
#source-size{flex-shrink:0;font:10px/1.6 Arial,sans-serif;color:var(--t-747e7a);white-space:nowrap}
/* Comfortable editor typography alongside the quiet image workspace. */
@media(min-width:761px) and (max-width:1150px){
  #studio .studio-layout{grid-template-columns:300px minmax(0,1fr)}
}
#studio .upload-zone strong{font-size:14px;line-height:1.65;text-align:center;text-wrap:balance}
#studio .upload-zone>span:last-child{font-size:11px;line-height:1.6;color:var(--t-677168)}
#studio .field-help,#studio .generation-mode p,#studio .cost-caption{font-size:12px;line-height:1.8;color:var(--t-647064)}
#studio .check-label{font-size:12px!important;line-height:1.6;color:var(--t-536052)!important;align-items:flex-start}
#studio .check-label input{margin-top:3px!important;flex-shrink:0;accent-color:var(--c-384bff)}
#studio .editor input:not([type=file]):not([type=checkbox]),#studio .editor textarea,#studio .editor select{font-size:14px;line-height:1.5}
#studio .text-button,#studio .small-muted{font-size:12px;line-height:1.6}
/* Upload state and focus remain visible over the shared surface theme. */
#studio .upload-zone{transition:border-color .18s,background-color .18s,box-shadow .18s}
#studio .upload-zone:has(:where(img:not([hidden]))){border-style:solid;background:var(--c-f8f9f5)!important;border-color:var(--c-c9d0c3)!important}
#studio .upload-zone img{height:140px;padding:10px;background:repeating-conic-gradient(var(--c-f0f2ed) 0% 25%,var(--c-ffffff) 0% 50%) 0 0/16px 16px;border:1px solid var(--c-e1e5dd)}
#studio .upload-zone:has(img:not([hidden])) strong{font-size:12px;color:var(--t-4351a0);border-bottom:1px solid var(--c-c0c7e0);padding-bottom:3px}
#studio .upload-zone:hover:not(:where(:has(input:disabled))){border-color:var(--c-8793d4)!important;background:var(--c-f1f3ff)!important}
#studio .upload-zone:focus-within,#studio .upload-zone.drag{border-color:var(--c-384bff)!important;background:var(--c-e9edff)!important;box-shadow:0 0 0 3px #384bff24}
#studio .upload-zone.drag .upload-icon{color:var(--t-384bff);transform:scale(1.2)}
#studio .upload-zone:has(input:disabled){opacity:.65;cursor:progress}
@media(prefers-reduced-motion:reduce){#studio .upload-zone{transition:none}}
/* Phone template choices pair an image with readable purpose text. */
@media(max-width:480px){
  #studio .template-picker{grid-template-columns:1fr;gap:10px}
  #studio .template-card{display:grid;grid-template-columns:88px minmax(0,1fr) 20px;align-items:center;gap:14px;padding:10px;text-align:left}
  #studio .template-card canvas{width:88px;height:88px;grid-column:1;grid-row:1}
  #studio .template-card>.layout-map{width:88px;height:88px;max-height:88px;grid-column:1;grid-row:1}
  #studio .template-card>span:not(.layout-map){grid-column:2;grid-row:1;padding:0;gap:7px}
  #studio .template-card b{font-size:14px;line-height:1.5}
  #studio .template-card small{font-size:12px;line-height:1.6;color:var(--t-647064)!important}
  #studio .template-card i{grid-column:3;grid-row:1;padding:0;font:10px/1.4 monospace;text-align:center}
  #studio .template-card.selected i{opacity:0}
  #studio .template-card.selected::after{right:10px;top:50%;transform:translateY(-50%);width:20px;height:20px}
  #studio .template-heading{align-items:flex-start;gap:12px}
  #studio .template-heading span{max-width:52%;line-height:1.7;text-align:right}
}
/* Group metering and records instead of placing each small item on the outer grid. */
#studio .activity{display:block;padding:24px}
.activity-overview,.activity-records{min-width:0}
#studio .activity-intro{font-size:12px;line-height:1.7;margin:18px 0}
#studio .counter-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;padding-bottom:22px}
#studio .counter-grid span{font-size:12px;line-height:1.5}
#studio .audit-state{font-size:12px;line-height:1.65;gap:18px;margin-top:14px}
#studio .audit-state strong{text-align:right;color:var(--t-35445d)}
#studio .event-log{font-size:12px;line-height:1.8;padding-top:24px}
#studio .activity details{font-size:12px}
#studio .activity summary{padding-block:5px}
#studio .activity-footnote{font-size:11px;line-height:1.8;color:var(--t-6b7664)!important}
@media(min-width:761px) and (max-width:1150px){
  #studio .activity{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
  .activity-records{border-left:1px solid var(--c-dce1d6);padding-left:32px}
  #studio .activity-records .event-log{padding-top:0}
}
@media(max-width:760px){#studio .activity{padding:22px}.activity-records{border-top:1px solid var(--c-dce1d6);margin-top:22px}}

/* On phones, keep preview metadata readable rather than compressing it into one line. */
@media(max-width:760px){
  #studio .preview-toolbar{display:grid;grid-template-columns:7px minmax(0,1fr) auto;height:auto;min-height:58px;align-items:start;gap:7px 8px;margin-bottom:14px;color:var(--t-626e65)}
  #studio .preview-toolbar>div{display:contents}
  #studio .preview-toolbar .preview-dot{grid-column:1;grid-row:1;align-self:center;margin:0}
  #studio .preview-toolbar strong{grid-column:2;grid-row:1;margin:0;font-size:14px;line-height:1.5;font-weight:500;color:var(--t-263a35)}
  #studio #preview-template-name{grid-column:1/-1;grid-row:2;font-size:12px;line-height:1.6;overflow-wrap:anywhere;color:var(--t-626e65)}
  #studio .preview-toolbar>span{grid-column:3;grid-row:1;font-size:11px;line-height:1.5;margin-top:3px;white-space:nowrap}
}
/* Make the preview's first action the user's own photograph. */
.empty-actions{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;flex-wrap:wrap}
#studio .empty-actions button{margin:0;padding:12px 16px;font-size:12px;min-height:44px}
#studio .empty-actions #empty-upload{background:var(--c-384bff);border-color:var(--c-384bff);color:var(--t-ffffff);gap:12px;box-shadow:0 5px 14px #384bff18}
#studio .empty-actions #empty-upload:hover{background:var(--c-293cdb)}
#studio .empty-actions #empty-sample{background:transparent;border-color:transparent;color:var(--t-555f69);text-decoration:underline;text-underline-offset:4px}
#studio .empty-actions button:focus-visible{outline:2px solid var(--c-384bff);outline-offset:4px}
@media(max-width:380px){
 #studio .empty-preview h2{margin-top:8px;font-size:21px}
 .empty-actions{gap:4px;margin-top:12px}
 #studio .empty-actions button{padding:10px 8px;font-size:11px}
}
/* Keep layout decisions and export details legible beside the image. */
#studio .template-heading h2{font-size:15px;font-weight:500;line-height:1.5}
#studio .template-heading>span{font-size:11px;line-height:1.6;color:var(--t-69736d)}
#studio .template-usage{font-size:12px;line-height:1.8;padding:14px 16px;color:var(--t-475568)}
#studio .export-bar strong{font-size:14px;line-height:1.5;font-weight:500}
#studio .export-bar>div>span{font-size:11px;line-height:1.8;color:var(--t-69736d);margin-top:6px}
@media(min-width:481px){
 #studio .template-card>span:not(.layout-map){display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:12px 10px 14px;text-align:left}
 #studio .template-card b{font-size:14px;line-height:1.5;font-weight:500}
 #studio .template-card small{font-size:12px;line-height:1.6;color:var(--t-647064);max-width:95%}
 #studio .template-card i{display:none}
}
@media(min-width:481px){
 #studio .template-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
 #studio .template-card canvas{align-self:center;flex-shrink:0}
 #studio .template-card small{text-wrap:pretty}
}
/* Adapt to the preview column itself, including split-pane tablet layouts. */
#studio .workspace{container:studio-workspace / inline-size}
/* Selection belongs to the label, leaving the artwork unobstructed. */
@container studio-workspace (min-width:421px){
 #studio .template-card.selected::after{display:none}
 #studio .template-card b{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
 #studio .template-card b::after{content:'';width:17px;height:17px;flex-shrink:0;border:1px solid var(--c-c4cbc0);border-radius:50%}
 #studio .template-card.selected b::after{content:'✓' / '';display:grid;place-items:center;background:var(--c-384bff);border-color:var(--c-384bff);color:var(--t-ffffff);font:11px/1 sans-serif}
}
@container studio-workspace (max-width:420px){
 #studio .template-picker{grid-template-columns:minmax(0,1fr);gap:10px}
 #studio .template-card{display:grid;grid-template-columns:80px minmax(0,1fr) 20px;align-items:center;gap:12px;padding:10px;text-align:left}
 #studio .template-card canvas,#studio .template-card>.layout-map{width:80px;height:80px;max-height:80px;grid-column:1;grid-row:1}
 #studio .template-card>span:not(.layout-map){grid-column:2;grid-row:1;padding:0;gap:6px}
 #studio .template-card small{max-width:none}
 #studio .template-card i{display:block;position:static;grid-column:3;grid-row:1;padding:0;font:10px/1.4 monospace;text-align:center}
 #studio .template-card.selected i{opacity:0}
 #studio .template-card.selected::after{right:10px;top:50%;transform:translateY(-50%);width:20px;height:20px}
 #studio .export-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
 #studio .export-bar #download{width:100%;min-height:48px;justify-content:space-between;padding:14px 18px;font-size:13px;white-space:nowrap}
}
#download[aria-busy=true]{cursor:progress;opacity:.8}
#download[aria-busy=true]>span[aria-hidden]{visibility:hidden}
#toast{background:var(--c-202934);border:1px solid var(--c-596575);box-shadow:0 12px 36px #111a2b30;line-height:1.7;font-size:13px}
@media(max-width:760px){#toast{bottom:calc(88px + env(safe-area-inset-bottom));width:max-content;max-width:90vw;padding:12px 18px}}
/* Use wide workspaces for the artwork, with a shared editorial content edge. */
@container studio-workspace (min-width:650px){
 #studio .canvas-wrap,#studio .preview-toolbar,#studio .preview-caption,
 #studio .template-heading,#studio .template-picker,#studio .template-usage,
 #studio .export-bar,#studio .status-message{
  width:100%;max-width:clamp(490px,calc(100svh - 350px),640px);margin-inline:auto;
 }
 #studio .preview-inspect{width:min(100%,clamp(490px,calc(100svh - 350px),640px))}
}
.description-help{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;margin:-8px 0 22px;color:var(--t-647064);font-size:11px;line-height:1.7}
#points-count{font:10px/1.9 monospace;color:var(--t-747f88);font-variant-numeric:tabular-nums;white-space:nowrap}
.description-help{font-size:12px}
#studio .upload-zone.has-error{border-color:var(--c-a34642)!important;background:var(--c-fff7f4)!important}
.upload-error{margin:10px 0 16px;padding:10px 12px;border-left:2px solid var(--c-a34642);background:var(--c-fff1ed);color:var(--t-873f3b);font-size:12px;line-height:1.7}
/* Narrow metering panels read as labeled rows instead of broken caption tiles. */
.activity-overview{container:audit-overview / inline-size}
@container audit-overview (max-width:230px){
 #studio .counter-grid{grid-template-columns:minmax(0,1fr);gap:0;padding-bottom:12px}
 #studio .counter-grid>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--c-dce1d6)}
 #studio .counter-grid>div:last-child{border-bottom:0}
 #studio .counter-grid span{grid-column:1;grid-row:1;margin:0;text-align:left}
 #studio .counter-grid b{grid-column:2;grid-row:1;font-size:25px;line-height:1.2;text-align:right}
}
/* A compact workbench heading leaves more of the artwork above the fold. */
@media(min-width:761px){
 #studio .studio-title{padding-block:18px;margin-bottom:24px;align-items:center;gap:24px}
 #studio .studio-title>div:first-child{display:flex;align-items:center;gap:20px;min-width:0}
 #studio .studio-title h1{font-size:26px;line-height:1.3;margin:0;order:-1}
 #studio .studio-title .eyebrow{margin:0;padding-left:20px;border-left:1px solid var(--c-cbd0c7);font-size:10px;line-height:1.8;letter-spacing:.12em;white-space:nowrap}
 #studio .studio-title>div:last-child{text-align:right}
 #studio .studio-title .mode-label{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:transparent!important;color:var(--t-56614f)!important;font-size:11px}
 #studio .studio-title .mode-label::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--c-64795b)}
 #studio .studio-title .language-note{margin:7px 0 0;font-size:10px;line-height:1.5}
}
/* Saved source photos make previous work recognizable without generating previews. */
#studio .history-list button{justify-content:flex-start;gap:11px;min-height:70px;padding:12px 0;color:var(--t-344037);border-bottom-color:var(--c-dce0d7)}
#studio .history-list button>img{display:block;flex-shrink:0;object-fit:contain;background:var(--c-ffffff);border:1px solid var(--c-e1e4dd)}
#studio .history-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:6px}
#studio .history-copy>span{font-size:12px;line-height:1.5;overflow-wrap:anywhere}
#studio .history-copy small{font-size:10px;line-height:1.4;color:var(--t-707a70)}
#studio .history-arrow{font-size:17px;line-height:1;color:var(--t-7b8677)}
#studio .history-list button:hover{background:var(--c-eceff7);color:var(--t-283bc7)}
#studio .history-list button:focus-visible{outline:2px solid var(--c-384bff);outline-offset:-2px}
#studio .history-list button[aria-current=true]{background:var(--c-eceffb);box-shadow:inset 2px 0 #384bff;padding-inline:8px;color:var(--t-283bc7)}
#studio .history-list button[aria-current=true] .history-arrow{color:var(--t-384bff);font-size:14px}
/* Inspect the saved source beside its composed result, without changing the export. */
.studio-detail{--detail-frame-height:calc(94svh - 185px)}
.studio-detail header{flex-wrap:wrap;gap:14px}
.detail-view-switch{display:flex;gap:22px;flex-basis:100%;border-bottom:1px solid var(--c-c9cfc5)}
.detail-view-switch button{min-height:40px;padding:8px 2px;background:transparent;border:0;border-bottom:2px solid transparent;color:var(--t-697469);font-size:12px}
.detail-view-switch button[aria-pressed=true]{border-bottom-color:var(--c-384bff);color:var(--t-283bc7)}
#studio-detail-template{margin-left:auto;align-self:center;max-width:160px;min-height:40px;padding:7px 28px 7px 10px;border:1px solid var(--c-c9cfc5);background:var(--c-ffffff);color:var(--t-34483e);font-size:12px;border-radius:0}
#studio-detail-template:focus-visible{outline:2px solid var(--c-384bff);outline-offset:2px}
@media(max-width:380px){.studio-detail .detail-view-switch{gap:10px}#studio-detail-template{width:128px;max-width:128px;font-size:11px;padding-left:6px;padding-right:6px}}
.studio-detail-frame{max-height:var(--detail-frame-height)}
#studio-detail-canvas{width:min(100%,var(--detail-frame-height))}
#studio-detail-source{display:block;width:auto;height:auto;max-width:100%;max-height:var(--detail-frame-height);margin-inline:auto;background:var(--c-ffffff)}
.studio-detail.actual-size .studio-detail-frame{height:var(--detail-frame-height)}
.studio-detail.actual-size #studio-detail-source{width:var(--source-width);max-width:none;max-height:none;margin:0}
@media(max-width:760px){.detail-view-switch{gap:20px}.detail-view-switch button{font-size:11px;min-height:40px}}
/* The large preview is a file-drop target as well as the source panel. */
.preview-drop-hint{display:none;position:absolute;inset:10px;z-index:6;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:var(--c-eef1fff0);border:2px dashed var(--c-6374db);color:var(--t-3046b3);pointer-events:none;text-align:center;padding:24px}
.preview-drop-hint>span{font-size:44px;line-height:1;font-weight:300}
.preview-drop-hint>strong{font-size:14px;line-height:1.7;font-weight:500}
.canvas-wrap.drag .preview-drop-hint{display:flex}
#studio .upload-zone.drag{border-color:var(--c-6374db)!important;background:var(--c-eef1ff)!important;outline:2px solid var(--c-6374db);outline-offset:3px}
@media(max-width:380px){.preview-drop-hint{inset:7px;padding:16px}.preview-drop-hint>strong{font-size:12px}}
/* A generous reversible processing control keeps the native checkbox semantics. */
#studio .check-label{min-height:44px;padding:10px;border:1px solid var(--c-d8ded3);border-radius:3px;background:var(--c-f0f2ed);align-items:center;cursor:pointer;gap:9px}
#studio #remove-white{appearance:auto;width:18px!important;height:18px;margin:0!important;flex-shrink:0;accent-color:var(--c-384bff);cursor:pointer}
#studio .check-label:has(#remove-white:checked){background:var(--c-ecefff);border-color:var(--c-9aa6e8);color:var(--t-283bc7)!important}
#studio .check-label:focus-within{outline:2px solid var(--c-384bff);outline-offset:2px}
#studio #remove-white:focus{outline:none}
/* Once a source is loaded, give the editor space back to product information. */
#studio .upload-zone:has(img:not([hidden])){display:grid!important;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:12px;row-gap:6px;min-height:110px;padding:12px}
#studio .upload-zone:has(img:not([hidden])) img{grid-column:1;grid-row:1 / 3;width:64px;height:80px;padding:4px;margin:0;object-fit:contain}
#studio .upload-zone:has(img:not([hidden])) strong{grid-column:2;grid-row:1;text-align:left;text-wrap:pretty;border-bottom:0;padding:0;align-self:end}
#studio .upload-zone:has(img:not([hidden]))>span:last-child{grid-column:2;grid-row:2;text-align:left;font-size:10px;align-self:start}
.empty-samples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(100%,280px);margin-bottom:8px}
#studio .empty-samples button{margin:0;padding:6px;border:1px solid var(--c-d9ddd4);border-radius:3px;min-width:0;background:var(--c-ffffff);box-shadow:0 5px 14px #20284008;transition:border-color .15s,box-shadow .15s}
.empty-samples img{display:block;width:100%;height:66px;object-fit:contain;margin-bottom:7px}
.empty-samples span{display:block;font-size:10px;line-height:1.4;color:var(--t-606a62)}
.empty-samples .empty-samples-label{grid-column:1/-1;font-size:10px;letter-spacing:.04em;color:var(--t-707970)}
#studio .empty-samples button:hover,#studio .empty-samples button:focus-visible{border-color:var(--c-6374db);box-shadow:0 5px 18px #384bff16}
@media(max-width:760px){.empty-samples{width:230px;max-width:100%;gap:7px;margin-bottom:0}#studio .empty-samples button{padding:5px;margin:0}.empty-samples img{height:48px;margin-bottom:5px}.empty-samples span{font-size:9px}}
@media(prefers-reduced-motion:reduce){#studio .empty-samples button{transition:none}}

/* EC recipe diagrams: the same hierarchy as each renderer, before upload. */
#studio .template-card>.layout-map-minimal{background:var(--c-f6f2e6)}
.layout-map-minimal::after{content:'';position:absolute;inset:81% 0 0;background:var(--c-18292b)}
.layout-map-minimal .map-subject{top:27%;left:27%;width:46%;height:48%;rotate:0deg}
.layout-map-minimal .map-heading{display:block;left:8%;top:11%;width:70%;height:5%;box-shadow:none}
.layout-map-minimal .map-price{display:block;left:74%;bottom:4%;width:20%;height:10%;background:var(--c-ecd7a4);z-index:1}
#studio .template-card>.layout-map-premium{background:var(--c-f8f5ea)}
.layout-map-premium::before{content:'';position:absolute;inset:0 72% 14% 0;background:var(--c-443c27)}
.layout-map-premium .map-subject{left:40%;top:15%;width:47%;height:61%;rotate:0deg}
.layout-map-premium .map-heading{left:6%;top:22%;width:15%;height:5%;background:var(--c-ffffff);box-shadow:0 12px #fff,0 24px #fff}
.layout-map-premium .map-detail{left:36%;top:90%;width:51%;height:2%;box-shadow:none}
.layout-map-premium .map-price{left:6%;bottom:23%;width:15%;height:7%;background:var(--c-ead69c)}
#studio .template-card>.layout-map-sale{background:var(--c-fcfbf7)}
.layout-map-sale::before{content:'';position:absolute;inset:27% 0 19% 73%;background:var(--c-e9dbb7)}
.layout-map-sale .map-heading{left:5%;top:12%;width:81%;height:6%;box-shadow:none}
.layout-map-sale .map-subject{left:12%;top:32%;width:47%;height:44%;rotate:0deg}
.layout-map-sale .map-price{left:77%;top:40%;width:18%;height:10%;background:var(--c-30382c)}

.framing-controls{margin:16px 0;padding:12px;border:1px solid var(--c-d9dedb);border-radius:8px}.framing-controls summary{cursor:pointer;font-size:13px}.framing-controls label{margin-top:14px}.framing-controls input[type=range]{padding:0;width:100%}.framing-controls small{color:var(--t-65736d);line-height:1.6}

/* Composition v2: landscape and square use the canvas intrinsic ratio. */
#studio .canvas-wrap{aspect-ratio:8/5}#studio #preview{width:100%;height:auto;display:block}#studio .template-card canvas{height:auto;object-fit:contain;aspect-ratio:auto}
.composition-setup{margin-top:24px;border-top:1px solid var(--c-dde0d8);padding-top:22px}.extra-copy{margin:20px 0;border:1px solid var(--c-dde0d8);padding:12px}.extra-copy summary{font-size:13px;cursor:pointer}.extra-copy label{margin-top:16px}
#studio-detail-canvas{width:min(100%,calc(var(--detail-frame-height,70vh)*var(--output-ratio,1)));height:auto}.studio-detail.actual-size #studio-detail-canvas{height:auto}
#studio .preview-toolbar{flex-wrap:wrap;gap:8px}#apply-direction{margin:12px 0;padding:12px;border:1px solid var(--c-bacbc1)}
/* Compact, discoverable input groups. */
.input-group{border-bottom:1px solid var(--c-dde3da);padding:15px 0;scroll-margin-top:150px}.input-group>summary{cursor:pointer;font-size:14px;font-weight:700;list-style-position:inside}.input-group>summary small{float:right;font-weight:400;color:var(--t-667367);font-size:11px}.input-group>label,.input-group>div>label{margin-top:16px}.input-group .section-label{margin-top:18px}.input-group .composition-setup{border:0;margin:0;padding:0}.input-group .composition-setup .section-label{display:none}.award-card{border:1px solid var(--c-dce2d8);border-radius:8px;margin:15px 0;padding:12px;min-width:0}.award-card legend{padding:0 6px;font-size:12px;font-weight:700}.award-card label{margin:10px 0}.award-card button{margin-top:8px}.input-group .text-button:disabled{opacity:.45;cursor:default}#studio .editor{min-width:0}.input-group[open]>summary{margin-bottom:14px}
@media(max-width:700px){.input-group{scroll-margin-top:145px}}

.input-group{scroll-margin-top:235px}@media(max-width:700px){.input-group{scroll-margin-top:215px}}

#product-form{overflow-anchor:none}

/* Compact product library; shares the existing editor and generation workflow. */
.catalog {padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid var(--c-dedbd4);min-width:0}
.catalog h2 {font-size:16px;margin:0}
.catalog label {display:grid;gap:8px;font-size:12px;margin:12px 0}
.catalog select,#catalog-history {width:100%;max-width:100%;padding:10px;border:1px solid var(--c-d9d5ce);background:var(--c-ffffff);border-radius:8px;color:var(--t-222222)}
.catalog-actions {display:flex;gap:8px;flex-wrap:wrap}
.catalog button,.catalog-photo>button {padding:8px 10px;border:1px solid var(--c-d9d5ce);border-radius:8px;background:var(--c-ffffff);font-size:11px;cursor:pointer}
.catalog button:disabled {opacity:.5;cursor:default}
#catalog-status {font-size:11px;line-height:1.7;color:var(--t-666666);margin:12px 0 0}
.catalog-photos {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.catalog-photo {min-width:0;display:grid;gap:4px}
.catalog-photo-select {padding:4px;border:2px solid transparent;border-radius:8px;background:var(--c-f4f2ed);cursor:pointer;min-width:0}
.catalog-photo-select[aria-pressed=true] {border-color:var(--c-244c3e);background:var(--c-e7eee9)}
.catalog-photo img {width:100%;aspect-ratio:1;object-fit:contain;display:block}
.catalog-photo span {display:block;font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#catalog-history {margin:8px 0 12px}

.adjustment-panel {margin-top:24px;padding:20px;border:1px solid var(--c-d9d5ce);border-radius:12px;background:var(--c-faf9f6)}
.adjustment-panel h3 {margin:0 0 16px;font-size:17px}
.adjustment-panel label {display:grid;gap:8px;font-size:12px;margin:14px 0}
.adjustment-panel textarea,.adjustment-panel select {width:100%;min-width:0;border:1px solid var(--c-d9d5ce);border-radius:8px;padding:10px;background:var(--c-ffffff);color:var(--t-222222);font:inherit;box-sizing:border-box}
.adjustment-panel .button {width:100%}
#adjust-status {font-size:12px;line-height:1.8}
#adjust-log {font-size:11px;margin:12px 0}
#adjust-log pre {max-height:200px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.adjust-comparison {display:grid;grid-template-columns:1fr 1fr;gap:10px}
.adjust-comparison figure {margin:0;min-width:0}
.adjust-comparison img {display:block;width:100%;height:auto;border-radius:6px}
.adjust-comparison figcaption {font-size:11px;color:var(--t-777777);margin-top:6px}

/* One Studio navigation surface across desktop and mobile. */
.studio-section-nav {position:sticky;top:var(--navigation-height,90px);z-index:24;display:flex;gap:4px;align-items:center;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap;padding:8px 4%;background:var(--c-f7f8f2f5);backdrop-filter:blur(12px);border-block:1px solid var(--c-d8dcd3);scrollbar-width:thin;margin-bottom:20px}
body:has(.nav.is-away) .studio-section-nav {top:0}
.studio-section-nav a {flex:0 0 auto;padding:9px 11px;border-radius:20px;font-size:12px;color:var(--t-59645c);text-decoration:none}
.studio-section-nav a:hover,.studio-section-nav a.current {color:var(--t-244c3e);background:var(--c-e5ece4)}
.studio-section-nav a.result-link {background:var(--c-26333a);color:var(--t-ffffff);margin-left:auto}
.studio-section-nav a:focus-visible {outline:2px solid var(--c-384bff);outline-offset:-2px}
#studio [data-region-title] {scroll-margin-top:calc(var(--navigation-height,90px) + var(--studio-section-height,50px) + 16px)}
#studio .generation-mode h2 {font-size:14px;margin:16px 0 0}
#work-versions {display:block;padding:18px 0;border-top:1px solid var(--c-dde3da);margin-top:16px;font-size:12px}
#work-versions select {display:block;width:100%;max-width:100%;margin-top:10px;padding:10px;border:1px solid var(--c-d9d5ce);border-radius:8px;background:var(--c-ffffff);color:var(--t-222222)}
#adjust-log {border-top:1px solid var(--c-dde3da);padding-top:16px;margin-top:16px}
#adjust-log h3 {font-size:12px;font-weight:500}
#studio :is(h2,h3,strong,label)[tabindex="-1"]:focus-visible {outline:2px solid var(--c-384bff);outline-offset:4px}
@media(max-width:760px){#studio{padding-bottom:0}.studio-section-nav{padding:6px 5%;gap:2px;margin-bottom:16px;scrollbar-width:none}.studio-section-nav a{font-size:11px;padding:8px 10px}.studio-section-nav a.result-link{margin-left:0}}
@media(prefers-reduced-motion:reduce){.studio-section-nav{scroll-behavior:auto;transition:none}}

.studio-section-nav a.result-link.current {box-shadow:inset 0 0 0 2px #718793}

.canvas-format-preview{display:flex;align-items:center;gap:14px;margin:12px 0}.canvas-format-frame{width:80px;height:80px;display:grid;place-items:center;flex-shrink:0;background:var(--c-f1f2f3);border-radius:8px}#canvas-format-shape{display:block;border:1.5px solid var(--c-73797d);background:linear-gradient(145deg,var(--c-ffffff),var(--c-d9dfe2))}.canvas-format-preview strong,.canvas-format-preview span,.canvas-format-preview small{display:block}.canvas-format-preview small{font-size:11px;color:var(--t-72777a);margin-top:4px}#canvas-format-pixels{font-size:12px;margin-top:4px}

/* Keep the preview in view while filling the long form (desktop/tablet). The column stretches to the form's
   row and only its inner stage is sticky, so the preview stays inside its own column and never covers the
   history / log row below. The stage scrolls on its own when taller than the window (export, adjustment). */
@media(min-width:761px){
  #studio #preview-panel{align-self:stretch}
  #studio .workspace-stage{position:sticky;top:calc(var(--navigation-height,90px) + var(--studio-section-height,56px) + 12px);max-height:calc(100vh - var(--navigation-height,90px) - var(--studio-section-height,56px) - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable;transition:top .22s ease,max-height .22s ease}
  body:has(.nav.is-away) #studio .workspace-stage{top:calc(var(--studio-section-height,56px) + 12px);max-height:calc(100vh - var(--studio-section-height,56px) - 24px)}
}
@media(min-width:761px) and (prefers-reduced-motion:reduce){#studio .workspace-stage{transition:none}}
/* Fold or unfold every input group at once. */
#studio .field-help.has-fold-all{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
#studio .form-fold-all{flex:none;font-size:11px;color:var(--t-4858a3);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:32px}
/* Shown only when the server has AI generation switched off. */
#studio .generation-off-note{display:grid;gap:4px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--c-d9c9a3);border-left:3px solid var(--c-c58b1c);background:var(--c-fbf6ea);font-size:12px;line-height:1.7;color:var(--t-4a3d22)}
#studio .generation-off-note strong{font-weight:600;color:var(--t-3a2f17)}
/* Owner-only generation switch (generation-switch.js; the server offers it to this machine's requests only). */
#studio .generation-switch{display:grid;gap:8px;margin-top:8px;padding-top:10px;border-top:1px dashed var(--c-d9c9a3)}
#studio .generation-switch small{font-size:11px;line-height:1.7;color:var(--t-4a3d22)}
#studio .generation-switch-agree{display:flex!important;align-items:center;gap:8px;margin:0!important;font-size:12px!important;color:var(--t-3a2f17)!important;cursor:pointer}
#studio .generation-switch-agree input{width:16px!important;height:16px;margin:0!important;accent-color:var(--c-384bff)}
#studio .generation-switch-on{justify-self:start;min-height:36px;padding:0 14px;border:1px solid var(--c-242d28);background:transparent;font:inherit;font-size:12px;color:var(--t-242d28);cursor:pointer;transition:background-color .2s,color .2s}
#studio .generation-switch-on:hover:not(:disabled){background:var(--c-242d28);color:var(--t-ffffff)}
#studio .generation-switch-on:disabled{opacity:.45;cursor:default}
#studio .generation-switch-warning{color:var(--t-873f3b)!important}
#studio .generation-chip{display:inline-flex;align-items:center;gap:8px;min-height:30px;margin:0 0 8px;padding:0 6px 0 12px;border:1px solid var(--c-d9c9a3);border-radius:999px;background:var(--c-fbf6ea);font:inherit;font-size:11px;color:var(--t-4a3d22);cursor:pointer;transition:border-color .2s}
#studio .generation-chip:hover{border-color:var(--c-c58b1c)}
#studio .generation-chip-dot{width:6px;height:6px;border-radius:50%;background:var(--c-c58b1c)}
#studio .generation-chip-action{padding:3px 9px;border-radius:999px;background:var(--c-242d28);color:var(--t-ffffff)}
#studio .generation-chip.is-on{border-color:var(--c-c8cfee);background:var(--c-f5f6ff);color:var(--t-303e67)}
#studio .generation-chip.is-on .generation-chip-dot{background:var(--c-384bff)}
#studio .generation-switch.is-called{animation:switch-call 1.2s ease}
@keyframes switch-call{20%,60%{box-shadow:0 0 0 3px #c58b1c88}}
@media(prefers-reduced-motion:reduce){#studio .generation-switch.is-called{animation:none}}
/* Style presets inside ご希望 (style-picker.js): one row of chips + a single preview line. */
#studio .style-presets{margin:14px 0 2px;padding:12px 14px 12px;border:1px solid var(--c-dde3da);background:var(--c-fafaf6)}
#studio .style-presets-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:12px}
#studio .style-presets-head strong{font-weight:600;letter-spacing:.02em;white-space:nowrap}
#studio .style-presets-head small{font-size:10px;color:var(--t-667367);white-space:nowrap}
#studio .style-presets-head .style-presets-gallery{margin-left:auto;font-size:11px;white-space:nowrap}
#studio .style-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#studio .style-chip{display:inline-flex;align-items:center;gap:0;height:32px;padding:0 13px;border:1px solid var(--c-c9cfc2);border-radius:999px;background:var(--c-ffffff);font:inherit;font-size:12px;color:var(--t-354d30);cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,opacity .2s,translate .2s}
#studio .style-chip:hover{border-color:var(--c-384bff);color:var(--t-384bff);translate:0 -1px}
#studio .style-chip:focus-visible{outline:2px solid var(--c-384bff);outline-offset:2px}
#studio .style-chip-mark{display:inline-block;width:0;overflow:hidden;transition:width .2s}
#studio .style-chip[aria-pressed="true"]{background:var(--c-242d28);border-color:var(--c-242d28);color:var(--t-ffffff)}
#studio .style-chip[aria-pressed="true"] .style-chip-mark{width:14px}
#studio .style-chip[aria-pressed="true"] .style-chip-mark::before{content:"✓"}
#studio .style-chip.is-muted{opacity:.45}
#studio .style-chip.is-popping{animation:chip-pop .38s cubic-bezier(.2,.7,.1,1)}
#studio .style-chip.is-refused{animation:chip-refuse .32s ease}
@keyframes chip-pop{40%{scale:1.07}}
@keyframes chip-refuse{25%{translate:-3px 0}75%{translate:3px 0}}
#studio .style-peek{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;min-height:44px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--c-d8ddd4)}
#studio .style-peek.is-empty{grid-template-columns:minmax(0,1fr)}
#studio .style-peek.is-changing{animation:peek-in .3s ease}
@keyframes peek-in{from{opacity:.2;translate:0 3px}}
#studio .style-peek-works{display:flex;align-items:center;gap:4px}
#studio .style-peek-works:empty{display:none}
#studio .style-peek-works a{display:block;line-height:0;border:1px solid var(--c-e1e5dd);transition:border-color .2s,translate .2s}
#studio .style-peek-works a:hover,#studio .style-peek-works a:focus-visible{border-color:var(--c-384bff);translate:0 -2px}
#studio .style-peek-works img{width:40px;height:40px;object-fit:cover}
#studio .style-peek-text{display:grid;gap:1px;min-width:0}
#studio .style-peek-label{font-size:12px;font-weight:600}
#studio .style-peek-summary,#studio .style-peek-help{font-size:11px;line-height:1.6;color:var(--t-667367)}
#studio .style-peek:not(.is-empty) .style-peek-help,#studio .style-peek.is-empty .style-peek-label,#studio .style-peek.is-empty .style-peek-summary{display:none}
#studio .style-preset-none{font-size:10px;line-height:1.4;color:var(--t-8b948a);max-width:5em}
#studio .style-presets-hint{margin:6px 0 0;font-size:11px;color:var(--t-4858a3)}
#studio .style-presets-hint:empty{display:none}
#studio #input-brief>.field-help{margin:10px 0 0;font-size:11px;line-height:1.7}

/* Numbered steps: every input group reads as one step of the job, with an "entered" mark (studio-steps.js). */
#product-form{counter-reset:step}
#product-form .input-group{counter-increment:step;padding:0;border-bottom:1px solid var(--c-dde3da)}
#product-form .input-group>summary{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;margin:0;padding:12px 26px 12px 0;list-style:none;font-size:14px;font-weight:600;letter-spacing:.01em;cursor:pointer}
#product-form .input-group>summary::-webkit-details-marker{display:none}
#product-form .input-group>summary::before{content:counter(step,decimal-leading-zero);display:grid;place-items:center;flex:none;width:28px;height:28px;border:1px solid var(--c-c9cfc2);border-radius:50%;font:500 10px/1 monospace;letter-spacing:0;color:var(--t-596651);transition:background-color .25s,border-color .25s,color .25s}
#product-form .input-group[open]>summary::before{border-color:var(--c-242d28);color:var(--t-242d28)}
#product-form .input-group.is-filled>summary::before{background:var(--c-384bff);border-color:var(--c-384bff);color:var(--t-ffffff)}
#product-form .input-group>summary::after{content:"";position:absolute;right:6px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1.5px solid var(--c-9aa293);border-bottom:1.5px solid var(--c-9aa293);rotate:45deg;transition:rotate .25s,margin-top .25s}
#product-form .input-group[open]>summary::after{rotate:225deg;margin-top:-2px}
#product-form .input-group>summary>small{float:none;order:3;margin-left:auto;font-weight:400}
#product-form .input-group>summary .step-done{display:none;order:3;margin-left:auto;font-size:11px;font-weight:500;color:var(--t-4858a3)}
#product-form .input-group.is-filled>summary .step-done{display:inline}
#product-form .input-group.is-filled>summary>small{display:none}
#product-form .input-group[open]{padding-bottom:18px}
#product-form .input-group[open]>summary{margin-bottom:2px}
#product-form .input-group>summary:hover::before{border-color:var(--c-384bff)}
#product-form .input-group[open]>:not(summary){animation:step-reveal .35s cubic-bezier(.2,.7,.1,1)}
@keyframes step-reveal{from{opacity:0;translate:0 -4px}}
/* The final step: ratio, mode and the generate button sit on their own card. */
#studio .generation-mode{margin:22px 0 0;padding:16px 16px 4px;border:1px solid var(--c-dde3da);background:var(--c-fafaf6)}
#studio .generation-mode>h2:first-child{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-size:14px;font-weight:600}
#studio .generation-mode>h2:first-child::before{content:"✳";display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--c-242d28);color:var(--t-ffffff);font-size:12px}
#studio .generate{margin-top:16px}
@media(min-width:761px){
 /* The primary action stays within reach while filling the long form. */
 #studio #generate{position:sticky;bottom:16px;z-index:6;box-shadow:0 16px 30px -16px #384bff99}
 /* A short fade behind the floating button keeps the fields it passes over readable. */
 #studio #generate::before{content:"";position:absolute;left:-14px;right:-14px;bottom:100%;height:22px;background:linear-gradient(var(--c-ffffff00),var(--c-ffffff));pointer-events:none}
 html:has(#studio:not([hidden])){scroll-padding-bottom:96px}
}
@media(min-width:1151px){#studio .studio-layout{grid-template-columns:minmax(360px,390px) minmax(0,820px)}}
@media(min-width:1550px){#studio .studio-layout{grid-template-columns:410px minmax(0,860px)}}
@media(prefers-reduced-motion:reduce){
 #studio .style-chip,#studio .style-chip-mark,#product-form .input-group>summary::after{transition:none}
 #studio .style-chip.is-popping,#studio .style-chip.is-refused,#studio .style-peek.is-changing,#product-form .input-group[open]>:not(summary){animation:none}
}

/* Placement check (rule-based, no AI): verdict chip, checklist and advice under the export bar. */
#studio .placement-check{margin:14px 0 0;border:1px solid var(--c-c9cfc2);background:var(--c-fafaf7);font-size:12px;line-height:1.7;color:var(--t-26302e)}
#studio .placement-check>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;cursor:pointer;list-style:none}
#studio .placement-check>summary::-webkit-details-marker{display:none}
#studio .placement-check>summary strong{font-size:13px;font-weight:600}
#studio .placement-check>summary::after{content:'+';margin-left:4px;color:var(--t-59626d)}
#studio .placement-check[open]>summary::after{content:'−'}
#studio .placement-verdict{margin-left:auto;padding:2px 10px;border:1px solid var(--c-c9cfc2);border-radius:999px;font-size:11px;color:var(--t-59626d)}
#studio .placement-verdict[data-level=ok],#studio .placement-advice[data-level=ok]{border-color:var(--c-bacbc1);background:var(--c-e5ece4);color:var(--t-244c3e)}
#studio .placement-verdict[data-level=warn],#studio .placement-advice[data-level=warn]{border-color:var(--c-d9c9a3);background:var(--c-fbf6ea);color:var(--t-4a3d22)}
#studio .placement-verdict[data-level=ng],#studio .placement-advice[data-level=ng]{border-color:var(--c-a34642);background:var(--c-fff1ed);color:var(--t-873f3b)}
#studio .placement-target{display:grid;gap:6px;padding:0 14px;font-size:12px;color:var(--t-59626d)}
#studio .placement-target select{width:100%;min-height:40px;padding:0 12px;border:1px solid var(--c-c9cfc2);background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:13px}
#studio .placement-list{list-style:none;margin:12px 0 0;padding:0 14px;display:grid;gap:8px}
#studio .placement-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start}
#studio .placement-mark{display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--c-c9cfc2);border-radius:50%;font-size:11px;font-weight:700;line-height:1;color:var(--t-59626d)}
#studio .placement-list .is-ok .placement-mark{border-color:var(--c-bacbc1);background:var(--c-e5ece4);color:var(--t-244c3e)}
#studio .placement-list .is-warn .placement-mark{border-color:var(--c-c58b1c);background:var(--c-fbf6ea);color:var(--t-4a3d22)}
#studio .placement-list .is-ng .placement-mark{border-color:var(--c-a34642);background:var(--c-fff1ed);color:var(--t-873f3b)}
#studio .placement-list .is-check .placement-mark{border-radius:3px}
#studio .placement-advice{margin:12px 14px 0;padding:9px 12px;border:1px solid var(--c-c9cfc2);border-left-width:3px}
#studio .placement-check .field-help{margin:10px 14px 14px;font-size:11px;color:var(--t-69736d)}
#studio .placement-check+.claim-check{margin-top:8px}
#studio .claim-check .placement-list li>span:last-child{display:grid;gap:2px}
#studio .claim-words{font-weight:600;color:var(--t-26302e);overflow-wrap:anywhere}
#studio .claim-hint{font-size:11px;line-height:1.6;color:var(--t-69736d)}
/* 画像の文字チェック (text-check-panel.js): card right under the finished image; existing theme colours only. */
#studio .text-check{margin:14px 0 0;padding:14px;border:1px solid var(--c-c9cfc2);border-top:2px solid var(--c-384bff);background:var(--c-ffffff);font-size:12px;line-height:1.7;color:var(--t-26302e)}
#studio .text-check-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
#studio .text-check-head h3{margin:0;font-size:14px;font-weight:600}
#studio .text-check-lead{margin:6px 0 0;color:var(--t-59626d)}
#studio .text-check-local{display:grid;gap:2px;margin:8px 0 0;padding:9px 12px;border:1px solid var(--c-bacbc1);background:var(--c-e5ece4);color:var(--t-244c3e)}
#studio .text-check-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:10px}
#studio .text-check-run{min-height:40px;padding:0 18px;border:1px solid var(--c-242d28);background:var(--c-242d28);color:var(--t-ffffff);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
#studio .text-check-run:hover:not(:disabled){border-color:var(--c-384bff);background:var(--c-384bff)}
#studio .text-check-run:disabled{opacity:.45;cursor:default}
#studio .text-check-run:focus-visible{outline:2px solid var(--c-384bff);outline-offset:3px}
#studio .text-check-remaining{font-size:11px;color:var(--t-69736d)}
#studio .text-check-off{margin:10px 0 0;padding:8px 10px;border:1px solid var(--c-d9c9a3);background:var(--c-fbf6ea);color:var(--t-4a3d22)}
#studio .text-check-result{margin-top:12px}
#studio .text-check-when{margin:0 0 8px;font-size:11px;color:var(--t-69736d)}
#studio .text-check .placement-list{padding:0}
#studio .text-check-body{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-width:0}
#studio .text-check-field{font-size:11px;color:var(--t-69736d)}
#studio .text-check-value{font-weight:600;overflow-wrap:anywhere}
#studio .text-check-status{font-size:11px}
#studio .is-ng .text-check-status{color:var(--t-873f3b)}
#studio .is-warn .text-check-status{color:var(--t-4a3d22)}
#studio .text-check-found-label,#studio .text-check-note{font-size:11px;color:var(--t-59626d)}
#studio .text-check-found{padding:0 4px;background:var(--c-fff1ed);color:var(--t-873f3b);overflow-wrap:anywhere}
#studio .text-check-group{margin-top:12px}
#studio .text-check-sub{margin:0 0 6px;font-size:12px;font-weight:600}
#studio .text-check-read{margin-top:12px;border-top:1px solid var(--c-c9cfc2);padding-top:8px}
#studio .text-check-read summary{cursor:pointer;font-size:12px;color:var(--t-59626d)}
#studio .text-check-read ol{margin:8px 0 0;padding-left:20px;display:grid;gap:4px}
#studio .text-check-tag{margin-left:8px;padding:0 6px;border:1px solid var(--c-c9cfc2);font-size:10px;color:var(--t-69736d)}
#studio .text-check .field-help{margin:12px 0 0;font-size:11px;color:var(--t-69736d)}
#studio .text-check+.placement-check{margin-top:8px}
#studio .history-check[data-level=ok]{color:var(--t-244c3e)}
#studio .history-check[data-level=warn]{color:var(--t-4a3d22)}
#studio .history-check[data-level=ng]{color:var(--t-873f3b)}
/* 商品ページの説明文 (page-copy.js): same frame as the checks above, existing theme colours only. */
#studio .claim-check+.page-copy{margin-top:8px}
#studio .page-copy>.field-help:first-of-type{margin-top:0}
#studio .page-copy-text{display:grid;gap:6px;margin:0 14px;font-size:12px;color:var(--t-59626d)}
#studio .page-copy-text textarea{width:100%;min-height:132px;padding:10px 12px;border:1px solid var(--c-c9cfc2);background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:13px;line-height:1.75;resize:vertical}
#studio .page-copy-count{margin:4px 14px 0;text-align:right;font-size:11px;color:var(--t-69736d)}
#studio .page-copy-facts{margin:10px 14px 0;padding:10px 12px;border:1px dashed var(--c-c9cfc2);background:var(--c-ffffff)}
#studio .page-copy-facts-head{margin:0 0 4px;font-size:11px;color:var(--t-69736d)}
#studio .page-copy-facts pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:12px;color:var(--t-26302e)}
#studio .page-copy-facts-empty{margin:0;font-size:12px;color:var(--t-69736d)}
#studio .page-copy-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 14px 0}
#studio .page-copy-actions button{min-height:40px;padding:0 18px;border:1px solid var(--c-c9cfc2);background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
#studio .page-copy-actions button:disabled{opacity:.5;cursor:default}
#studio .page-copy-status{font-size:12px;color:var(--t-244c3e)}
#studio .assistant{display:grid;gap:12px;margin:14px 0 4px;padding:14px;border:1px solid var(--c-c9cfc2);background:var(--c-fafaf7);font-size:13px;line-height:1.7;color:var(--t-26302e)}
#studio .assistant[hidden]{display:none}
#studio .editor>.assistant:first-child{margin-top:0;border-top:3px solid var(--c-384bff)}
#studio .assistant [hidden]{display:none!important}
#studio .assistant-lead{margin:0;font-size:12px;line-height:1.7;color:var(--t-59626d)}
#studio .assistant-photo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:8px;border:1px dashed var(--c-c9cfc2);background:var(--c-ffffff)}
#studio .assistant-photo img,#studio .assistant-photo-empty{flex:none;width:48px;height:48px;border:1px solid var(--c-dde3da)}
#studio .assistant-photo img{object-fit:cover}
#studio .assistant-photo-empty{display:grid;place-items:center;border-style:dashed;color:var(--t-59626d);font-size:18px}
#studio .assistant-photo-text{flex:1;min-width:110px;display:grid;font-size:12px;color:var(--t-59626d)}
#studio .assistant-photo-text b{font-size:13px;font-weight:600;color:var(--t-26302e);overflow-wrap:anywhere}
#studio .assistant-photo-actions{display:flex;flex-wrap:wrap;gap:4px 12px}
#studio .assistant-review{justify-self:start;font-size:12px}
#studio .manual-input{margin-top:10px;border-top:1px solid var(--c-c9cfc2)}
#studio .manual-input>summary{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:16px 26px 12px 0;list-style:none;cursor:pointer}
#studio .manual-input>summary::-webkit-details-marker{display:none}
#studio .manual-title{font-size:15px;font-weight:600;color:var(--t-26302e)}
#studio .manual-input>summary small{font-size:11px;color:var(--t-59626d)}
#studio .manual-input>summary::after{content:"";position:absolute;right:6px;top:22px;width:8px;height:8px;border-right:1.5px solid var(--c-9aa293);border-bottom:1.5px solid var(--c-9aa293);rotate:45deg;transition:rotate .25s,top .25s}
#studio .manual-input[open]>summary::after{rotate:225deg;top:26px}
#studio .manual-input>summary:hover .manual-title{color:var(--t-283bc7)}
@media(prefers-reduced-motion:reduce){#studio .manual-input>summary::after{transition:none}}
#studio .assistant-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
#studio .assistant-head h2{margin:0;font-size:14px;font-weight:600}
#studio .assistant-remaining{padding:2px 10px;border:1px solid var(--c-c9cfc2);border-radius:999px;font-size:11px;color:var(--t-59626d);white-space:nowrap}
#studio .assistant-remaining b{font-weight:600;color:var(--t-26302e)}
#studio .assistant-off{margin:0;padding:9px 12px;border:1px solid var(--c-d9c9a3);border-left-width:3px;background:var(--c-fbf6ea);color:var(--t-4a3d22);font-size:12px}
#studio .assistant-thread{display:grid;gap:8px}
#studio .assistant-mine{justify-self:end;max-width:88%;margin:0;padding:7px 12px;border-radius:12px 12px 2px 12px;background:var(--c-e9edff);color:var(--t-283bc7);white-space:pre-wrap}
#studio .assistant-reply{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--c-dde3da);border-radius:2px 12px 12px 12px;background:var(--c-ffffff)}
#studio .assistant-reply p{margin:0}
#studio .assistant-filled{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--t-59626d)}
#studio .assistant-chip{padding:1px 8px;border:1px solid var(--c-bacbc1);border-radius:999px;background:var(--c-e5ece4);color:var(--t-244c3e);font-size:11px}
#studio .assistant-suggest{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:start;padding-top:6px;border-top:1px dashed var(--c-dde3da);font-size:12px}
#studio .assistant-suggest>span:first-child{color:var(--t-59626d)}
#studio .assistant-suggest>span:nth-child(2){white-space:pre-wrap;overflow-wrap:anywhere}
#studio .assistant-removed{font-size:11px;color:var(--t-69736d)}
#studio .assistant-questions{display:grid;gap:10px;padding:12px;border:1px solid var(--c-dde3da);background:var(--c-ffffff)}
#studio .assistant-questions[hidden]{display:none}
#studio .assistant-ask{margin:0;font-size:12px;font-weight:600}
#studio .assistant-questions label,#studio .assistant-input,#studio .assistant-price{display:grid;gap:4px;font-size:12px;color:var(--t-59626d)}
#studio .assistant-questions small{font-size:11px;color:var(--t-69736d)}
#studio .assistant-choice{display:flex;gap:6px}
#studio .assistant-choice button{min-height:34px;padding:0 14px;border:1px solid var(--c-c9cfc2);background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:12px;cursor:pointer}
#studio .assistant-choice button[aria-pressed=true]{border-color:var(--c-384bff);background:var(--c-f5f6ff);color:var(--t-283bc7)}
#studio .assistant input,#studio .assistant textarea{width:100%;min-width:0;box-sizing:border-box}
#studio .assistant-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
#studio .assistant-input>span{color:var(--t-59626d)}
#studio .assistant.is-off :is(.assistant-photo,.assistant-thread,.assistant-questions,.assistant-input,.assistant-actions,.field-help){display:none}
#studio .adjustment-panel .button.primary{background:var(--c-111111);border-color:var(--c-111111);color:var(--t-ffffff)}
#studio .assistant .button.primary{background:var(--c-111111);border-color:var(--c-111111);color:var(--t-ffffff)}
#studio .assistant .field-help{margin:0;font-size:11px;color:var(--t-69736d)}
#studio .ai-mark{display:inline-block;margin:0 0 0 6px;padding:0 6px;border:1px solid var(--c-384bff);border-radius:999px;font-size:10px;font-weight:500;line-height:16px;color:var(--t-283bc7);vertical-align:1px}
#studio .ai-mark.is-check{border-color:var(--c-c58b1c);background:var(--c-fbf6ea);color:var(--t-4a3d22)}
/* Studio steps (studio-flow.js): ① 素材 → ② 仕上げる → ③ 確かめる・直す. One step open; others fold to a summary.
   Motion: transform/opacity only, each ≤400ms except the guide (3 slow breaths, then still); none with reduced motion. */
#studio .flow-off{display:none!important}
#studio .flow-gone{display:none!important}
#studio .flow-manual{border:0;padding:0;margin:0}
/* the step header carries the number; the old 01–07 circles would compete with it */
#product-form .flow-manual .input-group>summary::before{display:none}
#studio .flow-head{position:relative;width:100%;display:flex;align-items:center;gap:12px;margin:10px 0 0;padding:14px 16px;border:1px solid var(--c-c9cfc2);background:var(--c-ffffff);font:inherit;text-align:left;color:var(--t-26302e);cursor:pointer;overflow:hidden}
#studio .editor>.flow-head:first-child{margin-top:0}
#studio .flow-head:hover{border-color:var(--c-384bff)}
#studio .flow-head:focus-visible{outline:2px solid var(--c-384bff);outline-offset:2px}
#studio .flow-head.is-open{border-color:var(--c-384bff);border-bottom-width:2px;cursor:default}
#studio .flow-head.is-later{opacity:.6}
#studio .flow-n{position:relative;display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--c-c9cfc2);font:700 12px/1 Arial,sans-serif;color:var(--t-59626d);background:var(--c-ffffff)}
#studio .flow-head.is-open .flow-n{background:var(--c-384bff);border-color:var(--c-384bff);color:var(--t-ffffff)}
#studio .flow-head.is-done .flow-n{background:var(--c-242d28);border-color:var(--c-242d28);color:var(--t-ffffff)}
#studio .flow-tick{display:none}
#studio .flow-head.is-done .flow-n b{display:none}
#studio .flow-head.is-done .flow-tick{display:block}
#studio .flow-head.is-ticked .flow-tick{animation:flow-tick .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes flow-tick{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
#studio .flow-title{flex:none;font-size:15px;font-weight:600}
#studio .flow-sum{flex:1;min-width:0;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;color:var(--t-59626d)}
#studio .flow-sum>span{display:inline}
#studio .flow-sum>.flow-chip{display:inline-flex;margin-right:4px}
#studio .flow-sum>span+span::before,#studio .flow-status>.flow-chip+.flow-chip{margin-left:0}
#studio .flow-sum>span:not(.flow-chip)+span:not(.flow-chip)::before{content:'・'}
#studio .flow-head.is-open .flow-sum{display:none}
#studio .flow-change{flex:none;font-size:12px;color:var(--t-384bff);text-decoration:underline;display:none}
#studio .flow-head.is-done .flow-change{display:inline}
#studio .flow-missing{color:var(--t-69736d)}
/* next-step cue: the header tints once */
#studio .flow-head::after{content:'';position:absolute;inset:0;background:var(--c-eef1ff);opacity:0;pointer-events:none}
#studio .flow-head.is-cue::after{animation:flow-cue .4s ease-out both}
@keyframes flow-cue{40%{opacity:1}100%{opacity:0}}
#studio .flow-head>*{position:relative;z-index:1}
/* folded rows inside step ① */
#studio .flow-row,#studio .flow-more{margin:10px 0 0;border:1px solid var(--c-c9cfc2);background:var(--c-fafaf7)}
#studio .flow-row>summary,#studio .flow-more>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;list-style:none;font-size:12px}
#studio .flow-row>summary::-webkit-details-marker,#studio .flow-more>summary::-webkit-details-marker{display:none}
#studio .flow-row>summary::after,#studio .flow-more>summary::after{content:'＋';color:var(--t-59626d)}
#studio .flow-row[open]>summary::after,#studio .flow-more[open]>summary::after{content:'－'}
#studio .flow-row-label{font-weight:600;color:var(--t-26302e)}
#studio .flow-row-value{margin-left:auto;color:var(--t-59626d);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#studio .flow-row[open]>:not(summary),#studio .flow-more[open]>:not(summary){margin:0 14px 14px}
#studio .flow-row .assistant{margin:0;border:0;box-shadow:none}
/* ① next */
#studio .flow-next-row{display:grid;gap:6px;margin:14px 0 4px}
#studio .flow-next{position:relative;overflow:hidden;width:100%}
/* every step's main button uses the same accent as 「この内容で仕上げる」 */
#studio .flow-next,#studio .flow-download{background:var(--c-384bff);border-color:var(--c-384bff);color:var(--t-ffffff)}
#studio .flow-next:disabled{opacity:.45;cursor:default}
#studio .flow-hint{margin:0;text-align:center;font-size:11px;color:var(--t-69736d)}
/* one light sheen when a primary button becomes usable */
#studio .flow-sheen{position:relative;overflow:hidden}
#studio .flow-sheen::after{content:'';position:absolute;top:0;bottom:0;left:-30%;width:24%;background:linear-gradient(90deg,var(--c-ffffff00),var(--c-ffffff),var(--c-ffffff00));opacity:.45;transform:skewX(-18deg);animation:flow-sheen .4s ease-out both;pointer-events:none}
@keyframes flow-sheen{to{transform:skewX(-18deg) translateX(700%)}}
/* guide: one target at a time, three slow breaths then still */
#studio .flow-target{position:relative}
#studio .flow-here{position:absolute;top:8px;right:10px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border-radius:999px;background:var(--c-384bff);color:var(--t-ffffff);font-size:11px;line-height:18px;pointer-events:none}
#studio .flow-here::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--c-ffffff)}
#studio .flow-ring{position:absolute;z-index:2;border:2px solid var(--c-384bff);opacity:0;pointer-events:none}
#studio .flow-ring.is-breathing{animation:flow-breathe 1.6s ease-in-out 3 both}
@keyframes flow-breathe{0%,100%{opacity:0}50%{opacity:.7}}
/* ③ */
#studio .flow-result{display:grid;gap:12px;margin:0;padding:14px 16px 16px;border:1px solid var(--c-384bff);border-top:0;background:var(--c-ffffff)}
#studio .flow-status{display:flex;flex-wrap:wrap;gap:6px;margin:0;font-size:12px}
#studio .flow-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border:1px solid var(--c-c9cfc2);border-radius:999px;font-size:12px}
#studio .flow-chip-label{color:var(--t-59626d)}
#studio .flow-chip[data-level=ok]{border-color:var(--c-bacbc1);background:var(--c-e5ece4);color:var(--t-244c3e)}
#studio .flow-chip[data-level=warn]{border-color:var(--c-d9c9a3);background:var(--c-fbf6ea);color:var(--t-4a3d22)}
#studio .flow-chip[data-level=ng]{border-color:var(--c-a34642);background:var(--c-fff1ed);color:var(--t-873f3b)}
#studio .flow-head .flow-chip{padding:0 7px;font-size:11px}
#studio .flow-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
#studio .flow-download{flex:1 1 100%}
#studio .flow-download:disabled{opacity:.45;cursor:default}
@media (prefers-reduced-motion:reduce){#studio .flow-head::after,#studio .flow-sheen::after,#studio .flow-ring,#studio .flow-tick{animation:none!important}#studio .flow-ring{opacity:.4}}

/* Quiet mode with the steps (studio-flow.js adds #studio.flow-quiet): each thing is said once. Hidden, not removed,
   so nothing else that reads these elements breaks. */
#studio.flow-quiet .studio-title .mode-label,#studio.flow-quiet .studio-title .language-note,
#studio.flow-quiet #input-photo .section-label h2,#studio.flow-quiet #input-photo>p.field-help,
#studio.flow-quiet #input-brief>p.field-help,#studio.flow-quiet #studio-generate>p.field-help,#studio.flow-quiet #mode-description,
#studio.flow-quiet #empty-preview .empty-actions,#studio.flow-quiet #save-state,
#studio.flow-quiet #studio-adjust>p.field-help:not(:last-of-type),#studio.flow-quiet .flow-quiet-hide{display:none!important}
#studio.flow-quiet #input-photo .section-label{justify-content:flex-end;position:relative;z-index:1;height:0;margin:0;overflow:visible}
#studio.flow-quiet #input-photo .section-label #sample-button{position:absolute;right:0;top:4px}
#studio.flow-quiet #input-brief>label>small,#studio.flow-quiet #input-basic label>small{display:none}
/* a long ご希望 is clamped in the recap (the full text is one 変更 away) */
#studio .flow-recap dd.is-long{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
/* one foldable line for "generation is off" in ② */
/* ③ 入力した内容 */
#studio .flow-recap{display:grid;gap:10px;padding:12px 14px;border:1px solid var(--c-c9cfc2);background:var(--c-fafaf7)}
#studio .flow-recap-title{margin:0;font-size:13px;font-weight:600}
#studio .flow-recap-group+.flow-recap-group{padding-top:10px;border-top:1px solid var(--c-c9cfc2)}
#studio .flow-recap-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;font-size:12px;font-weight:600;color:var(--t-59626d)}
#studio .flow-recap dl{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:4px 10px;margin:0;font-size:12px;line-height:1.6}
#studio .flow-recap dt{color:var(--t-69736d)}
#studio .flow-recap dd{margin:0;color:var(--t-26302e);overflow-wrap:anywhere;white-space:pre-line}

/* サイズ展開 (public/size-set-panel.js): compact choice, an always-visible list of chosen sites, one card per ratio. */
#studio .flow-sizes{margin-top:12px}
#studio .flow-sizes[open]>.sizes-body{display:grid;gap:10px}
#studio .sizes-presets{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#studio .sizes-preset{padding:4px 11px;border:1px solid var(--c-c9cfc2);border-radius:999px;background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:12px;cursor:pointer}
#studio .sizes-preset[aria-pressed=true]{border-color:var(--c-384bff);background:var(--c-eef1ff);color:var(--t-384bff)}
#studio .sizes-preset:disabled{opacity:.45;cursor:default}
#studio .sizes-clear{margin-left:auto;font-size:12px}
#studio .sizes-groups{display:grid;gap:0;border-bottom:1px solid var(--c-c9cfc2)}
#studio .sizes-group{margin:0;border-top:1px solid var(--c-c9cfc2)}
#studio .sizes-group>summary{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:11px;font-weight:600;color:var(--t-59626d);list-style:none;cursor:pointer}
#studio .sizes-group>summary::-webkit-details-marker{display:none}
#studio .sizes-group>summary::after{content:'＋';margin-left:auto;font-weight:400}
#studio .sizes-group[open]>summary::after{content:'－'}
#studio .sizes-group-count{font-weight:400;color:var(--t-69736d);font-variant-numeric:tabular-nums}
#studio .sizes-group-count.is-some{color:var(--t-384bff);font-weight:600}
#studio .sizes-group-items{display:flex;flex-wrap:wrap;gap:5px;padding:0 0 8px}

#studio .sizes-site{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:3px 9px 3px 6px;border:1px solid var(--c-c9cfc2);border-radius:999px;background:var(--c-ffffff);font-size:12px;line-height:1.4;cursor:pointer}
#studio .sizes-site:has(input:checked){border-color:var(--c-384bff);background:var(--c-eef1ff)}
#studio .sizes-site.is-off{opacity:.5;cursor:not-allowed}
#studio .sizes-site input{margin:0;flex:none;width:13px;height:13px}
#studio .sizes-site .sizes-name{min-width:0;color:var(--t-26302e)}
#studio .sizes-meta{display:inline-flex;gap:4px;font-size:10px;color:var(--t-69736d)}
#studio .sizes-ratio{font-variant-numeric:tabular-nums}
#studio .sizes-low{color:var(--t-4a3d22)}
#studio .sizes-picked{margin:0;padding:8px 10px;border-left:3px solid var(--c-384bff);background:var(--c-ffffff);font-size:12px;line-height:1.7}
#studio .sizes-picked>b{margin-right:8px;color:var(--t-59626d);font-weight:600}
#studio .sizes-picked-name{color:var(--t-26302e)}
#studio .sizes-sep{color:var(--t-69736d)}
#studio .sizes-none{color:var(--t-69736d)}
#studio .sizes-plan{display:grid;gap:3px;margin:0;padding:0;list-style:none;font-size:12px}
#studio .sizes-plan:empty{display:none}
#studio .sizes-plan li{display:grid;grid-template-columns:3.6em minmax(0,1fr) auto;gap:8px;align-items:baseline}
#studio .sizes-plan b{font-variant-numeric:tabular-nums}
#studio .sizes-plan li[data-source=ai] .sizes-plan-source{color:var(--t-384bff);font-weight:600}
#studio .sizes-plan-count{color:var(--t-69736d)}
#studio .sizes-cost{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:12px;font-weight:600;color:var(--t-26302e)}
#studio .sizes-left{font-weight:400;color:var(--t-59626d)}
#studio .sizes-why,#studio .sizes-status{margin:0;font-size:12px;color:var(--t-59626d)}
#studio .sizes-why{color:var(--t-4a3d22)}
#studio .sizes-status:empty{display:none}
#studio .sizes-go{justify-self:start}
#studio .sizes-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 12px;border:1px solid var(--c-d9c9a3);background:var(--c-fbf6ea)}
#studio .sizes-confirm-text{flex-basis:100%;margin:0;font-size:12px;color:var(--t-4a3d22)}
#studio .sizes-note{margin:0;font-size:11px;line-height:1.6;color:var(--t-69736d)}
#studio .sizes-results{display:grid;gap:8px}
#studio .sizes-results:empty{display:none}
#studio .sizes-card{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:6px 10px;padding:10px;border:1px solid var(--c-c9cfc2);background:var(--c-ffffff)}
#studio .sizes-card[data-state=failed]{border-color:var(--c-a34642);background:var(--c-fff1ed)}
#studio .sizes-card[data-state=skipped],#studio .sizes-card[data-state=waiting]{opacity:.65}
#studio .sizes-thumb{width:40px;max-height:50px;background:var(--c-fafaf7);border:1px solid var(--c-c9cfc2);overflow:hidden}
#studio .sizes-thumb img{display:block;width:100%;height:100%;object-fit:cover}
#studio .sizes-card-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:13px}
#studio .sizes-px,#studio .sizes-sec{font-size:11px;color:var(--t-69736d);font-variant-numeric:tabular-nums}
#studio .sizes-chip{padding:0 7px;border:1px solid var(--c-c9cfc2);border-radius:999px;font-size:11px;color:var(--t-59626d)}
#studio .sizes-card[data-state=completed] .sizes-chip{border-color:var(--c-384bff);color:var(--t-384bff)}
#studio .sizes-card>:not(.sizes-thumb,.sizes-card-head){grid-column:1/-1}
#studio .sizes-files{display:grid;gap:2px;margin:0;padding:0;list-style:none;font-size:12px}
#studio .sizes-files li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;gap:0 8px;padding:3px 0}
#studio .sizes-files li+li{border-top:1px dashed var(--c-c9cfc2)}
#studio .sizes-who{display:grid;min-width:0}
#studio .sizes-files .sizes-name{color:var(--t-26302e);overflow-wrap:anywhere}
#studio .sizes-sub{display:flex;flex-wrap:wrap;gap:0 6px;font-size:10px;color:var(--t-69736d)}
#studio .sizes-dl{font-size:12px;color:var(--t-384bff);white-space:nowrap}
#studio .sizes-problem,#studio .sizes-error{font-size:12px;color:var(--t-873f3b)}
#studio .sizes-error{margin:0}
#studio .sizes-hint{margin:0;font-size:11px;line-height:1.6;color:var(--t-4a3d22)}
#studio .sizes-open{justify-self:start;font-size:11px}
#studio .sizes-zip{justify-self:start}
#studio .headline-note-warn{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:-4px 0 12px;padding:8px 10px;border:1px solid var(--c-d9c9a3);background:var(--c-fbf6ea);color:var(--t-4a3d22);font-size:12px;line-height:1.6}
#studio .headline-note-warn[hidden]{display:none}
#studio .headline-note-warn .text-button{font-size:12px;white-space:nowrap}
/* 自然に見せるヒント (brief-hints.js): the same quiet note colours as 見出しの注記, one line per kind of word. */
#studio .brief-hints{margin:-4px 0 12px;padding:8px 10px;border:1px solid var(--c-d9c9a3);background:var(--c-fbf6ea);color:var(--t-4a3d22);font-size:12px;line-height:1.6}
#studio .brief-hints[hidden]{display:none}
#studio .brief-hints-head{margin:0 0 4px;font-weight:700}
#studio .brief-hints-list{display:grid;gap:4px;margin:0;padding:0;list-style:none}
#studio .brief-hints-list li{display:flex;flex-wrap:wrap;gap:2px 8px}
#studio .brief-hints-words{font-weight:700}
#studio .brief-hints-say{flex-basis:100%}
#studio .brief-hints-note{margin:6px 0 0;opacity:.8}
#studio .sizes-zip-box{display:grid;gap:8px}
#studio .sizes-zip-by{display:grid;gap:6px;margin:0;padding:8px 12px 10px;border:1px solid var(--c-c9cfc2);background:var(--c-ffffff)}
#studio .sizes-zip-by legend{padding:0 4px;font-size:12px;font-weight:600;color:var(--t-59626d)}
#studio .sizes-zip-option{display:flex;align-items:flex-start;gap:8px;font-size:13px;cursor:pointer}
#studio .sizes-zip-option input{margin-top:3px}
#studio .sizes-zip-option>span{display:grid}
#studio .sizes-zip-note{font-size:11px;line-height:1.5;color:var(--t-69736d)}
@media (max-width:560px){#studio .sizes-group{grid-template-columns:minmax(0,1fr)}}
#studio .sizes-repick{justify-self:start;font-size:12px}
#studio .sizes-go,#studio .sizes-yes{background:var(--c-384bff);border-color:var(--c-384bff);color:var(--t-ffffff)}
#studio .sizes-go:disabled{opacity:.45;cursor:default}
#studio .sizes-files li>.sizes-check{grid-column:1/-1;justify-self:start;margin-top:2px;font-size:11px}
#studio span.sizes-check,#studio .sizes-check>summary{display:inline-flex;padding:0 7px;border:1px solid var(--c-c9cfc2);border-radius:999px;color:var(--t-59626d)}
#studio span.sizes-check[data-level=ok]{border-color:var(--c-bacbc1);background:var(--c-e5ece4);color:var(--t-244c3e)}
#studio .sizes-check>summary{list-style:none;cursor:pointer}
#studio .sizes-check>summary::-webkit-details-marker{display:none}
#studio .sizes-check[data-level=ok]>summary{border-color:var(--c-bacbc1);background:var(--c-e5ece4);color:var(--t-244c3e)}
#studio .sizes-check[data-level=warn]>summary{border-color:var(--c-d9c9a3);background:var(--c-fbf6ea);color:var(--t-4a3d22)}
#studio .sizes-check[data-level=ng]>summary{border-color:var(--c-a34642);background:var(--c-fff1ed);color:var(--t-873f3b)}
#studio .sizes-check ul{margin:4px 0 2px;padding-left:1.2em;line-height:1.6;color:var(--t-59626d)}
#studio .sizes-check li.is-warn{color:var(--t-4a3d22)}
#studio .sizes-check li.is-ng{color:var(--t-873f3b)}
/* サイズ展開 drawer: the long site list lives here; the page shows a summary only. */
#studio .sizes-drawer{position:fixed;inset:0 0 0 auto;width:min(460px,100vw);height:100%;max-height:100%;margin:0;padding:0;border:0;border-left:1px solid var(--c-c9cfc2);background:var(--c-fafaf7);color:var(--t-26302e);display:none;flex-direction:column}
#studio .sizes-drawer[open]{display:flex;animation:sizes-drawer-in .25s ease-out}
#studio .sizes-drawer::backdrop{background:var(--c-242d28);opacity:.35}
@keyframes sizes-drawer-in{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#studio .sizes-drawer[open]{animation:none}}
#studio .sizes-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--c-c9cfc2)}
#studio .sizes-drawer-head h2{margin:0;font-size:16px}
#studio .sizes-drawer-close{width:32px;height:32px;border:1px solid var(--c-c9cfc2);border-radius:999px;background:var(--c-ffffff);color:var(--t-26302e);font-size:18px;line-height:1;cursor:pointer}
#studio .sizes-drawer-body{flex:1;overflow:auto;display:grid;align-content:start;gap:10px;padding:14px 20px}
#studio .sizes-drawer-lead{margin:0;font-size:12px;color:var(--t-59626d)}
#studio .sizes-drawer-foot{display:grid;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--c-c9cfc2);background:var(--c-ffffff);max-height:42vh;overflow:auto}
#studio .sizes-drawer-foot .sizes-picked{max-height:6.8em;overflow:auto}
#studio .sizes-done{justify-self:stretch;background:var(--c-384bff);border-color:var(--c-384bff);color:var(--t-ffffff)}
#studio .sizes-summary{display:grid;gap:4px;padding:8px 10px;border-left:3px solid var(--c-384bff);background:var(--c-ffffff);font-size:12px;line-height:1.6}
#studio .sizes-summary p{margin:0}
#studio .sizes-summary-sites b{margin-right:8px;color:var(--t-59626d);font-weight:600}
#studio .sizes-more{margin-left:6px;color:var(--t-59626d)}
#studio .sizes-summary-ratios{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;color:var(--t-59626d)}
#studio .sizes-ratio-chip{padding:0 7px;border:1px solid var(--c-c9cfc2);border-radius:999px;font-variant-numeric:tabular-nums;color:var(--t-26302e)}
#studio .sizes-ratio-chip[data-source=ai]{border-color:var(--c-384bff);color:var(--t-384bff)}
#studio .sizes-open-drawer{justify-self:start;font-size:12px}
#studio .sizes-make{display:grid;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--c-c9cfc2)}
#studio .sizes-make[hidden]{display:none}
#studio .sizes-make-label{font-size:12px;font-weight:600;color:var(--t-26302e)}
#studio .sizes-make-toggle{display:flex;align-items:center;gap:6px;font-size:12px}
#studio .sizes-make-toggle[hidden]{display:none}
#studio .sizes-make-note{margin:0;font-size:11px;line-height:1.6;color:var(--t-59626d)}
#studio .sizes-make-note[data-level=warn]{color:var(--t-4a3d22)}
#studio .sizes-make-note .sizes-left{margin-left:6px}
/* サイズ展開 viewer: all ratios side by side at one height, or one large with its sites. */
#studio .sizes-viewer{width:min(1200px,96vw);max-width:96vw;max-height:92vh;padding:0;border:1px solid var(--c-c9cfc2);background:var(--c-fafaf7);color:var(--t-26302e)}
#studio .sizes-viewer[open]{display:flex;flex-direction:column}
#studio .sizes-viewer::backdrop{background:var(--c-242d28);opacity:.55}
#studio .sizes-viewer-head{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--c-c9cfc2)}
#studio .sizes-viewer-head h2{margin:0;font-size:15px}
#studio .sizes-viewer-modes{margin-left:auto}
#studio .sizes-viewer-mode{padding:4px 12px;border:1px solid var(--c-c9cfc2);border-radius:999px;background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:12px;cursor:pointer}
#studio .sizes-viewer-mode[aria-pressed=true]{border-color:var(--c-384bff);background:var(--c-eef1ff);color:var(--t-384bff)}
#studio .sizes-viewer-body{padding:18px;overflow:auto}
#studio .sizes-viewer-body:has(.sizes-viewer-one){display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}
#studio .sizes-viewer-row{display:flex;align-items:flex-end;gap:16px;margin:0 auto}
#studio .sizes-viewer-item{min-width:0;display:grid;justify-items:center;gap:3px;padding:8px;border:1px solid transparent;background:none;color:var(--t-26302e);font:inherit;font-size:12px;cursor:zoom-in}
#studio .sizes-viewer-item:hover,#studio .sizes-viewer-item:focus-visible{border-color:var(--c-384bff)}
#studio .sizes-viewer-item img{display:block;width:100%;height:auto;border:1px solid var(--c-c9cfc2)}
#studio .sizes-viewer-item b{font-size:14px}
#studio .sizes-viewer-count,#studio .sizes-viewer-hint{color:var(--t-69736d);font-size:11px}
#studio .sizes-viewer-hint{margin:10px 0 0}
#studio .sizes-viewer-one{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
#studio .sizes-viewer-stage img{display:block;max-width:100%;max-height:72vh;margin:auto;border:1px solid var(--c-c9cfc2)}
#studio .sizes-viewer-step{width:40px;height:40px;border:1px solid var(--c-c9cfc2);border-radius:999px;background:var(--c-ffffff);color:var(--t-26302e);font-size:18px;cursor:pointer}
#studio .sizes-viewer-step:disabled{opacity:.35;cursor:default}
#studio .sizes-viewer-ratio{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;font-size:16px}
#studio .sizes-viewer-side .sizes-files{font-size:12px}
#studio .sizes-compare{justify-self:start;font-size:12px}
#studio button.sizes-thumb{padding:0;border:1px solid var(--c-c9cfc2);background:var(--c-fafaf7);cursor:zoom-in}
#studio button.sizes-thumb:hover{border-color:var(--c-384bff)}
@media (max-width:720px){#studio .sizes-viewer-body:has(.sizes-viewer-one){grid-template-columns:minmax(0,1fr)}#studio .sizes-viewer-row{flex-wrap:wrap}}
#studio .adjust-target{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 8px;padding:8px 10px;border-left:3px solid var(--c-384bff);background:var(--c-ffffff);font-size:13px}
#studio .adjust-target-label{font-weight:600;color:var(--t-59626d)}
#studio .adjust-target-size{font-weight:600;color:var(--t-26302e);font-variant-numeric:tabular-nums}
#studio .adjust-target-version{font-size:12px;color:var(--t-69736d)}
#studio .adjust-scope{display:grid;gap:6px;margin:8px 0;padding:10px 12px;border:1px solid var(--c-c9cfc2);background:var(--c-ffffff)}
#studio .adjust-scope[hidden]{display:none}
#studio .adjust-scope legend{padding:0 4px;font-size:12px;font-weight:600;color:var(--t-59626d)}
#studio .adjust-scope label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
#studio .adjust-scope .field-help{margin:2px 0 0}
/* Studio by task (task-views.js): a work rail + one task at a time (作る／確かめる／書き出す). Panels are moved into
   their view once; the other views are hidden and inert. Colours are theme tokens; motion is one short fade. */
#studio.task-views .studio-section-nav{display:none}
#studio.task-views .studio-layout{display:grid;grid-template-columns:200px minmax(0,720px);gap:36px;justify-content:center;align-items:start;padding:0 4% 80px}
#studio.task-views .task-main{min-width:0;display:grid;gap:14px;align-content:start}
#studio.task-views .task-main.is-entering{animation:task-enter .26s ease-out}
@keyframes task-enter{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
#studio.task-views .task-view[hidden]{display:none!important}
#studio.task-views .task-view{display:grid;gap:14px;min-width:0}
/* the preview itself is replaced by the small image beside the title (the canvas keeps drawing for export/checks) */
#studio.task-views :is(.preview-toolbar,.canvas-wrap,.preview-caption,#preview-inspect,.flow-result,.flow-head[data-step="3"]){display:none!important}
#studio.task-views .workspace{padding:0;border:0;background:transparent}
#studio.task-views .workspace-stage{position:static!important;max-height:none!important;overflow:visible!important;display:grid;gap:14px}
#studio.task-views .workspace-stage:not(:has(> :not([hidden]):not(.preview-toolbar):not(.canvas-wrap):not(.preview-caption):not(#preview-inspect):not(.template-usage:empty))){display:none}
#studio.task-views .editor{width:100%}
/* rail */
#studio .task-rail{position:sticky;top:calc(var(--navigation-height,90px) + 18px);align-self:start}
body:has(.nav.is-away) #studio .task-rail{top:18px}
#studio .task-rail-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#studio .task-go{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;width:100%;margin:0;padding:12px 12px 12px 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--t-26302e);font:inherit;text-align:left;cursor:pointer;transition:background-color .2s,border-color .2s}
#studio .task-go:hover{background:var(--c-ffffff);border-color:var(--c-d8dcd3)}
#studio .task-go[aria-current="step"]{background:var(--c-ffffff);border-color:var(--c-384bff);box-shadow:0 6px 18px #26302b10}
#studio .task-go:focus-visible{outline:2px solid var(--c-384bff);outline-offset:2px}
#studio .task-go.is-off{color:var(--t-69736d);cursor:default}
#studio .task-go.is-off:hover{background:transparent;border-color:transparent}
#studio .task-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--c-e5ece4);color:var(--t-244c3e)}
#studio .task-go[aria-current="step"] .task-icon{background:var(--c-384bff);color:var(--t-ffffff)}
#studio .task-go.is-off .task-icon{background:transparent;border:1px solid var(--c-d8dcd3);color:var(--t-69736d)}
#studio .task-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#studio .task-text{display:grid;gap:3px;min-width:0}
#studio .task-name{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;line-height:1.4}
#studio .task-mark{font-size:12px;font-weight:700}
#studio .task-mark:empty{display:none}
#studio .task-go.is-done .task-mark,#studio .task-go[data-level="ok"] .task-mark{color:var(--t-244c3e)}
#studio .task-go[data-level="warn"] .task-mark{color:var(--t-4a3d22)}
#studio .task-go[data-level="ng"] .task-mark{color:var(--t-873f3b)}
#studio .task-sum{display:block;font-size:11px;line-height:1.55;color:var(--t-59626d);overflow-wrap:anywhere}
#studio .task-sum>span+span::before{content:' · ';color:var(--t-69736d)}
#studio .task-sum>.is-changed{color:var(--t-4a3d22)}
#studio .task-go.is-told{animation:task-told .32s ease-out}
@keyframes task-told{0%{transform:translateX(0)}35%{transform:translateX(4px)}70%{transform:translateX(-2px)}100%{transform:none}}
/* heading row of every view: title, one line, the small image */
#studio .task-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:4px 0 2px}
#studio .task-titles{min-width:0}
#studio .task-title{margin:0;font-size:24px;line-height:1.3;letter-spacing:-.01em}
#studio .task-title:focus{outline:none}
#studio .task-title:focus-visible{outline:2px solid var(--c-384bff);outline-offset:4px}
#studio .task-lead{margin:4px 0 0;font-size:12px;line-height:1.6;color:var(--t-59626d)}
#studio .task-thumb-box{display:grid;justify-items:end;gap:4px;flex:0 0 auto}
#studio .task-thumb-box[hidden]{display:none}
#studio .task-thumb{position:relative;display:block;width:120px;max-width:100%;padding:0;border:1px solid var(--c-d8dcd3);border-radius:8px;background:var(--c-ffffff);overflow:hidden;cursor:zoom-in}
#studio .task-thumb canvas{display:block;width:100%;height:auto}
#studio .task-thumb:disabled{cursor:default}
#studio .task-thumb:focus-visible{outline:2px solid var(--c-384bff);outline-offset:2px}
#studio .task-thumb-label{position:absolute;right:6px;bottom:6px;padding:2px 8px;border-radius:999px;background:var(--c-242d28);color:var(--t-ffffff);font-size:10px;opacity:0;transition:opacity .2s}
#studio .task-thumb:hover .task-thumb-label,#studio .task-thumb:focus-visible .task-thumb-label{opacity:1}
#studio .task-thumb.is-busy{opacity:.55}
#studio.task-views #status-message{margin:6px 0 0;font-size:11px;line-height:1.6;color:var(--t-69736d)}
#studio.task-views:not([data-view="make"]) #status-message,#studio.task-views #status-message:empty{display:none}
/* 次へ */
#studio .task-foot{position:sticky;bottom:0;z-index:3;display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:12px 0 16px;background:linear-gradient(to bottom,transparent,var(--c-f2f1ec) 40%)}
#studio .task-foot[hidden]{display:none}
#studio .task-next{min-width:220px}
#studio .task-next.primary{background:var(--c-384bff);border-color:var(--c-384bff);color:var(--t-ffffff)}
#studio .task-next.is-quiet{background:var(--c-ffffff);border-color:var(--c-c9cfc2);color:var(--t-26302e)}
#studio .task-next-note{font-size:12px;color:var(--t-4a3d22)}
/* 確かめる: one row per check; problems open with 直す */
#studio .task-checks>.task-check{margin:0;padding:14px 16px;border:1px solid var(--c-d8dcd3);background:var(--c-ffffff)}
#studio .task-checks>details.task-check{padding:0}
#studio .task-checks>details.task-check>summary{padding:14px 16px;justify-content:flex-start}
#studio .task-checks>details.task-check>summary strong{margin-right:auto}
#studio .task-checks>details.task-check>summary strong{font-size:14px}
#studio .task-checks>details.task-check>.task-fix{margin:0 16px 14px}
#studio .task-checks>.text-check{border-top-width:1px}
#studio .task-checks .text-check-head{justify-content:flex-start}
#studio .task-checks .text-check-head h3{margin-right:auto!important}
#studio .task-checks>.task-check[data-level="warn"]{border-color:var(--c-d9c9a3)}
#studio .task-checks>.task-check[data-level="ng"]{border-color:var(--c-a34642)}
#studio .task-checks .text-check.is-folded :is(#text-check-result,.text-check-lead,#text-check-actions,#text-check-off,#text-check-stopped){display:none!important}
#studio .task-checks .text-check.is-trimmed :is(#text-check-items>li.is-ok,.text-check-read,.text-check-when){display:none}
#studio .task-checks .text-check :is(.text-check-lead,.field-help),#studio .task-checks .placement-check>.field-help{display:none}
#studio .task-checks .text-check-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
#studio .task-checks .text-check-head h3{margin:0;font-size:14px}
#studio .task-check-more{font-size:12px}
#studio .task-checks>.text-check{padding:14px 16px}
#studio .task-fix{display:inline-flex;margin-top:10px;font-size:13px;font-weight:600}
#studio .task-fix[hidden]{display:none}
#studio .task-recap{border:1px solid var(--c-d8dcd3);background:var(--c-ffffff)}
#studio .task-recap>summary{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;font-size:14px;font-weight:600}
#studio .task-recap-count{font-size:11px;font-weight:400;color:var(--t-69736d)}
#studio .task-recap .flow-recap{margin:0;padding:0 16px 14px;border:0}
#studio .task-recap .flow-recap-title{display:none}
/* 書き出す */
#studio .task-exports>:is(.export-bar,.flow-sizes,.page-copy){margin:0;padding:14px 16px;border:1px solid var(--c-d8dcd3);background:var(--c-ffffff)}
#studio .task-exports>details:is(.flow-sizes,.page-copy){padding:0}
#studio .task-exports>details>summary{padding:14px 16px}
#studio .task-exports>details>summary .flow-row-label,#studio .task-exports>details>summary strong{font-size:14px;font-weight:600}
#studio .task-exports>details[open]>:not(summary){margin:0 16px 16px}
/* drawer: 履歴・バージョン・実行ログ */
#studio .task-tools{display:inline-flex;gap:6px;margin-right:10px;vertical-align:middle}
#studio .task-tool{min-height:30px;padding:0 12px;border:1px solid var(--c-d8dcd3);border-radius:999px;background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:12px;cursor:pointer}
#studio .task-tool:hover{border-color:var(--c-384bff)}
#studio .task-drawer{position:fixed;inset:0 0 0 auto;width:min(420px,92vw);height:100%;max-height:none;margin:0;padding:0;border:0;border-left:1px solid var(--c-d8dcd3);background:var(--c-ffffff);color:var(--t-26302e);overflow-y:auto}
#studio .task-drawer::backdrop{background:#10141a59}
#studio .task-drawer[open]{animation:task-drawer .24s ease-out}
@keyframes task-drawer{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
#studio .task-drawer-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--c-d8dcd3);background:var(--c-ffffff)}
#studio .task-drawer-head h2{margin:0;font-size:16px}
#studio .task-drawer .activity{display:block!important;padding:16px 20px;border:0}
@media (prefers-reduced-motion:reduce){#studio.task-views .task-main.is-entering,#studio .task-drawer[open],#studio .task-go.is-told{animation:none}#studio .task-go,#studio .task-thumb-label{transition:none}}
/* tablet */
/* wide screens: a narrow rail — icon, name and one short state; the full summary is kept for screen readers */
@media (min-width:761px){
  #studio.task-views .studio-layout{grid-template-columns:96px minmax(0,800px);gap:24px}
  #studio .task-go{grid-template-columns:1fr;justify-items:center;gap:6px;padding:12px 4px 10px;text-align:center}
  #studio .task-icon{width:36px;height:36px}
  #studio .task-icon svg{width:19px;height:19px}
  #studio .task-text{justify-items:center;gap:2px}
  #studio .task-name{justify-content:center;gap:3px;font-size:12px}
  #studio .task-state{font-size:10px;line-height:1.35;color:var(--t-59626d);white-space:nowrap}
  #studio .task-go[data-level="warn"] .task-state,#studio .task-go.is-dirty .task-state{color:var(--t-4a3d22)}
  #studio .task-go[data-level="ng"] .task-state{color:var(--t-873f3b)}
  #studio .task-sum{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
#studio .task-state:empty{display:none}
/* the small image under the three tasks (wide screens; task-views.js moves it here) */
#studio .task-rail-image:empty{display:none}
#studio .task-rail-image{margin-top:14px;padding-top:14px;border-top:1px solid var(--c-d8dcd3)}
#studio .task-rail .task-thumb-box{display:grid;justify-items:stretch;gap:8px}
#studio .task-rail .task-thumb-box[hidden]{display:none}
#studio .task-rail .task-thumb{width:100%!important;max-width:none}
#studio .task-rail .task-thumb canvas{width:100%;height:auto}
#studio .task-rail .iv-controls{flex-direction:column;align-items:stretch;gap:5px}
#studio .task-rail .iv-chip{min-height:26px;padding:0 4px;font-size:10.5px}
/* wide screens (1200px+): keep a safe margin. Every view is one column (the image is the small one in the rail):
   書き出す lists PNG, サイト別に書き出す and the page text from top to bottom (2026-10-21). */
/* the reference basket button moves up while 次へ is on screen, so it never covers it */
body:has(#studio.task-views .task-foot:not([hidden]))>.basket-tag{bottom:96px}
@media (min-width:1200px){
  /* the rail and an 800px content column as one centred block (2026-10-21: the owner found the right side too empty) */
  #studio.task-views .studio-layout{grid-template-columns:96px minmax(0,800px);gap:28px;justify-content:center;padding:0 clamp(32px,4vw,72px) 80px}
  #studio.task-views .task-view{column-gap:22px;align-items:start}
}
@media (min-width:761px) and (max-width:1100px){#studio.task-views .studio-layout{grid-template-columns:88px minmax(0,1fr);gap:20px}}
/* phone: the rail becomes one fixed row of three steps under the site header */
@media (max-width:760px){
  #studio.task-views .studio-layout{display:block;padding:0 0 40px}
  #studio .task-rail{position:sticky;top:0;z-index:20;margin:0 0 14px;padding:6px 4%;background:var(--c-f7f8f2f5);backdrop-filter:blur(12px);border-block:1px solid var(--c-d8dcd3)}
  body:has(.nav:not(.is-away)) #studio .task-rail{top:var(--navigation-height,64px)}
  #studio .task-rail-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  #studio .task-go{grid-template-columns:minmax(0,1fr);justify-items:center;gap:2px;padding:6px 4px;text-align:center;border-radius:8px}
  #studio .task-icon{display:none}
  #studio .task-state{display:none}
  #studio .task-name{justify-content:center;font-size:13px}
  #studio .task-sum{max-width:100%;font-size:10px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #studio.task-views .task-main{padding:0 4%}
  #studio .task-head{gap:12px}
  #studio .task-title{font-size:20px}
  #studio .task-thumb{max-width:84px}
  #studio .task-next{min-width:0;flex:1}
  #studio .task-tools{margin:0}
  #studio.task-views .studio-title{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding-block:12px;margin-bottom:0}
  #studio.task-views .studio-title .eyebrow{display:none}
  #studio.task-views .studio-title h1{margin:0;font-size:22px}
  #studio.task-views .studio-title>div:last-child{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}
  #studio.task-views .studio-title .generation-chip{margin:0}
  /* the reference basket button sits above 次へ instead of on it */
  body:has(#studio.task-views .task-foot:not([hidden]))>.basket-tag{bottom:86px}
}
/* Image viewer (image-viewer.js): quick look on hover, a floating window (浮かせる) and 比べる. Theme tokens only. */
#studio .iv-controls{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
#studio .iv-chip{min-height:28px;padding:0 10px;border:1px solid var(--c-d8dcd3);border-radius:999px;background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:11px;cursor:pointer}
#studio .iv-chip:hover:not(:disabled){border-color:var(--c-384bff)}
#studio .iv-chip[aria-pressed="true"]{border-color:var(--c-384bff);background:var(--c-f5f6ff);color:var(--t-303e67)}
#studio .iv-chip:disabled{opacity:.5;cursor:default}
#studio .iv-chip:focus-visible,#studio .iv-btn:focus-visible{outline:2px solid var(--c-384bff);outline-offset:2px}
#studio .iv-chip[hidden]{display:none}
#studio .iv-win{position:fixed;z-index:57;display:grid;grid-template-rows:auto 1fr;max-width:calc(100vw - 16px);background:var(--c-ffffff);border:1px solid var(--c-c9cfc2);border-radius:12px;box-shadow:0 24px 60px -24px #18203066,0 2px 8px #1820301a;overflow:hidden;color:var(--t-26302e)}
#studio .iv-win[hidden]{display:none}
#studio .iv-win.is-arriving{animation:iv-arrive .22s ease-out}
@keyframes iv-arrive{from{opacity:.4;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
#studio .iv-bar{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 8px 7px 10px;border-bottom:1px solid var(--c-d8dcd3);background:var(--c-f7f8f2f5);cursor:grab;user-select:none;touch-action:none}
#studio .iv-win.is-moving .iv-bar{cursor:grabbing}
#studio .iv-win.is-min .iv-bar{border-bottom:0}
#studio .iv-grip{flex:0 0 14px;height:10px;background:radial-gradient(circle,var(--c-c9cfc2) 1.2px,transparent 1.4px) 0 0/5px 5px}
#studio .iv-title{margin:0;font-size:12px;font-weight:700;white-space:nowrap}
#studio .iv-meta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;color:var(--t-69736d)}
#studio .iv-acts{display:flex;gap:4px;margin-left:auto;flex:0 0 auto}
#studio .iv-btn{min-width:28px;height:28px;padding:0 8px;border:1px solid var(--c-d8dcd3);border-radius:7px;background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:12px;cursor:pointer}
#studio .iv-btn:hover:not(:disabled){border-color:var(--c-384bff)}
#studio .iv-btn[aria-pressed="true"]{border-color:var(--c-384bff);background:var(--c-384bff);color:var(--t-ffffff)}
#studio .iv-btn:disabled{opacity:.45;cursor:default}
#studio .iv-body{display:flex;justify-content:center;align-items:flex-start;gap:10px;padding:12px;background:var(--c-fafaf7)}
#studio .iv-body[hidden],#studio .iv-pane[hidden]{display:none}
#studio .iv-pane{display:grid;gap:6px;justify-items:center;margin:0}
#studio .iv-pane canvas,#studio .iv-pane img{display:block;border-radius:4px;background:var(--c-ffffff);object-fit:contain}
#studio .iv-pane figcaption{font-size:11px;color:var(--t-59626d)}
#studio .iv-pick{min-height:26px;padding:0 6px;border:1px solid var(--c-d8dcd3);border-radius:6px;background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:11px}
#studio .iv-win:not(.is-comparing) .iv-now figcaption{display:none}
#studio .iv-resize{position:absolute;z-index:2;width:12px;height:12px;touch-action:none;border:0 solid var(--c-c9cfc2);opacity:.6;transition:opacity .2s}
#studio .iv-win:hover .iv-resize,#studio .iv-win.is-moving .iv-resize{opacity:1}
#studio .iv-resize-nw{left:0;top:0;border-width:2px 0 0 2px;border-top-left-radius:12px;cursor:nwse-resize}
#studio .iv-resize-ne{right:0;top:0;border-width:2px 2px 0 0;border-top-right-radius:12px;cursor:nesw-resize}
#studio .iv-resize-sw{left:0;bottom:0;border-width:0 0 2px 2px;border-bottom-left-radius:12px;cursor:nesw-resize}
#studio .iv-resize-se{right:0;bottom:0;border-width:0 2px 2px 0;border-bottom-right-radius:12px;cursor:nwse-resize}
#studio .iv-resize[hidden]{display:none}
#studio .iv-peek{position:fixed;z-index:58;display:grid;gap:6px;padding:8px;border:1px solid var(--c-c9cfc2);border-radius:12px;background:var(--c-ffffff);box-shadow:0 24px 60px -24px #18203066,0 2px 8px #1820301a;pointer-events:none;animation:iv-peek .16s ease-out}
#studio .iv-peek[hidden]{display:none}
#studio .iv-peek canvas{display:block;border-radius:6px}
#studio .iv-peek-note{margin:0;font-size:10.5px;color:var(--t-69736d);text-align:right}
@keyframes iv-peek{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#studio .iv-win.is-arriving,#studio .iv-peek{animation:none}}
@media (max-width:760px){#studio .iv-win,#studio .iv-peek{display:none!important}}
/* Studio polish (2026-10-21): 掲載先チェック per chosen site, the number badge on the rail. Theme tokens only. */
#studio .placement-chosen{display:grid;gap:10px;margin:0 14px 12px}
#studio .placement-empty{margin:0;font-size:12px;color:var(--t-59626d)}
#studio .placement-pick{justify-self:start;font-size:13px;font-weight:600}
#studio .placement-pick[hidden]{display:none}
#studio .placement-sites{display:grid;gap:8px;margin:0;padding:0;list-style:none}
#studio .placement-sites>li{display:grid;gap:4px;padding:8px 10px;border:1px solid var(--c-d8dcd3);border-radius:8px;background:var(--c-ffffff)}
#studio .placement-site-head{display:flex;align-items:center;gap:10px}
#studio .placement-site-name{font-size:13px;font-weight:600;color:var(--t-26302e)}
#studio .placement-site-verdict{margin-left:auto;padding:0 8px;border:1px solid var(--c-d8dcd3);border-radius:999px;font-size:11px;color:var(--t-59626d)}
#studio .placement-site-verdict[data-level="ok"]{border-color:var(--c-bacbc1);background:var(--c-e5ece4);color:var(--t-244c3e)}
#studio .placement-site-verdict[data-level="warn"]{border-color:var(--c-d9c9a3);background:var(--c-fbf6ea);color:var(--t-4a3d22)}
#studio .placement-site-verdict[data-level="ng"]{border-color:var(--c-a34642);background:var(--c-fff1ed);color:var(--t-873f3b)}
#studio .placement-sites .placement-list{margin:0}
#studio .placement-reminders>summary,#studio .placement-manual>summary{cursor:pointer;font-size:12px;color:var(--t-59626d);padding:4px 0}
#studio .placement-manual{margin:0 14px 12px}
#studio .task-go{position:relative}
#studio .task-mark.is-badge{position:absolute;top:6px;right:calc(50% - 26px);display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--c-c58b1c);color:var(--t-ffffff);font-size:10px;font-weight:700;line-height:1}
#studio .task-go[data-level="ng"] .task-mark.is-badge{background:var(--c-a34642)}
@media (max-width:760px){#studio .task-mark.is-badge{top:2px;right:6px}}
#studio .placement-site-name span+span::before{content:" / ";color:var(--c-73797d)}

/* AI 停止 said once (2026-10-21): the header chip opens this note; cards carry one grey line (aiOffLine). */
#studio .studio-title>div:last-child{position:relative}
#studio .generation-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:min(380px,calc(100vw - 32px));padding:16px 18px 14px;border:1px solid var(--c-d9c9a3);border-radius:10px;background:var(--c-ffffff);box-shadow:0 14px 34px rgba(36,45,40,.16);text-align:left;animation:gen-pop .18s ease-out}
#studio .generation-pop[hidden]{display:none}
#studio .generation-pop .generation-off-note{margin:0;padding:0 22px 0 0;border:0;background:none}
#studio .generation-pop .generation-switch{margin-top:12px}
#studio .generation-pop-close{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;border-radius:50%;background:transparent;font:inherit;font-size:16px;line-height:1;color:var(--t-4a3d22);cursor:pointer}
#studio .generation-pop-close:hover{background:var(--c-fbf6ea)}
@keyframes gen-pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
#studio .ai-off-line{display:inline-flex;align-items:center;gap:0;margin:6px 0;padding:2px 0;border:0;background:none;font:inherit;font-size:12px;color:var(--t-737a70);cursor:pointer;text-align:left}
#studio .ai-off-line .ai-off-more::before{content:'·';margin:0 6px;text-decoration:none;display:inline-block}
#studio .ai-off-line .ai-off-more{text-decoration:underline;text-underline-offset:3px}
#studio .ai-off-line:hover{color:var(--t-242d28)}
#studio .text-check-stopped,#studio .assistant-stopped{margin:0}
@media(prefers-reduced-motion:reduce){#studio .generation-pop{animation:none}}
/* One column per view (2026-10-21): 作る ≤720px, 確かめる ≤800px with 入力した内容 last and folded. */
#studio.task-views .task-view[data-task="check"]{max-width:800px}

/* The Studio heading is one thin toolbar: the work's name | AI chip, 履歴, ログ (the site menu already says スタジオ). */
#studio.task-views .studio-title{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:0;padding-block:8px;margin-bottom:0}
#studio.task-views .studio-title>div:first-child{display:flex;align-items:center;gap:12px;min-width:0}
#studio.task-views:not(.is-verification) .studio-title h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#studio.task-views .studio-title .eyebrow,#studio.task-views .studio-title .mode-label,#studio.task-views .studio-title .language-note{display:none}
#studio.task-views.is-verification .task-work{display:none}
#studio .task-work{margin:0;min-width:0;font-size:14px;font-weight:600;line-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t-26302e)}
#studio.task-views .studio-title>div:last-child{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:6px;flex:0 0 auto}
#studio.task-views .studio-title .generation-chip{margin:0}
#studio.task-views .task-tools{margin:0;order:2}
#studio.task-views .studio-title .generation-pop{order:3}
@media (max-width:760px){#studio.task-views .studio-title{gap:8px;padding:6px 4%}#studio.task-views .studio-title .generation-chip{padding-left:10px}#studio.task-views .studio-title .generation-chip-action{display:none}#studio.task-views .studio-title>div:last-child{flex-wrap:wrap;flex:0 1 auto;max-width:100%}}
/* The reference basket button at the bottom of the rail (wide screens; task-views.js moves it there). */
#studio.task-views .studio-title{margin-bottom:18px}
#studio .task-recap>summary{list-style:none}
#studio .task-recap>summary::-webkit-details-marker{display:none}
#studio .task-recap>summary::after{content:'+';margin-left:auto;font-weight:400;color:var(--t-59626d)}
#studio .task-recap[open]>summary::after{content:'−'}
/* サイト別に書き出す with no site chosen: just 「掲載先を選ぶ」 (no box around it, no disabled run button). */
#studio .sizes-summary:has(>.sizes-pick){padding:0;border-left:0;background:none}
#studio .sizes-pick{justify-self:start;min-height:36px;padding:0 16px;font-size:13px}
/* While ② 仕上げる is open, 「この内容で仕上げる」 is the action at the bottom; 次へ comes back once ② is folded. In 作る
   only: ② left open there must not take このデザインで決定 / 増やす away in the other views (2026-10-23). */
#studio.task-views[data-view="make"]:has(.flow-head[data-step="2"][aria-expanded="true"]) .task-foot{display:none}
/* The toolbar lines up with the centred rail + content block (wide screens). */
@media (min-width:761px){#studio.task-views .studio-title{box-sizing:border-box;width:min(100%,calc(924px + 2 * clamp(32px,4vw,72px)));margin-inline:auto;padding-inline:clamp(32px,4vw,72px)}}

/* 使い方 (studio-guide.js): one small dialog — the steps left to right, one line on how the images relate. */
#studio .guide-dialog{width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:1px solid var(--c-d8dcd3);border-radius:10px;background:var(--c-ffffff);color:var(--t-26302e);overflow:auto}
#studio .guide-dialog::backdrop{background:#10141a59}
#studio .guide-dialog[open]{animation:guide-in .2s ease-out}
@keyframes guide-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#studio .guide-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 4px}
#studio .guide-head h2{margin:0;font-size:18px}
#studio .guide-figure{display:block;width:calc(100% - 40px);height:auto;margin:12px 20px 8px}
#studio .guide-box{fill:var(--c-f6f5f3);stroke:var(--c-d8dcd3);stroke-width:1.2}
#studio .guide-dot{fill:var(--c-384bff)}
#studio .guide-num{fill:var(--t-ffffff);font:700 13px Arial,sans-serif}
#studio .guide-name{fill:var(--t-26302e);font:700 15px 'Yu Gothic','Hiragino Kaku Gothic ProN',Meiryo,sans-serif}
#studio .guide-arrow{fill:none;stroke:var(--c-9aa293);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#studio .guide-steps{display:grid;gap:6px;margin:4px 20px 0;padding:0;list-style:none;counter-reset:g}
#studio .guide-steps li{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:8px;padding:6px 0;border-top:1px solid var(--c-d8dcd3);font-size:13px;line-height:1.6}
#studio .guide-steps b{font-size:13px}
#studio .guide-relation{margin:14px 20px 0;padding:10px 12px;border-left:3px solid var(--c-384bff);background:var(--c-f5f6ff);font-size:13px;font-weight:600;color:var(--t-303e67)}
#studio .guide-note{margin:10px 20px 0;font-size:12px;color:var(--t-59626d)}
#studio .guide-ok{display:block;margin:16px 20px 18px auto;min-width:140px;background:var(--c-384bff);border-color:var(--c-384bff);color:var(--t-ffffff)}
#studio .guide-open{min-width:30px;padding:0 10px;font-weight:700}
@media (max-width:760px){#studio .guide-steps li{grid-template-columns:1fr;gap:0}}
@media (prefers-reduced-motion:reduce){#studio .guide-dialog[open]{animation:none}}/* The sample products under the upload area (studio-flow.js). */
#studio .flow-sample{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 0 4px}
#studio .flow-sample-label{font-size:12px;color:var(--t-59626d)}
#studio .flow-sample .sample-select{display:inline-flex;align-items:center;gap:0;margin:0;font-size:0}
#studio .flow-sample .sample-select select{min-height:36px;font-size:13px}
#studio .flow-sample #sample-button{font-size:13px}

/* ショップ設定 (shop-settings.js): the toolbar chip, its drawer (same as 履歴とログ) and one line in 作る. */
#studio .shop-chip{display:inline-flex;align-items:center;gap:2px;max-width:220px}
#studio .shop-chip-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
#studio .shop-chip-caret{margin-left:4px;font-size:10px;color:var(--t-59626d)}
#studio .shop-body{display:grid;gap:16px;padding:16px 20px 24px}
#studio .shop-tabs{display:flex;flex-wrap:wrap;gap:6px}
#studio .shop-tab{min-height:32px;max-width:100%;padding:0 12px;border:1px solid var(--c-d8dcd3);border-radius:999px;background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:12px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#studio .shop-tab[aria-pressed="true"]{border-color:var(--c-242d28);background:var(--c-242d28);color:var(--t-ffffff)}
#studio .shop-tab.is-new{border-style:dashed}
#studio .shop-tab:disabled{opacity:.45;cursor:default}
#studio .shop-form{display:grid;gap:12px;padding-top:12px;border-top:1px solid var(--c-d8dcd3)}
#studio .shop-field{display:grid;gap:4px;margin:0}
#studio .shop-label{margin:0;font-size:12px;font-weight:600;color:var(--t-26302e)}
#studio .shop-field small,#studio .shop-model small,#studio .shop-sites small{font-size:11px;color:var(--t-59626d)}
#studio .shop-styles{display:flex;flex-wrap:wrap;gap:6px;margin-top:-4px}
#studio .shop-style{min-height:30px;padding:0 10px;border:1px solid var(--c-d8dcd3);border-radius:999px;background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:12px;cursor:pointer}
#studio .shop-style[aria-pressed="true"]{border-color:var(--c-242d28);background:var(--c-242d28);color:var(--t-ffffff)}
#studio .shop-model,#studio .shop-sites{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:-6px}
#studio .shop-model-card{display:flex;align-items:center;gap:10px}
#studio .shop-model-card img{width:44px;height:44px;object-fit:cover;border:1px solid var(--c-d8dcd3);border-radius:4px}
#studio .shop-model-title{font-size:13px}
#studio .shop-site-names{width:100%;margin:0;font-size:12px;line-height:1.6}
#studio .shop-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px}
#studio .shop-status{margin:0;font-size:12px;color:var(--t-59626d)}
#studio .shop-status:empty{display:none}
#studio .shop-files{display:flex;flex-wrap:wrap;gap:14px;padding-top:12px;border-top:1px solid var(--c-d8dcd3)}
#studio .shop-use{display:flex;align-items:center;gap:6px;margin:0 0 12px;font-size:13px}
#studio .shop-use[hidden]{display:none}
#studio .shop-use-name{color:var(--t-59626d)}
@media (max-width:760px){#studio .shop-chip{max-width:120px}#studio .shop-chip>span:first-child,#studio .shop-chip-sep{display:none}}#studio .shop-form :is(input,textarea,select){box-sizing:border-box;width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--c-d8dcd3);border-radius:3px;background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:13px;line-height:1.6}
#studio .shop-form textarea{resize:vertical}
#studio .shop-form :is(input,textarea,select):focus-visible{outline:2px solid var(--c-384bff);outline-offset:1px}
#studio .shop-save{background:var(--c-384bff);border-color:var(--c-384bff);color:var(--t-ffffff);min-width:120px}
#studio .shop-tab[aria-pressed="true"],#studio .shop-style[aria-pressed="true"]{border-color:var(--c-384bff);background:var(--c-f5f6ff);color:var(--t-303e67)}
/* 2026-10-22 four steps: 掲載の計画 (listing-plan.js), このデザインで決定, 増やす, 書き出す table (export-table.js). */
/* Status badges: four kinds only — 準備OK / あと N 項目 / 資料が足りない / 未選択 (data-state ok / more / short / none). */
#studio .task-badge{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border-radius:999px;background:var(--c-f6f5f3);color:var(--t-59626d);font-size:11px;font-weight:600;white-space:nowrap}
#studio .task-badge:empty{display:none}
#studio .task-badge[data-state="ok"]{background:var(--c-e5ece4);color:var(--t-244c3e)}
#studio .task-badge[data-state="more"]{background:var(--c-f5f6ff);color:var(--t-303e67)}
#studio .task-badge[data-state="short"]{background:var(--c-fbf6ea);color:var(--t-4a3d22)}
/* 掲載の計画 */
#studio .plan{margin:0 0 16px;padding:14px 16px;border:1px solid var(--c-d8dcd3);background:var(--c-ffffff)}
#studio .plan-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
#studio .plan-title{margin:0;font-size:15px}
#studio .plan-summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;margin:0;font-size:13px;color:var(--t-26302e)}
#studio .plan-summary:empty{display:none}
#studio .plan-dot{color:var(--t-59626d)}
#studio .plan-body{display:grid;gap:10px;margin-top:12px}
#studio .plan-body[hidden]{display:none}
#studio .plan-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#studio .plan-group-label{min-width:7em;font-size:11px;color:var(--t-59626d)}
#studio .plan-chip{min-height:32px;padding:0 12px;border:1px solid var(--c-d8dcd3);border-radius:999px;background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:12px;cursor:pointer}
#studio .plan-chip[aria-pressed="true"]{border-color:var(--c-384bff);background:var(--c-f5f6ff);color:var(--t-303e67)}
#studio .plan-chip:focus-visible{outline:2px solid var(--c-384bff);outline-offset:2px}
#studio .plan-extra{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding-top:4px}
#studio .plan-extra .plan-fold{margin-left:auto}
#studio .plan-lines{display:grid;gap:4px;margin:2px 0 0;padding:10px 0 0;border-top:1px solid var(--c-d8dcd3);list-style:none;font-size:12px;line-height:1.7;color:var(--t-59626d)}
#studio .plan-lines li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px}
#studio .plan-lines b{min-width:6.5em;font-weight:600;color:var(--t-26302e)}
#studio .plan-ratio{font-weight:700;color:var(--t-26302e)}
#studio .plan-ok{color:var(--t-244c3e)}
#studio .plan-guide{font-size:11px}
#studio .plan.is-folded{padding:10px 16px}
/* このデザインで決定 (end of 確かめる) and the toolbar's 決定済み */
#studio .task-decide{margin:0;padding:14px 16px;border:1px solid var(--c-d8dcd3);background:var(--c-ffffff)}
#studio .task-decide-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
#studio .task-decide-head h3{margin:0;font-size:14px}
#studio .task-decide-text{margin:6px 0 0;font-size:12px;line-height:1.7;color:var(--t-59626d)}
#studio .task-undecide{margin-top:6px;font-size:12px}
#studio .task-undecide[hidden]{display:none}
#studio .task-decide.is-done{border-color:var(--c-c8cfee)}
#studio .task-decided{display:inline-flex;align-items:center;gap:6px;min-height:28px;margin-left:10px;padding:0 10px;border:1px solid var(--c-c8cfee);border-radius:999px;background:var(--c-f5f6ff);color:var(--t-303e67);font:inherit;font-size:12px;cursor:pointer}
#studio .task-decided[hidden]{display:none}
#studio .task-decided-change{text-decoration:underline;text-underline-offset:3px}
/* 増やす */
#studio .grow-lock{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 12px;padding:10px 14px;border:1px solid var(--c-d8dcd3);background:var(--c-ffffff);font-size:13px}
#studio .grow-lock[hidden]{display:none}
#studio .grow-lock p{margin:0}
#studio .grow-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 14px}
#studio .grow-option{display:grid;gap:6px;min-height:84px;padding:14px 16px;border:1px solid var(--c-d8dcd3);border-radius:3px;background:var(--c-ffffff);color:var(--t-26302e);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s}
#studio .grow-option:hover:not(:disabled){border-color:var(--c-384bff)}
#studio .grow-option[aria-pressed="true"]{border-color:var(--c-384bff);box-shadow:inset 0 0 0 1px var(--c-384bff)}
#studio .grow-option:disabled{cursor:default;opacity:.55}
#studio .grow-option:focus-visible{outline:2px solid var(--c-384bff);outline-offset:2px}
#studio .grow-option-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
#studio .grow-option-top b{font-size:14px}
#studio .grow-option-sum{font-size:12px;color:var(--t-59626d)}
#studio .task-grow>.flow-sizes>summary{display:none}
/* One main button on 増やす: the bar at the bottom starts the run (the panel's own button only opens its confirmation). */
#studio .task-grow .sizes-go{display:none!important}
#studio .task-grow>.flow-sizes{margin:0;padding:0;border:1px solid var(--c-d8dcd3);background:var(--c-ffffff)}
#studio .task-grow>.flow-sizes[hidden]{display:none}
#studio .task-grow>.flow-sizes>.sizes-body{margin:0;padding:14px 16px 16px}
@media (max-width:760px){#studio .grow-options{grid-template-columns:1fr}}
/* 書き出す: images × sites */
#studio .export-set{margin:0;padding:14px 16px;border:1px solid var(--c-d8dcd3);background:var(--c-ffffff)}
#studio .export-set[hidden]{display:none}
#studio .export-set-head h3{margin:0 0 10px;font-size:14px}
#studio .export-set-zip:empty{display:none}
#studio .export-set-zip{margin-bottom:12px}
#studio .export-set-empty,#studio .export-set-note{margin:0;font-size:12px;color:var(--t-59626d)}
#studio .export-set-note:empty{display:none}
#studio .export-set-note{margin-top:8px}
#studio .export-table-wrap{overflow-x:auto;overscroll-behavior-x:contain}
#studio .export-table{border-collapse:collapse;font-size:12px;min-width:100%}
#studio .export-table th,#studio .export-table td{padding:6px 8px;border:1px solid var(--c-d8dcd3);text-align:center;vertical-align:middle;white-space:nowrap}
#studio .export-table thead th{background:var(--c-f6f5f3);font-weight:600}
#studio .export-ratio{font-size:12px}
#studio .export-site{font-size:11px;font-weight:400;color:var(--t-59626d)}
#studio .export-table :is(.export-corner,.export-image){position:sticky;left:0;z-index:1;background:var(--c-ffffff);text-align:left}
#studio .export-table thead .export-corner{background:var(--c-f6f5f3)}
#studio .export-image{display:table-cell}
#studio .export-image img{display:block;width:56px;height:auto;max-height:56px;object-fit:contain;margin-bottom:4px;border:1px solid var(--c-d8dcd3)}
#studio .export-image b{display:block;font-size:12px}
#studio .export-image small{font-size:10px;color:var(--t-59626d)}
#studio .export-cell[data-state="ok"]{color:var(--t-244c3e)}
#studio .export-cell[data-state="running"]{color:var(--t-303e67)}
#studio .export-cell[data-state="missing"],#studio .export-cell[data-state="none"]{color:var(--t-59626d)}
#studio .export-cell small{display:block;font-size:10px;color:var(--t-59626d)}
#studio .export-dl{font-weight:700;text-decoration:none;color:var(--t-4858a3)}
#studio .export-dl:hover{text-decoration:underline}
#studio .export-blocks{display:none}
#studio .export-block{padding:10px 0;border-top:1px solid var(--c-d8dcd3)}
#studio .export-block-head{display:flex;align-items:center;gap:8px}
#studio .export-block-head img{width:44px;height:44px;object-fit:contain;border:1px solid var(--c-d8dcd3)}
#studio .export-tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none}
#studio .export-tag{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border:1px solid var(--c-d8dcd3);border-radius:999px;font-size:12px}
#studio .export-tag[data-state="ok"]{border-color:var(--c-c8cfee)}
#studio .export-tag small{font-size:10px;color:var(--t-59626d)}
@media (max-width:760px){#studio .export-table-wrap{display:none}#studio .export-blocks{display:block}}
/* Image kind (image-type-form.js), 「画像に入る文字」 and the reminder before generating (generate-check.js). */
#studio .type-pick{display:grid;gap:6px;margin:4px 0 12px}
#studio .type-tabs-label{margin:0;font-size:12px;font-weight:600;color:var(--t-26302e)}
#studio .type-tabs{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--c-d8dcd3);border-radius:3px;background:var(--c-ffffff);overflow:hidden}
#studio .type-tab{flex:1 1 auto;min-height:36px;padding:0 10px;border:0;border-right:1px solid var(--c-d8dcd3);background:transparent;color:var(--t-26302e);font:inherit;font-size:12px;cursor:pointer;white-space:nowrap}
#studio .type-tab:last-child{border-right:0}
#studio .type-tab[aria-pressed="true"]{background:var(--c-242d28);color:var(--t-ffffff)}
#studio .type-tab:focus-visible{outline:2px solid var(--c-384bff);outline-offset:-2px}
#studio .type-own[hidden],#studio .type-field[hidden]{display:none}
#studio .type-own-hint{margin-left:8px;color:var(--t-59626d)}
#studio .type-field{display:grid;gap:4px}
#studio .type-own.is-entering{animation:type-in .2s ease-out}
@keyframes type-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
#studio .image-texts{margin:12px 0;padding:10px 12px;border-left:3px solid var(--c-c8cfee);background:var(--c-f5f6ff)}
#studio .image-texts-title{margin:0 0 6px;font-size:12px;font-weight:600;color:var(--t-303e67)}
#studio .image-texts-list{display:grid;gap:3px;margin:0;padding:0;list-style:none;font-size:12px;line-height:1.6}
#studio .image-texts-list li{display:flex;flex-wrap:wrap;gap:2px 8px}
#studio .image-texts-label{min-width:7em;color:var(--t-59626d)}
#studio .image-texts-value{color:var(--t-26302e);overflow-wrap:anywhere}
#studio .image-texts-none{color:var(--t-59626d)}
#studio .generate-check{margin:12px 0}
#studio .generate-check-title{margin:0 0 8px;font-size:14px}
#studio .generate-check-list{display:grid;gap:6px;margin:0 0 10px;padding:0;list-style:none;font-size:12px;line-height:1.7}
#studio .generate-check-list li{display:flex;flex-wrap:wrap;gap:2px 6px}
#studio .generate-check-list b{width:100%;font-weight:600}
#studio .generate-check-value+.generate-check-value::before{content:'、';color:var(--t-59626d)}
#studio .generate-check-strong{margin:0 0 10px;font-size:12px;font-weight:600;color:var(--t-4a3d22)}
#studio .generate-check-strong[hidden]{display:none}
#studio .generate-check.is-strong{border-color:var(--c-c58b1c);background:var(--c-fbf6ea)}
#studio .generate-check-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px 16px}
#studio .generate-check-go{background:var(--c-384bff);border-color:var(--c-384bff);color:var(--t-ffffff)}
/* One main button: while the note is open, its 「このまま作る」 stands in for 「この内容で仕上げる」. */
#studio.is-checking #generate,#studio.is-checking #cost-caption{display:none}
@media (max-width:760px){#studio .type-tab{flex:1 1 30%}}
@media (prefers-reduced-motion:reduce){#studio .type-own.is-entering{animation:none}}
/* 写真の用途 (catalog.js) */
#studio .photo-purpose-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:6px 0 10px;font-size:12px;color:var(--t-59626d)}
#studio .photo-purpose-row select,#studio .photo-purpose{min-height:32px;padding:0 6px;border:1px solid var(--c-d8dcd3);border-radius:3px;background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:11px}
#studio .catalog-photo .photo-purpose{width:100%;margin-top:4px}

/* 増やす ② 枚数を増やす (2026-10-22, grow-count.js): cards in a grid, one form open below it, the confirmation and the
   progress of the run. The set strip at the top of 確かめる and 書き出す. Theme variables only. */
#studio .grow-count{margin:0 0 14px;padding:14px 16px 16px;border:1px solid var(--c-d8dcd3);background:var(--c-ffffff)}
#studio .grow-count[hidden]{display:none}
#studio .grow-count-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:0 0 10px}
#studio .grow-count-head h3{margin:0;font-size:14px}
#studio .grow-count-hint{margin:0;font-size:12px;color:var(--t-59626d)}
#studio .grow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#studio .grow-card{position:relative;display:grid;gap:6px;min-width:0;padding:10px;border:1px solid var(--c-d8dcd3);border-radius:3px;background:var(--c-ffffff);transition:border-color .2s,transform .2s,opacity .2s}
#studio .grow-card.is-lead,#studio .grow-card.is-made{grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto 1fr;align-content:start;column-gap:10px;background:var(--c-f6f5f3);opacity:.78}
#studio .grow-card.is-lead .grow-card-pic,#studio .grow-card.is-made .grow-card-pic{grid-area:auto;grid-column:1;grid-row:1/4;width:56px;height:42px}
#studio .grow-card-name{font-size:13px;font-weight:600;color:var(--t-26302e)}
#studio .grow-card-sub,#studio .grow-card-done{font-size:11px;color:var(--t-59626d)}
#studio .grow-card-open{display:grid;grid-template-columns:22px minmax(0,1fr) auto;grid-template-areas:"icon name badge";align-items:center;gap:8px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
#studio .grow-card-open:focus-visible{outline:2px solid var(--c-384bff);outline-offset:3px}
#studio .grow-card-icon{grid-area:icon;width:22px;height:22px;color:var(--t-59626d)}
#studio .grow-card-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#studio .grow-card-open .grow-card-name{grid-area:name;overflow:hidden;overflow-wrap:anywhere;line-height:1.3}
#studio .grow-card-open .task-badge{grid-area:badge}
#studio .grow-card-open .grow-card-pic{grid-column:1/3;grid-row:2;width:56px;height:42px}
#studio .grow-card-open .grow-card-note{grid-column:2/4;grid-row:2;padding-left:36px}
#studio .grow-card-pic{display:block;overflow:hidden;border-radius:2px;background:var(--c-f6f5f3)}
#studio .grow-card-pic img{width:100%;height:100%;object-fit:cover;display:block}
#studio .grow-card-note{font-size:11px;line-height:1.4;color:var(--t-4a3d22)}
#studio .grow-card-tick{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t-59626d);cursor:pointer}
#studio .grow-card-tick input{width:16px;height:16px;margin:0;accent-color:var(--c-384bff)}
#studio .grow-card.is-made-next{border-color:var(--c-384bff)}
#studio .grow-card.is-open{box-shadow:inset 0 0 0 1px var(--c-384bff);border-color:var(--c-384bff)}
#studio .grow-card[draggable="true"]{cursor:grab}
#studio .grow-card.is-dragging{opacity:.5}
#studio .grow-card.is-drop{transform:translateY(-2px);border-color:var(--c-384bff)}
#studio .grow-why{margin:10px 0 0;font-size:12px;color:var(--t-59626d)}
#studio .grow-why[hidden]{display:none}
#studio .grow-form{margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--c-d8dcd3);animation:grow-form-in .2s ease-out}
#studio .grow-form[hidden]{display:none}
@keyframes grow-form-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
#studio .grow-form-head{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
#studio .grow-form-head h4{margin:0;font-size:14px}
#studio .grow-form-hint,#studio .grow-form-label{font-size:12px;color:var(--t-59626d)}
#studio .grow-form-row{display:grid;gap:6px;margin:0 0 12px}
#studio .grow-form-note{margin:0;font-size:12px;color:var(--t-4a3d22)}
#studio .grow-photos{display:flex;flex-wrap:wrap;gap:8px}
#studio .grow-photo{display:grid;justify-items:center;gap:4px;width:84px;padding:4px;border:1px solid var(--c-d8dcd3);border-radius:3px;background:var(--c-ffffff);color:var(--t-59626d);font:inherit;font-size:10px;cursor:pointer}
#studio .grow-photo img{width:74px;height:56px;object-fit:cover;display:block}
#studio .grow-photo[aria-checked="true"]{border-color:var(--c-384bff);box-shadow:inset 0 0 0 1px var(--c-384bff);color:var(--t-26302e)}
#studio .grow-photo-add{align-content:center;min-height:82px;font-size:11px}
#studio .grow-photo:focus-visible{outline:2px solid var(--c-384bff);outline-offset:2px}
#studio .grow-fields{display:grid;gap:10px;margin:0 0 12px}
#studio .grow-field{display:grid;gap:4px;font-size:12px;color:var(--t-26302e)}
#studio .grow-field-top{display:flex;align-items:center;gap:8px}
#studio .grow-from{font-size:10px;color:var(--t-59626d);padding:1px 6px;border:1px solid var(--c-d8dcd3);border-radius:999px}
#studio .grow-from[hidden]{display:none}
#studio .grow-field input,#studio .grow-field textarea{width:100%;box-sizing:border-box;min-height:36px;padding:7px 9px;border:1px solid var(--c-d8dcd3);border-radius:3px;background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:13px}
#studio .grow-texts{padding:10px 12px;background:var(--c-f6f5f3);border-radius:3px}
#studio .grow-texts ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:4px;font-size:12px}
#studio .grow-texts li{display:flex;gap:8px;min-width:0}
#studio .grow-text-label{flex:none;min-width:7em;color:var(--t-59626d)}
#studio .grow-text-none{color:var(--t-59626d)}
#studio .grow-confirm{margin:14px 0 0;padding:14px 16px;border:1px solid var(--c-384bff);border-radius:3px;background:var(--c-f5f6ff)}
#studio .grow-confirm[hidden]{display:none}
#studio .grow-confirm h4{margin:0 0 8px;font-size:14px}
#studio .grow-confirm-list{margin:0 0 8px;padding:0 0 0 18px;font-size:13px;display:grid;gap:4px}
#studio .grow-confirm-skip{color:var(--t-4a3d22)}
#studio .grow-confirm-total{margin:0 0 10px;font-size:12px;color:var(--t-59626d)}
#studio .grow-confirm-total b{color:var(--t-26302e)}
#studio .grow-confirm-total span:last-child{display:block;margin-top:2px}
#studio .grow-confirm-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:12px}
#studio .grow-progress{margin:14px 0 0}
#studio .grow-progress[hidden]{display:none}
#studio .grow-progress-line{margin:0 0 6px;font-size:13px}
#studio .grow-steps{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:12px}
#studio .grow-step{display:flex;flex-wrap:wrap;gap:4px 10px;padding:6px 0;border-bottom:1px solid var(--c-d8dcd3)}
#studio .grow-step-state{color:var(--t-59626d)}
#studio .grow-step[data-state="completed"] .grow-step-state{color:var(--t-244c3e)}
#studio .grow-step[data-state="failed"] .grow-step-state,#studio .grow-step-error,#studio .grow-progress-error{color:var(--t-4a3d22)}
#studio .grow-step-error{flex-basis:100%;margin:0}
#studio .grow-step-sec{color:var(--t-59626d)}
#studio .set-strip{display:flex;gap:8px;margin:0 0 14px;overflow-x:auto;padding:2px}
#studio .set-strip[hidden]{display:none}
#studio .set-strip-item{flex:none;display:grid;grid-template-columns:44px auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:5px 10px 5px 5px;border:1px solid var(--c-d8dcd3);border-radius:3px;background:var(--c-ffffff);color:var(--t-26302e);font:inherit;text-align:left;cursor:pointer}
#studio .set-strip-item img{grid-row:1/3;width:44px;height:44px;object-fit:cover;display:block}
#studio .set-strip-label{font-size:12px;font-weight:600}
#studio .set-strip-item small{font-size:11px;color:var(--t-59626d)}
#studio .set-strip-item[aria-current="true"]{border-color:var(--c-384bff);box-shadow:inset 0 0 0 1px var(--c-384bff);cursor:default}
#studio .set-strip-item:focus-visible{outline:2px solid var(--c-384bff);outline-offset:2px}
#studio .type-apart{margin:6px 0 0;font-size:12px;color:var(--t-4a3d22)}
#studio .type-apart[hidden]{display:none}
@media (max-width:760px){#studio .grow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#studio .grow-count{padding:12px}
  #studio .grow-card-open{grid-template-columns:22px minmax(0,1fr);grid-template-areas:"icon name" "badge badge"}
  #studio .grow-card-open .task-badge{justify-self:start}
  #studio .grow-card-open .grow-card-name{white-space:normal}
  #studio .grow-card-open .grow-card-pic{grid-row:3}
  #studio .grow-card-open .grow-card-note{grid-column:1/3;grid-row:4;padding-left:0}}
#studio .grow-form-note[hidden]{display:none}
@media (prefers-reduced-motion:reduce){#studio .grow-form{animation:none}#studio .grow-card{transition:none}}

/* 掲載イメージ (2026-10-22, list-preview.js): one line in 確かめる, and a window with the image at the lists' sizes on
   plain grey cards (bars instead of titles; no site look). Theme variables only. */
#studio .list-look{display:block;padding:12px 16px;border:1px solid var(--c-d8dcd3);background:var(--c-ffffff);margin:0 0 12px}
#studio .list-look[hidden]{display:none}
#studio .list-look-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
#studio .list-look-head h3{margin:0;font-size:14px}
#studio .list-look-hint{margin:4px 0 0;font-size:12px;color:var(--t-59626d)}
#studio .list-preview{width:min(1320px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:1px solid var(--c-d8dcd3);border-radius:4px;background:var(--c-ffffff);color:var(--t-26302e)}
#studio .list-preview::backdrop{background:var(--c-242d28);opacity:.55}
#studio .list-preview-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--c-d8dcd3)}
#studio .list-preview-head h2{margin:0;font-size:15px}
#studio .list-preview-note{margin:10px 16px 0;font-size:12px;color:var(--t-59626d)}
#studio .list-preview-body{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px;padding:16px;overflow-x:auto}
#studio .list-tile{flex:none;margin:0;padding:8px;background:var(--c-f6f5f3);border-radius:3px;box-sizing:content-box}
#studio .list-tile img{display:block;width:100%;height:auto;background:var(--c-ffffff)}
#studio .list-bars{display:grid;gap:5px;margin:8px 0 6px}
#studio .list-bar{display:block;height:8px;border-radius:2px;background:var(--c-d8dcd3)}
#studio .list-bar.is-short{width:62%}
#studio .list-bar.is-price{width:34%;height:10px}
#studio .list-tile-cap{display:grid;gap:2px;font-size:12px}
#studio .list-tile-cap small{color:var(--t-59626d);font-size:11px}
@media (max-width:760px){#studio .list-preview-body{padding:12px;gap:14px}#studio .list-tile{max-width:calc(100% - 16px)}}

/* 文字の割合を測る (2026-10-22, text-grid.js): a thin 10×10 grid over the image; marked cells are tinted; the count turns
   to the warning colours above 20%. Theme variables only. */
.tg-toggle{min-height:28px;padding:0 10px;border:1px solid var(--c-d8dcd3);border-radius:999px;background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:11px;cursor:pointer;white-space:nowrap}
.tg-toggle[aria-pressed="true"]{border-color:var(--c-384bff);color:var(--t-303e67);background:var(--c-f5f6ff)}
.tg-toggle:focus-visible{outline:2px solid var(--c-384bff);outline-offset:2px}
.tg-count{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;background:var(--c-e5ece4);color:var(--t-244c3e);font-size:11px;font-weight:600}
.tg-count[hidden]{display:none}
.tg-count[data-over="true"]{background:var(--c-fbf6ea);color:var(--t-4a3d22)}
.iv-pane.iv-now,.studio-detail-frame{position:relative}
.tg-grid{position:absolute;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);touch-action:none;z-index:2}
.tg-grid[hidden]{display:none}
.tg-lines{position:absolute;inset:0;pointer-events:none;opacity:.8;background-image:linear-gradient(to right,var(--c-ffffff) 1px,var(--c-242d28) 1px,var(--c-242d28) 2px,transparent 2px),linear-gradient(to bottom,var(--c-ffffff) 1px,var(--c-242d28) 1px,var(--c-242d28) 2px,transparent 2px);background-size:10% 10%;box-shadow:inset 0 0 0 1px var(--c-ffffff)}
.iv-win>.tg-count{display:block;width:max-content;margin:8px 12px 0}
.iv-win.is-min>.tg-count{display:none}
.tg-cell{position:relative;margin:0;padding:0;border:0;background:transparent;cursor:pointer}
.tg-cell::before{content:"";position:absolute;inset:1px;background:var(--c-384bff);opacity:0;transition:opacity .12s}
.tg-cell:hover::before{opacity:.18}
.tg-cell[aria-pressed="true"]::before{opacity:.42}
.tg-cell:focus-visible{outline:2px solid var(--c-384bff);outline-offset:-2px;z-index:1}
@media (prefers-reduced-motion:reduce){.tg-cell::before{transition:none}}

/* 自治体提出用シート (2026-10-22, submit-sheet.js): a row under the 書き出す table on screen; on paper one A4 page,
   white paper and black ink whatever the theme (the --c-fefefe / --t-1a1a1a / --c-c8c8c8 tokens have no dark value). */
#studio .submit-sheet-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 14px}
#studio .submit-sheet-row[hidden]{display:none}
#studio .submit-sheet-note{font-size:12px;color:var(--t-59626d)}
#submit-sheet{display:none}
@media print{
  @page{size:A4 portrait;margin:12mm}
  html.printing-sheet,html.printing-sheet body{background:var(--c-fefefe)!important}
  html.printing-sheet body>*:not(#submit-sheet){display:none!important}
  html.printing-sheet #submit-sheet{display:block;color:var(--t-1a1a1a);background:var(--c-fefefe);font:10pt/1.5 "Hiragino Sans","Yu Gothic","Meiryo",sans-serif}
  #submit-sheet .ss-head{border-bottom:1.5pt solid var(--t-1a1a1a);padding-bottom:4mm;margin-bottom:4mm}
  #submit-sheet .ss-kicker{margin:0;font-size:9pt;letter-spacing:.08em}
  #submit-sheet .ss-title{margin:1mm 0;font-size:18pt;line-height:1.3}
  #submit-sheet .ss-meta{margin:0;font-size:9.5pt}
  #submit-sheet h2{margin:5mm 0 2mm;font-size:11pt;border-left:2.5pt solid var(--t-1a1a1a);padding-left:2mm}
  #submit-sheet .ss-images{display:grid;grid-template-columns:repeat(3,1fr);gap:3mm}
  #submit-sheet .ss-image{margin:0;break-inside:avoid}
  #submit-sheet .ss-image img{display:block;width:100%;height:auto;border:.5pt solid var(--c-c8c8c8)}
  #submit-sheet .ss-image figcaption{font-size:8.5pt;margin-top:1mm}
  #submit-sheet .ss-table{width:100%;border-collapse:collapse;font-size:9pt}
  #submit-sheet .ss-table th,#submit-sheet .ss-table td{border:.5pt solid var(--c-c8c8c8);padding:1mm 2mm;text-align:left}
  #submit-sheet .ss-pre{margin:0;white-space:pre-wrap;font:inherit}
  #submit-sheet .ss-note{margin-top:5mm;font-size:8.5pt;border-top:.5pt solid var(--c-c8c8c8);padding-top:2mm}
  #submit-sheet .ss-ailook{margin-top:4mm;font-size:8.5pt}
}

/* 2026-10-22 phone / dark pass (P8-2): the 増やす confirmation's button in brand blue (readable in both themes), and
   on phones the bottom bar puts its sentence above a full-width button instead of squeezing it. */
#studio .grow-confirm-yes{background:var(--c-384bff);border-color:var(--c-384bff);color:var(--t-ffffff)}
@media (max-width:760px){
  #studio .task-foot{flex-wrap:wrap;justify-content:stretch;gap:8px;padding-top:20px;background:linear-gradient(to bottom,transparent,var(--c-f2f1ec) 16px)}
  #studio .task-foot .task-next-note{flex:1 1 100%}
  #studio .task-foot .task-next{flex:1 1 100%}
}

/* AI っぽさチェック (ai-look-panel.js, 2026-10-23): nine groups, one row each; colours from theme.css only. */
#studio .ai-look{margin:14px 0 0;padding:14px;border:1px solid var(--c-c9cfc2);background:var(--c-ffffff);font-size:12px;line-height:1.7;color:var(--t-26302e)}
#studio .ai-look-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
#studio .ai-look-head h3{margin:0;font-size:14px}
#studio .ai-look-sub{color:var(--t-59626d);margin-right:auto}
#studio .ai-look-help{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid var(--c-c9cfc2);border-radius:50%;color:var(--t-26302e);text-decoration:none;font-weight:700}
#studio .ai-look-help:hover,#studio .ai-look-help:focus-visible{border-color:var(--c-384bff);color:var(--t-384bff)}
#studio .ai-look-lead{margin:6px 0 10px;color:var(--t-59626d)}
#studio .ai-look-from{margin:-4px 0 10px;font-size:12px;color:var(--t-59626d)}
#studio .ai-look-groups{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#studio .ai-look-group details{border:1px solid var(--c-d8dcd3);background:var(--c-fafaf7)}
#studio .ai-look-group[data-result="concern"] details{border-color:var(--c-d9c9a3)}
#studio .ai-look-group summary{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:9px 12px;cursor:pointer;list-style:none}
#studio .ai-look-group summary::-webkit-details-marker{display:none}
#studio .ai-look-name{font-weight:700;font-size:13px}
#studio .ai-look-dots{color:var(--t-59626d);margin-right:auto;min-width:0}
#studio .ai-look-sep{margin:0 2px;color:var(--t-9aa293)}
#studio .ai-look-items{list-style:none;margin:0;padding:0 12px 4px;display:grid;gap:8px}
#studio .ai-look-item{display:flex;gap:8px;align-items:flex-start;padding-top:8px;border-top:1px solid var(--c-e5e8df)}
#studio .ai-look-text{display:grid;gap:2px;min-width:0}
#studio .ai-look-label{font-size:12.5px}
#studio .ai-look-desc{color:var(--t-26302e)}
/* 自動チェック (2026-10-23): each group's items and 並べて見る; the two choices appear only when something was found. */
#studio .ai-look-group .ai-look-compare{display:inline-block;margin:6px 12px 10px}
#studio .ai-look-choices{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
#studio .ai-look .ai-look-ai-result{margin-bottom:14px}
#studio .ai-look-fix-go{min-height:36px;padding:0 16px;font-size:12.5px}
#studio .ai-look-ai-list li[data-kept="true"]{opacity:.7}
#studio .ai-look-box[data-kept="true"]{border-style:dashed}
#studio .iv-zoom{display:flex;align-items:center;gap:4px;margin-top:4px}
#studio .iv-zoom-label{margin-right:auto;font-size:12px;color:var(--t-59626d)}
#studio .iv-now canvas{touch-action:none}
#studio .ai-look-ai{margin-top:12px;padding-top:12px;border-top:1px solid var(--c-e5e8df)}
#studio .ai-look-ai-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
#studio .ai-look-ai-run{min-height:36px;padding:0 14px;border:1px solid var(--c-242d28);background:var(--c-ffffff);color:var(--t-26302e);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
#studio .ai-look-ai-run:disabled{opacity:.55;cursor:default}
#studio .ai-look-ai-left{color:var(--t-59626d)}
#studio .ai-look-ai-off{margin:6px 0 0}
#studio .ai-look-ai-result{display:grid;gap:8px;margin-top:10px}
#studio .ai-look-ai-figure{position:relative;justify-self:start;max-width:min(100%,420px);line-height:0}
#studio .ai-look-ai-figure img{display:block;max-width:100%;height:auto;border:1px solid var(--c-d8dcd3)}
#studio .ai-look-box{position:absolute;padding:0;border:2px solid var(--c-c58b1c);background:transparent;color:var(--t-ffffff);font:600 11px/1 inherit;cursor:pointer}
#studio .ai-look-box::before{content:attr(aria-label);position:absolute;left:-2px;top:-2px;transform:translateY(-100%);padding:2px 5px;background:var(--c-c58b1c);color:var(--t-ffffff);font-size:11px;line-height:1.3;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
#studio .ai-look-box:hover,#studio .ai-look-box:focus-visible{border-width:3px;outline:none}
#studio .ai-look-ai-list{list-style:none;margin:0;padding:0;display:grid;gap:4px}
#studio .ai-look-ai-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;width:100%;padding:6px 8px;border:1px solid var(--c-d8dcd3);background:var(--c-fafaf7);color:var(--t-26302e);font:inherit;text-align:left;cursor:pointer}
#studio .ai-look-ai-n{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:999px;background:var(--c-c58b1c);color:var(--t-ffffff);font-size:11px}
#studio .ai-look-ai-group{color:var(--t-59626d)}
#studio .ai-look-ai-label{font-weight:600}
#studio .ai-look-ai-reason{flex-basis:100%}
#studio .ai-look-ai-sure{color:var(--t-59626d);font-size:11px}
#studio .ai-look-ai-none,#studio .ai-look-ai-note{margin:0;color:var(--t-59626d)}
/* よく使われる場所 (2026-10-24, ratio-sites.js): which sites use the chosen ratio, under 作る's ratio and 画像を直す's
   比率を変える, and every ratio in one window. Theme variables only. */
#studio .ratio-sites{margin:2px 0 12px;padding:10px 12px;border:1px solid var(--c-d8dcd3);border-radius:6px;background:var(--c-ffffff);font-size:12px;line-height:1.6;color:var(--t-26302e)}
#studio .ratio-sites[hidden]{display:none}
#studio .ratio-sites-top{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
#studio .ratio-sites-top b{font-size:12.5px;font-weight:600}
#studio .ratio-sites-top small{font-size:11px;color:var(--t-59626d)}
#studio .ratio-sites-all{margin-left:auto;font-size:12px}
#studio .ratio-groups{display:grid;gap:3px;margin:0;padding:0;list-style:none}
#studio .ratio-group{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:0 8px;align-items:baseline}
#studio .ratio-group-label{font-weight:600;color:var(--t-59626d)}
#studio .ratio-site{display:inline-flex;align-items:baseline;gap:3px;overflow-wrap:anywhere}
#studio .ratio-site-note{padding:0 5px;border:1px solid var(--c-d8dcd3);border-radius:999px;font-size:10px;line-height:1.5;color:var(--t-59626d)}
#studio .ratio-sep{color:var(--t-59626d)}
#studio .ratio-more{margin-left:6px;color:var(--t-59626d)}
#studio .ratio-none{color:var(--t-59626d)}
#studio .ratio-plan{margin:8px 0 0;padding:6px 10px;border-left:3px solid var(--c-384bff);background:var(--c-f5f6ff);color:var(--t-303e67);overflow-wrap:anywhere}
#studio .ratio-plan b{font-weight:600;margin-right:2px}
#studio .ratio-plan-names{font-weight:600}
#studio .ratio-sites-dialog{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:1px solid var(--c-d8dcd3);border-radius:4px;background:var(--c-ffffff);color:var(--t-26302e)}
#studio .ratio-sites-dialog::backdrop{background:var(--c-242d28);opacity:.55}
#studio .ratio-sites-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--c-d8dcd3);background:var(--c-ffffff)}
#studio .ratio-sites-head h2{margin:0;font-size:15px}
#studio .ratio-sites-close{width:32px;height:32px;border:0;background:transparent;font:inherit;font-size:20px;line-height:1;color:var(--t-26302e);cursor:pointer}
#studio .ratio-sites-note{margin:10px 16px 0;font-size:12px;color:var(--t-59626d)}
#studio .ratio-sites-table{display:grid;gap:0;padding:6px 16px 16px;font-size:12px;line-height:1.6}
#studio .ratio-sites-row{padding:10px 0;border-bottom:1px solid var(--c-e5e8df)}
#studio .ratio-sites-row:last-child{border-bottom:0}
#studio .ratio-sites-row.is-current{margin:0 -8px;padding:10px 8px;background:var(--c-f5f6ff)}
#studio .ratio-sites-row h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 4px;font-size:13px}
#studio .ratio-sites-row h3 small{font-size:11px;font-weight:400;color:var(--t-59626d)}
@media (max-width:760px){#studio .ratio-group{grid-template-columns:minmax(0,1fr)}}