.shop-container {
    max-width: 900px;
    text-align: center;
    font-family: 'Noto Sans KR', sans-serif;
}

.shop-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #333;
}

.emoticon-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 25px 15px;
    justify-items: center;
}

.emoticon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.emoticon-item img {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    transition: transform 0.2s;
    cursor: pointer;
}

.emoticon-item img:hover {
    transform: scale(1.1);
}

.price {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
}

/* ✅ 반응형 */
@media (max-width: 768px) {
    .emoticon-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .emoticon-item img {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .emoticon-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .emoticon-item img {
        width: 55px;
        height: 55px;
    }
}

.shop-desc {
    font-size: 13px;
    color: #777;
    margin-top: -25px;
    margin-bottom: 25px;
    line-height: 1.5;
}

.shop-desc p {
    margin: 0;
}

/*닉네임 라인 */
/* 🔹 닉네임 꾸미기 섹션 */
.shop-subtitle {
    font-size: 20px;
    font-weight: 700;
    margin: 50px 0 20px;
    color: #333;
}

.nickname-desc {
    font-size: 13px;
    color: #777;
    margin-bottom: 25px;
}

.nickname-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4개씩 → 총 8개면 자동 2줄 */
    gap: 25px 15px;
    justify-items: center;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
}



.nickname-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nickname-sample {
    font-size: 18px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: transform 0.2s;
    cursor: pointer;
}

.nickname-sample:hover {
    transform: scale(1.1);
}

/* 🔹 닉네임 스타일 예시 8개 */
.nickname1 { color: #e74c3c; } /* 빨강 */
.nickname2 { color: #3498db; } /* 파랑 */
.nickname3 { color: #27ae60; } /* 초록 */
.nickname4 { color: #9b59b6; } /* 보라 */
.nickname5 { color: #f39c12; } /* 주황 */
.nickname6 { color: #e84393; text-shadow: 0 0 4px #ff9ff3; } /* 핑크글로우 */
.nickname7 {
    background: linear-gradient(90deg, #ff7675, #fdcb6e, #55efc4, #74b9ff, #a29bfe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 2.5s infinite linear;
    font-weight: 800;
    font-size: 12px;
}
.nickname8 { background: linear-gradient(90deg, #f0932b, #6c5ce7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-size: 12px;
}

/* 반응형 */
@media (max-width: 768px) {
    .nickname-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .nickname-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

/* ✅ 다크모드 지원 */
body.dark-mode {
    background-color: #121212;
    color: #eee;
}

/* ────────────── 기본 텍스트 색상 변경 ────────────── */
body.dark-mode .shop-title,
body.dark-mode .shop-subtitle {
    color: #f1f1f1;
}

body.dark-mode .shop-desc,
body.dark-mode .nickname-desc,
body.dark-mode .price {
    color: #bbb;
}

/* ────────────── 배경/hover 효과 ────────────── */
body.dark-mode .emoticon-item img {
    background-color: #222;
    border: 1px solid #333;
}

body.dark-mode .emoticon-item img:hover {
    transform: scale(1.1);
    background-color: #2a2a2a;
}

/* 닉네임 샘플 hover 시에도 자연스럽게 */
body.dark-mode .nickname-sample:hover {
    background-color: rgba(255, 255, 255, 0.05);
    transform: scale(1.1);
}

/* ────────────── 그리드 배경 톤 다운 ────────────── */
body.dark-mode .shop-container,
body.dark-mode .nickname-grid,
body.dark-mode .emoticon-grid {
    background-color: transparent;
}

/* ────────────── 특수 닉네임 (gradient/text-shadow) 보정 ────────────── */
/* 밝은 배경용 효과가 너무 튀지 않도록 조정 */
body.dark-mode .nickname6 {
    text-shadow: 0 0 6px #ff9ff3;
}

body.dark-mode .nickname7 {
    animation: shimmer-dark 2.5s infinite linear;
}

@keyframes shimmer-dark {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* ────────────── 구분선/버튼이 있는 경우 대비 ────────────── */
body.dark-mode hr {
    border-color: #333;
}

/* ────────────── 반응형 그대로 유지 ────────────── */
@media (max-width: 768px) {
    body.dark-mode .emoticon-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    body.dark-mode .emoticon-item img {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    body.dark-mode .emoticon-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    body.dark-mode .emoticon-item img {
        width: 55px;
        height: 55px;
    }
}

.nickname-sample {
    display: inline-block;
    font-size: 18px;             /* 기본 크기 */
    font-weight: 600;
    text-align: center;
    line-height: 1.2;            /* 줄 간격 살짝 줄임 */
    word-break: keep-all;        /* 단어 단위로 줄바꿈 */
    white-space: normal;         /* 줄바꿈 허용 */
    overflow-wrap: break-word;   /* 긴 단어도 줄바꿈 가능 */
    max-width: 120px;            /* 카드 폭 제한 */
    max-height: 45px;            /* 두 줄 정도까지만 표시 */
    overflow: hidden;            /* 너무 길면 아래 잘림 */
}
.nickname-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.nickname-sample {
    display: -webkit-box;
    -webkit-line-clamp: 2;       /* 최대 2줄 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(14px, 2.5vw, 18px); /* 자동 폰트 크기 조정 */
    line-height: 1.2;
    text-align: center;
}