/* AP Math OS Sidebar Foundation
   - Academy-style sidebar port styles extracted from ui.js
   - sidebar/drawer only; no global body/button/card rewrite
   - keep existing APMS drawer behavior while separating sidebar CSS from JS
*/

#app-drawer-overlay {
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.42);
    z-index:9998;
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}
#app-drawer-overlay.drw-open { display:block; }

#app-drawer {
    --drw-left:16px;
    --drw-right:16px;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(72vw, 260px);
    background:var(--surface-alpha);
    z-index:9999;
    display:flex;
    flex-direction:column;
    transform:translateX(-104%);
    transition:transform .26s cubic-bezier(0.4, 0, 0.2, 1), width .22s ease, background .2s ease;
    box-shadow:4px 0 24px rgba(0,0,0,0.08);
    overflow-y:auto;
    overflow-x:hidden;
    border-right:1px solid var(--border);
    border-radius:0 18px 18px 0;
    text-align:left;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}
#app-drawer.drw-open {
    transform:translateX(0);
}

.drw-rail-toggle {
    display:none;
    width:56px;
    height:58px;
    box-sizing:border-box;
    padding:0;
    border:0;
    border-bottom:0;
    border-radius:0;
    background:transparent;
    color:var(--text);
    font-size:20px;
    font-weight:700;
    cursor:pointer;
    align-items:center;
    justify-content:center;
    font-family:inherit;
    text-align:left;
}

.drw-top-tools {
    height:58px;
    min-height:58px;
    padding:0 var(--drw-right) 0 var(--drw-left);
    border-bottom:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    flex-shrink:0;
    text-align:left;
}

.drw-hamburger {
    width:36px;
    height:36px;
    padding:0;
    margin:0;
    border:0;
    background:transparent;
    color:var(--text);
    font-size:20px;
    font-weight:700;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    cursor:pointer;
    font-family:inherit;
    text-align:left;
}

.ap-hamburger-glyph {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    line-height:1;
    transform:translateX(-1px);
    pointer-events:none;
}

.switch {
    position:relative;
    display:inline-block;
    width:48px;
    height:26px;
    flex:0 0 auto;
    margin-left:auto;
    margin-right:0;
}
.switch input {
    opacity:0;
    width:0;
    height:0;
}
.slider {
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:var(--surface-2);
    border:1px solid var(--border);
    transition:.25s;
    border-radius:999px;
}
.slider:before {
    position:absolute;
    content:"";
    height:20px;
    width:20px;
    left:2px;
    bottom:2px;
    background-color:var(--secondary);
    transition:.25s;
    border-radius:50%;
}
input:checked + .slider {
    background-color:var(--primary);
    border-color:var(--primary);
}
input:checked + .slider:before {
    transform:translateX(22px);
    background-color:#fff;
}

.drw-menu {
    padding:6px 0;
    flex:0 0 auto;
    text-align:left;
}
.drw-sec {
    display:none;
}
.drw-item {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    box-sizing:border-box;
    margin:1px 0;
    padding:9px var(--drw-right) 9px var(--drw-left);
    min-height:38px;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--text-soft);
    font-size:15px;
    font-weight:600;
    font-family:inherit;
    text-align:left;
    cursor:pointer;
    letter-spacing:-0.25px;
    transition:background .18s ease, transform .18s ease, color .18s ease;
}
.drw-label {
    display:block;
    width:100%;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:left;
}
.drw-item:active {
    background:var(--bg);
    transform:scale(0.98);
}
.drw-item:hover {
    background:var(--surface-2);
}
.drw-item.danger {
    color:var(--error);
    font-weight:600;
}
.drw-spacer {
    flex:1;
}
.drw-footer {
    padding:6px 0 calc(10px + env(safe-area-inset-bottom));
    border-top:1px solid var(--border);
    flex-shrink:0;
    background:transparent;
    text-align:left;
}

#app-drawer .drw-hamburger,
#app-drawer .drw-item,
#app-drawer .drw-footer .drw-item,
#app-drawer .drw-label {
    text-align:left !important;
    justify-content:flex-start !important;
}

#app-drawer .switch {
    margin-left:auto !important;
    margin-right:0 !important;
}

