/* right-panel.css — 우패널 전용 CSS (v=20260428j) */
/* 역할: 우패널 layout 단일 책임. index.html 인라인 / regional-teams.css 중복 제거 완료 */
/* 복원 기준: 0535a3c360 원본 정신 — sticky/flex column 없이 자연 흐름 */
/* [v=20260427k] 빈 공간 제거 + 오늘잔소리 DOM순서 뒤집기(헤더하단) 대응 CSS */
/* [v=20260427l] 토글 방향 수정: 오늘잔소리=위로(transform-origin:bottom), rtTeamSendBar=아래로(transform-origin:top) */
/* [v=20260427m] 근본수정: panel-right grid layout 전환 — flex 빈공간 잡아먹기 영구 제거 */
/* [v=20260427q] 임무4+5: jansoriTodaySlot 44px 고정 + jt-body absolute 위로 펼침 */
/* [v=20260427r] 비율복원: 26%/64%/10% + 오늘잔소리 슬롯하단부착 + 두헤더 마진1px 부속품 */
/* [v=20260427s] 통합정리: index.html 인라인 #jansoriWidgetSlot 흡수 + jt-header margin:0 + gap:0 + overflow:visible */
/* [v=20260427y] 근본수정: jansoriWidgetSlot flex column — rtTeamSendBar 영구 확보 + FOUC 강화 */
/* [v=20260428b] 근본수정2: rtTeamSendBar를 jansoriWidgetSlot 밖으로 이동 대응
                 jansoriWidgetSlot = right-slot-jansori 안 flex:1 child (44px 제외 나머지)
                 rtTeamSendBar = right-slot-jansori 직접 자식 (flex:0 0 44px)
                 FOUC visibility:hidden이 rtTeamSendBar에 영향 없음 */

/* ─── [v=20260427r] PC: panel-right grid layout — 26% / 64% / 10% ────────────
   grid-template-rows: 26% 64% 10%
     row1 (26%): jansoriTodaySlot — 헤더가 슬롯 하단(잔소리 위젯 위)에 부착
                 jt-body는 absolute로 헤더 위쪽 방향으로 오버레이
     row2 (64%): right-slot-jansori — 잔소리 위젯 + rtTeamSendBar(하단부속품)
     row3 (10%): minibot — 비율 그대로 (min-height 강제 없음)
   ─────────────────────────────────────────────────────────────────────────── */
