// bu/v7.jsx — 案A統合版（v6）と構成要素は同一のまま、全く異なる3アプローチ
//  案B スプリットビュー：判断レール（左固定）× 根拠フロー（右）
//  案C エディトリアル：カード全廃・明朝の大組版・罫線とタイポだけの紙面
//  案D ダークキャンバス：濃紺の作業面に浮かぶパネル、判断だけ琥珀で発光
const { AppFrame, PageBar, Face, Icon } = window;
const { P, Q, AreaSpark, ScoreRing, DeltaChip } = window.V4;

const SERIF = "'Shippori Mincho','Noto Serif JP','Hiragino Mincho ProN',serif";

// ── テーマ ──
const LTH = { ink: P.ink, ink2: P.ink2, muted: P.muted, faint: P.faint, ghost: P.ghost, line: P.line, lineSoft: P.lineSoft, up: P.up, down: P.down, warn: P.warn, card: '#ffffff', inset: P.inset, dark: false };
const DTH = { ink: '#edf1f8', ink2: '#c4cbd8', muted: '#8e96a6', faint: '#6a7282', ghost: '#525a6a', line: 'rgba(255,255,255,.085)', lineSoft: 'rgba(255,255,255,.055)', up: '#5cc795', down: '#f08099', warn: '#e5b660', card: '#1c2230', inset: 'rgba(255,255,255,.035)', dark: true };

if (typeof document !== 'undefined' && !document.getElementById('v7-styles')) {
  const s = document.createElement('style');
  s.id = 'v7-styles';
  s.textContent = `
  .v7d .quietd{cursor:pointer;background:transparent;border:1px solid rgba(255,255,255,.16);color:#dfe4ee;border-radius:10px;font-weight:600;transition:background .15s}
  .v7d .quietd:hover{background:rgba(255,255,255,.07)}
  .v7d .actd{cursor:pointer;border:none;background:#e5b660;color:#161b26;border-radius:10px;font-weight:800;transition:filter .15s}
  .v7d .actd:hover{filter:brightness(1.06)}
  .v7d .find{font-size:13.5px;color:#edf1f8;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.09);border-radius:10px;outline:none;width:100%;padding:11px 14px;transition:border-color .15s}
  .v7d .find:focus{border-color:#e5b660}
  .v7d .find::placeholder{color:#525a6a}
  .v7d .tlnkd{cursor:pointer;border:none;background:none;color:#8e96a6;font-weight:600;padding:0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#454d5c;transition:color .15s}
  .v7d .tlnkd:hover{color:#edf1f8}
  .v7e .acte{cursor:pointer;border:none;background:${P.ink};color:#fff;border-radius:3px;font-weight:700;letter-spacing:.06em;transition:background .15s}
  .v7e .acte:hover{background:#33383f}
  .v7e .quiete{cursor:pointer;background:transparent;border:none;color:${P.ink2};font-weight:600;padding:0;text-decoration:underline;text-underline-offset:4px;text-decoration-color:${P.ghost};transition:color .15s}
  .v7e .quiete:hover{color:${P.ink}}
  `;
  document.head.appendChild(s);
}

// ── 汎用パーツ（テーマ引数で3案共用） ──
function Reason7({ th, text }) {
  const c = text.includes('低下') ? th.down : text.includes('上昇') ? th.up : th.warn;
  return <span style={{ fontSize: 11.5, fontWeight: 700, color: c, letterSpacing: '.03em', whiteSpace: 'nowrap' }}>{text}</span>;
}
function DeltaTxt({ th, delta }) {
  if (delta === 0) return <span className="tnum" style={{ fontSize: 11.5, fontWeight: 700, color: th.ghost }}>±0</span>;
  const up = delta > 0;
  return <span className="tnum" style={{ fontSize: 12, fontWeight: 800, color: up ? th.up : th.down, whiteSpace: 'nowrap' }}>{up ? '↑ +' : '↓ −'}{Math.abs(delta)}</span>;
}
function CollabTag({ th }) {
  return <span style={{ fontSize: 10, fontWeight: 700, color: th.muted, background: th.dark ? 'rgba(255,255,255,.05)' : '#fff', border: `1px solid ${th.line}`, borderRadius: 5, padding: '2px 7px', letterSpacing: '.04em' }}>collab連携</span>;
}

