/* ZIP の作業区を基準に、各ツールの共通の箱と操作部品をそろえる。
   ファイル処理の状態は各 module が持ち、この層は見た目だけを担当する。
   外枠だけ content-box。既存の表・crop・canvas は border-box を維持する。 */
.tw-v5{--blue:#2B6FD6;--blue-d:#225BB0;--blue-l:#4A90E2;--tint:#F2F7FE;--ink:#1D2632;--ink2:#4A5564;--mute:#8893A3;--line:#E6EBF1;--bg:#FAFBFC;--gutter:clamp(10px,2vw,24px);color:var(--ink);font-family:var(--font-body);line-height:1.75;background:#fff}
.kz-main.tw-v5{width:100%;max-width:none;margin:0;border:0}
.tw-v5 .tw-band{background-color:#F6F8FB;background-image:linear-gradient(rgba(29,38,50,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(29,38,50,.06) 1px,transparent 1px);background-size:44px 44px;background-position:center top}
.tw-v5 .tw-wrap{box-sizing:content-box;max-width:1080px;margin:0 auto;padding:clamp(20px,3.4vw,40px) clamp(10px,2vw,24px) clamp(28px,4.4vw,56px)}
.tw-v5 .kz-intro{padding:0 8px;margin:0 0 14px}
.tw-v5 .kz-intro>.kz-wrap{max-width:none;padding:0;margin:0}
.tw-v5 .kz-crumb{font-size:12px;line-height:1.75;color:var(--mute);gap:7px}
.tw-v5 .kz-crumb a{display:inline;min-height:0;color:inherit}
.tw-v5 .kz-crumb a:hover{color:var(--blue)}
.tw-v5 .kz-head{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin-top:4px}
.tw-v5 .kz-h1{margin:0;font-family:var(--font-display);font-size:clamp(23px,2.6vw,32px);line-height:1.45;font-weight:700;letter-spacing:0;max-width:none}
.tw-v5 .kz-lede{margin:0;font-size:13px;line-height:1.75;color:var(--ink2);max-width:none}
.tw-v5 .kz-wb{padding:0;margin:0}
.tw-v5 .tw-workspace{box-sizing:border-box;width:100%;max-width:none;margin:0;padding:10px;display:flex;flex-direction:row;flex-wrap:wrap;gap:14px;align-items:stretch;border:1px solid rgba(255,255,255,.95);border-radius:20px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(29,38,50,.06),0 16px 40px rgba(29,38,50,.08)}

/* 操作切替を結果 panel から独立させ、入力前にも使える位置へ置く。 */
.tw-v5 .tw-modebar{flex:1 0 100%;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;order:-2;margin:0;padding:2px 2px 0;border:0;border-radius:0;background:transparent}
.tw-v5 .tw-modebar :is([role=tab],.rr-tab,.pv-tab){position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;flex:0 1 auto;min-height:40px;padding:0 16px;border:0;border-radius:10px;background:transparent;color:var(--ink2);font-family:inherit;font-size:14px;font-weight:400;line-height:1.75;white-space:nowrap;text-decoration:none;box-shadow:none}
.tw-v5 .tw-modebar [role=tab]{cursor:pointer}
.tw-v5 .tw-modebar [aria-selected=true],.tw-v5 .tw-modebar .pv-tab{background:var(--ink);color:#fff;font-weight:700}
.tw-v5 .tw-modebar [role=tab]:disabled{cursor:default;opacity:.45}
.tw-v5 .tw-modebar [role=tab]::after{content:"";position:absolute;inset:-2px 0}
.tw-v5 .tw-modebar :is(.kz-tabs__note,.rr-headnote){flex:1 1 180px;margin:0;text-align:right;font-size:12px;line-height:1.5;color:var(--mute)}
.tw-v5 .tw-workspace>.kz-tabs__mnote{flex-basis:100%;order:-1;margin:0;padding:0 8px;font-size:12px;line-height:1.5;color:var(--mute)}

/* 初期状態は大きな入力面だけを見せ、何もない結果欄を並べない。 */
.tw-v5 .tw-workspace>:is(.kz-zone,.tw-dropzone){flex:1 1 100%;margin:0}
.tw-v5 .tw-dropzone{margin:0}
.tw-v5 :is(.kz-zone,.tw-dropzone){box-sizing:border-box;min-width:0;min-height:clamp(318px,calc(28vw + 58px),398px);padding:28px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;border:1.5px dashed #aac4ec;border-radius:14px;background:#fff;color:var(--ink2);transition:border-color .15s,background .15s}
.tw-v5 :is(.kz-zone,.tw-dropzone).is-over{border:1.5px solid var(--blue);background:var(--tint)}
.tw-v5 :is(.kz-zone,.tw-dropzone)>svg{box-sizing:content-box;flex:none;width:24px;height:24px;padding:16px;border-radius:16px;background:var(--tint);color:var(--blue)}
.tw-v5 :is(.kz-zone__title,.id-empty__title){margin:0;font-family:var(--font-display);font-size:16px;line-height:1.75;font-weight:700;color:var(--ink)}
.tw-v5 :is(.kz-zone__body,.id-empty__body){max-width:34em;margin:0;font-size:13px;line-height:1.75;color:var(--ink2)}
.tw-v5 :is(.kz-zone__limits,.id-empty__limits){margin:0;font-size:12px;line-height:1.75;color:var(--mute)}
.tw-v5 .kz-zone__cta{margin:0}
.tw-v5[data-tw-state=empty] .tw-workspace:has(>.kz-zone:not([hidden]))>.kz-panel{display:none}
.tw-v5[data-tw-state=empty] .tw-workspace>.kz-panel{border:0;border-radius:0;background:transparent}
.tw-v5[data-tw-state=empty] .kz-actions{display:none}

/* 入力後は選択対象と実際の結果を並べる。機能固有の高さや crop 比率は変えない。 */
.tw-v5 .tw-workspace>.kz-slim{flex:1 1 220px;min-width:0;margin:0;padding:18px;border:1px solid var(--line);border-radius:14px;background:#F4F6F9}
.tw-v5 .tw-workspace>.kz-panel{flex:3 1 600px;min-width:0;display:flex;flex-direction:column;order:0;margin:0;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.tw-v5 .tw-workspace>.kz-panel>.kz-panel__body{min-width:0;display:flex;flex-direction:column;flex:1}
.tw-v5 .kz-empty{min-height:220px;padding:32px 20px;background:#fff}
.tw-v5 .kz-fhead{padding:16px 20px;background:#fff;border-color:var(--line)}
.tw-v5 .kz-actions{padding:16px 20px;background:#F7F9FC;border-color:var(--line)}
.tw-v5 .kz-btn{font-family:inherit;font-size:14.5px;font-weight:700;line-height:1.2;border-radius:9px;box-shadow:none}
.tw-v5 .kz-btn--lg{min-height:48px;padding:0 28px;border-radius:11px}
.tw-v5 .kz-btn--primary{background:var(--blue);color:#fff}
.tw-v5 .rr-blocked-actions .kz-btn--primary{background:var(--blue);color:#fff}
.tw-v5 .kz-btn--secondary{background:#fff;color:var(--ink2);border-color:#cdd6e2}
.tw-v5 .kz-btn:disabled{box-shadow:none}
.tw-v5 .kz-btn:not(:disabled):hover{transform:translateY(-1px)}
.tw-v5 .kz-btn--primary:not(:disabled):hover{background:var(--blue-d);color:#fff}
.tw-v5 .kz-doc{margin:0;background:#fff;padding:clamp(40px,5vw,64px) clamp(18px,2vw,24px);border-top:1px solid var(--line)}
.tw-v5 .kz-doc h2{font-family:var(--font-display);font-size:clamp(20px,2.1vw,25px);line-height:1.5;color:var(--ink)}
.tw-v5 .kz-doc p{font-size:14px;line-height:1.9;color:var(--ink2)}

@media(max-width:720px){
  .tw-v5 .tw-workspace{gap:12px}
  .tw-v5 .tw-modebar{gap:4px;padding:2px 2px 0}
  .tw-v5 .tw-modebar :is([role=tab],.rr-tab,.pv-tab){min-height:44px;padding:0 12px;font-size:13.5px}
  .tw-v5 .tw-modebar :is(.kz-tabs__note,.rr-headnote){display:none}
  .tw-v5 .tw-workspace>.kz-panel{flex-basis:100%;display:flex;border-radius:14px}
  .tw-v5 .tw-workspace>.kz-slim{flex-basis:100%;padding:14px 16px}
  .tw-v5 :is(.kz-zone,.tw-dropzone){min-height:318px;padding:28px 20px}
  .tw-v5 .kz-fhead,.tw-v5 .kz-actions{padding:14px 16px}
  .tw-v5 .kz-btn{min-height:44px}
  .tw-v5 .kz-crumb a{position:relative}
  .tw-v5 .kz-crumb a::after{content:"";position:absolute;inset:-13px -4px;min-height:44px;min-width:44px}
}
@media(prefers-reduced-motion:reduce){
  .tw-v5 :is(.kz-btn,.kz-zone,.tw-dropzone){transition:none}
  .tw-v5 .kz-btn:not(:disabled):hover{transform:none}
}