/* ==========================================================================
   TMPS医学館 個別ページ コンテンツ強化コンポーネント（assets/subpage-upgrade.css）
   比較図 / 会話ログ / ステップ図解 / データテーブル / タイムライン / ドキュメンタリー
   ========================================================================== */

/* ---- セクション共通 ---- */
.ux-sec {
  background: #fff; border: 1px solid var(--border-color, rgba(7,104,172,.14));
  border-radius: 14px; padding: 36px 26px; margin: 0 0 40px;
  box-shadow: 0 8px 24px rgba(7,104,172,.06);
}
.ux-eyebrow { display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.2em; color:var(--tmps-blue,#0768ac); text-transform:uppercase; margin-bottom:10px; }
.ux-h2 { font-family:var(--font-mincho,'Shippori Mincho',serif); font-size:clamp(1.35rem,4vw,1.8rem); font-weight:800; color:var(--tmps-blue-dark,#042d4d); line-height:1.45; margin:0 0 10px; }
.ux-lead { font-size:.88rem; color:var(--text-sub,#4e5d6c); line-height:1.9; margin:0 0 22px; }
.ux-center { text-align:center; }
.ux-note { font-size:.72rem; color:#94a3b8; margin-top:14px; line-height:1.7; }

/* ---- 数字ハイライトバンド ---- */
.ux-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 0 24px; }
.ux-stats div { background:linear-gradient(160deg,#042d4d,#0768ac); color:#fff; border-radius:12px; padding:16px 10px; text-align:center; }
.ux-stats b { display:block; font-size:clamp(1.3rem,5vw,1.9rem); font-weight:900; color:#fbbf24; line-height:1.15; font-variant-numeric:tabular-nums; }
.ux-stats span { font-size:.64rem; letter-spacing:.05em; color:#bae6fd; font-weight:700; }
@media(max-width:640px){ .ux-stats{grid-template-columns:1fr;gap:8px} }

/* ---- 比較図（大手 vs TMPS） ---- */
.ux-compare { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ux-compare .col { border-radius:12px; padding:18px 16px; }
.ux-compare .col-bad { background:#f8f8f8; border:1px solid #e2e8f0; }
.ux-compare .col-good { background:linear-gradient(165deg,#f0f6fb,#fff); border:2px solid var(--tmps-blue,#0768ac); box-shadow:0 10px 26px rgba(7,104,172,.14); }
.ux-compare h4 { font-size:.92rem; margin:0 0 12px; line-height:1.5; }
.ux-compare .col-bad h4 { color:#64748b; }
.ux-compare .col-good h4 { color:var(--tmps-blue-deep,#054c7f); }
.ux-compare ul { list-style:none; margin:0; padding:0; }
.ux-compare li { font-size:.78rem; line-height:1.65; padding:8px 0 8px 24px; position:relative; border-top:1px dashed #e2e8f0; }
.ux-compare li:first-child { border-top:0; }
.ux-compare .col-bad li::before { content:"✕"; position:absolute; left:2px; color:#dc2626; font-weight:900; }
.ux-compare .col-good li::before { content:"◎"; position:absolute; left:2px; color:var(--tmps-blue,#0768ac); font-weight:900; }
@media(max-width:640px){ .ux-compare{grid-template-columns:1fr} }

/* ---- 指導会話ログ（チャット形式） ---- */
.ux-log { background:#f1f5f9; border-radius:12px; padding:18px 14px; }
.ux-log .log-date { text-align:center; font-size:.66rem; font-weight:800; letter-spacing:.14em; color:#64748b; margin:4px 0 14px; }
.ux-msg { display:flex; gap:8px; margin-bottom:12px; align-items:flex-start; }
.ux-msg .who { flex-shrink:0; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.58rem; font-weight:900; color:#fff; }
.ux-msg.coach .who { background:var(--tmps-blue,#0768ac); }
.ux-msg.student .who { background:#94a3b8; }
.ux-msg .bubble { max-width:82%; background:#fff; border:1px solid #e2e8f0; border-radius:4px 14px 14px 14px; padding:9px 13px; font-size:.79rem; line-height:1.7; color:#1e293b; box-shadow:0 2px 6px rgba(0,0,0,.04); }
.ux-msg.student { flex-direction:row-reverse; }
.ux-msg.student .bubble { border-radius:14px 4px 14px 14px; background:#eaf3fa; border-color:#cfe3f2; }
.ux-msg .bubble b { color:var(--tmps-blue-deep,#054c7f); }
.ux-msg .bubble .point { display:block; margin-top:6px; font-size:.68rem; color:var(--accent-red,#dc2626); font-weight:800; }

/* ---- ステップ図解（縦フロー） ---- */
.ux-steps { list-style:none; margin:0; padding:0; counter-reset:uxstep; }
.ux-steps li { position:relative; padding:0 0 20px 52px; counter-increment:uxstep; }
.ux-steps li::before {
  content:counter(uxstep,decimal-leading-zero);
  position:absolute; left:0; top:0; width:38px; height:38px; border-radius:12px;
  background:linear-gradient(135deg,#d4af37,#aa7c1e); color:#fff; font-weight:900; font-size:.82rem;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(170,124,30,.35);
}
.ux-steps li::after { content:""; position:absolute; left:18px; top:42px; bottom:2px; width:2px; background:linear-gradient(180deg,#d4af37,transparent); }
.ux-steps li:last-child::after { display:none; }
.ux-steps b { display:block; font-size:.9rem; color:var(--tmps-blue-dark,#042d4d); margin-bottom:3px; }
.ux-steps p { font-size:.78rem; color:var(--text-sub,#4e5d6c); margin:0; line-height:1.7; }

/* ---- 分岐フローチャート ---- */
.ux-flow { text-align:center; max-width:560px; margin:0 auto; }
.ux-flow .fbox { background:#f0f6fb; border:1.5px solid var(--tmps-blue,#0768ac); border-radius:12px; padding:12px 16px; font-size:.82rem; font-weight:800; color:var(--tmps-blue-dark,#042d4d); line-height:1.55; }
.ux-flow .fbox.gold { background:#fffbeb; border-color:#d97706; color:#92400e; }
.ux-flow .fbox.green { background:#ecfdf5; border-color:#059669; color:#065f46; }
.ux-flow .farrow { font-size:1.2rem; color:var(--tmps-blue,#0768ac); line-height:1.4; }
.ux-flow .fbranch { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; }
.ux-flow .flabel { font-size:.62rem; font-weight:900; letter-spacing:.1em; margin-bottom:4px; }
.ux-flow .flabel.ok { color:#059669; } .ux-flow .flabel.ng { color:#dc2626; }

/* ---- データテーブル ---- */
.ux-tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; border:1px solid var(--border-color,rgba(7,104,172,.14)); }
.ux-tbl { width:100%; border-collapse:collapse; min-width:560px; background:#fff; }
.ux-tbl th { background:var(--tmps-blue-dark,#042d4d); color:#fff; font-size:.72rem; letter-spacing:.05em; padding:10px 12px; text-align:left; white-space:nowrap; }
.ux-tbl td { font-size:.78rem; padding:11px 12px; border-top:1px solid #eef2f7; color:#334155; line-height:1.6; }
.ux-tbl tr:nth-child(even) td { background:#f8fafc; }
.ux-tbl td.hl { color:var(--accent-red,#dc2626); font-weight:900; white-space:nowrap; }
.ux-tbl td.good { color:#059669; font-weight:800; }
.ux-tbl td b { color:var(--tmps-blue-dark,#042d4d); }

/* ---- タイムライン（合宿等） ---- */
.ux-tl { list-style:none; margin:0; padding:0; position:relative; }
.ux-tl::before { content:""; position:absolute; left:49px; top:8px; bottom:8px; width:2px; background:linear-gradient(180deg,#fbbf24,#ea580c,#7c2d12); }
.ux-tl li { position:relative; padding:0 0 16px 84px; }
.ux-tl .t { position:absolute; left:0; top:3px; width:40px; text-align:right; font-weight:900; font-size:.76rem; color:#9a3412; font-variant-numeric:tabular-nums; }
.ux-tl .d { position:absolute; left:43px; top:4px; width:14px; height:14px; border-radius:50%; background:#ea580c; border:3px solid #fff; box-shadow:0 0 0 2px rgba(234,88,12,.3); }
.ux-tl .c { background:#fffaf3; border:1px solid #fde8cf; border-radius:10px; padding:9px 14px; }
.ux-tl .c b { display:block; font-size:.86rem; color:#7c2d12; line-height:1.5; }
.ux-tl .c p { font-size:.74rem; color:#57534e; margin:2px 0 0; line-height:1.6; }
.ux-tl li.milestone .d { background:#dc2626; }
.ux-tl li.milestone .c { background:#fff; border:1.5px solid #dc2626; }

/* ---- 覚醒ドキュメンタリー（合宿 Before→After） ---- */
.ux-doc { border:1px solid var(--border-color,rgba(7,104,172,.14)); border-radius:12px; padding:20px 18px; margin-bottom:16px; background:linear-gradient(170deg,#fff,#f8fafc); }
.ux-doc .doc-name { font-weight:900; font-size:.95rem; color:var(--tmps-blue-dark,#042d4d); }
.ux-doc .doc-name span { font-size:.68rem; color:var(--text-sub,#4e5d6c); font-weight:700; margin-left:8px; }
.ux-doc .doc-ba { display:flex; align-items:center; gap:12px; margin:12px 0; }
.ux-doc .ba-box { flex:1; text-align:center; border-radius:10px; padding:10px 6px; }
.ux-doc .ba-before { background:#f1f5f9; border:1px dashed #cbd5e1; }
.ux-doc .ba-after { background:linear-gradient(135deg,#b91c1c,#ef4444); color:#fff; box-shadow:0 8px 18px rgba(220,38,38,.3); }
.ux-doc .ba-box small { display:block; font-size:.58rem; letter-spacing:.16em; font-weight:800; opacity:.8; }
.ux-doc .ba-box b { font-size:1.35rem; font-weight:900; font-variant-numeric:tabular-nums; }
.ux-doc .ba-before b { color:#64748b; }
.ux-doc .ba-arrow { font-size:1.3rem; color:var(--gold-primary,#c29543); font-weight:900; }
.ux-doc p { font-size:.8rem; color:#334155; line-height:1.85; margin:0 0 8px; }
.ux-doc p:last-child { margin:0; }
.ux-doc .doc-quote { border-left:3px solid var(--gold-primary,#c29543); padding:4px 0 4px 12px; font-size:.82rem; font-weight:700; color:var(--tmps-blue-dark,#042d4d); font-style:italic; }

/* ---- チェックリスト ---- */
.ux-check { list-style:none; margin:0; padding:0; }
.ux-check li { position:relative; padding:10px 0 10px 34px; font-size:.82rem; line-height:1.7; color:#1e293b; border-bottom:1px dashed #e2e8f0; }
.ux-check li:last-child { border-bottom:0; }
.ux-check li::before {
  content:""; position:absolute; left:0; top:12px; width:20px; height:20px; border-radius:50%;
  background:var(--tmps-blue,#0768ac) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.5" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>') center/11px no-repeat;
}
.ux-check li b { color:var(--tmps-blue-dark,#042d4d); }

/* ---- 引用ボックス ---- */
.ux-quote { position:relative; background:#f0f6fb; border-left:4px solid var(--tmps-blue,#0768ac); border-radius:0 10px 10px 0; padding:16px 18px; font-size:.86rem; font-weight:700; color:var(--tmps-blue-dark,#042d4d); line-height:1.85; margin:0 0 18px; }
.ux-quote::before { content:"“"; position:absolute; top:-4px; left:8px; font-size:2.2rem; color:var(--tmps-blue,#0768ac); opacity:.25; font-family:serif; }
.ux-quote footer { font-size:.68rem; color:var(--text-sub,#4e5d6c); font-weight:600; margin-top:6px; }