/* =========================================================================
   layout.css
   역할: 페이지 뼈대 레이아웃 — 헤더 · GNB · LNB · 콘텐츠 영역 · 반응형(구조)
   컴포넌트 자체의 생김새(버튼/폼/테이블 등)는 component.css 참조
   ========================================================================= */

/* ===================== 헤더 ===================== */
.header{
  height:60px;
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
  display:flex;
  align-items:center;
  padding:0 20px;
  gap:36px;
  position:relative;
  z-index:30;
}
.header__logo{
  display:flex;
  flex-direction:column;
  line-height:1.15;
  white-space:nowrap;
  text-decoration:none;
}
.header__logo b{font-size:16px; color:var(--c-text-strong); letter-spacing:.2px;}
.header__logo span{font-size:10px; color:var(--c-neutral-strong);}

.gnb{display:flex; gap:4px; flex:1; overflow-x:auto;}
.gnb__item{
  background:none; border:none;
  padding:20px 14px;
  font-size:15px;
  color:var(--c-neutral-strong);
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.gnb__item:hover{color:var(--c-text-strong);}
.gnb__item.active{color:var(--c-primary); border-bottom-color:var(--c-primary); font-weight:700;}

.header__right{display:flex; align-items:center; gap:16px; white-space:nowrap;}
.icon-btn{
  width:32px;height:32px; border-radius:50%;
  border:none; background:var(--c-bg-header);
  display:flex; align-items:center; justify-content:center;
  color:var(--c-neutral-strong);
}
.icon-btn:hover{background:var(--c-bg-disabled);}
.user-menu{position:relative;}
.user-menu__trigger{
  background:none; border:none; font-size:14px; color:var(--c-text-strong);
  display:flex; align-items:center; gap:4px;
}
.user-menu__trigger b{font-weight:700;}
.user-menu__trigger:after{content:"▾"; font-size:10px; color:var(--c-neutral-strong); margin-left:2px;}
.user-dropdown{
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius);
  box-shadow:var(--shadow-modal);
  width:200px; padding:14px; display:none; z-index:40;
}
.user-dropdown.open{display:block;}
.user-dropdown .name{font-weight:700; font-size:15px; color:var(--c-text-strong);}
.user-dropdown .role{font-size:12px; color:var(--c-neutral-strong); margin:2px 0 12px;}
.user-dropdown button{
  width:100%; padding:8px; border-radius:var(--radius);
  border:1px solid var(--c-primary); background:var(--c-surface); color:var(--c-primary); font-weight:600;
}
.role-select{
  border:1px solid var(--c-border); border-radius:var(--radius);
  padding:7px 10px; background:var(--c-surface); min-width:150px;
}
.logout-link{
  background:none;border:none; color:var(--c-neutral-strong); font-size:13px;
  display:flex; align-items:center; gap:4px;
}
.logout-link:hover{color:var(--c-text-strong);}

/* ===================== 레이아웃 뼈대 ===================== */
.app-body{display:flex; align-items:flex-start; min-height:calc(100vh - 60px);}

/* ===================== LNB ===================== */
.lnb{
  width:240px; flex:none;
  background:var(--c-surface);
  border-right:1px solid var(--c-border);
  min-height:calc(100vh - 60px);
  position:relative;
  transition:width .2s ease, margin-left .2s ease;
}
.lnb.js-toggled{width:0; overflow:hidden; border-right:none;}

.lnb__tabs{display:flex; border-bottom:1px solid var(--c-border);}
.lnb__tab{
  flex:1; padding:14px 0; text-align:center; background:none; border:none;
  font-size:13px; color:var(--c-neutral-strong); display:flex; align-items:center; justify-content:center; gap:6px;
  border-bottom:2px solid transparent;
}
.lnb__tab.active{color:var(--c-text-strong); font-weight:700; border-bottom-color:var(--c-primary);}

.lnb__panel{display:none; max-height:calc(100vh - 114px); overflow-y:auto; padding-bottom:60px;}
.lnb__panel.active{display:block;}

