/* v0.6.19 Clean responsive shell
   單一選單按鈕 + 單一側欄狀態來源。避免多層 CSS 互蓋造成跳位。 */

#dp-root .dp-c-top_member-house{--dp-main: 100;}

#dp-root{
  --dp-menu-size:52px;
  --dp-tablet-rail:64px;
  --dp-mobile-drawer:min(86vw,300px);
}

#dp-root .dp-mobile-menu-float{
  position:fixed !important;
  left:0 !important;
  top:0 !important;
  width:var(--dp-menu-size) !important;
  min-width:var(--dp-menu-size) !important;
  max-width:var(--dp-menu-size) !important;
  height:var(--dp-menu-size) !important;
  min-height:var(--dp-menu-size) !important;
  max-height:var(--dp-menu-size) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--dp-text) !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
  z-index:9800 !important;
}
#dp-root .dp-mobile-menu-float svg{
  width:32px !important;
  height:32px !important;
  display:block !important;
}
#dp-root .dp-side-toggle{
  display:none !important;
}
#dp-root .dp-side,
#dp-root .dp-shell,
#dp-root .dp-head,
#dp-root .dp-mask{
  transition:transform .26s ease, margin-left .26s ease, left .26s ease, opacity .2s ease, visibility .2s ease;
}
body.dp-sidebar-no-anim #dp-root .dp-side,
body.dp-sidebar-no-anim #dp-root .dp-shell,
body.dp-sidebar-no-anim #dp-root .dp-head,
body.dp-sidebar-no-anim #dp-root .dp-mask{
  transition:none !important;
}

/* 桌機：固定上方列，側欄推版面；收合時側欄整條滑出，保留同一顆左上選單。 */
@media(min-width:1281px){
  #dp-root{--dp-menu-size:52px;}
  #dp-root .dp-shell{
    margin-left:var(--dp-left) !important;
    padding-top:52px !important;
  }
  body.dp-sidebar-collapsed #dp-root .dp-shell{
    margin-left:0 !important;
  }
  #dp-root .dp-side{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:var(--dp-left) !important;
    transform:translate3d(0,0,0) !important;
    z-index:9400 !important;
    overflow:hidden !important;
  }
  body.dp-sidebar-collapsed #dp-root .dp-side{
    transform:translate3d(calc(var(--dp-left) * -1),0,0) !important;
    box-shadow:none !important;
  }
  #dp-root .dp-side-top{
    height:52px !important;
    min-height:52px !important;
    padding:0 12px 0 64px !important;
    display:flex !important;
    align-items:center !important;
    border-bottom:0px solid var(--dp-line) !important;
  }
  #dp-root .dp-side-body{
    height:calc(100vh - 52px) !important;
    overflow-y:auto !important;
  }
  #dp-root .dp-head{
    position:fixed !important;
    top:0 !important;
    left:var(--dp-left) !important;
    right:0 !important;
    width:auto !important;
    height:52px !important;
    min-height:52px !important;
    padding:0 18px !important;
    z-index:9300 !important;
    background:var(--dp-panel) !important;
    border-bottom:0px solid var(--dp-line) !important;
  }
  body.dp-sidebar-collapsed #dp-root .dp-head{
    left:0 !important;
    padding-left:64px !important;
  }
  #dp-root .dp-head-center,
  #dp-root .dp-head-right{
    height:52px !important;
    min-height:52px !important;
    display:flex !important;
    align-items:center !important;
  }
  #dp-root .dp-mask{display:none !important;}
  #dp-root .dp-top{margin-top:0 !important;}
}