@media (min-width:901px) {
    #app-drawer-overlay {
        display:none !important;
    }

    #app-drawer {
        width:56px;
        transform:none !important;
        border-radius:0;
        box-shadow:none;
        background:var(--surface-alpha);
        backdrop-filter:blur(16px);
        -webkit-backdrop-filter:blur(16px);
        overflow:hidden;
    }

    #app-drawer.drw-expanded {
        width:260px;
        box-shadow:8px 0 30px rgba(0,0,0,0.08);
        background:var(--surface-alpha);
        overflow-y:auto;
        border-radius:0 18px 18px 0;
    }

    .drw-rail-toggle {
        display:flex;
    }

    #app-drawer.drw-expanded .drw-rail-toggle {
        display:none;
    }

    #app-drawer:not(.drw-expanded) .drw-top-tools,
    #app-drawer:not(.drw-expanded) .drw-menu,
    #app-drawer:not(.drw-expanded) .drw-footer,
    #app-drawer:not(.drw-expanded) .drw-spacer {
        display:none;
    }

    #app-drawer.drw-expanded .drw-top-tools {
        display:flex;
    }

    #app-drawer.drw-expanded .drw-menu {
        display:block;
    }

    #app-drawer.drw-expanded .drw-footer {
        display:block;
    }

    #app-drawer.drw-expanded .drw-spacer {
        display:block;
        flex:1;
    }
}


/* ============================================================
   [FINAL HARD LOCK v8.6]
   Drawer 햄버거 단일 위치 복구
   - 닫힘 레일 / 열린 drawer / 모바일 drawer 모두 같은 햄버거 기준 유지
   - 다크모드 스위치는 우측 16px, top 16px 기준
============================================================ */
#app-drawer {
    --drw-left:16px !important;
    --drw-right:16px !important;
    width:min(72vw, 260px) !important;
    align-items:stretch !important;
    text-align:left !important;
}
#app-drawer.drw-expanded { width:260px !important; }
#app-drawer:not(.drw-expanded)::before {
    content:"" !important;
    position:absolute !important;
    top:57px !important;
    left:0 !important;
    width:56px !important;
    height:1px !important;
    background:var(--border) !important;
    pointer-events:none !important;
    z-index:1 !important;
}
#app-drawer .drw-top-tools {
    position:relative !important;
    width:100% !important;
    height:58px !important;
    min-height:58px !important;
    box-sizing:border-box !important;
    padding:0 !important;
    border-bottom:1px solid var(--border) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    text-align:left !important;
    flex-shrink:0 !important;
}
#app-drawer .drw-hamburger {
    position:absolute !important;
    left:10px !important;
    top:11px !important;
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    font-size:20px !important;
    font-weight:700 !important;
    line-height:1 !important;
    color:var(--text) !important;
    cursor:pointer !important;
    z-index:3 !important;
}
#app-drawer .switch {
    position:absolute !important;
    right:16px !important;
    top:16px !important;
    margin:0 !important;
}
#app-drawer .drw-menu,
#app-drawer .drw-footer {
    width:100% !important;
    box-sizing:border-box !important;
    text-align:left !important;
}
#app-drawer .drw-item {
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-height:38px !important;
    box-sizing:border-box !important;
    margin:1px 0 !important;
    padding:9px 16px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--text-soft) !important;
    font-size:15px !important;
    font-weight:600 !important;
    font-family:inherit !important;
    text-align:left !important;
    letter-spacing:-0.25px !important;
    box-shadow:none !important;
    cursor:pointer !important;
}
#app-drawer .drw-label {
    position:static !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    text-align:left !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    transform:none !important;
}
#app-drawer .drw-item.danger {
    color:var(--error) !important;
    font-weight:600 !important;
}
#app-drawer .drw-rail-toggle {
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    margin:11px 0 0 10px !important;
    box-sizing:border-box !important;
    padding:0 !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    background:transparent !important;
    border-left:0 !important;
    border-right:0 !important;
    border-top:0 !important;
    border-bottom:0 !important;
    box-shadow:none !important;
    font-size:20px !important;
    font-weight:700 !important;
    line-height:1 !important;
}
@media (min-width:901px) {
    #app-drawer:not(.drw-expanded) {
        width:56px !important;
    }
    #app-drawer:not(.drw-expanded) .drw-top-tools,
    #app-drawer:not(.drw-expanded) .drw-menu,
    #app-drawer:not(.drw-expanded) .drw-footer,
    #app-drawer:not(.drw-expanded) .drw-spacer {
        display:none !important;
    }
    #app-drawer:not(.drw-expanded) .drw-rail-toggle {
        display:flex !important;
    }
    #app-drawer.drw-expanded .drw-rail-toggle {
        display:none !important;
    }
    #app-drawer.drw-expanded .drw-top-tools {
        display:flex !important;
    }
    #app-drawer.drw-expanded .drw-hamburger {
        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;
    }
    #app-drawer.drw-expanded .drw-menu,
    #app-drawer.drw-expanded .drw-footer {
        display:block !important;
    }
}


