/* ========= カラーテーマ ========= */
:root{
  --brand:#DBEB0C;     /* ヘッダ/強調 */
  --button:#0D47A1;    /* ボタン */
  --text:#222;
  --muted:#6b7280;
  --bg:#ffffff;        /* 常に白ベース */
  --card:#fff;
  --card-border:#e5e7eb;
  --chip:#f3f4f6;
  --chip-border:#e5e7eb;
  --shadow:0 6px 18px rgba(0,0,0,.08);
  --radius:14px;

  /* 進捗バー色（必要なら使用、分野ページでは非表示） */
  --bar-a:#2F6FFF;  /* 青 */
  --bar-b:#F06292;  /* ピンク */
  --bar-c:#FFB300;  /* 黄/橙 */
  --bar-d:#9E9E9E;  /* グレー */
}

/* ========= ベース ========= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--text); background:var(--bg);
}
.wrap{max-width:1100px;margin:0 auto}

/* Material Icons 調整 */
.material-icons-outlined{
  font-size:22px; line-height:1; vertical-align:middle;
}

/* ========= アプリバー ========= */
.appbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  background:var(--brand);
  border-bottom:1px solid color-mix(in oklab,var(--brand) 60%, #000 40%);
}
.brand{display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.02em}
.brand-logo{
  display:inline-grid; place-items:center;
  background:#fff; color:#34495e; width:28px; height:28px; border-radius:6px;
  font-size:.9rem; font-weight:900; box-shadow:var(--shadow);
}
.brand-title{font-size:1.05rem}
.appbar-actions{margin-left:auto; display:flex; gap:8px}
.icon-btn{
  appearance:none; border:none; background:transparent; color:#0f172a; cursor:pointer;
  width:36px;height:36px;border-radius:10px; display:grid;place-items:center;
}
.icon-btn:hover{background:rgba(255,255,255,.5)}
.navbtn{margin-left:2px}

/* ========= セクション共通 ========= */
.section-pad{padding:18px 16px}
.heading-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 2px 8px;
}
.h1{font-size:1.1rem; font-weight:800}

/* ========= カード/リスト ========= */
.card{
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
  padding:14px; box-shadow:var(--shadow);
}
.list{display:flex; flex-direction:column; gap:12px}
.row{
  display:grid; grid-template-columns: auto 1fr auto; gap:12px; align-items:center;
  background:var(--card); border:1px solid var(--card-border); border-radius:16px;
  padding:12px; box-shadow:var(--shadow);
}
.row:hover{outline:2px solid rgba(13,71,161,.1)}
.row-left{
  display:flex; align-items:center; gap:10px; min-width:240px; font-weight:700;
}
.row-left .num{
  width:28px; height:28px; border-radius:999px; display:grid; place-items:center;
  background:rgba(13,71,161,.08); color:#0D47A1; font-weight:800;
}
.row-center{min-width:180px}
.row-right{display:flex; align-items:center; gap:10px}

/* ========= 進捗バー（分野ページでは非表示だが他で流用可） ========= */
.bar{ position:relative; height:14px; border-radius:999px; overflow:hidden; background:var(--bar-d);}
.bar > .seg{position:absolute; left:0; top:0; height:100%}
.seg.a{background:var(--bar-a)} .seg.b{background:var(--bar-b)} .seg.c{background:var(--bar-c)}
.remain{ color:#1e40af; font-weight:800; text-decoration:none; }
.small{font-size:.85rem; color:var(--muted)}
.icon-outline{
  width:38px; height:38px; border-radius:12px; border:1px solid var(--card-border); display:grid; place-items:center;
  color:#0D47A1; background:#fff;
}
.icon-outline:hover{background:rgba(13,71,161,.06)}

/* ========= ボタン ========= */
.btn{
  appearance:none; border:none; cursor:pointer; border-radius:12px;
  padding:10px 14px; font-weight:800; letter-spacing:.02em;
  background:var(--button); color:#fff; box-shadow:var(--shadow);
}
.btn.secondary{
  background:transparent; color:var(--button); border:2px solid var(--button);
}

/* ========= タブ/メイン画面 ========= */
.toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0 12px;
}
.back{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px; color:var(--button);
  border:2px solid var(--button); background:#fff; text-decoration:none; font-weight:800;
}
.problem-title{font-size:1.05rem; font-weight:800}
.tabs{
  display:flex; gap:8px; flex-wrap:wrap; background:var(--chip); padding:8px; border-radius:12px; border:1px solid var(--chip-border);
}
.tab-btn{
  appearance:none; border:none; cursor:pointer; background:transparent; padding:10px 14px; border-radius:10px; font-weight:800; color:var(--muted);
}
.tab-btn.active{
  background:#fff; color:var(--text); border:2px solid var(--button); box-shadow:var(--shadow);
}
.tab-btn.available{cursor:pointer; color:var(--text);}
.tab-btn.available:not(.active){border:1px solid rgba(13,71,161,.2); background:rgba(13,71,161,.06);}
.tab-btn.locked{cursor:not-allowed; opacity:.45;}
.tabpanes{margin-top:12px}
.tabpane{display:none; background:var(--card); border:1px solid var(--card-border); border-radius:12px; padding:14px}
.tabpane.active{display:block}