/* 平板：overlay panel + 左側 SVG rail，不推擠 main area。 */
@media(min-width:901px) and (max-width:1280px){
  #dp-root{
    --dp-menu-size:44px;
    --dp-mobile-drawer:min(84vw,300px);
    --dp-tablet-rail:64px;
  }
  #dp-root .dp-shell{
    margin-left:0 !important;
    padding-top:44px !important;
    width:100% !important;
  }
  #dp-root .dp-head{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    width:100% !important;
    height:44px !important;
    min-height:44px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    padding:0 12px 0 var(--dp-tablet-rail) !important;
    z-index:9300 !important;
    background:var(--dp-panel) !important;
    border-bottom:0px solid var(--dp-line) !important;
  }
  #dp-root .dp-head-left{display:block !important;}
  #dp-root .dp-head-center,
  #dp-root .dp-head-right{
    height:44px !important;
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
  }
  #dp-root .dp-side{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:var(--dp-mobile-drawer) !important;
    max-width:300px !important;
    height:100vh !important;
    transform:translate3d(calc((var(--dp-mobile-drawer) - var(--dp-tablet-rail)) * -1),0,0) !important;
    z-index:9400 !important;
    overflow:hidden !important;
    will-change:transform !important;
  }
  body.dp-sidebar-open #dp-root .dp-side{
    transform:translate3d(0,0,0) !important;
    box-shadow:18px 0 36px rgba(0,0,0,.22) !important;
  }
  #dp-root .dp-side-top{
    height:44px !important;
    min-height:44px !important;
    padding:0 12px 0 var(--dp-tablet-rail) !important;
    display:flex !important;
    align-items:center !important;
    border-bottom:1px solid var(--dp-line) !important;
  }
  #dp-root .dp-side-title,
  #dp-root .dp-side-body{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  body.dp-sidebar-open #dp-root .dp-side-title,
  body.dp-sidebar-open #dp-root .dp-side-body{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  #dp-root .dp-side-body{
    height:calc(100vh - 44px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding:14px !important;
  }
  #dp-root .dp-top,
  #dp-root .dp-layout,
  #dp-root .dp-foot{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  #dp-root .dp-layout{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(220px,min(30vw,var(--dp-right))) !important;
    gap:10px !important;
    align-items:start !important;
  }
  #dp-root .dp-main,
  #dp-root .dp-right{width:auto !important;min-height:auto !important;}
  #dp-root .dp-mask{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    background:rgba(0,0,0,.28) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:9200 !important;
  }
  body.dp-sidebar-open #dp-root .dp-mask{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
}

/* 手機：全抽屜，不保留 rail。 */
@media(max-width:900px){
  #dp-root{
    --dp-menu-size:48px;
    --dp-mobile-drawer:min(88vw,300px);
  }
  #dp-root .dp-shell{
    margin-left:0 !important;
    padding-top:48px !important;
    width:100% !important;
  }
  #dp-root .dp-head{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    width:100% !important;
    height:48px !important;
    min-height:48px !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    padding:0 10px 0 56px !important;
    z-index:9300 !important;
    background:var(--dp-panel) !important;
    border-bottom:0px solid var(--dp-line) !important;
  }
  #dp-root .dp-head-left{display:block !important;}
  #dp-root .dp-side{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:var(--dp-mobile-drawer) !important;
    max-width:300px !important;
    height:100vh !important;
    transform:translate3d(-100%,0,0) !important;
    z-index:9400 !important;
    overflow:hidden !important;
    will-change:transform !important;
  }
  body.dp-sidebar-open #dp-root .dp-side{
    transform:translate3d(0,0,0) !important;
    box-shadow:18px 0 36px rgba(0,0,0,.22) !important;
  }
  #dp-root .dp-side-top{
    height:48px !important;
    min-height:48px !important;
    padding:0 12px 0 56px !important;
    display:flex !important;
    align-items:center !important;
    border-bottom:1px solid var(--dp-line) !important;
  }
  #dp-root .dp-side-body{
    height:calc(100vh - 48px) !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding:14px !important;
  }
  #dp-root .dp-top,
  #dp-root .dp-layout,
  #dp-root .dp-foot{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  #dp-root .dp-layout{display:block !important;}
  #dp-root .dp-main,
  #dp-root .dp-right{width:100% !important;min-height:auto !important;}
  #dp-root .dp-mask{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    background:rgba(0,0,0,.28) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:9200 !important;
  }
  body.dp-sidebar-open #dp-root .dp-mask{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  body.dp-sidebar-open{overflow:hidden !important;}
}

/* 五裝置顯示控制 */
@media(min-width:1600px){#dp-root .dp-hide-xxl{display:none !important;}}
@media(min-width:1200px) and (max-width:1599px){#dp-root .dp-hide-xl{display:none !important;}}
@media(min-width:992px) and (max-width:1199px){#dp-root .dp-hide-lg{display:none !important;}}
@media(min-width:768px) and (max-width:991px){#dp-root .dp-hide-md{display:none !important;}}
@media(max-width:767px){#dp-root .dp-hide-sm{display:none !important;}}

/* v0.6.20 Right sidebar empty-state fix */
#dp-root .dp-layout.no-right{
  grid-template-columns:minmax(0,1fr) !important;
  max-width:var(--dp-main) !important;
}
#dp-root .dp-layout.no-right .dp-main{
  width:100% !important;
}
@media(min-width:901px) and (max-width:1280px){
  #dp-root .dp-layout.no-right{
    display:block !important;
    width:100% !important;
    max-width:none !important;
  }
}


/* v0.6.22 RIGHT SIDEBAR tablet render restore
   平板寬度維持 main + right 兩欄，避免 RIGHT SIDEBAR 被堆到 MAIN AREA 下方看不到。 */
@media(min-width:768px) and (max-width:900px){
  #dp-root .dp-top,
  #dp-root .dp-layout,
  #dp-root .dp-foot{
    width:calc(100% - 24px) !important;
    max-width:none !important;
    margin-left:12px !important;
    margin-right:12px !important;
  }
  #dp-root .dp-layout{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(210px,30vw) !important;
    gap:14px !important;
    align-items:start !important;
  }
  #dp-root .dp-main,
  #dp-root .dp-right{
    width:auto !important;
    min-height:auto !important;
  }
  #dp-root .dp-right{
    display:block;
  }
}

