/* ============================================================
   templates/layouts/main_v1/shell.css — 메인(홈) 조립형 틀 + 색상 테마 a~e (2026-09-25)
   기본 편집 규약(.mod/.mod-edit/.editbar 등)은 sub_plain_v1/shell.css를 먼저 로드해서 재사용하고,
   여기선 홈 전용 헤더/푸터/테마만 덮어씀. 테마 색은 LIB/ModuleHelper.php f_mainThemeSwatch()와 짝.
   ============================================================ */
body.main-shell{
  --primary:#1f3760; --accent:#5b8fd6; --bg:#f4f2ed; --sky:#dbe8f8; --navy:#1f3760; --blue:#5b8fd6;
  --hero-grad:linear-gradient(135deg,var(--primary),var(--accent));
  background:var(--bg);
}
body.main-shell[data-theme="b"]{--primary:#24523a;--accent:#7fb08a;--bg:#f3f5ef;--sky:#dcebdf;--navy:#24523a;--blue:#7fb08a}
body.main-shell[data-theme="c"]{--primary:#a5502f;--accent:#e0a37f;--bg:#f8f1ea;--sky:#f3dfd2;--navy:#a5502f;--blue:#e0a37f}
body.main-shell[data-theme="d"]{--primary:#2b2e35;--accent:#c9a45c;--bg:#f2f2f0;--sky:#e6e2d6;--navy:#2b2e35;--blue:#c9a45c}
body.main-shell[data-theme="e"]{--primary:#1f6fb2;--accent:#7cc4ee;--bg:#f1f7fc;--sky:#d8ecf9;--navy:#1f6fb2;--blue:#7cc4ee}

/* 헤더 — a/c/e: 좌측 교회명+메뉴, b/d: 가운데 교회명 아래 메뉴 */
.main-head{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.main-head .wrap{display:flex;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px}
.main-head .brand{font-weight:900;font-size:20px;letter-spacing:-.5px;color:var(--primary);white-space:nowrap}
.main-nav{display:flex;gap:4px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.main-nav::-webkit-scrollbar{display:none}
.main-nav a{padding:7px 13px;border-radius:999px;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
.main-nav a:hover{background:var(--sky);color:var(--primary)}
.main-head .auth-slot{font-size:13px;white-space:nowrap}
body.main-shell[data-theme="b"] .main-head .wrap,
body.main-shell[data-theme="d"] .main-head .wrap{flex-wrap:wrap;justify-content:center;gap:6px}
body.main-shell[data-theme="b"] .main-nav,
body.main-shell[data-theme="d"] .main-nav{order:3;flex:0 0 100%;justify-content:center}
body.main-shell[data-theme="b"] .main-head .auth-slot,
body.main-shell[data-theme="d"] .main-head .auth-slot{position:absolute;right:20px;top:14px}
body.main-shell[data-theme="d"] .main-head{background:var(--primary)}
body.main-shell[data-theme="d"] .main-head .brand{color:#fff}
body.main-shell[data-theme="d"] .main-nav a{color:#e9e6dc}
body.main-shell[data-theme="d"] .main-nav a:hover{background:rgba(255,255,255,.14);color:#fff}
body.main-shell[data-theme="d"] .main-head .auth-slot,
body.main-shell[data-theme="d"] .main-head .auth-slot a{color:#e9e6dc}

.main-content{padding-top:24px;padding-bottom:20px}
.module-wrap{margin-bottom:0}
.mod-manage .mod-drag{cursor:grab;background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:15px;color:#555;user-select:none}
.mod-manage .mod-drag:active{cursor:grabbing}
/* ▲▼ 한 칸씩 이동(2026-10-17) — 긴 모듈을 끌어서 옮기기 어려워서 */
.mod-manage .mod-move{background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:13px;color:#1f3760;cursor:pointer;font-family:inherit}
.mod-manage .mod-move:hover{background:#eef3fb}
.mod-manage .mod-move:disabled{opacity:.35;cursor:default}
.module-wrap.just-moved{outline:3px solid #5b8fd6;outline-offset:4px;border-radius:12px;transition:outline-color .6s}
.module-wrap.sortable-ghost{opacity:.4}

.main-foot{margin-top:30px;background:#fff;border-top:1px solid var(--line);padding:22px 0;font-size:13px;color:var(--sub);text-align:center}

/* 모듈 색을 테마에 맞춤(모듈 CSS는 기본 네이비 색을 하드코딩하고 있어서 여기서 덮어씀) */
body.main-shell .sc-banner{background-color:var(--primary)}
body.main-shell .sc-banner .slot[style*="linear-gradient"]{background-image:var(--hero-grad) !important}
body.main-shell .sc-banner .cta{color:var(--primary)}
body.main-shell .sc-boardlist-head .more{color:var(--accent)}
body.main-shell .sc-live-count{color:var(--primary)}
body.main-shell .sc-textblock h3,body.main-shell .sc-info h3{color:var(--primary)}

@media(max-width:640px){
  .main-head .wrap{flex-wrap:wrap;gap:6px}
  .main-nav{order:3;flex:0 0 100%}
  body.main-shell[data-theme="b"] .main-head .auth-slot,
  body.main-shell[data-theme="d"] .main-head .auth-slot{position:static}
}

/* 관리자 구성 메뉴(.site-nav.main-nav) — 서브메뉴가 안 잘리게 overflow 해제, 테마 d(어두운 헤더)에서도 서브는 밝게 */
.main-nav.site-nav{overflow:visible;flex:1}
.main-nav.site-nav .sn-top>li>a:hover{background:var(--sky);color:var(--primary)}
body.main-shell .main-nav.site-nav .sn-sub a{color:var(--ink)}
body.main-shell .main-nav.site-nav .sn-sub a:hover{background:var(--sky);color:var(--primary)}
body.main-shell[data-theme="d"] .main-nav.site-nav .sn-top>li>a{color:#e9e6dc}
body.main-shell[data-theme="b"] .main-nav.site-nav .sn-top,body.main-shell[data-theme="d"] .main-nav.site-nav .sn-top{justify-content:center}