/* =====================================================================
   choseong-game/app.css — 초성 게임 전용 스타일 (접두사 cg-)
   색은 base.css 변수만 · 글자 굵기는 400/700만(jinny-fonts 2026-10-03) · 둥근 배지 없음
   연하늘(--sky)은 학습자가 입력하는 칸(.cg-box)에만 쓴다(000 화면 기본 규칙).
   ===================================================================== */
.cg button, .cg input { font-family: inherit; }
.cg { max-width: 640px; margin: 0 auto; }
.cg-h { margin: 0 0 var(--s-4); text-align: center; }
.cg-note { margin: var(--s-5) 0 0; color: var(--muted); font-size: 14px; text-align: center; line-height: 1.6; }

/* --- 주제 카드 --- */
.cg-cats { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.cg-cat {
  min-height: 52px; padding: 4px 6px; border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font-size: 20px; font-weight: 700; cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.cg-cat:hover, .cg-cat:focus-visible { border-color: var(--blue); transform: translateY(-2px); }
.cg-cat--all { grid-column: 1 / -1; background: var(--blue); border-color: var(--blue); color: #fff; }
.cg-cat--all:hover, .cg-cat--all:focus-visible { background: var(--blue-dark); border-color: var(--blue-dark); }

/* --- 방식·시간 --- */
.cg-back { margin: 0 0 var(--s-3); padding: 6px 0; border: 0; background: none; color: var(--blue-dark); font-size: 16px; font-weight: 700; cursor: pointer; }
.cg-group { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cg-label { flex: 0 0 4em; margin: 0; font-size: 16px; font-weight: 700; color: var(--ink-2); }
.cg-opts { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cg-opt {
  min-height: 48px; padding: 2px 14px; border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--paper); color: var(--ink-2); font-size: 18px; font-weight: 700; cursor: pointer;
}
.cg-opt[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
@media (max-width: 380px) { .cg-opt { padding: 2px 12px; } }
.cg-start { min-height: 52px; font-size: clamp(17px, 5vw, 20px); padding: 0 8px; }
.cg-actions--setup { margin-top: var(--s-4); }

/* --- 문제 --- */
.cg-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-2); }
.cg-topl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-width: 0; }
.cg-catname { font-size: 22px; font-weight: 700; color: var(--blue-dark); }
.cg-topr { display: flex; align-items: baseline; gap: var(--s-3); color: var(--ink-2); font-weight: 700; flex-shrink: 0; }
.cg-q { font-size: 18px; }
.cg-time { font-size: 28px; color: var(--blue-dark); min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.cg-bar { height: 24px; border-radius: 12px; background: var(--line); overflow: hidden; margin-bottom: var(--s-3); }
#cgBar { height: 100%; width: 100%; background: var(--blue); }

.cg-boardwrap { position: relative; margin: var(--s-5) 0 var(--s-4); }
.cg-board { --w: 56px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 12px 20px; }
.cg-word { display: flex; gap: 8px; }
.cg-col { display: flex; flex-direction: column; align-items: center; gap: 8px; width: var(--w); flex: 0 0 var(--w); }
.cg-cho, .cg-box {
  width: 100%; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); font-weight: 700; line-height: 1; box-sizing: border-box;
}
.cg-cho { aspect-ratio: 1 / 1.1; border: 2px solid var(--blue); background: var(--paper); color: var(--blue-dark); font-size: calc(var(--w) * .62); }
.cg-box { aspect-ratio: 1 / 1; border: 2px solid var(--line); background: var(--sky); color: var(--blue-dark); font-size: calc(var(--w) * .56); }
.cg-box--active { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46, 125, 224, .25); }
.cg-box--ok { border-color: var(--ok); color: var(--ok); }
.cg-box--show { border-color: var(--blue); }
/* 정답 보기 방식: 입력 칸이 필요 없으므로 숨기되 자리는 유지(정답 공개 때 화면이 밀리지 않게) */
.cg--auto .cg-box { visibility: hidden; }
.cg--auto.is-revealed .cg-box { visibility: visible; background: var(--sky); }

/* 글자 칸 위에 투명하게 덮인 실제 입력창 — 아무 데나 눌러도 키보드가 열린다 */
.cg-input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; margin: 0;
  background: transparent; font-size: 16px; cursor: text;
}
.cg-shake { animation: cg-shake .35s; }
@keyframes cg-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .cg-shake { animation: none; } .cg-cat:hover { transform: none; } }

.cg-hintrow { text-align: center; }
.cg-hintbtn {
  min-height: 44px; padding: 6px 22px; border: 2px solid var(--blue); border-radius: var(--radius);
  background: var(--paper); color: var(--blue-dark); font-size: 17px; font-weight: 700; cursor: pointer;
}
.cg-hintbtn[aria-expanded="true"] { background: var(--blue); color: #fff; }
.cg-hint { margin: var(--s-3) auto 0; max-width: 560px; padding: 2px 0 2px var(--s-3); border-left: 6px solid var(--blue); background: none; text-align: left; font-size: 20px; line-height: 1.5; color: var(--ink); }
.cg-hint::before { content: ""; display: inline-block; width: 28px; height: 20px; margin-right: 8px; vertical-align: -3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 24'%3E%3Cg fill='none' stroke='%23222' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='2' y='6' width='17' height='15' rx='5'/%3E%3Crect x='13' y='7.5' width='19' height='5.5' rx='2.75'/%3E%3Cpath d='M7 13.5h10M7 17.5h10' fill='none' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.cg-hint[hidden] { display: none; }
.cg-msg { min-height: 1.9em; margin: var(--s-3) 0 var(--s-2); text-align: center; font-size: 18px; color: var(--ink-2); }
.cg-msg--ok { color: var(--ok); font-weight: 700; }
.cg-msg--no { color: var(--no); font-weight: 700; }
.cg-actions { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: var(--s-2); }
.cg-actions .btn { flex: 0 1 150px; min-width: 0; min-height: 52px; font-size: clamp(17px, 5vw, 20px); padding: 0 8px; white-space: nowrap; }
.cg-actions--col { flex-direction: column; align-items: stretch; }
.cg-actions--col .btn { flex: 0 0 auto; }
.cg-homebtn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 56px; padding: 0; border: 0; border-radius: 12px; background: var(--sky); cursor: pointer; }
.cg-homebtn:hover, .cg-homebtn:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); }
.cg-hico { display: block; width: 40px; height: 40px; color: var(--ink); }

/* --- 결과 --- */
.cg-score { margin: 0 0 var(--s-4); text-align: center; font-size: 26px; font-weight: 700; color: var(--blue); }

@media (min-width: 560px) {
  .cg-actions--col { flex-direction: row; justify-content: center; flex-wrap: wrap; }
  .cg-actions--col .btn { flex: 0 1 auto; min-width: 160px; }
}

.cg-result { padding: var(--s-5) 0 var(--s-3); }
.cg-rcat { margin: 0 0 var(--s-5); text-align: center; font-size: 40px; line-height: 1.2; font-weight: 700; color: var(--ink); }


/* 설명 글: 줄바꿈과 ✔ 목록을 그대로 보여 준다 */
.app-desc p[data-i18n^="desc.p"] { white-space: pre-line; text-align: left; }