// bu/all.jsx — 自己完結（トークン/プリミティブ + データ + 外枠 + 現状版 + 改善案）
// 複数ファイルの取得レースを避けるため 1 ファイルに集約。
const { useState } = React;

// ───────── デザイントークン ─────────
const T = {
  page: '#fbfdff', card: '#ffffff', card2: '#f8fafc',
  border: '#e9edf2', borderStrong: '#dce2ea',
  fg: '#11181c', fg2: '#3f444b', muted: '#71767e', faint: '#9aa0a8',
  pri: '#006fee', pri600: '#005bc4', pri50: '#eaf2ff', pri100: '#d4e7ff', priText: '#0058c4',
  up: '#17a957', up50: '#e9f8ef', upText: '#0f7c3f',
  down: '#e23b62', down50: '#fdecf0', downText: '#c01a45',
  warn: '#e98e16', warn50: '#fdf3e3', warnText: '#b46a09',
  flat: '#8a9099', flat50: '#eef1f5',
};
const FONT = "'Inter','Noto Sans JP','Hiragino Kaku Gothic ProN',Meiryo,sans-serif";

if (typeof document !== 'undefined' && !document.getElementById('bu-styles')) {
  const s = document.createElement('style');
  s.id = 'bu-styles';
  s.textContent = `
  .h1o1 *{box-sizing:border-box}
  .h1o1{font-family:${FONT};color:${T.fg};-webkit-font-smoothing:antialiased;font-feature-settings:"palt"}
  .h1o1 .tnum{font-variant-numeric:tabular-nums}
  .h1o1 button{font-family:inherit}
  .h1o1 .hbtn{cursor:pointer;border:none;transition:background .15s,box-shadow .15s,transform .04s}
  .h1o1 .hbtn:active{transform:translateY(.5px)}
  .h1o1 .hbtn-pri{background:${T.pri};color:#fff;box-shadow:0 1px 2px rgba(0,111,238,.25)}
  .h1o1 .hbtn-pri:hover{background:${T.pri600}}
  .h1o1 .hin{font-family:inherit;font-size:13.5px;color:${T.fg};background:${T.card2};
     border:1.5px solid transparent;border-radius:10px;outline:none;width:100%;padding:11px 13px;transition:background .15s,border-color .15s}
  .h1o1 .hin:focus{background:#fff;border-color:${T.pri}}
  .h1o1 .hin::placeholder{color:${T.faint}}
  `;
  document.head.appendChild(s);
}

