@charset "UTF-8";
@import url(../../../css/cckm-box.css);

/* ================================================================
   retire-flow.css — 退休＋ 主框架樣式
   優先順序：cckm.css (cc-btn-*) > Bootstrap 3 > 自訂
   ================================================================ */

/** 全功能預設字型大小 **/
.retire-flow {
	font-size: 14px;
}

/** ── cc-table thead 套 retireFlow primary（取代主網預設深綠 #273900）──
 *   理由：retireFlow 模組 brand 主色 = primary 藍 (#3c8dbc)
 *        全功能 cc-table thead 跟著模組色更一致；不影響其他主網功能。
 *   範圍：只在 .retire-flow 內生效，不破壞主網其他 cc-table 樣式。
 *   風格：solid primary bg + 白字（沿用 cc-table CTA-style header）
 */
.retire-flow .cc-table.table > thead > tr > th,
.retire-flow .cc-table.table > tbody > tr > th {
	background-color: rgb(var(--primary-color));
	color: rgb(var(--white-color));
	text-align: center;
}
/* h-* alignment class 預設只涵蓋 thead>th / tbody>td，補擴 tbody>th 也吃 */
.retire-flow .cc-table.table > tbody > tr > th.h-left   { text-align: left   !important; }
.retire-flow .cc-table.table > tbody > tr > th.h-center { text-align: center !important; }
.retire-flow .cc-table.table > tbody > tr > th.h-right  { text-align: right  !important; }

/** ── 全功能 cc-table 字級統一 16px（40-60 歲使用者，避免文字過小）+ 垂直置中 ── */
.retire-flow .cc-table.table > thead > tr > th,
.retire-flow .cc-table.table > tbody > tr > th,
.retire-flow .cc-table.table > tbody > tr > td {
	vertical-align: middle;
}
.retire-flow .cc-table.table > thead > tr > th,
.retire-flow .cc-table.table > tbody > tr > th,
.retire-flow .cc-table.table > tbody > tr > td {
	font-size: 16px;
}
/* table-bordered thead 預設 border-bottom: 2px（BS3）→ 統一 1px，避免「粗一細」視覺不協調 */
.retire-flow .cc-table.table.table-bordered > thead > tr > th {
	border-bottom-width: 1px;
}

/** ── 規劃率 / 達成率 5 階配色（全功能共用 CSS 變數）──
 *   對應 retireFlowConstants.js 的 RATE_COLORS（兩處需同步）
 *   使用方式：var(--rf-rate-low) ...
 *   semantic：
 *     unplanned 灰：未規劃 / 0%
 *     low       紅：1-25%（急迫）
 *     mid       橘：26-50%（進行中）
 *     high      藍：51-75%（進行中）
 *     near      綠：76% 以上（接近 / 完整）
 */
.retire-flow {
	--rf-rate-unplanned: #cccccc;
	--rf-rate-low      : #f56954;
	--rf-rate-mid      : #f39c12;
	--rf-rate-high     : #00c0ef;
	--rf-rate-near     : #648420;
}

/* ── Dropdown menu（全功能共用：放大字體 + 加大觸控目標）──
 * 覆寫 cckm.css 的 1.5rem，避免 rem 隨 root font-size 變動；
 * 用 16px + 44px min-height 滿足 40-60 歲使用者觸控操作 */
.retire-flow .dropdown-menu {
	min-width: 180px;
	padding: 6px 0;
}
.retire-flow .dropdown-menu > li > a {
	font-size: 16px;
	padding: 10px 18px;
	min-height: 44px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	line-height: 1.4;
}
.retire-flow .dropdown-menu > li > a > .fa {
	font-size: 16px;
	margin-right: 4px;
}
.retire-flow .dropdown-menu > li.dropdown-header {
	font-size: 14px;
	padding: 8px 18px 4px;
	color: #999;
	font-weight: bold;
}
.retire-flow .dropdown-menu > li.divider {
	margin: 6px 0;
}
.retire-flow .dropdown-menu > li.disabled > a,
.retire-flow .dropdown-menu > li.disabled > a:hover {
	color: #ccc;
	cursor: not-allowed;
}

/* ── Page Header（全功能共用：customer / contact / target / ready / report …）──
 *   rule §8 Page Header Pattern
 *   結構：.rf-pg-hd > .rf-pg-hd-l (.rf-pg-icon + title/sub wrap) [+ .rf-pg-actions]
 *   - 透明背景 + 細底線，與 sidebar 左線銜接成 ┬
 *   - 右側 .rf-pg-actions 為 detail 頁的「返回 / 編輯 / 刪除」按鈕群（list 不用）
 *   - 手機 < 768：actions 自動換行至下方靠右
 */
