/* 카드 스타일 — 캡처용(prototype/card-proto.html)과 편집용(editor/index.html)이 공유한다.
   여기를 고치면 양쪽이 같이 바뀐다. 한쪽만 고치는 일이 없도록 카드 관련 CSS는 전부 이 파일에 둔다. */
@import url('fonts/fonts.css');

:root {
  --t-normal:#9aa06f; --t-fire:#f0803a; --t-water:#5b8fe8; --t-electric:#f3c521;
  --t-grass:#6cbf4f; --t-ice:#79cfd6; --t-fighting:#c9412f; --t-poison:#a248a8;
  --t-ground:#dcb45c; --t-flying:#93a3ea; --t-psychic:#f45c8a; --t-bug:#9fb42a;
  --t-rock:#b59a3c; --t-ghost:#6b57a0; --t-dragon:#6b46e8; --t-dark:#6a5a4e;
  --t-steel:#9aa3bd; --t-fairy:#ec8bb0;

  --card-w: 258px;
  --ink:#16233c;
  --bar:#2a3752;
}

/* 한글은 둥근 고딕(Jua), 숫자는 Gothic A1.
   Jua는 마침표가 낮게 깔려 "81.5"가 "81,5"처럼 보이고 뱃지의 '.' 접미사가 묻힌다.
   소수점과 './-' 접미사는 읽어야 하는 데이터라 수치 표기만 따로 뗀다. */
.cost, .cnt, .mv s, .atk, .gain { font-family:'Gothic A1','Malgun Gothic',sans-serif; }

