.page-heading{margin-bottom:20px}
.page-heading h1{font-size:clamp(1.8rem,3vw,2.5rem);margin:0 0 8px;word-break:keep-all;text-wrap:balance}
.page-heading>p{font-size:.9rem}
.panel h2{font-size:1.1rem;margin:0 0 14px}
.field input[type=search]{min-height:44px}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 12px}
.tab{background:#fff;color:var(--text);border-color:var(--border);min-height:44px;padding:8px 14px;font-size:.88rem;font-weight:600;overflow-wrap:anywhere;max-width:100%}
.tab[aria-pressed=true]{background:var(--accent-soft);border-color:#a2b9ed;color:var(--accent)}
.metric{margin:0 0 10px;font-size:.85rem;font-variant-numeric:tabular-nums;color:var(--muted);overflow-wrap:anywhere}
.metric:empty,.status:empty{display:none}
.grid-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:10px}
.card{display:flex;align-items:stretch;min-width:0;border:1px solid var(--border);border-radius:10px;background:#f9fbff;overflow:hidden}
.kaomoji-copy{flex:1 1 auto;min-width:0;min-height:48px;background:transparent;color:var(--text);border:0;border-radius:0;padding:8px 6px 8px 10px;font-size:.95rem;font-weight:500;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all;text-align:center}
.kaomoji-copy.long{font-size:.8rem}
.kaomoji-copy:hover,.star-toggle:hover{background:var(--accent-soft);filter:none}
/* 키보드 포커스 표시 명확화 */
.kaomoji-copy:focus-visible,.star-toggle:focus-visible{outline:3px solid #e9aa23;outline-offset:-3px}
.tab:focus-visible,.field input[type=search]:focus-visible,.manual-box input:focus-visible,.action-row button:focus-visible{outline:3px solid #e9aa23;outline-offset:2px}
.guide summary:focus-visible{outline:3px solid #e9aa23;outline-offset:2px;border-radius:4px}
.face{display:block;min-width:0;max-width:100%;overflow-wrap:anywhere}
.star-toggle{flex:0 0 44px;min-width:44px;min-height:44px;padding:0;background:transparent;color:var(--muted);border:0;border-left:1px solid var(--border);border-radius:0;font-size:1.25rem}
.star-toggle[aria-pressed=true]{color:#b97900}
.empty-box{border:1px dashed #bac8db;background:#f9fbff;border-radius:8px;padding:14px 16px;font-size:.9rem}
.empty-box p{margin:0 0 4px;overflow-wrap:anywhere}
/* 복사 상태 안내 긴 문자열 줄바꿈 */
.status{margin:12px 0 0;font-size:.9rem;overflow-wrap:anywhere}
.status.error{color:var(--danger)}
.manual-box{margin-top:12px;display:flex;flex-direction:column;gap:8px;border:1px solid var(--border);border-radius:8px;padding:12px;background:#fff}
.manual-box>label{font-size:.9rem;font-weight:600}
.manual-box input{min-height:44px;font-size:1rem;min-width:0;max-width:100%}
.manual-box p{margin:0;overflow-wrap:anywhere}
.small{font-size:.78rem}
.privacy-note{color:var(--muted);font-size:.76rem;line-height:1.5;margin:14px 0 0}
.action-row{display:flex;gap:10px;flex-wrap:wrap}
.action-row button,.action-row .button{min-height:44px}
.save-panel{margin-top:20px}
.save-panel .muted{font-size:.88rem}
.guide{margin:32px 0 40px;padding-top:22px;border-top:1px solid var(--border);color:var(--muted);font-size:.86rem;line-height:1.8}
.guide h2{color:var(--text);font-size:1.1rem}
.guide h3{color:var(--text);margin:20px 0 6px}
.guide summary{cursor:pointer;color:var(--text);font-weight:650;padding:10px 0;min-height:44px}
button,input,select,summary,a{touch-action:manipulation}
@media(max-width:480px){
  .grid-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tab{padding:8px 12px}
  /* 모바일 360px 가로 넘침 방지 및 터치 타겟 전폭 확보 */
  .action-row button,.action-row .button{flex:1 1 100%;width:100%}
}
@media(max-width:340px){
  /* 초소형 모바일 화면에서 카오모지 가로 넘침 방지 */
  .grid-list{grid-template-columns:1fr}
}