/* ============================================================
   dx-widgets.css — 診断ウィザード・モーダル共通部品（2026-07-24新設）
   使用ページ: index.html（助成金診断）／ tools.html（年末調整・入退社・法改正スコア）
   デザイン正典: 「藍と生成り」（output/0724/sharoushi_visual_identity_mockup）
   注意: tools.html は別のトークン体系(:root)を持つため、本ファイルは
   --sa- 接頭辞の自己完結トークンのみを使う（ページ側トークンに依存しない）。
   ============================================================ */
:root{
  --sa-sumi:#211F1C;
  --sa-sumi-2:#4B463E;
  --sa-sumi-3:#6B6456;
  --sa-ai:#165E83;
  --sa-ai-deep:#0F4362;
  --sa-ai-wash:#EDF3F6;
  --sa-kami:#F7F4EC;
  --sa-keisen:#E2DCCE;
  --sa-keisen-2:#CFC7B4;
  --sa-input-border:#9A9078;
  --sa-tokiwa:#10714C;
  --sa-tokiwa-bg:#EDF5F0;
  --sa-kohaku:#7D5708;
  --sa-radius:4px;
}

/* ---- ウィザード共通 ---- */
.wizard-card{
  background:#fff;border:1px solid var(--sa-keisen);border-radius:var(--sa-radius);
  box-shadow:0 1px 2px rgba(33,31,28,.05);padding:28px 30px;text-align:left;
  color:var(--sa-sumi);
}
.wizard-progress{background:var(--sa-keisen);border-radius:2px;height:4px;margin-bottom:18px;overflow:hidden}
.wizard-progress-bar{height:100%;background:var(--sa-ai);transition:width .3s ease-out}
.wizard-step-label{font-size:12.5px;font-weight:700;color:var(--sa-ai);letter-spacing:.08em;margin-bottom:18px}
.wizard-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wizard-btn{
  background:#fff;border:1px solid var(--sa-input-border);border-radius:var(--sa-radius);
  padding:13px 12px;font-size:13.5px;font-family:inherit;color:var(--sa-sumi);cursor:pointer;
  text-align:center;font-weight:500;line-height:1.5;transition:background .15s ease-out,border-color .15s ease-out;
}
.wizard-btn:hover{border-color:var(--sa-ai);background:var(--sa-ai-wash);color:var(--sa-ai)}
.wizard-result-box{text-align:center;padding:8px 0}
.wizard-result-icon{display:none}
.wizard-result-title{font-size:15.5px;font-weight:700;color:var(--sa-sumi);margin-bottom:16px}
.wizard-result-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:16px;text-align:left;max-width:480px;margin-left:auto;margin-right:auto}
.wizard-result-list li{
  display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--sa-sumi-2);
  padding:10px 14px;background:var(--sa-kami);border:1px solid var(--sa-keisen);
  border-left:3px solid var(--sa-tokiwa);border-radius:var(--sa-radius);line-height:1.7;
}
.wizard-result-note{font-size:13px;color:var(--sa-sumi-3);margin-bottom:16px}
.wizard-reset-btn{display:block;margin:4px auto 0;padding:12px 14px;min-height:44px;box-sizing:border-box;background:none;border:none;font-size:12.5px;color:var(--sa-sumi-3);cursor:pointer;font-family:inherit;text-decoration:underline;text-underline-offset:3px}
.wizard-reset-btn:hover{color:var(--sa-sumi-2)}

