@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* 다크모드 기본 스타일 */
body { 
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; 
    background: #090d16;
    background-image: 
        radial-gradient(at 0% 0%, rgba(245, 158, 11, 0.08) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(14, 165, 233, 0.08) 0px, transparent 50%);
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
    word-break: keep-all;
}

.panel-card {
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.stat-btn-active {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    box-shadow: none !important;
}

.stat-btn-inactive {
    background-color: transparent !important;
    color: #94a3b8 !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

.stat-btn-inactive:hover {
    color: #f1f5f9 !important;
}

input, select { font-size: 16px !important; }
@media (min-width: 640px) { input, select { font-size: 0.875rem !important; } }

.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1.05rem;
    height: 1.05rem;
    border: 1.5px solid rgba(148, 163, 184, 0.35);
    border-radius: 0.375rem;
    background-color: rgba(15, 23, 42, 0.8);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.custom-checkbox::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em #f59e0b;
    transform-origin: center;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.custom-checkbox:checked {
    border-color: #f59e0b;
    background-color: rgba(245, 158, 11, 0.15);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.custom-checkbox:checked::before {
    transform: scale(1);
}

.custom-checkbox:hover {
    border-color: #f59e0b;
}

.res-label-card {
    transition: all 0.2s ease-in-out;
}
.res-label-card:has(input:checked) {
    border-color: rgba(245, 158, 11, 0.5) !important;
    background-color: rgba(245, 158, 11, 0.12) !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, 0.15);
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.6); border-radius: 9999px; }
::-webkit-scrollbar-thumb { background: rgba(245, 158, 11, 0.35); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(245, 158, 11, 0.7); }
* { scrollbar-width: thin; scrollbar-color: rgba(245, 158, 11, 0.35) rgba(15, 23, 42, 0.6); }

/* 라이트모드 전용 보정 */
body.theme-light {
    background: #f8fafc !important;
    background-image: 
        radial-gradient(at 10% 10%, rgba(245, 158, 11, 0.06) 0px, transparent 40%),
        radial-gradient(at 90% 90%, rgba(14, 165, 233, 0.06) 0px, transparent 40%) !important;
    color: #0f172a !important;
}

body.theme-light .panel-card,
body.theme-light header {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05) !important;
}

body.theme-light .text-slate-100,
body.theme-light .text-slate-200,
body.theme-light .text-slate-300 {
    color: #0f172a !important;
}

body.theme-light .text-slate-400,
body.theme-light .text-slate-500,
body.theme-light .text-slate-600 {
    color: #475569 !important;
}

body.theme-light .text-amber-400,
body.theme-light .text-amber-300 {
    color: #d97706 !important;
}

body.theme-light [class*="bg-slate-950"]:not(#user-profile-card),
body.theme-light [class*="bg-slate-900"],
body.theme-light [class*="bg-slate-800"] {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

body.theme-light #user-profile-card .bg-slate-950\/45 {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: #cbd5e1 !important;
}

body.theme-light #user-profile-card .bg-slate-950\/45 * {
    color: #334155;
}

body.theme-light #user-profile-card .text-slate-400,
body.theme-light #user-profile-card .text-slate-300,
body.theme-light #user-profile-card .text-slate-500 {
    color: #475569 !important;
}

body.theme-light input, 
body.theme-light select {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
}

body.theme-light input::placeholder {
    color: #94a3b8 !important;
}

body.theme-light input:focus,
body.theme-light select:focus {
    border-color: #f59e0b !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
}

body.theme-light .stat-btn-active {
    background-color: #f59e0b !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25) !important;
}

body.theme-light .stat-btn-inactive {
    background-color: transparent !important;
    color: #64748b !important;
    border-color: transparent !important;
}

body.theme-light .stat-btn {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #cbd5e1 !important;
}

body.theme-light .stat-btn[class*="bg-amber"] {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border-color: #f59e0b !important;
}

body.theme-light .bg-gradient-to-r.from-amber-500,
body.theme-light #btn-fetch {
    background: linear-gradient(to right, #f59e0b, #d97706) !important;
    color: #ffffff !important;
}

body.theme-light #btn-theme,
body.theme-light button[onclick="openPatchModal()"],
body.theme-light #custom-btn-fetch {
    background-color: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
}

body.theme-light #uid-result-box,
body.theme-light #result-box {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
}

body.theme-light [class*="bg-amber-500/15"] {
    background-color: #fef3c7 !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

body.theme-light [class*="bg-amber-500/15"] * {
    color: #92400e !important;
}

body.theme-light #uid-efficiency-list > div:not([class*="bg-amber"]),
body.theme-light #custom-efficiency-list > div:not([class*="bg-amber"]) {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}

body.theme-light #uid-efficiency-list *,
body.theme-light #custom-efficiency-list * {
    color: #334155 !important;
}

body.theme-light #uid-efficiency-list .text-slate-500,
body.theme-light #custom-efficiency-list .text-slate-500,
body.theme-light #uid-efficiency-list .text-slate-400,
body.theme-light #custom-efficiency-list .text-slate-400 {
    color: #64748b !important;
}

.namecard-text-shadow {
    text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 1px 6px rgba(0,0,0,0.55);
}

body.theme-light #user-profile-card #user-nickname,
body.theme-light #user-profile-card #user-signature,
body.theme-light #user-nickname,
body.theme-light #user-signature {
    color: #f1f5f9 !important;
}

