@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&family=Do+Hyeon&display=swap');


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #0b0d12;
    color: #e5e7eb;
    font-family: 'Inter', 'Malgun Gothic', sans-serif;
    min-height: 100vh;
    line-height: 1.5;
}

.app {
    width: min(1480px, calc(100% - 20px));
    margin: 20px auto;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #1a1d2e;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.workspace {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 100vh;
}

/* =============================================
   사이드바
   ============================================= */
.sidebar {
    background: #0f1019;
    border-right: 1px solid #1a1d2e;
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.brand {
    margin-bottom: 8px;
}

.brand-label,
.mini-label {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #4a7cff;
    font-weight: 800;
    margin-bottom: 6px;
}

.brand-title,
.hero {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 8px;
}

.brand-desc,
.muted {
    font-size: 12px;
    color: #4a5568;
    line-height: 1.6;
}

/* =============================================
   상단 스위치
   ============================================= */
.switch-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    background: #1a1c24;
    border: 1px solid #252836;
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
    margin-bottom: 20px;
}

.switch-wrap a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    text-decoration: none;
    text-align: center;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    color: #5a6178;
    transition: .2s ease;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.switch-wrap a:not(.active):hover {
    color: #c6d4e8;
    background: rgba(255,255,255,0.06);
}

.switch-wrap a.active {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    color: #fff;
    box-shadow: 0 2px 12px rgba(99,102,241,.30);
    animation: switchActiveAura 5s ease-in-out infinite;
}



.switch-wrap a.active::before {
    content: "";
    position: absolute;
    inset: -45%;
    border-radius: 999px;
    pointer-events: none;
    background:
        radial-gradient(circle at center,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.10) 18%,
            rgba(75, 211, 255, 0.10) 34%,
            transparent 62%);
    opacity: 0;
    transform: scale(0.55);
    animation: switchGlowPulse 5s ease-in-out infinite;
    z-index: -1;
}

.switch-wrap a.active::after {
    content: "";
    position: absolute;
    top: -35%;
    left: -130%;
    width: 72%;
    height: 190%;
    border-radius: 999px;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.22) 48%,
        rgba(255, 255, 255, 0.06) 68%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(18deg);
    opacity: 0;
    animation: switchGlassSweep 5s linear infinite;
    z-index: 1;
}





@keyframes switchGlowPulse {
    0%, 80%, 100% {
        opacity: 0;
        transform: scale(0.55);
    }
    86% {
        opacity: 0.28;
        transform: scale(1.02);
    }
    92% {
        opacity: 0.10;
        transform: scale(1.25);
    }
}

@keyframes switchGlassSweep {
    0%, 80% {
        left: -130%;
        opacity: 0;
    }
    84% {
        opacity: 0.75;
    }
    96% {
        left: 145%;
        opacity: 0.35;
    }
    100% {
        left: 145%;
        opacity: 0;
    }
}

@keyframes switchActiveAura {
    0%, 80%, 100% {
        box-shadow: 0 2px 12px rgba(99, 102, 241, .30);
    }
    88% {
        box-shadow:
            0 2px 12px rgba(99, 102, 241, .34),
            0 0 10px rgba(120, 210, 255, .16),
            0 0 18px rgba(120, 210, 255, .08);
    }
    94% {
        box-shadow:
            0 2px 12px rgba(99, 102, 241, .30),
            0 0 6px rgba(120, 210, 255, .10),
            0 0 12px rgba(120, 210, 255, .05);
    }
}

.side-divider,
.sidebar-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #1e2030, transparent);
    margin: 14px 0;
}

/* =============================================
   가이드 버튼
   ============================================= */
.guide-trigger-wrap {
    margin-top: 10px;
}

.guide-trigger {
    width: 100%;
    border: 1px solid #252836;
    background: #1a1c24;
    border-radius: 14px;
    padding: 15px 16px;
    cursor: pointer;
    text-align: left;
    transition: .2s;
    color: #e5e7eb;
}

.guide-trigger:hover {
    border-color: #3b82f6;
    background: #1d2130;
}

.guide-small {
    display: block;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: #4a7cff;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 800;
}

.guide-main {
    font-size: 15px;
    font-weight: 900;
    color: #fff;
}

.guide-accent {
    color: #f7ca54;
}

/* =============================================
   사이드바 메뉴 그룹
   ============================================= */
.menu-group {
    margin-bottom: 6px;
}

.menu-group-title {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #3b4563;
    font-weight: 800;
    padding: 0 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.menu-group-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #1a1d2e;
}

.menu-group-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.dot-green { background: #34d399; }
.dot-blue { background: #3b82f6; }
.dot-amber { background: #f7ca54; }
.dot-red { background: #f87171; }

.menu-list,
.menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.menu-item,
.menu-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: all .2s;
    text-align: left;
    color: inherit;
    font: inherit;
}

.menu-item:hover,
.menu-btn:hover {
    background: rgba(255, 255, 255, .03);
    border-color: #1e2030;
}

.menu-item.active,
.menu-btn.active {
    background: linear-gradient(135deg, rgba(59, 130, 246, .12), rgba(99, 102, 241, .08));
    border-color: rgba(99, 102, 241, .30);
}

.menu-btn.disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(.7);
}

.menu-btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.icon-green { background: rgba(52, 211, 153, .12); }
.icon-blue { background: rgba(59, 130, 246, .12); }
.icon-amber { background: rgba(247, 202, 84, .12); }
.icon-red { background: rgba(248, 113, 113, .12); }

.menu-btn-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.menu-btn-name {
    font-size: 13px;
    font-weight: 700;
    color: #c0c7d6;
    white-space: nowrap;
}

.menu-item.active .menu-btn-name,
.menu-btn.active .menu-btn-name {
    color: #fff;
}

.menu-btn.disabled .menu-btn-name {
    color: #4a5568;
}

.menu-btn-sub {
    font-size: 10px;
    color: #3b4563;
    white-space: nowrap;
}

.menu-item.active .menu-btn-sub,
.menu-btn.active .menu-btn-sub {
    color: #6b7280;
}

.menu-btn-badge {
    margin-left: auto;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-live {
    background: rgba(52, 211, 153, .12);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, .25);
}

.badge-ended {
    background: rgba(107, 114, 128, .12);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, .25);
}

.badge-upcoming {
    background: rgba(248, 113, 113, .10);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, .20);
    font-size: 8px;
    letter-spacing: .3px;
}

.badge-hot {
    background: linear-gradient(135deg, rgba(251, 146, 60, .15), rgba(248, 113, 113, .12));
    color: #fb923c;
    border: 1px solid rgba(251, 146, 60, .30);
    font-size: 9px;
    letter-spacing: 1px;
}





/* =============================================
   패치노트 - 미니 게시판형
   ============================================= */
.patch-section {
    margin-top: 6px;
    border: 1px solid #1a1d2e;
    border-radius: 12px;
    background: #11131b;
    overflow: hidden;
}

.patch-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    background: #151824;
    border-bottom: 1px solid #1d2231;
    margin-bottom: 0;
}

.patch-icon {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: rgba(34, 211, 238, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}

.patch-title {
    font-size: 11px;
    font-weight: 800;
    color: #22d3ee;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
}

.patch-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.patch-item {
    display: grid;
    grid-template-columns: 54px 1fr auto;
    align-items: center;
    column-gap: 10px;
    min-height: 54px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #1a1d2e;
    border-radius: 0;
    box-sizing: border-box;
    transition: background 0.15s ease;
    cursor: pointer;
}

.patch-item:last-child {
    border-bottom: none;
}

.patch-item:hover {
    background: #171a25;
    transform: none;
}

.patch-date {
    width: 54px;
    min-width: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    flex-shrink: 0;
}

.patch-date-month {
    font-size: 10px;
    font-weight: 800;
    color: #4a7cff;
    line-height: 1;
    white-space: nowrap;
}

.patch-date-day {
    font-size: 14px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    white-space: nowrap;
}

.patch-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.patch-content-title {
    font-size: 12px;
    font-weight: 700;
    color: #d7deeb;
    line-height: 1.25;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.patch-content-desc {
    font-size: 10px;
    color: #667085;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.patch-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
}

.ptag-new {
    background: rgba(52, 211, 153, 0.12);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.2);
}

.ptag-update {
    background: rgba(247, 202, 84, 0.12);
    color: #f7ca54;
    border: 1px solid rgba(247, 202, 84, 0.2);
}

@media (max-width: 768px) {
    .patch-header {
        padding: 10px 12px;
    }

    .patch-list {
        padding: 0;
    }

    .patch-item {
        grid-template-columns: 48px 1fr auto;
        column-gap: 8px;
        min-height: 50px;
        padding: 7px 10px;
    }

    .patch-date {
        width: 48px;
        min-width: 48px;
    }

    .patch-date-month {
        font-size: 9px;
    }

    .patch-date-day {
        font-size: 13px;
    }

    .patch-content-title {
        font-size: 11px;
    }

    .patch-content-desc {
        font-size: 9px;
    }

    .patch-tag {
        min-width: 32px;
        height: 17px;
        font-size: 7px;
        padding: 0 5px;
    }
}





/* =============================================
   경매 계산기
   ============================================= */
.auction-calc {
    border-radius: 14px;
    padding: 16px;
    background: #1a1c24;
    border: 1px solid rgba(200,165,90,.25);
    position: relative;
    overflow: hidden;
    margin-bottom: 6px;
}

.auction-calc::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(200,165,90,.04), transparent 55%);
    pointer-events: none;
}

.ac-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    flex-wrap: nowrap;
    gap: 8px;
}

.ac-header > div:first-child {
    flex-shrink: 0;
    white-space: nowrap;
}

.ac-label {
    font-size: 10px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #c8a55a;
    font-weight: 900;
    margin-bottom: 2px;
    white-space: nowrap;
}

.ac-title {
    font-size: 14px;
    font-weight: 900;
    color: #fff;
}

.ac-toggle {
    display: flex;
    flex-shrink: 0;
    background: #15171f;
    border: 1px solid rgba(200,165,90,.16);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    white-space: nowrap;
}

.ac-toggle-btn {
    padding: 4px 8px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #5a6178;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    transition: .15s;
}

.ac-toggle-btn:hover {
    color: #c0c7d6;
}

.ac-toggle-btn.active {
    background: linear-gradient(135deg, #c8a55a, #a8843a);
    color: #1a1000;
    box-shadow: 0 0 10px rgba(200,165,90,.22);
}

.ac-input-label {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #4a7cff;
    font-weight: 900;
    margin-bottom: 5px;
    position: relative;
    z-index: 1;
}

.ac-input-wrap {
    position: relative;
    z-index: 1;
    margin-bottom: 12px;
}

.ac-input {
    width: 100%;
    padding: 9px 36px 9px 12px;
    border-radius: 10px;
    background: #15171f;
    border: 1px solid rgba(99,102,241,.3);
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    text-align: right;
    outline: 0;
    transition: .15s;
}

.ac-input:focus {
    border-color: rgba(99,102,241,.6);
    background: #1e2030;
    box-shadow: 0 0 0 2px rgba(99,102,241,.12);
}

.ac-input::placeholder {
    color: rgba(255,255,255,.22);
    font-size: 13px;
}

.ac-input-suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 900;
    color: #5a6178;
    pointer-events: none;
}

.ac-breakeven {
    position: relative;
    z-index: 1;
    border-radius: 10px;
    padding: 10px 12px;
    background: rgba(200,165,90,.06);
    border: 1px solid rgba(200,165,90,.18);
    margin-bottom: 10px;
}

.ac-breakeven-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.ac-breakeven-label {
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #c8a55a;
    font-weight: 900;
}

.ac-breakeven-sub {
    font-size: 10px;
    color: #5a6178;
}

.ac-breakeven-value {
    font-size: 20px;
    font-weight: 900;
    color: #f7ca54;
}

.ac-breakeven-desc {
    font-size: 10px;
    color: #5a6178;
    margin-top: 2px;
}

.ac-sep {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    position: relative;
    z-index: 1;
}

.ac-sep-line {
    flex: 1;
    height: 1px;
    background: #1e2030;
}

.ac-sep-text {
    font-size: 10px;
    color: #5a6178;
    font-weight: 900;
    letter-spacing: 1px;
    white-space: nowrap;
}

.ac-rates {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 5px;
}

.ac-rate-row {
    border-radius: 9px;
    padding: 8px 10px;
    background: #15171f;
    border: 1px solid #1e2030;
    transition: .15s;
}

.ac-rate-row:hover {
    background: #1a1c24;
    border-color: #252836;
}