// ───────── プリミティブ ─────────
function sparkPoints(data, w, h, pad = 3) {
  const min = Math.min(...data), max = Math.max(...data), range = (max - min) || 1;
  return data.map((v, i) => {
    const x = pad + (i / (data.length - 1)) * (w - 2 * pad);
    const y = (h - pad) - ((v - min) / range) * (h - 2 * pad);
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  });
}
function Sparkline({ data, color = T.pri, w = 88, h = 28, strokeW = 2, dot = true }) {
  const pts = sparkPoints(data, w, h);
  const last = pts[pts.length - 1].split(',');
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ display: 'block', overflow: 'visible' }}>
      <polyline points={pts.join(' ')} fill="none" stroke={color} strokeWidth={strokeW} strokeLinejoin="round" strokeLinecap="round" />
      {dot && <circle cx={last[0]} cy={last[1]} r={strokeW + 0.5} fill={color} />}
      {dot && <circle cx={last[0]} cy={last[1]} r={strokeW + 2.5} fill={color} opacity="0.18" />}
    </svg>
  );
}
function deltaStyle(delta, tone = 'good') {
  if (delta === 0) return { c: T.flat, bg: T.flat50, tc: T.muted, sign: '±', arrow: null };
  const positive = delta > 0;
  if (tone === 'neutral') return { c: T.warn, bg: T.warn50, tc: T.warnText, sign: positive ? '+' : '−', arrow: positive ? 'up' : 'down' };
  return positive
    ? { c: T.up, bg: T.up50, tc: T.upText, sign: '+', arrow: 'up' }
    : { c: T.down, bg: T.down50, tc: T.downText, sign: '−', arrow: 'down' };
}
function Arrow({ dir, size = 9, color = 'currentColor', strokeW = 2 }) {
  if (!dir) return <span style={{ display: 'inline-block', width: size, textAlign: 'center', color }}>–</span>;
  const d = dir === 'up' ? 'M5 8.5V1.5M5 1.5L2 4.5M5 1.5L8 4.5' : 'M5 1.5v7M5 8.5L2 5.5M5 8.5L8 5.5';
  return (
    <svg width={size} height={size} viewBox="0 0 10 10" fill="none" style={{ display: 'block' }}>
      <path d={d} stroke={color} strokeWidth={strokeW} strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
function DiffChip({ delta, unit = '', tone = 'good', size = 'md' }) {
  const st = deltaStyle(delta, tone);
  const fs = size === 'sm' ? 11 : 12;
  const pd = size === 'sm' ? '2px 6px 2px 5px' : '3px 8px 3px 6px';
  return (
    <span className="tnum" style={{ display: 'inline-flex', alignItems: 'center', gap: 3, padding: pd, borderRadius: 7, background: st.bg, color: st.tc, fontSize: fs, fontWeight: 600, lineHeight: 1, whiteSpace: 'nowrap' }}>
      <Arrow dir={st.arrow} color={st.c} size={size === 'sm' ? 8 : 9} />
      {st.sign === '±' ? '±0' : `${st.sign}${Math.abs(delta)}${unit}`}
    </span>
  );
}
function Chip({ children, color = 'default', variant = 'flat', size = 'md', style = {} }) {
  const map = {
    default: { bg: T.flat50, fg: T.fg2, bd: T.borderStrong },
    primary: { bg: T.pri50, fg: T.priText, bd: T.pri100 },
    success: { bg: T.up50, fg: T.upText, bd: '#bfe8cf' },
    danger: { bg: T.down50, fg: T.downText, bd: '#f6c6d3' },
    warning: { bg: T.warn50, fg: T.warnText, bd: '#f3dcb0' },
  }[color];
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 5, borderRadius: 999, fontWeight: 600,
    fontSize: size === 'sm' ? 11 : 12, lineHeight: 1, whiteSpace: 'nowrap',
    padding: size === 'sm' ? '4px 9px' : '5px 11px',
  };
  const sty = variant === 'bordered'
    ? { ...base, background: 'transparent', color: map.fg, border: `1.5px solid ${map.bd}` }
    : { ...base, background: map.bg, color: map.fg };
  return <span style={{ ...sty, ...style }}>{children}</span>;
}
function ScoreDots({ value, max = 5, color = T.pri, size = 7 }) {
  return (
    <span style={{ display: 'inline-flex', gap: 3, alignItems: 'center' }}>
      {Array.from({ length: max }).map((_, i) => (
        <span key={i} style={{ width: size, height: size, borderRadius: size, background: i + 1 <= Math.round(value) ? color : T.border }} />
      ))}
    </span>
  );
}
function Card({ children, style = {}, pad = 20 }) {
  return (
    <div style={{ background: T.card, borderRadius: 16, padding: pad, border: `1px solid ${T.border}`, boxShadow: '0 1px 2px rgba(16,24,40,.04), 0 6px 20px -12px rgba(16,24,40,.18)', ...style }}>{children}</div>
  );
}
const Icon = {
  brief: (p = {}) => <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><rect x="2.5" y="4" width="11" height="9" rx="1.5" /><path d="M5.5 4V3a1 1 0 011-1h3a1 1 0 011 1v1" /><path d="M2.5 8h11" /></svg>,
  chart: (p = {}) => <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M2 13h12" /><path d="M3.5 13V7M7 13V4M10.5 13V9M14 13V2" strokeLinecap="round" /></svg>,
  note: (p = {}) => <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M3 2.5h7l3 3V13a.5.5 0 01-.5.5h-9A.5.5 0 013 13z" /><path d="M9.5 2.5V6h3.5" /></svg>,
  lock: (p = {}) => <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><rect x="3.5" y="7" width="9" height="6.5" rx="1.5" /><path d="M5.5 7V5a2.5 2.5 0 015 0v2" /></svg>,
  arrowR: (p = {}) => <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M3 8h9M8.5 4.5L12 8l-3.5 3.5" strokeLinecap="round" strokeLinejoin="round" /></svg>,
  briefcase2: (p = {}) => <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><rect x="2" y="5" width="12" height="8.5" rx="1.5" /><path d="M5.5 5V3.5a1 1 0 011-1h3a1 1 0 011 1V5" /></svg>,
  award: (p = {}) => <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><circle cx="8" cy="6" r="4" /><path d="M5.6 9.3L4.5 14l3.5-2 3.5 2-1.1-4.7" strokeLinejoin="round" /></svg>,
  chevronDown: (p = {}) => <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M3.5 6L8 10.5 12.5 6" strokeLinecap="round" strokeLinejoin="round" /></svg>,
};

// ───────── データ ─────────
const D = {
  member: { name: 'B班 副班長1', kana: 'ビーハン 副班長1', role: 'L', tenure: '3年11ヶ月', dept: '2部', joined: '2022年7月入社', leader: 'B班 班長' },
  period: { cur: '2026/03/01 - 2026/03/31', prev: '2026/02/01 - 2026/02/28' },
  summary: { score: 3.9, prevScore: 3.3, delta: 1, trend: [3.0, 3.3, 3.1, 3.3, 3.9] },
  work: {
    project: { name: 'ECサイト リニューアル', role: 'フロントエンド', since: '2026/05〜', changed: true, prev: '在庫管理システム 改修' },
    reportRate: { cur: 0, prev: 0, days: '0/21 営業日' }, hours: { cur: 0.0, prev: 0.0 },
  },
  survey: [
    { q: 'モチベーション', desc: '現在のモチベーションは？', prev: 1, cur: 4, hist: [3, 2, 1, 2, 4] },
    { q: '現場環境満足度', desc: '現在参画している現場の環境には満足していますか？（人間関係、立地、設備、etc…）', prev: 2, cur: 5, hist: [4, 3, 2, 3, 5] },
    { q: '仕事内容満足度', desc: '現在の業務内容に満足していますか？', prev: 3, cur: 3, hist: [3, 3, 3, 3, 3] },
    { q: '自己成長満足度', desc: '自身の成長を実感することができていますか？', prev: 4, cur: 3, hist: [3, 4, 4, 4, 3] },
    { q: '人事評価満足度', desc: '会社からの、あなたに対する評価に満足していますか？', prev: 3, cur: 3, hist: [3, 3, 3, 3, 3] },
    { q: '自身へのマネジメント', desc: '上司の自身に対するマネジメントに満足していますか？（アドバイスの内容、自身との接し方、コミュニケーションの頻度、etc…）', prev: 5, cur: 5, hist: [5, 5, 5, 5, 5] },
    { q: '帰属満足度', desc: '会社に対して、帰属意識を持つことができていますか？', prev: 4, cur: 4, hist: [4, 4, 4, 4, 4] },
    { q: 'やりがい', desc: 'やりがいを感じて日々仕事に取り組んでいますか？', prev: 4, cur: 4, hist: [4, 4, 4, 4, 4] },
  ],
  comment: '3月は特に大きな課題はありません。次の目標について相談したいです。',
  commentPrev: '2月は特に大きな課題はありません。次の目標について相談したいです。',
  certs: [
    { name: '基本情報技術者', status: 'acquired', date: '2022/10' },
    { name: '応用情報技術者', status: 'acquired', date: '2024/04' },
    { name: 'AWS認定 SAA', status: 'acquired', date: '2025/01' },
    { name: 'データベーススペシャリスト', status: 'challenging', date: '2026/10 受験予定' },
  ],
  last: { date: '2026/06/15', daysAgo: 8 },
  record: {
    cur: { date: '2026/03/15', method: '対面', type: '個別', report: '3月の1on1で目標進捗と困りごとをヒアリング。次回までの小さな改善アクションを合意。', memo: '特記事項なし。前回から大きな変化は見られない。' },
    prev: { date: '2026/06/15', method: 'オンライン', type: '個別' },
  },
  threadComment: { author: '2部 課長', time: '2026/06/18 10:20', body: '案件切り替え後の負荷は落ち着いてきているようですね。次回は優先順位の整理と、資格学習の時間確保について確認するようにしてください。' },
};

// ───────── 外枠 ─────────
function NavIcon({ d }) {
  return <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">{d}</svg>;
}
const NAV = [
  { k: 'TOP', d: <><path d="M3 9l7-6 7 6" /><path d="M5 8v8h10V8" /></> },
  { k: '日報', d: <><rect x="4" y="3" width="12" height="14" rx="1.5" /><path d="M7 7h6M7 10h6M7 13h4" /></> },
  { k: '勤務表', d: <><circle cx="10" cy="10" r="7" /><path d="M10 6v4l3 2" /></> },
  { k: 'Todo', d: <><path d="M4 6h12M4 10h12M4 14h8" /></> },
  { k: '掲示板', d: <><rect x="3" y="4" width="14" height="11" rx="1.5" /><path d="M3 8h14" /></> },
  { k: 'ワークフロー', d: <><rect x="3" y="3" width="5" height="5" rx="1" /><rect x="12" y="12" width="5" height="5" rx="1" /><path d="M8 5.5h4a2 2 0 012 2V12" /></> },
  { k: 'カレンダー', d: <><rect x="3" y="4" width="14" height="13" rx="1.5" /><path d="M3 8h14M7 3v3M13 3v3" /></> },
  { k: '1on1', d: <><path d="M3 5h9a2 2 0 012 2v4a2 2 0 01-2 2H8l-3 2v-2H4a1 1 0 01-1-1z" /></>, active: true },
  { k: '社員一覧', d: <><circle cx="7" cy="7" r="2.4" /><path d="M3 16c0-2.2 1.8-3.6 4-3.6s4 1.4 4 3.6" /><circle cx="14" cy="7" r="2" /></> },
];
function AppFrame({ children }) {
  return (
    <div className="h1o1" style={{ display: 'flex', background: '#eef1f6', minHeight: '100%' }}>
      <aside style={{ width: 208, flexShrink: 0, background: '#fff', padding: '18px 14px', display: 'flex', flexDirection: 'column', gap: 2, borderRight: `1px solid ${T.border}` }}>
        {NAV.map((n) => (
          <div key={n.k} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px', borderRadius: 10, fontSize: 14, fontWeight: n.active ? 700 : 600, color: n.active ? T.pri : T.fg2, background: n.active ? T.pri50 : 'transparent' }}>
            <span style={{ color: n.active ? T.pri : T.faint, display: 'flex' }}><NavIcon d={n.d} /></span>{n.k}
          </div>
        ))}
      </aside>
      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
        <header style={{ height: 58, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 20, padding: '0 28px', background: '#fff', borderBottom: `1px solid ${T.border}` }}>
          <span style={{ color: T.faint, display: 'flex' }}><svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="4" width="14" height="11" rx="1.5" /><path d="M6 8h8M6 11h5" /></svg></span>
          <span style={{ position: 'relative', color: T.faint, display: 'flex' }}>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M10 3a4.5 4.5 0 014.5 4.5c0 3 1.5 4.5 1.5 4.5H4s1.5-1.5 1.5-4.5A4.5 4.5 0 0110 3zM8.5 15a1.5 1.5 0 003 0" /></svg>
            <span className="tnum" style={{ position: 'absolute', top: -7, right: -8, background: T.down, color: '#fff', fontSize: 10, fontWeight: 700, borderRadius: 9, padding: '1px 5px', lineHeight: 1.4 }}>59</span>
          </span>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <Face size={28} /><span style={{ fontSize: 13.5, fontWeight: 600, color: T.fg2 }}>B班 班長</span>
          </div>
        </header>
        <main style={{ flex: 1, minWidth: 0, padding: '20px 28px 36px' }}>{children}</main>
      </div>
    </div>
  );
}
function PageBar({ plainLabel }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9, fontSize: 15, fontWeight: 600, color: T.fg2 }}>
        <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4l-6 6 6 6" /></svg>
        メンバー一覧へ戻る
      </div>
      {plainLabel
        ? <span style={{ fontSize: 13.5, fontWeight: 600, color: T.fg2 }}>{plainLabel}</span>
        : <button className="hbtn" style={{ padding: '8px 16px', borderRadius: 10, fontSize: 13, fontWeight: 600, background: '#e7f6ef', color: '#0f7c3f' }}>月次1on1アンケート</button>}
    </div>
  );
}
function Face({ size = 56 }) {
  return (
    <span style={{ width: size, height: size, borderRadius: size, flexShrink: 0, background: '#d7dce3', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#9aa0a8' }}>
      <svg width={size * 0.5} height={size * 0.5} viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="10" cy="7" r="3.2" /><path d="M4 17c0-3.2 2.7-5 6-5s6 1.8 6 5" /></svg>
    </span>
  );
}

// ───────── 共有：自由コメント ─────────
function FreeComment() {
  return (
    <div style={{ marginTop: 16, background: T.card2, borderRadius: 12, padding: 16 }}>
      <div style={{ fontSize: 12, fontWeight: 700, color: T.fg2, marginBottom: 9, display: 'flex', alignItems: 'center', gap: 6 }}><Icon.note width="14" height="14" /> 自由コメント</div>
      <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.75, color: T.fg }}>{D.comment}</p>
      <div style={{ marginTop: 12, paddingTop: 12, borderTop: `1px dashed ${T.borderStrong}`, display: 'flex', gap: 8 }}>
        <span style={{ fontSize: 11, color: T.faint, fontWeight: 700, flexShrink: 0 }}>前回</span>
        <p style={{ margin: 0, fontSize: 12.5, lineHeight: 1.7, color: T.muted }}>{D.commentPrev}</p>
      </div>
    </div>
  );
}

