:root{color-scheme:dark;font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-size:15px;background:#141c29;color:#edf4ff;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}html,body{margin:0;height:100%;height:100dvh;overflow:hidden}button,select,input{font:inherit}button{color:inherit;background:#27364c;border:1px solid #45566f;border-radius:11px;padding:10px 12px;touch-action:manipulation;cursor:pointer}button:disabled{opacity:.4;cursor:default}button:active{filter:brightness(1.2)}button.primary{background:#2f83b8;border-color:#4fa0d6;color:white;font-weight:700}.square{width:40px;height:40px;padding:6px;font-size:18px}.mini{padding:7px 10px;font-size:12px}.danger{color:#ffb5a8}.text-btn{border:0;background:transparent;color:#b8c9da;font-size:12px;padding:8px}.quiet{color:#afc2d5;font-size:12px;line-height:1.7}
#app{height:100%;height:100dvh;display:flex;flex-direction:column;max-width:1100px;margin:auto;background:#182335;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.topbar{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:7px 13px;border-bottom:1px solid #33465c;background:#182335}.brand{display:flex;gap:8px;align-items:center;font-size:17px;font-weight:800;letter-spacing:.02em}.brand small{font-weight:500;font-size:10px;opacity:.65}.logo{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:#36a5d7;transform:rotate(-9deg)}.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #374760;background:#172334}.tabs button{border:0;border-radius:0;background:transparent;padding:14px 4px;color:#adc0d4;font-weight:650}.tabs button.active{color:#fff;border-bottom:3px solid #55b6df;background:#213248}.count{font-size:11px;background:#324a60;border-radius:9px;padding:2px 5px;font-weight:normal}
.panel{flex:1;min-height:0;display:flex;flex-direction:column}.panel[hidden],.overlay[hidden],[hidden]{display:none!important}.library-toolbar{display:flex;gap:7px;padding:12px 12px 7px}.library-toolbar button{flex:1}.library-note{font-size:12px;color:#a5bad0;line-height:1.55;padding:0 15px 10px}.library-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid #30425a}.library-item{width:100%;display:flex;align-items:center;gap:10px;text-align:left;border:0;border-bottom:1px solid #2c3d55;border-radius:0;background:transparent;padding:13px 16px;min-height:61px}.library-item.selected{background:#25405b;box-shadow:inset 4px 0 #63b8e1}.file-glyph{font-size:22px;flex:none}.library-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650;font-size:14px}.library-path{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8daac5;font-size:11px;margin-top:3px}.library-item .chevron{margin-left:auto;color:#86a9c9}.library-bottom{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-top:1px solid #344359;font-size:11px;color:#afc2d5;min-height:45px}.list-empty{padding:48px 20px;text-align:center;color:#b3c6da;line-height:1.9}
.stage-heading{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;min-height:57px;font-size:12px;color:#bacbdc}.viewport{flex:1;position:relative;min-height:160px;overflow:hidden;background:#e3e9ef}.viewport canvas{width:100%;height:100%;display:block;touch-action:none}.stage-panel .viewport{flex:1;min-height:190px}.empty-overview{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#537187;line-height:2;pointer-events:none}.stage-editor{flex:0 1 auto;max-height:49%;overflow-y:auto;background:#1b283a;padding:11px 12px 14px;box-shadow:0 -6px 18px #0002}.placed-list{display:flex;gap:7px;overflow-x:auto;min-height:43px;padding-bottom:6px;scrollbar-width:thin}.placed-chip{flex:none;max-width:170px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:8px 10px;font-size:12px;border-radius:9px}.placed-chip.active{border-color:#70c6f2;background:#26608a}.slider-row{display:flex;gap:10px;align-items:center;margin:8px 0;font-size:13px}.slider-row label{width:47px;flex:none}.slider-row input{min-width:0;flex:1;accent-color:#5cbbe9;height:23px}.slider-row output{text-align:right;min-width:51px;font-variant-numeric:tabular-nums;font-size:12px;color:#d2e8fa}.editor-actions{display:flex;justify-content:space-between;gap:5px;margin:10px 0 7px}.camera-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid #34485e;font-size:12px}.camera-row select{padding:5px;color:#e9f4ff;background:#27384a;border-radius:7px;border:1px solid #566b83}.toggle{white-space:nowrap}.camera-row input{accent-color:#54b5e9}
.overlay{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;background:#142030;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.overlay-head{display:flex;gap:9px;align-items:center;min-height:57px;padding:7px 12px;background:#18293c;border-bottom:1px solid #364d63}.overlay-title{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:700}.preview-viewport{flex:1;min-height:150px}.preview-loading{position:absolute;inset:0;display:grid;place-content:center;color:#537187;pointer-events:none;text-align:center;padding:22px;line-height:1.9}.preview-footer{padding:10px 13px 15px;flex:none}.preview-footer p{margin:2px 0 10px;min-height:18px}.preview-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.preview-actions button{padding:13px 9px}.photo-view{flex:1;min-height:0;display:grid;place-items:center;background:#0f1826;padding:12px}.photo-view img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 8px 24px #0008}.photo-bottom{padding:12px 13px 18px;font-size:13px;line-height:1.6}.photo-bottom p{margin:0 0 10px}.photo-bottom small{display:block;margin-top:8px;color:#a9bdd0}.help-content{padding:8px 20px 30px;overflow-y:auto;line-height:1.85;color:#dbe9f6}.help-content h2{font-size:18px}.help-content h3{font-size:15px}#toast{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,12px);opacity:0;z-index:99;pointer-events:none;background:#283d51;border:1px solid #6295bd;border-radius:12px;padding:12px 16px;width:max-content;max-width:90%;box-shadow:0 7px 22px #0008;transition:opacity .2s,transform .2s;font-size:12px;text-align:center}#toast.visible{opacity:1;transform:translate(-50%,0)}
@media (max-height:700px){.topbar{min-height:45px}.tabs button{padding:10px 4px}.stage-heading{min-height:48px}.stage-editor{max-height:52%}.slider-row{margin:5px 0}.preview-footer{padding-bottom:8px}}
@media (min-width:700px){.stage-editor{max-height:44%}.viewport{min-height:260px}}

/* α0.2.0: 3軸回転操作とiOSのフォルダ選択に関する説明 */
.rotation-caption{font-size:12px;font-weight:700;color:#d9efff;margin:9px 0 4px}
.folder-help{margin-top:8px;padding:9px 10px;border:1px solid #608bac;border-radius:9px;background:#24394e;color:#deecfa;line-height:1.65}

/* α0.2.2: 編集画面と撮影画像を3:4縦構図で統一 */
.stage-heading{gap:7px;flex-wrap:nowrap;justify-content:space-between;flex:none;min-height:56px;padding:7px 10px}
.portrait-title{font-size:12px;font-weight:800;white-space:nowrap;color:#eaf4ff}
.portrait-title small{font-size:10px;color:#8cb6d5}
.zoom-picker{font-size:11px;color:#d6e8f7;white-space:nowrap;display:flex;align-items:center;gap:4px;margin-left:auto}
.zoom-picker select{font-size:12px;background:#27384a;border:1px solid #566b83;color:#f1f7ff;border-radius:9px;padding:7px 4px;max-width:87px}
.stage-heading .mini{font-size:11px;padding:9px 7px;white-space:nowrap}
.stage-heading .primary{font-size:12px;white-space:nowrap;padding:10px 9px}
.stage-canvas-area{flex:1;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#111b28;padding:0 6px}
.stage-panel .stage-canvas-area .viewport{flex:none;min-width:0;min-height:0;width:auto;height:100%;aspect-ratio:3/4;box-shadow:0 2px 18px #0005;border:1px solid #476178;position:relative}
.stage-editor-shell{flex:none;min-height:0;display:flex;flex-direction:column;background:#1b283a;border-top:1px solid #3d536a}
.editor-toggle{display:block;width:100%;flex:none;border:0;border-radius:0;background:#20354b;color:#e3f3ff;font-size:13px;font-weight:750;padding:11px 12px;text-align:center}
.stage-editor-shell .stage-editor{flex:0 1 auto;max-height:min(44dvh,380px);overflow-y:auto;overscroll-behavior:contain;box-shadow:none;padding:12px 12px 15px}
.color-row{display:flex;align-items:center;gap:8px;margin:8px 0}
.color-row select{flex:1;min-width:0;padding:7px 5px;background:#263b50;border:1px solid #546d82;border-radius:7px;color:#e8f6ff;font-size:12px}
.color-row input[type=color]{flex:none;width:48px;height:36px;padding:3px;background:#263b50;border:1px solid #5c7991;border-radius:8px}
.color-row .mini{flex:none}
.color-help{font-size:11px;color:#93aec8;line-height:1.6}
@media(max-width:360px){.portrait-title small{display:none}.stage-heading{gap:3px;padding:7px 5px}.zoom-picker{gap:3px}.stage-heading .primary{padding:9px 6px}.stage-heading .mini{padding:8px 5px}}

/* α0.3.0: 一覧/サムネイル切替。必要なカードだけ遅延レンダリングする */
.library-view-switch{display:flex;align-items:center;gap:8px;padding:7px 12px;background:#1b2a3c;border-top:1px solid #34475c;flex-wrap:wrap}
.library-view-switch button{padding:7px 9px;font-size:12px}
.library-view-switch button.active{background:#2a658c;border-color:#70c6f2}
.view-hint{margin-left:auto;color:#89a6bf;font-size:10px}
.library-list.thumb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:9px;padding:10px 11px}
.thumb-grid .library-item{display:flex;flex-direction:column;align-items:stretch;border:1px solid #435b73;border-radius:13px;padding:7px;min-height:0;gap:5px;overflow:hidden}
.thumb-grid .library-item.selected{box-shadow:0 0 0 2px #64bce9 inset;background:#24435c}
.thumb-grid .library-item .file-glyph,.thumb-grid .library-item .chevron{display:none}
.thumb-grid .library-item .library-details{width:100%;min-width:0}
.thumb-grid .library-item .library-name{font-size:12px}
.thumb-grid .library-item .library-path{font-size:10px}
.thumbnail-box{height:140px;display:grid;place-items:center;background:linear-gradient(160deg,#dce6f0,#93a7b9);border-radius:9px;overflow:hidden;color:#395b77;font-size:12px;line-height:1.35;text-align:center;position:relative}
.thumbnail-box img{display:block;width:100%;height:100%;object-fit:contain}
.thumbnail-box .thumb-status{padding:5px 8px}
.thumb-grid .list-empty{grid-column:1/-1}
@media(min-width:700px){.library-list.thumb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-height:660px){.thumbnail-box{height:115px}}
.glb-content{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch;justify-content:center;padding:24px 18px;text-align:center;gap:9px}
.glb-icon{font-size:58px}.glb-content h2{font-size:20px;margin:4px 0}.glb-content p{color:#bacfe0;line-height:1.7}
.glb-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 4px}
.glb-actions button{padding:13px 8px}.glb-content .glb-tip{color:#8da8c0;font-size:12px}
@media(max-width:390px){.stage-heading .export-trigger{font-size:11px;padding:9px 5px}.stage-heading{gap:3px}}

/* α0.3.1: thumb-grid の暗黙行を圧縮させず、サムネイルを自然な高さで縦スクロール */
.library-list.thumb-grid{grid-auto-rows:max-content;align-items:start;-webkit-overflow-scrolling:touch}

/* α0.3.2: 縦構図の編集シートを指で可変高にする。モデル選択はシート内上端に固定。 */
.library-toolbar .square{flex:0 0 41px;padding:7px;font-size:18px}
#app{min-height:0}
.stage-panel{min-height:0;overflow:hidden}
.stage-editor-shell{
  height:36px;flex:0 0 auto;min-height:36px;
  display:flex;flex-direction:column;
  overflow:hidden;background:#1b283a;border-top:1px solid #3d536a;
}
.stage-editor-shell .editor-toggle{
  flex:0 0 36px;height:36px;min-height:36px;
  padding:3px 10px 4px;display:flex;gap:1px;align-items:center;
  justify-content:center;flex-direction:column;
  background:#20354b;touch-action:none;-webkit-user-select:none;user-select:none;
  cursor:ns-resize;
}
.drag-mark{height:4px;width:48px;border-radius:5px;background:#88a9be;display:block;flex:none}
#editorToggleLabel{font-size:11px;font-weight:750;line-height:15px}
.stage-editor-shell .stage-editor{
  flex:1 1 auto;display:flex;min-height:0;min-width:0;
  max-height:none;flex-direction:column;overflow:hidden;padding:0;box-shadow:none;
}
.editor-pinned{
  flex:0 0 auto;position:relative;z-index:2;
  background:#26394e;border-bottom:1px solid #4c6983;
  padding:6px 11px 5px;
}
.editor-pinned .placed-list{min-height:37px;padding-bottom:3px}
.editor-scroll-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:9px 12px 17px;
}
/* Previously stage-editor max-height set by landscape breakpoints: do not affect new sheet. */
@media(max-height:700px){.stage-editor-shell .stage-editor{max-height:none}}
@media(min-width:700px){.stage-editor-shell .stage-editor{max-height:none}}

/* α0.3.3: フォルダ案内のOK操作。下端右寄せで本文を邪魔しない。 */
.folder-help-actions{display:flex;justify-content:flex-end;margin-top:8px}
.folder-help-actions button{min-width:60px;min-height:34px;border:1px solid #8bbbd7;border-radius:8px;background:#355b75;color:#f1f9ff;font-size:12px;font-weight:750}
.folder-help-actions button:active{background:#447694}

/* α0.3.4: モバイルの一行ヘッダーを維持しつつ、保存/復元を常時利用可能にする。 */
.project-trigger{min-width:35px;flex:0 0 auto;font-size:17px!important;padding:7px 4px!important}
.project-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:12px;padding:19px 20px 35px;max-width:580px;width:100%;margin:0 auto;line-height:1.65}
.project-content h2{font-size:18px;line-height:1.45;margin:0;text-align:center}
.project-content h3{font-size:16px;margin:0}
.project-content p{font-size:13px;color:#bccfe2;margin:0}
.project-content p strong{color:#eff8ff}
.project-icon{text-align:center;font-size:44px;margin:5px 0 0}
.project-content button{min-height:46px;font-weight:650}
.project-divider{border-top:1px solid #41576d;margin:8px 0}
.project-status{font-size:13px;color:#b3deee;white-space:pre-line;min-height:24px}
.project-status.error{color:#ffb8a9}
.project-content .project-footnote{font-size:11px;color:#95acc3;line-height:1.8}
@media(max-width:410px){.portrait-title{display:none}.stage-heading{gap:4px;padding-left:7px;padding-right:7px}.stage-heading .mini{font-size:11px;padding:8px 5px}}
@media(max-width:350px){.zoom-picker{font-size:10px}.stage-heading #stageAddMore{font-size:0;padding:7px 7px}.stage-heading #stageAddMore::before{content:'＋';font-size:13px}}

/* α0.3.5: 構図に名前を付け、iPhoneの「ファイルに保存」から保存先選択。 */
.project-name-label{font-size:13px;color:#ebf5ff;font-weight:750;margin-bottom:-8px}
.project-name{width:100%;min-width:0;font-size:16px;line-height:1.4;color:#f1f7ff;background:#26394e;border:1px solid #7a9ab3;border-radius:10px;padding:12px 13px;box-sizing:border-box}
.project-name:focus{outline:2px solid #64bde9;outline-offset:1px}
.project-name-hint{font-size:11px;color:#9db8d0;margin-top:-9px}
.project-content #downloadProject{min-height:36px;font-size:12px;color:#c5d7e7;background:transparent;border-color:#506a83}

/* α0.3.7: 人形は必要なときだけ読み込み。手のプリセットは小さな編集パネル内。 */
.standard-dolls{display:flex;align-items:center;gap:7px;padding:2px 12px 8px;flex:none;flex-wrap:wrap}
.standard-dolls span{font-size:12px;color:#c4d9e9;white-space:nowrap}
.standard-dolls button{padding:7px 11px;min-height:34px;background:#28465e;border-color:#557f9d;flex:1;min-width:0}
.hand-pose-editor{border-top:1px solid #4b6c83;border-bottom:1px solid #405a71;background:#203246;padding:4px 7px 8px;margin:10px -4px}
.hand-pose-row{display:grid;grid-template-columns:40px repeat(3,minmax(0,1fr));align-items:center;gap:5px;margin-top:6px}
.hand-pose-row span{font-size:12px;text-align:center;color:#d5eafa}
.hand-pose-row button{min-width:0;padding:8px 2px;white-space:nowrap;font-size:12px}
.hand-pose-row button.active{background:#29668e;border-color:#8dd7ff;font-weight:800}
.hand-pose-help{font-size:10px;color:#9cb7c9;line-height:1.5;margin:6px 0 0 45px}

/* α0.3.8: 指をタップして、その手のそばに表示するフローティングメニュー */
.hand-pose-popup{position:absolute;z-index:20;width:224px;max-width:calc(100% - 10px);padding:8px;background:#172b40;box-shadow:0 5px 20px #0009;border:1px solid #6aa2ca;border-radius:12px;box-sizing:border-box;color:#f0f8ff;touch-action:manipulation}
.hand-pose-popup[hidden]{display:none!important}
.hand-popup-heading{display:flex;align-items:center;justify-content:space-between;gap:4px;margin:0 1px 7px;font-size:13px}
.hand-popup-heading button{background:transparent;border:none;color:#d4ecff;font-size:20px;line-height:1;min-width:30px;min-height:26px;padding:0}
.hand-popup-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.hand-popup-buttons button{min-width:0;border-radius:7px;border:1px solid #648eb1;background:#294660;color:#fff;padding:10px 1px;font-size:12px;font-weight:650;white-space:nowrap}
.hand-popup-buttons button.active{background:#136da5;border-color:#9be3ff;box-shadow:inset 0 0 0 1px #b5e7ff}


/* α0.3.9: 個別の3Dモデルごとに「形状固定」を初期値ONにする。 */
.placed-item{display:flex;align-items:center;gap:3px;flex:0 0 auto;max-width:325px;min-width:0}
.placed-item .placed-chip{min-width:0;max-width:170px;flex:0 1 auto}
.shape-lock-button{flex:0 0 auto;white-space:nowrap;border-radius:8px;font-size:11px;font-weight:700;min-height:35px;padding:7px 8px}
.shape-lock-button.locked{color:#d7e8f7;background:#304257;border-color:#526b81}
.shape-lock-button.unlocked{color:#fff;background:#286e7e;border-color:#69c3d4}

/* α0.3.10: 指の4種類のプリセット。手元ポップアップはiPhone幅に収める。 */
.hand-pose-popup{width:288px}
.hand-popup-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}
.hand-popup-buttons button{padding:10px 2px;font-size:11px}


/* α0.3.13: モバイルでの誤った文字選択・長押しメニュー・ダブルタップ拡大を抑止。
   ただし構図名の編集と撮影画像の長押し保存は利用可能なまま残す。 */
html, body, #app {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
#app input[type="text"], #app textarea, #app [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
#photoImage {
  -webkit-touch-callout: default;
}


/* α0.3.17: 上部の取り消しと、関節付近の半透明ポップアップ */
.history-buttons{display:flex;flex:0 0 auto;gap:3px;align-items:center}
.stage-heading .history-btn{font-size:20px;min-width:30px;width:30px;height:35px;line-height:1;padding:3px 0!important;border-radius:9px;color:#ecf5fe;border-color:#5c819d;background:#29445e}
.stage-heading .history-btn:disabled{opacity:.28}
.stage-heading{gap:4px;padding-left:6px;padding-right:6px}
@media(max-width:440px){.stage-heading .history-btn{width:28px;min-width:28px}.stage-heading #stageAddMore{font-size:10px;padding:8px 4px}.stage-heading .zoom-picker{margin-left:0}.stage-heading .zoom-picker select{max-width:65px;padding:7px 2px;font-size:11px}.stage-heading .export-trigger{padding:8px 4px}.stage-heading #photoBtn{padding:9px 6px}.stage-heading .project-trigger{min-width:30px}}
@media(max-width:365px){.stage-heading .zoom-picker{font-size:0}.stage-heading .zoom-picker select{font-size:11px}.stage-heading #stageAddMore{font-size:0}.stage-heading #stageAddMore::before{content:'＋';font-size:13px}}
.joint-markers{position:absolute;inset:0;pointer-events:none;z-index:15}
.joint-marker{position:absolute;width:22px;height:22px;padding:0;border:0;background:transparent;transform:translate(-50%,-50%);pointer-events:auto;touch-action:manipulation;display:grid;place-items:center;border-radius:100%;z-index:1}
.joint-marker::after{content:'';width:7px;height:7px;border-radius:50%;background:#60c6f1;border:1px solid #08334d;box-shadow:0 0 5px #002e4ca8;opacity:.8}
.joint-marker.active::after{width:12px;height:12px;background:#ffcf69;border-color:#694621;box-shadow:0 0 0 4px #ffe5aa55}
.joint-marker:focus-visible{outline:2px solid #ffe99e}
.joint-popup{position:absolute;z-index:25;box-sizing:border-box;width:min(276px,calc(100% - 10px));border:1px solid #8db4c9;border-radius:13px;padding:10px 11px;background:rgba(16,30,48,.78);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);box-shadow:0 7px 21px #0008;color:#f4f9fe;touch-action:manipulation}
.joint-popup[hidden]{display:none!important}
.joint-popup-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px}
.joint-popup-head button{min-width:28px;min-height:27px;padding:2px 7px;border-radius:7px;font-size:18px;background:#334d66bb}
.joint-popup-sub{font-size:10px;color:#c2d5e5;padding:1px 0 3px}
.joint-controls{display:flex;flex-direction:column;gap:5px}
.joint-controls label{display:flex;align-items:center;gap:7px;font-size:12px;min-height:28px;font-weight:650}
.joint-controls input{min-width:0;flex:1;height:24px;accent-color:#79caff;touch-action:pan-x}
.joint-controls output{flex:none;min-width:40px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;font-weight:normal}
.joint-reset{display:block;margin:5px 0 0 auto;padding:5px 8px;font-size:11px;border-radius:7px;background:#3d5369b9}

/* α0.3.18: iPhone用の関節マーカー／手首メニュー */
.joint-markers{position:absolute;inset:0;z-index:15;pointer-events:none;overflow:hidden}
.joint-markers>.joint-marker{position:absolute;display:grid;place-items:center;width:30px;height:30px;min-width:30px;min-height:30px;box-sizing:border-box;padding:0;border:0;background:transparent;transform:translate(-50%,-50%);border-radius:50%;pointer-events:auto;touch-action:manipulation}
.joint-marker::after{width:8px;height:8px;opacity:.82}
.hand-popup-buttons{grid-template-columns:repeat(5,minmax(0,1fr))}
.hand-popup-buttons button{font-size:11px;min-height:39px;padding:8px 1px}
.hand-popup-buttons [data-joint-action="wrist"]{border-color:#88a8c0;background:#344f64}

/* α0.3.19: 編集中は移動せず、手の選択／微調整に専念 */
.joint-marker.hand-select-marker::after{width:11px;height:11px;background:#ffcc72;border:2px solid #69542d;box-shadow:0 0 0 2px #ffffff99,0 0 7px #0006;opacity:.95}
.joint-marker.finger-joint-marker{width:25px;height:25px;min-width:25px;min-height:25px}
.joint-marker.finger-joint-marker::after{width:6px;height:6px;background:#89f0bd;border-color:#205442;opacity:.95}
.joint-marker.finger-joint-marker.active::after{width:11px;height:11px;background:#ffdc77}
.hand-popup-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}
.hand-popup-buttons [data-hand-action="fine"]{background:#2c6056;border-color:#6daf9c}
.finger-edit-done{position:absolute;z-index:20;top:8px;right:8px;min-height:34px;padding:7px 10px;border:1px solid #a4d9c0;background:rgba(13,65,50,.82);color:#f4fff8;font-size:12px;border-radius:9px;box-shadow:0 2px 10px #0005;touch-action:manipulation}

/* α0.3.20: プレビュー素材の加工・保存（iPhoneで縦画面に収まる） */
.preview-viewport{min-height:120px}
.preview-editor{flex:0 0 auto;max-height:43dvh;display:flex;flex-direction:column;min-height:0;border-top:1px solid #45617a;background:#1c2b3e}
.preview-edit-head{display:flex;align-items:center;justify-content:space-between;padding:9px 13px 6px;font-size:13px;gap:8px}
.preview-edit-indicator{font-size:10px;color:#b4cede}.preview-edit-indicator.dirty{color:#ffdc9f}
.preview-edit-tools{padding:0 13px 11px;overflow-y:auto;overscroll-behavior:contain;min-height:0;-webkit-overflow-scrolling:touch}
.preview-part-title{font-size:12px;font-weight:650;margin:5px 0 5px;color:#d9edfc}
.preview-part-title span{font-size:10px;font-weight:400;color:#9fbacf}
.preview-parts-list{max-height:104px;overflow-y:auto;border:1px solid #42607a;border-radius:9px;background:#15253a;padding:3px 7px}
.preview-part-row{display:flex;gap:10px;align-items:center;min-height:36px;padding:3px 2px;border-bottom:1px solid #30475d;font-size:12px;cursor:pointer}
.preview-part-row:last-child{border-bottom:none}.preview-part-row input{width:19px;height:19px;accent-color:#66bee6;flex:none}
.preview-part-row span{flex:1;min-width:0;word-break:break-word}.preview-part-row small{color:#90adc2}
.preview-color-row{display:flex;align-items:center;gap:5px;margin:8px 0;flex-wrap:nowrap;font-size:11px}
.preview-color-row label{white-space:nowrap}.preview-color-row select{min-width:0;flex:1;padding:8px 4px;border-radius:8px;border:1px solid #57758c;background:#233d52;color:#f0f8ff;font-size:12px}
.preview-color-row input[type=color]{width:39px;min-width:39px;height:35px;padding:2px;background:#25435c;border:1px solid #5d7d96;border-radius:7px}
.preview-color-row button{white-space:nowrap;padding:7px 5px;font-size:11px}
.preview-edit-actions,.preview-save-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.preview-edit-actions button{min-height:38px;padding:7px;font-size:12px}
.preview-save-tools{margin-top:9px;padding:10px;border:1px solid #5a8199;border-radius:10px;background:#142539}
.preview-save-tools label{display:block;font-size:12px;margin-bottom:5px;font-weight:650}
.preview-save-tools input[type=text]{width:100%;min-width:0;padding:10px;background:#21384c;color:white;border:1px solid #668faa;border-radius:7px;margin-bottom:8px}
.preview-save-buttons{margin:5px 0}.preview-save-buttons button{padding:8px 4px;min-height:39px;font-size:12px}
.preview-save-status{font-size:11px;color:#b6cfe1;line-height:1.55;margin:8px 0 0}
.preview-leave-dialog{position:absolute;inset:0;z-index:25;display:grid;place-items:center;background:#08121bba;padding:20px}
.preview-leave-card{width:min(100%,350px);display:flex;flex-direction:column;gap:9px;background:#23374a;border:1px solid #88a7bc;padding:18px;border-radius:14px;box-shadow:0 9px 35px #000a}
.preview-leave-card strong{font-size:16px}.preview-leave-card p{font-size:12px;line-height:1.7;margin:3px 0 8px;color:#d2e1ef}
.preview-leave-card button{min-height:43px;font-size:13px}
@media(max-height:650px){.preview-editor{max-height:52dvh}.preview-parts-list{max-height:76px}}

/* α0.3.21: 任意のボーン付きモデルの骨を選択して動かす */
.generic-bone-editor{padding:9px 10px;margin:3px 0 12px;border:1px solid #52798f;border-radius:10px;background:#243a4c}
.generic-bone-editor[hidden]{display:none!important}
.generic-bone-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;margin-bottom:7px}
.generic-bone-heading span{font-size:11px;color:#bed8e9;font-weight:400}
.generic-bone-row{display:flex;gap:7px;align-items:center}
.generic-bone-row select{flex:1;min-width:0;padding:9px 7px;background:#172d41;color:#f2f9ff;border:1px solid #7295ab;border-radius:8px;font-size:13px}
.generic-bone-row button{flex:none;min-height:39px;padding:8px 11px}
.generic-bone-hint{font-size:11px;line-height:1.6;color:#bed2e1;margin-top:6px}

/* α0.3.26: 素材プレビューでテクスチャ画像を直接追加。 */
.preview-texture-row{margin:7px 0 2px}
.preview-texture-row button{width:100%;min-height:36px;padding:7px 10px;border:1px solid #629abd;border-radius:8px;background:#294c69;color:#edf7ff;font-size:12px;font-weight:650}
.preview-texture-status{margin:0 0 8px;font-size:11px;line-height:1.5;color:#b5d2e4;overflow-wrap:anywhere}

/* α0.3.27: 閲覧プレビュー専用の表示設定（構図には影響させない） */
.preview-display-settings{position:absolute;z-index:22;top:calc(62px + env(safe-area-inset-top));right:11px;width:min(300px,calc(100% - 22px));padding:13px 14px 12px;background:#1e354b;border:1px solid #79a2be;border-radius:12px;box-shadow:0 10px 24px #06111dbb;display:flex;flex-direction:column;gap:8px}
.preview-display-settings[hidden]{display:none!important}
.preview-display-label{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:13px}
.preview-display-label output{font-size:12px;color:#d0e8f9;font-variant-numeric:tabular-nums}
.preview-display-settings input[type=range]{display:block;width:100%;min-height:28px;accent-color:#5abbe6;touch-action:pan-y}
.preview-display-bg{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;gap:12px}
.preview-display-bg select{min-width:130px;background:#263f58;color:#edf6ff;border:1px solid #6789a8;border-radius:8px;padding:8px 10px;font-size:12px}
.preview-display-settings small{font-size:10px;line-height:1.6;color:#b6c9d9}
#previewDisplayButton{white-space:nowrap}

/* α0.3.28: 構図の照明係と不透明な地面 */
.lighting-toggle{display:block;width:100%;margin:10px 0 0;padding:10px 12px;text-align:left;font-size:13px;font-weight:750;background:#29435a;border-color:#57728a}
.lighting-panel{padding:10px 9px 11px;border:1px solid #536f86;border-top:0;border-radius:0 0 10px 10px;background:#192b3e}
.lighting-note{font-size:11px;color:#aac4d7;line-height:1.55;margin:2px 0 9px}
.lighting-row{display:flex;align-items:center;gap:9px;margin:9px 0;font-size:12px}
.lighting-row label{width:45px;flex:none}
.lighting-row input{flex:1;min-width:0;accent-color:#6bbde8;touch-action:pan-x}
.lighting-row output{width:51px;text-align:right;font-variant-numeric:tabular-nums;color:#e2f2ff;font-size:12px}
.lighting-options{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:12px 0 8px;font-size:12px}
.lighting-options input{accent-color:#6bbde8}
.lighting-options button{font-size:11px}

/* α0.3.29: 撮影画面で最後に照明と地面を調整してから保存 */
.photo-view{min-height:130px;padding:8px 12px;overflow:hidden}
.photo-view img{width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:3/4;object-fit:contain}
.photo-bottom{max-height:min(49dvh,420px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-top:1px solid #334c66;padding-bottom:calc(15px + env(safe-area-inset-bottom))}
.photo-finish-heading{font-size:14px;font-weight:750;color:#e2f4ff;margin:1px 0 10px}
.photo-bottom .lighting-panel{border:0;background:transparent;border-radius:0;padding:0}
.photo-bottom .lighting-row{margin:11px 0}
.photo-bottom .lighting-row output{width:58px}
.photo-capture-button{width:100%;display:block;padding:14px 12px;font-weight:800;margin:12px 0 0}
.photo-reedit{display:block;width:100%;margin-top:10px;padding:10px;font-size:12px}

/* α0.3.36: 横向きの構図編集では、下部シートを右側へ移すだけ。内容は変更しない。 */
@media (orientation:landscape) and (min-width:560px){
  .stage-panel{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto minmax(0,1fr);
  }
  .stage-panel .stage-heading{grid-column:1 / 3;grid-row:1;min-width:0}
  .stage-panel .stage-canvas-area{grid-column:1;grid-row:2;min-height:0;height:100%;min-width:0}
  .stage-panel .stage-editor-shell{
    grid-column:2;grid-row:2;
    display:flex;flex-direction:row;
    min-width:36px;min-height:0;height:100%;
    border-top:0;border-left:1px solid #3d536a;
  }
  .stage-editor-shell .editor-toggle{
    flex:0 0 36px;width:36px;min-width:36px;
    height:100%;min-height:0;
    cursor:ew-resize;
  }
  .stage-editor-shell .editor-toggle .drag-mark{width:4px;height:48px}
  .stage-editor-shell #editorToggleLabel{writing-mode:vertical-rl}
  .stage-editor-shell .stage-editor{flex:1 1 auto;min-height:0;min-width:0;height:100%}
}