@charset "UTF-8";
/* index_v3 自訂補充：會員登入狀態選單與 modal 相容調整（設計稿 style.css 之外的站方整合樣式） */

/* 桌機：已登入會員頭像 + 下拉選單（沿用 .site-header__nav-item hover 機制） */
.site-header__member {
  display: flex;
  align-items: center;
}

.site-header__member-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  background: #fff;
}

.site-header__member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 下拉靠右對齊：設計稿是 left:50% 搭配 translateX(-50%) 置中，會員頭像在最右側會超出視窗。
   transform 必須一併歸零 —— 只改 left/right 而保留 translateX(-50%)，下拉會往左偏半個自身
   寬度，與頭像之間出現空隙，滑鼠移過去就關閉而選不到。 */
.site-header__member .site-header__dropdown {
  left: auto;
  right: 0;
  transform: translate(0, 8px);
}

.site-header__member:hover .site-header__dropdown {
  transform: translate(0, 0);
}

/* mycss.css 的 .swiper-slide img 通用規則（width/height 100% + cover）會蓋過設計稿的
   非滿版圖片尺寸，以較高特異度還原 90天脫單計畫卡片內的兩種圖片設計值 */
.swiper-slide img.single-plan-card__step {
  width: 100px;
  height: auto;
  object-fit: initial;
}

.swiper-slide img.single-plan-card__visual {
  width: 184px;
  height: 184px;
  object-fit: contain;
}

@media (min-width: 769px) and (max-width: 1390px) {
  .swiper-slide img.single-plan-card__step {
    width: clamp(82px, 8vw, 112px);
  }

  .swiper-slide img.single-plan-card__visual {
    width: clamp(132px, 13vw, 184px);
    height: clamp(132px, 13vw, 184px);
  }
}

@media (max-width: 768px) {
  .swiper-slide img.single-plan-card__step {
    width: clamp(72px, 18vw, 72px);
  }

  .swiper-slide img.single-plan-card__visual {
    width: clamp(112px, 28vw, 132px);
    height: clamp(112px, 28vw, 132px);
  }
}

/* 派對卡片標題的兩行截斷已由新版設計稿 style.css 內建（.party-card h3），此處不再重複覆寫 */

/* 服務條款/隱私政策連結：reset.css 歸零了 a 樣式，補上可辨識的底線 */
.dating-service__terms a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dating-service__terms a:hover {
  opacity: 0.75;
}

/* 手機選單：已登入的會員連結列表 */
.mobile-menu__member-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}

.mobile-menu__member-links a {
  display: block;
  padding: 10px 0;
  color: inherit;
  text-decoration: none;
}

/* 常見QA 答案：設計稿只設想單一段落，實際文案為多段並含編號說明，
   reset.css 已將 p / ol 的邊界與項目符號歸零，此處補回段落間距與編號清單 */
.faq-item__answer p + p,
.faq-item__answer p + .faq-item__list,
.faq-item__answer .faq-item__list + p {
  margin-top: 0.9em;
}

.faq-item__list {
  padding-left: 1.6em;
  list-style: decimal;
}

.faq-item__list li {
  color: #20212a;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.65;
}

.faq-item__list li + li {
  margin-top: 0.6em;
}

.faq-item__list strong {
  font-weight: 500;
}

@media (max-width: 768px) {
  .faq-item__list {
    padding-left: 1.4em;
  }

  .faq-item__list li {
    font-size: 15px;
    line-height: 1.7;
  }
}

/* ── 連結 hover 變色修正 ──────────────────────────────────────────────
   mycss.css 的全域 a:hover{color:#A184C1} 特異度 (0,1,1)，會蓋掉設計稿以單一
   class 指定的文字色 (0,1,0)，讓按鈕與選單 hover 時文字變紫。
   全域中和寫在 index_v3_mycss_override.css（載入於 mycss.css 與設計稿之間），
   此處只補「設計稿用單一 class 指定顏色」而中和規則仍會蓋到的元素，
   以 (0,2,0) 還原成設計稿的值。 */
.site-header__nav-link:hover {
  color: var(--color-text);
}

.site-header__button--primary:hover,
.hero__button:hover,
.line-matching__button:hover,
.love-stories__button:hover,
.party__more:hover,
.faq-section__more:hover,
.before-after__more:hover,
.love-insights__more:hover {
  color: var(--color-white);
}

/* 登入/註冊等 modal 屬於站方既有介面，維持 mycss.css 原本的 hover 行為 */
.modal a:hover {
  color: #a184c1;
}