/* ══════════════════════════════════════
   조직도 전용 스타일 (style.css 상속)
══════════════════════════════════════ */

/* ── 헤더 재사용 (index.php 와 동일 구조) ── */
.org-body {
    padding-top: var(--header-h-noinner);
    min-height: 100vh;
}

/* ── 페이지 컨테이너 ── */
.org-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 44px 24px 80px;
}

/* ── 페이지 제목 ── */
.org-hero {
    text-align: center;
    margin-bottom: 56px;
}
.org-hero-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--t3);
    margin-bottom: 10px;
}
.org-hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.4rem;
    font-weight: 300;
    color: var(--t1);
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.org-hero-title em {
    font-style: italic;
    color: var(--ac);
}
.org-hero-sub {
    font-size: 0.78rem;
    color: var(--t3);
    letter-spacing: 0.05em;
}

/* ── 섹션 공통 ── */
.org-section {
    margin-bottom: 48px;
}
.org-section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.org-section-label::before,
.org-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bd);
}
.org-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* 배지 색상 per 역할 */
.badge-leader {
    background: linear-gradient(135deg, #f0e6b0, #e8d080);
    color: #7a6010;
    border: 1px solid #d4b84a;
}
.badge-member {
    background: var(--ac-bg);
    color: var(--ac-txt);
    border: 1px solid var(--bd-s);
}
.badge-waiter {
    background: linear-gradient(135deg, rgba(130,200,180,0.18), rgba(100,180,160,0.10));
    color: #2e7a66;
    border: 1px solid rgba(80,160,140,0.3);
}
[data-theme="dark"] .badge-waiter { color: #6dd5b8; border-color: rgba(80,200,170,0.25); }
[data-theme="dark"] .badge-leader { background: linear-gradient(135deg,#3a3010,#2a2008); color: #e8c84a; border-color: #6a5010; }

/* ── 카드 그리드 ── */
.org-grid {
    display: grid;
    gap: 14px;
}
.org-grid-leader { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.org-grid-member { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.org-grid-waiter { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* ── 멤버 카드 ── */
.org-card {
    background: var(--bg-card);
    border: 1px solid var(--bd);
    border-radius: 14px;
    padding: 20px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    cursor: default;
    animation: fadeUpCard .45s both;
}
.org-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-md);
    border-color: var(--bd-s);
}

/* 대표 카드 강조 */
.org-card.card-leader {
    border-color: #d4b84a;
    background: linear-gradient(135deg, var(--bg-card) 70%, rgba(212,184,74,0.06));
    box-shadow: 0 4px 20px rgba(180,150,40,0.10);
}
.org-card.card-leader:hover {
    box-shadow: 0 8px 28px rgba(180,150,40,0.18);
    border-color: #c8a830;
}

/* 웨이터 카드 미묘한 그린 */
.org-card.card-waiter {
    border-color: rgba(80,160,140,0.25);
    background: linear-gradient(135deg, var(--bg-card) 80%, rgba(80,180,160,0.04));
}

/* ── 아바타 ── */
.org-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    position: relative;
    overflow: hidden;
    user-select: none;
}
.org-avatar-leader {
    background: linear-gradient(135deg, #f5e070, #c8980a);
    color: #5a3a00;
    box-shadow: 0 2px 10px rgba(200,152,10,0.35);
}
.org-avatar-member {
    background: linear-gradient(135deg, var(--lav-lt), var(--lav-mid));
    color: var(--ac);
}
[data-theme="dark"] .org-avatar-member {
    background: linear-gradient(135deg, rgba(126,87,194,0.3), rgba(126,87,194,0.15));
    color: var(--lav-mid);
}
.org-avatar-waiter {
    background: linear-gradient(135deg, rgba(100,200,180,0.25), rgba(60,170,150,0.15));
    color: #2e8a72;
}
[data-theme="dark"] .org-avatar-waiter { color: #6dd5b8; }

/* 대표 아바타 왕관 이모지 배지 */
.org-avatar-leader::after {
    content: '👑';
    position: absolute;
    top: -2px; right: -2px;
    font-size: 0.7rem;
    line-height: 1;
    z-index: 3;
}

/* 펄스 링 / LIVE 태그가 잘리지 않도록 아바타 overflow 풀기 */
.org-avatar { overflow: visible; }

/* ── 아바타 이미지 (라이브 썸네일 / 멤버 사진 / SOOP 프로필) ── */
.org-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
    z-index: 1;
}
.org-avatar-fallback {
    position: relative;
    z-index: 0;
}
.org-avatar.img-failed .org-avatar-fallback {
    z-index: 1;
}

/* ── 라이브 펄스 링 ── */
.org-avatar-live {
    box-shadow: 0 0 0 2px #ef4444, 0 0 0 5px rgba(239, 68, 68, 0.18);
}
.org-avatar-live-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid #ef4444;
    animation: liveRing 1.6s ease-out infinite;
    pointer-events: none;
    z-index: 2;
}
@keyframes liveRing {
    0%   { transform: scale(1);    opacity: 0.7; }
    100% { transform: scale(1.45); opacity: 0;   }
}
.org-avatar-live-tag {
    position: absolute;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 1px 6px;
    border-radius: 100px;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
    font-family: 'DM Sans', sans-serif;
}

/* ── 오프라인 상태: 미니멀 회색 점 ── */
.status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--t3);
    opacity: 0.45;
    margin-left: 4px;
    display: inline-block;
    vertical-align: middle;
}

/* 오프라인 카드: 아바타 약간 흐리게 */
.org-card-offline .org-avatar-img {
    filter: grayscale(0.45) brightness(0.95);
    opacity: 0.86;
    transition: filter .25s, opacity .25s;
}
.org-card-offline:hover .org-avatar-img {
    filter: grayscale(0) brightness(1);
    opacity: 1;
}

/* ── 카드 우측 라이브 프리뷰 (호버 시) ── */
.org-card { position: relative; }
.live-preview {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 16px;
    width: 280px;
    background: var(--bg-card);
    border: 1px solid var(--bd);
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0,0,0,0.18);
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    transition: opacity .22s, transform .22s;
    pointer-events: none;
    z-index: 100;
}
.live-preview img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    background: var(--bg2);
}
.live-preview-info {
    padding: 9px 12px 11px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.live-preview-title {
    flex: 1;
    font-size: 0.78rem;
    color: var(--t1);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.live-preview-viewers {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--ac);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.org-card-live:hover .live-preview {
    opacity: 1;
    transform: translateY(0) scale(1);
}
@media (max-width: 600px) {
    .live-preview { display: none; }
    .org-avatar-live-tag { font-size: 0.46rem; padding: 1px 5px; }
}

/* ── 카드 텍스트 ── */
.org-info { flex: 1; min-width: 0; }
.org-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--t1);
    letter-spacing: 0.02em;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.org-card.card-leader .org-name { color: #8a6510; font-size: 1.25rem; }
[data-theme="dark"] .org-card.card-leader .org-name { color: #e8c84a; }

.org-title-row {
    display: flex;
    align-items: center;
    gap: 7px;
}
.org-role-chip {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
    font-weight: 500;
}
.chip-leader { background: rgba(212,184,74,0.18); color: #9a7010; }
[data-theme="dark"] .chip-leader { color: #d4b84a; }
.chip-member { background: var(--ac-bg); color: var(--ac-txt); }
.chip-waiter { background: rgba(80,180,160,0.12); color: #2e8a72; }
[data-theme="dark"] .chip-waiter { color: #6dd5b8; }

.org-note { font-size: 0.71rem; color: var(--t3); margin-top: 2px; }

/* ── 통계 요약 바 ── */
.org-stats {
    display: flex;
    gap: 1px;
    background: var(--bd);
    border: 1px solid var(--bd);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 48px;
}
.org-stat {
    flex: 1;
    padding: 14px 18px;
    background: var(--bg-card);
    text-align: center;
    transition: background .2s;
}
.org-stat:hover { background: var(--bg2); }
.org-stat-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--ac);
    line-height: 1;
    margin-bottom: 3px;
}
.org-stat-lbl {
    font-size: 0.67rem;
    color: var(--t3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ── 뒤로가기 링크 ── */
.org-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--t3);
    margin-bottom: 32px;
    padding: 6px 0;
    transition: color .18s;
    letter-spacing: 0.03em;
}
.org-back:hover { color: var(--ac); }
.org-back svg { transition: transform .18s; }
.org-back:hover svg { transform: translateX(-3px); }

/* ── 애니메이션 ── */
@keyframes fadeUpCard {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.org-card:nth-child(1)  { animation-delay: .04s }
.org-card:nth-child(2)  { animation-delay: .08s }
.org-card:nth-child(3)  { animation-delay: .12s }
.org-card:nth-child(4)  { animation-delay: .16s }
.org-card:nth-child(5)  { animation-delay: .20s }
.org-card:nth-child(6)  { animation-delay: .24s }
.org-card:nth-child(7)  { animation-delay: .28s }
.org-card:nth-child(8)  { animation-delay: .32s }
.org-card:nth-child(9)  { animation-delay: .36s }
.org-card:nth-child(10) { animation-delay: .40s }
.org-card:nth-child(11) { animation-delay: .44s }
.org-card:nth-child(12) { animation-delay: .48s }

/* ── 연결선 (대표 → 멤버) ── */
.org-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 0;
    pointer-events: none;
}
.org-connector-line {
    width: 1px;
    height: 28px;
    background: linear-gradient(to bottom, var(--bd-s), var(--bd));
}
.org-connector-arrow {
    width: 6px; height: 6px;
    border-right: 1px solid var(--bd-s);
    border-bottom: 1px solid var(--bd-s);
    transform: rotate(45deg);
    margin-top: -4px;
}

/* ── 모바일 ── */
@media (max-width: 600px) {
    .org-page { padding: 28px 14px 60px; }
    .org-hero-title { font-size: 1.7rem; }
    .org-stats { flex-direction: column; gap: 0; }
    .org-grid-member { grid-template-columns: 1fr 1fr; }
    .org-avatar { width: 38px; height: 38px; font-size: 1.1rem; }
}