/* ─── [v=20260427s] PC: panel-right grid layout — 26% / 64% / 10% ─────────────
   운영자 명세 (26 64 10):
     row1 (26%): jansoriTodaySlot — 헤더가 슬롯 하단(flex-end) margin/padding 0 부착
     row2 (64%): right-slot-jansori — 잔소리 위젯 + rtTeamSendBar(margin:1px 부속품)
     row3 (10%): minibot 슬롯
   gap:0 — 슬롯 간 빈 공간 없음 (운영자: "gap 없음")
   ──────────────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
    .panel-right {
        display: grid !important;
        grid-template-rows: 26% 64% 10% !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        height: 100% !important;
        overflow: visible !important;   /* ★ [v=20260428d] rt-tsb-body top:100% 아래 펼침 허용 */
        gap: 0 !important;              /* 슬롯 간 빈 공간 없음 */
    }

    /* grid row 1 (26%): 오늘의 잔소리 슬롯 — flex-end로 헤더가 슬롯 하단에 위치 */
    .panel-right > #jansoriTodaySlot {
        grid-row: 1 !important;
        grid-column: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;   /* 헤더가 슬롯 하단 = 잔소리 위젯 위에 밀착 */
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow: visible !important;   /* absolute jt-body 오버레이 허용 */
        position: relative !important;  /* jt-body absolute 기준점 */
        z-index: 10 !important;
        margin: 0 !important;           /* [v=20260427s] gap:0과 함께 슬롯 간 빈 공간 없음 */
        padding: 0 !important;
    }

    /* grid row 2 (64%): 잔소리 위젯+rtTeamSendBar 슬롯 */
    /* [v=20260427x] flex column + justify-content:flex-start — 위쪽 정렬 (빈 공간 아래로) */
    .panel-right > .right-slot-jansori {
        grid-row: 2 !important;
        grid-column: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;  /* ★ 위쪽 정렬: zs-widget+bar가 슬롯 상단에 붙음 */
        align-items: stretch !important;
        min-height: 0 !important;
        overflow: visible !important;           /* ★ [v=20260428d] rt-tsb-body absolute 아래 펼침 허용 */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* grid row 3 (10%): 미니심미봇 — 비율 그대로, min-height 강제 없음 */
    .panel-right > .right-slot:last-child {
        grid-row: 3 !important;
        grid-column: 1 !important;
        min-height: 0 !important;
        height: 100% !important;
        flex: none !important;
        overflow: visible !important;
        border-top: 1px solid var(--sumi-border, #e8dfd1) !important;
        background: var(--sumi-card, #fff) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ─── [v=20260428c] PC: jansoriWidgetSlot — Shadow DOM 통합 후 단순화 ──────────
       변경: rtTeamSendBar Shadow DOM 내부로 이동 → right-slot-jansori 직접 자식 제거
       jansoriWidgetSlot: flex:1 1 0 (right-slot-jansori 전체 채움)
       zs-widget: Shadow DOM 안에 rtTeamSendBar 포함 — :host { display: flex; flex-direction: column }
       rtTeamSendBar CSS: jansori-widget.js TEMPLATE <style> 블록 담당
       ─────────────────────────────────────────────────────────────────────── */
    /* ─── [v=20260428d] jansoriWidgetSlot — rt-tsb-body absolute 아래 펼침 대응 ──
       overflow: visible → rt-tsb-body (position:absolute;top:100%) 클리핑 방지
       잔소리 위젯 본체 크기: #big flex:1 + rtTeamSendBar flex:0 0 44px 고정으로 보장
       ─────────────────────────────────────────────────────────────────────── */
    /* [v=20260428j] 운영자 지시: 자연 콘텐츠 높이로 복원
       row2(64%) 강제 채움 금지. 위젯은 모닝/이브닝 루틴 박스 자연 크기만.
       rtTeamSendBar 헤더는 Shadow DOM 콘텐츠 바닥에 자연 흐름으로 밀착. */
    #jansoriWidgetSlot {
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 auto !important;       /* ★ 자연 높이 — 64% 강제 채움 X */
        min-height: 0 !important;
        overflow: visible !important;
    }
    #jansoriWidgetSlot zs-widget {
        flex: 0 0 auto !important;       /* ★ Shadow DOM 자연 높이 */
        min-height: 0 !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

/* ─── CSS 변수 (모바일 auto override용 유지) ──────────────────────────────── */
:root {
    --rp-slot-minibot-flex: auto;   /* grid 전환 후 미사용 — 모바일 호환 유지 */
}

/* ─── [v=20260427s] jt-header 인라인 layout 클래스 + jansori-progress 마진 (partials 인라인 style 제거 대응) ─ */
/* jansori-progress: margin-top:2px;margin-bottom:4px → CSS로 이전 */
.jt-body .jansori-progress {
    margin-top: 2px;
    margin-bottom: 4px;
}
.jt-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
}
.jt-header-left {
    display: flex;
    align-items: center;
    gap: 4px;
}
.jt-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}
.jt-stats {
    font-size: 10px;
    color: var(--sumi-ink-light, #9b8e84);
    font-weight: 400;
}
/* [v=20260502n] 임무2: 오늘의 잔소리 헤더 — 클릭 안내 hint */
.jt-hint {
    font-size: 10px;
    color: #b0a090;
    font-weight: 400;
    margin-left: 3px;
    white-space: nowrap;
}

/* ─── [1/4] 오늘의 잔소리 헤더 슬롯 — auto 높이 (sandwich 상단) ────────────── */
#jansoriTodaySlot {
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid var(--sumi-border, #e8dfd1);
}

/* ─── [1/4] 오늘의 잔소리 헤더 시각 스타일 ──────────── */
/* [v=20260428l] 운영자 지시: 외곽선만 피치 — 배경 투명 */
#jansoriTodaySlot .jt-header {
    background: transparent;
    border: 1.5px solid #ffd0b3;        /* ★ 피치 외곽선 (rtBar와 통일) */
    min-height: 44px;
    box-sizing: border-box;
    padding: 8px 12px;
    border-radius: 4px;
}

/* ─── [2/4] 잔소리 위젯 슬롯 — grid row 2 내부 (PC: flex column, 모바일: block) ── */
/* [v=20260427x] PC flex는 @media (min-width:769px) 블록에서 override */
.right-slot-jansori {
    display: block;               /* 모바일 기본: block 자연 흐름 */
    overflow: visible;
}

/* ─── 오늘의 잔소리 PC + 모바일 공통 collapse/expand ─────────────────────────
   PC에서도 default collapsed. 클릭 시 슬라이드 다운 애니메이션.
   ─────────────────────────────────────────────────────────────────────────── */

/* PC에서 chevron 표시 — ID specificity로 @media(min-width:769px) .jt-chevron{display:none} override */
#jansoriTodayChevron {
    display: inline-flex !important;
    align-items: center;
    transition: transform 0.3s ease;
}
/* PC에서도 header cursor pointer 허용 */
#jansoriTodaySlot .jt-header {
    cursor: pointer !important;
}