.ac-rate-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.ac-rate-left {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ac-rate-pct {
    font-size: 11px;
    font-weight: 900;
}

.ac-rate-desc {
    font-size: 10px;
    color: #5a6178;
}

.ac-rate-val {
    font-size: 15px;
    font-weight: 900;
    color: #fff;
}

.ac-bar-wrap {
    height: 3px;
    border-radius: 999px;
    background: #1e2030;
    overflow: hidden;
}

.ac-bar {
    height: 100%;
    border-radius: 999px;
    transition: width .35s ease;
}

.rate-5 { color: #34d399; }
.bar-5 { background: linear-gradient(90deg, #3b82f6, #34d399); }
.rate-10 { color: #4a7cff; }
.bar-10 { background: linear-gradient(90deg, #6366f1, #3b82f6); }

/* =============================================
   메인 공통
   ============================================= */
.main {
    background: #0d0e14;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.main.simple-quick-mode {
    gap: 16px;
}

.topline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.title {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 6px;
    line-height: 1.15;
}

.subtitle {
    font-size: 13px;
    color: #4a5568;
}

.title-meta {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.clock-box,
.date {
    padding: 8px 14px;
    border-radius: 10px;
    background: #141620;
    border: 1px solid #1e2030;
    font-size: 13px;
    color: #4a5568;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

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

.tabs.simple-tabs {
    display: block;
    width: 100%;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 18px;
    align-items: start;
}

.main-col {
    display: grid;
    gap: 18px;
}

.right-column {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* =============================================
   우측 카드
   ============================================= */
.side-card {
    padding: 20px;
    border-radius: 18px;
    background: #111320;
    border: 1px solid #1a1d2e;
}

.side-label,
.side-title {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #4a7cff;
    font-weight: 800;
    text-align: center;
    margin-bottom: 14px;
}

.time-card.simple-disabled {
    opacity: .58;
    filter: grayscale(.1);
    pointer-events: none;
    position: relative;
}

.time-card.simple-disabled::after {
    content: "간편보기 상태에서는 비활성화";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid #252836;
    background: rgba(10,14,24,.9);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
    z-index: 5;
}

.time-display,
.time-main {
    text-align: center;
    font-size: 42px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 6px;
    letter-spacing: 2px;
}

.time-base,
.time-labels {
    text-align: center;
    font-size: 11px;
    color: #3b4563;
    margin-bottom: 16px;
}

.time-controls,
.time-inputs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}

.time-input-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.time-input,
.time-input-box {
    width: 68px;
    height: 46px;
    border-radius: 12px;
    background: #141620;
    border: 1px solid #1e2030;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
}

.time-input-box::-webkit-inner-spin-button,
.time-input-box::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.time-stepper {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.step-btn,
.time-step-btn {
    width: 24px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid #1e2030;
    background: #141620;
    color: #4a5568;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.time-sep,
.time-divider {
    height: 1px;
    background: #1a1d2e;
    margin-bottom: 14px;
}

.party-dps-box,
.party-dps {
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(247,202,84,.06);
    border: 1px solid rgba(247,202,84,.15);
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #f7ca54;
    margin-bottom: 10px;
}

.party-dps-box span,
.party-dps .party-dps-value {
    color: #fff;
}

.side-hint,
.side-note,
.info-text {
    text-align: center;
    font-size: 11px;
    color: #3b4563;
    line-height: 1.7;
}

.mode-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mode-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    background: #141620;
    font-size: 12px;
}

.mode-info-label {
    color: #4a5568;
    font-weight: 600;
}

.mode-info-value {
    font-weight: 800;
}

.val-green { color: #34d399; }
.val-blue { color: #60a5fa; }
.val-gold { color: #f7ca54; }

/* =============================================
   상단 안내 + 레벨 탭
   ============================================= */
.simple-top-guide {
    width: 100%;
    padding: 16px 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, #111320 0%, #0f121b 100%);
    border: 1px solid #1a1d2e;
    margin-bottom: 14px;
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.simple-top-guide-title {
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 6px;
}

.simple-top-guide-sub {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.6;
}

.simple-level-tabs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 0;
}

.simple-level-tab {
    position: relative;
    min-width: 88px;
    padding: 12px 14px 11px;
    border-radius: 14px;
    background: #151822;
    border: 1px solid #23283a;
    color: #778197;
    cursor: pointer;
    transition: .2s ease;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    overflow: visible;
    isolation: isolate;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.simple-level-tab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    height: 2px;
    border-radius: 999px;
    background: rgba(120, 140, 180, .22);
}

.simple-level-tab:hover {
    transform: translateY(-1px);
    border-color: #323952;
    background: #171b27;
    color: #d5deea;
}

.simple-level-tab.active {
    background: linear-gradient(180deg, #2a1d12 0%, #1a1511 100%);
    border-color: rgba(255, 153, 51, .55);
    color: #fff4e6;
    box-shadow:
        0 0 0 1px rgba(255, 153, 51, .18),
        0 0 14px rgba(255, 140, 0, .22),
        0 0 30px rgba(255, 140, 0, .14),
        inset 0 0 18px rgba(255, 170, 70, .08);
    animation: simpleTabHotPulse 2.4s ease-in-out infinite;
}

.simple-level-tab.active::before {
    background: transparent;
    box-shadow: none;
    height: 0;
}

.simple-level-tab.active::after {
    content: none;
}

.simple-level-tab-main {
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
}

.simple-level-tab-sub {
    font-size: 10px;
    font-weight: 700;
    opacity: .78;
    line-height: 1;
}

/* =============================================
   공통 배지
   ============================================= */
.badge,
.meta-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,.08);
}

.type-human     { background: rgba(59,130,246,.15); color: #93c5fd; }
.type-ancient   { background: rgba(167,139,250,.15); color: #c4b5fd; }
.type-demon     { background: rgba(251,146,60,.15); color: #fdba74; }
.type-archdemon { background: rgba(248,113,113,.15); color: #fca5a5; }
.type-divine    { background: rgba(125,211,252,.14); color: #bae6fd; }
.type-beast     { background: rgba(180,140,100,.15); color: #d4b896; }
.type-insect    { background: rgba(132,204,22,.12); color: #bef264; }
.type-spirit    { background: rgba(34,211,238,.12); color: #a5f3fc; }

.attr-fire      { background: rgba(251,146,60,.15); color: #fdba74; }
.attr-holy      { background: rgba(253,224,71,.12); color: #fde68a; }
.attr-dark      { background: rgba(167,139,250,.15); color: #c4b5fd; }
.attr-earth     { background: rgba(180,140,100,.12); color: #d4b896; }
.attr-lightning { background: rgba(253,224,71,.12); color: #fde68a; }
.attr-water     { background: rgba(56,189,248,.12); color: #7dd3fc; }
.attr-none      { background: rgba(255,255,255,.06); color: #9ca3af; }

/* =============================================
   간편보기 카드
   ============================================= */
.simple-view {
    width: 100%;
    display: grid;
    gap: 14px;
}

.simple-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.simple-card {
    background: #111320;
    border: 1px solid #1a1d2e;
    border-radius: 18px;
    padding: 18px;
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 16px;
    transition: .2s ease;
}

.simple-card:hover {
    transform: translateY(-2px);
    border-color: #2a3147;
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

.simple-left {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.simple-node {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
    color: #0d1118;
    flex-shrink: 0;
}

.b-green .simple-node  { background: #34d399; }
.b-gold .simple-node   { background: #f7ca54; }
.b-purple .simple-node { background: #a78bfa; }
.b-orange .simple-node { background: #fb923c; }
.b-gray .simple-node   { background: #6b7280; color: #fff; }

.simple-right {
    display: grid;
    gap: 10px;
}

.simple-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.simple-title {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
    margin: 0;
}

.simple-kind {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(251,146,60,.10);
    border: 1px solid rgba(251,146,60,.18);
    color: #fb923c;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.simple-rows {
    display: grid;
    gap: 8px;
}

.simple-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 11px 12px;
    border-radius: 12px;
    background: #151822;
    border: 1px solid #1c2030;
}

.simple-row-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gate-b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 22px;
    padding: 0 7px;
    border-radius: 6px;
    background: #212536;
    color: #98a2b3;
    font-size: 10px;
    font-weight: 800;
}

.boss-b {
    font-size: 14px;
    font-weight: 800;
    color: #e5e7eb;
}

.simple-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}

.simple-badges .badge,
.simple-row .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 7px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    border: 1px solid rgba(255,255,255,.08);
}

.range-b {
    font-size: 15px;
    font-weight: 900;
    color: #f7ca54;
    white-space: nowrap;
}

.range-b.preparing {
    color: #f7ca54;
    font-style: italic;
}

/* 골드바 */
.simple-goldbar {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    border: 1px solid #202434;
    margin-top: 4px;
}

.gold-item,
.gold-total {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 88px;
}

.gold-item-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.gold-clear-label { color: #f7ca54; }
.gold-bind-label  { color: #9ca3af; }

.gold-total-label {
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .3px;
}

.gold-item-value {
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
}

.gold-clear-value { color: #f7ca54; }
.gold-bind-value  { color: #e5e7eb; }

.gold-total-value {
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
}

.gold-operator {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #3b4563;
    font-weight: 900;
    font-size: 15px;
    padding-bottom: 2px;
}

.icon {
    width: 14px;
    height: 14px;
}

/* =============================================
   간편보기 상단 히어로
   ============================================= */
.simple-hero {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 24px;
    background:
        radial-gradient(circle at top right, rgba(99,102,241,.16), transparent 28%),
        radial-gradient(circle at bottom left, rgba(59,130,246,.10), transparent 30%),
        linear-gradient(180deg, #131722 0%, #0f121b 100%);
    border: 1px solid #20263a;
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
    margin-bottom: 16px;
}

.simple-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.025) 35%, transparent 70%);
    pointer-events: none;
}

.simple-hero-top {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
    align-items: stretch;
}

.simple-hero-left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}

.simple-hero-copy {
    display: block;
}

.simple-hero-kicker {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #6ea8ff;
    font-weight: 800;
    margin-bottom: 12px;
}

.simple-hero-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.simple-hero-title-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(251,146,60,.18), rgba(248,113,113,.16));
    border: 1px solid rgba(251,146,60,.26);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 8px 18px rgba(251,146,60,.10);
}

.simple-hero-title {
    font-size: 34px;
    line-height: 1.08;
    font-weight: 900;
    color: #fff;
    letter-spacing: -.3px;
}

.simple-hero-desc {
    font-size: 14px;
    line-height: 1.7;
    color: #8a94a8;
    max-width: 720px;
    margin-bottom: 0;
}

.simple-hero-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.simple-hero-pill {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

.pill-level {
    background: rgba(52,211,153,.06);
    color: #86efac;
    border-color: rgba(52,211,153,.14);
}

.pill-compare {
    background: rgba(59,130,246,.06);
    color: #93c5fd;
    border-color: rgba(59,130,246,.14);
}

.pill-cut {
    background: rgba(247,202,84,.06);
    color: #fcd34d;
    border-color: rgba(247,202,84,.14);
}

.simple-hero-right {
    width: 208px;
    display: grid;
    gap: 8px;
    flex: 0 0 208px;
}

.simple-hero-stat {
    padding: 11px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}

.simple-hero-stat-label {
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 800;
    margin-bottom: 4px;
}

.simple-hero-stat-value {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    line-height: 1.05;
}

.simple-hero-stat-sub {
    font-size: 10px;
    color: #7c879c;
    margin-top: 3px;
}

/* =============================================
   정밀 계산 / 가디언 공통 히어로
   ============================================= */
.precision-hero {
    background: linear-gradient(180deg, #111320 0%, #0f121b 100%);
    border: 1px solid #1a1d2e;
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 16px 38px rgba(0,0,0,.25);
}

.precision-hero-top {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.precision-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(99,102,241,.12));
    border: 1px solid rgba(99,102,241,.26);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.precision-hero-meta {
    flex: 1;
    min-width: 0;
}

.precision-hero-mini {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: #7dd3fc;
    margin-bottom: 4px;
}

.precision-hero-title {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 6px;
}

.precision-hero-sub {
    font-size: 12px;
    color: #667085;
}

.precision-hero-badges {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* =============================================
   공통 컨트롤 박스
   ============================================= */
.precision-control {
    background: #111320;
    border: 1px solid #1a1d2e;
    border-radius: 18px;
    padding: 20px;
}

.precision-control-section {
    margin-bottom: 18px;
}

.precision-control-section:last-child {
    margin-bottom: 0;
}

.precision-control-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #4a7cff;
    margin-bottom: 10px;
}

.precision-control-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #1e2030, transparent);
    margin: 18px 0;
}

/* =============================================
   세르카 / 성당 compact 선택 UI
   ============================================= */
.compact-precision-control {
    display: grid;
    gap: 16px;
}

.precision-inline-group {
    display: grid;
    gap: 8px;
}

.precision-diff-inline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 66.6%;
}

.precision-gate-inline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 66.6%;
}

.precision-diff-chip {
    min-width: 92px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #151822;
    border: 1px solid #212536;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    transition: .2s ease;
    white-space: nowrap;
}

.precision-diff-chip:hover {
    border-color: #3b4563;
}

.precision-diff-chip-check {
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    min-height: 12px;
}

.precision-diff-chip-main {
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.precision-diff-chip-sub {
    font-size: 10px;
    color: #667085;
    line-height: 1;
}

.precision-diff-chip.pd-green.active {
    background: linear-gradient(135deg, rgba(52,211,153,.12), rgba(52,211,153,.04));
    border-color: rgba(52,211,153,.35);
    color: #34d399;
}

.precision-diff-chip.pd-gold.active {
    background: linear-gradient(135deg, rgba(247,202,84,.12), rgba(247,202,84,.04));
    border-color: rgba(247,202,84,.35);
    color: #f7ca54;
}

.precision-diff-chip.pd-purple.active {
    background: linear-gradient(135deg, rgba(167,139,250,.12), rgba(167,139,250,.04));
    border-color: rgba(167,139,250,.35);
    color: #a78bfa;
}

.precision-gate-chip {
    position: relative;
    min-width: 0;
    min-height: 84px;
    padding: 18px 14px 12px;
    border-radius: 12px;
    background: #151822;
    border: 1px solid #212536;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: .2s ease;
}

.precision-gate-chip:hover {
    border-color: #3b4563;
}

.precision-gate-chip.active {
    background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(99,102,241,.08));
    border-color: rgba(99,102,241,.35);
    box-shadow: 0 4px 12px rgba(59,130,246,.12);
}

.precision-gate-chip.active::before {
    content: "✓";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 900;
    color: #60a5fa;
    line-height: 1;
    opacity: .9;
}

.precision-gate-chip-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    text-align: center;
    margin-top: 8px;
}

.precision-gate-chip-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    text-align: center;
}

.precision-gate-chip-gate {
    font-size: 16px;
    font-weight: 900;
    color: #60a5fa;
    line-height: 1;
    flex-shrink: 0;
}

.precision-gate-chip-boss {
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    line-height: 1;
    flex-shrink: 0;
}

.precision-gate-chip-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 2px;
}

.precision-gate-chip-badges .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 20px !important;
    padding: 0 7px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
}

.precision-gate-chip-badges .badge.type-human { background: rgba(59,130,246,.15) !important; color: #93c5fd !important; }
.precision-gate-chip-badges .badge.type-ancient { background: rgba(167,139,250,.15) !important; color: #c4b5fd !important; }
.precision-gate-chip-badges .badge.attr-none { background: rgba(255,255,255,.06) !important; color: #9ca3af !important; }
.precision-gate-chip-badges .badge.attr-dark { background: rgba(167,139,250,.15) !important; color: #c4b5fd !important; }
.precision-gate-chip-badges .badge.attr-holy { background: rgba(253,224,71,.12) !important; color: #fde68a !important; }

.precision-gate-chip-main {
    display: none !important;
}

/* =============================================
   가디언 한 줄형 UI
   ============================================= */
.guardian-inline-control {
    display: block;
}

.guardian-inline-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
}

.guardian-tier-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

.guardian-tier-chip {
    min-width: 0;
    min-height: 58px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #151822;
    border: 1px solid #212536;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    transition: .2s ease;
    position: relative;
}

.guardian-tier-chip:hover {
    border-color: #3b4563;
}

.guardian-tier-chip.active {
    background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(99,102,241,.08));
    border-color: rgba(99,102,241,.35);
    box-shadow: 0 4px 12px rgba(59,130,246,.12);
    color: #fff;
}

.guardian-tier-chip-check {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    min-width: 10px;
}

.guardian-tier-chip-stage {
    font-size: 11px;
    font-weight: 800;
    color: #60a5fa;
    line-height: 1;
}

.guardian-tier-chip-text {
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.guardian-select-inline {
    width: 100%;
    min-width: 0;
}

.guardian-dropdown {
    position: relative;
}

.guardian-dropdown-trigger.compact {
    min-height: 58px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: nowrap;
    background: #151822;
    border: 1px solid #212536;
    border-radius: 14px;
    cursor: pointer;
    transition: .2s ease;
}

.guardian-dropdown-trigger.compact:hover {
    border-color: #3b4563;
}

.guardian-dropdown-trigger.open {
    border-color: rgba(99,102,241,.4);
    background: #181b2a;
    border-radius: 14px 14px 0 0;
}

.gd-trigger-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.gd-trigger-name {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 900;
    color: #fff;
}

.gd-trigger-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.gd-trigger-name-wrap .element-emoji {
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}

.gd-trigger-badges {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    overflow: hidden;
}

.gd-trigger-badges .badge,
.gd-item-badges .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 20px !important;
    padding: 0 7px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    white-space: nowrap !important;
}

.gd-trigger-badges .badge.type-ancient,
.gd-item-badges .badge.type-ancient { background: rgba(167,139,250,.15) !important; color: #c4b5fd !important; }

.gd-trigger-badges .badge.type-beast,
.gd-item-badges .badge.type-beast { background: rgba(180,140,100,.15) !important; color: #d4b896 !important; }

.gd-trigger-badges .badge.type-insect,
.gd-item-badges .badge.type-insect { background: rgba(132,204,22,.12) !important; color: #bef264 !important; }

.gd-trigger-badges .badge.type-spirit,
.gd-item-badges .badge.type-spirit { background: rgba(34,211,238,.12) !important; color: #a5f3fc !important; }

.gd-trigger-badges .badge.attr-lightning,
.gd-item-badges .badge.attr-lightning { background: rgba(253,224,71,.12) !important; color: #fde68a !important; }

.gd-trigger-badges .badge.attr-dark,
.gd-item-badges .badge.attr-dark { background: rgba(167,139,250,.15) !important; color: #c4b5fd !important; }

.gd-trigger-badges .badge.attr-earth,
.gd-item-badges .badge.attr-earth { background: rgba(180,140,100,.12) !important; color: #d4b896 !important; }

.gd-trigger-badges .badge.attr-fire,
.gd-item-badges .badge.attr-fire { background: rgba(251,146,60,.15) !important; color: #fdba74 !important; }

.gd-trigger-badges .badge.attr-holy,
.gd-item-badges .badge.attr-holy { background: rgba(253,224,71,.12) !important; color: #fde68a !important; }

.gd-trigger-badges .badge.attr-water,
.gd-item-badges .badge.attr-water { background: rgba(56,189,248,.12) !important; color: #7dd3fc !important; }

.gd-trigger-badges .badge.attr-none,
.gd-item-badges .badge.attr-none { background: rgba(255,255,255,.06) !important; color: #9ca3af !important; }

.gd-trigger-arrow {
    flex-shrink: 0;
    margin-left: 4px;
    font-size: 12px;
    color: #667085;
    transition: transform .25s ease;
}

.guardian-dropdown-trigger.open .gd-trigger-arrow {
    transform: rotate(180deg);
}

.guardian-dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #151822;
    border: 1px solid rgba(99,102,241,.25);
    border-top: none;
    border-radius: 0 0 14px 14px;
    max-height: 380px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

.guardian-dropdown-list::-webkit-scrollbar {
    width: 6px;
}

.guardian-dropdown-list::-webkit-scrollbar-thumb {
    background: #2d3348;
    border-radius: 3px;
}

.gd-group-label {
    padding: 10px 16px 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #3b4563;
}

.guardian-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: .15s ease;
}

.guardian-dropdown-item:hover {
    background: rgba(255,255,255,.03);
}

.guardian-dropdown-item.gd-active {
    background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(99,102,241,.10));
    box-shadow: inset 0 0 0 1px rgba(99,102,241,.35);
}

.guardian-dropdown-item.pending {
    opacity: .35;
    cursor: not-allowed;
}

.gd-item-name {
    font-size: 14px;
    font-weight: 800;
    color: #e5e7eb;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
}

.guardian-dropdown-item.gd-active .gd-item-name {
    color: #fff;
    font-weight: 900;
}

.gd-item-name-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.gd-item-name-wrap .element-emoji {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.gd-item-badges {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
    min-width: 170px;
    flex-wrap: wrap;
}

.gd-item-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}

.gd-pending-tag {
    font-size: 9px;
    font-weight: 800;
    color: #f87171;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(248,113,113,.10);
    border: 1px solid rgba(248,113,113,.18);
    justify-self: end;
}

/* =============================================
   요약 카드
   ============================================= */
.precision-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.precision-summary-card {
    padding: 20px;
    border-radius: 16px;
    background: #111320;
    border: 1px solid #1a1d2e;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: .2s ease;
}

.precision-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.24);
}

.precision-summary-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.precision-card-tank::before { background: linear-gradient(90deg, #f7ca54, #fde68a); }
.precision-card-one::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.precision-card-blood::before { background: linear-gradient(90deg, #a78bfa, #c4b5fd); }

.precision-summary-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.precision-label-tank { color: #f7ca54; }
.precision-label-one { color: #60a5fa; }
.precision-label-blood { color: #a78bfa; }

.precision-summary-share {
    font-size: 11px;
    color: #3b4563;
    margin-bottom: 12px;
}

.precision-summary-dmg {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    margin-bottom: 4px;
}

.precision-summary-unit {
    font-size: 14px;
    color: #667085;
}

.precision-summary-dps {
    display: inline-flex;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    margin-top: 12px;
}

.precision-dps-tank {
    background: rgba(247,202,84,.08);
    color: #f7ca54;
    border: 1px solid rgba(247,202,84,.15);
}

.precision-dps-one {
    background: rgba(59,130,246,.08);
    color: #60a5fa;
    border: 1px solid rgba(59,130,246,.15);
}

.precision-dps-blood {
    background: rgba(167,139,250,.08);
    color: #a78bfa;
    border: 1px solid rgba(167,139,250,.15);
}

/* =============================================
   지분표 / 테이블
   ============================================= */
.precision-table-panel {
    padding: 20px;
    border-radius: 18px;
    background: #111320;
    border: 1px solid #1a1d2e;
    box-shadow: 0 10px 24px rgba(0,0,0,.2);
}

.table-wrap {
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #1e2030;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: #0f121b;
}

thead {
    background: linear-gradient(90deg, #151822 0%, #1a1d2e 100%);
    border-bottom: 2px solid #2d3348;
}

thead th {
    padding: 14px 16px;
    text-align: center;
    font-size: 13px;
    font-weight: 900;
    color: #aab4c8;
    letter-spacing: .4px;
    border: none !important;
    background: linear-gradient(180deg, rgba(99,102,241,.08), rgba(99,102,241,.03)) !important;
    border-bottom: 2px solid #2a3246 !important;
}

.precision-table-panel thead th:first-child,
.table-panel thead th:first-child {
    text-align: left !important;
    padding-left: 82px !important;
    width: 170px;
}

tbody td {
    padding: 13px 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #d1d5db;
    border-bottom: 1px solid #171a25;
    border-left: none !important;
    border-right: none !important;
}

tbody tr:hover td {
    background: rgba(255,255,255,.03);
}

.row-30 td {
    background: rgba(247,202,84,.08) !important;
    color: #fde68a !important;
}

.row-33 td {
    background: rgba(59,130,246,.08) !important;
    color: #bfdbfe !important;
}

.row-40 td {
    background: rgba(167,139,250,.08) !important;
    color: #e9d5ff !important;
}

.share-cell {
    text-align: left !important;
    vertical-align: middle;
    padding: 13px 16px !important;
}

.share-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.share-tag-area {
    width: 54px;
    flex-shrink: 0;
}

.share-pct {
    display: inline-block;
    width: 44px;
    text-align: center;
    font-size: 14px;
    font-weight: 900;
    color: #e0e0e0;
    line-height: 1;
}

.row-30 .share-pct { color: #f7ca54; }
.row-33 .share-pct { color: #60a5fa; }
.row-40 .share-pct { color: #a78bfa; }

.share-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 22px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    line-height: 1;
}

.tag-30 { background: rgba(247,202,84,.15); color: #f7ca54; border: 1px solid rgba(247,202,84,.25); }
.tag-33 { background: rgba(59,130,246,.15); color: #60a5fa; border: 1px solid rgba(59,130,246,.25); }
.tag-40 { background: rgba(167,139,250,.15); color: #a78bfa; border: 1px solid rgba(167,139,250,.25); }

.dps-cell {
    padding: 13px 16px !important;
}

.dps-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 800;
    background: rgba(52,211,153,.08);
    color: #34d399;
    border: 1px solid rgba(52,211,153,.15);
}

.row-30 .dps-pill {
    background: rgba(247,202,84,.08);
    color: #f7ca54;
    border-color: rgba(247,202,84,.15);
}

.row-33 .dps-pill {
    background: rgba(59,130,246,.08);
    color: #60a5fa;
    border-color: rgba(59,130,246,.15);
}

.row-40 .dps-pill {
    background: rgba(167,139,250,.08);
    color: #a78bfa;
    border-color: rgba(167,139,250,.15);
}

/* =============================================
   EX 카드
   ============================================= */
.ex-dash-container {
    width: 100%;
}

.ex-raid-card {
    background: #1a1c24;
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 14px;
    border: 1px solid #252836;
    cursor: pointer;
    transition: all .2s;
    position: relative;
}

.ex-raid-card:hover {
    border-color: #3b4563;
    background: #1e2030;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.4);
}

.ex-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.ex-left-section {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ex-level-badge {
    color: #0d0e13;
    font-weight: 900;
    font-size: 15px;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.ex-card-normal .ex-level-badge { background: #34d399; }
.ex-card-normal .ex-phase-title { color: #34d399; }
.ex-card-hard .ex-level-badge { background: #f7ca54; }
.ex-card-hard .ex-phase-title { color: #f7ca54; }
.ex-card-nightmare .ex-level-badge { background: #a78bfa; }
.ex-card-nightmare .ex-phase-title { color: #a78bfa; }

.ex-raid-info-title h2 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

.ex-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.ex-tag {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 6px;
    background: #252836;
    color: #6b7280;
}

.ex-tag.ex-weakness {
    background: rgba(247,202,84,.12);
    color: #f7ca54;
}

.ex-right-section {
    flex-shrink: 0;
    width: 340px;
}

.ex-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: #15171f;
    border: 1px solid #1e2030;
    border-radius: 10px;
    overflow: hidden;
}

.ex-stat-col {
    padding: 10px 8px;
    text-align: center;
    border-right: 1px solid #1e2030;
}

.ex-stat-col:last-child { border-right: none; }

.ex-stat-label {
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 6px;
}

.ex-stat-label.l-tank { color: #6b7280; }
.ex-stat-label.l-one { color: #3b82f6; }
.ex-stat-label.l-blood { color: #f7ca54; }

.ex-stat-dmg {
    font-size: 15px;
    font-weight: 800;
    color: #e0e0e0;
    margin-bottom: 3px;
    white-space: nowrap;
}

.ex-stat-dps {
    font-size: 12px;
    color: #34d399;
    white-space: nowrap;
}

.ex-stat-col.col-blood {
    background: rgba(247,202,84,.04);
}

.ex-stat-col.col-blood .ex-stat-dmg {
    color: #f7ca54;
}

.ex-detail-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 0;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    border-top: 1px solid rgba(167,139,250,.15);
    transition: color .2s;
}

.ex-detail-arrow {
    transition: transform .3s;
    font-size: 10px;
}

.ex-raid-card.ex-active .ex-detail-bar { color: #f7ca54; }
.ex-raid-card.ex-active .ex-detail-arrow { transform: rotate(180deg); }

.ex-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease-out;
}

.ex-raid-card.ex-active .ex-accordion-content {
    max-height: 2000px;
    border-top: 2px solid rgba(167,139,250,.25);
    margin-top: 14px;
    padding-top: 14px;
}

.ex-pc-table-view {
    display: block;
    width: 100%;
}

.ex-dps-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    font-size: 13px;
}

.ex-dps-table th {
    color: #9ca3af;
    font-weight: 700;
    padding: 12px 8px;
    border-bottom: 2px solid rgba(167,139,250,.3);
    font-size: 12px;
    background: linear-gradient(180deg, rgba(167,139,250,.1), rgba(139,92,246,.03));
}

.ex-dps-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #2d3146;
    border-right: 1px solid #252836;
    color: #e0e0e0;
}

.ex-dps-table td:last-child { border-right: none; }

.ex-dps-table tr:hover td {
    background: #15171f;
}

.ex-phase-title {
    text-align: left;
    font-weight: 700;
}

.ex-phase-title span {
    display: block;
    font-size: 11px;
    color: #5a6178;
    font-weight: normal;
    margin-top: 2px;
}

.ex-val-text {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
    color: #fff;
}

.ex-dps-text {
    display: block;
    font-size: 11px;
    color: #34d399;
}

.ex-col-highlight {
    background: rgba(247,202,84,.06);
}

.ex-dps-table th.ex-col-highlight,
.ex-dps-table td.ex-col-highlight .ex-val-text {
    color: #f7ca54;
}

.ex-row-total td {
    background: #15171f !important;
    border-bottom: 2px solid #252836;
}

.ex-row-total .ex-phase-title {
    color: #f87171;
}

.ex-mobile-list-view {
    display: none;
    flex-direction: column;
    gap: 10px;
}

.ex-m-phase-card {
    background: #15171f;
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #1e2030;
}

.ex-m-phase-card.ex-m-total {
    background: #1a1520;
    border-color: #2d2040;
}

.ex-m-phase-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #1e2030;
    padding-bottom: 6px;
    margin-bottom: 8px;
}

.ex-m-phase-name { font-size: 13px; font-weight: 700; }
.ex-m-phase-info { font-size: 11px; color: #5a6178; }

.ex-m-grid-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 12px;
}

.ex-m-label { color: #6b7280; }

.ex-m-values {
    text-align: right;
    font-weight: 700;
    color: #fff;
}

.ex-m-values .ex-m-dps {
    color: #34d399;
    font-size: 11px;
    font-weight: normal;
    margin-left: 6px;
}

.ex-m-highlight .ex-m-label {
    color: #f7ca54;
    font-weight: 700;
}

.ex-m-highlight .ex-m-values {
    color: #f7ca54;
}

/* 보스 정보 / 에스더 */
.boss-info-section {
    margin-top: 20px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #1a1c24;
    border: 1px solid #252836;
    border-radius: 12px;
}

.section-header .dot {
    width: 4px;
    height: 16px;
    border-radius: 2px;
}

.section-header .section-title {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}

.warning-bar {
    padding: 10px 14px;
    margin-bottom: 12px;
    background: #1a1c24;
    border: 1px solid #252836;
    border-radius: 10px;
    font-size: 12px;
    color: #6b7280;
}

.boss-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.boss-card {
    background: #1a1c24;
    border: 1px solid #252836;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.boss-card-title {
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.boss-card-title .bar {
    width: 4px;
    height: 14px;
    border-radius: 2px;
    flex-shrink: 0;
}

.boss-chart-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.boss-labels {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.boss-label-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.boss-label-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.boss-label-name {
    font-size: 11px;
    color: #6b7280;
}

.boss-label-pct {
    font-size: 14px;
    font-weight: 800;
}

.boss-donut-wrap {
    margin-left: auto;
    flex-shrink: 0;
}

.boss-donut {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    position: relative;
}

.boss-donut-inner {
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    background: #1a1c24;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.boss-donut-title {
    font-size: 9px;
    color: #5a6178;
}

.boss-donut-val {
    font-size: 10px;
    font-weight: 800;
    color: #e0e0e0;
    line-height: 1.2;
    text-align: center;
}

.boss-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 10px;
}

.boss-legend-row {
    display: flex;
    align-items: center;
}

.boss-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 6px;
    flex-shrink: 0;
}

.boss-legend-val {
    margin-left: auto;
    font-weight: 700;
    color: #e0e0e0;
    flex-shrink: 0;
}

.boss-total-row {
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid #1e2030;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.boss-total-label {
    font-size: 12px;
    color: #5a6178;
}

.boss-total-val {
    font-size: 17px;
    font-weight: 900;
}

.esther-table {
    background: #1a1c24;
    border: 1px solid #252836;
    border-radius: 14px;
    overflow: hidden;
}

.esther-header {
    padding: 14px 18px;
    border-bottom: 1px solid #252836;
    display: flex;
    align-items: center;
    gap: 8px;
}

.esther-header .bar {
    width: 4px;
    height: 16px;
    border-radius: 2px;
}

.esther-header span {
    font-weight: 800;
    font-size: 15px;
    color: #fff;
}

.esther-cols {
    display: flex;
    padding: 10px 18px;
    background: #15171f;
    font-size: 12px;
    color: #5a6178;
    font-weight: 700;
}

.esther-cols div {
    flex: 1;
    text-align: right;
}

.esther-cols div:first-child {
    flex: 1.2;
    text-align: left;
}

.esther-row {
    display: flex;
    padding: 12px 18px;
    border-top: 1px solid #1e2030;
    font-size: 13px;
    align-items: center;
}

.esther-row div {
    flex: 1;
    text-align: right;
    font-weight: 700;
    color: #e0e0e0;
}

.esther-row div:first-child {
    flex: 1.2;
    text-align: left;
    font-weight: 400;
    color: #9ca3af;
}

/* =============================================
   상태 / 모달
   ============================================= */
.coming-soon {
    padding: 44px 20px;
    text-align: center;
    border-radius: 16px;
    background: #1a1c24;
    border: 1px dashed #252836;
    color: #c0c7d6;
}

.coming-soon h3 {
    margin: 0 0 10px;
    color: #f7ca54;
    font-size: 24px;
}

.coming-soon p {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
}

.status-bar,
.status {
    text-align: right;
    font-size: 11px;
    color: #2d3348;
    padding-right: 2px;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4,8,16,.78);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}

.modal-backdrop.show {
    display: flex;
}

.modal-card {
    width: min(720px, 100%);
    border-radius: 20px;
    padding: 26px 24px 22px;
    background: #13151c;
    border: 1px solid #252836;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    position: relative;
}

.modal-top-label {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #4a7cff;
    margin-bottom: 10px;
    text-align: center;
}

.modal-title {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    text-align: center;
    margin: 0 0 10px;
    line-height: 1.2;
}

.modal-divider {
    width: 100%;
    height: 1px;
    margin: 16px 0 18px;
    background: #1e2030;
}

.modal-content {
    color: #c0c7d6;
    font-size: 15px;
    line-height: 1.9;
    word-break: keep-all;
}

.modal-content p {
    margin: 0 0 14px;
}

.modal-content .point {
    color: #f7ca54;
    font-weight: 900;
}

.modal-content .subpoint {
    color: #34d399;
    font-weight: 800;
}

.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #252836;
    background: #1a1c24;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    transition: .18s ease;
}

.modal-close:hover {
    background: #1e2030;
    transform: rotate(90deg);
}

@keyframes simpleTabActiveAura {
    0%, 100% {
        box-shadow:
            0 10px 22px rgba(0,0,0,.22),
            0 0 0 1px rgba(74,124,255,.10),
            0 0 10px rgba(74,124,255,.12),
            0 0 18px rgba(74,124,255,.08),
            inset 0 0 0 1px rgba(255,255,255,.04);
    }
    50% {
        box-shadow:
            0 10px 22px rgba(0,0,0,.24),
            0 0 0 1px rgba(74,124,255,.16),
            0 0 18px rgba(74,124,255,.22),
            0 0 34px rgba(74,124,255,.16),
            inset 0 0 0 1px rgba(255,255,255,.05);
    }
}
/* =============================================
   EX 상단 소개 박스
   ============================================= */
.ex-intro-box {
    padding: 16px 18px;
    border-radius: 16px;
    background: #151822;
    border: 1px solid #252836;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ex-intro-title-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    background: #1f2433;
    border: 1px solid rgba(255,255,255,.08);
}

.ex-intro-desc {
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.6;
}

.ex-intro-purple {
    background: linear-gradient(180deg, rgba(167,139,250,.08), rgba(21,24,34,1));
    border-color: rgba(167,139,250,.22);
}

.ex-intro-purple .ex-intro-title-box {
    background: linear-gradient(135deg, rgba(167,139,250,.20), rgba(139,92,246,.12));
    border-color: rgba(167,139,250,.30);
    color: #ddd6fe;
}

.ex-intro-gold {
    background: linear-gradient(180deg, rgba(247,202,84,.08), rgba(21,24,34,1));
    border-color: rgba(247,202,84,.22);
}

.ex-intro-gold .ex-intro-title-box {
    background: linear-gradient(135deg, rgba(247,202,84,.20), rgba(245,158,11,.12));
    border-color: rgba(247,202,84,.30);
    color: #fde68a;
}

/* =============================================
   반응형
   ============================================= */
@media (max-width: 1180px) {
    .workspace {
        grid-template-columns: 260px 1fr;
    }

    .content-grid {
        grid-template-columns: 1fr 250px;
    }
}

@media (max-width: 1024px) {
    .workspace {
        grid-template-columns: 1fr;
    }

    .sidebar {
        border-right: none;
        border-bottom: 1px solid #1a1d2e;
    }

    .content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .guardian-inline-row {
        grid-template-columns: 1fr;
    }

    .precision-diff-inline,
    .precision-gate-inline,
    .guardian-tier-inline {
        width: 100%;
    }

    .guardian-select-inline {
        width: 100%;
    }
}

@media (max-width: 860px) {
    .simple-stack,
    .precision-summary-cards,
    .boss-grid {
        grid-template-columns: 1fr;
    }
}



@media (max-width: 768px) {
    body {
        padding: 0;
    }

    .app {
        width: 100%;
        margin: 0;
        border-radius: 0;
        border: none;
    }

    .sidebar,
    .main {
        padding: 16px;
    }

    .brand-title,
    .hero {
        font-size: 24px;
    }

    .title {
        font-size: 22px;
    }

    .precision-hero-title {
        font-size: 24px;
    }

    .precision-diff-inline,
    .precision-gate-inline {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .precision-gate-chip {
        min-width: 100%;
    }

    .guardian-dropdown-trigger.compact {
        align-items: flex-start;
    }

    .simple-card {
        grid-template-columns: 1fr;
    }

    .simple-level-tabs {
        gap: 8px;
    }

    .simple-level-tab {
        min-width: 78px;
        padding: 10px 12px;
        border-radius: 12px;
    }

    .simple-level-tab-main {
        font-size: 14px;
    }

    .simple-level-tab-sub {
        font-size: 9px;
    }

    .simple-hero {
        padding: 20px;
    }

    .simple-hero-title {
        font-size: 26px;
    }

    .simple-hero-top {
        flex-wrap: wrap;
    }

    .simple-hero-right {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
    }

    table {
        min-width: 100% !important;
    }

    thead th,
    tbody td {
        padding: 8px 6px !important;
        font-size: 12px !important;
    }

    .precision-table-panel thead th:first-child,
    .table-panel thead th:first-child {
        width: 120px !important;
        padding-left: 70px !important;
    }

    .share-tag {
        min-width: 30px;
        height: 16px;
        padding: 0 4px;
        font-size: 8px;
        border-radius: 3px;
    }

    .share-pct {
        width: 36px;
        font-size: 12px;
    }

    .dps-pill {
        padding: 2px 6px;
        font-size: 10px;
    }

    .patch-item {
        padding: 8px 10px;
    }

    .patch-date-day {
        font-size: 16px;
    }

    .modal-card {
        padding: 24px 18px 18px;
        border-radius: 18px;
    }

    .modal-title {
        font-size: 22px;
    }

    .modal-content {
        font-size: 14px;
        line-height: 1.8;
    }

    .ex-right-section {
        width: 100%;
    }

    .ex-pc-table-view {
        display: none;
    }

    .ex-mobile-list-view {
        display: flex;
    }
}





@media (max-width: 560px) {
    .simple-hero-right {
        grid-template-columns: 1fr;
    }

    .simple-hero-title {
        font-size: 22px;
    }

    .simple-hero-desc {
        font-size: 13px;
    }

    .simple-level-tabs {
        gap: 8px;
    }
}



/* =============================================
   정밀 계산 상단 리디자인 v1
   세르카 / 지평의 성당 / 가디언 토벌
   ============================================= */

.p-hero {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 26px;
    border: 1px solid #20263a;
    box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

.p-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.02) 40%, transparent 70%);
    pointer-events: none;
}

.p-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 18px;
    align-items: stretch;
}

.p-hero-left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
}

.p-hero-copy {
    display: flex;
    flex-direction: column;
}

.p-hero-right {
    width: 220px;
    flex: 0 0 220px;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    align-content: stretch;
}

.p-hero-kicker {
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 18px;
}

.p-hero-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.p-hero-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.p-hero-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.p-hero-title {
    font-size: 30px;
    line-height: 1.08;
    font-weight: 900;
    color: #fff;
    letter-spacing: -.3px;
}

.p-hero-subtitle {
    font-size: 15px;
    font-weight: 800;
}

.p-hero-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.p-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,.08);
}

.p-hero-desc {
    font-size: 13px;
    line-height: 1.75;
    color: #7a8599;
    max-width: 620px;
}

.p-hero-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.p-pill {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 11px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.03);
    color: #b9c3d4;
}

.p-pill.active {
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: #fff;
}

.p-stat {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.06);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 94px;
}

.p-stat-label {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom: 8px;
}

.p-stat-value {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
}

/* =============================================
   세르카
   ============================================= */
.hero-serka {
    background:
        radial-gradient(circle at top right, rgba(56,189,248,.14), transparent 30%),
        radial-gradient(circle at bottom left, rgba(59,130,246,.10), transparent 28%),
        linear-gradient(180deg, #0f1520 0%, #0c0f18 100%);
    border-color: rgba(56,189,248,.18);
}

.hero-serka .p-hero-kicker {
    color: #7dd3fc;
}

.hero-serka .p-hero-icon {
    background: linear-gradient(135deg, rgba(56,189,248,.20), rgba(59,130,246,.14));
    border: 1px solid rgba(56,189,248,.28);
    box-shadow: 0 8px 18px rgba(56,189,248,.10);
}

.hero-serka .p-hero-subtitle {
    color: #7dd3fc;
}

.hero-serka .p-badge.b-type {
    background: rgba(59,130,246,.15);
    color: #93c5fd;
}

.hero-serka .p-badge.b-attr {
    background: rgba(255,255,255,.06);
    color: #b6c0cf;
}

.hero-serka .p-pill {
    background: rgba(56,189,248,.06);
    color: #7dd3fc;
    border-color: rgba(56,189,248,.14);
}

.hero-serka .p-pill.active {
    background: rgba(56,189,248,.14);
    color: #e8f8ff;
    border-color: rgba(56,189,248,.24);
}

.hero-serka .p-stat {
    background: rgba(56,189,248,.04);
    border-color: rgba(56,189,248,.10);
}

.hero-serka .p-stat-label {
    color: #4a90b8;
}

/* =============================================
   지평의 성당
   ============================================= */
.hero-cathedral {
    background:
        radial-gradient(circle at top left, rgba(167,139,250,.16), transparent 26%),
        radial-gradient(circle at bottom right, rgba(139,92,246,.10), transparent 30%),
        linear-gradient(180deg, #12101e 0%, #0d0c16 100%);
    border-color: rgba(167,139,250,.20);
}

.hero-cathedral .p-hero-kicker {
    color: #c4b5fd;
}

.hero-cathedral .p-hero-icon {
    background: linear-gradient(135deg, rgba(167,139,250,.22), rgba(139,92,246,.14));
    border: 1px solid rgba(167,139,250,.30);
    box-shadow: 0 8px 18px rgba(139,92,246,.12);
}

.hero-cathedral .p-hero-subtitle {
    color: #c4b5fd;
}

.hero-cathedral .p-badge.b-type {
    background: rgba(59,130,246,.15);
    color: #93c5fd;
}

.hero-cathedral .p-badge.b-attr {
    background: rgba(167,139,250,.15);
    color: #c4b5fd;
}

.hero-cathedral .p-pill {
    background: rgba(167,139,250,.06);
    color: #c4b5fd;
    border-color: rgba(167,139,250,.14);
}

.hero-cathedral .p-pill.active {
    background: rgba(167,139,250,.14);
    color: #f4efff;
    border-color: rgba(167,139,250,.24);
}

.hero-cathedral .p-stat {
    background: rgba(167,139,250,.04);
    border-color: rgba(167,139,250,.10);
}

.hero-cathedral .p-stat-label {
    color: #7c6cb5;
}

/* =============================================
   가디언 토벌
   ============================================= */
.hero-guardian {
    background:
        radial-gradient(circle at top right, rgba(251,146,60,.14), transparent 28%),
        radial-gradient(circle at bottom left, rgba(248,113,113,.10), transparent 26%),
        linear-gradient(180deg, #181210 0%, #100d0b 100%);
    border-color: rgba(251,146,60,.20);
}

.hero-guardian .p-hero-kicker {
    color: #fdba74;
}

.hero-guardian .p-hero-icon {
    background: linear-gradient(135deg, rgba(251,146,60,.22), rgba(248,113,113,.14));
    border: 1px solid rgba(251,146,60,.28);
    box-shadow: 0 8px 18px rgba(251,146,60,.12);
}

.hero-guardian .p-hero-subtitle {
    color: #fdba74;
}

.hero-guardian .p-badge.b-type {
    background: rgba(180,140,100,.15);
    color: #d4b896;
}

.hero-guardian .p-badge.b-attr {
    background: rgba(253,224,71,.12);
    color: #fde68a;
}

.hero-guardian .p-pill {
    background: rgba(251,146,60,.06);
    color: #fdba74;
    border-color: rgba(251,146,60,.14);
}

.hero-guardian .p-pill.active {
    background: rgba(251,146,60,.14);
    color: #fff3e6;
    border-color: rgba(251,146,60,.24);
}

.hero-guardian .p-stat {
    background: rgba(251,146,60,.04);
    border-color: rgba(251,146,60,.10);
}

.hero-guardian .p-stat-label {
    color: #a07840;
}

/* =============================================
   모바일
   ============================================= */
@media (max-width: 768px) {
    .p-hero-inner {
        flex-wrap: wrap;
    }

    .p-hero-right {
        width: 100%;
        flex: 1 1 100%;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: none;
    }

    .p-hero-title {
        font-size: 24px;
    }

    .p-stat-value {
        font-size: 20px;
    }
}

@media (max-width: 560px) {
    .p-hero-right {
        grid-template-columns: 1fr;
    }

    .p-hero-title {
        font-size: 22px;
    }

    .p-hero-desc {
        font-size: 12px;
    }
}

#tabs:empty {
    display: none;
}

.precision-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 0 2px;
    flex-wrap: wrap;
}

.precision-table-title {
    font-size: 15px;
    font-weight: 800;
    color: #5a6785;
    line-height: 1.2;
    letter-spacing: -.1px;
}

.precision-table-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(52,211,153,.10);
    border: 1px solid rgba(52,211,153,.22);
    color: #34d399;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}


@media (max-width: 768px) {
    .precision-table-head {
        align-items: flex-start;
        margin-bottom: 12px;
    }

    .precision-table-title {
        font-size: 14px;
    }

    .precision-table-badge {
        height: 26px;
        font-size: 10px;
        padding: 0 10px;
    }
}

/* =============================================
   보상 위젯
   ============================================= */
.rw-widget {
    width: 100%;
    max-width: 320px;
    background: #161926;
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #24293d;
    color: #fff;
    margin-top: 14px;
}

.rw-title {
    font-size: 11px;
    font-weight: 800;
    color: #7c8ba1;
    margin-bottom: 10px;
    letter-spacing: .5px;
}

.rw-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.rw-slot {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #0d0f17;
    border: 1px solid #24293d;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.rw-slot img {
    width: 85%;
    height: 85%;
    object-fit: contain;
}

.rw-count {
    position: absolute;
    bottom: 2px;
    right: 3px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
    pointer-events: none;
}

.rw-currency {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111422;
    padding: 4px 6px;
    border-radius: 4px;
    margin-top: 4px;
    font-size: 12px;
}

.rw-currency-left {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #9ca3af;
}

.rw-currency-icon {
    width: 16px;
    height: 16px;
}

.rw-gold {
    color: #ffcc00;
    font-weight: 800;
}

.rw-shard {
    color: #d1adff;
    font-weight: 800;
}

.rw-more-area {
    margin-top: 10px;
    border-top: 1px dashed #24293d;
    padding-top: 8px;
}

.rw-more-btn {
    width: 100%;
    background: #1f2336;
    border: 1px solid #24293d;
    color: #a3b2cc;
    font-size: 11px;
    font-weight: 700;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: background .2s;
}

.rw-more-btn:hover {
    background: #282d45;
}

.rw-more-content {
    display: none;
    margin-top: 8px;
    background: #1a1d2e;
    padding: 8px;
    border-radius: 6px;
}

.rw-more-content.rw-open {
    display: block;
}

.rw-more-label {
    font-size: 11px;
    color: #e6a23c;
    margin-bottom: 6px;
    font-weight: 800;
}

@media (max-width: 768px) {
    .rw-widget {
        max-width: 100%;
    }
}

/* =============================================
   정밀 계산 선택 박스 우측 보상 위젯 배치
   ============================================= */


.precision-layout-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: stretch;
}

.precision-reward-standalone {
    min-width: 0;
}

.precision-reward-standalone .rw-widget {
    width: 100%;
    max-width: 320px;
    margin-top: 0;
    background: #111320;
    border: 1px solid #1a1d2e;
    border-radius: 18px;
    padding: 16px;
}

.precision-layout-split .precision-diff-inline,
.precision-layout-split .precision-gate-inline {
    width: 100%;
}

@media (max-width: 980px) {
    .precision-layout-split {
        grid-template-columns: 1fr;
    }

    .precision-reward-standalone .rw-widget {
        max-width: 100%;
    }
}

.precision-reward-standalone .rw-more-area {
    position: relative;
}

.precision-reward-standalone .rw-more-content.rw-open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    margin-top: 4px;
    background: #1a1d2e;
    border: 1px solid #24293d;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
}


/* =============================================
   모바일 숨김 처리
   ============================================= */
@media (max-width: 768px) {

    /* 잔혈컷 간편보기 우측 카드 */
    .simple-hero-right {
        display: none !important;
    }

    /* 세르카/지평/가디언 상단 우측 카드 */
    .p-hero-right {
        display: none !important;
    }

    /* 강투컷 / 1인분 / 잔혈컷 요약 카드 */
    .precision-summary-cards {
        display: none !important;
    }

    /* 익스트림 레이드 메뉴 그룹 전체 */
    .menu-group-title .dot-amber {
        display: none;
    }

    .sidebar .menu-group:has(.dot-amber) {
        display: none !important;
    }

    /* 익스트림 레이드 위 구분선 */
    .sidebar .menu-group:has(.dot-amber) + .side-divider {
        display: none !important;
    }

    /* 패치노트 */
    .patch-section {
        display: none !important;
    }

    /* 패치노트 위 구분선 */
    .patch-section + .side-divider,
    .side-divider:has(+ .patch-section) {
        display: none !important;
    }

    /* 경매 계산기 */
    .auction-calc {
        display: none !important;
    }
}


.badge-off {
    background: rgba(248, 113, 113, .12);
    color: #f87171;
    border: 1px solid rgba(248, 113, 113, .25);
}

.menu-btn-off {
    opacity: 1;
    filter: none;
}

.menu-btn-off .menu-btn-name {
    color: #c0c7d6;
}

.menu-btn-off .menu-btn-sub {
    color: #f87171;
}


/* =============================================
   간편보기 3칸 분리형 딜컷
   ============================================= */
.simple-row.has-triple-range {
    align-items: center;
}

.triple-range {
    display: flex;
    gap: 6px;
    align-items: stretch;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.triple-part {
    min-width: 62px;
    padding: 6px 8px 5px;
    border-radius: 10px;
    border: 1px solid #262c3d;
    background: #121622;
    text-align: center;
}

.triple-part .t-label {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .3px;
    margin-bottom: 3px;
    color: #667085;
}

.triple-part .t-value {
    display: block;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.triple-part.tank {
    background: rgba(247,202,84,.04);
    border-color: rgba(247,202,84,.12);
}

.triple-part.tank .t-value {
    color: #f7ca54;
}

.triple-part.one {
    background: rgba(59,130,246,.05);
    border-color: rgba(59,130,246,.14);
}

.triple-part.one .t-value {
    color: #8db8ff;
}

.triple-part.blood {
    background: rgba(167,139,250,.05);
    border-color: rgba(167,139,250,.14);
}

.triple-part.blood .t-value {
    color: #c4b5fd;
}

/* =============================================
   빠른 보기 - 레이드별 잔혈컷
   ============================================= */
.badge-new {
    background: rgba(59, 130, 246, .12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, .25);
    font-size: 9px;
    letter-spacing: .5px;
}



.simple-raid-tab {
    min-width: 132px;
}

.simple-raid-tab .simple-level-tab-main {
    font-size: 14px;
}

.simple-raid-tab .simple-level-tab-sub {
    font-size: 10px;
}

@media (max-width: 768px) {
    .simple-raid-tab {
        min-width: calc(25% - 6px);
        flex: 1 1 calc(25% - 6px);
        padding: 10px 8px;
        border-radius: 12px;
    }

    .simple-raid-tab .simple-level-tab-main {
        font-size: 11px;
        line-height: 1.15;
    }

    .simple-raid-tab .simple-level-tab-sub {
        font-size: 8px;
        line-height: 1.1;
    }
}









/* =============================================
   패치노트 미니 팝업
   ============================================= */
.patch-item {
    cursor: pointer;
}

.patch-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 8, 16, .62);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1100;
}

.patch-modal-backdrop.show {
    display: flex;
}

.patch-modal-card {
    width: min(440px, 100%);
    background: #13151c;
    border: 1px solid #252836;
    border-radius: 18px;
    padding: 22px 20px 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
    position: relative;
}

.patch-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #252836;
    background: #1a1c24;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    transition: .18s ease;
}

.patch-modal-close:hover {
    background: #1e2030;
    transform: rotate(90deg);
}

.patch-modal-label {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #22d3ee;
    font-weight: 900;
    margin-bottom: 8px;
}

.patch-modal-date {
    font-size: 12px;
    color: #60a5fa;
    font-weight: 800;
    margin-bottom: 8px;
}

.patch-modal-title {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 900;
    color: #fff;
    margin-bottom: 8px;
}

.patch-modal-desc {
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.6;
}

.patch-modal-divider {
    height: 1px;
    background: #1e2030;
    margin: 16px 0 14px;
}

.patch-modal-body {
    font-size: 14px;
    line-height: 1.8;
    color: #d1d5db;
    word-break: keep-all;
}

@media (max-width: 768px) {
    .patch-modal-card {
        width: min(100%, 420px);
        padding: 20px 16px 16px;
    }

    .patch-modal-title {
        font-size: 20px;
    }

    .patch-modal-body {
        font-size: 13px;
    }
}

/* =============================================
   사이드바 브랜드 영역 - 심플 게임 사이트형
   ============================================= */
.brand-game {
    display: grid;
    gap: 0;
    margin-bottom: 8px;
    position: relative;
}

.brand-game::before {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-bottom: 12px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(247,202,84,.18) 20%,
        rgba(59,130,246,.18) 50%,
        rgba(167,139,250,.18) 80%,
        transparent 100%
    );
}

.brand-game .brand-label {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #4a7cff;
    font-weight: 800;
    margin-bottom: 12px;
}

.brand-game .brand-main-title {
    font-size: 31px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
    letter-spacing: -.7px;
    margin-bottom: 6px;
}

.brand-game .brand-sub-title {
    font-family: 'Do Hyeon', sans-serif;
    font-size: 28px;
    line-height: 1;
    color: #dbe7ff;
    letter-spacing: .2px;
    margin-bottom: 12px;
}

.brand-game .brand-desc {
    font-size: 12px;
    line-height: 1.7;
    color: #8691a6;
    margin: 0;
}

.brand-game .brand-tag-band {
    position: relative;
    margin-top: 12px;
    padding: 0 0 14px 0;
}

.brand-game .brand-cut-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
}

.brand-game .brand-cut-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.brand-game .brand-cut-tag.tag-tank {
    background: rgba(247,202,84,.10);
    color: #f7ca54;
    border-color: rgba(247,202,84,.18);
}

.brand-game .brand-cut-tag.tag-one {
    background: rgba(59,130,246,.10);
    color: #8db8ff;
    border-color: rgba(59,130,246,.18);
}

.brand-game .brand-cut-tag.tag-blood {
    background: rgba(167,139,250,.12);
    color: #c4b5fd;
    border-color: rgba(167,139,250,.20);
}

.brand-game .brand-tag-band::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 12px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(247,202,84,.18) 20%,
        rgba(59,130,246,.18) 50%,
        rgba(167,139,250,.18) 80%,
        transparent 100%
    );
}

@media (max-width: 768px) {
    .brand-game::before {
        margin-bottom: 10px;
    }

    .brand-game .brand-label {
        margin-bottom: 10px;
    }

    .brand-game .brand-main-title {
        font-size: 28px;
    }

    .brand-game .brand-sub-title {
        font-size: 25px;
        margin-bottom: 10px;
    }

    .brand-game .brand-desc {
        font-size: 12px;
    }

    .brand-game .brand-tag-band {
        margin-top: 10px;
        padding: 0 0 12px 0;
    }

    .brand-game .brand-cut-tags {
        gap: 6px;
        justify-content: flex-start;
    }

    .brand-game .brand-cut-tag {
        font-size: 10px;
        height: 24px;
        padding: 0 9px;
    }

    .brand-game .brand-tag-band::after {
        margin-top: 10px;
    }
}


/* =============================================
   모바일 전용 - 사이드바 메뉴 최소화
   ============================================= */
@media (max-width: 768px) {
    /* 메뉴 그룹 제목 간결하게 */
    .menu-group-title {
        padding: 0;
        margin-bottom: 10px;
        font-size: 11px;
        letter-spacing: 1.4px;
        color: #6b7280;
    }

    .menu-group-title::after {
        display: none;
    }

    .menu-group-dot {
        display: none;
    }

    /* 빠른보기: 2칸 */
    .quick-group .menu-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    /* 정밀계산: 3칸 */
    .precision-group .menu-list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    /* 모바일에서 OFF/준비중 버튼 숨김 */
    .precision-group .menu-btn-off,
    .precision-group .menu-btn.disabled {
        display: none !important;
    }

    /* 메뉴 버튼 자체를 사각형 간단 버튼으로 */
    .quick-group .menu-item,
    .quick-group .menu-btn,
    .precision-group .menu-item,
    .precision-group .menu-btn {
        min-height: 46px;
        padding: 10px 8px;
        border-radius: 12px;
        background: #151822;
        border: 1px solid #23283a;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 0;
    }

    .quick-group .menu-item:hover,
    .quick-group .menu-btn:hover,
    .precision-group .menu-item:hover,
    .precision-group .menu-btn:hover {
        background: #171b27;
        border-color: #323952;
    }

    .quick-group .menu-item.active,
    .quick-group .menu-btn.active,
    .precision-group .menu-item.active,
    .precision-group .menu-btn.active {
        background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(99,102,241,.08));
        border-color: rgba(99,102,241,.35);
        box-shadow: 0 4px 12px rgba(59,130,246,.10);
    }

    /* 아이콘 / 부가설명 / 배지 숨김 */
    .quick-group .menu-btn-icon,
    .quick-group .menu-btn-sub,
    .quick-group .menu-btn-badge,
    .precision-group .menu-btn-icon,
    .precision-group .menu-btn-sub,
    .precision-group .menu-btn-badge {
        display: none !important;
    }

    /* 텍스트만 남기기 */
    .quick-group .menu-btn-text,
    .precision-group .menu-btn-text {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .quick-group .menu-btn-name,
    .precision-group .menu-btn-name {
        display: block;
        font-size: 12px;
        font-weight: 800;
        color: #cfd6e4;
        white-space: normal;
        line-height: 1.25;
        text-align: center;
    }

    .quick-group .menu-item.active .menu-btn-name,
    .quick-group .menu-btn.active .menu-btn-name,
    .precision-group .menu-item.active .menu-btn-name,
    .precision-group .menu-btn.active .menu-btn-name {
        color: #fff;
    }

    /* 버튼 간격이 너무 위아래로 길어 보이지 않게 */
    .menu-group {
        margin-bottom: 10px;
    }
}












/* =========================================================
   모바일 UI 최적화 종합 패키지 (홈 / 간편보기 / 정밀계산)
   ========================================================= */

/* ---------------------------------------------------------
   1. 모바일 홈 & 화면 전환
   --------------------------------------------------------- */
.mobile-home,
.mobile-backbar {
    display: none;
}

@media (max-width: 768px) {
    /* 홈 모드 */
    body.mobile-home-mode .sidebar {
        display: block !important;
        border-right: none !important;
        border-bottom: none !important;
        padding: 16px !important;
    }
    body.mobile-home-mode .main {
        display: none !important;
    }
   

body.mobile-home-mode .sidebar > :not(.switch-wrap):not(.mobile-home):not(.patch-section) {
    display: none !important;
}

    body.mobile-home-mode .mobile-home {
        display: grid;
        gap: 20px;
        margin-top: 6px;
        padding-bottom: 6px;
    }

    /* 콘텐츠 모드 */
    body.mobile-content-mode .sidebar {
        display: none !important;
    }
    body.mobile-content-mode .main {
        display: flex !important;
        min-height: 100vh;
    }
    body.mobile-content-mode .mobile-backbar {
        display: flex;
        margin-bottom: 14px;
    }

    /* 뒤로가기 버튼 */
    .mobile-back-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 0 14px;
        border-radius: 10px;
        border: 1px solid #252836;
        background: #151822;
        color: #dce4f2;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        transition: .2s;
    }
    .mobile-back-btn:hover {
        background: #171b27;
    }

    /* 브랜드 & 태그 */
    .mobile-home-brand { display: grid; gap: 0; }
    .mobile-home-brand .brand-label {
        font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #4a7cff; font-weight: 800; margin-bottom: 12px;
    }
    .mobile-home-title-row {
        display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px;
    }
    .mobile-home-brand .brand-main-title {
        font-size: 28px; font-weight: 900; line-height: 1; color: #fff; letter-spacing: -.5px; margin-bottom: 6px;
    }
    .mobile-home-brand .brand-sub-title {
        font-family: 'Do Hyeon', sans-serif; font-size: 24px; line-height: 1; color: #dbe7ff;
    }
    .mobile-home-brand .brand-desc {
        font-size: 12px; line-height: 1.7; color: #8691a6; margin: 0 0 4px 0;
    }
    .mobile-home-brand .brand-tag-band {
        position: relative; margin-top: 10px; padding: 0;
    }
    .mobile-home-brand .brand-cut-tags {
        display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px;
    }
    .mobile-home-brand .brand-cut-tag {
        display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 9px;
        border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    }
    .mobile-home-brand .brand-cut-tag.tag-tank { background: rgba(247,202,84,.10); color: #f7ca54; border-color: rgba(247,202,84,.18); }
    .mobile-home-brand .brand-cut-tag.tag-one { background: rgba(59,130,246,.10); color: #8db8ff; border-color: rgba(59,130,246,.18); }
    .mobile-home-brand .brand-cut-tag.tag-blood { background: rgba(167,139,250,.12); color: #c4b5fd; border-color: rgba(167,139,250,.20); }

    /* 안내 버튼 */
    .mobile-home-guide {
        flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 0 10px;
        border-radius: 10px; border: 1px solid #252836; background: #151822; color: #d5deea; font-size: 11px; font-weight: 800; cursor: pointer;
    }

    /* 섹션 & 버튼 */
    .mobile-home-section { display: grid; gap: 10px; }
    .mobile-home-section-title { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: #6b7280; font-weight: 900; }
    .mobile-home-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .mobile-home-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

    .mobile-launch-btn {
        min-height: 100px; padding: 16px 10px; border-radius: 16px; background: #151822; border: 1px solid #23283a;
        display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; transition: .2s ease;
    }
    .mobile-launch-btn.active {
        background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(99,102,241,.08)); border-color: rgba(99,102,241,.35); box-shadow: 0 4px 12px rgba(59,130,246,.10);
    }
    .mobile-launch-btn .mlb-icon { font-size: 22px; line-height: 1; }
    .mobile-launch-btn .mlb-main { display: block; font-size: 14px; font-weight: 800; color: #dce4f2; line-height: 1.3; white-space: normal; word-break: keep-all; }
    .mobile-launch-btn.active .mlb-main { color: #fff; }
    .mobile-launch-btn .mlb-sub { display: block; font-size: 10px; font-weight: 700; color: #667085; line-height: 1.2; }
    .mobile-launch-btn.mlb-compact { min-height: 88px; padding: 14px 8px; }

    /* 구분선 & 패치노트 */
    .mobile-home-divider {
        height: 1px; margin-top: 15px; margin-bottom: 15px;
        background: linear-gradient(90deg, transparent 0%, rgba(247,202,84,.18) 20%, rgba(59,130,246,.18) 50%, rgba(167,139,250,.18) 80%, transparent 100%);
    }
    .mobile-home-patch .patch-header { padding: 0; margin-bottom: 15px; }
    .mobile-home-patch .patch-list { display: flex; flex-direction: column; gap: 8px; max-height: none; overflow: visible; }
    .mobile-home-patch .patch-item { padding: 10px; }
    .mobile-home-patch .patch-content-title { font-size: 11px; }
    .mobile-home-patch .patch-content-desc { font-size: 9px; }
    .mobile-home-patch .patch-date { width: 52px; }
    .mobile-home-patch .patch-date-month { font-size: 10px; }
    .mobile-home-patch .patch-date-day { font-size: 14px; }

    /* 높이/여백 정리 */
    body.mobile-home-mode .app { margin-bottom: 10px !important; }
    body.mobile-home-mode .workspace { min-height: auto !important; margin-bottom: 0 !important; padding-bottom: 0 !important; }
    body.mobile-home-mode .sidebar { min-height: auto !important; height: auto !important; margin-bottom: 0 !important; padding-bottom: 22px !important; }
    body.mobile-home-mode .mobile-home { margin-bottom: 0 !important; }
}


/* ---------------------------------------------------------
   2. 간편보기 (레벨별/레이드별) 모바일
   --------------------------------------------------------- */
.simple-mobile-title-pack { display: none; }

@media (max-width: 768px) {
    /* 레이드별 잔혈컷 모바일 4칸 */
    .simple-raid-tab {
        min-width: calc(25% - 6px); flex: 1 1 calc(25% - 6px); padding: 10px 8px; border-radius: 12px;
    }
    .simple-raid-tab .simple-level-tab-main { font-size: 11px; line-height: 1.15; }
    .simple-raid-tab .simple-level-tab-sub { font-size: 8px; line-height: 1.1; }

    /* 카드 제목 묶음형 */
    body.mobile-content-mode .simple-card { grid-template-columns: 1fr; }
    body.mobile-content-mode .simple-card .simple-left { display: none !important; }
    body.mobile-content-mode .simple-card .simple-title { display: none !important; }
    body.mobile-content-mode .simple-card .simple-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
    
    body.mobile-content-mode .simple-card .simple-mobile-title-pack {
        display: inline-flex; align-items: stretch; min-height: 34px; border-radius: 12px; overflow: hidden; background: #151822; border: 1px solid #23283a; box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
    }
    body.mobile-content-mode .simple-card .simple-mobile-node {
        min-width: 52px; padding: 0 10px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; line-height: 1; color: #0d1118;
    }
    body.mobile-content-mode .simple-card .simple-mobile-name {
        display: flex; align-items: center; padding: 0 12px; font-size: 14px; font-weight: 900; line-height: 1; color: #fff; white-space: nowrap;
    }
    body.mobile-content-mode .simple-card.b-green .simple-mobile-node { background: #34d399; }
    body.mobile-content-mode .simple-card.b-gold .simple-mobile-node { background: #f7ca54; }
    body.mobile-content-mode .simple-card.b-purple .simple-mobile-node { background: #a78bfa; }
    body.mobile-content-mode .simple-card.b-orange .simple-mobile-node { background: #fb923c; }
    body.mobile-content-mode .simple-card.b-gray .simple-mobile-node { background: #6b7280; color: #fff; }
    body.mobile-content-mode .simple-card .simple-kind { font-size: 10px; padding: 4px 8px; }

    /* 관문 한 줄 정렬 */
    body.mobile-content-mode .simple-row.has-triple-range {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px;
    }
    body.mobile-content-mode .simple-row.has-triple-range .simple-row-left {
        display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0;
    }
    body.mobile-content-mode .simple-row.has-triple-range .gate-b { min-width: 38px; height: 24px; padding: 0 8px; font-size: 11px; flex-shrink: 0; }
    body.mobile-content-mode .simple-row.has-triple-range .boss-b { font-size: 16px; font-weight: 900; line-height: 1; white-space: nowrap; flex-shrink: 0; }
    body.mobile-content-mode .simple-row.has-triple-range .simple-badges { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
    body.mobile-content-mode .simple-row.has-triple-range .simple-badges .badge,
    body.mobile-content-mode .simple-row.has-triple-range .simple-row .badge { height: 20px; padding: 0 7px; font-size: 10px; line-height: 18px; white-space: nowrap; flex-shrink: 0; }
    
    body.mobile-content-mode .simple-row.has-triple-range .triple-range { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 4px; width: auto; }
    body.mobile-content-mode .simple-row.has-triple-range .triple-part { min-width: 48px; padding: 4px 6px 3px; border-radius: 8px; }
    body.mobile-content-mode .simple-row.has-triple-range .triple-part .t-label { font-size: 9px; margin-bottom: 2px; }
    body.mobile-content-mode .simple-row.has-triple-range .triple-part .t-value { font-size: 12px; }
}


/* ---------------------------------------------------------
   3. 정밀 계산 (세르카 / 성당 / 가디언)
   --------------------------------------------------------- */
.mobile-precision-tools, .mobile-reward-collapse { display: none; }
.mobile-time-modal-backdrop { display: none !important; }
.mobile-time-modal-backdrop.show { display: flex !important; }

@media (max-width: 768px) {
    /* 세르카 & 성당 구조 */
    body.mobile-content-mode.mobile-precision-view .content-grid,
    body.mobile-content-mode.mobile-precision-view .precision-layout-split { grid-template-columns: 1fr !important; }
    body.mobile-content-mode.mobile-precision-view .right-column,
    body.mobile-content-mode.mobile-precision-view .precision-reward-standalone { display: none !important; }
    
    body.mobile-content-mode.mobile-precision-view .precision-diff-inline { width: 100% !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; }
    body.mobile-content-mode.mobile-precision-view .precision-gate-inline { width: 100% !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
    
    body.mobile-content-mode.mobile-precision-view .precision-gate-chip { min-height: 76px; padding: 14px 10px 10px; }
    body.mobile-content-mode.mobile-precision-view .precision-gate-chip-content { margin-top: 6px; gap: 5px; }
    body.mobile-content-mode.mobile-precision-view .precision-gate-chip-gate { font-size: 15px; }
    body.mobile-content-mode.mobile-precision-view .precision-gate-chip-boss { font-size: 13px; }
    body.mobile-content-mode.mobile-precision-view .precision-gate-chip-badges .badge { font-size: 9px !important; height: 18px !important; padding: 0 6px !important; line-height: 16px !important; }

    /* 세르카/성당 도구 버튼 */
    body.mobile-content-mode.mobile-precision-view .mobile-precision-tools { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
    body.mobile-content-mode.mobile-precision-view .mobile-precision-tool-btn { flex: 1 1 calc(50% - 4px); min-height: 42px; border-radius: 12px; border: 1px solid #252836; background: #151822; color: #dce4f2; font-size: 12px; font-weight: 800; cursor: pointer; }
    body.mobile-content-mode.mobile-precision-view .mobile-reward-collapse { display: none; margin-top: 10px; }
    body.mobile-content-mode.mobile-precision-view .mobile-reward-collapse.open { display: block; }
    body.mobile-content-mode.mobile-precision-view .mobile-rw-widget { max-width: 100%; margin-top: 0; background: #111320; border: 1px solid #1a1d2e; border-radius: 16px; padding: 14px; }

    /* 시간 입력 팝업 */
    .mobile-time-modal-backdrop.show { position: fixed; inset: 0; background: rgba(4,8,16,.78); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 18px; z-index: 1200; }
    .mobile-time-modal-card { width: min(420px, 100%); border-radius: 18px; padding: 22px 18px 18px; background: #13151c; border: 1px solid #252836; box-shadow: 0 24px 60px rgba(0,0,0,.45); position: relative; }
    .mobile-time-modal-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #252836; background: #1a1c24; color: #fff; font-size: 18px; font-weight: 900; cursor: pointer; }
    .mobile-time-modal-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #4a7cff; font-weight: 900; margin-bottom: 8px; }
    .mobile-time-modal-title { font-size: 22px; font-weight: 900; color: #fff; margin: 0 0 10px; line-height: 1.2; }
    .mobile-time-modal-divider { height: 1px; background: #1e2030; margin: 14px 0 16px; }
    .mobile-time-modal-inputs { display: flex; gap: 10px; margin-bottom: 14px; }
    .mobile-time-input-group { flex: 1; display: grid; gap: 6px; }
    .mobile-time-input-label { font-size: 11px; font-weight: 800; color: #8a94a8; }
    .mobile-time-input { width: 100%; height: 44px; border-radius: 12px; background: #141620; border: 1px solid #1e2030; color: #fff; font-size: 18px; font-weight: 800; text-align: center; outline: none; }
    .mobile-time-preview { text-align: center; font-size: 28px; font-weight: 900; color: #fff; margin-bottom: 14px; letter-spacing: 1px; }
    .mobile-time-apply-btn { width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid rgba(59,130,246,.28); background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(99,102,241,.10)); color: #fff; font-size: 14px; font-weight: 900; cursor: pointer; }

    /* 세르카 (파란색 글로우) */
    .hero-serka ~ .precision-layout-split .precision-diff-chip.active, .hero-serka ~ .precision-layout-split .precision-diff-chip.pd-green.active, .hero-serka ~ .precision-layout-split .precision-diff-chip.pd-gold.active, .hero-serka ~ .precision-layout-split .precision-diff-chip.pd-purple.active {
        background: linear-gradient(180deg, #12192a 0%, #0e1420 100%) !important; border-color: rgba(56, 189, 248, .55) !important; color: #e0f2fe !important; box-shadow: 0 0 0 1px rgba(56, 189, 248, .18), 0 0 14px rgba(56, 189, 248, .22), 0 0 30px rgba(56, 189, 248, .14), inset 0 0 18px rgba(56, 189, 248, .08) !important;
    }
    .hero-serka ~ .precision-layout-split .precision-diff-chip.active .precision-diff-chip-check, .hero-serka ~ .precision-layout-split .precision-diff-chip.active .precision-diff-chip-main { color: #7dd3fc !important; }
    .hero-serka ~ .precision-layout-split .precision-gate-chip.active {
        background: linear-gradient(180deg, #12192a 0%, #0e1420 100%) !important; border-color: rgba(56, 189, 248, .55) !important; box-shadow: 0 0 0 1px rgba(56, 189, 248, .18), 0 0 14px rgba(56, 189, 248, .22), 0 0 30px rgba(56, 189, 248, .14), inset 0 0 18px rgba(56, 189, 248, .08) !important;
    }
    .hero-serka ~ .precision-layout-split .precision-gate-chip.active::before, .hero-serka ~ .precision-layout-split .precision-gate-chip.active .precision-gate-chip-gate { color: #7dd3fc !important; }

    /* 성당 (보라색 글로우) */
    .hero-cathedral ~ .precision-layout-split .precision-diff-chip.active, .hero-cathedral ~ .precision-layout-split .precision-diff-chip.pd-green.active, .hero-cathedral ~ .precision-layout-split .precision-diff-chip.pd-gold.active, .hero-cathedral ~ .precision-layout-split .precision-diff-chip.pd-purple.active {
        background: linear-gradient(180deg, #1a1228 0%, #120e1e 100%) !important; border-color: rgba(167, 139, 250, .55) !important; color: #f3e8ff !important; box-shadow: 0 0 0 1px rgba(167, 139, 250, .18), 0 0 14px rgba(167, 139, 250, .22), 0 0 30px rgba(167, 139, 250, .14), inset 0 0 18px rgba(167, 139, 250, .08) !important;
    }
    .hero-cathedral ~ .precision-layout-split .precision-diff-chip.active .precision-diff-chip-check, .hero-cathedral ~ .precision-layout-split .precision-diff-chip.active .precision-diff-chip-main { color: #c4b5fd !important; }
    .hero-cathedral ~ .precision-layout-split .precision-gate-chip.active {
        background: linear-gradient(180deg, #1a1228 0%, #120e1e 100%) !important; border-color: rgba(167, 139, 250, .55) !important; box-shadow: 0 0 0 1px rgba(167, 139, 250, .18), 0 0 14px rgba(167, 139, 250, .22), 0 0 30px rgba(167, 139, 250, .14), inset 0 0 18px rgba(167, 139, 250, .08) !important;
    }
    .hero-cathedral ~ .precision-layout-split .precision-gate-chip.active::before, .hero-cathedral ~ .precision-layout-split .precision-gate-chip.active .precision-gate-chip-gate { color: #c4b5fd !important; }

    /* 가디언 토벌 (붉은 계열 & 2줄 구조) */
    .hero-guardian {
        background: radial-gradient(circle at top right, rgba(239, 68, 68, .14), transparent 28%), radial-gradient(circle at bottom left, rgba(248, 113, 113, .10), transparent 26%), linear-gradient(180deg, #1a1210 0%, #120d0b 100%) !important; border-color: rgba(239, 68, 68, .20) !important;
    }
    .hero-guardian .p-hero-kicker, .hero-guardian .p-hero-subtitle, .hero-guardian .p-badge.b-type, .hero-guardian .p-pill { color: #fca5a5 !important; }
    .hero-guardian .p-hero-icon { background: linear-gradient(135deg, rgba(239, 68, 68, .22), rgba(248, 113, 113, .14)) !important; border: 1px solid rgba(239, 68, 68, .28) !important; box-shadow: 0 8px 18px rgba(239, 68, 68, .12) !important; }
    .hero-guardian .p-badge.b-type { background: rgba(239, 68, 68, .15) !important; }
    .hero-guardian .p-badge.b-attr { background: rgba(239, 68, 68, .10) !important; color: #fecaca !important; }
    .hero-guardian .p-pill { background: rgba(239, 68, 68, .06) !important; border-color: rgba(239, 68, 68, .14) !important; }
    .hero-guardian .p-pill.active { background: rgba(239, 68, 68, .14) !important; color: #fff1f1 !important; border-color: rgba(239, 68, 68, .24) !important; }
    .hero-guardian .p-stat { background: rgba(239, 68, 68, .04) !important; border-color: rgba(239, 68, 68, .10) !important; }
    .hero-guardian .p-stat-label { color: #b04040 !important; }

    .guardian-tier-chip.active {
        background: linear-gradient(135deg, rgba(239, 68, 68, .12), rgba(248, 113, 113, .08)) !important; border-color: rgba(239, 68, 68, .35) !important; box-shadow: 0 0 0 1px rgba(239, 68, 68, .18), 0 0 14px rgba(239, 68, 68, .22), 0 0 30px rgba(239, 68, 68, .14), inset 0 0 18px rgba(239, 68, 68, .08) !important; color: #fff !important;
    }
    .guardian-dropdown-item.gd-active { background: linear-gradient(135deg, rgba(239, 68, 68, .16), rgba(248, 113, 113, .10)) !important; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .35) !important; }
    .gd-item-check { background: linear-gradient(135deg, #ef4444, #f87171) !important; box-shadow: 0 0 0 2px rgba(239, 68, 68, .15) !important; }

    body.mobile-content-mode .guardian-inline-row { display: grid !important; grid-template-columns: 1fr; gap: 10px; align-items: stretch; }
    body.mobile-content-mode .guardian-top-tools { display: flex; gap: 8px; align-items: stretch; }
    body.mobile-content-mode .guardian-tier-inline { display: flex !important; gap: 8px; flex: 1; }
    body.mobile-content-mode .guardian-tier-chip { flex: 1; min-width: 0; min-height: 48px; padding: 8px 10px; }
    body.mobile-content-mode .guardian-tier-chip-check { top: 7px; }
    body.mobile-content-mode .guardian-tier-chip-text { font-size: 13px; }

    body.mobile-content-mode .guardian-mobile-time-btn {
        flex: 0 0 112px; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(239, 68, 68, .25); background: rgba(239, 68, 68, .08); color: #fca5a5; font-size: 11px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; white-space: nowrap; transition: .2s;
    }
    body.mobile-content-mode .guardian-mobile-time-btn:hover { background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .35); }

    body.mobile-content-mode .guardian-select-inline { width: 100%; min-width: 0; }
    body.mobile-content-mode .guardian-dropdown-trigger.compact { min-height: 54px; align-items: center !important; padding: 10px 12px; }
    body.mobile-content-mode .gd-trigger-name { display: flex; align-items: center; min-height: 20px; }
    body.mobile-content-mode .gd-trigger-name-wrap { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
    body.mobile-content-mode .gd-trigger-badges { display: flex; align-items: center; gap: 5px; }
    body.mobile-content-mode .guardian-dropdown-item { min-height: 48px; align-items: center !important; }
    body.mobile-content-mode .gd-item-name { display: flex; align-items: center; min-height: 20px; }
    body.mobile-content-mode .gd-item-name-wrap { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
    body.mobile-content-mode .gd-item-badges { display: flex; align-items: center; gap: 4px; }
    body.mobile-content-mode .gd-item-check { display: flex; align-items: center; justify-content: center; }
    
    .guardian-mobile-time-wrap { display: none !important; }
}







/* =============================================
   모바일 - 클리어타임 카드 숨김
   ============================================= */
@media (max-width: 768px) {
    body.mobile-content-mode #timeCard,
    body.mobile-content-mode .time-card {
        display: none !important;
    }
}



@media (max-width: 768px) {
    body.mobile-home-mode .patch-section {
        display: block !important;
    }
}



/* =============================================
   모바일 홈 - PC 메뉴그룹 타이틀 스타일 재사용
   ============================================= */
@media (max-width: 768px) {
    body.mobile-home-mode .mobile-home-group-title {
        padding: 0;
        margin-bottom: 10px;
        font-size: 11px;
        letter-spacing: 1.6px;
        color: #6b7280;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    body.mobile-home-mode .mobile-home-group-title::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #1a1d2e;
    }

    body.mobile-home-mode .mobile-home-group-title .menu-group-dot {
        display: inline-block !important;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    body.mobile-home-mode .mobile-home-section + .mobile-home-section {
        margin-top: 24px;
    }
}



/* =============================================
   모바일 간편보기 - 강투/1인분/잔혈 박스 아래줄로 내리기
   ============================================= */
@media (max-width: 768px) {
    body.mobile-content-mode .simple-row.has-triple-range {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    body.mobile-content-mode .simple-row.has-triple-range .simple-row-left {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        min-width: 0 !important;
        margin-bottom: 0 !important;
    }

    body.mobile-content-mode .simple-row.has-triple-range .gate-b {
        min-width: 38px !important;
        height: 24px !important;
        padding: 0 8px !important;
        font-size: 11px !important;
        flex-shrink: 0 !important;
    }

    body.mobile-content-mode .simple-row.has-triple-range .boss-b {
        font-size: 16px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    body.mobile-content-mode .simple-row.has-triple-range .simple-badges {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    body.mobile-content-mode .simple-row.has-triple-range .simple-badges .badge,
    body.mobile-content-mode .simple-row.has-triple-range .simple-row .badge {
        height: 20px !important;
        padding: 0 7px !important;
        font-size: 10px !important;
        line-height: 18px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* 강투 / 1인분 / 잔혈 박스를 아래줄로 */
    body.mobile-content-mode .simple-row.has-triple-range .triple-range {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: 100% !important;
        justify-content: stretch !important;
    }

    body.mobile-content-mode .simple-row.has-triple-range .triple-part {
        min-width: 0 !important;
        width: 100% !important;
        padding: 5px 6px 4px !important;
        border-radius: 8px !important;
    }

    body.mobile-content-mode .simple-row.has-triple-range .triple-part .t-label {
        font-size: 9px !important;
        margin-bottom: 2px !important;
    }

    body.mobile-content-mode .simple-row.has-triple-range .triple-part .t-value {
        font-size: 12px !important;
    }
}



/* =============================================
   모바일 간편보기 - 1관 / 2관 구분감 강화
   ============================================= */
@media (max-width: 768px) {
    body.mobile-content-mode .simple-card .simple-rows {
        gap: 12px !important;
    }

    body.mobile-content-mode .simple-card .simple-row {
        padding: 12px 12px !important;
        border-color: #273046 !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, .10);
    }

    /* 두 번째 관문부터 위쪽 강조선 */
    body.mobile-content-mode .simple-card .simple-row + .simple-row {
        position: relative;
    }

    body.mobile-content-mode .simple-card .simple-row + .simple-row::before {
        content: "";
        position: absolute;
        top: -7px;
        left: 12px;
        right: 12px;
        height: 1px;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.08) 20%,
            rgba(255,255,255,.16) 50%,
            rgba(255,255,255,.08) 80%,
            transparent 100%
        );
    }
}



/* =============================================
   모바일 - 레벨별 탭 5개 한 줄 고정
   ============================================= */
@media (max-width: 768px) {
    /* 레벨별 잔혈컷(1710~1750) 탭에만 적용 */
    body.mobile-content-mode .simple-level-tabs:has(.simple-level-tab[data-simple-level]) {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        width: 100%;
    }

    body.mobile-content-mode .simple-level-tabs:has(.simple-level-tab[data-simple-level]) .simple-level-tab[data-simple-level] {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 8px 4px !important;
        border-radius: 10px !important;
    }

    body.mobile-content-mode .simple-level-tabs:has(.simple-level-tab[data-simple-level]) .simple-level-tab-main {
        font-size: 12px !important;
        line-height: 1 !important;
    }

    body.mobile-content-mode .simple-level-tabs:has(.simple-level-tab[data-simple-level]) .simple-level-tab-sub {
        font-size: 7px !important;
        line-height: 1 !important;
        margin-top: 4px !important;
        opacity: .8 !important;
    }
}


/* =============================================
   가디언 모바일 전용 시간 버튼 - PC 숨김
   ============================================= */
.guardian-mobile-time-btn {
    display: none;
}

@media (max-width: 768px) {
    body.mobile-content-mode .guardian-mobile-time-btn {
        display: flex !important;
    }
}

/* =============================================
   모바일 - 간편보기 골드바 축소
   ============================================= */
@media (max-width: 768px) {
    .simple-goldbar {
        gap: 6px;
        padding: 10px;
        flex-wrap: nowrap;
    }

    .gold-item,
    .gold-total {
        min-width: 64px;
        gap: 2px;
    }

    .gold-item-label,
    .gold-total-label {
        font-size: 9px;
    }

    .gold-item-value,
    .gold-total-value {
        font-size: 13px;
    }

    .gold-operator {
        font-size: 12px;
        padding-bottom: 1px;
    }

    .icon {
        width: 12px;
        height: 12px;
    }
}

/* 아크 그리드 모드: 우측 사이드 숨기기 & 메인 풀 와이드 */
body.arc-grid-mode .right-column {
    display: none !important;
}

body.arc-grid-mode .content-grid {
    grid-template-columns: 1fr !important;
}

body.arc-grid-mode .main-col {
    max-width: 100% !important;
    width: 100% !important;
}

body.arc-grid-mode #mainContent {
    width: 100% !important;
}


.dot-purple {
    background: #a78bfa;
}


.damage-unit {
    font-size: 11px;
    color: #4a5568;
    font-weight: 500;
    margin-left: 2px;
}

.damage-wrap {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
}

.damage-num {
    display: inline-block;
    min-width: 56px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.damage-unit {
    display: inline-block;
    width: 20px;
    font-size: 11px;
    color: #4a5568;
    font-weight: 500;
    margin-left: 2px;
    text-align: left;
}