/* ========= チャット/4択 ========= */
.chat{display:flex; flex-direction:column; gap:12px; height:min(60vh,520px)}
.chatlog{
  flex:1; overflow:auto; padding:12px; border:1px dashed var(--card-border); border-radius:12px;
  background:linear-gradient(180deg, #fff, #fafafa);
}
.msg{max-width:78%; padding:10px 12px; border-radius:12px; margin:8px 0; line-height:1.5; box-shadow:var(--shadow); white-space:pre-line}
.msg.user{margin-left:auto; background:var(--button); color:#fff}
.msg.bot{background:#eef2ff; color:#111827; border:1px solid #c7d2fe}
.chatform{display:flex; gap:8px}
.input{flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--card-border);}
.chatform.is-disabled{opacity:.65; pointer-events:none}
.chatform.is-disabled .input{background:#f3f4f6}
.btn:disabled{cursor:not-allowed; opacity:.6; background:color-mix(in srgb,var(--button) 60%, #cbd5f5 40%); color:#fff}
.btn.secondary:disabled{background:#e5e7eb; color:#9ca3af; border-color:#d1d5db}

.clinical{display:flex; flex-direction:column; gap:12px}
.clinical-overview{font-size:.9rem; line-height:1.6}
.clinical-log{
  min-height:160px; max-height:420px; overflow:auto;
  border:1px solid var(--card-border); border-radius:12px; padding:12px;
  background:linear-gradient(180deg,#fff,#f9fafb);
  box-shadow:var(--shadow);
}
.clinical-msg{padding:10px 12px; border-radius:10px; margin:6px 0; line-height:1.5; white-space:pre-line}
.clinical-msg.question{background:#0D47A1; color:#fff; margin-left:auto; max-width:82%; box-shadow:var(--shadow)}
.clinical-msg.answer{background:#ecfeff; border:1px solid #bae6fd; color:#0f172a; max-width:86%; box-shadow:var(--shadow)}
.clinical-form{display:flex; gap:8px; flex-wrap:wrap}
.clinical-form .input{flex:1; min-width:220px}
.clinical-form.is-disabled{opacity:.6; pointer-events:none}
.clinical-form.is-disabled .input{background:#f3f4f6}
.flow-action{display:flex; justify-content:flex-end; margin-top:4px}
.nav-next{margin-left:auto}

.qa{display:grid; gap:12px}
.qtext{font-weight:800}
.choice{display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1px solid var(--card-border); border-radius:10px; background:#fff}
.choice:hover{outline:2px solid rgba(13,71,161,.12)}
.result{font-weight:900; padding:6px 10px; border-radius:10px}
.result.ok{color:#059669; background:#ecfdf5; border:1px solid #a7f3d0}
.result.ng{color:#dc2626; background:#fef2f2; border:1px solid #fecaca}

/* ユーティリティ */
.muted{color:var(--muted)}
.sr{position:absolute; left:-9999px}

/* ========= フィードバック ========= */
.feedback{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.feedback-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
}
.feedback-title{
  font-size:1.1rem;
  font-weight:800;
}
.feedback-lead{
  margin:4px 0 0;
}
.feedback-status{
  font-size:.9rem;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
}
.feedback-status::before{
  content:'';
  width:0;
  height:0;
}
.feedback-status.loading{color:#0D47A1;}
.feedback-status.success{color:#047857;}
.feedback-status.error{color:#b91c1c;}
.feedback-status.loading::before{
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(13,71,161,.25);
  border-top-color:#0D47A1;
  animation:feedback-spin .75s linear infinite;
}

@keyframes feedback-spin{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}
.feedback-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.feedback-card{
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:14px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.feedback-card-title{
  font-weight:800;
  font-size:1rem;
}
.feedback-card-strengths .feedback-card-title{color:#1d4ed8;}
.feedback-card-weaknesses .feedback-card-title{color:#dc2626;}
.feedback-list{
  min-height:120px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.feedback-items{
  margin:0;
  padding-left:1.2rem;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.feedback-items li{
  line-height:1.6;
}
.feedback-dialog{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-right:4px;
}
.feedback-stage-title{
  font-size:.85rem;
  font-weight:700;
  color:var(--muted);
  text-transform:none;
}
.feedback-line{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.feedback-role{
  font-weight:700;
  min-width:3.5em;
  color:#0D47A1;
}
.feedback-line.assistant .feedback-role{
  color:#0f172a;
}
.feedback-text{
  flex:1;
  white-space:pre-line;
  line-height:1.55;
}
.feedback-empty{
  color:var(--muted);
  font-style:italic;
}
.feedback-empty.has-spinner{
  display:flex;
  align-items:center;
  gap:8px;
}
.feedback-empty.has-spinner::before{
  content:'';
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(13,71,161,.2);
  border-top-color:#0D47A1;
  animation:feedback-spin .75s linear infinite;
}

.flow-confirm{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(15,23,42,.35); z-index:100; padding:20px}
.flow-confirm.show{display:flex}
.flow-confirm-container{background:#fff; border-radius:16px; padding:20px 22px; max-width:420px; width:min(90vw,420px); box-shadow:var(--shadow); display:flex; flex-direction:column; gap:18px}
.flow-confirm-message{font-weight:700; line-height:1.6; color:#1f2937}
.flow-confirm-actions{display:flex; gap:12px; justify-content:flex-end}