#dp-root .dp-right > .dp-empty{
  min-height:220px;
}


/* v0.6.23 Tablet rail offset fix
   平板保留左側 SVG rail 時，內容區一起右移，避免輪播/切換按鈕被 rail 遮住。 */
@media(min-width:768px) and (max-width:1280px){
  #dp-root{
    --dp-tablet-rail:64px;
    --dp-menu-size:44px;
  }
  #dp-root .dp-mobile-menu-float{
    left:10px !important;
    top:0 !important;
    width:var(--dp-menu-size) !important;
    height:var(--dp-menu-size) !important;
    z-index:9800 !important;
  }
  #dp-root .dp-shell{
    margin-left:0 !important;
    padding-left:var(--dp-tablet-rail) !important;
    padding-top:44px !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  #dp-root .dp-head{
    left:0 !important;
    right:0 !important;
    top:0 !important;
    width:100% !important;
    height:44px !important;
    min-height:44px !important;
    padding-left:var(--dp-tablet-rail) !important;
    z-index:9300 !important;
  }
  #dp-root .dp-side{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    width:var(--dp-mobile-drawer) !important;
    max-width:300px !important;
    height:100vh !important;
    transform:translate3d(calc((var(--dp-mobile-drawer) - var(--dp-tablet-rail)) * -1),0,0) !important;
    z-index:9400 !important;
    overflow:hidden !important;
    will-change:transform !important;
  }
  body.dp-sidebar-open #dp-root .dp-side{
    transform:translate3d(0,0,0) !important;
    box-shadow:18px 0 36px rgba(0,0,0,.22) !important;
  }
  #dp-root .dp-side-top{
    height:44px !important;
    min-height:44px !important;
    padding:0 12px 0 var(--dp-tablet-rail) !important;
  }
  #dp-root .dp-side-title,
  #dp-root .dp-side-body{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  body.dp-sidebar-open #dp-root .dp-side-title,
  body.dp-sidebar-open #dp-root .dp-side-body{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  #dp-root .dp-top,
  #dp-root .dp-layout,
  #dp-root .dp-foot{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

@media(max-width:767px){
  #dp-root .dp-shell{
    padding-left:0 !important;
  }
}


/* v0.6.25 Header right fixed alignment
   平板 / 窄桌機時右側會員與亮暗按鈕固定在 header 右上，不再被中間內容擠到下一排。 */
@media(min-width:768px) and (max-width:1280px){
  #dp-root .dp-head{
    position:fixed !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:44px !important;
    align-items:center !important;
    overflow:hidden !important;
    padding-right:88px !important;
    box-sizing:border-box !important;
  }
  #dp-root .dp-head-left{
    display:block !important;
  }
  #dp-root .dp-head-center{
    grid-column:1 / 2 !important;
    grid-row:1 !important;
    min-width:0 !important;
    max-width:100% !important;
    height:44px !important;
    min-height:44px !important;
    overflow:hidden !important;
    align-items:center !important;
  }
  #dp-root .dp-head-right{
    position:absolute !important;
    right:12px !important;
    top:0 !important;
    bottom:auto !important;
    width:auto !important;
    max-width:76px !important;
    height:44px !important;
    min-height:44px !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:4px !important;
    overflow:visible !important;
    z-index:9350 !important;
  }
  #dp-root .dp-head-right > *,
  #dp-root .dp-head-right > .dp-block,
  #dp-root .dp-head-right > .dp-btn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    flex:0 0 34px !important;
    margin:0 !important;
    padding:0 !important;
    align-self:center !important;
  }
  #dp-root .dp-head-right svg{
    width:30px !important;
    height:30px !important;
  }
}

/* v0.6.27 Mobile header right sticky fix
   手機寬度下，右上會員按鈕與亮暗切換固定在 header 右側，不再被 center / logo 撐開往下掉。 */