/* ============================================================
   [Sidebar visual layer v1.1]
   - 위 hard-lock 영역은 drawer 위치/열림/닫힘 보존용으로 유지한다.
   - 아래 visual layer는 ACA 감각의 아이콘/hover/active만 담당한다.
   - Round 3: 중복 visual block 제거, !important 사용 범위 축소.
============================================================ */
#app-drawer {
    background: var(--surface-alpha);
    border: 1px solid var(--border);
    box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 10px 28px rgba(15,23,42,0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

#app-drawer .drw-menu {
    padding-top:10px !important;
    padding-bottom:12px !important;
}

#app-drawer .drw-section-label {
    display:block !important;
    padding:14px 16px 6px !important;
    color:var(--text);
    font-size:11px;
    font-weight:600;
    line-height:1.2;
    letter-spacing:0.02em;
    text-align:left;
    opacity:0.55;
    text-transform:uppercase;
}

#app-drawer .drw-item {
    gap:10px !important;
    min-height:40px !important;
    margin:2px 10px !important;
    width:calc(100% - 20px) !important;
    padding:9px 16px !important;
    border-radius:12px !important;
    background:transparent;
    color:var(--text);
    border:1px solid transparent;
    box-shadow:none;
    font-size:14px;
    font-weight:500;
    line-height:1.25;
    transition:background .16s ease, color .16s ease, transform .16s ease;
}

#app-drawer .drw-item:hover,
#app-drawer .drw-item:focus-visible {
    background:rgba(15,23,42,0.04);
    color:var(--text);
    outline:none;
}

#app-drawer .drw-item.drw-active,
#app-drawer .drw-item[aria-current="page"] {
    background:var(--surface-2);
    color:var(--text);
    border-color:var(--border);
}

#app-drawer .drw-icon {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:19px !important;
    height:19px !important;
    flex:0 0 19px !important;
    color:currentColor;
    opacity:.72;
    transition:opacity .16s ease, color .16s ease;
}

#app-drawer .drw-item:hover .drw-icon,
#app-drawer .drw-item:focus-visible .drw-icon,
#app-drawer .drw-item.drw-active .drw-icon,
#app-drawer .drw-item[aria-current="page"] .drw-icon {
    opacity:1;
}

#app-drawer .drw-icon svg {
    display:block !important;
    width:19px !important;
    height:19px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}

#app-drawer .drw-label {
    flex:1 1 auto !important;
    color:inherit;
    font-size:14px;
    font-weight:500;
    line-height:1.25;
}

#app-drawer .drw-item:active {
    transform:scale(0.99);
    background:var(--surface-2);
}

#app-drawer .drw-item.danger {
    color:var(--text);
    font-weight:500;
    opacity:0.72;
}

#app-drawer .drw-item.danger:hover,
#app-drawer .drw-item.danger:focus-visible {
    color:var(--error);
    background:rgba(239,68,68,0.07);
    opacity:1;
}

body.dark #app-drawer .drw-item:hover,
body.dark #app-drawer .drw-item:focus-visible {
    background:rgba(255,255,255,0.07);
}

/* ============================================================
   Round minfix — closed rail/header color parity only
   - Keep layout unchanged.
   - Closed desktop rail uses the same surface layer as desktop topbar.
============================================================ */
@media (min-width:901px) {
    #app-drawer:not(.drw-expanded) {
        background: var(--surface-alpha) !important;
        border-left: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        border-right: 1px solid var(--border) !important;
        box-shadow: none !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }
    #app-drawer:not(.drw-expanded) .drw-rail-toggle {
        background: transparent !important;
    }
}