/* 놀이 종류 — 배지 · 화면 맨 위 띠 · 홈 카드 (js/v2.js KINDS)
   색으로 구분: 역할놀이·탐험 = 살구 / 추론 = 버터 / 맞히기 = 라일락 / 대화·기사 = 하늘 / 토론 = 세이지 */
:root {
  --k-peach: #f5e3d3; --k-peach-ink: #7a4b2c; --k-peach-line: #ebcfb7;
  --k-butter: #f6edcf; --k-butter-ink: #6f5a1d; --k-butter-line: #e8dbab;
  --k-lilac: #ece5f3; --k-lilac-ink: #5d4775; --k-lilac-line: #dccfe8;
  --k-sky: #e1edf2; --k-sky-ink: #34586a; --k-sky-line: #c9dde6;
  --k-sage: #e3ecdb; --k-sage-ink: #3c5c38; --k-sage-line: #cddcc2;
}
.kind-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; border-radius: 99px; font: 800 13px/1.4 var(--v2-font); letter-spacing: -.02em; white-space: nowrap; vertical-align: middle; }
.kind-badge i { font-style: normal; font-size: 15px; }
.kind-badge em { font-style: normal; font-weight: 700; opacity: .75; padding-left: 6px; margin-left: 2px; border-left: 1px solid currentColor; }
.kind-badge.peach, .kind-bar.peach, .kind-card.peach { background: var(--k-peach); color: var(--k-peach-ink); }
.kind-badge.butter, .kind-bar.butter, .kind-card.butter { background: var(--k-butter); color: var(--k-butter-ink); }
.kind-badge.lilac, .kind-bar.lilac, .kind-card.lilac { background: var(--k-lilac); color: var(--k-lilac-ink); }
.kind-badge.sky, .kind-bar.sky, .kind-card.sky { background: var(--k-sky); color: var(--k-sky-ink); }
.kind-badge.sage, .kind-bar.sage, .kind-card.sage { background: var(--k-sage); color: var(--k-sage-ink); }

/* 각 놀이 화면 맨 위 띠 */
.kind-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 12px 18px; margin: -6px 0 22px; border-radius: 18px; font-family: var(--v2-font); }
.kind-bar.peach { border: 1px solid var(--k-peach-line); } .kind-bar.butter { border: 1px solid var(--k-butter-line); } .kind-bar.lilac { border: 1px solid var(--k-lilac-line); } .kind-bar.sky { border: 1px solid var(--k-sky-line); } .kind-bar.sage { border: 1px solid var(--k-sage-line); }
.kind-bar-ic { font-size: 24px; line-height: 1; }
.kind-bar b { font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.kind-bar-verb { padding: 2px 10px; border-radius: 99px; background: rgba(255,255,255,.7); font-size: 13px; font-weight: 800; }
.kind-bar-desc { font-size: 14px; font-weight: 600; opacity: .85; }
.play-screen .kind-bar { margin-bottom: 14px; }

/* 홈 — 어떤 놀이를 할까? */
.v2 .kind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.v2 .kind-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 196px; padding: 18px 18px 20px; border-radius: 24px; border: 1px solid transparent; text-align: left; font: inherit; cursor: pointer; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.v2 .kind-card.peach { border-color: var(--k-peach-line); } .v2 .kind-card.butter { border-color: var(--k-butter-line); } .v2 .kind-card.lilac { border-color: var(--k-lilac-line); } .v2 .kind-card.sky { border-color: var(--k-sky-line); } .v2 .kind-card.sage { border-color: var(--k-sage-line); }
.v2 .kind-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(47,66,49,.08); }
.v2 .kind-card .kind-badge { background: rgba(255,255,255,.8); font-size: 14px; }
.v2 .kind-card img { position: absolute; right: 10px; top: 46px; width: 78px; height: 78px; object-fit: contain; }
.v2 .kind-desc { margin-top: 58px; padding-right: 70px; font-size: 16px; font-weight: 800; line-height: 1.5; letter-spacing: -.03em; color: inherit; }
.v2 .kind-eg { font-size: 13px; font-weight: 600; opacity: .8; line-height: 1.6; }
.v2 .kind-locked { margin-top: 12px; font-size: 13px; color: var(--v2-muted); }
.v2 .big-door b .kind-badge { display: flex; width: max-content; margin-bottom: 6px; }

@media (max-width: 680px) {
  .kind-bar { padding: 10px 14px; margin-bottom: 16px; }
  .kind-bar-desc { flex-basis: 100%; font-size: 13px; }
  .v2 .kind-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .v2 .kind-card { min-height: 0; padding: 14px 12px 16px; border-radius: 20px; }
  .v2 .kind-card .kind-badge { font-size: 12.5px; }
  .v2 .kind-card .kind-badge em { display: none; }
  .v2 .kind-card img { position: static; width: 56px; height: 56px; margin-top: 2px; }
  .v2 .kind-desc { margin-top: 0; padding-right: 0; font-size: 14px; }
  .v2 .kind-eg { font-size: 12px; }
}
@media (max-width: 380px) { .v2 .kind-grid { grid-template-columns: 1fr; } }
.v2 .big-door > span { min-width: 0; }
.v2 .big-door b .kind-badge { width: auto; max-width: 100%; white-space: normal; }