.lnb__section-title{
  text-align:center; font-weight:700; font-size:15px; color:var(--c-text-strong);
  padding:16px 0; border-bottom:1px solid var(--c-border); margin-bottom:4px;
}

.lnb__group-title{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:none; border:none; text-align:left;
  padding:11px 20px; font-size:14px; color:var(--c-text-strong);
}
.lnb__group-title:hover{background:var(--c-bg-muted);}
.lnb__group-title .chev{color:var(--c-neutral-strong); font-size:13px; width:14px; text-align:center;}
.lnb__children{display:none; padding:2px 0 6px;}
.lnb__group.open > .lnb__children{display:block;}
.lnb__group.open > .lnb__group-title .chev{color:var(--c-primary);}

.lnb__child{
  width:100%; text-align:left; background:none; border:none;
  padding:9px 20px 9px 34px; font-size:13px; color:var(--c-text); display:flex; align-items:center; justify-content:space-between;
}
.lnb__child:hover{background:var(--c-bg-muted);}
.lnb__child.active{color:var(--c-primary); font-weight:700; background:#EAF3FC;}
.lnb__child .chev{font-size:11px; color:var(--c-neutral-strong);}
.lnb__grandchildren{display:none; padding-bottom:4px;}
.lnb__child-wrap.open > .lnb__grandchildren{display:block;}
.lnb__grandchild{
  width:100%; text-align:left; background:none; border:none;
  padding:8px 20px 8px 50px; font-size:12.5px; color:var(--c-neutral-strong);
}
.lnb__grandchild:hover{background:var(--c-bg-muted); color:var(--c-text-strong);}

.lnb__fav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 20px; font-size:13px; border-bottom:1px solid var(--c-bg-header);
}
.fav-remove{background:none;border:none;color:var(--c-neutral-strong); font-size:14px; margin-right:8px;}
.fav-move{display:flex; flex-direction:column; gap:2px;}
.fav-move button{background:none;border:none;color:var(--c-neutral-strong); font-size:9px; line-height:1;}
.fav-move button:disabled{opacity:.25; cursor:default;}
.lnb__empty{padding:24px 20px; font-size:12.5px; color:var(--c-placeholder); text-align:center;}

.lnb-toggle{
  position:fixed; top:76px; left:240px;
  width:22px; padding:12px 0;
  background:var(--c-primary); color:#fff; border:none; border-radius:0 4px 4px 0;
  writing-mode:vertical-rl; letter-spacing:2px; font-size:11px;
  display:flex; align-items:center; gap:6px; justify-content:center;
  z-index:26; transition:left .2s ease;
}
.lnb-toggle.js-toggled{left:0;}
.lnb-toggle .arrow{writing-mode:horizontal-tb;}

/* ===================== 콘텐츠 ===================== */
.content{flex:1; min-width:0; padding:24px 28px 60px;}
.breadcrumb{font-size:12.5px; color:var(--c-neutral-strong); margin-bottom:8px;}
.breadcrumb b{color:var(--c-text);}

.page-title-row{display:flex; align-items:center; gap:10px; margin-bottom:20px;}
.page-title-row h1{font-size:22px; font-weight:700; color:var(--c-text-strong); margin:0;}
.fav-star{
  background:none; border:none; font-size:20px; color:#D8DCE2; line-height:1; padding:0;
}
.fav-star.active{color:#F5A623;}

/* ===================== 반응형 (구조) ===================== */
@media (max-width:860px){
  .header{gap:10px; padding:0 12px;}
  .header__logo span{display:none;}
  .role-select{min-width:0; width:110px; padding:7px 6px;}
  .gnb{display:none;}
  .lnb{
    position:fixed; top:60px; left:0; height:calc(100vh - 60px); z-index:25;
    width:0; overflow:hidden; border-right:none;
  }
  .lnb.js-toggled{width:240px; overflow-y:auto; border-right:1px solid var(--c-border); box-shadow:2px 0 8px rgba(0,0,0,.15);}
  .lnb-toggle{left:0;}
  .lnb-toggle.js-toggled{left:240px;}
}