* {
    box-sizing:border-box;
}

body {
    margin:0;
    background:#07111f;
    color:#e8eef7;
    font-family:
        Arial,
        "Noto Sans KR",
        sans-serif;
}

a {
    color:inherit;
    text-decoration:none;
}

.top-header {
    position:sticky;
    top:0;
    z-index:1000;

    background:#0b1726;
    border-bottom:1px solid #21354c;

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.22);
}

.top-inner {
    min-height:88px;

    max-width:1800px;
    margin:auto;

    padding:0 26px;

    display:flex;
    align-items:center;

    gap:28px;
}

.brand {
    min-width:270px;
}

.brand-main {
    font-size:18px;
    font-weight:900;
    letter-spacing:.4px;
}

.brand-main span {
    margin-left:7px;
    color:#7fc4ff;
}

.brand-sub {
    margin-top:5px;
    font-size:11px;
    color:#71869e;
}

.nav {
    flex:1;

    display:flex;
    flex-wrap:wrap;

    gap:5px;
}

.nav a {
    padding:11px 13px;

    border-radius:8px;

    color:#aab9ca;

    font-size:14px;
    font-weight:700;
}

.nav a:hover {
    background:#16283c;
    color:white;
}

.admin {
    display:flex;
    align-items:center;

    gap:10px;

    padding-left:17px;

    border-left:1px solid #263b52;

    white-space:nowrap;
}

.avatar {
    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#183653;
    border:1px solid #335d83;

    color:#a9d7ff;

    font-weight:900;
}

.admin-name {
    font-weight:900;
    font-size:14px;
}

.admin-role {
    margin-top:3px;

    color:#7e94ab;

    font-size:11px;
}

.logout {
    margin-left:5px;

    padding:8px;

    color:#899db3;

    font-size:11px;
}

.main {
    max-width:1700px;
    margin:auto;
    padding:24px;
}

.page-title {
    margin:0 0 5px;

    font-size:25px;
}

.page-desc {
    margin:0 0 22px;
    color:#8295aa;
}

.grid {
    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(210px,1fr)
        );

    gap:13px;
}

.card {
    background:#101e30;

    border:1px solid #263a51;

    border-radius:13px;

    padding:17px;
}

.card-label {
    color:#8ca0b6;

    font-size:13px;
}

.card-number {
    margin-top:8px;

    font-size:29px;
    font-weight:900;
}

.ok {
    color:#8fe3ae;
}

.warn {
    color:#ffd077;
}

.bad {
    color:#ff8f8f;
}

.muted {
    color:#8195aa;
}

.section {
    margin-top:22px;
}

.section-head {
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:10px;
}

.section-title {
    margin:0;

    font-size:18px;
}

.panel {
    background:#101e30;

    border:1px solid #263a51;

    border-radius:13px;

    overflow:hidden;
}

.tablebox {
    overflow:auto;
}

table {
    width:100%;

    border-collapse:collapse;

    min-width:950px;
}

th,
td {
    padding:11px 13px;

    border-bottom:
        1px solid #213247;

    text-align:left;

    white-space:nowrap;
}

th {
    color:#8ea2b8;

    font-size:12px;

    background:#0d1929;
}

td {
    font-size:13px;
}

.alert {
    padding:15px;

    border-bottom:
        1px solid #26394e;
}

.alert:last-child {
    border-bottom:0;
}

.alert-title {
    font-weight:900;
}

.alert-sub {
    margin-top:6px;

    color:#8ea1b7;

    font-size:13px;
}

.btn {
    display:inline-block;

    padding:9px 13px;

    border:1px solid #35526e;

    border-radius:8px;

    background:#172a40;

    color:white;

    cursor:pointer;
}

.btn:hover {
    background:#203a57;
}

.tabs {
    display:flex;
    gap:7px;

    margin-bottom:15px;
}

.tabs a {
    padding:9px 13px;

    border-radius:8px;

    background:#101e30;

    border:1px solid #263a51;
}

.form-grid {
    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(180px,1fr)
        );

    gap:10px;
}

input,
select {
    width:100%;

    padding:10px;

    border-radius:7px;

    border:1px solid #30465f;

    background:#081422;

    color:white;
}

