/* _content/USearchWebApp/Shared/MainLayout.razor.rz.scp.css */
/* 1. ���̾ƿ� �����̳� */
.main-layout[b-9r314vqxim] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background-color: #000000;
}

/* 2. ��� ��� */
.top-row[b-9r314vqxim] {
    background-color: #121212;
    height: var(--header-height, 70px);
    border-bottom: 1px solid #333333;
    display: flex;
    align-items: center;
    padding: 0 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.hamburger-btn[b-9r314vqxim] {
    background: none; /* ��� ���� */
    border: none; /* �׵θ� ���� */
    font-size: 24px; /* ������ ũ�� */
    cursor: pointer;
    margin-right: 15px;
    /* [����] ���ڻ�(�����ܻ�)�� ������� ���� ���� */
    color: #FFFFFF !important;
    padding: 5px;
    display: flex; /* ������ ���� ���� ���� */
    align-items: center;
}

.brand-name[b-9r314vqxim] {
    font-weight: 800;
    font-size: 1.3rem;
    color: #00BFFF;
    cursor: pointer;
}

/* 3. ���̵�� */
.sidebar[b-9r314vqxim] {
    position: fixed;
    top: var(--header-height, 70px);
    left: calc(var(--sidebar-width, 250px) * -1);
    width: var(--sidebar-width, 250px);
    height: calc(100vh - var(--header-height, 70px));
    background-color: #121212;
    border-right: 1px solid #333333;
    transition: left var(--transition-speed, 0.3s) ease;
    z-index: 900;
    overflow-y: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* 4. ���� ������ */
/* 4. ���� ������ (������) */
.content[b-9r314vqxim] {
    /* [�ٽ� 1] ���� ���: ȭ�� ��ü(100vh)���� ���(70px)�� �� ��ŭ�� ���� */
    height: calc(100vh - 70px);
    /* [�ٽ� 2] ��ġ ���: �е� ��� �������� ��� �Ʒ��� ���� */
    margin-top: 70px;
    /* [�ٽ� 3] �߿�: ���⼭ ��ũ�ѹٰ� ������ �ʵ��� ���� (���� ���̺������� �����) */
    overflow: hidden;
    /* [�ٽ� 4] �е� ����: ���� ������(.page-content)���� �е��� �� ���̹Ƿ� ���⼱ 0 */
    padding: 0 !important;
    /* �ڽ� ���(.page-content)�� �� ������ Flex ���� */
    display: flex;
    flex-direction: column;
    /* ������ ���� */
    background-color: #000000;
    color: #FFFFFF;
    transition: margin-left var(--transition-speed, 0.3s) ease;
}

.sidebar-open .sidebar[b-9r314vqxim] {
    left: 0;
}

.sidebar-open .content[b-9r314vqxim] {
    margin-left: var(--sidebar-width, 250px);
}

/* ====================================================
   [�ٽ� ����] �޴� ������ ������ (div �±� ����)
   ==================================================== */
.nav-menu[b-9r314vqxim] {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.nav-item[b-9r314vqxim] {
    padding: 12px 20px;
    margin-bottom: 5px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px; /* �����ܰ� �ؽ�Ʈ ���� */
    /* [�߿�] �⺻ ����: ���� ���� ȸ�� (#E0E0E0) ���� ���� */
    color: #E0E0E0 !important;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s;
}

/* ������ ��Ÿ�� */
.nav-icon[b-9r314vqxim] {
    font-size: 1.5rem;
    /* �θ� ������ ���󰡵��� ���� */
    color: inherit !important;
}

.text[b-9r314vqxim] {
    margin-top: 2px; /* �� ���� �̼����� */
}

/* ȣ�� ȿ�� */
.nav-item:hover[b-9r314vqxim] {
    background-color: #1E1E1E;
    color: #FFFFFF !important; /* ȣ�� �� ���� ��� */
}

/* Ȱ��ȭ(���õ�) ���� */
.nav-item.active[b-9r314vqxim] {
    background-color: rgba(0, 191, 255, 0.15); /* ������ ���� ��� */
    color: #00BFFF !important; /* �׿� ���� �ؽ�Ʈ */
    font-weight: 700;
    border-left: 3px solid #00BFFF;
}

/* ��ũ�ѹ� */
[b-9r314vqxim]::-webkit-scrollbar {
    width: 8px;
}

[b-9r314vqxim]::-webkit-scrollbar-track {
    background: #121212;
}

[b-9r314vqxim]::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

    [b-9r314vqxim]::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/* _content/USearchWebApp/Shared/NavMenu.razor.rz.scp.css */
/* 1. ����Ͽ� ��� �� (�ܹ��� ��ư �ִ� ��) */
.navbar-toggler[b-njjjkzxz57] {
    background-color: transparent;
    border: 1px solid #333;
}

.top-row[b-njjjkzxz57] {
    height: 3.5rem;
    background-color: #121212; /* [����] ��ũ �׷��� ��� */
    border-bottom: 1px solid #333; /* ���м� �߰� */
}

/* 2. �귣�� �ΰ� (U-Search) */
.navbar-brand[b-njjjkzxz57] {
    font-size: 1.1rem;
    font-weight: 800;
    color: #00BFFF; /* [����] �׿� ���� ����Ʈ */
}

.oi[b-njjjkzxz57] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

/* 3. �޴� ������ ���̾ƿ� */
.nav-item[b-njjjkzxz57] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-njjjkzxz57] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-njjjkzxz57] {
        padding-bottom: 1rem;
    }

    /* 4. [�ٽ�] �޴� ��ũ ��Ÿ�� (�⺻) */
    .nav-item[b-njjjkzxz57]  a {
        color: #B0B0B0; /* [����] �⺻ ȸ�� �ؽ�Ʈ */
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        transition: all 0.2s; /* �ε巯�� ��ȯ */
    }

        /* 5. [�ٽ�] �޴� Ȱ��ȭ ���� (Active) */
        .nav-item[b-njjjkzxz57]  a.active {
            background-color: rgba(0, 191, 255, 0.15); /* [����] ������ �׿� ���� ��� */
            color: #00BFFF; /* [����] �ؽ�Ʈ�� �׿� ���� */
            font-weight: 700;
            border-left: 3px solid #00BFFF; /* ���� ������ (���û���) */
        }

        /* 6. [�ٽ�] ���콺 ȣ�� ���� */
        .nav-item[b-njjjkzxz57]  a:hover {
            background-color: #1E1E1E; /* [����] �ణ ���� ��ũ �׷��� */
            color: #FFFFFF; /* [����] �ؽ�Ʈ ��� */
        }

/* ����ũž ȭ�� ���� */
@media (min-width: 641px) {
    .navbar-toggler[b-njjjkzxz57] {
        display: none;
    }

    .collapse[b-njjjkzxz57] {
        /* ���̵�� �׻� ���� */
        display: block;
    }

    /* ����ũž������ ���̵�� ����� ���⼭�� ����� �� ���� */
    .nav-scrollable[b-njjjkzxz57] {
        background-color: #121212;
    }
}
