/* mbn-mobile-nav.css — 모바일 하단 탭 5개 · 자료/더보기 목록 · 내 콘솔(?view=me) (2026-10-13)
   토큰은 assets/onae-theme.css 0절(--vio·--mbx-*)과 홈 F안 색을 그대로 쓴다. */
:root{--mbnt-ink:var(--mbx-ink,#23284A);--mbnt-sub:var(--mbx-sub,#4F5470);--mbnt-line:var(--mbx-line,#E4E3EF);--mbnt-bg:#fff;--mbnt-on:var(--vio-strong,#4536B8);--mbnt-tint:var(--mbx-tint,#F1EEFF)}
@media (prefers-color-scheme:dark){:root{--mbnt-ink:#E6E9F5;--mbnt-sub:#AEB4CC;--mbnt-line:#2B3147;--mbnt-bg:#171B2B;--mbnt-on:#B9AFFF;--mbnt-tint:#262B48}}

/* ---- 하단 탭(1024px 미만) ---- */
@media (max-width:1023px){
 #tabbar.mbnt{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;margin:0;padding:4px max(4px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));background:var(--mbnt-bg);border-top:1px solid var(--mbnt-line);box-shadow:0 -6px 20px rgba(20,18,50,.07)}
 #tabbar.mbnt .mbnt-tab{flex:1 1 0;min-width:0;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px 4px;border:0;border-radius:12px;background:transparent;color:var(--mbnt-sub);font:inherit;font-size:11.5px;font-weight:700;line-height:1.1;cursor:pointer;position:relative}
 #tabbar.mbnt .mbnt-i{display:grid;place-items:center;width:44px;height:28px;border-radius:999px}
 #tabbar.mbnt .mbnt-i .icn,#tabbar.mbnt .mbnt-i svg{width:21px;height:21px}
 #tabbar.mbnt .mbnt-l{white-space:nowrap}
 #tabbar.mbnt .mbnt-tab[aria-current=page]{color:var(--mbnt-on)}
 #tabbar.mbnt .mbnt-tab[aria-current=page] .mbnt-i{background:var(--mbnt-tint)}
 #tabbar.mbnt .mbnt-tab[aria-expanded=true]{color:var(--mbnt-on)}
 #tabbar.mbnt .mbnt-tab:focus-visible{outline:3px solid var(--focus,#0B6E6B);outline-offset:-3px}
}
@media (min-width:1024px){#tabbar.mbnt{display:none}}
@media print{#tabbar.mbnt,.mbnt-sheet{display:none!important}}

/* ---- 자료·더보기: 아래에서 올라오는 목록 ---- */
.mbnt-sheet[hidden]{display:none}
.mbnt-sheet{position:fixed;inset:0;z-index:10050}
.mbnt-scrim{position:absolute;inset:0;background:rgba(18,16,46,.42)}
.mbnt-panel{position:absolute;left:0;right:0;bottom:0;max-height:min(78vh,620px);overflow:auto;background:var(--mbnt-bg);color:var(--mbnt-ink);border-radius:20px 20px 0 0;padding:8px 16px max(16px,env(safe-area-inset-bottom));box-shadow:0 -12px 32px rgba(18,16,46,.2)}
.mbnt-head{display:flex;align-items:center;justify-content:space-between;padding:8px 0 6px}
.mbnt-head h2{margin:0;font-size:18px;font-weight:800}
.mbnt-x{min-height:44px;min-width:56px;border:1px solid var(--mbnt-line);border-radius:10px;background:transparent;color:var(--mbnt-ink);font:inherit;font-weight:700;cursor:pointer}
.mbnt-list{list-style:none;margin:0;padding:0}
.mbnt-list li+li{border-top:1px solid var(--mbnt-line)}
.mbnt-list a,.mbnt-list button{display:flex;flex-direction:column;gap:2px;width:100%;min-height:56px;padding:9px 4px;border:0;background:transparent;color:inherit;text-align:left;text-decoration:none;font:inherit;cursor:pointer;justify-content:center}
.mbnt-list b{font-size:15.5px;font-weight:800}
.mbnt-list small{font-size:12.5px;color:var(--mbnt-sub);line-height:1.4}
.mbnt-list a:focus-visible,.mbnt-list button:focus-visible,.mbnt-x:focus-visible{outline:3px solid var(--focus,#0B6E6B);outline-offset:2px}
@media (min-width:1024px){.mbnt-panel{left:50%;right:auto;width:440px;transform:translateX(-50%);bottom:24px;border-radius:20px}}
body.mbnt-open{overflow:hidden}

/* ---- 진단 탭 맨 위 5단계 줄 ---- */
.mbfF-ps{margin:0 0 14px}
.mbfF-ps .mbfF-strip{position:static;margin:0}
.mbfF-ps .mbfF-strip [aria-current=step]{color:var(--mbnt-on)}
.mbfF-ps .mbfF-strip [aria-current=step] i{background:var(--vio,#5A4BD6);color:#fff}

/* ---- 내 콘솔 ---- */
.mbnc h1{margin-bottom:4px}
.mbnc .sub{margin-bottom:14px}
.mbnc-sec{margin-bottom:14px}
.mbnc-sec h2{font-size:16.5px;font-weight:800;margin:0 0 6px;color:var(--navy-text,#1B2A4A)}
.mbnc-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 0;border-top:1px solid var(--mbnt-line)}
.mbnc-sec h2+.mbnc-row{border-top:0}
.mbnc-t{flex:1 1 170px;min-width:0}
.mbnc-t b{display:block;font-size:14.5px;line-height:1.4;overflow-wrap:anywhere}
.mbnc-t small{display:block;font-size:12.5px;color:var(--muted,#5C617C);margin-top:2px}
.mbnc-b{display:flex;flex-wrap:wrap;gap:6px}
.mbnc-b .btn{width:auto;min-height:44px;margin:0}
.mbnc-note{font-size:12.5px;color:var(--muted,#5C617C);margin:8px 0 0;line-height:1.6}
.mbnc-empty{font-size:13.5px;color:var(--muted,#5C617C);margin:2px 0 10px;line-height:1.6}
.mbnc-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mbnc-two .btn{width:100%;margin:0;min-height:48px}
.mbnc .lnkbtn{margin-top:8px;border:0;background:none;padding:6px 0;min-height:44px;color:var(--vio-text,#4536B8);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.mbnc-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px}
.mbnc-links .btn{margin:0;min-height:48px;font-size:13px;padding:6px 8px}
.mbnc-teach .btn{margin-top:10px}
.mbnc-kpi{margin:2px 0 10px;font-size:13px;color:var(--muted,#5C617C)}
.mbnc-kpi b{font-size:28px;font-weight:800;color:var(--navy-text,#1B2A4A);margin-right:4px}
.mbnc-kpi span{display:block}
.mbnc-cls{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(60px,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--mbnt-line);font-size:13.5px}
.mbnc-cls span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
.mbnc-cls span small,.mbnc-cls b small{font-weight:500;color:var(--muted,#5C617C);font-size:11.5px}
.mbnc-cls i{display:block;height:8px;border-radius:999px;background:var(--mbnt-tint);overflow:hidden}
.mbnc-cls i em{display:block;height:100%;background:var(--vio,#5A4BD6);border-radius:999px}
.mbnc-cls b{font-size:13.5px;white-space:nowrap}
@media (max-width:420px){.mbnc-links{grid-template-columns:1fr}.mbnc-two{grid-template-columns:1fr}}
/* [R3-W1 2026-10-14] 내 기록 = 개별화 포트폴리오 */
.mbnc-kpis{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mbnc-kpis li{background:#fff;border:1px solid var(--mbx-line,#E4E3EF);border-radius:12px;padding:10px 6px;text-align:center}
.mbnc-kpis b{display:block;font-size:20px;color:var(--navy-text,#1B2A4A)}
.mbnc-kpis span{font-size:12.5px;color:var(--muted,#5C617C)}
.mbnc-tls{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.mbnc-tl{border:1px solid var(--mbx-line,#E4E3EF);border-left:4px solid var(--vio,#5A4BD6);border-radius:12px;padding:12px 12px 10px;display:grid;gap:6px}
.mbnc-tlh{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px}
.mbnc-tlh b{font-size:14.5px;color:var(--navy-text,#1B2A4A)}
.mbnc-tlh small{font-size:12.5px;color:var(--muted,#5C617C)}
.mbnc-cmp{font-size:13px;color:var(--muted,#5C617C)}
.mbnc-cmp.up{color:#0B6E3A;font-weight:700}
.mbnc-cmp.down{color:#9A4A00;font-weight:700}
.mbnc-prog{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted,#5C617C)}
.mbnc-prog i{flex:1;height:8px;border-radius:999px;background:#EEEAFB;overflow:hidden;min-width:60px}
.mbnc-prog em{display:block;height:100%;background:var(--vio,#5A4BD6)}
.mbnc-prog b{color:var(--navy-text,#1B2A4A)}
.mbnc-act{margin:0;font-size:13px;color:var(--navy-text,#1B2A4A)}
.mbnc-tl .mbnc-b{display:flex;gap:8px;flex-wrap:wrap}
.mbnc-tl .btn,.mbnc-sec .btn{min-height:44px}
.mbnc-sc{border-style:dashed}
.mbnc-sc .btn[disabled]{opacity:1;color:#5C617C;border-color:#C9C7D9;cursor:not-allowed}
@media (max-width:420px){.mbnc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}