/* ─── [2/4 내부] jansoriWidgetSlot + zs-widget 자연 흐름 ─────────────────────
   [v=20260427s] index.html 인라인 #jansoriWidgetSlot 속성 흡수 — 단일 책임
   [v=20260427y] 근본수정: jansoriWidgetSlot = flex column 컨테이너
                 zs-widget(flex:1 1 0 + min-height:0) — 가용 공간만
                 rtTeamSendBar(flex:0 0 44px) — 하단 44px 항상 확보
   ─────────────────────────────────────────────────────────────────────────── */
#jansoriWidgetSlot {
    display: block;               /* 모바일 기본: block 자연 흐름 */
    position: relative;            /* [v=20260427s] index.html 인라인에서 흡수 */
    border-radius: 0;
    overflow: visible;
    background: #fdfcfa;
    border-top: 1px solid var(--sumi-border, #e8dfd1);
    border-bottom: 1px solid var(--sumi-border, #e8dfd1);
    -webkit-overflow-scrolling: touch;
    margin: 0;
    flex: 1 1 auto;               /* right-slot-jansori flex child: 남은 높이 채움 */
}
#jansoriWidgetSlot zs-widget {
    display: block;
    width: 100%;
    min-height: 480px;            /* [v=20260427k] 모바일 기본: 모닝/이브닝/사용법 모두 보이도록 */
}

/* ─── [3/4] rtTeamSendBar — [v=20260428c] Shadow DOM 내부로 이동 완료 ────────
   rtTeamSendBar CSS는 jansori-widget.js TEMPLATE <style> 블록 담당
   외부 CSS (#rtTeamSendBar) 제거 — Shadow DOM 격리로 외부 CSS 접근 불가
   ─────────────────────────────────────────────────────────────────────────── */
/* collapsed chevron 회전 — PC+모바일 공통 */
#jansoriTodaySlot.jt-collapsed #jansoriTodayChevron {
    transform: rotate(-90deg);
}

/* jt-body 슬라이드 애니메이션 — PC+모바일 공통 */
/* [v=20260427l] transform-origin:bottom → 본문이 헤더 쪽(하단)에서 위쪽으로 자람 */
.jt-body {
    overflow: hidden;
    transform-origin: bottom;                /* 하단 고정점 → 모바일에서 헤더 아래 펼침 */
    transform: scaleY(1);
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease 0.05s,
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#jansoriTodaySlot.jt-collapsed .jt-body {
    max-height: 0 !important;
    opacity: 0 !important;
    transform: scaleY(0) !important;
    visibility: hidden;
    pointer-events: none;
}
#jansoriTodaySlot:not(.jt-collapsed) .jt-body {
    visibility: visible;
    pointer-events: auto;
}

