/* shared/site-header.css - 모든 사이트 공통 도구 묶음 (shared/site-header.js)
   성도 사이트 = 배경 투명 (사진 위 · 위쪽 바 색을 따른다) / 신학원 · 관리자 = 흰 배경 */

/* 예전 도구는 숨긴다 (기능은 공통 묶음이 그대로 부른다) */
.has-lw-header .topbar-left .lang-switch,
.has-lw-header #topbar-messages,
.has-lw-header #account,
.has-lw-header .navbar-user,
.has-lw-header #lang-switcher,
.has-lw-header #nav-home-btn,
.has-lw-header .net-top-right > .lang-switch,
.has-lw-header #net-user { display: none !important; }

.lwh { display: flex; align-items: center; gap: 6px; font-family: 'Noto Sans KR', system-ui, sans-serif; }
/* 신학원 · 관리자: 넓은 화면(1450px 초과)에서는 위 줄 = 로고(왼쪽) + 도구 묶음(오른쪽), 그 아래 탭 메뉴
   (pastor/css/common.css 가 그 크기에서 로고 1 · 사용자 칸 3 · 메뉴 4 순서를 정한다 - 도구 묶음도 3, 오른쪽 끝으로) */
@media (min-width: 1451px) {
    .navbar-container > .lwh { order: 3; margin-left: auto; }
}
.navbar-container > .lwh { flex-shrink: 0; }
/* 신학원 · 관리자: 메뉴가 ☰ 하나로 접히는 화면(1450px 이하)에서는 ☰ 을 로고 바로 옆에 두고 도구 묶음은 오른쪽 끝으로
   (예전에는 양쪽 정렬 때문에 ☰ 혼자 바 한가운데 떠 있었다, 2026-10-31) */
@media (max-width: 1450px) {
    .navbar-container > .lwh { margin-left: auto; }
    .navbar-container > .nav-toggle { margin-left: 6px; }
}
.lwh-item { position: relative; }
.lwh-btn, .lwh-avatar {
    position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%;
    font: inherit; cursor: pointer; text-decoration: none; transition: background 0.15s, box-shadow 0.15s;
}
.lwh svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lwh-avatar { overflow: hidden; }
.lwh-avatar img, .lwh-me-photo img { width: 100%; height: 100%; object-fit: cover; }
/* 사진이 있으면 뒤 색을 없앤다 (배경 없는 PNG 가 파랗게 보이지 않게) */
.lwh .lwh-avatar.has-photo, .lwh .lwh-me-photo.has-photo { background: transparent !important; border-color: transparent !important; }
.lwh-avatar b, .lwh-me-photo b { font-size: 16px; font-weight: 900; }
.lwh-badge {
    position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; display: grid; place-items: center;
    border-radius: 999px; border: 2px solid #fff; background: #d64545; color: #fff; font-size: 11.5px; font-style: normal; font-weight: 800;
}
.lwh-badge[hidden] { display: none; }
.lwh-lang { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 4px 0 9px; border-radius: 999px; }
.lwh-lang svg { width: 17px; height: 17px; margin-right: 3px; }
.lwh-lang button { min-width: 32px; height: 28px; padding: 0 6px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; color: inherit; opacity: 0.7; }
.lwh-lang button.is-on { opacity: 1; }

