:root{
  --itda-custom-primary:#2563eb;--itda-custom-accent:#4f46e5;--itda-custom-bg:#f6f8fc;
  --itda-custom-surface:#fff;--itda-custom-text:#0f172a;--itda-custom-muted:#64748b;--itda-custom-border:#dbe3ef;
  --itda-custom-radius:12px;--itda-custom-panel-radius:14px;--itda-custom-font-size:14px;--itda-custom-max-width:1520px;
  --itda-custom-button-height:38px;--itda-custom-button-radius:10px;--itda-custom-button-font:13px;
  --itda-custom-button-weight:700;--itda-custom-line-height:1.55;--itda-custom-sidebar-width:220px;--itda-custom-nav-size:14px;--itda-custom-nav-weight:700;--itda-custom-nav-gap:6px;
  --itda-custom-header-height:68px;--itda-custom-logo-width:86px;--itda-custom-shadow:0 8px 24px rgba(15,23,42,.10);
}
html{font-size:var(--itda-custom-font-size)}
body{background:var(--itda-custom-bg)!important;color:var(--itda-custom-text);line-height:var(--itda-custom-line-height);font-family:var(--itda-custom-font-family,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif)}
.app-header{min-height:var(--itda-custom-header-height)}
.topbar{min-height:var(--itda-custom-header-height)}
.original-itda-brand img{width:var(--itda-custom-logo-width)!important;max-width:none}
.main-nav{gap:var(--itda-custom-nav-gap)}
.main-nav .nav-item,.sub-nav .sub-item{font-size:var(--itda-custom-nav-size);font-weight:var(--itda-custom-nav-weight)}
.panel,.modal,.quick-card,.event-card{border-radius:var(--itda-custom-panel-radius)!important}
.panel,.modal{box-shadow:var(--itda-custom-shadow)}
.container,.app-main,.main-wrap{max-width:var(--itda-custom-max-width)}
body.itda-nav-center .main-nav{justify-content:center;flex:1}body.itda-nav-right .main-nav{justify-content:flex-end;flex:1}
body.itda-header-not-sticky .app-header{position:static!important}
body.itda-active-underline .main-nav .nav-item.active{background:transparent!important;border-radius:0!important;box-shadow:inset 0 -3px var(--itda-custom-primary)}
body.itda-active-text .main-nav .nav-item.active{background:transparent!important;color:var(--itda-custom-primary)!important}
body.itda-active-pill .main-nav .nav-item.active{background:color-mix(in srgb,var(--itda-custom-primary) 12%,white)!important;color:var(--itda-custom-primary)!important}
body.itda-button-pill .btn{border-radius:999px!important}body.itda-button-square .btn{border-radius:2px!important}
body.itda-hide-logo .original-itda-brand{display:none!important}
body.itda-hide-search .workspace-search-quick-btn{display:none!important}
body.itda-hide-library .header-member-actions>.workspace-quick-btn:not(.workspace-search-quick-btn){display:none!important}
body.itda-hide-notifications .attention-bell{display:none!important}
#view-home.itda-home-custom{display:flex;flex-direction:column;gap:var(--itda-home-gap,20px)}
#view-home.itda-home-custom>[data-itda-home-block]{margin-top:0!important;margin-bottom:0!important}
#view-home.itda-home-custom #eventGridServer{grid-template-columns:repeat(var(--itda-event-columns,4),minmax(0,1fr))!important}
@media(max-width:1100px){#view-home.itda-home-custom #eventGridServer{grid-template-columns:repeat(min(var(--itda-event-columns,4),3),minmax(0,1fr))!important}}
@media(max-width:760px){#view-home.itda-home-custom #eventGridServer{grid-template-columns:1fr!important}}

@media(min-width:901px){
  /* 사이드바 모드에서는 기존 전역 width/max-width 규칙보다 우선하도록 html 클래스까지 사용한다. */
  html.itda-menu-left-root body .app-header,
  html.itda-menu-right-root body .app-header{
    position:fixed!important;top:0!important;bottom:0!important;
    width:var(--itda-custom-sidebar-width)!important;max-width:var(--itda-custom-sidebar-width)!important;
    height:100vh!important;min-height:100vh!important;z-index:60!important;
    background:var(--itda-custom-surface)!important;overflow-x:hidden!important;overflow-y:auto!important;
    border-bottom:0!important;box-shadow:var(--itda-custom-shadow)!important;
    box-sizing:border-box!important;
  }
  html.itda-menu-left-root body .app-header{left:0!important;right:auto!important;border-right:1px solid var(--itda-custom-border)!important}
  html.itda-menu-right-root body .app-header{right:0!important;left:auto!important;border-left:1px solid var(--itda-custom-border)!important}

  html.itda-menu-left-root body .topbar,
  html.itda-menu-right-root body .topbar{
    width:100%!important;max-width:none!important;min-width:0!important;
    min-height:100vh!important;height:auto!important;margin:0!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    padding:18px 14px!important;gap:12px!important;box-sizing:border-box!important;
  }
  html.itda-menu-left-root body .original-itda-brand,
  html.itda-menu-right-root body .original-itda-brand{
    width:auto!important;align-self:center!important;justify-content:center!important;margin:2px auto 10px!important;
  }
  html.itda-menu-left-root body .main-nav,
  html.itda-menu-right-root body .main-nav{
    display:flex!important;flex:0 0 auto!important;flex-direction:column!important;align-items:stretch!important;
    justify-content:flex-start!important;width:100%!important;min-width:0!important;gap:4px!important;
  }
  html.itda-menu-left-root body .main-nav .nav-item,
  html.itda-menu-right-root body .main-nav .nav-item{
    width:100%!important;min-width:0!important;height:auto!important;min-height:42px!important;
    justify-content:flex-start!important;padding:10px 12px!important;border-radius:10px!important;box-sizing:border-box!important;
  }
  /* 상단 메뉴에서 쓰던 active 밑줄 가상요소가 사이드바 전체를 가로지르지 않게 한다. */
  html.itda-menu-left-root body .main-nav .nav-item:after,
  html.itda-menu-right-root body .main-nav .nav-item:after{display:none!important}
  html.itda-menu-left-root body .main-nav .nav-item.active,
  html.itda-menu-right-root body .main-nav .nav-item.active{
    color:var(--itda-custom-primary)!important;background:color-mix(in srgb,var(--itda-custom-primary) 9%,white)!important;
  }

  /* 좌/우 메뉴에서는 하위메뉴를 현재 상위메뉴 바로 아래에 트리처럼 붙인다. */
  html.itda-menu-left-root body .main-nav>.itda-sidebar-subbar,
  html.itda-menu-right-root body .main-nav>.itda-sidebar-subbar{
    position:static!important;inset:auto!important;width:100%!important;height:auto!important;min-height:0!important;
    margin:2px 0 6px!important;padding:0!important;opacity:1!important;pointer-events:auto!important;
    overflow:visible!important;border:0!important;background:transparent!important;box-shadow:none!important;
  }
  html.itda-menu-left-root body .itda-sidebar-subbar .subbar-inner,
  html.itda-menu-right-root body .itda-sidebar-subbar .subbar-inner{
    width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;
    margin:0!important;padding:0!important;display:block!important;
  }
  html.itda-menu-left-root body .itda-sidebar-subbar .sub-nav,
  html.itda-menu-right-root body .itda-sidebar-subbar .sub-nav{
    display:flex!important;flex-direction:column!important;width:100%!important;gap:2px!important;
    padding:0 0 0 14px!important;box-sizing:border-box!important;
    border-left:2px solid color-mix(in srgb,var(--itda-custom-primary) 15%,var(--itda-custom-border))!important;
    margin-left:13px!important;
  }
  html.itda-menu-left-root body .itda-sidebar-subbar .sub-item,
  html.itda-menu-right-root body .itda-sidebar-subbar .sub-item{
    width:calc(100% - 13px)!important;min-height:34px!important;display:flex!important;align-items:center!important;
    justify-content:flex-start!important;padding:7px 10px!important;border-radius:8px!important;box-sizing:border-box!important;
    color:var(--itda-custom-muted)!important;font-size:calc(var(--itda-custom-nav-size) - 1px)!important;
  }
  html.itda-menu-left-root body .itda-sidebar-subbar .sub-item:hover,
  html.itda-menu-right-root body .itda-sidebar-subbar .sub-item:hover{
    color:var(--itda-custom-text)!important;background:color-mix(in srgb,var(--itda-custom-primary) 5%,transparent)!important;
  }
  html.itda-menu-left-root body .itda-sidebar-subbar .sub-item.active,
  html.itda-menu-right-root body .itda-sidebar-subbar .sub-item.active{
    color:var(--itda-custom-primary)!important;background:color-mix(in srgb,var(--itda-custom-primary) 8%,white)!important;font-weight:800!important;
  }

  html.itda-menu-left-root body .header-actions,
  html.itda-menu-right-root body .header-actions{margin-top:auto!important;width:100%!important;min-width:0!important;padding-top:12px!important}
  html.itda-menu-left-root body .header-member-actions,
  html.itda-menu-right-root body .header-member-actions{
    width:100%!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;align-items:center!important;justify-content:stretch!important;
  }
  html.itda-menu-left-root body .header-member-actions .profile-btn,
  html.itda-menu-right-root body .header-member-actions .profile-btn{
    grid-column:1/-1!important;width:100%!important;justify-content:flex-start!important;
  }
  html.itda-menu-left-root body .header-member-actions .desktop-password-change,
  html.itda-menu-right-root body .header-member-actions .desktop-password-change,
  html.itda-menu-left-root body .header-member-actions .desktop-logout,
  html.itda-menu-right-root body .header-member-actions .desktop-logout{
    grid-column:span 3!important;width:100%!important;justify-content:center!important;
  }

  /* 본문은 사이드바 폭을 제외한 나머지 화면을 정확히 사용한다. */
  html.itda-menu-left-root body .page-shell{
    width:calc(100% - var(--itda-custom-sidebar-width))!important;max-width:none!important;
    margin-left:var(--itda-custom-sidebar-width)!important;margin-right:0!important;
    box-sizing:border-box!important;
  }
  html.itda-menu-right-root body .page-shell{
    width:calc(100% - var(--itda-custom-sidebar-width))!important;max-width:none!important;
    margin-left:0!important;margin-right:var(--itda-custom-sidebar-width)!important;
    box-sizing:border-box!important;
  }

  /* 데스크톱 사이드바에서는 모바일 전용 UI가 끼어들지 않는다. */
  html.itda-menu-left-root body .mobile-menu,
  html.itda-menu-right-root body .mobile-menu,
  html.itda-menu-left-root body .mobile-bottom-nav,
  html.itda-menu-right-root body .mobile-bottom-nav{display:none!important}
}

/* 안전 모드에서는 저장된 사이드바/숨김 설정을 무시하고 원래 ITDA 레이아웃으로 접근한다. */
html.itda-custom-safe-mode body{padding:0!important}

.itda-stats-custom-flow{display:grid;gap:var(--itda-stats-gap,18px)}
.itda-stats-custom-flow>.stats-grid,.itda-stats-custom-flow>.panel,.itda-stats-custom-flow>.page-actions{margin:0!important}
.itda-stats-custom-flow>.panel{width:100%;box-sizing:border-box}
@media(max-width:760px){.itda-stats-custom-flow>.stats-grid{grid-template-columns:1fr!important}}
/* Custom card widths collapse to a single column on small screens. */
.itda-sized-card{grid-column:span var(--itda-card-span,1)}
@media(max-width:900px){.itda-sized-card{grid-column:span 1}}

/* 2026-09-29 Bible dashboard: compact book progress */
.bible-book-progress-card .panel-body{padding-top:14px}
.book-progress-summary{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.book-progress-summary span{display:inline-flex;align-items:center;gap:3px;padding:6px 9px;border:1px solid #e2e8f0;border-radius:999px;background:#f8fafc;color:#64748b;font-size:11px;font-weight:700}
.book-progress-summary b{color:#4338ca;font-size:12px}
.book-progress-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.book-progress-filter{border:1px solid #e2e8f0;background:#fff;color:#64748b;border-radius:999px;padding:6px 10px;font:inherit;font-size:11px;font-weight:800;cursor:pointer;transition:.16s ease}
.book-progress-filter:hover{border-color:#c7d2fe;color:#4338ca;background:#f8faff}
.book-progress-filter.active{border-color:#c7d2fe;background:#eef2ff;color:#4338ca;box-shadow:0 1px 2px rgba(79,70,229,.08)}
.book-progress-scroll{max-height:445px;overflow-y:auto;padding-right:5px;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
.book-progress-scroll::-webkit-scrollbar{width:6px}
.book-progress-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}
.book-progress-scroll .book-row{min-height:24px}
.book-progress-scroll .book-name{display:flex;align-items:center;gap:5px;min-width:0}
.book-progress-scroll .book-name small{font-size:9px;color:#6366f1;background:#eef2ff;border-radius:999px;padding:2px 5px;white-space:nowrap}
.book-progress-scroll .book-row.unread .book-bar i{background:#cbd5e1}
.book-progress-scroll .book-row.unread>b{color:#94a3b8}
.book-progress-scroll .book-row.complete{opacity:.72}
@media(max-width:700px){
  .book-progress-summary{gap:5px}
  .book-progress-filters{gap:5px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none}
  .book-progress-filters::-webkit-scrollbar{display:none}
  .book-progress-filter{flex:0 0 auto}
  .book-progress-scroll{max-height:390px}
}