/* ETHERION v3.9.8 — 전장의 간단한 카드(slim)와 상대 전장 옆 크게 보기
   핸드 · 전장 카드(cardHTML opts.slim): 그림이 카드 전체를 채운다. 레벨 구슬 · 클래스 꼬리표 · 아이템 종류 · 설명 글은 숨기고,
   이름 · 오른쪽 위 아이콘 · 레벨 아이콘 · 공방체 숫자는 작게, 특수 능력은 오른쪽 아래 칩으로만.
   카드를 누르면 원본 카드(레벨 · 클래스 · 설명 · 지금 스탯)가 상대 전장 오른쪽에 크게 뜬다(#zoom.side, js/game.js syncZoom).
   맨 마지막에 읽는다 */

/* ---- 그림이 카드 전체 ---- */
.card.slim .c-art { position: absolute; inset: 0; margin: 0; border-radius: .42em; z-index: 0; min-height: 0; }
.card.slim .c-art > svg { width: 66%; height: 66%; transform: translateY(5%); }
.card.slim.has-desc .c-art > svg { transform: translateY(5%); }
.slot .card.slim .c-art > svg { opacity: 1; }
/* 글자가 읽히게: 위(이름) · 왼쪽 아래(숫자) 만 살짝 어둡게. 그림이 있으면 그림 위에(.c-img z 1) */
.card.slim .c-art::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(4, 4, 8, .72) 0, rgba(4, 4, 8, .28) 15%, transparent 27%, transparent 64%, rgba(4, 4, 8, .5) 100%),
              linear-gradient(90deg, rgba(4, 4, 8, .42) 0, transparent 26%); }
.card.slim .c-art:has(.c-img)::after { background: none; }
.card.slim .c-head { position: relative; z-index: 3; }