.zone {
    display:inline-block;

    padding:3px 7px;

    border-radius:6px;

    background:#17314a;

    color:#9dd1ff;

    font-size:11px;
}

.dungeon {
    background:#3c224b;
    color:#d9a9ff;
}

@media(max-width:1200px) {

    .top-inner {
        align-items:flex-start;
        padding-top:14px;
        padding-bottom:14px;
    }

    .admin {
        display:none;
    }
}


/* =========================================================
   TRACE MOBILE V3 ISOLATED
   PC UI와 완전히 분리된 모바일 UI
   ========================================================= */


/* ---------------------------------------------------------
   PC에서는 모바일 전용 요소 완전 숨김
   --------------------------------------------------------- */

.trace-m3-header,
.trace-m3-backdrop,
.trace-m3-drawer {
    display:none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:768px) {


    html,
    body {
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }


    /* =============================================
       기존 PC HEADER 완전히 숨김
       ============================================= */

    .top-header {
        display:none !important;
    }


    /* =============================================
       모바일 HEADER
       ============================================= */

    .trace-m3-header {

        display:flex;

        position:sticky;

        top:0;

        z-index:4000;

        width:100%;
        min-height:68px;

        padding:
            9px
            12px;

        align-items:center;
        justify-content:space-between;

        gap:12px;

        background:#0b1726;

        border-bottom:
            1px solid
            #25394f;

        box-shadow:
            0 5px 18px
            rgba(0,0,0,.28);
    }


    .trace-m3-brand {

        display:flex;

        flex:1 1 auto;

        min-width:0;

        flex-direction:column;

        justify-content:center;

        text-decoration:none;
    }


    .trace-m3-brand strong {

        display:block;

        color:#e9eef7;

        font-size:15px;

        line-height:1.2;

        white-space:nowrap;

        word-break:keep-all;
    }


    .trace-m3-brand strong span {

        margin-left:5px;

        color:#58aaf5;
    }


    .trace-m3-brand small {

        display:block;

        margin-top:4px;

        color:#8192a8;

        font-size:10px;

        line-height:1.2;

        white-space:nowrap;
    }


    .trace-m3-menu-button {

        display:flex;

        flex:0 0 44px;

        width:44px;
        height:44px;

        padding:0;

        align-items:center;
        justify-content:center;

        border:
            1px solid
            #39516c;

        border-radius:9px;

        background:#12263d;

        color:#eef4fb;

        font-size:24px;

        line-height:1;

        cursor:pointer;
    }


    /* =============================================
       검은 배경
       ============================================= */

    .trace-m3-backdrop {

        display:block;

        position:fixed;

        inset:0;

        z-index:4990;

        background:
            rgba(0,0,0,.62);

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transition:
            opacity .2s ease,
            visibility .2s ease;
    }


    body.trace-m3-open
    .trace-m3-backdrop {

        opacity:1;

        visibility:visible;

        pointer-events:auto;
    }


    /* =============================================
       오른쪽 메뉴 DRAWER
       ============================================= */

    .trace-m3-drawer {

        display:flex;

        position:fixed;

        top:0;
        right:0;
        bottom:0;

        z-index:5000;

        width:min(
            84vw,
            330px
        );

        height:100dvh;

        flex-direction:column;

        background:#0b1726;

        border-left:
            1px solid
            #2a4058;

        box-shadow:
            -15px 0 40px
            rgba(0,0,0,.5);

        transform:
            translateX(105%);

        transition:
            transform .22s ease;

        overflow-y:auto;

        -webkit-overflow-scrolling:
            touch;
    }


    body.trace-m3-open
    .trace-m3-drawer {

        transform:
            translateX(0);
    }


    body.trace-m3-open {

        overflow:hidden;
    }


    /* =============================================
       메뉴 제목
       ============================================= */

    .trace-m3-drawer-head {

        display:flex;

        min-height:76px;

        padding:
            14px
            15px;

        align-items:center;
        justify-content:space-between;

        gap:10px;

        border-bottom:
            1px solid
            #263b53;
    }


    .trace-m3-drawer-head strong {

        display:block;

        color:#e8eef7;

        font-size:13px;

        white-space:nowrap;
    }


    .trace-m3-drawer-head div div {

        margin-top:3px;

        color:#58aaf5;

        font-size:19px;

        font-weight:800;
    }


    .trace-m3-close {

        width:42px;
        height:42px;

        flex:0 0 42px;

        padding:0;

        border:
            1px solid
            #39516c;

        border-radius:8px;

        background:#12263d;

        color:#eef4fb;

        font-size:26px;

        cursor:pointer;
    }


    /* =============================================
       메뉴 항목
       ============================================= */

    .trace-m3-nav {

        display:flex;

        flex:1 1 auto;

        width:100%;

        padding:
            9px
            11px;

        flex-direction:column;

        gap:2px;
    }


    .trace-m3-nav a {

        display:flex;

        width:100%;

        min-height:46px;

        padding:
            0
            13px;

        align-items:center;

        border-radius:8px;

        color:#d8e2ee;

        font-size:14px;

        font-weight:600;

        line-height:1.2;

        white-space:nowrap;

        word-break:keep-all;

        writing-mode:
            horizontal-tb;
    }


    .trace-m3-nav a:active {

        background:#152c46;
    }


    /* =============================================
       관리자 영역
       ============================================= */

    .trace-m3-account {

        display:flex;

        padding:
            14px
            15px
            18px;

        align-items:center;
        justify-content:space-between;

        gap:10px;

        border-top:
            1px solid
            #263b53;
    }


    .trace-m3-account strong {

        display:block;

        font-size:14px;
    }


    .trace-m3-account small {

        display:block;

        margin-top:3px;

        color:#8192a8;

        font-size:10px;
    }


    .trace-m3-account > a {

        padding:
            8px
            10px;

        border:
            1px solid
            #39516c;

        border-radius:7px;

        font-size:11px;

        white-space:nowrap;
    }


    /* =====================================================
       본문 모바일 대응
       ===================================================== */

    main,
    .main,
    .content,
    .main-content,
    .container,
    .page-container {

        width:100% !important;

        max-width:100% !important;

        margin-left:auto !important;
        margin-right:auto !important;

        padding-left:11px !important;
        padding-right:11px !important;
    }


    .page-title {

        font-size:21px !important;

        line-height:1.3 !important;
    }


    .page-desc {

        font-size:12px !important;

        line-height:1.55 !important;
    }


    /* 대시보드 카드 */

    .grid,
    .dashboard-grid,
    .card-grid {

        display:grid !important;

        grid-template-columns:
            minmax(0,1fr) !important;

        gap:9px !important;
    }


    .card {

        width:100% !important;

        max-width:100% !important;

        min-width:0 !important;
    }


    /* 폼 */

    .form-grid {

        display:grid !important;

        grid-template-columns:
            minmax(0,1fr) !important;

        gap:9px !important;
    }


    input,
    select,
    textarea {

        max-width:100%;

        font-size:16px !important;
    }


    button,
    .btn {

        min-height:40px;
    }


    /* SECTION */

    .section-head {

        flex-wrap:wrap !important;

        gap:8px;
    }


    /* 테이블은 화면 전체가 아니라
       표 안에서만 좌우 스크롤 */

    .tablebox,
    .panel.tablebox {

        display:block !important;

        width:100% !important;

        max-width:100% !important;

        overflow-x:auto !important;

        overflow-y:hidden !important;

        -webkit-overflow-scrolling:
            touch;
    }


    .tablebox table,
    .panel.tablebox table {

        width:max-content;

        min-width:100%;
    }


    th,
    td {

        word-break:keep-all;

        overflow-wrap:normal;
    }


    /* TAB */

    .tabs {

        display:flex;

        width:100%;

        overflow-x:auto;

        flex-wrap:nowrap !important;

        -webkit-overflow-scrolling:
            touch;
    }


    .tabs a {

        flex:0 0 auto;

        white-space:nowrap;

        word-break:keep-all;
    }

}


/* =========================================================
   작은 휴대폰
   ========================================================= */

@media (max-width:420px) {


    .trace-m3-header {

        min-height:64px;

        padding:
            8px
            10px;
    }


    .trace-m3-brand strong {

        font-size:13px;
    }


    .trace-m3-brand small {

        font-size:9px;
    }


    .trace-m3-menu-button {

        width:42px;

        height:42px;

        flex-basis:42px;
    }

}