/* ---- 診断タブ（tools.html） ---- */
.dx-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:28px 0 24px}
.dx-tab{
  padding:9px calc(16px - .04em) 9px 16px;border-radius:2px;font-size:13px;font-weight:500;letter-spacing:.04em;
  cursor:pointer;border:1px solid var(--sa-input-border);color:var(--sa-sumi-2);background:#fff;
  font-family:inherit;transition:background .15s ease-out,border-color .15s ease-out;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;
}
.dx-tab:hover{border-color:var(--sa-ai);color:var(--sa-ai)}
.dx-tab.active{background:var(--sa-ai);color:#fff;border-color:var(--sa-ai)}
.dx-panel{display:none;text-align:left}
.dx-panel.active{display:block}
.dx-checkbox-list{display:flex;flex-direction:column;gap:10px;text-align:left;max-width:560px;margin:0 auto}
.dx-check-item{
  display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:var(--sa-kami);
  border:1px solid var(--sa-keisen);border-radius:var(--sa-radius);cursor:pointer;transition:border-color .15s ease-out;
}
.dx-check-item:hover{border-color:var(--sa-ai)}
.dx-check-item input{margin-top:4px;flex-shrink:0;width:16px;height:16px;cursor:pointer;accent-color:var(--sa-ai)}
.dx-check-item span{font-size:13.5px;color:var(--sa-sumi);line-height:1.7}
.dx-score-num{font-size:44px;font-weight:700;color:var(--sa-ai);line-height:1;font-variant-numeric:tabular-nums}
.dx-score-bar{background:var(--sa-keisen);border-radius:2px;height:8px;margin:16px auto;overflow:hidden;max-width:420px}
.dx-score-fill{height:100%;background:var(--sa-tokiwa);transition:width .4s ease-out}
.dx-todo-list{list-style:none;display:flex;flex-direction:column;gap:8px;text-align:left;max-width:520px;margin:14px auto}
.dx-todo-list li{
  display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--sa-sumi-2);
  padding:10px 14px;background:var(--sa-ai-wash);border:1px solid var(--sa-keisen);
  border-left:3px solid var(--sa-ai);border-radius:var(--sa-radius);line-height:1.7;
}
.dx-output{background:#fff;border:1px solid var(--sa-keisen);border-radius:var(--sa-radius);padding:18px 20px;text-align:left;font-size:13.5px;line-height:1.9;color:var(--sa-sumi);white-space:pre-wrap;max-height:380px;overflow:auto;margin:14px 0}
.dx-copy-btn{background:#fff;border:1px solid var(--sa-ai);border-radius:var(--sa-radius);padding:10px 16px;font-size:13px;font-weight:500;color:var(--sa-ai);cursor:pointer;font-family:inherit;transition:background .15s ease-out}
.dx-copy-btn:hover{background:var(--sa-ai-wash)}
.dx-note{font-size:12.5px;color:var(--sa-sumi-3);line-height:1.8;margin-top:14px;text-align:left;background:#fff;border:1px dashed var(--sa-keisen-2);border-radius:var(--sa-radius);padding:12px 14px}
.dx-select-row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.dx-select-row select{flex:1;min-width:160px;height:50px;padding:0 12px;border:1px solid var(--sa-input-border);border-radius:var(--sa-radius);font-size:14px;font-family:inherit;background:#fff;color:var(--sa-sumi);outline:none}
.dx-select-row select:focus{outline:2px solid var(--sa-ai);outline-offset:1px;border-color:var(--sa-ai)}
.dx-copy-msg{font-size:12.5px;color:var(--sa-tokiwa);margin-left:10px}

/* ウィザード内の主要CTA（index側.btn-primaryが無いtools.htmlでも成立させる） */
.wizard-cta{
  background:var(--sa-ai);color:#fff;text-decoration:none;border:none;cursor:pointer;
  height:50px;padding:0 calc(32px - .04em) 0 32px;border-radius:var(--sa-radius);
  font-family:inherit;font-size:15px;font-weight:500;letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:8px;transition:background .15s ease-out;
}
.wizard-cta:hover{background:var(--sa-ai-deep)}
.wizard-generate-btn{
  width:100%;height:50px;background:var(--sa-ai);color:#fff;border:none;border-radius:var(--sa-radius);
  font-size:15px;font-weight:500;letter-spacing:.04em;cursor:pointer;font-family:inherit;
  transition:background .15s ease-out;margin-top:4px;
}
.wizard-generate-btn:hover{background:var(--sa-ai-deep)}

/* ---- モーダル（index-app.jsがid=modalの存在を前提とするため両ページに設置） ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(33,31,28,.5);z-index:300;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:#fff;border:1px solid var(--sa-keisen);border-radius:var(--sa-radius);max-width:480px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 8px 30px rgba(33,31,28,.25)}
.modal-header{padding:20px 20px 0;display:flex;justify-content:flex-end}
.modal-close{background:var(--sa-kami);border:1px solid var(--sa-keisen);width:32px;height:32px;border-radius:var(--sa-radius);cursor:pointer;font-size:15px;color:var(--sa-sumi-2);display:flex;align-items:center;justify-content:center}
.modal-close:hover{background:var(--sa-keisen)}
.modal-body{padding:16px 24px 28px}
.modal-badge{margin-bottom:12px}
.modal-icon{display:none}
.modal-title{font-size:19px;font-weight:700;color:var(--sa-sumi);margin-bottom:8px}
.modal-desc{font-size:14px;color:var(--sa-sumi-2);line-height:1.85;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--sa-keisen)}
.modal-features{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.modal-feature{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--sa-sumi-2)}
.modal-feature::before{content:"";width:6px;height:6px;background:var(--sa-tokiwa);flex:none;margin-top:9px}
.modal-plan-note{background:var(--sa-ai-wash);border-radius:var(--sa-radius);padding:12px 16px;font-size:13px;color:var(--sa-sumi);margin-bottom:18px;line-height:1.8}
.btn-modal-primary{display:flex;align-items:center;justify-content:center;background:var(--sa-ai);color:#fff;text-align:center;height:50px;border-radius:var(--sa-radius);font-size:14.5px;font-weight:500;text-decoration:none;transition:background .15s ease-out;margin-bottom:8px}
.btn-modal-primary:hover{background:var(--sa-ai-deep)}
.btn-modal-secondary{display:block;text-align:center;padding:12px;border-radius:var(--sa-radius);font-size:13px;color:var(--sa-sumi-3);cursor:pointer;background:none;border:none;font-family:inherit;width:100%}
.btn-modal-secondary:hover{color:var(--sa-sumi-2)}
.agent-badge{display:inline-flex;align-items:center;gap:7px;border-radius:2px;padding:4px calc(10px - .06em) 4px 10px;font-size:12.5px;font-weight:500;letter-spacing:.06em}
.badge-paid{background:#fff;border:1px solid var(--sa-kohaku);color:var(--sa-kohaku)}
.badge-paid::before{content:"";width:6px;height:6px;background:var(--sa-kohaku);flex:none}
.badge-free{background:var(--sa-tokiwa-bg);border:1px solid var(--sa-tokiwa);color:var(--sa-tokiwa)}
.badge-free::before{content:"";width:6px;height:6px;background:var(--sa-tokiwa);flex:none}

@media(max-width:768px){
  .wizard-card{padding:22px 18px}
  .wizard-options{grid-template-columns:repeat(2,1fr)}
}