/* 메인(허브) 화면: 게임 카드 목록. 기본 색과 머리글은 shared/style.css 를 쓴다 */
#app { max-width: 640px; }
main { padding-top: clamp(0px, 5vh, 48px); }   /* 키가 큰 화면에서 메뉴가 맨 위에 붙지 않게 */
.lead { margin: 4px 2px 14px; color: var(--muted); font-size: 15px; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(16px, 2.6vh, 26px); }

.game {
  display: flex; align-items: center; gap: 14px;
  min-height: clamp(88px, 12vh, 116px); padding: 14px 16px;
  background: var(--panel); color: var(--text);
  border-radius: 16px; text-decoration: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.08s ease, background 0.12s ease;
}
.game:hover { background: #453a60; }
.game:active { transform: scale(0.98); background: var(--accent); }
.game:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

.game .ico { font-size: 40px; line-height: 1; flex: none; width: 52px; text-align: center; }
.game .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.game .txt strong { font-size: 18px; }
.game .txt small { font-size: 14px; color: var(--muted); line-height: 1.4; }
.game .stat { font-style: normal; font-size: 13px; color: var(--cell-sel); }
.game .go { font-size: 28px; color: var(--muted); flex: none; }

/* 카테고리 책갈피(폴더 탭): 탭과 아래 게임 목록이 같은 면(색)과 테두리로 이어져, 게임이 이 카테고리에 속함을 차분하게 보여 준다.
   튀는 포인트 색 없이 화면 바탕보다 살짝 밝은 면과 은은한 선만 쓴다. 카테고리가 하나면 탭 하나, 둘 이상이면 탭이 나란히 서고 지금 카테고리의 탭만 목록과 이어진다 */
.catpanel { --surf: #332c44; --line: #4d4466; margin: clamp(12px, 2.5vh, 28px) 0 0; }
.cats[hidden] { display: none; }
.cats { display: flex; align-items: flex-end; gap: 6px; margin: 0; padding: 0 0 0 18px; position: relative; z-index: 1; }
.cats .cat { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px 9px; box-sizing: border-box;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; margin-bottom: -1px;   /* 선이 얇으니 겹침도 1px */
  font-size: 17px; font-weight: 700; line-height: 1.2; text-decoration: none; color: var(--text); }
.cats .cico { font-size: 20px; line-height: 1; }
.cats .cat[aria-current="page"], .cats.head .cat { background: var(--surf); cursor: default; }   /* 지금 카테고리: 목록과 같은 면이라 한 덩어리로 이어진다 */
.cats.tabs a:not([aria-current]) { color: var(--muted); background: transparent; cursor: pointer; border-bottom: 1px solid var(--line); margin-bottom: 0; }
.cats.tabs a:not([aria-current]):hover, .cats.tabs a:not([aria-current]):focus-visible { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.cats.tabs a:focus-visible { outline: 3px solid #ffffff; outline-offset: -3px; }
.catbody { padding: 20px 14px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surf); }
.catbody .lead { margin: 0 4px 16px; font-size: 15px; }
/* 좁은 폰 화면: 폴더는 여유 있게 두되 좌우 여백과 아이콘 칸을 줄여, 카드 설명이 두 줄로 꺾이지 않게 글자 폭을 지킨다 */
@media (max-width: 480px) {
  #app { padding-left: 8px; padding-right: 8px; }
  .cats { padding-left: 12px; }
  .catbody { padding: 18px 10px 20px; }
  .game { gap: 10px; padding: 14px 12px; }
  .game .ico { width: 44px; font-size: 36px; }
}

/* 메달: 난이도마다 하나. 없으면 – 로 흐리게 */
.medals { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.medal { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.22); font-size: 12px; color: var(--muted); }
.medal b { font-size: 16px; line-height: 1; font-weight: 400; }
.medal.m0 { opacity: 0.6; }
.medal.m3 { box-shadow: inset 0 0 0 1px #ffd84d; color: var(--text); }
.medal.m2 { box-shadow: inset 0 0 0 1px #cfd6e4; color: var(--text); }
.medal.m1 { box-shadow: inset 0 0 0 1px #d49a6a; color: var(--text); }

.legend { margin: 16px 2px 0; font-size: 13px; color: var(--muted); }
.legend summary { cursor: pointer; padding: 10px 0; min-height: 44px; }
.legend p { margin: 0 0 10px; line-height: 1.6; }
.legend strong { color: var(--text); }

/* 내 기록 백업·복원 */
.backup .intro { margin: 0 0 12px; line-height: 1.6; }
.backup .brow { display: flex; gap: 8px; margin: 0 0 10px; }
.backup .chip { background: var(--panel); }
.backup textarea {
  display: block; width: 100%; margin: 0 0 10px; padding: 10px; border: 2px solid var(--accent); border-radius: 8px;
  background: var(--cell); color: #2b2438; font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace; resize: vertical;
  -webkit-user-select: text; user-select: text;   /* 사이트 전체의 선택 금지를 이 칸에서는 푼다 */
}
.backup [hidden] { display: none; }
.backup hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); margin: 14px 0; }
.backup .msg { min-height: 1.4em; margin: 0; color: var(--cell-sel); }

/* 어린이 화면 */
body.kids .lead { color: #6a5430; }
body.kids .catpanel { --surf: #f8ecd0; --line: #dcc08f; }
body.kids .cats .cat { color: #7a3a12; }
body.kids .cats.tabs a:not([aria-current]) { color: #8a6a3a; }
body.kids .cats.tabs a:not([aria-current]):hover, body.kids .cats.tabs a:not([aria-current]):focus-visible { background: rgba(122, 58, 18, 0.08); color: #7a3a12; }
body.kids .game { background: #fff8e8; color: #3d3560; border-radius: 24px; box-shadow: 0 3px 0 rgba(61, 53, 96, 0.16); }
body.kids .game:hover { background: #fff1d2; }
body.kids .game:active { background: #ffd9a0; }
body.kids .game .txt small { color: #6a5430; }
body.kids .game .stat { color: #9a3b00; }
body.kids .game .go { color: #9a3b00; }
body.kids .medal { background: rgba(61, 53, 96, 0.1); color: #6a5430; }
body.kids .medal.m3, body.kids .medal.m2, body.kids .medal.m1 { color: #3d3560; }
body.kids .legend, body.kids .legend strong { color: #6a5430; }
body.kids .backup .chip { background: #ffd9a0; color: #3d3560; }
body.kids .backup textarea { background: #fff; border-color: #e8631c; }
body.kids .backup .msg { color: #9a3b00; }
body.kids .backup hr { border-top-color: rgba(61, 53, 96, 0.2); }

@media (prefers-reduced-motion: reduce) { .game { transition: none; } }