.rf-pg-hd {
	padding: 12px 15px 14px;
	border-bottom: 1px solid #ddd;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.rf-pg-hd-l {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
/* title + sub wrapper：必要的 min-width:0 + flex:1 讓內層 nowrap+ellipsis 在窄螢幕下生效
   （flex child 預設 min-width:auto 會撐住內容寬度，使 ellipsis 失效）*/
.rf-pg-hd-text {
	min-width: 0;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
}
.rf-pg-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(var(--primary-color), 0.12);
	color: rgb(var(--primary-color));
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	font-size: 18px;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
}
.rf-pg-title {
	font-size: 18px;
	font-weight: bold;
	color: #222;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rf-pg-sub {
	font-size: 14px;
	color: #777;
	margin-top: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rf-pg-actions {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	gap: 8px;
}
@media (max-width: 767px) {
	.rf-pg-hd {
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.rf-pg-actions {
		width: 100%;
		margin-top: 8px;
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
	}
}

/* ── 空白狀態（全功能共用：customer / contact / target / ready / report …）──
 *   兩 Tier 對應不同語意：
 *
 *   Tier 1 — .rf-empty-*（首次 / 找不到資料；鼓勵 CTA）
 *     96px icon 主色淡底 + 20px 標題 + 16px 副標 + cc-btn-primary 主 CTA
 *     用於：首次無資料、detail「找不到此目標」等
 *
 *   Tier 2 — .rf-empty-mini-*（篩選 / 搜尋無結果；小提示 + 清除篩選）
 *     48px icon 灰底 + dashed 邊框 + 16px 標題 + cc-btn-default CTA
 *     用於：list 套篩選 / 搜尋後 0 筆等
 */
.rf-empty {
	padding: 80px 24px;
	text-align: center;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}
.rf-empty-icon {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: rgba(var(--primary-color), 0.10);
	color: rgb(var(--primary-color));
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	font-size: 42px;
	margin-bottom: 24px;
}
.rf-empty-title {
	font-size: 20px;
	font-weight: bold;
	color: #222;
	line-height: 1.4;
	margin-bottom: 10px;
}
.rf-empty-desc {
	font-size: 16px;
	color: #888;
	line-height: 1.6;
	margin-bottom: 28px;
}
.rf-empty .btn {
	font-size: 16px;
	padding: 10px 22px;
}

.rf-empty-mini {
	background: #fff;
	border: 1px dashed #e0e0e0;
	border-radius: 8px;
	padding: 32px 20px;
	text-align: center;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-align-items: center;
}
.rf-empty-mini-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(var(--default-color), 0.12);
	color: rgb(var(--default-color));
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	font-size: 20px;
	margin-bottom: 12px;
}
.rf-empty-mini-title {
	font-size: 16px;
	color: #555;
	margin-bottom: 8px;
}
.rf-empty-mini-desc {
	font-size: 14px;
	color: #888;
	margin-bottom: 14px;
}
.rf-empty-mini .btn {
	font-size: 14px;
	padding: 6px 16px;
}

/* ── Card（全功能共用獨立可點卡片殼）──
 *   用於 target list / ready list 等「圓角 + border + margin between」獨立卡片
 *   不用於 customer / contact 手機列表 row 樣式（那是 bottom-border 分隔，無 margin、無圓角，屬另一種 pattern）
 *
 *   結構：
 *     .rf-card                — shell + transition + hover（預設「可點」：pointer + hover 反白）
 *     .rf-card.rf-card-static — 不可點的卡（detail / 藍圖等純展示）：取消 pointer + hover 反白
 *     .rf-card.is-complete    — 達標 / 完成狀態（主色淡底）
 *     模組內各自加 .rf-{module}-card 補內部 layout（flex / gap / min-height 等）
 */
.rf-card {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 14px;
	cursor: pointer;
	position: relative;     /* 讓 .rf-card-selected-badge 可絕對定位到右上角 */
	-webkit-transition: box-shadow 0.15s, border-color 0.15s;
	transition: box-shadow 0.15s, border-color 0.15s;
}
.rf-card:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border-color: rgba(var(--primary-color), 0.4);
}
/* 純展示卡（不可點）：detail 報告卡 / 人生藍圖卡等套用，取消 pointer 與 hover 反白 */
.rf-card.rf-card-static {
	cursor: default;
}
.rf-card.rf-card-static:hover {
	box-shadow: none;
	border-color: #e5e5e5;
}
.rf-card.is-complete {
	background-color: rgba(var(--primary-color), 0.08);
	border-color: rgba(var(--primary-color), 0.25);
}
.rf-card.is-complete:hover {
	background-color: rgba(var(--primary-color), 0.12);
	border-color: rgba(var(--primary-color), 0.4);
}

/* 卡片摘要文字（list 卡共用：contact 重點摘要 / report 報告摘要 …）— 低調灰、截斷 2 行 */
.rf-card-summary {
	font-size: 14px;
	color: #666;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.rf-card-summary.is-empty {
	color: #aaa;
}

/* ── Chart「放寬顯示」checkbox（凡有大型走勢 / 商品圖表的場景共用）──
 *   定位：圖表的次要偏好控制（顯示每個年齡刻度 vs auto），不是主要表單輸入
 *   樣式：較小字 + 非粗體 + 淡灰，刻意 subtle 不搶視覺
 *   配合 cckm.css 的 .check-radio.primary（白底主色勾）使用
 *
 *   用法：
 *     <label class="check-radio primary rf-chart-relax-toggle">
 *         <input type="checkbox" ng-model="..." ng-change="..."/>
 *         放寬顯示（顯示每一個年齡刻度）
 *     </label>
 *
 *   現有使用：plan/target chart-zoom-modal、plan/ready 搜尋商品 Layer 2 圖表頁；
 *   未來輔銷商品圖表也直接套用即可。
 */
.rf-chart-relax-toggle {
	cursor: pointer;
	margin: 0;
	font-size: 14px;
	font-weight: normal;
	color: #777;
}

/* ── Flash highlight 動畫（全 retireFlow 共用：scroll-to 後 1.6s 淡藍光提示）──
 *   用法：JS scrollTo 後 element.classList.add('rf-flash-highlight') + setTimeout 1600ms 移除
 *   情境：助理 CTA 跳到某 section / search-result jump to entry / cross-link 等
 *   配色：retireFlow primary 色淺底 + 暈影，柔和不警示，與全站 primary 視覺一致
 */
@keyframes rfFlashHighlight {
	0%   { background-color: rgba(var(--primary-color), 0.18); box-shadow: 0 0 0 4px rgba(var(--primary-color), 0.12); }
	100% { background-color: transparent;                       box-shadow: 0 0 0 0 rgba(var(--primary-color), 0); }
}
.rf-flash-highlight {
	animation: rfFlashHighlight 1.6s ease-out 1;
	border-radius: 6px;
}

/* ── 商品 pill tag（全 retireFlow 共用：support/policy + plan/ready sidebar 商品資料）──
 *   配色語意：company 藍 / type 紫 / par 橘 / currency 黃 / sb 綠 / sale 綠 / off 灰
 *   policy 既有 `.rf-plc-tag.tag-*` 沿用為了 list/detail 不破壞；新功能用此 `.rf-prod-tag.tag-*`
 */