// 確認ポイント行（v3行構造・テーマ対応・numbered=エディトリアル用）
function CheckRow7({ th, item, idx, last, prefix, numbered = false, serif = false }) {
  const border = last ? 'none' : `1px solid ${th.line}`;
  const tone = item.kind === 'survey' ? (item.cur - item.prev < 0 ? th.down : th.up) : th.warn;
  const numEl = numbered && (
    <span className="tnum" style={{ fontFamily: SERIF, fontSize: 26, fontWeight: 600, color: th.ghost, width: 44, flexShrink: 0, lineHeight: 1 }}>{String(idx + 1).padStart(2, '0')}</span>
  );
  if (item.kind === 'signal') {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: numbered ? '19px 0' : '15px 0', borderBottom: border }}>
        {numEl || <span style={{ width: 7, height: 7, borderRadius: 7, background: tone, flexShrink: 0, marginLeft: 2 }} />}
        <span style={{ flex: 1, minWidth: 0, fontSize: numbered ? 15.5 : 14.5, fontWeight: 700, color: th.ink, fontFamily: serif ? SERIF : undefined }}>{item.q}</span>
        {item.src === 'collab' && <CollabTag th={th} />}
        <Reason7 th={th} text={item.reason} />
      </div>
    );
  }
  const delta = item.cur - item.prev;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: numbered ? 14 : 18, padding: numbered ? '19px 0' : '15px 0', borderBottom: border }}>
      {numEl}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: numbered ? 16.5 : 15.5, fontWeight: numbered ? 600 : 800, color: th.ink, letterSpacing: '.01em', fontFamily: serif ? SERIF : undefined }}>{item.q}</div>
        <div style={{ marginTop: 4 }}><Reason7 th={th} text={item.reason} /></div>
      </div>
      <AreaSpark data={item.hist} color={tone} w={84} h={30} id={`${prefix}cp${idx}`} />
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, width: 106, justifyContent: 'flex-end' }}>
        <span className="tnum" style={{ fontSize: 14, color: th.faint, fontWeight: 600 }}>{item.prev}</span>
        <span style={{ color: th.faint, fontSize: 12 }}>→</span>
        <span className="tnum" style={{ fontSize: 27, fontWeight: 800, lineHeight: 1, color: tone, fontFamily: serif ? SERIF : undefined }}>{item.cur}</span>
      </div>
      <div style={{ width: 56, display: 'flex', justifyContent: 'flex-end' }}>
        {th.dark || numbered ? <DeltaTxt th={th} delta={delta} /> : <DeltaChip delta={delta} />}
      </div>
    </div>
  );
}

// アンケート詳細行（テーマ対応）
function SurveyRow7({ th, s, last, idx, prefix }) {
  const delta = s.cur - s.prev;
  const changed = delta !== 0;
  const c = delta < 0 ? th.down : th.up;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 90px 96px 60px', gap: 16, alignItems: 'center', padding: '13px 0', borderBottom: last ? 'none' : `1px solid ${th.lineSoft}` }}>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: 13.5, fontWeight: changed ? 700 : 600, color: th.ink }}>{s.q}</div>
        <div style={{ fontSize: 11, color: th.ghost, marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.desc}</div>
      </div>
      <span style={{ display: 'flex', justifyContent: 'center' }}>
        {changed ? <AreaSpark data={s.hist} color={c} w={72} h={22} id={`${prefix}sv${idx}`} /> : <window.Sparkline data={s.hist} color={th.ghost} w={72} h={20} dot={false} />}
      </span>
      <span style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'flex-end', gap: 7 }}>
        <span className="tnum" style={{ fontSize: 12, color: th.ghost }}>{s.prev}</span>
        <span style={{ color: th.ghost, fontSize: 11 }}>→</span>
        <span className="tnum" style={{ fontSize: 16, fontWeight: 800, color: changed ? th.ink : th.muted }}>{s.cur}</span>
      </span>
      <span style={{ display: 'flex', justifyContent: 'flex-end' }}><DeltaTxt th={th} delta={delta} /></span>
    </div>
  );
}

