/* ==========================================================================
   G02 角色首頁
   桌機驗收基準 1440px（原圖 1586px，比例 0.908）
   ========================================================================== */

.g02 { background: var(--c-page); }

/* ==========================================================================
   問候
   ========================================================================== */

.greet {
  position: relative;
  padding: 4px 0 0;
}

.greet__art {
  position: absolute;
  right: -66px;
  top: -25px;
  width: 676px;
  height: 142px;
  z-index: 0;
  pointer-events: none;
}

.greet__title {
  position: relative;
  z-index: 1;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #101B1F;
}

.greet__unit {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  font-size: 19px;
  color: #5C757E;
}

/* ==========================================================================
   KPI（波浪容器為向量重繪）
   ========================================================================== */

.kpi {
  position: relative;
  margin-top: 17px;
  padding: 26px 34px 28px;
}

.kpi__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.kpi__list {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.kpi__item {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
  min-width: 0;
}

.kpi__sep { flex: none; padding: 0 10px; display: flex; }

.kpi__icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
}

.kpi__icon--solid { background: #0B6E6B; }

.kpi__icon--teal {
  border: 1.5px solid #9BCFCC;
  background: #F4FAFA;
}

.kpi__icon--amber {
  border: 1.5px solid #E4B663;
  background: #FEF9F0;
}

.kpi__label {
  display: block;
  font-size: 17px;
  color: #2C3D43;
  line-height: 1.3;
}

.kpi__value {
  display: block;
  margin-top: 2px;
  font-size: 34px;
  font-weight: 700;
  color: var(--c-teal-600);
  line-height: 1.15;
}

.kpi__value--amber { color: #C57C08; }

/* ==========================================================================
   卡片共用
   ========================================================================== */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 22px 24px 12px;
}

.card__title {
  font-size: 19px;
  font-weight: 700;
  color: #16232A;
  position: relative;
  padding-bottom: 5px;
}

.card__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  background: var(--c-teal-600);
  border-radius: 2px;
}

/* ==========================================================================
   案件旅程
   ========================================================================== */

.journey { margin-top: 5px; padding-bottom: 8px; }

.stages {
  margin-top: 6px;
  display: flex;
  align-items: flex-end;
  padding: 0 4px 0 34px;
}

.stages__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
}

.stages__item::after {
  content: "";
  position: absolute;
  left: 50%;
  right: -50%;
  bottom: 6px;
  height: 1.5px;
  background: #D3D6D6;
  z-index: 0;
}

.stages__item:last-child::after { display: none; }

.stages__item--end::after {
  background: repeating-linear-gradient(90deg, #C9CDCD 0 5px, transparent 5px 10px);
}

.stages__item:nth-last-child(2)::after {
  background: repeating-linear-gradient(90deg, #C9CDCD 0 5px, transparent 5px 10px);
}

.stages__label {
  font-size: 14px;
  line-height: 1.2;
  color: #4A6068;
  white-space: nowrap;
}

.stages__node {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #C2C6C6;
  background: var(--c-surface);
  position: relative;
  z-index: 1;
}

.stages__item--current .stages__label {
  color: var(--c-teal-800);
  font-weight: 700;
  border: 1px solid #A9D2CF;
  background: #F1F9F8;
  border-radius: var(--r-pill);
  padding: 3px 14px;
}

.stages__item--current .stages__node {
  border-color: var(--c-teal-600);
  background: var(--c-teal-600);
  box-shadow: 0 0 0 3px rgba(6, 121, 117, .16);
}

.stages__item--current::after { background: var(--c-teal-600); opacity: .55; }

/* --- 案件列 --- */
.cases {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.case {
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: #FFFDFA;
  padding: 5px 18px;
  transition: border-color .16s ease, background .16s ease;
}

.case:hover { border-color: #BBD8D5; background: #FCFEFD; }

.case__icon {
  width: 47px;
  height: 47px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
}

.case__icon--teal { background: #0B6E6B; }
.case__icon--mint { background: #D9EEEC; }
.case__icon--amber { background: #D9922A; }

.case__id { width: 176px; flex: none; }

.case__name {
  display: block;
  font-size: 19px;
  font-weight: 700;
  color: #16232A;
  line-height: 1.25;
}

.case__no {
  display: block;
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.25;
  color: #7B9099;
  letter-spacing: .01em;
}

.case__field {
  flex: none;
  padding-left: 22px;
  border-left: 1px solid #E9E7E3;
}

.case__field:nth-of-type(1) { width: 196px; }

.case__field-label {
  display: block;
  font-size: 12.5px;
  color: #8A9BA2;
  line-height: 1.2;
}

.case__field-value {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  font-size: 15px;
  line-height: 1.25;
  color: #1F3037;
  white-space: nowrap;
}

.case__field-sub {
  display: block;
  margin-top: 2px;
  margin-left: 22px;
  font-size: 12.5px;
  line-height: 1.2;
  color: #7B9099;
}

.case__field-sub--amber { color: #C57C08; font-weight: 500; }

.risk-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.risk-dot--mid { background: var(--c-amber); }
.risk-dot--low { background: var(--c-teal-500); }
.risk-dot--high { background: var(--c-danger); }

.case__next {
  flex: 1;
  min-width: 0;
  padding-left: 22px;
  border-left: 1px solid #E9E7E3;
}

.case__next-main {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--c-teal-800);
}

.case__next-sub {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--c-teal-600);
}

.case__chevron { flex: none; }

.journey__more {
  margin: 10px auto 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-teal-700);
}

.journey__more:hover { text-decoration: underline; }

/* ==========================================================================
   近期動態
   ========================================================================== */

.feed { margin-top: 8px; padding: 18px 24px 10px; }

.feed__head {
  display: flex;
  align-items: center;
  gap: 18px;
}

.select {
  font: inherit;
  font-size: 14px;
  color: #2C3D43;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: #FFFDFA;
  padding: 8px 12px;
  min-width: 156px;
  cursor: pointer;
}

.feed__list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

.feed__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 2px;
  border-top: 1px solid #EFEDE9;
  font-size: 15px;
}

.feed__row:first-child { border-top: 0; }

.feed__time {
  width: 46px;
  flex: none;
  font-size: 14px;
  color: #7B9099;
}

.feed__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.feed__dot--teal { background: var(--c-teal-500); }
.feed__dot--amber { background: var(--c-amber-2); }

.feed__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #F2F7F6;
  display: grid;
  place-items: center;
  flex: none;
}

.feed__text {
  flex: none;
  width: 336px;
  color: #1F3037;
}

.feed__extra {
  flex: 1;
  min-width: 0;
  padding-left: 22px;
  border-left: 1px solid #EFEDE9;
  font-size: 14px;
  color: #6B818A;
}

.feed__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: var(--c-teal-700);
  flex: none;
}

.feed__link:hover { text-decoration: underline; }

/* ==========================================================================
   右側欄
   ========================================================================== */

.side__card { padding: 20px 20px 18px; }

.side__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  border-radius: var(--r-pill);
  padding: 4px 10px;
  white-space: nowrap;
}

.pill--ok {
  color: #46753E;
  background: var(--c-success-bg);
  border: 1px solid #DCE8CE;
}

.pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5C9A46;
}