// ═══════════ 現状：すべて同じカード（フラット） ═══════════
function SectionHead({ icon, title, sub, right }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, marginBottom: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
        <span style={{ color: T.muted, display: 'flex' }}>{icon}</span>
        <div>
          <div style={{ fontSize: 16, fontWeight: 700 }}>{title}</div>
          {sub && <div className="tnum" style={{ fontSize: 12, color: T.muted, marginTop: 3 }}>{sub}</div>}
        </div>
      </div>
      {right}
    </div>
  );
}
const LBL = { fontSize: 12.5, color: T.muted, fontWeight: 600 };

function SurveyTable() {
  const cols = '1fr 60px 130px 100px 70px';
  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: cols, gap: 12, alignItems: 'center', padding: '0 6px 9px 14px', borderBottom: `1px solid ${T.border}` }}>
        {['設問', '前回', '今回', '過去5回', '増減'].map((h, i) => (
          <span key={h} style={{ fontSize: 11, color: T.faint, fontWeight: 600, textAlign: i === 0 ? 'left' : i === 4 ? 'right' : 'center' }}>{h}</span>
        ))}
      </div>
      {D.survey.map((s, i) => {
        const delta = s.cur - s.prev, drop = delta < 0, up = delta > 0, changed = drop || up;
        const accent = drop ? T.down : up ? T.up : T.flat;
        return (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: cols, gap: 12, alignItems: 'center', padding: '12px 6px 12px 14px', borderBottom: i < D.survey.length - 1 ? `1px solid ${T.border}` : 'none', boxShadow: changed ? `inset 3px 0 0 ${accent}` : 'none' }}>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 13.5, fontWeight: drop ? 700 : 600, color: drop ? T.downText : T.fg, display: 'flex', alignItems: 'center', gap: 6 }}>
                {drop && <span style={{ width: 5, height: 5, borderRadius: 3, background: T.down, flexShrink: 0 }} />}{s.q}
              </div>
              <div style={{ fontSize: 11.5, color: T.faint, marginTop: 3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.desc}</div>
            </div>
            <span className="tnum" style={{ fontSize: 13, color: T.faint, textAlign: 'center' }}>{s.prev}</span>
            <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
              <span className="tnum" style={{ fontSize: 14, fontWeight: 700, color: drop ? T.downText : T.fg }}>{s.cur}</span>
              <ScoreDots value={s.cur} color={drop ? T.down : up ? T.up : T.pri} size={6} />
            </span>
            <span style={{ display: 'flex', justifyContent: 'center' }}><Sparkline data={s.hist} color={accent} w={110} h={26} dot /></span>
            <span style={{ display: 'flex', justifyContent: 'flex-end' }}><DiffChip delta={delta} size="sm" /></span>
          </div>
        );
      })}
    </div>
  );
}