// 根拠4セクションの中身（見出しは呼び出し側で）
function CommentBody({ th, linkCls }) {
  return (
    <>
      <p style={{ margin: 0, fontSize: 15.5, lineHeight: 1.9, color: th.ink, letterSpacing: '.01em' }}>{Q.comment}</p>
      <details style={{ marginTop: 14 }}>
        <summary className={linkCls} style={{ fontSize: 12.5, display: 'inline-block' }}>前回のコメントを見る</summary>
        <p style={{ margin: '12px 0 0', fontSize: 13, lineHeight: 1.8, color: th.muted }}>{Q.commentPrev}</p>
      </details>
    </>
  );
}
function RecordBody({ th }) {
  return (
    <>
      <p style={{ margin: 0, fontSize: 13.5, lineHeight: 1.8, color: th.ink2 }}>{Q.record.report}</p>
      <div style={{ display: 'flex', gap: 12, marginTop: 16, paddingTop: 14, borderTop: `1px dashed ${th.line}` }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11.5, fontWeight: 700, color: th.faint, flexShrink: 0 }}><Icon.lock width="12" height="12" /> 自分用メモ</span>
        <p style={{ margin: 0, fontSize: 13, lineHeight: 1.75, color: th.muted }}>{Q.record.memo}</p>
      </div>
    </>
  );
}
function SurveyBody({ th, prefix, linkCls }) {
  const changed = Q.survey.filter((s) => s.cur !== s.prev);
  const flat = Q.survey.filter((s) => s.cur === s.prev);
  return (
    <>
      <div style={{ fontSize: 11.5, fontWeight: 700, color: th.muted, marginBottom: 2 }}>変化あり <span className="tnum" style={{ color: th.ghost, fontWeight: 600 }}>{changed.length}</span></div>
      {changed.map((s, i) => <SurveyRow7 key={i} th={th} s={s} idx={i} prefix={prefix} last={i === changed.length - 1} />)}
      <details style={{ marginTop: 16 }}>
        <summary className={linkCls} style={{ fontSize: 12, display: 'inline-block' }}>変化なし {flat.length}件を表示</summary>
        <div style={{ marginTop: 6 }}>
          {flat.map((s, i) => <SurveyRow7 key={i} th={th} s={s} idx={`f${i}`} prefix={prefix} last={i === flat.length - 1} />)}
        </div>
      </details>
    </>
  );
}
function ThreadBody({ th, inputCls, actCls }) {
  return (
    <>
      <div style={{ display: 'flex', gap: 12 }}>
        <Face size={34} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
            <span style={{ fontSize: 13.5, fontWeight: 700, color: th.ink }}>{Q.thread.author}</span>
            <span className="tnum" style={{ fontSize: 11.5, color: th.ghost }}>{Q.thread.time}</span>
          </div>
          <p style={{ margin: '6px 0 0', fontSize: 13.5, lineHeight: 1.8, color: th.ink2 }}>{Q.thread.body}</p>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
        <input className={inputCls} placeholder="コメントを入力..." />
        <button className={actCls} style={{ padding: '0 22px', fontSize: 13, flexShrink: 0 }}>投稿</button>
      </div>
    </>
  );
}

