:root {
  --bg: #fbf6f1;
  --paper: #ffffff;
  --ink: #3b3150;
  --ink-2: #6b6180;
  --ink-3: #9a90ad;
  --line: #ece4f3;
  --lav: #7a67e8;
  --lav-soft: #efebfd;
  --lav-deep: #5a48c8;
  --peach: #e8794a;
  --peach-soft: #fdeee6;
  --mint: #2fa88f;
  --mint-soft: #e2f5f0;
  --butter: #f4c34f;
  --butter-soft: #fdf4dc;
  --rose: #e2577a;
  --rose-soft: #fce8ee;
  --shadow: 0 6px 20px rgba(90, 72, 200, 0.10);
  --r: 18px;
  --font: 'Gowun Dodum', 'Noto Sans KR', system-ui, sans-serif;
  --display: 'Jua', 'Gowun Dodum', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  background-image: radial-gradient(circle at 12px 12px, #efe6f7 1.5px, transparent 1.6px);
  background-size: 28px 28px;
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, .display { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: 0.01em; }
.num { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
svg.cat { display: block; width: 100%; height: 100%; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 16px; }

/* 상단 바 */
.topbar {
  display: flex; align-items: center; gap: 12px;
  background: var(--paper); border-radius: var(--r); padding: 10px 16px;
  box-shadow: var(--shadow); margin-bottom: 16px;
}
.topbar .logo { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 22px; color: var(--lav-deep); }
.topbar .logo svg { width: 38px; height: 38px; }
.topbar .logo span { white-space: nowrap; }
.topbar .who { margin-left: auto; display: flex; gap: 8px; align-items: center; color: var(--ink-2); font-size: 15px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 999px; background: var(--lav-soft); color: var(--lav-deep);
  font-size: 14px; white-space: nowrap;
}
.chip.mint { background: var(--mint-soft); color: #1d7a67; }
.chip.peach { background: var(--peach-soft); color: #b3532a; }
.chip.butter { background: var(--butter-soft); color: #8a6512; }
.chip.rose { background: var(--rose-soft); color: #b0304f; }
.chip.gray { background: #f1eef4; color: var(--ink-2); }

/* 버튼 */
.btn {
  border: none; border-radius: 14px; padding: 12px 20px; min-height: 48px;
  background: var(--lav); color: #fff; font-family: var(--display); font-size: 18px;
  box-shadow: 0 4px 0 var(--lav-deep); transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--lav-deep); }
.btn:disabled { background: #cfc8e6; box-shadow: 0 4px 0 #b3abd3; cursor: not-allowed; }
.btn.ghost { background: var(--paper); color: var(--lav-deep); box-shadow: 0 4px 0 var(--line); border: 2px solid var(--line); }
.btn.peach { background: var(--peach); box-shadow: 0 4px 0 #c45a2e; }
.btn.mint { background: var(--mint); box-shadow: 0 4px 0 #1f7f6b; }
.btn.butter { background: var(--butter); color: #5c4208; box-shadow: 0 4px 0 #c99a2a; }
.btn.small { min-height: 38px; padding: 6px 14px; font-size: 15px; border-radius: 12px; }

.panel { background: var(--paper); border-radius: var(--r); padding: 18px; box-shadow: var(--shadow); }
.panel h2 { font-size: 22px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }

/* ───── 입장 ───── */
.join { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.join-card { width: min(560px, 100%); background: var(--paper); border-radius: 28px; padding: 28px; box-shadow: var(--shadow); text-align: center; }
.join-card .mascot { width: 130px; height: 130px; margin: -80px auto 4px; background: var(--paper); border-radius: 50%; padding: 8px; box-shadow: var(--shadow); }
.join-card h1 { font-size: 32px; color: var(--lav-deep); }
.join-card .sub { color: var(--ink-2); margin: 6px 0 20px; }
.field-label { display: block; text-align: left; font-family: var(--display); font-size: 18px; margin: 14px 0 8px; }
.group-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.group-grid button {
  width: 56px; aspect-ratio: 1; border-radius: 16px; border: 2px solid var(--line); background: var(--paper);
  font-family: var(--display); font-size: 24px; color: var(--ink-2);
}
.group-grid button.on { background: var(--lav); border-color: var(--lav); color: #fff; }
.group-grid button.guest { width: auto; padding: 0 18px; aspect-ratio: auto; height: 56px; font-size: 20px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.num-input {
  width: 100%; border: 2px solid var(--line); border-radius: 14px; padding: 12px 16px;
  font-size: 24px; text-align: center; font-family: var(--display); background: #fdfcff;
}
.num-input:focus { outline: none; border-color: var(--lav); }
.observer-note { margin-top: 14px; padding: 10px 14px; background: var(--butter-soft); border-radius: 12px; color: #7a5a10; font-size: 15px; }
.err { color: var(--rose); min-height: 24px; margin: 10px 0 4px; font-size: 15px; }

/* ───── 홈 ───── */
.home-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .home-grid { grid-template-columns: 360px 1fr; align-items: start; } }

.notice { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-radius: 14px; background: var(--lav-soft); color: var(--lav-deep); margin-bottom: 14px; }
.notice.wait { background: var(--butter-soft); color: #7a5a10; }
.notice.closed { background: var(--rose-soft); color: #9c2a47; }

.friends { display: flex; flex-wrap: wrap; gap: 8px; }
.friend { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 10px; min-width: 64px; border-radius: 14px; background: #faf8fd; border: 2px solid var(--line); font-size: 13px; }
.friend b { font-family: var(--display); font-size: 18px; font-weight: 400; }
.friend.me { border-color: var(--lav); }
.friend .stars { color: var(--butter); letter-spacing: -2px; }

/* 도감 */
.dex { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dex-slot {
  aspect-ratio: 1; border-radius: 14px; border: 2px dashed #ddd3ea; background: #faf8fd;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 6px; font-size: 12px; color: var(--ink-3); position: relative;
}
.dex-slot .n { position: absolute; top: 4px; left: 8px; font-family: var(--display); font-size: 14px; }
.dex-slot .q { font-family: var(--display); font-size: 26px; color: #d8cfe6; }
.dex-slot.done { border: 2px solid var(--lav); background: linear-gradient(160deg, #f4f0ff, #fff3ec); color: var(--ink); }
.dex-slot.done .paw { font-size: 24px; }
.dex-slot.soon { opacity: .55; }
.tier-row { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tier { padding: 4px 10px; border-radius: 999px; font-size: 13px; background: #f1eef4; color: var(--ink-3); }
.tier.on.bronze { background: #f6e0cf; color: #8a4b1f; }
.tier.on.silver { background: #e6e9ef; color: #4b5563; }
.tier.on.gold { background: #fbeab4; color: #7a5a10; }
.progress { height: 12px; background: #f1eef4; border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--lav), var(--peach)); border-radius: 999px; transition: width .4s; }

/* 포카 카드 목록 */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.pcard {
  position: relative; border: none; text-align: left; padding: 0; border-radius: 18px; overflow: hidden;
  background: var(--paper); box-shadow: 0 4px 14px rgba(59, 49, 80, 0.10); aspect-ratio: 5 / 7;
  display: flex; flex-direction: column; transition: transform .15s;
}
.pcard:not(.off):active { transform: scale(.97); }
.pcard .art { flex: 1; display: grid; place-items: center; font-size: 56px; background: linear-gradient(160deg, #efe9ff, #ffe9df); }
.pcard.lv2 .art { background: linear-gradient(160deg, #e3f6f1, #eef0ff); }
.pcard.lv3 .art { background: linear-gradient(160deg, #fff1cf, #ffe3ea); }
.pcard.special .art { background: linear-gradient(160deg, #fff6c9, #e9e3ff 60%, #d9f5ee); }
.pcard .info { padding: 10px 12px 12px; }
.pcard .t { font-family: var(--display); font-size: 17px; line-height: 1.3; }
.pcard .lv { color: var(--butter); font-size: 14px; letter-spacing: 1px; }
.pcard .badge { position: absolute; top: 10px; right: 10px; }
.pcard.off { cursor: default; }
.pcard.off:not(.dim) { opacity: .75; }
.pcard.dim > :not(.veil):not(.badge) { filter: grayscale(.9); opacity: .45; }
.pcard .veil { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 10px; background: rgba(255,255,255,.35); }
.pcard .veil > span { background: rgba(255,255,255,.96); color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.4; padding: 8px 12px; border-radius: 12px; box-shadow: 0 2px 8px rgba(60,40,90,.18); }
.special-tag { position: absolute; top: 10px; left: 10px; }
/* 유형 표시 (A~I). 같은 유형은 같은 색 */
.type-tag {
  position: absolute; top: 10px; left: 10px; z-index: 1; padding: 3px 10px; border-radius: 8px;
  font-family: var(--display); font-size: 15px; color: #fff; background: var(--tc, #7a67e8);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}
.type-tag.inline { position: static; display: inline-block; font-size: 14px; padding: 1px 8px; margin-right: 4px; }
.tA { --tc: #7a67e8; } .tB { --tc: #e8794a; } .tC { --tc: #2fa88f; }
.tD { --tc: #d9689a; } .tE { --tc: #4a8fe8; } .tF { --tc: #c49a1c; }
.tG { --tc: #8a5cc4; } .tH { --tc: #3a9c5a; } .tI { --tc: #d0584e; } .tS { --tc: #e0a800; }

/* 유형 탭 */
.type-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; margin-bottom: 6px; }
.ttab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 60px; border-radius: 14px; border: 2px solid var(--tc); background: var(--paper); color: var(--tc);
  font-family: var(--display); cursor: pointer; transition: transform .12s;
}
.ttab b { font-size: 22px; line-height: 1; display: flex; }
.ttab .tmark { font-size: 12px; min-height: 16px; display: flex; align-items: center; color: var(--ink-2); }
.ttab .tmark.good { color: var(--mint-deep, #2fa88f); }
.ttab.on { background: var(--tc); color: #fff; box-shadow: 0 4px 12px rgba(59, 49, 80, 0.18); }
.ttab.on .tmark { color: #fff; }
.ttab:active { transform: scale(.95); }
.tab-legend { margin: 2px 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tab-note { margin: 0 0 10px; font-size: 15px; color: var(--ink-2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* 남은 시간 */
.timer { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 999px; background: var(--lav-soft); color: var(--lav-deep); font-size: 14px; white-space: nowrap; }
.timer b { font-size: 18px; }
.timer.warn { background: #ffe3e6; color: #c23a52; animation: blink 1s ease-in-out infinite; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 12px; }
.history { display: flex; flex-direction: column; gap: 8px; }
.history button { display: flex; align-items: center; gap: 8px; border: 2px solid var(--line); background: #fdfcff; border-radius: 12px; padding: 8px 12px; text-align: left; }

/* ───── 풀이 ───── */
.solve-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 900px) { .solve-grid { grid-template-columns: 1.05fr 1fr; align-items: start; } }
.story { font-size: 17px; }
.claim { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; }
.claim .cat { width: 72px; height: 72px; flex: none; }
.bubble { position: relative; background: var(--peach-soft); border-radius: 18px; padding: 12px 16px; font-size: 17px; }
.bubble.ai::before { content: ''; position: absolute; left: -8px; top: 18px; border: 8px solid transparent; border-right-color: var(--peach-soft); border-left: 0; }
.claim .who { font-family: var(--display); color: #b3532a; font-size: 15px; }

table.data { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 12px; font-size: 16px; }
table.data th, table.data td { padding: 8px 6px; text-align: center; border-bottom: 1px solid var(--line); }
table.data th { font-family: var(--display); font-weight: 400; color: var(--ink-2); text-align: left; white-space: nowrap; }
.dotplot { width: 100%; height: auto; margin-top: 8px; }
.dotplot text { font-family: var(--font); fill: var(--ink-2); font-size: 12px; }
.legend-note { font-size: 13px; color: var(--ink-3); margin-top: 2px; }

.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tabs button { border: none; background: #f4f1f8; color: var(--ink-2); border-radius: 12px; padding: 8px 14px; font-family: var(--display); font-size: 16px; min-height: 42px; }
.tabs button.on { background: var(--lav); color: #fff; }
.an-table { width: 100%; border-collapse: collapse; }
.an-table th { font-family: var(--display); font-weight: 400; color: var(--ink-2); padding: 4px; font-size: 15px; }
.an-table td { padding: 4px; }
.an-table td:first-child { font-family: var(--display); white-space: nowrap; }
.cell { position: relative; }
.cell input { width: 100%; min-width: 0; border: 2px solid var(--line); border-radius: 10px; padding: 8px 26px 8px 8px; text-align: center; font-size: 17px; background: #fdfcff; }
.cell input:focus { outline: none; border-color: var(--lav); }
.cell.ok input { border-color: var(--mint); background: var(--mint-soft); }
.cell.no input { border-color: var(--rose); background: var(--rose-soft); }
.cell .mark { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 14px; }
.keys { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; align-items: center; }
.key { border: 2px solid var(--line); background: var(--paper); border-radius: 10px; min-width: 44px; min-height: 40px; font-size: 18px; }

.dev-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.dev-table th { font-family: var(--display); font-weight: 400; color: var(--ink-2); font-size: 15px; padding: 4px; }
.dev-table td { padding: 3px; text-align: center; }

/* 채팅 */
.gauge { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.gauge .bar { flex: 1; height: 14px; border-radius: 999px; background: #f1eef4; overflow: hidden; }
.gauge .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--butter), var(--peach)); transition: width .6s; }
.gauge .lbl { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.chat { display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; padding: 4px 2px; }
.msg { display: flex; gap: 8px; align-items: flex-end; }
.msg .cat { width: 42px; height: 42px; flex: none; }
.msg.user { justify-content: flex-end; }
.msg.user .bubble { background: var(--lav); color: #fff; border-bottom-right-radius: 6px; }
.msg.ai .bubble { border-bottom-left-radius: 6px; }
.typing { color: var(--ink-3); font-size: 15px; }
.crit { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; }
.crit span { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: #f1eef4; color: var(--ink-3); }
.crit span.on { background: var(--mint-soft); color: #1d7a67; }
.compose textarea { width: 100%; min-height: 84px; border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; resize: vertical; font-size: 17px; background: #fdfcff; }
.compose textarea:focus { outline: none; border-color: var(--lav); }
.compose .row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.compose .row .grow { flex: 1; }
.hintbox { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.hintbox div { background: var(--butter-soft); border-radius: 12px; padding: 8px 12px; font-size: 15px; color: #6d5210; }

/* 계산기 */
.calc-fab { position: fixed; right: 18px; bottom: 18px; z-index: 20; border-radius: 999px; min-height: 58px; padding: 10px 20px; }
.calc {
  position: fixed; right: 18px; bottom: 90px; z-index: 21; width: 300px; background: var(--paper);
  border-radius: 22px; box-shadow: 0 12px 40px rgba(59, 49, 80, 0.25); padding: 14px;
}
.calc .screen { background: #f6f3fb; border-radius: 12px; padding: 8px 12px; text-align: right; min-height: 66px; margin-bottom: 10px; }
.calc .expr { font-size: 15px; color: var(--ink-2); min-height: 22px; word-break: break-all; }
.calc .res { font-size: 26px; font-family: var(--display); }
.calc .pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.calc .pad button { min-height: 48px; border: none; border-radius: 12px; background: #f4f1f8; font-size: 19px; }
.calc .pad button.op { background: var(--lav-soft); color: var(--lav-deep); }
.calc .pad button.eq { background: var(--lav); color: #fff; }
.calc .head { display: flex; justify-content: space-between; align-items: center; margin: -6px -6px 8px; padding: 6px; font-family: var(--display); cursor: grab; touch-action: none; user-select: none; border-radius: 14px; background: var(--lav-soft); }
.calc .head .small { font-family: var(--body, inherit); font-size: 12px; }
.calc.dragging { box-shadow: 0 18px 50px rgba(59, 49, 80, 0.35); }
.calc.dragging .head { cursor: grabbing; }

/* ───── 결과 포카 ───── */
.result-wrap { display: grid; place-items: center; gap: 16px; padding: 8px 0 60px; }
.photocard {
  width: min(420px, 100%); border-radius: 26px; padding: 14px; position: relative;
  background: linear-gradient(150deg, #cfc4ff, #ffd3c2 55%, #bfeee2);
  box-shadow: 0 16px 40px rgba(90, 72, 200, 0.22);
}
.photocard.partial { background: linear-gradient(150deg, #ffe7a8, #ffd3c2); }
.photocard.fail, .photocard.stopped { background: linear-gradient(150deg, #dcd6e8, #efe8f3); }
.photocard .inner { background: var(--paper); border-radius: 18px; padding: 18px; }
.photocard .top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink-2); }
.photocard .stamp { font-family: var(--display); font-size: 30px; text-align: center; margin: 8px 0 2px; }
.photocard .stamp.success { color: var(--lav-deep); }
.photocard .stamp.partial { color: #b3532a; }
.photocard .stamp.fail, .photocard .stamp.stopped { color: var(--ink-2); }
.photocard .hero { display: flex; align-items: center; justify-content: center; gap: 10px; }
.photocard .hero .cat { width: 96px; height: 96px; }
.photocard .hero .emoji { font-size: 54px; }
.photocard .title { text-align: center; font-family: var(--display); font-size: 20px; margin-top: 4px; }
.photocard .typebox { margin-top: 12px; padding: 10px 12px; background: var(--lav-soft); border-radius: 12px; font-size: 15px; }
.photocard .typebox b { font-family: var(--display); font-weight: 400; color: var(--lav-deep); }
.photocard .quote { margin-top: 10px; padding: 10px 12px; background: #faf8fd; border-left: 4px solid var(--peach); border-radius: 8px; font-size: 15px; }
.photocard .foot { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.result-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* 도감 캡처 화면 */
.dexshot { width: min(640px, 100%); background: var(--paper); border-radius: 26px; padding: 22px; box-shadow: var(--shadow); }
.dexshot .dex { gap: 10px; }
.dexshot .dex-slot { font-size: 13px; }

/* 토스트 */
.toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; z-index: 50; font-size: 15px; box-shadow: var(--shadow); max-width: 90vw; text-align: center; }

/* 확인 창 */
.modal-back { position: fixed; inset: 0; z-index: 60; background: rgba(59, 49, 80, 0.35); display: grid; place-items: center; padding: 16px; }
.modal { width: min(420px, 100%); background: var(--paper); border-radius: 24px; padding: 20px 22px; text-align: center; box-shadow: 0 16px 40px rgba(59, 49, 80, 0.3); }
.modal-cat { width: 76px; height: 76px; margin: -60px auto 4px; background: var(--paper); border-radius: 50%; padding: 6px; box-shadow: var(--shadow); }
.modal p { font-size: 18px; margin: 8px 0 16px; }
.modal .num-input { margin-bottom: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }
.modal-actions .btn { flex: 1; }

@keyframes pop { 0% { transform: scale(.85); opacity: 0; } 70% { transform: scale(1.03); opacity: 1; } 100% { transform: scale(1); } }
.pop { animation: pop .45s ease-out; }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.wiggle { animation: wiggle .5s ease-in-out 2; }

/* ───── 픽셀 아이콘 ───── */
svg.px { display: block; width: 100%; height: 100%; }
.ico { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; flex: none; }
.ico.sm { width: 15px; height: 15px; vertical-align: -2px; }
.ico.lg { width: 28px; height: 28px; vertical-align: -7px; }
.ico.xl { width: 38px; height: 38px; vertical-align: -9px; }
.pcard .art .art-px { width: 58%; height: auto; }
.cell .mark { width: 16px; height: 16px; }
.dex-slot .paw .ico.lg { width: 30px; height: 30px; }
.friend .stars { display: flex; gap: 1px; min-height: 15px; align-items: center; }
.observer-note .ico { vertical-align: -4px; }
.photocard .hero .hero-icon { width: 64px; height: 64px; }
.photocard .hero .hero-cat { width: 96px; height: 96px; }

/* ───── 채팅 상태 알림과 애니메이션 ───── */
.msg .avatar { width: 42px; height: 42px; flex: none; }
.sysline {
  align-self: center; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-2); background: #f4f1f8; border-radius: 999px; padding: 3px 12px;
}
.sysline.good { background: var(--mint-soft); color: #1d7a67; }
.sysline.warn { background: var(--butter-soft); color: #7a5a10; }
.slide { opacity: 0; animation: slideIn .35s ease-out forwards; }
@keyframes slideIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bounce { animation: bounce .6s ease-in-out 3; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px); } 60% { transform: translateY(-4px); } }
.shake { animation: shake .45s ease-in-out 2; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px) rotate(-4deg); } 75% { transform: translateX(4px) rotate(4deg); } }
.nod { animation: nod .5s ease-in-out 2; transform-origin: 50% 90%; }
@keyframes nod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } }
.gauge .bar.blink { animation: blink .35s ease-in-out 3; }
@keyframes blink { 50% { box-shadow: 0 0 0 3px var(--peach-soft); } }
.dots { display: inline-flex; gap: 5px; align-items: center; min-height: 24px; }
.dots i { width: 7px; height: 7px; background: #c9a48c; animation: dot 1s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 9px; animation-name: fall; animation-timing-function: linear; animation-fill-mode: forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) {
  .bounce, .shake, .nod, .slide, .blink, .pop, .dots i, .confetti i, .timer.warn { animation: none !important; opacity: 1 !important; }
}

/* ───── 해설 ───── */
#solution { width: min(640px, 100%); justify-self: center; }
.solution { width: 100%; }
.sol-table td, .sol-table th { font-size: 16px; }
.sol-block { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #faf8fd; }
.sol-block.model { background: var(--lav-soft); }
.sol-block p { margin: 6px 0 0; }
.sol-head { display: flex; align-items: center; gap: 8px; }
.sol-head .cat, .sol-head .ico { width: 30px; height: 30px; }
.crit span.miss { background: var(--rose-soft); color: #b0304f; }

/* 분석 노트 강조 안내 */
.pick-note {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 10px 14px;
  background: var(--butter-soft); border: 2px dashed var(--butter); border-radius: 14px;
  color: #6d5210; font-size: 16px;
}
.pick-note b { font-family: var(--display); font-weight: 400; font-size: 17px; color: #8a4b1f; }
.pick-note u { text-decoration-color: var(--peach); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* 실패 누적으로 열린 도감 칸 (교사 화면 전용, 투사 모드에서는 숨김) */
.dexbar span.fails { outline: 2px dashed var(--peach); outline-offset: 1px; }
.projector .dexbar span.fails { outline: none; }

/* 걸러 낸 글 */
.bubble.blocked { opacity: .6; font-style: italic; }
.sysline.privacy { background: #eef6ff; color: #3a6fb0; }
.chip.flag { background: #ffe3e6; color: #c23a52; }
.flaglist { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }

/* 잠금 화면 (욕설로 도전 종료 시 3분) */
.lockscreen{max-width:440px;margin:60px auto;text-align:center;background:var(--card, #fff);border:3px solid #e5484d;border-radius:22px;padding:28px 22px}
.lockscreen .lock-cat{width:110px;height:110px;margin:0 auto 8px;filter:grayscale(.4)}
.lockscreen h2{color:#c62f34;margin:6px 0 10px}
.lockscreen .lock-time{font-size:56px;font-weight:800;letter-spacing:2px;margin:14px 0;font-variant-numeric:tabular-nums;color:#c62f34}

/* 게임 방법 안내 */
.modal.guide { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; text-align: left; }
.modal.guide .modal-cat { width: 60px; height: 60px; margin: 0 auto 2px; padding: 0; box-shadow: none; }
.modal.guide h2 { justify-content: center; font-size: 24px; color: var(--lav-deep); text-align: center; }
.modal.guide > p { text-align: center; }
.guide-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.guide-list li { display: flex; gap: 12px; align-items: flex-start; background: var(--lav-soft); border-radius: 14px; padding: 10px 12px; font-size: 15px; line-height: 1.5; }
.guide-list li .gt { display: block; font-family: var(--display); font-size: 17px; font-weight: 400; color: var(--lav-deep); }
.guide-list li b { color: var(--ink); }

/* ── 보상: 황금 발자국(도전 카드) · 골든 포카(골드) ── */
.chip.gold-chip { background: linear-gradient(135deg, #ffe89a, #f4c34f 55%, #ffe89a); color: #5c4208; }
/* 도전 카드를 성공한 도감 칸: 금색 발자국 */
.dex-slot.done.gold { border-color: #e0b000; background: linear-gradient(160deg, #fff8d9, #ffe89a); }
/* 등급별 도감 테두리 (브론즈는 골드와 구분되게 붉은 구릿빛) */
.dex-panel.tier-bronze, .dexshot.tier-bronze { box-shadow: 0 0 0 4px #b0643a, var(--shadow); }
.dex-panel.tier-silver, .dexshot.tier-silver { box-shadow: 0 0 0 4px #a3adba, var(--shadow); }
.dex-panel.tier-gold, .dexshot.tier-gold { box-shadow: 0 0 0 4px #e0b000, 0 0 18px 4px rgba(244, 195, 79, .45); }
/* 등급 포카 버튼 */
.tier-cards { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.tier-cards .tier-btn { flex: 1; min-width: 0; white-space: nowrap; padding: 6px 8px; font-size: 14px; }
.btn.tier-btn.bronze { background: linear-gradient(135deg, #f3d2bb, #c7835a); color: #4a230c; box-shadow: 0 4px 0 #8a4b1f; }
.btn.tier-btn.silver { background: linear-gradient(135deg, #f4f6f9, #b9c2cd); color: #374151; box-shadow: 0 4px 0 #7b8594; }
.btn.tier-btn.gold { background: linear-gradient(135deg, #ffe89a, #f4c34f 55%, #ffe89a); color: #5c4208; box-shadow: 0 4px 0 #c99a2a; }
.judge-title { margin-top: 10px; padding: 8px 12px; border-radius: 12px; text-align: center; font-size: 15px;
  background: linear-gradient(135deg, #fff6d6, #ffe89a); color: #5c4208; display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.judge-title b { font-family: var(--display); font-weight: 400; font-size: 18px; }
.judge-title .small { color: #a07a12; }
/* 등급 포카: 브론즈(구릿빛) · 실버(은빛) · 골드(금빛 = 골든 포카) */
.photocard.tier-card { position: relative; overflow: hidden; background-size: 300% 300%; animation: goldshift 4s ease-in-out infinite; }
.photocard.tier-card.bronze { background-image: linear-gradient(135deg, #7a3b1c, #e0a27a 25%, #b0643a 45%, #f6d8c2 60%, #8a4b1f 80%, #e0a27a); }
.photocard.tier-card.silver { background-image: linear-gradient(135deg, #6b7280, #eef1f5 25%, #a3adba 45%, #ffffff 60%, #7b8594 80%, #d6dce4); }
.photocard.tier-card.gold { background-image: linear-gradient(135deg, #b8860b, #ffe89a 25%, #f4c34f 45%, #fff6d6 60%, #d9a520 80%, #ffe89a); }
@keyframes goldshift { 50% { background-position: 100% 100%; } }
.photocard.tier-card .stamp { color: #a07a12; }
.photocard.tier-card.bronze .stamp { color: #8a4b1f; }
.photocard.tier-card.silver .stamp { color: #4b5563; }
.photocard.tier-card .top span:last-child { font-weight: 700; }
.photocard.tier-card .quote { border-left-color: #e0b000; }
.photocard.tier-card.bronze .quote { border-left-color: #b0643a; }
.photocard.tier-card.silver .quote { border-left-color: #a3adba; }
.hidden-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.hidden-types > span { display: flex; align-items: center; gap: 4px; background: #fff6d6; border-radius: 10px; padding: 6px 8px; font-size: 12px; line-height: 1.3; color: #5c4208; }
.tier-card.bronze .hidden-types > span { background: #f8e6d9; color: #5a2d12; }
.tier-card.silver .hidden-types > span { background: #eef1f5; color: #374151; }
@media (max-width: 480px) { .hidden-types { grid-template-columns: repeat(2, 1fr); } }