function FlatScreen() {
  return (
    <AppFrame>
      <PageBar />
      <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
        {/* 左カラム */}
        <div style={{ width: 320, flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
          <Card pad={20}>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginBottom: 14 }}>
              <Face size={56} />
              <div>
                <div style={{ fontSize: 19, fontWeight: 700 }}>{D.member.name}</div>
                <div style={{ fontSize: 12, color: T.faint, marginTop: 3 }}>{D.member.kana}</div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
              <Chip color="primary" variant="flat" size="sm">{D.member.role}</Chip>
              <Chip color="default" variant="bordered" size="sm">勤続 {D.member.tenure}</Chip>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 11, borderTop: `1px solid ${T.border}`, paddingTop: 14 }}>
              {[['所属', D.member.dept], ['入社', D.member.joined], ['担当者', D.member.leader]].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <span style={LBL}>{k}</span><span style={{ fontSize: 13.5, fontWeight: 600 }}>{v}</span>
                </div>
              ))}
            </div>
          </Card>

          <Card pad={20}>
            <SectionHead icon={<Icon.briefcase2 />} title="業務状況" />
            <div style={{ background: T.card2, borderRadius: 12, padding: '13px 15px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 7 }}>
                <span style={LBL}>現在の案件</span><Chip color="warning" variant="flat" size="sm">前月から変更</Chip>
              </div>
              <div style={{ fontSize: 15, fontWeight: 700 }}>{D.work.project.name}</div>
              <div style={{ fontSize: 12.5, color: T.muted, marginTop: 3 }}>{D.work.project.role}・{D.work.project.since}</div>
              <div style={{ fontSize: 11.5, color: T.faint, marginTop: 9 }}>前月: {D.work.project.prev}</div>
            </div>
            <div style={{ background: T.card2, borderRadius: 12, padding: '13px 15px', marginTop: 12 }}>
              <div style={{ ...LBL, marginBottom: 7 }}>日報提出率（2日以内）</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span className="tnum" style={{ fontSize: 24, fontWeight: 800 }}>{D.work.reportRate.cur}%</span><DiffChip delta={0} unit="pt" size="sm" />
              </div>
              <div className="tnum" style={{ fontSize: 11.5, color: T.faint, marginTop: 6 }}>{D.work.reportRate.days}</div>
            </div>
            <div style={{ background: T.card2, borderRadius: 12, padding: '13px 15px', marginTop: 12 }}>
              <div style={{ ...LBL, marginBottom: 7 }}>当月稼働時間</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span className="tnum" style={{ fontSize: 24, fontWeight: 800 }}>{D.work.hours.cur.toFixed(1)}h</span><DiffChip delta={0} unit="h" size="sm" tone="neutral" />
              </div>
              <div className="tnum" style={{ fontSize: 11.5, color: T.faint, marginTop: 6 }}>前月 {D.work.hours.prev.toFixed(1)}h</div>
            </div>
          </Card>

          <Card pad={20}>
            <SectionHead icon={<Icon.award />} title="資格情報" />
            {D.certs.map((c, i) => {
              const acq = c.status === 'acquired';
              return (
                <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, padding: '11px 0', borderBottom: i < D.certs.length - 1 ? `1px solid ${T.border}` : 'none' }}>
                  <div>
                    <div style={{ fontSize: 13.5, fontWeight: 600 }}>{c.name}</div>
                    <div className="tnum" style={{ fontSize: 11, color: T.faint, marginTop: 3 }}>{c.date}</div>
                  </div>
                  <Chip color={acq ? 'success' : 'warning'} variant="flat" size="sm">{acq ? '取得済み' : '挑戦中'}</Chip>
                </div>
              );
            })}
          </Card>

          <Card pad={18} style={{ background: T.pri50, border: `1px solid ${T.pri100}` }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ fontSize: 13, fontWeight: 700, color: T.priText }}>前回の1on1</span>
              <Chip color="primary" variant="flat" size="sm">{D.last.daysAgo}日前</Chip>
            </div>
            <div className="tnum" style={{ fontSize: 14, fontWeight: 700, color: T.fg2, marginTop: 8 }}>{D.last.date}</div>
          </Card>
        </div>

        {/* 右カラム */}
        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
          <Card pad={20}>
            <SectionHead icon={<Icon.chart />} title="今月のサマリー" sub={D.period.cur} />
            <div style={{ display: 'flex', gap: 16 }}>
              <div style={{ background: T.pri50, borderRadius: 12, padding: '14px 18px', minWidth: 220 }}>
                <div style={{ ...LBL, color: T.priText }}>総合スコア</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 7, marginTop: 5 }}>
                  <span className="tnum" style={{ fontSize: 30, fontWeight: 800, color: T.priText }}>{D.summary.score}</span>
                  <span className="tnum" style={{ fontSize: 13, color: T.muted }}>/ 5.0</span><DiffChip delta={D.summary.delta} size="sm" />
                </div>
                <div className="tnum" style={{ fontSize: 12, color: T.muted, marginTop: 6 }}>前回 {D.summary.prevScore}</div>
              </div>
              <div style={{ flex: 1, background: T.card2, borderRadius: 12, padding: '14px 18px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, ...LBL, marginBottom: 12 }}>注目の変化 <span style={{ color: T.faint }}>ⓘ</span></div>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  <Chip color="success" variant="flat" size="sm">モチベーション ↑</Chip>
                  <Chip color="success" variant="flat" size="sm">現場環境満足度 ↑</Chip>
                </div>
              </div>
            </div>
          </Card>

          <Card pad={20}>
            <SectionHead icon={<Icon.chart />} title="アンケート回答" sub={`${D.period.prev} → ${D.period.cur}`}
              right={
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <button className="hbtn" style={{ padding: '7px 12px', borderRadius: 9, fontSize: 12.5, fontWeight: 600, background: T.pri50, color: T.priText, display: 'inline-flex', alignItems: 'center', gap: 5 }}>過去回答一覧 <Icon.arrowR width="12" height="12" /></button>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 7, background: T.card2, padding: '6px 11px', borderRadius: 10 }}>
                    <span style={{ fontSize: 11, color: T.muted, fontWeight: 600 }}>総合</span>
                    <span className="tnum" style={{ fontSize: 15, fontWeight: 800 }}>{D.summary.score}</span>
                    <ScoreDots value={4} size={5} /><DiffChip delta={D.summary.delta} size="sm" />
                  </div>
                </div>
              } />
            <SurveyTable />
            <FreeComment />
          </Card>

          <Card pad={20}>
            <SectionHead icon={<Icon.note />} title="実施記録" />
            <div style={{ fontSize: 13.5, fontWeight: 700 }}>今回　{D.record.cur.date}・{D.record.cur.method} / {D.record.cur.type}</div>
            <p style={{ margin: '9px 0 0', fontSize: 13.5, lineHeight: 1.7, color: T.fg2 }}>{D.record.cur.report}</p>
            <div style={{ background: T.warn50, border: '1px solid #f3dcb0', borderRadius: 12, padding: '13px 15px', marginTop: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <span style={{ color: T.warnText, display: 'flex' }}><Icon.lock /></span>
                <span style={{ fontSize: 13, fontWeight: 700, color: T.warnText }}>メモ</span>
                <Chip color="warning" variant="flat" size="sm">あなただけが閲覧できます</Chip>
              </div>
              <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.7, color: T.fg2 }}>{D.record.cur.memo}</p>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 14, paddingTop: 14, borderTop: `1px solid ${T.border}` }}>
              <span className="tnum" style={{ fontSize: 12.5, color: T.faint }}>前回　{D.record.prev.date}・{D.record.prev.method} / {D.record.prev.type}</span>
              <span style={{ fontSize: 12.5, color: T.muted, display: 'inline-flex', alignItems: 'center', gap: 4 }}>表示 <Icon.chevronDown width="13" height="13" /></span>
            </div>
          </Card>

          <Card pad={20}>
            <SectionHead icon={<Icon.note />} title="コメント" />
            <div style={{ display: 'flex', gap: 12 }}>
              <Face size={36} />
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                  <span style={{ fontSize: 13.5, fontWeight: 700 }}>{D.threadComment.author}</span>
                  <span className="tnum" style={{ fontSize: 11.5, color: T.faint }}>{D.threadComment.time}</span>
                </div>
                <p style={{ margin: '7px 0 0', fontSize: 13.5, lineHeight: 1.7, color: T.fg2 }}>{D.threadComment.body}</p>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
              <input className="hin" placeholder="コメントを入力..." />
              <button className="hbtn hbtn-pri" style={{ padding: '0 22px', borderRadius: 10, fontSize: 13, fontWeight: 700 }}>投稿</button>
            </div>
          </Card>
        </div>
      </div>
    </AppFrame>
  );
}