// ═════════════════ 案B スプリットビュー ═════════════════
function RailSec({ label, children, first = false }) {
  return (
    <div style={{ padding: '18px 24px', borderTop: first ? 'none' : `1px solid ${P.line}` }}>
      <div style={{ fontSize: 10.5, fontWeight: 700, color: P.faint, letterSpacing: '.12em', marginBottom: 9 }}>{label}</div>
      {children}
    </div>
  );
}
function CardB({ children, hero = false, pad = '24px 30px 26px', style = {} }) {
  return (
    <div style={{ background: '#fff', borderRadius: 14, border: `1px solid ${P.line}`, padding: pad, boxShadow: hero ? '0 1px 2px rgba(18,22,30,.05), 0 14px 32px -20px rgba(18,22,30,.2)' : '0 1px 2px rgba(18,22,30,.04)', ...style }}>{children}</div>
  );
}
function HeadB({ children, right }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, marginBottom: 16 }}>
      <span style={{ fontSize: 12.5, fontWeight: 700, color: P.faint, letterSpacing: '.12em' }}>{children}</span>
      {right}
    </div>
  );
}
function ScreenV7A() {
  const th = LTH;
  return (
    <div className="v4">
      <AppFrame>
        <PageBar />
        <div style={{ display: 'grid', gridTemplateColumns: '296px 1fr', gap: 16, alignItems: 'start' }}>

          {/* ═ 判断レール（左固定） ═ */}
          <div style={{ background: '#fff', borderRadius: 16, border: `1px solid ${P.line}`, boxShadow: '0 1px 2px rgba(18,22,30,.05), 0 14px 32px -20px rgba(18,22,30,.2)', overflow: 'hidden' }}>
            <div style={{ padding: '26px 24px 20px', textAlign: 'center', background: 'linear-gradient(180deg,#faf4e3 0%,#fff 90%)' }}>
              <div style={{ display: 'flex', justifyContent: 'center' }}><Face size={64} /></div>
              <div style={{ fontSize: 19, fontWeight: 800, color: P.ink, marginTop: 12 }}>{Q.member.name}</div>
              <div style={{ fontSize: 12, color: P.muted, marginTop: 5 }}>{Q.member.dept} ・ {Q.member.role}<br />勤続 {Q.member.tenure}</div>
              <div className="tnum" style={{ fontSize: 11, color: P.faint, marginTop: 7 }}>対象期間 {Q.period}</div>
            </div>
            <RailSec label="状態">
              <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                <span style={{ width: 8, height: 8, borderRadius: 8, background: P.warn }} />
                <span style={{ fontSize: 19, fontWeight: 800, color: P.ink }}>{Q.status.label}</span>
              </div>
              <div style={{ fontSize: 11.5, color: P.muted, marginTop: 6, lineHeight: 1.6 }}>{Q.status.note}</div>
            </RailSec>
            <RailSec label="総合スコア">
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <ScoreRing score={Q.summary.score} color={P.warn} track={P.line} size={64} />
                <div>
                  <DeltaChip delta={Q.summary.delta} />
                  <div style={{ marginTop: 7 }}><AreaSpark data={Q.summary.trend} color={P.warn} w={62} h={20} id="v7arail" /></div>
                </div>
              </div>
            </RailSec>
            <RailSec label="前回1on1">
              <div className="tnum" style={{ fontSize: 17, fontWeight: 800, color: P.ink }}>{Q.last.date}</div>
              <div style={{ fontSize: 11.5, fontWeight: 700, color: P.warn, marginTop: 4 }}>{Q.last.daysAgo}日前 — 未実施期間が長め</div>
            </RailSec>
            <div style={{ padding: '18px 24px 22px', borderTop: `1px solid ${P.line}`, display: 'flex', flexDirection: 'column', gap: 9 }}>
              <button className="act" style={{ padding: '12px 0', fontSize: 13.5, width: '100%' }}>実施記録を登録</button>
              <button className="quiet" style={{ padding: '10px 0', fontSize: 12.5, width: '100%' }}>プロフィール詳細</button>
              <div style={{ display: 'flex', justifyContent: 'center', gap: 16, marginTop: 6 }}>
                <button className="tlnk" style={{ fontSize: 11.5 }}>業務情報</button>
                <button className="tlnk" style={{ fontSize: 11.5 }}>資格情報</button>
              </div>
            </div>
          </div>

          {/* ═ 根拠フロー（右） ═ */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, minWidth: 0 }}>
            <CardB hero pad="24px 30px 20px">
              <HeadB right={<span style={{ fontSize: 11, color: P.ghost }}>ルールベースで自動抽出</span>}>今回の確認ポイント</HeadB>
              <div style={{ marginTop: -4 }}>
                {Q.checkpoints.map((c, i) => <CheckRow7 key={i} th={th} item={c} idx={i} prefix="v7a" last={i === Q.checkpoints.length - 1} />)}
              </div>
            </CardB>
            <CardB><HeadB>本人コメント</HeadB><CommentBody th={th} linkCls="tlnk" /></CardB>
            <CardB><HeadB right={<span className="tnum" style={{ fontSize: 12, color: P.ghost }}>{Q.record.date} ・ {Q.record.method}</span>}>前回1on1記録</HeadB><RecordBody th={th} /></CardB>
            <CardB><HeadB right={<button className="tlnk" style={{ fontSize: 12 }}>過去回答一覧</button>}>アンケート詳細</HeadB><SurveyBody th={th} prefix="v7a" linkCls="tlnk" /></CardB>
            <CardB pad="24px 30px 30px"><HeadB>コメント・共有</HeadB><ThreadBody th={th} inputCls="fin" actCls="act" /></CardB>
            <div style={{ fontSize: 11, color: P.ghost, padding: '0 6px' }}>「collab連携」の項目は会社設定でON時のみ表示</div>
          </div>
        </div>
      </AppFrame>
    </div>
  );
}

