:root{--bg:#fff;--fg:#16181d;--mut:#6b7280;--line:#e5e7eb;--card:#f9fafb;--acc:#2563eb;--chk:#dfe3e8}
/* 🔴 3벌 구조입니다 [실측 2026-08-26 · 전에는 미디어쿼리 한 벌뿐이라
   우리 토글(data-theme)로는 다크가 «전혀» 안 됐습니다].
   ① 기본 = 라이트  ② OS 가 다크일 때(단 토글로 라이트를 고르면 제외)
   ③ 토글로 다크를 고른 경우 — 셋을 다 두어야 어느 경로로 와도 맞습니다. */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0f1115;--fg:#e8eaed;--mut:#9aa0a6;--line:#2a2e37;--card:#161a21;--acc:#7aa2ff;--chk:#242a33}}
:root[data-theme=dark]{--bg:#0f1115;--fg:#e8eaed;--mut:#9aa0a6;--line:#2a2e37;--card:#161a21;--acc:#7aa2ff;--chk:#242a33}
*{box-sizing:border-box}
[data-c],.art,pre,code,.cp{direction:ltr;unicode-bidi:isolate-override}.art,pre{text-align:left}[dir=rtl] .vs>summary:before{transform:rotate(135deg)}[dir=rtl] .vs[open]>summary:before{transform:rotate(45deg)}[dir=rtl] .go svg,[dir=rtl] .arrow svg{transform:scaleX(-1)}[dir=rtl] .feature:hover .go svg,[dir=rtl] .card:hover .arrow svg{transform:scaleX(-1) translateX(2px)}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:960px;margin:0 auto;padding:1rem 1rem 7rem}
h1{font-size:1.5rem;margin:.2rem 0 .3rem}
h2{font-size:1.05rem;margin:1.4rem 0 .5rem}
.crumb{font-size:.85rem;color:var(--mut);margin-bottom:.4rem}
.crumb a{color:var(--acc);text-decoration:none}
.lead{color:var(--mut);margin:.2rem 0 1rem}
undefined
.stage{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;justify-content:center}
.cvcol{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.layers{flex:1 1 100%;max-width:min(820px,92vw);border:1px solid var(--line);border-radius:12px;padding:.5rem;background:var(--card)}
.layers b{font-size:.85rem;color:var(--mut);display:block;margin-bottom:.4rem}
/* 🔴 가로로 채우고 폭이 차면 다음 줄로 넘깁니다 [운영자 요청 2026-08-14]. */
.layers ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem;max-height:186px;overflow:auto}
.layers li{display:flex;align-items:center;gap:.3rem;padding:.22rem .4rem;border:1px solid var(--line);border-radius:9px;cursor:pointer;font-size:.8rem;flex:0 0 auto}
.layers li:hover{background:var(--bg)}
.layers li[aria-selected=true]{background:var(--acc);border-color:var(--acc);color:#fff}
.layers li.over{outline:2px dashed var(--acc);outline-offset:-2px}
.layers li img{width:26px;height:26px;object-fit:contain;background-color:var(--bg);background-image:linear-gradient(45deg,var(--chk) 25%,transparent 25%),linear-gradient(-45deg,var(--chk) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--chk) 75%),linear-gradient(-45deg,transparent 75%,var(--chk) 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;border-radius:6px;flex:0 0 auto}
.layers li span{flex:0 0 auto;min-width:1.1em;text-align:center}
.layers li button{border:0;background:none;color:inherit;cursor:pointer;font-size:1rem;line-height:1;padding:0 .1rem}
.layers .none{color:var(--mut);font-size:.8rem;padding:.3rem;border:0}
.presets{flex:1 1 100%;max-width:min(820px,92vw);border:1px solid var(--line);border-radius:12px;padding:.5rem;background:var(--card)}
.presets b{font-size:.85rem;color:var(--mut);display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem}
.presets b button{border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:8px;padding:.24rem .6rem;font-size:.82rem;cursor:pointer}
.presets .lock{color:var(--mut);font-size:.76rem;margin:.1rem 0 .45rem;line-height:1.45}
.presets ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;max-height:170px;overflow:auto}
.presets li{position:relative;flex:0 0 auto}
.presets li img{width:52px;height:52px;object-fit:contain;border:1px solid var(--line);border-radius:9px;cursor:pointer;background-color:var(--bg);background-image:linear-gradient(45deg,var(--chk) 25%,transparent 25%),linear-gradient(-45deg,var(--chk) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--chk) 75%),linear-gradient(-45deg,transparent 75%,var(--chk) 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}
.presets li button{position:absolute;top:-5px;inset-inline-end:-5px;width:18px;height:18px;line-height:16px;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:50%;font-size:.72rem;cursor:pointer;padding:0}
.presets .none{color:var(--mut);font-size:.8rem;padding:.2rem}
#cv{width:min(420px,86vw);height:auto;aspect-ratio:1;border:1px dashed var(--line);border-radius:14px;background-color:var(--bg);background-image:linear-gradient(45deg,var(--chk) 25%,transparent 25%),linear-gradient(-45deg,var(--chk) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--chk) 75%),linear-gradient(-45deg,transparent 75%,var(--chk) 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;touch-action:none}
.ctl{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.ctl button,.ctl label{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:9px;padding:.42rem .7rem;font-size:.9rem;cursor:pointer}
.ctl button[disabled]{opacity:.4;cursor:default}
.ctl .primary{background:var(--acc);border-color:var(--acc);color:#fff}
.ctl .ok{background:#16a34a;border-color:#16a34a;color:#fff}
.ctl input[type=color]{width:26px;height:22px;border:0;background:none;padding:0;vertical-align:-3px;cursor:pointer}
.ctl input[type=range]{width:96px;vertical-align:-4px}
.ctl select{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:9px;padding:.42rem .5rem;font-size:.9rem;cursor:pointer}
.modes button[aria-pressed=true]{background:var(--acc);border-color:var(--acc);color:#fff}
#q{width:100%;padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--fg);font-size:1rem}
.eg{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:.25rem;max-height:31vh;overflow:auto;margin-top:.5rem;content-visibility:auto}
.eg button{line-height:0;padding:.24rem;border:0;background:none;cursor:pointer;border-radius:8px}
.eg button img{width:30px;height:30px;display:block;margin:0 auto}
.eg button:hover{background:var(--card)}
.eg button[aria-pressed=true]{background:var(--acc);color:#fff}
.pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:.4rem;margin-top:.5rem;min-height:74px}
.pal button{border:1px solid var(--line);background-color:var(--bg);background-image:linear-gradient(45deg,var(--chk) 25%,transparent 25%),linear-gradient(-45deg,var(--chk) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--chk) 75%),linear-gradient(-45deg,transparent 75%,var(--chk) 75%);background-size:12px 12px;background-position:0 0,0 6px,6px -6px,-6px 0;border-radius:10px;padding:.3rem;cursor:pointer;aspect-ratio:1}
.pal img{width:100%;height:100%;object-fit:contain;pointer-events:none}
#keys kbd{display:inline-block;min-width:1.1em;padding:0 .3em;margin-inline-end:.15em;border:1px solid var(--line);border-radius:.25rem;background:var(--card);font:inherit;font-size:.9em;text-align:center}
.hint{color:var(--mut);font-size:.9rem;margin:.4rem 0 0}
.about{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--line);color:var(--mut);font-size:.92rem}
.about h2{font-size:1rem;margin:1.2rem 0 .3rem;color:var(--fg)}
.about h2:first-child{margin-top:0}
.about p{margin:.25rem 0}
.tabs{display:flex;gap:.4rem;margin:.2rem 0 .1rem}
.tabs button{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:9px;padding:.34rem .8rem;font-size:.9rem;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--acc);border-color:var(--acc);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0 .2rem;align-items:center}
.chips button{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:999px;padding:.3rem .7rem;font-size:.82rem;cursor:pointer}
.chips button[data-c]:not([data-c=""]){width:26px;height:26px;padding:0;background:var(--sw)}
.chips button[aria-pressed=true]{outline:2px solid var(--acc);outline-offset:1px}
.moreRow{display:flex;align-items:center;gap:.6rem;margin-top:.5rem}
.moreRow button{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:9px;padding:.4rem .9rem;font-size:.9rem;cursor:pointer}
.moreRow .cnt{color:var(--mut);font-size:.82rem}
#toast{position:fixed;left:50%;bottom:5.6rem;transform:translateX(-50%);background:#111;color:#fff;padding:.5rem .9rem;border-radius:9px;opacity:0;transition:opacity .2s;pointer-events:none;font-size:.9rem;z-index:9}
#toast.on{opacity:.94}
/* 🔴 하단 입력 바 [운영자 지시 2026-08-11]
   실제 사용 흐름은 "쓰던 문장을 붙여넣고 → 그 자리에 이모지 끼우고 → 통째로 다시 복사" 입니다.
   키보드 페이지에만 이 입력창이 있으면, **검색으로 상세 페이지에 도착한 사람은 쓸 수 없습니다.**
   그래서 상세·분류·Top100 전부에 같은 바를 둡니다(공용 CSS/JS 라 한 곳만 고치면 반영). */
#bar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;gap:.5rem;align-items:center;
  background:var(--bg);border-top:1px solid var(--line);padding:.6rem 1rem}
/* 🔴 높이는 «내용 줄 수» 를 따라갑니다 — 최대 10줄 [운영자 지시 2026-08-19].
   전에는 max-height 5rem 고정이라 아스키아트(10~20줄)를 담으면 거의 안 보였습니다.
   실제 높이는 페이지 JS 가 scrollHeight 로 재서 넣습니다(글꼴마다 줄높이가 다릅니다). */
#pick{flex:1;min-width:0;min-height:2.4rem;font:inherit;font-size:1.35rem;line-height:1.35;
  padding:.35rem .55rem;border:1px solid var(--line);border-radius:.4rem;background:var(--card);color:var(--fg);
  resize:vertical;overflow-y:auto}
