/* style.css - Final Complete Version */

:root {
    --bg-dark: #121214;
    --bg-sidebar: #1c1c1f;
    --bg-card: #252529;
    --accent: #ffd700;       /* 메인 포인트 색상 (노랑) */
    --accent-hover: #e6c200;
    --text-main: #f4f4f5;
    --text-muted: #a1a1aa;
    --border: #3f3f46;
    --success: #4ade80;
    --danger: #ef4444;
}

* { box-sizing: border-box; }

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    margin: 0;
    height: 100vh;
    overflow: hidden;
}

/* --- 레이아웃 --- */
.app-layout { display: flex; height: 100vh; }
.sidebar { width: 260px; background: var(--bg-sidebar); border-right: 1px solid var(--border); padding: 30px 20px; display: flex; flex-direction: column; flex-shrink: 0; }
.brand h2 { color: var(--accent); font-size: 24px; font-weight: 800; margin: 0; line-height: 1.1; }
.brand .subtitle { color: var(--text-muted); font-size: 12px; letter-spacing: 2px; }

.credits { margin-top: auto; font-size: 12px; color: #52525b; }

.main-content { flex: 1; padding: 30px 40px; overflow-y: auto; }
.top-bar { margin-bottom: 30px; }
.top-bar h1 { font-size: 28px; font-weight: 700; margin: 0; }

/* 로그인 필요 안내 문구 */
.login-required-note {
    margin: 10px 0 0;
    font-size: 18px;
    color: var(--text-muted);
    opacity: 0.9;
}

/* --- 사이드바 버튼 --- */
.btn-new-char { 
    margin-top: 40px; 
    background: var(--accent); color: #000; 
    border: none; padding: 14px; border-radius: 8px; 
    font-weight: 700; font-size: 15px; 
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; 
    transition: transform 0.2s; 
}
.btn-new-char:hover { transform: translateY(-2px); }
.btn-new-char:disabled, .btn-new-char.disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }

.btn-planner {
    width: 100%; margin-top: 12px; padding: 13px;
    border-radius: 8px; font-size: 15px; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: all 0.2s ease; border: none;
    background: var(--accent); color: #000;
}
.btn-planner .icon { font-size: 18px; }