// ═════════════════ 案C エディトリアル ═════════════════
function ESec({ title, right, children, style = {} }) {
  return (
    <div style={{ padding: '30px 0 34px', borderTop: `1px solid ${P.line}`, ...style }}>
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, marginBottom: 18 }}>
        <span style={{ fontFamily: SERIF, fontSize: 17, fontWeight: 700, color: P.ink, letterSpacing: '.05em' }}>{title}</span>
        {right}
      </div>
      {children}
    </div>
  );
}
function ScreenV7B() {
  const th = LTH;
  return (
    <div className="v4 v7e">
      <AppFrame>
        <PageBar />
        <div style={{ maxWidth: 812, margin: '0 auto' }}>
          <div style={{ background: '#fff', border: `1px solid ${P.line}`, boxShadow: '0 1px 2px rgba(18,22,30,.04), 0 18px 44px -26px rgba(18,22,30,.2)', padding: '52px 56px 44px' }}>

            {/* 題字 */}
            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 20 }}>
              <div style={{ fontSize: 10.5, fontWeight: 700, color: P.faint, letterSpacing: '.24em' }}>1on1 MEMBER REVIEW<span className="tnum" style={{ marginLeft: 14, letterSpacing: '.08em', color: P.ghost }}>{Q.period}</span></div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 18, flexShrink: 0 }}>
                <button className="quiete" style={{ fontSize: 12 }}>プロフィール詳細</button>
                <button className="acte" style={{ padding: '10px 20px', fontSize: 12.5 }}>実施記録を登録</button>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginTop: 26 }}>
              <Face size={58} />
              <div>
                <div style={{ fontFamily: SERIF, fontSize: 32, fontWeight: 700, color: P.ink, letterSpacing: '.03em', lineHeight: 1.2 }}>{Q.member.name}</div>
                <div style={{ fontSize: 12.5, color: P.muted, marginTop: 6 }}>{Q.member.dept} ・ {Q.member.role} ・ 勤続 {Q.member.tenure}</div>
              </div>
            </div>

            {/* 状態・総合スコア・前回1on1：太罫の下に等価3列 */}
            <div style={{ borderTop: `2.5px solid ${P.ink}`, marginTop: 30, display: 'grid', gridTemplateColumns: '1.15fr 1.15fr 1fr' }}>
              <div style={{ padding: '20px 24px 24px 0' }}>
                <div style={{ fontSize: 10.5, fontWeight: 700, color: P.faint, letterSpacing: '.18em', marginBottom: 12 }}>状態</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span style={{ width: 9, height: 9, borderRadius: 9, background: P.warn }} />
                  <span style={{ fontFamily: SERIF, fontSize: 26, fontWeight: 700, color: P.ink }}>{Q.status.label}</span>
                </div>
                <div style={{ fontSize: 11.5, color: P.muted, marginTop: 8, lineHeight: 1.7 }}>{Q.status.note}</div>
              </div>
              <div style={{ padding: '20px 24px 24px', borderLeft: `1px solid ${P.line}` }}>
                <div style={{ fontSize: 10.5, fontWeight: 700, color: P.faint, letterSpacing: '.18em', marginBottom: 6 }}>総合スコア</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                  <span className="tnum" style={{ fontFamily: SERIF, fontSize: 52, fontWeight: 700, color: P.ink, lineHeight: 1 }}>{Q.summary.score}</span>
                  <span className="tnum" style={{ fontSize: 13, color: P.ghost, fontWeight: 600 }}>/ 5.0</span>
                  <DeltaTxt th={th} delta={Q.summary.delta} />
                </div>
                <div style={{ marginTop: 10 }}><AreaSpark data={Q.summary.trend} color={P.warn} w={110} h={24} id="v7bhero" /></div>
              </div>
              <div style={{ padding: '20px 0 24px 24px', borderLeft: `1px solid ${P.line}` }}>
                <div style={{ fontSize: 10.5, fontWeight: 700, color: P.faint, letterSpacing: '.18em', marginBottom: 12 }}>前回1on1</div>
                <div className="tnum" style={{ fontFamily: SERIF, fontSize: 21, fontWeight: 700, color: P.ink }}>{Q.last.date}</div>
                <div style={{ fontSize: 11.5, fontWeight: 700, color: P.warn, marginTop: 7 }}>{Q.last.daysAgo}日前 — 未実施期間が長め</div>
              </div>
            </div>

            {/* 確認ポイント：番号付きの大行 */}
            <div style={{ borderTop: `2.5px solid ${P.ink}`, paddingTop: 26, paddingBottom: 10 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 4 }}>
                <span style={{ fontFamily: SERIF, fontSize: 20, fontWeight: 700, color: P.ink, letterSpacing: '.05em' }}>今回の確認ポイント</span>
                <span style={{ fontSize: 11, color: P.ghost }}>ルールベースで自動抽出</span>
              </div>
              {Q.checkpoints.map((c, i) => <CheckRow7 key={i} th={th} item={c} idx={i} prefix="v7b" numbered serif last={i === Q.checkpoints.length - 1} />)}
            </div>

            <ESec title="本人コメント"><CommentBody th={th} linkCls="quiete" /></ESec>
            <ESec title="前回1on1記録" right={<span className="tnum" style={{ fontSize: 12, color: P.ghost }}>{Q.record.date} ・ {Q.record.method}</span>}><RecordBody th={th} /></ESec>
            <ESec title="アンケート詳細" right={<button className="quiete" style={{ fontSize: 12 }}>過去回答一覧</button>}><SurveyBody th={th} prefix="v7b" linkCls="quiete" /></ESec>
            <ESec title="コメント・共有" style={{ paddingBottom: 8 }}><ThreadBody th={th} inputCls="fin" actCls="acte" /></ESec>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 20, padding: '14px 6px 0' }}>
            <button className="tlnk" style={{ fontSize: 12 }}>業務情報を見る</button>
            <button className="tlnk" style={{ fontSize: 12 }}>資格情報を見る</button>
            <span style={{ marginLeft: 'auto', fontSize: 11, color: P.ghost }}>「collab連携」の項目は会社設定でON時のみ表示</span>
          </div>
        </div>
      </AppFrame>
    </div>
  );
}

