/* 이 파일은 _shared/cg-auth.css 의 복사본입니다. 직접 수정하지 말고 _shared 에서 고친 뒤 sync.sh 를 실행하세요. */
/* ============================================================
   CGAuth - 공통 로그인 UI 스타일
   ★ 원본: play_project/_shared/cg-auth.css (복사본 직접 수정 금지)

   설계 원칙
     - 기존 서비스 디자인을 바꾸지 않습니다. 헤더 안에 들어가는
       작은 버튼 묶음 하나만 정의하고, 색은 서비스 변수를 물려받습니다.
     - 서비스가 --cg-accent / --cg-fg / --cg-bg 를 정의하면 그 값을 씁니다.
     - 정의하지 않으면 중립적인 기본값으로 그려집니다.
   ============================================================ */

.cg-auth {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  line-height: 1.2;
  vertical-align: middle;
}

/* 세션 확인 전에는 살짝 흐리게 (깜빡임 완화) */
.cg-auth--pending { opacity: .75; }

/* ---------- Google 로그인 버튼 ---------- */
.cg-auth-google {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--cg-border, #dadce0);
  border-radius: 999px;
  background: var(--cg-btn-bg, #fff);
  color: var(--cg-btn-fg, #3c4043);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cg-auth-google:hover {
  background: var(--cg-btn-bg-hover, #f7f8f8);
  box-shadow: 0 1px 3px rgba(60, 64, 67, .18);
}
.cg-auth-google:active { transform: translateY(1px); }
.cg-auth-google:focus-visible {
  outline: 2px solid var(--cg-accent, #4285f4);
  outline-offset: 2px;
}
.cg-auth .cg-g { width: 16px; height: 16px; flex: 0 0 16px; display: block; }

/* ---------- 안내 문구 ---------- */
.cg-auth-hint {
  color: var(--cg-muted, #7b8189);
  font-size: 12px;
  white-space: nowrap;
}

/* ---------- 로그인 상태 ---------- */
.cg-auth-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
}
.cg-auth-avatar {
  width: 24px; height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cg-accent, #4285f4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.cg-auth-avatar--txt { line-height: 24px; }
.cg-auth-name {
  font-weight: 600;
  color: var(--cg-fg, inherit);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 배지 ---------- */
.cg-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.cg-badge-premium { background: #fff3d4; color: #8a5a00; }
.cg-badge-admin   { background: #e7f0ff; color: #1a4fa0; }
.cg-badge-adfree  { background: #e8f6ec; color: #1c6b34; }

/* ---------- 링크 / 로그아웃 ---------- */
.cg-auth-mine,
.cg-auth-admin,
.cg-auth-out {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--cg-border, #dadce0);
  background: transparent;
  color: var(--cg-fg, #3c4043);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
}
.cg-auth-mine:hover,
.cg-auth-admin:hover,
.cg-auth-out:hover { background: var(--cg-btn-bg-hover, rgba(0, 0, 0, .05)); }
.cg-auth-out { color: var(--cg-muted, #7b8189); }

/* ---------- 모바일: 문구와 이름을 접습니다 ---------- */
@media (max-width: 640px) {
  .cg-auth { gap: 6px; }
  .cg-auth-hint { display: none; }
  .cg-auth-google { padding: 6px 10px; font-size: 12px; }
  .cg-auth-google span:not(.cg-g) {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .cg-auth-google::after {
    content: '로그인';
    font-size: 12px;
    font-weight: 600;
  }
  .cg-auth-name { max-width: 70px; }
  .cg-badge { display: none; }
  .cg-auth-mine { display: none; }
}

/* ---------- 어두운 헤더를 쓰는 서비스 대응 ---------- */
.cg-auth[data-theme="dark"] .cg-auth-mine,
.cg-auth[data-theme="dark"] .cg-auth-admin,
.cg-auth[data-theme="dark"] .cg-auth-out {
  border-color: rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .92);
}
.cg-auth[data-theme="dark"] .cg-auth-name { color: #fff; }
.cg-auth[data-theme="dark"] .cg-auth-hint { color: rgba(255, 255, 255, .7); }

/* ============================================================
   기존 서비스 CSS 로부터의 보호막
   -----------------------------------------------------------
   서비스마다 `.site-head a { font-size: 22px }` 처럼 헤더 안의
   링크·버튼을 통째로 꾸미는 규칙이 있습니다. 로그인 UI 가 그 영향을
   받아 깨지지 않도록, 여기서만 더 높은 우선순위로 되돌립니다.
   (기존 규칙 자체는 전혀 수정하지 않습니다)
   ============================================================ */
.cg-auth a,
.cg-auth button,
.cg-auth span {
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  transform: none;
  box-shadow: none;
  margin: 0;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  float: none;
  position: static;
}
.cg-auth a.cg-auth-mine,
.cg-auth a.cg-auth-admin {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  padding: 5px 11px;
  text-decoration: none;
  display: inline-flex;
}
.cg-auth a.cg-auth-mine:hover,
.cg-auth a.cg-auth-admin:hover { transform: none; }
.cg-auth button.cg-auth-google,
.cg-auth button.cg-auth-out {
  font-size: 13px;
  text-transform: none;
  box-shadow: none;
}
.cg-auth button.cg-auth-out { font-size: 12px; padding: 5px 11px; }
.cg-auth img.cg-auth-avatar { width: 24px; height: 24px; border-radius: 50%; }
.cg-auth .cg-auth-user { text-decoration: none; }

/* ============================================================
   「내 최근 이력」 위젯
   - 서비스 본문 안에 들어가는 카드입니다.
   - 서비스 배경 위에 자연스럽게 얹히도록 중립적인 색만 씁니다.
   ============================================================ */
.cg-recent {
  border: 1px solid var(--cg-border, rgba(0, 0, 0, .1));
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--cg-card-bg, rgba(255, 255, 255, .72));
  font-size: 14px;
  line-height: 1.5;
}

.cg-rec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.cg-rec-h {
  font-weight: 700;
  font-size: 15px;
  color: var(--cg-fg, inherit);
}
.cg-rec-more {
  font-size: 12px;
  font-weight: 600;
  color: var(--cg-muted, #7b8189);
  text-decoration: none;
  white-space: nowrap;
}
.cg-rec-more:hover { text-decoration: underline; }

.cg-rec-guest {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--cg-muted, #7b8189);
}

/* 최근기록 패널의 로그인 유도.
   헤더에 이미 Google 버튼이 있으므로 여기서는 텍스트 링크로만 둡니다.
   (터치 영역 확보를 위해 세로 패딩은 남깁니다) */
.cg-rec-login {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0;
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--cg-accent, #2563eb);
  cursor: pointer;
}
.cg-rec-login:hover,
.cg-rec-login:focus-visible {
  text-decoration: underline;
}

.cg-rec-loading,
.cg-rec-empty {
  margin: 0;
  padding: 10px 0;
  font-size: 13px;
  color: var(--cg-muted, #7b8189);
}

/* 자주 쓰는 항목 - 칩 */
.cg-rec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.cg-rec-chip {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--cg-border, rgba(0, 0, 0, .1));
  background: var(--cg-chip-bg, rgba(0, 0, 0, .03));
  font-size: 12px;
  font-weight: 600;
  color: var(--cg-fg, inherit);
  text-decoration: none;
  white-space: nowrap;
}
.cg-rec-chip:hover { background: var(--cg-btn-bg-hover, rgba(0, 0, 0, .07)); }

/* 최근 이력 - 목록 */
.cg-rec-list { display: flex; flex-direction: column; }
.cg-rec-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--cg-border, rgba(0, 0, 0, .07));
  color: var(--cg-fg, inherit);
  text-decoration: none;
}
.cg-rec-list .cg-rec-row:first-child { border-top: 0; }
a.cg-rec-row:hover .cg-rec-title { text-decoration: underline; }

.cg-rec-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
}
.cg-rec-sub {
  flex: 0 1 auto;
  font-size: 12px;
  color: var(--cg-muted, #7b8189);
  white-space: nowrap;
}
.cg-rec-when {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--cg-muted, #7b8189);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .cg-recent { padding: 14px; }
  .cg-rec-sub { display: none; }
}

/* 서비스 CSS 간섭 차단 */
.cg-recent a, .cg-recent button, .cg-recent span, .cg-recent p {
  font-family: inherit;
  letter-spacing: normal;
  text-transform: none;
  transform: none;
}
.cg-recent a:hover { transform: none; }