/* 픽넘버 디자인 시스템
 *
 * 톤: 클로드 디자인 언어 — 웜 크림 배경, 세리프 디스플레이, 테라코타 액센트.
 *     빅매치(다크 네이비)에서 넘어와도 '같은 회사의 다른 서비스'로 읽히도록 톤만 이어간다.
 *
 * AI 3색은 각 사 브랜드 컬러로 고정한다 — 사용자가 로고 없이도 즉시 구분할 수 있어야 한다.
 * 글자는 크게 간다. 이 서비스 사용자는 작은 글씨를 싫어한다.
 */

:root {
  /* 바탕 */
  --bg:        #F4F1EA;   /* 웜 크림 */
  --surface:   #FDFCF9;
  --surface-2: #EDE8DE;
  --line:      #DDD6C8;
  --line-soft: #E8E2D6;

  /* 글자 */
  --ink:       #1F1B16;   /* 따뜻한 먹색 */
  --ink-2:     #4A4238;
  --mut:       #7A7061;
  --dim:       #9A9182;

  /* 액센트 — 테라코타 */
  --accent:      #B4552F;
  --accent-soft: #E8D5C9;
  --accent-bg:   #F7EDE6;
  --amber:       #C68B2C;

  /* 판단 주체 색 — 빅매치 시즌대결 화면(views/leaderboard.ejs)과 같은 값을 쓴다.
   * 두 서비스를 오가는 사용자가 '초록=챗GPT'를 다시 배우지 않아도 되게 하기 위함.
   * 빅매치는 다크 배경이라 :root에 밝은 톤(#34D399 등)도 있지만,
   * 픽넘버는 크림 배경이므로 대비가 확보되는 딥 톤(시즌대결 화면이 쓰는 값)을 채택한다. */
  --ai-chatgpt: #16A34A;  /* 초록 */
  --ai-gemini:  #2563EB;  /* 블루  */
  --ai-claude:  #EA580C;  /* 오렌지 */
  --ai-index:   #B45309;  /* 골드 — 지수 전용. 빅매치 규칙상 다른 용도 금지 */
  --ai-random:  #78716C;  /* 중립 회색 — 대조군 */

  --ai-chatgpt-bg: #E9F7EE;
  --ai-gemini-bg:  #E8F0FE;
  --ai-claude-bg:  #FDEEE4;
  --ai-index-bg:   #FEF3C7;
  --ai-random-bg:  #F0EEEA;

  /* 로또 공식 번호 색 */
  --ball-1: #FBC400; --ball-2: #69C8F2; --ball-3: #FF7272;
  --ball-4: #AAAAAA; --ball-5: #B0D840;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(31,27,22,.05), 0 8px 24px -12px rgba(31,27,22,.18);
  --shadow-lg: 0 2px 4px rgba(31,27,22,.06), 0 20px 48px -20px rgba(31,27,22,.28);

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
          'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;          /* 기본을 크게 */
  line-height: 1.75;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px 96px; }

