/* 이모티콘 복사기 (emoji-copier) — 2026-10-23, 작업 카드 1.193 230차(이모지 복사).
   .emc(컨테이너) > .emc-in(격자): 좁으면 메시지 → 자판 → 카드 한 열, 600px부터 [메시지 / 자판 | 카드]. 자판 격자는 두 열일 때 카드 높이에 맞춰 늘어난다. */
.emc{container:emc/inline-size}
.emc-in{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"msg" "kb" "card" "store"}
.emc{--k:42px;--kf:26px;--emo:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",var(--sans);--txt:var(--sans),"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji"} /* --emo 는 이모지 한 글자 칸에만(이모지 글꼴의 띄어쓰기가 넓어 문장에는 --txt) */
.emc[data-size="s"]{--k:34px;--kf:21px}
.emc[data-size="l"]{--k:54px;--kf:36px}

/* 메시지 칸 */
.emc-msg{grid-area:msg;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "btns" "stat" "hist";gap:8px;padding:14px 16px 12px;border-bottom:1px solid var(--soft)}
.emc-mmain{grid-area:main}
.emc-mhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 5px}
.emc-mhead .v2-label{margin:0}
.emc-count{font-family:var(--sans);font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#emcMsg{display:block;box-sizing:border-box;width:100%;height:80px;min-height:58px;resize:vertical;margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--txt);font-size:18px;line-height:1.45;color:var(--ink);outline:0;transition:border-color var(--ease),box-shadow var(--ease)}
#emcMsg:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
#emcMsg::placeholder{font-family:var(--sans);font-size:14px;color:var(--ink);opacity:.4}
.emc-mbtns{grid-area:btns;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;align-content:end}
.emc-mbtns .v2-btn{justify-content:center}
.emc-mbtns #emcBs{min-width:44px;font-size:16px}
.emc-stat{grid-area:stat;min-height:18px;line-height:18px}
.emc-histrow{grid-area:hist;display:flex;flex-direction:column;gap:5px;min-width:0}
.emc-hhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0}
.emc-note{font-family:var(--sans);font-size:11px;line-height:1.3;color:var(--muted)}
.emc-link{padding:0;border:0;background:none;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left}
.emc-hist{display:flex;align-items:center;gap:6px;min-width:0;margin:0;padding:3px 2px 5px;list-style:none;overflow-x:auto;scrollbar-width:thin}
.emc-hist li{flex:0 0 auto;min-width:0}
.emc-bub{display:block;max-width:240px;margin:0;padding:6px 12px;border-radius:14px;font-family:var(--txt);font-size:14px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emc-bub.is-in{flex:0 0 auto;border:1px solid var(--soft);border-bottom-left-radius:4px;background:var(--paper);color:var(--ink)}
.emc-bub.is-out{border:0;border-bottom-right-radius:4px;background:var(--fill);color:var(--on-fill)}
button.emc-bub{cursor:pointer;text-align:left}
button.emc-bub:hover{background:var(--fill-hover)}
button.emc-bub:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.emc-hist.is-example .emc-bub{opacity:.82}
.emc-bub.is-new{animation:emc-send .32s cubic-bezier(.2,.8,.3,1.2)}
@keyframes emc-send{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}

/* 이모지 자판 */
.emc-kb{grid-area:kb;display:flex;flex-direction:column;gap:10px;min-width:0;padding:12px 16px 10px}
.emc-find .v2-input{align-items:center}
.emc-find .v2-input > .i{flex:0 0 auto;width:15px;height:15px;margin-left:11px;color:var(--muted)}
.emc-find .v2-input input{text-align:left;font-weight:500;font-size:15px;padding-left:8px}
.emc-find .v2-input input::-webkit-search-cancel-button{display:none}
.emc-qx{flex:0 0 auto;align-self:stretch;width:38px;padding:0;border:0;background:none;font-size:20px;line-height:1;color:var(--muted);cursor:pointer}
.emc-qx:hover{color:var(--ink)}
.emc-opts{display:flex;flex-wrap:wrap;gap:8px 18px}
.emc-opt{display:flex;flex-direction:column;gap:4px;min-width:0}
.emc-tones button{padding:0 6px;font-family:var(--emo);font-size:16px;font-weight:400}
.emc-tabs{display:flex;gap:1px;border-bottom:1px solid var(--soft)}
.emc-tabs button{flex:1 1 0;min-width:0;height:34px;padding:0;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;font-family:var(--emo);font-size:17px;line-height:1;color:var(--muted);cursor:pointer;filter:grayscale(.6);opacity:.75;transition:opacity var(--ease),filter var(--ease),border-color var(--ease)}
.emc-tabs button:hover{opacity:1;filter:none}
.emc-tabs button[aria-pressed="true"]{border-bottom-color:var(--accent);opacity:1;filter:none}
.emc-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.emc-tabs .i{width:16px;height:16px;vertical-align:middle}
.emc-tabs .emc-tabk span{font-family:var(--mono);font-size:11px;font-weight:700}
.emc-grid{position:relative;height:calc(6 * (var(--k) + 2px) + 44px);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--soft);background:var(--paper);scroll-padding-top:30px;scrollbar-width:thin}
.emc-sh{position:sticky;top:0;z-index:1;display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0;padding:5px 9px 4px;border-bottom:1px solid var(--soft);background:color-mix(in srgb,var(--paper) 94%,transparent);font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.emc-sh b{font-weight:650;color:var(--ink)}
.emc-sh span{font-family:var(--mono);font-size:11px;font-weight:400}
.emc-sh.is-empty span{font-family:var(--sans);font-size:11.5px;text-align:right}
.emc-sec:not(:first-child) .emc-sh{border-top:1px solid var(--soft)}
.emc-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--k),1fr));gap:2px;padding:4px 5px 6px}
.emc-k{display:grid;place-items:center;height:var(--k);min-width:0;padding:0;border:0;border-radius:6px;background:none;font-family:var(--emo);font-size:var(--kf);line-height:1;color:var(--ink);cursor:pointer;transition:background var(--ease)}
.emc-k:hover{background:var(--btn)}
.emc-k:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.emc-k.is-pop{animation:emc-pop .3s ease-out}
@keyframes emc-pop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.emc-kaos{display:flex;flex-wrap:wrap;gap:4px;padding:4px 6px 8px}
.emc-k.emc-kao{display:block;height:auto;min-height:calc(var(--k) - 8px);padding:6px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--card);font-family:var(--sans);font-size:14px;line-height:1.3;white-space:nowrap}
.emc[data-size="s"] .emc-k.emc-kao{font-size:12.5px;padding:4px 8px}
.emc[data-size="l"] .emc-k.emc-kao{font-size:16.5px}
.emc-sub{margin:6px 9px 0;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--muted)}
.emc-empty{margin:0;padding:10px 9px 12px;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.emc.is-search .emc-grid > .emc-sec{display:none}
.emc-kbfoot{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;min-height:22px;margin:0;font-family:var(--sans);font-size:12px;color:var(--muted)}
.emc-hover{display:flex;align-items:center;gap:7px;min-width:0;flex:1 1 200px}
.emc-hover b{flex:0 0 auto;font-family:var(--emo);font-size:20px;font-weight:400;line-height:1}
.emc-hover span{font-family:var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.emc-hide{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.emc-hide[hidden]{display:none}

/* 고른 이모지 카드 */
.emc-card{grid-area:card;display:flex;flex-direction:column;gap:11px;min-width:0;padding:12px 16px 14px;border-top:1px solid var(--soft)}
.emc-chead{margin:0}
.emc-cmain{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px}
.emc-cg{display:grid;place-items:center;box-sizing:border-box;width:88px;height:88px;border:1px solid var(--soft);background:var(--paper);font-family:var(--emo);font-size:54px;font-weight:400;line-height:1}
.emc-cg.is-kao{padding:6px;font-family:var(--sans);font-size:14px;line-height:1.3;text-align:center;overflow-wrap:anywhere}
.emc-ct{display:flex;flex-direction:column;gap:3px;min-width:0;margin:0;font-family:var(--sans)}
.emc-ct strong{font-size:15px;font-weight:700;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.emc-ct span{font-size:12px;line-height:1.4;color:var(--muted)}
.emc-ct .emc-dev.is-warn{color:var(--accent)}
.emc-cbtns{display:flex;flex-wrap:wrap;gap:6px}
.emc-cbtns #emcStar[aria-pressed="true"] .i{fill:currentColor}
.emc-cstat{min-height:16px;margin-top:-6px}
.emc-crow{display:flex;flex-direction:column;gap:5px;min-width:0}
.emc-ctone{display:grid;grid-template-columns:repeat(6,minmax(0,38px));gap:4px;min-height:38px;align-items:center}
.emc-ctone .emc-none{grid-column:1 / -1}
.emc-tn{width:100%;height:38px;padding:0;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--emo);font-size:22px;line-height:1;cursor:pointer}
.emc-tn:hover{background:var(--btn)}
.emc-tn[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.emc-tn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.emc-rhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 8px;margin:0}
.emc-rhead .v2-label{white-space:nowrap}
.emc-csize{font-family:var(--sans);font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--muted);text-align:right}
.emc-recipe{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:52px}
.emc-part{display:inline-flex;flex-direction:column;align-items:center;gap:2px;min-width:46px;max-width:100%;padding:4px 7px 5px;border:1px solid var(--soft);background:var(--paper)}
.emc-part b{font-family:var(--emo);font-size:24px;font-weight:400;line-height:1.15}
.emc-part small{max-width:132px;font-family:var(--sans);font-size:11px;line-height:1.25;color:var(--muted);text-align:center;overflow-wrap:anywhere}
.emc-zwj{padding:2px 4px;border:1px dashed var(--line);font-family:var(--mono);font-size:10px;font-weight:700;color:var(--muted)}
.emc-code{display:block;padding:4px 7px;background:var(--wash);font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.emc-kw{display:flex;flex-wrap:wrap;gap:4px}
.emc-w{height:26px;padding:0 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);cursor:pointer}
.emc-w:hover{background:var(--btn);color:var(--ink)}
.emc-none{font-family:var(--sans);font-size:12px;line-height:1.4;color:var(--muted)}
.emc-store{grid-area:store;margin:0;padding:8px 16px 11px;border-top:1px solid var(--soft);font-family:var(--sans);font-size:11.5px;color:var(--muted)}

@container emc (min-width:560px){
  .emc-histrow{flex-direction:row;align-items:center;gap:12px}
  .emc-hhead{flex-direction:column;align-items:flex-start;flex:0 0 auto;width:112px}
  .emc-msg{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main btns" "stat stat" "hist hist";column-gap:12px}
  .emc-mbtns{grid-template-columns:auto auto}
  .emc-mbtns .emc-main{grid-column:1 / -1}
}
@container emc (min-width:600px){
  .emc-in{grid-template-columns:minmax(0,1fr) min(300px,42%);grid-template-areas:"msg msg" "kb card" "store store"}
  .emc-card{border-top:0;border-left:1px solid var(--soft)}
  /* 두 열: 자판 격자 높이는 고정, 카드가 그 높이에 맞춰 늘고 검색어 칸이 남는 높이를 채운다(넘치는 검색어는 가림) → 고른 이모지가 바뀌어도 높이가 들썩이지 않음 */
  .emc-kwrow{flex:1 1 0;min-height:47px;overflow:hidden} /* 라벨 + 단추 한 줄 */
  .emc-kwrow .emc-kw{contain:size;flex:1 1 auto;align-content:flex-start;overflow:hidden;position:relative}
}
@media (prefers-reduced-motion:reduce){
  .emc-k.is-pop,.emc-bub.is-new{animation:none}
}