/* 232차: 🃏 카드지갑 — 아이 카드지갑 화면·홈 새 카드 창·결과 화면·선생님 학생 상세에서 함께 씀 */
.kcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 14px; }   /* 245차(사용자): 카드 사이 조금 더 띄움(10→14) */
.kcards.mini { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 11px; }
/* 235차-2(사용자 참고 그림: 큰 동물·위 제목·별·하트·안쪽 줄) → 236차(사용자 "앱 색과 동떨어짐"): 밤하늘 대신 앱 팔레트 색을 그대로 깐 바탕(위는 밝게·아래는 진하게), 흰 틀 + 색 테, 흰 제목(색 외곽선) */
.kcard { position: relative; border: 3px solid #fff; border-radius: 16px; padding: 8px 6px 6px; text-align: center; aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; cursor: pointer; overflow: hidden; color: #fff;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.95) 0 1px, transparent 1.6px), radial-gradient(circle at 78% 14%, rgba(255,255,255,.9) 0 1.2px, transparent 1.8px), radial-gradient(circle at 88% 58%, rgba(255,255,255,.8) 0 1px, transparent 1.6px), radial-gradient(circle at 12% 66%, rgba(255,255,255,.85) 0 1px, transparent 1.6px), radial-gradient(circle at 60% 84%, rgba(255,255,255,.7) 0 .9px, transparent 1.5px), radial-gradient(circle at 36% 90%, rgba(255,255,255,.7) 0 .9px, transparent 1.5px),
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.45) 0, transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--c) 72%, #fff) 0%, var(--c) 58%, color-mix(in srgb, var(--c) 78%, #2F3E56) 100%);
  box-shadow: 0 0 0 2px var(--c), 0 4px 0 color-mix(in srgb, var(--c) 70%, #2F3E56), inset 0 0 0 1.5px rgba(255,255,255,.25); outline: 1.5px solid rgba(255,255,255,.6); outline-offset: -8px; }
.kcard::before { content: '★'; position: absolute; left: 10px; top: 38px; font-size: 13px; color: #FFD86B; text-shadow: 0 0 6px rgba(255,216,107,.9); }
.kcard::after { content: '♥'; position: absolute; right: 12px; top: 46px; font-size: 12px; color: #FFFFFF; opacity: .9; text-shadow: 0 0 6px rgba(255,255,255,.8); }
.kcard .art { width: 58%; aspect-ratio: 1; } .kcard .art svg { width: 100%; height: 100%; display: block; }
/* 233차: 동물 주인공 + 오른쪽 아래 작은 종류 배지 */
.kcard .kart { position: relative; width: 70%; aspect-ratio: 1; border-radius: 50%; background: none; border: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.kcard .kart::before { content: '✦'; position: absolute; left: -4px; bottom: 6px; font-size: 11px; color: #FFD86B; text-shadow: 0 0 5px rgba(255,216,107,.9); }
.kcard .kart::after { content: '♥'; position: absolute; left: 2px; top: 4px; font-size: 9px; color: #fff; opacity: .85; text-shadow: 0 0 5px rgba(255,255,255,.8); }
.kcard .kart .emo { font-size: 48px; line-height: 1; filter: drop-shadow(0 0 7px rgba(255,255,255,.65)) drop-shadow(0 3px 3px rgba(0,0,0,.25)); }
.kcard.big .kart .emo { font-size: 78px; }
.kcard .kart .kb { position: absolute; right: -6px; bottom: -2px; width: 36%; aspect-ratio: 1; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); padding: 2px; }
.kcard .kart .kb svg { width: 100%; height: 100%; display: block; }
.kcard.empty .kart { filter: grayscale(1); opacity: .4; }
/* 245차(사용자): 여러 장은 겹친 카드 대신 ×n 표시만 */
.kcards { padding: 8px 8px 6px; }   /* 236차(사용자): 테두리에 붙지 않게 여백 · 245차: 겹친 카드가 없어져 좌우 같게 */
#cards-body .card { padding: 16px 20px 18px; }   /* 236차(사용자 "테두리에 글씨와 카드가 붙어 있다"): 카드지갑 묶음 안 여백 */
#cards-body .kc-h { margin: 0 0 6px; } #cards-body .kc-d { margin: 0 0 10px; }
.kcard .tt { order: -1; margin: 6px 0 2px; font-size: 14px; font-weight: 900; letter-spacing: .02em; line-height: 1.2; color: #fff; word-break: keep-all; --o: color-mix(in srgb, var(--c) 55%, #2F3E56); text-shadow: -1px 0 0 var(--o), 1px 0 0 var(--o), 0 -1px 0 var(--o), 0 1.5px 0 var(--o), 0 3px 4px rgba(47,62,86,.35); }
.kcard:has(.gchip) .tt, .kcard:has(.cnt) .tt { margin-top: 20px; }   /* 급수 칩·×n 이 위에 있으면 제목을 조금 내림(245차: ×n 이 제목을 가리던 것) */
.kcard .sb { margin-top: auto; font-size: 10.5px; color: rgba(255,255,255,.8); line-height: 1.3; min-height: 1.3em; padding: 0 4px 4px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.kcard .gchip { position: absolute; top: 7px; left: 7px; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 7px; box-shadow: 0 1px 3px rgba(0,0,0,.3); white-space: nowrap; max-width: calc(100% - 40px); overflow: hidden; text-overflow: ellipsis; }   /* 266차-4: '8급 호산'·'곱셈 2×1' 처럼 길어진 칩이 ×n 과 겹치지 않게 */
.kcard .cnt { position: absolute; top: 7px; right: 7px; font-size: 12px; font-weight: 800; color: #2F3E56; background: #FFD86B; border-radius: 999px; padding: 1px 7px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.kcard.empty { --c: #D9D4C8; --bg: #F5F2EA; background: var(--bg); box-shadow: none; outline: none; border-style: dashed; cursor: default; color: #A9A397; } .kcard.empty::before, .kcard.empty::after, .kcard.empty .kart::before, .kcard.empty .kart::after { display: none; } .kcard.empty .tt { color: #A9A397; text-shadow: none; } .kcard.empty .sb { color: #A9A397; text-shadow: none; } .kcard.empty .kart .emo { filter: none; }
.kcard.empty .art { filter: grayscale(1); opacity: .35; } .kcard.empty .tt { color: #A9A397; } .kcard.empty .gchip { opacity: .55; }
.kcard .rm { position: absolute; top: 2px; right: 4px; border: 0; background: rgba(255,255,255,.85); border-radius: 999px; font-size: 14px; color: #B3261E; cursor: pointer; padding: 1px 6px; z-index: 1; }
.kcard.big { width: 190px; margin: 0 auto; font-size: 15px; } .kcard.big .tt { font-size: 19px; margin-top: 10px; } .kcard.big .sb { font-size: 13px; padding-bottom: 8px; } .kcard.big::before { font-size: 18px; top: 56px; } .kcard.big::after { font-size: 16px; top: 64px; } .kcard.big .kart::before { font-size: 15px; } .kcard.big .kart::after { font-size: 12px; }
.new-cards .kcard { animation: kflip .7s ease both; } @keyframes kflip { from { transform: rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.kc-h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 4px; font-size: 16px; } .kc-h small { color: var(--sub, #8A97A6); font-weight: 600; }
.kc-d { margin: 0 0 8px; font-size: 12px; }
.gq-perfect.card-new .kcards { margin-top: 8px; justify-content: center; grid-template-columns: repeat(auto-fill, 96px); }
.modebar .card-seg .seg-btn.cardk.sel { background: #FFF1E0; border-color: #F4511E; color: #B3451E; }
.kc-howto { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.kc-how { display: flex; align-items: center; gap: 8px; font-size: 13px; } .kc-how .ic { width: 30px; height: 30px; flex: none; } .kc-how .ic svg { width: 100%; height: 100%; display: block; }
.kc-how b { display: block; color: var(--ink, #2F3E56); font-size: 13px; } .kc-how small { color: var(--sub, #8A97A6); font-size: 11.5px; }
.kc-how .ic { position: relative; } .kc-how .ic .emo { position: absolute; left: -2px; top: -2px; font-size: 16px; line-height: 1; z-index: 1; } .kc-how .ic svg { width: 100%; height: 100%; display: block; }
/* 245차: 🃏 카드 바꾸기 — 아이가 낼 카드 고르기 */
.cs-pick { max-height: 52vh; overflow-y: auto; }
.cs-pick .kcard { transition: transform .12s; }
.kcard.pick { transform: translateY(-3px); box-shadow: 0 0 0 4px #2F3E56, 0 6px 0 color-mix(in srgb, var(--c) 70%, #2F3E56); }
.kcard.pick .kart::after { content: '✔'; left: auto; right: -8px; top: -6px; width: 26px; height: 26px; line-height: 26px; border-radius: 50%; background: #2FB889; color: #fff; font-size: 15px; font-weight: 900; opacity: 1; text-shadow: none; box-shadow: 0 1px 3px rgba(0,0,0,.3); z-index: 2; }
.kc-swap .tk-item .nm { font-size: 15px; }