/* ============================================
 * app_tab_header.css — App WebView (embed mode) per-tab top header.
 *
 * Figma 2026-More node 3005:3072 spec:
 *   - height: ~56px (safe-area-top 위)
 *   - background: white, bottom border 1px #e0e3e2
 *   - title: center-ish, ~17-18px bold
 *   - bell: right, 22px stroke icon
 *   - teal color (#02aed5) for Lesson Journal / Advice
 * ============================================ */

.app-tab-header {
    /* Sticky positioning — content 가 scroll 해도 header 는 화면 상단에 고정. */
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;
    border-bottom: 1px solid #e0e3e2;
    padding-top: env(safe-area-inset-top, 0px);
    width: 100%;
    display: block;
}

.app-tab-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0 16px;
    position: relative;
}

.app-tab-header-title {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Centered horizontally — bell can sit at right via the right group */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
/* "More" 탭의 사용자 이름은 left-aligned (Figma) */
.app-tab-header[data-tab="more"] .app-tab-header-title {
    left: 16px;
    transform: translate(0, -50%);
}

/* Wide horizontal banner logo (logo.png 516x126) — height fixed, width auto-scale. */
.app-tab-logo-banner {
    height: 24px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    display: block;
}

.app-tab-title-text {
    font-size: 17px;
    font-weight: 700;
    color: #151515;
    line-height: 22px;
}
.app-tab-title-teal {
    color: #02aed5;
}
.app-tab-title-name {
    font-size: 18px;
    font-weight: 700;
    color: #02aed5;
}

.app-tab-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.app-tab-bell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #3f4342;
    position: relative;
    text-decoration: none;
    border-radius: 50%;
    transition: background .15s ease;
}
.app-tab-bell:hover {
    background: #f5f7f7;
}
.app-tab-bell .cnt-notf-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #e74c3c;
    color: #fff;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    padding: 0 4px;
    font-weight: 600;
}

/* Notification dropdown — body 직계 sibling 으로 위치 (header 의 외부).
 * fixed positioning. App embed mode 에서는 viewport 전체 너비. */
.app-tab-notf-dropdown {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 56px);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - 56px);
    overflow-y: auto;
    background: #fff;
    border-top: 1px solid #e0e3e2;
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    z-index: 200;
    display: none;
}
.app-tab-notf-dropdown.open {
    display: block;
}
.app-tab-notf-dropdown .cnt-notification-header {
    padding: 14px 16px;
    font-weight: 700;
    border-bottom: 1px solid #e0e3e2;
}
.app-tab-notf-dropdown .cnt-notification-empty {
    padding: 30px 20px;
    text-align: center;
    color: #878b8a;
    font-size: 13px;
}
.app-tab-notf-dropdown .cnt-notf-showmore {
    display: block;
    padding: 12px 16px;
    text-align: center;
    color: #02aed5;
    font-size: 13px;
    text-decoration: none;
    border-top: 1px solid #e0e3e2;
}

/* Meeting tab — 페이지 컨텐츠 (.met-page) 가 max-width 480px 로 centered.
 * app-tab-header 는 full-width 로 유지 (다른 탭과 일관). */
body.is-clobo-app .met-page {
    /* 기존 max-width 유지 */
}

/* App embed: hero 와 app-tab-header 사이 간격 조정 (Meeting/Connect 의 hero 가 바로 아래에 옴) */
body.is-clobo-app .met-hero {
    padding-top: 16px;
}