/* ---- 머리: 레벨 구슬 · 클래스 꼬리표 숨김, 이름은 작게 ---- */
.card.slim .c-lv, .card.slim .c-cltag { display: none; }
.card.slim .c-head { min-height: 0; padding: .02em 1.45em 0 .1em; gap: 0; }
.card.slim:has(.c-clsico i + i) .c-head { padding-right: 2.6em; }
.card.slim:has(.c-clsico i + i + i) .c-head { padding-right: 3.7em; }
.card.slim .c-name { font-size: .78em; line-height: 1.12; -webkit-line-clamp: 2; letter-spacing: -.03em; color: #fbf3e2;
  text-shadow: 0 .06em .1em #000, 0 0 .4em rgba(0, 0, 0, .95); }

/* ---- 오른쪽 위 아이콘(클래스 · 마법 종류) 작게 ---- */
.card.slim .c-clsico { top: .22em; right: .22em; gap: .08em; font-size: .62em; }

/* ---- 왼쪽 열: 레벨 아이콘 · 공방체 숫자 작게 ---- */
.card.slim .c-side { width: auto; min-width: 0; gap: .1em; }
.card.slim .c-pips { font-size: .68em; }
.card.slim .c-vstats { font-size: .7em; gap: 0; }
.card.slim .c-vstats .st b { text-shadow: 0 .06em .1em #000, 0 0 .3em #000, 0 0 .6em rgba(0, 0, 0, .9); }

/* ---- 특수 능력 칩: 오른쪽 위 아이콘 밑에 세로로 (아래는 핸드가 화면 밖 · 전장은 칸 단축키 글자와 겹침) ---- */
.card.slim .c-tags { left: auto; top: 1.75em; right: .22em; bottom: auto; flex-direction: column; align-items: flex-end; gap: .14em; z-index: 3; max-width: 64%; }
.card.slim .c-cls { font-size: .56em; padding: .08em .36em; }
.card.slim .c-badges { z-index: 3; }
/* 장착 아이템(유닛 아래에 깔린 카드): 이름은 위의 "◆ 이름" 띠가 보여 주므로 카드 이름은 숨김 */
.c-under .card.slim .c-name { visibility: hidden; }
.card.slim .c-equip { position: relative; z-index: 3; }

/* ---- 상대 전장 옆 크게 보기 (#zoom.side) ---- */
.zoom.side { padding: 10px; border-radius: 16px; animation: none; background: rgba(10, 11, 19, .96); border-color: rgba(246, 226, 168, .5);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 24px 60px rgba(0, 0, 0, .75), 0 0 40px rgba(246, 226, 168, .08); }
.zoom.side.z-in { animation: zoomSide .2s cubic-bezier(.2, .8, .2, 1); }
@keyframes zoomSide { from { opacity: 0; transform: translateX(18px) scale(.97); } to { opacity: 1; transform: none; } }
.zoom.side .size-full .c-mid { height: calc(var(--cw) * .74); }   /* 그림 자리를 원본 카드(.56)보다 크게 */
.zoom.side .card.size-full { min-height: calc(var(--cw) * 1.2); }
.zoom.side .detail { flex-direction: column; gap: 8px; align-items: stretch; }
.zoom.side .d-body { width: auto; max-width: var(--card-full); padding: 2px 6px 0; }
.zoom.side .d-body p { font-size: clamp(13px, calc(var(--card-full) * .036), 16px); }
.zoom.side .d-body .d-equip { font-size: clamp(14px, calc(var(--card-full) * .038), 17px); }
.zoom.side .d-body .d-equip span { font-size: clamp(13px, calc(var(--card-full) * .036), 16px); }
@media (prefers-reduced-motion: reduce) { .zoom.side.z-in { animation: none; } }

/* ---- v3.9.9 등급: 전장에 올라온 카드(장착 아이템 포함)의 테두리 = 등급 색, 원본 카드 종류 줄의 등급 칩 ----
   색은 js/grades.js의 GRADES(--gr, cardHTML이 카드마다 넣는다). 일반 = 흰빛 · 고급 = 노랑 · 레어 = 파랑 · 에픽 = 보라 · 유니크 = 주황 · 스페셜 = 분홍.
   테두리는 border로 — 고름 · 공격 · 장착 같은 상태는 box-shadow라 둘이 겹쳐도 등급 색이 남는다 */
.frow .slot .card.slim > .c-frame { border-width: .2em; border-color: var(--gr, #f4f1ea); }
:where(.frow .slot) .card.slim > .c-frame {
  box-shadow: 0 .05em 0 #5a4a2b, 0 .1em 0 #3b3120, 0 .16em 0 #211b10, 0 .75em 1.05em rgba(0, 0, 0, .78), 0 0 .6em color-mix(in srgb, var(--gr, #f4f1ea) 38%, transparent), inset 0 0 0 .1em color-mix(in srgb, var(--gr, #f4f1ea) 22%, transparent);
}
.frow .slot .card.slim.grade-common > .c-frame { border-color: color-mix(in srgb, var(--gr) 78%, #000); }   /* 일반은 흰빛을 조금 눌러 다른 등급 색이 더 도드라지게 */
.f-type .f-grade { display: inline-block; padding: .02em .5em; border: 1px solid color-mix(in srgb, var(--gr) 70%, transparent); border-radius: .25em;
  color: var(--gr); background: color-mix(in srgb, var(--gr) 12%, transparent); font-weight: 800; font-size: .92em; letter-spacing: .02em;
  text-shadow: 0 0 .5em color-mix(in srgb, var(--gr) 40%, transparent); }

/* ---- v3.9.9 마법 카드의 짧은 문구 (js/briefs.js SPELL_BRIEF · js/view.js spellBriefHTML) ----
   핸드 · 전장의 마법 카드(slim)에 효과를 짧게: 그림 아래쪽에 반투명 남색 판 + 위 금빛 선. 한 줄 = 효과 하나.
   줄 앞 대상 칩 색: 적 = --bad · 아군/나/뒤 아군 = --ether · 양쪽 = --gold · 대가(생명) = 짙은 붉은 · 핸드 = --gold-hi.
   전문은 카드를 누르면 원본 카드에 나온다 */
/* v3.11.1 상점(slim이 아닌 노멀 카드)의 마법: 왼쪽 레벨 열을 좁혀 그림 · 짧은 문구 칸을 넓힌다 */
.card.has-brief:not(.slim):not(.size-full) .c-side { width: auto; min-width: 0; }
.card.has-brief .c-art > svg { width: 52%; height: 52%; transform: translateY(-24%); }
.card.has-brief .c-brief { position: absolute; left: .22em; right: .22em; bottom: .26em; z-index: 3; pointer-events: none;
  display: flex; flex-direction: column; gap: .16em; padding: .3em .3em .32em; border-radius: .32em;
  background: linear-gradient(180deg, rgba(10, 11, 19, .78), rgba(10, 11, 19, .92));
  border-top: 1px solid var(--line-gold); box-shadow: 0 -.2em .6em rgba(0, 0, 0, .45); }
.card.has-brief .c-brief p { margin: 0; font-size: .84em; line-height: 1.22; letter-spacing: -.035em; color: var(--ink); font-weight: 700;
  word-break: keep-all; overflow-wrap: anywhere; text-shadow: 0 .06em .1em #000; }
.card.has-brief .c-brief .sb-t { display: inline-block; margin-right: .22em; padding: 0 .3em; border-radius: .25em; font-weight: 800; font-size: .92em; line-height: 1.35; white-space: nowrap;
  color: var(--tone); background: color-mix(in srgb, var(--tone) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 55%, transparent); text-shadow: none; }
.card.has-brief .c-brief .sb-foe  { --tone: var(--bad); }
.card.has-brief .c-brief .sb-ally { --tone: var(--ether); }
.card.has-brief .c-brief .sb-both { --tone: var(--gold); }
.card.has-brief .c-brief .sb-cost { --tone: #ff8a7a; }
.card.has-brief .c-brief .sb-hand { --tone: var(--gold-hi); }
.card.has-brief .c-brief .sti { width: 1.22em; height: 1.22em; vertical-align: -.24em; margin: 0 .02em 0 .06em; filter: drop-shadow(0 0 .12em rgba(0, 0, 0, .9)); }
.card.has-brief .c-brief .sti-a { color: #ff9a7a; }
.card.has-brief .c-brief .sti-d { color: #8fc0ff; }
.card.has-brief .c-brief .sti-h { color: #ff6f82; }
.card.has-brief .c-brief .cg { vertical-align: -.12em; margin-left: .14em; font-size: 1.12em; }
.card.has-brief .c-brief .cg .coin-dot { width: .82em; height: .82em; }
.card.has-brief .c-brief .kw { pointer-events: auto; color: var(--gold-hi); }