.rf-prod-tag {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.4;
	background: #f5f5f5;
	color: #555;
	border: 1px solid #e0e0e0;
}
.rf-prod-tag.tag-company  { background: #eef4fb; color: #2d5a8a; border-color: #d0e0ee; }
.rf-prod-tag.tag-type     { background: #f0e9f7; color: #5d3a87; border-color: #ddd0e8; }
.rf-prod-tag.tag-par      { background: #fdf0e6; color: #a55a1a; border-color: #f0d8c0; }
.rf-prod-tag.tag-currency { background: #fff7e0; color: #8a6d12; border-color: #f0e0a0; }
.rf-prod-tag.tag-sb       { background: #e6f5ec; color: #2e6e44; border-color: #c8e4d4; }
.rf-prod-tag.tag-sale     { background: #e6f5ec; color: #2e6e44; border-color: #c8e4d4; }
.rf-prod-tag.tag-off      { background: #f5f5f5; color: #888;    border-color: #ddd; }

/* ── 商品特色 tag（主色版，全 retireFlow 共用：support/policy + plan/ready sidebar）──
 *   配色：主色淡底 + 主色邊 + 主色字 — 跟商品基本 pill 區隔（基本 pill 多彩，特色 tag 統一主色）
 */
.rf-feature-tags-row {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 6px;
}
.rf-feature-tag {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	padding: 3px 10px;
	background: rgba(var(--primary-color), 0.10);
	color: rgb(var(--primary-color));
	border: 1px solid rgba(var(--primary-color), 0.3);
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.4;
}

/* ── Chart Zoom Modal 通用樣式（plan 全 sub 共用，配 retireFlowPlanChartZoomModalCtrl）──
 *   modal HTML: views/modal/fm/retireFlow/plan/chart-zoom-modal.html
 *   結構：header → 可選 relax bar → body(canvas-wrap + canvas) → footer
 *   canvas 高度桌機 420 / 手機 340；放寬時 canvas-wrap 提供水平 scroll
 */
.rf-chart-zoom-bar {
	padding: 10px 20px;
	background: #fafafa;
	border-bottom: 1px solid #e8e8e8;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}
.rf-chart-zoom-body {
	padding: 12px 16px;
}
.rf-chart-zoom-canvas-wrap {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
}
.rf-chart-zoom-canvas {
	width: 100%;
	height: 420px;
}
@media (max-width: 767px) {
	.rf-chart-zoom-canvas { height: 340px; }
}

/* ── 選取勾勾 badge（卡片右上角，主色三角 + 白勾）──
 *   通用：放在 .rf-card 內，無論該模組的卡片類型都能用
 *   modifier：.is-muted 改用灰底（適用「先不關連 / 略過」等次要選擇）
 *   結構：
 *     <div class="rf-card" ng-class="{ 'is-selected': ... }">
 *       <div class="rf-card-selected-badge" ng-if="..."><i class="fa fa-check"></i></div>
 *       ...
 *     </div>
 */
.rf-card-selected-badge {
	position: absolute;
	top: -1px;
	right: -1px;
	width: 22px;
	height: 22px;
	background: rgb(var(--primary-color));
	border-radius: 0 8px 0 8px;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	color: #fff;
	font-size: 10px;
}
.rf-card-selected-badge.is-muted {
	background: #aaa;
}

/* ── List 行動 Bar（全功能共用）──
 *   結構：.rf-act-bar > .rf-act-bar-text + <button>
 *   - 白底圓角卡 + 主色強調的數字 + 主色 CTA
 *   - 用於 list 頁的「已新增 N 個 + 新增 CTA」橫條（target / ready / 未來 support 各 sub list）
 */
.rf-act-bar {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 14px;
	gap: 10px;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.rf-act-bar-text {
	font-size: 16px;
	color: #444;
}
.rf-act-bar-text b {
	color: rgb(var(--primary-color));
	font-size: 18px;
	padding: 0 2px;
	font-weight: bold;
}
.rf-act-bar-text b.muted {
	color: #999;
}
.rf-act-bar .btn {
	font-size: 14px;
	padding: 6px 14px;
}

/* ── Sidebar 區塊（全功能共用：list / detail 兩種 sidebar 都用）──
 *   .rf-side-sec  區塊容器 — 靠 margin 物理間距分區，section 間不加橫線
 *   .rf-side-ttl  區塊標題 — 16px bold，字色用 inherit 跟主網全域 base 走
 *   .fa icon 預設淡灰 #777（= Bootstrap text-muted，與手機 panel 標題 icon 同色）；各 sub 內若有變體（例如助理 label 整段全色），
 *     用 [[feedback_asst_avatar_name_display_pattern]] Pattern A 在 sub 內處理，不放這
 */
.rf-side-sec {
	margin-bottom: 32px;
}
.rf-side-sec:last-child {
	margin-bottom: 0;
}
.rf-side-ttl {
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 12px;
}
.rf-side-ttl .fa {
	color: #777;       /* = Bootstrap text-muted，與手機 panel 標題 icon 同色 */
	margin-right: 6px;
}
/* 標題列右側 action 按鈕內的 icon 跟隨按鈕自身顏色（cc-btn 白字），不吃上面的標題灰 */
.rf-side-ttl .btn .fa {
	color: inherit;
}
/* title 內帶右側 action 按鈕（例：「準備金額走勢 [放大]」、「投入紀錄 [+ 新增]」）*/
.rf-side-ttl-with-action {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
}
.rf-side-ttl-with-action .btn-xs {
	padding: 4px 10px;
	font-size: 13px;
	font-weight: normal;
}

/* ── 回應結果顏色變數 ── */
:root {
    --rf-response-good-bg:    #dff0d8;
    --rf-response-good-fg:    #3c763d;
    --rf-response-good-bd:    #d6e9c6;
    --rf-response-simple-bg:  #d9edf7;
    --rf-response-simple-fg:  #31708f;
    --rf-response-simple-bd:  #bce8f1;
    --rf-response-warn-bg:    #fcf8e3;
    --rf-response-warn-fg:    #8a6d3b;
    --rf-response-warn-bd:    #faebcc;
    --rf-response-bad-bg:     #f2dede;
    --rf-response-bad-fg:     #a94442;
    --rf-response-bad-bd:     #ebccd1;
}

/* ── Label modifier（BS3 .label 放大版，用於 alert dialog / placeholder 等強調情境）── */
.rf-label-md {
	font-size: 14px !important;
	padding: 4px 10px !important;
	line-height: 1.4 !important;
	display: inline-block !important;
}

/* ── Pill（全功能共用） ── */
.rf-pill {
	display: inline-block;
	padding: 4px 14px;
	border-radius: 20px;
	cursor: pointer;
	white-space: nowrap;
	border: 1px solid;
	transition: background-color 0.15s, color 0.15s;
}
.rf-pill-primary { color: rgb(var(--primary-color)); border-color: rgb(var(--primary-color)); }
.rf-pill-success { color: rgb(var(--success-color)); border-color: rgb(var(--success-color)); }
.rf-pill-danger  { color: rgb(var(--danger-color));  border-color: rgb(var(--danger-color));  }
.rf-pill-warning { color: rgb(var(--warning-color)); border-color: rgb(var(--warning-color)); }
.rf-pill-info    { color: rgb(var(--info-color));    border-color: rgb(var(--info-color));    }
.rf-pill-default { color: rgb(var(--gray-888-color)); border-color: rgb(var(--gray-ccc-color)); }

.rf-pill-primary.active { background: rgb(var(--primary-color)); color: rgb(var(--white-color)); }
.rf-pill-success.active { background: rgb(var(--success-color)); color: rgb(var(--white-color)); }
.rf-pill-danger.active  { background: rgb(var(--danger-color));  color: rgb(var(--white-color)); }
.rf-pill-warning.active { background: rgb(var(--warning-color)); color: rgb(var(--white-color)); }
.rf-pill-info.active    { background: rgb(var(--info-color));    color: rgb(var(--white-color)); }
.rf-pill-default.active { background: rgb(var(--gray-888-color)); color: rgb(var(--white-color)); }

.rf-pill.disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* ── Avatar（全功能共用，搭配 RETIRE_FLOW_CONSTANTS.PLAN_STATUS.avatar）── */
.rf-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	flex-shrink: 0;
	background: rgb(var(--gray-eee-color));
	color: rgb(var(--gray-888-color));
}
.rf-avatar-sm { width: 28px; height: 28px; }
.rf-av-no-plan    { background: rgba(var(--default-color), 0.15); color: rgb(var(--gray-888-color)); }
.rf-av-ready-only { background: rgba(var(--info-color), 0.15);    color: rgb(var(--info-color)); }
.rf-av-target-set { background: rgba(var(--info-color), 0.15);    color: rgb(var(--info-color)); }
.rf-av-unbound    { background: rgba(var(--default-color), 0.15); color: rgb(var(--gray-888-color)); }
.rf-av-partial    { background: rgba(var(--warning-color), 0.15); color: rgb(var(--warning-color)); }
.rf-av-complete   { background: rgba(var(--success-color), 0.15); color: rgb(var(--success-color)); }
.rf-av-none       { background: rgb(var(--gray-eee-color)); color: rgb(var(--gray-aaa-color)); }

/** 背景 **/
.retire-flow > .bg-container {
	background-image: url(https://d1r4509tniam8v.cloudfront.net/img/fm-retired-plan-bg.png);
	background-size: cover; background-position: center 25%; background-repeat: no-repeat; opacity: 0.2;
	position: absolute; height: 200px; width: 100%; border-bottom-left-radius: 50% 30%; border-bottom-right-radius: 50% 30%;
}
@media (max-width: 767px) {
	.retire-flow > .bg-container { height: 230px; border-bottom-left-radius: 50% 20%; border-bottom-right-radius: 50% 20%; }
}

.retire-flow .label {
	padding-top: 5px;
    padding-bottom: 6px;
}

/* ── Context Bar ── */
.rf-context-bar {
    border-bottom: 1px solid #ddd;
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.rf-ctx-left {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
/* 未選客戶時：仍可點開「選擇客戶」modal，需要 hover 與 cursor */
.rf-ctx-no-cust {
    align-items: center;
    cursor: pointer;
    border-radius: 4px;
    padding: 8px 10px;
    margin-left: -10px;
    transition: background-color 0.15s ease;
}
.rf-ctx-no-cust:hover,
.rf-ctx-no-cust:active {
    background-color: #f5f5f5;
}
.rf-ctx-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #d9edf7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #31708f;
    flex-shrink: 0;
}
/* 編輯客戶入口：avatar 右下角 chip（universal pattern：FB/IG 大頭照編輯）
   白底細邊讓 chip 與 avatar 視覺分離不疊壓、24px 達觸控區、default 灰、hover warning 橘 */
.rf-ctx-avatar-wrap {
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}
.rf-ctx-avatar-edit {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ccc;
    color: #666;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.rf-ctx-avatar-wrap:hover .rf-ctx-avatar-edit {
    color: rgb(var(--warning-color));
    border-color: rgb(var(--warning-color));
}
/* 客戶資訊欄：名字列（name + 性別·年齡）疊在 pills 列之上 */
.rf-ctx-info {
    min-width: 0;
}
.rf-ctx-id {
    line-height: 1.3;
}
.rf-ctx-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}
/* 性別·年齡：桌機與名字同行（前置「·」分隔）；手機改至名字下方一行 */
.rf-ctx-meta {
    font-size: 14px;
    font-weight: normal;
    color: #777;
}
.rf-ctx-meta::before {
    content: '\30FB';   /* ・ 全形間隔號 */
    color: #ccc;
    margin: 0 2px;
}
/* 狀態 / 上次聯絡 pills：名字列下方一排，空間不足自動換行 */
.rf-ctx-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
/* 手機專用滿版 pills 列：桌機/平板隱藏（改用 .rf-ctx-info 內的版本） */
.rf-ctx-pills-m {
    display: none;
}
.rf-ctx-hint {
    font-size: 14px;
    color: #777;
    margin-top: 2px;
}
.rf-ctx-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    align-self: flex-end;   /* 桌機：右側按鈕置底，對齊 pills 列 */
}

/* 手機：第一行只放「頭像+名字+性別年齡」；第二行 pills 靠左、按鈕靠右
   （按鈕落底跟 pills 同行對齊，避免單獨飄在右上） */
@media (max-width: 767px) {
    .rf-context-bar {
        flex-wrap: wrap;
        row-gap: 12px;   /* 第一行與第二行的間隔 */
    }
    .rf-ctx-meta {
        display: block;
        margin-top: 2px;
    }
    .rf-ctx-meta::before {
        content: none;
    }
    /* 桌機版 pills（名字下方）在手機隱藏，改用第二行版本 */
    .rf-ctx-info .rf-ctx-pills {
        display: none;
    }
    /* 客戶資訊塊獨佔第一行 */
    .rf-ctx-left:not(.rf-ctx-no-cust) {
        flex-basis: 100%;
    }
    /* 第二行：pills 靠左撐開、把按鈕推到右側 */
    .rf-ctx-pills-m {
        display: flex;
        order: 2;
        flex: 1 1 auto;
        align-self: center;
        margin-top: 0;
    }
    .rf-ctx-right {
        order: 3;
        align-self: center;
    }
}

/* ── Context Bar 按鈕 3-tier hierarchy ──
 *   primary (新增訪談)：永遠 fill（CTA 站出來），hover/active 越按越深
 *   info (3 sub nav)：outline rest → 淡 fill hover → full fill .active（明確標示當前 sub）
 *   default (切換客戶)：outline 灰 rest → 淡 fill hover → full fill :active（按下感）
 *   範圍只限 .rf-context-bar 內，不影響其他地方既有 cc-btn-* 使用
 *
 *   cckm.css 的 .cc-btn-* 有 `color: #fff !important` 跟 box-shadow lift —
 *   outline pattern 必須用 !important 壓制（這層只在 context-bar 例外）
 */
/* ── default 按鈕（切換客戶 / 系統動作）── */
.rf-context-bar .btn.cc-btn-default {
    background: #fff !important;
    color: #666 !important;
    border: 2px solid #ccc !important;
    box-shadow: none !important;
}
.rf-context-bar .btn.cc-btn-default:hover,
.rf-context-bar .btn.cc-btn-default:focus {
    background: #f0f0f0 !important;
    color: #666 !important;
    border-color: #ccc !important;
}
.rf-context-bar .btn.cc-btn-default:active,
.rf-context-bar .btn.cc-btn-default.active {
    background: #666 !important;
    color: #fff !important;
    border-color: #666 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12) !important;
}

/* ── info 按鈕（設定目標 / 規劃準備 / 產出報告 sub nav）── */
.rf-context-bar .btn.cc-btn-info {
    background: #fff !important;
    color: rgb(var(--info-color)) !important;
    border: 2px solid rgb(var(--info-color)) !important;
    box-shadow: none !important;
}
.rf-context-bar .btn.cc-btn-info:hover,
.rf-context-bar .btn.cc-btn-info:focus {
    background: rgba(var(--info-color), 0.08) !important;
    color: rgb(var(--info-color)) !important;
    border-color: rgb(var(--info-color)) !important;
}
.rf-context-bar .btn.cc-btn-info.active,
.rf-context-bar .btn.cc-btn-info.active:hover,
.rf-context-bar .btn.cc-btn-info.active:focus {
    background: rgb(var(--info-color)) !important;
    color: #fff !important;
    border-color: rgb(var(--info-color)) !important;
}

/* ── primary 按鈕（新增訪談 / CTA）— 永遠 fill，hover/active 越按越深 ── */
.rf-context-bar .btn.cc-btn-primary:hover,
.rf-context-bar .btn.cc-btn-primary:focus {
    filter: brightness(0.92);
}
.rf-context-bar .btn.cc-btn-primary:active {
    filter: brightness(0.85);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

/* ── Top Tab ── */
.rf-top-tab {
    background: #fff;
    border-bottom: 1px solid #ddd;
    display: flex;
}
.rf-tab-item {
    flex: 1;
    text-align: center;
    padding: 12px 4px;
    font-size: 16px;
    color: #777;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.rf-tab-item.active,
.rf-tab-item:hover {
    color: rgb(var(--primary-color));
    border-bottom-color: rgb(var(--primary-color));
    font-weight: bold;
}
.rf-tab-item i {
    margin-right: 3px;
}

/* ── Main Content ── */
.rf-main-content {
    padding-bottom: 56px;
}
@media (min-width: 992px) {
    .rf-main-content {
        padding-bottom: 0;
    }
}

/* ── Bottom Nav（手機）── */
.rf-bottom-nav {
    display: none;
}
@media (max-width: 991px) {
    .rf-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid #ddd;
        display: flex;
        align-items: center;
        height: 52px;
        z-index: 100;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    }
}
.rf-nav-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    padding: 4px 0;
    color: #777;
    font-size: 13px;
    text-decoration: none;
}
.rf-nav-tab i {
    font-size: 18px;
    color: #777;
}
.rf-nav-tab.active,
.rf-nav-tab.active i {
    color: #337ab7;
}
.rf-fab-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -16px;
    cursor: pointer;
    gap: 1px;
}
.rf-fab-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #337ab7;
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 18px;
}
.rf-fab-tab span {
    font-size: 10px;
    color: rgb(var(--primary-color));
    font-weight: bold;
}

/* ── AI 助理頭像（rfAsstAvatar directive，全功能共用）──────────── */
.rf-asst-av {
    width: 48px;  /* 預設 md；sm / lg 用 modifier class 覆寫 */
    height: 48px;
    font-size: 20px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    overflow: hidden;
}
.rf-asst-av img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.rf-asst-av-sm { width: 30px; height: 30px; font-size: 13px; }
.rf-asst-av-lg { width: 64px; height: 64px; font-size: 26px; }

/* AI 助理名字 — bold；color 由呼叫端 ng-style 動態套 assistant.displayColor
   用法：<span class="rf-asst-name" ng-style="{ color: assistant.displayColor }">{{ assistant.displayName }}</span> */
.rf-asst-name {
    font-weight: bold;
}

/* ── Form 驗證 error 狀態（全功能共用）─────────────────────────
   單一 input / textarea：直接掛 rf-input-error
   datepicker（input + 日曆按鈕）：掛在外層 .input-group 上
   ─────────────────────────────────────────────────────────── */
.rf-input-error { border-color: #d9534f !important; }
.rf-input-error:focus { border-color: #d9534f; box-shadow: 0 0 0 2px rgba(217,83,79,.15); }
.input-group.rf-input-error > .form-control,
.input-group.rf-input-error > .input-group-addon,
.input-group.rf-input-error > .input-group-btn > .btn { border-color: #d9534f !important; }

/* ── 全功能共用 CTA link（→ 箭頭文字連結 hover 動效）──
   來源：target list 卡片 .rf-tgt-card-cta-btn 抽出成 retireFlow scope 共用
   hover: 文字 underline + 箭頭右移 4px */
.rf-cta-link {
    display: inline-block;
    font-size: 14px;
    color: rgb(var(--primary-color));
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;
}
.rf-cta-link:hover, .rf-cta-link:focus { color: rgb(var(--primary-color)); text-decoration: underline; }
.rf-cta-link .fa {
    margin-left: 4px;
    -webkit-transition: -webkit-transform 0.15s ease;
    transition: transform 0.15s ease;
}
.rf-cta-link:hover .fa { -webkit-transform: translateX(4px); transform: translateX(4px); }

/* ── Time picker wrapper（全功能共用）──────────────────────────
   uib-timepicker 渲染為 <table>；用 inline-block 包起來讓 table
   自然寬不塌陷。error 狀態讓 HH / MM 兩格同時紅框。
   ─────────────────────────────────────────────────────────── */
.rf-time-wrap { display: inline-block; vertical-align: top; }
.rf-time-wrap .uib-timepicker { margin: 0; width: auto; }
.rf-time-wrap .uib-timepicker .uib-time { padding: 0; }
.rf-time-wrap .uib-timepicker .uib-separator { padding: 0 4px; }
.rf-time-wrap .uib-timepicker input.form-control {
    width: 50px; min-width: 50px;
    padding-left: 4px; padding-right: 4px;
    display: inline-block;
}
.rf-time-wrap.rf-time-error .uib-timepicker input.form-control { border-color: #d9534f; }
.rf-time-wrap.rf-time-error .uib-timepicker input.form-control:focus {
    border-color: #d9534f; box-shadow: 0 0 0 2px rgba(217,83,79,.15);
}

/* ── Markdown 渲染內文（全功能共用）─────────────────────────────── */
/* 正文 16px：對齊 UX 規範 §2.1「主要內容（正文 / AI 日誌 / NLP）16-17px」（40-60 歲可讀性）*/
.rf-md p             { margin-bottom: 10px; line-height: 1.7; font-size: 16px; color: #333; }
.rf-md p:last-child  { margin-bottom: 0; }
.rf-md ul,
.rf-md ol            { padding-left: 20px; margin-bottom: 10px; }
.rf-md li            { margin-bottom: 5px; line-height: 1.7; font-size: 16px; color: #333; }
/* h1 / h2 主標題：primary 藍 + 下底線，產生明顯章節分隔（對齊 report 主頁 + editor 一致）*/
.rf-md h1,
.rf-md h2            { font-size: 18px; font-weight: bold; color: rgb(var(--primary-color));
                       margin: 18px 0 10px; line-height: 1.4;
                       border-bottom: 1px solid #e8e8e8; padding-bottom: 6px; }
.rf-md h3            { font-size: 17px; font-weight: bold; color: #333; margin: 16px 0 8px;  line-height: 1.4; }
.rf-md h4,
.rf-md h5,
.rf-md h6            { font-size: 16px; font-weight: bold; color: #444; margin: 14px 0 6px;  line-height: 1.4; }
/* strong 跳主色藍（重點關鍵字一眼識別；主色非紅，無「整篇紅字」感）*/
.rf-md strong        { color: rgb(var(--primary-color)); font-weight: bold; }
.rf-md blockquote    { border-left: 3px solid #ddd; padding-left: 12px; color: #777; margin: 8px 0; }
.rf-md hr            { border-color: #eee; margin: 12px 0; }
/* table：primary 藍底白字表頭、灰邊框；字級 16px（UX 規範 §2.1 表格 td 主要內容）*/
.rf-md table         { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 16px; }
.rf-md th,
.rf-md td            { padding: 8px 10px; border: 1px solid #e0e0e0; text-align: left; }
.rf-md th            { background: rgb(var(--primary-color)); color: #fff; font-weight: bold; }
.rf-md td            { color: #333; }

/* ── cc-table 標題列覆寫（retireFlow 全功能共用）────────────────
   cc-table 預設 th 為深綠底白字；覆寫為淺藍底藍字，與藍色主題一致
   ─────────────────────────────────────────────────────────── */
.retire-flow .cc-table > thead > tr > th {
    background-color: #1e5c87;
    color: #fff;
    white-space: nowrap;
}


/* ============================================================
   .rf-panel — 全 retireFlow 共用 panel 元件
   spec: rule-retire-flow-ui-ux-v1.0.md §15 Panel Pattern
   用途：統一所有功能（dashboard / customer / contact / plan / support）的
        資訊區塊容器外殼 + header 樣式，避免各自設計造成跨功能視覺斷層
============================================================ */
.rf-panel {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.rf-panel-header {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}
.rf-panel-title {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}
.rf-panel-title .fa,
.rf-panel-title [class^="flaticon-"],
.rf-panel-title [class*=" flaticon-"] {
    margin-right: 6px;
    color: inherit;       /* 跟 title 文字同色，避免 icon 強奪視覺 */
}
.rf-panel-actions {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
}

/* 手機 RWD：panel padding 縮小；header 允許換行 —
   空間夠 actions 跟 title 同列（靠右），不夠才自然換到下一列（仍靠右、不壓縮截斷 title）。
   全 retireFlow panel 統一行為，各子模組不再各自覆寫。*/
@media (max-width: 767px) {
    .rf-panel { padding: 12px 14px; margin-bottom: 14px; }
    .rf-panel-header {
        font-size: 16px;
        margin-bottom: 14px;     /* header 與下方內容間距 */
        padding-bottom: 12px;    /* header 內容與分隔線間距 */
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 16px;               /* 換行時 title 列與 actions 列的上下間隔 */
    }
    /* margin-left:auto → 同列時推到最右；換行時整排仍靠右（不強制 flex-basis 故不會硬換行）*/
    .rf-panel-header .rf-panel-actions {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-left: auto;
    }
}

/* ============================================================
   Wizard Modal（全功能共用：plan/target / plan/ready / 未來其他 wizard）
   spec: layout-retire-flow-plan-target-wizard-modal-spec / -ready-wizard-spec
   原本住在 retire-flow-plan-target.css §9；2026-05 抽出共用並改名 .rf-tgt-wz-* → .rf-wz-*
   ============================================================ */

/* ── 頂部 API 錯誤提示條 ────────────────────────────────────── */
.rf-wz-top-alert {
    background: rgba(var(--danger-color), 0.1);
    border: 1px solid rgba(var(--danger-color), 0.3);
    color: rgb(var(--danger-color));
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 14px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
}
.rf-wz-top-alert .fa {
    font-size: 16px;
}

/* ── Step Indicator ─────────────────────────────────────────── */
.rf-wz-steps {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 0;
    padding: 14px 16px;
    background: #fafafa;
    border-bottom: 1px solid #e8e8e8;
}
.rf-wz-step {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
}
.rf-wz-step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #ccc;
    color: #999;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    background: #fff;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}
.rf-wz-step-name {
    font-size: 14px;
    color: #999;
}
.rf-wz-step.is-current .rf-wz-step-circle {
    background: rgb(var(--primary-color));
    border-color: rgb(var(--primary-color));
    color: #fff;
}
.rf-wz-step.is-current .rf-wz-step-name {
    color: rgb(var(--primary-color));
    font-weight: bold;
}
.rf-wz-step.is-completed:not(.is-current) .rf-wz-step-circle {
    border-color: rgb(var(--primary-color));
    color: rgb(var(--primary-color));
}
.rf-wz-step.is-completed:not(.is-current) .rf-wz-step-name {
    color: rgb(var(--primary-color));
}
.rf-wz-step.is-clickable {
    cursor: pointer;
}
.rf-wz-step.is-clickable:hover .rf-wz-step-circle {
    box-shadow: 0 0 0 4px rgba(var(--primary-color), 0.12);
}
.rf-wz-step-divider {
    width: 24px;
    height: 2px;
    background: #ddd;
    margin: 0 8px;
}
.rf-wz-step-divider.is-passed {
    background: rgb(var(--primary-color));
}

/* ── Step Body ──────────────────────────────────────────────── */
.rf-wz-body {
    padding: 20px 24px;
}
.rf-wz-step-title {
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 6px;
}
.rf-wz-asst-hint {
    font-size: 14px;
    color: #777;
    margin-bottom: 18px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 6px;
}
.rf-wz-asst-hint .fa {
    color: rgb(var(--primary-color));
}
.rf-wz-asst-hint b {
    /* color 由 template 用 ng-style 動態套助理主色 */
    font-weight: bold;
}

/* ── 表單欄位區 ─────────────────────────────────────────────── */
.rf-wz-fields {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 14px;
}
.rf-wz-field-row {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 14px;
}
.rf-wz-field {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
}
.rf-wz-field-row .rf-wz-field {
    -webkit-flex: 1 1 calc(33.333% - 10px);
    flex: 1 1 calc(33.333% - 10px);
    min-width: 100px;
}
/* 窄欄位（如通膨率：最大 5 字符 + %）— 不撐滿整列 */
.rf-wz-field-narrow {
    max-width: 200px;
}
.rf-wz-label {
    font-size: 14px;
    color: #555;
    margin-bottom: 4px;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 6px;
}
.rf-wz-label .rf-wz-required {
    color: rgb(var(--danger-color));
    margin-left: 2px;
}
.rf-wz-label .rf-wz-info {
    color: rgb(var(--primary-color));
    cursor: help;
    font-size: 15px;
    transition: -webkit-transform 0.15s ease, transform 0.15s ease;
}
.rf-wz-label .rf-wz-info:hover {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}
/* 鎖定提示 icon — 緊貼在 i 後面的 🔒，warning 橘色突顯；取消鎖定時 ng-if 隱藏 */
.rf-wz-label .rf-wz-lock-hint {
    color: rgb(var(--warning-color));
    font-size: 14px;
}
/* 欄位下方說明：「依目標「XXX」帶入」— 跟 lock icon 同 warning 色配對，font 13px 不搶 input 視覺 */
.rf-wz-locked-from-target {
    margin-top: 4px;
    font-size: 13px;
    color: rgb(var(--warning-color));
}
.rf-wz-locked-from-target .fa { margin-right: 4px; }
.rf-wz-counter {
    margin-left: auto;
    font-size: 13px;
    color: #aaa;
    font-weight: normal;
}
/* counter 放欄位下方右側（target wizard 慣放 label 內、ready wizard 商品名稱放下方）*/
.rf-wz-counter-below {
    text-align: right;
    font-size: 13px;
    color: #aaa;
    margin-top: 4px;
}
.rf-wz-error {
    color: rgb(var(--danger-color));
    font-size: 13px;
    margin-top: 4px;
}
.rf-wz-help {
    font-size: 13px;
    color: #999;
    margin-top: 4px;
}
/* Modal header subtitle — 標題下方一行顯示「類型 ｜ 目標」context */
.rf-wz-subtitle {
    margin-top: 4px;
    font-size: 13px;
    color: rgb(var(--gray-888-color));
}

/* 數字輸入 input-group-addon 單位標籤（歲 / 元 / % / USD 等）— 主色淡底 */
.rf-addon-unit {
    background: rgba(var(--primary-color), 0.08);
    border-color: #ccc;
    color: rgb(var(--primary-color));
    font-size: 15px;
    white-space: nowrap;
}

/* ── Segment 切換按鈕（pill toggle 群組）— 全 retireFlow 共用
   用途：幣別切換 / 多選一 segmented control（取代 radio group）
   既有用處：ready wizard search 排序偏好 / 圖表頁幣別 / policy detail 試算結果幣別
   class 沿用歷史命名 `.rf-sp-seg-*`（sp 前綴源於 search product，但已抽共用層級）
   typical HTML:
     <div class="rf-sp-seg-group">
       <button class="rf-sp-seg-opt" ng-class="{'is-active': model === 'A'}">A</button>
       <button class="rf-sp-seg-opt" ng-class="{'is-active': model === 'B'}">B</button>
     </div>
*/
.rf-sp-seg-group {
    display: -webkit-inline-flex;
    display: inline-flex;
    background: #f0f0f0;
    border-radius: 100px;
    padding: 3px;
}
.rf-sp-seg-opt {
    font-size: 16px;
    padding: 9px 18px;        /* 與 input-group-lg (46px) 對齊高度 */
    border: none;
    background: transparent;
    color: #666;
    font-weight: bold;
    cursor: pointer;
    border-radius: 100px;
    -webkit-transition: all 0.15s;
    transition: all 0.15s;
}
.rf-sp-seg-opt.is-active {
    background: #fff;
    color: rgb(var(--primary-color));
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.rf-sp-seg-opt[disabled] {
    color: #bbb;
    cursor: not-allowed;
    opacity: 0.7;
}
/* datepicker 日曆按鈕共用 class 移到 resources/css/cmn/uib-datepicker.css，命名 .datepicker-trigger（套色由父層 .datepicker-{primary|success|warning|danger} 控制）*/
.rf-wz-step-error {
    color: rgb(var(--danger-color));
    font-size: 14px;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(var(--danger-color), 0.08);
    border-radius: 4px;
}

/* ── Sticky 預估金額 bar ─────────────────────────────────────
   單行（SI / target wizard）：preview > preview-row > [label, value, hint]
   多行（CI）              ：preview > [preview-row, preview-row]，行間細分隔線 */
.rf-wz-preview {
    background: rgba(var(--primary-color), 0.08);
    border-top: 1px solid rgba(var(--primary-color), 0.2);
    padding: 10px 24px;
}
.rf-wz-preview-row {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
}
.rf-wz-preview-row + .rf-wz-preview-row {
    border-top: 1px solid rgba(var(--primary-color), 0.12);
    margin-top: 4px;
    padding-top: 8px;
}
.rf-wz-preview-label {
    font-size: 14px;
    color: #555;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    gap: 6px;
}
.rf-wz-preview-label .fa {
    color: rgb(var(--primary-color));
}
.rf-wz-preview-value {
    font-size: 22px;
    font-weight: bold;
    color: rgb(var(--primary-color));
    line-height: 1.2;
}
.rf-wz-preview-hint {
    font-size: 14px;
    color: #999;
}

/* ── 平板 RWD：6 步 + 標籤會擠到換行；標籤直接隱藏，當前 step 名由 .rf-wz-step-title 承擔
       表單 3 欄擠在 ~720px 內，輸入區寬度不足（含 input-group 兩側 addon），改 2 欄讓欄位呼吸 ── */
@media (max-width: 991px) {
    .rf-wz-step-name {
        display: none;
    }
    /* 2 步版（如新增訪談）標籤短、放得下，平板仍顯示 step 名 */
    .rf-wz-steps-2 .rf-wz-step-name {
        display: inline;
    }
    .rf-wz-field-row .rf-wz-field {
        -webkit-flex: 1 1 calc(50% - 7px);
        flex: 1 1 calc(50% - 7px);
    }
}
/* ── 手機 RWD ──────────────────────────────────────────────── */
@media (max-width: 767px) {
    .rf-wz-steps {
        padding: 10px 8px;
        gap: 0;
    }
    .rf-wz-step-divider {
        width: 16px;
        margin: 0 4px;
    }
    .rf-wz-body {
        padding: 16px 14px;
    }
    .rf-wz-field-row .rf-wz-field {
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
    }
    .rf-wz-preview { padding: 10px 14px; }
    .rf-wz-preview-row {
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: flex-start;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ════════════════════════════════════════════════════════════
   共用 AI 內容編輯 Modal 樣式（retireFlowAiContentEditModalCtrl）
   服務 contact editAiLog/editNlp + report editReport + 未來 AI 編輯場景
   原放於 retire-flow-contact.css，因 modal 共用故搬到 retire-flow.css
   ════════════════════════════════════════════════════════════ */
/* ────────────────────────────────────────────────────────────
   編輯 AI 日誌 / NLP 分析 modal（Toast UI Editor 嵌入）
   ──────────────────────────────────────────────────────────── */
.rf-edit-ai-body { padding: 16px 20px; }
/* editor wrapper — 控錯誤紅框；高度由 Toast UI Editor 自身的 height option 決定 */
.rf-edit-ai-editor-wrap {
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color 0.15s;
}
.rf-edit-ai-editor-wrap.rf-edit-ai-editor-error {
    border-color: rgb(var(--danger-color));
}
/* Toast UI Editor 內樣式 — 對齊 .rf-rpt-md（report 主頁的 markdown 樣式）
   h2 primary 藍 + 下底線；table th primary 藍底 + 白字；contact 編 AI 日誌也跟著升級配色 */
.rf-edit-ai-editor-wrap .toastui-editor-contents,
.rf-edit-ai-editor-wrap .toastui-editor-md-container .ProseMirror,
.rf-edit-ai-editor-wrap .toastui-editor-ww-container .ProseMirror {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
}
/* h1 / h2：藍 + 下底線（對齊 .rf-rpt-md h2）；砍編輯器預設 h1/h2 底線後重新設定 */
.rf-edit-ai-editor-wrap .toastui-editor-contents h1,
.rf-edit-ai-editor-wrap .ProseMirror h1,
.rf-edit-ai-editor-wrap .toastui-editor-contents h2,
.rf-edit-ai-editor-wrap .ProseMirror h2 {
    font-size: 18px; font-weight: bold;
    color: rgb(var(--primary-color));
    margin: 18px 0 10px; line-height: 1.4;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 6px;
}
.rf-edit-ai-editor-wrap .toastui-editor-contents h3,
.rf-edit-ai-editor-wrap .ProseMirror h3 {
    font-size: 17px; font-weight: bold; color: #333;
    margin: 16px 0 8px; line-height: 1.4;
    padding-bottom: 0; border-bottom: none;
}
.rf-edit-ai-editor-wrap .toastui-editor-contents h4,
.rf-edit-ai-editor-wrap .toastui-editor-contents h5,
.rf-edit-ai-editor-wrap .toastui-editor-contents h6,
.rf-edit-ai-editor-wrap .ProseMirror h4,
.rf-edit-ai-editor-wrap .ProseMirror h5,
.rf-edit-ai-editor-wrap .ProseMirror h6 {
    font-size: 16px; font-weight: bold; color: #444;
    margin: 14px 0 6px; line-height: 1.4;
    padding-bottom: 0; border-bottom: none;
}
/* p / 列表 — 正文 16px（UX 規範 §2.1 主要內容）*/
.rf-edit-ai-editor-wrap .toastui-editor-contents p,
.rf-edit-ai-editor-wrap .ProseMirror p { margin-bottom: 10px; line-height: 1.7; font-size: 16px; }
.rf-edit-ai-editor-wrap .toastui-editor-contents ul,
.rf-edit-ai-editor-wrap .toastui-editor-contents ol,
.rf-edit-ai-editor-wrap .ProseMirror ul,
.rf-edit-ai-editor-wrap .ProseMirror ol { padding-left: 20px; margin-bottom: 10px; }
.rf-edit-ai-editor-wrap .toastui-editor-contents li,
.rf-edit-ai-editor-wrap .ProseMirror li { margin-bottom: 5px; line-height: 1.7; font-size: 16px; }
.rf-edit-ai-editor-wrap .toastui-editor-contents strong,
.rf-edit-ai-editor-wrap .ProseMirror strong { color: inherit; font-weight: bold; }
.rf-edit-ai-editor-wrap .toastui-editor-contents blockquote,
.rf-edit-ai-editor-wrap .ProseMirror blockquote {
    border-left: 3px solid #ddd;
    padding-left: 12px;
    color: #777;
    margin: 8px 0;
}
.rf-edit-ai-editor-wrap .toastui-editor-contents hr,
.rf-edit-ai-editor-wrap .ProseMirror hr { border-color: #eee; margin: 12px 0; }
/* table — thead primary 藍底白字、td 邊框 + 深字色；字級 16px（UX 規範 §2.1）*/
.rf-edit-ai-editor-wrap .toastui-editor-contents table,
.rf-edit-ai-editor-wrap .ProseMirror table {
    width: 100%; border-collapse: collapse;
    margin-bottom: 12px; font-size: 16px;
}
.rf-edit-ai-editor-wrap .toastui-editor-contents th,
.rf-edit-ai-editor-wrap .toastui-editor-contents td,
.rf-edit-ai-editor-wrap .ProseMirror th,
.rf-edit-ai-editor-wrap .ProseMirror td {
    padding: 8px 10px; border: 1px solid #e0e0e0; text-align: left;
}
.rf-edit-ai-editor-wrap .toastui-editor-contents th,
.rf-edit-ai-editor-wrap .ProseMirror th {
    background: rgb(var(--primary-color));
    color: #fff;
    font-weight: bold;
}
.rf-edit-ai-editor-wrap .toastui-editor-contents td,
.rf-edit-ai-editor-wrap .ProseMirror td { color: #333; }
/* 砍掉「Markdown / 所見即所得」mode switch tab — 業務員只用 WYSIWYG，不需切換 raw markdown */
.rf-edit-ai-editor-wrap .toastui-editor-mode-switch,
.rf-edit-ai-editor-wrap .toastui-editor-mode-switch > .tab-item { display: none !important; }
/* 字數列 — flex 排版，紅字錯誤左 / 正常字數右 */
.rf-edit-ai-charcount {
    margin-top: 8px;
    font-size: 13px;
    min-height: 20px;
    display: -webkit-flex; display: flex;
    -webkit-justify-content: space-between; justify-content: space-between;
    -webkit-align-items: center; align-items: center;
}
.rf-edit-ai-charcount .pull-right { float: none; }
/* 「已輸入 N 字」永遠靠右（即使「內容空白」紅字 ng-if 隱藏只剩它一個 flex child 也置右）*/
.rf-edit-ai-charcount .text-muted { margin-left: auto; }

/* ── 載入中（spinner）───────────────────────────────────── */
.rf-cnt-ai-loading {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    padding: 24px 15px;
    gap: 12px;
}
.rf-cnt-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e0e7f5;
    border-top-color: #337ab7;
    border-radius: 50%;
    -webkit-animation: rf-cnt-spin 0.8s linear infinite;
    animation: rf-cnt-spin 0.8s linear infinite;
}
@-webkit-keyframes rf-cnt-spin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rf-cnt-spin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
.rf-cnt-loading-hint {
    font-size: 16px;
    color: #777;
    text-align: center;
    line-height: 1.8;
}