/* =========================================================
   表情符號一覽
========================================================= */

.smile-page{
    padding:24px 26px 28px;
}

/* 這頁可以保留玻璃卡片本體，但關掉掃光，避免太花 */
.smile-page.glass-card::after{
    display:none !important;
}

.smile-page.glass-card:hover{
    transform:none !important;
}

/* 固定 5 欄 */
.smile-grid{
    width:100%;
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    column-gap:2px;
    row-gap:2px;
    align-items:start;
}

/* 單張表情卡 */
.smile-card{
	
    min-width:0;

    display:grid;
    grid-template-columns:108px 63px;
    align-items:stretch;

    min-height:68px;

    border-radius:14px;
    overflow:hidden;

    background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(248,250,252,.62));

    border:1px solid rgba(148,163,184,.28);

    box-shadow:
        0 5px 14px rgba(15,23,42,.055),
        inset 0 1px 0 rgba(255,255,255,.8);

    transition:
        background .16s ease,
        border-color .16s ease,
        transform .16s ease;
}


.smile-card:hover{
    transform:translateY(-1px);
    background:
        linear-gradient(180deg, rgba(255,255,255,.95), rgba(239,246,255,.72));

    border-color:rgba(96,165,250,.36);
}

/* 圖片展示區：100px */
.smile-pic{
    width:100px;
    min-height:68px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0px;

    background:
        radial-gradient(circle at 50% 38%, rgba(255,255,255,.95), rgba(241,245,249,.72));

    border-right:1px solid rgba(148,163,184,.18);

    line-height:0;
}

/* 圖片不指定固定尺寸 */
.smile-pic img{
    display:block;

    width:auto;
    height:auto;

    max-width:88px;
    max-height:56px;

    border:0 !important;
    box-shadow:none !important;
}

/* 右側代碼區：60px */
.smile-code{
    width:60px;
    min-width:0;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0px 0px;

    background:
        linear-gradient(180deg, rgba(248,250,252,.88), rgba(226,232,240,.58));

    color:#111827;

    font-family:"Noto Sans TC","Segoe UI","Microsoft JhengHei","PingFang TC",sans-serif;
    font-size:12px;
    font-weight:800;
    line-height:1.25;
    text-align:center;

    word-break:break-all;
    overflow-wrap:anywhere;
    white-space:normal;
}

.smile-card{
    background:
        linear-gradient(180deg, rgba(255,253,247,.94), rgba(255,247,237,.68));

    border:1px solid rgba(217,119,6,.16);
}

.smile-pic{
    background:
        radial-gradient(circle at 50% 38%, rgba(255,255,255,.98), rgba(255,247,237,.74));
}

.smile-code{
    background:
        linear-gradient(180deg, rgba(255,251,235,.9), rgba(254,243,199,.52));

    color:#78350f;
}

.smile-card:hover{
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,237,213,.76));

    border-color:rgba(245,158,11,.32);
}