/* ══ 사도 도감 · 사도 정보 ═══════════════════════════════════════════════
   카제나의 「요원 도감 → 상세 정보」 얼개를 따랐다.
   메뉴는 밝고, 카드는 어둡다 — 원작이 그렇게 갈라 놓았고 카드가 그만큼 도드라진다. */

.dexscreen, .detailscreen, .formscreen {
  --ink: #23242b;
  --dim: #7b7d8c;
  --line: #dfe1ea;
  --card: #fff;
  --sheet: #f3f4f8;
  --hot: #ff9a2f;
  --sel: #2e3140;
  color: var(--ink);
  background: linear-gradient(180deg, #fbfbfe 0, #eceef5 100%);
  border-radius: 16px;
  padding: 0;
  display: flex; flex-direction: column; gap: 0;
  min-height: 72vh;
  overflow: hidden;
}

/* ── 머리띠 ─────────────────────────────────────────── */
.dbar2 {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: #ffffffcc;
}
.iconbtn {
  width: 56px; height: 34px; display: grid; place-items: center;
  background: var(--sel); color: #fff; border: 0; border-radius: 9px; font-size: 15px; padding: 0;
}
.iconbtn:hover:not(:disabled) { background: #3c4054; border-color: transparent; }
.dtitle { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.4px; color: var(--ink); }
.dwho { font-size: 13px; color: var(--dim); }

/* 전투원·파트너 자리 — 우리는 사도·이격 */
.dsearch {
  margin-left: auto; width: 150px; padding: 7px 11px; font: inherit; font-size: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 9px; color: var(--ink);
}
.dsearch:focus { outline: none; border-color: var(--hot); }
.sortbtn {
  display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700;
  background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 7px 14px; color: var(--ink);
}
.sortbtn .arrow { font-style: normal; color: var(--hot); }
.takebtn {
  font-size: 13px; font-weight: 800; padding: 8px 20px; border-radius: 9px;
  background: var(--sel); color: #fff; border: 0;
}
.takebtn.on { background: #fff; color: #c2455c; border: 1px solid #e4b7c0; }

/* ── 몸 ─────────────────────────────────────────────── */
.dbody { display: grid; grid-template-columns: 78px minmax(0, 1fr); flex: 1; min-height: 0; }

/* 종족 레일 */
.rail {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 0; border-right: 1px solid var(--line); background: #f7f8fc;
}
.railbtn {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%;
  background: transparent; border: 0; border-radius: 0; padding: 7px 0; color: var(--dim);
}
.remb {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 800;
  overflow: hidden;
}
.rico { display: block; width: 100%; height: 100%; font-style: normal; display: grid; place-items: center; }
.rico img { width: 100%; height: 100%; object-fit: cover; }
.rname { font-size: 9px; letter-spacing: .04em; }
.railbtn:hover .remb { border-color: #b9bdcd; }
.railbtn.on { color: var(--ink); }
.railbtn.on .remb { background: #ffe9cd; border-color: var(--hot); color: #8a4a00; box-shadow: 0 0 0 3px #ff9a2f26; }

.dright { display: flex; flex-direction: column; min-width: 0; padding: 12px 16px 0; }

.chiprow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-bottom: 10px; }
.chipgap { width: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 4px 11px 4px 6px; border-radius: 99px;
  background: #fff; border: 1px solid var(--line); color: #6f7285;
}
.chip:not(:has(img)) { padding-left: 11px; }
.cico { display: none; font-style: normal; }
.cico:has(img) { display: block; width: 16px; height: 16px; }
.cico img { width: 100%; height: 100%; object-fit: contain; }
.chip.on { background: var(--sel); border-color: var(--sel); color: #fff; }

.dhead2 { display: flex; align-items: center; gap: 10px; padding: 2px 0 12px; }
.hemb {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid #cfd3e0; font-size: 14px; font-weight: 800; color: #4a4d5e; background: #fff;
  overflow: hidden;
}
.dhead2 b { font-size: 16px; display: block; }
.hcount { font-size: 12px; color: var(--dim); }

/* ── 도감 격자 ──────────────────────────────────────── */
.dexgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 10px; overflow-y: auto; padding: 2px 4px 16px 2px; align-content: start;
}
.dex {
  position: relative; display: block; padding: 0; overflow: hidden;
  aspect-ratio: 172 / 246; border-radius: 10px;
  background: #dfe2ec; border: 1px solid #d3d7e4; transition: .18s;
}
.dex:hover { transform: translateY(-3px); box-shadow: 0 10px 22px #2b2f4526; border-color: #b6bbcc; }
.dex.on { border-color: var(--hot); box-shadow: 0 0 0 2px #ff9a2f55, 0 10px 22px #2b2f4526; }
.dex .art { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border-radius: 0; background: transparent; }
.dex .art img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.dex .art-ph { width: 100%; height: 100%; font-size: 17px; }
.dfade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, #0c0e18e6 0, #0c0e1866 22%, transparent 42%); }

.dbadges { position: absolute; left: 6px; top: 6px; z-index: 2; display: flex; flex-direction: column; gap: 3px; }
.dbadges i {
  width: 21px; height: 21px; display: grid; place-items: center; border-radius: 5px;
  font-style: normal; font-size: 11px; font-weight: 800;
}
.brole { background: #1d2030d9; color: #e8eaf4; }
.bnat { background: color-mix(in srgb, var(--tint) 88%, #000); color: #14151d; }
/* 원작 아이콘이 붙으면 바탕을 지운다 — 아이콘이 제 바탕을 들고 있다 */
.dbadges i:has(img) { background: transparent; }
.dbadges img { width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 1px 2px #0009); }

.decho {
  position: absolute; left: 6px; bottom: 34px; z-index: 2; font-size: 9px; font-weight: 800;
  color: #cfd6ff; background: #2b2f52cc; border: 1px solid #6a72b0; border-radius: 4px; padding: 1px 5px;
}
.dmark {
  position: absolute; right: 6px; top: 6px; z-index: 2; font-size: 9px; font-weight: 800;
  background: var(--hot); color: #26200f; border-radius: 4px; padding: 2px 6px;
}
.dplate { position: absolute; left: 0; bottom: 0; width: 100%; padding: 7px 8px 8px; z-index: 2; }
.dname { display: block; font-size: 13px; font-weight: 800; color: #fff; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsub { display: block; font-size: 9px; color: #c3c8dc; }

/* ── 아래: 고른 셋 ──────────────────────────────────── */
.dfoot {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-top: 1px solid var(--line); background: #ffffffd9;
}
.dfoot .slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: 1; }
.dfoot .slot {
  display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 7px 9px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; clip-path: none;
}
.dfoot .slot.filled { border-color: var(--hot); }
.dfoot .slot .empty { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: #eef0f6; color: #a8abbb; font-size: 12px; font-weight: 800; }
.dfoot .slot b { font-size: 13px; }
.dfoot .slot .art { width: 38px !important; height: 38px !important; border-radius: 8px; background: #f1f2f8; }
.dfoot .slot select { display: block; margin-top: 2px; font: inherit; font-size: 11px; padding: 1px 4px;
  background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 5px; }
.dfoot .slot .drop { margin-left: auto; font-size: 11px; padding: 3px 9px; border-radius: 7px;
  background: #f1f2f8; border: 1px solid var(--line); color: #6f7285; }
.dfoot .go { padding: 12px 34px; border-radius: 10px; font-size: 14px; }
.dexscreen .more { grid-column: 1 / -1; padding: 30px; text-align: center; color: var(--dim); font-size: 13px; }

/* ══ 사도 정보 ══════════════════════════════════════════ */
.detailscreen .dbody { grid-template-columns: 168px minmax(0, 1fr); }
.side { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px;
  border-right: 1px solid var(--line); background: #f7f8fc; }
.semb { display: flex; flex-direction: column; gap: 2px; padding: 0 8px 18px; }
.sico { font-style: normal; margin-bottom: 4px; }
.sico:has(img) { display: block; width: 34px; height: 34px; }
.sico img { width: 100%; height: 100%; object-fit: contain; }
.semb span { font-size: 15px; font-weight: 800; }
.semb i { font-style: normal; font-size: 11px; color: var(--dim); }
.sidebtn {
  text-align: left; font-size: 14px; font-weight: 700; padding: 11px 16px;
  background: transparent; border: 0; border-radius: 99px; color: #6f7285;
}
.sidebtn:hover:not(.on) { background: #e9ebf3; border-color: transparent; }
.sidebtn.on { background: var(--sel); color: #fff; }
.dmain { min-width: 0; overflow-y: auto; }
.pane { padding: 18px 20px 26px; display: flex; flex-direction: column; gap: 14px; }
.pane .note { font-size: 12px; color: var(--dim); margin: 0; line-height: 1.7; }

/* 능력치 */
.sthero { display: flex; gap: 18px; }
.stshot { width: 190px; height: 250px; flex: none; border-radius: 12px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 30%, #e6e9f5, #cfd4e6); }
.stshot .art { width: 100% !important; height: 100% !important; border-radius: 0; background: transparent; }
.stshot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.stinfo { min-width: 0; flex: 1; }
.sttop { display: flex; align-items: center; gap: 9px; }
.sttop h2 { margin: 0; font-size: 30px; font-weight: 900; letter-spacing: -1px; }
.star { font-size: 12px; color: var(--hot); }
.eldain { font-size: 10px; padding: 2px 7px; border-radius: 99px; color: #3c7a2e; border: 1px solid #9ccf8e; }
.stmeta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.mtag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #4b4e5e;
  background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 3px 11px 3px 5px; }
.mtag.plain { padding-left: 11px; color: var(--dim); }
.mico { display: none; font-style: normal; }
.mico:has(img) { display: block; width: 18px; height: 18px; }
.mico img { width: 100%; height: 100%; object-fit: contain; }
.stblurb { font-size: 14px; line-height: 1.8; color: #4b4e5e; margin: 12px 0 0; }
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.statc { padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.statc small { display: block; font-size: 10px; color: var(--dim); letter-spacing: .1em; }
.statc strong { display: block; font-size: 22px; margin-top: 2px; }
.ability { padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  border-left: 3px solid #b9bdcd; }
.ability.key { border-left-color: #5aa9d6; }
.ability h3 { margin: 0 0 4px; font-size: 12px; letter-spacing: .1em; color: var(--dim); }
.ability p { margin: 0; font-size: 13px; line-height: 1.7; }
.psec { font-size: 13px; margin: 6px 0 0; }
.detailscreen .bond { display: flex; justify-content: space-between; gap: 10px; font-size: 13px;
  padding: 7px 12px; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.detailscreen .bond .why { color: var(--dim); font-size: 12px; }

/* ── 카드 ────────────────────────────────────────────── */
/* 여덟 장이 한 화면에 들어와야 한다 — 카제나 도감이 그렇다.
   칸을 넓게 두면 카드가 같이 커져 둘째 줄이 화면 밖으로 밀린다. */
.cardwrap { display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 20px; align-items: start; max-width: 1090px; }
.cardcols { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.csec { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.csec i { font-style: normal; color: var(--hot); }
.csec b { font-size: 14px; }
.csn { font-size: 11px; color: var(--dim); }
.cardrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 12px; }

/* 카드 한 장 — 어둡고 세로로 길다. 원작 도감의 카드가 그렇다. */
.gcard {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  aspect-ratio: 158 / 232; border-radius: 10px; padding: 8px 9px 0;
  background: linear-gradient(170deg, #2a2340 0, #171528 62%);
  border: 1px solid #4a3f74; box-shadow: 0 6px 16px #1a17301f;
  color: #efeaff;
}
.gcard.k-atk   { background: linear-gradient(170deg, #3a2040 0, #1b1226 62%); border-color: #6b3f7a; }
.gcard.k-def   { background: linear-gradient(170deg, #1d2c46 0, #121a2a 62%); border-color: #3c5c8a; }
.gcard.k-heal  { background: linear-gradient(170deg, #1d3a33 0, #12241f 62%); border-color: #3c7a63; }
.gcard.k-buff  { background: linear-gradient(170deg, #3c3320 0, #231d12 62%); border-color: #866b36; }

/* 사도 카드는 성격 색 — 종류 색(위)을 덮는다. 종류는 이름 밑 아이콘(⚔·⛨·✚…)으로 읽힌다.
   색은 성격 표시(.n순수 …)와 같은 계열: 순수 초록 · 광기 빨강 · 냉정 하늘 · 우울 보라 · 활발 노랑 */
.gcard.p-순수 { --pc: #7fd3a8; background: linear-gradient(170deg, #1f4a3a 0, #11261f 62%); }
.gcard.p-광기 { --pc: #e0707f; background: linear-gradient(170deg, #4d1f2a 0, #261116 62%); }
.gcard.p-냉정 { --pc: #7fd6f5; background: linear-gradient(170deg, #1a4458 0, #0f222c 62%); }
.gcard.p-우울 { --pc: #a592d6; background: linear-gradient(170deg, #332a52 0, #19152b 62%); }
.gcard.p-활발 { --pc: #f5dc5a; background: linear-gradient(170deg, #4a4214 0, #25210c 62%); }
.gcard[class*=" p-"] { border: 1.5px solid var(--pc); box-shadow: inset 0 0 0 1px #0006, inset 0 0 18px color-mix(in srgb, var(--pc) 22%, transparent), 0 6px 16px #1a17301f; }
.gcard[class*=" p-"] .gcost { border-left-color: var(--pc); }
/* 그림이 꽉 찬 카드 — 위아래 어둠을 성격 색으로 물들인다. 테두리만으로는 그림에 묻혀 안 보였다 */
.gcard.full[class*=" p-"] { border-width: 2px; }
.gcard.full[class*=" p-"] .gart:after {
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--pc) 30%, #0b0916e8) 0, color-mix(in srgb, var(--pc) 20%, #0b0916b0) 13%, #0b091645 26%, transparent 42%),
    linear-gradient(to top, color-mix(in srgb, var(--pc) 34%, #0b0916f7) 0, color-mix(in srgb, var(--pc) 22%, #0b0916c4) 20%, transparent 46%);
}

.ghead { display: flex; gap: 7px; align-items: flex-start; z-index: 2; }
.gcost {
  flex: none; min-width: 19px; text-align: center; font-size: 14px; font-weight: 900; color: #fff;
  border-left: 2px solid #b9a2ff; padding-left: 5px; line-height: 1.1;
}
.gtitle { min-width: 0; }
.gtitle b { display: block; font-size: 12px; line-height: 1.25; word-break: keep-all; }
.gtype { display: flex; align-items: center; gap: 3px; font-size: 9px; color: #b3a9d4; margin-top: 2px; }
.gtype i { font-style: normal; color: #e07a8e; }
.gcard.k-def .gtype i { color: #6fb6d9; }
.gcard.k-heal .gtype i { color: #7fd3a8; }

.gart { position: relative; flex: 1; margin: 7px -9px 0; display: grid; place-items: center; overflow: hidden; }
.gpic { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 6px 12px #0009); }
.gglyph { font-size: 44px; color: #ffffff14; }
.gart:after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, #0e0b19f2 0, #0e0b1999 30%, transparent 58%);
}
.gtext {
  position: absolute; left: 0; bottom: 0; width: 100%; margin: 0; padding: 9px 10px 11px;
  font-size: 10.5px; line-height: 1.5; color: #d8d1f0; z-index: 2; text-align: center;
  /* 한글은 그냥 두면 낱말 가운데서 줄이 바뀐다 — "있으/면" 이 되어 읽기 나쁘다 */
  word-break: keep-all;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
/* ── 그림이 카드를 꽉 채우는 꼴 ─────────────────────────
   그린 일러스트가 있으면 그림이 카드 본체다. 코스트·이름은 위에,
   효과 글은 아래에 얹고, 읽히도록 위아래로 어둠을 깐다. */
.gcard.full { padding: 0; }
.gcard.full .gart { position: absolute; inset: 0; margin: 0; z-index: 0; }
.gcard.full .gpic { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: none; }
.gcard.full .gart:after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, #0b0916e8 0, #0b0916b0 13%, #0b091645 26%, transparent 42%),
    linear-gradient(to top, #0b0916f7 0, #0b0916c4 20%, transparent 46%);
}
.gcard.full .ghead { position: relative; z-index: 2; padding: 8px 9px 0; }
.gcard.full .gtitle b { text-shadow: 0 1px 4px #000e, 0 0 10px #000a; }
.gcard.full .gtype { color: #ddd6f5; text-shadow: 0 1px 4px #000e, 0 0 10px #000a; }
.gcard.full .gtext { text-shadow: 0 1px 4px #000e; color: #e6e0f6; -webkit-line-clamp: 3; }
.gcard.full .gcost { text-shadow: 0 1px 3px #000c; }

/* 에고 스킬 자리 — 우리는 궁극기 */
.egoside { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 14px 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.hex {
  /* 원작 아이콘이 네모라 육각도 네모에 가깝게 둔다 — 세로로 길면 얼굴이 잘린다 */
  position: relative; width: 142px; height: 142px; display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, #3b2f5e, #1a1628);
}
.hex.big { width: 184px; height: 184px; }
/* 원작 고학년 스킬 아이콘은 네모다. 육각을 꽉 채워 잘라야 모서리에 빈 데가 안 생긴다. */
.hexpic { width: 100%; height: 100%; object-fit: cover; }
.hexcost {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 2;
  font-size: 10px; font-weight: 900; color: #ffe6a8; letter-spacing: .04em;
  background: #120f22d9; border-radius: 99px; padding: 2px 9px;
}
.egoname { font-size: 14px; font-weight: 800; }
.egolabel { font-size: 10px; letter-spacing: .16em; color: var(--hot); }
.egotext { font-size: 12px; line-height: 1.7; color: #55586a; margin: 4px 0 0; word-break: keep-all; }
.ultbig { display: flex; gap: 20px; align-items: flex-start; }
.ultbig h2 { margin: 0 0 6px; font-size: 24px; }

/* ── 번뜩임 ─────────────────────────────────────────── */
.flashbox { padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.fhead { display: flex; align-items: center; gap: 9px; }
.fpic { width: 30px; height: 30px; object-fit: contain; border-radius: 7px; background: #211b33; padding: 2px; }
.fhead b { font-size: 14px; }
.ftype { font-size: 10px; color: var(--dim); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; }
.ftext { font-size: 12px; color: #55586a; margin: 6px 0 10px; line-height: 1.6; word-break: keep-all; }
.flashgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 7px; }
.flash { padding: 9px 11px; background: #f6f7fb; border: 1px solid var(--line); border-radius: 9px; }
.fkind { display: block; font-size: 10px; font-weight: 800; color: var(--hot); letter-spacing: .06em; }
.flash b { display: block; font-size: 12px; margin: 3px 0 2px; }
.flash p { margin: 0; font-size: 11px; line-height: 1.6; color: #62657a; word-break: keep-all; }


/* ══ 낱말에 밑줄 ═══════════════════════════════════════════════════════
   카드 글의 아는 낱말(동상·간식·취약·AP…)에 밑줄을 긋는다.
   짚으면 풀이가 뜨고, 누르면 쪽지가 뜬다 — 손가락으로도 봐야 한다. */

.kw {
  all: unset; cursor: help; font: inherit; color: inherit;
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
  text-decoration-color: currentColor;
}
.kw:hover, .kw:focus-visible { text-decoration-style: solid; text-decoration-color: var(--hot); }
/* 풀이가 아직 없는 낱말 — 밑줄만 흐리게 둔다. 눌러도 없다고 말한다. */
.kw.nodef { text-decoration-color: #ffffff5c; }
.gcard .kw { text-decoration-color: #ffffff8a; }
.gcard .kw:hover { text-decoration-color: #ffd98a; }

.kwnote {
  position: fixed; right: 20px; bottom: 20px; z-index: 50; width: min(320px, calc(100vw - 40px));
  padding: 14px 16px; border-radius: 12px;
  background: #1b1a24; border: 1px solid #4a3f74; color: #efeaff;
  box-shadow: 0 16px 40px #0a0817a8;
}
.kwhead { display: flex; align-items: baseline; gap: 8px; }
.kwhead b { font-size: 15px; }
.kwkind { font-size: 10px; letter-spacing: .12em; color: #b3a9d4; }
.kwnote p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.75; color: #d0c9e8; word-break: keep-all; }
.kwclose {
  margin-top: 12px; font-size: 11px; padding: 5px 12px; border-radius: 7px;
  background: #2a2340; border: 1px solid #4a3f74; color: #cfc7ea;
}

/* 카드를 누르면 펼쳐지는 쪽지 — 하는 일 한 줄과 그 아래 낱말 풀이 */
.cardnote { width: min(400px, calc(100vw - 40px)); }
.kwcost {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  font-size: 11px; font-weight: 900; color: #16151c; background: var(--gold); border-radius: 50%;
}
.cardact { font-size: 13.5px !important; color: #efeaff !important; margin: 10px 0 0 !important; }
.terms { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dashed #4a3f74; }
.terms dt {
  font-size: 12px; font-weight: 800; color: #ffd98a; margin-top: 9px;
}
.terms dt:first-child { margin-top: 0; }
.terms dt.here { color: #9fe0c4; }
.terms dd { margin: 3px 0 0; font-size: 12px; line-height: 1.7; color: #cfc7ea; word-break: keep-all; }
.gcard { cursor: pointer; }

/* ══ 사도 편성 ═══════════════════════════════════════════════════════════
   도감이 "누가 있나" 라면 편성은 "어디에 세울까" 다.
   진형(제 자리 ±12%) · 사이(첫 턴 AP) · 성격 상성 · 덱 열두 장이 한 화면에 있어야
   고를 수 있다. 훑어보기는 「사도 도감」 단추로 넘어간다. */

main:has(.formscreen) { max-width: 1440px; }
.fcount { font-size: 13px; font-weight: 800; color: var(--hot); margin-left: 2px; }
.dexbtn {
  margin-left: auto; font-size: 12px; font-weight: 700; padding: 8px 15px; border-radius: 9px;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
}
.dexbtn:hover:not(:disabled) { border-color: var(--hot); }
.formscreen .dbar2 .go { padding: 9px 26px; border-radius: 10px; }

.fbody { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); flex: 1; min-height: 0; }
.fleft {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 18px;
  border-right: 1px solid var(--line); background: #f7f8fc; overflow-y: auto;
}
.fright { display: flex; flex-direction: column; min-width: 0; padding: 12px 16px 0; }

.fsec { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; }
.fsec:first-child { margin-top: 0; }
.fsec b { font-size: 13px; }
.fsec .why { font-size: 11px; color: var(--dim); }

/* ── 진형 ─────────────────────────────────────────── */
.lanes { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.lane { display: flex; align-items: stretch; gap: 10px; }
.lname {
  flex: none; width: 42px; display: grid; place-items: center; font-size: 11px; font-weight: 800;
  color: var(--dim); background: #eceef6; border-radius: 8px;
}
.lslots { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lempty {
  padding: 13px; font-size: 11px; color: #aeb2c2; text-align: center;
  border: 1px dashed #cdd2e0; border-radius: 10px;
}
.lhero {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px;
  background: #fff; border: 1px solid var(--line); border-left: 3px solid #c3c8d8; border-radius: 10px;
}
.lhero.home { border-left-color: var(--hp); }
.lhero .art { width: 46px !important; height: 46px !important; border-radius: 8px; background: #f1f2f8; }
.ltop { display: flex; align-items: center; gap: 5px; }
.ltop b { font-size: 13.5px; }
.lico { font-style: normal; display: none; }
.lico:has(img) { display: block; width: 16px; height: 16px; }
.lico img { width: 100%; height: 100%; object-fit: contain; }
.lhome { font-size: 10.5px; color: var(--dim); }
.lhero.home .lhome { color: #2f8a63; font-weight: 700; }
.lmove { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.mv {
  font-size: 10.5px; padding: 3px 8px; border-radius: 7px;
  background: #f1f2f8; border: 1px solid var(--line); color: #6f7285;
}
.mv:hover:not(:disabled) { border-color: var(--hot); color: var(--ink); }
.mv.drop { color: #c2455c; }

/* ── 함께 가면 ────────────────────────────────────── */
.syn { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.sline {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 11px; font-size: 12.5px;
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
}
.sline .why { font-size: 11px; color: var(--dim); margin-left: auto; text-align: right; }
.snat { display: flex; gap: 4px; flex-wrap: wrap; }
.apnum2 { font-size: 17px; font-weight: 900; color: var(--hot); }
.syn > .why { font-size: 11.5px; color: var(--dim); padding: 8px 2px; }

/* ── 덱 ───────────────────────────────────────────── */
.fdeck { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.dkrow { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.dkwho { font-size: 11px; font-weight: 800; color: var(--dim); min-width: 52px; }
.dkcard {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  padding: 3px 9px 3px 4px; border-radius: 99px;
  background: #fff; border: 1px solid var(--line); color: #4b4e5e;
}
.dkcard i {
  display: grid; place-items: center; width: 16px; height: 16px; flex: none;
  font-style: normal; font-size: 10px; font-weight: 900;
  color: #16151c; background: var(--gold); border-radius: 50%;
}

/* ── 고르는 칸 ────────────────────────────────────── */
.phead { display: flex; gap: 8px; padding-bottom: 10px; }
.phead .dsearch { margin-left: 0; width: 220px; }
.pgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 10px; overflow-y: auto; padding: 2px 4px 16px 2px; align-content: start;
}
.pcard { position: relative; }
.pface {
  position: relative; display: block; width: 100%; padding: 0; overflow: hidden;
  aspect-ratio: 172 / 246; border-radius: 10px;
  background: #dfe2ec; border: 1px solid #d3d7e4; transition: .18s;
}
.pface:hover { transform: translateY(-3px); box-shadow: 0 10px 22px #2b2f4526; border-color: #b6bbcc; }
.pcard.on .pface { border-color: var(--hot); box-shadow: 0 0 0 2px #ff9a2f55; }
.pface .art { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border-radius: 0; background: transparent; }
.pface .art img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pface .art-ph { width: 100%; height: 100%; font-size: 17px; }
.pinfo {
  position: absolute; right: 6px; bottom: 6px; z-index: 3; font-size: 9.5px; padding: 2px 7px;
  border-radius: 6px; background: #ffffffd9; border: 1px solid var(--line); color: #4b4e5e;
}
.pinfo:hover { border-color: var(--hot); }
.formscreen .more { grid-column: 1 / -1; padding: 30px; text-align: center; color: var(--dim); font-size: 13px; }

/* 도감 아래 — 고른 사람을 알려 주고 편성으로 돌아간다 */
.dsaid { font-size: 12.5px; color: var(--dim); }
.dfoot .dsaid { margin-right: auto; }


/* ══ 보상 ═══════════════════════════════════════════════════════════════
   누구의 무슨 카드인지가 첫눈에 보여야 한다 — 이름만 떠 있으면 고를 수가 없다. */
.rewardscreen {
  --ink: #23242b; --dim: #7b7d8c; --line: #dfe1ea; --hot: #ff9a2f; --sel: #2e3140;
  color: var(--ink); background: linear-gradient(180deg, #fbfbfe 0, #eceef5 100%);
  border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; min-height: 60vh;
}
main:has(.rewardscreen) { max-width: 1240px; }
.rewardscreen .dbar2 {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: #ffffffcc;
}
.rwhy { font-size: 12px; color: var(--dim); }
.rewardscreen .dexbtn { margin-left: auto; }
.rbody { padding: 16px 18px 22px; display: flex; flex-direction: column; gap: 4px; }
.rsec { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
.rsec:first-child { margin-top: 0; }
.rsec b { font-size: 14px; }
.rsec .why { font-size: 11.5px; color: var(--dim); }
.rnone { font-size: 12.5px; color: var(--dim); margin: 6px 0 0; }

.rrow { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.rpick { display: flex; flex-direction: column; gap: 6px; width: 190px; }
/* 누구 카드인가 — 초상과 이름을 카드 위에 붙인다 */
.rwho {
  display: flex; align-items: center; gap: 7px; padding: 5px 9px;
  background: #fff; border: 1px solid var(--line); border-radius: 99px;
}
.rwho .art { width: 26px !important; height: 26px !important; border-radius: 50%; background: #f1f2f8; }
.rwho b { font-size: 12.5px; }
.rpick .gcard { width: 100%; cursor: pointer; transition: .15s; }
.rpick .gcard:hover { transform: translateY(-4px); box-shadow: 0 12px 26px #2b2f4533; }

/* 번뜩임 — 다섯 중 셋 */
.flashrow { align-items: stretch; }
.fcard {
  width: 252px; text-align: left; display: flex; flex-direction: column; gap: 5px;
  padding: 12px 14px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
}
.fcard:hover { border-color: var(--hot); transform: translateY(-3px); box-shadow: 0 10px 22px #2b2f4522; }
.fhead2 { display: flex; align-items: baseline; gap: 6px; }
.fnum { font-size: 14px; color: var(--hot); }
.fhead2 b { font-size: 13px; }
.fko { font-size: 11.5px; color: var(--dim); }
.ftext2 { margin: 2px 0 0 !important; font-size: 12.5px; line-height: 1.7; word-break: keep-all; }
.fbefore {
  margin: auto 0 0; padding-top: 7px; border-top: 1px dashed var(--line);
  font-size: 11px; color: #9aa0b4; word-break: keep-all;
}

/* ══ 교체 · 끝 ══════════════════════════════════════════════════════════
   리뉴얼에서 빠져 있던 두 화면. 도감·보상과 같은 결로 맞춘다. */
.endscreen, .swapscreen {
  --ink: #23242b; --dim: #7b7d8c; --line: #dfe1ea; --hot: #ff9a2f; --sel: #2e3140;
  color: var(--ink); background: linear-gradient(180deg, #fbfbfe 0, #eceef5 100%);
  border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; min-height: 56vh;
}
main:has(.endscreen), main:has(.swapscreen) { max-width: 1100px; }
.endscreen .dbar2, .swapscreen .dbar2 {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: #ffffffcc;
}
.endscreen .go { margin-left: auto; padding: 9px 26px; border-radius: 10px; }

.erow { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 8px; }
.ehero {
  display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
}
.ehero .art { width: 44px !important; height: 44px !important; border-radius: 9px; background: #f1f2f8; }
.ehero b { display: block; font-size: 13.5px; }
.ehero .why { font-size: 11px; color: var(--dim); }
.ehero.down { opacity: .6; border-style: dashed; }
.ehero.down .art { filter: grayscale(1); }
.ehero.down .why { color: #c2455c; }

.estat {
  display: flex; flex-direction: column; min-width: 96px; padding: 9px 13px;
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
}
.estat small { font-size: 10px; letter-spacing: .1em; color: var(--dim); }
.estat strong { font-size: 19px; margin-top: 1px; }
.estat .why { font-size: 10px; color: #a9adbc; }

.dkcard.lit { border-color: var(--hot); background: #fff8ee; }
.dkcard em { font-style: normal; color: var(--hot); font-weight: 900; }
.endscreen .sline {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
  padding: 6px 11px; background: #fff; border: 1px solid var(--line); border-radius: 99px;
}

/* ══ 골디의 상점 ═════════════════════════════════════════════════════════
   보상 화면과 같은 결에 금빛을 얹는다. 값은 카드 아래 큰 단추 — 무엇이 얼마인지가 첫눈에. */
.shopscreen { --gold: #c8932f; --gold-soft: #fff4dc; }
.sgold {
  margin-left: 8px; padding: 3px 10px; border-radius: 99px;
  background: var(--gold-soft, #fff4dc); color: #8a5a10; font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.shost {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--line); background: linear-gradient(90deg, #fff7e6, #ffffff00);
}
.sface {
  width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #ffe7a3, #d9a441 70%); color: #7a4d06; font-size: 20px;
  box-shadow: inset 0 -3px 0 #b9832a;
}
.stalk { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.stalk b { font-size: 12px; color: #8a5a10; }
.sline2 { margin: 0; font-size: 13px; line-height: 1.6; word-break: keep-all; }
.shaggle {
  flex: none; font-size: 12px; padding: 6px 10px; border-radius: 8px;
  background: #fff; border: 1px solid var(--line); color: var(--dim);
}
.shaggle:hover { border-color: var(--gold); color: #8a5a10; }
.sitem .gcard { cursor: default; }
.sitem .gcard:hover { transform: none; box-shadow: none; }
.sitem.sold .gcard { filter: grayscale(.8); opacity: .55; }
.sblurb { margin: 0; font-size: 11px; line-height: 1.5; color: var(--dim); word-break: keep-all; }
.sprice {
  padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 700;
  background: #2e3140; color: #ffe2a0; border: 0;
}
.sprice:hover:not(:disabled) { background: #3a3e52; }
.sprice.short { background: #e9eaf1; color: #9aa0b4; }
.sprice:disabled { background: #e9eaf1; color: #9aa0b4; cursor: default; }
.sgrade { font-size: 12px; }
.sgrade.g-전설 { color: #b07a12; } .sgrade.g-희귀 { color: #6a5bd6; }
.sgrade.g-고급 { color: #2f8f6a; } .sgrade.g-일반 { color: #7b7d8c; }
.srmbtn {
  align-self: flex-start; margin-top: 8px; padding: 8px 14px; border-radius: 10px; font-size: 13px;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
}
.srmbtn.on { border-color: var(--bad, #d9737f); color: var(--bad, #d9737f); }
.srmbtn:disabled { opacity: .5; cursor: default; }
.sdeck .rpick.small { width: 132px; }
.sdeck .gcard { cursor: pointer; }
@media (max-width: 640px) {
  .shopscreen .rpick { width: calc(50% - 7px); }
  .sdeck .rpick.small { width: calc(33.3% - 10px); }
  .shost { flex-wrap: wrap; }
}
/* 좁은 화면에서 낱말이 중간에 꺾이지 않게 · 값 단추는 카드 아래 한 줄로 */
.shopscreen .dbar2 { flex-wrap: wrap; row-gap: 6px; }
.shopscreen .dtitle, .shopscreen .dexbtn, .shopscreen .rsec b { white-space: nowrap; flex: none; }
.shopscreen .rsec { flex-wrap: wrap; }
.sitem { align-self: stretch; }
.sitem .sprice { margin-top: auto; }

/* ══ 캠프 ═════════════════════════════════════════════════════════════════
   모닥불처럼 둘 중 하나. 쉬면 얼마나 차는지 체력 막대 위에 미리 그린다. */
.campscreen .dbar2 { flex-wrap: wrap; row-gap: 6px; }
.campscreen .dtitle, .campscreen .dexbtn, .campscreen .rsec b { white-space: nowrap; flex: none; }
.campscreen .rsec { flex-wrap: wrap; }
.cmember {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-width: 220px; flex: 1 1 220px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
}
.cmember .art { width: 40px !important; height: 40px !important; border-radius: 50%; background: #f1f2f8; flex: none; }
.cmember.down { opacity: .6; }
.cinfo { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.cinfo b { font-size: 13px; }
.chp { position: relative; height: 8px; border-radius: 99px; background: #eceef5; overflow: hidden; }
.chp i { position: absolute; left: 0; top: 0; bottom: 0; background: #5bbf8e; border-radius: 99px; }
.chp em { position: absolute; top: 0; bottom: 0; background: #a9e6c6; }
.cnum { font-size: 11.5px; color: var(--dim); }
.cacts { align-items: stretch; }
.cact {
  flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--ink);
}
.cact b { font-size: 15px; }
.cact span { font-size: 12px; color: var(--dim); word-break: keep-all; }
.cact:hover:not(:disabled) { border-color: var(--hot); transform: translateY(-2px); }
.cact.on { border-color: var(--hot); background: #fff6ec; }
.cact:disabled:not(.on) { opacity: .5; cursor: default; }
.cshop {
  margin-top: 8px; display: flex; align-items: center; gap: 12px; text-align: left; max-width: 460px;
  padding: 12px 14px; border-radius: 12px; background: linear-gradient(90deg, #fff4dc, #fff); border: 1px solid #f0d9a8; color: var(--ink);
}
.cshop:hover { border-color: #c8932f; }
.cshop .ctext { display: flex; flex-direction: column; gap: 2px; }
.cshop .ctext b { font-size: 14px; }
.cshop .ctext span { font-size: 12px; color: #8a5a10; }
.campscreen .sface { width: 36px; height: 36px; font-size: 16px; }

/* ══ 장비 ═════════════════════════════════════════════════════════════════
   칸 · 등급 · 스탯이 첫눈에. 아직 안 도는 효과는 흐리게, 그렇다고 적어서. */
.ecard {
  width: 230px; display: flex; flex-direction: column; gap: 5px; padding: 12px 13px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line); border-top: 4px solid #b9bccb;
}
.ecard.g-전설 { border-top-color: #d9a441; } .ecard.g-희귀 { border-top-color: #7a6be0; }
.ecard.g-고급 { border-top-color: #3aa37a; } .ecard.g-일반 { border-top-color: #9aa0b4; }
.ecard.sold { opacity: .5; }
.ehead { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ehead b { font-size: 13.5px; }
.eslot { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: #f1f2f8; color: var(--dim); }
.egrade { margin-left: auto; font-size: 11px; color: var(--dim); }
.eqstat { margin: 0; font-size: 13px; font-weight: 700; color: #2f6f55; }
.eaff { margin: 0; font-size: 11.5px; color: #b0406a; word-break: keep-all; }
.eeff { margin: 0; font-size: 11.5px; line-height: 1.55; color: #9aa0b4; word-break: keep-all; }
.eoff { font-size: 10.5px; padding: 0 5px; border-radius: 4px; background: #f1f2f8; color: #7b7d8c; }
.eblurb { margin: 0; font-size: 11px; color: var(--dim); word-break: keep-all; }
.ecard .sprice { margin-top: auto; }
.gearpanel { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.grows { display: flex; flex-direction: column; gap: 8px; }
.grow { display: flex; align-items: stretch; gap: 10px; padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.gwho { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 56px; flex: none; }
.gwho .art { width: 28px !important; height: 28px !important; border-radius: 50%; background: #f1f2f8; }
.gwho b { font-size: 11.5px; text-align: center; }
.gslots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex: 1; min-width: 0; }
.gslot { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border-radius: 9px; background: #f6f7fb; border: 1px dashed #d6d9e4; min-width: 0; }
.gslot.full { background: #fff; border-style: solid; }
.gsl { font-size: 10.5px; color: var(--dim); }
.gslot b { font-size: 12px; word-break: keep-all; }
.gst { font-size: 10.5px; color: #2f6f55; }
.gempty { font-size: 11px; color: #b4b8c8; }
.gout { align-self: flex-start; margin-top: 2px; font-size: 10.5px; padding: 2px 7px; border-radius: 6px; background: #fff; border: 1px solid var(--line); color: var(--dim); }
.gbagh { margin: 4px 0 0; font-size: 12px; color: var(--dim); }
.gto { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.gtobtn { font-size: 11.5px; padding: 5px 8px; border-radius: 8px; background: #2e3140; color: #fff; border: 0; }
.gtobtn.aff { background: #b0406a; }
.gtobtn:disabled { background: #e9eaf1; color: #9aa0b4; cursor: default; }
@media (max-width: 640px) {
  .ecard { width: 100%; }
  .grow { flex-direction: column; gap: 6px; }
  .gwho { flex-direction: row; width: auto; justify-content: flex-start; }
  .gslot { padding: 5px 6px; }
  .gslot b { font-size: 11px; }
}

/* ══ 이벤트 ═════════════════════════════════════════════════════════════
   장면 — 선택지 — 결과. 선택지마다 치르는 것과 얻는 것을 결과 낱말 그대로 적는다.
   보상·캠프와 같은 밝은 틀이다 — 캠프의 「쉬기·수련」 단추(.cact)와 같은 결로 칠한다. */
.evgold { margin-left: auto; margin-right: 10px; font-weight: 800; color: #b07a12; }
.evscene { display: flex; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line); }
.evscene .art { flex: none; }
.evq { flex: none; width: 92px; height: 92px; display: grid; place-items: center; font-size: 44px; font-weight: 900;
  color: #c8962a; border: 2px dashed #e6c878; border-radius: 16px; }
.evtext p { margin: 4px 0 0; line-height: 1.7; color: var(--ink); }
.evnpc { color: #b07a12; }
.evparty { gap: 8px; }
.evparty .cmember { flex: 1 1 0; min-width: 0; }
.evopts { display: flex; flex-direction: column; gap: 8px; }
.evopt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; text-align: left; padding: 12px 16px;
  border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.evopt:hover:not(:disabled) { border-color: var(--hot); transform: translateY(-1px); }
.evopt.leave { background: transparent; border-style: dashed; }
.evopt.locked { opacity: .5; cursor: default; }
.evlabel { font-size: 15px; color: var(--ink); }
.evout { color: var(--dim); font-size: 13px; }
.evnote { width: 100%; font-size: 12px; color: #b0433b; margin: 0; }
.evlock { width: 100%; font-size: 12px; color: #b0433b; }
.evby { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; border-radius: 99px;
  background: #f1eaff; border: 1px solid #b89be6; color: #4b3a7a; font-size: 12px; }
.evresult { padding: 12px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.evchose { color: #b07a12; }
.evsay { margin: 6px 0; font-style: italic; color: var(--ink); }
.evlog { margin: 4px 0; color: var(--dim); }
.evpick { display: flex; flex-direction: column; gap: 10px; }
.evpickhero { cursor: pointer; border: 1px solid var(--line); background: #fff; }
.evpickhero:hover { border-color: var(--hot); }
.evforks { gap: 14px; }
.evfork { flex: 1 1 0; text-align: left; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line);
  color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 6px; }
.evfork:hover { border-color: var(--hot); }
.evfork p { margin: 0; font-size: 13px; color: var(--dim); line-height: 1.6; }
.evkind { font-size: 12px; color: #b07a12; }