.symbols-page {padding:28px 0 75px}
.symbols-intro {background:linear-gradient(118deg,#fff 0%,#fff 66%,#fff5f2 100%);border:1px solid var(--line);border-radius:20px;padding:28px 31px 24px;box-shadow:var(--shadow)}
.symbols-heading {display:flex;align-items:center;justify-content:space-between;gap:22px}
.symbols-heading h1 {font-size:33px;font-weight:850;line-height:1.3;letter-spacing:-1.3px}
.symbols-heading h1 span {font-size:28px;color:var(--accent);letter-spacing:1px}
.symbols-heading p {font-size:13px;color:#7a8497;margin-top:7px;line-height:1.7}
.symbols-heading p strong {color:#495975;font-weight:750}
.symbols-intro-art {display:flex;gap:6px;align-items:center;flex-shrink:0;transform:rotate(-7deg)}
.symbols-intro-art span {display:grid;place-items:center;width:45px;height:45px;border-radius:13px;background:#fff0ee;color:#dc655b;font-size:25px;font-weight:700}
.symbols-intro-art span:nth-child(2) {background:#fce8f3;color:#db648f;transform:translateY(-8px)}
.symbols-intro-art span:nth-child(3) {background:#e7f5ee;color:#368b64;transform:translateY(8px)}
.symbols-intro-art span:nth-child(4) {background:#e9f0ff;color:#5175bb}
.symbols-search-wrap {margin-top:20px}
.symbols-search-box {display:flex;align-items:center;position:relative}
.symbols-search-icon {position:absolute;left:17px;font-size:27px;color:#9aa7b8;pointer-events:none}
#symbol-search {width:100%;height:57px;background:#fff;border:2px solid #e5eaf3;border-radius:13px;padding:0 48px 0 49px;font-size:15px;outline:0;transition:border-color .15s,box-shadow .15s}
#symbol-search:focus {border-color:#88a4d5;box-shadow:0 0 0 3px rgba(102,146,213,.1)}
#symbol-search::placeholder {color:#a5aebc;font-size:13px}
#search-clear {position:absolute;right:13px;width:29px;height:29px;border:0;border-radius:50%;background:#edf1f7;color:#8490a3;font-size:21px;line-height:1}
.suggestions {display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.suggestions>strong {font-size:11px;font-weight:750;color:#99a2b2;white-space:nowrap}
.suggestion-list {display:flex;gap:6px;flex-wrap:wrap}
.suggestion-list button {padding:6px 10px;background:#f5f7fa;border:1px solid #edf0f4;border-radius:7px;color:#68758a;font-size:12px}
.suggestion-list button:hover {border-color:#c6d3e9;background:#eff3fc;color:#395b98}
.symbol-section {margin-top:27px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 26px 25px;box-shadow:var(--shadow)}
.symbol-section-heading {display:flex;justify-content:space-between;align-items:center;gap:16px}
.symbol-section-heading h2 {font-size:19px;font-weight:820;letter-spacing:-.65px}
.symbol-section-heading p {font-size:12px;color:#8c96a6;margin-top:4px;line-height:1.6}
.quiet-button {border:1px solid #e2e8f1;background:#fff;color:#64738b;border-radius:8px;padding:8px 10px;font-size:11px;font-weight:700;white-space:nowrap}
.quiet-button:hover {background:#f6f8fd}
.symbol-categories {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.category-card {min-width:0;min-height:76px;padding:11px 13px;border:1px solid #e9edf4;border-radius:12px;background:#fff;display:flex;align-items:center;text-align:left;gap:11px;transition:background .15s,border-color .15s,transform .15s}
.category-card:hover {transform:translateY(-2px);border-color:#b5c8e9}
.category-card.active {border-color:#789ddc;background:#f9fbff;box-shadow:0 0 0 2px #eaf1fc inset}
.category-icon {width:45px;height:45px;border-radius:12px;background:var(--category-tint,#f1f4fc);display:grid;place-items:center;flex-shrink:0;color:#35465c;font-size:24px;font-weight:600;line-height:1}
.category-text {display:flex;flex-direction:column;gap:2px;min-width:0}
.category-text strong {font-size:13px;font-weight:780;color:#34435e;line-height:1.4;word-break:keep-all}
.category-text small {font-size:10.5px;color:#99a3b2;line-height:1.35;word-break:keep-all}
.results-section {scroll-margin-top:15px}
.result-count {flex-shrink:0;padding:5px 10px;border-radius:20px;background:#f2f5fb;color:#66758b;font-size:11px;font-weight:700}
.symbol-view-switch {display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:16px 0 15px}
.view-chip {padding:7px 12px;border-radius:8px;background:#f5f7fa;border:1px solid #edf0f4;color:#68758a;font-size:11px;font-weight:750}
.view-chip.active {color:#fff;background:#375da9;border-color:#375da9}
.view-chip span {display:inline-block;margin-left:2px;opacity:.75}
.symbol-grid {display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
.symbol-cell {min-width:0;position:relative;border:1px solid #e7ebf2;border-radius:10px;background:#fff;overflow:hidden;transition:background .15s,border-color .15s}
.symbol-cell:hover {background:#f5f8ff;border-color:#afc5e8}
.symbol-copy {display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;width:100%;height:87px;padding:9px 3px 8px;background:transparent;border:0;color:#293952}
.symbol-copy:hover,.symbol-copy:focus-visible {background:#f3f7ff}
.symbol-glyph {font-family:"Noto Sans Symbols 2","Segoe UI Symbol","Apple Symbols","Noto Sans CJK KR","Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-size:29px;font-weight:450;line-height:1.45;max-width:100%;overflow:hidden;text-overflow:clip;white-space:nowrap}
.symbol-code {font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:8px;color:#9ba6b7;letter-spacing:-.35px;white-space:nowrap;max-width:100%;overflow:hidden}
.symbol-fav {position:absolute;top:1px;right:2px;width:26px;height:26px;display:grid;place-items:center;border:0;background:transparent;color:#c7d0dc;font-size:14px;line-height:1;border-radius:5px;cursor:pointer}
.symbol-fav:hover,.symbol-fav.is-fav {color:#eab451;background:#fff9e8}
.symbol-empty {text-align:center;padding:48px 10px;color:#8795a9}
.symbol-empty>span {display:block;color:#aab3c2;font-size:40px;line-height:1}
.symbol-empty strong {display:block;font-size:15px;margin-top:8px;color:#5d6e83}
.symbol-empty p {font-size:12px;margin-top:7px}
.loadmore-row {display:flex;justify-content:center;margin-top:17px}
.loadmore-button {border:1px solid #dbe4f3;border-radius:9px;background:#f9fbff;color:#3a5e9e;padding:10px 22px;font-size:12px;font-weight:750}
.loadmore-button:hover {background:#eef4ff}
.advanced-mark {display:inline-block;vertical-align:middle;font-size:10px;letter-spacing:0;font-weight:700;padding:3px 6px;border-radius:5px;background:#f2f5f8;color:#93a1b1}
.unicode-tools {display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:19px}
.unicode-jump,.unicode-block-picker {background:#f8fafe;border:1px solid #edf1f7;border-radius:11px;padding:14px}
.unicode-tools label {font-size:12px;color:#576e8f;font-weight:800;display:block;margin-bottom:8px}
.unicode-jump-row {display:flex;gap:8px;min-width:0}
.unicode-jump-row input,.unicode-jump-row select {min-width:0;flex:1;width:100%;height:42px;padding:0 11px;background:#fff;border:1px solid #dfe6f0;border-radius:7px;outline:0;color:#354a67;font-size:12px}
.unicode-jump-row input:focus,.unicode-jump-row select:focus {border-color:#8eaae0}
.unicode-jump-row button {height:42px;padding:0 12px;background:#385da7;color:#fff;border:0;border-radius:7px;flex-shrink:0;font-size:11px;font-weight:750}
.unicode-tools p {margin-top:8px;font-size:10.5px;color:#94a0b1}
.unicode-preview {display:flex;align-items:center;gap:16px;margin-top:16px;border:1px dashed #cad7ec;background:#f8faff;border-radius:10px;padding:11px 16px}
#unicode-preview-label {font-family:ui-monospace,monospace;font-size:12px;color:#58739c}
.unicode-preview-copy {display:flex;align-items:center;gap:13px;border:1px solid #c5d6ee;border-radius:9px;background:#fff;padding:7px 16px}
.unicode-preview-copy strong {font-size:32px;color:#293a59}
.unicode-preview-copy span {font-size:11px;color:#8293a7}
.board-top {display:flex;justify-content:space-between;align-items:center;margin:19px 0 12px}
.board-top strong {font-size:13px;color:#496283}
#block-total {font-size:11px;color:#99a5b5}
.block-pagination {display:flex;justify-content:center;align-items:center;gap:14px;margin-top:17px;font-size:12px;color:#73819a}
.block-pagination button {padding:8px 11px;border:1px solid #dee5ef;background:#fff;border-radius:7px;color:#47628f;font-size:11px}
.block-pagination button:disabled {opacity:.4;cursor:default}
.symbol-help {padding:25px 8px 0;color:#8691a2}
.symbol-help h2 {font-size:15px;color:#4d5e79}
.symbol-help p {font-size:12px;margin-top:9px;line-height:1.8}
.symbol-toast {position:fixed;z-index:999;left:50%;bottom:25px;transform:translate(-50%,16px);visibility:hidden;opacity:0;transition:opacity .16s,transform .16s,visibility .16s;white-space:nowrap;max-width:calc(100vw - 26px);text-align:center;overflow:hidden;text-overflow:ellipsis;padding:12px 19px;border-radius:10px;background:#26364d;color:#fff;font-size:13px;box-shadow:0 8px 30px rgba(30,43,62,.18)}
.symbol-toast.visible {visibility:visible;opacity:1;transform:translate(-50%,0)}
.symbol-toast.error {background:#9e514d}
.copy-manual {position:fixed;z-index:998;right:18px;bottom:80px;width:min(360px,calc(100vw - 36px));background:#fff;border:1px solid #d8e1ef;box-shadow:0 15px 50px rgba(25,40,65,.15);border-radius:13px;padding:17px}
.copy-manual-header {display:flex;justify-content:space-between;align-items:center}
.copy-manual-header strong {font-size:15px}
.copy-manual-header button {border:0;background:#f0f3f7;border-radius:6px;width:26px;height:26px;font-size:18px}
.copy-manual p {margin:8px 0;font-size:12px;color:#697c98;line-height:1.5}
.copy-manual input {display:block;width:100%;padding:10px;border:1px solid #dae3f0;border-radius:7px;background:#f6f9ff;font-size:19px}
#copy-manual-try {margin-top:8px;padding:8px 10px;border:0;background:#3c60a6;border-radius:6px;color:#fff;font-size:12px}
[hidden] {display:none!important}
@media(max-width:960px) {.symbol-categories {grid-template-columns:repeat(3,minmax(0,1fr))}.symbol-grid {grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(max-width:680px) {
 .symbols-page {padding:16px 0 45px}.symbols-intro {border-radius:13px;padding:20px 17px}.symbols-heading h1 {font-size:26px}.symbols-heading h1 span {font-size:22px}.symbols-heading p {font-size:12px;line-height:1.7}.symbols-intro-art {display:none}
 .symbols-search-wrap {margin-top:15px}#symbol-search {height:50px;padding-left:39px;font-size:13px}#symbol-search::placeholder {font-size:11px}.symbols-search-icon {left:12px;font-size:24px}
 .suggestions {gap:8px;margin-top:11px}.suggestions>strong {font-size:10px}.suggestion-list {gap:5px}.suggestion-list button {font-size:11px;padding:5px 8px}
 .symbol-section {margin-top:15px;padding:18px 14px 19px;border-radius:13px}.symbol-section-heading h2 {font-size:17px}.symbol-section-heading p {font-size:11px}.quiet-button {font-size:10px;padding:7px}
 .symbol-categories {grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:15px}.category-card {min-height:66px;padding:8px;gap:8px;border-radius:9px}.category-icon {width:35px;height:38px;border-radius:9px;font-size:20px}.category-text strong {font-size:12px}.category-text small {font-size:9px}
 .symbol-view-switch {gap:5px;padding:12px 0}.view-chip {font-size:10px;padding:7px 8px}.symbol-grid {grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.symbol-copy {height:67px;gap:2px;padding:7px 2px}.symbol-glyph {font-size:23px}.symbol-code {font-size:7px}.symbol-fav {top:0;right:0;font-size:13px;width:25px;height:25px}
 .unicode-tools {grid-template-columns:1fr;gap:9px}.unicode-jump,.unicode-block-picker {padding:12px}.unicode-jump-row button {padding:0 10px}.symbol-help {padding:19px 4px}.unicode-preview-copy strong {font-size:26px}
}
@media(max-width:370px) {.symbol-grid {grid-template-columns:repeat(4,minmax(0,1fr))}.symbols-heading h1 {font-size:24px}.symbol-section-heading {align-items:flex-start}.symbol-categories {gap:6px}}