/* =========================================
   SC 수치 애니메이션 및 원소별 이펙트
   ========================================= */

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

/* 프리즘 다이아몬드 크리스탈 이펙트 */
@keyframes scCrystalShine {
    0%, 100% { 
        background-position: 0% 50%; 
        filter: drop-shadow(0 0 10px rgba(233, 213, 255, 0.6));
    }
    50% { 
        background-position: 100% 50%; 
        filter: drop-shadow(0 0 10px rgba(186, 230, 253, 0.6));
    }
}

.sc-effect-official,
.sc-effect-top {
    background: linear-gradient(110deg, #ffffff 0%, #e0f2fe 20%, #e9d5ff 40%, #fce7f3 60%, #bae6fd 80%, #ffffff 100%);
    background-size: 250% 250%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: scCrystalShine 3.5s ease-in-out infinite;
    font-weight: 800;
    letter-spacing: 0.3px;
}

/* 원소별 이펙트 */
.sc-effect-pyro {
    background: linear-gradient(90deg, #ef4444, #f97316, #ef4444);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: scShine 2s ease infinite;
    filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6));
}

.sc-effect-hydro {
    background: linear-gradient(90deg, #1d4ed8, #3b82f6, #1d4ed8);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: scShine 2s ease infinite;
    filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.65));
}

.sc-effect-anemo {
    background: linear-gradient(90deg, #10b981, #34d399, #10b981);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: scShine 2s ease infinite;
    filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.6));
}

.sc-effect-electro {
    background: linear-gradient(90deg, #a855f7, #c084fc, #a855f7);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: scShine 2s ease infinite;
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.6));
}

.sc-effect-dendro {
    background: linear-gradient(90deg, #84cc16, #a3e635, #84cc16);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: scShine 2s ease infinite;
    filter: drop-shadow(0 0 8px rgba(132, 204, 22, 0.6));
}

.sc-effect-cryo {
    background: linear-gradient(90deg, #06b6d4, #67e8f9, #06b6d4);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: scShine 2s ease infinite;
    filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.65));
}

.sc-effect-geo {
    background: linear-gradient(90deg, #eab308, #fef08a, #eab308);
    background-size: 200% 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: scShine 2s ease infinite;
    filter: drop-shadow(0 0 8px rgba(234, 179, 8, 0.6));
}

/* =========================================
   라이트모드 전용 글씨 이펙트 가독성 보정
   ========================================= */

body.theme-light .sc-effect-official,
body.theme-light .sc-effect-top {
    background: linear-gradient(110deg, #3730a3 0%, #4f46e5 25%, #6d28d9 50%, #be185d 75%, #1d4ed8 100%) !important;
    background-size: 250% 250% !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 2px rgba(79, 70, 229, 0.2)) !important;
}

body.theme-light .sc-effect-pyro {
    background: linear-gradient(90deg, #dc2626, #ea580c, #dc2626) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 2px rgba(220, 38, 38, 0.2)) !important;
}

body.theme-light .sc-effect-hydro {
    background: linear-gradient(90deg, #1e40af, #2563eb, #1e40af) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 2px rgba(30, 64, 175, 0.25)) !important;
}

body.theme-light .sc-effect-anemo {
    background: linear-gradient(90deg, #059669, #0d9488, #059669) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 2px rgba(5, 150, 105, 0.2)) !important;
}

body.theme-light .sc-effect-electro {
    background: linear-gradient(90deg, #7c3aed, #9333ea, #7c3aed) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 2px rgba(124, 58, 237, 0.2)) !important;
}

body.theme-light .sc-effect-dendro {
    background: linear-gradient(90deg, #4d7c0f, #65a30d, #4d7c0f) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 2px rgba(77, 124, 15, 0.2)) !important;
}

body.theme-light .sc-effect-cryo {
    background: linear-gradient(90deg, #0e7490, #0891b2, #0e7490) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 2px rgba(14, 116, 144, 0.25)) !important;
}

body.theme-light .sc-effect-geo {
    background: linear-gradient(90deg, #b45309, #d97706, #b45309) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 2px rgba(180, 83, 9, 0.2)) !important;
}

/* =========================================
   공식(Official) 및 최고 SC 캐릭터 전용 테마
   ========================================= */

.official-profile-card,
.top-sc-card {
    border: 1px solid rgba(224, 231, 255, 0.45) !important;
    box-shadow: 
        0 4px 24px -2px rgba(15, 23, 42, 0.6),
        0 0 20px rgba(233, 213, 255, 0.18),
        inset 0 0 15px rgba(255, 255, 255, 0.05) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.official-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: linear-gradient(135deg, rgba(233, 213, 255, 0.2), rgba(186, 230, 253, 0.2));
    border: 1px solid rgba(244, 114, 182, 0.4);
    color: #f8fafc;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 10px rgba(233, 213, 255, 0.25);
    pointer-events: none;
    z-index: 10;
}

.official-uid-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background-color: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(224, 231, 255, 0.4);
    border-radius: 8px;
    color: #f1f5f9;
    font-weight: 600;
    letter-spacing: 0.5px;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 12px rgba(233, 213, 255, 0.15);
}

.official-uid-container::before {
    content: "✦";
    margin-right: 6px;
    color: #e9d5ff;
    font-size: 11px;
    opacity: 0.9;
    filter: drop-shadow(0 0 3px #f472b6);
}