/* ── 헤더 ───────────────────────────────────────────── */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 22px 0 18px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.brand {
  font-family: var(--serif);
  font-size: 27px; font-weight: 600; color: var(--ink);
  letter-spacing: -.02em; text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand em { font-style: italic; color: var(--accent); }
.nav-links { display: flex; gap: 20px; align-items: center; font-size: 15.5px; }
.nav-links a { color: var(--ink-2); font-weight: 600; }
.nav-user { font-size: 14.5px; color: var(--mut); }

/* ── 타이포 ─────────────────────────────────────────── */
.display {
  font-family: var(--serif);
  font-size: clamp(30px, 5.6vw, 42px);
  font-weight: 600; line-height: 1.25; letter-spacing: -.025em;
  margin: 34px 0 10px; color: var(--ink);
}
.display em { font-style: italic; color: var(--accent); }
.lede { font-size: 18px; color: var(--ink-2); margin: 0 0 30px; max-width: 60ch; }
h2.sec {
  font-family: var(--serif);
  font-size: 24px; font-weight: 600; letter-spacing: -.02em;
  margin: 44px 0 14px;
}
.sub { font-size: 15.5px; color: var(--mut); margin: -6px 0 20px; }

/* ── 카드 ───────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
}
.card + .card { margin-top: 14px; }
.grid { display: grid; gap: 14px; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ── 번호 공 ────────────────────────────────────────── */
.balls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ball {
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; color: #fff;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.14);
}
.ball.sm { width: 34px; height: 34px; font-size: 14.5px; }
.ball.b1 { background: var(--ball-1); color: #6B4E00; }
.ball.b2 { background: var(--ball-2); color: #05485F; }
.ball.b3 { background: var(--ball-3); color: #6B1414; }
.ball.b4 { background: var(--ball-4); color: #2E2E2E; }
.ball.b5 { background: var(--ball-5); color: #33470F; }
.ball.hit { outline: 3px solid var(--accent); outline-offset: 2px; }
.plus { color: var(--mut); font-weight: 700; margin: 0 4px; font-size: 18px; }

/* ── AI 배지 ────────────────────────────────────────── */
.ai-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;  /* 배지도 크게 */
}
.ai-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.ai-chatgpt { color: var(--ai-chatgpt); } .ai-chatgpt .ai-dot { background: var(--ai-chatgpt); }
.ai-claude  { color: var(--ai-claude);  } .ai-claude  .ai-dot { background: var(--ai-claude); }
.ai-gemini  { color: var(--ai-gemini);  } .ai-gemini  .ai-dot { background: var(--ai-gemini); }
.ai-index   { color: var(--ai-index);   } .ai-index   .ai-dot { background: var(--ai-index); }
.ai-random  { color: var(--ai-random);  } .ai-random  .ai-dot { background: var(--ai-random); }

/* ── 판단 주체 카드 ─────────────────────────────────
 * 누구의 번호인지가 카드에서 즉시 읽혀야 한다.
 * 색 띠 하나로는 약해서 머리띠 전체를 브랜드 색으로 채우고 흰 글씨를 얹는다. */
.ai-card { padding: 0; overflow: hidden; border-color: var(--line); }
.ai-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 18px; color: #fff;
}
.ai-head .name {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 17.5px; font-weight: 800; letter-spacing: -.015em;
}
.ai-head .kind {
  font-size: 12.5px; font-weight: 700; opacity: .92;
  background: rgba(255,255,255,.22); padding: 3px 9px; border-radius: 100px;
}
.ai-body { padding: 18px; }

.ai-card.t-chatgpt { border-top-color: var(--ai-chatgpt); }
.ai-card.t-claude  { border-top-color: var(--ai-claude); }
.ai-card.t-gemini  { border-top-color: var(--ai-gemini); }
.ai-card.t-index   { border-top-color: var(--ai-index); }
.ai-card.t-random  { border-top-color: var(--ai-random); }

.t-chatgpt .ai-head { background: var(--ai-chatgpt); }
.t-claude  .ai-head { background: var(--ai-claude); }
.t-gemini  .ai-head { background: var(--ai-gemini); }
.t-index   .ai-head { background: var(--ai-index); }
.t-random  .ai-head { background: var(--ai-random); }

/* 본문에 색을 아주 옅게 깔아 카드 전체가 그 주체의 것으로 읽히게 한다 */
.t-chatgpt .ai-body { background: linear-gradient(var(--ai-chatgpt-bg), transparent 120px); }
.t-claude  .ai-body { background: linear-gradient(var(--ai-claude-bg),  transparent 120px); }
.t-gemini  .ai-body { background: linear-gradient(var(--ai-gemini-bg),  transparent 120px); }
.t-index   .ai-body { background: linear-gradient(var(--ai-index-bg),   transparent 120px); }
.t-random  .ai-body { background: linear-gradient(var(--ai-random-bg),  transparent 120px); }

/* 리더보드 행 좌측 색 막대 */
.lb-mark { display: inline-block; width: 5px; height: 22px; border-radius: 3px; vertical-align: -5px; margin-right: 9px; }
.m-chatgpt { background: var(--ai-chatgpt); } .m-claude { background: var(--ai-claude); }
.m-gemini  { background: var(--ai-gemini); }  .m-index  { background: var(--ai-index); }
.m-random  { background: var(--ai-random); }

/* ── 버튼 ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: var(--radius-sm);
  font-family: var(--sans); font-size: 16.5px; font-weight: 700;
  border: 1px solid transparent; cursor: pointer; transition: .15s;
  background: var(--accent); color: #fff;
}
.btn:hover { background: #9C4526; text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.wide { width: 100%; }
.btn.sm { padding: 9px 16px; font-size: 15px; }

/* ── 잠금 / 봉인 ────────────────────────────────────── */
.locked-nums { display: flex; gap: 8px; flex-wrap: wrap; }
.locked-ball {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface-2); border: 1px dashed var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--dim); font-size: 18px;
}
.seal {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: var(--dim);
  background: var(--surface-2); border-radius: 6px;
  padding: 3px 8px; word-break: break-all;
}

/* ── 알림 박스 ──────────────────────────────────────── */
.note {
  background: var(--accent-bg); border: 1px solid var(--accent-soft);
  border-radius: var(--radius-sm); padding: 15px 17px;
  font-size: 15.5px; color: var(--ink-2); line-height: 1.7;
}
.note strong { color: var(--accent); }
.note.plain { background: var(--surface-2); border-color: var(--line); }
.note.plain strong { color: var(--ink); }

/* ── 표 ─────────────────────────────────────────────── */
table.tb { width: 100%; border-collapse: collapse; font-size: 16px; }
table.tb th {
  text-align: left; font-size: 14px; font-weight: 700; color: var(--mut);
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  letter-spacing: .01em;
}
table.tb td { padding: 13px 12px; border-bottom: 1px solid var(--line-soft); }
table.tb tr:last-child td { border-bottom: 0; }
.num { font-variant-numeric: tabular-nums; text-align: right; }

/* ── 카운트다운 ─────────────────────────────────────── */
.countdown {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--serif); font-size: 32px; font-weight: 600;
  color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.countdown small { font-family: var(--sans); font-size: 15px; color: var(--mut); font-weight: 600; }

/* ── 히트맵 ─────────────────────────────────────────── */
.heat { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
@media (max-width: 560px) { .heat { grid-template-columns: repeat(5, 1fr); } }
.heat-cell {
  aspect-ratio: 1; border-radius: 9px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  border: 1px solid var(--line-soft); cursor: default;
}
.heat-cell b { font-size: 16px; font-variant-numeric: tabular-nums; }
.heat-cell span { font-size: 11.5px; opacity: .75; }

/* ── 기타 ───────────────────────────────────────────── */
.muted { color: var(--mut); }
.small { font-size: 14.5px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.between { justify-content: space-between; }
.divider { height: 1px; background: var(--line-soft); margin: 22px 0; }
.pill {
  display: inline-block; padding: 4px 11px; border-radius: 100px;
  font-size: 13.5px; font-weight: 700; background: var(--surface-2); color: var(--ink-2);
}
.pill.on { background: var(--accent-bg); color: var(--accent); }

.foot {
  margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--line-soft);
  font-size: 14px; color: var(--mut); line-height: 1.9;
}
.foot a { color: var(--mut); text-decoration: underline; }