/* ─── [v=20260427r] PC: jt-body absolute 오버레이 — 헤더 위쪽으로 펼침 ──────
   jansoriTodaySlot = 26% grid row. 헤더가 슬롯 하단(flex-end)에 위치.
   jt-body는 absolute로 헤더 위쪽으로 떠서 row1 공간 + 그 위를 덮음.
   잔소리 위젯 grid row 2는 전혀 영향 받지 않음.
   transform-origin: bottom → 헤더(하단)에서 위쪽으로 자라남.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
    #jansoriTodaySlot .jt-body {
        position: absolute !important;
        bottom: 44px !important;            /* 헤더(44px) 바로 위 — 위쪽으로 펼침 */
        left: 0 !important;
        right: 0 !important;
        z-index: 50 !important;
        background: var(--sumi-card, #fff) !important;
        box-shadow: 0 -6px 16px rgba(0,0,0,0.12) !important;   /* 위쪽 그림자 */
        max-height: 400px !important;
        overflow-y: auto !important;
        transform-origin: bottom !important;   /* 헤더(하단 고정점)에서 위쪽으로 자람 */
    }
    #jansoriTodaySlot.jt-collapsed .jt-body {
        max-height: 0 !important;
        overflow: hidden !important;
    }
    #jansoriTodaySlot:not(.jt-collapsed) .jt-body {
        max-height: 400px !important;
        overflow-y: auto !important;
    }
}

/* ─── rtTeamSendBar 본문 — [v=20260428c] Shadow DOM 내부로 이관 완료 ──────────
   (#rtTeamSendBar .rt-tsb-body 제거 — Shadow DOM 격리로 외부 CSS 무효)
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── FOUC 방지 4중 방어 (v=20260428b 수정) ─────────────────────────────────
   [v=20260428b] 수정: 부모(jansoriWidgetSlot) 전체 숨김 → zs-widget만 숨김
   이유: jansoriWidgetSlot visibility:hidden이 rtTeamSendBar(이제 밖으로 이동)에는
         영향 없지만, 구조 변경 원칙 유지 + 혹시 남은 의존 코드 방어용으로
         zs-widget 직접 숨김으로 정밀화

   방어 1: zs-widget 직접 가리기 — data-zs-loading="1" 동안 (부모 전체 숨김 폐기)
   방어 2: zs-widget:not(:defined) display:none (혹시나 defined 전 주입 시 대비)
   방어 3: 로딩 중 zs-widget 공간 차지 방지
   방어 4: ready 후 fade-in (부드러운 등장)
   ─────────────────────────────────────────────────────────────────────────── */

/* 방어 1: zs-widget 직접 가리기 — data-zs-loading="1" 동안 (부모 전체 숨김 대신) */
#jansoriWidgetSlot[data-zs-loading="1"] > zs-widget {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* 방어 4: ready 마커 제거 후 zs-widget 부드럽게 등장 */
#jansoriWidgetSlot:not([data-zs-loading]) > zs-widget {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease-in;
}

/* 방어 2: :not(:defined) 대비 (defined 전 주입 시) — visibility 대신 display:none */
zs-widget:not(:defined) {
    display: none !important;
}
/* 방어 3: 로딩 중 zs-widget 공간 차지 방지 (v=20260428b: 직접 zs-widget 타겟) */
#jansoriWidgetSlot[data-zs-loading="1"] > zs-widget {
    min-height: 0 !important;
    height: 0 !important;
}

/* 우패널 로드 중 빈 상태 표시 */
.panel-right:empty::after {
    content: '';
    display: block;
}

