/* CASE 01 デモ（DOM実装・動画の代替案）：Namazu API で構築した想定の
   サポートコンソール風UI。サイドバー（受信トレイ／月次レポート）＋
   スクロール可能なメインビューの2層構成（旧・下部ステータスバーのナレーションは廃止）。
   文字・レイアウトはコンテナ幅基準（cqw）でスケール。挙動・中身の描画は case1.js。 */

/* CASE 01 行は fugu 定性評価と同じ「見出し→全幅メディア→下にキャプション」の縦構成。
   他ケースは従来の左右2カラムのまま */
.nz-uc.nz-uc--wide{display:block;}
.nz-uc--wide .nz-uc__media{margin:clamp(18px,2.5vw,26px) auto 0;max-width:860px;}
.nz-uc__b--wide{max-width:860px;margin:14px auto 0;}


.nz-anim1{container-type:inline-size;aspect-ratio:16/10;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:0px 1px 3px 0px rgba(0,0,0,.1),0px 1px 2px -1px rgba(0,0,0,.1);overflow:hidden;}
/* cqw 単位はコンテナ自身には適用できないため、直下のラッパーで基準フォントを決める。
   アプリUIらしい密度にするため上限は17px（最大幅860px時 2.0cqw≒17px） */
.nz-anim1__in{height:100%;display:flex;flex-direction:column;font-size:clamp(9px,2.0cqw,17px);font-family:var(--font-jp);color:#111827;}
@supports not (container-type:inline-size){.nz-anim1__in{font-size:13px;}}
/* fugu_lp.css の .t-ja{font-family:var(--font-jp)} がmono要素内でも勝ってしまうため、
   デモ内の .t-ja は常にコンテナのフォントを継承させる（mono枠はmono、本文枠はJPのまま） */
.nz-anim1 .t-ja{font-family:inherit;}

/* ---- ウィンドウ風ヘッダ ---- */
.nz-anim1__chrome{flex:none;display:flex;align-items:center;gap:.7em;padding:.55em .95em;background:#f6f8fa;border-bottom:1px solid #e5e7eb;}
.nz-anim1__dots{display:flex;gap:.4em;}
.nz-anim1__dots i{width:.62em;height:.62em;border-radius:50%;background:#d1d5db;}
.nz-anim1__title{min-width:0;font-family:var(--font-mono-jb);font-size:.78em;letter-spacing:.05em;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nz-anim1__title .t-ja{font-family:var(--font-mono-jb);}
/* 再生ボタンは常時表示（再生中に押すと最初からやり直し）。
   表示/非表示を切り替えるとヘッダの高さが変わりガタつくため display は固定 */
/* ⏸/▶ボタン（chrome 内・常時表示） */
.nz-anim1__replay{display:inline-block;margin-left:auto;font-family:var(--font-mono-jb);font-size:.72em;color:#6b7280;background:#fff;border:1px solid #e5e7eb;padding:.18em .7em;cursor:pointer;white-space:nowrap;transition:color .15s ease,border-color .15s ease;}
.nz-anim1__replay .t-ja{font-family:var(--font-mono-jb);}
.nz-anim1__replay:hover{color:var(--ac);border-color:var(--ac);}

/* ---- アプリ本体：サイドバー＋メイン ---- */
.nz-anim1__app{flex:1;display:flex;min-height:0;}
.nz-anim1__side{flex:none;width:10.5em;display:flex;flex-direction:column;gap:.3em;padding:.7em .55em;border-right:1px solid #e5e7eb;background:#fafbfc;}
.nz-anim1__side>button{display:flex;align-items:center;gap:.45em;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:.45em;padding:.45em .6em;font-family:var(--font-jp);font-size:.8em;color:#374151;cursor:pointer;transition:background .15s ease;}
.nz-anim1__side>button:hover{background:#f1f5f9;}
.nz-anim1__side>button[data-active="true"]{background:#fff;border-color:#e5e7eb;color:#111827;font-weight:600;}
.nz-anim1__side .c{margin-left:auto;font-family:var(--font-mono-jb);font-size:.85em;color:#9ca3af;}
.nz-anim1__side .nd{margin-left:auto;width:.5em;height:.5em;border-radius:50%;background:var(--ac);opacity:0;transition:opacity .3s ease;}
.nz-anim1__side .nd[data-on]{opacity:1;}
.nz-anim1__sidefoot{margin-top:auto;font-family:var(--font-mono-jb);font-size:.6em;line-height:1.7;letter-spacing:.04em;color:#9ca3af;}
.nz-anim1__sidefoot .br{color:var(--ac);font-weight:600;}
.nz-anim1__main{flex:1;position:relative;min-width:0;}

/* ---- ビュー（受信トレイ／詳細／レポート）：切替表示＋内部スクロール ---- */
.nz-anim1__view{position:absolute;inset:0;display:none;flex-direction:column;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#e5e7eb transparent;}
.nz-anim1__view[data-active="true"]{display:flex;animation:nz-anim1-fadein .25s ease;}
.nz-anim1__view::-webkit-scrollbar{width:6px;}
.nz-anim1__view::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:3px;}
@keyframes nz-anim1-fadein{from{opacity:0;}to{opacity:1;}}
.nz-anim1__viewhead{position:sticky;top:0;z-index:1;flex:none;display:flex;align-items:center;gap:.6em;padding:.7em .95em .55em;background:#fff;border-bottom:1px solid #f1f5f9;}
.nz-anim1__viewtitle{flex:1;min-width:0;font-size:.88em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nz-anim1__count{flex:none;font-family:var(--font-mono-jb);font-size:.72em;color:#6b7280;}
.nz-anim1__count b{color:#111827;font-weight:600;}
.nz-anim1__chip{flex:none;font-family:var(--font-mono-jb);font-size:.68em;border:1px solid #e5e7eb;background:#fafbfc;color:#6b7280;padding:.12em .6em;white-space:nowrap;}

/* ---- 受信トレイ：行（クリックで詳細へ） ---- */
.nz-anim1__list{display:flex;flex-direction:column;padding:0 .95em;}
.nz-anim1__row{display:none;grid-template-columns:7.2em minmax(0,1fr) auto auto;gap:.55em;align-items:center;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid #f1f5f9;padding:.48em .1em;font-family:var(--font-jp);font-size:.78em;color:#6b7280;cursor:pointer;transition:background .15s ease;}
.nz-anim1__row[data-in]{display:grid;animation:nz-anim1-rowin .8s ease;}
/* 新着の到達を目立たせる：上からスライドイン＋アクセント色の残光 */
@keyframes nz-anim1-rowin{0%{opacity:0;transform:translateY(-.5em);background:rgba(225,6,0,.07);}55%{opacity:1;transform:none;background:rgba(225,6,0,.07);}100%{background:transparent;}}
.nz-anim1__row:hover{background:#fafbfc;}
/* 未処理（新着）は件名太字＋「未対応」、処理後は通常表示＋結果ステータス */
.nz-anim1__row:not([data-done]) .s{color:#111827;font-weight:600;}
.nz-anim1__row .stp{font-family:var(--font-mono-jb);font-size:.9em;color:#9ca3af;}
.nz-anim1__row .std{display:none;}
.nz-anim1__row[data-done] .std{display:inline;}
.nz-anim1__row[data-done] .stp{display:none;}
.nz-anim1__row .f{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#111827;}
.nz-anim1__row .s{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nz-anim1__row .cat,.nz-anim1__viewhead .cat{font-family:var(--font-mono-jb);font-size:.82em;border:1px solid #e5e7eb;background:#fafbfc;color:#6b7280;padding:.05em .5em;white-space:nowrap;}
.nz-anim1__viewhead .cat{font-size:.68em;}
.nz-anim1__row .st,.nz-anim1__viewhead .st{white-space:nowrap;text-align:right;}
.nz-anim1__viewhead .st{font-size:.75em;}
.nz-anim1__row .ok,.nz-anim1__viewhead .ok{color:#1a7f37;}
.nz-anim1__row .esc,.nz-anim1__viewhead .esc{background:#fff7e6;color:#8a5a00;padding:.05em .45em;}
.nz-anim1__listfoot{margin-top:auto;flex:none;border-top:1px dashed #e5e7eb;padding:.55em .95em;font-size:.75em;color:#6b7280;opacity:0;transition:opacity .4s ease;}
.nz-anim1__listfoot[data-on]{opacity:1;}
.nz-anim1__listfoot b{color:#111827;font-weight:600;}

/* ---- メール詳細：受信メール／Namazuの処理／自動返信の3カード ---- */
.nz-anim1__back{flex:1;min-width:0;text-align:left;background:transparent;border:0;padding:0;font-family:var(--font-mono-jb);font-size:.72em;color:#6b7280;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s ease;}
.nz-anim1__back:hover{color:var(--ac);}
.nz-anim1__detail{display:flex;flex-direction:column;gap:.6em;padding:.7em .95em .9em;}
.nz-anim1__card{border:1px solid #e5e7eb;border-radius:.55em;padding:.6em .8em;background:#fff;}
.nz-anim1__card .ch{font-family:var(--font-mono-jb);font-size:.62em;letter-spacing:.1em;color:#9ca3af;margin-bottom:.5em;}
.nz-anim1__card .ch.ch--ac{color:var(--ac);}
.nz-anim1__card .ch .t-ja{font-family:var(--font-mono-jb);}
.nz-anim1__card .mh{display:flex;align-items:baseline;gap:.6em;min-width:0;font-size:.75em;color:#6b7280;}
.nz-anim1__card .mf{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#111827;}
.nz-anim1__card .mt{margin-left:auto;font-family:var(--font-mono-jb);}
.nz-anim1__card .ms{margin-top:.3em;font-size:.85em;font-weight:600;line-height:1.5;}
.nz-anim1__card .mb{margin-top:.25em;font-size:.78em;line-height:1.65;color:#6b7280;}
.nz-anim1__card--proc{background:#fbfcfe;}
.nz-anim1__card .chips{display:flex;flex-wrap:wrap;gap:.4em;}
.nz-anim1__card .pchip{font-family:var(--font-mono-jb);font-size:.7em;border:1px solid #e5e7eb;background:#fff;color:#374151;padding:.14em .6em;opacity:0;transform:translateY(.4em);transition:opacity .3s ease,transform .3s ease;}
.nz-anim1__card .pchip[data-on]{opacity:1;transform:none;}
.nz-anim1__card .pchip--ok{border-color:#dafbe1;background:#f2fbf4;color:#1a7f37;}
.nz-anim1__card .pchip--warn{border-color:#f3dfb8;background:#fff7e6;color:#8a5a00;}
.nz-anim1__card .rbody{font-size:.78em;line-height:1.7;min-height:4.5em;}
.nz-anim1__card .rbody.typing::after{content:"▍";color:var(--ac);animation:nz-anim1-blink 1s steps(1) infinite;}
@keyframes nz-anim1-blink{50%{opacity:0;}}
.nz-anim1__card .rfoot{margin-top:.5em;padding-top:.4em;border-top:1px dashed #f1f5f9;font-family:var(--font-mono-jb);font-size:.68em;text-align:right;color:#1a7f37;opacity:0;transition:opacity .3s ease;}
.nz-anim1__card .rfoot[data-on]{opacity:1;}
.nz-anim1__card .rfoot--esc{color:#8a5a00;}

/* ---- 月次レポート：KPI＋内訳グラフ＋生成ドキュメント ---- */
.nz-anim1__doc{display:flex;flex-direction:column;gap:.7em;padding:.7em .95em .9em;}
/* レポート冒頭のエグゼクティブサマリー（TL;DR）：主要成果を太字で一目に。視線誘導も兼ねる */
.nz-anim1__tldr{background:rgba(225,6,0,.06);border-left:2px solid var(--ac);border-radius:0 .3em .3em 0;padding:.5em .7em;font-size:.74em;line-height:1.7;color:#374151;}
.nz-anim1__tldr b{color:#111827;font-weight:700;}
.nz-anim1__tldrlabel{display:inline-block;margin-right:.5em;font-family:var(--font-mono-jb);font-size:1em;letter-spacing:.06em;color:var(--ac);font-weight:700;}
.nz-anim1__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#e5e7eb;border:1px solid #e5e7eb;}
.nz-anim1__kpi{background:#fff;padding:.5em .65em;display:flex;flex-direction:column;gap:.14em;min-width:0;}
.nz-anim1__kpi .l{font-size:.62em;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nz-anim1__kpi .v{font-family:var(--font-mono-jb);font-size:.98em;font-weight:600;color:#111827;white-space:nowrap;}
.nz-anim1__kpi .v .t-ja{font-family:var(--font-mono-jb);}
.nz-anim1__kpi .d{font-family:var(--font-mono-jb);font-size:.62em;color:#6b7280;white-space:nowrap;}
.nz-anim1__kpi .d.good{color:#1a7f37;}
.nz-anim1__bars{display:flex;flex-direction:column;gap:.5em;}
.nz-anim1__bar{display:grid;grid-template-columns:7.2em minmax(0,1fr) auto;align-items:center;gap:.6em;font-size:.75em;color:#6b7280;}
.nz-anim1__bar .l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nz-anim1__bar .track{height:.72em;background:#f1f5f9;overflow:hidden;}
.nz-anim1__bar .fill{display:block;height:100%;width:0;background:#111827;transition:width .9s cubic-bezier(.22,.61,.36,1);}
.nz-anim1__bar .v{font-family:var(--font-mono-jb);text-align:right;color:#111827;white-space:nowrap;}
.nz-anim1__docbody{display:flex;flex-direction:column;gap:.55em;}
.nz-anim1__sec{opacity:0;transform:translateY(.4em);transition:opacity .4s ease,transform .4s ease;}
.nz-anim1__sec[data-on]{opacity:1;transform:none;}
.nz-anim1__sec h4{margin:0 0 .25em;padding-left:.5em;border-left:2px solid var(--ac);font-size:.78em;font-weight:600;color:#111827;}
.nz-anim1__sec ul{margin:0;padding-left:1.2em;}
.nz-anim1__sec li{font-size:.74em;line-height:1.75;color:#374151;}

/* ---- 枠下の注記（表示内容が架空である旨） ---- */
.nz-anim1__note{margin:8px 0 0;font-size:10.5px;line-height:1.7;color:#9ca3af;font-family:var(--font-jp);}

@media (max-width:560px){
	/* 狭幅：16/10 だと全体が豆粒になるため、縦長比率＋固定フォントに切り替える */
	.nz-anim1{aspect-ratio:4/5;}
	.nz-anim1__in{font-size:11.5px;}
	.nz-anim1__kpis{grid-template-columns:repeat(2,1fr);}
	/* ⏸/▶/↻ ボタンは指で押せる大きさに */
	.nz-anim1__replay{font-size:12px;padding:5px 12px;}
	/* サイドバーの折りたたみ（--fold は case1.js が制御）：サイドバーが幅を取ると
	   詳細の返信カードが枠外へ押し出され、ツールチップの穴も画面外にかかるため、
	   再生中はほぼ畳んで全幅で見せ、レポート切替の瞬間だけ出す。
	   終了後は詳細ビューの間だけ畳む（戻る導線は詳細内の「← 受信トレイ」） */
	.nz-anim1__side{transition:width .25s ease,padding .25s ease;overflow:hidden;}
	.nz-anim1__side>button{white-space:nowrap;}
	.nz-anim1--fold .nz-anim1__side{width:0;min-width:0;padding:.7em 0;border-right:0;}
}

@media (prefers-reduced-motion:reduce){
	.nz-anim1,.nz-anim1 *{transition:none!important;animation:none!important;}
}