/* =====================================================================
   마이페이지 · '지금 할 일' 띠 [2026-10-17 D안]
   ---------------------------------------------------------------------
   사장님이 고른 D안: 탭마다 맨 위에 진한 보라 띠 하나.
   "색이 있어서 포인트 정보가 딱 보이니까 좋은 거였다" — 연하게 바꿔 본 뒤 처음 색으로 정했다.
     · 학습 기록  최근 7일 연습 횟수 · 평균 정확도 · 마지막 기록   (learning-portal.js 기록띠)
     · 구독 관리  다음 결제 · 해지 예약 · 결제 실패 · 미구독        (mypage.html subNowFor)
     · 계정 관리  닉네임을 아직 안 정했을 때만                       (learning-portal.js 계정띠)
     · 크레딧 관리 오늘의 보상(출석)을 띠로 올림                     (learning-portal.js renderPlan)
   띠 안에서 흰 바탕 단추가 이 탭의 주 행동이다. 아래 칸들은 예전 그대로다.
   ===================================================================== */

.my-now-host[hidden] { display: none !important; }
/* 학습 기록·계정 관리 탭은 칸 사이 간격(gap)이 없는 배치라 띠 아래를 직접 띄운다. */
#my-records > .my-now-host,
#my-plan > .my-now-host { margin-bottom: 18px; }

.my-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  padding: 24px 28px;
  border-radius: 16px;
  background: #5b3df0;
  color: #ffffff;
}

.my-now-copy {
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.my-now-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: #ffffff;
  font-size: .8125rem;
  font-weight: 700;
}

.my-now-title {
  margin: 0;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.03em;
  word-break: keep-all;
}

.my-now-sub {
  margin: 0;
  color: #e4defd;
  font-size: .9375rem;
  line-height: 1.55;
  word-break: keep-all;
}
.my-now-sub b { color: #ffffff; font-weight: 700; }

.my-now-act { flex: 0 0 auto; }

.my-now-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 12px;
  background: #ffffff;
  color: #4529ce;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
/* 공용 규칙(interface-foundation.css 'body:has(nav.sidebar) button { font: inherit !important }')이
   <button> 으로 된 띠 단추만 가늘고 작게 되돌린다. 그 규칙보다 구체적인 이름으로 굵기·크기를 다시 세운다. */
.mypage-page .my-now .my-now-btn { font-size: 1rem !important; font-weight: 700 !important; }
.my-now-btn:hover { background: #f1eefe; color: #3a24b0; }
.my-now-btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* ── 크레딧 관리: '오늘의 보상' 출석 칸을 띠로 ─────────────────────────
   출석 칸(w-checkin)은 mypage-wallet.css 의 한 줄 배치를 그대로 쓰고, 색만 띠에 맞게 덮는다. */
#my-wallet .w-now { display: block; }
#my-wallet .w-now .w-checkin { gap: 16px 28px; }
#my-wallet .w-now .w-checkin-state { margin: 0; color: #ffffff; font-size: 1.5rem; }
#my-wallet .w-now .w-checkin-meta { margin: 0; color: #e4defd; font-size: .9375rem; }
#my-wallet .w-now .w-checkin-meta b { color: #ffffff; }
#my-wallet .w-now .w-week { margin-top: 4px; }
#my-wallet .w-now .w-week-label { color: #e4defd; font-size: .875rem; }
#my-wallet .w-now .w-dot { border-color: transparent; background: rgba(255, 255, 255, .14); color: #d9d2fd; }
#my-wallet .w-now .w-dot.done { border-color: #ffd58a; background: #ffd58a; color: #7a4306; }
#my-wallet .w-now .w-dot.today { border: 2px dashed #ffffff; background: transparent; color: #ffffff; }
#my-wallet .w-now .w-dot.later { border: 1px solid rgba(255, 255, 255, .35); background: transparent; }
#my-wallet .w-now .w-btn-primary {
  min-height: 56px;
  padding: 0 30px;
  border-color: #ffffff;
  background: #ffffff;
  color: #4529ce;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
}
#my-wallet .w-now .w-btn-primary:hover { border-color: #f1eefe; background: #f1eefe; color: #3a24b0; }
#my-wallet .w-now .w-btn-primary:disabled { border-color: transparent; background: rgba(255, 255, 255, .2); color: #ffffff; }
#my-wallet .w-now .w-note { color: #e4defd; }
#my-wallet .w-now .wallet-msg,
#my-wallet .w-now .wallet-msg.success { color: #ffffff; }
#my-wallet .w-now .wallet-msg.error { color: #ffe4e0; }

/* [2026-10-21] 두 안을 합치며 띠 안에 A안의 글(오늘 받을 별사탕 · N일 연속 배지)과 '최근 7일 출석' 원이 들어왔다.
   mypage-wallet.css 는 흰 카드 기준 색이라(제목은 !important), 띠 위에서는 밝게 덮는다. */
#my-wallet .w-now.w-attend { gap: 18px; }
#my-wallet .w-now .w-attend-title { color: #ffffff !important; font-size: 1.5rem !important; }
#my-wallet .w-now .w-attend-desc { margin-top: 6px; color: #e4defd; }
#my-wallet .w-now .w-badge.violet,
#my-wallet .w-now .w-badge.mint { border-color: transparent; background: #ffd58a; color: #7a4306; }
#my-wallet .w-now .w-week { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); }
#my-wallet .w-now .w-week-head .w-h2 { color: #ffffff !important; }
#my-wallet .w-now .w-week-head .w-help { color: #d9d2fd; }
#my-wallet .w-now .w-day-orb { background: rgba(255, 255, 255, .14); color: #d9d2fd; }
#my-wallet .w-now .w-day.done .w-day-orb { background: #ffd58a; color: #7a4306; }
#my-wallet .w-now .w-day.today .w-day-orb { border: 2px dashed #ffffff; background: transparent; color: #ffffff; box-shadow: none; }
#my-wallet .w-now .w-day.today.done .w-day-orb { border: 2px solid #ffffff; background: #ffd58a; color: #7a4306; }
#my-wallet .w-now .w-day-label,
#my-wallet .w-now .w-day.done .w-day-label { color: #d9d2fd; }
#my-wallet .w-now .w-day.today .w-day-label { color: #ffffff; }

@media (max-width: 640px) {
  .my-now { padding: 20px 18px; }
  .my-now-title,
  #my-wallet .w-now .w-checkin-state,
  #my-wallet .w-now .w-attend-title { font-size: 1.25rem !important; }
  .my-now-act,
  .my-now-btn,
  #my-wallet .w-now .w-checkin-action,
  #my-wallet .w-now .w-btn-primary { width: 100%; }
}