@charset "utf-8";

.app{display:flex;min-height:100vh}

.sidebar{position:sticky;top:0;flex:none;display:flex;flex-direction:column;width:var(--side-w);height:100vh;padding:24px 16px 16px;background:var(--side-bg,var(--surface));border-right:1px solid var(--line);color:var(--text-2);overflow-y:auto}
.sidebar-top{display:flex;align-items:center;justify-content:space-between;padding:0 8px}
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-mark{width:36px;height:36px;flex:none;color:var(--role)}
.brand-name{font-family:var(--font-head);font-size:16px;font-weight:700;letter-spacing:0;color:var(--text);white-space:nowrap}
.brand-name em{margin-left:4px;color:var(--role)}
.role-tag{align-self:flex-start;margin:22px 8px 14px;padding:3px 10px;border:1px solid var(--role);border-radius:3px;background:var(--surface);color:var(--role);font-size:13px;font-weight:700}

.gnb ul{display:flex;flex-direction:column;gap:4px}
.gnb a{position:relative;display:flex;align-items:center;gap:13px;height:52px;padding:0 16px;border-radius:var(--radius);color:var(--text-2);font-size:16px;font-weight:500;transition:background-color .15s,color .15s}
.gnb a .ico{width:24px;height:24px;color:#8A94A6}
.gnb a:hover{background:rgba(255,255,255,.7);color:var(--text)}
.gnb a.is-active{background:var(--surface);color:var(--role);font-weight:700}
.gnb a.is-active .ico{color:var(--role)}
.gnb a.is-active::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;background:var(--role)}
.gnb .count{display:grid;place-items:center;min-width:26px;height:26px;margin-left:auto;padding:0 8px;border-radius:999px;background:var(--red);color:#fff;font-size:13px;font-weight:700}
.gnb-sep{height:1px;margin:12px 12px;background:var(--line-2)}
.sidebar{scrollbar-width:none}
.sidebar::-webkit-scrollbar{display:none}
.gnb-acc-btn{position:relative;display:flex;align-items:center;gap:13px;width:100%;height:52px;padding:0 16px;border-radius:var(--radius);color:var(--text-2);font-size:16px;font-weight:500;text-align:left;transition:background-color .15s,color .15s}
.gnb-acc-btn .ico{width:24px;height:24px;color:#8A94A6}
.gnb-acc-btn:hover{background:rgba(255,255,255,.7);color:var(--text)}
.gnb-acc-btn .count{display:grid;place-items:center;min-width:24px;height:24px;margin-left:auto;padding:0 7px;border-radius:999px;background:var(--red);color:#fff;font-size:12px;font-weight:700}
.gnb-acc-btn .arr{width:18px;height:18px;margin-left:auto;stroke-width:2.2;transition:transform .2s}
.gnb-acc-btn .count + .arr{margin-left:8px}
.gnb-acc.is-open > .gnb-acc-btn .arr{transform:rotate(180deg)}
.gnb-acc.is-current > .gnb-acc-btn{color:var(--role);font-weight:700}
.gnb-acc.is-current > .gnb-acc-btn > .ico:first-child{color:var(--role)}
.gnb-acc.is-open > .gnb-acc-btn .count{display:none}
.gnb-acc.is-open > .gnb-acc-btn .count + .arr{margin-left:auto}
.gnb .gnb-sub{display:none;padding:2px 0 8px}
.gnb .gnb-acc.is-open > .gnb-sub{display:flex}
.gnb .gnb-sub a{height:44px;padding-left:53px;font-size:15px}
.gnb .gnb-sub a .ico{display:none}
.gnb .gnb-sub a .count{min-width:22px;height:22px;padding:0 7px;font-size:12px}

.side-user{display:flex;align-items:center;gap:12px;margin-top:auto;padding:16px 6px 2px;border-top:1px solid var(--line-2)}
.side-user-info{display:flex;flex:1;flex-direction:column;min-width:0}
.side-user-info strong{font-size:16px;color:var(--text)}
.side-user-info span{font-size:14px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar .icon-btn{color:var(--text-3)}
.sidebar .icon-btn:hover{background:var(--surface);color:var(--text)}
.sidebar .gnb-sep,.side-user{border-color:var(--line)}

.main{display:flex;flex:1;flex-direction:column;min-width:0}

.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:20px;height:var(--top-h);padding:0 32px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand--bar{display:none}
.top-title{display:flex;align-items:baseline;gap:14px;min-width:0}
.top-title h1{font-family:var(--font-head);font-size:23px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.top-title span{font-size:15px;font-weight:500;color:var(--text-3);white-space:nowrap}
.top-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.top-search{position:relative;width:320px}
.top-search .ico{position:absolute;left:16px;top:50%;width:22px;height:22px;color:var(--text-3);transform:translateY(-50%)}
.top-search input{width:100%;height:48px;padding:0 16px 0 48px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2);font-size:16px}
.top-search input::placeholder{color:var(--text-3)}
.top-search input:focus{outline:0;border-color:var(--role);background:var(--surface)}
.icon-btn{position:relative;display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:var(--radius);color:var(--text-2);transition:background-color .15s,color .15s}
.icon-btn .ico{width:26px;height:26px}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.topbar .icon-btn{border:1px solid var(--line)}
.icon-btn.has-dot::after{content:"";position:absolute;top:9px;right:10px;width:10px;height:10px;border:2px solid var(--surface);border-radius:50%;background:var(--red)}
.search-btn,.drawer-close,.dim{display:none}

.container{width:100%;max-width:1680px;padding:20px 32px 48px}
.footer{padding:0 32px 28px;color:var(--text-3);font-size:14px}
.tabbar{display:none}

@media (min-width:1024px) and (max-width:1279px){
	.sidebar{width:92px;padding-inline:14px}
	.sidebar-top{justify-content:center;padding:0}
	.brand-name,.role-tag,.gnb a span,.side-user-info,.side-user .icon-btn{display:none}
	.gnb{margin-top:26px}
	.gnb a{justify-content:center;padding:0}
	.gnb .count{position:absolute;top:10px;right:12px;min-width:10px;height:10px;padding:0;font-size:0}
	.gnb-acc-btn{display:none}
	.gnb .gnb-acc > .gnb-sub,.gnb .gnb-acc.is-open > .gnb-sub{display:flex;padding:0}
	.gnb .gnb-sub a{height:48px;padding:0}
	.gnb .gnb-sub a .ico{display:block}
	.gnb .gnb-sub a .count{min-width:10px;height:10px;padding:0}
	.gnb-acc{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
	.gnb-sep{margin-inline:6px}
	.side-user{justify-content:center;padding-inline:0}
	.topbar{padding-inline:24px}
	.top-search{width:260px}
	.container{padding-inline:24px}
	.footer{padding-inline:24px}
}

@media (max-width:1023px){
	.sidebar{position:fixed;left:0;top:0;bottom:0;z-index:100;width:min(310px,86vw);height:100%;transform:translateX(-100%);transition:transform .25s ease}
	.drawer-open .sidebar{transform:none}
	.drawer-close{display:grid}
	.dim{position:fixed;inset:0;z-index:90;display:block;background:rgba(15,23,42,.5);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
	.drawer-open .dim{opacity:1;visibility:visible}
	.drawer-open{overflow:hidden}

	.topbar{height:64px;gap:4px;padding:0 10px 0 20px}
	.brand--bar{display:inline-flex}
	.brand--bar .brand-mark{width:32px;height:32px}
	.top-title,.top-search{display:none}
	.search-btn{display:grid}
	.top-actions{gap:2px}
	.topbar .icon-btn{border:0}

	.container{padding:16px 20px calc(var(--tab-h) + 24px + env(safe-area-inset-bottom))}
	.footer{display:none}

	.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--line)}
	.tabbar a,.tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#8A93A2;font-size:13px;font-weight:600}
	.tabbar .ico{width:28px;height:28px}
	.tabbar .is-active{color:var(--role)}
	.tabbar .is-active::before{content:"";position:absolute;top:0;left:50%;width:36px;height:3px;border-radius:0 0 3px 3px;background:var(--role);transform:translateX(-50%)}
	.tabbar .is-active .ico{stroke-width:2.4}
	.tabbar .dot-badge{position:absolute;top:10px;left:calc(50% + 8px);width:10px;height:10px;border:2px solid var(--surface);border-radius:50%;background:var(--red)}
}

@media (max-width:767px){
	.topbar{padding-left:16px}
	.container{padding:12px 12px calc(var(--tab-h) + 16px + env(safe-area-inset-bottom))}
}