// ═══════════ 改善案：強弱をつけた3階層 ═══════════
function RailHead({ children }) {
  return <div style={{ fontSize: 11.5, fontWeight: 700, color: T.faint, letterSpacing: '.04em', paddingBottom: 8, marginBottom: 6, borderBottom: `1px solid ${T.border}` }}>{children}</div>;
}

function RoleBadge({ children }) {
  return (
    <span style={{ width: 21, height: 21, borderRadius: 21, border: `1.5px solid ${T.borderStrong}`, background: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 10.5, fontWeight: 700, color: T.fg2, flexShrink: 0 }}>{children}</span>
  );
}
function HighlightMini({ item }) {
  const delta = item.cur - item.prev, drop = delta < 0;
  const tint = drop ? T.down50 : T.up50;
  const border = drop ? '#f6c6d3' : '#bfe8cf';
  const tc = drop ? T.downText : T.upText;
  const c = drop ? T.down : T.up;
  return (
    <div style={{ flex: 1, minWidth: 0, background: tint, border: `1px solid ${border}`, borderRadius: 14, padding: '14px 18px' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
        <span style={{ fontSize: 14.5, fontWeight: 700, color: tc }}>{item.q}</span>
        <DiffChip delta={delta} size="sm" />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 12 }}>
        <span className="tnum" style={{ fontSize: 15, color: T.faint }}>{item.prev}</span>
        <span style={{ color: T.faint }}>→</span>
        <span className="tnum" style={{ fontSize: 25, fontWeight: 800, color: tc }}>{item.cur}</span>
        <ScoreDots value={item.cur} color={c} size={6} />
        <span style={{ marginLeft: 'auto' }}><Sparkline data={item.hist} color={c} w={60} h={24} dot /></span>
      </div>
    </div>
  );
}