/* ─── 모바일 전용 자연 스크롤 레이아웃 (v=20260427f) ─────────────────────────
   원칙: sticky 없이 콘텐츠가 위→아래 자연 쌓임. 스크롤로 모든 콘텐츠 접근.
   body.rpm-show .panel-right 모달 모드는 index.html이 별도 처리 — 충돌 없음.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* 1. CSS 변수: 모바일에서 minibot도 auto */
    :root {
        --rp-slot-minibot-flex: auto;
    }

    /* 2. panel-right: 자연 스크롤 컨테이너 — PC overflow:hidden 해제 */
    .panel-right {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        padding-bottom: env(safe-area-inset-bottom, 12px);
    }

    /* 3. 오늘잔소리 슬롯: 자연 흐름 (sticky 없음) */
    #jansoriTodaySlot {
        flex: 0 0 auto !important;
        overflow: visible !important;
        max-height: none !important;
    }
    #jansoriTodaySlot:not(.jt-collapsed) {
        flex: 0 0 auto !important;
    }
    /* 오늘잔소리 펼침 시 body max-height 제한 해제 */
    #jansoriTodaySlot:not(.jt-collapsed) .jt-body {
        max-height: none !important;
        overflow: visible !important;
    }

    /* 4. 잔소리 위젯 슬롯: 모바일 → 가용 공간 차지 (regional-teams.css 중복 제거) */
    .right-slot-jansori {
        flex: 1 1 auto !important;
    }
    /* [v=20260427s] #jansoriWidgetSlot 모바일 스타일 — index.html @media 인라인에서 이전 */
    #jansoriWidgetSlot {
        min-height: 280px;
        margin: 8px 0;
        border-radius: 8px;
    }
    #jansoriWidgetSlot zs-widget {
        min-height: 280px;
    }

    /* 5. rtTeamSendBar: Shadow DOM 내부 처리 (v=20260428c 이관 완료) */

    /* 6. 미니심미봇 슬롯: 자연 흐름 */
    .panel-right .right-slot:last-child {
        flex: 0 0 auto !important;
        overflow: visible !important;
    }
}

/* ─── [v=20260427k] 장식품 헤더 디자인 — 잔소리 위젯 위/아래 붙임 ──────────
   오늘잔소리 헤더: 아래쪽 장식품 (하단 둥근 모서리 — DOM순서 변경으로 헤더가 하단)
   rtTeamSendBar idle 헤더: 아래쪽 장식품 (하단 둥근 모서리)
   hover 시 살짝 이동해 클릭 가능함을 암시
   ─────────────────────────────────────────────────────────────────────────── */

/* ─── [v=20260427r] 두 헤더 부속품 디자인 — 마진 1px 최소화 ──────────────────
   운영자 의도: "마진1패딩1로 최소화해서 붙여" — 잔소리 위젯과 한 덩어리처럼
   외부 margin = 1px (부속품 밀착), 내부 padding은 가독성 위해 8px 유지
   ─────────────────────────────────────────────────────────────────────────── */

/* 오늘잔소리 헤더 — 아래쪽 부속품 (슬롯 하단, 잔소리 위젯 위에 밀착) */
/* [v=20260427s] margin: 1px → 0 (운영자 명세: 오늘잔소리는 margin/padding 0) */
#jansoriTodaySlot .jt-header {
    border-radius: 0 0 6px 6px;
    margin: 0 !important;
    box-shadow: 0 3px 6px rgba(184,166,232,0.15);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
#jansoriTodaySlot .jt-header:hover {
    box-shadow: 0 5px 10px rgba(184,166,232,0.25);
    transform: translateY(1px);
}

/* rtTeamSendBar 헤더 CSS — [v=20260428c] Shadow DOM 내부로 이관 완료
   (#rtTeamSendBar:not(.expanded) .rt-tsb-header 등 제거 — Shadow DOM 격리)   */

/* 잔소리 위젯과 헤더 사이 시각 분리 최소화 (부속품 밀착) */
/* [v=20260427t] 외부 #jansoriTodaySlot 마진 관리 */
#jansoriTodaySlot {
    margin-bottom: 0;
}

/* ─── 슬라이드 애니메이션 ────────────────────────────────────────────────────
   오늘잔소리 펼침 시: 헤더 위로 살짝 이동
   rtTeamSendBar expanded 시: 헤더 아래로 살짝 이동
   ─────────────────────────────────────────────────────────────────────────── */

/* 오늘잔소리 펼침 헤더 — 아래로 살짝 이동 (헤더가 하단에 위치하므로) */
/* [v=20260427k] translateY(-2px) → translateY(2px) */
#jansoriTodaySlot:not(.jt-collapsed) .jt-header {
    transform: translateY(2px);
    box-shadow: 0 6px 14px rgba(184,166,232,0.32);
}

/* rtTeamSendBar expanded 헤더 애니메이션 — [v=20260428c] Shadow DOM 내부 처리 */