/* profile-card.css
 * 웹 설정 페이지(추첨/체블/트친정리) 상단에 표시되는 공통 프로필 카드 + 라이선스 칩.
 * 카드 폭(760px)·디자인 토큰은 각 페이지와 맞췄다. */

/* 폼 요소가 페이지 폰트를 따르도록 (input/select 기본폰트 튐 방지) */
input, select, textarea, button { font-family: inherit; }
/* 날짜 input 내부 텍스트("연도-월-일")는 크롬이 자체 폰트로 그려서 따로 상속 강제 */
input[type="date"]::-webkit-datetime-edit { font-family: inherit; }
/* rate-limit 대기 안내는 여러 줄(\n)로 와서 줄바꿈 보이게 */
#status, #rateNote { white-space: pre-line; }

#profileMount {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: 760px;
  margin: 0 auto 16px;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 8px 32px rgba(16, 24, 40, .06);
  font-family: -apple-system, "Inter", "Segoe UI", "Malgun Gothic", sans-serif;
  word-break: keep-all;
}
#profileMount .pcm-refresh {
  position: absolute; right: 12px; bottom: 10px;
  width: 24px; height: 24px; padding: 0;
  border: 1px solid #e8eaed; border-radius: 50%;
  background: #fff; color: #9aa3ad;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#profileMount .pcm-refresh:hover { background: #f1f3f5; color: #4b5563; }
#profileMount .pcm-refresh.spinning { animation: pcm-spin .7s linear infinite; pointer-events: none; opacity: .6; }
@keyframes pcm-spin { to { transform: rotate(360deg); } }
#profileMount.hidden { display: none !important; }

#profileMount .pcm-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; background: #f1f3f5; flex-shrink: 0;
}
#profileMount .pcm-info { flex: 1; min-width: 0; }
#profileMount .pcm-name {
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#profileMount .pcm-handle { font-size: 12.5px; color: #6b7280; }
#profileMount .pcm-stats { font-size: 11.5px; color: #9aa3ad; margin-top: 3px; font-variant-numeric: tabular-nums; }

#profileMount .pcm-chip { flex-shrink: 0; align-self: flex-start; text-align: right; }
#profileMount .pcm-chip .pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  padding: 4px 11px; border-radius: 999px;
  background: #f1f3f5; color: #6b7280;
}
#profileMount .pcm-chip.premium .pill { background: #e9f9f2; color: #0a7350; }
#profileMount .pcm-chip .exp { display: block; font-size: 10.5px; color: #9aa3ad; margin-top: 4px; }
#profileMount .pcm-chip.premium .exp { color: #0a7350; opacity: .8; }

/* 1일권 만료 임박: 3시간 이하 주황(warn), 1시간 이하 빨강(urgent) */
#profileMount .pcm-chip.premium.warn .pill { background: #fff4e5; color: #b5560f; }
#profileMount .pcm-chip.premium.warn .exp { color: #b5560f; opacity: 1; }
#profileMount .pcm-chip.premium.urgent .pill { background: #fdecec; color: #c0271b; }
#profileMount .pcm-chip.premium.urgent .exp { color: #c0271b; opacity: 1; }

@media (max-width: 560px) {
  #profileMount { border-radius: 14px; padding: 12px 14px; }
}

/* ── 이 페이지 기능의 잔여 사용량 스트립 ── */
.usage-strip {
  max-width: 760px; margin: -6px auto 16px; padding: 13px 18px;
  background: #fff; border: 1px solid #e8eaed; border-radius: 14px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .05);
  font-family: -apple-system, "Inter", "Segoe UI", "Malgun Gothic", sans-serif;
  word-break: keep-all;
}
.usage-strip.hidden { display: none !important; }
.usage-strip .us-top { display: flex; align-items: baseline; justify-content: space-between; }
.usage-strip .us-name { font-size: 13px; font-weight: 700; color: #334155; }
.usage-strip .us-num { font-size: 17px; font-weight: 800; color: #1d9bf0; font-variant-numeric: tabular-nums; }
.usage-strip .us-tot { font-size: 12px; font-weight: 600; color: #9aa3ad; }
.usage-strip .us-bar { height: 6px; background: #eef2f7; border-radius: 999px; overflow: hidden; margin-top: 9px; }
.usage-strip .us-fill { height: 100%; background: #1d9bf0; border-radius: 999px; transition: width .3s ease; }
.usage-strip .us-foot { margin-top: 8px; font-size: 11px; color: #9aa3ad; }
.usage-strip.warn .us-num { color: #d97706; }
.usage-strip.warn .us-fill { background: #f59e0b; }
.usage-strip.danger .us-num { color: #dc2626; }
.usage-strip.danger .us-fill { background: #ef4444; }
.usage-strip.danger .us-foot { color: #c0271b; }
/* 유료: 한 줄 무제한 */
.usage-strip.premium { display: flex; align-items: center; justify-content: space-between; }
.usage-strip.premium .us-name { font-size: 13.5px; }
.usage-strip.premium .us-unlim { font-size: 13.5px; font-weight: 800; color: #0a7350; }
@media (max-width: 560px) { .usage-strip { border-radius: 12px; padding: 12px 14px; } }

/* ── 딜레이 모드 토글 (공유) ── */
.delaymode { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.delaymode label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.delaymode .dm-hint { color: #9aa3ad; font-size: 11.5px; }
.manual-delays { margin-top: 8px; }