function TieredScreen() {
  const moved = D.survey.filter((s) => s.cur - s.prev !== 0);
  const flat = D.survey.filter((s) => s.cur - s.prev === 0);
  const cardShadow = '0 1px 2px rgba(16,24,40,.04), 0 6px 20px -12px rgba(16,24,40,.18)';
  const sortedMoved = [...moved].sort((a, b) => (a.cur - a.prev) - (b.cur - b.prev));
  const worst = sortedMoved[0], best = sortedMoved[sortedMoved.length - 1];
  const highlights = !worst ? [] : worst === best ? [worst] : [worst, best];

  return (
    <AppFrame>
      <PageBar />

      {/* ── Tier 1 主役：今月のサマリー（カードを外す・大きく） ── */}
      <div style={{ background: 'linear-gradient(180deg,#f3f8ff,#fbfdff)', border: `1px solid ${T.pri100}`, borderRadius: 18, padding: '22px 26px', marginBottom: 22 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
          <Face size={52} />
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
              <span style={{ fontSize: 20, fontWeight: 800 }}>{D.member.name}</span>
              <RoleBadge>{D.member.role}</RoleBadge>
              <span style={{ fontSize: 13, color: T.muted }}>{D.member.dept}・勤続 {D.member.tenure}</span>
            </div>
            <div className="tnum" style={{ fontSize: 12.5, color: T.faint, marginTop: 4 }}>{D.period.cur} / 月次1on1アンケート</div>
          </div>
          <button className="hbtn hbtn-pri" style={{ padding: '10px 18px', borderRadius: 10, fontSize: 13, fontWeight: 700, display: 'inline-flex', alignItems: 'center', gap: 7 }}><Icon.brief /> 実施記録を登録</button>
        </div>
        <div style={{ display: 'flex', gap: 24, alignItems: 'stretch' }}>
          <div style={{ flexShrink: 0, minWidth: 168, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div style={{ ...LBL, color: T.priText }}>総合スコア</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 4 }}>
              <span className="tnum" style={{ fontSize: 46, fontWeight: 800, lineHeight: 1, color: T.fg }}>{D.summary.score}</span>
              <span className="tnum" style={{ fontSize: 15, color: T.muted }}>/ 5.0</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 10 }}>
              <DiffChip delta={D.summary.delta} />
              <span className="tnum" style={{ fontSize: 12.5, color: T.muted }}>前回 {D.summary.prevScore}</span>
              <Sparkline data={D.summary.trend} color={T.up} w={56} h={22} dot />
            </div>
          </div>
          {highlights.length > 0 && (
            <div style={{ flex: 1, minWidth: 0, background: '#fff', border: `1px solid ${T.border}`, borderRadius: 14, padding: '14px 16px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, ...LBL, color: T.fg2, fontWeight: 700, marginBottom: 12 }}>注目の変化 <span style={{ color: T.faint, fontWeight: 400 }}>ⓘ</span></div>
              <div style={{ display: 'flex', gap: 14 }}>
                {highlights.map((s, i) => <HighlightMini key={i} item={s} />)}
              </div>
            </div>
          )}
        </div>
      </div>

      <div style={{ display: 'flex', gap: 22, alignItems: 'flex-start' }}>
        {/* ── Tier 3 参照：左レール ── */}
        <aside style={{ width: 280, flexShrink: 0, paddingTop: 4 }}>
          <RailVariant variant={RAIL_DEFAULT} />
        </aside>

        {/* ── Tier 2 標準カード：右メイン ── */}
        <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ background: T.card, borderRadius: 16, padding: 20, border: `1px solid ${T.border}`, boxShadow: cardShadow }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                <span style={{ color: T.muted, display: 'flex' }}><Icon.chart /></span>
                <div style={{ fontSize: 16, fontWeight: 700 }}>アンケート回答</div>
                <span className="tnum" style={{ fontSize: 12, color: T.faint }}>{D.period.prev} → {D.period.cur}</span>
              </div>
              <button className="hbtn" style={{ padding: '7px 12px', borderRadius: 9, fontSize: 12.5, fontWeight: 600, background: T.pri50, color: T.priText, display: 'inline-flex', alignItems: 'center', gap: 5 }}>過去回答一覧 <Icon.arrowR width="12" height="12" /></button>
            </div>

            <div style={{ fontSize: 12, fontWeight: 700, color: T.fg2, marginBottom: 8 }}>動いた項目 <span style={{ color: T.faint, fontWeight: 600 }}>（{moved.length}件）</span></div>
            {moved.map((s, i) => {
              const delta = s.cur - s.prev, drop = delta < 0, c = drop ? T.down : T.up;
              return (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 120px 156px 64px', gap: 12, alignItems: 'center', padding: '12px 6px 12px 13px', borderBottom: `1px solid ${T.border}`, boxShadow: `inset 3px 0 0 ${c}` }}>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 14, fontWeight: 700, color: drop ? T.downText : T.fg }}>{s.q}</div>
                    <div style={{ fontSize: 11.5, color: T.faint, marginTop: 3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.desc}</div>
                  </div>
                  <span style={{ display: 'flex', justifyContent: 'center' }}><Sparkline data={s.hist} color={c} w={104} h={26} dot /></span>
                  <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
                    <span className="tnum" style={{ fontSize: 13, color: T.faint }}>{s.prev}</span><span style={{ color: T.faint }}>→</span>
                    <span className="tnum" style={{ fontSize: 16, fontWeight: 800, color: drop ? T.downText : T.upText }}>{s.cur}</span>
                    <ScoreDots value={s.cur} color={c} size={6} />
                  </span>
                  <span style={{ display: 'flex', justifyContent: 'flex-end' }}><DiffChip delta={delta} size="sm" /></span>
                </div>
              );
            })}

            <div style={{ fontSize: 12, fontWeight: 700, color: T.faint, margin: '16px 0 8px' }}>変化なし <span style={{ fontWeight: 600 }}>（{flat.length}件）</span></div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px 24px' }}>
              {flat.map((s, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, padding: '7px 0', borderBottom: `1px solid ${T.border}` }}>
                  <span style={{ fontSize: 13, color: T.muted }}>{s.q}</span>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 }}>
                    <Sparkline data={s.hist} color={T.flat} w={64} h={20} dot />
                    <span className="tnum" style={{ fontSize: 13, fontWeight: 700, color: T.fg2 }}>{s.cur}</span>
                    <ScoreDots value={s.cur} color={T.flat} size={5} />
                  </div>
                </div>
              ))}
            </div>
            <FreeComment />
          </div>

          <div style={{ background: T.card, borderRadius: 16, padding: 20, border: `1px solid ${T.border}`, boxShadow: cardShadow }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 14 }}>
              <span style={{ color: T.muted, display: 'flex' }}><Icon.note /></span>
              <div style={{ fontSize: 16, fontWeight: 700 }}>実施記録</div>
            </div>
            <div style={{ fontSize: 13.5, fontWeight: 700 }}>今回　{D.record.cur.date}・{D.record.cur.method} / {D.record.cur.type}</div>
            <p style={{ margin: '9px 0 0', fontSize: 13.5, lineHeight: 1.7, color: T.fg2 }}>{D.record.cur.report}</p>
            <div style={{ background: T.warn50, border: '1px solid #f3dcb0', borderRadius: 12, padding: '13px 15px', marginTop: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <span style={{ color: T.warnText, display: 'flex' }}><Icon.lock /></span>
                <span style={{ fontSize: 13, fontWeight: 700, color: T.warnText }}>メモ</span>
                <Chip color="warning" variant="flat" size="sm">あなただけが閲覧できます</Chip>
              </div>
              <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.7, color: T.fg2 }}>{D.record.cur.memo}</p>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 14, paddingTop: 14, borderTop: `1px solid ${T.border}` }}>
              <span className="tnum" style={{ fontSize: 12.5, color: T.faint }}>前回　{D.record.prev.date}・{D.record.prev.method} / {D.record.prev.type}</span>
              <span style={{ fontSize: 12.5, color: T.muted, display: 'inline-flex', alignItems: 'center', gap: 4 }}>表示 <Icon.chevronDown width="13" height="13" /></span>
            </div>
          </div>

          <div style={{ background: T.card, borderRadius: 16, padding: 20, border: `1px solid ${T.border}`, boxShadow: cardShadow }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 14 }}>
              <span style={{ color: T.muted, display: 'flex' }}><Icon.note /></span>
              <div style={{ fontSize: 16, fontWeight: 700 }}>コメント</div>
            </div>
            <div style={{ display: 'flex', gap: 12 }}>
              <Face size={36} />
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                  <span style={{ fontSize: 13.5, fontWeight: 700 }}>{D.threadComment.author}</span>
                  <span className="tnum" style={{ fontSize: 11.5, color: T.faint }}>{D.threadComment.time}</span>
                </div>
                <p style={{ margin: '7px 0 0', fontSize: 13.5, lineHeight: 1.7, color: T.fg2 }}>{D.threadComment.body}</p>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
              <input className="hin" placeholder="コメントを入力..." />
              <button className="hbtn hbtn-pri" style={{ padding: '0 22px', borderRadius: 10, fontSize: 13, fontWeight: 700 }}>投稿</button>
            </div>
          </div>
        </div>
      </div>
    </AppFrame>
  );
}

