/* IconPicker — 아이콘 고르개 팝오버 */
.ip{
  --ip-bg:#ffffff; --ip-ink:#16202c; --ip-muted:#66768a;
  --ip-line:#d7dfea; --ip-accent:#1857a4;
  --ip-lift:rgba(255,255,255,.92); --ip-drop:rgba(16,32,48,.16);
  position:fixed;z-index:200;width:296px;
  display:flex;flex-direction:column;
  background:var(--ip-bg);color:var(--ip-ink);
  border:1px solid var(--ip-line);border-radius:11px;
  box-shadow:0 16px 40px var(--ip-drop),0 3px 8px var(--ip-drop),inset 0 1px 0 var(--ip-lift);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  .ip{--ip-bg:#1d252f; --ip-ink:#e6ecf3; --ip-muted:#93a3b6;
      --ip-line:#2b3644; --ip-accent:#77b0f0;
      --ip-lift:rgba(255,255,255,.07); --ip-drop:rgba(0,0,0,.5)}
}
.ip *{box-sizing:border-box}

/* 갈래 — 단색 아이콘 · 이모지 · 만든 것 */
.ip-tabs{flex:none;display:flex;align-items:center;gap:2px;
  padding:8px 9px 0;border-bottom:1px solid var(--ip-line)}
.ip-tab{
  font:inherit;font-size:12.5px;font-weight:700;padding:7px 10px 8px;
  background:none;border:0;border-bottom:2px solid transparent;
  color:var(--ip-muted);cursor:pointer;white-space:nowrap}
.ip-tab:hover{color:var(--ip-ink)}
.ip-tab.is-cur{color:var(--ip-accent);border-bottom-color:var(--ip-accent)}
.ip-tab:focus-visible{outline:2px solid var(--ip-accent);outline-offset:-2px}
.ip-none{
  margin-left:auto;margin-bottom:5px;
  font:inherit;font-size:11.5px;font-weight:700;padding:4px 9px;
  border:1px solid var(--ip-line);border-radius:6px;cursor:pointer;
  background:var(--ip-bg);color:var(--ip-muted);
  box-shadow:0 1px 2px var(--ip-drop),inset 0 1px 0 var(--ip-lift)}
.ip-none:hover{border-color:var(--ip-accent);color:var(--ip-accent)}

/* 색 — 단색 아이콘과 만든 것에만 쓴다. 이모지는 글꼴이 색까지 들고 있어 못 바꾼다. */
.ip-colors{flex:none;display:flex;gap:5px;padding:9px 11px;flex-wrap:wrap;
  border-bottom:1px solid var(--ip-line);box-shadow:0 1px 0 var(--ip-lift)}
.ip-colors[hidden]{display:none}
.ip-color{
  width:20px;height:20px;padding:0;border-radius:50%;cursor:pointer;
  border:2px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px var(--ip-drop)}
.ip-color:hover{transform:scale(1.12)}
.ip-color.is-cur{border-color:var(--ip-bg);
  outline:2px solid var(--ip-accent);outline-offset:0}
.ip-color:focus-visible{outline:2px solid var(--ip-accent);outline-offset:2px}

.ip-find{
  flex:none;margin:9px 9px 0;width:calc(100% - 18px);
  height:30px;padding:0 10px;font:inherit;font-size:13.5px;
  border:1px solid var(--ip-line);border-radius:7px;
  background:var(--ip-bg);color:var(--ip-ink);
  box-shadow:inset 0 1px 2px rgba(16,32,48,.07)}
.ip-find:focus{outline:0;border-color:var(--ip-accent);
  box-shadow:inset 0 1px 2px rgba(16,32,48,.07),0 0 0 3px color-mix(in srgb,var(--ip-accent) 22%,transparent)}
.ip-none{
  flex:none;font:inherit;font-size:12px;font-weight:700;padding:0 11px;
  border:1px solid var(--ip-line);border-radius:7px;cursor:pointer;
  background:var(--ip-bg);color:var(--ip-muted);
  box-shadow:0 1px 2px var(--ip-drop),inset 0 1px 0 var(--ip-lift)}
.ip-none:hover{border-color:var(--ip-accent);color:var(--ip-accent)}

.ip-body{flex:1;min-height:0;max-height:302px;overflow-y:auto;padding:4px 9px 11px}
.ip-body::-webkit-scrollbar{width:10px}
.ip-body::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ip-muted) 32%,transparent);
  border:3px solid transparent;background-clip:content-box;border-radius:6px}

.ip-label{
  margin:11px 2px 6px;padding-bottom:5px;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ip-muted);
  border-bottom:1px solid var(--ip-line);box-shadow:0 1px 0 var(--ip-lift)}
.ip-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.ip-cell{
  /* min-width:auto 가 기본이라 이모지 폭이 1fr 을 밀어내 마지막 칸이 잘린다 */
  min-width:0;
  aspect-ratio:1;display:grid;place-items:center;
  font-size:18px;line-height:1;
  background:none;border:1px solid transparent;border-radius:7px;cursor:pointer}
.ip-cell:hover{background:color-mix(in srgb,var(--ip-accent) 12%,transparent);
  border-color:color-mix(in srgb,var(--ip-accent) 35%,transparent)}
.ip-cell.is-cur{border-color:var(--ip-accent);
  background:color-mix(in srgb,var(--ip-accent) 16%,transparent)}
.ip-cell:focus-visible{outline:2px solid var(--ip-accent);outline-offset:-2px}
.ip-empty{padding:26px 8px;text-align:center;color:var(--ip-muted);font-size:13px}

/* 단색 아이콘은 SVG 다. 색은 svg 자신의 color 로 들어간다. */
.ip-cell svg{width:20px;height:20px;display:block}
.ip-body{padding-top:0}