@media(max-width:900px){
  #dp-root .dp-head{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:48px !important;
    align-items:center !important;
    overflow:hidden !important;
    padding:0 94px 0 56px !important;
  }
  #dp-root .dp-head-left{
    grid-column:1 / 2 !important;
    grid-row:1 !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
  #dp-root .dp-head-center{
    grid-column:1 / 2 !important;
    grid-row:1 !important;
    min-width:0 !important;
    max-width:100% !important;
    height:48px !important;
    min-height:48px !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
  }
  #dp-root .dp-head-center img,
  #dp-root .dp-head-left img{
    max-width:132px !important;
    max-height:36px !important;
    object-fit:contain !important;
  }
  #dp-root .dp-head-right{
    position:absolute !important;
    right:10px !important;
    top:0 !important;
    bottom:auto !important;
    width:auto !important;
    max-width:78px !important;
    height:48px !important;
    min-height:48px !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:4px !important;
    overflow:visible !important;
    z-index:9350 !important;
  }
  #dp-root .dp-head-right > *,
  #dp-root .dp-head-right > .dp-block,
  #dp-root .dp-head-right > .dp-btn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    flex:0 0 34px !important;
    margin:0 !important;
    padding:0 !important;
    align-self:center !important;
  }
  #dp-root .dp-head-right svg{
    width:24px !important;
    height:24px !important;
  }
}

/* v0.6.27 Member dropdown visible fix
   右上會員下拉選單是 header 內部子層，v0.6.26 手機 header overflow:hidden 會把選單裁掉。
   這裡只放開 header / right 的 overflow，不改版面定位。 */
@media(max-width:900px){
  #dp-root .dp-head{
    overflow:visible !important;
  }
  #dp-root .dp-head-right{
    overflow:visible !important;
    z-index:100000 !important;
  }
  #dp-root .dp-head-right .dp-member-hub[data-dp-member-hub]{
    position:relative !important;
    z-index:100001 !important;
    overflow:visible !important;
  }
  #dp-root .dp-head-right .dp-member-dropdown[data-dp-member-dropdown]{
    position:absolute !important;
    top:calc(100% + 12px) !important;
    right:0 !important;
    left:auto !important;
    width:min(276px, calc(100vw - 24px)) !important;
    max-height:calc(100vh - 76px) !important;
    overflow:auto !important;
    z-index:100002 !important;
  }
}


/* v0.8.6 Layout width scope binding
   頁面範本寬度只限制 MAIN AREA + RIGHT SIDEBAR 的 .dp-layout。
   TOP / FOOT / 其他區塊不吃此寬度，可維持 100% 滿寬。 */
@media(min-width:901px){
  #dp-root .dp-layout{
    width:min(100%, var(--dp-layout-width)) !important;
    max-width:var(--dp-layout-width) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  #dp-root .dp-top,
  #dp-root .dp-foot{
    width:100% !important;
    max-width:none !important;
  }
  #dp-root .dp-layout.has-right{
    grid-template-columns:minmax(0, max(0px, calc(var(--dp-layout-width) - var(--dp-right) - var(--dp-gap)))) minmax(0,var(--dp-right)) !important;
    gap:var(--dp-gap) !important;
  }
  #dp-root .dp-right{
    align-self:var(--dp-right-align, start) !important;
    position:relative !important;
    top:auto !important;
    min-height:0 !important;
  }
  #dp-root .dp-right-sticky-wrap{
    position:var(--dp-right-position, relative) !important;
    top:var(--dp-right-sticky-top, 24px) !important;
    width:100% !important;
  }
}


/* v0.8.3 RIGHT SIDEBAR Sticky mode */
@media(max-width:900px){
  #dp-root .dp-right,
  #dp-root .dp-right-sticky-wrap{
    position:relative !important;
    top:auto !important;
  }
}


/* v0.8.4 RIGHT SIDEBAR real sticky fix
   Sticky 要套在右欄內容包裹層，避免 grid 欄位本身與 min-height 影響吸附。
   同時搭配 core-layout 將 dp-shell / dp-root 的 overflow-x 改為 clip，避免 hidden 形成 sticky scroll container。 */
@media(min-width:901px){
  #dp-root .dp-shell,
  #dp-root{
    overflow-x:clip !important;
  }
  #dp-root .dp-right{
    align-self:var(--dp-right-align, start) !important;
    position:relative !important;
    top:auto !important;
  }
  #dp-root .dp-right-sticky-wrap{
    position:var(--dp-right-position, relative) !important;
    top:var(--dp-right-sticky-top, 24px) !important;
  }
}


/* v0.8.5 RIGHT SIDEBAR sticky parent-height fix
   Sticky 需要父層高度大於右欄內容；sticky/stretch 模式時由 --dp-right-align=stretch 讓 .dp-right 撐滿 grid row。
   body overflow-x 改為 clip，避免 hidden 讓 sticky 被錯誤限制。 */
@media(min-width:901px){
  body{overflow-x:clip !important;}
  #dp-root .dp-layout.has-right{
    align-items:stretch !important;
  }
  #dp-root .dp-right{
    align-self:var(--dp-right-align, start) !important;
  }
  #dp-root .dp-right-sticky-wrap{
    position:var(--dp-right-position, relative) !important;
    top:var(--dp-right-sticky-top, 24px) !important;
    width:100% !important;
  }
}