/* 🔴 여러 줄이 들어오면 그림입니다 — 고정폭으로 바꿔야 모양이 유지됩니다.
   한 줄일 때는 이모지를 크게 보여야 하므로 원래 크기를 씁니다. */
#pick.multi{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;line-height:1.2}
#bar.tall{align-items:flex-end}
#pick:focus{outline:2px solid var(--acc);outline-offset:-1px}
#pick::placeholder{font-size:.9rem;color:var(--mut);opacity:1}
#bar button{padding:.45rem .8rem;border:1px solid var(--line);border-radius:.4rem;background:var(--card);
  color:var(--fg);cursor:pointer;font:inherit;font-size:.85rem;white-space:nowrap}
#bar button:hover{border-color:var(--acc)}
/* 🔴 고정 바가 본문 끝을 덮지 않게 여백을 줍니다 — 다른 언어 링크가 가려지던 문제 */
body{padding-bottom:5rem}
@media(max-width:520px){#bar{padding:.5rem .6rem;gap:.35rem}#bar button{padding:.4rem .5rem;font-size:.8rem}}


.credit{margin:.6rem 0 0;font-size:.72rem;color:var(--mut);line-height:1.5}.credit a{color:var(--mut);text-decoration:underline}
.toolnav{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0 1rem}.toolnav a{padding:.3rem .7rem;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--mut);font-size:.85rem;white-space:nowrap}.toolnav a:hover{border-color:var(--acc);color:var(--acc)}
.legalnav{margin:.5rem 0 0;font-size:.72rem;color:var(--mut);line-height:1.6}.legalnav a{color:var(--mut);text-decoration:underline}.legalnav span{color:var(--mut)}