// ── 左レールのスタイル案（4種） ──
const RAIL_DEFAULT = 'accent'; // 'plain' | 'panel' | 'cards' | 'accent'
function RailVariant({ variant = 'plain' }) {
  const basic = (
    <>{[['所属', D.member.dept], ['入社', D.member.joined], ['担当者', D.member.leader], ['前回1on1', `${D.last.date}（${D.last.daysAgo}日前）`]].map(([k, v]) => (
      <div key={k} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, padding: '6px 0' }}>
        <span style={LBL}>{k}</span><span className="tnum" style={{ fontSize: 13, fontWeight: 600, color: T.fg2, textAlign: 'right' }}>{v}</span>
      </div>
    ))}</>
  );
  const work = (
    <>
      <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 4 }}>
        <span style={{ fontSize: 14, fontWeight: 700 }}>{D.work.project.name}</span><Chip color="warning" variant="flat" size="sm">変更</Chip>
      </div>
      <div style={{ fontSize: 12, color: T.muted }}>{D.work.project.role}・{D.work.project.since}</div>
      <div style={{ display: 'flex', gap: 18, marginTop: 12, color: T.faint }}>
        <span className="tnum" style={{ fontSize: 12.5 }}>日報提出 <b style={{ color: T.fg2, fontWeight: 700 }}>{D.work.reportRate.cur}%</b></span>
        <span className="tnum" style={{ fontSize: 12.5 }}>稼働 <b style={{ color: T.fg2, fontWeight: 700 }}>{D.work.hours.cur.toFixed(1)}h</b></span>
      </div>
    </>
  );
  const certs = (
    <>{D.certs.map((c, i) => {
      const acq = c.status === 'acquired';
      return (
        <div key={i} style={{ padding: '9px 0', borderBottom: i < D.certs.length - 1 ? `1px solid ${T.border}` : 'none' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
            <span style={{ fontSize: 13, fontWeight: 600, color: T.fg2, minWidth: 0 }}>{c.name}</span>
            <span style={{ flexShrink: 0 }}><Chip color={acq ? 'success' : 'warning'} variant="flat" size="sm">{acq ? '取得済み' : '挑戦中'}</Chip></span>
          </div>
          <div className="tnum" style={{ fontSize: 11, color: T.faint, marginTop: 3 }}>{c.date}</div>
        </div>
      );
    })}</>
  );
  const sections = [
    { title: '基本情報', body: basic, color: T.pri },
    { title: '業務状況', body: work, color: T.warn },
    { title: '資格情報', body: certs, color: T.up },
  ];
  const head = (s) => {
    if (variant === 'accent') return <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}><span style={{ width: 3, height: 13, borderRadius: 2, background: s.color }} /><span style={{ fontSize: 12, fontWeight: 700, color: T.fg2, letterSpacing: '.03em' }}>{s.title}</span></div>;
    if (variant === 'cards') return <div style={{ fontSize: 12, fontWeight: 700, color: T.fg2, marginBottom: 10, letterSpacing: '.03em' }}>{s.title}</div>;
    if (variant === 'panel') return <div style={{ fontSize: 11.5, fontWeight: 700, color: T.muted, letterSpacing: '.04em', marginBottom: 8 }}>{s.title}</div>;
    return <RailHead>{s.title}</RailHead>;
  };
  if (variant === 'cards') {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {sections.map((s, i) => <div key={i} style={{ background: '#f4f7fb', border: `1px solid ${T.border}`, borderRadius: 14, padding: '15px 16px' }}>{head(s)}{s.body}</div>)}
      </div>
    );
  }
  if (variant === 'panel') {
    return (
      <div style={{ background: '#eef3fa', border: `1px solid ${T.border}`, borderRadius: 16, padding: '2px 18px' }}>
        {sections.map((s, i) => <div key={i} style={{ padding: '16px 0', borderTop: i ? `1px solid ${T.borderStrong}` : 'none' }}>{head(s)}{s.body}</div>)}
      </div>
    );
  }
  if (variant === 'accent') {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        {sections.map((s, i) => <div key={i}>{head(s)}{s.body}</div>)}
      </div>
    );
  }
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      {sections.map((s, i) => <div key={i}>{head(s)}{s.body}</div>)}
    </div>
  );
}
function RailDemo({ variant }) {
  return (
    <div className="h1o1" style={{ background: '#eef1f6', padding: 24, width: '100%', minHeight: '100%' }}>
      <div style={{ width: 280 }}><RailVariant variant={variant} /></div>
    </div>
  );
}

window.BU_T = T;
Object.assign(window, { AppFrame, PageBar, Face, FreeComment, Icon, Chip, DiffChip, Sparkline, ScoreDots, Card, BU_D: D, FlatScreen, TieredScreen, RailVariant, RailDemo });