/* --- 快速建案 --- */
.quick {
  margin-top: 13px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.quick__btn {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: #FFFDFA;
  padding: 9px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: #24343A;
  transition: border-color .16s ease, background .16s ease;
}

.quick__btn:hover { border-color: #BBD8D5; background: #F7FCFB; }

/* --- 服務狀態 --- */
.services {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

.service {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 3px 0;
  border-top: 1px solid #EFEDE9;
  font-size: 14px;
}

.service:first-child { border-top: 0; }

.service__icon { flex: none; }

.service__name { flex: 1; min-width: 0; color: #24343A; }

.service__state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #46753E;
  font-size: 13px;
  flex: none;
}

.side__more {
  margin: 10px auto 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--c-teal-700);
}

.side__more:hover { text-decoration: underline; }

.side__note {
  margin-top: auto;
  padding-top: 24px;
  text-align: right;
  font-size: 14px;
  color: #93A5AC;
}

/* ==========================================================================
   響應式
   ========================================================================== */

@media (max-width: 1280px) {
  .side__card { flex: 1 1 320px; }
  .side__note { width: 100%; margin-top: 0; padding-top: 4px; }

}

@media (max-width: 900px) {
  .case { flex-wrap: wrap; gap: 12px 16px; }
  .case__id { width: auto; flex: 1 1 auto; }
  .case__field:nth-of-type(1) { width: auto; }
  .case__next { flex: 1 1 100%; padding-left: 0; border-left: 0; }

  .feed__row { flex-wrap: wrap; }
  .feed__text { width: auto; flex: 1 1 auto; }
  .feed__extra { flex: 1 1 100%; padding-left: 0; border-left: 0; margin-top: 4px; }
}

/* --- 手機驗收基準 390px --- */
@media (max-width: 640px) {
  .greet { padding: 0; min-height: 0; }

  .greet__art {
    position: relative;
    right: auto;
    top: 0;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    opacity: .85;
  }

  .greet__title { font-size: 28px; }
  .greet__unit { font-size: 15px; margin-top: 6px; }

  /* KPI 於窄版改為 2×2，波浪框改用單純圓角容器 */
  .kpi {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #CFE3E2;
    border-radius: var(--r-lg);
    background: #F8FCFB;
  }

  .kpi__frame { display: none; }

  .kpi__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 10px;
  }

  .kpi__sep { display: none; }
  .kpi__item { gap: 12px; }
  .kpi__icon { width: 46px; height: 46px; }
  .kpi__icon svg { width: 21px; height: 21px; }
  .kpi__label { font-size: 13.5px; }
  .kpi__value { font-size: 25px; }

  .card { padding: 16px 14px 14px; border-radius: var(--r-md); }
  .card__title { font-size: 17px; }

  /* 階段列於窄版橫向捲動 */
  .stages {
    padding: 0;
    overflow-x: auto;
    gap: 6px;
    min-width: 0;
  }

  .stages__item { flex: none; min-width: 92px; }
  .stages__label { font-size: 13px; }
  .stages__item--current .stages__label { padding: 4px 11px; font-size: 13px; }

  .case { padding: 12px 13px; gap: 10px 12px; }
  .case__icon { width: 44px; height: 44px; border-radius: 9px; }
  .case__icon svg { width: 23px; height: 23px; }
  .case__name { font-size: 16px; }
  .case__no { font-size: 12.5px; }

  .case__field {
    flex: 1 1 auto;
    padding-left: 0;
    border-left: 0;
  }

  .case__field-value { font-size: 14px; }
  .case__field-sub { margin-left: 0; }
  .case__next-main { font-size: 14.5px; }
  .case__chevron { display: none; }

  .feed__head { gap: 10px; flex-wrap: wrap; }
  .select { flex: 1; min-width: 0; }
  .feed__row { gap: 9px; font-size: 14px; padding: 11px 0; }
  .feed__icon { display: none; }
  .feed__text { width: 100%; flex: 1 1 100%; }
  .feed__link { margin-left: auto; }

  .side__card { flex: 1 1 auto; }
  .quick { gap: 10px; }
  .quick__btn { padding: 13px 6px 11px; font-size: 13px; }
  .side__note { text-align: center; padding-top: 6px; }
}