// ═════════════════ 案D ダークキャンバス ═════════════════
function CardD({ children, hero = false, pad = '24px 32px 26px', style = {} }) {
  return (
    <div style={{
      background: DTH.card, borderRadius: 16, border: `1px solid ${hero ? 'rgba(229,182,96,.22)' : 'rgba(255,255,255,.07)'}`,
      boxShadow: hero ? '0 0 0 1px rgba(229,182,96,.06), 0 20px 44px -22px rgba(0,0,0,.6)' : '0 10px 26px -18px rgba(0,0,0,.5)',
      padding: hero ? 0 : pad, overflow: 'hidden', ...style,
    }}>{children}</div>
  );
}
function HeadD({ children, right, amber = false }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12, marginBottom: 16 }}>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
        <span style={{ width: 14, height: 3, borderRadius: 2, background: amber ? DTH.warn : DTH.faint }} />
        <span style={{ fontSize: 12, fontWeight: 700, color: DTH.faint, letterSpacing: '.14em' }}>{children}</span>
      </span>
      {right}
    </div>
  );
}
function ScreenV7C() {
  const th = DTH;
  const cell = { padding: '17px 26px 20px' };
  return (
    <div className="v4 v7d">
      <AppFrame>
        <PageBar />
        <div style={{ background: '#131722', borderRadius: 20, padding: '22px 22px 26px', boxShadow: 'inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px -24px rgba(10,14,22,.55)' }}>
          <div style={{ maxWidth: 780, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 13 }}>

            {/* ═ 判断カード ═ */}
            <CardD hero>
              <div style={{ padding: '25px 32px 22px', background: 'linear-gradient(160deg, rgba(229,182,96,.10) 0%, rgba(229,182,96,.03) 45%, transparent 100%)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                  <Face size={52} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 21, fontWeight: 800, color: th.ink, letterSpacing: '.01em' }}>{Q.member.name}</div>
                    <div style={{ fontSize: 12.5, color: th.muted, marginTop: 5 }}>{Q.member.dept} ・ {Q.member.role} ・ 勤続 {Q.member.tenure}<span className="tnum" style={{ color: th.faint }}>　対象期間 {Q.period}</span></div>
                  </div>
                  <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
                    <button className="quietd" style={{ padding: '10px 15px', fontSize: 12.5 }}>プロフィール詳細</button>
                    <button className="actd" style={{ padding: '10px 18px', fontSize: 13 }}>実施記録を登録</button>
                  </div>
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1.25fr 1.1fr 1fr', borderTop: `1px solid ${th.line}` }}>
                <div style={{ ...cell, paddingLeft: 32 }}>
                  <div style={{ fontSize: 10.5, fontWeight: 700, color: th.faint, letterSpacing: '.12em', marginBottom: 9 }}>状態</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                    <span style={{ width: 8, height: 8, borderRadius: 8, background: th.warn, boxShadow: '0 0 10px rgba(229,182,96,.6)' }} />
                    <span style={{ fontSize: 19, fontWeight: 800, color: th.ink }}>{Q.status.label}</span>
                  </div>
                  <div style={{ fontSize: 11.5, color: th.muted, marginTop: 7 }}>{Q.status.note}</div>
                </div>
                <div style={{ ...cell, borderLeft: `1px solid ${th.line}` }}>
                  <div style={{ fontSize: 10.5, fontWeight: 700, color: th.faint, letterSpacing: '.12em', marginBottom: 9 }}>総合スコア</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
                    <ScoreRing score={Q.summary.score} color={th.warn} track="rgba(255,255,255,.09)" size={60} dark />
                    <div>
                      <DeltaChip delta={Q.summary.delta} dark />
                      <div style={{ marginTop: 6 }}><AreaSpark data={Q.summary.trend} color={th.warn} w={58} h={18} id="v7chero" /></div>
                    </div>
                  </div>
                </div>
                <div style={{ ...cell, borderLeft: `1px solid ${th.line}`, paddingRight: 32 }}>
                  <div style={{ fontSize: 10.5, fontWeight: 700, color: th.faint, letterSpacing: '.12em', marginBottom: 9 }}>前回1on1</div>
                  <div className="tnum" style={{ fontSize: 17, fontWeight: 800, color: th.ink }}>{Q.last.date}</div>
                  <div style={{ fontSize: 11.5, fontWeight: 700, color: th.warn, marginTop: 5 }}>{Q.last.daysAgo}日前 — 未実施期間が長め</div>
                </div>
              </div>
              <div style={{ background: 'rgba(255,255,255,.025)', borderTop: `1px solid ${th.line}`, padding: '20px 32px 18px' }}>
                <HeadD amber right={<span style={{ fontSize: 11, color: th.ghost }}>ルールベースで自動抽出</span>}>今回の確認ポイント</HeadD>
                <div style={{ marginTop: -6 }}>
                  {Q.checkpoints.map((c, i) => <CheckRow7 key={i} th={th} item={c} idx={i} prefix="v7c" last={i === Q.checkpoints.length - 1} />)}
                </div>
              </div>
            </CardD>

            {/* ═ 根拠カード群 ═ */}
            <CardD><HeadD>本人コメント</HeadD><CommentBody th={th} linkCls="tlnkd" /></CardD>
            <CardD><HeadD right={<span className="tnum" style={{ fontSize: 12, color: th.ghost }}>{Q.record.date} ・ {Q.record.method}</span>}>前回1on1記録</HeadD><RecordBody th={th} /></CardD>
            <CardD><HeadD right={<button className="tlnkd" style={{ fontSize: 12 }}>過去回答一覧</button>}>アンケート詳細</HeadD><SurveyBody th={th} prefix="v7c" linkCls="tlnkd" /></CardD>
            <CardD pad="24px 32px 30px"><HeadD>コメント・共有</HeadD><ThreadBody th={th} inputCls="find" actCls="actd" /></CardD>

            <div style={{ display: 'flex', alignItems: 'center', gap: 20, padding: '2px 6px 0' }}>
              <button className="tlnkd" style={{ fontSize: 12 }}>業務情報を見る</button>
              <button className="tlnkd" style={{ fontSize: 12 }}>資格情報を見る</button>
              <span style={{ marginLeft: 'auto', fontSize: 11, color: th.ghost }}>「collab連携」の項目は会社設定でON時のみ表示</span>
            </div>
          </div>
        </div>
      </AppFrame>
    </div>
  );
}

Object.assign(window, { ScreenV7A, ScreenV7B, ScreenV7C, V7: { LTH, CardB, HeadB, RailSec, CheckRow7, CommentBody, RecordBody, SurveyBody, ThreadBody } });