/* 初回の職選択: 役割を比較し、選んだ一つの指令を確定する。 */
.commander-job-picker { width:100%; max-width:920px; margin:0 auto; }
.commander-job-lead { margin:0 0 10px; color:var(--text-dim); }
.commander-job-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.commander-job-card { padding:12px; margin:0; text-align:left; border:1px solid #b9a16d99; border-radius:var(--radius); background:linear-gradient(145deg,#2c3947,#202b37); }
.commander-job-card:hover:not(:disabled), .commander-job-card.is-on { border-color:#e0c58e; background:#334252; }
.commander-job-head { display:flex; align-items:center; gap:8px; }
.commander-job-head .name { font:600 18px/1.3 "Yu Mincho","Hiragino Mincho ProN",serif; }
.commander-job-icon { display:inline-flex; color:#e4cc98; }
.commander-role { margin:8px 0 0; color:#efd39a; font-size:14px; }
.commander-job-detail { display:grid; grid-template-columns:150px minmax(0,1fr); align-items:center; gap:20px; padding:16px 0 8px; }
.commander-job-figure { display:flex; justify-content:center; }
.commander-job-ability h2 { margin:0; font-size:22px; }
.commander-order-name { margin:14px 0 5px; color:#efd39a; font-weight:700; font-size:16px; }
.commander-order-description { margin:0; color:var(--text-dim); font-size:14px; line-height:1.6; }
.commander-job-lock-note { color:var(--text-dim); font-size:13px; margin:6px 0 8px; }
.commander-job-confirm { min-height:44px; position:sticky; bottom:0; z-index:1; box-shadow:0 -6px 12px var(--bg); }
.commander-job-prompt { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; padding:12px 14px; border:1px solid #b9a16d99; border-radius:var(--radius); background:linear-gradient(90deg,#263442,#1b2632); }
.commander-job-prompt button { flex:0 0 auto; }
body.is-commander-pick .screen { width:100%; max-width:980px; margin-inline:auto; padding-top:24px; }
body.is-commander-pick .screen>h1 { font-size:24px; margin:0 0 8px; }
body.is-commander-pick .screen>p { margin:0 0 12px; }
@media(min-width:1100px) {
 body.is-gate.is-commander-pick .screen>* { width:100%; max-width:920px; }
}
@media(max-width:720px) {
 .commander-job-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
 .commander-job-card { padding:10px 8px; }
 .commander-job-head .name { font-size:16px; }
 .commander-role { font-size:12px; }
 .commander-job-detail { grid-template-columns:100px minmax(0,1fr); gap:10px; padding-top:12px; }
 .commander-job-figure .tachie-stack { width:100px!important; height:149px!important; }
 .commander-job-ability h2 { font-size:20px; }
 .commander-order-name { margin-top:10px; }
 .commander-job-prompt { align-items:stretch; flex-direction:column; }
 body.is-commander-pick .screen { padding-top:12px; }
 body.is-commander-pick .screen>h1 { font-size:22px; }
 body.is-commander-pick .screen>p { font-size:13px; }
}
/* 初回外見: 姿と確定は固定し、候補だけスクロールする。 */
body.is-appearance-pick .screen { width:100%; max-width:940px; margin-inline:auto; padding:16px 24px calc(16px + var(--safe-b)); display:flex; flex-direction:column; overflow:hidden; }
body.is-gate.is-appearance-pick .screen>* { max-width:none; width:100%; }
.appearance-heading { flex:none; }
.appearance-heading h1 { text-align:center; font-size:28px; margin:4px 0; }
.appearance-heading .sub { text-align:center; margin:0 0 12px; }
.appearance-layout { display:grid; grid-template-columns:minmax(120px,34%) minmax(0,1fr); gap:24px; flex:1; min-height:0; }
.appearance-preview { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0; gap:8px; }
.appearance-figure-wrap { flex:1; min-height:0; width:100%; display:flex; justify-content:center; align-items:center; overflow:hidden; }
.appearance-figure { width:min(170px,100%)!important; height:auto!important; aspect-ratio:848/1264; max-height:100%; max-width:100%; }
.appearance-figure img { object-fit:contain; }
.appearance-choices { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 3px 8px; }
.appearance-choices h3 { margin:0 0 8px; font-size:14px; }
.appearance-choices .appearance-picker { justify-content:flex-start!important; gap:6px; }
.appearance-tabs { display:flex; gap:6px; margin:12px 0 8px; position:sticky; top:0; background:var(--bg); padding:4px 0; z-index:1; }
.appearance-tabs [aria-selected="true"] { border-color:#d9b86f; color:#ead2a0; background:#ffffff12; }
.appearance-hairs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.appearance-hair { display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 3px; border-radius:2px; font-size:14px; }
.appearance-lock-note { white-space:pre; text-align:center; flex:none; font-size:12px; color:var(--text-dim); margin:0; }
.appearance-preview>.btn-lg { flex:none; min-height:44px; font-size:15px; padding:10px 4px; margin:0; }
@media(max-width:700px) {
 body.is-appearance-pick .screen { padding:10px 12px calc(10px + var(--safe-b)); }
 .appearance-heading h1 { font-size:21px; }
 .appearance-heading .sub { font-size:13px; margin-bottom:8px; }
 .appearance-layout { grid-template-columns:minmax(104px,34%) minmax(0,1fr); gap:10px; }
 .appearance-figure { width:120px!important; }
 .appearance-hairs { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
 .appearance-hair { font-size:12px; padding:4px 1px; }
 .appearance-choices .appearance-picker button { font-size:14px; padding:6px 8px; }
 .appearance-preview>.btn-lg { font-size:14px; }
}
@media(max-height:400px) {
 .appearance-heading .sub { display:none; }
 .appearance-heading h1 { font-size:18px; }
 .appearance-lock-note { font-size:11px; }
 .appearance-preview { gap:4px; }
}
.appearance-hair.is-on { border-color:#d9b86f; color:#ead2a0; background:#ffffff12; }

/* 初回設定の進行表示 */
.onboarding-progress { display:flex; justify-content:center; align-items:center; gap:8px; list-style:none; padding:0; margin:0 auto 12px; font-size:13px; color:var(--text-dim); flex:none; }
.onboarding-progress li { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.onboarding-progress li+li::before { content:'→'; color:var(--text-dim); font-weight:normal; }
.onboarding-progress [aria-current="step"] { color:#efd39a; font-weight:700; }
@media(max-height:400px) { .onboarding-progress { margin-bottom:4px; } }

@media(min-height:500px) { .appearance-figure { transform:translateY(-32px); } }

.appearance-confirm { flex:none; width:100%; min-height:52px; margin-top:12px; padding:12px 16px; font-size:17px; }

@media(min-width:701px) { .appearance-lock-note { white-space:nowrap; } }