/* 흰 배경 (신학원 · 관리자) */
.lwh-white .lwh-btn, .lwh-white .lwh-avatar { border: 1px solid #dee8de; background: #fff; color: #163829; }
.lwh-white .lwh-btn:hover, .lwh-white .lwh-avatar:hover { background: #f1f0e6; }
.lwh-white .lwh-avatar { background: linear-gradient(135deg, #1f4d3a, #4f8a6e); border-color: transparent; color: #fff; }
.lwh-white .lwh-lang { border: 1px solid #dee8de; background: #fff; color: #163829; }
.lwh-white .lwh-lang button.is-on { background: #1f4d3a; color: #fff; }

/* 투명 (성도 사이트) - 위쪽 바의 글자색을 따른다 */
.lwh-clear .lwh-btn, .lwh-clear .lwh-avatar { border: 0; background: transparent; color: inherit; }
.lwh-clear .lwh-btn:hover { background: rgba(127, 127, 127, 0.15); }
.lwh-clear .lwh-avatar { background: #1f4d3a; color: #fff; }
.lwh-clear .lwh-lang { border: 1.5px solid currentColor; background: transparent; color: inherit; }
.lwh-clear .lwh-lang button.is-on { background: #1f4d3a; color: #fff; opacity: 1; }

/* 펼치는 판 (모든 사이트 같은 흰 판) */
.lwh-panel {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 1200; min-width: 240px; max-width: min(92vw, 420px);
    padding: 10px; border-radius: 10px; background: #fff; border: 1px solid #e7eee7; color: #121a17;
    box-shadow: 0 18px 40px -18px rgba(22, 56, 41, 0.55); text-align: left;
}
.lwh-panel[hidden] { display: none; }
/* 사이트바 = 휴대폰 앱 화면처럼: 4칸 고른 격자, 같은 크기 아이콘, 이름은 2줄까지 */
.lwh-sites { width: min(94vw, 380px); padding: 14px 10px 10px; background: linear-gradient(180deg, #fcfaf7, #f9f6ee); }
.lwh-sites .lw-site-row {
    display: grid !important; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
    grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 92px; gap: 6px 2px; justify-items: center;
}
.lwh-sites .lw-site-row .app { width: 100%; max-width: 84px; gap: 6px; align-content: start; font-size: 12.5px; font-weight: 600; color: #344054; }
.lwh-sites .lw-site-row .app-icon {
    width: 54px; height: 54px; border-radius: 10px; font-size: 26px;
    box-shadow: 0 6px 14px -8px rgba(22, 56, 41, 0.55);
}
.lwh-sites .lw-site-row .app-white { border-color: #e4ede4; }
.lwh-sites .lw-site-row .app > span:last-child {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    line-height: 1.25; text-align: center; word-break: keep-all; overflow-wrap: anywhere;
}
.lwh-sites .lw-site-row .app:active .app-icon { transform: scale(0.94); }
.lwh-notices { width: min(92vw, 360px); max-height: min(70vh, 460px); overflow-y: auto; }
.lwh-notices header { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 8px; border-bottom: 1px solid #f8f5ed; }
.lwh-notices header button { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: #1f4d3a; cursor: pointer; }
.lwh-notices ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.lwh-notices li > a, .lwh-notices li > div { display: grid; gap: 2px; padding: 9px 10px; border-radius: 10px; color: inherit; text-decoration: none; font-size: 13.5px; line-height: 1.4; }
.lwh-notices li > a:hover { background: #fcfaf7; }
.lwh-notices li.is-new > a, .lwh-notices li.is-new > div { background: #f1f0e6; font-weight: 700; }
.lwh-notices small { font-size: 12.5px; font-weight: 600; color: #8a8fa3; }
.lwh-empty { margin: 14px 6px; font-size: 13.5px; color: #667085; }
.lwh-account { min-width: 230px; display: grid; gap: 2px; }
.lwh-me { display: flex; align-items: center; gap: 10px; padding: 6px 6px 10px; margin-bottom: 4px; border-bottom: 1px solid #f8f5ed; }
.lwh-me-photo { flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, #1f4d3a, #4f8a6e); color: #fff; }
.lwh-me > span:last-child { display: grid; min-width: 0; }
.lwh-me b { font-size: 15px; color: #0b120f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lwh-me small { font-size: 12.5px; font-weight: 700; color: #1f4d3a; }
.lwh-account > a, .lwh-account > button {
    display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 14px; font-weight: 600;
    color: #121a17; text-align: left; text-decoration: none; cursor: pointer;
}
.lwh-account > a:hover, .lwh-account > button:hover { background: #fcfaf7; }
.lwh-account .is-danger { color: #b42318; }
.lwh-guest { margin: 4px 6px 8px; font-size: 13px; color: #667085; }