@import "tailwindcss";

:root {
  --bg: #14171c; /* 차콜 다크 */
  --bg2: #1b1f26;
  --mint: #85fca8; /* CTA 버튼 */
  --mint-ink: #0a2417; /* 민트 버튼 위 텍스트 */
  --green: #4affa0; /* 글로우/액센트 (포인트 컬러) */

  --sheet: #f2f3ef; /* 레이어드 화이트 시트 */
  --sheet-card: #ffffff;
  --ink: #14171c; /* 화이트 위 텍스트 */
  --ink-muted: #79808c;
  --line-d: #2b313c; /* 다크 보더 */
  --line-l: #e3e5df; /* 라이트 보더 */

  /* 상금 카드 — 골드 대신 민트/틸그린 쿨 톤 */
  --gold-border: #5ef0b4; /* 민트 액센트 */
  --gold-bg: #0e1f1b; /* 딥 틸그린 */
  --gold-btn-1: #85fca8; /* 민트 */
  --gold-btn-2: #15a99b; /* 틸그린 */

  --gpt: #15a99b; /* 틸그린 (teal green) */
  /* Claude 오렌지 토큰 제거 — 오렌지 금지 규칙. Claude 표시는 공식 로고 이미지가 담당 */
  --gemini: #5b8cff;

  --share: #a65eff; /* 공유/바이럴 액션 (ADO2 브랜드 포인트 퍼플) */
}

* {
  box-sizing: border-box;
}

html,
body {
  background:
    radial-gradient(120% 50% at 50% -5%, #20302a 0%, var(--bg) 48%) no-repeat,
    var(--bg);
  color: #fff;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family:
    "Pretendard", -apple-system, BlinkMacSystemFont, system-ui,
    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  margin: 0;
}

.shell {
  max-width: 460px;
  margin: 0 auto;
  padding: 0 16px 56px;
}

/* Triple Pick 2026 타이틀용 Impact */
.font-impact {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", system-ui,
    sans-serif;
  letter-spacing: 0.5px;
}

.flag-img {
  object-fit: cover;
  border: 1px solid var(--line-d);
}

/* 레이어드 화이트 시트 */
.sheet {
  background: var(--sheet);
  border-radius: 22px;
  box-shadow:
    0 -2px 0 rgba(255, 255, 255, 0.04),
    0 24px 60px rgba(0, 0, 0, 0.5);
}

/* 코너 브래킷 (HUD) */
.bracket {
  position: relative;
}
.bracket > .bk {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--green);
}
.bracket > .bk-tl {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 6px;
}
.bracket > .bk-tr {
  top: 0;
  right: 0;
  border-left: 0;
  border-bottom: 0;
  border-top-right-radius: 6px;
}
.bracket > .bk-br {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 6px;
}
.bracket > .bk-bl {
  bottom: 0;
  left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom-left-radius: 6px;
}

.vs-glow {
  background: radial-gradient(
    closest-side,
    rgba(74, 255, 160, 0.5),
    rgba(74, 255, 160, 0) 70%
  );
}

.btn-mint {
  background: var(--mint);
  color: var(--mint-ink);
  box-shadow:
    0 0 0 1px rgba(133, 252, 168, 0.55),
    0 10px 28px rgba(133, 252, 168, 0.28);
}

/* 사용자 액션(투표 제출) — 브랜드 포인트 퍼플 */
.btn-share {
  background: var(--share);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(166, 94, 255, 0.5),
    0 12px 30px rgba(166, 94, 255, 0.35);
}

.gold-card {
  background:
    linear-gradient(180deg, rgba(94, 240, 180, 0.08), rgba(21, 169, 155, 0.03)),
    var(--gold-bg);
  border: 1px solid rgba(94, 240, 180, 0.45);
  box-shadow: inset 0 0 24px rgba(94, 240, 180, 0.06);
}
.gold-btn {
  background: linear-gradient(180deg, var(--gold-btn-1), var(--gold-btn-2));
  color: #06231a;
  box-shadow: 0 6px 18px rgba(21, 169, 155, 0.3);
}

/* 다크 스크롤바 — 흰색 기본 스크롤바 제거 */
.scroll-dark {
  scrollbar-width: thin;
  scrollbar-color: var(--line-d) transparent;
}
.scroll-dark::-webkit-scrollbar {
  width: 6px;
}
.scroll-dark::-webkit-scrollbar-track {
  background: transparent;
}
.scroll-dark::-webkit-scrollbar-thumb {
  background: var(--line-d);
  border-radius: 9999px;
}
.scroll-dark::-webkit-scrollbar-thumb:hover {
  background: #3a414e;
}

@keyframes barfill {
  from {
    width: 0;
  }
}
.bar-anim {
  animation: barfill 0.8s ease-out;
}
