/* ----------------------------------여기서 부터 이모티콘 스타일---------------------------- */
/* css/common.css 또는 별도 emoji.css */
/* 나만의 하역 작업 이모티콘 스타일 */

/* 모든 메뉴와 버튼에서 사용할 아이콘 기본 스타일 */
/* 하역 작업 아이콘 (기존) */
/* 공통 아이콘 */
.icon-work,
.icon-vac,
.icon-ship,
.icon-game,
.icon-1alkkagi,
.icon-rank {
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat;
}

/* 타입별 설정 */
.icon-work {background-image: url('../images/icons/work_images.gif');}
.icon-vac {background-image: url('../images/icons/vacation.png');}
.icon-ship {background-image: url('../images/icons/vacation2.png');}
.icon-game {background-image: url('../images/icons/games.png');}
.icon-rank {background-image: url('../images/icons/ranks_icons.gif');}
.icon-fire {background-image: url('../images/icons/gun-fire-Frames.png');}
.icon-alkkagi {background-image: url('../images/effects/item_sprite_sheet.gif');}

/* 이름과 등급 아이콘이 있는 영역 전체 설정 */
.player-name-area {
    display: flex;         /* 가로로 배치 */
    align-items: center;   /* 수직 중앙 정렬 핵심! */
    justify-content: flex-start; /* 왼쪽부터 정렬 (중앙 정렬을 원하면 center) */
    gap: 8px;              /* 아이콘과 이름 사이의 간격 */
    height: 55px;          /* 아이콘 높이(50px)보다 약간 여유 있게 설정 */
}

/* 등급 아이콘 스타일 (이미 존재하지만 확인용) */
.my-custom-icon5 {
    display: inline-block;
    width: 53px;           /* */
    height: 62px;          /* */
    vertical-align: middle; /* */
    /* background-image 등은 기존 설정 유지 */
}

/* 이름 텍스트가 너무 위로 붙지 않도록 높이 조절 */
.player-name {
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1;        /* 줄 간격을 초기화하여 중앙 정렬이 잘 되도록 함 */
}

/* 총 코인수 텍스트 스타일 */
.player-total-coins {
    font-size: 0.9em;
    color: #ffaa44;        /* 오렌지색 계열로 가독성 확보 */
    line-height: 1;
}

#iconPreviewPanel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #222;
    color: #fff;
    padding: 20px;
    border-radius: 15px;
    z-index: 99999;
    width: 400px;
    max-height: 500px;
    overflow-y: auto;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 15px 0;
}

.preview-item {
    text-align: center;
}

.preview-item.tier-edit-item {
    cursor: pointer;
    border-radius: 8px;
    padding: 6px;
    transition: background 0.15s ease, transform 0.15s ease;
}

.preview-item.tier-edit-item:hover {
    background: rgba(255, 215, 0, 0.16);
    transform: translateY(-2px);
}

.tier-edit-status {
    margin-top: 6px;
    font-size: 13px;
    color: #ffd65c;
}

.preview-item .label {
    font-size: 12px;
    margin-top: 5px;
}
.icon {
    display: inline-block;
    background-repeat: no-repeat;
    vertical-align: middle;
    overflow: hidden; /* 🔥 중요 */
}