/* ============================================================
   이모지 피커 (app-emoji.js)
   ------------------------------------------------------------
   이모지 칩(현재 값 = 버튼) → 팝오버(검색 + 카테고리 레일 + 그리드 + 하단 이름).
   body에 붙여 fixed로 띄운다 — 패널이 overflow:hidden이라 안쪽에 두면 잘린다.
   ============================================================ */

/* 원본 input은 숨기되 DOM에 남겨 저장·dirty diff에 그대로 잡히게 한다 */
.emo-src{display:none}

/* 이모지 칩 = 현재 값이자 피커 버튼. 별도 [＋] 없이 이것만 둔다. */
.emo-chip{
  width:44px; height:38px; flex:none; display:grid; place-items:center; cursor:pointer;
  font-size:19px; line-height:1;
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:10px; transition:.13s;
}
.emo-chip:hover{border-color:var(--a1); background:var(--a1-soft); transform:translateY(-1px)}
.emo-chip:focus-visible{outline:2px solid var(--a1); outline-offset:2px}
.emo-chip.empty{opacity:.4}          /* 아직 안 고른 상태 */

/* 미리보기 안의 이모지 — 클릭하면 그 자리에서 바꾼다 */
.emo-live{cursor:pointer; border-radius:5px; padding:0 2px; transition:.12s}
.emo-live:hover{background:var(--a1-soft); box-shadow:0 0 0 1px var(--a1)}

/* 여러 개를 담는 목록(스타보드) — 개수가 가변이라 여기서만 [＋]를 쓴다.
   단일 값 자리는 칩 자체가 버튼이라 [＋]가 필요 없다. */
.emo-list{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.emo-item{
  position:relative; display:grid; place-items:center; width:44px; height:38px;
  font-size:19px; background:var(--surface-2); border:1px solid var(--line-strong);
  border-radius:10px; transition:.13s;
}
.emo-item:hover{border-color:var(--a1)}
.emo-item .emo-live{padding:0}
.emo-x{
  position:absolute; top:-6px; right:-6px; width:18px; height:18px; display:grid; place-items:center;
  font-size:9px; line-height:1; cursor:pointer; color:var(--ink-dim);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:50%;
  opacity:0; transition:.12s;
}
.emo-item:hover .emo-x, .emo-x:focus-visible{opacity:1}
.emo-x:hover{color:var(--crit); border-color:var(--crit)}
.emo-add{
  width:44px; height:38px; display:grid; place-items:center; cursor:pointer;
  font-family:var(--sans); font-size:16px; color:var(--ink-faint);
  background:none; border:1px dashed var(--line-strong); border-radius:10px; transition:.13s;
}
.emo-add:hover{color:var(--a1); border-color:var(--a1); border-style:solid; background:var(--a1-soft)}

.emo-pop{
  position:fixed; z-index:120; width:320px; height:380px; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden; animation:rise .14s ease;
}
.emo-head{padding:10px; border-bottom:1px solid var(--line)}
.emo-q{
  width:100%; font-family:var(--sans); font-size:13.5px; color:var(--ink);
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:9px; padding:8px 11px;
}
.emo-q:focus{outline:0; border-color:var(--a1); box-shadow:0 0 0 3px var(--a1-soft)}

.emo-body{flex:1; min-height:0; display:flex}
/* 카테고리 레일 — 아이콘만(라벨은 title/aria-label로) */
.emo-cats{
  flex:none; width:42px; display:flex; flex-direction:column; gap:2px; padding:6px 4px;
  border-right:1px solid var(--line); overflow-y:auto;
}
.emo-cat{
  width:34px; height:34px; flex:none; display:grid; place-items:center; cursor:pointer;
  font-size:17px; background:none; border:0; border-radius:9px; opacity:.55; transition:.13s;
}
.emo-cat:hover{opacity:1; background:var(--surface-2)}
.emo-cat.on{opacity:1; background:var(--a1-soft)}

.emo-grid{
  flex:1; min-width:0; overflow-y:auto; padding:8px;
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px; align-content:start;
}
.emo-i{
  width:100%; aspect-ratio:1; display:grid; place-items:center; cursor:pointer;
  font-size:19px; line-height:1; background:none; border:0; border-radius:8px; transition:.1s;
}
.emo-i:hover{background:var(--a1-soft); transform:scale(1.12)}
.emo-i:focus-visible{outline:2px solid var(--a1); outline-offset:-2px}
.emo-none{grid-column:1/-1; padding:24px 8px; text-align:center; font-size:12.5px; color:var(--ink-faint)}

/* 하단: 마우스를 올린 이모지와 그 이름 */
.emo-foot{
  flex:none; display:flex; align-items:center; gap:9px; min-height:38px;
  padding:8px 12px; border-top:1px solid var(--line); background:var(--surface-2);
}
.emo-prev{font-size:19px; line-height:1}
.emo-name{
  font-size:11.5px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}