/* --- 대시보드 카드 그리드 --- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 24px; padding-bottom: 50px; }

/* 캐릭터 카드 */
.char-card { background: var(--bg-card); border-radius: 16px; border: 1px solid var(--border); padding: 25px; box-shadow: 0 4px 6px rgba(0,0,0,0.2); }
.card-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--border); }
.char-img { width: 64px; height: 64px; border-radius: 12px; background: #000; object-fit: cover; border: 2px solid var(--border); }
.header-info h3 { margin: 0; font-size: 18px; color: #fff; }
.header-info p { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.highlight { color: var(--accent); font-weight: bold; }
.card-actions { margin-left: auto; display: flex; gap: 8px; }
.action-btn { background: transparent; border: none; color: #71717a; cursor: pointer; padding: 4px; font-size: 18px; transition: color 0.2s; }
.action-btn:hover { color: #fff; }

/* --- 재료 그리드 및 아이템 --- */
.material-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
    gap: 8px; 
    margin-top: 10px;
}

/* 섹션 구분선 */
.section-divider-small { 
    font-size: 12px; font-weight: bold; color: var(--accent); 
    margin: 15px 0 8px 0; border-bottom: 1px dashed #444; 
    padding-bottom: 5px; grid-column: 1 / -1; 
    display: flex; justify-content: space-between; align-items: flex-end;
}
.shared-mat-note { font-size: 11px; color: #888; font-weight: normal; margin-left: 10px; }

.mat-item {
    position: relative;
    display: flex; flex-direction: column; align-items: center;
    background: #18181b; border-radius: 8px; padding: 8px 4px;
    border: 1px solid #333; transition: background 0.2s;
    overflow: hidden;
}
.mat-item:hover { background: #202023; }
.mat-item.complete { background: rgba(74, 222, 128, 0.05); border-color: rgba(74, 222, 128, 0.2); }
.mat-item.complete .mat-img { opacity: 0.5; filter: grayscale(50%); }
.mat-item.complete .mat-name { color: var(--success); opacity: 0.8; }

.mat-img { width: 40px; height: 40px; object-fit: contain; margin-bottom: 4px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }

.mat-name {
    font-size: 11px; color: #ccc; text-align: center; width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 4px;
}
.mat-item:hover .mat-name { white-space: normal; overflow: visible; color: #fff; }

.badge-remaining {
    position: absolute; top: -5px; right: -5px;
    background-color: var(--danger); color: white;
    font-size: 10px; font-weight: bold; padding: 2px 6px;
    border-radius: 10px; z-index: 5; border: 2px solid var(--bg-card);
}
.badge-remaining.done { display: none; }

/* 입력바 */
.control-bar {
    display: flex; align-items: center; justify-content: center; gap: 2px;
    width: 100%; margin-top: auto;
}
.control-bar input {
    width: 40px; text-align: center; font-size: 11px; padding: 2px;
    background: #111; border: 1px solid #444; color: #fff; border-radius: 3px;
}
.control-bar .target-text { font-size: 10px; color: #777; white-space: nowrap; }
.control-bar .btn-fill {
    font-size: 9px; padding: 1px 4px; height: 18px; line-height: 16px;
    background: #27272a; border: 1px solid #3f3f46; color: #a1a1aa; border-radius: 4px; cursor: pointer;
}
.control-bar .btn-fill:hover { background: var(--accent); color: #000; }

/* --- [NEW] 캐릭터 카드 헤더 추가 스타일 --- */

/* 이름과 별점을 가로로 배치 */
.name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.name-row h3 {
    margin: 0;
    font-size: 18px;
    color: #fff;
    line-height: 1.2;
}

/* 성급 (별) 스타일 */
.rank-stars {
    color: var(--accent); /* 노란색(#ffd700) */
    font-size: 13px;
    letter-spacing: -1px; /* 별 간격 좁게 */
}

/* 속성 & 무기 배지 컨테이너 */
.tags-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

/* 배지 공통 스타일 */
.meta-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #3f3f46;
    border: 1px solid #52525b;
    color: #e4e4e7;
    font-weight: 500;
}

/* 속성별로 색상을 다르게 주고 싶다면 아래처럼 확장 가능 (현재는 공통 회색) */
.meta-tag.attr { background: rgba(255, 255, 255, 0.1); }

/* - 모달 공통 (창 잘림 방지 및 스크롤 적용) */
.hidden { display: none !important; }
.modal { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    z-index: 1000; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 20px; /* 모바일/작은 화면 여백 */
}
.modal-backdrop { 
    position: absolute; 
    top: 0; left: 0;
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.7); 
    backdrop-filter: blur(4px); 
    cursor: pointer; 
}
.modal-content { 
    position: relative; 
    background: #27272a; 
    width: 450px; 
    max-width: 100%; 
    
    /* [핵심] 화면 높이의 85%까지만 커지고, 넘치면 스크롤 생성 */
    max-height: 85vh; 
    overflow-y: auto; 
    
    border-radius: 16px; 
    padding: 30px; 
    border: 1px solid var(--border); 
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; /* 내부 요소 정렬 */
}

/* 스크롤바 디자인 */
.modal-content::-webkit-scrollbar { width: 8px; }
.modal-content::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }

/* --- [종합 계산기 모달 전용 스타일] --- */
.planner-content {
    background: #18181c;
    border: 1px solid #444;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    max-width: 550px; width: 90%;
}

.planner-step {
    background: #23232b;
    border-radius: 12px; padding: 20px; margin-bottom: 20px; border: 1px solid #333;
}

/* 목표 설정 헤더 (토글 포함) */
.step-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 15px; border-bottom: 1px solid #333; padding-bottom: 15px;
}
.step-header h3 { margin: 0; font-size: 16px; color: var(--accent); }

/* 토글 스위치 (알약 모양) */
.toggle-group {
    background: #111; padding: 4px; border-radius: 8px; display: flex; gap: 2px; border: 1px solid #333;
}
.toggle-group label {
    padding: 6px 16px; font-size: 13px; cursor: pointer; border-radius: 6px;
    color: #888; transition: all 0.2s; font-weight: 500;
}
.toggle-group input { display: none; }
.toggle-group label.active {
    background: #3e3e4e; color: #fff; font-weight: 700; box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* 캐릭터 선택 그리드 */
.char-select-grid {
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 15px 10px; 
    
    /* [수정] 고정 높이 대신 max-height를 조금 줄이거나, 화면에 따라 유동적으로 설정 */
    max-height: 200px; /* 기존 220px에서 약간 축소 */
    
    overflow-y: auto; 
    padding: 10px;
    background: #1e1e24; 
    border-radius: 8px; 
    border: 1px solid #333;
}
.char-select-grid::-webkit-scrollbar { width: 6px; }
.char-select-grid::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

.char-checkbox-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; position: relative; }
.char-checkbox-item input { position: absolute; opacity: 0; }
.char-checkbox-item img {
    width: 50px; height: 50px; border-radius: 50%; border: 2px solid #444;
    opacity: 0.5; transition: all 0.2s; margin-bottom: 6px; background: #000;
}
.char-checkbox-item span { font-size: 11px; color: #777; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.char-checkbox-item input:checked + img { border-color: var(--accent); box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); opacity: 1; transform: scale(1.1); }
.char-checkbox-item input:checked ~ span { color: var(--accent); font-weight: bold; }

/* 일괄 설정 패널 */
#planner-bulk-panel { display: flex; flex-direction: column; gap: 15px; }
.planner-row {
    display: flex; align-items: center; justify-content: space-between;
    background: #1e1e24; padding: 12px 15px; border-radius: 8px; border: 1px solid #333;
}
.planner-row span { font-size: 14px; font-weight: 600; color: #ddd; }
.input-wrapper { display: flex; align-items: center; gap: 12px; }

.planner-input {
    width: 60px; padding: 8px; background: #2a2a35; border: 1px solid #444;
    color: #fff; border-radius: 6px; text-align: center; font-size: 16px; font-weight: bold;
}
.planner-input:focus { border-color: var(--accent); outline: none; }
.checkbox-row { justify-content: center; background: transparent; border: none; padding: 0; gap: 10px; margin-top: 5px; }
.checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.checkbox-row label { font-size: 14px; color: #aaa; cursor: pointer; }
.checkbox-row input:checked + label { color: var(--accent); }


/* 개별 설정 리스트 (카드 스타일) */
#planner-individual-list { display: flex; flex-direction: column; gap: 12px; max-height: 300px; overflow-y: auto; padding-right: 5px; }
#planner-individual-list::-webkit-scrollbar { width: 6px; }
#planner-individual-list::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

.indi-card { background: #1e1e24; border: 1px solid #333; border-radius: 8px; padding: 15px; display: flex; flex-direction: column; gap: 10px; }
.indi-card-header { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #2a2a30; padding-bottom: 8px; margin-bottom: 5px; }
.indi-card-header img { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #555; }
.indi-card-header span { font-weight: bold; color: var(--accent); font-size: 14px; }

.indi-row-input { display: flex; align-items: center; justify-content: space-between; }
.indi-label { font-size: 12px; color: #aaa; width: 60px; }
.indi-inputs-group { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; }
.indi-input-num { width: 50px; background: #111; border: 1px solid #444; color: #fff; padding: 6px; border-radius: 4px; text-align: center; font-weight: bold; }
.indi-arrow { color: #555; font-size: 12px; }

/* 기존 .btn-save.full-width 스타일을 .btn-save 공통 스타일로 통합 */
.btn-save {
    background: var(--accent);       /* 노란색 배경 */
    color: #121214;                  /* 검은색 텍스트 */
    font-weight: 800;
    font-size: 16px;
    padding: 14px 20px;              /* 넉넉한 여백 */
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    width: 100%;                     /* 모달 내에서 꽉 차게 */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.btn-save:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(255, 215, 0, 0.2);
}

/* full-width 클래스는 이제 보조적인 역할만 하거나 제거해도 되지만, 
   기존 코드와의 호환성을 위해 남겨둔다면 아래 속성만 덮어씌웁니다. */
.btn-save.full-width {
    width: 100%;
}

/* --- 사이드바 로그인 영역 --- */
.auth-section { margin-top: auto; margin-bottom: 25px; padding-top: 25px; border-top: 1px solid #3f3f46; width: 100%; }
.auth-guide { font-size: 13px; color: #a1a1aa; text-align: center; margin-bottom: 15px; font-weight: 500; }
.auth-btn-group { display: flex; gap: 12px; }
.btn-auth { flex: 1; padding: 12px 0; font-size: 14px; font-weight: 700; border-radius: 8px; cursor: pointer; transition: all 0.2s ease; border: none; }

/* 로그인 모달 */
.auth-content { width: 420px; }
.auth-form .input-group { margin-bottom: 20px; }
.auth-form input { width: 100%; background: #18181b; border: 2px solid #3f3f46; color: #fff; padding: 14px 16px; border-radius: 10px; font-size: 15px; }
.auth-form input:focus { outline: none; border-color: var(--accent); background: #000; }
.btn-auth.login { background: var(--accent); color: #121214; }
.btn-auth.login:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn-auth.signup { background: rgba(255, 215, 0, 0.15); border: 2px solid var(--accent); color: var(--accent); }
.btn-auth.signup:hover { background: rgba(255, 215, 0, 0.25); transform: translateY(-2px); }

/* 유저 정보 */
.user-info { display: flex; align-items: center; gap: 15px; background: #252529; padding: 15px; border-radius: 12px; margin-bottom: 15px; border: 1px solid #3f3f46; }
.user-avatar { width: 40px; height: 40px; border-radius: 50%; background: #3f3f46; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
#display-username { font-weight: 700; color: #fff; font-size: 16px; }
.user-actions { display: flex; gap: 10px; }
.btn-mini-sync, .btn-mini-logout { flex: 1; padding: 10px 0; font-size: 13px; font-weight: 600; border-radius: 8px; cursor: pointer; border: none; display: flex; align-items: center; justify-content: center; }
.btn-mini-sync { background: #276f44; color: #e2e8f0; }
.btn-mini-logout { background: #7f1d1d; color: #e2e8f0; }
.last-sync { font-size: 12px; color: #a1a1aa; text-align: center; margin-top: 12px; }

/* --- style.css 맨 아래에 추가 --- */

/* [에디터 모달 전용 스타일] */

/* 공통 섹션 구분선 */
.section-divider {
    font-size: 14px;
    font-weight: bold;
    color: var(--accent);
    margin: 20px 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #333;
}

/* 1. 레벨 & 무기 입력 (가로 배치) */
.row-inputs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* 입력 박스 (라벨 + 인풋 세로 정렬) */
.input-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.input-box .label-text {
    font-size: 12px;
    color: #888;
    text-align: center;
}

.input-box input {
    width: 100%;
    background: #18181b;
    border: 1px solid #444;
    color: #fff;
    padding: 10px;
    text-align: center;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
}
.input-box input:focus {
    border-color: var(--accent);
    outline: none;
}

/* 중앙 화살표 */
.arrow {
    font-size: 18px;
    color: #555;
    margin-top: 18px; /* 라벨 높이만큼 살짝 내림 */
}

/* 2. 스킬 리스트 스타일 */
.skill-list-edit {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skill-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1e1e24;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #333;
}

.skill-name {
    font-size: 14px;
    color: #ddd;
    font-weight: 500;
}

.skill-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.skill-controls input {
    width: 50px;
    background: #111;
    border: 1px solid #444;
    color: #fff;
    text-align: center;
    padding: 4px;
    border-radius: 4px;
}

.small-arrow {
    font-size: 12px;
    color: #666;
}

/* 3. 무기 박스 스타일 */
.weapon-box-styled {
    background: #1c1c1f;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #3f3f46;
    margin-top: 10px;
}

.weapon-name-tag {
    font-size: 13px;
    color: var(--accent);
    text-align: center;
    margin-bottom: 12px;
    background: rgba(255, 215, 0, 0.1);
    padding: 4px;
    border-radius: 4px;
}

/* 체크박스 행 정렬 */
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.checkbox-row input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
}
.checkbox-row label {
    cursor: pointer;
    font-size: 14px;
    color: #ccc;
}

/* --- style.css 맨 아래에 추가 (Planner 우측 확장 레이아웃) --- */

/* 1. 모달 컨텐츠 기본 크기 및 트랜지션 설정 */
.planner-content {
    width: 500px; /* 기본 너비 (왼쪽 패널만 보일 때) */
    max-width: 95vw;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), max-width 0.4s ease; /* 부드러운 확장 애니메이션 */
    overflow: hidden;
}

/* 확장되었을 때의 너비 */
.planner-content.expanded {
    width: 900px; 
    max-width: 95vw; /* [핵심 수정] 기존 550px 제한을 95vw(화면 꽉 차게)로 덮어씌움 */
}
/* 2. 내부 레이아웃 (좌우 배치) */
.planner-layout {
    display: flex;
    gap: 0; /* 패널 사이 간격은 right-panel padding으로 처리 */
    align-items: flex-start;
}

/* 왼쪽 패널 (입력창) */
.planner-left-panel {
    width: 100%;
    flex-shrink: 0; /* 줄어들지 않음 */
    transition: width 0.3s;
}

/* .expanded 상태일 때 왼쪽 패널 너비 고정 (비율 유지) */
.planner-content.expanded .planner-left-panel {
    width: 480px; 
    border-right: 1px solid #333; /* 구분선 추가 */
    padding-right: 25px;
    margin-right: 25px;
}

/* 오른쪽 패널 (결과창) */
.planner-right-panel {
    width: 0; /* 숨겨져 있을 때 */
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    display: flex; /* flex로 변경하여 내부 스크롤 처리 */
    flex-direction: column;
}

/* 결과창 보일 때 스타일 */
.planner-content.expanded .planner-right-panel {
    width: 100%; /* 남은 공간 차지 */
    opacity: 1;
    display: flex;
}

/* 오른쪽 패널 내부 스크롤 */
.result-grid-layout {
    overflow-y: auto;
    max-height: 500px; /* 결과창 최대 높이 */
    padding-right: 5px;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)) !important; /* 결과 아이템 크기 조금 작게 */
}
/* 스크롤바 스타일 */
.result-grid-layout::-webkit-scrollbar { width: 6px; }
.result-grid-layout::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

/* 결과창 헤더 */
.result-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.result-header h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 16px;
}

/* style.css - Mobile Responsive Overrides (수정됨) */

@media (max-width: 768px) {
    /* 1. 전체 페이지 스크롤 허용 (가장 중요) */
    html, body {
        height: auto !important;
        overflow-y: auto !important; /* 브라우저 기본 스크롤 사용 */
        overflow-x: hidden;
    }

    /* 2. 레이아웃 구조 변경 (좌우 -> 상하) */
    .app-layout {
        display: flex;
        flex-direction: column;
        height: auto !important; /* 높이 고정 해제 */
    }

    /* 3. 사이드바 (상단 헤더 역할) */
    .sidebar {
        width: 100%;
        height: auto !important;     /* 높이 제한 해제 */
        padding: 20px;
        border-right: none;
        border-bottom: 1px solid var(--border);
        
        /* 내부 요소 정렬 */
        display: flex;
        flex-direction: column;
        gap: 15px;
        position: relative;          /* 고정(fixed) 해제 -> 스크롤됨 */
    }

    /* 브랜드 로고 */
    .brand {
        text-align: center;
        margin-bottom: 0;
    }
    .brand h2 { font-size: 20px; } /* 로고 크기 약간 축소 */

    /* 4. 로그인/프로필 섹션 재배치 (고정 해제 & 디자인 변경) */
    .auth-section {
        margin-top: 10px !important; /* 위로 붙이기 */
        padding-top: 15px;
        border-top: 1px solid #333;
        width: 100%;
    }

    /* [중요] 프로필 박스 모바일 최적화 (가로 배치로 공간 절약) */
    .user-info {
        flex-direction: row; /* 가로 정렬 */
        align-items: center;
        padding: 10px;
        margin-bottom: 10px;
        gap: 10px;
    }
    
    .user-avatar {
        width: 32px; height: 32px; /* 아바타 크기 축소 */
    }
    
    #display-username {
        font-size: 14px;
        margin-right: auto; /* 이름 왼쪽 정렬, 버튼 오른쪽 밀기 */
    }

    /* 버튼들을 한 줄로 배치 */
    .user-actions {
        flex-direction: row;
        gap: 8px;
        width: auto; /* 전체 너비 차지하지 않도록 */
    }

    .btn-mini-sync, .btn-mini-logout {
        padding: 6px 12px;
        font-size: 12px;
        white-space: nowrap; /* 글자 줄바꿈 방지 */
    }

    /* "저장" 버튼 등을 좀 더 작게 */
    .btn-auth {
        padding: 10px;
        font-size: 14px;
    }

    /* 5. 메인 콘텐츠 영역 */
    .main-content {
        padding: 20px 15px;  /* 좌우 여백 줄임 */
        flex: none;          /* 남은 공간 채우기 해제 */
        overflow: visible;   /* 내부 스크롤 해제 */
    }

    .top-bar { margin-bottom: 20px; }
    .top-bar h1 { font-size: 22px; }

    /* 카드 그리드 모바일 최적화 */
    .card-grid {
        grid-template-columns: 1fr; /* 1단 배열 */
        gap: 20px;
    }

    /* 모달 크기 모바일 대응 */
    .modal-content, 
    .planner-content.expanded,
    .planner-content {
        width: 92% !important;
        max-height: 85vh;
        overflow-y: auto;
    }

    /* 플래너 모달 레이아웃 */
    .planner-layout {
        flex-direction: column;
    }
    /* 바로 아래쪽에 있는 왼쪽 패널 스타일도 확인 */
    .planner-content.expanded .planner-left-panel {
        width: 450px; /* 480px에서 약간 줄임 (여유 공간 확보) */
        flex-shrink: 0; /* 너비가 절대 줄어들지 않도록 고정 */
        border-right: 1px solid #333; 
        padding-right: 25px;
        margin-right: 25px;
    }
}

/* 1. 카드 헤더 레이아웃 수정 */
.card-header {
    cursor: pointer; /* 클릭 가능 표시 */
    display: flex;
    align-items: center;
    justify-content: space-between; /* 양쪽 정렬 */
    user-select: none; /* 텍스트 선택 방지 */
    position: relative;
}

/* 오른쪽 버튼 그룹 (수정/삭제 + 화살표) */
.header-right-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
}

/* 토글 화살표 아이콘 */
.toggle-arrow {
    font-size: 14px;
    color: #666;
    transition: transform 0.3s ease;
    display: block; /* 기본 표시 */
}

/* 화살표 회전 애니메이션 */
.toggle-arrow.rotated {
    transform: rotate(180deg);
}

/* 2. 카드 바디 (내용 영역) - 슬라이드 애니메이션 핵심 */
.card-body {
    max-height: 2000px; /* 충분히 큰 값 (펼쳐졌을 때) */
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1), opacity 0.3s ease;
}

/* 내부 패딩용 래퍼 (애니메이션 튀는 현상 방지) */
.card-body-inner {
    padding-top: 10px;
}

/* [접힌 상태] */
.card-body.collapsed {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

/* --- 데스크탑(PC)에서는 항상 펼쳐두기 --- */
@media (min-width: 769px) {
    .card-header {
        cursor: default; /* PC에선 클릭 안됨 */
    }
    
    .toggle-arrow {
        display: none !important; /* 화살표 숨김 */
    }

    .card-body.collapsed {
        max-height: none !important;
        opacity: 1 !important;
        display: block !important;
    }
}

/* style.css 맨 아래 추가 */

/* --- [종합 계산기 결과창 디자인 개선] --- */
.result-grid-layout {
    display: grid;
    /* 모바일에서는 3열 정도가 적당, 화면이 작으면 자동 줄바꿈 */
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)) !important; 
    gap: 10px;
    padding: 10px 5px;
}

/* 결과 아이템 카드 스타일 (스크린샷 참고) */
.result-card-item {
    background: #18181b;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 15px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.2s, border-color 0.2s;
}

.result-card-item:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    background: #202023;
}

.result-card-item img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
}

.result-card-item .name {
    font-size: 11px;
    color: #a1a1aa;
    text-align: center;
    letter-spacing: -0.5px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-card-item .count {
    font-size: 16px;
    font-weight: 800;
    color: var(--accent);
}

/* --- [토스트 알림 메시지 스타일] --- */
.toast-message {
    position: fixed;
    bottom: 80px; /* 모바일 하단에서 살짝 위 */
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(30, 30, 35, 0.95);
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    border: 1px solid var(--accent);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    font-size: 14px;
    font-weight: 600;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toast-message.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* style.css 맨 아래 추가 - 서버 통계 디자인 */

.server-stats {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #a1a1aa;
}

.stat-value {
    font-weight: 700;
    color: var(--accent); /* 노란색 강조 */
    font-family: 'Inter', monospace; /* 숫자 가독성 */
}

/* 모바일에서의 배치 조정 (선택 사항) */
@media (max-width: 768px) {
    .server-stats {
        flex-direction: row; /* 가로로 배치 */
        justify-content: space-around;
        order: 10; /* 맨 아래로 보냄 */
        margin-top: 0;
    }
    .stat-row {
        gap: 10px;
    }
}

.stat-icon {
    width: 16px;          /* 아이콘 크기 (글자 크기와 비슷하게) */
    height: 16px;
    object-fit: contain;  /* 비율 유지 */
    margin-right: 6px;    /* 글자와의 간격 */
    vertical-align: middle; /* 텍스트와 수직 중앙 정렬 */
    position: relative;
    top: -1px;            /* 미세 위치 조정 */
    
    /* 만약 검은색 아이콘을 받았다면 아래 코드로 흰색으로 반전 가능 */
    /* filter: invert(1) opacity(0.8); */
}

/* 라벨 정렬 보정 */
.stat-label {
    display: flex;
    align-items: center;
}

/* --- [검색 가능한 드롭다운(Combobox) 스타일] --- */
.combobox-wrapper {
    position: relative;
    width: 100%;
}

.combobox-input {
    width: 100%;
    padding: 12px 35px 12px 12px; /* 오른쪽 화살표 공간 확보 */
    background: #18181b;
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    transition: border-color 0.2s;
}

.combobox-input:focus {
    outline: none;
    border-color: var(--accent);
}

.combobox-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 12px;
    pointer-events: none; /* 클릭 통과 */
}

/* 드롭다운 목록 박스 */
.combobox-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    background: #252529;
    border: 1px solid #444;
    border-radius: 6px;
    margin-top: 5px;
    z-index: 2000; /* 모달 위에 떠야 함 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* 스크롤바 스타일 */
.combobox-list::-webkit-scrollbar { width: 6px; }
.combobox-list::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

/* 목록 아이템 */
.combobox-item {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #ddd;
    border-bottom: 1px solid #2f2f35;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.1s;
}

.combobox-item:last-child { border-bottom: none; }
.combobox-item:hover, .combobox-item.selected {
    background: #3f3f46;
    color: var(--accent);
    font-weight: bold;
}

.combobox-item img {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: #000;
    border: 1px solid #555;
}

/* --- [종합 계산기 검색창 스타일] --- */
.planner-search-input {
    width: 100%;
    padding: 10px 12px;
    background: #18181b; /* 배경색 */
    border: 1px solid #444; /* 테두리 */
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    transition: border-color 0.2s;
}

.planner-search-input:focus {
    outline: none;
    border-color: var(--accent); /* 포커스 시 노란색 */
    background: #202023;
}

.planner-search-input::placeholder {
    color: #666;
}

/* --- [NEW] 속성별 배지 컬러 디자인 --- */

/* 기본 배지 스타일 (오버라이드) */
.meta-tag.attr {
    font-weight: 700; /* 속성은 좀 더 두껍게 */
    border: 1px solid transparent;
}

/* 1. 기류 - 녹색 (Green) */
.meta-tag.attr-기류 {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.3);
}

/* 2. 응결 - 파란색 (Blue) */
.meta-tag.attr-응결 {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.3);
}

/* 3. 전도 - 보라색 (Purple) */
.meta-tag.attr-전도 {
    color: #c084fc;
    background: rgba(192, 132, 252, 0.15);
    border-color: rgba(192, 132, 252, 0.3);
}

/* 4. 용융 - 빨간색 (Red) */
.meta-tag.attr-용융 {
    color: #f87171;
    background: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.3);
}

/* 5. 회절 - 노란색 (Yellow/Gold) */
.meta-tag.attr-회절 {
    color: #facc15;
    background: rgba(250, 204, 21, 0.15);
    border-color: rgba(250, 204, 21, 0.3);
}

/* 6. 인멸 - 분홍색 (Pink) */
.meta-tag.attr-인멸 {
    color: #f472b6;
    background: rgba(244, 114, 182, 0.15);
    border-color: rgba(244, 114, 182, 0.3);
}

/* style.css 약 220번째 줄 근처 [종합 계산기 모달 전용 스타일] 수정 */

.planner-content {
    background: #18181c;
    border: 1px solid #444;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    
    /* [수정됨] 화면 높이 대응 및 스크롤 구조 */
    max-width: 550px; 
    width: 90%;
    max-height: 85vh;       /* 화면 높이의 85%까지만 커지도록 제한 (잘림 방지 핵심) */
    display: flex;          /* 내부 레이아웃을 플렉스로 변경 */
    flex-direction: column; /* 상하 배치 (헤더 - 바디) */
    
    /* 트랜지션 유지 */
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1), max-width 0.4s ease;
    overflow: hidden;       /* 둥근 모서리 밖으로 내용 삐져나감 방지 */
}

/* 확장되었을 때의 너비 (기존 유지) */
.planner-content.expanded {
    width: 900px; 
}

/* [수정됨] 내부 레이아웃 (스크롤 영역 지정) */
.planner-layout {
    display: flex;
    gap: 0;
    align-items: flex-start;
    
    /* [추가됨] 스크롤 관련 속성 */
    flex: 1;                /* 남은 높이를 모두 차지 */
    overflow-y: auto;       /* 세로 내용이 넘치면 스크롤 생성 */
    padding-bottom: 20px;   /* 하단 여백 확보 */
    min-height: 0;          /* Flexbox 내부 스크롤 버그 방지 */
}

/* 스크롤바 디자인 (크롬, 사파리 등) */
.planner-layout::-webkit-scrollbar { width: 8px; }
.planner-layout::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
.planner-layout::-webkit-scrollbar-track { background: #18181c; }

/* style.css 맨 아래에 추가하세요 */

/* --- [종합 계산기 모드 전환 탭] --- */
.planner-mode-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    padding: 0 5px;
}

.mode-tab {
    flex: 1;
    padding: 12px;
    background: #27272a;
    border: 1px solid #3f3f46;
    color: #a1a1aa;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mode-tab:hover {
    background: #3f3f46;
    color: #fff;
}

.mode-tab.active {
    background: var(--accent);
    color: #18181b; /* 활성 상태 글자는 어두운 색 */
    border-color: var(--accent);
    box-shadow: 0 4px 10px rgba(255, 215, 0, 0.2);
}

/* --- [불러오기 모드 안내 패널] --- */
.planner-step.hidden {
    display: none;
}

.import-summary {
    text-align: center;
    padding: 30px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.import-summary h3 {
    color: #fff;
    margin: 0 0 10px 0;
    font-size: 18px;
}

.import-stats {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.stat-tag {
    background: #18181b;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 13px;
    color: #ddd;
    border: 1px solid #444;
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-tag b {
    color: var(--accent);
    font-size: 15px;
}

.import-note {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #333;
    max-width: 90%;
    margin-top: 10px;
}

.import-note strong {
    color: #ff6b6b; /* 강조 텍스트 (빨간색 계열) */
}

/* --- 관리자 알림 플로팅 배지 --- */
.admin-alert-badge {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #ffd700; /* 노란색 */
    color: #000;
    padding: 12px 24px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s, box-shadow 0.2s;
    animation: slideUpBadge 0.5s ease-out;
}

.admin-alert-badge:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(255, 215, 0, 0.4);
}

.admin-alert-badge .icon {
    font-size: 18px;
}

@keyframes slideUpBadge {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 상자 사용 버튼 (재료 부족 시 등장) */
.btn-use-box {
    margin-left: 4px;
    background: #27272a;
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: all 0.2s;
}

.btn-use-box:hover {
    background: var(--accent);
    color: #000;
}

.btn-use-box:active {
    transform: scale(0.95);
}

/* --- [NEW] 재료 레어도별 텍스트 색상 --- */

/* 1. 주간 보스 (Red) */
.mat-name.rarity-weekly {
    color: #ff6b6b !important;
    font-weight: 700;
    text-shadow: 0 0 5px rgba(239, 68, 68, 0.4);
}

/* 2. 5성 특급 (Gold) */
.mat-name.rarity-gold {
    color: #facc15 !important;
    font-weight: 600;
}

/* 3. 4성 고급 (Purple) */
.mat-name.rarity-purple {
    color: #c084fc !important;
}

/* 4. 3성 중급 (Blue) */
.mat-name.rarity-blue {
    color: #60a5fa !important;
}

/* 5. 2성 초급 (Green) */
.mat-name.rarity-green {
    color: #86efac !important;
}

/* 완료된 항목은 초록색 유지 */
.mat-item.complete .mat-name {
    color: var(--success) !important;
    text-shadow: none;
    opacity: 0.8;
}

/* 모달 헤더 (X버튼 위치 교정) */
.modal-header { 
    display: flex; 
    justify-content: space-between; /* 좌우 끝으로 밀어내기 */
    align-items: center; 
    width: 100%;       /* [중요] 가로 꽉 채우기 */
    margin-bottom: 20px; 
    flex-shrink: 0;    /* [중요] 스크롤이 생겨도 헤더는 찌그러지지 않음 */
    border-bottom: 1px solid #333; /* 구분선 추가 (선택사항) */
    padding-bottom: 15px;          /* 구분선 여백 */
}

/* X 버튼 스타일 통합 (box용 클래스도 추가) */
.close-btn, .close-btn-planner, .close-btn-box { 
    font-size: 28px; 
    line-height: 1;
    cursor: pointer; 
    color: #71717a; 
    padding: 5px;
    transition: color 0.2s;
}
.close-btn:hover, .close-btn-planner:hover, .close-btn-box:hover { 
    color: #fff; 
}

/* --- [1] 환영 섹션 스타일 --- */
#welcome-section {
    max-width: 800px;
    margin: 0 auto;
    animation: fadeIn 0.5s ease;
}

/* 상단 배너 디자인 */
.welcome-banner {
    background: linear-gradient(135deg, #27272a 0%, #18181b 100%);
    border: 1px solid #333;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.welcome-banner h2 {
    color: var(--accent);
    margin: 0 0 15px 0;
    font-size: 26px;
    font-weight: 800;
}

.welcome-banner p {
    color: #a1a1aa;
    margin-bottom: 30px;
    line-height: 1.6;
    font-size: 15px;
}

/* 시작하기 버튼 */
.btn-start-login {
    background: var(--accent);
    color: #121214;
    border: none;
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-start-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}

/* --- [2] 공지사항/패치노트 스타일 --- */
.notice-board {
    background: #1c1c1f;
    border-radius: 12px;
    border: 1px solid #333;
    padding: 25px;
}

.notice-title {
    margin-top: 0;
    color: #fff;
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
    margin-bottom: 0;
    font-size: 18px;
}

.notice-item {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid #2a2a30;
}
.notice-item:last-child { border-bottom: none; }

.notice-date {
    font-size: 13px;
    color: #666;
    font-family: monospace;
    min-width: 90px;
    padding-top: 3px;
    font-weight: bold;
}

.notice-content h4 {
    margin: 0 0 6px 0;
    color: #e4e4e7;
    font-size: 15px;
}

.notice-content p {
    margin: 0;
    color: #888;
    font-size: 14px;
    line-height: 1.5;
}

/* --- [3] 관리자 전용 스타일 & 알림 배지 --- */
/* 관리자 버튼 (빨간색) */
#btn-admin-page {
    transition: all 0.2s ease;
}
#btn-admin-page:hover {
    background: #dc2626 !important; /* hover시 더 진한 빨강 */
    transform: translateX(5px);
}

/* 알림 배지 (메뉴 버튼 위에 뜨는 빨간 점) */
.nav-badge {
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: auto; /* 버튼 내에서 오른쪽 끝으로 밀기 */
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4);
    animation: bounceBadge 1s infinite;
}

@keyframes bounceBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

/* 페이드인 애니메이션 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 재료 카드 내 액션 버튼 그룹 (합성/상자) */
.action-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
    height: 20px; /* 높이 고정으로 레이아웃 흔들림 방지 */
}

/* 합성 버튼 (파란색 계열) */
.btn-synth {
    background: #1e3a8a; /* 진한 파랑 */
    border: 1px solid #60a5fa;
    color: #bfdbfe;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    padding: 1px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-weight: bold;
}

.btn-synth:hover {
    background: #2563eb;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(37, 99, 235, 0.4);
}

/* 상자 버튼 (기존 스타일 조금 수정 + 노란색 계열) */
.btn-use-box {
    background: #3f2e00; /* 어두운 노랑 배경 */
    border: 1px solid #ffd700;
    color: #ffd700;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    padding: 1px 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-use-box:hover {
    background: #ffd700;
    color: #000;
    transform: translateY(-1px);
}

.info-banner {
    background: #23232b;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
    margin-top: 30px;
    margin-bottom: 50px;
}
.info-banner h4 {
    margin: 0 0 10px 0;
    color: var(--accent);
}
.info-banner ul {
    margin: 0;
    padding-left: 20px;
    color: #a1a1aa;
    font-size: 13px;
    line-height: 1.6;
}
.info-banner li {
    margin-bottom: 8px;
}

/* [신규] 인라인 액션 버튼 스타일 */

/* 컨트롤 바: 아이템들이 가로로 나란히 서게 함 */
.control-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px; /* 버튼 사이 간격 좁게 */
    width: 100%;
    margin-top: auto;
}

/* 기존 입력창 크기 조절 (버튼 공간 확보를 위해 살짝 줄임) */
.control-bar input {
    width: 34px; /* 기존 40px에서 축소 */
    font-size: 11px;
    padding: 2px;
    text-align: center;
}

/* 기존 채우기(▲) 버튼 스타일 유지 및 미세 조정 */
.control-bar .btn-fill {
    width: 18px;
    height: 18px;
    padding: 0;
    line-height: 18px;
    font-size: 10px;
    flex-shrink: 0; /* 공간 좁아도 찌그러지지 않게 */
}

/* 새로 추가된 아이콘 버튼 (공통) */
.btn-action-icon {
    width: 18px;
    height: 18px;
    padding: 0;
    line-height: 18px;
    font-size: 11px; /* 이모지 크기 */
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s;
}

.btn-action-icon:hover {
    transform: scale(1.1);
}

/* 합성 버튼 (파란색 테마) */
.btn-synth-icon {
    background: rgba(30, 58, 138, 0.5); /* 반투명 파랑 */
    border-color: #3b82f6;
    color: #fff;
}
.btn-synth-icon:hover {
    background: #1e3a8a;
}

/* 상자 버튼 (노란색 테마) */
.btn-box-icon {
    background: rgba(63, 46, 0, 0.5); /* 반투명 노랑 */
    border-color: #eab308;
    color: #fff;
}
.btn-box-icon:hover {
    background: #a16207;
}

/* [신규] 합성 모달 스타일 */
.close-btn-synth {
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #71717a;
    transition: color 0.2s;
}
.close-btn-synth:hover { color: #fff; }

/* 합성 모달 내 인풋 포커스 시 강조 */
#synth-amount:focus {
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

/* [신규] 합성 모달 개선 디자인 */

/* 1. 상단 안내 박스 */
.synth-guide-box {
    background: rgba(255, 215, 0, 0.08);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    margin-bottom: 25px;
}
.synth-guide-box p {
    color: #ffd700;
    font-size: 14px;
    margin: 0 0 4px 0;
}
.synth-guide-box span {
    color: #aaa;
    font-size: 12px;
    line-height: 1.4;
    display: block;
}

/* 2. 메인 컨테이너 (좌우 배치 Flex) */
.synth-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* 3. 컬럼 공통 (Source / Target) */
.synth-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #1e1e24;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 15px 10px;
    position: relative;
}

.synth-col.target {
    border-color: #60a5fa; /* 결과 쪽은 파란 테두리 강조 */
    background: rgba(30, 58, 138, 0.1);
}

.col-label {
    font-size: 11px;
    color: #888;
    margin-bottom: 10px;
    font-weight: bold;
}

.synth-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 10px;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.5));
}

.sub-text {
    font-size: 11px;
    color: #666;
    margin-top: 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* 4. 입력창 스타일 */
.synth-input-wrapper {
    display: flex;
    align-items: center;
    background: #111;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 0 8px;
    width: 100%;
}

.synth-input-big {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 8px 0;
}
.synth-input-big:focus { outline: none; }

/* 오른쪽 입력창 강조 */
.focus-highlight { color: #60a5fa; }

.unit {
    font-size: 12px;
    color: #555;
    flex-shrink: 0;
}

/* 5. 중앙 화살표 영역 */
.synth-arrow-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.ratio-badge {
    font-size: 10px;
    background: #333;
    color: #aaa;
    padding: 2px 6px;
    border-radius: 4px;
}

.arrow-icon {
    font-size: 24px;
    color: #555;
}

/* 최대 제작 가능 텍스트 강조 */
#synth-max-info {
    color: #60a5fa;
    font-weight: bold;
}

/* [신규] 목표 부족 수량 배지 스타일 */
.need-badge {
    background: rgba(239, 68, 68, 0.2); /* 붉은색 배경 (반투명) */
    color: #fca5a5; /* 연한 붉은 텍스트 */
    border: 1px solid rgba(239, 68, 68, 0.4);
    font-size: 11px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 8px; /* 이미지와의 간격 */
    animation: fadeIn 0.3s ease;
}

/* 목표 달성 시(부족 0개) 스타일 (선택사항) */
.need-badge.satisfied {
    background: rgba(74, 222, 128, 0.2);
    color: #86efac;
    border-color: rgba(74, 222, 128, 0.4);
}

/* [신규] 메인 화면 목표 갯수 표시 (/ N) */
.text-target {
    font-size: 10px;
    color: #666;
    margin-left: -1px; /* 입력창과 가깝게 */
    margin-right: 2px;
    white-space: nowrap;
    letter-spacing: -0.5px;
}

/* --- [NEW] 로그인 전 환영 화면 (2단 레이아웃) --- */

#welcome-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
    animation: fadeIn 0.5s ease;
}

/* 2단 그리드 컨테이너 */
.welcome-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* 왼쪽이 조금 더 넓게 */
    gap: 20px;
    margin-bottom: 20px;
}

/* 카드 공통 스타일 */
.welcome-card {
    background: #1c1c1f;
    border: 1px solid #333;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* 1. 왼쪽 히어로 카드 (로그인) */
.hero-card {
    background: linear-gradient(135deg, #27272a 0%, #18181b 100%);
    padding: 40px;
    justify-content: center;
    min-height: 320px;
    position: relative;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.badge-new {
    background: rgba(255, 215, 0, 0.1);
    color: var(--accent);
    font-size: 11px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 15px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.hero-card h2 {
    font-size: 32px;
    margin: 0 0 15px 0;
    color: #fff;
    line-height: 1.3;
}

.hero-card p {
    color: #a1a1aa;
    font-size: 15px;
    margin-bottom: 30px;
    line-height: 1.6;
}

.hero-deco {
    position: absolute;
    bottom: 20px;
    right: 30px;
    font-size: 100px;
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
}

/* 로그인 버튼 */
.btn-start-login {
    background: var(--accent);
    color: #121214;
    border: none;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-start-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3);
    background: #ffe033;
}

/* 2. 오른쪽 공지사항 카드 */
.notice-card {
    background: #18181b;
}

.card-header-simple {
    padding: 20px;
    border-bottom: 1px solid #2a2a30;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1c1c1f;
}
.card-header-simple h3 { margin: 0; font-size: 16px; color: #fff; }

/* 공지사항 스크롤 영역 */
.notice-list-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
    max-height: 250px; /* 높이 제한 */
}
.notice-list-scroll::-webkit-scrollbar { width: 6px; }
.notice-list-scroll::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* 공지 아이템 스타일 재정의 */
.notice-item {
    padding: 15px 0;
    border-bottom: 1px dashed #333;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.notice-item:last-child { border-bottom: none; }
.notice-date { font-size: 11px; color: #666; font-family: monospace; }
.notice-content h4 { margin: 0; font-size: 14px; color: #e4e4e7; }
.notice-content p { margin-top: 4px; font-size: 13px; color: #888; }

/* 3. 하단 팁 배너 (컴팩트 버전) */
.info-banner-compact {
    background: #1c1c1f;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px 25px;
}
.info-banner-compact h4 {
    margin: 0 0 15px 0;
    color: var(--accent);
    font-size: 15px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.info-item strong {
    display: block;
    color: #ddd;
    font-size: 13px;
    margin-bottom: 5px;
}
.info-item p {
    margin: 0;
    color: #888;
    font-size: 12px;
    line-height: 1.5;
}
.info-item.warning p { color: #f87171; }

/* 모바일 반응형 (화면 좁을 때 세로 배치) */
@media (max-width: 768px) {
    .welcome-grid {
        grid-template-columns: 1fr; /* 1단으로 변경 */
    }
    .info-grid {
        grid-template-columns: 1fr;
    }
    .hero-card {
        padding: 30px;
        min-height: auto;
        text-align: center;
    }
    .hero-card h2 { font-size: 24px; }
}

/* --- [NEW] 로그인 전 환영 화면 (반응형 개선 버전) --- */

/* 1. 메인 컨테이너 위치 및 크기 조정 */
#welcome-section {
    width: 90%;                 /* 기본적으로 화면의 90% 사용 */
    max-width: 1600px;          /* 최대 너비를 1600px까지 확장 (기존 1000px) */
    margin: 0 auto;             /* 가로 중앙 정렬 */
    
    /* 수직 중앙 정렬을 위한 설정 */
    min-height: 80vh;           /* 화면 높이의 80% 확보 */
    display: flex;
    flex-direction: column;
    justify-content: center;    /* 수직 중앙 정렬 */
    animation: fadeIn 0.5s ease;
}

/* 2. 2단 그리드 레이아웃 (비율 조정) */
.welcome-grid {
    display: grid;
    /* 왼쪽(로그인)을 조금 더 넓게, 오른쪽(공지)은 보조 */
    grid-template-columns: 1.5fr 1fr; 
    gap: 24px;                  /* 간격 넓힘 */
    margin-bottom: 24px;
}

/* 3. 카드 공통 스타일 (높이 유연하게) */
.welcome-card {
    background: #1c1c1f;
    border: 1px solid #333;
    border-radius: 20px;        /* 둥근 모서리 조금 더 강조 */
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* 그림자 강화 */
}

/* 4. 왼쪽 히어로 카드 (로그인) */
.hero-card {
    background: linear-gradient(135deg, #27272a 0%, #18181b 100%);
    padding: 50px;              /* 패딩 증가 */
    justify-content: center;
    min-height: 400px;          /* 최소 높이 증가 */
}

.badge-new {
    background: rgba(255, 215, 0, 0.1);
    color: var(--accent);
    font-size: 13px;            /* 폰트 조금 키움 */
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.hero-card h2 {
    font-size: 42px;            /* 제목 폰트 대폭 확대 */
    margin: 0 0 20px 0;
    color: #fff;
    line-height: 1.2;
    font-weight: 800;
}

.hero-card p {
    color: #a1a1aa;
    font-size: 16px;            /* 본문 폰트 확대 */
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 80%;             /* 글자가 너무 퍼지지 않게 제한 */
}

.hero-deco {
    position: absolute;
    bottom: 20px;
    right: 40px;
    font-size: 140px;           /* 아이콘 확대 */
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
}

/* 로그인 버튼 (크고 시원하게) */
.btn-start-login {
    background: var(--accent);
    color: #121214;
    border: none;
    padding: 18px 40px;         /* 버튼 크기 확대 */
    border-radius: 12px;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;     /* 왼쪽 정렬 */
}
.btn-start-login:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    background: #ffe033;
}

/* 5. 오른쪽 공지사항 카드 */
.notice-card {
    background: #18181b;
}

.card-header-simple {
    padding: 25px;
    border-bottom: 1px solid #2a2a30;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1c1c1f;
}
.card-header-simple h3 { margin: 0; font-size: 18px; color: #fff; }

.notice-list-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 25px;
    max-height: 320px;          /* 스크롤 영역 높이 증가 */
}

/* 6. 하단 팁 배너 */
.info-banner-compact {
    background: #1c1c1f;
    border: 1px solid #333;
    border-radius: 16px;
    padding: 30px;
}
.info-banner-compact h4 {
    margin: 0 0 20px 0;
    color: var(--accent);
    font-size: 16px;
    border-bottom: 1px solid #333;
    padding-bottom: 12px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;                  /* 간격 넓힘 */
}

.info-item strong {
    font-size: 15px;            /* 폰트 확대 */
    margin-bottom: 8px;
}
.info-item p {
    font-size: 13px;
    line-height: 1.6;
}

/* --- [미디어 쿼리] 해상도별 대응 --- */

/* 1. 초대형 화면 (1920px 이상) - 더 크게 확장 */
@media (min-width: 1921px) {
    #welcome-section {
        max-width: 1800px;      /* 너비 제한 해제 */
    }
    .hero-card h2 { font-size: 52px; }
    .hero-card { min-height: 500px; }
}

/* 2. 일반 노트북/태블릿 (1200px 이하) - 그리드 비율 조정 */
@media (max-width: 1200px) {
    #welcome-section { width: 95%; }
    .welcome-grid { 
        grid-template-columns: 1fr 1fr; /* 1:1 비율로 변경 */
    }
}

/* 3. 모바일/작은 태블릿 (900px 이하) - 세로 배치 */
@media (max-width: 900px) {
    #welcome-section { display: block; padding-top: 20px; } /* 수직 중앙 정렬 해제 */
    .welcome-grid {
        grid-template-columns: 1fr; /* 1단 컬럼 */
        gap: 20px;
    }
    .hero-card { 
        min-height: auto; 
        padding: 40px 20px;
        text-align: center; 
    }
    .btn-start-login { align-self: center; } /* 버튼 중앙 정렬 */
    .hero-deco { display: none; }
    
    .info-grid {
        grid-template-columns: 1fr; /* 하단 팁도 1단 */
        gap: 20px;
    }
}

/* --- [신규] 드래그 앤 드롭(SortableJS) 스타일 --- */

/* 1. 드래그 핸들 (손잡이 아이콘) */
.drag-handle {
    cursor: grab;
    color: #52525b; /* 은은한 회색 */
    padding: 6px 8px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    user-select: none;
    border-radius: 6px;
    margin-right: -5px; /* 우측 여백 보정 */
}

.drag-handle:hover {
    color: var(--accent); /* 호버 시 노란색 강조 */
    background: rgba(255, 255, 255, 0.05);
}

.drag-handle:active {
    cursor: grabbing;
}

/* 2. 드래그 중인 아이템이 빠진 빈 자리 (Ghost) */
.sortable-ghost {
    opacity: 0.2;
    background: #2a2a30;
    border: 2px dashed var(--accent);
}

/* 3. 실제 드래그 중인 아이템 (Drag) */
.sortable-drag {
    cursor: grabbing;
    opacity: 1;
    background: #252529; /* 카드 배경색 유지 */
    box-shadow: 0 20px 50px rgba(0,0,0,0.6); /* 그림자 진하게 */
    transform: scale(1.02); /* 살짝 커지는 효과 */
    z-index: 9999;
}

/* 4. 모바일 터치 조작감 개선 */
.char-card {
    /* 터치 스크롤과 드래그가 겹치지 않게 최적화 */
    touch-action: manipulation; 
}

/* --- [신규] 대시보드 컨트롤 바 (검색 & 필터) --- */
.dashboard-controls {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
    background: #1c1c1f;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #333;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* 검색창 스타일 */
.search-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.search-wrapper input {
    width: 100%;
    background: #252529;
    border: 1px solid #444;
    color: #fff;
    padding: 12px 40px 12px 35px; /* 아이콘 공간 확보 */
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.search-wrapper input:focus {
    border-color: var(--accent);
    outline: none;
    background: #000;
}

.search-icon {
    position: absolute;
    left: 12px;
    color: #666;
    font-size: 14px;
    pointer-events: none;
}

.btn-clear {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    color: #888;
    font-size: 16px;
    cursor: pointer;
    padding: 5px;
}
.btn-clear:hover { color: #fff; }

/* 필터 버튼 그룹 */
.filter-btn-group {
    display: flex;
    gap: 10px;
}

.btn-filter {
    background: #252529;
    border: 1px solid #444;
    color: #ccc;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-filter:hover, .btn-filter.active {
    background: #333;
    border-color: var(--accent);
    color: var(--accent);
}

/* 필터 개수 배지 */
.filter-badge {
    background: var(--accent);
    color: #000;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 10px;
    font-weight: 800;
    min-width: 18px;
    text-align: center;
}

/* --- 필터 옵션 패널 (확장 영역) --- */
.filter-panel {
    background: #18181b;
    border: 1px solid #333;
    border-top: none;
    border-radius: 0 0 12px 12px;
    margin-top: -15px; /* 컨트롤 바와 연결 */
    margin-bottom: 20px;
    padding: 20px;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.filter-section {
    margin-bottom: 0;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 칩 스타일 */
.chip {
    background: #252529;
    border: 1px solid #3f3f46;
    color: #a1a1aa;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.chip:hover {
    background: #333;
    color: #fff;
}

/* 선택된 칩 스타일 */
.chip.selected {
    background: rgba(255, 215, 0, 0.15); /* 노란색 틴트 */
    border-color: var(--accent);
    color: var(--accent);
    font-weight: bold;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .dashboard-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .filter-btn-group {
        justify-content: space-between;
    }
    .btn-filter {
        flex: 1;
        justify-content: center;
    }
}

/* [신규] 초기화 버튼 스타일 */
.btn-reset {
    padding: 10px; /* 아이콘만 있어서 패딩 조정 */
    color: #666;
}

.btn-reset:hover {
    background: #3f1a1a; /* 붉은 톤 배경 */
    border-color: #ef4444; /* 빨간 테두리 */
    color: #ef4444; /* 빨간 아이콘 */
    transform: rotate(180deg); /* 회전 애니메이션 */
}

/* 회전 애니메이션 부드럽게 */
.btn-reset {
    transition: all 0.4s ease;
}

/* --- [신규] 통합 변환기 모달 스타일 --- */

/* 1. 상단 경고 박스 */
.converter-guide-box {
    background: rgba(220, 38, 38, 0.1); /* 붉은 배경 */
    border: 1px solid rgba(220, 38, 38, 0.3);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
}
.converter-guide-box h4 {
    color: #f87171;
    margin: 0 0 8px 0;
    font-size: 15px;
}
.converter-guide-box p {
    color: #d1d5db;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}
.converter-guide-box strong { color: #fff; text-decoration: underline; }

/* 2. 작업 영역 레이아웃 (좌우 배치) */
.converter-workspace {
    display: flex;
    gap: 15px;
    flex: 1;
    min-height: 0; /* 스크롤 버그 방지 */
}

.work-col {
    flex: 1;
    background: #1e1e24;
    border: 1px solid #333;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.col-header {
    background: #252529;
    padding: 12px;
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    color: #eee;
    font-size: 14px;
}

.step-badge {
    background: #333;
    color: #aaa;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
}

/* 리스트 영역 (스크롤) */
.list-wrapper {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}
.list-wrapper::-webkit-scrollbar { width: 6px; }
.list-wrapper::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }

/* 중앙 화살표 */
.work-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}
.arrow-circle {
    width: 30px;
    height: 30px;
    background: #333;
    color: #888;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* 3. 입력/결과 그리드 */
.input-list-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.result-list-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 입력 아이템 카드 */
.conv-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #111;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #333;
}
.conv-item img {
    width: 32px; height: 32px;
    border-radius: 4px;
    border: 1px solid #444;
}
.conv-item .name {
    flex: 1;
    font-size: 12px;
    color: #ccc;
}
.conv-item input {
    width: 60px;
    padding: 6px;
    background: #222;
    border: 1px solid #444;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    font-weight: bold;
}
.conv-item input:focus { border-color: var(--accent); outline: none; }

/* 결과 아이템 카드 (여러 등급 표시) */
.result-group {
    background: #1a1a20;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px;
}
.result-header-text {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
    border-bottom: 1px dashed #333;
    padding-bottom: 4px;
}
.result-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.res-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #111;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #333;
    font-size: 11px;
}
.res-badge img { width: 16px; height: 16px; }
.res-badge span { font-weight: bold; }

.empty-state {
    text-align: center;
    color: #666;
    margin-top: 50px;
    font-size: 13px;
}

/* 하단 취소 버튼 */
.btn-cancel {
    background: #27272a;
    color: #ccc;
    border: 1px solid #3f3f46;
    padding: 14px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
}
.btn-cancel:hover { background: #333; color: #fff; }


/* --- [신규] 커스텀 알림창 스타일 --- */
.alert-content {
    width: 320px;
    text-align: center;
    padding: 30px;
    background: #1c1c1f;
}
.alert-icon {
    font-size: 40px;
    margin-bottom: 15px;
}
#alert-title {
    color: #fff;
    margin: 0 0 10px 0;
    font-size: 18px;
}
#alert-message {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 25px;
    line-height: 1.5;
}
.alert-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* --- [신규] 개선된 변환 결과 리스트 스타일 --- */

/* 결과 그룹 박스 */
.result-group {
    background: #18181b;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 5px;
}

/* 헤더 텍스트 */
.result-header-text {
    font-size: 12px;
    color: #888;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #333;
    font-weight: bold;
}

/* 결과 행 컨테이너 */
.result-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 개별 결과 행 (아이콘 + 이름 + 개수) */
.res-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #202023;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.2s;
}

.res-row img {
    width: 24px; height: 24px;
    object-fit: contain;
}

.res-name {
    flex: 1;
    font-size: 13px;
    font-weight: bold;
    color: #eee;
}

.res-count {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
}

/* 0개인 항목 (흐릿하게) */
.res-row.zero {
    background: transparent;
    opacity: 0.4;
}
.res-row.zero .res-name { font-weight: normal; color: #777; }
.res-row.zero .res-count { color: #777; }

/* 0개 항목이라도 마우스 올리면 살짝 보이게 */
.res-row.zero:hover { opacity: 0.8; background: #2a2a30; }