/* 資産ポートフォリオ ダッシュボード — スタイル
   dashboard.dc.html のテンプレートはこのクラス（pf- 接頭辞）を参照。
   動的な値（色・幅・grid列など {{ }} 由来）はテンプレート側の inline style に残す。 */

/* ===== RESET / GLOBAL ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Manrope', 'Noto Sans JP', sans-serif; background: #eef1f6; color: #1f2733; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
::selection { background: #cfe0f3; }

/* ===== LAYOUT ===== */
.pf-page { min-height: 100vh; padding: clamp(14px,3.5vw,30px) clamp(11px,3.5vw,20px) 70px; }
.pf-wrap { max-width: 1160px; margin: 0 auto; }

/* ===== shared utilities ===== */
.pf-label { color: #9aa3af; font-weight: 600; }       /* グレーの小見出しラベル */
.pf-strong { color: #1f2733; }                          /* 強調（濃色） */
.pf-strong2 { color: #5b6573; }
.pf-muted { color: #76808f; }
.pf-code { font-size: 10.5px; color: #9aa3af; font-weight: 600; }
.pf-min0 { min-width: 0; }
.pf-tright { text-align: right; }
.pf-nowrap { white-space: nowrap; }
.pf-num { text-align: right; font-weight: 700; }         /* 右寄せ数値 */
.pf-subpct { opacity: .85; font-weight: 600; }            /* 値に添える % */
.pf-op85 { opacity: .85; }

/* ===== HEADER ===== */
.pf-topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pf-brand { display: flex; align-items: center; gap: 13px; }
.pf-logo { width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(135deg,#5b9bd5,#9b8cd4); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 17px; letter-spacing: .02em; }
.pf-brand-label { font-size: 10.5px; letter-spacing: .16em; color: #9aa3af; font-weight: 700; }
.pf-brand-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.pf-meta { text-align: right; font-size: 12px; color: #76808f; line-height: 1.7; }
.pf-meta-rate { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 2px; }
.pf-meta-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: #9aa3af; }
.pf-meta-mobile { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; width: 100%; font-size: 11px; color: #9aa3af; line-height: 1.4; }
.pf-dot { width: 7px; height: 7px; border-radius: 50%; }
.pf-dot-sm { width: 6px; height: 6px; border-radius: 50%; }

/* ===== SUMMARY + TREND CHART ===== */
.pf-summary { background: #fff; border: 1px solid #eef1f5; box-shadow: 0 1px 3px rgba(31,39,51,.05); border-radius: 16px; padding: clamp(9px,2vw,12px) clamp(14px,4vw,20px); margin-bottom: 12px; }
.pf-summary-head { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.pf-summary-left { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 1 1 auto; min-width: 0; }
.pf-total { font-size: clamp(21px,4.4vw,27px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.pf-total-label { font-size: 11px; color: #9aa3af; font-weight: 600; letter-spacing: .03em; margin-right: 6px; }
.pf-summary-metrics { font-size: 12px; }
.pf-toggles { display: flex; flex-wrap: nowrap; gap: 6px; align-items: flex-start; margin-left: auto; }
.pf-toggle-group { display: flex; gap: 2px; background: #f4f6f9; border-radius: 8px; padding: 2px; }
.pf-tbtn { border: none; border-radius: 6px; padding: 4px 9px; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; white-space: nowrap; }
.pf-tbtn--r { padding: 4px 8px; }
.pf-chart-pos { position: relative; }
.pf-chart-svg { display: block; height: clamp(72px,11vw,96px); }
.pf-chart-dots { position: absolute; inset: 0; pointer-events: none; }
.pf-chart-dot { position: absolute; width: 9px; height: 9px; transform: translate(-50%,-50%); pointer-events: none; }
.pf-chart-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid currentColor; box-sizing: border-box; transform: translate(-50%,-50%); }
.pf-chart-dot--active::before { width: 12px; height: 12px; }
.pf-chart-hit { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.pf-chart-tip { position: absolute; z-index: 3; pointer-events: none; white-space: nowrap; background: #fff; border: 1px solid #eef1f5; border-radius: 8px; box-shadow: 0 1px 3px rgba(31,39,51,.05); padding: 5px 9px; line-height: 1.35; text-align: center; }
.pf-chart-tip-d { display: block; font-size: 10.5px; color: #9aa3af; }
.pf-chart-tip-v { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pf-chart-xticks { display: flex; justify-content: space-between; margin-top: 3px; font-size: 10.5px; color: #9aa3af; }
.pf-empty { height: clamp(64px,11vw,84px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 16px; color: #9aa3af; font-size: 13px; line-height: 1.6; background: #fafbfc; border-radius: 12px; border: 1px dashed #e2e7ee; }
.pf-daymonth { margin-top: 7px; font-size: 11.5px; color: #76808f; line-height: 1.5; }
.pf-period { margin-top: 5px; font-size: 12px; color: #76808f; }
.pf-hilo { margin-top: 3px; font-size: 11px; color: #9aa3af; white-space: nowrap; }
/* 資産構成の推移（積み上げ棒） */
.pf-bars-unit { font-size: 9.5px; color: #9aa3af; margin: 2px 0 2px 34px; }
.pf-bars-wrap { position: relative; padding-left: 34px; }
.pf-bars-yaxis { position: absolute; left: 0; top: 0; bottom: 0; width: 32px; }
.pf-bars-ytick { position: absolute; right: 4px; transform: translateY(-50%); font-size: 9.5px; color: #9aa3af; white-space: nowrap; }
.pf-bars-scroll { overflow-x: auto; overflow-y: hidden; }
.pf-bars-track { width: 100%; } /* min-width はテンプレ inline（棒数×幅）で横スクロールを発生 */
.pf-bars-plot { position: relative; height: clamp(150px,26vw,200px); }
.pf-bars-grid { position: absolute; left: 0; right: 0; border-top: 1px solid #f1f3f7; }
.pf-bar-chart { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: clamp(3px,1vw,10px); height: 100%; }
.pf-bar-col { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; transition: opacity .15s; min-width: 0; }
.pf-bar-stack { width: 100%; display: flex; flex-direction: column; border-radius: 3px 3px 0 0; overflow: hidden; }
.pf-bar-seg { width: 100%; }
.pf-bars-xticks { display: flex; gap: clamp(3px,1vw,10px); margin-top: 4px; }
.pf-bars-xtick { flex: 1 1 0; text-align: center; font-size: 10px; color: #9aa3af; white-space: nowrap; overflow: hidden; min-width: 0; }
.pf-bars-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; padding-left: 34px; }
.pf-bars-legi { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #76808f; cursor: pointer; user-select: none; transition: opacity .15s; }
.pf-bars-tip { position: absolute; z-index: 4; pointer-events: none; white-space: nowrap; background: #fff; border: 1px solid #eef1f5; border-radius: 8px; box-shadow: 0 1px 6px rgba(31,39,51,.1); padding: 7px 10px; transform: translateX(-50%); min-width: 130px; }
.pf-bars-tip-d { font-size: 10.5px; color: #9aa3af; }
.pf-bars-tip-t { font-size: 13px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 3px; }
.pf-bars-tip-row { display: flex; align-items: center; gap: 6px; font-size: 11px; margin-top: 2px; }
.pf-bars-tip-name { color: #76808f; flex: 1; }
.pf-bars-tip-v { font-weight: 700; }

/* ===== MOVERS (損益率ランキング) ===== */
.pf-movers-wrap { margin-bottom: 14px; }
.pf-movers-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border: 1px solid #eef1f5; box-shadow: 0 1px 3px rgba(31,39,51,.05); border-radius: 16px; padding: 12px 16px; margin-bottom: 12px; font-family: inherit; font-size: 12px; font-weight: 700; color: #76808f; cursor: pointer; text-align: left; }
.pf-movers-caret { font-size: 10px; color: #9aa3af; }
.pf-movers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 12px; }
.pf-movers-col { background: #fff; border: 1px solid #eef1f5; box-shadow: 0 1px 3px rgba(31,39,51,.05); border-radius: 16px; padding: clamp(13px,3vw,18px) clamp(14px,3.5vw,20px); }
.pf-movers-head { font-size: 11px; color: #9aa3af; font-weight: 700; letter-spacing: .04em; margin-bottom: 7px; }
.pf-mover-row { display: grid; grid-template-columns: 10px minmax(0,1fr) auto auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid #f4f6f9; }
.pf-mover-row:first-of-type { border-top: none; }
.pf-mover-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; font-size: 13px; }
.pf-mover-pct { font-weight: 800; font-size: 14px; text-align: right; }
.pf-mover-gain { font-size: 11px; font-weight: 700; opacity: .8; text-align: right; min-width: 66px; }

/* ===== SORT (テーブルヘッダのクリックで並び替え) ===== */
.pf-th { display: flex; align-items: center; gap: 3px; cursor: pointer; user-select: none; }
.pf-th--r { justify-content: flex-end; }
.pf-th-arw { font-size: 9px; line-height: 1; }
.pf-msort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0 10px; }
.pf-msort-label { font-size: 10.5px; color: #9aa3af; font-weight: 700; }
.pf-msort-chip { border: 1px solid #eef1f5; background: #fff; border-radius: 7px; padding: 4px 9px; font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }

/* ===== DONUT + LEGEND / DRILL-DOWN ===== */
.pf-donut-card { background: #fff; border: 1px solid #eef1f5; box-shadow: 0 1px 3px rgba(31,39,51,.05); border-radius: 18px; padding: clamp(18px,4vw,26px) clamp(18px,4vw,30px); margin-bottom: 14px; display: flex; gap: clamp(18px,4vw,40px); flex-wrap: wrap; align-items: center; justify-content: center; }
.pf-donut { position: relative; width: 236px; height: 236px; flex: none; }
.pf-donut-labels { font-family: 'Manrope','Noto Sans JP',sans-serif; pointer-events: none; }
.pf-donut-seg { cursor: pointer; transition: opacity .15s; }
.pf-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: 0 30px; }
/* 中央テキストは白縁(stroke)を後ろに敷き、リングと重なっても可読にする */
.pf-donut-center-label, .pf-donut-center-value, .pf-donut-center-sub, .pf-donut-center-sub2 { paint-order: stroke fill; -webkit-text-stroke: 3px #fff; }
.pf-donut-center-label { font-size: 11px; color: #9aa3af; font-weight: 700; }
.pf-donut-center-value { font-size: 23px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; -webkit-text-stroke-width: 4px; }
.pf-donut-center-sub { font-size: 12px; margin-top: 3px; font-weight: 700; }
.pf-donut-center-sub2 { font-size: 12px; margin-top: 1px; font-weight: 700; }
.pf-legend { flex: 1; min-width: 300px; max-width: 560px; display: flex; flex-direction: column; gap: 3px; }
.pf-legend-row { display: grid; gap: 14px; align-items: center; padding: 11px 12px; border-radius: 11px; cursor: pointer; }
.pf-swatch { width: 13px; height: 13px; border-radius: 4px; }
.pf-swatch-sm { width: 10px; height: 10px; border-radius: 3px; }
.pf-legend-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-legend-eval { font-size: 11.5px; color: #9aa3af; margin-top: 2px; }
.pf-legend-eval-col { font-size: 12.5px; color: #76808f; font-weight: 600; text-align: right; white-space: nowrap; }   /* モバイル：評価額を独立カラムで表示 */
.pf-legend-bar-wrap { display: flex; align-items: center; gap: 10px; }
.pf-legend-bar-track { flex: 1; min-width: 0; height: 7px; border-radius: 4px; background: #eef1f5; overflow: hidden; }   /* ゲージは列幅に応じて伸縮（狭幅で縮み損益のはみ出しを防ぐ） */
.pf-legend-bar-fill { height: 100%; border-radius: 4px; }
.pf-legend-ratio { font-size: 16px; font-weight: 800; width: 50px; text-align: right; }
.pf-legend-ratio-sm { font-size: 15px; font-weight: 800; }
.pf-legend-gain { font-size: 13px; font-weight: 700; }
.pf-legend-gainpct { font-size: 11px; opacity: .8; }
/* drill-down */
.pf-drillpane { flex: 1; min-width: 300px; max-width: 560px; }
.pf-back { border: 1px solid #e2e7ee; background: #fff; color: #5b6573; border-radius: 9px; padding: 6px 13px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; margin-left: auto; }
.pf-drill-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-drill-name { font-size: 18px; font-weight: 800; }
.pf-drill-count { font-size: 12px; color: #9aa3af; font-weight: 600; }
.pf-drill-eval { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
.pf-drill-gain { font-size: 14px; font-weight: 700; margin-top: 2px; }
.pf-drill-daymonth { font-size: 13px; color: #76808f; margin-top: 4px; }
.pf-drill-list { margin-top: 13px; border-top: 1px solid #eef1f5; padding-top: 5px; }
.pf-drill-row { display: grid; grid-template-columns: 11px minmax(80px,1fr) 50px 110px; gap: 11px; align-items: center; padding: 7px 6px; font-size: 13px; border-radius: 8px; }
.pf-drill-rowname { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pf-drill-pct { text-align: right; font-weight: 800; }
.pf-drill-eval2 { text-align: right; color: #76808f; }

/* ===== CATEGORY TABLES ===== */
.pf-cat-card { background: #fff; border: 1px solid #eef1f5; border-radius: 16px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(31,39,51,.05); overflow: hidden; transition: opacity .2s; }
.pf-cat-head { display: flex; align-items: center; gap: 16px; padding: 16px 22px; cursor: pointer; }
.pf-cat-title { flex: 1; min-width: 0; }
.pf-cat-name { font-weight: 800; font-size: 15px; }
.pf-cat-count { color: #9aa3af; font-weight: 500; font-size: 12px; margin-left: 8px; }
.pf-cat-stat { font-size: 12px; color: #9aa3af; text-align: right; }
.pf-cat-stat-ratio { color: #1f2733; font-size: 14px; }
.pf-cat-stat-num { font-size: 13px; }
.pf-cat-eval { text-align: right; width: 160px; }
.pf-cat-eval-v { font-size: 17px; font-weight: 800; }
.pf-cat-eval-gain { font-size: 12px; font-weight: 700; }
.pf-cat-body { padding: 0 clamp(12px,4vw,22px) 14px; }
.pf-htable-head { display: grid; grid-template-columns: minmax(0,2.6fr) 1.1fr 1fr 1fr 1.3fr 1.4fr; gap: 8px; padding: 9px 12px; font-size: 11px; color: #9aa3af; font-weight: 700; border-bottom: 1px solid #eef1f5; }
.pf-htable-row { display: grid; grid-template-columns: minmax(0,2.6fr) 1.1fr 1fr 1fr 1.3fr 1.4fr; gap: 8px; padding: 12px; font-size: 13px; border-bottom: 1px solid #f4f6f9; align-items: center; }
.pf-h-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-h-sub { font-size: 11px; color: #9aa3af; margin-top: 1px; }
.pf-h-gain { font-weight: 800; }
.pf-h-gainpct { font-size: 11px; opacity: .8; }
/* mobile holding rows */
.pf-hrow-m { padding: 11px 2px; border-bottom: 1px solid #f4f6f9; }
.pf-hrow-m-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pf-hrow-m-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 700; font-size: 14px; }
.pf-hrow-m-eval { font-weight: 800; font-size: 14px; white-space: nowrap; }
.pf-hrow-m-sub { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; font-size: 12px; color: #76808f; }
.pf-hrow-m-gain { white-space: nowrap; font-weight: 700; }

/* ===== FOOTER / CREDIT ===== */
.pf-notes { margin-top: 18px; font-size: 11px; color: #9aa3af; line-height: 1.8; }
.pf-credit { margin-top: 14px; background: #fff; border: 1px solid #eef1f5; border-radius: 16px; box-shadow: 0 1px 3px rgba(31,39,51,.05); padding: 16px; text-align: center; font-size: 12px; color: #9aa3af; }
.pf-credit-link { color: #5b9bd5; text-decoration: none; font-weight: 600; }