/* 출력물의 배경. 캡처 페이지는 body에, 편집기는 미리보기 영역에 붙인다 */
.sheet {
  font-family:'Jua','Malgun Gothic','맑은 고딕',system-ui,sans-serif;
  background: linear-gradient(155deg,#4ecfdc 0%, #6f9ae4 40%, #8d80d9 72%, #9b7bd0 100%);
  padding: 22px;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* 페이지 폭은 그리드가 결정하고, 헤더는 그 폭에 맞춰 늘어난다 */
.page { width: fit-content; margin: 0 auto; }

/* 헤더는 첫 줄의 빈 칸에 들어간다(2블록 카드가 4칸을 다 못 채울 때).
   빈 칸이 없으면 그리드 위에 가로로 눕는다. */
.head {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px;
}
.head img { width:88px; height:88px; display:block; }
.head .edited {
  font-family:'Gothic A1','Malgun Gothic',sans-serif;
  font-size:15px; font-weight:800; letter-spacing:-.2px;
  color:#16233c;
}
.head.above { flex-direction:row; justify-content:space-between; padding:0 4px 9px; }
.head.above img { width:52px; height:52px; }

.grid { display: grid; gap: 10px; }

/* ── 카드 ───────────────────────────────────────── */
.card {
  background: linear-gradient(180deg,#f6fbff 0%, #dce8f4 100%);
  border-radius: 13px;
  padding: 5px;
  box-shadow: 0 2px 5px rgba(20,35,70,.28);
}

/* 상단 바: 타입아이콘 / +에너지 / 노멀어택 pill */
.bar {
  display:flex; align-items:center; gap:6px;
  background: var(--bar);
  border-radius: 9px;
  padding: 4px 6px;
}
/* 타입 칸과 +N 칸은 폭을 고정한다.
   타입이 1개든 2개든, +3이든 +20이든 노멀어택 pill 가로폭이 모든 카드에서 같아지도록. */
.types { display:flex; gap:2px; flex:0 0 32px; }
.types img { width:15px; height:15px; display:block; }
.gain { color:#fff; font-size:12.5px; font-weight:700; flex:0 0 26px; }
.fast {
  flex:1 1 auto; text-align:center;
  background: var(--c,#888); color:#fff;
  font-size:12px; font-weight:700;
  border-radius: 6px; padding: 2.5px 6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  /* 흰 글자 외곽선. paint-order로 획을 글자 뒤에 깔아야 글자가 얇아지지 않는다 */
  -webkit-text-stroke: 1.8px #16233c;
  paint-order: stroke fill;
}

/* 본문 */
.body { display:flex; gap:5px; padding: 5px 3px 3px; }

.left { width:78px; flex:0 0 78px; text-align:center; }
.sprite { width:72px; height:62px; margin:0 auto; overflow:hidden; }
.sprite img {
  width:100%; height:100%;
  object-fit:contain; display:block;
  filter: drop-shadow(0 1px 1px rgba(30,50,90,.25));
}
.name { font-size:12.5px; font-weight:700; margin-top:2px; letter-spacing:-.6px; }
.atk  { font-size:10.5px; font-weight:700; letter-spacing:-.4px; }

.moves { flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; gap:3px; }

.row { display:flex; align-items:center; gap:5px; min-height:26px; }
.cost { width:19px; flex:0 0 19px; text-align:right; font-size:12.5px; font-weight:700; }
.cnt {
  width:25px; height:25px; flex:0 0 25px; border-radius:50%;
  background: var(--c,#888); color:#fff;
  display:grid; place-items:center;
  font-size:12.5px; font-weight:700; letter-spacing:-.7px;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.18);
}
.cnt.wide { font-size:10.5px; }
.mv { min-width:0; flex:1 1 auto; }
.mv b { display:block; font-size:11px; font-weight:700; letter-spacing:-.7px; white-space:nowrap; }
.mv s { display:block; text-decoration:none; font-size:11px; font-weight:700;
        letter-spacing:.4px; font-variant-numeric: tabular-nums; }
.row.empty .cnt { background:none; box-shadow:none; }
.row.empty .mv s { color:#7d8ca6; }

/* 상하 2블록 카드 (폼체인지 / 기술분할) */
.card.dual .body { padding-bottom:1px; }
.card.dual .sprite { height:52px; }
.sep { height:1px; margin:3px 6px 4px; background:rgba(60,90,140,.22); }
/* 2블록 카드 다음 첫 일반 카드를 1열로 밀어, 첫 줄에는 2블록 카드만 남긴다 */
.card.rowbreak { grid-column-start: 1; }

/* 퀵서치는 카드 한 장을 한 줄에 둔다. 한 카드의 기술 칸만 가로로 늘어나며,
   화면보다 길면 기술 영역 안에서만 스크롤해 문서 전체가 넘치지 않게 한다. */
.grid.quick-chart { display:flex; flex-direction:column; align-items:flex-start; }
.grid.quick-chart .quick-card {
  flex:0 0 auto; min-width:0; max-width:100%; overflow:hidden; cursor:pointer;
}
.grid.quick-chart .quick-scroll {
  width:max-content; max-width:100%; overflow:hidden;
}
.grid.quick-chart .quick-layer {
  display:flex; width:max-content; max-width:100%;
}
.grid.quick-chart .quick-info {
  width:92px; flex:0 0 92px; padding:4px 7px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-right:1px solid rgba(60,90,140,.22); text-align:center;
}
.grid.quick-chart .quick-info .types {
  flex:0 0 auto; justify-content:center; margin-top:5px;
}
.grid.quick-chart .quick-moves {
  display:flex; min-width:0; flex:1 1 auto; overflow-x:auto; overflow-y:hidden;
}
.grid.quick-chart .quick-block {
  width:176px; flex:0 0 176px; padding:0 6px 3px;
}
.grid.quick-chart .quick-block + .quick-block {
  border-left:1px solid rgba(60,90,140,.22);
}
.grid.quick-chart .quick-block .moves {
  padding:5px 3px 0;
}
.grid.quick-chart .quick-block.hidden-power .fast {
  color:#16233c; border:2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(90deg,#9fb42a,#f0803a,#f3c521,#6cbf4f,#5b8fe8,#6b46e8,#ec8bb0) border-box;
  -webkit-text-stroke:0;
}
.grid.quick-chart .quick-notice {
  display:flex; flex-direction:column; gap:4px; padding:14px 18px;
  font-family:'Gothic A1','Malgun Gothic',sans-serif;
}
.grid.quick-chart .quick-notice b { font-size:13px; }
.grid.quick-chart .quick-notice span { font-size:12px; color:#52647f; }