/* 트스 정수량 (essence.html / en/essence.html) */

/* ── 드래곤 검색 ── */
/* 검색 목록이 섹션 밖으로 펼쳐지도록 */
.es-sec-pick{overflow:visible}
.es-sec-pick>.u-sec-hd{border-radius:var(--u-r-lg) var(--u-r-lg) 0 0}
.es-combo{position:relative}
.es-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;margin:0;padding:4px;list-style:none;
  max-height:340px;overflow-y:auto;background:var(--sf);border:1px solid var(--bd2);border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.28)}
.es-list li[role=option]{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;cursor:pointer}
.es-list li[role=option]:hover,.es-list li[aria-selected=true]{background:var(--accent-bg)}
.es-list .es-none{padding:14px 8px;text-align:center;font-size:13px;color:var(--dim)}
.es-oimg{width:32px;height:32px;max-width:none;border-radius:6px;object-fit:cover;background:var(--sf2);flex-shrink:0}
.es-oname{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.es-elem{width:20px;height:20px;max-width:none;border-radius:4px;object-fit:cover;flex-shrink:0}
.es-skill{width:17px;height:17px;max-width:none;flex-shrink:0}

/* ── 선택한 드래곤 ── */
.es-picked{display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 12px;
  border:1px solid var(--bd2);border-radius:8px;background:var(--sf2)}
.es-picked[hidden]{display:none}
.es-pimg{width:52px;height:52px;max-width:none;border-radius:8px;object-fit:cover;background:var(--sf);flex-shrink:0}
.es-pbody{min-width:0}
.es-pname{font-size:15px;font-weight:700}
.es-grade{margin-left:4px;font-size:11.5px;font-weight:600;color:var(--dim);white-space:nowrap}
.es-pmeta{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12.5px;color:var(--dim)}

/* ── 등급 ── */
.es-grades{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.u .es-grades input{text-align:center;font-family:var(--u-mono);font-variant-numeric:tabular-nums}
.u .es-grades input.bad{border-color:var(--bad)}

/* ── 결과 ── */
.es-out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.es-item{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--bd2);
  border-radius:8px;background:var(--sf2)}
.es-ilbl{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--dim)}
.es-ilbl i{width:9px;height:9px;border-radius:50%;background:var(--es-c);flex-shrink:0}
.es-item b{font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.es-moon{--es-c:#a78bfa}
.es-earth{--es-c:#b8a14a}
.es-fire{--es-c:#f2704f}
.es-sun{--es-c:#f0b429}
.es-water{--es-c:#4aa8f0}
.es-black{--es-c:#9aa3b5}
.es-msg{margin-top:12px}
.es-msg[hidden]{display:none}

@media (max-width:760px){
  .es-item{padding:10px 12px}
  .es-item b{font-size:20px}
}